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

<template>
  <div class="container mc-box">
    <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 style="overflow: hidden">
        <div class="search" style="float: left; width: 50%">
          <mySearch
            :searchList="searchList"
            @searchInfo="searchInfo"
          ></mySearch>
        </div>
        <el-upload
          style="float: left; width: 50%; margin-top: 20px"
          class="upload-demo"
          action="http://114.215.71.182:29600/spfm/satisfy/sati/inputMobileSatisfys"
          :headers="headers"
          :before-remove="beforeRemove"
          :before-upload="beforeUploadForm"
          :http-request="fileChange"
          :show-file-list="false"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </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%"
        >
          <el-table-column
            align="center"
            prop="time"
            label="期数"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="status"
            show-overflow-tooltip
            label="状态"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="insertt"
            show-overflow-tooltip
            label="导入时间"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="calculate"
            show-overflow-tooltip
            label="计算时间"
          >
          </el-table-column>
          <el-table-column align="center" prop="hotline" label="操作">
            <template slot-scope="scope">
              <el-button
                :disabled="scope.row.status == '已计算'"
                size="mini"
                type="danger"
                plain
                @click="computedScoures(scope.row)"
                >计算</el-button
              >

              <el-button
                size="mini"
                @click="exportExcel(scope.row)"
                plain
                type="success"
              >
                导出
              </el-button>
            </template>
          </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";

export default {
  components: {
    mySearch,
  },
  data() {
    return {
      headers: {
        agileauthtoken: sessionStorage.agileauthtoken.replace(/"/g, ""),
      },
      json_fields: {
        期数: "time",
        状态: "status",
        导入时间: "insertt",
        计算时间: "calculate",
      },
      fullscreen: false,
      total: 0,
      pageSize: 1,
      tableData: [],
      searchList: [
        {
          type: "input",
          tit: "期数",
          value: "",
          width: "100%",
          options: [],
        },
      ],
      params: {
        time: "",
      },
      loading: false,
      fileList: [],
      fileName: "",
    };
  },
  methods: {
    exportExcel(val) {
      var that = this;
      require.ensure([], () => {
        const { export_json_to_excel } = require("../vendor/Export2Excel");
        const tHeader = ["期数", "状态", "导入时间", "计算时间"]; // 导出的表头名
        const filterVal = ["time", "status", "insertt", "calculate"]; // 导出的表头字段名
        const list = [val];
        const data = that.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, `手机客户满意度Excel`); // 导出的表格名称，根据需要自己命名
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    beforeUploadForm(file) {
      // 验证文件类型
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension = testmsg === "xlsx";
      if (!extension) {
        this.$message({
          message: "上传文件只能是excel格式!",
          duration: 1000,
          showClose: true,
          type: "warning",
        });
      }
      return extension;
    },

    // 提交文件
    fileChange(param, type) {
      let formData = new FormData();
      formData.append("file", param.file);
      formData.append("name", param.file.name);
      this.loading = true;
      this.$http({
        url: "/satisfy/sati/inputMobileSatisfys",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: formData,
      })
        .then((res) => {
          this.loading = false;
          this.getList(this.params, this.pageSize);
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    computedScoures(val) {
      this.loading = true;
      this.$http({
        url: "/satisfy/sati/satisfyCalculate",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: { time: val.time },
      }).then((res) => {
        this.loading = false;
        if (res.data.result == 0) {
          this.$message({
            message: res.data.desc,
            type: "success",
          });
          this.getList(this.params, this.pageSize);
        }
      });
    },
    //搜索数据
    searchInfo(v) {
      this.params = {};
      v[0] ? (this.params.time = v[0]) : "";
      this.getList(this.params, this.pageSize);
    },
    //获取列表
    getList(v, n) {
      this.loading = true;
      this.pageSize = n;
      this.$http({
        url: "/satisfy/sati/getSatisfyHisAll",
        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-upload-list {
  float: right;
}
.el-input__suffix {
  cursor: pointer;
}
.mc-box .el-upload {
  text-align: right;
}
</style>
<style scoped lang="scss">
.btn-default {
  display: inline;
  margin-left: 10px;
}
.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>