index.vue

<template>
    <el-select
        v-model="index"
        filterable
        clearable
        remote
        reserve-keyword
        :placeholder="$t('请输入商品关键词')"
        :disabled="disabled"
        :remote-method="remoteMethod"
        @focus="onFocus"
        @clear="onClear"
        :loading="loading">
        <el-option
        v-for="(item, index) in list"
        :key="item.id"
        :label="item['title' + lang] + (item.auditStatus === 2 ? '' : `(${lang === 'Zh' ? '待确定' : 'To be determined'})`)"
        :value="index">
          <span style="float: left">{{ item['title' + lang] }}</span>
          <span style="float: right; color: #c76e6e; font-size: 13px">
            {{ item.auditStatus === 2 ? '' : (lang === 'Zh' ? '待确定' : 'To be determined') }}
          </span>
        </el-option>
    </el-select>
</template>
<script>
import {getProduct, getProductPage} from '@/api/ecw/product'

export default {
    props:{
        productType: [String, Number],
        value: [String, Number],
        disabled: Boolean,
        lang: {
            type: String,
            default: 'Zh'
        },
        // 是否显示待确认商品，不传默认不显示
        determined: {
          type: Boolean,
          default: false
        },
        // 是否显示已有商品，不传默认
        status: {
          type: [String, Number],
          default: null
        },
        // 为true时阻挡第一次$emit('change')，用于阻止入仓修改初始化时时覆盖了已修改的入仓属性
        protectOnce: {
            type: Boolean,
            default: false
        }
    },
    data(){
        return {
            index: null,
            list:[],
            loading: false,
            // 是否阻止过$emit('change')
            hasProtectOnce: false
        }
    },
    watch:{
        index(val, oldVal){
            let productId = val !== '' && val !== null ? this.list[val].id : null
            // console.log('index val', val, oldVal, productId)
            this.$emit('input', productId)
            if (this.protectOnce && !this.hasProtectOnce) {
              this.hasProtectOnce = true
            } else {
                this.$emit('change', val !== '' && val !== null ? this.list[val] : null)
            }

        },
        value(val){
            // console.log('初始化内容', val)
            this.init()
        },
        // 类型变了，清空内容
        productType(){
            this.list = []
        }
    },
    created(){
        // console.log('created', this.value, this.lang)
        this.init()
    },
    methods:{
        init(){
            if(!this.value){
                this.index = null
                return
            }
            let index = this.list.findIndex(item => item.id == this.value)
            if(index < 0){
                getProduct(this.value).then(res => {
                    this.list.unshift(res.data)
                    this.$nextTick(() => {
                        this.index = 0
                    })
                })
            }else this.index = index
        },
        onFocus(){
            this.$emit('focus')
            if(!this.list.length){
                this.remoteMethod()
            }
        },
        onClear(){
            this.list = []
        },
        remoteMethod(keyword){
            let params = {
                pageSize: keyword ? 100000 : 10,
                filter: !this.determined,
                status:this.status
            }
            if(this.productType){
                params.typeId = this.productType
            }
            params.titleZh = keyword
            this.loading = true
            getProductPage(params)
                .then(res => this.list = res.data.list)
                .finally(() => this.loading = false)
        }
    }
}
</script>