<template>
|
<div class="station-select-component" :style="{with:width}">
|
<div class="select-block">
|
<a-select style="width: 100%" placeholder="产线" @change="onChangeLine" v-model="value1" :allowClear="allowClear">
|
<a-select-option v-for="(item,index) in list1" :value="item.productionlineId" :key="'lines-sel-'+index">{{item.productionlineName}}</a-select-option>
|
</a-select>
|
</div>
|
<div class="divider"></div>
|
<div class="select-block">
|
<a-select style="width: 100%" placeholder="工位" v-model="value2" :allowClear="allowClear">
|
<a-select-option v-for="(item,index) in list2" :value="item.takeMaterialsSiteId" :key="'stations-sel-'+index">{{item.takeMaterialsSite}}</a-select-option>
|
</a-select>
|
</div>
|
<div class="mask" v-if="loading">
|
<a-icon type="loading" /> Loading...
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getUserDefaultLine } from '@/utils/util'
|
export default {
|
name:'stationSelectComponent',
|
emits:['input','change'],
|
props:{
|
width:{
|
type:String,
|
default:'100%'
|
},
|
value:{
|
type:Array,
|
default:function(){
|
return []
|
}
|
},
|
allowClear:{
|
type:Boolean,
|
default:false
|
},
|
getLines:{
|
default:function(){
|
return function(){
|
return new Promise(function(resolve){
|
resolve(null)
|
})
|
}
|
}
|
},
|
getStations:{
|
default:function(){
|
return function(){
|
return new Promise(function(resolve){
|
resolve(null)
|
})
|
}
|
}
|
}
|
},
|
data(){
|
return {
|
list1:[],
|
list2:[],
|
value1:undefined,
|
value2:undefined,
|
loading:false
|
}
|
},
|
mounted(){
|
this.init()
|
},
|
watch:{
|
value1(newVal,oldVal){
|
if (newVal!==oldVal) {
|
this.backValue()
|
}
|
},
|
value2(newVal,oldVal){
|
if (newVal!==oldVal) {
|
this.backValue()
|
}
|
}
|
},
|
methods:{
|
clear(){
|
this.value1 = undefined
|
this.value2 = undefined
|
this.list2 = []
|
},
|
init(){
|
this.initValue()
|
this.loading = true
|
this.getLines().then((d)=>{
|
this.list1 = d.data || []
|
this.setDefaultInitLine()
|
this.loading = false;
|
}).catch(()=>{
|
this.loading = false;
|
})
|
},
|
setDefaultInitLine(){
|
let val = getUserDefaultLine(this.$store,this.list1,'productionlineId')
|
if (!val && this.list1.length===1) {
|
val = this.list1[0].productionlineId
|
}
|
this.value1 = val
|
this.changeLine(val)
|
},
|
initValue(){
|
if (this.value[0]) this.value1 = this.value[0]
|
if (this.value[1]) this.value2 = this.value[1]
|
},
|
onChangeLine(val){
|
this.changeLine(val,false)
|
},
|
changeLine(val,init=true){
|
if (val) {
|
this.loading = true;
|
this.getStations(val).then((d)=>{
|
this.list2 = d.data || []
|
if (this.list2.length===1) {
|
let val = this.list2[0].takeMaterialsSiteId
|
this.value2 = val
|
}
|
this.loading = false;
|
}).catch(()=>{
|
this.list2 = []
|
this.value2 = undefined
|
this.loading = false;
|
})
|
} else {
|
if (!init) {
|
this.list2 = []
|
this.value2 = undefined
|
}
|
}
|
},
|
backValue(){
|
this.$emit('input',[this.value1,this.value2])
|
this.$emit('change',[this.value1,this.value2])
|
},
|
getFullValue(){
|
let res = [null,null]
|
for (let i=0;i<this.list1.length;i++) {
|
if (this.list1[i].productionlineId===this.value1) {
|
res[0] = {...this.list1[i]}
|
break;
|
}
|
}
|
for (let i=0;i<this.list2.length;i++) {
|
if (this.list2[i].takeMaterialsSiteId===this.value2) {
|
res[1] = {...this.list2[i]}
|
break;
|
}
|
}
|
return res
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.station-select-component{
|
display: flex;
|
position: relative;
|
.select-block{
|
width: 1px;
|
flex-grow: 1;
|
}
|
.divider{
|
flex-shrink: 0;
|
width: 4px;
|
}
|
.mask{
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background-color: #F0F8FF;
|
overflow: hidden;
|
}
|
}
|
</style>
|
