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  onkeyup="this.value=this.value.replace(/\s+/g, '')" :disabled="loading"/>
          <el-button type="primary" @click="reLoad" :loading="loading">{{$t('搜索')}}</el-button>

          <div style="height: 36px; display: flex; align-items: center">
            <el-checkbox :label="$t('全选') + `(${$t('{total}个', {total})})`" @change="toggleAll" v-model="isCheckedAll" :disabled="isAllProduct || loading"></el-checkbox>
          </div>
        </div>
        <div class="list">
          <div class="item" v-for="item in currentList" :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-pagination :total="list.length"  :page-sizes="[100, 200, 300, 500]" :page-size="pageSize" @current-change="leftPage = $event" layout="prev, pager, next, total, sizes" :current-page="leftPage" />
      </el-card>
    </div>
    <div class="flex-1 ml-10">
      <el-card style="height:100%">
        <div slot="header" class="header">
          <el-select v-model="selectedFilterParams.typeId" :placeholder="$t('选择类型')" style="width:120px" clearable :disabled="loading">
            <el-option v-for="item in typeList" :key="item.id" :label="item.titleZh" :value="item.id" />
          </el-select>
          <el-select v-model="selectedFilterParams.attrId" :placeholder="$t('选择属性')" style="width:120px" clearable :disabled="loading">
            <el-option v-for="item in attrList" :key="item.id" :label="item.attrName" :value="item.id" />
          </el-select>
          <el-input v-model="selectedFilterParams.titleZh" :placeholder="$t('产品关键字')" style="width:120px" clearable  onkeyup="this.value=this.value.replace(/\s+/g, '')" :disabled="loading"/>
          <!--<el-button type="primary" @click="reLoad" :loading="loading">{{$t('搜索')}}</el-button>-->

          <div class="flex">
            <div class="flex-1 flex items-center">{{$t('已选{cnt}个产品', {cnt: choosedList.length})}}</div>
            <el-button :disabled="!choosedList.length" type="text" @click="clearAll">{{$t('全部清除')}}</el-button>
          </div>
        </div>
        <div class="list">
          <div class="item" v-for="(choosed) in selectedList" :key="choosed.id">
            <el-link class="el-icon-delete" @click="remove(choosed)" :disabled="isAllProduct"/> {{choosed.titleZh}}
            <div>{{choosed.titleEn}}</div>
          </div>
        </div>
				<el-pagination :total="filteredList.length" :page-sizes="[100, 200, 300, 500]" :page-size="pageSize" @current-change="rightPage = $event" layout="prev, pager, next, total, sizes" :current-page="rightPage" />
      </el-card>
    </div>
  </div>
</template>
<script>
import {getProductPage, getProductList, getProductIds, getSimpleProductList} 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,
      allTotal: 0, // 全库商品总数
      queryParams: {
        pageNo: 1,
        pageSize: 10000,
        attrId: null,
        titleZh: null,
        typeId: null
      },
      selectedFilterParams:{
        attrId: null,
        titleZh: null,
        typeId: null
      },
      choosedList: [],
      typeList: [],
      attrList: [],
      isAllProduct: false,
      //isAllFiltered: false, // 是否全部搜索结果
      // 是否显示搜索结果勾选，有筛选条件才显示
      showFiltered: false,
      // 左侧页码
      leftPage: 1,
      // 右侧页码
      rightPage: 1,
      // 页大小
      pageSize: 100,
      // 是否选中全选
      isCheckedAll: false
    }
  },
  computed: {
    total(){
      return this.list.length
    },
    ids: {
      get() {
        let arr = []
        this.choosedList.forEach(item => {
          arr.push(item.id)
        })
        return arr
      },
      set(v) {

      }
    },
    // 左侧当前显示的列表
    currentList(){
      return this.list.slice((this.leftPage - 1) * this.pageSize, this.leftPage * this.pageSize)
    },
    // 已选中 且符合筛选的
    filteredList(){
      return this.choosedList.filter(item => {
        if(this.selectedFilterParams.typeId && item.typeId != this.selectedFilterParams.typeId){
          return false
        }
        if(this.selectedFilterParams.attrId && item.attrId != this.selectedFilterParams.attrId){
          return false
        }
        if(this.selectedFilterParams.titleZh && item.titleZh.indexOf(this.selectedFilterParams.titleZh) == -1){
          return false
        }
        return true
      })
    },
    // 已勾选的显示列表，当前分页显示的
    selectedList(){
      return this.filteredList.slice((this.rightPage - 1) * this.pageSize, this.rightPage * this.pageSize)
    }
  },
  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
    }
  },
  async created() {
    getProductTypeList().then(res => this.typeList = res.data)
    getProductAttrList().then(res => this.attrList = res.data)
    await this.reLoad()
    this.ids = this.defaultIds //数据回显
    this.isAllProduct = this.isall
    // 如果有默认商品则获取内容供回显
    if(this.defaultIds.length){
      this.setDefaultChooseProds()
      //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)
        })
      })
    },*/
    //  设置默认选中的商品
    setDefaultChooseProds(){
      this.list.forEach(item => {
        if(this.defaultIds.indexOf(item.id) > -1){
          this.choose(item)
        }
      })
    },
    toggleAll(status){
      this.list.forEach(item => {
        this.toggleCheck(item, status)
      })
    },
    async reLoad() {
      this.queryParams.page = 1
      this.list = []
      await this.getList()
    },
    loadNextPage() {
      if (this.page >= this.pages) {
        return this.$message.error(this.$t('已加载全部'))
      }
      this.queryParams.page++
      this.getList()
    },
    async getList() {
      this.loading = true
      let res = await getSimpleProductList(this.queryParams)
      this.loading = false
      this.list = res.data
      // 2024-01-29根据要求，切换类型后不清空已选中的商品
      /* this.choosedList = []
      this.isCheckedAll = 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 = []
      this.isCheckedAll = false
    }
  }
}
</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>