带布局样式的表单组在审批流中的应用

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

@@ -1,19 +1,26 @@
 <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 || {}"
-        :defaultValue="item.template.defaultValue || {}"
-        class="formBuild"
-        :ref="item.tableName"
-        :value="item.template.dfVueTemplate"
-      />
-      <el-divider></el-divider>
+    <div v-if="!isLayout">
+      <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="item.tableName"
+          :value="item.template.dfVueTemplate"
+        />
+        <el-divider></el-divider>
+      </div>
     </div>
+    <LayoutIndex
+      v-else-if="isLayout"
+      ref="formGroupLayoutRef"
+      :layoutData="layoutData"
+    ></LayoutIndex>
 
     <!-- <div class="log-list"></div> -->
     <el-descriptions
@@ -82,6 +89,7 @@
 import { camelCase, toUnderline } from "@/utils/index";
 import { disableFormItem } from "@/utils/kFormDesign";
 import { uuid as uuidv4 } from "uuid";
+import LayoutIndex from "@/views/tablelist/components/FormGroupLayout/LayoutIndex.vue";
 export default {
   name: "Approve",
   props: {
@@ -97,8 +105,18 @@ export default {
         return [];
       },
     },
+    isLayout: {
+      type: Boolean,
+      default: false,
+    },
+    layoutData: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
   },
-  components: {},
+  components: { LayoutIndex },
   data() {
     return {
       // formList: [
@@ -164,6 +182,17 @@ export default {
   watch: {
     myFormList: {
       handler(val) {
+        console.log("this.isLayout", this.isLayout);
+        if (this.isLayout) {
+          this.$nextTick(() => {
+            this.$refs.formGroupLayoutRef?.initLayoutData(
+              JSON.parse(JSON.stringify(this.layoutData)),
+              true
+            );
+          });
+          return;
+        }
+        console.log(JSON.parse(JSON.stringify(val)));
         // this.$emit("update:formList", val);
         this.formArray = this.disableHandler(val);
         this.$nextTick(() => {

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

@@ -1,26 +1,33 @@
 <template>
   <div class="list-wrap">
-    <div class="list-item" v-for="(item, index) in myFormList" :key="index">
-      <k-form-build
-        v-if="item.type == 'single'"
-        :dynamicData="item.template.dfFormSql || {}"
-        :defaultValue="item.template.defaultValue"
-        class="formBuild"
-        ref="addFromRef"
-        :value="item.template.dfVueTemplate"
-      />
-      <div v-else>
+    <div v-if="!isLayout">
+      <div class="list-item" v-for="(item, index) in myFormList" :key="index">
         <k-form-build
-          v-for="(form, index) in item.templateArr"
-          :key="index"
-          :dynamicData="form.template.dfFormSql || {}"
-          :defaultValue="form.template.defaultValue"
+          v-if="item.type == 'single'"
+          :dynamicData="item.template.dfFormSql || {}"
+          :defaultValue="item.template.defaultValue"
           class="formBuild"
           ref="addFromRef"
-          :value="form.template.dfVueTemplate"
+          :value="item.template.dfVueTemplate"
         />
+        <div v-else>
+          <k-form-build
+            v-for="(form, index) in item.templateArr"
+            :key="index"
+            :dynamicData="form.template.dfFormSql || {}"
+            :defaultValue="form.template.defaultValue"
+            class="formBuild"
+            ref="addFromRef"
+            :value="form.template.dfVueTemplate"
+          />
+        </div>
       </div>
     </div>
+    <LayoutIndex
+      v-else-if="isLayout"
+      ref="formGroupLayoutRef"
+      :layoutData="layoutData"
+    ></LayoutIndex>
     <el-divider></el-divider>
     <!-- <div class="log-list"></div> -->
     <el-descriptions
@@ -45,6 +52,7 @@
 // import formList from "@/assets/js/formArray";
 import { camelCase, toUnderline } from "@/utils/index";
 import { disableFormItem } from "@/utils/kFormDesign";
+import LayoutIndex from "@/views/tablelist/components/FormGroupLayout/LayoutIndex.vue";
 export default {
   name: "FormDetail",
   props: {
@@ -67,9 +75,10 @@ export default {
       },
     },
   },
-  components: {},
+  components: { LayoutIndex },
   data() {
     return {
+      isLayout: false,
       myT: 1,
       form: {
         approvalStatus: "", //审批结果
@@ -115,6 +124,7 @@ export default {
   },
   computed: {
     myFormList() {
+      console.log(this.formList);
       return this.disableHandler(this.formList);
     },
     mytimes() {
@@ -135,7 +145,20 @@ export default {
      */
     disableHandler(formList) {
       this.resetForm();
+      console.log("formList", formList);
       if (formList.length == 0) return [];
+      this.isLayout =
+        formList[0]?.template?.layoutJson &&
+        JSON.parse(formList[0]?.template?.layoutJson)?.list.length > 0;
+      if (this.isLayout) {
+        this.$nextTick(() => {
+          this.$refs.formGroupLayoutRef?.initLayoutData(
+            JSON.parse(JSON.stringify(formList[0]?.template)),
+            true
+          );
+        });
+        return;
+      }
       formList.forEach((item) => {
         if (item.template.mainForm) {
           //表单组

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

@@ -180,6 +180,8 @@
             v-show="!times"
             ref="approveRef"
             :formList="formList"
+            :isLayout="isLayout"
+            :layoutData="layoutData"
             :nodeLogList="nodeLogList"
           ></Approve>
           <div v-show="times" class="times">
@@ -225,6 +227,10 @@ export default {
   dicts: ["bpm_type", "task_process_state"],
   data() {
     return {
+      // 表单组布局数据 start
+      isLayout: false,
+      layoutData: {},
+      // 表单组布局数据 end
       times: 2, //多次请求  表单组数据回显异常处理
       // 弹窗表单数据
       row: {},
@@ -393,6 +399,16 @@ export default {
           this.transformDataFormat(res.data[0].template);
           this.tableName =
             res.data[0].template.mainForm.showTemplate.dfTableName;
+          // 处理布局数据
+          this.isLayout =
+            res.data[0]?.template?.layoutJson &&
+            JSON.parse(res.data[0]?.template?.layoutJson)?.list.length > 0;
+          this.transformDataFormat(res.data[0].template);
+          if (this.isLayout) {
+            //自定义布局
+            console.log(JSON.parse(JSON.stringify(res.data[0].template)));
+            this.layoutData = JSON.parse(JSON.stringify(res.data[0].template));
+          }
           console.log(this.formList);
           this.nodeLogList = row.nodeLog.slice(1);
           this.show = true;
@@ -420,12 +436,20 @@ export default {
         this.$nextTick(() => {
           this.$refs.approveRef?.refreshForm();
         });
+        // this.$nextTick(() => {
+        //   // 手动触发布局组件的数据处理函数
+        //   console.log(111, JSON.parse(JSON.stringify(res.data[0].template)));
+        //   this.$refs.formGroupLayoutRef?.initLayoutData(
+        //     JSON.parse(JSON.stringify(res.data[0].template))
+        //   );
+        // });
       } else {
         this.$message.error("网络异常,请稍后再试");
       }
     },
     // 将表单组数据转换成符合单个表单的数据格式
     transformDataFormat(data) {
+      // debugger;
       let { mainForm, subFormList } = data;
       this.formList = [];
       let showValue = mainForm.showValue[0];

zkqy-ui/src/views/tablelist/components/FormGroupLayout/LayoutIndex.vue

@@ -13,6 +13,7 @@
 import { camelCase, toUnderline } from "@/utils";
 import LayoutItem from "./LayoutItem.vue";
 import { cloneDeep } from "lodash";
+import { disableFormItem } from "@/utils/kFormDesign";
 export default {
   name: "LayoutIndex",
   props: ["layoutData"],
@@ -41,12 +42,12 @@ export default {
     },
   },
   methods: {
-    initLayoutData(formData) {
+    initLayoutData(formData, isDisable = false) {
       console.log(JSON.parse(JSON.stringify(formData)));
       let { layoutJson, mainForm, subFormList } = formData;
       this.layoutJson = JSON.parse(layoutJson);
       this.transformDataFormat(formData);
-      this.formArray = this.disableHandler(this.formList);
+      this.formArray = this.disableHandler(this.formList, isDisable);
       this.setFormInfo(this.layoutJson.list);
       console.log("this.formArray", this.formArray);
       console.log("this.layoutJson", this.layoutJson);
@@ -158,10 +159,11 @@ export default {
           typeof item.template.dfFormSql == "object"
             ? item.template.dfFormSql
             : JSON.parse(item.template.dfFormSql);
-        item.template.dfVueTemplate =
+        item.template.dfVueTemplate = disableFormItem(
           typeof item.template.dfVueTemplate == "object"
             ? item.template.dfVueTemplate
-            : JSON.parse(item.template.dfVueTemplate);
+            : JSON.parse(item.template.dfVueTemplate)
+        );
 
         if (item.template.resultMap) {
           item.template.defaultValue = item.template.resultMap[0]