spfm-market-front/src/pages/main/performance/reply.vue

<template>
  <div>
    <div class="simple-container">
      <simple-form
        :form="table_form"
        :handle="table_handle"
        @search="handleSearch"
        @download="handleDownload"
      ></simple-form>
      <simple-table
        :list="table_list"
        :config="table_config"
        :loading="table_loading"
        :handle-row="table_handle_row"
      ></simple-table>
      <!-- <simple-pagination
        :page="page"
        :total="total"
        @change="handleChange"
      ></simple-pagination> -->
    </div>
  </div>
</template>

<script>
import simpleForm from "./components/form.vue";
import simpleTable from "./components/table.vue";
// import simplePagination from "./components/pagination.vue";
export default {
  components: {
    simpleTable,
    simpleForm,
    // simplePagination,
  },
  data() {
    return {
      page: 1,
      rows: 10,
      total: 0,
      table_loading: false,
      table_search: {},
      table_form: [
        {
          label: "统计月份",
          props: "time",
          type: "month",
        },
        // {
        //     label: "绩效类型",
        //     props: "performance_type",
        //     type: "select",
        //     dictionary: [
        //         {
        //             label: "部门绩效",
        //             value: "部门绩效",
        //         },
        //         {
        //             label: "员工绩效",
        //             value: "员工绩效",
        //         },
        //     ],
        // },
        // {
        //     label: "绩效分类",
        //     props: "performance_class",
        //     type: "select",
        //     dictionary: [
        //         {
        //             label: "GS",
        //             value: "GS",
        //         },
        //         {
        //             label: "KPI",
        //             value: "KPI",
        //         },
        //     ],
        // },
      ],
      table_list: [],
      table_handle: [
        {
          label: "导出",
          props: "download",
        },
      ],
      table_handle_row: [],
      table_config: [
        {
          label: "科室名称",
          props: "dept",
        },
        {
          label: "科室经理",
          props: "loginName",
        },
        {
          label: "待办接收数",
          props: "number",
        },
        {
          label: "完成回复率",
          props: "percentageReply",
        },
        {
          label: "超期率",
          props: "percentageTimeOut",
        },
        {
          label: "累计超期时间",
          props: "day",
        },
      ],
    };
  },
  methods: {
    handleInit(data) {
      this.table_loading = true;
      this.$http({
        url: "/market/CMKIssued/CMKIssuedReplyStatistics",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: data,
      }).then(({ data }) => {
        //   console.log(res,'data');
        // this.total = count;
        this.table_list = data;
        this.table_loading = false;
      });
      // const data = [];
      // let index = 0;
      // while (index < 10) {
      //     data.push({
      //         department_name: `科室${index}`,
      //         department_manager: `经理${index}`,
      //         received_umber: `${index}`,
      //         response_rate: `${index + 1}0`,
      //         overdue_rate: `50%`,
      //         cumulative_overtime: `3`,
      //     });
      //     index = index + 1;
      // }
    },
    handleDownload() {
      this.$http({
        url: "/market/CMKIssued/exportCMKIssuedReplyStatistics",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        responseType: "blob",
        data: {
          ...this.table_search,
          time: this.table_search.time ? this.$formatDate(this.table_search.time, "YYYY-MM") : '',
        },
      }).then((response) => {
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          let blob = new Blob([response.data], {
            type: "application/vnd.ms-excel",
          });
          let month = this.table_search.time ? this.$formatDate(this.table_search.time, "YYYY年MM月") : ''
          window.navigator.msSaveOrOpenBlob(
            blob,`${month}回复统计.xlsx`
          );
        } else {
          /* 火狐谷歌的文件下载方式 */
          var blob = new Blob([response.data]);
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob);
          downloadElement.href = href;
          let month = this.table_search.time ? this.$formatDate(this.table_search.time, "YYYY年MM月") : ''
          downloadElement.download =  `${month}回复统计.xlsx`;
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement);
          window.URL.revokeObjectURL(href);
        }
      });
        // this.$http({
        //   url: "/CMKIssued/exportCMKIssuedReplyStatistics",
        //   method: "post",
        //   headers: {
        //     "Content-Type": "application/json",
        //   },
        //   data: {
        //     ...this.table_search,
        //     time: this.table_search.time ? this.table_search.time : "",
        //   },
        //   responseType: "blob", // 解决下载的文件乱码空白等问题
        // }).then(({ data }) => {
        //   console.log(data,'data');
        //   let url = window.URL.createObjectURL(new Blob([data]));
        //   let a = document.createElement("a");
        //   a.setAttribute("href", url);
        //   //   a.setAttribute('download', scope.row.fileName)
        //   a.click();
        // });
      console.log("我下载了");
    },
    handleSearch(data) {
      let obj = {
        ...data,
        time: data.time
          ? this.$formatDate(data.time, "YYYY-MM")
          : "",
      };
      console.log(obj,'obj');
      this.table_search = data;
      this.handleReset();
      this.handleInit({ ...obj });
    },
    handleChange(page) {
      this.page = page;
      this.handleInit({ ...this.table_search });
    },
    handleReset() {
      this.page = 1;
    },
  },
  mounted() {
    this.handleInit({ time: "" });
  },
};
</script>

<style></style>