cip-components/cip-form-input/basic/checkbox/index.jsx

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())
    ]
  }
}