<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>