index.vue

<template>
    <el-row class="" :gutter="10">
        <el-col :span="10">
            <el-card>
                <div slot="header" class="header">
                    <el-input v-model="queryParams.searchKey" :placeholder="$t('用户名/手机/邮箱')" style="width:200px" />
                    <dict-selector :type="DICT_TYPE.USER_TYPE" v-model="queryParams.customerType" style="width:100px" />
                    <el-button type="primary" @click="reLoad">{{$t('搜索')}}</el-button>
                </div>
                <div class="list">
                    <div class="item" v-for="item in list" :key="item.id">
                        <el-link class="el-icon-plus" @click="choose(item)" :disabled="customerIds.indexOf(item.id) > -1" />
                        {{item.name}} （{{item.defaultContactName}}）
                    </div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="10">
            <el-card>
                <div slot="header" class="header">
                    {{$t('已选客户')}}
                </div>
                <div class="list">
                    <div class="item" v-for="item in choosedList" :key="item.id">
                        <el-link class="el-icon-delete" @click="remove(item)" />
                        {{item.name}} （{{item.defaultContactName}}）
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>
<script>
import {getCustomerSelect, getCustomerList} from '@/api/ecw/customer'
export default {
    props:{
        value: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data(){
        return {
            list:[],
            queryParams:{
                page: 1,
                name: null,
                level: null
            },
            choosedList:[]
        }
    },
    computed:{
        customerIds(){
            let arr = []
            this.choosedList.forEach(item => {
                arr.push(item.id)
            })
            return arr
        }
    },
    watch:{
        customerIds(val){
            this.$emit('input', val)
        },
        value(val){
            if(Array.from(new Set(val)).sort().join(',') != Array.from(new Set(this.customerIds)).sort().join(',')){
                this.getChoosedList()
            }
        }
    },
    created(){
        /* if(this.value && this.value.length){
            this.getChoosedList()
        } */
        this.reLoad()
    },
    methods:{
        getChoosedList(){
            if(!this.value || !this.value.length){
                return
            }
            getCustomerList({ids: this.value.join(',')})
                .then(res => {
                    this.$set(this, 'choosedList', res.data)
                })
        },
        reLoad(){
            this.queryParams.page = 1
            this.list = []
            this.getList()
        },
        loadNextPage(){
            if(this.page >= this.pages){
                return this.$message.info(this.$t('已加载全部'))
            }
            this.queryParams.page ++
            this.getList()
        },
        getList(){
            getCustomerSelect(this.queryParams).then(res => {
                this.list = res.data
            })
        },
        choose(customer){
            this.choosedList.push(customer)
        },
        remove(customer){
            this.choosedList.forEach((item,index) => {
                if(item.id==customer.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;
}
</style>