web_sh_audit/src/components/common/WholeProcessManagement.vue

<template>
  <!-- 全流程管理列表组件 -->
  <div id="WholeProcessManagement">
    <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>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="tableInitLoading"
      :data="tableData"
      style="width: calc(100% - 20px); padding: 0 10px"
      height="calc(80vh - 400px)"
      stripe
      :row-class-name="tableRowClassName"
      @row-click="rowClick"
    >
      <el-table-column type="index" width="50" 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="项目类型"
        :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" />
    </div>
    <!-- 全流程管理流程组件 -->
    <StepsMyBox
      id="stepsBox"
      :clickData="clickData"
      v-show="StepsMyBoxShowState"
      @hideStepsMyBoxState="StepsMyBoxShowState = false"
    />
  </div>
</template>
<script>
/**
 * 头部菜单（全流程管理列表）组件
 * @author: LiuMengxiang
 * @Date: 2022年11月21-25日
 */
import StepsMyBox from "./StepsMyBox.vue";
import Pagination from "@/components/common/Pagination.vue";
export default {
  name: "WholeProcessManagement",
  components: { StepsMyBox, Pagination },
  data() {
    return {
      tableInitLoading: true,
      // 数据字典暂存对象
      selectSelectDataMap: {
        projectType: [],
        associatedItems: []
      },
      StepsMyBoxShowState: false,
      //   查询条件
      formInline: {
        c_task_type: "",
        c_owning_street_town: "",
        c_create_date: ""
      },
      // 搜索SQL对象
      whereStr: "",
      // 模糊搜索框绑定对象
      allSearchColumn: "",
      // filters
      filters: {
        cProjectNameFilters: [],
        cProjectTypeStrFilters: [],
        cOwningStreetTownStrFilters: [],
        cYearFilters: []
      },
      // 表头搜索条件绑定对象
      cProjectNameFilters: [],
      cProjectTypeStrFilters: [],
      cOwningStreetTownStrFilters: [],
      cYearFilters: [],
      // 我的任务form表单
      tableData: [],
      paginationData: {
        pageSize: 10,
        currentPage: 1,
        pageSizes: [10, 20, 50],
        total: 0,
        currentChange: val => {
          this.handleCurrentChange(val);
        },
        handleSizeChange: val => {
          this.handleSizeChange(val);
        }
      },
      clickData: {}
    };
  },
  props: {},
  mounted() {
    // 首先获取数据字典中的下拉框数据
    this.selectSelectData("0", "c_task_type", "projectType");
    this.selectSelectData("0", "项目类别", "project2Type");
    this.selectSelectData("0", "浦东新区行政区划", "associatedItems");
    this.onSubmit();
  },
  computed: {
    filteredValues() {
      return (
        this.cProjectNameFilters[0] +
        this.cProjectTypeStrFilters[0] +
        this.cOwningStreetTownStrFilters[0] +
        this.cYearFilters[0]
      );
    }
  },
  watch: {
    filteredValues() {
      this.onSubmit();
    }
  },
  methods: {
    // 数据字典查询
    selectSelectData(type, cName, keyName) {
      let params = new FormData();
      params.append("type", type);
      params.append("cName", cName);
      this.$Post(this.urlsCollection.selectByCNameAType, params).then(
        res => {
          if (res.code === 200 && res.content.length > 0) {
            this.selectSelectDataMap[keyName] = res.content;
          }
        },
        error => {
          this.$message.error(error);
          console.log(error);
        }
      );
    },
    // 数据字典对照显示
    getSelectByIndex(selectName, index) {
      let slotValue = "";
      if (this.selectSelectDataMap[selectName] && this.selectSelectDataMap[selectName].length > 0) {
        this.selectSelectDataMap[selectName].forEach(item => {
          if (item.index == index) {
            slotValue = item.name;
          }
        });
      }
      return slotValue;
    },
    // 切换条数
    handleSizeChange(val) {
      this.paginationData.pageSize = val;
      this.onSubmit();
    },
    //   切换页
    handleCurrentChange(val) {
      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;
      }
      let params = new FormData();
      params.append("columnId", "29");
      params.append("states", "2,3");
      params.append("pageSize", this.paginationData.pageSize);
      params.append("page", this.paginationData.currentPage - 1);
      let searchParam = [];
      if (this.formInline.c_task_type) {
        let param1 = {
          field: "c_task_type",
          searchType: "1",
          content: {
            value: this.formInline.c_task_type
          }
        };
        searchParam.push(param1);
      }
      if (this.formInline.c_owning_street_town) {
        let param1 = {
          field: "c_owning_street_town",
          searchType: "1",
          content: {
            value: this.formInline.c_owning_street_town
          }
        };
        searchParam.push(param1);
      }
      if (this.formInline.c_create_date) {
        let param1 = {
          field: "c_year",
          searchType: "1",
          content: {
            value: this.formInline.c_create_date - 0
          }
        };
        searchParam.push(param1);
      }
      params.append("search", JSON.stringify(searchParam));
      let sortparam = [{ field: "c_year", orderByType: 2 }];
      params.append("orderBy", JSON.stringify(sortparam));
      this.$Post(this.urlsCollection.selectContentList, params).then(
        res => {
          if (res.code === 200 && res.content.data.length > 0) {
            this.tableData = res.content.data;
            if (this.tableData.length > 0) {
              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;
            this.paginationData.total = res.content.count;
          } else {
            this.tableData = [];
            this.tableInitLoading = false;
            this.$message.error(res.message);
          }
        },
        error => {
          this.tableData = [];
          this.tableInitLoading = false;
          this.$message.error(error);
        }
      );
    },
    // 查询条件重置
    resetForm() {
      this.formInline = {
        c_task_type: "",
        c_owning_street_town: "",
        c_create_date: ""
      };
      this.cProjectNameFilters = [];
      this.cProjectTypeStrFilters = [];
      this.cOwningStreetTownStrFilters = [];
      this.cYearFilters = [];
      this.onSubmit();
    },
    // 给每一行row的数据对象里添加index属性
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    // 用户单击某行时触发操作
    rowClick(row, column, event) {
      // console.log(row,column,event);
      this.ToView(row.index);
    },
    // 查看
    ToView(index) {
      this.StepsMyBoxShowState = true;
      this.clickData = this.tableData[index];
    }
  }
};
</script>
<style lang="less" scoped>
#WholeProcessManagement {
  position: absolute;
  display: flex;
  background: #00274d;
  z-index: 999;
  margin-top: 60px;
  width: 100%;
  height: calc(100% - 60px);
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  overflow: hidden;
  flex-direction: column;
  &-footer {
    width: 99%;
    margin: 0 auto;
    height: 10%;
    position: absolute;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>