pinganxiaoyuan/monitorMobile/components/selectTree.vue

<template>
	<view @touchmove.stop @touch.stop>
		<myCell v-show="cellVisible" :title="title" isLink :border="false" @click="show = true"></myCell>
		<u-popup :show="show" mode="bottom" :closeable="true" :round="10" @close="close" @open="open">
			<view class="title">
				{{popupTitle}}
			</view>
			<view>
				<u-tabs :list="tabsList" :current="tabIndex" @change="tabsChange" :activeStyle="{
				    color: '#000000',
				}" itemStyle="height:84rpx;width:33.33%;box-sizing:border-box;background:#fff;border-top:1rpx solid rgba(0,0,0,0.03)"></u-tabs>
				<view v-for="(item) in tabsList" :key="item.value">
					<template v-if="tabIndex == item.value">
						<u-radio-group v-model="selectValue" iconPlacement="right" placement="column" @change="change"
							borderBottom>
							<u-radio v-for="(item,index) in selectOptions" :key="index" :label="item.label"
								:name="item.value"></u-radio>
						</u-radio-group>
					</template>
				</view>
				<view style="padding: 36rpx 50rpx">
					<u-button @click="cofirm" type="primary" style="border-radius: 36rpx;height: 72rpx;"
						text="确定"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import myCell from "@/components/cell.vue"
	export default {
		name: "selectRadio",
		components: {
			myCell
		},
		props: {
			value: {
				default: () => [],
				type: Array
			},
			labels: {
				default: () => [],
				type: Array
			},
			placeholder: {
				default: '请选择'
			},
			popupTitle: {
				default: "请选择",
				type: String
			},
			cellVisible: {
				default: true,
			},
		},
		data() {
			return {
				show: false,
				title: this.labels.join('/') || this.placeholder,
				tabsList: [{
						name: "系部",
						cate:"系部",
						value: 0,
						disabled: false,
						list: [{
							value: 222,
							label: '信息系'
						}, {
							value: 333,
							label: '金融系'
						}]
					},
					{
						name: "专业",
						cate:"专业",
						value: 1,
						disabled: true,
						list: [{
							value: 222,
							label: '计算机应用'
						}, {
							value: 333,
							label: '土木工程'
						}]
					},
					{
						name: "班级",
						cate:"班级",
						value: 2,
						disabled: true,
						list: [{
							value: 222,
							label: '1班'
						}, {
							value: 333,
							label: '2班'
						}]
					},
				],
				tabIndex: 0,
				selectValue: null,
				selectOptions: [],

				selectValues: this.value,
				selectLabels: [],
			};
		},
		mounted() {
			// 获取第一个tab的selectOptions
		},
		methods: {
			close() {
				this.show = false
			},
			// 打开选择弹框
			open() {
				this.selectValues = this.value || []
				this.title = this.labels.join('/') || this.placeholder
				if(!this.selectValues.length){
					// 展示tabs第一个数据
					this.tabIndex = 0
				}else{
					// 展示tabs最后一个数据
					this.tabIndex = 2
				}
				this.setSelectOptions()
				this.show = true
			},
			// 设置单选列表数据
			setSelectOptions(){
				switch(this.tabIndex){
					case 0:
						this.selectOptions = this.tabsList[0].list
						break
					case 1:
						this.selectOptions = this.tabsList[1].list
						break
					case 2:
						this.selectOptions = this.tabsList[2].list
						break
				}
			},
			// 单选改变
			change(e) {
				// 赋值
				this.selectValues[this.tabIndex] = e
				let obj = this.selectOptions.find(e1 => e1.value == e)
				this.selectLabels[this.tabIndex] = obj.label
				// 切换tab
				if (this.tabIndex < this.tabsList.length - 1) {
					let nextItem = this.tabsList[this.tabIndex + 1]
					this.tabsChange(nextItem)
				}
				if(this.tabIndex == this.tabsList.length - 1){
					this.tabsList[this.tabIndex].name = obj.label
				}
			},
			// 切换tab
			tabsChange(item) {
				if (this.tabIndex == item.value) return
				this.tabIndex = item.value
				setTimeout(() => {
					this.setSelectOptions()
					this.selectValue = null
					this.initTabs()
				}, 150)
			},
			// 初始化tab数据
			initTabs() {
				for (let item of this.tabsList) {
					if (item.value > this.tabIndex) {
						item.disabled = true
						this.selectValues[item.value] = ''
						this.selectLabels[item.value] = ''
					} else if (item.value < this.tabIndex) {
						item.disabled = false
					} else {
						item.disabled = false
						this.selectValues[item.value] = ''
						this.selectLabels[item.value] = ''
					}
					item.name = this.selectLabels[item.value]||item.cate
				}
			},
			// 确定
			cofirm() {
				if (this.selectValues[2]) {
					this.$emit("input", this.selectValues)
					this.$emit("update:labels", this.selectLabels)
					this.$emit("change", this.selectValues)
					this.title = this.selectLabels.join('/')
					this.close()
				}else{
					this.$emit("input", [])
					this.$emit("update:labels", [])
					this.$emit("change", [])
					this.title = this.placeholder
					this.close()
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.title {
		color: #000000;
		font-size: 32rpx;
		text-align: center;
		line-height: 100rpx;
	}

	.u-radio-group {
		width: 92%;
		height: 680rpx;
		overflow-y: auto;
		padding: 0 30rpx;

		.u-cell {
			background-color: #fff;
			border-radius: 20rpx 20rpx 0 0;
			padding: 24rpx 0;
		}
	}

	.u-checkbox-group {
		width: 92%;
		height: 680rpx;
		overflow-y: auto;
		padding: 0 30rpx;

		.u-cell {
			background-color: #fff;
			border-radius: 20rpx 20rpx 0 0;
			padding: 24rpx 0;
		}
	}

	.u-border-bottom {
		border-color: #F6F6F6 !important;
	}

	.u-radio {
		margin-top: 18rpx;
	}

	.u-checkbox {
		margin-top: 18rpx;
	}
</style>