spfm-market-front/src/pages/main/sati/mobileList.vue

<template>
  <div class="container">
    <fullscreen :fullscreen.sync="fullscreen" class="container-box">
      <div class="titbox">
        <h2 class="font-ui">手机客户满意度列表</h2>
        <div>
          <i class="el-icon-refresh" @click="iconCli(1)"></i>
          <i class="el-icon-full-screen" @click="iconCli(2)"></i>
          <!--                    <i class="el-icon-folder-opened"></i>-->
          <!--                    <i class="el-icon-view"></i>-->
          <!--                    <i class="el-icon-more"></i>-->
        </div>
      </div>
      <div class="search">
        <mySearch :searchList="searchList" @searchInfo="searchInfo"></mySearch>
        <div>
          <el-button size="medium" type="primary" @click="userImport"
            >满意度导入</el-button
          >
          <el-button size="medium" type="primary" @click="exportsExcel"
            >导出</el-button
          >
          <el-button
            size="medium"
            v-if="deleteList.length > 0"
            type="primary"
            @click="deleteOther"
            >删除</el-button
          >
        </div>
      </div>
      <div class="tabbox">
        <el-table
          height="calc(100% - 40px)"
          v-loading="loading"
          class="com-table"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          size="small"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            align="center"
            prop="area"
            label="区域"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="time"
            show-overflow-tooltip
            label="期数"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="operator"
            show-overflow-tooltip
            label="运营商"
            width="70"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="allnum"
            show-overflow-tooltip
            label="总计"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="total"
            show-overflow-tooltip
            label="整体"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="voice"
            show-overflow-tooltip
            label="语音通话"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="internet"
            show-overflow-tooltip
            label="手机上网"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="rule"
            show-overflow-tooltip
            width="100"
            label="资费规则清晰"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="speedy"
            show-overflow-tooltip
            label="套餐办理便捷"
            width="100"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="adapter"
            show-overflow-tooltip
            label="套餐适配"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="bill"
            show-overflow-tooltip
            label="账单服务"
          >
          </el-table-column>

          <el-table-column
            align="center"
            prop="publicity"
            show-overflow-tooltip
            label="业务宣传"
          >
          </el-table-column>

          <el-table-column
            align="center"
            prop="remind"
            show-overflow-tooltip
            label="提醒服务"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="hotline"
            show-overflow-tooltip
            label="热线服务"
          >
          </el-table-column>
        </el-table>
        <el-pagination
          class="pageBox"
          @current-change="currchange"
          layout="prev, pager, next"
          background
          :total="total"
        >
        </el-pagination>
      </div>
    </fullscreen>
  </div>
</template>
<script>
import mySearch from "../../../components/search";
import $ from "jquery";
export default {
  components: {
    mySearch,
  },
  data() {
    return {
      fullscreen: false,
      total: 0,
      pageSize: 1,
      tableData: [],
      searchList: [
        {
          type: "input",
          tit: "运营商",
          value: "",
          width: "32%",
          options: [],
        },
        {
          type: "input",
          tit: "区域",
          value: "",
          width: "32%",
          options: [],
        },
        {
          type: "input",
          tit: "期数",
          value: "",
          width: "32%",
          options: [],
        },
      ],
      params: {
        area: "",
        operator: "",
        time: "",
      },
      loading: false,
      deleteList: [],
    };
  },
  methods: {
    deleteOther() {
      let arr = [];
      if (this.deleteList.length > 0) {
        this.deleteList.map((item) => {
          arr.push(item.id);
        });
      }
      console.log(arr.join(','));
    },
    exportsExcel() {
      // 获取table的html内容了，里面包括标签的class或id等。
      let htmlStr = "";
      const innerDow = $(".el-table__body-wrapper tbody").html();
      const tableHeader = `<table><tr><td></td>
      <td>区域</td><td>期数</td><td>运营商</td><td>总计</td>
      <td>整体</td><td>语音通话</td><td>手机上网</td><td>资费规则清晰</td>
       <td>套餐办理便捷</td><td>套餐适配</td><td>账单服务</td><td>业务宣传</td>
       <td>提醒服务</td><td>热线服务</td>
      </tr>`;
      htmlStr = tableHeader + innerDow + "</table>";
      // 生成Excel
      const excelBlob = new Blob([htmlStr], {
        type: "application/vnd.ms-excel",
      });
      // 通过a标签下载到本地了，下载前可以利用a标签的download属性命名
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        let blob = new Blob([htmlStr], {
          type: "application/vnd.ms-excel",
        });
        window.navigator.msSaveOrOpenBlob(blob, "满意度内容.xlsx");
      } else {
        /* 火狐谷歌的文件下载方式 */
        var blob = new Blob([htmlStr]);
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(blob);
        downloadElement.href = href;
        downloadElement.download = "满意度内容.xlsx";
        document.body.appendChild(downloadElement);
        downloadElement.click();
        document.body.removeChild(downloadElement);
        window.URL.revokeObjectURL(href);
      }
    },
    handleSelectionChange(val) {
      this.deleteList = val;
    },
    defaultMenu(path, name) {
      let defaults = this.$store.state.tabList.filter((item) => {
        if (item.rountPath == path) {
          return item;
        }
      });
      if (defaults.length == 1) {
        return;
      }
      let params = {
        children: "",
        name: name,
        rountPath: path,
        target: "_self",
      };
      let set = new Set([...this.$store.state.tabList, params]);
      this.$store.commit("setDefaultActive", path);
      this.$store.commit("setTabList", Array.from(set));
    },
    userImport() {
      this.$router.push("/importSat");
      this.defaultMenu("/importSat", "客户满意度导入");
    },
    //搜索数据
    searchInfo(v) {
      this.params = {};
      v[0] ? (this.params.operator = v[0]) : "";
      v[1] ? (this.params.area = v[1]) : "";
      v[2] ? (this.params.time = v[2]) : "";
      this.getList(this.params, this.pageSize);
    },
    //获取列表
    getList(v, n) {
      this.loading = true;
      this.pageSize = n;
      this.$http({
        url: "/satisfy/sati/getMobileSatisfy",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          page: '{"pageNo":"' + n + '","pageSize":"10"}',
        },
        data: v,
      }).then((res) => {
        this.loading = false;
        this.tableData = res.data.data;
        this.total = res.data.totalRecord;
      });
    },
    //功能栏
    iconCli(v) {
      if (v === 1) {
        this.getList(this.params, this.pageSize);
      }
      if (v === 2) {
        this.fullscreen = !this.fullscreen;
      }
    },
    // 分页
    currchange(v) {
      this.pageSize = v;
      this.getList(this.params, this.pageSize);
    },
  },
  mounted() {
    this.getList(this.params, this.pageSize);
  },
};
</script>
<style>
.el-input__suffix {
  cursor: pointer;
}
</style>
<style scoped lang="scss">
.titbox {
  div {
    float: right;

    i {
      font-size: 22px;
      margin-left: 20px;
      cursor: pointer;
    }
  }
}

.tabbox {
  margin-top: 15px;
}

.pageBox {
  text-align: right;
  margin-top: 10px;
}
</style>