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 @change="getList" :disabled="loading">
            <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 @change="getList" :disabled="loading">
            <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  :disabled="loading"/>
          <el-button type="primary" @click="reLoad" :loading="loading">{{$t('搜索')}}</el-button>

          <div v-if="showAll">
            <el-checkbox :label="$t('全选') + `(${total > 500 ? $t('最多500') : $t('{total}个', {total})})`" @change="toggleAll" :disabled="isAllProduct || loading"></el-checkbox>
            <el-checkbox :label="$t('全选库内商品(共{cnt}个)', {cnt: allTotal})" v-model="isAllProduct" :disabled="loading"></el-checkbox>
						<el-checkbox v-if="showFiltered && enableFiltered" :label="$t('根据商品搜索结果(共{cnt}个)', {cnt: total})" v-model="isAllFiltered" :disabled="loading"></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 flex">
          <div class="flex-1 flex items-center">{{$t('已选{cnt}个产品', {cnt: isAllProduct || isAllFiltered ? total : choosedList.length})}}</div>

          <el-button :disabled="!choosedList.length" type="text" @click="clearAll">{{$t('全部清除')}}</el-button>
        </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, getProductIds} 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,
    // 是否允许勾选全部搜索结果，优惠券那边无法回显所以不能启用，编辑路线价格等不需要回显的场景可以启用
    enableFiltered: Boolean
  },
  data() {
    return {
      loading: false,
      list: [],
      page: 1,
      pages: 1,
      total: 0, // 当前筛选条件的商品总数
      allTotal: 0, // 全库商品总数
      queryParams: {
        pageNo: 1,
        pageSize: 500,
        attrId: null,
        titleZh: null,
        typeId: null
      },
      choosedList: [],
      typeList: [],
      attrList: [],
      isAllProduct: false,
      isAllFiltered: false, // 是否全部搜索结果
      // 是否显示搜索结果勾选，有筛选条件才显示
      showFiltered: 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){
      console.log('isAllProduct', isAllProduct)
      this.choosedList = []
      this.$emit('setall', isAllProduct)
    },
    isAllFiltered(isAllFiltered){
      this.choosedList = []
      this.isAllProduct = false
      this.$emit('setFiltered', isAllFiltered)
    },
    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()
    }

    // 获取全库商品总数
    getProductPage({pageNo: 1, pageSize: 1}).then(res => {
      this.allTotal = res.data.total
    })
  },
  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() {
      this.loading = true
      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.showFiltered = !!this.queryParams.attrId || !!this.queryParams.titleZh || !!this.queryParams.typeId
      }).finally(() => {
        this.loading = false
      })
    },
    // 获得指定条件的商品的全部ID
    getFilteredIds(){
      return getProductIds(this.queryParams).then(res => {
        return res.data
      })
    },
    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)
      })
    },
    // 清除全部
    async clearAll() {
      await this.$confirm(this.$t('确定要全部清除么？'))
      this.choosedList = []
    }
  }
}
</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>