uniapp wot-design-uni wd-col-picker组件 接口自定义地址数据JS版

<template>
	<view class="page">
		<view style="margin-top: 20rpx;">
			<wd-form ref="form" :model="model" :errorType="errorType">
				<wd-cell-group border>
					<wd-input label="联系人" label-width="150rpx" prop="name" clearable v-model="model.name"
						placeholder="请输入联系人" :rules="[{ required: true, message: '请填写联系人' }]" />
					<wd-input label="手机号" label-width="150rpx" prop="phone" clearable v-model="model.phone"
						placeholder="请输入手机号" :rules="[{ required: true, message: '请填写手机号' }]" />
					<wd-col-picker required label="地址" placeholder="请选择地址" label-width="150rpx" prop="address"
						value-key='code' v-model="model.address" :columns="columns" :column-change="columnChange"
						@confirm="handleConfirm" />
					<wd-input label="详细地址" label-width="150rpx" prop="phone" clearable v-model="model.phone"
						placeholder="请输入详细地址" :rules="[{ required: true, message: '请填写详细地址' }]" />
					<wd-cell required title="默认地址" title-width="150rpx" prop="defaultAddress">
						<view class="custom-value" style="height: 32px;">
							<wd-switch v-model="model.defaultAddress" />
						</view>
					</wd-cell>
				</wd-cell-group>
				<view class="footer" style='margin: 80rpx; 30rpx'>
					<wd-button type="primary" size="large" @click="handleSubmit" block>保存</wd-button>
					<view v-if="type == 'edit'" style="margin-top: 40rpx;">
						<wd-button type="info" size="large" @click="onDelete" block>删除</wd-button>
					</view>

				</view>
			</wd-form>
		</view>

	</view>
</template>

<script setup>
	import { ref, reactive, getCurrentInstance } from 'vue';
	import { useMessage, useToast } from '@/uni_modules/wot-design-uni'
	import { onLoad } from '@dcloudio/uni-app';

	const { proxy } = getCurrentInstance();
	const { success: showSuccess } = useToast()
	const errorType = ref('message')
	const type = ref('add')
	const model = reactive({
		name: '',
		phone: '',
		address: [], // 存储选中地址的code数组
		defaultAddress: true,
	});
	const rawData = ref([])
	const columns = ref([
		[]
	]); // 初始只包含第一列
	const form = ref()

	onLoad((e) => {
		if (e.type) {
			type.value = e.type
		}
		getAreaList()
	})

	// 根据父级code查找子项
	const findChildrenByCode = (parentCode) => {
		const findInArray = (arr, code) => {
			for (const item of arr) {
				if (item.code === code) return item;
				if (item.children) {
					const found = findInArray(item.children, code);
					if (found) return found;
				}
			}
		};

		const parent = findInArray(rawData.value, parentCode);
		return parent ? parent.children || [] : [];
	};

	const getAreaList = async () => {
		try {
			const { data } = await proxy.$api.getlistArea();
			rawData.value = data;
			// 初始化第一列数据
			if (model.address.length > 0) {
				columns.value = [
					data.map(item => ({ code: item.code, label: item.name })),
					findChildrenByCode(model.address[0])?.map((item) => {
						return {
							code: item.code,
							label: item.name
						}
					}),
					findChildrenByCode(model.address[1])?.map((item) => {
						return {
							code: item.code,
							label: item.name
						}
					}),
				]
			} else {
				columns.value = [
					data.map(item => ({ code: item.code, label: item.name }))
				]
			}

			console.log(columns.value, 'columns.value')
		} catch (error) {
			console.error('获取区域列表失败', error);
		}
	};

	// 修改后的columnChange处理
	const columnChange = ({ selectedItem, resolve, finish }) => {
		if (!selectedItem) {
			// 初始化加载第一列后可能需要处理
			return finish();
		}

		const children = findChildrenByCode(selectedItem.code);
		if (children && children.length > 0) {
			const nextColumn = children.map(item => ({
				code: item.code,
				label: item.name,
				// 如果有子节点继续传递
				children: item.children || []
			}));
			resolve(nextColumn);
		} else {
			finish();
		}
	};

	// 确认选择后的处理
	const handleConfirm = (value) => {

	};



	function handleSubmit() {
		console.log('提交')
		form.value
			.validate()
			.then(({
				valid,
				errors
			}) => {
				if (valid) {
					showSuccess({
						msg: '校验通过'
					})
				}
			})
			.catch((error) => {
				console.log(error, 'error')
			})
	}

	function onDelete() {

	}
</script>

<style lang="scss" scoped>
	.footer {
		margin-top: 50rpx;
	}
</style>

// 根据父级code查找子项
	const findChildrenByCode = (parentCode) => {
		const findInArray = (arr, code) => {
			for (const item of arr) {
				if (item.code === code) return item;
				if (item.children) {
					const found = findInArray(item.children, code);
					if (found) return found;
				}
			}
		};

		const parent = findInArray(rawData.value, parentCode);
		return parent ? parent.children || [] : [];
	};

	const getAreaList = async () => {
		try {
			const { data } = await proxy.$api.getlistArea();
			rawData.value = data;
			// 初始化第一列数据
			if (model.address.length > 0) {
				columns.value = [
					data.map(item => ({ code: item.code, label: item.name })),
					findChildrenByCode(model.address[0])?.map((item) => {
						return {
							code: item.code,
							label: item.name
						}
					}),
					findChildrenByCode(model.address[1])?.map((item) => {
						return {
							code: item.code,
							label: item.name
						}
					}),
				]
			} else {
				columns.value = [
					data.map(item => ({ code: item.code, label: item.name }))
				]
			}

			console.log(columns.value, 'columns.value')
		} catch (error) {
			console.error('获取区域列表失败', error);
		}
	};

	// 修改后的columnChange处理
	const columnChange = ({ selectedItem, resolve, finish }) => {
		if (!selectedItem) {
			// 初始化加载第一列后可能需要处理
			return finish();
		}

		const children = findChildrenByCode(selectedItem.code);
		if (children && children.length > 0) {
			const nextColumn = children.map(item => ({
				code: item.code,
				label: item.name,
				// 如果有子节点继续传递
				children: item.children || []
			}));
			resolve(nextColumn);
		} else {
			finish();
		}
	};