Merge remote-tracking branch 'origin/master'

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

@@ -224,8 +224,8 @@
             @change="mainFormChange"
           >
             <el-option
-              v-for="item in formOptionList"
-              :key="item.formKey"
+              v-for="(item, index) in formOptionList"
+              :key="index"
               :label="item.dfNickname"
               :value="item.formKey"
             >
@@ -282,8 +282,8 @@
               @change="subFormChangeHandler(scope.row)"
             >
               <el-option
-                v-for="item in formOptionList"
-                :key="item.formKey"
+                v-for="(item, index) in formOptionList"
+                :key="index"
                 :label="item.dfNickname"
                 :value="item.formKey"
               >
@@ -304,6 +304,7 @@
               placeholder="请选择子表单键"
               clearable
               filterable
+              @change="subFormItemChangeHandler(scope.row)"
             >
               <el-option
                 v-for="item in scope.row.formItemList"
@@ -345,30 +346,6 @@
             </el-select>
           </template>
         </el-table-column>
-        <!-- <el-table-column prop="mainFormItem" label="依赖的主表单键">
-          <template slot-scope="scope">
-            <el-select
-              v-model="scope.row.relateMainItem"
-              placeholder="请选择表单键"
-              clearable
-              filterable
-            >
-              <el-option
-                v-for="item in groupForm.mainFormItemOptions"
-                :key="item.model"
-                :label="item.label"
-                :value="item.tableName + '.' + item.model"
-              >
-                <span class="discribe" style="float: left">{{
-                  item.label
-                }}</span>
-                <span style="float: right; color: #8492a6; font-size: 13px">{{
-                  item.tableName + "." + item.model
-                }}</span>
-              </el-option>
-            </el-select>
-          </template>
-        </el-table-column> -->
         <el-table-column prop="isShow" label="是否展示">
           <template slot-scope="scope">
             <el-switch
@@ -381,7 +358,28 @@
             </el-switch>
           </template>
         </el-table-column>
-
+        <el-table-column prop="queryMap" label="查询条件">
+          <template slot-scope="scope">
+            <el-button
+              type="info"
+              size="small"
+              @click="editHandler(scope.row, 'query', scope.$index)"
+            >
+              编辑条件
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column prop="queryMap" label="插入条件">
+          <template slot-scope="scope">
+            <el-button
+              type="info"
+              size="small"
+              @click="editHandler(scope.row, 'insert', scope.$index)"
+            >
+              编辑条件
+            </el-button>
+          </template>
+        </el-table-column>
         <el-table-column label="操作">
           <template slot-scope="scope">
             <el-button
@@ -412,6 +410,146 @@
         </span>
       </template>
     </el-dialog>
+
+    <!-- 条件弹窗 -->
+    <el-dialog :title="conditionTitle" :visible.sync="queryShow">
+      <el-table
+        v-if="conditionTableShow"
+        :data="conditionTableData"
+        border
+        stripe
+      >
+        <el-table-column type="index" width="50" />
+        <el-table-column prop="fieldName" label="子表单键">
+          <template slot-scope="scope">
+            <el-select
+              v-model="scope.row.fieldName"
+              placeholder="请选择子表单键"
+              clearable
+              filterable
+            >
+              <el-option
+                v-for="item in fieldOptions"
+                :key="item.model"
+                :label="item.label"
+                :value="item.tableName + '.' + item.model"
+              >
+                <span class="discribe" style="float: left">{{
+                  item.label
+                }}</span>
+                <span style="float: right; color: #8492a6; font-size: 13px">{{
+                  item.tableName + "." + item.model
+                }}</span>
+              </el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="type" label="类型">
+          <template slot-scope="scope">
+            <el-select
+              v-model="scope.row.type"
+              placeholder="请选择类型"
+              filterable
+              @change="changeType(scope.row)"
+            >
+              <el-option
+                v-for="item in typeOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="tableName" label="依赖表单">
+          <template slot-scope="scope">
+            <el-select
+              v-model="scope.row.tableName"
+              placeholder="请选择依赖表单"
+              clearable
+              filterable
+              @change="changeTableName(scope.row)"
+              :disabled="scope.row.type === 'defaultValue'"
+            >
+              <el-option
+                v-for="item in relaTableOptions"
+                :key="item.dfTableName"
+                :label="item.dfName"
+                :value="item.formKey"
+              >
+                <span class="discribe" style="float: left">{{
+                  item.dfName
+                }}</span>
+                <span style="float: right; color: #8492a6; font-size: 13px">{{
+                  item.dfTableName
+                }}</span>
+              </el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="relaField" label="依赖字段">
+          <template slot-scope="scope">
+            <el-select
+              v-model="scope.row.relaField"
+              placeholder="请选择依赖字段"
+              clearable
+              filterable
+              :disabled="scope.row.type === 'defaultValue'"
+            >
+              <el-option
+                v-for="item in scope.row.mainFormItemList"
+                :key="item.model"
+                :label="item.label"
+                :value="item.tableName + '.' + item.model"
+              >
+                <span class="discribe" style="float: left">{{
+                  item.label
+                }}</span>
+                <span style="float: right; color: #8492a6; font-size: 13px">{{
+                  item.tableName + "." + item.model
+                }}</span>
+              </el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="refValue" label="默认值">
+          <template slot-scope="scope">
+            <el-input
+              :disabled="scope.row.type === 'relateValue'"
+              v-model="scope.row.refValue"
+              placeholder="请输入默认值"
+              clearable
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button
+              type="danger"
+              size="mini"
+              @click="handleRemove(scope.$index, scope.row)"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="btn-wrap">
+        <el-button type="primary" size="mini" @click="addCondition">
+          新增条件
+        </el-button>
+      </div>
+      <template #footer>
+        <span>
+          <el-button @click="queryShow = false">取消</el-button>
+          <el-button type="primary" @click="conditionConfirmHandler"
+            >确认</el-button
+          >
+        </span>
+      </template>
+    </el-dialog>
+    <!-- 新增条件弹窗 -->
   </div>
 </template>
 
@@ -426,6 +564,13 @@ import {
   updateFormGroup,
 } from "@/api/system/formGroup";
 import { v4 as uuidv4 } from "uuid";
+import { mapState } from "vuex";
+import {
+  getFormName,
+  getListName,
+  dragTablePreview,
+} from "@/api/dragform/form.js";
+
 export default {
   name: "formRelateMange",
   props: [],
@@ -503,13 +648,144 @@ export default {
           { required: true, message: "请选择表单主键", trigger: "change" },
         ],
       },
+      //  查询条件数据
+      // start
+      flag: "", //query:查询条件  insert:插入条件
+      editIndex: "",
+      queryMap: {},
+      queryShow: false,
+      conditionTableData: [],
+      conditionTitle: "",
+      fieldOptions: [],
+      relaTableOptions: [], //依赖
+      typeOptions: [
+        {
+          label: "自定义值",
+          value: "defaultValue",
+        },
+        {
+          label: "依赖值",
+          value: "relateValue",
+        },
+      ],
+      conditionTableShow: true,
+      // end
     };
   },
-  computed: {},
+  computed: {
+    ...mapState({
+      databaseName: (state) => state.user.dataSource.databaseName,
+      databaseType: (state) => state.user.dataSource.databaseType,
+      username: (state) => state.user.dataSource.username,
+      tenantId: (state) => state.user.tenant.tenantId,
+    }),
+  },
   mounted() {
     this.getList();
   },
   methods: {
+    //条件编辑确认回调
+    conditionConfirmHandler() {
+      if (this.flag == "query") {
+        this.subFormList[this.editIndex].queryMap = this.conditionTableData;
+      } else if (this.flag == "insert") {
+        this.subFormList[this.editIndex].insertMap = this.conditionTableData;
+      }
+      this.queryShow = false;
+    },
+    // 条件类型改变回调
+    changeType(row) {
+      // if(){}
+      if (row.type == "defaultValue") {
+        row.tableName = "";
+        row.relaField = "";
+      } else {
+        row.refValue = "";
+      }
+    },
+    // 根据formKey获取表单绑定的表名
+    getTableNameByFormKey(formKey) {
+      let temp = this.formOptionList.find((item) => item.formKey == formKey);
+      return temp?.dfTableName || "";
+    },
+    // 依赖的主表单变化回调
+    async changeTableName(row) {
+      if (row.tableName) {
+        let tableName = this.getTableNameByFormKey(row.tableName);
+        let data = {
+          databaseName: this.databaseName,
+          databaseType: this.databaseType,
+          tableName,
+        };
+        try {
+          let res = await getListName(data);
+          row.mainFormItemList = res.map((item) => {
+            return {
+              model: item.fieldName,
+              label: item.fieldDescription,
+              tableName,
+            };
+          });
+          this.conditionTableShow = false;
+          this.$nextTick(() => {
+            this.conditionTableShow = true;
+          });
+        } catch (error) {
+          console.error(error);
+        }
+      }
+    },
+    // 新增条件
+    addCondition() {
+      this.conditionTableData.push({
+        fieldName: "", //字段
+        type: "", //类型
+        tableName: "", //依赖表单
+        relaField: "", //依赖字段
+        refValue: "", //默认值
+        mainFormItemList: [], //表单键列表
+      });
+    },
+    // 删除条件
+    handleRemove(index, row) {
+      this.conditionTableData.splice(index, 1);
+    },
+    // 条件编辑回调
+    editHandler(row, flag, index) {
+      console.log(row);
+      this.flag = flag;
+      this.editIndex = index;
+      if (flag == "query") {
+        //编辑查询条件
+        this.conditionTitle = "查询条件编辑";
+        this.conditionTableData = row.queryMap
+          ? JSON.parse(JSON.stringify(row.queryMap))
+          : [];
+      } else {
+        //编辑插入条件
+        this.conditionTitle = "插入条件编辑";
+        this.conditionTableData = row.insertMap
+          ? JSON.parse(JSON.stringify(row.insertMap))
+          : [];
+      }
+      console.log(this.conditionTableData);
+      this.fieldOptions = row.formItemList || [];
+      // 可选表单范围  主表单和当前表单上面的子表单
+      let formKeys = this.subFormList
+        .map((item) => item.formKey)
+        .slice(0, index);
+      formKeys.unshift(this.groupForm.mainFormName);
+      this.relaTableOptions = this.formOptionList.filter((item) =>
+        formKeys.includes(item.formKey)
+      ); //可依赖表单选项
+      console.log(this.relaTableOptions);
+      this.queryShow = true;
+    },
+    // 子表单键改变回调
+    subFormItemChangeHandler(row) {
+      row.dfTableName = row.formItem.split(".")[0];
+      console.log(row.dfTableName);
+    },
     // 新增表单组回调
     async addHandler() {
       this.resetDialogForm();
@@ -549,6 +825,21 @@ export default {
           } = this.groupForm;
           let mainTable = mainFormTable + ":" + mainFormName;
           let tempFormKeys = this.subFormList.map((item) => item.formKey);
+          // 去掉多余数据 start
+          this.subFormList.forEach((item) => {
+            if (item.queryMap) {
+              item.queryMap.forEach((i) => {
+                delete i.mainFormItemList;
+              });
+            }
+
+            if (item.insertMap) {
+              item.insertMap.forEach((i) => {
+                delete i.mainFormItemList;
+              });
+            }
+          });
+          // 去掉多余数据 end
           tempFormKeys.push(mainFormName);
           let formKeys = JSON.stringify(tempFormKeys);
           let relationJson = JSON.stringify({
@@ -612,14 +903,37 @@ 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;
+    async mainFormChange(mainFormName) {
+      // let targetForm = this.getFormJson(formKey);
+      // console.log("targetForm", targetForm);
+      // if (targetForm) {
+      //   this.groupForm.mainFormItemOptions = getFormItems(
+      //     targetForm.dfVueTemplate
+      //   );
+      //   this.groupForm.mainFormTable = targetForm.dfTableName;
+      // }
+      let dfTableName = this.getTableNameByFormKey(mainFormName);
+      let data = {
+        databaseName: this.databaseName,
+        databaseType: this.databaseType,
+        tableName: dfTableName,
+      };
+      try {
+        let res = await getListName(data);
+        this.groupForm.mainFormItemOptions = res.map((item) => {
+          return {
+            model: item.fieldName,
+            label: item.fieldDescription,
+            tableName: dfTableName,
+          };
+        });
+        this.groupForm.mainFormTable = dfTableName;
+        // this.conditionTableShow = false;
+        // this.$nextTick(() => {
+        //   this.conditionTableShow = true;
+        // });
+      } catch (error) {
+        console.error(error);
       }
     },
     // 获取fId对应的表单JSON数据
@@ -628,7 +942,19 @@ export default {
       return this.formOptionList.find((item) => item.formKey === formKey);
     },
     // 字表单变化回调
-    subFormChangeHandler(row) {
+    async subFormChangeHandler(row) {
+      // if (!row.formKey) {
+      //   Object.assign(row, {
+      //     dfTableName: "",
+      //     formItemList: [],
+      //     formItem: "",
+      //   });
+      // } else {
+      //   let targetForm = this.getFormJson(row.formKey);
+      //   if (targetForm) {
+      //     row.formItemList = getFormItems(targetForm.dfVueTemplate);
+      //   }
+      // }
       if (!row.formKey) {
         Object.assign(row, {
           dfTableName: "",
@@ -636,9 +962,23 @@ export default {
           formItem: "",
         });
       } else {
-        let targetForm = this.getFormJson(row.formKey);
-        if (targetForm) {
-          row.formItemList = getFormItems(targetForm.dfVueTemplate);
+        let tableName = this.getTableNameByFormKey(row.formKey);
+        let data = {
+          databaseName: this.databaseName,
+          databaseType: this.databaseType,
+          tableName: tableName,
+        };
+        try {
+          let res = await getListName(data);
+          row.formItemList = res.map((item) => {
+            return {
+              model: item.fieldName,
+              label: item.fieldDescription,
+              tableName: tableName,
+            };
+          });
+        } catch (error) {
+          console.error(error);
         }
       }
     },
@@ -655,6 +995,8 @@ export default {
         formItem: "", //从表单键
         relateMainItem: "", //依赖的主表单键
         isShow: true, //是否显示该表单
+        insertMap: [],
+        queryMap: [],
       });
     },