feat: 更新ProForm组件、更新FormDialog组件

src/api/modules/db/connection.ts

@@ -18,6 +18,23 @@ export const getConnectionApi = (id: string | number) => {
   return http.get<ConnectionVO>(`/db/connection/${id}`)
 }
 
+/**
+ * @name 查询数据库产品类型
+ * @returns returns
+ */
+export const getTypesApi = () => {
+  return http.get<any>(`/db/connection/types`)
+}
+
+/**
+ * @name 查询数据库链驱动
+ * @param type type
+ * @returns returns
+ */
+export const getDriversApi = (type: string | number) => {
+  return http.get<any>(`/db/connection/drivers/${type}`)
+}
+
 /**
  * @name 新增数据库链接
  * @param data data

src/components/FormDialog/index.vue

@@ -8,7 +8,7 @@
     :top="parameter.top"
     draggable
   >
-    <ProFrom ref="proFormRef" :items-options="parameter.itemsOptions" :form-options="_options" :model="parameter.model" />
+    <ProFrom ref="proFormRef" :items-options="itemsOptions" :form-options="_options" :model="model" />
     <template #footer>
       <span class="dialog-footer">
         <el-button type="primary" v-if="parameter.isEdit" :loading="butLoading" @click="handleSubmit">确认</el-button>
@@ -23,37 +23,48 @@ import { ref, ComputedRef, computed } from 'vue'
 import ProFrom from '@/components/ProForm/index.vue'
 import { ElMessage } from 'element-plus'
 
-export interface FormParameterProps {
+export interface DialogParameterProps {
   title: string // 标题
   width?: number // 弹框宽度
   labelWidth?: number // label宽度
   api?: (params: any) => Promise<any> // 表单提交api
   isEdit?: boolean // 是否编辑
   top?: string // 离顶部距离
+  getTableList?: () => void // 获取表格数据的Api
+}
+
+export interface FormParameterProps {
   formOptions?: ProForm.FormOptions // 表单配置
   itemsOptions: ProForm.ItemsOptions[] // 动态表单字段配置
   model?: Record<ProForm.FormItem['prop'], ProForm.FormItem['value']> // 表单数据对象
-  getTableList?: () => void // 获取表格数据的Api
 }
-// dialog状态
-const dialogVisible = ref(false)
-const butLoading = ref(false)
+
+const props = withDefaults(defineProps<FormParameterProps>(), {
+  formOptions: () => {
+    return {}
+  },
+  itemsOptions: () => [],
+  model: () => {
+    return {}
+  }
+})
 // 父组件传过来的参数
-const parameter = ref<FormParameterProps>({
+const parameter = ref<DialogParameterProps>({
   title: '',
   width: 500,
   top: '10vh',
-  itemsOptions: [],
-  formOptions: {},
   isEdit: true
 })
+// dialog状态
+const dialogVisible = ref(false)
+const butLoading = ref(false)
 const _options: ComputedRef<ProForm.FormOptions> = computed(() => {
   const form = {
     labelWidth: 120,
     hasFooter: false,
     disabled: false
   }
-  return Object.assign(form, parameter.value.formOptions)
+  return Object.assign(form, props.formOptions)
 })
 const proFormRef = ref<InstanceType<typeof ProFrom> | null>(null)
 // 表单提交校验
@@ -64,7 +75,7 @@ const handleSubmit = () => {
   if (!formEl) return
   formEl.validate(valid => {
     if (valid) {
-      parameter.value.api!({ ...formModel, ...parameter.value.model }).then(res => {
+      parameter.value.api!({ ...formModel, ...props.model }).then(res => {
         if (res.code == 200) {
           proFormRef.value?.resetForm(formEl)
           ElMessage.success('操作成功')
@@ -90,7 +101,7 @@ const handleCancel = () => {
 }
 
 // 接收父组件参数
-const openDialog = (params: FormParameterProps) => {
+const openDialog = (params: DialogParameterProps) => {
   parameter.value = { ...parameter.value, ...params }
   _options.value.disabled = !parameter.value.isEdit
   butLoading.value = false

src/components/ProForm/index.vue

@@ -79,7 +79,7 @@ const formModel = ref<Record<string, any>>({})
 const proFormRef = ref<FormInstance>()
 // 默认值
 const props = withDefaults(defineProps<ProFormProps>(), {
-  items: () => [],
+  itemsOptions: () => [],
   model: () => ({})
 })
 const show = (showFunction: any) => {
@@ -141,6 +141,13 @@ props.itemsOptions.forEach(async item => {
   await setEnumMap(item)
 })
 const emits = defineEmits<EmitEvent>()
+// 监听itemsOptions变化
+watch(props.itemsOptions, () => {
+  // 处理表单项需要的参数
+  props.itemsOptions.forEach(async item => {
+    await setEnumMap(item)
+  })
+})
 // 根据items初始化model， 如果items有传值就用传递的model数据模型，否则就给上面声明的formModel设置相应的(key,value) [item.prop]， item.value是表单的默认值（选填）
 watch(
   () => props.model,

src/views/db/connection/index.vue

@@ -26,7 +26,7 @@
         <el-button type="primary" link icon="Delete" v-auth="['db:connection:remove']" @click="deleteConnection(scope.row)"> 删除 </el-button>
       </template>
     </ProTable>
-    <FormDialog ref="formDialogRef" />
+    <FormDialog :items-options="itemsOptions" :model="connectionForm" ref="formDialogRef" />
   </div>
 </template>
 
@@ -36,11 +36,21 @@ import { useHandleData } from '@/hooks/useHandleData'
 import ProTable from '@/components/ProTable/index.vue'
 import FormDialog from '@/components/FormDialog/index.vue'
 import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
-import { listConnectionApi, delConnectionApi, addConnectionApi, updateConnectionApi, getConnectionApi } from '@/api/modules/db/connection'
+import {
+  listConnectionApi,
+  delConnectionApi,
+  addConnectionApi,
+  updateConnectionApi,
+  getConnectionApi,
+  getTypesApi,
+  getDriversApi
+} from '@/api/modules/db/connection'
 
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
 
+let connectionForm = ref({ type: '' })
+
 // 删除数据库链接信息
 const deleteConnection = async (params: any) => {
   await useHandleData(delConnectionApi, params.id, '删除【' + params.id + '】数据库链接')
@@ -57,18 +67,15 @@ const batchDelete = async (ids: string[]) => {
 const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
 // 打开弹框的功能
 const openDialog = async (type: number, title: string, row?: any) => {
-  let res = { data: {} }
+  connectionForm.value = { type: '' }
   if (row?.id) {
-    res = await getConnectionApi(row?.id || null)
+    const res = await getConnectionApi(row?.id || null)
+    connectionForm.value = res.data
   }
-  // 重置表单
-  setItemsOptions()
   const params = {
     title,
     width: 580,
     isEdit: type !== 3,
-    itemsOptions: itemsOptions,
-    model: type == 1 ? {} : res.data,
     api: type == 1 ? addConnectionApi : updateConnectionApi,
     getTableList: proTable.value?.getTableList
   }
@@ -125,69 +132,82 @@ const columns = reactive<ColumnProps<any>[]>([
   { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
 ])
 // 表单配置项
-let itemsOptions: ProForm.ItemsOptions[] = []
-const setItemsOptions = () => {
-  itemsOptions = [
-    {
-      label: '链接名称',
-      prop: 'name',
-      rules: [{ required: true, message: '链接名称不能为空', trigger: 'blur' }],
-      compOptions: {
-        placeholder: '请输入链接名称'
-      }
-    },
-    {
-      label: '数据库类型',
-      prop: 'type',
-      rules: [{ required: true, message: '数据库类型不能为空', trigger: 'blur' }],
-      compOptions: {
-        placeholder: '请输入数据库类型'
-      }
-    },
-    {
-      label: '驱动版本',
-      prop: 'driverVersion',
-      rules: [{ required: true, message: '驱动版本不能为空', trigger: 'blur' }],
-      compOptions: {
-        placeholder: '请输入驱动版本'
-      }
-    },
-    {
-      label: '驱动类名',
-      prop: 'driver',
-      rules: [{ required: true, message: '驱动类名不能为空', trigger: 'blur' }],
-      compOptions: {
-        placeholder: '请输入驱动类名'
-      }
-    },
-    {
-      label: 'jdbc-url连接串',
-      prop: 'url',
-      rules: [{ required: true, message: 'jdbc-url连接串不能为空', trigger: 'blur' }],
-      compOptions: {
-        type: 'textarea',
-        clearable: true,
-        placeholder: '请输入内容'
-      }
-    },
-    {
-      label: '数据库账号',
-      prop: 'userName',
-      rules: [{ required: true, message: '数据库账号不能为空', trigger: 'blur' }],
-      compOptions: {
-        placeholder: '请输入数据库账号'
-      }
-    },
-    {
-      label: '账号密码',
-      prop: 'password',
-      rules: [{ required: true, message: '账号密码不能为空', trigger: 'blur' }],
-      compOptions: {
-        placeholder: '请输入账号密码',
-        type: 'password',
-        showPassword: true
+let itemsOptions = ref<ProForm.ItemsOptions[]>([
+  {
+    label: '链接名称',
+    prop: 'name',
+    rules: [{ required: true, message: '链接名称不能为空', trigger: 'blur' }],
+    compOptions: {
+      placeholder: '请输入链接名称'
+    }
+  },
+  {
+    label: '数据库类型',
+    prop: 'type',
+    rules: [{ required: true, message: '数据库类型不能为空', trigger: 'blur' }],
+    compOptions: {
+      elTagName: 'select',
+      enum: getTypesApi,
+      labelKey: 'type',
+      valueKey: 'type',
+      placeholder: '请输入数据库类型',
+      onChange: value => {
+        if (value) {
+          getDriversApi(value).then(res => {
+            itemsOptions.value[2].compOptions.enum = res.data
+          })
+          console.log('itemsOptions', itemsOptions)
+        }
       }
     }
-  ]
-}
+  },
+  {
+    label: '驱动版本',
+    prop: 'driverVersion',
+    rules: [{ required: true, message: '驱动版本不能为空', trigger: 'blur' }],
+    compOptions: {
+      elTagName: 'select',
+      labelKey: 'driverVersion',
+      valueKey: 'driverVersion',
+      placeholder: '请输入驱动版本'
+    }
+  },
+  {
+    label: '驱动类名',
+    prop: 'driver',
+    rules: [{ required: true, message: '驱动类名不能为空', trigger: 'blur' }],
+    compOptions: {
+      placeholder: '请输入驱动类名'
+    }
+  },
+  {
+    label: 'jdbc-url',
+    prop: 'url',
+    tooltip: 'jdbc:dm://localhost:5236',
+    rules: [{ required: true, message: 'jdbc-url连接串不能为空', trigger: 'blur' }],
+    compOptions: {
+      type: 'textarea',
+      clearable: true,
+      placeholder: '请输入内容'
+    }
+  },
+  {
+    label: '数据库账号',
+    prop: 'userName',
+    rules: [{ required: true, message: '数据库账号不能为空', trigger: 'blur' }],
+    compOptions: {
+      placeholder: '请输入数据库账号'
+    }
+  },
+  {
+    label: '账号密码',
+    prop: 'password',
+    rules: [{ required: true, message: '账号密码不能为空', trigger: 'blur' }],
+    compOptions: {
+      placeholder: '请输入账号密码',
+      type: 'password',
+      showPassword: true
+    }
+  }
+])
 </script>

src/views/system/dept/index.vue

@@ -23,7 +23,7 @@
         </el-button>
       </template>
     </ProTable>
-    <FormDialog ref="formDialogRef" />
+    <FormDialog :items-options="itemsOptions" :model="model" ref="formDialogRef" />
     <ImportExcel ref="dialogRef" />
   </div>
 </template>
@@ -42,6 +42,9 @@ import { getDictsApi } from '@/api/modules/system/dictData'
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
 
+// 表单model
+const model = ref({})
+
 // 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
 const initParam = reactive({})
 const deptOptions = ref<any[]>([])
@@ -62,22 +65,23 @@ const deleteDept = async (params: any) => {
 const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
 // 打开弹框的功能
 const openDialog = async (type: number, title: string, row?: any) => {
+  model.value = {}
   // 重置表单项
   setItemsOptions()
   if (row?.parentId == 0 && type == 2) {
-    itemsOptions.splice(0, 1)
+    itemsOptions.value.splice(0, 1)
   }
   // 增加子节点
   if (type == 4) {
     row = { parentId: row?.deptId }
   }
-
+  if (type !== 1) {
+    model.value = row
+  }
   const params = {
     title,
     width: 700,
     isEdit: type !== 3,
-    itemsOptions: itemsOptions,
-    model: type == 1 ? {} : row,
     api: type == 1 || type == 4 ? addDeptApi : updateDeptApi,
     getTableList: proTable.value?.getTableList
   }
@@ -120,9 +124,9 @@ const columns = reactive<ColumnProps<any>[]>([
 ])
 
 // 表单配置项
-let itemsOptions: ProForm.ItemsOptions[] = []
+let itemsOptions = ref<ProForm.ItemsOptions[]>([])
 const setItemsOptions = () => {
-  itemsOptions = [
+  itemsOptions.value = [
     {
       label: '上级部门',
       prop: 'parentId',

src/views/system/dict/data.vue

@@ -27,7 +27,7 @@
         <el-button type="primary" link icon="Delete" v-auth="['system/dict:data:remove']" @click="deleteDictData(scope.row)"> 删除 </el-button>
       </template>
     </ProTable>
-    <FormDialog ref="formDialogRef" />
+    <FormDialog ref="formDialogRef" :items-options="itemsOptions" :model="model" />
     <ImportExcel ref="dialogRef" />
   </div>
 </template>
@@ -48,7 +48,8 @@ import { useRoute } from 'vue-router'
 const route = useRoute()
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
-
+// 表单model
+const model = ref({})
 // 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
 const initParam = reactive({})
 // 数据标签回显样式
@@ -91,17 +92,17 @@ const downloadFile = async () => {
 const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
 // 打开弹框的功能
 const openDialog = async (type: number, title: string, row?: any) => {
+  model.value = {}
   let res = { data: {} }
   if (row?.dictCode) {
     res = await getDataApi(row?.dictCode || null)
   }
+  model.value = type == 1 ? { dictType: defaultDictType.value, version: 0 } : { ...res.data, version: 0 }
   setItemsOptions()
   const params = {
     title,
     width: 500,
     isEdit: type !== 3,
-    itemsOptions: itemsOptions,
-    model: type == 1 ? { dictType: defaultDictType.value, version: 0 } : { ...res.data, version: 0 },
     api: type == 1 ? addDataApi : updateDataApi,
     getTableList: proTable.value?.getTableList
   }
@@ -158,9 +159,9 @@ const columns = reactive<ColumnProps<any>[]>([
 ])
 
 // 表单配置项
-let itemsOptions: ProForm.ItemsOptions[] = []
+let itemsOptions = ref<ProForm.ItemsOptions[]>([])
 const setItemsOptions = () => {
-  itemsOptions = [
+  itemsOptions.value = [
     {
       label: '标签类型',
       prop: 'dictType',

src/views/system/dict/index.vue

@@ -24,7 +24,7 @@
         <el-button type="primary" link icon="Delete" v-auth="['system:dict:remove']" @click="deleteDict(scope.row)"> 删除 </el-button>
       </template>
     </ProTable>
-    <FormDialog ref="formDialogRef" />
+    <FormDialog ref="formDialogRef" :items-options="itemsOptions" :model="model" />
     <ImportExcel ref="dialogRef" />
   </div>
 </template>
@@ -43,7 +43,8 @@ import { listDictApi, delDictApi, addDictApi, updateDictApi, exportApi, getDictA
 
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
-
+// 表单model
+const model = ref({})
 // 删除用户信息
 const deleteDict = async (params: any) => {
   await useHandleData(delDictApi, params.dictId, `删除【${params.dictName}】字典类型`)
@@ -71,13 +72,12 @@ const openDialog = async (type: number, title: string, row?: any) => {
   if (row?.dictId) {
     res = await getDictApi(row?.dictId || null)
   }
+  model.value = type == 1 ? { version: 0 } : { ...res.data, version: 0 }
   setItemsOptions()
   const params = {
     title,
     width: 500,
     isEdit: type !== 3,
-    itemsOptions: itemsOptions,
-    model: type == 1 ? { version: 0 } : { ...res.data, version: 0 },
     api: type == 1 ? addDictApi : updateDictApi,
     getTableList: proTable.value?.getTableList
   }
@@ -131,9 +131,9 @@ const columns = reactive<ColumnProps<any>[]>([
 ])
 
 // 表单配置项
-let itemsOptions: ProForm.ItemsOptions[] = []
+let itemsOptions = ref<ProForm.ItemsOptions[]>([])
 const setItemsOptions = () => {
-  itemsOptions = [
+  itemsOptions.value = [
     {
       label: '字典名称',
       prop: 'dictName',

src/views/system/menu/index.vue

@@ -27,7 +27,7 @@
         <el-button type="primary" link icon="Delete" v-auth="['system:menu:remove']" @click="deleteMenu(scope.row)"> 删除 </el-button>
       </template>
     </ProTable>
-    <FormDialog ref="formDialogRef" />
+    <FormDialog ref="formDialogRef" :items-options="itemsOptions" :model="model" />
   </div>
 </template>
 
@@ -43,7 +43,8 @@ import { getDictsApi } from '@/api/modules/system/dictData'
 
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
-
+// 表单model
+const model = ref({})
 // 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
 const initParam = reactive({})
 const menuOptions = ref<any[]>([])
@@ -76,12 +77,11 @@ const openDialog = async (type: number, title: string, row?: any) => {
   if (row?.menuId) {
     res = await getMenuApi(row?.menuId || null)
   }
+  model.value = type == 1 ? {} : res.data
   const params = {
     title,
     width: 720,
     isEdit: type !== 3,
-    itemsOptions: itemsOptions,
-    model: type == 1 ? {} : res.data,
     api: type == 1 ? addMenuApi : updateMenuApi,
     getTableList: proTable.value?.getTableList
   }
@@ -152,9 +152,10 @@ const columns = reactive<ColumnProps<any>[]>([
   },
   { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
 ])
-let itemsOptions: ProForm.ItemsOptions[] = []
+// 表单配置项
+let itemsOptions = ref<ProForm.ItemsOptions[]>([])
 const setItemsOptions = () => {
-  itemsOptions = [
+  itemsOptions.value = [
     {
       label: '菜单类型',
       prop: 'menuType',

src/views/system/oss/config.vue

@@ -26,7 +26,7 @@
         </el-tooltip>
       </template>
     </ProTable>
-    <FormDialog ref="formDialogRef" />
+    <FormDialog ref="formDialogRef" :items-options="itemsOptions" :model="model" />
     <ImportExcel ref="dialogRef" />
   </div>
 </template>
@@ -51,7 +51,8 @@ import { OssConfigVO } from '@/api/interface/system/ossConfig'
 
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
-
+// 表单model
+const model = ref({})
 // 删除对象存储配置信息
 const deleteOssConfig = async (params: any) => {
   await useHandleData(delOssConfigApi, params.ossConfigId, `删除【params.ossConfigId】对象存储配置`)
@@ -84,19 +85,17 @@ const openDialog = async (type: number, title: string, row?: any) => {
   }
   // 重置表单
   setItemsOptions()
+  model.value = type == 1 ? {} : res.data
   const params = {
     title,
     width: 680,
     top: '8vh',
     isEdit: type !== 3,
-    itemsOptions: itemsOptions,
-    model: type == 1 ? {} : res.data,
     api: type == 1 ? addOssConfigApi : updateOssConfigApi,
     getTableList: proTable.value?.getTableList
   }
   formDialogRef.value?.openDialog(params)
 }
-
 const types = [
   {
     label: 'private',
@@ -184,9 +183,9 @@ const columns = reactive<ColumnProps<any>[]>([
   { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
 ])
 // 表单配置项
-let itemsOptions: ProForm.ItemsOptions[] = []
+let itemsOptions = ref<ProForm.ItemsOptions[]>([])
 const setItemsOptions = () => {
-  itemsOptions = [
+  itemsOptions.value = [
     {
       label: '配置key',
       prop: 'configKey',

src/views/system/post/index.vue

@@ -26,7 +26,7 @@
         <el-button type="primary" link icon="Delete" v-auth="['system:post:remove']" @click="deletePost(scope.row)"> 删除 </el-button>
       </template>
     </ProTable>
-    <FormDialog ref="formDialogRef" />
+    <FormDialog ref="formDialogRef" :items-options="itemsOptions" :model="model" />
     <ImportExcel ref="dialogRef" />
   </div>
 </template>
@@ -54,7 +54,8 @@ import { getDictsApi } from '@/api/modules/system/dictData'
 
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
-
+// 表单model
+const model = ref({})
 // 删除岗位信息信息
 const deletePost = async (params: any) => {
   await useHandleData(delPostApi, params.postId, `删除【${params.postName}】岗位信息`)
@@ -94,14 +95,13 @@ const openDialog = async (type: number, title: string, row?: any) => {
   if (row?.postId) {
     res = await getPostApi(row?.postId || null)
   }
+  model.value = type == 1 ? {} : res.data
   // 重置表单
   setItemsOptions()
   const params = {
     title,
     width: 580,
     isEdit: type !== 3,
-    itemsOptions: itemsOptions,
-    model: type == 1 ? {} : res.data,
     api: type == 1 ? addPostApi : updatePostApi,
     getTableList: proTable.value?.getTableList
   }
@@ -185,9 +185,9 @@ const columns = reactive<ColumnProps<any>[]>([
 ])
 
 // 表单配置项
-let itemsOptions: ProForm.ItemsOptions[] = []
+let itemsOptions = ref<ProForm.ItemsOptions[]>([])
 const setItemsOptions = () => {
-  itemsOptions = [
+  itemsOptions.value = [
     {
       label: '岗位编码',
       prop: 'postCode',

src/views/system/user/index.vue

@@ -35,7 +35,7 @@
           <el-button type="primary" link v-if="scope.row.userId !== 1" icon="View" @click="handleResetPwd(scope.row)">重置密码</el-button>
         </template>
       </ProTable>
-      <FormDialog ref="formDialogRef" />
+      <FormDialog ref="formDialogRef" :items-options="itemsOptions" :model="model" />
       <ImportExcel ref="dialogRef" />
     </div>
   </div>
@@ -72,6 +72,8 @@ onMounted(() => {
 
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
+// 表单model
+const model = ref({})
 // 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
 const initParam = reactive({ deptId: '' })
 
@@ -159,7 +161,7 @@ const openDialog = async (type: number, title: string, row?: any) => {
   // 表单项配置
   setItemsOptions()
   if (type == 1) {
-    itemsOptions.splice(
+    itemsOptions.value.splice(
       4,
       0,
       {
@@ -194,13 +196,11 @@ const openDialog = async (type: number, title: string, row?: any) => {
     res.data.user.postIds = res.data.postIds
     res.data.user.roleIds = res.data.roleIds
   }
-
+  model.value = type == 1 ? {} : res.data.user
   const params = {
     title,
     width: 680,
     isEdit: type !== 3,
-    itemsOptions: itemsOptions,
-    model: type == 1 ? {} : res.data.user,
     api: type == 1 ? addUserApi : updateUserApi,
     getTableList: proTable.value?.getTableList
   }
@@ -248,9 +248,9 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
   { prop: 'operation', label: '操作', width: 240, fixed: 'right' }
 ])
 // 表单配置项
-let itemsOptions: ProForm.ItemsOptions[] = []
+let itemsOptions = ref<ProForm.ItemsOptions[]>([])
 const setItemsOptions = () => {
-  itemsOptions = [
+  itemsOptions.value = [
     {
       label: '用户昵称',
       span: 12,