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

<template>
	<hg-popup :show="isShow" @close="cancel()" :customStyle="_customStyle">
		<view class="hg-picker">
			<view class="hg-picker-head">
				<view class="hg-picker-head-t1" @click="cancel()">取消</view>
				<view class="hg-picker-head-t2">
					<text>{{title}}</text>
				</view>
				<view :class="['hg-picker-head-t3',{'hg-picker-head-t3-disabled':disabled}]" @click="confirm">确定</view>
			</view>
			<picker-view :value="listSelect" class="hg-picker-info" indicator-class="hg-picker-info-indicator"
				:mask-style="maskStyle" @change="change" @pickstart="disabled=true" @pickend="disabled=false">
				<picker-view-column v-for="(list,i) in _list" :key="i">
					<view v-for="(item,index) in list" :key="index"
						:class="['hg-picker-info-col',{'hg-picker-info-col-run':isRun(item,index,i)}]">
						{{getText(item)}}
					</view>
				</picker-view-column>
			</picker-view>
		</view>
	</hg-popup>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: "",
			},
			range: {
				type: Array,
				default: () => {
					return []
				}
			},
			rangeKey: {
				type: String,
				default: "label"
			},
			rangeKeyId: {
				type: String,
				default: 'id'
			},
			rangeKeyChildren: {
				type: String,
				default: 'children'
			},
		},
		data() {
			return {
				disabled: false,
				isShow: false,
				maskStyle: "background: rgba(51, 51, 51, 0.0);",
				resolve: null,
				listSelect: []
			};
		},
		created: function() {},
		mounted() {},
		computed: {
			_list() {
				const list = []
				let count = 0
				const rangeKeyChildren = this.rangeKeyChildren
				const listSelect = this.listSelect

				function getCount(l, count) {
					const obj = l[Math.min((listSelect[count] || 0), l.length - 1)] || {}
					const ls = obj[rangeKeyChildren]
					list.push(l)
					if (ls) {
						count += 1
						return getCount(ls, count)
					}
				}
				getCount(this.range || [], count)
				// console.log('list is', list)
				return list
			},
			_customStyle() {
				return {
					background: 'transparent'
				}
			},
			_isColumnList() {
				return true
			},
			_modelSelect() {
				let modelSelect
				if (this._isColumnList) {
					const list = []
					this._list.forEach((item, index) => {
						list.push(item[(this.listSelect[index] || 0)])
					})
					modelSelect = list
				} else {
					modelSelect = this.range[(this.listSelect[0] || 0)]
				}
				return modelSelect
			}
		},
		methods: {
			change(e) {
				const value = e?.detail?.value
				if (!value) {
					return
				}
				const list = []
				for (let i = 0; i < value.length; i++) {
					const val = value[i]
					list.push(val || 0)
				}
				this.listSelect = list
				this.$emit('columnchange', {
					index: value,
					value: this._modelSelect
				})
			},
			isRun(item, index, i) {
				if (this._isColumnList) {
					return (this.listSelect[i] || 0) == index
				}
				return (this.listSelect[0] || 0) == index
			},
			getText(item) {
				if (typeof item == "string") {
					return item
				}
				return item[this.rangeKey]
			},
			getColumnText(item) {
				console.log(item)
				return '999'
			},
			show() {
				this.isShow = true
				let _this = this
				return new Promise(function(resolve, reject) {
					_this.resolve = resolve
				})
			},
			cancel() {
				this.isShow = false
				if (this.resolve) {
					this.resolve()
				}
			},
			confirm(e) {
				this.isShow = false
				if (this.disabled) {
					return
				}
				this.$emit('input', this._modelSelect)
				if (this.resolve) {
					this.resolve(this._modelSelect)
				}
			},
		}
	}
</script>

<style lang="scss">
	.hg-picker {
		display: flex;
		flex-direction: column;
		height: 660rpx;
		background: linear-gradient(180deg, #C3E2FF 0%, #FFFFFF 51%, #FFFFFF 100%);
		border-radius: 16rpx 16rpx 0px 0px;

		&-head {
			padding: 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 1rpx solid rgba(51, 51, 51, 0.10);

			&-t1 {
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(51, 51, 51, 0.5);
			}

			&-t2 {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;

				>text {
					font-size: 34rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;
				}
			}

			&-t3 {
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #1A8FFF;

			}

			&-t3-disabled {
				color: rgba(51, 51, 51, 0.5) !important;
			}
		}

		&-info {
			flex: 1;
			margin: 30rpx;
			// padding: 30rpx;

			&-indicator {
				// background: red;
				height: 110rpx;
				// font-size: 42rpx;
				// font-family: PingFangSC-Medium, PingFang SC;
				// font-weight: 500;
				// color: #333333;
			}

			// background: rgba(51, 51, 51, 0.10);
			&-col {
				font-size: 36rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(51, 51, 51, 0.4);
				// background: rgba(51, 51, 51, 0.10);
				display: flex;
				align-items: center;
				justify-content: center;
				// background: red;
			}

			&-col-run {
				font-size: 42rpx !important;
				font-weight: 500 !important;
				color: rgba(51, 51, 51, 1) !important;
			}

			&-mask {
				background: rgba(51, 51, 51, 0.0);
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>