表单设置bug修复

src/components/Form/src/hooks/useFormEvents.ts

@@ -212,22 +212,21 @@ export function useFormEvents({
       return
     }
     const schema: FormSchema[] = []
-    unref(getSchema).forEach((val) => {
-      let _val
     updateData.forEach((item) => {
-        if (val.field === item.field) {
+      let _val
-          _val = item
+      unref(getSchema).forEach((val) => {
+        if (item.field === val.field) {
+          _val = val
         }
       })
-      if (_val !== undefined && val.field === _val.field) {
+      if (_val !== undefined && item.field === _val.field) {
-        const newSchema = deepMerge(val, _val)
+        const newSchema = deepMerge(_val, item)
         schema.push(newSchema as FormSchema)
       } else {
-        schema.push(val)
+        schema.push(_val)
       }
     })
     _setDefaultValue(schema)
-
     schemaRef.value = uniqBy(schema, 'field')
   }
 

src/components/Modal/src/components/ModalClose.vue

@@ -134,7 +134,7 @@
     display: flex;
     height: 95%;
     align-items: center;
-
+    justify-content: center;
     > span {
       margin-left: 48px;
       font-size: 16px;

src/hooks/component/costomForm.ts

@@ -0,0 +1,39 @@
+/*
+ * @Description: 表单，表格通用hook
+ * @Author: lijj
+ * @Date: 2024-04-24 10:50:17
+ */
+
+// 获取表单更改过的字段接口
+import { getFormSetInfoByModule } from '/@/views/baseinfo/formset/api'
+// 接口
+import { getColumnSetInfoByModule } from '/@/views/baseinfo/columnset/api'
+// 引入表格权限信息（包含id和name）
+import { permissionsInfo } from '/@/hooks/web/usePermission'
+
+/**
+ * @description: 调用接口更新设置后的表单
+ * @param {*} updateSchema (vben提供的更新表单接口)
+ */
+export function updateFormField(updateSchema) {
+  getFormSetInfoByModule({ permissionId: permissionsInfo().permissionId }).then(res => {
+    if (res?.data?.content) {
+      const content = JSON.parse(res.data.content)
+      updateSchema(content.columns)
+    }
+  })
+}
+
+/**
+ * @description: 调用接口更新设置后的表格
+ * @param {*} setColumns
+ */
+export function updateTableField(setColumns) {
+  getColumnSetInfoByModule({ permissionId: permissionsInfo().permissionId }).then(res => {
+    const { data } = res
+    if (data?.content) {
+      const txt = JSON.parse(data?.content)
+      setColumns(txt.columns)
+    }
+  })
+}

src/views/baseinfo/columnset/index.vue

@@ -65,12 +65,11 @@
   // 弹窗内容组件
   import TableSet from './components/tableSet.vue'
   // 接口
-  import { getColumnSetList, editColumnSet, getColumnSetInfoByModule } from './api'
+  import { getColumnSetList, editColumnSet } from './api'
   // 引入表格列数据
   import { columns, searchFormSchema } from './columns'
-  import { message } from 'ant-design-vue';
+  import { message } from 'ant-design-vue'
-  // 引入表格权限信息（包含id和name）
+  import { updateTableField } from '/@/hooks/component/costomForm'
-  import { permissionsInfo } from '/@/hooks/web/usePermission'
   // 表格设置组件
   const TableSetRef = ref()
   // 模态框boolean
@@ -108,13 +107,7 @@
     title: '可设置列表',
     api: async (p) => {
       // 如果存在改变的列，设置列
-      getColumnSetInfoByModule({ permissionId: permissionsInfo().permissionId }).then(res => {
+      updateTableField(setColumns)
-        const { data } = res
-        if (data?.content) {
-          const txt = JSON.parse(data?.content)
-          setColumns(txt.columns)
-        }
-      })
       const res: API.DataResult = await getColumnSetList(p)
       return new Promise((resolve) => {
         resolve({ data: [...res.data], total: res.count })

src/views/baseinfo/formset/component/FormModel.vue

@@ -1,3 +1,8 @@
+<!--
+ * @Description: 
+ * @Author: lijj
+ * @Date: 2024-04-22 09:04:38
+-->
 <template>
   <BasicModal
     :use-wrapper="true"
@@ -6,8 +11,7 @@
     @register="registerModal"
     @ok="handleSave"
   > 
-    {{ $attrs }}
+    <ds-form v-if="getVisible" ref="FormDragRef" :content="content" />
-    <ds-form ref="FormDragRef" :content="content" />
     <!--右下角按钮-->
     <template #footer>
       <a-button
@@ -48,17 +52,16 @@
   // 声明Emits
   const emit = defineEmits(['success', 'register'])
   const isUpdate = ref(true)
-  const loading = ref(false)
   const rowId = ref('')
   const content = ref({})
   var postData = {}
   const FormDragRef = ref()
   const { createMessage } = useMessage()
-  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+  const [registerModal, { setModalProps, closeModal, getVisible }] = useModalInner(async (data) => {
     setModalProps({ confirmLoading: false, loading: true })
     isUpdate.value = !!data?.isUpdate
     if (unref(isUpdate)) {
-      // setModalProps({ confirmLoading: true });
+      setModalProps({ confirmLoading: true });
       rowId.value = data.record.id
       const res: API.DataResult = await getCodeGoodsTypeInfo({ id: unref(rowId) })
       if (res.succeeded) {
@@ -87,37 +90,6 @@
           setModalProps({ confirmLoading: false, loading: false })
         })
     }
-    // try {
-    //   const values = await validate()
-    //   console.log(values,111)
-    //   setModalProps({ confirmLoading: true, loading: true })
-    //   // TODO custom api
-    //   console.log(values)
-    //   // loading.value = true;
-    //   const res: API.DataResult = await editCodeGoodsType(values)
-    //   console.log(res)
-    //   if (res.succeeded) {
-    //     createMessage.success(res.message)
-    //     emit('success')
-    //     //刷新页面
-    //     if (!exit) {
-    //       if (unref(isUpdate)) {
-    //         await refresh()
-    //       } else {
-    //         rowId.value = res.data
-    //         isUpdate.value = true
-    //         await refresh()
-    //       }
-    //     }
-    //   } else {
-    //     createMessage.error(res.message)
-    //   }
-    //   ModalType.value = false
-    //   exit && closeModal()
-    // } finally {
-    //   // loading.value = false;
-    //   setModalProps({ confirmLoading: false, loading: false })
-    // }
   }
   async function refresh() {
     const res: API.DataResult = await getCodeGoodsTypeInfo({ id: unref(rowId) })

src/views/baseinfo/formset/component/form.vue

@@ -177,11 +177,19 @@ import { FormSchema } from '/@/components/Table'
   }
   // 表单提交
   const validate = async () => {
+    const list = JSON.parse(JSON.stringify(formItems.list))
+    if (list && list.length) {
+      list.forEach(item => {
+        if (item?.options) {
+          delete item.options
+        }
+      })
+    }
     if (!formDisable.value) {
       const flag = await new Promise((resolve) => {
         form.value.validate()
           .then(() => {
-            return resolve(formItems.list)
+            return resolve(list)
           })
           .catch(() => {
             return resolve(false)
@@ -189,7 +197,7 @@ import { FormSchema } from '/@/components/Table'
       })
       return flag
     } else {
-      return formItems.list
+      return list
     }
   }
   watch(

src/views/baseinfo/package/TenantAuditStepModal.vue

@@ -3,6 +3,7 @@
     v-bind="$attrs"
     :use-wrapper="true"
     :title="getTitle"
+    :form-schema="formSchema"
     width="30%"
     @register="registerModal"
     @ok="handleSave"
@@ -44,13 +45,14 @@
   import { formSchema } from './columns'
   import { ApiEdit, ApiInfo } from './api'
   import { useMessage } from '/@/hooks/web/useMessage'
+  import { updateFormField } from '/@/hooks/component/costomForm'
   // 声明Emits
   const emit = defineEmits(['success', 'register'])
   const isUpdate = ref(true)
   const loading = ref(false)
   const rowId = ref('')
   const { createMessage } = useMessage()
-  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+  const [registerForm, { resetFields, setFieldsValue, validate, updateSchema }] = useForm({
     labelWidth: 100,
     schemas: formSchema,
     showActionButtonGroup: false,
@@ -62,6 +64,7 @@
     isUpdate.value = !!data?.isUpdate
     if (unref(isUpdate)) {
       // setModalProps({ confirmLoading: true });
+      updateFormField(updateSchema)
       rowId.value = data.record.id
       const res: API.DataResult = await ApiInfo({ id: unref(rowId) })
       if (res.succeeded) {