vue+elementUI实现导出excel功能+批量导入功能

首先：npm安装一些插件
1>导入插件 npm install xlsx
2>导出插件elementui默认自带

 

<!-- 1对1管理 / 套餐管理 -->
<template>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <label style="padding-left:10px;">保单管理</label>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-input placeholder="投保单号" v-model="form.orderID" class="mr10" style="width:200px;"></el-input>
        <el-input
          placeholder="投保人姓名"
          v-model="form.username"
          maxlength="11"
          class="mr10"
          style="width:200px;"
        ></el-input>
        <el-input
          placeholder="被保人姓名"
          v-model="form.roleName"
          maxlength="11"
          class="mr10"
          style="width:200px;"
        ></el-input>
        <el-date-picker
          v-model="form.createtime"
          type="datetimerange"
          style="margin-right:10px;"
          range-separator="至"
          start-placeholder="发布时间"
          end-placeholder="截止时间"
        ></el-date-picker>
      </div>
      <div class="handle-box">
        <el-select
          placeholder="规划师选择"
          v-if="depID==1"
          class="handle-select mr10"
          v-model="form.planners"
        >
          <el-option
            v-for="item in planList"
            :key="item.saleId"
            :label="item.realName"
            :value="item.saleId"
          ></el-option>
        </el-select>
        <el-select placeholder="订单状态" class="handle-select mr10" v-model="form.status">
          <el-option v-for="item in startsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="handle-box">
        <el-button type="primary" icon="add" @click="searchData(1)">查询</el-button>
        <el-button type="primary" icon="add" @click="searchData(2)">重置</el-button>
        <el-button type="primary" icon="add" @click="searchData(3)">保单录入</el-button>
        <el-upload
          class="upload"
          action
          :multiple="false"
          :show-file-list="false"
          :drag="false"
          :http-request="httpRequest"
        >
          <el-button slot="trigger" size="small" type="primary">导入</el-button>
        </el-upload>
        <el-button
          type="primary"
          icon="add"
          v-if="depID==1"
          @click="handleDownload()"
          v-loading="loading"
        >下载</el-button>
      </div>
      <div class="handle-box">
        <p>统计：共 {{page.total}} 条数据</p>
      </div>
      <el-table
        tooltip-effect="dark"
        :data="tableData"
        @selection-change="handleSelectionChange"
        border
        align="center"
      >
        <el-table-column type="selection" label="选择" width="55"></el-table-column>
        <el-table-column label="序号" align="center" width="50px">
          <template slot-scope="scope">{{(page.pageNum-1)* page.pageSize + scope.$index+1}}</template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120px">
          <template slot-scope="scope">
            <el-button
              type="edit"
              v-if="scope.row.remark=='手动录入'"
              @click="handUpdate(scope.$index, scope.row)"
            >编辑</el-button>
            <!-- <el-button type="edit" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
          </template>
        </el-table-column>
        <el-table-column prop label="投保单号" align="center" width="180px">
          <template slot-scope="scope">{{scope.row.insuranceNo || '-'}}</template>
        </el-table-column>
        <el-table-column prop label="产品" align="center" width="220px">
          <template slot-scope="scope">{{scope.row.productName || '-'}}</template>
        </el-table-column>
        <!-- <el-table-column prop label="用户性别" align="center">
          <template
            slot-scope="scope"
          >{{scope.row.buyerSex == 1 ? '男' : scope.row.buyerSex == 2 ? '女' : '-'}}</template>
        </el-table-column>-->
        <el-table-column prop label="投保人" align="center" width="100px">
          <template slot-scope="scope">{{scope.row.policyHolderName || '-'}}</template>
        </el-table-column>
        <el-table-column prop label="被保人" align="center" width="110px">
          <template slot-scope="scope">{{scope.row.insuredName || '-'}}</template>
        </el-table-column>
        <el-table-column prop label="订单状态" align="center" width="90px">
          <template slot-scope="scope">
            <div v-if="scope.row.payStatus==0||scope.row.payStatus==2||scope.row.payStatus==4">未支付</div>
            <div v-if="scope.row.payStatus==1">
              <!-- issueStatus出单状态 0：未出单 1：已出单 2：延时出单 3：取消出单 4：出单失败 -->
              <div v-if="scope.row.issueStatus==1||scope.row.issueStatus==2">已出单</div>
              <!-- effectiveStatus生效（退保）状态 0：未生效 1：已生效 2：退保中 3：已退保 4：支付成功核保异常 -->
              <div v-if="scope.row.effectiveStatus==3">已退保</div>
            </div>
            <!-- i云保policyStatus 3已投保 9 已退保 -->
            <div v-if="scope.row.policyStatus==9">已退保</div>
            <div v-if="scope.row.policyStatus==3">已投保</div>
          </template>
        </el-table-column>
        <el-table-column prop label="保费(元)" align="center" width="120px">
          <template slot-scope="scope">
            <time v-if="scope.row.payAmount == 0">{{scope.row.payAmount}}</time>
            <time v-else>{{scope.row.payAmount || '-'}}</time>
          </template>
        </el-table-column>
        <el-table-column prop label="服务费(元)" v-if="depID==1" align="center" width="180px">
          <template slot-scope="scope">{{ scope.row.income|| '-'}}</template>
        </el-table-column>
        <el-table-column prop label="规划师" v-if="depID==1" align="center" width="120px">
          <template slot-scope="scope">{{scope.row.plannersName|| '-'}}</template>
        </el-table-column>
        <el-table-column prop label="平台" align="center">
          <template slot-scope="scope">{{scope.row.platform||'-'}}</template>
        </el-table-column>
        <el-table-column prop label="客户ID" align="center" width="90px">
          <template slot-scope="scope">{{scope.row.policyHolderId || '-'}}</template>
        </el-table-column>
        <el-table-column prop label="创建时间" align="center" width="150px">
          <template slot-scope="scope">{{scope.row.createTime || '-'}}</template>
        </el-table-column>
        <el-table-column prop label="支付时间" align="center" width="150px">
          <template slot-scope="scope">{{scope.row.payTime || '-'}}</template>
        </el-table-column>
        <el-table-column prop label="备注" align="center" width="90px">
          <template slot-scope="scope">{{scope.row.remark || '-'}}</template>
        </el-table-column>
      </el-table>
      <!-- 底部表格操作 -->
      <div class="handle-box" style="margin-top:15px;">
        <el-button type="primary" icon="add" @click="moreDistribution" class="t10">保单归属</el-button>
      </div>
    </div>
    <!-- 分页器 -->
    <div class="page">
      <pagination :page="page"></pagination>
    </div>
    <!-- 编辑弹出层 -->
    <el-dialog title="保单归属" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="form">
        <el-form-item label="被保人归属">
          <!-- <el-select v-model="form.incrId" placeholder="请选择">
            <el-option
              v-for="item in policyList"
              :key="item.incrId"
              :label="item.incrId"
              :value="item.incrId"
            ></el-option>
          </el-select>-->
          <el-select v-model="form.incrId" filterable placeholder="请选择">
            <el-option
              v-for="item in policyList"
              :key="item.incrId"
              :label="item.incrId"
              :value="item.incrId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            style="position: relative;
    display: inline-block;
    width: 70%;
    left: 38px;
    vertical-align: bottom;
    font-size: 14px;"
            type="textarea"
            :rows="2"
            v-if="form.remark!='手动录入'"
            placeholder="请输入内容"
            v-model="form.remark"
          ></el-input>
          <label
            style="position: relative;
    display: inline-block;
    width: 70%;
    left: 38px;
    vertical-align: bottom;
    font-size: 14px;"
            v-if="form.remark=='手动录入'"
          >手动录入</label>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureName">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import config from "../../common/config";
import pagination from "../../common/Pagination";
import ExportExcel from "../Export2Excel";
import XLSX from "xlsx";
export default {
  name: "CustodManger",
  components: { ExportExcel, pagination },
  data() {
    return {
      tableData: [],
      toLead: false,
      dialogFormVisible: false,
      multipleSelection: [],
      downloadLoading: false,
      depID: "",
      policyList: [],
      members: [],
      loading: false,
      fileList: [],
      form: {
        planListName: "",
        orderID: "",
        username: "",
        roleName: "",
        createtime: "",
        planners: "",
        incrId: "",
        status: "",
        remark: ""
      },
      value1: "",
      planList: [],
      startsList: [
        {
          id: 1,
          name: "未支付"
        },
        {
          id: 2,
          name: "已出单"
        },
        {
          id: 3,
          name: "已退保"
        }
      ],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        handler: num => {
          this.page.pageNum = num;
          this.initData();
        }
      }
    };
  },
  created() {
    // this.searchForm.status = "支付成功";
    //  this.getmMember();
    // this.getPlanner();
    // this.initData();
    this.$forceUpdate();
    // this.getPlanner();
    // this.getpolicyHolder();
  },

  mounted() {
    this.getmMember();
    this.initData();
    this.getPlanner();
    this.getpolicyHolder();
    this.$forceUpdate();
  },

  methods: {
    // 全选按钮
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    httpRequest(e) {
      let file = e.file; // 文件信息
      console.log("e: ", e);
      console.log("file: ", e.file);
       var realname = "";
          var planners = "";
           var deptId = localStorage.getItem("deptId");
          if (deptId!=null&&deptId == 3) {
            realname = localStorage.getItem("realname");
            planners = localStorage.getItem("saleIds");
          } else {
            realname = "";
          }
          console.log("realname",realname,"planners",planners);
      if (!file) {
        // 没有文件
        return false;
      } else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
        // 格式根据自己需求定义
        this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
        return false;
      }

      const fileReader = new FileReader();
      fileReader.onload = ev => {
        try {
          const data = ev.target.result;
          const workbook = XLSX.read(data, {
            type: "binary" // 以字符编码的方式解析
          });
          const exlname = workbook.SheetNames[0]; // 取第一张表
          console.log("exlname", workbook.Sheets[exlname]);
          const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]); // 生成json表格内容
          // 将 JSON 数据挂到 data 里
          console.log("exl", exl[0]);
          if (
            workbook.Sheets[exlname].A1.h != "投保单号" ||
            workbook.Sheets[exlname].B1.h != "产品" ||
            workbook.Sheets[exlname].C1.h != "投保人" ||
            workbook.Sheets[exlname].D1.h != "被保人" ||
            workbook.Sheets[exlname].E1.h != "订单状态" ||
            workbook.Sheets[exlname].F1.h != "保费" ||
            workbook.Sheets[exlname].G1.h != "服务费" ||
            workbook.Sheets[exlname].H1.h != "客户ID" ||
            workbook.Sheets[exlname].I1.h != "平台" ||
            workbook.Sheets[exlname].J1.h != "规划师" ||
            workbook.Sheets[exlname].K1.h != "支付时间" ||
            workbook.Sheets[exlname].L1.h != "创建时间" ||
            workbook.Sheets[exlname].M1.h != "备注" ||
            workbook.Sheets[exlname].N1.h != "险种"
          ) {
            this.$message.error("该表格格式不正确");
            return;
          }
          var formdate = {};
          for (var i in exl) {
            exl[i].创建时间 = this.formatDate(exl[i].创建时间, "-");
            exl[i].支付时间 = this.formatDate(exl[i].支付时间, "-");
            formdate = {
              // 保险单号
              insuranceNo: exl[i].投保单号,
              // 产品名称
              productName: exl[i].产品,
              // 投保人姓名
              policyHolderName: exl[i].投保人,
              // 被保人姓名
              insuredName: exl[i].被保人,
              // 订单状态
              issueStatus: 1,
              payStatus: 1,
              // 保费<单位为分>
              payAmount: parseInt(exl[i].保费) * 100,
              // 服务费
              income: parseInt(exl[i].服务费) * 100,
              // 客户ID
              policyHolderId: exl[i].客户ID,
              // 平台
              platform: exl[i].平台,
              // 规划师名称
              plannersName: exl[i].规划师,
              // 创建时间
              createTime: exl[i].创建时间,
              //支付时间
              payTime: exl[i].支付时间,
              // 备注
              remark: exl[i].备注,
              plantType: exl[i].险种,
               planners:planners,
               plannersName: realname,
            };
            console.log("111======》", formdate);
            /**保单批量录入 */
            this.$axios({
              url: config.policyInfoID,
              method: "post",
              headers: { "Content-Type": "application/json" },
              data: formdate
            }).then(data => {
              if (data.data.code == 200) {
                this.$message.success("保单录入成功");
                this.initData();
              } else {
                this.$message.error(data.data.message);
              }
            });
          }
          return;
     

          this.tableData = exl;
          // document.getElementsByName('file')[0].value = '' // 根据自己需求，可重置上传value为空，允许重复上传同一文件
        } catch (e) {
          console.log("出错了：：");
          return false;
        }
      };
      fileReader.readAsBinaryString(file);
    },
    /**转化时间格式 */
    formatDate(numb, format) {
      const time = new Date((numb - 1) * 24 * 3600000 + 1);
      time.setYear(time.getFullYear() - 70);
      const year = time.getFullYear() + "";
      const month = time.getMonth() + 1 + "";
      const date = time.getDate() - 1 + "";
      if (format && format.length === 1) {
        return year + format + month + format + date + " " + "00:00:00";
      }
      return (
        year +
        (month < 10 ? "0" + month : month) +
        (date < 10 ? "0" + date : date)
      );
    },
    /**
     * {sureName}
     * 订单归属方法
     */
    sureName() {
      var that = this;
      var saleIds = "";
      var name = "";
      var datas = {};
      this.getpolicyHolder();
      for (var i in this.multipleSelection) {
        console.log("111", that.multipleSelection[i]);
        for (var k in that.policyList) {
          if (that.form.incrId == JSON.stringify(that.policyList[k].incrId)) {
            saleIds = that.policyList[k].saleId;
            name = that.policyList[k].realName;
          }
        }
        if (that.multipleSelection[i].remark == "手动录入") {
          datas = {
            policyHolderId: that.form.incrId,
            issueStatus: 1,
            payStatus: 1,
            //  plannersName:name,
            payAmount: parseInt(that.multipleSelection[i].payAmount) * 100,
            planners: saleIds
          };
        } else {
          datas = {
            remark: that.form.remark,
            policyHolderId: that.form.incrId,
            planners: saleIds,
            // plannersName:name,
            issueStatus: that.multipleSelection[i].issueStatus,
            payStatus: that.multipleSelection[i].payStatus,
            effectiveStatus: that.multipleSelection[i].payStatus
          };
        }
        that
          .$axios({
            url: config.policyInfoID + that.multipleSelection[i].id,
            method: "put",
            headers: { "Content-Type": "application/json" },
            data: datas
          })
          .then(data => {
            if (data.data.code == 200) {
              console.log("修改被保人归属===>", data);
              // this.policyList = data.data.data.content;
              that.initData();
              this.$forceUpdate();
              this.dialogFormVisible = false;
            } else {
              that.$message.error(data.data.message);
            }
          });
      }

      // policyInfoID
    },
    // 开启批量分配按钮
    moreDistribution() {
      if (this.multipleSelection.length > 0) {
        for (var i in this.multipleSelection) {
          if (
            this.multipleSelection[i].remark == "手动录入" &&
            this.multipleSelection.length > 1
          ) {
            this.form.remark = "手动录入";
            this.$message.error("您选择的列表中包含两种状态，请重新选择!");
          } else if (
            this.multipleSelection[i].remark == "手动录入" &&
            this.multipleSelection.length == 1
          ) {
            this.form.remark = "手动录入";
            this.dialogFormVisible = true;
          } else if (
            this.multipleSelection[i].remark != "手动录入" &&
            this.multipleSelection.length == 1
          ) {
            this.form.remark = "";
            this.dialogFormVisible = true;
          }
        }
        console.log("this.multipleSelection.length", this.multipleSelection);
      } else {
        this.$message.info("请您先选择分配项哦！");
      }
    },
    /**请求投保人接口 */
    getpolicyHolder() {
      this.$axios({
        url: config.policyHolder,
        method: "post",
        headers: { "Content-Type": "application/json" },
        data: {
          pageOrder: {
            limit: 1000,
            page: 1
          }
        }
      }).then(data => {
        if (data.data.code == 200) {
          console.log("投保人接口===>", data);
          this.policyList = data.data.data.content;
          this.$forceUpdate();
        } else {
          this.$message.error(data.data.message);
        }
      });
    },
    /**
     * handleDownload{导出Excel方法}
     * param{this.tValue}数据
     */
    handleDownload() {
      var that = this;
      this.downloadLoading = true;
      this.loading = true;
      for (var i in this.tableData) {
        this.tableData[i].ids = parseInt(i) + 1;
        if (
          this.tableData[i].payStatus == 0 ||
          this.tableData[i].payStatus == 2 ||
          this.tableData[i].payStatus == 4
        ) {
          this.tableData[i].startName = "未支付";
        } else if (this.tableData[i].payStatus == 1) {
          if (
            this.tableData[i].issueStatus == 1 ||
            this.tableData[i].issueStatus == 2
          ) {
            this.tableData[i].startName = "已出单";
          }
          if (this.tableData[i].effectiveStatus == 3) {
            this.tableData[i].startName = "已退保";
          }
        } else if (this.tableData[i].policyStatus == 9) {
          this.tableData[i].startName = "已退保";
        } else if (this.tableData[i].policyStatus == 3) {
          this.tableData[i].startName = "已投保";
        }
        console.log("this.tableData1", this.tableData[i].children);
      }
      if (this.tableData.length == 0) {
        this.$message.info("请选择项目下载报表!");
        return;
      }
      import("../Export2Excel").then(excel => {
        const data = this.formatJson(
          [
            "ids",
            "insuranceNo",
            "productName",
            "policyHolderName",
            "insuredName",
            "startName",
            "payAmount",
            "income",
            "planners",
            "platform",
            "policyHolderId",
            "createTime",
            "remark"
          ],
          this.tableData
        );
        excel.export_json_to_excel({
          header: [
            "序号",
            "投保单号",
            "产品",
            "投保人",
            "被保人",
            "订单状态",
            "保费(元)",
            "服务费(元)",
            "客户ID",
            "平台",
            "规划师",
            "创建时间",
            "备注"
          ],
          data,
          filename: "保单列表",
          autoWidth: this.autoWidth,
          bookType: this.bookType
        });
        this.downloadLoading = false;
        this.loading = false;
      });
    },
    /**查询规划师 */
    getPlanner() {
      //
      this.$axios({
        url: config.getSelplannersUrl,
        method: "post",
        headers: { "Content-Type": "application/json" },
        data: {
          pageOrder: {
            limit: 100,
            page: 1
          }
        }
      }).then(data => {
        if (data.data.code == 200) {
          this.planList = data.data.data.content;
        } else {
          this.$message.error(data.data.message);
        }
      });
    },
    getmMember() {
      // getSelplannersUrl
      var ms_username = localStorage.getItem("ms_username");
      console.log("ms_username", ms_username);
      console.log();
      this.$axios({
        url: config.sysDeptMember,
        method: "post",
        headers: { "Content-Type": "application/json" },
        data: {
          query: [
            {
              field: "username",
              value: ms_username
            }
          ]
        }
      }).then(data => {
        if (data.data.code == 200) {
          this.depID = data.data.data.content[0].deptId;
          if (
            this.depID == null ||
            this.depID == undefined ||
            this.depID == ""
          ) {
            this.depID = 1;
          }
          console.log("data/", this.depID);
          return;
          this.memberList = data.data.data.content;
        } else {
          this.$message.error(data.data.message);
        }
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          
          return v[j];
        })
      );
    },
    // 查询 重置
    searchData(type) {
      //  1 查询 2 重置
      switch (type) {
        case 1:
          let searchArr = [];
          if (this.form.orderID != "") {
            searchArr.push({
              field: "insuranceNo",
              value: this.form.orderID
            });
          }
          if (this.form.username != "") {
            searchArr.push({
              field: "policyHolderName",
              value: this.form.username
            });
          }
          if (this.form.roleName != "") {
            searchArr.push({
              field: "insuredName",
              value: this.form.roleName
            });
          }
          if (this.form.planners != "") {
            searchArr.push({
              field: "planners",
              value: JSON.stringify(this.form.planners)
            });
          }
          if (this.form.status != "") {
            console.log("this.form.status", this.form.status);
            if (this.form.status == 1) {
              searchArr.push({
                field: "payStatus",
                value: 0
              });
            } else if (this.form.status == 2) {
              searchArr.push({
                field: "payStatus",
                value: 1
              });
            } else {
              searchArr.push({
                field: "effectiveStatus",
                value: this.form.status
              });
            }
          }
          this.initData(searchArr);
          break;
        case 2:
          for (let k in this.form) {
            this.form[k] = "";
          }
          // this.form.status = "支付成功";
          this.initData();
          break;
        case 3:
          this.$router.push({
            path: "/Policyentry"
          });
          break;
      }
    },
    /**编辑 */
    handUpdate(index, row) {
      console.log(index, row);
      this.$router.push({
        path: "/policyentry",
        query: {
          id: row.id
        }
      });
    },
    // 初始化页面11
    initData(search) {
      var datas = {};
      var saleIds = localStorage.getItem("saleIds");
      var realname = localStorage.getItem("realname");
      var deptId = localStorage.getItem("deptId");
      console.log("deptId", deptId);
      if (deptId != null && deptId == 3) {
        search = [];
        if (saleIds != null && saleIds != "") {
          search.push({
            field: "planners",
            value: saleIds
          });
        }
      }
      if (this.form.createtime != "") {
        // startdate.substring(0,10);
        var startDates = new Date(this.form.createtime[0]).toJSON();
        var startTimes = new Date(+new Date(startDates) + 8 * 3600 * 1000)
          .toISOString()
          .replace(/T/g, " ")
          .replace(/\.[\d]{3}Z/, "");
        var endDates = new Date(this.form.createtime[1]).toJSON();
        var endTimes = new Date(+new Date(endDates) + 8 * 3600 * 1000)
          .toISOString()
          .replace(/T/g, " ")
          .replace(/\.[\d]{3}Z/, "");
        datas.dateParam = {
          endDate: endTimes,
          startDate: startTimes
        };
      }
      if (search) {
        // datas={};
        datas.query = search;
        this.$axios({
          url: config.getPolicyInfo,
          method: "post",
          headers: { "Content-Type": "application/json" },
          data: datas
        }).then(data => {
          if (data.data.code == 200) {
            for (var i in data.data.data.content) {
              if (data.data.data.content[i].income > 0) {
                data.data.data.content[i].income = (
                  data.data.data.content[i].income / 100
                ).toFixed(2);
              }
              if (data.data.data.content[i].payAmount > 0) {
                data.data.data.content[i].payAmount = (
                  data.data.data.content[i].payAmount / 100
                ).toFixed(2);
              }
            }

            for (var j in this.planList) {
              for (var i in data.data.data.content) {
                if (
                  data.data.data.content[i].planners == this.planList[j].saleId
                ) {
                  data.data.data.content[i].plannersName = this.planList[
                    j
                  ].realName;
                }
              }
            }
            this.tableData = data.data.data.content;
            console.log("数据111111", data.data.data);
            this.page.total = data.data.data.totalElements;
          } else {
            this.tableData = [];
          }
        });
      } else {
        this.$axios({
          url: config.getPolicyInfo,
          method: "post",
          headers: { "Content-Type": "application/json" },
          data: {
            pageOrder: {
              limit: this.page.pageSize,
              page: this.page.pageNum
            }
          }
        }).then(data => {
          if (data.data.code == 200) {
            console.log("222222", data);
            for (var i in data.data.data.content) {
              if (data.data.data.content[i].income > 0) {
                data.data.data.content[i].income = (
                  data.data.data.content[i].income / 100
                ).toFixed(2);
              }
              if (data.data.data.content[i].payAmount > 0) {
                data.data.data.content[i].payAmount = (
                  data.data.data.content[i].payAmount / 100
                ).toFixed(2);
              }
              for (var j in this.planList) {
                if (
                  data.data.data.content[i].planners == this.planList[j].saleId
                ) {
                  data.data.data.content[i].plannersName = this.planList[
                    j
                  ].realName;
                }
              }
              this.tableData = data.data.data.content;
              this.page.total = data.data.data.totalElements;
            }
          } else {
            this.tableData = [];
          }
        });
      }
    }
  }
};
</script>
<style>
@import url("../../common/style.css");
.handle-box {
  margin-bottom: 20px;
}
.el-button--small,
.el-button--small.is-round {
  padding: 7px 14px;
}
.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.upload {
  display: inline-block !important;
  position: relative;
  top: 13px;
  margin-left: 1px;
  margin-right: 1px;
}
.el-upload--text {
  /* background-color: #fff; */
  border: 0px !important;
  border-radius: 0px !important;
  display: inline-block !important;
  /* -webkit-box-sizing: border-box; */
  width: 80px !important;
  height: 30px !important;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
</style>