代码生成器优化，生成代码更加便捷

eladmin-system/src/main/resources/template/generator/front/eForm.ftl

-<template>
-  <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="isAdd ? '新增' : '编辑'" width="500px">
-    <el-form ref="form" :model="form" <#if isNotNullColumns??>:rules="rules"</#if> size="small" label-width="80px">
-<#if columns??>
-  <#list columns as column>
-  <#if column.formShow>
-      <el-form-item label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>" <#if column.istNotNull>prop="${column.changeColumnName}"</#if>>
-        <#if column.formType = 'Input'>
-        <el-input v-model="form.${column.changeColumnName}" style="width: 370px;"/>
-        <#elseif column.formType = 'Textarea'>
-        <el-input :rows="3" v-model="form.${column.changeColumnName}" type="textarea" style="width: 370px;"/>
-        <#elseif column.formType = 'Radio'>
-        <#if column.dictName??>
-        <el-radio v-for="item in dicts.${column.dictName}" :key="item.id" v-model="form.${column.changeColumnName}" :label="item.value">{{ item.label }}</el-radio>
-        <#else>
-        未设置字典，请手动设置 Radio
-        </#if>
-        <#elseif column.formType = 'Select'>
-          <#if column.dictName??>
-        <el-select v-model="form.${column.changeColumnName}" filterable placeholder="请选择">
-          <el-option
-            v-for="item in dicts.${column.dictName}"
-            :key="item.id"
-            :label="item.label"
-            :value="item.value"/>
-        </el-select>
-          <#else>
-          未设置字典，请手动设置 Select
-          </#if>
-        <#else>
-        <el-date-picker v-model="form.${column.changeColumnName}" type="datetime" style="width: 370px;"/>
-        </#if>
-      </el-form-item>
-  </#if>
-  </#list>
-</#if>
-    </el-form>
-    <div slot="footer" class="dialog-footer">
-      <el-button type="text" @click="cancel">取消</el-button>
-      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-import { add, edit } from '@/api/${changeClassName}'
-export default {
-  props: {
-    isAdd: {
-      type: Boolean,
-      required: true
-    }<#if hasDict>,
-    dicts: {
-      type: Object,
-      required: true
-    }
-    </#if>
-  },
-  data() {
-    return {
-      loading: false, dialog: false,
-      form: {
-<#if columns??>
-    <#list columns as column>
-        ${column.changeColumnName}: ''<#if column_has_next>,</#if>
-    </#list>
-</#if>
-      },
-      rules: {
-<#if isNotNullColumns??>
-<#list isNotNullColumns as column>
-<#if column.istNotNull>
-        ${column.changeColumnName}: [
-          { required: true, message: 'please enter', trigger: 'blur' }
-        ]<#if column_has_next>,</#if>
-</#if>
-</#list>
-</#if>
-      }
-    }
-  },
-  methods: {
-    cancel() {
-      this.resetForm()
-    },
-    doSubmit() {
-      <#if isNotNullColumns??>
-      this.$refs['form'].validate((valid) => {
-        if (valid) {
-          this.loading = true
-          if (this.isAdd) {
-            this.doAdd()
-          } else this.doEdit()
-        } else {
-          return false
-        }
-      })
-      <#else>
-        this.loading = true
-        if (this.isAdd) {
-          this.doAdd()
-        } else this.doEdit()
-      </#if>
-    },
-    doAdd() {
-      add(this.form).then(res => {
-        this.resetForm()
-        this.$notify({
-          title: '添加成功',
-          type: 'success',
-          duration: 2500
-        })
-        this.loading = false
-        this.$parent.init()
-      }).catch(err => {
-        this.loading = false
-        console.log(err.response.data.message)
-      })
-    },
-    doEdit() {
-      edit(this.form).then(res => {
-        this.resetForm()
-        this.$notify({
-          title: '修改成功',
-          type: 'success',
-          duration: 2500
-        })
-        this.loading = false
-        this.$parent.init()
-      }).catch(err => {
-        this.loading = false
-        console.log(err.response.data.message)
-      })
-    },
-    resetForm() {
-      this.dialog = false
-      this.$refs['form'].resetFields()
-      this.form = {
-<#if columns??>
-    <#list columns as column>
-        ${column.changeColumnName}: ''<#if column_has_next>,</#if>
-    </#list>
-</#if>
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

eladmin-system/src/main/resources/template/generator/front/index.ftl

@@ -5,137 +5,161 @@
     <div class="head-container">
     <#if hasQuery>
       <!-- 搜索 -->
-      <el-input v-model="query.value" clearable placeholder="输入搜索内容" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
+      <el-input v-model="query.value" clearable placeholder="输入搜索内容" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
       <el-select v-model="query.type" clearable placeholder="类型" class="filter-item" style="width: 130px">
-        <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
+        <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
       </el-select>
-<#if dateRanges??>
-  <#list dateRanges as column>
-    <#if column.queryType = 'DateRange'>
+<#if betweens??>
+  <#list betweens as column>
+    <#if column.queryType = 'BetWeen'>
       <el-date-picker
         v-model="query.${column.changeColumnName}"
         :default-time="['00:00:00','23:59:59']"
         type="daterange"
         range-separator=":"
-        class="el-range-editor--small filter-item"
-        style="height: 30.5px;width: 225px;"
+        size="small"
+        class="date-item"
         value-format="yyyy-MM-dd HH:mm:ss"
         start-placeholder="${column.changeColumnName}Start"
-        end-placeholder="${column.changeColumnName}End"/>
+        end-placeholder="${column.changeColumnName}End"
+      />
     </#if>
   </#list>
 </#if>
       <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
     </#if>
       <!-- 新增 -->
-      <div style="display: inline-block;margin: 0px 2px;">
-        <el-button
-          v-permission="['admin','${changeClassName}:add']"
-          class="filter-item"
-          size="mini"
-          type="primary"
-          icon="el-icon-plus"
-          @click="add">新增</el-button>
-      </div>
+      <el-button v-permission="['admin','${changeClassName}:add']" class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="showAddFormDialog">新增</el-button>
       <!-- 导出 -->
-      <div style="display: inline-block;">
-        <el-button
-          :loading="downloadLoading"
-          size="mini"
-          class="filter-item"
-          type="warning"
-          icon="el-icon-download"
-          @click="download">导出</el-button>
-      </div>
+      <el-button :loading="downloadLoading" size="mini" class="filter-item" type="warning" icon="el-icon-download" @click="downloadMethod">导出</el-button>
       <!-- 多选删除 -->
-      <div v-permission="['admin','${changeClassName}:del']" style="display: inline-block;">
-        <el-button
-          :loading="delAllLoading"
-          :disabled="data.length === 0 || $refs.table.selection.length === 0"
-          class="filter-item"
-          size="mini"
-          type="danger"
-          icon="el-icon-delete"
-          @click="open">删除</el-button>
-      </div>
-    </div>
-    <!--表单组件-->
-    <eForm ref="form" :is-add="isAdd" <#if hasDict>:dicts="dict"</#if>/>
-    <!--表格渲染-->
-    <el-table v-loading="loading" ref="table" :data="data" size="small" style="width: 100%;">
-      <el-table-column type="selection" width="55"/>
-      <#if columns??>
-          <#list columns as column>
-          <#if column.columnShow>
-        <#if column.dictName??>
-      <el-table-column prop="${column.changeColumnName}" label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>">
-        <template slot-scope="scope">
-          {{ dict.label.${column.dictName}[scope.row.${column.changeColumnName}] }}
-        </template>
-      </el-table-column>
-        <#elseif column.columnType != 'Timestamp'>
-      <el-table-column prop="${column.changeColumnName}" label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>"/>
+      <el-button v-permission="['admin','${changeClassName}:del']" :loading="delAllLoading" :disabled="data.length === 0 || $refs.table.selection.length === 0" class="filter-item" size="mini" type="danger" icon="el-icon-delete" @click="beforeDelAllMethod">删除</el-button>
+      <!--表单组件-->
+      <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="getFormTitle()" width="500px">
+        <el-form ref="form" :model="form" <#if isNotNullColumns??>:rules="rules"</#if> size="small" label-width="80px">
+    <#if columns??>
+      <#list columns as column>
+        <#if column.formShow>
+          <el-form-item label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>" <#if column.istNotNull>prop="${column.changeColumnName}"</#if>>
+            <#if column.formType = 'Input'>
+            <el-input v-model="form.${column.changeColumnName}" style="width: 370px;" />
+            <#elseif column.formType = 'Textarea'>
+            <el-input :rows="3" v-model="form.${column.changeColumnName}" type="textarea" style="width: 370px;" />
+            <#elseif column.formType = 'Radio'>
+              <#if column.dictName??>
+            <el-radio v-for="item in dict.${column.dictName}" :key="item.id" v-model="form.${column.changeColumnName}" :label="item.value">{{ item.label }}</el-radio>
               <#else>
-      <el-table-column prop="${column.changeColumnName}" label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.${column.changeColumnName}) }}</span>
-        </template>
-      </el-table-column>
+                未设置字典，请手动设置 Radio
               </#if>
-          </#if>
-          </#list>
-      </#if>
-      <el-table-column v-if="checkPermission(['admin','${changeClassName}:edit','${changeClassName}:del'])" label="操作" width="150px" align="center">
-        <template slot-scope="scope">
-          <el-button v-permission="['admin','${changeClassName}:edit']" size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"/>
-          <el-popover
-            v-permission="['admin','${changeClassName}:del']"
-            :ref="scope.row.${pkChangeColName}"
-            placement="top"
-            width="180">
-            <p>确定删除本条数据吗？</p>
-            <div style="text-align: right; margin: 0">
-              <el-button size="mini" type="text" @click="$refs[scope.row.${pkChangeColName}].doClose()">取消</el-button>
-              <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.${pkChangeColName})">确定</el-button>
-            </div>
-            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"/>
-          </el-popover>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!--分页组件-->
-    <el-pagination
-      :total="total"
-      :current-page="page + 1"
-      style="margin-top: 8px;"
-      layout="total, prev, pager, next, sizes"
-      @size-change="sizeChange"
-      @current-change="pageChange"/>
+            <#elseif column.formType = 'Select'>
+              <#if column.dictName??>
+            <el-select v-model="form.${column.changeColumnName}" filterable placeholder="请选择">
+              <el-option
+                v-for="item in dict.${column.dictName}"
+                :key="item.id"
+                :label="item.label"
+                :value="item.value" />
+            </el-select>
+              <#else>
+            未设置字典，请手动设置 Select
+              </#if>
+            <#else>
+            <el-date-picker v-model="form.${column.changeColumnName}" type="datetime" style="width: 370px;" />
+            </#if>
+          </el-form-item>
+        </#if>
+      </#list>
+    </#if>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="text" @click="cancel">取消</el-button>
+          <el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button>
+        </div>
+      </el-dialog>
+      <!--表格渲染-->
+      <el-table ref="table" v-loading="loading" :data="data" size="small" style="width: 100%;">
+        <el-table-column type="selection" width="55" />
+        <#if columns??>
+            <#list columns as column>
+            <#if column.columnShow>
+          <#if column.dictName??>
+        <el-table-column prop="${column.changeColumnName}" label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>">
+          <template slot-scope="scope">
+            {{ dict.label.${column.dictName}[scope.row.${column.changeColumnName}] }}
+          </template>
+        </el-table-column>
+          <#elseif column.columnType != 'Timestamp'>
+        <el-table-column prop="${column.changeColumnName}" label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>" />
+                <#else>
+        <el-table-column prop="${column.changeColumnName}" label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>">
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.${column.changeColumnName}) }}</span>
+          </template>
+        </el-table-column>
+                </#if>
+            </#if>
+            </#list>
+        </#if>
+        <el-table-column v-if="checkPermission(['admin','${changeClassName}:edit','${changeClassName}:del'])" label="操作" width="150px" align="center">
+          <template slot-scope="scope">
+            <el-button v-permission="['admin','${changeClassName}:edit']" size="mini" type="primary" icon="el-icon-edit" @click="showEditFormDialog(scope.row)" />
+            <el-popover
+              :ref="scope.row.${pkChangeColName}"
+              v-permission="['admin','${changeClassName}:del']"
+              placement="top"
+              width="180"
+            >
+              <p>确定删除本条数据吗？</p>
+              <div style="text-align: right; margin: 0">
+                <el-button size="mini" type="text" @click="$refs[scope.row.${pkChangeColName}].doClose()">取消</el-button>
+                <el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.${pkChangeColName})">确定</el-button>
+              </div>
+              <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
+            </el-popover>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!--分页组件-->
+      <el-pagination
+        :total="total"
+        :current-page="page + 1"
+        style="margin-top: 8px;"
+        layout="total, prev, pager, next, sizes"
+        @size-change="sizeChange"
+        @current-change="pageChange"
+      />
+    </div>
   </div>
 </template>
 
 <script>
-import checkPermission from '@/utils/permission'
-import initData from '@/mixins/initData'
-import { del, download${className}, delAll } from '@/api/${changeClassName}'
-<#if hasTimestamp>
-import { parseTime, downloadFile } from '@/utils/index'
-</#if>
-import eForm from './form'
+import crud from '@/mixins/crud'
+import crud${className} from '@/api/${changeClassName}'
 export default {
-  components: { eForm },
-  mixins: [initData],
+  mixins: [crud],
   <#if hasDict>
   dicts: [<#if hasDict??><#list dicts as dict>'${dict}'<#if dict_has_next>, </#if></#list></#if>],
   </#if>
   data() {
     return {
-      delLoading: false, delAllLoading: false,
-      <#if hasQuery>
+      title: '${apiAlias}',
+      crudMethod: { ...crud${className} },
+      form: { <#if columns??><#list columns as column>${column.changeColumnName}: null<#if column_has_next>, </#if></#list></#if> },
+      rules: {
+        <#if isNotNullColumns??>
+        <#list isNotNullColumns as column>
+        <#if column.istNotNull>
+        ${column.changeColumnName}: [
+          { required: true, message: '<#if column.remark != ''>${column.remark}</#if>不能为空', trigger: 'blur' }
+        ]<#if column_has_next>,</#if>
+        </#if>
+        </#list>
+        </#if>
+      }<#if hasQuery>,
       queryTypeOptions: [
         <#if queryColumns??>
         <#list queryColumns as column>
-        <#if column.queryType != 'DateRange'>
+        <#if column.queryType != 'BetWeen'>
         { key: '${column.changeColumnName}', display_name: '<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>' }<#if column_has_next>,</#if>
         </#if>
         </#list>
@@ -150,10 +174,7 @@ export default {
     })
   },
   methods: {
-  <#if hasTimestamp>
-    parseTime,
-  </#if>
-    checkPermission,
+    // 获取数据前设置好接口地址
     beforeInit() {
       this.url = 'api/${changeClassName}'
       const sort = '${pkChangeColName},desc'
@@ -163,93 +184,8 @@ export default {
       const type = query.type
       const value = query.value
       if (type && value) { this.params[type] = value }
-      <#if dateRanges??>
-      <#list dateRanges as column>
-      <#if column.queryType = 'DateRange'>
-      if (query.${column.changeColumnName}) {
-        this.params['${column.changeColumnName}Start'] = query.${column.changeColumnName}[0]
-        this.params['${column.changeColumnName}End'] = query.${column.changeColumnName}[1]
-      }
-      </#if>
-      </#list>
-      </#if>
       </#if>
       return true
-    },
-    subDelete(${pkChangeColName}) {
-      this.delLoading = true
-      del(${pkChangeColName}).then(res => {
-        this.delLoading = false
-        this.$refs[${pkChangeColName}].doClose()
-        this.dleChangePage()
-        this.init()
-        this.$notify({
-          title: '删除成功',
-          type: 'success',
-          duration: 2500
-        })
-      }).catch(err => {
-        this.delLoading = false
-        this.$refs[${pkChangeColName}].doClose()
-        console.log(err.response.data.message)
-      })
-    },
-    add() {
-      this.isAdd = true
-      this.$refs.form.dialog = true
-    },
-    edit(data) {
-      this.isAdd = false
-      const _this = this.$refs.form
-      _this.form = {
-        <#if columns??>
-        <#list columns as column>
-        ${column.changeColumnName}: data.${column.changeColumnName}<#if column_has_next>,</#if>
-        </#list>
-        </#if>
-      }
-      _this.dialog = true
-    },
-    // 导出
-    download() {
-      this.beforeInit()
-      this.downloadLoading = true
-      download${className}(this.params).then(result => {
-        downloadFile(result, '${className}列表', 'xlsx')
-        this.downloadLoading = false
-      }).catch(() => {
-        this.downloadLoading = false
-      })
-    },
-    doDelete() {
-      this.delAllLoading = true
-      const data = this.$refs.table.selection
-      const ids = []
-      for (let i = 0; i < data.length; i++) {
-        ids.push(data[i].id)
-      }
-      delAll(ids).then(res => {
-        this.delAllLoading = false
-        this.init()
-        this.dleChangePage(ids.length)
-        this.$notify({
-          title: '删除成功',
-          type: 'success',
-          duration: 2500
-        })
-      }).catch(err => {
-        this.delAllLoading = false
-        console.log(err.response.data.message)
-      })
-    },
-    open() {
-      this.$confirm('你确定删除选中的数据吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.doDelete()
-      })
     }
   }
 }