123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 |
- import { ElCheckbox, ElCheckboxButton, ElCheckboxGroup } from 'element-plus'
- import { useFormInput, useOptions } from '@cip/components/hooks/form-input'
- import { formInputProps, fromInputEmits } from '../../form-input-props'
- import { computed, getCurrentInstance, h, ref, watch } from 'vue'
- import BasicDivider from '../divider'
- import { isObject } from '@cip/utils/util'
- export default {
- inheritAttrs: false,
- props: formInputProps,
- emits: [...fromInputEmits],
- setup (props, context) {
- const instance = getCurrentInstance()
- const { width, updateStream, securityConfig, ...formInput } = useFormInput(props, context)
- const { optionProps, options, getOptions, proxyOptionsValue } = useOptions(props, true, updateStream)
- instance.ctx.getOptions = getOptions // 此处代码的意义
- const isButton = computed(() => {
- return props.config?.isButton ?? false
- })
- const display = computed(() => {
- return props.config?.display ?? 'inline-flex'
- })
- const getCheckboxComponent = (isButton) => {
- return isButton ? ElCheckboxButton : ElCheckbox
- }
- const checkboxItem = (option) => {
- return h(getCheckboxComponent(isButton.value), {
- key: option[optionProps.value.value] ?? option,
- label: option[optionProps.value.value] ?? option,
- style: { display: display.value, width: securityConfig.value.itemWidth ?? undefined },
- disabled: option[optionProps.value.disabled] ?? false
- },
- () => `${option[optionProps.value.label] ?? option}`
- )
- }
- const isIndeterminate = ref()
- const checkAll = ref(false)
- // WARN: 判断是否权限监听开关不具有响应性请注意
- if (securityConfig.value.checkAllAble) {
- watch([options, proxyOptionsValue], () => {
- if (proxyOptionsValue.value.length === options.value.length && options.value.length > 0) {
- checkAll.value = true
- } else {
- checkAll.value = false
- }
- }, { immediate: true })
- }
- const handleCheckAllChange = (val) => {
- if (val) {
- proxyOptionsValue.value = options.value.map(option => isObject(option) ? option[optionProps.value.value] : option)
- } else {
- proxyOptionsValue.value = undefined
- }
- isIndeterminate.value = false
- checkAll.value = val
- }
- const handleCheckItemChange = (val) => {
- const checkedLen = val.length
- const allCheckLen = options.value.length
- checkAll.value = checkedLen === allCheckLen
- isIndeterminate.value = checkedLen > 0 && checkedLen < allCheckLen
- }
- const checkboxItems = () => options.value.map(checkboxItem)
- // [BUG EL2.2.17] ElCheckboxGroup 存在bug
- // modelValue 默认值为空数组 内部watch props.modelValue后进行数据校验,导致初始化时及触发数据验证
- // [TEMP FIX] 临时解决方案 当为空数组时 赋值为 undefined
- // 新增checkAllAble,但注意此功能暂时不支持存在disabled的options
- return () => [
- securityConfig.value.checkAllAble
- ? [
- h(ElCheckbox, {
- modelValue: checkAll.value,
- indeterminate: isIndeterminate.value,
- onChange: (val) => handleCheckAllChange(val)
- }, () => '全选'),
- h(BasicDivider)
- ]
- : undefined,
- h(ElCheckboxGroup, {
- ...context.attrs,
- ...formInput,
- style: { width: width.value },
- disabled: props.disabled,
- modelValue: proxyOptionsValue.value.length === 0 ? undefined : proxyOptionsValue.value,
- 'onUpdate:modelValue': (value) => {
- proxyOptionsValue.value = value
- },
- onChange: (val) => handleCheckItemChange(val)
- },
- () => checkboxItems())
- ]
- }
- }
|