历史问题全字段搜索和表头搜索框联动前端处理sql逻辑完成。

src/views/FrequencyView.vue

@@ -44,7 +44,6 @@
             }}
           </div>
         </div>
-        <!-- <div class="dialog_title3"><el-button size="mini" type="primary" class="infoBut">查看疑点图斑</el-button></div> -->
       </div>
     </el-dialog>
     <div class="frenquency-container-inner">
@@ -53,47 +52,10 @@
         <div class="header-select">
           <div>
             <el-input class="search-input" v-model="allSearchColumn" clearable>
-              <i class="el-icon-search" style="cursor: pointer" @click="getContentInfoWhere" slot="append"></i>
+              <i class="el-icon-search" style="cursor: pointer" @click="getContentInfoWhere(1)" slot="append"></i>
             </el-input>
           </div>
         </div>
-
-        <!-- <div class="header-select">
-          <div>
-            <div class="text">类别 :</div>
-            <NewSelect
-              ref="auditTypeRef"
-              :placeholder="'请选择类别'"
-              class="select-input"
-              v-model="typeSelectVal"
-              :options="typeOptions"
-              :value="typeSelectVal"
-            />
-          </div>
-          <div>
-            <div class="text">被审计街镇 :</div>
-            <NewSelect
-              ref="townTypeRef"
-              :placeholder="'请选择街镇'"
-              class="select-input"
-              v-model="townSelectVal"
-              :options="townOptions"
-              :value="townSelectVal"
-            />
-          </div>
-          <div>
-            <div class="text">立项年度 :</div>
-            <NewSelect
-              ref="timeRef"
-              :placeholder="'立项年度'"
-              class="select-input"
-              v-model="timeSelectVal"
-              :options="timeOptions"
-              :value="timeSelectVal"
-            />
-          </div>
-        </div> -->
-        <!-- <div class="query-btn" @click="getTableData(1)">查询</div> -->
         <div class="reset-btn" @click="resetEvent">重置</div>
       </div>
       <div class="center" v-if="reStart">
@@ -106,7 +68,7 @@
             align="center"
             :filters="filters.createYearFilters"
             :filter-multiple="false"
-            :filter-method="filterMethod"
+            :filtered-value="timeSelectVal"
           >
           </el-table-column>
           <el-table-column
@@ -116,7 +78,7 @@
             width="180"
             :filters="filters.auditTownFilters"
             :filter-multiple="false"
-            :filter-method="filterMethod"
+            :filtered-value="townSelectVal"
           >
           </el-table-column>
           <el-table-column
@@ -125,7 +87,7 @@
             align="center"
             :filters="filters.typeFilters"
             :filter-multiple="false"
-            :filter-method="filterMethod"
+            :filtered-value="typeSelectVal"
           >
           </el-table-column>
           <el-table-column
@@ -134,7 +96,7 @@
             align="center"
             :filters="filters.keyPointFilters"
             :filter-multiple="false"
-            :filter-method="filterMethod"
+            :filtered-value="keyPoint"
           >
           </el-table-column>
           <el-table-column
@@ -143,7 +105,7 @@
             align="center"
             :filters="filters.problemTypeFilters"
             :filter-multiple="false"
-            :filter-method="filterMethod"
+            :filtered-value="problemType"
           >
           </el-table-column>
           <!-- <el-table-column prop="problemNature" label="问题定性" align="center">
@@ -171,20 +133,22 @@ export default {
     return {
       // 数据字典暂存对象
       classDictMap: {},
-      typeSelectVal: "",
+      typeSelectVal: [],
       typeOptions: [],
-      townSelectVal: "",
+      townSelectVal: [],
       townOptions: [],
+      problemType: [],
+      keyPoint: [],
       reStart: true,
-      problemType: "",
-      keyPoint: "",
       // 立项年度搜索框
       whereStr: "",
       allSearchColumn: "",
-      timeSelectVal: "",
+      timeSelectVal: [],
       timeOptions: [],
       tableData: [],
+      // 当前页
       currentPage: 1,
+      // 每页数据条数
       currentPageSize: 10,
       filters: {
         createYearFilters: [],
@@ -222,23 +186,22 @@ export default {
       }
     };
   },
+  computed: {
+    filteredValues(){
+      return this.timeSelectVal[0] + this.townSelectVal[0] + this.typeSelectVal[0] + this.keyPoint[0] + this.problemType[0];
+    }
+  },
   created() {
     this.townOptions = [];
     this.unTownOptions = {};
     this.timeOptions = [];
     this.typeOptions = [];
-
-    // 时间选择
-    for (let i = 1980; i <= parseInt(this.$dayjs().format("YYYY")); i++) {
-      this.timeOptions.unshift({
-        value: i,
-        label: i
-      });
-    }
     // 获取数据字典中下拉框数据
     this.classDictQuery("0", "sj_select", "审计类别");
     this.classDictQuery("0", "浦东新区行政区划", "浦东新区行政区划");
-    this.getTableData(1);
+    setTimeout(() => {
+      this.getTableData(1);
+    }, 0);
   },
   methods: {
     // 数据字典查询 -- 获取所需类别
@@ -282,11 +245,12 @@ export default {
       });
     },
     resetEvent() {
-      this.typeSelectVal = "";
-      this.townSelectVal = "";
-      this.timeSelectVal = "";
-      this.keyPoint = "";
-      this.problemType = "";
+      this.allSearchColumn = "";
+      this.typeSelectVal = [];
+      this.townSelectVal = [];
+      this.timeSelectVal = [];
+      this.keyPoint = [];
+      this.problemType = [];
       this.reStart = false;
       setTimeout(() => {
         this.reStart = true;
@@ -300,42 +264,6 @@ export default {
     handleClose() {
       this.dialogVisible = false;
     },
-    filterMethod(value, row, column) {
-      let selectState = false;
-      // 立项年度
-      if (column.property === "createYear" && this.timeSelectVal !== value) {
-        selectState = true;
-        this.timeSelectVal = Number(value);
-      }
-      // 被审计镇
-      if (column.property === "auditTown" && this.townSelectVal !== value) {
-        selectState = true;
-        this.townSelectVal = value;
-      }
-      // 类别
-      if (column.property === "type" && this.typeSelectVal !== value) {
-        selectState = true;
-        this.typeSelectVal = value;
-      }
-      // 重点审计事项
-      if (column.property === "keyPoint" && this.keyPoint !== value) {
-        selectState = true;
-        this.keyPoint = value;
-      }
-      // 参与问题定性
-      if (column.property === "problemType" && this.problemType !== value) {
-        selectState = true;
-        this.problemType = value;
-      }
-
-      if (selectState) {
-        this.getTableData(this.paginationData.currentPage);
-      }
-      return true;
-    },
-    sortList(a, b) {
-      return a - b;
-    },
     /**
      * 搜索条件拼接
      * @list 符合条件的值
@@ -344,16 +272,18 @@ export default {
      *  */
     appendWhereStr(list, columnName) {
       // 搜索条件拼接
+      let whereStr = "";
       if (list.length > 0) {
-        this.whereStr += " or " + columnName + " in (";
+        whereStr += " or " + columnName + " in ('";
         list.forEach((item, index) => {
           if (list.length > index + 1) {
-            this.whereStr += item + ",";
+            whereStr += item + "','";
           } else {
-            this.whereStr += item + ") ";
+            whereStr += item + "') ";
           }
         });
       }
+      return whereStr;
     },
     /**
      * 判断已经存在的类型中的code
@@ -361,126 +291,134 @@ export default {
      * @listNmae 暂存结果对象
      */
     isIndexOfToList(keyName, listNmae) {
-      this.classDictMap[keyName].forEach((key, value) => {
-        if (key.indexOf(this.allSearchColumn) != -1) {
-          listNmae.push(value);
-        }
-      });
-    },
-    // 全字段模糊查询
-    getContentInfoWhere() {
-      // 创建搜索条件对象
-      this.whereStr = "where ";
-      // 其他字段模糊查询(立项年度、重点审计事项、参与问题定性)
-      // this.whereStr += ` c_lxndwt like '%${this.allSearchColumn}%'`;
-      this.whereStr += ` c_zdsjsxwt like '%${this.allSearchColumn}%'`;
-      this.whereStr += ` or c_ckwtdxwt like '%${this.allSearchColumn}%'`;
-      // 创建code暂存对象
-      let c_bsjzwt = [];
-      let c_sjlbwt = [];
-      // 首先判断已经存在的类型中的code
-      this.isIndexOfToList("浦东新区行政区划", c_bsjzwt);
-      this.isIndexOfToList("审计类别", c_sjlbwt);
-      // 搜索条件拼接
-      this.appendWhereStr(c_bsjzwt, "c_bsjzwt");
-      this.appendWhereStr(c_sjlbwt, "c_sjlbwt");
-      console.log("被审计镇和类别可能属于的范围字段", c_bsjzwt, c_sjlbwt);
-      this.whereStr += `;`;
-      // 创建FormData对象
-      let params = new FormData();
-      params = {
-        columnId: 1127,
-        whereStr: this.whereStr
-      };
-      console.log("whereStr:", this.whereStr);
-      // 开始查询
-      // this.$Post(this.urlsCollection.getContentInfoWhere, params).then(res => {
-      //   if (res.code === 200 && res.content.length > 0) {
-      //     console.log("res：", res);
-      //   }
-      // });
-    },
-    // 切换页
-    getTableData(val) {
-      this.tableData = [];
-      let searchParam = [];
-      // 类别
-      if (this.typeSelectVal) {
-        let paramType = {
-          field: "c_sjlbwt",
-          // 等值查询
-          searchType: "1",
-          content: {
-            value: this.typeSelectVal
+      if (this.allSearchColumn && this.classDictMap[keyName]) {
+        this.classDictMap[keyName].forEach((key, value) => {
+          if (key.indexOf(this.allSearchColumn) != -1) {
+            listNmae.push(value);
           }
-        };
-        searchParam.push(paramType);
-      }
-      // 被审计街镇
-      if (this.townSelectVal && this.townSelectVal !== "全部") {
-        let paramTown = {
-          field: "c_bsjzwt",
-          // 等值查询
-          searchType: "1",
-          content: {
-            value: this.townSelectVal
-          }
-        };
-        searchParam.push(paramTown);
-      }
-      // 立项年度
-      if (this.timeSelectVal) {
-        let paramTime = {
-          field: "c_lxndwt",
-          // 等值查询
-          searchType: "1",
-          content: {
-            value: this.timeSelectVal
-          }
-        };
-        searchParam.push(paramTime);
-      }
-      // 重点审计事项
-      if (this.keyPoint) {
-        let paramTime = {
-          field: "c_zdsjsxwt",
-          // 等值查询
-          searchType: "1",
-          content: {
-            value: this.keyPoint
-          }
-        };
-        searchParam.push(paramTime);
+        });
       }
-      // 参与问题定性
-      if (this.problemType) {
-        let paramTime = {
-          field: "c_ckwtdxwt",
-          // 等值查询
-          searchType: "1",
-          content: {
-            value: this.problemType
+    },
+    /**
+     * 全字段模糊查询
+     * 通过全表查询模拟分页
+     * 查询出结果后自动得到下拉框中的联动
+     *  */
+    getContentInfoWhere(val) {
+      // 创建搜索条件对象
+      this.whereStr = "";
+      // 存在明确条件时
+      if (this.keyPoint[0] || this.problemType[0] || this.timeSelectVal[0] || this.townSelectVal[0] || this.typeSelectVal[0]) {
+        // 存在明确条件又存在模糊条件时
+        let andWhereStr = "";
+        let orWhereStr = "";
+        // 重点审计事项
+        if (this.keyPoint[0]) {
+          andWhereStr += `and c_zdsjsxwt = '${this.keyPoint[0]}' `;
+        } else if (this.allSearchColumn) {
+          orWhereStr += `or c_zdsjsxwt like '%${this.allSearchColumn}%' `;
+        }
+        // 参与问题定性
+        if (this.problemType[0]) {
+          andWhereStr += `and c_ckwtdxwt = '${this.problemType[0]}' `;
+        } else if (this.allSearchColumn) {
+          orWhereStr += `or c_ckwtdxwt like '%${this.allSearchColumn}%' `;
+        }
+        // 立项年度
+        if (this.timeSelectVal[0]) {
+          andWhereStr += `and c_lxndwt = '${this.timeSelectVal[0]}' `;
+        } else if (this.allSearchColumn) {
+          let c_zdsjsxwtList = [];
+          if (this.filters.createYearFilters) {
+            this.filters.createYearFilters.forEach((k, v) => {
+              let keyStr = k.text + "";
+              if (keyStr.indexOf(this.allSearchColumn) != -1) {
+                c_zdsjsxwtList.push(k.text);
+              }
+            });
           }
-        };
-        searchParam.push(paramTime);
+          orWhereStr += this.appendWhereStr(c_zdsjsxwtList, "c_lxndwt");
+        }
+
+        // 被审计镇
+        if (this.townSelectVal[0]) {
+          andWhereStr += `and c_bsjzwt = '${this.townSelectVal[0]}' `;
+        } else if (this.allSearchColumn) {
+          let c_bsjzwt = [];
+          // 首先判断已经存在的类型中的code
+          this.isIndexOfToList("浦东新区行政区划", c_bsjzwt);
+          // 搜索条件拼接
+          orWhereStr += this.appendWhereStr(c_bsjzwt, "c_bsjzwt");
+        }
+        // 审计类别
+        if (this.typeSelectVal[0]) {
+          andWhereStr += `and c_sjlbwt = '${this.typeSelectVal[0]}' `;
+        } else if (this.allSearchColumn) {
+          let c_sjlbwt = [];
+          // 首先判断已经存在的类型中的code
+          this.isIndexOfToList("审计类别", c_sjlbwt);
+          // 搜索条件拼接
+          orWhereStr += this.appendWhereStr(c_sjlbwt, "c_sjlbwt");
+        }
+        if (orWhereStr) {
+          this.whereStr = "where ";
+          this.whereStr += andWhereStr.substring(3, andWhereStr.length);
+          this.whereStr += " and(" + orWhereStr.substring(2, orWhereStr.length) + ") ";
+        } else {
+          this.whereStr = "where ";
+          this.whereStr += andWhereStr.substring(3, andWhereStr.length);
+        }
+        this.whereStr += `;`;
+      } else if (this.allSearchColumn) {
+        // 不存在明确条件，只存在模糊条件时
+        this.whereStr += `where c_zdsjsxwt like '%${this.allSearchColumn}%' `;
+        this.whereStr += `or c_ckwtdxwt like '%${this.allSearchColumn}%' `;
+
+        let c_zdsjsxwtList = [];
+        if (this.filters.createYearFilters) {
+          this.filters.createYearFilters.forEach((k, v) => {
+            let keyStr = k.text + "";
+            if (keyStr.indexOf(this.allSearchColumn) != -1) {
+              c_zdsjsxwtList.push(k.text);
+            }
+          });
+          this.whereStr += this.appendWhereStr(c_zdsjsxwtList, "c_lxndwt");
+        }
+
+        let c_bsjzwt = [];
+        // 首先判断已经存在的类型中的code
+        this.isIndexOfToList("浦东新区行政区划", c_bsjzwt);
+        // 搜索条件拼接
+        this.whereStr += this.appendWhereStr(c_bsjzwt, "c_bsjzwt");
+
+        let c_sjlbwt = [];
+        // 首先判断已经存在的类型中的code
+        this.isIndexOfToList("审计类别", c_sjlbwt);
+        // 搜索条件拼接
+        this.whereStr += this.appendWhereStr(c_sjlbwt, "c_sjlbwt");
       }
 
+      // 创建FormData对象
       let params = new FormData();
       params = {
         columnId: 1127,
-        states: "0,1,2,3",
-        pageSize: this.currentPageSize,
-        page: val - 1,
-        search: JSON.stringify(searchParam),
-        group: "c_lxndwt,c_bsjzwt,c_sjlbwt,c_zdsjsxwt,c_ckwtdxwt"
+        whereStr: this.whereStr
       };
-
-      // auditSelectContentList
-      this.$Post(this.urlsCollection.auditSelectContentList, params).then(res => {
-        if (res.code === 200 && res.content.data.length > 0) {
+      // 开始查询
+      this.$Post(this.urlsCollection.getContentInfoWhere, params).then(res => {
+        if (res.code === 200 && res.content && res.content.length > 0) {
+          // 当前页数
           this.paginationData.currentPage = val;
-          this.paginationData.total = res.content.count;
-          this.formData = res.content.data;
+          // 总数
+          this.paginationData.total = res.content.length;
+          // 每页显示数据个数
+          // this.currentPageSize;
+          this.formData = res.content.slice(
+            (this.paginationData.currentPage - 1) * this.currentPageSize,
+            this.paginationData.currentPage * this.currentPageSize > this.paginationData.total
+              ? this.paginationData.total
+              : this.paginationData.currentPage * this.currentPageSize
+          );
 
           this.filters = {
             createYearFilters: [],
@@ -489,55 +427,60 @@ export default {
             keyPointFilters: [],
             problemTypeFilters: []
           };
-          if (res.content.select) {
-            if (res.content.select.c_bsjzwt && res.content.select.c_bsjzwt.length > 0) {
-              res.content.select.c_bsjzwt.forEach(item => {
-                this.filters.auditTownFilters.push({ text: this.classDictMap["浦东新区行政区划"].get(item), value: item });
-              });
+          let auditTownFilters = [];
+          let createYearFilters = [];
+          let typeFilters = [];
+          let problemTypeFilters = [];
+          let keyPointFilters = [];
+          res.content.forEach(item => {
+            if (auditTownFilters.indexOf(item.c_bsjzwt) == -1) {
+              auditTownFilters.push(item.c_bsjzwt);
             }
-            if (res.content.select.c_lxndwt && res.content.select.c_lxndwt.length > 0) {
-              let yearsList = [];
-              res.content.select.c_lxndwt.forEach(item => {
-                yearsList.push(Number(item));
-              });
-              for (let index = 0; index < yearsList.length; index++) {
-                for (let index2 = index; index2 < yearsList.length; index2++) {
-                  let syearsList = yearsList[index];
-                  let eyearsList = yearsList[index2];
-                  if (syearsList > eyearsList) {
-                    yearsList[index] = eyearsList;
-                    yearsList[index2] = syearsList;
-                  }
-                }
-              }
-              yearsList.forEach(item => {
-                this.filters.createYearFilters.push({ text: Number(item), value: Number(item) });
-              });
+            if (createYearFilters.indexOf(item.c_lxndwt) == -1) {
+              createYearFilters.push(Number(item.c_lxndwt));
             }
-            if (res.content.select.c_sjlbwt && res.content.select.c_sjlbwt.length > 0) {
-              res.content.select.c_sjlbwt.forEach(item => {
-                this.filters.typeFilters.push({ text: this.classDictMap["审计类别"].get(item), value: item });
-              });
+            if (typeFilters.indexOf(item.c_sjlbwt) == -1) {
+              typeFilters.push(item.c_sjlbwt);
             }
-            if (res.content.select.c_ckwtdxwt && res.content.select.c_ckwtdxwt.length > 0) {
-              res.content.select.c_ckwtdxwt.forEach(item => {
-                this.filters.problemTypeFilters.push({ text: item, value: item });
-              });
+            if (problemTypeFilters.indexOf(item.c_ckwtdxwt) == -1) {
+              problemTypeFilters.push(item.c_ckwtdxwt);
             }
-            if (res.content.select.c_zdsjsxwt && res.content.select.c_zdsjsxwt.length > 0) {
-              res.content.select.c_zdsjsxwt.forEach(item => {
-                this.filters.keyPointFilters.push({ text: item, value: item });
-              });
+            if (keyPointFilters.indexOf(item.c_zdsjsxwt) == -1) {
+              keyPointFilters.push(item.c_zdsjsxwt);
+            }
+          });
+          auditTownFilters.forEach(item => {
+            this.filters.auditTownFilters.push({ text: this.classDictMap["浦东新区行政区划"].get(item), value: item });
+          });
+          for (let index = 0; index < createYearFilters.length; index++) {
+            for (let index2 = index; index2 < createYearFilters.length; index2++) {
+              let syearsList = createYearFilters[index];
+              let eyearsList = createYearFilters[index2];
+              if (syearsList > eyearsList) {
+                createYearFilters[index] = eyearsList;
+                createYearFilters[index2] = syearsList;
+              }
             }
           }
+          createYearFilters.forEach(item => {
+            this.filters.createYearFilters.push({ text: Number(item), value: Number(item) });
+          });
+          typeFilters.forEach(item => {
+            this.filters.typeFilters.push({ text: this.classDictMap["审计类别"].get(item), value: item });
+          });
+          problemTypeFilters.forEach(item => {
+            this.filters.problemTypeFilters.push({ text: item, value: item });
+          });
+          keyPointFilters.forEach(item => {
+            this.filters.keyPointFilters.push({ text: item, value: item });
+          });
           let rowIndex = 0;
-          this.tableData = res.content.data.map(v => {
+          this.tableData = this.formData.map(v => {
             rowIndex++;
             return {
               rowIndex: rowIndex,
               id: v.id || "--",
               createYear: v.c_lxndwt || "--",
-              // createYear: this.$dayjs(v.c_year).format("YYYY")|| "--",
               auditTown: this.classDictMap["浦东新区行政区划"].get(v.c_bsjzwt) || "--",
               type: this.classDictMap["审计类别"].get(v.c_sjlbwt) || "--",
               keyPoint: v.c_zdsjsxwt || "--",
@@ -545,15 +488,27 @@ export default {
               problemNature: v.c_wtdx1wt || "--"
             };
           });
+        }else{
+          this.paginationData.total = 0;
+          this.tableData = [];
         }
       });
     },
+    // 切换页
+    getTableData(val) {
+      this.getContentInfoWhere(val);
+    },
     // 切换条数
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
       this.currentPageSize = val;
       this.getTableData(this.currentPage);
     }
+  },
+  watch: {
+    filteredValues(){
+      this.getTableData(this.currentPage);
+    }
   }
 };
 </script>