eslink-ui-plus/components/table/useCheckBoxEvt.ts

vue3 component library, css framework

/*
 * @Author: xiaobo
 * @Description: 
 * @Date: 2021-10-11 15:23:09
 * @LastEditTime: 2021-11-04 15:15:04
 * @FilePath: \eslink-ui-plus\components\table\useCheckBoxEvt.ts
 */
import { computed, ref, watch, toRaw } from 'vue'

export default function useCheckBoxEvt(key, props, emit, setting) {
	const currentCheckedList = ref<any[]>([])
	const rows = computed(() => setting.rows ?? [])

	const checkedCompareFunc = [null, undefined, ''].includes(key)
		? rowItem =>
				currentCheckedList.value.some(
					item => toRaw(item) === toRaw(rowItem),
				)
		: rowItem =>
				currentCheckedList.value.some(
					valItem => valItem[key] === rowItem[key],
				)
	const isCurrentCheckedAll = computed({
		get() {
			return (
				!!currentCheckedList.value?.length &&
				!!rows.value?.length &&
				rows.value?.every?.(checkedCompareFunc)
			)
		},
		set(v) {
			if (v) {
				currentCheckedList.value = [...rows.value] ?? []
				console.log(
					'currentCheckedList.value',
					currentCheckedList.value,
				)
			} else {
				currentCheckedList.value = []
			}
		},
	})
	watch(
		() => props?.checkedValue,
		v => {
			currentCheckedList.value = v || []
		},
		{ immediate: true },
	)
	watch(
		rows,
		() => {
			currentCheckedList.value = props?.checkedValue ?? []
		},
		{ immediate: true },
	)
	const checkedAllEvt = () => {
		if (isCurrentCheckedAll.value) {
			emit('check-all', {
				checkedAll: false,
				value: currentCheckedList.value,
			})
			isCurrentCheckedAll.value = !isCurrentCheckedAll.value
		} else {
			isCurrentCheckedAll.value = !isCurrentCheckedAll.value
			emit('check-all', {
				checkedAll: true,
				value: currentCheckedList.value,
			})
		}
		emit('selection-change', currentCheckedList.value)
	}

	return {
		currentCheckedList,
		isCurrentCheckedAll,
		checkedAllEvt,
		checkedCompareFunc,
	}
}