87 lines
1.7 KiB
Vue
87 lines
1.7 KiB
Vue
<template>
|
||
<el-select
|
||
v-model="selected"
|
||
:placeholder="placeholder"
|
||
:disabled="disabled"
|
||
filterable
|
||
clearable
|
||
@change="onChange"
|
||
style="width: 100%"
|
||
:value-key="'productId'"
|
||
>
|
||
<el-option
|
||
v-for="item in productOptions"
|
||
:key="item.productId"
|
||
:label="`${item.productName}（${item.productCode}）`"
|
||
:value="item.productId"
|
||
>
|
||
<div class="option-label">
|
||
<span class="product-name">{{ item.productName }}</span>
|
||
<span class="product-code">{{ item.productCode }}</span>
|
||
</div>
|
||
</el-option>
|
||
</el-select>
|
||
</template>
|
||
|
||
<script>
|
||
import { listProduct } from '@/api/wms/product';
|
||
|
||
export default {
|
||
name: 'SemiSelect',
|
||
props: {
|
||
value: [String, null],
|
||
disabled: Boolean,
|
||
placeholder: {
|
||
type: String,
|
||
default: '请选择产品'
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
productOptions: [],
|
||
selected: this.value
|
||
};
|
||
},
|
||
watch: {
|
||
value(val) {
|
||
this.selected = val;
|
||
},
|
||
selected(val) {
|
||
this.$emit('input', val);
|
||
}
|
||
},
|
||
created() {
|
||
this.getProductOptions();
|
||
},
|
||
methods: {
|
||
getProductOptions() {
|
||
listProduct({ pageNum: 1, pageSize: 1000, type: 'semi' }).then(res => {
|
||
this.productOptions = res.rows || [];
|
||
});
|
||
},
|
||
onChange(val) {
|
||
// 通过val找到item
|
||
const product = this.productOptions.find(p => p.productId === val);
|
||
this.$emit('change', product);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.option-label {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.product-name {
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
.product-code {
|
||
font-size: 12px;
|
||
color: #999;
|
||
margin-left: 10px;
|
||
}
|
||
</style>
|