jobsys-mpower/components/form/MpCascader.jsx

Enhanced component based on Taro & NutUI

import { computed, defineComponent, ref, watch } from "vue"
import PickerWrapper, { pickerProps, pickerSlots } from "./PickerWrapper.jsx"
import { Button, Cascader } from "@nutui/nutui-taro"
import { defaultFieldProps, defaultOptionsProps, useOptionTrait } from "../utils"
import { useFindTextsFromPath } from "../../hooks"

/**
 * MpCascader 级联选择
 * @version 1.0.0
 */
export default defineComponent({
	name: "MpCascader",
	props: {
		...defaultOptionsProps,
		...defaultFieldProps,

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

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

		/**
		 * 是否显示清除按钮
		 */
		clearable: { type: Boolean, default: false },
	},
	emits: ["update:modelValue", "change"],
	setup(props, { emit, slots, expose }) {
		const defaultValue = props.modelValue?.[0] || ""

		const componentValue = ref(defaultValue)

		watch(
			() => props.modelValue,
			() => (componentValue.value = props.modelValue?.[0] || ""),
		)

		const pickerRef = ref(null)

		const options = ref([])

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

		useOptionTrait(options, props)

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

		const onClear = () => {
			emit("change", [])
			emit("update:modelValue", [])
			pickerRef.value.close()
		}

		expose({ displayText })

		return () => (
			<PickerWrapper ref={pickerRef} {...pickerProps(props)}>
				{{
					...pickerSlots(slots, props),
					default: () => [
						<Cascader
							v-model={componentValue.value}
							closeable={false}
							showHeader={false}
							options={options.value}
							onFinish={onFinish}
							{...props.defaultProps}
						/>,
						props.clearable ? (
							<div class={"ex-field-popup__clear-btn"}>
								<Button block type={"primary"} plain={true} round={true} onClick={onClear}>
									清除
								</Button>
							</div>
						) : null,
					],
				}}
			</PickerWrapper>
		)
	},
})