measure/src/components/plugins/table-form/hc-form-checkbox-group.vue

<template>
    <div
        :class="isFocus ? 'is-focus' : ''" class="hc-form-checkbox-group-box"
        @keydown.shift.up="keyupShiftUp"
        @keydown.shift.down="keyupShiftDown"
        @keydown.shift.left="keyupShiftLeft"
        @keydown.shift.right="keyupShiftRight"
    >
        <ElCheckbox
            v-for="item in checkboxDatas" :key="item.key" :checked="item.checked"
            @change="onCheckboxChange($event, item)"
        >
            {{ item.name }}
        </ElCheckbox>
        <input :id="keyname" class="hc-checkbox-group-input" @blur="handleBlur" @focus="handleFocus">
    </div>
</template>

<script>
export default {
    inheritAttrs: false,
}
</script>

<script setup>
import { nextTick, ref, watch } from 'vue'
import { ElCheckbox } from 'element-plus'
import { arrIndex, deepClone, isNullES } from 'js-fast-way'

const props = defineProps({
    ui: {
        type: String,
        default: '',
    },
    datas: {
        type: Array,
        default: () => ([]),
    },
    objs: {
        type: Array,
        default: () => ([]),
    },
    val: {
        type: [String, Number],
        default: '',
    },
    keyname: {
        type: [String, Number],
        default: '',
    },
})

//事件
const emit = defineEmits(['change', 'keydowns'])

//变量
const checkboxDatas = ref([])

//渲染完成
nextTick(() => {
    setInitDatas(deepClone(props.datas), deepClone(props.objs))
})

//监听表头
watch(() => [
    props.val,
], ([val]) => {
    setModelVal(val)
})

//处理初始数据
const setInitDatas = (datas, objs) => {
    for (let i = 0; i < datas.length; i++) {
        objs.push({ key: String(datas[i]), name: datas[i] })
    }
    checkboxDatas.value = objs
    setModelVal(props.val)
}

//处理数据
const setModelVal = (val) => {
    const datas = deepClone(checkboxDatas.value)
    if (!isNullES(val)) {
        const arr = String(val).split(',')
        for (let i = 0; i < arr.length; i++) {
            const item = String(arr[i])
            const index = arrIndex(datas, 'key', item)
            datas[index].checked = true
        }
    }
    checkboxDatas.value = datas
}

//当绑定值变化时触发的事件
const onCheckboxChange = (val, item) => {
    item.checked = val
    getCheckedValue()
}

//取选中的值
const getCheckedValue = () => {
    let valString = ''
    const datas = checkboxDatas.value
    for (let i = 0; i < datas.length; i++) {
        if (datas[i].checked) {
            const key = String(datas[i].key)
            valString = valString ? `${valString},${key}` : key
        }
    }
    //事件返回
    emit('change', {
        key: props.keyname,
        val: valString,
    })
}

//向上
const keyupShiftUp = (e) => {
    emit('keydowns', { type: 'up', name: { target: { id: props.keyname } }, key: props.keyname, e })
}

//向下
const keyupShiftDown = (e) => {
    emit('keydowns', { type: 'down', name: { target: { id: props.keyname } }, key: props.keyname, e })
}

//向左
const keyupShiftLeft = (e) => {
    emit('keydowns', { type: 'left', name: { target: { id: props.keyname } }, key: props.keyname, e })
}

//向右
const keyupShiftRight = (e) => {
    emit('keydowns', { type: 'right', name: { target: { id: props.keyname } }, key: props.keyname, e })
}


//获得焦点
const isFocus = ref(false)
const handleFocus = () => {
    isFocus.value = true
}

//失去焦点
const handleBlur = () => {
    isFocus.value = false
}
</script>

<style lang="scss" scoped>
.hc-form-checkbox-group-box {
    position: relative;
    width: 100%;
    height: initial;
    border-radius: 4px;
    transition: box-shadow 0.3s, background-color 0.3s;
    &.is-focus, &:hover {
        background-color: #eddac4;
        box-shadow: 0 0 0 1.5px var(--el-color-primary) inset;
    }
    .hc-checkbox-group-input {
        position: absolute;
        z-index: -1;
        right: 10px;
        width: 10px;
    }
}
</style>