rhb-server/mes-ui/rhb-app/uni_modules/hgview-ui/components/hg-select/hg-select.vue

<template>
	<view class="hg-top-select">
		<view class="hg-top-select-info" @click="clickPicker()">
			<text v-if="_showText"
				:class="['hg-top-select-info-text',{'hg-top-select-info-text-run':isSelect}]">{{_showText}}</text>
			<text v-else class="hg-placeholder">{{_placeholder}}</text>
			<image src="/static/icon/icon_arrow_2.png" mode=""></image>
		</view>
		<hg-picker-ganged v-if="isGanged" ref="hgPickerGanged" :range="range" :rangeKey="rangeKey"
			:rangeKeyId="rangeKeyId"></hg-picker-ganged>
		<hg-picker v-else ref="hgPicker" :rangeChildren="rangeChildren" :range="range" :rangeKey="rangeKey"></hg-picker>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: [Array, Object, String],
				default: () => {
					return {}
				}
			},
			range: {
				type: [Array, Object],
				default () {
					return [];
				}
			},
			rangeKey: {
				type: String,
				default: 'label'
			},
			rangeKeyId: {
				type: String,
				default: 'id'
			},
			rangeChildren: {
				type: String,
				default: 'children'
			},
			disabled: {
				type: Boolean,
				default:false
			},
			// 显示在picker里边的内容
			title: {
				type: String,
				default: ''
			},
			separator: {
				type: String,
				default: ' '
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			isGanged: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				isSelect: false,
			}
		},
		computed: {
			_showText() {
				if (!this.value) {
					return ""
				}
				let text = ""
				if (typeof(this.value) == 'string') {
					text = this.value
				} else if (Array.isArray(this.value)) {
					this.value.forEach((val, index) => {
						let t = val
						if (typeof(val) == 'object') {
							t = val[this.rangeKey]
						}
						if (index == 0) {
							text = t
						} else {
							text = `${text}${this.separator}${t}`
						}
					})
				} else if (typeof(this.value) == 'object') {
					text = this.value[this.rangeKey]
					if (!text) {
						// console.log('text is no')
						const obj = this.range.find(val => {
							return (val[this.rangeKeyId] == this.value[this.rangeKeyId]) && val[this.rangeKeyId]
						}) || {}
						// console.log(obj,'?',this.value[this.rangeKeyId])
						text = obj[this.rangeKey] || ''
					}
				}
				if (!text && this.title) {
					return this.title
				}
				return text
			},
			_placeholder() {
				if (this.placeholder && typeof this.placeholder == "string" && this.placeholder != "true") {
					if (this.placeholder == '请选择' && this.range.length == 0) {
						return '暂无数据'
					}
					return this.placeholder
				}
				return ""
			},
		},
		methods: {
			async clickPicker() {
				console.log(this.disabled)
				if(this.disabled){
					return
				}
				 this.isSelect = true
				let res
				if (this.isGanged) {
					res = await this.$refs.hgPickerGanged.show()
				} else {
					res = await this.$refs.hgPicker.show()
				}
				this.isSelect = false
				if (res) {
					this.$emit("input", res)
				}
			}
		}
	}
</script>

<style lang="scss">
	.hg-top-select {
		display: flex;
		flex-direction: column;

		&-info {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			height: 86rpx;

			&-text {
				font-size: 28rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: rgba(51, 51, 51, 1);
			}

			&-text-run {
				color: #1A8FFF !important;
			}

			>image {
				margin-left: 5rpx;
				width: 34rpx;
				height: 34rpx;
			}
		}
	}
</style>