在模板渲染页面添加表单组的解析渲染逻辑

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

@@ -1,11 +1,15 @@
 <template>
   <div class="list-wrap">
-    <div class="list-item" v-for="(item, index) in formArray" :key="index">
+    <div
+      class="list-item"
+      v-for="(item, index) in formArray"
+      :key="index + new Date().getTime()"
+    >
       <k-form-build
         :dynamicData="item.template.dfFormSql || {}"
         :defaultValue="item.template.defaultValue || {}"
         class="formBuild"
-        ref="addFromRef"
+        :ref="item.tableName"
         :value="item.template.dfVueTemplate"
       />
       <el-divider></el-divider>
@@ -143,6 +147,7 @@ export default {
         ],
       },
       defaultValue: {}, //表单默认值
+      defaultValueObj: {},
     };
   },
   computed: {
@@ -161,6 +166,9 @@ export default {
       handler(val) {
         // this.$emit("update:formList", val);
         this.formArray = this.disableHandler(val);
+        this.$nextTick(() => {
+          this.setDefaultValue();
+        });
         console.log(this.formArray);
       },
       deep: true,
@@ -168,6 +176,18 @@ export default {
     },
   },
   methods: {
+    // 延迟
+    sleep(ms) {
+      var unixtime_ms = new Date().getTime();
+      while (new Date().getTime() < unixtime_ms + ms) {}
+      return "";
+    },
+    setDefaultValue() {
+      for (const key in this.defaultValueObj) {
+        console.log(this.$refs[key], key);
+        this.$refs[key][0]?.setData(this.defaultValueObj[key]);
+      }
+    },
     getUUID() {
       return uuidv4();
     },
@@ -178,7 +198,9 @@ export default {
 
      */
     disableHandler(formList) {
+      console.log(formList);
       this.resetForm();
+      this.defaultValueObj = {};
       if (formList.length == 0) return [];
       formList.forEach((item) => {
         item.template.dfFormSql =
@@ -200,6 +222,8 @@ export default {
           item.template.defaultValue[toUnderline(key)] =
             item.template.defaultValue[key];
         }
+        let tableName = (this.defaultValueObj[item.tableName] =
+          item.template.defaultValue);
         // this.$nextTick(() => {
         //   Object.assign(this.defaultValue, item.template.defaultValue);
         // });

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

@@ -0,0 +1,253 @@
+<template>
+  <div class="list-wrap">
+    <div
+      class="list-item"
+      v-for="(item, index) in formArray"
+      :key="index + new Date().getTime()"
+    >
+      <k-form-build
+        :dynamicData="item.template.dfFormSql || {}"
+        class="formBuild"
+        :ref="item.tableName"
+        :value="item.template.dfVueTemplate"
+      />
+      <el-divider></el-divider>
+    </div>
+  </div>
+</template>
+
+<script>
+// 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: {
+    formList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    nodeLogList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  components: {},
+  data() {
+    return {
+      // formList: [
+      //   {
+      //     formJson: formList,
+      //   },
+      // ],
+      formArray: [],
+      form: {
+        approvalStatus: "", //审批结果
+        approvalRemark: "", //审批备注
+      },
+      statusOptions: [
+        {
+          value: "pass",
+          label: "通过",
+        },
+        {
+          value: "noPass",
+          label: "不通过",
+        },
+        {
+          value: "reject",
+          label: "驳回",
+        },
+      ],
+      statusObj: {
+        pass: "通过",
+        noPass: "不通过",
+        reject: "驳回",
+      },
+      rules: {
+        approvalStatus: [
+          {
+            required: true,
+            message: "请选择审批结果",
+            trigger: "change",
+          },
+        ],
+        approvalRemark: [
+          {
+            required: true,
+            message: "请输入审批备注",
+            trigger: "blur",
+          },
+        ],
+      },
+      defaultValue: {}, //表单默认值
+    };
+  },
+  computed: {
+    myFormList() {
+      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);
+      // });
+      // return this.formList;
+    },
+  },
+  watch: {
+    myFormList: {
+      handler(val) {
+        // this.$emit("update:formList", val);
+
+        let temp = JSON.parse(JSON.stringify(val));
+        this.formArray = this.disableHandler(temp);
+        this.$nextTick(() => {
+          console.log("表单组渲染");
+          this.setDefaultValue();
+        });
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  methods: {
+    // 延迟
+    // sleep(ms) {
+    //   var unixtime_ms = new Date().getTime();
+    //   while (new Date().getTime() < unixtime_ms + ms) {}
+    //   return "";
+    // },
+    // 设置默认值
+    setDefaultValue() {
+      console.log("开始渲染默认数据");
+      this.formArray.forEach((item) => {
+        for (const key of Object.keys(item.template?.defaultValue || {})) {
+          item.template.defaultValue[toUnderline(key)] =
+            item.template.defaultValue[key];
+        }
+        this.defaultValue[item.tableName] = item.template?.defaultValue || {};
+      });
+      for (const key in this.defaultValue) {
+        this.$refs[key][0]?.setData(this.defaultValue[key]);
+        console.log(this.$refs[key][0]);
+      }
+    },
+    getUUID() {
+      return uuidv4();
+    },
+    /**
+     *
+     * @param {array} formList 表单列表
+     * @return {array} 处理后的表单列表-添加disable属性
+
+     */
+    disableHandler(formList) {
+      this.resetForm();
+      if (formList.length == 0) return [];
+      formList.forEach((item) => {
+        console.log(item);
+        item.template.dfFormSql =
+          typeof item.template.dfFormSql == "object"
+            ? item.template.dfFormSql
+            : JSON.parse(item.template.dfFormSql);
+        // item.template.dfVueTemplate = disableFormItem(
+        //   typeof item.template.dfVueTemplate == "object"
+        //     ? item.template.dfVueTemplate
+        //     : JSON.parse(item.template.dfVueTemplate)
+        // );
+        item.template.dfVueTemplate =
+          typeof item.template.dfVueTemplate == "object"
+            ? item.template.dfVueTemplate
+            : JSON.parse(item.template.dfVueTemplate);
+
+        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];
+        // }
+        // this.defaultValue[item.tableName] = item.template?.defaultValue || {};
+
+        // this.$nextTick(() => {
+        //   Object.assign(this.defaultValue, item.template.defaultValue);
+        // });
+        // item.formInfo.jsonData = disableFormItem(item.formInfo.jsonData);
+      });
+
+      return formList;
+    },
+    // 获取表单信息
+    getformInfo() {
+      let res = {
+        flag: false,
+      };
+      return new Promise((resolve) => {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            // alert('submit!');
+            res.flag = true;
+            res.data = this.form;
+            console.log(res);
+            // return res;
+            resolve(res);
+          } else {
+            resolve(res);
+          }
+        });
+      });
+    },
+    // 重置审批表单
+    resetForm() {
+      Object.assign(this.form, {
+        approvalStatus: "",
+        approvalRemark: "",
+      });
+    },
+    // 获取指定表单数据
+    getFormData(refName) {
+      return new Promise((resolve) => {
+        let { tableName, formItem, relateFormItem } = refName;
+        console.log(this.$refs[tableName]);
+        this.$refs[tableName][0]?.getData().then((values) => {
+          resolve({
+            tableName,
+            data: values,
+            formItem,
+            relateFormItem,
+          });
+        });
+      });
+    },
+  },
+  // mounted() {
+
+  // },
+};
+</script>
+
+<style scoped lang="scss">
+// .list-wrap {
+//   display: flex;
+//   flex-direction: column;
+//   .list-item {
+//     margin-top: 10px;
+//     &::after {
+//       content: "";
+//       display: block;
+//       border: 1px dashed #41baeb; /* 设置虚线样式 */
+//     }
+//     &:last-child::after {
+//       display: none;
+//     }
+//   }
+// }
+</style>

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

@@ -388,6 +388,7 @@ export default {
       }
       this.formList.push({
         template: mainForm.showTemplate,
+        tableName: mainForm.mainFormTable,
       });
       if (subFormList && subFormList.length > 0) {
         subFormList.forEach((item) => {
@@ -397,6 +398,7 @@ export default {
           }
           this.formList.push({
             template: item.showTemplate,
+            tableName: item.formItem?.split(".")?.[0],
           });
         });
       }

zkqy-ui/src/views/bussiness/detail/FlowChart.vue

@@ -86,7 +86,6 @@ export default {
     async loadFlowCanvas(flowData) {
       const self = this;
       try {
-        console.log(flowData.xmlData);
         await self.bpmnViewer.importXML(flowData.xmlData);
         self.fitViewport();
         if (flowData.nodeData !== undefined && flowData.nodeData.length > 0) {

zkqy-ui/src/views/bussiness/detail/formList.vue

@@ -1,6 +1,10 @@
 <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 myFormList"
+      :key="index + new Date().getTime()"
+    >
       <!--  :dynamicData="dynamicData"
         :defaultValue="defaultValue" -->
       <k-form-build
@@ -28,11 +32,27 @@ export default {
       //     formJson: formList,
       //   },
       // ],
+      myFormList: [],
     };
   },
   computed: {
-    myFormList() {
-      return this.disableHandler(this.formList);
+    // myFormList() {
+    //   return this.disableHandler(this.formList);
+    // },
+  },
+  watch: {
+    formList: {
+      handler(val) {
+        // this.$emit("update:formList", this.disableHandler(val));
+        if (!val) return;
+        this.myFormList = this.disableHandler(val);
+        this.$nextTick(() => {
+          // this.$emit("update:formList", this.myFormList);
+          console.log(this.form, 111);
+        });
+      },
+      deep: true,
+      immediate: true,
     },
   },
   methods: {

zkqy-ui/src/views/tablelist/commonTable/listInfo.vue

@@ -244,16 +244,23 @@
         scrolling="no"
       >
       </iframe> -->
-      <k-form-build
-        v-if="jsonData"
-        class="formBuild"
-        ref="addFromRef"
-        :dynamicData="dynamicData"
-        :defaultValue="defaultValue"
-        @submit="tempSubBtn"
-        @change="formChangeHandler"
-        :value="jsonData"
-      />
+      <!-- <template v-else> -->
+      <template v-if="formType == 'dragFormGroup'">
+        <FormList ref="formGroupRef" :formList="formList"></FormList>
+      </template>
+      <template v-else-if="formType == 'dragForm'">
+        <k-form-build
+          v-if="jsonData"
+          class="formBuild"
+          ref="addFromRef"
+          :dynamicData="dynamicData"
+          :defaultValue="defaultValue"
+          @submit="tempSubBtn"
+          @change="formChangeHandler"
+          :value="jsonData"
+        />
+      </template>
+
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="editConfirmHandler">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
@@ -325,10 +332,12 @@ import { inputDisableComplete } from "@/utils/other";
 import Menu from "./BtnMenu.vue";
 import { checkRole } from "@/utils/permission";
 import DialogTemplate from "@/views/dialogTemplate/components/index.vue";
+import FormList from "@/components/FormGroup/formList.vue";
+import { v4 as uuidv4 } from "uuid";
 
 export default {
   name: "listInfo",
-  components: { Queryfrom, Menu, DialogTemplate },
+  components: { Queryfrom, Menu, DialogTemplate, FormList },
   data() {
     return {
       // 绑定按钮dialog
@@ -435,6 +444,12 @@ export default {
       currentRow: {},
       // 操作列是否显示隐藏
       isShowExcuteCol: false,
+
+      // 表单组数据
+      formList: [],
+      formType: "dragFormGroup",
+      FormNameList: [], //表单组中表格名称
+      FormListDefaultValue: {}, //表单组的默认表单数据
     };
   },
 
@@ -658,6 +673,7 @@ export default {
     handleAdd(row) {
       // this.reset();
       this.defaultValue = {};
+      this.formType = "dragForm";
       getInfoBySqlKey(this.templateInfo.template.sqlKey).then(({ data }) => {
         if (!data || !data.dfVueTemplate) {
           this.jsonData = false;
@@ -707,11 +723,18 @@ export default {
         return null;
       }
     },
+    // 延迟
+    sleep(ms) {
+      var unixtime_ms = new Date().getTime();
+      while (new Date().getTime() < unixtime_ms + ms) {}
+      return "";
+    },
     /** 修改按钮操作 */
     async handleUpdate(row, btnData) {
       let nameTable = this.templateInfo.template.dtTableName;
       this.rowobj = {};
       let obj = {};
+      this.formList = [];
       for (let key in row) {
         let modifiedTable = key
           .replace(/[A-Z]/g, (match) => `_${match}`)
@@ -730,7 +753,29 @@ export default {
 
       // 新的修改请求
       try {
-        let payLoad = {
+        console.log("btnData", btnData);
+        let { btnFormType } = btnData;
+        this.formType = btnFormType;
+        let payLoad = {};
+        let primary = camelCase(
+          this.tableName + "_" + this.templateInfo.template?.primaryKey
+        );
+        // if (btnFormType == "dragFormGroup") {
+        //   payLoad.updateCommonEntityList = {
+        //     basicMap: {
+        //       btnType: this.currentBtnData.btnType,
+        //       btnKey: this.currentBtnData.btnKey,
+        //       visible: "false",
+        //       sqlKey: this.templateInfo.template.sqlKey,
+        //       tableName: this.tableName,
+        //     },
+        //     conditionMap: {},
+        //   };
+        //   payLoad.updateCommonEntityList.conditionMap[
+        //     this.templateInfo.template?.primaryKey
+        //   ] = row[primary];
+        // } else {
+        payLoad = {
           basicMap: {
             btnType: this.currentBtnData.btnType,
             btnKey: this.currentBtnData.btnKey,
@@ -740,32 +785,53 @@ export default {
           },
           conditionMap: {},
         };
-        let primary = camelCase(
-          this.tableName + "_" + this.templateInfo.template?.primaryKey
-        );
         payLoad.conditionMap[this.templateInfo.template?.primaryKey] =
           row[primary];
+        // }
+
         let res = await btnCommonApi(payLoad);
         // 判断是否绑定dialog弹窗
         if (!this.currentBtnData.btnTableFormGroupKey) {
-          if (!res.data || !res.data.template) {
+          if ((!res.data || !res.data.template) && !res.data?.mainForm) {
             this.$message.error("当前按钮未绑定表单!");
             return;
           }
+          if (btnFormType == "dragFormGroup") {
+            //表单组
+            if (res.code == 200) {
+              if (res.data.mainForm) {
+                //表单组
+                console.log(res.data);
+                this.transformDataFormat(res.data);
+                this.tableName = res.data.mainForm.showTemplate.dfTableName;
+              } else {
+                this.formList = res.data;
+                this.tableName = res.data.dfTableName;
+              }
+              this.open = true;
+              // this.$nextTick(() => {
+              //   // this.sleep(1000);
+              //   this.$refs.formGroupRef.setDefaultValue();
+              // });
+            } else {
+              this.$message.error("网络异常,请稍后再试");
+            }
+          } else {
+            //单个表单
+            res.data.template.dfFormSql &&
+              (this.dynamicData = JSON.parse(res.data.template.dfFormSql));
+            this.addRealFieldName(res.data.result.resultMap);
+            let resultMap = res.data.result.resultMap;
 
-          res.data.template.dfFormSql &&
-            (this.dynamicData = JSON.parse(res.data.template.dfFormSql));
-          this.addRealFieldName(res.data.result.resultMap);
-          let resultMap = res.data.result.resultMap;
-
-          Object.assign(this.defaultValue, resultMap);
-          this.jsonData = JSON.parse(res.data.template.dfVueTemplate);
-          this.open = true;
-          this.title = "修改信息";
-          this.form.password = this.initPassword;
-          this.$nextTick(() => {
-            this.$refs.addFromRef.setData(res.data.result.resultMap);
-          });
+            Object.assign(this.defaultValue, resultMap);
+            this.jsonData = JSON.parse(res.data.template.dfVueTemplate);
+            this.open = true;
+            this.title = "修改信息";
+            this.form.password = this.initPassword;
+            this.$nextTick(() => {
+              this.$refs.addFromRef.setData(res.data.result.resultMap);
+            });
+          }
         } else {
           this.subTableName = res.data.result.dragTables[1].dtTableName;
           this.btnDialogVisible = true;
@@ -859,6 +925,43 @@ export default {
         this.form.password = "";
       });
     },
+    // 将表单组数据转换成符合单个表单的数据格式
+    transformDataFormat(data) {
+      this.FormNameList = [];
+      let { mainForm, subFormList } = data;
+      this.formList = [];
+      let showValue = mainForm.showValue[0];
+      if (showValue) {
+        mainForm.showTemplate.resultMap = mainForm.showValue;
+      }
+      this.formList.push({
+        template: mainForm.showTemplate,
+        tableName: mainForm.mainFormTable,
+      });
+      this.FormNameList.push({
+        tableName: mainForm.mainFormTable,
+        formItem: mainForm.mainFormItem,
+        relateFormItem: null,
+      });
+      if (subFormList && subFormList.length > 0) {
+        subFormList.forEach((item) => {
+          console.log(item);
+          let showValue = item.showValue[0];
+          if (showValue) {
+            item.showTemplate.resultMap = mainForm.showValue;
+          }
+          this.formList.push({
+            template: item.showTemplate,
+            tableName: item.formItem?.split(".")?.[0],
+          });
+          this.FormNameList.push({
+            tableName: item.formItem?.split(".")?.[0],
+            formItem: item.formItem,
+            relateFormItem: item.relateMainItem,
+          });
+        });
+      }
+    },
     // 添加真正的字段名
     addRealFieldName(row) {
       let fieldList = Object.keys(row);
@@ -1089,7 +1192,7 @@ export default {
     },
     //提交编辑结果按钮回调
     async editConfirmHandler() {
-      if (this.$refs.addFromRef) {
+      if (this.$refs.addFromRef && this.formType == "dragForm") {
         this.$refs.addFromRef
           .getData()
           .then(async (values) => {
@@ -1159,6 +1262,136 @@ export default {
             console.log(res);
             this.$modal.msgError("表单校验失败,请规范填写数据");
           });
+      } else if (this.formType == "dragFormGroup") {
+        //表单组
+        // console.log(this.$refs.formGroupRef);
+
+        let promiseArray = this.FormNameList.map((item) => {
+          return this.$refs.formGroupRef?.getFormData(item);
+        });
+        Promise.all(promiseArray).then(
+          async (res) => {
+            // 获取到所有表单数据
+            console.log(res);
+            let data = {
+              basicMap: {
+                tableName: this.tableName,
+                // btnKey: btnData.btnKey,
+                btnKey: this.currentBtnData.btnKey,
+                BpmRunNodeFormDateVo: {},
+              },
+              conditionMap: {},
+              commMap: {},
+              btnParametersMap: {},
+            };
+            if (this.currentBtnData.btnParams) {
+              let btnParams =
+                JSON.parse(this.currentBtnData.btnParams)?.commonFieldData ||
+                [];
+              // let conditionData =
+              //   JSON.parse(this.currentBtnData.btnParams)?.conditionData || [];
+              // let
+              btnParams.forEach((item) => {
+                data.btnParametersMap[item.fieldName.split(".")[1]] =
+                  item.fieldValue
+                    ? item.fieldValue
+                    : this.currentRow[
+                        camelCase(item.fieldName.replace(".", "_"))
+                      ];
+              });
+              // conditionData.forEach((item) => {
+              //   data.conditionMap[item.fieldName.split(".")[1]] =
+              //     item.fieldValue
+              //       ? item.fieldValue
+              //       : this.currentRow[
+              //           camelCase(item.fieldName.replace(".", "_"))
+              //         ];
+              // });
+            }
+            data.basicMap.btnType = this.currentBtnData.btnType;
+            data.basicMap.visible = true;
+            let payLoad = {};
+            if (this.currentBtnData.btnType == "UPDATE") {
+              //修改
+              payLoad.updateCommonEntityList = res.map((item, index) => {
+                let result = {
+                  basicMap: {
+                    tableName: item.tableName,
+                  },
+                  commMap: {
+                    ...item.data,
+                  },
+                  conditionMap: {},
+                };
+                if (index == 0) {
+                  //主表条件
+                  let conditionData =
+                    JSON.parse(this.currentBtnData.btnParams).conditionData ||
+                    [];
+                  conditionData.forEach((item) => {
+                    result.conditionMap[item.fieldName.split(".")[1]] =
+                      item.fieldValue
+                        ? item.fieldValue
+                        : this.currentRow[
+                            camelCase(item.fieldName.replace(".", "_"))
+                          ];
+                  });
+                } else {
+                  // 从表条件
+                  let { formItem, relateFormItem } = item;
+                  let fieldName = formItem.split(".")[1];
+                  let value =
+                    this.currentRow[
+                      camelCase(relateFormItem.replace(".", "_"))
+                    ];
+                  result.conditionMap[fieldName] = value;
+                }
+                return result;
+              });
+            } else if (this.currentBtnData.btnType == "INSERT") {
+              // 新增
+              let uuid = uuidv4();
+              console.log(uuid);
+              payLoad.insertCommonEntityList = res.map((item, index) => {
+                let result = {
+                  basicMap: {
+                    tableName: item.tableName,
+                  },
+                  addListMap: [
+                    {
+                      ...item.data,
+                    },
+                  ],
+                };
+
+                // 添加新增数据的关联条件
+                let { formItem, relateFormItem } = item;
+                console.log(formItem);
+                result.addListMap[0][formItem.split(".")[1]] = uuid;
+                return result;
+              });
+            }
+
+            data.basicMap.BpmRunNodeFormDateVo = payLoad;
+            try {
+              let res = await btnCommonApi(data);
+              if (res.code == 200) {
+                this.$message.success("操作成功");
+                this.getList();
+                this.defaultValue = {};
+                this.open = false;
+              } else {
+                this.$message.error("网络异常,请稍后再试");
+              }
+            } catch (error) {
+              console.log(error);
+              this.$message.error("网络异常,请稍后再试");
+            }
+          },
+          (err) => {
+            console.log(err);
+          }
+        );
       } else {
         // 没有绑定表单
         let data = {
@@ -1378,6 +1611,7 @@ export default {
         this.noNeedHandler(btnData, row);
         return;
       }
+
       switch (btnType) {
         case "INNERLINK":
           this.routerHandler(btnData, btnType);
@@ -1397,6 +1631,8 @@ export default {
         case "DELETE":
           this.handleDelete(row, btnData);
           break;
+        case "INSERT":
+          this.handleUpdate(row, btnData);
         default:
           break;
       }