for_client/src/test/index.vue

<template>
    <div class="hc-page-box">
        <HcCard>
            <template #header>
                <el-button type="primary">查看表单</el-button>
            </template>
            <div class="hc-table-form-data-item">
                <el-scrollbar>
                    <div id="table-form-1" class="hc-excel-table-form"/>
                </el-scrollbar>
            </div>
        </HcCard>
    </div>
</template>

<script setup>
import {onMounted, onUnmounted, ref} from "vue";
import {data} from './data.js'
import {getIndex, deepClone} from "vue-utils-plus";
import HTableForm from "~src/plugins/HTableForm"
import {getStoreData, setStoreData, delStoreData} from "~uti/storage";

onMounted(() => {
    getExcelHtml()
})

const formData = ref({})

const getExcelHtml = () => {
    HTableForm.createForm({
        template: data,
        tableForm: formData.value,
        keys: {},
        appId: `#table-form-1`,
        onLeftClick: (key) => {
            setShiftTableForm(key)
        },
    })
}

const isCtrlKey = ref(false)
const checkKeyList = ref([])
const copyKeyList = ref(getStoreData('TableFormCopyKeyList') || [])

//设置选择数据
const setShiftTableForm = (key) => {
    if (isCtrlKey.value) {
        const form = formData.value
        const keys = checkKeyList.value
        const index = getIndex(keys, 'key', key)
        if (index === -1) {
            keys.push({key, val: form[key] ?? ''})
        } else {
            keys.splice(index, 1)
        }
        checkKeyList.value = keys
        HTableForm.setCheckKeyStyle(key, index !== -1)
        console.log(keys)
    }
}

//全局按键按下监听
document.onkeydown = (event) => {
    const {key, ctrlKey} = event
    //按下ctrl键
    if (ctrlKey && key === 'Control') {
        isCtrlKey.value = true
    }
    //按下复制快捷键
    if (ctrlKey && key === 'c') {
        const keysList = deepClone(checkKeyList.value)
        setStoreData('TableFormCopyKeyList', keysList)
        copyKeyList.value = keysList
        keysList.forEach(item => {
            HTableForm.setCheckKeyStyle(item['key'], true)
        })
        checkKeyList.value = []
    }
    //按下粘贴快捷键
    if (ctrlKey && key === 'v') {
        const keysList = deepClone(copyKeyList.value)
        const checkList = checkKeyList.value
        checkList.forEach(item => {
            if (keysList.length > 0) {
                formData.value[item['key']] = keysList[0]?.val ?? item['val']
                keysList.splice(0, 1) //删除第一个元素
            }
            HTableForm.setCheckKeyStyle(item['key'], true)
        })
        //清除缓存
        checkKeyList.value = []
        copyKeyList.value = []
        delStoreData('TableFormCopyKeyList')
    }
}

//全局键盘放开监听
document.onkeyup = (event) => {
    const {key, ctrlKey} = event
    if (!ctrlKey && key === 'Control') {
        isCtrlKey.value = false
    }
}

onUnmounted(() => {
    document.onkeydown = null
    document.onkeyup = null
})
</script>

<style lang="scss">
//插入特殊字符弹窗的输入框
.hc-table-form-data-item .hc-excel-table-form td,
.hc-table-form-data-item .hc-excel-table-form td .el-input .el-input__wrapper .el-input__inner,
.el-form-item.special-form-item .el-form-item__content .el-input .el-input__wrapper .el-input__inner {
    font-family: "EUDC", 宋体, v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}
.hc-table-form-data-item {
    position: relative;
    padding: 12px;
    height: 100%;
    overflow: hidden;
    background-color: white;
    .hc-excel-table-form {
        position: relative;
        display: flex;
        padding: 10px;
        justify-content: center;
        td {
            padding: 6px;
            .el-input {
                background-color: #ffffff !important;
                border-radius: 3px;
                color: #606266;
                .el-input__wrapper {
                    background-color: inherit;
                    caret-color: var(--el-color-primary);
                }
                .el-input__suffix-inner {
                    width: 18px;
                }
            }
            .el-textarea {
                width: 100%;
                height: 100%;
                .el-textarea__inner {
                    min-height: initial !important;
                    background-color: #ffffff;
                    border-radius: 3px;
                    color: #606266;
                    height: 100%;
                    caret-color: var(--el-color-primary);
                }
            }
            //日期选择框
            .el-date-editor.el-input .el-input__wrapper,
            .el-date-editor.el-date-editor--datetimerange.el-input__wrapper {
                height: 100%;
                width: 100%;
            }
            //焦点
            .el-input .el-input__wrapper.is-focus, .el-input .el-input__wrapper:hover,
            .el-textarea .el-textarea__inner:hover {
                box-shadow: 0 0 0 1.5px var(--el-input-focus-border-color) inset;
                background-color: #eddac4;
            }
            //公式
            &[gscolor] {
                .el-input, .el-textarea .el-textarea__inner {
                    background-color: #dcdcdc !important;
                }
            }
            //文本选中颜色
            .el-input .el-input__wrapper input,
            .el-textarea textarea {
                &::selection {
                    background: var(--el-color-primary-light-9);
                    color: var(--el-color-primary);
                }
                &::-moz-selection {
                    background: var(--el-color-primary-light-9);
                    color: var(--el-color-primary);
                }
            }
            //下拉框
            .el-select {
                width: 100%;
                height: 100%;
            }
        }
        //非输入框颜色
        td:not([titlexx]), td[titlexx*=''],
        td:not([title]), td[title*=''] {
            background-color: white !important;
            user-select: none;
        }
    }
    .hc-no-table-form {
        position: relative;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .table-form-no {
            position: relative;
            img {
                width: 350px;
            }
            .desc {
                text-align: center;
                font-size: 20px;
                color: #aaa;
            }
        }
    }
}
</style>