index.vue

<template>
  <div class="flex" :gutter="10">
    <div class="flex-1">
      <el-card>
        <div slot="header" class="header">
          <el-select v-model="queryParams.typeId" :placeholder="$t('选择类型')" style="width:120px" clearable>
            <el-option v-for="item in typeList" :key="item.id" :label="item.titleZh" :value="item.id" />
          </el-select>
          <el-select v-model="queryParams.attrId" :placeholder="$t('选择属性')" style="width:120px" clearable>
            <el-option v-for="item in attrList" :key="item.id" :label="item.attrName" :value="item.id" />
          </el-select>
          <el-input v-model="queryParams.titleZh" :placeholder="$t('产品关键字')" style="width:120px" clearable />
          <el-button type="primary" @click="reLoad">{{$t('搜索')}}</el-button>

          <div v-if="showAll">
            <el-checkbox :label="$t('全选(最多500)')" @change="toggleAll" :disabled="isAllProduct"></el-checkbox>
            <el-checkbox :label="$t('全选库内商品(共{cnt}个)', {cnt: total})" v-model="isAllProduct"></el-checkbox>
          </div>
        </div>
        <div class="list">
          <div class="item" v-for="item in list" :key="item.id">
            <el-checkbox @change="toggleCheck(item, $event)" :value="ids.indexOf(item.id) > -1" :disabled="isAllProduct" /> {{item.titleZh}}
            <div>{{item.titleEn}}</div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="flex-1 ml-10">
      <el-card style="height:100%">
        <div slot="header" class="header">
          {{$t('已选{cnt}个产品', {cnt: isAllProduct ? total : choosedList.length})}}
        </div>
        <div class="list">
          <div class="item" v-for="(choosed) in choosedList" :key="choosed.id" :data-data="JSON.stringify(choosed)">
            <el-link class="el-icon-delete" @click="remove(choosed)" :disabled="isAllProduct"/> {{choosed.titleZh}}
            <div>{{choosed.titleEn}}</div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { getProductPage, getProductList } from '@/api/ecw/product'
import { getProductTypeList } from '@/api/ecw/productType'
import { getProductAttrList } from '@/api/ecw/productAttr'

export default {
  props: {
    defaultIds: {
      type: Array,
      default: () => {
        return []
      }
    },
    showAll: Boolean,
    isall: Boolean
  },
  data() {
    return {
      list: [],
      page: 1,
      pages: 1,
      total: 0, // 商品总数
      queryParams: {
        pageNo: 1,
        pageSize: 500,
        attrId: null,
        titleZh: null,
        typeId: null
      },
      choosedList: [],
      typeList: [],
      attrList: [],
      isAllProduct: false
    }
  },
  computed: {
    ids: {
      get() {
        let arr = []
        this.choosedList.forEach(item => {
          arr.push(item.id)
        })
        return arr
      },
      set(v) {

      }
    }
  },
  watch: {
    ids(val) {
      this.$emit('input', val)
    },
    isAllProduct(isAllProduct){
      this.$emit('setall', isAllProduct)
    },
    defaultIds(newValue, oldValue){
      if(!oldValue || !oldValue.length){
        this.loadDefaultProds()
      }
    },
    isall(isall){
      this.isAllProduct = isall
    }
  },
  created() {
    getProductTypeList().then(res => this.typeList = res.data)
    getProductAttrList().then(res => this.attrList = res.data)
    this.reLoad()
    this.ids = this.defaultIds //数据回显
    this.isAllProduct = this.isall
    // 如果有默认商品则获取内容供回显
    if(this.defaultIds.length){
      this.loadDefaultProds()
    }
  },
  methods: {
    /* setAllProduct(status){
      this.isAllProduct = true
    }, */
    loadDefaultProds(){
      if(!this.defaultIds || !this.defaultIds.length){
        return false
      }
      getProductList({ids: this.defaultIds.join(',')}).then(res => {
        res.data.forEach(item => {
          this.choose(item)
        })
      })
    },
    toggleAll(status){
      this.list.forEach(item => {
        this.toggleCheck(item, status)
      })
    },
    reLoad() {
      this.queryParams.page = 1
      this.list = []
      this.getList()
    },
    loadNextPage() {
      if (this.page >= this.pages) {
        return this.$message.error(this.$t('已加载全部'))
      }
      this.queryParams.page++
      this.getList()
    },
    getList() {
      getProductPage(this.queryParams).then(res => {
        this.list = res.data.list //.concat(res.data.list || [])
        this.page = res.data.page
        this.pages = res.data.pages
        this.total = res.data.total
        // this.choosedList = [] //搜搜重置，数据回显
        /* if (this.defaultIds.length > 0) {
          this.defaultIds.map(item => {
            this.list.map(items => {
              if (items.id == item) {
                this.choosedList.push(items)
              }
            })
          })
        } */
      })
    },
    toggleCheck(item, checked) {
      if (checked) {
        this.choose(item)
      } else {
        this.remove(item)
      }
    },
    choose(item) {
      if(!this.choosedList.find(it => it.id == item.id)){
        this.choosedList.push(item)
      }
    },
    remove(item) {
      this.choosedList.forEach((choosed, index) => {
        if (choosed.id == item.id) this.choosedList.splice(index, 1)
      })
    }
  }
}
</script>
<style scoped lang="scss">
.header {
  > div {
    margin-right: 5px;
  }
}
.list {
  height: 200px;
  border: 1px solid #ccc;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 10px;

  display: flex;
  flex-wrap: wrap;
  .item {
    width: 50%;
    line-height: 20px;
    height: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>