191 lines
3.6 KiB
Vue
191 lines
3.6 KiB
Vue
<template>
|
|
<view class="_selpage">
|
|
<view class="_show" :class="{_left:left}">
|
|
<view class="btn sm" :class="{dis:disabled}" @tap="selpage">{{btn}}</view>
|
|
<view class="_txt" :style="style2obj(ciystyle, {color:disabled?'var(--bg6)':'var(--txt9)'})" v-if="tvalue.id>0">
|
|
<slot :data="tvalue">
|
|
<view v-html="tvalue.name"></view>
|
|
</slot>
|
|
</view>
|
|
<view class="_txt" :style="style2obj(ciystyle, {color:'var(--txt1)'})" v-else>{{placeholder?placeholder:lang('placeholder.select')}}</view>
|
|
</view>
|
|
<input type="hidden" :name="name" :value="tvalue.id" style="display:none;" />
|
|
<input v-if="hasmore" type="hidden" :name="name+'_more'" :value="tvalue._more" style="display:none;" />
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
behaviors: ['uni://form-field-group'],
|
|
emits: ['change', 'update:modelValue'],
|
|
props: {
|
|
name: {
|
|
type: String
|
|
},
|
|
modelValue: {
|
|
type: [String, Number],
|
|
default: ''
|
|
},
|
|
value: {
|
|
type: [String, Number],
|
|
default: ''
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
initevent: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
ciystyle: {
|
|
type: [String, Object]
|
|
},
|
|
left: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
hasmore: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: '请选择'
|
|
},
|
|
morevalue: {
|
|
type: Object,
|
|
default: {}
|
|
},
|
|
btn: {
|
|
type: String,
|
|
default: '选取'
|
|
},
|
|
page: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
innermore: {},
|
|
v: {
|
|
id: 0,
|
|
_more: ''
|
|
},
|
|
};
|
|
},
|
|
watch: {
|
|
value: {
|
|
handler(newD, oldD) {
|
|
if (newD || oldD)
|
|
this.v = 'value';
|
|
},
|
|
immediate: true
|
|
},
|
|
modelValue: {
|
|
handler(newD, oldD) {
|
|
if (newD)
|
|
this.v = 'modelValue';
|
|
},
|
|
immediate: true
|
|
},
|
|
morevalue: {
|
|
handler(newD, oldD) {
|
|
this.v = this.modelValue || this.value;
|
|
this.innermore = {
|
|
...newD
|
|
};
|
|
},
|
|
immediate: true
|
|
},
|
|
},
|
|
computed: {
|
|
tvalue() {
|
|
var val = '';
|
|
var valmore = {
|
|
...this.innermore
|
|
};
|
|
if (this.v == 'modelValue') {
|
|
if (typeof(this.modelValue) == 'number')
|
|
val = this.modelValue;
|
|
else
|
|
val = this.modelValue;
|
|
valmore.id = val;
|
|
} else if (this.v == 'value') {
|
|
if (typeof(this.value) == 'number')
|
|
val = this.value;
|
|
else
|
|
val = this.value;
|
|
valmore.id = val;
|
|
} else if (this.v instanceof Object) {
|
|
valmore = {
|
|
...this.v
|
|
};
|
|
} else {
|
|
valmore.id = this.v;
|
|
}
|
|
valmore._more = this.setstrparam(valmore);
|
|
return valmore;
|
|
}
|
|
},
|
|
mounted() {
|
|
if (this.initevent) {
|
|
this.$emit('change', {
|
|
name: this.name,
|
|
from: 'init',
|
|
value: {
|
|
...this.tvalue
|
|
}
|
|
});
|
|
}
|
|
},
|
|
methods: {
|
|
selpage(e) {
|
|
if (this.disabled)
|
|
return;
|
|
uni.navigateTo({
|
|
url: this.page + '?sel=true&id=' + this.tvalue.id,
|
|
events: {
|
|
writedata: data => {
|
|
this.v = {
|
|
...data
|
|
};
|
|
this.innermore = {
|
|
...data
|
|
};
|
|
this.$emit('update:modelValue', data.id);
|
|
this.$emit('change', {
|
|
name: this.name,
|
|
from: 'selpage',
|
|
value: {
|
|
...data
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
._selpage {
|
|
position: relative;
|
|
}
|
|
|
|
._selpage ._show {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
flex-direction: row-reverse;
|
|
gap: 0.5em;
|
|
}
|
|
|
|
._selpage ._show._left {
|
|
flex-direction: row;
|
|
}
|
|
|
|
._selpage ._show._left ._txt {
|
|
text-align: left;
|
|
}
|
|
</style> |