布局表单组件中表单数据获取

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

@@ -269,7 +269,7 @@
           ></FormList>
           <LayoutIndex
             v-else-if="formType == 'dragFormGroup' && !times && isLayout"
-            ref="formGroupRef"
+            ref="formGroupLayoutRef"
             :layoutData="layoutData"
           ></LayoutIndex>
           <!-- <div v-show="times" class="times">
@@ -1581,295 +1581,316 @@ export default {
       } else if (this.formType == "dragFormGroup") {
         //表单组
         // // console.log(this.$refs.formGroupRef);
+        if (this.isLayout) {
+          //有布局的表单组
+          let res = await this.$refs.formGroupLayoutRef.getFormData();
+          // let values = await Promise.all(res);
+          console.log(res);
+          let valuesArr = [];
+          res.forEach((item) => {
+            valuesArr.push(...item);
+          });
+          console.log(valuesArr);
+          Promise.all(valuesArr).then((values) => {
+            console.log("布局表单数据", values);
+          });
+        } else {
+          //无布局
+          let promiseArray = this.FormNameList.map((item) => {
+            return this.$refs.formGroupRef?.getFormData(item);
+          });
+          Promise.all(promiseArray).then(
+            async (res) => {
+              // 获取到所有表单数据
+              // console.log(res);
+              let mainFormData = res[0].data;
+              let data = {
+                basicMap: {
+                  tableName: this.tableName,
+                  // btnKey: btnData.btnKey,
+                  btnKey: this.currentBtnData.btnKey,
+                  BpmRunNodeFormDateVo: {},
+                },
+                conditionMap: {},
+                commMap: {},
+                btnParametersMap: {},
+              };
 
-        let promiseArray = this.FormNameList.map((item) => {
-          return this.$refs.formGroupRef?.getFormData(item);
-        });
-        Promise.all(promiseArray).then(
-          async (res) => {
-            // 获取到所有表单数据
-            // console.log(res);
-            let mainFormData = res[0].data;
-            let data = {
-              basicMap: {
-                tableName: this.tableName,
-                // btnKey: btnData.btnKey,
-                btnKey: this.currentBtnData.btnKey,
-                BpmRunNodeFormDateVo: {},
-              },
-              conditionMap: {},
-              commMap: {},
-              btnParametersMap: {},
-            };
-
-            let btnParams =
-              JSON.parse(this.currentBtnData.btnParams)?.commonFieldData || [];
-            let conditionData =
-              JSON.parse(this.currentBtnData.btnParams)?.conditionData || [];
-            Object.keys(mainFormData).map((k) => {
-              data.commMap[k] = mainFormData[k];
-            });
-            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 = {
-              insertCommonEntityList: [],
-              updateCommonEntityList: [],
-              deleteCommonEntityList: [],
-            };
-            if (this.currentBtnData.btnType == "UPDATE") {
-              // 准备删除数据
-              res.forEach((item, index) => {
-                let result = {};
-                if (index == 0) {
-                  //主表  主表不会是动态表格
-                  result = {
-                    basicMap: {
-                      tableName: item.tableName,
-                    },
-                    commMap: {
-                      ...item.data,
-                    },
-                    conditionMap: {},
-                  };
-                  //主表条件
-                  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(".", "_"))
-                          ];
-                  });
-                  payLoad.updateCommonEntityList.push(result);
-                } else {
-                  // 从表条件
-                  let {
-                    formItem,
-                    relateFormItem,
-                    formType,
-                    defaultValue,
-                    tableName,
-                  } = item;
-                  if (formType == "batch") {
-                    //动态表格的修改
-                    let result = {};
-                    // 准备删除数据
-                    if (defaultValue[tableName]?.length) {
-                      let ids = defaultValue[tableName].map((item) => item.id);
+              let btnParams =
+                JSON.parse(this.currentBtnData.btnParams)?.commonFieldData ||
+                [];
+              let conditionData =
+                JSON.parse(this.currentBtnData.btnParams)?.conditionData || [];
+              Object.keys(mainFormData).map((k) => {
+                data.commMap[k] = mainFormData[k];
+              });
+              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 = {
+                insertCommonEntityList: [],
+                updateCommonEntityList: [],
+                deleteCommonEntityList: [],
+              };
+              if (this.currentBtnData.btnType == "UPDATE") {
+                // 准备删除数据
+                res.forEach((item, index) => {
+                  let result = {};
+                  if (index == 0) {
+                    //主表  主表不会是动态表格
+                    result = {
+                      basicMap: {
+                        tableName: item.tableName,
+                      },
+                      commMap: {
+                        ...item.data,
+                      },
+                      conditionMap: {},
+                    };
+                    //主表条件
+                    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(".", "_"))
+                            ];
+                    });
+                    payLoad.updateCommonEntityList.push(result);
+                  } else {
+                    // 从表条件
+                    let {
+                      formItem,
+                      relateFormItem,
+                      formType,
+                      defaultValue,
+                      tableName,
+                    } = item;
+                    if (formType == "batch") {
+                      //动态表格的修改
+                      let result = {};
+                      // 准备删除数据
+                      if (defaultValue[tableName]?.length) {
+                        let ids = defaultValue[tableName].map(
+                          (item) => item.id
+                        );
+                        result = {
+                          basicMap: {
+                            tableName,
+                          },
+                          conditionMap: {
+                            id: ids,
+                          },
+                        };
+                        payLoad.deleteCommonEntityList.push(result);
+                      }
+                      // 准备新增数据
+                      result = this.getFormGroupBatchData(item, index, res);
+                      if (item.insertMap.length) {
+                        this.addInsertData(item.insertMap, result, res);
+                      }
+                      // 去除未修改数据的自动生成字段
+                      this.removeAutoField(result);
+                      console.log(result);
+                      payLoad.insertCommonEntityList.push(result);
+                    } else {
+                      //普通表格的修改
                       result = {
                         basicMap: {
-                          tableName,
+                          tableName: item.tableName,
                         },
-                        conditionMap: {
-                          id: ids,
+                        commMap: {
+                          ...item.data,
                         },
+                        conditionMap: {},
                       };
-                      payLoad.deleteCommonEntityList.push(result);
+                      let fieldName = formItem.split(".")[1];
+                      let value =
+                        this.currentRow[
+                          camelCase(relateFormItem.replace(".", "_"))
+                        ];
+                      result.conditionMap[fieldName] = value;
+                      payLoad.updateCommonEntityList.push(result);
                     }
-                    // 准备新增数据
+                  }
+                });
+              } else if (this.currentBtnData.btnType == "INSERT") {
+                // 新增
+                let uuid = uuidv4().replace("-", "");
+                // console.log(uuid);
+                res.forEach((item, index) => {});
+                payLoad.insertCommonEntityList = res.map((item, index) => {
+                  let result = {};
+                  console.log(item);
+                  // return;
+                  if (item.data.batch) {
+                    //动态表格
                     result = this.getFormGroupBatchData(item, index, res);
-                    if (item.insertMap.length) {
-                      this.addInsertData(item.insertMap, result, res);
-                    }
-                    // 去除未修改数据的自动生成字段
-                    this.removeAutoField(result);
-                    console.log(result);
-                    payLoad.insertCommonEntityList.push(result);
                   } else {
-                    //普通表格的修改
                     result = {
                       basicMap: {
                         tableName: item.tableName,
                       },
-                      commMap: {
-                        ...item.data,
-                      },
-                      conditionMap: {},
+                      addListMap: [
+                        {
+                          ...item.data,
+                        },
+                      ],
                     };
-                    let fieldName = formItem.split(".")[1];
-                    let value =
-                      this.currentRow[
-                        camelCase(relateFormItem.replace(".", "_"))
-                      ];
-                    result.conditionMap[fieldName] = value;
-                    payLoad.updateCommonEntityList.push(result);
+                    let { formItem, relateFormItem } = item;
+                    if (index == 0) {
+                      //主表单
+                      // 添加新增数据的关联条件
+
+                      // console.log(formItem);
+                      let mainFormKey = res[0].data[formItem.split(".")[1]];
+                      if (mainFormKey) {
+                        result.addListMap[0][formItem.split(".")[1]] =
+                          mainFormKey;
+                      } else {
+                        res[0].data[formItem.split(".")[1]] = uuid;
+                        result.addListMap[0][formItem.split(".")[1]] = uuid;
+                      }
+                    } else {
+                      //子表单
+                      result.addListMap[0][formItem.split(".")[1]] =
+                        res[0].data[relateFormItem.split(".")[1]];
+                    }
                   }
-                }
-              });
-            } else if (this.currentBtnData.btnType == "INSERT") {
-              // 新增
-              let uuid = uuidv4().replace("-", "");
-              // console.log(uuid);
-              res.forEach((item, index) => {});
-              payLoad.insertCommonEntityList = res.map((item, index) => {
-                let result = {};
-                console.log(item);
-                // return;
-                if (item.data.batch) {
-                  //动态表格
-                  result = this.getFormGroupBatchData(item, index, res);
-                } else {
-                  result = {
+                  if (item.insertMap?.length) {
+                    this.addInsertData(item.insertMap, result, res);
+                  }
+                  return result;
+                });
+              } else if (this.currentBtnData.btnType == "INITIATED") {
+                // 按照单独的表单投产逻辑收集主表单数据
+                // let mainFormData = res[0].data;//主表单数据
+                // payLoad = {
+                //   basicMap: {
+                //     tableName: this.tableName,
+                //     // btnKey: btnData.btnKey,
+                //     btnKey: this.currentBtnData.btnKey,
+                //   },
+                //   addListMap: mainFormData,
+                //   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) => {
+                //     payLoad.btnParametersMap[item.fieldName.split(".")[1]] =
+                //       item.fieldValue
+                //         ? item.fieldValue
+                //         : this.currentRow[
+                //             camelCase(item.fieldName.replace(".", "_"))
+                //           ];
+                //   });
+                //   conditionData.forEach((item) => {
+                //     payLoad.conditionMap[item.fieldName.split(".")[1]] =
+                //       item.fieldValue
+                //         ? item.fieldValue
+                //         : this.currentRow[
+                //             camelCase(item.fieldName.replace(".", "_"))
+                //           ];
+                //   });
+                // }
+                // if (Object.keys(this.defaultValue).length) {
+                //   // data.conditionMap[this.templateInfo.template?.primaryKey] =
+                //   //   this.defaultValue[this.templateInfo.template?.primaryKey];
+                //   Object.keys(mainFormData).map((k) => {
+                //     data.commMap[k] = mainFormData[k];
+                //   });
+                //   data.basicMap.btnType = this.currentBtnData.btnType;
+                //   data.basicMap.visible = true;
+                // } else {
+                //   data.basicMap.btnType = "INSERT";
+                //   data.basicMap.visible = true;
+                // }
+                // 添加表单组数据处理逻辑
+                payLoad.updateCommonEntityList = res.map((item, index) => {
+                  let result = {
                     basicMap: {
                       tableName: item.tableName,
                     },
-                    addListMap: [
-                      {
-                        ...item.data,
-                      },
-                    ],
+                    commMap: {
+                      ...item.data,
+                    },
+                    conditionMap: {},
                   };
-                  let { formItem, relateFormItem } = item;
                   if (index == 0) {
-                    //主表单
-                    // 添加新增数据的关联条件
-
-                    // console.log(formItem);
-                    let mainFormKey = res[0].data[formItem.split(".")[1]];
-                    if (mainFormKey) {
-                      result.addListMap[0][formItem.split(".")[1]] =
-                        mainFormKey;
-                    } else {
-                      res[0].data[formItem.split(".")[1]] = uuid;
-                      result.addListMap[0][formItem.split(".")[1]] = uuid;
-                    }
+                    //主表条件
+                    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 {
-                    //子表单
-                    result.addListMap[0][formItem.split(".")[1]] =
-                      res[0].data[relateFormItem.split(".")[1]];
+                    // 从表条件
+                    let { formItem, relateFormItem } = item;
+                    let fieldName = formItem.split(".")[1];
+                    let value =
+                      this.currentRow[
+                        camelCase(relateFormItem.replace(".", "_"))
+                      ];
+                    result.conditionMap[fieldName] = value;
                   }
-                }
-                if (item.insertMap?.length) {
-                  this.addInsertData(item.insertMap, result, res);
-                }
-                return result;
-              });
-            } else if (this.currentBtnData.btnType == "INITIATED") {
-              // 按照单独的表单投产逻辑收集主表单数据
-              // let mainFormData = res[0].data;//主表单数据
-              // payLoad = {
-              //   basicMap: {
-              //     tableName: this.tableName,
-              //     // btnKey: btnData.btnKey,
-              //     btnKey: this.currentBtnData.btnKey,
-              //   },
-              //   addListMap: mainFormData,
-              //   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) => {
-              //     payLoad.btnParametersMap[item.fieldName.split(".")[1]] =
-              //       item.fieldValue
-              //         ? item.fieldValue
-              //         : this.currentRow[
-              //             camelCase(item.fieldName.replace(".", "_"))
-              //           ];
-              //   });
-              //   conditionData.forEach((item) => {
-              //     payLoad.conditionMap[item.fieldName.split(".")[1]] =
-              //       item.fieldValue
-              //         ? item.fieldValue
-              //         : this.currentRow[
-              //             camelCase(item.fieldName.replace(".", "_"))
-              //           ];
-              //   });
-              // }
-              // if (Object.keys(this.defaultValue).length) {
-              //   // data.conditionMap[this.templateInfo.template?.primaryKey] =
-              //   //   this.defaultValue[this.templateInfo.template?.primaryKey];
-              //   Object.keys(mainFormData).map((k) => {
-              //     data.commMap[k] = mainFormData[k];
-              //   });
-              //   data.basicMap.btnType = this.currentBtnData.btnType;
-              //   data.basicMap.visible = true;
-              // } else {
-              //   data.basicMap.btnType = "INSERT";
-              //   data.basicMap.visible = true;
-              // }
-              // 添加表单组数据处理逻辑
-              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(".", "_"))
-                          ];
-                  });
+                  return result;
+                });
+              }
+
+              data.basicMap.BpmRunNodeFormDateVo = payLoad;
+              // return;
+              try {
+                let res = await btnCommonApi(data);
+                if (res.code == 200) {
+                  this.$message.success("操作成功");
+                  this.getList();
+                  this.defaultValue = {};
+                  this.open = false;
                 } else {
-                  // 从表条件
-                  let { formItem, relateFormItem } = item;
-                  let fieldName = formItem.split(".")[1];
-                  let value =
-                    this.currentRow[
-                      camelCase(relateFormItem.replace(".", "_"))
-                    ];
-                  result.conditionMap[fieldName] = value;
+                  console.log(res);
+                  this.$message.error("网络异常,请稍后再试");
                 }
-                return result;
-              });
-            }
-
-            data.basicMap.BpmRunNodeFormDateVo = payLoad;
-            // return;
-            try {
-              let res = await btnCommonApi(data);
-              if (res.code == 200) {
-                this.$message.success("操作成功");
-                this.getList();
-                this.defaultValue = {};
-                this.open = false;
-              } else {
-                console.log(res);
+              } catch (error) {
+                console.log(error);
                 this.$message.error("网络异常,请稍后再试");
               }
-            } catch (error) {
-              console.log(error);
-              this.$message.error("网络异常,请稍后再试");
+            },
+            (err) => {
+              // console.log(err);
             }
-          },
-          (err) => {
-            // console.log(err);
-          }
-        );
+          );
+        }
       } else {
         // 没有绑定表单
         let data = {

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

@@ -184,10 +184,20 @@ export default {
       });
     },
     // 获取所有表单数据
-    getFormData() {
-      this.$refs["layoutItemRef"].forEach((element) => {
-        console.log(element.getFormData());
+    async getFormData(formInfo) {
+      console.log("formInfo", formInfo);
+      console.dir(this.$refs["layoutItemRef"]);
+      let promiseArray = this.$refs["layoutItemRef"].map(async (item) => {
+        return await item.getFormData();
       });
+      console.log(promiseArray);
+      let res = await Promise.all(promiseArray);
+      return res;
+      // let promiseArray = this.$refs["layoutItemRef"].map((item) => {
+      //   return item.getFormData();
+      // });
+      // let resArr = await Promise.all(promiseArray);
+      // console.log(resArr);
     },
   },
 };

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

@@ -1,8 +1,8 @@
 <template>
   <div class="layout-width">
     <template v-if="record.type == 'tabs'">
-      <div class="grid-box" @click.stop="handleSelectItem(record)">
-        <el-tabs value="1">
+      <div class="grid-box">
+        <el-tabs value="0">
           <el-tab-pane
             v-for="(tabItem, index) in record.columns"
             :key="index"
@@ -12,10 +12,10 @@
             <div class="grid-box-content">
               <LayoutItem
                 class="drag-move"
-                v-for="(item, index) in tabItem.list"
-                :key="index"
+                v-for="(item, i) in tabItem.list"
+                :ref="'layoutItemRef' + record.type"
+                :key="i"
                 :record="item"
-                @handleDelete="handleDelete"
               />
             </div>
           </el-tab-pane>
@@ -24,7 +24,7 @@
     </template>
     <template v-else-if="record.type == 'grid'">
       <!-- 栅格布局 -->
-      <div class="grid-box" @click.stop="handleSelectItem(record)">
+      <div class="grid-box">
         <el-row class="grid-row" :gutter="record.options.gutter">
           <el-col
             class="grid-col"
@@ -34,11 +34,11 @@
           >
             <div class="grid-box-content">
               <LayoutItem
+                :ref="'layoutItemRef' + record.type"
                 class="drag-move"
-                v-for="(item, index) in colItem.list"
-                :key="index"
+                v-for="(item, i) in colItem.list"
+                :key="i"
                 :record="item"
-                @handleDelete="handleDelete"
               />
             </div>
           </el-col>
@@ -48,15 +48,16 @@
     <template v-else-if="record.type == 'divider'">
       <!-- 分割线 -->
       <div class="grid-box divider-wrap" style="width: 100%">
-        <el-divider
-          @click.stop="handleSelectItem(record)"
-          :content-position="record.options.orientation"
-          >{{ record.options.title || "" }}</el-divider
-        >
+        <el-divider :content-position="record.options.orientation">{{
+          record.options.title || ""
+        }}</el-divider>
       </div>
     </template>
     <template v-else-if="record.type == 'form'">
-      <k-form-build :value="record.dfVueTemplate"></k-form-build>
+      <k-form-build
+        ref="formBuild"
+        :value="record.dfVueTemplate"
+      ></k-form-build>
     </template>
   </div>
 </template>
@@ -81,42 +82,36 @@ export default {
       return this.formData.filter((item) => item.formKey == formKey)
         ?.dfVueTemplate;
     },
-    // 删除
-    deleHandle(record) {
-      console.log("dele", record);
-      this.$emit("handleDelete", record);
-    },
-    handleSelectItem(record) {
-      this.$emit("handleSelectItem", record);
-    },
-    handleDelete(record) {
-      this.$emit("handleDelete", record);
-    },
     // 获取表单数据
-    getFormData() {
-      return new Promise((resolve, reject) => {
+    async getFormData() {
+      let { type } = this.record;
+      if (type == "tabs") {
+        let PromiseArray = this.$refs["layoutItemRef" + type].map(
+          (item, index) => {
+            return item.getFormData();
+          }
+        );
+        return PromiseArray;
+      }
+      if (type == "grid") {
+        let PromiseArray = this.$refs["layoutItemRef" + type].map(
+          (item, index) => {
+            return item.getFormData();
+          }
+        );
+        return PromiseArray;
+      }
+      if (type == "form") {
         let { tableName } = this.record;
-        if (this.record.type == "form") {
-          this.$refs.formBuild.getData().then((values) => {
-            resolve({
-              tableName,
-              data: values,
-            });
-          });
-        }
-      });
+        let values = await this.$refs.formBuild.getData();
+        return { tableName, data: values };
+      }
     },
   },
 };
 </script>
 
 <style scoped lang="scss">
-.grid-box-content {
-  min-height: 60px !important;
-  min-width: 50px !important;
-  border: 1px dashed #ccc;
-  background: #fff;
-}
 .layout-width {
   position: relative;
   .delete {