<template>
|
<view class="station-select-form-item-compontent">
|
<view class="p-form-label" v-if="label"><text v-if="required" class="required-tag">*</text>{{label}}：</view>
|
<view class="form-row">
|
<view class="mask" @tap.stop="" v-if="disabled || loading">
|
<template v-if="loading">
|
<u-loading-icon color="#f0f8ff" />
|
<text style="margin-left:20rpx;color:#f0f8ff;">Loading...</text>
|
</template>
|
</view>
|
<view class="form-items-view">
|
<view class="select-block" @tap.stop="onOpenPicker1">
|
<view class="input-view">
|
<text v-if="!value1" class="placeholder">{{placeholder1}}</text>
|
<text v-else>{{valueLabel1}}</text>
|
</view>
|
<view class="close-view" @tap.stop="onClear1" v-if="value1 && clearable">
|
<view class="close-circle">
|
<u-icon
|
name="close"
|
size="11"
|
color="#ffffff"
|
customStyle="line-height: 12px"
|
></u-icon>
|
</view>
|
</view>
|
<view class="right-icon-view"><u-icon name="arrow-down" color="#909193" :size="24"></u-icon></view>
|
</view>
|
<view class="divider"></view>
|
<view class="select-block" @tap.stop="onOpenPicker2">
|
<view class="input-view">
|
<text v-if="!value2" class="placeholder">{{placeholder2}}</text>
|
<text v-else>{{valueLabel2}}</text>
|
</view>
|
<view class="close-view" @tap.stop="onClear2" v-if="value2 && clearable">
|
<view class="close-circle">
|
<u-icon
|
name="close"
|
size="11"
|
color="#ffffff"
|
customStyle="line-height: 12px"
|
></u-icon>
|
</view>
|
</view>
|
<view class="right-icon-view"><u-icon name="arrow-down" color="#909193" :size="24"></u-icon></view>
|
</view>
|
</view>
|
</view>
|
<view class="msg-row" v-if="msg" :class="[msgType==='info'?'info-type':'']">{{msg}}</view>
|
|
<easy-picker :visible.sync="pickerVisible1" :list="list1" :value-field="valueField1" :label-field="labelField1" @select="onPickerSelect1" />
|
<easy-picker :visible.sync="pickerVisible2" :list="list2" :value-field="valueField2" :label-field="labelField2" @select="onPickerSelect2" />
|
</view>
|
</template>
|
|
<script>
|
import EasyPicker from '@/components/EasyPicker.vue'
|
const LINE_VALUE_FIELD = 'productionlineId'
|
const LINE_LABEL_FIELD = 'productionlineName'
|
const STATION_VALUE_FIELD = 'takeMaterialsSiteId'
|
const STATION_LABEL_FIELD = 'takeMaterialsSite'
|
export default {
|
name:'stationSelectFormItemComponent',
|
components:{EasyPicker},
|
emits:['input','select'],
|
props:{
|
value:{
|
type:Array,
|
default:function(){
|
return []
|
}
|
},
|
label:{
|
type:String,
|
default:''
|
},
|
placeholder1:{
|
type:String,
|
default:'产线'
|
},
|
placeholder2:{
|
type:String,
|
default:'工位'
|
},
|
msg:{
|
type:String,
|
default:''
|
},
|
msgType:{
|
type:String,
|
default:'error'
|
},
|
disabled:{
|
type:Boolean,
|
default:false
|
},
|
clearable:{
|
type:Boolean,
|
default:true
|
},
|
required:{
|
type:Boolean,
|
default:false
|
}
|
},
|
data(){
|
return {
|
list1:[],
|
list2:[],
|
value1:undefined,
|
value2:undefined,
|
valueLabel1:undefined,
|
valueLabel2:undefined,
|
valueObj1:null,
|
valueObj2:null,
|
pickerVisible1:false,
|
valueField1:LINE_VALUE_FIELD,
|
labelField1:LINE_LABEL_FIELD,
|
pickerVisible2:false,
|
valueField2:STATION_VALUE_FIELD,
|
labelField2:STATION_LABEL_FIELD,
|
loading:false
|
}
|
},
|
mounted(){
|
this.init()
|
},
|
methods:{
|
init(){
|
this.loading = true
|
this.getLines((f)=>{
|
if (f) {
|
this.setChangeValues(()=>{
|
this.loading = false
|
})
|
} else {
|
this.loading = false
|
}
|
})
|
},
|
setChangeValues(callback){
|
if (this.value) {
|
if (this.value[0]) {
|
this.value1 = this.value[0]
|
this.valueLabel1 = this.getLineLabelByValue(this.value1)
|
this.getStations((f)=>{
|
if (f) {
|
if (this.value[1]) {
|
this.value2 = this.value[1]
|
this.valueLabel2 = this.getStationLabelByValue(this.value2)
|
this.backValue()
|
}
|
callback && callback(true)
|
} else {
|
callback && callback(false)
|
}
|
})
|
} else {
|
callback && callback(true)
|
}
|
} else {
|
callback && callback(true)
|
}
|
},
|
getLineLabelByValue(val) {
|
let res = val;
|
for (let i=0;i<this.list1.length;i++) {
|
if (this.list1[i][LINE_VALUE_FIELD]===val) {
|
this.valueObj1 = this.list1[i]
|
res = this.list1[i][LINE_LABEL_FIELD]
|
break
|
}
|
}
|
return res
|
},
|
getStationLabelByValue(val) {
|
let res = val;
|
for (let i=0;i<this.list2.length;i++) {
|
if (this.list2[i][STATION_VALUE_FIELD]===val) {
|
this.valueObj2 = this.list2[i]
|
res = this.list2[i][STATION_LABEL_FIELD]
|
break
|
}
|
}
|
return res
|
},
|
getLines(callback){
|
this.$api.get('GetProductionlineList',{},{block:'station',loading:false}).then((d)=>{
|
this.list1 = d || []
|
if (this.list1.length===1) {
|
this.valueObj1 = this.list1[0]
|
this.value1 = this.list1[0][LINE_VALUE_FIELD]
|
this.valueLabel1 = this.list1[0][LINE_LABEL_FIELD]
|
this.backValue()
|
}
|
callback && callback(true)
|
}).catch((_errmsg)=>{
|
this.clearAllValue()
|
this.backValue()
|
callback && callback(false)
|
})
|
},
|
getStations(callback,isInit=false){
|
this.$api.get('GetStationList',{id:this.value1},{block:'station',loading:false}).then((d)=>{
|
this.list2 = d || []
|
if (this.list2.length===1) {
|
this.valueObj2 = this.list2[0]
|
this.value2 = this.list2[0][STATION_VALUE_FIELD]
|
this.valueLabel2 = this.list2[0][STATION_LABEL_FIELD]
|
} else {
|
this.clearValue2()
|
}
|
this.backValue()
|
callback && callback(true)
|
}).catch((_errmsg)=>{
|
this.list2 = []
|
this.clearValue2()
|
this.backValue()
|
callback && callback(false)
|
})
|
},
|
onOpenPicker1(){
|
if (this.list1.length<=0) return false
|
this.pickerVisible1 = true
|
},
|
onOpenPicker2(){
|
if (this.list2.length<=0) return false
|
this.pickerVisible2 = true
|
},
|
onPickerSelect1(value,selection){
|
if (value===this.value1) return false
|
this.value1 = value
|
this.valueObj1 = selection
|
this.valueLabel1 = selection[LINE_LABEL_FIELD]
|
this.loading = true
|
this.getStations(()=>{
|
this.backSelect()
|
this.loading = false
|
})
|
},
|
onPickerSelect2(value,selection){
|
if (value===this.value2) return false
|
this.value2 = value
|
this.valueObj2 = selection
|
this.valueLabel2 = selection[STATION_LABEL_FIELD]
|
this.backValue()
|
this.backSelect()
|
},
|
onClear1(){
|
this.clearAllValue()
|
this.list2 = []
|
this.backValue()
|
},
|
onClear2(){
|
this.clearValue2()
|
this.backValue()
|
},
|
clearAllValue(){
|
this.clearValue1()
|
this.clearValue2()
|
},
|
clearValue1(){
|
this.value1 = undefined
|
this.valueObj1 = null
|
this.valueLabel1 = undefined
|
},
|
clearValue2(){
|
this.value2 = undefined
|
this.valueObj2 = null
|
this.valueLabel2 = undefined
|
},
|
backValue(){
|
this.$emit('input',[this.value1,this.value2])
|
},
|
backSelect(){
|
this.$emit('select',[this.value1,this.value2],[{...this.valueObj1},{...this.valueObj2}])
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.station-select-form-item-compontent {
|
width: 100%;
|
.p-form-label{
|
font-size: 32rpx;
|
color: $u-tips-color;
|
padding-bottom: 12rpx;
|
padding-left: 20rpx;
|
.required-tag{
|
color:#ff0000;
|
}
|
}
|
.form-row{
|
width: 100%;
|
height: 90rpx;
|
overflow: hidden;
|
position: relative;
|
.form-items-view {
|
height: 100%;
|
width: 100%;
|
display: flex;
|
.divider{
|
width: 20rpx;
|
flex-shrink: 0;
|
}
|
.select-block{
|
width: 1%;
|
flex-grow: 1;
|
background-color: $uni-bg-color;
|
display: flex;
|
align-items: center;
|
.close-view,.right-icon-view{
|
flex-shrink: 0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.right-icon-view{
|
padding-right: 10rpx;
|
}
|
.close-view{
|
.close-circle{
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
background-color: #c6c7cb;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
transform: scale(0.82);
|
margin-left: 4px;
|
}
|
}
|
.input-view{
|
flex-grow: 1;
|
padding-left: 20rpx;
|
font-size: 30rpx;
|
white-space:nowrap;
|
overflow:hidden;
|
text-overflow:ellipsis;
|
color: rgb(48, 49, 51);
|
.placeholder{
|
color: rgb(192, 196, 204);
|
}
|
}
|
}
|
}
|
&>.mask{
|
background-color: #000;
|
opacity: 0.25;
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 100;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #f2f2f2;
|
}
|
}
|
.msg-row{
|
padding: 6rpx 20rpx 0 20rpx;
|
line-height: 1.3;
|
font-size: 24rpx;
|
color: $u-error;
|
word-break:break-all;
|
word-wrap:break-word;
|
&.info-type{
|
color:$color-blue;
|
}
|
}
|
}
|
</style>
|
