自定义表单完结

dsk-operate-ui/src/components/DskCustomItemRender/index.vue

 <template>
   <div class="dsk-custom-item-render" :class="classCreate(comCustomItem.comType)">
     <!-- 编辑模式 -->
-    <el-form-item class="dsk-custom-form-render-item" :prop="validatorTarget" :rules="validatorRules(comCustomItem)">
+    <el-form-item class="dsk-custom-form-render-item" :prop="validatorTarget" :rules="validatorRules(comCustomItem)" :show-message="false">
       <template v-if="isModify">
         <!-- 单行文本类型 -->
         <el-input v-model="comCustomItem.componentAttribute.value" :placeholder="comCustomItem.componentAttribute.placeholder" clearable
@@ -123,8 +123,17 @@ export default {
   methods: {
     // 验证规则
     validatorRules(item) {
-      if (!item.formAttribute) return {};
-      return item.formAttribute.required ? item.formAttribute.requiredRules ? item.formAttribute.requiredRules : { required: true, message: `${item.formAttribute.label}不能为空` } : item.formAttribute.rules;
+      let type = Object.prototype.toString.call(item.componentAttribute.value).split(" ")[1].replace("]", "").toLowerCase();
+      if (!item.formAttribute) return { required: false, type };
+      if (item.formAttribute.required) {
+        if (item.formAttribute.requiredRules) return item.formAttribute.requiredRules;
+        return { required: true, type, message: `${item.formAttribute.label}不能为空` };
+      }
+      if (Object.keys(item.formAttribute.rules).length) {
+        return item.formAttribute.rules;
+      } else {
+        return { required: false, type };
+      };
     },
     classCreate(comType) {
       const classParams = {

dsk-operate-ui/src/components/DskEmailInput/index.vue

@@ -88,14 +88,6 @@ export default {
     prop: "emailValue",
     event: "update:emailValue"
   },
-  watch: {
-    emailValue: {
-      handler(newValue) {
-        this.comEmailValue = newValue;
-      },
-      immediate: true
-    }
-  },
   data() {
     return {
       comEmailValue: this.emailValue,

dsk-operate-ui/src/components/DskFileInput/index.vue

@@ -59,7 +59,7 @@ export default {
   data() {
     return {
       allowTypes: [".docx", ".pdf", ".doc", ".xlsx", ".xls", ".xlt", ".xlsm", ".txt", ".xltm"],
-      comFileList: [],
+      comFileList: JSON.parse(JSON.stringify(this.fileList)),
       fileListDialog: false,
       pageInfo: {
         pageSize: 10,

dsk-operate-ui/src/components/DskPhotoInput/index.vue

@@ -58,14 +58,6 @@ export default {
       default: () => []
     }
   },
-  // watch: {
-  //   fileList: {
-  //     handler(newValue) {
-  //       this.comFileList = newValue;
-  //     },
-  //     deep: true
-  //   }
-  // },
   model: {
     prop: "fileList",
     event: "update:fileList"
@@ -73,7 +65,7 @@ export default {
   data() {
     return {
       allowTypes: [".jpg", ".png", ".svg", ".gif", ".jpeg"],
-      comFileList: [],
+      comFileList: JSON.parse(JSON.stringify(this.fileList)),
       fileListDialog: false,
       photoViewDialog: false,
       viewTemp: {},

dsk-operate-ui/src/utils/generator/custom-design-options.js

 // 默认自定义表单组件
-import { validEmail } from "@/utils/validate";
+
 
 /**
  * 模块模板
@@ -225,7 +225,8 @@ export const defaultComOptions = [
         trigger: ["blur"],
         validator: (rule, value, callback) => {
           // console.log("value", value);
-          if (value && !validEmail(value)) {
+          const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+          if (value && !reg.test(value)) {
             return callback(new Error(`请输入正确的电子邮箱`));
           }
           return callback();
@@ -234,10 +235,11 @@ export const defaultComOptions = [
       requiredRules: {
         trigger: ["blur"],
         validator: (rule, value, callback) => {
+          const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
           if (!value && !value?.toString()?.trim()) {
             return callback(new Error(`请输入电子邮箱`));
           }
-          if (!validEmail(value)) {
+          if (!reg.test(value)) {
             return callback(new Error(`请输入正确的电子邮箱`));
           }
           return callback();

dsk-operate-ui/src/views/consultingOrgManagement/components/CustomForm/components/CustomFormDesign.vue

@@ -209,6 +209,7 @@ export default {
             }
           }
         }
+        console.log(_tempData);
         await this.submitCustomForm({
           subfieldModuleList: _tempData
         });
@@ -285,9 +286,11 @@ export default {
       try {
         const result = await this.getCustomFormDetail();
         if (result) {
+          this.formTemplate = cloneDeep(result);
+        }
+        if (result?.jsonData) {
           // 有模板数据 进行回显
-          this.formTemplate = result;
-          this.parseTemplate(result.jsonData);
+          this.parseTemplate(result?.jsonData);
           this.olduSbfieldModuleList = cloneDeep(this.subfieldModuleForm.subfieldModuleList);
           return;
         }

dsk-operate-ui/src/views/consultingOrgManagement/components/CustomForm/components/SubfieldItem.vue

@@ -145,7 +145,7 @@ export default {
         }
       } catch (error) {
         const { errors, fields } = error;
-        console.log(errors, fields);
+        // console.log(errors, fields);
         this.$set(this.comChildModuleInfo.formAttribute, "isError", true);
       }
     },

dsk-operate-ui/src/views/consultingOrgManagement/components/EnterpriseList/detail/consultingAgency.vue

@@ -271,34 +271,64 @@ export default {
     },
     async formTemplateInit() {
       try {
+        this.loading = true;
+        this.$emit("searchLoadingChange", this.loading);
         const _formTemplate = await this.getCustomFormDetail();
+        this.formTemplate = cloneDeep(_formTemplate);
         const _formTemplateData = await this.getCustomFormDataByProjectKey(this.projectKey);
+        this.formTemplateData = cloneDeep(_formTemplateData);
         await this.customFormRender(_formTemplate, _formTemplateData);
       } catch (error) {
 
+      } finally {
+        this.loading = false;
+        this.$emit("searchLoadingChange", this.loading);
       }
     },
     async customFormRender(formTemplate, formData) {
       try {
         // 缺失模板不渲染
         if (!formTemplate || !formTemplate.jsonData) return;
-        // 有表单数据的情况
-        if (formData) {
-          return;
-        }
-        // 无表单数据只渲染模板
         const template = jsonStrToObject(formTemplate.jsonData);
+        const templateFormData = JSON.parse(formData.jsonData);
         if (template) {
-          console.log(template);
-          const table = this.createTemplateTable(template.subfieldModuleList);
-          this.oldSubfieldModuleList = cloneDeep(table);
-          this.$set(this.form, "subfieldModuleList", table);
+          // 模板
+          let subfieldModuleListTemplate = template.subfieldModuleList;
+          // 有表单数据先处理数据
+          if (templateFormData) {
+            subfieldModuleListTemplate = this.hasCustomFormDataHandle(subfieldModuleListTemplate, templateFormData);
+          }
+          // 渲染模板
+          this.renderTemplate(subfieldModuleListTemplate);
         }
       } catch (error) {
         this.$message.error(`解析模板失败,${error.message}`);
         console.log(error);
       }
     },
+    hasCustomFormDataHandle(formTemplate, formData) {
+      // console.log(formTemplate);
+      // console.log(formData);
+      formData.forEach(item => {
+        this.interComTemplateParent(formTemplate, item);
+      });
+      return cloneDeep(formTemplate);
+    },
+    interComTemplateParent(formTemplate, comItem) {
+      const module = formTemplate.find(item => item.uid === comItem.pid);
+      if (module) {
+        const index = module.children.findIndex(child => child.uid === comItem.uid);
+        // 找到模板 插入数据
+        if (index > -1) {
+          module.children[index].componentAttribute.value = comItem.componentAttribute.value;
+        }
+      }
+    },
+    renderTemplate(template) {
+      const table = this.createTemplateTable(template);
+      this.oldSubfieldModuleList = cloneDeep(table);
+      this.$set(this.form, "subfieldModuleList", table);
+    },
     // 创建渲染table展示格式
     createTemplateTable(list) {
       /** 
@@ -442,7 +472,8 @@ export default {
     async updateConsultingDetail() {
       try {
         const flag = await this.$refs["comProjectDetailForm"].validate();
-        if (flag) {
+        const customFormFlag = await this.$refs["customDesignFormTemplate"].validate();
+        if (flag && customFormFlag) {
           // 通过验证校验咨询机构是否存在
           const result = await this.searchConsultingHandle(this.comProjectDetailInfo.advisoryBody.advisoryBodyName);
           if (result.advisoryBodyCid) {
@@ -461,7 +492,14 @@ export default {
               settleFinishTime: _temp.advisoryBodyProject.settleFinishTime ?? "",
               isFinalJudgeUnit: _temp.advisoryBodyProject.isFinalJudgeUnit ?? "",
             };
-            this.$emit("editComProjectDetailSuccess", paramsData);
+            const customFormData = this.saveCutomFormData();
+            const customFormParamsData = {
+              projectKey: this.projectKey,
+              templateId: this.formTemplate.templateId,
+              jsonData: JSON.stringify(customFormData)
+            };
+            // 处理自定义表单数据
+            this.$emit("editComProjectDetailSuccess", paramsData, customFormParamsData);
           }
         }
       } catch (error) {
@@ -473,6 +511,36 @@ export default {
           }
         }
       }
+    },
+    saveCutomFormData() {
+      /** 
+       * @type {Array<any>}
+      */
+      let _array = cloneDeep(this.form.subfieldModuleList);
+
+      function flatCustomForm(arr) {
+        const _temp = [];
+
+        function flagArray(array) {
+          array.forEach(item => {
+            if (item?.length) {
+              flagArray(item);
+            } else {
+              _temp.push(item);
+            }
+          });
+        }
+
+        arr.forEach(item => {
+          flagArray(item.childrentGroup);
+        });
+
+        return _temp;
+      }
+
+      const _result = flatCustomForm(_array);
+
+      return _result;
     }
   },
 }

dsk-operate-ui/src/views/consultingOrgManagement/components/EnterpriseList/detail/projectDetail.vue

@@ -22,7 +22,7 @@
           <!-- 编辑按钮 展示咨询机构结算信息显示 -->
           <transition name="fade" appear mode="out-in">
             <div class="edit-project-detail-container" v-if="currentList === 'consultingAgency' && !isModify" :key="'edit-project'">
-              <el-button type="primary" @click="editProjectDetail">编辑信息</el-button>
+              <el-button type="primary" @click="editProjectDetail" :disabled="loading">编辑信息</el-button>
             </div>
             <div class="save-project-detail-container" v-if="currentList === 'consultingAgency' && isModify" :key="'save-project'">
               <el-button type="primary" @click="saveProjectDetail" :disabled="loading">保存</el-button>
@@ -48,7 +48,7 @@
 </template>
 <script>
 import DskTabToggle from "@/components/DskTabToggle";
-import { getConsultingOrgProjectDetailApi, updateConsultingDetailApi } from "@/api/consultingOrgManagement";
+import { getConsultingOrgProjectDetailApi, updateConsultingDetailApi, updateCustomFormData } from "@/api/consultingOrgManagement";
 import { v4 } from 'uuid';
 import BasicEngineeringInformation from "@/views/consultingOrgManagement/components/EnterpriseList/detail/basicEngineeringInformation";
 import consultingAgency from "@/views/consultingOrgManagement/components/EnterpriseList/detail/consultingAgency";
@@ -120,10 +120,11 @@ export default {
       this.$refs["consultingAgency"].updateConsultingDetail();
     },
     // 编辑成功提交信息
-    async editComProjectDetailSuccess(data) {
+    async editComProjectDetailSuccess(data, customFormData) {
       try {
         const result = await updateConsultingDetailApi(data);
-        if (result.code) {
+        const customFormResult = await updateCustomFormData(customFormData);
+        if (result.code == 200 && customFormResult.code == 200) {
           this.$message.success("更新咨询机构结算信息成功");
           this.isModify = false;
           this.$tab.closeOpenPage({
@@ -136,7 +137,7 @@ export default {
           });
         }
       } catch (error) {
-
+        console.log(error);
       }
     },
     cancelSave() {
@@ -227,6 +228,13 @@ export default {
             box-sizing: border-box;
             background-color: #0081ff;
             border-color: #0081ff;
+
+            &.is-disabled {
+              color: #c0c4cc;
+              background-image: none;
+              background-color: #ffffff;
+              border-color: #e6ebf5;
+            }
           }
         }