feat: form 升级

src/components/ProForm/components/Item.vue

@@ -2,7 +2,7 @@
   <component
     :is="elTagNameValue"
     v-bind="item.compOptions"
-    v-model.trim="_formModel[handleProp(item.formItemOptions.prop)]"
+    v-model.trim="_formModel[handleProp(item.prop)]"
     :data="['tree-select'].includes(item.compOptions.elTagName!) ? itemEnum : []"
     :options="['cascader', 'select-v2'].includes(item.compOptions.elTagName!) ? itemEnum : []"
   >
@@ -69,7 +69,7 @@ const elTagNameValue = computed(() => {
 const enumMap = inject('enumMap', ref(new Map()))
 const itemEnum = computed(() => {
   // CompAttributes
-  let enumData = enumMap.value.get(props.item.compOptions?.enumKey || props.item.formItemOptions.prop)
+  let enumData = enumMap.value.get(props.item.compOptions?.enumKey || props.item.prop)
   if (!enumData) return []
   // 返回对象类型
   if (props.item.compOptions.elTagName === 'tree-select') {

src/components/ProForm/index.vue

@@ -2,30 +2,25 @@
   <component :is="'el-form'" v-bind="_formOptions" ref="proFormRef" :model="formModel">
     <el-row :gutter="5">
       <template v-for="item in itemsOptions" :key="item.prop">
-        <el-col :span="item.formItemOptions.span || 24" g>
-          <component :is="'el-form-item'" v-bind="item.formItemOptions" v-if="show(item.formItemOptions.show)">
+        <el-col :span="item.span || 24" g>
+          <component :is="'el-form-item'" v-bind="item" v-if="show(item.show)">
             <template #label>
               <el-space :size="4">
-                <span class="label-span">{{ `${item.formItemOptions.label}` }}</span>
+                <span class="label-span">{{ `${item.label}` }}</span>
                 <!-- <el-tooltip :content="item.formItem.label" placement="top" :disabled="isShowTooltip">
                   <span class="label-span" @mouseenter="visibleTooltip">{{ `${item.formItem.label}` }}</span>
                 </el-tooltip> -->
-                <el-tooltip
-                  v-if="item.formItemOptions?.tooltip"
-                  effect="dark"
-                  :content="item.formItemOptions?.tooltip"
-                  placement="top"
-                >
+                <el-tooltip v-if="item?.tooltip" effect="dark" :content="item?.tooltip" placement="top">
                   <i :class="'iconfont icon-yiwen'"></i>
                 </el-tooltip>
               </el-space>
               <span>{{ `${_formOptions.labelSuffix}` }}</span>
             </template>
             <template v-if="item.compOptions.elTagName === 'slot'">
-              <slot :name="item.formItemOptions.prop" :form-model="formModel"></slot>
+              <slot :name="item.prop" :form-model="formModel"></slot>
             </template>
             <template v-if="item.compOptions.elTagName === 'icon'">
-              <SelectIcon v-model:icon-value="formModel[item.formItemOptions.prop]" />
+              <SelectIcon v-model:icon-value="formModel[item.prop]" />
             </template>
             <Item v-else :item="item" :form-model="formModel" />
           </component>
@@ -99,24 +94,24 @@ interface EmitEvent {
   (e: 'cancel'): void
 }
 const enumMap = ref(new Map<string, { [key: string]: any }[]>())
-const setEnumMap = async ({ formItemOptions, compOptions }: ProForm.ItemsOptions) => {
-  const prop = compOptions?.enumKey || formItemOptions?.prop
+const setEnumMap = async ({ prop, compOptions }: ProForm.ItemsOptions) => {
+  const props = compOptions?.enumKey || prop
   const enumValue = compOptions?.enum
   if (!enumValue) return
 
   // 如果当前 enumMap 存在相同的值 return
-  if (enumMap.value.has(prop!) && (typeof enumValue === 'function' || enumMap.value.get(prop!) === enumValue)) return
+  if (enumMap.value.has(props!) && (typeof enumValue === 'function' || enumMap.value.get(props!) === enumValue)) return
 
   // 当前 enum 为静态数据，则直接存储到 enumMap
-  if (typeof enumValue !== 'function') return enumMap.value.set(prop!, unref(enumValue!))
+  if (typeof enumValue !== 'function') return enumMap.value.set(props!, unref(enumValue!))
 
   // 为了防止接口执行慢，而存储慢，导致重复请求，所以预先存储为[]，接口返回后再二次存储
-  enumMap.value.set(prop!, [])
+  enumMap.value.set(props!, [])
 
   // 当前 enum 为后台数据需要请求数据，则调用该请求接口，并存储到 enumMap
   let { data } = await enumValue()
 
-  enumMap.value.set(prop!, data)
+  enumMap.value.set(props!, data)
 }
 
 // 注入 enumMap
@@ -134,9 +129,7 @@ watch(
     props.itemsOptions.map((item: ProForm.ItemsOptions) => {
       // 如果类型为checkbox，默认值需要设置一个空数组
       const value = ['checkbox', 'transfer'].includes(item.compOptions.elTagName!) ? [] : ''
-      props.model
-        ? (formModel.value = props.model)
-        : (formModel.value[item.formItemOptions.prop] = item.formItemOptions.value || value)
+      props.model ? (formModel.value = props.model) : (formModel.value[item.prop] = item.value || value)
     })
   },
   { immediate: true }

src/typings/ProForm.d.ts

@@ -48,7 +48,17 @@ declare namespace ProForm {
   }
 
   interface ItemsOptions {
-    formItemOptions: FormItem // form-item 配置项
+    /** form-item 配置项 */
+    label?: string
+    labelWidth?: string | number // 标签宽度，例如 '50px'。 可以使用 auto。
+    prop: string // prop
+    value?: any // 默认值
+    tooltip?: string // 问号，tooltip提示
+    required?: boolean
+    rules?: FormItemRule[]
+    span?: number // 表单col宽度
+    show?: (params?: any) => Promise<any> | boolean | string // 是否显示 默认显示
+    /** 表单组件配置项 */
     compOptions: CompAttributes // 表单组件配置项
   }
   interface FormItem {

src/views/index.vue

@@ -79,11 +79,9 @@ const enumData = [
 ]
 let items: ProForm.ItemsOptions[] = [
   {
-    formItemOptions: {
-      label: '单行输入框',
-      prop: 'username',
-      rules: [{ required: true, message: '请选择步长', trigger: 'blur' }]
-    },
+    label: '单行输入框',
+    prop: 'username',
+    rules: [{ required: true, message: '请选择步长', trigger: 'blur' }],
     compOptions: {
       elTagName: 'input',
       clearable: true,
@@ -91,11 +89,9 @@ let items: ProForm.ItemsOptions[] = [
     }
   },
   {
-    formItemOptions: {
-      label: '多行输入框',
-      prop: 'usernames',
-      rules: [{ required: true, message: '请选择步长', trigger: 'blur' }]
-    },
+    label: '多行输入框',
+    prop: 'usernames',
+    rules: [{ required: true, message: '请选择步长', trigger: 'blur' }],
     compOptions: {
       elTagName: 'input',
       type: 'textarea',
@@ -104,12 +100,10 @@ let items: ProForm.ItemsOptions[] = [
     }
   },
   {
-    formItemOptions: {
-      label: '插槽',
-      prop: 'username1',
-      required: true,
-      tooltip: '这是自定义插槽'
-    },
+    label: '插槽',
+    prop: 'username1',
+    required: true,
+    tooltip: '这是自定义插槽',
     compOptions: {
       elTagName: 'slot',
       clearable: true,
@@ -117,65 +111,53 @@ let items: ProForm.ItemsOptions[] = [
     }
   },
   {
-    formItemOptions: {
-      label: '单选',
-      prop: 'sdsds',
-      required: true
-    },
+    label: '单选',
+    prop: 'sdsds',
+    required: true,
     compOptions: {
       elTagName: 'radio-group',
       enum: enumData
     }
   },
   {
-    formItemOptions: {
-      label: '复选',
-      prop: 'sdssssds',
-      required: true
-    },
+    label: '复选',
+    prop: 'sdssssds',
+    required: true,
     compOptions: {
       elTagName: 'checkbox-group',
       enum: enumData
     }
   },
   {
-    formItemOptions: {
-      label: '下拉',
-      prop: 'select',
-      required: true
-    },
+    label: '下拉',
+    prop: 'select',
+    required: true,
     compOptions: {
       elTagName: 'select',
       enum: enumData
     }
   },
   {
-    formItemOptions: {
-      label: '下拉树',
-      prop: 'treeSelect',
-      required: true
-    },
+    label: '下拉树',
+    prop: 'treeSelect',
+    required: true,
     compOptions: {
       elTagName: 'tree-select',
       enum: treeData
     }
   },
   {
-    formItemOptions: {
-      label: '虚拟下拉',
-      prop: 'selectV2',
-      required: true
-    },
+    label: '虚拟下拉',
+    prop: 'selectV2',
+    required: true,
     compOptions: {
       elTagName: 'select-v2',
       enum: optionsData
     }
   },
   {
-    formItemOptions: {
-      label: '级联',
-      prop: 'jilian'
-    },
+    label: '级联',
+    prop: 'jilian',
     compOptions: {
       elTagName: 'cascader',
       enum: treeData,
@@ -185,20 +167,16 @@ let items: ProForm.ItemsOptions[] = [
     }
   },
   {
-    formItemOptions: {
-      label: '日期',
-      prop: 'datePicker'
-    },
+    label: '日期',
+    prop: 'datePicker',
     compOptions: {
       elTagName: 'date-picker',
       type: 'date'
     }
   },
   {
-    formItemOptions: {
-      label: '日期范围',
-      prop: 'datePicker'
-    },
+    label: '日期范围',
+    prop: 'datePicker',
     compOptions: {
       elTagName: 'date-picker',
       type: 'daterange',
@@ -208,66 +186,52 @@ let items: ProForm.ItemsOptions[] = [
     }
   },
   {
-    formItemOptions: {
-      label: '数字框',
-      prop: 'iNumber'
-    },
+    label: '数字框',
+    prop: 'iNumber',
     compOptions: {
       elTagName: 'input-number',
       min: 1
     }
   },
   {
-    formItemOptions: {
-      label: '评分',
-      prop: 'rate'
-    },
+    label: '评分',
+    prop: 'rate',
     compOptions: {
       elTagName: 'rate'
     }
   },
   {
-    formItemOptions: {
-      label: '滑块',
-      prop: 'slider'
-    },
+    label: '滑块',
+    prop: 'slider',
     compOptions: {
       elTagName: 'slider',
       step: 10
     }
   },
   {
-    formItemOptions: {
-      label: '开关',
-      prop: 'switch'
-    },
+    label: '开关',
+    prop: 'switch',
     compOptions: {
       elTagName: 'switch'
     }
   },
   {
-    formItemOptions: {
-      label: '时间选择器',
-      prop: 'timePicker'
-    },
+    label: '时间选择器',
+    prop: 'timePicker',
     compOptions: {
       elTagName: 'time-picker'
     }
   },
   {
-    formItemOptions: {
-      label: '时间下拉',
-      prop: 'timeSelect'
-    },
+    label: '时间下拉',
+    prop: 'timeSelect',
     compOptions: {
       elTagName: 'time-select'
     }
   },
   {
-    formItemOptions: {
-      label: '穿梭框',
-      prop: 'transfer1'
-    },
+    label: '穿梭框',
+    prop: 'transfer1',
     compOptions: {
       elTagName: 'slot'
     }

src/views/system/menu/index.vue

@@ -170,24 +170,20 @@ let itemsOptions: ProForm.ItemsOptions[] = []
 const setFieldList = () => {
   itemsOptions = [
     {
-      formItemOptions: {
-        label: '菜单类型',
-        prop: 'menuType',
-        span: 12,
-        rules: [{ required: true, message: '菜单类型不能为空', trigger: 'change' }]
-      },
+      label: '菜单类型',
+      prop: 'menuType',
+      span: 12,
+      rules: [{ required: true, message: '菜单类型不能为空', trigger: 'change' }],
       compOptions: {
         elTagName: 'radio-button',
         enum: menuTypeOptions.value
       }
     },
     {
-      formItemOptions: {
-        label: '菜单状态',
-        prop: 'status',
-        rules: [{ required: true, message: '菜单状态不能为空', trigger: 'change' }],
-        span: 12
-      },
+      label: '菜单状态',
+      prop: 'status',
+      rules: [{ required: true, message: '菜单状态不能为空', trigger: 'change' }],
+      span: 12,
       compOptions: {
         elTagName: 'radio-button',
         enum: () => getDictsApi('sys_normal_disable'),
@@ -196,11 +192,9 @@ const setFieldList = () => {
       }
     },
     {
-      formItemOptions: {
-        label: '上级菜单',
-        rules: [{ required: true, message: '上级菜单不能为空', trigger: 'change' }],
-        prop: 'parentId'
-      },
+      label: '上级菜单',
+      rules: [{ required: true, message: '上级菜单不能为空', trigger: 'change' }],
+      prop: 'parentId',
       compOptions: {
         elTagName: 'tree-select',
         placeholder: '请选择上级菜单',
@@ -210,23 +204,19 @@ const setFieldList = () => {
       }
     },
     {
-      formItemOptions: {
-        label: '菜单名称',
-        prop: 'menuName',
-        span: 12,
-        rules: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }]
-      },
+      label: '菜单名称',
+      prop: 'menuName',
+      span: 12,
+      rules: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
       compOptions: {
         elTagName: 'input',
         placeholder: '请输入菜单名称'
       }
     },
     {
-      formItemOptions: {
-        label: '显示排序',
-        prop: 'orderNum',
-        span: 12
-      },
+      label: '显示排序',
+      prop: 'orderNum',
+      span: 12,
       compOptions: {
         elTagName: 'input-number',
         min: 0,
@@ -234,27 +224,23 @@ const setFieldList = () => {
       }
     },
     {
-      formItemOptions: {
-        label: '图标',
-        prop: 'icon',
-        show: val => {
-          return val?.menuType !== 'F'
-        }
+      label: '图标',
+      prop: 'icon',
+      show: val => {
+        return val?.menuType !== 'F'
       },
       compOptions: {
         elTagName: 'icon'
       }
     },
     {
-      formItemOptions: {
-        label: '是否外链',
-        prop: 'isFrame',
-        span: 12,
-        show: val => {
-          return val?.menuType !== 'F'
-        },
-        tooltip: '选择是外链则路由地址需要以`http(s)://`开头'
+      label: '是否外链',
+      prop: 'isFrame',
+      span: 12,
+      show: val => {
+        return val?.menuType !== 'F'
       },
+      tooltip: '选择是外链则路由地址需要以`http(s)://`开头',
       compOptions: {
         elTagName: 'radio-button',
         enum: () => getDictsApi('sys_yes_no'),
@@ -264,14 +250,12 @@ const setFieldList = () => {
       }
     },
     {
-      formItemOptions: {
-        label: '显示状态',
-        prop: 'visible',
-        tooltip: '选择隐藏则路由将不会出现在侧边栏，但仍然可以访问',
-        span: 12,
-        show: val => {
-          return val?.menuType !== 'F'
-        }
+      label: '显示状态',
+      prop: 'visible',
+      tooltip: '选择隐藏则路由将不会出现在侧边栏，但仍然可以访问',
+      span: 12,
+      show: val => {
+        return val?.menuType !== 'F'
       },
       compOptions: {
         elTagName: 'radio-button',
@@ -281,44 +265,38 @@ const setFieldList = () => {
       }
     },
     {
-      formItemOptions: {
-        label: '路由地址',
-        rules: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }],
-        prop: 'path',
-        show: val => {
-          return val?.menuType !== 'F'
-        },
-        tooltip: '访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头'
+      label: '路由地址',
+      rules: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }],
+      prop: 'path',
+      show: val => {
+        return val?.menuType !== 'F'
       },
+      tooltip: '访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头',
       compOptions: {
         elTagName: 'input',
         placeholder: '请输入路由地址'
       }
     },
     {
-      formItemOptions: {
-        label: '路由参数',
-        prop: 'query',
-        show: val => {
-          return val?.menuType !== 'F'
-        },
-        tooltip: '访问路由的默认传递参数，如：`{"id": 1, "name": "km"}`'
+      label: '路由参数',
+      prop: 'query',
+      show: val => {
+        return val?.menuType !== 'F'
       },
+      tooltip: '访问路由的默认传递参数，如：`{"id": 1, "name": "km"}`',
       compOptions: {
         elTagName: 'input',
         placeholder: '请输入路由地址'
       }
     },
     {
-      formItemOptions: {
-        label: '组件路径',
-        rules: [{ required: true, message: '组件路径不能为空', trigger: 'blur' }],
-        prop: 'component',
-        tooltip: '访问的组件路径，如：`system/user/index`，默认在`views`目录下',
-        span: 12,
-        show: val => {
-          return val?.menuType == 'C'
-        }
+      label: '组件路径',
+      rules: [{ required: true, message: '组件路径不能为空', trigger: 'blur' }],
+      prop: 'component',
+      tooltip: '访问的组件路径，如：`system/user/index`，默认在`views`目录下',
+      span: 12,
+      show: val => {
+        return val?.menuType == 'C'
       },
       compOptions: {
         elTagName: 'input',
@@ -326,15 +304,13 @@ const setFieldList = () => {
       }
     },
     {
-      formItemOptions: {
-        label: '组件名称',
-        rules: [{ required: true, message: '路由名称不能为空', trigger: 'blur' }],
-        prop: 'componentName',
-        tooltip: '组件名称，匹配组件内Name属性，如：User',
-        span: 12,
-        show: val => {
-          return val?.menuType == 'C'
-        }
+      label: '组件名称',
+      rules: [{ required: true, message: '路由名称不能为空', trigger: 'blur' }],
+      prop: 'componentName',
+      tooltip: '组件名称，匹配组件内Name属性，如：User',
+      span: 12,
+      show: val => {
+        return val?.menuType == 'C'
       },
       compOptions: {
         elTagName: 'input',
@@ -342,14 +318,12 @@ const setFieldList = () => {
       }
     },
     {
-      formItemOptions: {
-        label: '权限标识',
-        prop: 'perms',
-        tooltip: '控制器中定义的权限字符，如：system:user:list',
-        span: 12,
-        show: val => {
-          return val?.menuType !== 'M'
-        }
+      label: '权限标识',
+      prop: 'perms',
+      tooltip: '控制器中定义的权限字符，如：system:user:list',
+      span: 12,
+      show: val => {
+        return val?.menuType !== 'M'
       },
       compOptions: {
         elTagName: 'input',
@@ -357,13 +331,11 @@ const setFieldList = () => {
       }
     },
     {
-      formItemOptions: {
-        label: '是否缓存',
-        prop: 'isCache',
-        span: 12,
-        show: val => {
-          return val?.menuType == 'C'
-        }
+      label: '是否缓存',
+      prop: 'isCache',
+      span: 12,
+      show: val => {
+        return val?.menuType == 'C'
       },
       compOptions: {
         elTagName: 'radio-button',

src/views/tool/gen/components/basicInfoForm.vue

@@ -16,12 +16,10 @@ const _formOptions = {
 }
 let items: ProForm.ItemsOptions[] = [
   {
-    formItemOptions: {
-      label: '表名称',
-      prop: 'tableName',
-      span: 12,
-      rules: [{ required: true, message: '表名称不能为空', trigger: 'blur' }]
-    },
+    label: '表名称',
+    prop: 'tableName',
+    span: 12,
+    rules: [{ required: true, message: '表名称不能为空', trigger: 'blur' }],
     compOptions: {
       elTagName: 'input',
       clearable: true,
@@ -29,12 +27,10 @@ let items: ProForm.ItemsOptions[] = [
     }
   },
   {
-    formItemOptions: {
-      label: '表描述',
-      prop: 'tableComment',
-      span: 12,
-      rules: [{ required: true, message: '表描述不能为空', trigger: 'blur' }]
-    },
+    label: '表描述',
+    prop: 'tableComment',
+    span: 12,
+    rules: [{ required: true, message: '表描述不能为空', trigger: 'blur' }],
     compOptions: {
       elTagName: 'input',
       clearable: true,
@@ -42,12 +38,10 @@ let items: ProForm.ItemsOptions[] = [
     }
   },
   {
-    formItemOptions: {
-      label: '实体类名称',
-      prop: 'className',
-      span: 12,
-      rules: [{ required: true, message: '实体类名称不能为空', trigger: 'blur' }]
-    },
+    label: '实体类名称',
+    prop: 'className',
+    span: 12,
+    rules: [{ required: true, message: '实体类名称不能为空', trigger: 'blur' }],
     compOptions: {
       elTagName: 'input',
       clearable: true,
@@ -55,12 +49,10 @@ let items: ProForm.ItemsOptions[] = [
     }
   },
   {
-    formItemOptions: {
-      label: '作者',
-      prop: 'functionAuthor',
-      span: 12,
-      rules: [{ required: true, message: '作者不能为空', trigger: 'blur' }]
-    },
+    label: '作者',
+    prop: 'functionAuthor',
+    span: 12,
+    rules: [{ required: true, message: '作者不能为空', trigger: 'blur' }],
     compOptions: {
       elTagName: 'input',
       clearable: true,
@@ -68,10 +60,8 @@ let items: ProForm.ItemsOptions[] = [
     }
   },
   {
-    formItemOptions: {
-      label: '备注',
-      prop: 'remark'
-    },
+    label: '备注',
+    prop: 'remark',
     compOptions: {
       elTagName: 'input',
       type: 'textarea',

src/views/tool/gen/components/genInfoForm.vue

@@ -47,12 +47,10 @@ let items: ProForm.ItemsOptions[] = []
 const setItem = () => {
   items = [
     {
-      formItemOptions: {
-        label: '生成模板',
-        prop: 'tplCategory',
-        span: 12,
-        rules: [{ required: true, message: '生成模板不能为空', trigger: 'change' }]
-      },
+      label: '生成模板',
+      prop: 'tplCategory',
+      span: 12,
+      rules: [{ required: true, message: '生成模板不能为空', trigger: 'change' }],
       compOptions: {
         elTagName: 'select',
         clearable: true,
@@ -62,13 +60,11 @@ const setItem = () => {
       }
     },
     {
-      formItemOptions: {
-        label: '生成包路径',
-        prop: 'packageName',
-        tooltip: '生成在哪个java包下，例如 com.km.system',
-        span: 12,
-        rules: [{ required: true, message: '生成包路径不能为空', trigger: 'blur' }]
-      },
+      label: '生成包路径',
+      prop: 'packageName',
+      tooltip: '生成在哪个java包下，例如 com.km.system',
+      span: 12,
+      rules: [{ required: true, message: '生成包路径不能为空', trigger: 'blur' }],
       compOptions: {
         elTagName: 'input',
         clearable: true,
@@ -76,13 +72,11 @@ const setItem = () => {
       }
     },
     {
-      formItemOptions: {
-        label: '生成模块名',
-        prop: 'moduleName',
-        span: 12,
-        tooltip: '可理解为子系统名，例如 system',
-        rules: [{ required: true, message: '生成模块名不能为空', trigger: 'blur' }]
-      },
+      label: '生成模块名',
+      prop: 'moduleName',
+      span: 12,
+      tooltip: '可理解为子系统名，例如 system',
+      rules: [{ required: true, message: '生成模块名不能为空', trigger: 'blur' }],
       compOptions: {
         elTagName: 'input',
         clearable: true,
@@ -90,13 +84,11 @@ const setItem = () => {
       }
     },
     {
-      formItemOptions: {
-        label: '生成业务名',
-        prop: 'businessName',
-        tooltip: '可理解为功能英文名，例如 user',
-        span: 12,
-        rules: [{ required: true, message: '生成业务名不能为空', trigger: 'blur' }]
-      },
+      label: '生成业务名',
+      prop: 'businessName',
+      tooltip: '可理解为功能英文名，例如 user',
+      span: 12,
+      rules: [{ required: true, message: '生成业务名不能为空', trigger: 'blur' }],
       compOptions: {
         elTagName: 'input',
         clearable: true,
@@ -104,13 +96,11 @@ const setItem = () => {
       }
     },
     {
-      formItemOptions: {
-        label: '生成功能名',
-        prop: 'functionName',
-        tooltip: '用作类描述，例如 用户',
-        span: 12,
-        rules: [{ required: true, message: '生成功能名不能为空', trigger: 'blur' }]
-      },
+      label: '生成功能名',
+      prop: 'functionName',
+      tooltip: '用作类描述，例如 用户',
+      span: 12,
+      rules: [{ required: true, message: '生成功能名不能为空', trigger: 'blur' }],
       compOptions: {
         elTagName: 'input',
         clearable: true,
@@ -118,12 +108,10 @@ const setItem = () => {
       }
     },
     {
-      formItemOptions: {
-        label: '上级菜单',
-        prop: 'parentMenuId',
-        span: 10,
-        tooltip: '分配到指定菜单下，例如 系统管理'
-      },
+      label: '上级菜单',
+      prop: 'parentMenuId',
+      span: 10,
+      tooltip: '分配到指定菜单下，例如 系统管理',
       compOptions: {
         elTagName: 'tree-select',
         clearable: true,
@@ -141,12 +129,10 @@ const setItem = () => {
       }
     },
     {
-      formItemOptions: {
-        label: '生成方式',
-        prop: 'functionAuthor',
-        tooltip: '默认为zip压缩包下载，也可以自定义生成路径',
-        span: 12
-      },
+      label: '生成方式',
+      prop: 'functionAuthor',
+      tooltip: '默认为zip压缩包下载，也可以自定义生成路径',
+      span: 12,
       compOptions: {
         elTagName: 'radio-group',
         enum: genTypeData,

src/views/tool/gen/index.vue

@@ -8,7 +8,7 @@
           v-auth="['tool:gen:code']"
           :disabled="!scope.isSelected"
           :icon="CirclePlus"
-          @click="handleGenTable"
+          @click="handleGenTable()"
         >
           生成
         </el-button>
@@ -111,7 +111,13 @@ let preview = ref({
 
 // dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，可以在这里进行处理成这些字段
 const dataCallback = (data: any) => {
-  return data
+  const page = proTable.value!.pageable
+  return {
+    list: data.data,
+    total: data.total,
+    pageNum: page.pageNum,
+    pageSize: page.pageSize
+  }
 }
 
 // 表格弹框提交
@@ -148,10 +154,10 @@ const batchAdd = () => {
 }
 
 //  生成代码
-const handleGenTable = (_row: { tableId: string }) => {
+const handleGenTable = (_row?: { tableId: string }) => {
   let tableIdArr: any[] | undefined = proTable.value?.selectedList.map(item => item.tableId)
-  let tableIds = _row.tableId || tableIdArr?.join(',')
-  useDownload(batchGenCodeApi, '生成代码', tableIds, false, 'zip', 'km.zip')
+  let tableIds = _row?.tableId || tableIdArr?.join(',')
+  useDownload(batchGenCodeApi, '生成代码', tableIds, false, 'zip', 'phm.zip')
 }
 
 // 同步表数据