|
|
@@ -1,217 +1,20 @@
|
|
|
<template>
|
|
|
<div class="hc-page-box">
|
|
|
- <HcCard>
|
|
|
+ <HcCard scrollbar>
|
|
|
<template #header>
|
|
|
- <el-button type="primary">查看表单</el-button>
|
|
|
+ <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 {arrIndex, deepClone} from "js-fast-way"
|
|
|
-import HTableForm from "~src/plugins/HTableForm"
|
|
|
-import {getStoreValue, setStoreValue, delStoreValue} from "~uti/storage";
|
|
|
+import {nextTick, onMounted, ref} from "vue";
|
|
|
+import { getRandomFrom } from "js-fast-way"
|
|
|
+//import {data} from './data.js'
|
|
|
|
|
|
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(getStoreValue('TableFormCopyKeyList') || [])
|
|
|
|
|
|
-//设置选择数据
|
|
|
-const setShiftTableForm = (key) => {
|
|
|
- if (isCtrlKey.value) {
|
|
|
- const form = formData.value
|
|
|
- const keys = checkKeyList.value
|
|
|
- const index = arrIndex(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)
|
|
|
- setStoreValue('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 = []
|
|
|
- delStoreValue('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>
|
