生成vue3文件模板优化

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

@@ -1,316 +1,305 @@
 <template>
-    <div class="table-box">
-        <ProTable ref="proTable" :columns="columns" row-key="${pkColumn.javaField}" :request-api="list${BusinessName}Api" >
-            <!-- 表格 header 按钮 -->
-            <template #tableHeader="scope">
-                <el-button type="primary" v-auth="['${moduleName}:${businessName}:add']" icon="CirclePlus" @click="openDialog(1, '${functionName}新增')">
-                    新增
-                </el-button>
-                <el-button type="primary" v-auth="['${moduleName}:${businessName}:import']" icon="Upload" plain @click="batchAdd">
-                    导入
-                </el-button>
-                <el-button type="primary" v-auth="['${moduleName}:${businessName}:export']" icon="Download" plain @click="downloadFile">
-                    导出
-                </el-button>
-                <el-button
-                    type="danger"
-                    v-auth="['${moduleName}:${businessName}:remove']"
-                    icon="Delete"
-                    plain
-                    :disabled="!scope.isSelected"
-                    @click="batchDelete(scope.selectedListIds)"
-                >
-                    批量删除
-                </el-button>
-            </template>
-            <!-- 表格操作 -->
-            <template #operation="scope">
-                <el-button
-                    type="primary"
-                    link
-                    icon="View"
-                    v-auth="['${moduleName}:${businessName}:query']"
-                    @click="openDialog(3, '${functionName}查看', scope.row)"
-                >
-                    查看
-                </el-button>
-                <el-button
-                    type="primary"
-                    link
-                    icon="EditPen"
-                    v-auth="['${moduleName}:${businessName}:edit']"
-                    @click="openDialog(2, '${functionName}编辑', scope.row)"
-                >
-                    编辑
-                </el-button>
-                <el-button type="primary" link icon="Delete" v-auth="['${moduleName}:${businessName}:remove']" @click="delete${BusinessName}(scope.row)">
-                    删除
-                </el-button>
-            </template>
-        </ProTable>
-        <FormDialog ref="formDialogRef" />
-        <ImportExcel ref="dialogRef" />
-    </div>
+  <div class="table-box">
+    <ProTable ref="proTable" :columns="columns" row-key="${pkColumn.javaField}" :request-api="list${BusinessName}Api" >
+    <!-- 表格 header 按钮 -->
+    <template #tableHeader="scope">
+      <el-button type="primary" v-auth="['${moduleName}:${businessName}:add']" icon="CirclePlus" @click="openDialog(1, '${functionName}新增')">
+        新增
+      </el-button>
+      <el-button type="primary" v-auth="['${moduleName}:${businessName}:import']" icon="Upload" plain @click="batchAdd">
+        导入
+      </el-button>
+      <el-button type="primary" v-auth="['${moduleName}:${businessName}:export']" icon="Download" plain @click="downloadFile">
+        导出
+      </el-button>
+      <el-button
+        type="danger"
+        v-auth="['${moduleName}:${businessName}:remove']"
+        icon="Delete"
+        plain
+        :disabled="!scope.isSelected"
+        @click="batchDelete(scope.selectedListIds)"
+      >
+        批量删除
+      </el-button>
+    </template>
+    <!-- 表格操作 -->
+    <template #operation="scope">
+      <el-button
+        type="primary"
+        link
+        icon="View"
+        v-auth="['${moduleName}:${businessName}:query']"
+        @click="openDialog(3, '${functionName}查看', scope.row)"
+      >
+        查看
+      </el-button>
+      <el-button
+        type="primary"
+        link
+        icon="EditPen"
+        v-auth="['${moduleName}:${businessName}:edit']"
+        @click="openDialog(2, '${functionName}编辑', scope.row)"
+      >
+        编辑
+      </el-button>
+      <el-button type="primary" link icon="Delete" v-auth="['${moduleName}:${businessName}:remove']" @click="delete${BusinessName}(scope.row)">
+        删除
+      </el-button>
+    </template>
+  </ProTable>
+  <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 { useDownload } from '@/hooks/useDownload'
-    import { ElMessageBox } from 'element-plus'
-    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 {
-        list${BusinessName}Api,
-        del${BusinessName}Api,
-        add${BusinessName}Api,
-        update${BusinessName}Api,
-        importTemplateApi,
-        import${BusinessName}DataApi,
-        export${BusinessName}Api,
-        get${BusinessName}Api
-    } from '@/api/modules/${moduleName}/${businessName}'
-        #if(${dicts} != '')
-        import { getDictsApi } from '@/api/modules/system/dictData'
-        #end
-
-    // ProTable 实例
-    const proTable = ref<ProTableInstance>()
+import { useHandleData } from '@/hooks/useHandleData'
+import { useDownload } from '@/hooks/useDownload'
+import { ElMessageBox } from 'element-plus'
+import ImportExcel from '@/components/ImportExcel/index.vue'
+import FormDialog from '@/components/FormDialog/index.vue'
+import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
+import {
+  list${BusinessName}Api,
+  del${BusinessName}Api,
+  add${BusinessName}Api,
+  update${BusinessName}Api,
+  importTemplateApi,
+  import${BusinessName}DataApi,
+  export${BusinessName}Api,
+  get${BusinessName}Api
+} from '@/api/modules/${moduleName}/${businessName}'
+#if(${dicts} != '')
+    #set($dictsNoSymbol=$dicts.replace("'", ""))
+const { proxy } = getCurrentInstance() as ComponentInternalInstance
+const { ${dictsNoSymbol} } = toRefs<any>(proxy?.useDict(${dicts}));
+#end
 
-    // 删除${functionName}信息
-    const delete${BusinessName} = async (params: any) => {
-        await useHandleData(del${BusinessName}Api, params.${pkColumn.javaField}, '删除【' + params.${pkColumn.javaField} + '】${functionName}')
-        proTable.value?.getTableList()
-    }
+// ProTable 实例
+const proTable = ref<ProTableInstance>()
+// 表单model
+const model = ref({})
+// 删除${functionName}信息
+const delete${BusinessName} = async (params: any) => {
+  await useHandleData(del${BusinessName}Api, params.${pkColumn.javaField}, '删除【' + params.${pkColumn.javaField} + '】${functionName}')
+  proTable.value?.getTableList()
+}
 
-    // 批量删除${functionName}信息
-    const batchDelete = async (ids: string[]) => {
-        await useHandleData(del${BusinessName}Api, ids, '删除所选${functionName}信息')
-        proTable.value?.clearSelection()
-        proTable.value?.getTableList()
-    }
+// 批量删除${functionName}信息
+const batchDelete = async (ids: string[]) => {
+  await useHandleData(del${BusinessName}Api, ids, '删除所选${functionName}信息')
+  proTable.value?.clearSelection()
+  proTable.value?.getTableList()
+}
 
-    // 导出${functionName}列表
-    const downloadFile = async () => {
-        ElMessageBox.confirm('确认导出${functionName}数据?', '温馨提示', { type: 'warning' }).then(() =>
-            useDownload(export${BusinessName}Api, '${functionName}列表', proTable.value?.searchParam)
-        )
-    }
+// 导出${functionName}列表
+const downloadFile = async () => {
+  ElMessageBox.confirm('确认导出${functionName}数据?', '温馨提示', { type: 'warning' }).then(() =>
+    useDownload(export${BusinessName}Api, '${functionName}列表', proTable.value?.searchParam)
+  )
+}
 
-    // 批量添加${functionName}
-    const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
-    const batchAdd = () => {
-        const params = {
-            title: '${functionName}',
-            tempApi: importTemplateApi,
-            importApi: import${BusinessName}DataApi,
-            getTableList: proTable.value?.getTableList
-        }
-        dialogRef.value?.acceptParams(params)
-    }
+// 批量添加${functionName}
+const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
+const batchAdd = () => {
+  const params = {
+    title: '${functionName}',
+    tempApi: importTemplateApi,
+    importApi: import${BusinessName}DataApi,
+    getTableList: proTable.value?.getTableList
+  }
+  dialogRef.value?.acceptParams(params)
+}
 
-    const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
-    // 打开弹框的功能
-    const openDialog = async (type: number, title: string, row?: any) => {
-        let res = { data: {} }
-        if (row?.${pkColumn.javaField}) {
-            res = await get${BusinessName}Api(row?.${pkColumn.javaField} || null)
-        }
-        // 重置表单
-        setItemsOptions()
-        const params = {
-            title,
-            width: 580,
-            isEdit: type !== 3,
-            itemsOptions: itemsOptions,
-            model: type == 1 ? {} : res.data,
-            api: type == 1 ? add${BusinessName}Api : update${BusinessName}Api,
-            getTableList: proTable.value?.getTableList
-        }
-        formDialogRef.value?.openDialog(params)
-    }
+const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
+// 打开弹框的功能
+const openDialog = async (type: number, title: string, row?: any) => {
+  let res = { data: {} }
+  if (row?.${pkColumn.javaField}) {
+      res = await get${BusinessName}Api(row?.${pkColumn.javaField} || null)
+  }
+  model.value = type == 1 ? {} : res.data
+  // 重置表单
+  setItemsOptions()
+  const params = {
+    title,
+    width: 580,
+    isEdit: type !== 3,
+    api: type == 1 ? add${BusinessName}Api : update${BusinessName}Api,
+    getTableList: proTable.value?.getTableList
+  }
+  formDialogRef.value?.openDialog(params)
+}
 
-    // 表格配置项
-    const columns = reactive<ColumnProps<any>[]>([
-        { type: 'selection', fixed: 'left', width: 70 },
-        #foreach($column in $columns)
-            #set($javaField=$column.javaField)
-            #set($parentheseIndex=$column.columnComment.indexOf("（"))
-            #if($parentheseIndex != -1)
-                #set($comment=$column.columnComment.substring(0, $parentheseIndex))
-            #else
-                #set($comment=$column.columnComment)
-            #end
-            #if($column.pk)
-                { prop: '${javaField}', label: '${comment}' },
-            #elseif($column.list && $column.htmlType == "datetime")
-                {
-                    prop: '${javaField}',
-                    label: '${comment}',
-                    #if($column.query)
-                        search: {
-                            el: 'date-picker',
-                            props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
-                        },
-                    #else
-                    #end
-                    width: 120
-                },
-            #elseif($column.list && "" != $column.dictType)
-                {
-                    prop: '${javaField}',
-                    label: '${comment}',
-                    tag: true,
-                    enum: () => getDictsApi('$column.dictType'),
-                    #if($column.query)
-                        search: {
-                            el: 'tree-select'
-                        },
-                    #else
-                    #end
-                    fieldNames: { label: 'dictLabel', value: 'dictValue' }
-                },
-            #elseif($column.list && "" != $javaField)
-                {
-                    prop: '${javaField}',
-                    label: '${comment}',
-                    #if($column.query)
-                        search: {
-                            el: 'input'
-                        },
-                    #else
-                    #end
-                    width: 120
-                },
-            #end
+// 表格配置项
+const columns = reactive<ColumnProps<any>[]>([
+  { type: 'selection', fixed: 'left', width: 70 },
+    #foreach($column in $columns)
+        #set($javaField=$column.javaField)
+        #set($parentheseIndex=$column.columnComment.indexOf("（"))
+        #if($parentheseIndex != -1)
+            #set($comment=$column.columnComment.substring(0, $parentheseIndex))
+        #else
+            #set($comment=$column.columnComment)
         #end
-        { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
+        #if($column.pk)
+  { prop: '${javaField}', label: '${comment}' },
+        #elseif($column.list && $column.htmlType == "datetime")
+  {
+    prop: '${javaField}',
+    label: '${comment}',
+    #if($column.query)
+    search: {
+      el: 'date-picker',
+      props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
+    },
+    #else
+    #end
+    width: 120
+  },
+        #elseif($column.list && "" != $column.dictType)
+  {
+    prop: '${javaField}',
+    label: '${comment}',
+    tag: true,
+    enum: ${column.dictType},
+    #if($column.query)
+    search: {
+      el: 'tree-select'
+    },
+    #else
+    #end
+  },
+        #elseif($column.list && "" != $javaField)
+  {
+    prop: '${javaField}',
+    label: '${comment}',
+    #if($column.query)
+    search: {
+      el: 'input'
+    },
+    #else
+    #end
+    width: 120
+  },
+        #end
+    #end
+  { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
     ])
-    // 表单配置项
-    let itemsOptions: ProForm.ItemsOptions[] = []
-    const setItemsOptions = () => {
-        itemsOptions = [
-            #foreach($column in $columns)
-                #set($field=$column.javaField)
-                #if($column.insert && !$column.pk)
-                    #if(($column.usableColumn) || (!$column.superColumn))
-                        #set($parentheseIndex=$column.columnComment.indexOf("（"))
-                        #if($parentheseIndex != -1)
-                            #set($comment=$column.columnComment.substring(0, $parentheseIndex))
-                        #else
-                            #set($comment=$column.columnComment)
-                        #end
-                        #set($dictType=$column.dictType)
-                        #if($column.htmlType == "input")
-                            {
-                                label: '${comment}',
-                                prop: '${field}',
-                                #if($column.required)
-                                    rules: [{required: true, message: '${comment}不能为空', trigger: 'blur'}],
-                                #else
-                                #end
-                                compOptions: {
-                                    placeholder: '请输入${comment}'
-                                }
-                            },
-                        #elseif($column.htmlType == "select" && "" != $dictType)
-                            {
-                                label: '${comment}',
-                                prop: '${field}',
-                                #if($column.required)
-                                    rules: [{required: true, message: '${comment}不能为空', trigger: 'change'}],
-                                #else
-                                #end
-                                compOptions: {
-                                    elTagName: 'select',
-                                    labelKey: 'dictLabel',
-                                    valueKey: 'dictValue',
-                                    enum: () => getDictsApi('$dictType'),
-                                    placeholder: '请选择${comment}'
-                                }
-                            },
-                        #elseif($column.htmlType == "checkbox" && "" != $dictType)
-                            {
-                                label: '${comment}',
-                                prop: '${field}',
-                                #if($column.required)
-                                    rules: [{required: true, message: '${comment}不能为空', trigger: 'change'}],
-                                #else
-                                #end
-                                compOptions: {
-                                    elTagName: 'checkbox-group',
-                                    labelKey: 'dictLabel',
-                                    valueKey: 'dictValue',
-                                    enum: () => getDictsApi('$dictType'),
-                                    placeholder: '请选择${comment}'
-                                }
-                            },
-                        #elseif($column.htmlType == "radio" && "" != $dictType)
-                            {
-                                label: '${comment}',
-                                prop: '${field}',
-                                #if($column.required)
-                                    rules: [{required: true, message: '${comment}不能为空', trigger: 'change'}],
-                                #else
-                                #end
-                                options: {
-                                    labelKey: 'dictLabel',
-                                    valueKey: 'dictValue'
-                                },
-                                compOptions: {
-                                    elTagName: 'radio-group',
-                                    labelKey: 'dictLabel',
-                                    valueKey: 'dictValue',
-                                    enum: () => getDictsApi('$dictType'),
-                                    placeholder: '请选择${comment}'
-                                }
-                            },
-                        #elseif($column.htmlType == "datetime")
-                            {
-                                label: '${comment}',
-                                prop: '${field}',
-                                #if($column.required)
-                                    rules: [{required: true, message: '${comment}不能为空', trigger: 'change'}],
-                                #else
-                                #end
-                                compOptions: {
-                                    elTagName: 'date-picker',
-                                    type: 'date',
-                                    placeholder: '请选择${comment}'
-                                }
-                            },
-                        #elseif($column.htmlType == "textarea")
-                            {
-                                label: '${comment}',
-                                prop: '${field}',
-                                #if($column.required)
-                                    rules: [{required: true, message: '${comment}不能为空', trigger: 'blur'}],
-                                #else
-                                #end
-                                compOptions: {
-                                    type: 'textarea',
-                                    clearable: true,
-                                    placeholder: '请输入内容'
-                                }
-                            },
-                        #else
-                            {
-                                label: '${comment}',
-                                prop: '${field}',
-                                #if($column.required)
-                                    rules: [{required: true, message: '${comment}不能为空', trigger: 'blur'}],
-                                #else
-                                #end
-                                compOptions: {
-                                    placeholder: '请输入${comment}'
-                                }
-                            },
-                        #end
-                    #end
+// 表单配置项
+let itemsOptions = ref<ProForm.ItemsOptions[]>([])
+const setItemsOptions = () => {
+  itemsOptions.value = [
+    #foreach($column in $columns)
+        #set($field=$column.javaField)
+        #if($column.insert && !$column.pk)
+            #if(($column.usableColumn) || (!$column.superColumn))
+                #set($parentheseIndex=$column.columnComment.indexOf("（"))
+                #if($parentheseIndex != -1)
+                    #set($comment=$column.columnComment.substring(0, $parentheseIndex))
+                #else
+                    #set($comment=$column.columnComment)
+                #end
+                #set($dictType=$column.dictType)
+                #if($column.htmlType == "input")
+    {
+      label: '${comment}',
+      prop: '${field}',
+      #if($column.required)
+        rules: [{required: true, message: '${comment}不能为空', trigger: 'blur'}],
+      #else
+      #end
+      compOptions: {
+        placeholder: '请输入${comment}'
+      }
+    },
+        #elseif($column.htmlType == "select" && "" != $dictType)
+    {
+      label: '${comment}',
+      prop: '${field}',
+      #if($column.required)
+        rules: [{required: true, message: '${comment}不能为空', trigger: 'change'}],
+      #else
+      #end
+      compOptions: {
+        elTagName: 'select',
+        enum: ${column.dictType}.value,
+        placeholder: '请选择${comment}'
+      }
+    },
+        #elseif($column.htmlType == "checkbox" && "" != $dictType)
+    {
+      label: '${comment}',
+      prop: '${field}',
+      #if($column.required)
+        rules: [{required: true, message: '${comment}不能为空', trigger: 'change'}],
+      #else
+      #end
+      compOptions: {
+        elTagName: 'checkbox-group',
+        enum: ${column.dictType}.value,
+        placeholder: '请选择${comment}'
+      }
+    },
+        #elseif($column.htmlType == "radio" && "" != $dictType)
+    {
+      label: '${comment}',
+      prop: '${field}',
+      #if($column.required)
+        rules: [{required: true, message: '${comment}不能为空', trigger: 'change'}],
+      #else
+      #end
+      compOptions: {
+        elTagName: 'radio-group',
+        enum: ${column.dictType}.value,
+        placeholder: '请选择${comment}'
+      }
+    },
+        #elseif($column.htmlType == "datetime")
+    {
+      label: '${comment}',
+      prop: '${field}',
+      #if($column.required)
+        rules: [{required: true, message: '${comment}不能为空', trigger: 'change'}],
+      #else
+      #end
+      compOptions: {
+        elTagName: 'date-picker',
+        type: 'date',
+        placeholder: '请选择${comment}'
+      }
+    },
+        #elseif($column.htmlType == "textarea")
+    {
+       label: '${comment}',
+      prop: '${field}',
+      #if($column.required)
+        rules: [{required: true, message: '${comment}不能为空', trigger: 'blur'}],
+      #else
+      #end
+      compOptions: {
+        type: 'textarea',
+        clearable: true,
+        placeholder: '请输入内容'
+      }
+    },
+        #else
+    {
+      label: '${comment}',
+      prop: '${field}',
+      #if($column.required)
+        rules: [{required: true, message: '${comment}不能为空', trigger: 'blur'}],
+      #else
+      #end
+      compOptions: {
+        placeholder: '请输入${comment}'
+      }
+    },
                 #end
             #end
-        ]
-    }
+        #end
+    #end
+  ]
+}
 </script>