vue-element-table 分页选中

<template>
  <section>
    <el-col :span="24">
      <el-tabs v-model="activeName">
        <el-tab-pane label="库存不足商品补货明细" name="1">
          <el-table
            :data="deficiencyData"
            v-loading="loading"
            size="mini"
            style="width: 100%"
            stripe
            ref="deficiencyTable"
            @selection-change="tableDeficiencyChange"
            highlight-current-row
          >
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column label="商品补货数量" label-class-name="tableTh" align="center">
              <el-table-column prop="status" label="状态" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.status==1">已执行</span>
                  <span v-else>初始</span>
                </template>
              </el-table-column>
              <el-table-column prop="planTime" width="140" label="补货计划生成日期" align="center"></el-table-column>
              <el-table-column prop="img" label="图片" align="center"></el-table-column>
              <el-table-column prop="sku" width="140" label="SKU" align="center"></el-table-column>
              <el-table-column prop="jybhl" width="100" label="建议补货量" align="center"></el-table-column>
              <el-table-column prop="sjbhl" width="140px" label="实际补货量" align="center">
                <template slot-scope="scope">
                  <template>
                    <el-button
                      class="editRankBtn"
                      v-if="!editDeficiencyIdsMap[scope.row.id]"
                      @dblclick.native.prevent="editDeficiencyChange(scope.row.id)"
                      type="text"
                      size="medium"
                    >{{scope.row.sjbhl}}</el-button>
                    <template v-if="editDeficiencyIdsMap[scope.row.id]">
                      <el-input-number
                        v-model="localDeficiencyCount"
                        :precision="0"
                        :min="0"
                        clearable
                        placeholder
                      />
                      <i class="el-icon-check" @click="confirmDeficiencyChange(scope)"></i>
                      <i class="el-icon-close" @click="cancelDeficiencyChange(scope.row.id)"></i>
                    </template>
                  </template>
                </template>
              </el-table-column>
              <el-table-column prop="sddm" width="100" label="商店代码" align="center"></el-table-column>
              <el-table-column prop="sdmc" width="100" label="商店名称" align="center"></el-table-column>
            </el-table-column>
            <el-table-column label="商品基本信息" align="center" label-class-name="tableTh">
              <el-table-column prop="spdm" width="100" label="商品代码" align="center"></el-table-column>
              <el-table-column prop="spmc" width="160" label="商品名称" align="center"></el-table-column>
              <el-table-column prop="ysmc" width="160" label="颜色名称" align="center"></el-table-column>
              <el-table-column prop="cmmc" width="160" label="尺码名称" align="center"></el-table-column>
            </el-table-column>
            <el-table-column label="发货仓库与门店库存信息" align="center" label-class-name="tableTh">
              <el-table-column prop="fczks" width="100" label="发仓在库数" align="center"></el-table-column>
              <el-table-column prop="fcsds" width="100" label="发仓锁定数" align="center"></el-table-column>
              <el-table-column prop="fckys" width="100" label="发仓可用数" align="center"></el-table-column>
              <el-table-column prop="mdzks" width="100" label="门店在库数" align="center"></el-table-column>
              <el-table-column prop="mdsds" width="100" label="门店锁定数" align="center"></el-table-column>
              <el-table-column prop="mdzts" width="100" label="门店在途数" align="center"></el-table-column>
              <el-table-column prop="mdthzt" width="100" label="门店退货在途" align="center"></el-table-column>
            </el-table-column>
            <el-table-column label="门店历史销信息" align="center" label-class-name="tableTh">
              <el-table-column prop="qjzxl" width="100" label="期间总销量" align="center"></el-table-column>
              <el-table-column prop="djrxl" width="100" label="店均日销量" align="center"></el-table-column>
              <el-table-column prop="djrje" width="100" label="店均日金额" align="center"></el-table-column>
              <el-table-column prop="sqll" label="售罄率" align="center"></el-table-column>
              <el-table-column prop="qhl" label="欠货率" align="center"></el-table-column>
              <el-table-column prop="skuxcb" width="100" label="SKU销存比" align="center"></el-table-column>
            </el-table-column>
            <el-table-column label="门店预测信息" align="center" label-class-name="tableTh">
              <el-table-column prop="ycqjts" width="120" label="预测区间天数" align="center"></el-table-column>
              <el-table-column prop="ycdjrxl" width="120" label="预测店均日销量" align="center"></el-table-column>
              <el-table-column prop="ycdjrxl" width="120" label="预测店均日金额" align="center"></el-table-column>
              <el-table-column prop="ycdjrje" width="140" label="匹配销售预测算法" align="center"></el-table-column>
              <el-table-column prop="ppxsycsf" width="120" label="预测商品等级" align="center"></el-table-column>
              <el-table-column prop="ycspdj" width="180" label="匹配商品等级陈列上限类型" align="center"></el-table-column>
              <el-table-column prop="jycll" width="100" label="建议陈列量" align="center"></el-table-column>
              <el-table-column prop="csbhl" width="100" label="初始补货量" align="center"></el-table-column>
              <el-table-column prop="spbzbzs" width="120" label="商品标准包装数" align="center"></el-table-column>
              <el-table-column prop="bzcsbhl" width="120" label="标准初始补货量" align="center"></el-table-column>
              <el-table-column prop="zdbzcsbhl" width="140" label="总的标准初始补货量" align="center"></el-table-column>
              <el-table-column prop="ppkcfpsf" width="140" label="匹配库存分配算法" align="center"></el-table-column>
              <el-table-column prop="bzl" label="不足量" align="center"></el-table-column>
            </el-table-column>
            <el-table-column label="其他信息" align="center" label-class-name="tableTh">
              <el-table-column prop="mddj" label="门店等级" align="center"></el-table-column>
              <el-table-column prop="mdyxj" width="100" label="门店优先级" align="center"></el-table-column>
              <el-table-column prop="jhsjrq" width="100" label="计划上架日期" align="center"></el-table-column>
              <el-table-column prop="sjsjrq" width="100" label="实际上架日期" align="center"></el-table-column>
              <el-table-column prop="zxts" label="在销天数" align="center"></el-table-column>
              <el-table-column prop="bhzj" label="补货组织" align="center"></el-table-column>
              <el-table-column prop="preStart" width="140" label="补货预测起始日期" align="center"></el-table-column>
              <el-table-column prop="preEnd" width="140" label="补货预测截止日期" align="center"></el-table-column>
              <el-table-column prop="hisStart" width="170" label="补货历史进销存起始日期" align="center"></el-table-column>
              <el-table-column prop="hisEnd" width="170" label="补货历史进销存截止日期" align="center"></el-table-column>
              <el-table-column prop="planerName" label="计划人" align="center"></el-table-column>
              <el-table-column prop="salerName" label="业务员" align="center"></el-table-column>
              <el-table-column prop="executorName" label="执行人" align="center"></el-table-column>
              <el-table-column prop="exeTime" label="执行时间" align="center"></el-table-column>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <pagination
            v-show="searchDeficiencyData.totalNumber>0"
            :total="searchDeficiencyData.totalNumber"
            :page.sync="searchDeficiencyData.page"
            :limit.sync="searchDeficiencyData.size"
            @pagination="updateDeficiencyList"
          />
        </el-tab-pane>
        <el-tab-pane label="库存充足商品补货明细" name="2">
          <el-table
            :data="enoughData"
            v-loading="loading"
            ref="enoughTable"
            size="mini"
            style="width: 100%"
            stripe
            highlight-current-row
            @selection-change="tableEnoughChange"
          >
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column label="商品补货数量" align="center" label-class-name="tableTh">
              <el-table-column prop="status" label="状态" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.status==1">已执行</span>
                  <span v-else>初始</span>
                </template>
              </el-table-column>
              <el-table-column prop="planTime" width="140" label="补货计划生成日期" align="center"></el-table-column>
              <el-table-column prop="img" label="图片" align="center"></el-table-column>
              <el-table-column prop="sku" width="140" label="SKU" align="center"></el-table-column>
              <el-table-column prop="jybhl" width="100" label="建议补货量" align="center"></el-table-column>
              <el-table-column prop="sjbhl" width="140px" label="实际补货量" align="center">
                <template slot-scope="scope">
                  <template>
                    <el-button
                      class="editRankBtn"
                      v-if="!editEnoughIdsMap[scope.row.id]"
                      @dblclick.native.prevent="editEnoughChange(scope.row.id)"
                      type="text"
                      size="medium"
                    >{{scope.row.sjbhl}}</el-button>
                    <template v-if="editEnoughIdsMap[scope.row.id]">
                      <el-input-number
                        v-model="localEnoughCount"
                        :precision="0"
                        :min="0"
                        clearable
                        placeholder
                      />
                      <i class="el-icon-check" @click="confirmEnoughChange(scope)"></i>
                      <i class="el-icon-close" @click="cancelEnoughChange(scope.row.id)"></i>
                    </template>
                  </template>
                </template>
              </el-table-column>
              <el-table-column prop="sddm" width="100" label="商店代码" align="center"></el-table-column>
              <el-table-column prop="sdmc" width="100" label="商店名称" align="center"></el-table-column>
            </el-table-column>
            <el-table-column label="商品基本信息" align="center" label-class-name="tableTh">
              <el-table-column prop="spdm" width="100" label="商品代码" align="center"></el-table-column>
              <el-table-column prop="spmc" width="160" label="商品名称" align="center"></el-table-column>
              <el-table-column prop="ysmc" width="160" label="颜色名称" align="center"></el-table-column>
              <el-table-column prop="cmmc" width="160" label="尺码名称" align="center"></el-table-column>
            </el-table-column>
            <el-table-column label="发货仓库与门店库存信息" align="center" label-class-name="tableTh">
              <el-table-column prop="fczks" width="100" label="发仓在库数" align="center"></el-table-column>
              <el-table-column prop="fcsds" width="100" label="发仓锁定数" align="center"></el-table-column>
              <el-table-column prop="fckys" width="100" label="发仓可用数" align="center"></el-table-column>
              <el-table-column prop="mdzks" width="100" label="门店在库数" align="center"></el-table-column>
              <el-table-column prop="mdsds" width="100" label="门店锁定数" align="center"></el-table-column>
              <el-table-column prop="mdzts" width="100" label="门店在途数" align="center"></el-table-column>
              <el-table-column prop="mdthzt" width="100" label="门店退货在途" align="center"></el-table-column>
            </el-table-column>
            <el-table-column label="门店历史销信息" align="center" label-class-name="tableTh">
              <el-table-column prop="qjzxl" width="100" label="期间总销量" align="center"></el-table-column>
              <el-table-column prop="djrxl" width="100" label="店均日销量" align="center"></el-table-column>
              <el-table-column prop="djrje" width="100" label="店均日金额" align="center"></el-table-column>
              <el-table-column prop="sqll" label="售罄率" align="center"></el-table-column>
              <el-table-column prop="qhl" label="欠货率" align="center"></el-table-column>
              <el-table-column prop="skuxcb" width="100" label="SKU销存比" align="center"></el-table-column>
            </el-table-column>
            <el-table-column label="门店预测信息" align="center" label-class-name="tableTh">
              <el-table-column prop="ycqjts" width="120" label="预测区间天数" align="center"></el-table-column>
              <el-table-column prop="ycdjrxl" width="120" label="预测店均日销量" align="center"></el-table-column>
              <el-table-column prop="ycdjrxl" width="120" label="预测店均日金额" align="center"></el-table-column>
              <el-table-column prop="ycdjrje" width="140" label="匹配销售预测算法" align="center"></el-table-column>
              <el-table-column prop="ppxsycsf" width="120" label="预测商品等级" align="center"></el-table-column>
              <el-table-column prop="ycspdj" width="180" label="匹配商品等级陈列上限类型" align="center"></el-table-column>
              <el-table-column prop="jycll" width="100" label="建议陈列量" align="center"></el-table-column>
              <el-table-column prop="csbhl" width="100" label="初始补货量" align="center"></el-table-column>
              <el-table-column prop="spbzbzs" width="120" label="商品标准包装数" align="center"></el-table-column>
              <el-table-column prop="bzcsbhl" width="120" label="标准初始补货量" align="center"></el-table-column>
              <el-table-column prop="zdbzcsbhl" width="140" label="总的标准初始补货量" align="center"></el-table-column>
            </el-table-column>
            <el-table-column label="其他信息" align="center" label-class-name="tableTh">
              <el-table-column prop="mddj" label="门店等级" align="center"></el-table-column>
              <el-table-column prop="mdyxj" width="100" label="门店优先级" align="center"></el-table-column>
              <el-table-column prop="jhsjrq" width="100" label="计划上架日期" align="center"></el-table-column>
              <el-table-column prop="sjsjrq" width="100" label="实际上架日期" align="center"></el-table-column>
              <el-table-column prop="zxts" label="在销天数" align="center"></el-table-column>
              <el-table-column prop="bhzj" label="补货组织" align="center"></el-table-column>
              <el-table-column prop="preStart" width="140" label="补货预测起始日期" align="center"></el-table-column>
              <el-table-column prop="preEnd" width="140" label="补货预测截止日期" align="center"></el-table-column>
              <el-table-column prop="hisStart" width="170" label="补货历史进销存起始日期" align="center"></el-table-column>
              <el-table-column prop="hisEnd" width="170" label="补货历史进销存截止日期" align="center"></el-table-column>
              <el-table-column prop="planerName" label="计划人" align="center"></el-table-column>
              <el-table-column prop="salerName" label="业务员" align="center"></el-table-column>
              <el-table-column prop="executorName" label="执行人" align="center"></el-table-column>
              <el-table-column prop="exeTime" label="执行时间" align="center"></el-table-column>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <pagination
            v-show="searchEnoughData.totalNumber>0"
            :total="searchEnoughData.totalNumber"
            :page.sync="searchEnoughData.page"
            :limit.sync="searchEnoughData.size"
            @pagination="updateEnoughList"
          />
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </section>
</template>
<script>
import { mapActions, mapMutations } from "vuex";
export default {
  name: "List",
  // 组件通讯
  props: {
    loading: {
      default: false
    }
  },
  data() {
    return {
      tableDeficiencyData: {},
      deficiencyEnd: false, //控制table change 在nextTick执行完 ，防止多次出发table change事件
      isDeficiencyPage: false, //页面改变导致的 tabel change事件的判定
      tableEnoughData: {},
      enoughEnd: false, //控制table change 在nextTick执行完 ，防止多次出发table change事件
      isEnoughPage: false, //页面改变导致的 tabel change事件的判定
      enoughData: [],
      editEnoughIdsMap: null,
      deficiencyData: [],
      editDeficiencyIdsMap: null,
      localEnoughCount: "",
      localDeficiencyCount: "",
      updateList: [], //生成补货计划的数组
      searchEnoughData: {
        type: 1,
        size: 10,
        page: 1,
        state: "1",
        planer: "", //计划人
        ckdm: "", //仓库代码
        sku: "", //SKU
        saler: "", //业务员
        deptId: "", //组织id集合
        start: "", //补货计划生成区间-起始
        end: "", //补货计划生成区间-截
        mdlist: [],
        mdcode: "",
        mdtype: -1,
        splist: [],
        spcode: "",
        sptype: -1,
        totalNumber: 0
      },
      searchDeficiencyData: {
        type: 1,
        size: 10,
        page: 1,
        state: "0",
        totalNumber: 0,
        planer: "", //计划人
        sku: "", //SKU
        saler: "", //业务员
        deptId: "", //组织id集合
        start: "", //补货计划生成区间-起始
        end: "", //补货计划生成区间-截
        mdlist: [],
        mdcode: "",
        mdtype: -1,
        splist: [],
        spcode: "",
        sptype: -1
      },
      activeName: "1"
    };
  },
  methods: {
    ...mapActions(["planEnough", "planDeficiency", "stepUpdate"]),
    ...mapMutations(["NOTICE_ARRAY"]),
    // 修改库存充足实际补货量
    editEnoughChange(id) {
      if (!this.editEnoughIdsMap) return;
      this.localEnoughCount = 0;
      this.editEnoughIdsMap = this.enoughData.reduce(
        (map, item) => R.assoc(item.id, false, map),
        {}
      );
      this.editEnoughIdsMap[id] = true;
    },
    // 取消修改库存充足实际补货量
    cancelEnoughChange(id) {
      if (!this.editEnoughIdsMap) return;
      this.editEnoughIdsMap[id] = false;
    },
    // 确认修改库存充足实际补货量
    confirmEnoughChange(scope) {
      this.editEnoughIdsMap[scope.row.id] = false;
      this.postConfirmReq(scope, 1);
    },
    // 修改库存不足实际补货量
    editDeficiencyChange(id) {
      if (!this.editDeficiencyIdsMap) return;
      this.localDeficiencyCount = 0;
      this.editDeficiencyIdsMap = this.deficiencyData.reduce(
        (map, item) => R.assoc(item.id, false, map),
        {}
      );
      this.editDeficiencyIdsMap[id] = true;
    },
    // 取消修改库存不足实际补货量
    cancelDeficiencyChange(id) {
      if (!this.editDeficiencyIdsMap) return;
      this.editDeficiencyIdsMap[id] = false;
    },
    // 确认修改库存不足实际补货量
    confirmDeficiencyChange(scope) {
      this.editDeficiencyIdsMap[scope.row.id] = false;
      this.postConfirmReq(scope, 0);
    },
    // 确认修改数据
    postConfirmReq(scope, type) {
      let param = { ...scope.row };
      if (type === 1) {
        param.sjbhl = this.localEnoughCount;
      } else {
        param.sjbhl = this.localDeficiencyCount;
      }
      this.stepUpdate(param).then(res => {
        if (res.code === 0) {
          if (type === 1) {
            this.getEnoughList();
          } else {
            this.getDeficiencyList();
          }
        }
      });
    },
    /**
     * 库存充足pageSize 变更
     */
    updateEnoughList(res) {
      this.searchEnoughData.page = res.page;
      this.searchEnoughData.size = res.limit;
      this.isEnoughPage = true;
      this.getEnoughList();
    },
    /**
     * 库存不足pageSize 变更
     */
    updateDeficiencyList(res) {
      this.searchDeficiencyData.page = res.page;
      this.searchDeficiencyData.size = res.limit;
      this.isDeficiencyPage = true;
      this.getDeficiencyList();
    },
    noticeFun() {
      let noticeDArray = []; //选中库存不足的所有数组集合
      let deficiencyKey = Object.keys(this.tableDeficiencyData);
      deficiencyKey.forEach(key => {
        noticeDArray = [...noticeDArray, ...this.tableDeficiencyData[key]];
      });
      let noticeEArray = []; //选中库存充足的所有数组集合
      let enoughKey = Object.keys(this.tableEnoughData);
      enoughKey.forEach(key => {
        noticeEArray = [...noticeEArray, ...this.tableEnoughData[key]];
      });
      let noticeAllArr = [...noticeDArray, ...noticeEArray].map(
        item => item.id
      ); //所有选中(包含库存充足与不足)的数组id集合
      this.NOTICE_ARRAY(noticeAllArr);
    },
    /**
     * 库存不足change
     */
    tableDeficiencyChange(value) {
      let page = this.searchDeficiencyData.page;
      if (this.deficiencyEnd) return;
      if (this.isDeficiencyPage) {
        if (
          this.tableDeficiencyData[page] &&
          this.tableDeficiencyData[page].length > 0
        ) {
          let nowPageData = this.tableDeficiencyData[page].map(item => item.id); //当前页面选中的id数组
          let allData = this.deficiencyData.map(item => item.id); //当前列表ID的数组
          let indexArr = []; //选中的数组在当前列表的index
          for (let i = 0; i < nowPageData.length; i++) {
            indexArr.push(allData.indexOf(nowPageData[i]));
          }
          let checkData = indexArr.map(item => {
            //默认勾选中的数据
            return this.deficiencyData[item];
          });
          this.deficiencyEnd = true;
          this.$nextTick(() => {
            this.toggleDeficiencySelection(checkData);
            this.deficiencyEnd = false;
          });
        } else {
          this.tableDeficiencyData[page] = value;
        }
        this.isDeficiencyPage = false;
      } else {
        this.tableDeficiencyData[page] = value;
      }
      this.noticeFun();
    },
    // 选中回显
    toggleDeficiencySelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.deficiencyTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.deficiencyTable.clearSelection();
      }
    },
    /**
     * 库存充足足change
     */
    tableEnoughChange(value) {
      let page = this.searchEnoughData.page;
      if (this.enoughEnd) return;
      if (this.isEnoughPage) {
        if (
          this.tableEnoughData[page] &&
          this.tableEnoughData[page].length > 0
        ) {
          let nowPageData = this.tableEnoughData[page].map(item => item.id); //当前页面选中的id数组
          let allData = this.enoughData.map(item => item.id); //当前列表ID的数组
          let indexArr = []; //选中的数组在当前列表的index
          for (let i = 0; i < nowPageData.length; i++) {
            indexArr.push(allData.indexOf(nowPageData[i]));
          }
          let checkData = indexArr.map(item => {
            //默认勾选中的数据
            return this.enoughData[item];
          });
          this.enoughEnd = true;
          this.$nextTick(() => {
            this.toggleEnoughSelection(checkData);
            this.enoughEnd = false;
          });
        } else {
          this.tableEnoughData[page] = value;
        }
        this.isEnoughPage = false;
      } else {
        this.tableEnoughData[page] = value;
      }
      this.noticeFun();
    },
    // 选中回显
    toggleEnoughSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.enoughTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.enoughTable.clearSelection();
      }
    },
    initData() {
      this.getEnoughList();
      this.getDeficiencyList();
    },
    // 获取库存充足商品列表
    getEnoughList() {
      this.planEnough(this.searchEnoughData).then(res => {
        if (res.code === 0) {
          this.enoughData = res.page.list;
          this.editEnoughIdsMap = this.enoughData.reduce(
            (map, item) => R.assoc(item.id, false, map),
            {}
          );
          this.searchEnoughData.page = res.page.currPage;
          this.searchEnoughData.size = res.page.pageSize;
          this.searchEnoughData.totalNumber = res.page.totalCount;
          let page = this.searchEnoughData.page;
          if (
            this.tableEnoughData[page] &&
            this.tableEnoughData[page].length > 0
          ) {
            this.tableEnoughChange(this.enoughData);
          } else {
            this.tableEnoughData[page] = [];
          }
        }
      });
    },
    // 获取库存不足商品列表
    getDeficiencyList() {
      this.planDeficiency(this.searchDeficiencyData).then(res => {
        if (res.code === 0) {
          this.deficiencyData = res.page.list;
          this.editDeficiencyIdsMap = this.deficiencyData.reduce(
            (map, item) => R.assoc(item.id, false, map),
            {}
          );
          this.searchDeficiencyData.page = res.page.currPage;
          this.searchDeficiencyData.size = res.page.pageSize;
          this.searchDeficiencyData.totalNumber = res.page.totalCount;
          let page = this.searchDeficiencyData.page;
          if (
            this.tableDeficiencyData[page] &&
            this.tableDeficiencyData[page].length > 0
          ) {
            this.tableDeficiencyChange(this.deficiencyData);
          } else {
            this.tableDeficiencyData[page] = [];
          }
        }
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initData();
    });
  }
};
</script>
<style>
</style>
<style lang="scss" scoped >
// /deep/ .el-table thead.is-group .tableTh{
//   color:#181818;
//   background: #f7f1f1;
// }
/deep/ .el-table--mini td,
.el-table--mini th {
  padding: 5px 0;
}
</style>