表单组管理的接口对接处理

zkqy-ui/src/views/dragform/index.vue

@@ -8,11 +8,7 @@
       v-show="showSearch"
       label-width="68px"
     >
-      <el-form-item
-        label="表单名称
-"
-        prop="dfName"
-      >
+      <el-form-item label="表单名称" prop="dfName">
         <el-input
           v-model="queryParams.dfName"
           placeholder="请输入表单名称

zkqy-ui/src/views/system/formGroupMange/index.vue

@@ -8,9 +8,9 @@
       v-show="showSearch"
       label-width="68px"
     >
-      <el-form-item label-width="100px" label="动态组名称" prop="FGName">
+      <el-form-item label-width="100px" label="动态组名称" prop="fGName">
         <el-input
-          v-model="queryParams.FGName"
+          v-model="queryParams.fGName"
           placeholder="请输入动态组名称"
           clearable
           @keyup.enter.native="handleQuery"
@@ -69,7 +69,7 @@
           plain
           icon="el-icon-plus"
           size="mini"
-          @click="handleAdd"
+          @click="addHandler"
           v-hasPermi="['system:formGroup:add']"
           >新增</el-button
         >
@@ -122,7 +122,7 @@
     >
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="主键" align="center" prop="id" />
-      <el-table-column label="动态组名称" align="center" prop="FGName" />
+      <el-table-column label="动态组名称" align="center" prop="fGName" />
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column
         label="当前表单组中所绑定的表单"
@@ -130,21 +130,46 @@
         prop="formKeys"
       />
       <el-table-column label="表单组主表名称" align="center" prop="mainTable" />
-      <el-table-column
+      <!-- <el-table-column
         label="各个表单之间的关系"
         align="center"
         prop="relationJson"
-      />
-      <el-table-column label="回显数据sql" align="center" prop="showDataSql" />
+      /> -->
+      <!-- <el-table-column label="回显数据sql" align="center" prop="showDataSql" />
       <el-table-column label="更新人编号" align="center" prop="updateById" />
-      <el-table-column label="创建人编号" align="center" prop="createById" />
+      <el-table-column label="创建人编号" align="center" prop="createById" /> -->
       <el-table-column
         label="操作"
         align="center"
         class-name="small-padding fixed-width"
       >
         <template slot-scope="scope">
-          <el-button
+          <el-dropdown>
+            <el-button type="warning" plain size="small">
+              处理<i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                ><el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-edit"
+                  @click="handleUpdate(scope.row)"
+                  >修改
+                </el-button></el-dropdown-item
+              >
+              <el-dropdown-item>
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-delete"
+                  @click="handleDelete(scope.row)"
+                  >删除
+                </el-button>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <!-- <el-button
             size="mini"
             type="text"
             icon="el-icon-edit"
@@ -159,7 +184,7 @@
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:formGroup:remove']"
             >删除</el-button
-          >
+          > -->
         </template>
       </el-table-column>
     </el-table>
@@ -184,8 +209,8 @@
         :inline="true"
         size="normal"
       >
-        <el-form-item prop="FGName" label="组名称:">
-          <el-input v-model="groupForm.FGName"></el-input>
+        <el-form-item prop="fGName" label="组名称:">
+          <el-input v-model="groupForm.fGName"></el-input>
         </el-form-item>
         <el-form-item prop="groupDesc" label="组描述:">
           <el-input v-model="groupForm.groupDesc"></el-input>
@@ -316,7 +341,7 @@
               type="danger"
               icon="el-icon-delete"
               size="small"
-              @click="handleDelete(scope.$index, scope.row)"
+              @click="handleRemove(scope.$index, scope.row)"
             >
               删除
             </el-button>
@@ -362,8 +387,9 @@ export default {
       // 弹窗相关数据
       isEdit: false, // 是否编辑
       isShow: false,
+      editRow: {}, //当前编辑的行数据
       groupForm: {
-        FGName: "", //组名称
+        fGName: "", //组名称
         groupDesc: "", //组描述
         mainFormName: "", //主表单
         mainFormItem: "", //主表单项
@@ -371,13 +397,13 @@ export default {
         mainFormItemOptions: [], //主表单项选项
       },
       subFormList: [
-        {
-          formKey: "", //从表单
-          dfTableName: "", //从表名
-          formItemList: [], //从表单项列表
-          formItem: "", //从表单项
-          relateMainItem: "", //依赖的主表单项
-        },
+        // {
+        //   formKey: "", //从表单
+        //   dfTableName: "", //从表名
+        //   formItemList: [], //从表单项列表
+        //   formItem: "", //从表单项
+        //   relateMainItem: "", //依赖的主表单项
+        // },
       ],
       formOptionList: [],
 
@@ -404,7 +430,7 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        FGName: null,
+        fGName: null,
         formKeys: null,
         mainTable: null,
         relationJson: null,
@@ -425,29 +451,78 @@ export default {
   methods: {
     // 新增表单组回调
     async addHandler() {
+      this.resetDialogForm();
       await this.getFormList();
+      this.isEdit = false;
       this.isShow = true;
     },
+    // 重置弹窗的表单数据
+    resetDialogForm() {
+      Object.assign(this.groupForm, {
+        fGName: "", //组名称
+        groupDesc: "", //组描述
+        mainFormName: "", //主表单
+        mainFormItem: "", //主表单项
+        mainFormTable: "", //主表单对应表格
+        mainFormItemOptions: [], //主表单项选项
+      });
+      this.subFormList = [];
+    },
     // 取消回调
     cancelHandler() {
       this.isShow = false;
     },
     // 确认回调
     confirmHandler() {
-      this.isShow = false;
-      this.$refs.form.validate(async (valid) => {
+      this.$refs.groupFormRef.validate(async (valid) => {
         if (valid) {
-          let { FGName, groupDesc, mainFormName, mainFormItem, mainFormTable } =
+          let { fGName, groupDesc, mainFormName, mainFormItem, mainFormTable } =
             this.groupForm;
           let mainTable = mainFormTable + ":" + mainFormName;
+          let tempFormKeys = this.subFormList.map((item) => item.formKey);
+          tempFormKeys.push(mainFormName);
+          let formKeys = JSON.stringify(tempFormKeys);
+          let relationJson = JSON.stringify({
+            mainForm: this.groupForm,
+            subFormList: this.subFormList,
+          });
+
           let payLoad = {
-            FGName,
+            fGName,
             remark: groupDesc,
             formKeys,
             mainTable,
-            relationJson: "",
+            relationJson,
             showDataSql: "",
           };
+          let res;
+          try {
+            if (this.isEdit) {
+              //修改
+              payLoad.id = this.editRow.id;
+              res = await updateFormGroup(payLoad);
+              if (res.code == 200) {
+                this.$message.success("修改成功");
+                this.isShow = false;
+                this.getList();
+              } else {
+                this.$message.error("修改失败");
+              }
+            } else {
+              //新增
+              res = await addFormGroup(payLoad);
+              if (res.code == 200) {
+                this.$message.success("新增成功");
+                this.isShow = false;
+                this.getList();
+              } else {
+                this.$message.error("新增失败");
+              }
+            }
+          } catch (error) {
+            console.log(error);
+            this.$message.error("网络异常,请稍后再试");
+          }
         }
       });
     },
@@ -469,10 +544,12 @@ export default {
     // 主表单变化回调
     mainFormChange(formKey) {
       let targetForm = this.getFormJson(formKey);
+      console.log("targetForm", targetForm);
       if (targetForm) {
         this.groupForm.mainFormItemOptions = getFormItems(
           targetForm.dfVueTemplate
         );
+        this.groupForm.mainFormTable = targetForm.dfTableName;
         console.log(this.groupForm.mainFormItemOptions);
       }
     },
@@ -497,7 +574,7 @@ export default {
       }
     },
     //删除从表单
-    handleDelete(index) {
+    handleRemove(index) {
       this.subFormList.splice(index, 1);
     },
     // 新增从表单
@@ -530,7 +607,7 @@ export default {
     reset() {
       this.form = {
         id: null,
-        FGName: null,
+        fGName: null,
         remark: null,
         formKeys: null,
         mainTable: null,
@@ -569,14 +646,26 @@ export default {
       this.title = "添加动态表单组";
     },
     /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const id = row.id || this.ids;
-      getFormGroup(id).then((response) => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改动态表单组";
-      });
+    async handleUpdate(row) {
+      if (row.id) {
+        await this.getFormList();
+        this.isEdit = true;
+        this.editRow = JSON.parse(JSON.stringify(row));
+        getFormGroup(row.id).then((response) => {
+          console.log("回显数据", response);
+          let { fGName, remark, relationJson } = response.data;
+          // this.groupForm.fGName = fGName;
+          // this.groupForm.groupDesc = remark;
+          let { mainForm, subFormList } = JSON.parse(relationJson);
+          Object.assign(this.groupForm, mainForm);
+          if (subFormList && subFormList.length > 0) {
+            this.subFormList = subFormList;
+          } else {
+            this.subFormList = [];
+          }
+          this.isShow = true;
+        });
+      }
     },
     /** 提交按钮 */
     submitForm() {