优化生成代码

als-modules/generator/src/main/resources/vm/vue/index-tree.vue.vm

@@ -3,7 +3,7 @@
         <ProTable ref="proTable" :pagination="false" :columns="columns" row-key="${pkColumn.javaField}" :request-api="list${BusinessName}Api" :init-param="initParam" :data-callback="dataCallback">
             <!-- 表格 header 按钮 -->
             <template #tableHeader>
-                <el-button type="primary" v-auth="['${moduleName}:${businessName}:add']" :icon="CirclePlus" @click="openDialog(1, '${functionName}新增')">
+                <el-button type="primary" v-auth="['${moduleName}:${businessName}:add']" icon="CirclePlus" @click="openDialog(1, '${functionName}新增')">
                     新增
                 </el-button>
             </template>
@@ -12,7 +12,7 @@
                 <el-button
                     type="primary"
                     link
-                    :icon="EditPen"
+                    icon="EditPen"
                     v-auth="['${moduleName}:${businessName}:edit']"
                     @click="openDialog(2, '${functionName}编辑', scope.row)"
                 >
@@ -22,34 +22,30 @@
                     type="primary"
                     link
                     v-auth="['${moduleName}:${businessName}:add']"
-                    :icon="CirclePlus"
+                    icon="CirclePlus"
                     @click="openDialog(4, '${functionName}新增', scope.row)"
                 >
                     新增
                 </el-button>
                 <el-button type="primary"
                            link
-                           v-if="scope.row.${treeParentCode} != 0"
-                           :icon="Delete" v-auth="['${moduleName}:${businessName}:remove']"
+                           icon="Delete" v-auth="['${moduleName}:${businessName}:remove']"
                            @click="delete${BusinessName}(scope.row)"
                 >
                     删除
                 </el-button>
             </template>
         </ProTable>
-        <FormDialog ref="formDialogRef" />
+        <FormDialog ref="formDialogRef" :items-options="itemsOptions" :model="model"/>
         <ImportExcel ref="dialogRef" />
     </div>
 </template>
 
 <script setup lang="tsx" name="${BusinessName}">
-    import { ref, reactive } from 'vue'
     import { useHandleData } from '@/hooks/useHandleData'
-    import ProTable from '@/components/ProTable/index.vue'
     import ImportExcel from '@/components/ImportExcel/index.vue'
     import FormDialog from '@/components/FormDialog/index.vue'
     import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
-    import { Delete, EditPen, CirclePlus } from '@element-plus/icons-vue'
     import { handleTree } from '@/utils/common'
     import {
         list${BusinessName}Api,
@@ -59,26 +55,30 @@
         get${BusinessName}Api
     } from '@/api/modules/${moduleName}/${businessName}'
         #if(${dicts} != '')
-        import { getDictsApi } from '@/api/modules/system/dictData'
+            #set($dictsNoSymbol=$dicts.replace("'", ""))
+        const { proxy } = getCurrentInstance() as ComponentInternalInstance
+        const { ${dictsNoSymbol} } = toRefs<any>(proxy?.useDict(${dicts}));
         #end
 
     // ProTable 实例
     const proTable = ref<ProTableInstance>()
-
+    // 表单model
+    const model = ref({})
     // 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
-    const initParam = reactive({ type: 1 })
+    const initParam = reactive({})
     const ${businessName}Options = ref<any[]>([])
     // dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，可以在这里进行处理成这些字段
     const dataCallback = (res: any) => {
         const data = handleTree(res, '${pkColumn.javaField}')
-            ${businessName}Options.value = data
-        setFieldList()
+            ${businessName}Options.value = Object.assign([], data)
+            ${businessName}Options.value.push({ ${pkColumn.javaField}: 0, ${treeName}: '顶层', children: null })
+        setItemsOptions()
         return data
     }
 
     // 删除${functionName}信息
     const delete${BusinessName} = async (params: any) => {
-        await useHandleData(del${BusinessName}Api, { id: [params.${pkColumn.javaField}] }, `删除【${params.id}】${functionName}`)
+        await useHandleData(del${BusinessName}Api, params.${pkColumn.javaField}, '删除【' + params.${treeName} + '】${functionName}')
         proTable.value?.getTableList()
     }
 
@@ -90,23 +90,22 @@
             res = await get${BusinessName}Api(row?.${pkColumn.javaField} || null)
         }
         // 重置表单项
-        setFieldList()
+        setItemsOptions()
         if (row?.${treeParentCode} == 0 && type == 2) {
-            fieldList.splice(0, 1)
+            itemsOptions.splice(0, 1)
         }
         // 增加子节点
-        if (type == 4 && row?.${treeParentCode}) {
+        if (type == 4) {
             res.data = {
-                parentId: row?.${treeParentCode}
+                parentId: row?.${pkColumn.javaField}
             }
         }
+        model.value = type == 1 ? {} : res.data
         const params = {
             title,
             width: 580,
             isEdit: type !== 3,
-            fieldList: fieldList,
-            model: type == 1 ? {} : res.data,
-            api: type == 1 || type == 4 ? add${BusinessName}Api : update${BusinessName}Api,
+            api: [1, 4].includes(type) ? add${BusinessName}Api : update${BusinessName}Api,
             getTableList: proTable.value?.getTableList
         }
         formDialogRef.value?.openDialog(params)
@@ -138,19 +137,30 @@
                     #end
                     width: 120
                 },
-            #elseif($column.list && "" != $column.dictType)
+            #elseif($column.list && $column.htmlType == "input-number")
+                {
+                    prop: '${javaField}',
+                    label: '${comment}',
+                    #if($column.query)
+                        search: {
+                            el: 'input',
+                        },
+                    #else
+                    #end
+                    width: 120
+                },
+            #elseif($column.list && $column.dictType && "" != $column.dictType)
                 {
                     prop: '${javaField}',
                     label: '${comment}',
                     tag: true,
-                    enum: () => getDictsApi('$column.dictType'),
+                    enum: ${businessName}Options,
                     #if($column.query)
                         search: {
                             el: 'tree-select'
                         },
                     #else
                     #end
-                    fieldNames: { label: 'dictLabel', value: 'dictValue' }
                 },
             #elseif($column.list && "" != $javaField)
                 {
@@ -168,11 +178,10 @@
         #end
         { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
     ])
-
     // 表单配置项
-    let fieldList: Form.FieldItem[] = []
-    const setFieldList = () => {
-        fieldList = [
+    let itemsOptions = reactive<ProForm.ItemsOptions[]>([])
+    const setItemsOptions = () => {
+        itemsOptions = [
             #foreach($column in $columns)
                 #set($field=$column.javaField)
                 #if($column.insert && !$column.pk)
@@ -184,112 +193,131 @@
                             #set($comment=$column.columnComment)
                         #end
                         #set($dictType=$column.dictType)
-                        #if("" != $treeParentCode && $column.javaField == $treeParentCode)
+                        #if(${field} == "parentId")
                             {
                                 label: '${comment}',
-                                field: '${field}',
-                                enum: ${businessName}Options.value,
-                                type: 'select-tree',
+                                prop: '${field}',
                                 #if($column.required)
-                                    rules: [{required: true, message: '${comment}不能为空', trigger: 'change'}],
+                                    rules: [{required: true, message: '${comment}不能为空', trigger: 'blur'}],
                                 #else
                                 #end
-                                options: {
-                                    labelKey: '${treeName}',
-                                    valueKey: '${treeParentCode}',
-                                    children: 'children'
-                                },
-                                placeholder: '请选择${comment}'
+                                compOptions: {
+                                    elTagName: 'tree-select',
+                                    enum: ${businessName}Options.value,
+                                    valueKey: '${pkColumn.javaField}',
+                                    checkStrictly: true,
+                                    props: {
+                                        value: '${pkColumn.javaField}',
+                                        label: '${treeName}'
+                                    },
+                                    placeholder: '请选择${comment}'
+                                }
                             },
                         #elseif($column.htmlType == "input")
                             {
                                 label: '${comment}',
-                                field: '${field}',
+                                prop: '${field}',
+                                #if($column.required)
+                                    rules: [{required: true, message: '${comment}不能为空', trigger: 'blur'}],
+                                #else
+                                #end
+                                compOptions: {
+                                    placeholder: '请输入${comment}'
+                                }
+                            },
+                        #elseif($column.htmlType == "input-number")
+                            {
+                                label: '${comment}',
+                                prop: '${field}',
                                 #if($column.required)
                                     rules: [{required: true, message: '${comment}不能为空', trigger: 'blur'}],
                                 #else
                                 #end
-                                placeholder: '请输入${comment}'
+                                compOptions: {
+                                    elTagName: 'input-number',
+                                }
                             },
                         #elseif($column.htmlType == "select" && "" != $dictType)
                             {
                                 label: '${comment}',
-                                field: '${field}',
-                                enum: () => getDictsApi('$dictType'),
-                                type: 'select',
+                                prop: '${field}',
                                 #if($column.required)
                                     rules: [{required: true, message: '${comment}不能为空', trigger: 'change'}],
                                 #else
                                 #end
-                                options: {
-                                    labelKey: 'dictLabel',
-                                    valueKey: 'dictValue'
-                                },
-                                placeholder: '请选择${comment}'
+                                compOptions: {
+                                    elTagName: 'select',
+                                    enum: ${column.dictType}.value,
+                                    placeholder: '请选择${comment}'
+                                }
                             },
                         #elseif($column.htmlType == "checkbox" && "" != $dictType)
                             {
                                 label: '${comment}',
-                                field: '${field}',
-                                enum: () => getDictsApi('$dictType'),
-                                type: 'checkbox',
+                                prop: '${field}',
                                 #if($column.required)
                                     rules: [{required: true, message: '${comment}不能为空', trigger: 'change'}],
                                 #else
                                 #end
-                                options: {
-                                    labelKey: 'dictLabel',
-                                    valueKey: 'dictValue'
-                                },
-                                placeholder: '请选择${comment}'
+                                compOptions: {
+                                    elTagName: 'checkbox-group',
+                                    enum: ${column.dictType}.value,
+                                    placeholder: '请选择${comment}'
+                                }
                             },
                         #elseif($column.htmlType == "radio" && "" != $dictType)
                             {
                                 label: '${comment}',
-                                field: '${field}',
-                                enum: () => getDictsApi('$dictType'),
-                                type: 'radio',
+                                prop: '${field}',
                                 #if($column.required)
                                     rules: [{required: true, message: '${comment}不能为空', trigger: 'change'}],
                                 #else
                                 #end
-                                options: {
-                                    labelKey: 'dictLabel',
-                                    valueKey: 'dictValue'
-                                },
-                                placeholder: '请选择${comment}'
+                                compOptions: {
+                                    elTagName: 'radio-group',
+                                    enum: ${column.dictType}.value,
+                                    placeholder: '请选择${comment}'
+                                }
                             },
                         #elseif($column.htmlType == "datetime")
                             {
                                 label: '${comment}',
-                                field: '${field}',
-                                type: 'date-picker',
+                                prop: '${field}',
                                 #if($column.required)
                                     rules: [{required: true, message: '${comment}不能为空', trigger: 'change'}],
                                 #else
                                 #end
-                                placeholder: '请选择${comment}'
+                                compOptions: {
+                                    elTagName: 'date-picker',
+                                    type: 'date',
+                                    placeholder: '请选择${comment}'
+                                }
                             },
                         #elseif($column.htmlType == "textarea")
                             {
                                 label: '${comment}',
-                                field: '${field}',
-                                type: 'textarea',
+                                prop: '${field}',
                                 #if($column.required)
                                     rules: [{required: true, message: '${comment}不能为空', trigger: 'blur'}],
                                 #else
                                 #end
-                                placeholder: '请输入内容'
+                                compOptions: {
+                                    type: 'textarea',
+                                    clearable: true,
+                                    placeholder: '请输入内容'
+                                }
                             },
                         #else
                             {
                                 label: '${comment}',
-                                field: '${field}',
+                                prop: '${field}',
                                 #if($column.required)
                                     rules: [{required: true, message: '${comment}不能为空', trigger: 'blur'}],
                                 #else
                                 #end
-                                placeholder: '请输入${comment}'
+                                compOptions: {
+                                    placeholder: '请输入${comment}'
+                                }
                             },
                         #end
                     #end

als-modules/generator/src/main/resources/vm/vue/index.vue.vm

@@ -158,7 +158,7 @@ const columns = reactive<ColumnProps<any>[]>([
     #end
     width: 120
   },
-        #elseif($column.list && "" != $column.dictType)
+        #elseif($column.list && $column.dictType && "" != $column.dictType)
   {
     prop: '${javaField}',
     label: '${comment}',
@@ -256,6 +256,18 @@ const setItemsOptions = () => {
         placeholder: '请选择${comment}'
       }
     },
+#elseif($column.htmlType == "input-number")
+    {
+        label: '${comment}',
+        prop: '${field}',
+        #if($column.required)
+            rules: [{required: true, message: '${comment}不能为空', trigger: 'blur'}],
+        #else
+        #end
+        compOptions: {
+            elTagName: 'input-number',
+        }
+    },
         #elseif($column.htmlType == "datetime")
     {
       label: '${comment}',