1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<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>