web_sh_audit/src/views/FrequencyView.vue

<template>
  <div class="frenquency-container">
    <el-dialog
      custom-class="myMission"
      title="详细信息"
      :append-to-body="true"
      :modal="true"
      :visible.sync="dialogVisible"
      width="70%"
      height="60%"
      :before-close="handleClose"
    >
      <div>
        <div class="dialog_title_info">
          <div>
            立项年度：{{
              formData[activeRowIndex] && formData[activeRowIndex].c_lxndwt
                ? formData[activeRowIndex].c_lxndwt
                : "--"
            }}
          </div>
          <div>
            被审计镇：{{
              formData[activeRowIndex] &&
              formData[activeRowIndex].c_bsjzwt &&
              unTownOptions &&
              unTownOptions[formData[activeRowIndex].c_bsjzwt]
                ? unTownOptions[formData[activeRowIndex].c_bsjzwt]
                : "--"
            }}
          </div>
        </div>
        <div class="dialog_title_info">
          问题金额（万元）：{{
            formData[activeRowIndex] && formData[activeRowIndex].c_wtjewt
              ? formData[activeRowIndex].c_wtjewt
              : "--"
          }}
        </div>
        <div class="dialog_title">审计报告中的问题反映情况</div>
        <div
          v-for="(item, index) in dialogData"
          :key="index"
          class="dialog_table"
        >
          <div>{{ item.title }}</div>
          <div>
            {{
              formData[activeRowIndex] &&
              formData[activeRowIndex][item.columnName]
                ? formData[activeRowIndex][item.columnName]
                : "--"
            }}
          </div>
        </div>
      </div>
    </el-dialog>
    <div class="frenquency-container-inner">
      <div class="header">
        <div class="header-select">
          <div class="header-title">历史问题</div>
          <div class="header-search">
            <el-input
             style="width:300px;"
              v-model="allSearchColumn"
              clearable
              placeholder="请输入关键词"
            >
              <i
                class="el-icon-search"
                style="cursor: pointer"
                @click="getContentInfoWhere(1)"
                slot="append"
              ></i>
            </el-input>
            <el-button @click="resetEvent()">重置</el-button>
          </div>
        </div>
      </div>
      <div class="center" v-if="reStart">
        <el-table
          :data="tableData"
          style="width: 100%"
          max-height="600"
          @row-click="rowClick"
        >
          <el-table-column type="index" width="70" align="center" label="序号">
          </el-table-column>
          <el-table-column
            prop="createYear"
            label="立项年度"
            width="150"
            align="center"
            :filters="filters.createYearFilters"
            :filter-multiple="false"
            :filtered-value="timeSelectVal"
          >
          </el-table-column>
          <el-table-column
            prop="auditTown"
            label="被审计镇"
            align="center"
            width="180"
            :filters="filters.auditTownFilters"
            :filter-multiple="false"
            :filtered-value="townSelectVal"
          >
          </el-table-column>
          <el-table-column
            prop="type"
            label="类别"
            align="center"
            :filters="filters.typeFilters"
            :filter-multiple="false"
            :filtered-value="typeSelectVal"
          >
          </el-table-column>
          <el-table-column
            prop="keyPoint"
            label="重点审计事项"
            align="center"
            :filters="filters.keyPointFilters"
            :filter-multiple="false"
            :filtered-value="keyPoint"
          >
          </el-table-column>
          <el-table-column
            prop="problemType"
            label="参考问题定性"
            align="center"
            :filters="filters.problemTypeFilters"
            :filter-multiple="false"
            :filtered-value="problemType"
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="footer">
        <Pagination :paginationData="paginationData" />
      </div>
    </div>
  </div>
</template>
<script>
import NewSelect from "@/components/common/NewSelect.vue";
import Pagination from "@/components/common/Pagination.vue";
/**
 * 历史问题 -- 智能辅助
 * @author: Gao Lu
 * @Date: 2022.11.24
 */
export default {
  name: "FrequencyDialog",
  components: { NewSelect, Pagination },
  data() {
    return {
      // 数据字典暂存对象
      classDictMap: {},
      typeSelectVal: [],
      typeOptions: [],
      townSelectVal: [],
      townOptions: [],
      problemType: [],
      keyPoint: [],
      reStart: true,
      // 立项年度搜索框
      whereStr: "",
      allSearchColumn: "",
      timeSelectVal: [],
      timeOptions: [],
      tableData: [],
      // 当前页
      currentPage: 1,
      // 每页数据条数
      currentPageSize: 10,
      filters: {
        createYearFilters: [],
        auditTownFilters: [],
        typeFilters: [],
        keyPointFilters: [],
        problemTypeFilters: [],
      },
      // 整改中的查看详情弹窗状态
      dialogVisible: false,
      dialogData: [
        { title: "问题分类", columnName: "c_wtflwt", info: "--" },
        { title: "问题定性一级", columnName: "c_wtdx1wt", info: "--" },
        { title: "问题定性二级", columnName: "c_wtdx2wt", info: "--" },
        { title: "问题事项", columnName: "c_wtsxwt", info: "--" },
        { title: "使用法条", columnName: "c_syftwt", info: "--" },
        { title: "边审边改情况", columnName: "c_bsbgqkwt", info: "--" },
      ],
      // 暂存全部数据
      formData: [],
      // 选中的rowinxdex
      activeRowIndex: 0,
      paginationData: {
        pageSize: 10,
        pagerCount: 5,
        currentPage: 1,
        pageSizes: [5, 10, 20, 30],
        total: 50,
        currentChange: (val) => {
          this.getTableData(val);
        },
        handleSizeChange: (val) => {
          this.handleSizeChange(val);
        },
      },
    };
  },
  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 = [];
    // 获取数据字典中下拉框数据
    this.classDictQuery("0", "sj_select", "审计类别");
    this.classDictQuery("0", "浦东新区行政区划", "浦东新区行政区划");
    setTimeout(() => {
      this.getTableData(1);
    }, 0);
  },
  methods: {
    // 数据字典查询 -- 获取所需类别
    classDictQuery(type, cName, keyName) {
      let params = new FormData();
      params = {
        type: type,
        cName: cName,
      };

      this.$Post(this.urlsCollection.selectByCNameAType, params).then((res) => {
        if (res.code === 200 && res.content.length > 0) {
          this.classDictMap[keyName] = new Map();
          res.content.forEach((v) => {
            this.classDictMap[keyName].set(v.index + "", v.name);
          });

          if (keyName === "浦东新区行政区划") {
            this.classDictMap[keyName].forEach((v, i) => {
              this.townOptions.push({
                value: i,
                label: v,
              });
              this.unTownOptions[i] = v;
            });
            this.townOptions.unshift({
              value: "全部",
              label: "全部",
            });
          }

          if (keyName === "审计类别") {
            this.classDictMap[keyName].forEach((v, i) => {
              this.typeOptions.push({
                value: i,
                label: v,
              });
            });
          }
        }
      });
    },
    resetEvent() {
      this.allSearchColumn = "";
      this.typeSelectVal = [];
      this.townSelectVal = [];
      this.timeSelectVal = [];
      this.keyPoint = [];
      this.problemType = [];
      this.reStart = false;
      setTimeout(() => {
        this.reStart = true;
        this.getTableData(1);
      });
    },
    rowClick(row, column, event) {
      this.activeRowIndex = row.rowIndex - 1;
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    /**
     * 搜索条件拼接
     * @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.classDictMap[keyName]) {
        this.classDictMap[keyName].forEach((key, value) => {
          if (key.indexOf(this.allSearchColumn) != -1) {
            listNmae.push(value);
          }
        });
      }
    },
    /**
     * 全字段模糊查询
     * 通过全表查询模拟分页
     * 查询出结果后自动得到下拉框中的联动
     *  */
    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);
              }
            });
          }
          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,
        whereStr: this.whereStr,
      };
      // 开始查询
      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.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: [],
              auditTownFilters: [],
              typeFilters: [],
              keyPointFilters: [],
              problemTypeFilters: [],
            };
            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 (createYearFilters.indexOf(item.c_lxndwt) == -1) {
                createYearFilters.push(Number(item.c_lxndwt));
              }
              if (typeFilters.indexOf(item.c_sjlbwt) == -1) {
                typeFilters.push(item.c_sjlbwt);
              }
              if (problemTypeFilters.indexOf(item.c_ckwtdxwt) == -1) {
                problemTypeFilters.push(item.c_ckwtdxwt);
              }
              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 = this.formData.map((v) => {
              rowIndex++;
              return {
                rowIndex: rowIndex,
                id: v.id || "--",
                createYear: v.c_lxndwt || "--",
                auditTown:
                  this.classDictMap["浦东新区行政区划"].get(v.c_bsjzwt) || "--",
                type: this.classDictMap["审计类别"].get(v.c_sjlbwt) || "--",
                keyPoint: v.c_zdsjsxwt || "--",
                problemType: v.c_ckwtdxwt || "--",
                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>
<style lang="less" scoped>
.frenquency-container {
  display: flex;
  align-items: center;
  justify-content: center;
  &-inner {
    width: 98%;
    height: 97%;
    background: rgba(0, 39, 77, 0.5);
    .header {
      height: 120px;
      width: 100%;
      position: relative;
      &-search{
        width: 400px;
        height: 50px;
        position: absolute;
        top: 25px;
        right: 10px;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
      &-title {
        width: 84px;
        height: 20px;
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #4dc3ff;
        line-height: 30px;
        position: absolute;
        top: 8px;
        left: 15px;
      }
      &-select {
        height: 40px;
        color: #e6e6e6;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
      }
      .reset-btn,
      .query-btn {
        width: 60px;
        height: 30px;
        border-radius: 3px;
        border: none;
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 15px;
      }
      .reset-btn {
        right: 30px;
        background: rgba(129, 140, 164, 1);
      }
      .query-btn {
        right: 110px;
        background-image: linear-gradient(
          to top,
          rgba(79, 172, 254, 1),
          rgba(0, 242, 254, 1)
        );
      }
    }
    .center {
      height: calc(90% - 120px);
      width: 100%;
      overflow: auto;
      /deep/.el-table {
        background: rgba(0, 39, 77, 0.6);
        // font-size: 0.95rem;
        font-family: PingFang SC;
        font-weight: 500;
        thead {
          color: #4dc3ff;
          font-size: 15px;
        }
      }
    }
    .footer {
      position: absolute;
      right: 50px;
      bottom: 30px;
    }
  }
}

.dialog_title {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  padding-bottom: 1.5rem;
  &2 {
    font-weight: 100;
    font-size: 18px;
    color: #fff;
    padding-top: 1.5rem;
  }
  &3 {
    display: flex;
    justify-content: center;
    padding-top: 1.5rem;
  }
  &_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 400px;
    color: #dcdfe6;
    padding: 1rem 0;
  }
}
.dialog_table {
  display: flex;
  justify-content: space-between;
  div {
    width: 50%;
    text-align: center;
    background-color: #00000064 !important;
    margin: 1px;
    padding: 5px 10px;
    display: flex;
    justify-content: center;
    color: #dcdfe6;
    border: 1px solid #001d3c00;
  }
}
/deep/.el-input-group__append,
.el-input-group__prepend {
  background: transparent;
  // background-color: #00aaff54;
  color: #fff;
  border-left: none;
  // border: none;
  // border-radius: 1px;
}
</style>