jobsys-mpower/components/form/MpAddress.jsx

Enhanced component based on Taro & NutUI

import { computed, defineComponent, ref, watch } from "vue"
import { Cascader } from "@nutui/nutui-taro"
import localData from "./addressData.json"
import PickerWrapper, { pickerProps, pickerSlots } from "./PickerWrapper.jsx"
import { defaultFieldProps, defaultOptionsProps, useOptionTrait } from "../utils"
import { isArray, last } from "lodash-es"
import { useFindTextsFromPath } from "../../hooks"

/**
 * 地址组件
 *
 * 数据优先级：`dataSource` > `url` > `本地数据`
 *
 * @version 1.0.0
 */
export default defineComponent({
	name: "MpAddress",
	props: {
		...defaultOptionsProps,
		...defaultFieldProps,

		modelValue: { type: [String, Number, Array], default: () => [] },

		/**
		 * 标题
		 */
		title: { type: String, default: "" },

		/**
		 *    生成哪个级别的数据
		 *    1: 省, 2: 省市, 3: 省市区
		 */
		level: { type: Number, default: 3 },
	},
	emits: ["update:modelValue"],
	setup(props, { emit, slots, expose }) {
		const defaultValue = isArray(props.modelValue) ? last(props.modelValue) : props.modelValue

		const componentValue = ref(defaultValue)

		watch(
			() => props.modelValue,
			() => (componentValue.value = isArray(props.modelValue) ? last(props.modelValue) : props.modelValue),
		)

		const pickerRef = ref(null)
		const options = ref([])

		const displayText = computed(() => {
			if (props.modelValue.length === 0) {
				return ""
			}
			return useFindTextsFromPath(options.value, props.modelValue, {
				value: "code",
				children: "children",
				label: "name",
			}).join("/")
		})

		useOptionTrait(options, props, localData)

		const onFinish = ({ selectedOptions }) => {
			pickerRef.value.close()
			emit(
				"update:modelValue",
				selectedOptions.map((item) => item.code),
			)
		}

		expose({ displayText })

		/********** render **********/

		return () => (
			<PickerWrapper ref={pickerRef} {...pickerProps(props)}>
				{{
					...pickerSlots(slots, props),
					default: () => (
						<Cascader
							v-model={componentValue.value}
							fieldNames={{ text: "name", value: "code", children: "children" }}
							closeable={false}
							showHeader={false}
							options={options.value}
							onFinish={onFinish}
						/>
					),
				}}
			</PickerWrapper>
		)
	},
})

/**
 *
 * 根据地址编码获取完整的地址编码
 *
 * @param code
 * @param {number} [level] 地址级别: 1: 省, 2: 省市, 3: 省市区
 * @return {string[]|(string|*)[]|*[]}
 */
export function useAddressFullCode(code, level) {
	code += ""
	if (code && code.length === 6) {
		if (!level) {
			if (/0000$/.test(code)) {
				level = 1
			} else if (/00$/.test(code)) {
				level = 2
			} else {
				level = 3
			}
		}
		if (level === 1) {
			return [`${code.substr(0, 2)}0000`]
		}
		if (level === 2) {
			return [`${code.substr(0, 2)}0000`, `${code.substr(0, 4)}00`]
		}
		if (level === 3) {
			return [`${code.substr(0, 2)}0000`, `${code.substr(0, 4)}00`, code]
		}
	}
	return []
}

/**
 * 根据地址编码获取完整的地址名称
 * @param code
 * @param {number} [level] 地址级别: 1: 省, 2: 省市, 3: 省市区
 * @return {*[]}
 */
export function useAddressNameFormCode(code, level) {
	if (!isArray(code)) {
		code = useAddressFullCode(code, level)
	}
	return useFindTextsFromPath(localData, code, { value: "code", label: "name", children: "children" })
}

export const addressData = localData