dx-element-ui/packages/infinite-transfer/src/main.vue

<template>
  <div class="infinite-transfer" :style="{ height: height + 'px' }">
    <div class="infinite-list-main">
      <div class="search-input-main">
        <el-checkbox style="margin-right: 10px" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <el-input v-model="keyword" placeholder="请输入内容" prefix-icon="el-icon-search" clearable size="small" @input="searchEvent">
        </el-input>
      </div>
      <div v-if="infiniteListStatus" class="infinite-list" v-infinite-scroll="onload" :infinite-scroll-disabled="scrollDisabled">
        <el-checkbox v-for="(item, index) in dataList" v-model="item.ischecked" :label="item" :key="index" @change="(checked) => checkboxClick(checked, item, index)">{{ infiniteItemName(item) }}</el-checkbox>
        <div class="transger-number">{{ infiniteCheckedTotal }}/{{ dataTotal }}</div>
      </div>
    </div>
    <div class="transfer-selected">
      <div class="total-main">您已选择记录总数：<span style="color: #00a2d4">{{ selectedList.length }}</span></div>
      <div class="infinite-list">
        <el-tag v-for="(item, index) in selectedList" :key="index" closable @close="handleClose(item, index)"><div>{{ infiniteItemName(item) }}</div></el-tag>
      </div>
    </div>
  </div>
</template>

<script>
import { debounce } from "main/tools/utils";

export default {
  name: 'NtInfiniteTransfer',
  props: {
    height: {
      type: Number,
      default: 280
    },
    options: {
      type: Object
    },
    primary: {
      type: String,
      required: true
    },
    dataTotal: {
      type: String | Number,
      default: function () {
        return 0
      }
    },
    fields: {
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: Array | String,
      default: function () {
        return []
      }
    },
    dataList: {
      type: Array,
      required: true
    },
    selectedList: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data() {
    return {
      keyword: '',
      checkAll: false,
      scrollDisabled: false,
      isIndeterminate: false,
      infiniteListStatus: true,
      infiniteCheckedTotal: 0,
      selectedItemArray: [],
      debounceInfinite: null
    }
  },
  watch: {
    dataList: {
      deep: false,
      handler(oldList, newList) {
        // 是否可滚动
        this.scrollDisabled = false
        if (this.dataList.length > 0 && this.dataTotal <= this.dataList.length) {
          this.scrollDisabled = true
        }
        this.initDataList();
      }
    }
  },
  created() {
    this.initData();
    this.checkedStatusHandle();
    this.debounceInfinite = debounce(this.resetInfiniteStatus)
  },
  methods: {
    initData() {
      this.initSelectItemArray();
      this.initDataList();
    },
    initSelectItemArray() {
      this.selectedList.forEach(item => {
        this.selectedItemArray.push(this.infiniteItemPrimary(item));
      })
    },
    initDataList() {
      this.infiniteCheckedTotal = 0;
      this.dataList.forEach(item => {
        // 设置默认值
        if (!item.hasOwnProperty('ischecked')) {
          item.ischecked = false
        }
        // 全选功能
        if (this.checkAll) {
          item.ischecked = true
        }
        if (this.selectedItemArray.includes(this.infiniteItemPrimary(item))) {
          // 右边列表存在，左边没有
          item.ischecked = true
        } else {
          // 右边不存在，左边为选中
          if (item.ischecked) {
            this.selectedList.unshift(item)
            this.selectedItemArray.unshift(this.infiniteItemPrimary(item))
          }
        }
        // 计数
        if (item.ischecked) {
          this.infiniteCheckedTotal ++
        }
      })
    },
    onload() {
      this.$emit('onload', this.keyword)
    },
    resetInfiniteStatus() {
      this.infiniteListStatus = false
      this.$emit('remote')
      this.checkAll = false
      this.$nextTick(() => {
        this.infiniteListStatus = true
      })
    },
    searchEvent() {
      this.debounceInfinite();
    },
    infiniteItemPrimary(item) {
      return item[this.primary]
    },
    infiniteItemName(item) {
      if (typeof (this.fields) === 'string') {
        return item[this.fields]
      } else {
        if (this.fields.length > 0) {

        } else {
          return item
        }
      }
    },
    handleCheckAllChange(checked) {
      this.dataList.forEach(item => {
        item.ischecked = checked;
        // 右边是否存在记录
        if (this.selectedItemArray.includes(this.infiniteItemPrimary(item))) {
          if (!checked) {
            for (let i = 0; i < this.selectedItemArray.length; i++) {
              if (this.infiniteItemPrimary(item) === this.selectedItemArray[i]) {
                this.selectedList.splice(i, 1);
                this.selectedItemArray.splice(i, 1);
                this.infiniteCheckedTotal --;
                break;
              }
            }
          }
        } else {
          if (checked) {
            this.selectedList.unshift(item);
            this.selectedItemArray.unshift(this.infiniteItemPrimary(item));
            this.infiniteCheckedTotal ++;
          }
        }
      })

      this.isIndeterminate = false
    },
    checkboxClick(checked, item, index) {
      if (checked) {
        this.selectedList.unshift(item);
        this.selectedItemArray.unshift(this.infiniteItemPrimary(item));
        this.infiniteCheckedTotal ++;
      } else {
        item.ischecked = false
        for (let i = 0; i < this.selectedItemArray.length; i++) {
          if (this.infiniteItemPrimary(item) === this.selectedItemArray[i]) {
            this.selectedList.splice(i, 1);
            this.selectedItemArray.splice(i, 1);
            this.infiniteCheckedTotal --;
            break;
          }
        }
      }

      this.checkedStatusHandle()
    },
    handleClose(item, index) {
      for (let i = 0; i < this.dataList.length; i++) {
        if (this.infiniteItemName(item) === this.infiniteItemName(this.dataList[i])) {
          this.dataList[i].ischecked = false;
          break
        }
      }
      this.selectedList.splice(index, 1);
      this.selectedItemArray.splice(index, 1);
      this.infiniteCheckedTotal --;

      this.checkedStatusHandle()
    },
    checkedStatusHandle() {
      if (this.dataList.length === 0) {
        this.checkAll = false
        return
      }
      if (this.dataList.length === this.infiniteCheckedTotal) {
        this.checkAll = true
      } else {
        this.checkAll = false
      }

      this.isIndeterminate = false
    }
  }
}
</script>

<style lang="scss" scoped>
.infinite-transfer {
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .infinite-list-main, .transfer-selected {
    width: 45%;
    height: 100%;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #f2f2f2;
    .infinite-list {
      height: 220px;
      line-height: 25px;
      overflow: hidden;
      margin-top: 10px;
      overflow-y: auto;
      .el-checkbox {
        display: block;
      }
      .el-tag {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 5px;
        i {
          display: block;
        }
      }
    }
  }
  .infinite-list-main {
    .search-input-main {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .transger-number {
      position: absolute;
      bottom: 5px;
      right: 55%;
      margin-right: 10px;
    }
  }
  .transfer-selected {
    .total-main {
      height: 32px;
      line-height: 32px;
    }
  }
}
</style>