hospital-rescue-app-v2/uni_modules/tmx-ui/components/x-checkbox-group/x-checkbox-group.uvue

<script lang="ts" setup>
	import { ref, computed, watch, onMounted, onBeforeUnmount, provide } from "vue"
	import { getDefaultColor, colorAddDeepen } from "../../core/util/xCoreColorUtil.uts"
	import { checkIsCssUnit, getUid } from "../../core/util/xCoreUtil.uts"
	import { xConfig } from "../../config/xConfig.uts"
	import { CHECKBOX_ITEM_INFO } from '../../interface.uts';

	type XCHECKBOX_LISTITEM_TYPE = {
		id : string,
		data : CHECKBOX_ITEM_INFO
	}

	/**
	 * @name 多选框组 xCheckboxGroup
	 * @page /pages/index/checkbox-group
	 * @category 表单组件
	 * @description 使用时,从1.1.2开始允许是非直接x-checkbox子节点布局,但考虑到性能建议是直接子节点.
	 * @constant 平台兼容
	 *	| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
		| --- | --- | --- | --- | --- | --- | --- | --- |
		| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
	 */
	defineOptions({name:"xCheckboxGroup"})

	export type xCheckboxGroupPropsType = {
		/**
		 * 当前选中的值。
		 */
		modelValue: Array<string|number|boolean>,
		/**
		 * 对齐方式
		 */
		direction: "row" | "column",
		/**
		 * 最大选择数量，-1表示不限制。
		 */
		max: number
	}

	const props = withDefaults(defineProps<xCheckboxGroupPropsType>(), {
		modelValue: ():Array<string|number|boolean> => [] as Array<string|number|boolean>,
		direction: "row",
		max: -1
	})

	const emits = defineEmits([
		/**
		 * 选项变化时触发。
		 * @param {Array<string|number|boolean>} val - 当前选中的值
		 */
		'change',
		'update:modelValue'
	])

	// 响应式数据
	const oldvalueList = ref<XCHECKBOX_LISTITEM_TYPE[]>([])
	const checkvaluelist = ref<Array<string|number|boolean>>([])
	const tid = ref(0)
	const isDestroy = ref(false)
	const id = ref("xCheckboxGroup-" + getUid())

	// 计算属性
	const oldvalueList_ids = computed((): string[] => {
		return oldvalueList.value.map((el : XCHECKBOX_LISTITEM_TYPE) : string => el.id)
	})

	const _max = computed((): number => {
		return props.max;
	})

	// 方法
	//设置当前选中的值
	function setOldCheckboxValue() {
		oldvalueList.value.forEach((item : XCHECKBOX_LISTITEM_TYPE) => {
			if (checkvaluelist.value.includes(item.data.value)) {
				item.data.nowvalue = item.data.value
			} else {
				item.data.nowvalue = item.data.unvalue
			}
		})
	}
	
	//当前选中的值
	function getcheckvaluelist() {
		let fl = oldvalueList.value.filter((el : XCHECKBOX_LISTITEM_TYPE) : boolean => el.data.nowvalue == el.data.value)
		let allfill = oldvalueList.value.map((el : XCHECKBOX_LISTITEM_TYPE) : string|number|boolean => el.data.value)
		let realValue = fl.map((el : XCHECKBOX_LISTITEM_TYPE) : string|number|boolean => el.data.value);
		// 删除已有的，保留差异的。
		let psdiff = checkvaluelist.value.filter((el : string|number|boolean) : boolean => !allfill.includes(el))
	
		checkvaluelist.value = realValue.concat(psdiff)
	}
	function addItem(item : CHECKBOX_ITEM_INFO, ischange : boolean) {
		let index = oldvalueList.value.findIndex((el : XCHECKBOX_LISTITEM_TYPE) : boolean => el.id == item.id);
		let nowitem = item

		let fl = oldvalueList.value.filter((el : XCHECKBOX_LISTITEM_TYPE) : boolean => el.data.nowvalue == el.data.value)

		if (!ischange) {
			if (checkvaluelist.value.includes(item.value) && item.nowvalue != item.value) {
				nowitem.nowvalue = nowitem.value;
			}
		}

		if (index > -1) {
			let oldItem = oldvalueList.value[index]
			if (fl.length >= _max.value && _max.value > -1 && ischange && oldItem.data.nowvalue != oldItem.data.value) {
				// "已是最大选择数量"
				uni.showToast({ title: xConfig.i18n.t("tmui4x.checkbox.tips"), icon: 'none', mask: true })

				return;
			}
			oldvalueList.value.splice(index, 1, {
				id: nowitem.id,
				data: nowitem
			} as XCHECKBOX_LISTITEM_TYPE)

		} else {
			oldvalueList.value.push({
				id: nowitem.id,
				data: nowitem
			} as XCHECKBOX_LISTITEM_TYPE)
		}

		getcheckvaluelist()

		if (ischange) {
			/**
			 * 等同v-model=""
			 */
			emits("update:modelValue", checkvaluelist.value)
			/**
			 * 选项变化时触发。
			 * @param val {string[]} 当前选中的值
			 */
			emits("change", checkvaluelist.value)
		}


	}

	



	// 监听器
	watch((): Array<string|number|boolean> => props.modelValue, (newValue : Array<string|number|boolean>) => {
		let n = newValue.join("")
		let v = checkvaluelist.value.join("")
		if (n != v) {
			checkvaluelist.value = newValue
			setOldCheckboxValue();
		}
	},{deep:true})

	// 生命周期
	onBeforeUnmount(() => {
		isDestroy.value = true;
		clearTimeout(tid.value)
	})

	onMounted(() => {
		checkvaluelist.value = props.modelValue;
		isDestroy.value = false;
	})

	// 提供响应式数据给子组件
	provide('xCheckboxModelvalue', computed((): Array<string|number|boolean> => checkvaluelist.value))

	defineExpose({
		/** 添加多选项 **/
		addItem,
		/** 获取所有选中的值 **/
		getAllSelecteds: () => checkvaluelist.value
	})
</script>
<template>
	<view class="xCheckboxGroup" :style="{'flex-direction':direction}">
		<!-- 
		 @slot 从1.1.2开始允许是非直接x-checkbox子节点布局,但考虑到性能建议是直接子节点.
		 -->
		<slot></slot>
	</view>
</template>
<style>
	.xCheckboxGroup {
		display: flex;
		flex-wrap: wrap;
	}
</style>