拖拽表格添加数据过滤相关条件数据

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

@@ -1058,6 +1058,7 @@ export default {
               tableName: this.tableItemForm.tableName,
               tableFieldData: this.tableFieldList,
             };
+            console.log(echoData);
             let tableKey = uuidv4();
             let sqlKey = uuidv4();
 
@@ -1119,12 +1120,12 @@ export default {
               tableName: this.tableItemForm.tableName,
               tableFieldData: this.tableFieldList,
             };
-            // console.log('123456', echoData);
+            console.log("123456", echoData);
             this.tableDataList.forEach((item, index) => {
               if (item.tId == this.tableItemForm.tId) {
                 item.conditionDefaultValueMap = this.conditionDefault;
-                (item.echoData = JSON.stringify(echoData)),
-                  (item.sortOrder = this.tableItemForm.isAsc);
+                item.echoData = JSON.stringify(echoData);
+                item.sortOrder = this.tableItemForm.isAsc;
                 item.orderByColumn = this.tableItemForm.orderByColumn;
                 item.primaryKey = this.tableItemForm.selectFields;
                 item.dtTableName = this.tableItemForm.tableName;
@@ -1150,12 +1151,13 @@ export default {
     },
     // 修改一个表格数据
     relateOne(row) {
-      // console.log(row)
+      console.log(row);
       // console.log(this.orderByFieldList)
       if (row.tableKey) {
         this.menuId = row.menuId;
         this.conditionDefault = row.conditionDefaultValueMap;
         let echoData = JSON.parse(row.echoData);
+        console.log(this.tableDataList);
         this.tableDataList.forEach((item, index) => {
           if (item.tableKey == row.tableKey) {
             if (index == 0) {
@@ -1338,10 +1340,13 @@ export default {
                 groupTableInfo: [],
                 dragTables: [],
               };
+              console.log(this.addDragData);
+              // return;
               this.addDragData.forEach((item, index) => {
                 item.menuId = result.data;
                 // item.sqlKey = tableKeyObj.tableKey
                 let echo = JSON.parse(item.echoData);
+                console.log(echo);
                 echo.formData = this.groupForm;
                 // item.echoData = JSON.stringify(echo)
                 data.groupTableInfo.push({

zkqy-ui/src/views/tableMange/components/DataFilterPanel.vue

@@ -0,0 +1,194 @@
+<template>
+  <div class="data-filter-wrap">
+    <el-button
+      type="primary"
+      class="inline-large-button mb10"
+      icon="el-icon-plus"
+      size="mini"
+      @click="addCondition"
+    >
+      添加条件
+    </el-button>
+    <el-table :data="tableData" style="width: 100%">
+      <el-table-column align="center" label="序号" type="index" width="50">
+      </el-table-column>
+      <el-table-column
+        align="center"
+        prop="fieldName"
+        label="条件字段"
+        width="100"
+      >
+        <template slot-scope="scope">
+          <el-select
+            v-model="scope.row.fieldName"
+            placeholder="请选择条件字段"
+            clearable
+            filterable
+          >
+            <el-option
+              v-for="item in fieldList"
+              :key="item.fieldName"
+              :label="item.fieldDescription"
+              :value="item.tableName + '.' + item.fieldName"
+            >
+              <span class="discribe" style="float: left">{{
+                item.fieldDescription
+              }}</span>
+              <span style="float: right; color: #8492a6; font-size: 13px">{{
+                item.fieldName
+              }}</span>
+            </el-option>
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" prop="condition" label="条件">
+        <template slot-scope="scope">
+          <el-select v-model="scope.row.condition" placeholder="请选择">
+            <el-option
+              v-for="item in conditionList"
+              :key="item.label"
+              :label="item.label"
+              :value="item.label"
+            >
+            </el-option>
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" prop="refValue" label="参照值">
+        <template slot-scope="scope">
+          <el-input v-model="scope.row.refValue"></el-input>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="delHandler(scope.$index)"
+            >删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DataFilter",
+  props: ["tableFieldList", "filterDataEcho"],
+  components: {},
+  data() {
+    return {
+      tableData: [],
+      fieldList: [],
+      conditionList: [
+        {
+          value: 1,
+          label: ">",
+        },
+        {
+          value: 2,
+          label: "<",
+        },
+        {
+          value: 3,
+          label: "=",
+        },
+        {
+          value: 4,
+          label: ">=",
+        },
+        {
+          value: 5,
+          label: "<=",
+        },
+      ],
+    };
+  },
+  watch: {
+    myTableFieldList: {
+      handler(nval) {
+        this.fieldList = nval;
+
+        console.log(this.fieldList);
+        // 初始化删除逻辑条件
+        let is_has_del_flag = nval.find((item) => {
+          return item.fieldName == "del_flag";
+        });
+        console.log(is_has_del_flag);
+        if (!this.tableData.length && is_has_del_flag) {
+          let { fieldName, tableName } = is_has_del_flag;
+          this.tableData.push({
+            fieldName: tableName + "." + fieldName,
+            condition: "=",
+            refValue: 0,
+          });
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+    myFilterDataEcho: {
+      handler(val) {
+        if (val) {
+          this.tableData = JSON.parse(decodeURIComponent(this.filterDataEcho));
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  computed: {
+    myTableFieldList() {
+      return this.tableFieldList;
+    },
+    myFilterDataEcho() {
+      return this.filterDataEcho;
+    },
+  },
+  methods: {
+    // 新增条件回调
+    addCondition() {
+      this.tableData.push({
+        fieldName: "",
+        condition: "",
+        refValue: "",
+      });
+    },
+    // 编辑条件回调
+    editHandler() {},
+    // 删除条件回调
+    delHandler() {
+      this.tableData.splice(index, 1);
+    },
+    // 获取数据筛选条件
+    getConditions() {
+      let res = this.tableData.filter((item) => {
+        return (
+          item.fieldName &&
+          item.condition &&
+          (item.refValue == 0 || item.refValue)
+        );
+      });
+      return res;
+    },
+    // 获取回显数据
+    getEchoData() {
+      return JSON.stringify(this.tableData);
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style scoped lang="scss">
+.discribe {
+  display: block;
+  max-width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

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

@@ -60,9 +60,13 @@
               class-name="allowDrag"
             >
             </el-table-column>
-            <el-table-column prop="fieldName" label="数据字段">
+            <el-table-column align="center" prop="fieldName" label="数据字段">
             </el-table-column>
-            <el-table-column prop="fieldDescription" label="字段描述">
+            <el-table-column
+              align="center"
+              prop="fieldDescription"
+              label="字段描述"
+            >
               <template slot-scope="scope">
                 <!-- <el-form-item size="normal" prop="fieldDescription"> -->
                 <input
@@ -81,7 +85,7 @@
                 <!-- </el-form-item> -->
               </template>
             </el-table-column>
-            <el-table-column prop="relationTable" label="关联表">
+            <el-table-column align="center" prop="relationTable" label="关联表">
               <template slot-scope="scope">
                 <el-select
                   v-model="scope.row.relationTable"
@@ -109,7 +113,11 @@
                 </el-select>
               </template>
             </el-table-column>
-            <el-table-column prop="relationFieldName" label="关联条件字段">
+            <el-table-column
+              align="center"
+              prop="relationFieldName"
+              label="关联条件字段"
+            >
               <template slot-scope="scope">
                 <el-select
                   v-model="scope.row.relationFieldName"
@@ -128,7 +136,11 @@
                 </el-select>
               </template>
             </el-table-column>
-            <el-table-column prop="relationType" label="关联方式">
+            <el-table-column
+              align="center"
+              prop="relationType"
+              label="关联方式"
+            >
               <template slot-scope="scope">
                 <el-select
                   v-model="scope.row.relationType"
@@ -167,21 +179,32 @@
                 </el-select>
               </template>
             </el-table-column> -->
-            <el-table-column prop="isShow" label="是否显示">
+            <el-table-column align="center" prop="isShow" label="是否显示">
               <template slot-scope="scope">
                 <el-switch v-model="scope.row.isShow"> </el-switch>
               </template>
             </el-table-column>
-            <el-table-column prop="isSearch" label="是否包含查询">
+            <el-table-column
+              align="center"
+              prop="isSearch"
+              label="是否包含查询"
+            >
               <template slot-scope="scope">
                 <el-switch v-model="scope.row.isSearch"> </el-switch>
               </template>
             </el-table-column>
-            <el-table-column prop="isExport" label="是否导出">
+            <el-table-column align="center" prop="isExport" label="是否导出">
               <template slot-scope="scope">
                 <el-switch v-model="scope.row.isExport"> </el-switch>
               </template>
             </el-table-column>
+            <!-- <el-table-column
+              prop="defaultValue"
+              label="筛选条件"
+              align="center"
+            >
+            </el-table-column> -->
+
             <!-- <el-table-column prop="isCount" label="是否统计">
               <template slot-scope="scope">
                 <el-switch v-model="scope.row.isCount"> </el-switch>
@@ -407,6 +430,18 @@
               :dragTableStyleList="dragTableStyleList"
             />
           </el-tab-pane>
+          <el-tab-pane label="数据筛选" name="dataFilter">
+            <!-- <StyleFormPanel
+              ref="styleTableRef"
+              :tableFieldList="tableFieldList"
+              :dragTableStyleList="dragTableStyleList"
+            /> -->
+            <DataFilterPanel
+              ref="dataFilterRef"
+              :tableFieldList="tableFieldList"
+              :filterDataEcho="filterDataEcho"
+            ></DataFilterPanel>
+          </el-tab-pane>
         </el-tabs>
       </el-col>
     </el-row>
@@ -695,13 +730,15 @@ import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import { v4 as uuidv4 } from "uuid";
 import { listBtn } from "@/api/system/btn";
 import StyleFormPanel from "./components/StyleFormPanel.vue";
+import DataFilterPanel from "./components/DataFilterPanel.vue";
 export default {
   name: "tableMange",
   dicts: ["sys_time_format", "table_statistic_type"],
   props: [],
-  components: { Queryfrom, Treeselect, StyleFormPanel },
+  components: { Queryfrom, Treeselect, StyleFormPanel, DataFilterPanel },
   data() {
     return {
+      filterDataEcho: "", //数据过滤回显数据
       staictitle: "添加统计数据字段",
       isInputInvalid: false,
       // 修改表格时的menuId
@@ -1308,6 +1345,7 @@ export default {
       if (relaTypeArr.length) {
         sql += " " + relaTypeArr.join(" ");
       }
+
       return sql;
     },
     getStaticSQL(key) {
@@ -1521,6 +1559,9 @@ export default {
             tableName: this.tableName,
             tableFieldData: this.tableFieldList,
             formData: this.formData,
+            filterData: encodeURIComponent(
+              this.$refs.dataFilterRef?.getEchoData()
+            ),
           };
           if (!searchFieldList.length) {
             this.$message.warning("请至少选择一个包含查询字段");
@@ -1588,9 +1629,18 @@ export default {
           if (result.code == 200) {
             // 更新路由
             this.reloadRouter();
+            let conditions = this.$refs.dataFilterRef?.getConditions();
+            console.log(conditions);
+            let conditionDefaultValueMap = {};
+            conditions.map((item) => {
+              conditionDefaultValueMap[item.fieldName] = encodeURIComponent(
+                " " + item.condition + " " + item.refValue
+              );
+            });
 
             // let isAsc = this.formData.isAsc == "ASC" ? 0 : 1;
             let data = {
+              conditionDefaultValueMap, //数据筛选条件
               tId: this.tId,
               dtName: this.formData.menuName,
               menuId: this.formData.routePath,
@@ -1730,6 +1780,7 @@ export default {
         let echoData = JSON.parse(res.data.echoData);
         this.tableName = echoData.tableName;
         this.tableFieldList = echoData.tableFieldData;
+        this.filterDataEcho = echoData.filterData;
         let {
           isShowList,
           timeFormate,