EvaluateReport.vue

<template>
  <div class="flex h-full w-full flex-col gap-4">
    <!-- 顶部搜索 -->
    <div class="w-ful flex items-center justify-between">
      <div class="flex items-center gap-4">
        <el-button
          type="primary"
          size="small"
          :loading="exportLoading"
          @click="exportExcel"
          >导出</el-button
        >
        <div class="text-[#909399]">
          评价次数：<span class="take-total-num">{{ total }}次</span>
        </div>
        <div class="text-[14px] text-[#909399]">
          统计时间段：{{ searchForm.time[0] }} ~ {{ searchForm.time[1] }}
        </div>
      </div>
      <div class="flex items-center">
        <el-form ref="searchForm" inline size="small" :model="searchForm">
          <el-form-item>
            <el-select style="width: 130px" v-model="searchForm.type">
              <el-option
                v-for="(v, key) in searchType"
                :key="key"
                :label="v"
                :value="key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="searchForm.keyword"
              placeholder="请输入关键字"
              clearable
              @keyup.native.enter="handleSearch"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <y-date-picker
              v-model="searchForm.time"
              align="right"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </y-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-popover placement="bottom" trigger="click">
        <div class="w-full">
          <el-form ref="searchForm2" inline size="small" :model="searchForm2">
            <el-form-item>
              <el-select
                style="width: 150px"
                v-model="searchForm2.pjOption"
                clearable
                placeholder="请选择评价选项"
              >
                <el-option
                  v-for="(v, key) in dict.pjOption"
                  :key="key"
                  :label="key"
                  :value="v"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                style="width: 180px"
                filterable
                clearable
                v-model="searchForm2.sectionName"
                placeholder="请选择部门"
              >
                <el-option
                  v-for="v in deptList"
                  :key="v.id"
                  :label="v.name"
                  :value="v.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                style="width: 180px"
                v-model="searchForm2.hallName"
                filterable
                clearable
                placeholder="请选择大厅"
              >
                <el-option
                  v-for="v in hallList"
                  :key="v.id"
                  :label="v.hallName"
                  :value="v.hallName"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                style="width: 150px"
                v-model="searchForm2.pjSource"
                clearable
                placeholder="请选择评价来源"
              >
                <el-option
                  v-for="(v, key) in dict.pjSource"
                  :key="key"
                  :label="key"
                  :value="v"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                style="width: 150px"
                v-model="searchForm2.pjType"
                clearable
                placeholder="请选择评价指向"
              >
                <el-option
                  v-for="(v, key) in dict.pjType"
                  :key="key"
                  :label="key"
                  :value="v"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="handleSearch">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-button type="text" slot="reference">
          高级搜索
          <i class="el-icon-d-arrow-right"></i>
        </el-button>
      </el-popover>
    </div>
    <div class="main max-w-[1396px] flex-1">
      <div>
        <y-table
          ref="MyTable"
          :loading="loading"
          :data="tableData"
          :column="column"
          border
          tooltip-effect="dark"
          :max-height="580"
          :row-key="(row) => row.id"
          @selection-change="handleSelectionChange"
        ></y-table>
      </div>
      <Pagination
        :total="total"
        :current.sync="current"
        :size.sync="size"
        @get="getEvaluateList"
      ></Pagination>
    </div>
    <!-- 详情 -->
    <EvaluateDetails :show.sync="show" :info="detailsInfo"></EvaluateDetails>
  </div>
</template>

<script>
import EvaluateDetails from "./components/EvaluateDetails.vue";
import { getEvaluateList } from "@/api/market";
import { getDepartment, getHall } from "@/api/site";
import { dataSection } from "@/utils";
import { export2Excel } from "@/utils/exportExcel";
import storage from "@/utils/storage";
let searchType = {
  windowFromnum: "按窗口编号",
  peopleName: "按群众姓名",
  peoplePhone: "按群众手机号",
};
export default {
  components: {
    EvaluateDetails,
  },
  data() {
    return {
      show: false,
      loading: false,
      exportLoading: false,
      searchType,
      size: 10,
      current: 1,
      total: 0,
      searchForm: {
        type: "windowFromnum",
        keyword: "",
        time: [
          this.$moment().format("YYYY-MM-DD"),
          this.$moment().format("YYYY-MM-DD"),
        ],
        siteId: storage.get(2, "siteId"),
      },
      searchForm2: {
        pjOption: "", // 评价选项
        sectionName: "", // 部门名称
        hallName: "", // 大厅名称
        pjSource: "", // 评价来源
        pjType: "", // 评价指向
      },
      tableData: [],
      dict: {},
      selectionRows: [],
      detailsInfo: {},
      deptList: [], // 部门列表
      hallList: [], // 大厅列表
      column: [
        {
          type: "selection",
          width: "50",
          align: "center",
          reserveSelection: true,
          fixed: "left",
        },
        {
          type: "index",
          label: "序号",
          width: "50",
          align: "center",
          fixed: "left",
          index: (index) => {
            return index + 1 + (this.current - 1) * this.size;
          },
        },
        {
          label: "站点名称",
          align: "center",
          width: "150",
          prop: "siteName",
        },
        {
          label: "身份证号",
          align: "center",
          width: "150",
          prop: "peopleIdcard",
        },
        {
          label: "姓名",
          align: "center",
          width: "150",
          prop: "peopleName",
        },
        {
          label: "性别",
          align: "center",
          width: "150",
          prop: "peopleSex",
        },
        {
          label: "手机号",
          align: "center",
          width: "150",
          prop: "peoplePhone",
        },
        {
          label: "评价选项",
          align: "center",
          width: "150",
          prop: "pjOption",
        },
        {
          label: "评价标签",
          align: "center",
          width: "150",
          prop: "contentTag",
        },
        {
          label: "部门",
          align: "center",
          width: "150",
          prop: "sectionName",
        },
        {
          label: "大厅",
          align: "center",
          width: "150",
          prop: "hallName",
        },
        {
          label: "评价来源",
          align: "center",
          width: "150",
          prop: "pjSource",
        },
        {
          label: "手输意见",
          align: "center",
          width: "150",
          prop: "opinion",
        },
        {
          label: "窗口名",
          align: "center",
          width: "150",
          prop: "windowName",
        },
        {
          label: "窗口编号",
          align: "center",
          width: "150",
          prop: "windowFromnum",
        },
        {
          label: "窗口评价",
          align: "center",
          width: "150",
          prop: "pjxt",
        },
        {
          label: "工作人员",
          align: "center",
          width: "150",
          prop: "workmanName",
        },
        {
          label: "工号",
          align: "center",
          width: "150",
          prop: "workmanNumber",
        },
        {
          label: "评价状态",
          align: "center",
          width: "150",
          prop: "evaluatestatus",
        },
        {
          label: "评价指向",
          align: "center",
          width: "150",
          prop: "pjType",
        },
        {
          label: "评价时间",
          align: "center",
          width: "150",
          prop: "pjTime",
        },

        {
          label: "扩展编号",
          align: "center",
          width: "150",
          prop: "extNum",
        },
        {
          label: "操作",
          align: "center",
          fixed: "right",
          width: "100",
          formatter: (row) => {
            return (
              <span
                class="primary cursor-pointer"
                onClick={() => {
                  this.checkDetails(row);
                }}
              >
                查看详情
              </span>
            );
          },
        },
      ],
    };
  },
  created() {
    this.getEvaluateList();
    this.getDepartment();
    this.getHall();
  },
  methods: {
    // 获取站点
    getSite(data) {
      this.current = 1;
      this.size = 10;
      if (data.type == "site") {
        this.searchForm.siteId = data.id;
        this.getEvaluateList();
        this.getDepartment();
        this.getHall();
      } else {
        this.tableData = [];
        this.total = 0;
      }
    },
    // 获取数据函数
    async getData(form = {}) {
      let obj = {
        page: this.current,
        size: this.size,
        pjTimeStart: this.searchForm.time[0],
        pjTimeEnd: this.searchForm.time[1],
        siteId: this.searchForm.siteId,
      };
      let val = `%${this.searchForm.keyword}%`;
      obj[this.searchForm.type] = val;

      let res = await getEvaluateList({
        ...obj,
        ...this.searchForm2,
        ...form,
      });
      if (res.data.code == 1) {
        return res.data.data;
      } else {
        return {
          data: [],
          total: 0,
        };
      }
    },

    // 获取表格数据
    async getEvaluateList(form = {}) {
      this.loading = true;
      let { data, total, dict } = await this.getData(form);
      data.forEach((v) => {
        v.pjTime = this.$moment(v.pjTime).format("YYYY-MM-DD HH:mm:ss");
      });
      this.tableData = data;
      this.total = total;
      this.dict = dict;
      this.loading = false;
    },

    // 获取站点部门
    async getDepartment() {
      let res = await getDepartment({
        page: 1,
        size: -1,
        siteId: this.searchForm.siteId,
      });
      if (res.data.code == 1) {
        let { data } = res.data.data;
        this.deptList = data;
      }
    },

    // 获取大厅
    async getHall() {
      let res = await getHall({
        page: 1,
        size: -1,
        siteId: this.searchForm.siteId,
      });
      if (res.data.code == 1) {
        let { data } = res.data.data;
        this.hallList = data;
      }
    },

    checkDetails(row) {
      let data = this.$cloneDeep(row);
      this.detailsInfo = data;
      this.show = true;
    },
    handleSelectionChange(rows) {
      this.selectionRows = rows;
    },
    handleSearch() {
      this.current = 1;
      this.$clearSelection("MyTable");
      this.getEvaluateList();
    },
    // 导出表格
    exportExcel() {
      this.exportLoading = true;
      let table = this.column.filter((v) => v.prop);
      let tHeader = table.map((v) => v.label);
      let filterVal = table.map((v) => v.prop);
      if (this.selectionRows.length) {
        let data = this.$cloneDeep(this.selectionRows);
        export2Excel(
          tHeader,
          filterVal,
          data,
          "评价数据报表" + this.$moment().format("YYYYMMDDHHmmss")
        );
      } else {
        dataSection(this.getData, {}, (data) => {
          if (!data.length) {
            this.$message.warning("暂无数据");
            return;
          }
          data.forEach((v) => {
            v.pjTime = this.$moment(v.pjTime).format("YYYY-MM-DD HH:mm:ss");
          });
          export2Excel(
            tHeader,
            filterVal,
            data,
            "评价数据报表" + this.$moment().format("YYYYMMDDHHmmss")
          );
        });
      }
      this.exportLoading = false;
    },
  },
};
</script>

<style lang="less" scoped>
.take-total-num {
  color: var(--primary);
  font-weight: 600;
}
:deep(.el-form--inline) {
  display: flex;
  align-items: center;
  .el-form-item {
    margin-bottom: 0px;
  }
}
.el-icon-d-arrow-right {
  transform: rotate(90deg);
}
</style>