处理表单组渲染逻辑

zkqy-ui/src/components/FormGroup/Approve.vue

@@ -1,15 +1,16 @@
 <template>
   <div class="list-wrap">
-    <div class="list-item" v-for="(item, index) in myFormList" :key="index">
+    <div class="list-item" v-for="(item, index) in formArray" :key="index">
       <k-form-build
         :dynamicData="item.template.dfFormSql || {}"
-        :defaultValue="item.template.defaultValue"
+        :defaultValue="item.template.defaultValue || {}"
         class="formBuild"
         ref="addFromRef"
         :value="item.template.dfVueTemplate"
       />
+      <el-divider></el-divider>
     </div>
-    <el-divider></el-divider>
+
     <!-- <div class="log-list"></div> -->
     <el-descriptions
       v-for="(item, index) in nodeLogList"
@@ -76,6 +77,7 @@
 // import formList from "@/assets/js/formArray";
 import { camelCase, toUnderline } from "@/utils/index";
 import { disableFormItem } from "@/utils/kFormDesign";
+import { uuid as uuidv4 } from "uuid";
 export default {
   name: "Approve",
   props: {
@@ -100,6 +102,7 @@ export default {
       //     formJson: formList,
       //   },
       // ],
+      formArray: [],
       form: {
         approvalStatus: "", //审批结果
         approvalRemark: "", //审批备注
@@ -144,7 +147,8 @@ export default {
   },
   computed: {
     myFormList() {
-      return this.disableHandler(this.formList);
+      return this.formList;
+      // return this.disableHandler(this.formList);
       // this.formList.forEach((item) => {
       //   item.template.dfFormSql = JSON.parse(item.template.dfFormSql);
       //   item.template.dfVueTemplate = JSON.parse(item.template.dfVueTemplate);
@@ -152,7 +156,21 @@ export default {
       // return this.formList;
     },
   },
+  watch: {
+    myFormList: {
+      handler(val) {
+        // this.$emit("update:formList", val);
+        this.formArray = this.disableHandler(val);
+        console.log(this.formArray);
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
   methods: {
+    getUUID() {
+      return uuidv4();
+    },
     /**
      *
      * @param {array} formList 表单列表
@@ -163,14 +181,22 @@ export default {
       this.resetForm();
       if (formList.length == 0) return [];
       formList.forEach((item) => {
-        item.template.dfFormSql = JSON.parse(item.template.dfFormSql);
+        item.template.dfFormSql =
+          typeof item.template.dfFormSql == "object"
+            ? item.template.dfFormSql
+            : JSON.parse(item.template.dfFormSql);
         item.template.dfVueTemplate = disableFormItem(
-          JSON.parse(item.template.dfVueTemplate)
+          typeof item.template.dfVueTemplate == "object"
+            ? item.template.dfVueTemplate
+            : JSON.parse(item.template.dfVueTemplate)
         );
-        item.template.defaultValue = item.template.resultMap[0]?.resultMap
-          ? item.template.resultMap[0].resultMap
-          : {};
-        for (const key of Object.keys(item.template.defaultValue)) {
+        if (item.template.resultMap) {
+          item.template.defaultValue = item.template.resultMap[0]?.resultMap
+            ? item.template.resultMap[0].resultMap
+            : {};
+        }
+
+        for (const key of Object.keys(item.template?.defaultValue || {})) {
           item.template.defaultValue[toUnderline(key)] =
             item.template.defaultValue[key];
         }

zkqy-ui/src/views/bussiness/OAMange.vue

@@ -361,14 +361,46 @@ export default {
       };
       let res = await getProcessNodeFormTemplate(payLoad);
       if (res.code == 200) {
-        this.formList = res.data;
-        this.tableName = res.data[0].template.dfTableName;
+        if (res.data[0]?.template?.mainForm) {
+          //表单组
+          this.transformDataFormat(res.data[0].template);
+          this.tableName =
+            res.data[0].template.mainForm.showTemplate.dfTableName;
+          console.log(this.formList);
+        } else {
+          this.formList = res.data;
+          this.tableName = res.data[0].template.dfTableName;
+        }
+
         this.nodeLogList = row.nodeLog.slice(1);
         this.show = true;
       } else {
         this.$message.error("网络异常,请稍后再试");
       }
     },
+    // 将表单组数据转换成符合单个表单的数据格式
+    transformDataFormat(data) {
+      let { mainForm, subFormList } = data;
+      this.formList = [];
+      let showValue = mainForm.showValue[0];
+      if (showValue) {
+        mainForm.showTemplate.resultMap = mainForm.showValue;
+      }
+      this.formList.push({
+        template: mainForm.showTemplate,
+      });
+      if (subFormList && subFormList.length > 0) {
+        subFormList.forEach((item) => {
+          let showValue = item.showValue[0];
+          if (showValue) {
+            item.showTemplate.resultMap = mainForm.showValue;
+          }
+          this.formList.push({
+            template: item.showTemplate,
+          });
+        });
+      }
+    },
     toDetail(row) {
       console.log(row);
       let { bepTaskPlanKey, benTaskNodeKey, benTaskProcessKey } = row;