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>