全流程管理全字段搜索功能部分开发完成

src/components/common/WholeProcessManagement.vue

@@ -1,32 +1,10 @@
 <template>
   <!-- 全流程管理列表组件 -->
   <div id="WholeProcessManagement">
-    <el-form :inline="true" ref="myTaskForm" :model="formInline" style="padding: 10px">
-      <!-- <el-form-item label="任务类型">
-        <el-select size="mini" v-model="formInline.c_task_type" placeholder="任务类型" clearable filterable>
-          <el-option
-            v-for="item in selectSelectDataMap['projectType']"
-            :key="item.index"
-            :label="item.name"
-            :value="item.index"
-          ></el-option>
-        </el-select>
-      </el-form-item> -->
-      <el-form-item label="所属街镇">
-        <el-select size="mini" v-model="formInline.c_owning_street_town" placeholder="所属街镇" clearable filterable>
-          <el-option
-            v-for="item in selectSelectDataMap['associatedItems']"
-            :key="item.index"
-            :label="item.name"
-            :value="item.index"
-          >
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="年份">
-        <el-date-picker size="mini" v-model="formInline.c_create_date" value-format="yyyy" type="year" placeholder="选择年">
-        </el-date-picker>
-      </el-form-item>
+    <el-form :inline="true" ref="myTaskForm" style="padding: 10px">
+      <el-form-item label="模糊查询">
+        <el-input v-model="allSearchColumn" clearable> </el-input
+      ></el-form-item>
       <el-form-item style="float: right">
         <el-button type="primary" @click="onSubmit">查询</el-button>
         <el-button @click="resetForm()">重置</el-button>
@@ -42,17 +20,39 @@
       @row-click="rowClick"
     >
       <el-table-column type="index" width="50" label="序号"> </el-table-column>
-      <!-- <el-table-column prop="c_project_id" label="项目编号"> </el-table-column> -->
-      <el-table-column prop="c_project_name" label="项目名称"> </el-table-column>
+      <el-table-column
+        prop="c_project_name"
+        label="项目名称"
+        :filters="filters.cProjectNameFilters"
+        :filter-multiple="false"
+        :filtered-value="cProjectNameFilters"
+      >
+      </el-table-column>
       <!-- <el-table-column prop="c_task_type_str" label="任务类型"> </el-table-column> -->
-      <el-table-column prop="c_project_type_str" label="项目类型"> </el-table-column>
-      <el-table-column prop="c_owning_street_town_str" label="所属街镇"> </el-table-column>
-      <!-- <el-table-column prop="c_create_date" label="创建时间">
-        <template slot-scope="scope">
-          {{ $dayjs(scope.row.c_create_date).format("YYYY-MM-DD HH:mm:ss") }}
-        </template>
-      </el-table-column> -->
-      <el-table-column prop="c_year" label="年份"> </el-table-column>
+      <el-table-column
+        prop="c_project_type_str"
+        label="项目类型"
+        :filters="filters.cProjectTypeStrFilters"
+        :filter-multiple="false"
+        :filtered-value="cProjectTypeStrFilters"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="c_owning_street_town_str"
+        label="所属街镇"
+        :filters="filters.cOwningStreetTownStrFilters"
+        :filter-multiple="false"
+        :filtered-value="cOwningStreetTownStrFilters"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="c_year"
+        label="年份"
+        :filters="filters.cYearFilters"
+        :filter-multiple="false"
+        :filtered-value="cYearFilters"
+      >
+      </el-table-column>
     </el-table>
     <div id="WholeProcessManagement-footer">
       <Pagination :paginationData="paginationData" />
@@ -92,6 +92,22 @@ export default {
         c_owning_street_town: "",
         c_create_date: ""
       },
+      // 搜索SQL对象
+      whereStr: "",
+      // 模糊搜索框绑定对象
+      allSearchColumn: "",
+      // filters
+      filters: {
+        cProjectNameFilters: [],
+        cProjectTypeStrFilters: [],
+        cOwningStreetTownStrFilters: [],
+        cYearFilters: []
+      },
+      // 表头搜索条件绑定对象
+      cProjectNameFilters: [],
+      cProjectTypeStrFilters: [],
+      cOwningStreetTownStrFilters: [],
+      cYearFilters: [],
       // 我的任务form表单
       tableData: [],
       paginationData: {
@@ -117,7 +133,21 @@ export default {
     this.selectSelectData("0", "浦东新区行政区划", "associatedItems");
     this.onSubmit();
   },
-  watch: {},
+  computed: {
+    filteredValues() {
+      return (
+        this.cProjectNameFilters[0] +
+        this.cProjectTypeStrFilters[0] +
+        this.cOwningStreetTownStrFilters[0] +
+        this.cYearFilters[0]
+      );
+    }
+  },
+  watch: {
+    filteredValues() {
+      this.onSubmit();
+    }
+  },
   methods: {
     // 数据字典查询
     selectSelectData(type, cName, keyName) {
@@ -158,8 +188,233 @@ export default {
       this.paginationData.currentPage = val;
       this.onSubmit();
     },
-    // 查询事件
+    /**
+     * 搜索条件拼接
+     * @list 符合条件的值
+     * @columnName 判断字段名
+     * @whereStr 搜索条件字符串
+     *  */
+    appendWhereStr(list, columnName) {
+      // 搜索条件拼接
+      let whereStr = "";
+      if (list.length > 0) {
+        whereStr += " or " + columnName + " in ('";
+        list.forEach((item, index) => {
+          if (list.length > index + 1) {
+            whereStr += item + "','";
+          } else {
+            whereStr += item + "') ";
+          }
+        });
+      }
+      return whereStr;
+    },
+    /**
+     * 判断已经存在的类型中的code
+     * @keyName 类别名称
+     * @listNmae 暂存结果对象
+     */
+    isIndexOfToList(keyName, listNmae) {
+      if (this.allSearchColumn && this.selectSelectDataMap[keyName]) {
+        this.selectSelectDataMap[keyName].forEach(item => {
+          if (item.name == this.allSearchColumn) {
+            listNmae.push(item.index);
+          }
+        });
+      }
+    },
+    /**
+     * 全字段模糊查询
+     * 通过全表查询模拟分页
+     * 查询出结果后自动得到下拉框中的联动
+     *  */
     onSubmit() {
+      if (!this.tableInitLoading) {
+        this.tableInitLoading = true;
+      }
+      // 创建搜索条件对象
+      this.whereStr = "";
+      // 存在明确条件时
+      if (
+        this.cProjectNameFilters[0] ||
+        this.cProjectTypeStrFilters[0] ||
+        this.cOwningStreetTownStrFilters[0] ||
+        this.cYearFilters[0]
+      ) {
+        // 存在明确条件又存在模糊条件时
+        let andWhereStr = "";
+        let orWhereStr = "";
+        // 项目名称
+        if (this.cProjectNameFilters[0]) {
+          andWhereStr += `and c_project_name = '${this.cProjectNameFilters[0]}' `;
+        } else if (this.allSearchColumn) {
+          orWhereStr += `or c_project_name like '%${this.allSearchColumn}%' `;
+        }
+        // 项目类型
+        if (this.cProjectTypeStrFilters[0]) {
+          andWhereStr += `and c_project_type = '${this.cProjectTypeStrFilters[0]}' `;
+        } else if (this.allSearchColumn) {
+          let c_bsjzwt = [];
+          // 首先判断已经存在的类型中的code
+          this.isIndexOfToList("associatedItems", c_bsjzwt);
+          // 搜索条件拼接
+          orWhereStr += this.appendWhereStr(c_bsjzwt, "c_owning_street_town");
+        }
+        // } else if (this.allSearchColumn) {
+        //   orWhereStr += `or c_project_type like '%${this.allSearchColumn}%' `;
+        // }
+        // 所属街道
+        if (this.cOwningStreetTownStrFilters[0]) {
+          andWhereStr += `and c_owning_street_town = '${this.cOwningStreetTownStrFilters[0]}' `;
+        } else if (this.allSearchColumn) {
+          let c_bsjzwt = [];
+          // 首先判断已经存在的类型中的code
+          this.isIndexOfToList("projectType", c_bsjzwt);
+          // 搜索条件拼接
+          orWhereStr += this.appendWhereStr(c_bsjzwt, "c_owning_street_town");
+        }
+        // 年份
+        if (this.cYearFilters[0]) {
+          andWhereStr += `and c_year = '${this.cYearFilters[0]}' `;
+        } else if (this.allSearchColumn) {
+          let c_zdsjsxwtList = [];
+          if (this.filters.cYearFilters) {
+            this.filters.cYearFilters.forEach((k, v) => {
+              let keyStr = k.text + "";
+              if (keyStr.indexOf(this.allSearchColumn) != -1) {
+                c_zdsjsxwtList.push(k.text);
+              }
+            });
+          }
+          orWhereStr += this.appendWhereStr(c_zdsjsxwtList, "c_year");
+        }
+        // 格式化SQL语句
+        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_project_name like '%${this.allSearchColumn}%' `;
+
+        let c_zdsjsxwtList = [];
+        if (this.filters.cYearFilters) {
+          this.filters.cYearFilters.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_year");
+        }
+
+        let c_bsjzwt = [];
+        // 首先判断已经存在的类型中的code
+        this.isIndexOfToList("project2Type", c_bsjzwt);
+        // 搜索条件拼接
+        this.whereStr += this.appendWhereStr(c_bsjzwt, "c_project_type");
+        let c_owning_street_town = [];
+        // 首先判断已经存在的类型中的code
+        this.isIndexOfToList("projectType", c_owning_street_town);
+        // 搜索条件拼接
+        this.whereStr += this.appendWhereStr(c_owning_street_town, "c_owning_street_town");
+      }
+
+      // 创建FormData对象
+      let params = new FormData();
+      params = {
+        columnId: 29,
+        whereStr: this.whereStr
+      };
+      // 开始查询
+      this.$Post(this.urlsCollection.getContentInfoWhere, params).then(
+        res => {
+          if (res.code === 200 && res.content && res.content.length > 0) {
+            // 总数
+            this.paginationData.total = res.content.length;
+            // 每页显示数据个数
+            // this.currentPageSize;
+            this.tableData = res.content.slice(
+              (this.paginationData.currentPage - 1) * this.paginationData.pageSize,
+              this.paginationData.currentPage * this.paginationData.pageSize > this.paginationData.total
+                ? this.paginationData.total
+                : this.paginationData.currentPage * this.paginationData.pageSize
+            );
+            this.filters = {
+              cProjectNameFilters: [],
+              cProjectTypeStrFilters: [],
+              cOwningStreetTownStrFilters: [],
+              cYearFilters: []
+            };
+            let cProjectNameFilters = [];
+            let cProjectTypeStrFilters = [];
+            let cOwningStreetTownStrFilters = [];
+            let cYearFilters = [];
+            res.content.forEach(item => {
+              if (cProjectNameFilters.indexOf(item.c_project_name) == -1) {
+                cProjectNameFilters.push(item.c_project_name);
+              }
+              if (cProjectTypeStrFilters.indexOf(item.c_project_type) == -1) {
+                cProjectTypeStrFilters.push(item.c_project_type);
+              }
+              if (cOwningStreetTownStrFilters.indexOf(item.c_owning_street_town) == -1) {
+                cOwningStreetTownStrFilters.push(item.c_owning_street_town);
+              }
+              if (cYearFilters.indexOf(item.c_year) == -1) {
+                cYearFilters.push(item.c_year);
+              }
+            });
+            cProjectTypeStrFilters.forEach(item => {
+              this.filters.cProjectTypeStrFilters.push({ text: this.getSelectByIndex("project2Type", item), value: item });
+            });
+            for (let index = 0; index < cYearFilters.length; index++) {
+              for (let index2 = index; index2 < cYearFilters.length; index2++) {
+                let syearsList = cYearFilters[index];
+                let eyearsList = cYearFilters[index2];
+                if (syearsList > eyearsList) {
+                  cYearFilters[index] = eyearsList;
+                  cYearFilters[index2] = syearsList;
+                }
+              }
+            }
+            cYearFilters.forEach(item => {
+              this.filters.cYearFilters.push({ text: Number(item), value: Number(item) });
+            });
+            cProjectNameFilters.forEach(item => {
+              this.filters.cProjectNameFilters.push({ text: item, value: item });
+            });
+            cOwningStreetTownStrFilters.forEach(item => {
+              this.filters.cOwningStreetTownStrFilters.push({
+                text: this.getSelectByIndex("associatedItems", item),
+                value: item
+              });
+            });
+            this.tableData.forEach(item => {
+              item.c_task_type_str = this.getSelectByIndex("projectType", item.c_task_type);
+              item.c_project_type_str = this.getSelectByIndex("project2Type", item.c_project_type);
+              item.c_owning_street_town_str = this.getSelectByIndex("associatedItems", item.c_owning_street_town);
+            });
+            this.tableInitLoading = false;
+          } else {
+            this.paginationData.total = 0;
+            this.tableInitLoading = false;
+            this.tableData = [];
+          }
+        },
+        error => {
+          this.tableData = [];
+          this.tableInitLoading = false;
+          this.$message.error(error);
+        }
+      );
+    },
+    // 查询事件(废弃)
+    onSubmitOld() {
       if (!this.tableInitLoading) {
         this.tableInitLoading = true;
       }
@@ -235,6 +490,10 @@ export default {
         c_owning_street_town: "",
         c_create_date: ""
       };
+      this.cProjectNameFilters = [];
+      this.cProjectTypeStrFilters = [];
+      this.cOwningStreetTownStrFilters = [];
+      this.cYearFilters = [];
       this.onSubmit();
     },
     // 给每一行row的数据对象里添加index属性

src/views/FrequencyView.vue

@@ -108,8 +108,6 @@
             :filtered-value="problemType"
           >
           </el-table-column>
-          <!-- <el-table-column prop="problemNature" label="问题定性" align="center">
-          </el-table-column> -->
         </el-table>
       </div>
       <div class="footer">