shuju_ui/test/_components/picker/selectMorePickers.vue

<template>
	<view class="sel-box" style="width: 100%;">
		<picker mode="multiSelector" :range="multiSelector" :range-key="rangeKey" v-model="defaultSelector"
			@columnchange="handleColumnChange" @change="handleChange">
			<!-- disable = "true" 是禁用input 防止点击弹出键盘 -->
			<input type="text" disabled="true" v-model="cityData" placeholder="请选择点位地区" placeholder-class="placeholder"
				class="input-box" />
		</picker>
	</view>
</template>

<script>
	// import {
	// 	getRegionIdByPid
	// } from '@/api/taskSchedule.js'
	export default {
		name: "region-picker",
		data() {
			return {
				multiSelector: [],
				rangeKey: 'name',
				defaultSelector: [0, 0, 0],
				provinceList: [],
				cityList: [],
				areaList: [],
				cityData: '',
			};
		},
		mounted() {
			// 初始化一
			this.getRegionListFirst(0, 0, true, () => {
				this.handleColumnChange({
					detail: {
						column: 0,
						// value:0
						value: this.defaultSelector[0] //自定义省
					}
				})
			})
			// 初始化二
			// this.getRegionList(0, '1',false)

			// 不这样做初始化的原因是 这样请求中间一列会缺失 从而导致数据混乱 上面两种方法都可以避免这种情况的出现
			// this.getRegionList(-1,'')
			// this.getRegionList(0, '1')

			// 再次显示组件时值不清空
			// this.cityData = this.$store.state.home.region
		},
		methods: {
			getRegionListFirst(column, id, status = true, callBack = null){
				this.$http.post('boman-system/chinaArea/treeSelect',{pid: id}).then(res=>{
					// console.log(res.data)
					switch (column) {
						case -1:
							this.provinceList = res.data;
							break;
						case 0:
							this.cityList = res.data;
							//当请求市级数据时 县区级数据跟着加载 达到联动效果
							
							break;
						case 1:
							this.areaList = res.data;
							break;
						default:
							break;
					}
					if (column < 2) {
						this.multiSelector.splice(column + 1, 1, res.data)
					}
					callBack && callBack()
					// 初始化二
					if (!status) {
						this.multiSelector.splice(1, 1, this.cityList)
					}

				})
			},
			getRegionList(column, id, status = true, callBack = null) {
				this.$http.post('boman-system/chinaArea/treeSelect',{pid: id}).then(res=>{
					// console.log(res.data)
					switch (column) {
						case -1:
							this.provinceList = res.data;
							break;
						case 0:
							this.cityList = res.data;
							//当请求市级数据时 县区级数据跟着加载 达到联动效果
							this.getRegionList(1, this.cityList[0].areaId);
							break;
						case 1:
							this.areaList = res.data;
							break;
						default:
							break;
					}
					// 当请求县区级数据不再增加列 固定三列
					if (column < 2) {
						this.multiSelector.splice(column + 1, 1, res.data)
					}
					callBack && callBack()
					// 初始化二
					if (!status) {
						this.multiSelector.splice(1, 1, this.cityList)
					}
					console.log(this.multiSelector,11)
				})
				
				// getRegionIdByPid({
				// 	pid: id
				// }).then(res => {
				// 	switch (column) {
				// 		case -1:
				// 			this.provinceList = res;
				// 			break;
				// 		case 0:
				// 			this.cityList = res;
				// 			//当请求市级数据时 县区级数据跟着加载 达到联动效果
				// 			this.getRegionList(1, this.cityList[0].areaId);
				// 			break;
				// 		case 1:
				// 			this.areaList = res;
				// 			break;
				// 		default:
				// 			break;
				// 	}
				// 	// 当请求县区级数据不再增加列 固定三列
				// 	if (column < 2) {
				// 		this.multiSelector.splice(column + 1, 1, res)
				// 	}
				// 	callBack && callBack()
				// 	// 初始化二
				// 	if (!status) {
				// 		this.multiSelector.splice(1, 1, this.cityList)
				// 	}
				// })
			},
			handleColumnChange(event) {
				let item = {}
				switch (event.detail.column) {
					case 0:
						item = this.provinceList[event.detail.value];
						break;
					case 1:
						item = this.cityList[event.detail.value];
						break;
					case 2:
						item = this.areaList[event.detail.value];
						break;
					default:
						break;
				}
				// 当选择省那一列时 给市区两列重新归零
				if (event.detail.column == 0) {
					this.defaultSelector.splice(event.detail.column, 1, event.detail.value)
					this.defaultSelector.splice(1, 1, 0)
					this.defaultSelector.splice(2, 1, 0)
				} else {
					this.defaultSelector.splice(event.detail.column, 1, event.detail.value)
				}
				this.getRegionList(event.detail.column, item.areaId)
			},
			handleChange(info) {
				let arr = []
				info.detail.value.forEach((item, index) => {
					arr.push(this.multiSelector[index][item].regionName)
					if (index == 2) this.$emit('changeCity', this.multiSelector[2][item].areaId)
				})
				this.cityData = arr.join('-')
				this.$store.dispatch('home/setRegion', arr.join('-'))
			},
			// if (event.detail.column == 0) {
			//   this.defaultSelector.splice(event.detail.column, 1, event.detail.value)
			//   this.defaultSelector.splice(1, 1, 0)
			//   this.defaultSelector.splice(2, 1, 0)
			//    } else {
			//    this.defaultSelector.splice(event.detail.column, 1, event.detail.value)
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.sel-box {
		height: 60rpx;
		margin: 36rpx 0;
		border: 1px solid #c1c1c1;
		border-radius: 8rpx;
		text-align: center;
		color: #333333;
		font-size: 22rpx;

		.input-box {
			font-size: 22rpx;
			color: #333333;
			height: 60rpx;
			line-height: 60rpx;
		}

		/deep/ .placeholder {
			font-size: 22rpx;
			color: #BFBFBF;
		}
	}
</style>