youxi-app/uni_modules/cool-ui/components/cl-select/cl-select.uvue

<template>
	<cl-select-trigger
		v-if="showTrigger"
		:pt="ptTrigger"
		:placeholder="placeholder"
		:disabled="disabled"
		:focus="popupRef?.isOpen"
		:text="text"
		@open="open()"
		@clear="clear"
	></cl-select-trigger>

	<cl-popup ref="popupRef" v-model="visible" :title="title" :pt="ptPopup">
		<view class="cl-select-popup" @touchmove.stop>
			<slot name="prepend"></slot>

			<view class="cl-select-popup__picker">
				<cl-empty
					v-if="noOptions"
					:fixed="false"
					:pt="{
						className: '!h-[300px]'
					}"
				></cl-empty>

				<cl-picker-view
					:value="indexes"
					:columns="columns"
					@change-index="onChange"
					v-else
				></cl-picker-view>
			</view>

			<slot name="append"></slot>

			<view class="cl-select-popup__op">
				<cl-button
					v-if="showCancel"
					size="large"
					text
					border
					type="light"
					fluid
					@tap="close"
					>{{ cancelText }}</cl-button
				>
				<cl-button v-if="showConfirm && !noOptions" size="large" fluid @tap="confirm">{{
					confirmText
				}}</cl-button>
			</view>
		</view>
	</cl-popup>
</template>

<script setup lang="ts">
import { ref, computed, type PropType, watch, onMounted } from "vue";
import type { ClSelectOption, ClSelectValue } from "../../types";
import { isEmpty, isNull, parsePt, parseToObject, t } from "@/.cool";
import type { ClSelectTriggerPassThrough } from "../cl-select-trigger/props";
import type { ClPopupPassThrough } from "../cl-popup/props";

defineOptions({
	name: "cl-select"
});

defineSlots<{
	prepend(): any;
	append(): any;
}>();

// 组件属性定义
const props = defineProps({
	// 透传样式配置
	pt: {
		type: Object,
		default: () => ({})
	},
	// 选择器的值
	modelValue: {
		type: [Array, Number, String] as PropType<ClSelectValue>,
		default: null
	},
	// 选择器标题
	title: {
		type: String,
		default: () => t("请选择")
	},
	// 选择器占位符
	placeholder: {
		type: String,
		default: () => t("请选择")
	},
	// 选项数据
	options: {
		type: Array as PropType<ClSelectOption[]>,
		default: () => []
	},
	// 是否显示选择器触发器
	showTrigger: {
		type: Boolean,
		default: true
	},
	// 是否禁用选择器
	disabled: {
		type: Boolean,
		default: false
	},
	// 列数
	columnCount: {
		type: Number as PropType<number>,
		default: 1
	},
	// 分隔符
	splitor: {
		type: String,
		default: " - "
	},
	// 确认按钮文本
	confirmText: {
		type: String,
		default: () => t("确定")
	},
	// 是否显示确认按钮
	showConfirm: {
		type: Boolean,
		default: true
	},
	// 取消按钮文本
	cancelText: {
		type: String,
		default: () => t("取消")
	},
	// 是否显示取消按钮
	showCancel: {
		type: Boolean,
		default: true
	}
});

// 定义事件
const emit = defineEmits(["update:modelValue", "change", "changing"]);

// 弹出层引用
const popupRef = ref<ClPopupComponentPublicInstance | null>(null);

// 透传样式类型定义
type PassThrough = {
	trigger?: ClSelectTriggerPassThrough;
	popup?: ClPopupPassThrough;
};

// 解析透传样式配置
const pt = computed(() => parsePt<PassThrough>(props.pt));

// 解析触发器透传样式配置
const ptTrigger = computed(() => parseToObject(pt.value.trigger));

// 解析弹窗透传样式配置
const ptPopup = computed(() => parseToObject(pt.value.popup));

// 是否为空选项
const noOptions = computed(() => {
	return isEmpty(props.options);
});

// 当前选中的值
const value = ref<any[]>([]);

// 当前选中项的索引
const indexes = ref<number[]>([]);

// 计算选择器列表数据
const columns = computed<ClSelectOption[][]>(() => {
	// 获取原始选项数据
	let options = props.options;

	// 用于存储每一列的选项数据
	let columns = [] as ClSelectOption[][];

	// 根据当前选中值构建多列数据
	for (let i = 0; i < props.columnCount; i++) {
		// 复制当前层级的选项数据作为当前列的选项
		const column = [...options];

		// 获取当前列的选中值,如果value数组长度不足则为null
		const val = i >= value.value.length ? null : value.value[i];

		// 在当前列选项中查找选中值对应的选项
		let item = options.find((item) => item.value == val);

		// 如果未找到选中项且选项不为空,则默认选中第一项
		if (item == null && !isEmpty(options)) {
			item = options[0];
		}

		// 如果选中项有子选项,则更新options为子选项数据,用于构建下一列
		if (item?.children != null) {
			options = item.children as ClSelectOption[];
		}

		// 将当前列的选项数据添加到columns数组
		columns.push(column);
	}

	// 返回构建好的多列数据
	return columns;
});

// 显示文本
const text = ref("");

// 更新文本内容
function updateText() {
	// 当前绑定的值
	const val = props.modelValue;

	// 如果值为null或空，直接返回空字符串
	if (val == null || isEmpty(val)) {
		text.value = "";
	} else {
		// 用于存储每列的选中值
		let arr: any[];

		if (props.columnCount == 1) {
			// 单列时将值包装为数组
			arr = [val];
		} else {
			// 多列时直接使用数组
			arr = val as any[];
		}

		// 遍历每列的选中值，查找对应label，找不到则用空字符串
		text.value = arr
			.map((e, i) => columns.value[i].find((a) => a.value == e)?.label ?? "")
			.join(props.splitor);
	}
}

// 获取当前选中值
function getValue() {
	return props.columnCount == 1 ? value.value[0] : value.value;
}

// 解析值
function setValue(val: ClSelectValue) {
	// 声明选中值数组
	let _value: any[];

	// 判断值是否为null
	if (val == null) {
		// 设置为空数组
		_value = [];
	}
	// 判断是否为数组类型
	else if (Array.isArray(val)) {
		// 使用该数组
		_value = [...(val as any[])];
	}
	// 其他类型
	else {
		// 转换为数组格式
		_value = [val];
	}

	// 存储每列选中项的索引值
	let _indexes = [] as number[];

	// 遍历所有列
	for (let i = 0; i < props.columnCount; i++) {
		// 获取当前列的选项数据
		const column = columns.value[i];

		// 判断是否超出选中值数组长度
		if (i >= _value.length) {
			// 添加默认索引0
			_indexes.push(0);

			// 添加默认值
			if (!isNull(column) && column.length > 0 && !isNull(column[0])) {
				_value.push(column[0].value);
			}
		}
		// 在范围内
		else {
			// 查找匹配的选项索引
			let index = column.findIndex((e) => e.value == _value[i]);

			// 索引无效时重置为0
			if (index < 0) {
				index = 0;
			}

			// 添加索引
			_indexes.push(index);
		}
	}

	// 更新选中值
	value.value = _value;

	// 更新索引值
	indexes.value = _indexes;

	// 更新显示文本
	updateText();
}

// 选择器值改变事件
function onChange(a: number[]) {
	// 复制当前组件内部维护的索引数组
	const b = [...indexes.value];

	// 标记是否有列发生改变
	let changed = false;

	// 遍历所有列,处理联动逻辑
	for (let i = 0; i < a.length; i++) {
		if (changed) {
			// 如果前面的列发生改变,后续列重置为第一项(索引0)
			b[i] = 0;
		} else {
			// 检查当前列是否发生改变
			if (b[i] != a[i]) {
				// 更新当前列的索引
				b[i] = a[i];
				// 标记已发生改变,后续列需要重置
				changed = true;
			}
		}
	}

	// 更新组件内部维护的索引数组
	indexes.value = b;
	// 根据最新的索引数组,更新选中的值数组
	value.value = b.map((e, i) => (isNull(columns.value[i][e]) ? 0 : columns.value[i][e].value));

	// 触发changing事件
	emit("changing", getValue());
}

// 选择器显示状态
const visible = ref(false);

// 选择回调函数
let callback: ((value: ClSelectValue) => void) | null = null;

// 打开选择器
function open(cb: ((value: ClSelectValue) => void) | null = null) {
	visible.value = true;

	// 设置值
	setValue(props.modelValue);

	// 回调
	callback = cb;
}

// 关闭选择器
function close() {
	visible.value = false;
}

// 清空选择器
function clear() {
	text.value = "";

	if (props.columnCount == 1) {
		emit("update:modelValue", null);
		emit("change", null);
	} else {
		emit("update:modelValue", [] as any[]);
		emit("change", [] as any[]);
	}
}

// 确认选择
function confirm() {
	// 主动触发一次change事件，确保值正确
	onChange(indexes.value);

	// 根据列数返回单个值或数组
	const val = getValue();

	// 触发更新事件
	emit("update:modelValue", val);
	emit("change", val);

	// 触发回调
	if (callback != null) {
		callback!(val);
	}

	// 关闭选择器
	close();
}

onMounted(() => {
	// 监听modelValue变化
	watch(
		computed(() => props.modelValue),
		(val: ClSelectValue) => {
			setValue(val);
		},
		{
			immediate: true
		}
	);

	// 监听options变化，更新显示文本
	watch(
		computed(() => props.options),
		() => {
			updateText();
		}
	);
});

defineExpose({
	open,
	close
});
</script>

<style lang="scss" scoped>
.cl-select {
	&-popup {
		&__op {
			@apply flex flex-row items-center justify-center;
			padding: 12px;
		}
	}
}
</style>