cmc-web/packages/common/components/group-transfer/index.vue

<template>
  <el-row :gutter="10">
    <el-col :span="12">
      <el-card>
        <div slot="header">
          <span>{{ titles[0] }}</span>
          <el-button type="primary" class="pull-right" style="margin-top: 5px" size="mini" @click="addItems"
            >移入
            <i class="el-icon-right"></i>
          </el-button>
        </div>
        <div style="height: 360px; overflow-y: auto">
          <el-row v-for="(item, key) in source" :key="key">
            <el-col :span="24" class="cell-title">{{ prefix }}{{ key }}</el-col>
            <el-col class="cell" :span="24" v-for="(cell, key) in item" :key="key">
              <el-checkbox v-model="cell.checked">{{ cell[label] }}</el-checkbox>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card>
        <div slot="header">
          <span class="pull-right">{{ titles[1] }}</span>
          <el-button type="danger" size="mini" @click="removeItems">
            <i class="el-icon-back"></i>
            移除
          </el-button>
        </div>
        <div style="height: 360px; overflow-y: auto">
          <el-row v-for="(item, key) in target" :key="key">
            <el-col :span="24" class="cell-title">{{ prefix }}{{ key }}</el-col>
            <el-col class="cell" :span="24" v-for="(cell, key) in item" :key="`${key}${item.name}`">
              <el-checkbox v-model="cell.checked">{{ cell[label] }}</el-checkbox>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
  model: {
    prop: 'checkedIds',
    event: 'change'
  },
  props: {
    titles: {
      type: Array,
      default: function () {
        return ['列表1', '列表2']
      }
    },
    label: {
      type: String,
      default: 'name'
    },
    value: {
      type: String,
      default: 'id'
    },
    data: {
      type: Array,
      required: true
    },
    groupKey: {
      type: String,
      default: 'group'
    },
    prefix: {
      type: String,
      default: ''
    },
    checkedIds: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data() {
    return {
      selectList: [],
      sourceList: []
    }
  },
  created() {
    this.init()
  },
  watch: {
    data: {
      handler(newVal, oldVal) {
        this.selectList = []
        this.sourceList = []
        this.init()
      }
    }
  },
  computed: {
    source() {
      return this.formatData(this.sourceList)
    },
    target() {
      return this.formatData(this.selectList)
    }
  },
  methods: {
    init() {
      ;[...this.data].forEach((item, key) => {
        const result = {
          ...item,
          checked: false,
          orderKey: key
        }
        if (this.checkedIds.includes(item[this.value])) {
          this.selectList.push(result)
        } else {
          this.sourceList.push(result)
        }
      })
    },
    formatData(data) {
      const source = {}
      data.forEach(item => {
        const key = item[this.groupKey]
        if (source[key]) {
          source[key].push(item)
        } else {
          source[key] = [item]
        }
      })
      return source
    },
    addItems() {
      const list = []
      this.sourceList.forEach(item => {
        if (item.checked) {
          this.selectList.push({
            ...item,
            checked: false
          })
        } else {
          list.push(item)
        }
      })
      this.sourceList = [...list].sort((a, b) => {
        return a.orderKey - b.orderKey
      })
      this.getChekckIds()
    },
    removeItems() {
      const list = []
      this.selectList.forEach(item => {
        if (item.checked) {
          this.sourceList.push({
            ...item,
            checked: false
          })
        } else {
          list.push(item)
        }
      })
      this.selectList = [...list]
      this.getChekckIds()
    },
    getChekckIds() {
      const checkedIds = this.selectList.map(item => item[this.value])
      this.$emit('change', checkedIds)
    }
  }
}
</script>

<style scoped>
.cell-title {
  font-size: 12px;
  font-weight: bold;
}
.cell {
  padding: 5px;
  color: #606266;
  font-weight: 500;
  white-space: nowrap;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>