leromro-mini/components/pickerAddress/pickerAddress.vue

<template>
	<!-- 地址选择器组件 -->
	<view>
		<picker @change="bindPickerChange" @columnchange="columnchange" :range="array" range-key="name" :value="value"
			mode="multiSelector">
			<slot></slot>
		</picker>
	</view>
</template>

<script>
// import AllAddress from './areadata.js'
import AllAddress from './address.js'
let selectVal = ['', '', '']
let selectCode = ['', '', '']
export default {
	data() {
		return {
			value: [0, 0, 0],
			array: [],
			index: 0
		}
	},
	props: {
		selectValue: {
			type: Array,
			default: [0, 0, 0]
		}
	},
	created() {
		this.value = this.selectValue
		this.initSelect()
	},
	watch: {
		selectValue: {
				handler(newVal) {
					console.log('selectValue',this.selectValue);
					this.value = this.selectValue
					this.initSelect()
				},
				immediate: true
			}
		},
	methods: {
		// 初始化地址选项
		initSelect() {
			this.updateSourceDate() // 更新源数据
				.updateAddressDate() // 更新结果数据
				.$forceUpdate()  // 触发双向绑定
		},
		// 地址控件改变控件
		columnchange(d) {
			this.updateSelectIndex(d.detail.column, d.detail.value) // 更新选择索引
				.updateSourceDate() // 更新源数据
				.updateAddressDate() // 更新结果数据
				.$forceUpdate()  // 触发双向绑定
		},

		/**
		 * 更新源数据
		 * */
		updateSourceDate() {
			// console.log(AllAddress, '>>>>>>>AllAddress');
			this.array = []
			// this.array[0] = AllAddress.map(obj => {
			// 	return { name: obj.name }
			// })
			// this.array[1] = AllAddress[this.value[0]].city.map(obj => {
			// 	return { name: obj.name }
			// })
			// this.array[2] = AllAddress[this.value[0]].city[this.value[1]].area.map(obj => { 
			// 	return { name: obj }
			// })


			this.array[0] = AllAddress.map(obj => {
				return {
					name: obj.name,
					code: obj.code
				}
			})
			this.array[1] = AllAddress[this.value[0]].children.map(obj => {
				return {
					name: obj.name,
					code: obj.code
				}
			})
			this.array[2] = AllAddress[this.value[0]].children[this.value[1]].children.map(obj => {
				return {
					name: obj.name,
					code: obj.code
				}
			})
			return this
		},

		/**
		 * 更新索引
		 * */
		updateSelectIndex(column, value) {
			let arr = JSON.parse(JSON.stringify(this.value))
			arr[column] = value
			if (column === 0) {
				arr[1] = 0
				arr[2] = 0
			}
			if (column === 1) {
				arr[2] = 0
			}
			this.value = arr
			return this
		},

		/**
		 * 更新结果数据 
		 * */
		updateAddressDate() {
			selectVal[0] = this.array[0][this.value[0]].name
			selectVal[1] = this.array[1][this.value[1]].name
			selectVal[2] = this.array[2][this.value[2]].name

			selectCode[0] = this.array[0][this.value[0]].code
			selectCode[1] = this.array[1][this.value[1]].code
			selectCode[2] = this.array[2][this.value[2]].code


			return this
		},

		/**
		 * 点击确定
		 * */
		bindPickerChange(e) {
			this.$emit('change', {
				index: this.value,
				data: selectVal,
				code: selectCode
			})
			return this
		}
	}
}
</script>

<style></style>