element 穿梭框

<template>
  <el-dialog
    :title="titleName"
    :visible.sync="dialogTableVisible"
    width="920px"
    top="7vh"
    class="matrix-dialog"
    :lock-scroll="false"
    :before-close="cancelAdd"
    :close-on-click-modal="false"
  >
    <div>
      <el-row class="componentSelection">
        <el-col :span="24">
          <div class="part-search-input">
            <el-input
              v-model.trim="materialCode"
              :placeholder="placeholderMsg"
              @keyup.native="matrixSearch"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </div>
          <span class="ml20">已選擇</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-row class="transfer">
            <el-col>
              <div class="transferPop">
                <el-table
                  header-row-class-name="transfer-table-content"
                  ref="multipleTable"
                  class="hasBorder"
                  cell-class-name="transfer-table-cell"
                  :row-class-name="tableRowStripe"
                  highlight-current-row
                  :data="partDataRow"
                  height="390"
                  border
                  
                  v-loading="loadingTable"
                  element-loading-spinner="vo-mask"
                  element-loading-background="rgba(204,204,204,.5)"
                >
                  <el-table-column prop="partNumber" :label="searchName" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="partName" :label="searchNumber" show-overflow-tooltip></el-table-column>
                  <el-table-column label=" " width="55">
                    <template slot-scope="scope">
                      <el-button
                        class="chose"
                        :disabled="scope.row.checkDisabled"
                        @click.native="addPartFn(scope.row, scope.$index)"
                      ></el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-table
                  header-row-class-name="transfer-table-content"
                  cell-class-name="transfer-table-cell"
                  :row-class-name="checkTableRowStripe"
                  ref="multipleSelectedTable"
                  class="hasBorder"
                  border
                  highlight-current-row
                  :data="tableDataSelected"
                  height="390"
                  
                >
                  <el-table-column prop="partNumber" :label="searchName" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="partName" :label="searchNumber" show-overflow-tooltip></el-table-column>
                  <el-table-column label=" " width="55">
                    <template slot-scope="scope">
                      <el-button
                        icon="el-icon-close"
                        type="text"
                        class="remove"
                        @click.native="removePartFn(scope.row, scope.$index)"
                      ></el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-col>
            <el-col class="table-bottom-content">
              <div class="table-total">
                <span v-cloak>共{{partDataRow.length}}條</span>
                <a class="mfn_btn_all" @click="isSelectAll('allAdd')">全選</a>
              </div>
              <div class="alignRight table-total fr">
                <span v-cloak>已選{{tableDataSelected.length}}條</span>
                <a class="mfn_btn_all" @click="isSelectAll('cancelAll')">所有取消</a>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirmAddMaterialFn">確 定</el-button>
      <el-button @click="cancelAdd">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getQueryPart, getPartQueryData } from "@/api/api";
export default {
  data() {
    return {
      materialCode: "",
      partDataRow: [],
      tableDataSelected: [],
      loadingTable: false,
      dialogTableVisible: false,
      timer: null,
      typeName: this.$route.params.typeName,
      titleName: "模具搜索",
      searchName: "模具名稱",
      searchNumber: "模具編碼",
      placeholderMsg: "模具編碼/名稱(搜索結果最多200條)"
    };
  },
  mounted() {
    if (this.typeName == "PartChangeFormDoc") {
      this.titleName = "物料搜索";
      this.searchName = "物料名稱";
      this.searchNumber = "物料編碼";
      this.placeholderMsg = "物料編碼/名稱(搜索結果最多200條)";
    }
  },
  methods: {
    init() {
      this.dialogTableVisible = true;
    },
    matrixSearch() {
      var scope = this;
      if (scope.timer) {
        clearTimeout(scope.timer);
      }
      scope.timer = setTimeout(() => {
        var param = {};
        param.value = scope.materialCode || "";

        var getQueryPartFn = getQueryPart;
        if (scope.typeName == "PartChangeFormDoc") {
          getQueryPartFn = getPartQueryData;
        }

        scope.loadingTable = true;
        getQueryPartFn(param).then(res => {
          if (res.data.retCode == "000000") {
            var data = scope.parseData(res);
            scope.partDataRow = data;
            scope.loadingTable = false;
          } else {
            scope.$message({
              dangerouslyUseHTMLString: true,
              message: res.data.retMsg,
              type: "error"
            });
            scope.loadingTable = false;
          }
        });
      }, 400);
    },
    //肯定添加
    confirmAddMaterialFn() {
      if (this.tableDataSelected.length == 0) {
        this.$message.error("請至少添加一個模具");
        return;
      }
      this.$emit("handleMatrixSearch", this.tableDataSelected);
      this.cancelAdd();
    },
    //取消
    cancelAdd() {
      this.tableDataSelected.splice(0, this.tableDataSelected.length);
      this.partDataRow.splice(0, this.partDataRow.length);
      this.materialCode = "";
      this.dialogTableVisible = false;
    },
    //添加
    addPartFn(row, index) {
      this.$set(row, "checkDisabled", true);
      if (!this.checkTheRepeat(row)) {
        this.$message.error("重複的編碼添加項：" + row.partNumber);
      } else {
        this.tableDataSelected.push(row);
      }
    },
    //移除
    removePartFn(row, index) {
      for (var i = 0; i < this.partDataRow.length; i++) {
        if (
          this.partDataRow[i].hasOwnProperty("checkDisabled") &&
          this.partDataRow[i].partoid == row.partoid
        ) {
          this.partDataRow[i].checkDisabled = false;
          break;
        }
      }
      this.tableDataSelected.splice(index, 1);
      row.checkDisabled = false;
    },
    //所有添加或移除
    isSelectAll(type) {
      var scope = this;
      if (type == "allAdd") {
        scope.partDataRow.forEach((elem, index) => {
          scope.$set(elem, "checkDisabled", true);
        });
        scope.tableDataSelected = JSON.parse(JSON.stringify(scope.partDataRow));
      } else {
        scope.partDataRow.forEach((elem, index) => {
          elem.checkDisabled = false;
        });
        scope.tableDataSelected.splice(0, scope.tableDataSelected.length);
      }
    },
    //檢查重複
    checkTheRepeat(row) {
      if (this.tableDataSelected.length == 0) {
        return true;
      }
      for (var i = 0; i < this.tableDataSelected.length; i++) {
        if (this.tableDataSelected[i].partoid == row.partoid) {
          return false;
        }
      }
      return true;
    },
    tableRowStripe({ row, rowIndex }) {
      if (row.checkDisabled) {
        return "check-blue";
      }
      if (rowIndex % 2 == 1) {
        return "color-gray";
      }
      return "";
    },
    checkTableRowStripe({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "color-gray";
      }
      return "";
    }
  }
};
</script>
<style lang="less">
.matrix-dialog {
  .el-dialog {
    max-height: 660px;
  }
  .el-dialog__body {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .componentSelection {
    margin-bottom: 20px;
    .part-search-input {
      display: inline-block;
      width: 400px;
      .el-input__prefix {
        left: 7px;
      }
      .el-input__inner {
        border-radius: 15px;
        background-color: #f7f9fe;
        padding-left: 33px;
        font-size: 14px;
      }
    }
    .ml20 {
      margin-left: 40px;
    }
  }
  .el-dialog__footer {
    padding: 15px 40px;
  }
}
</style>