资料填报，快捷键复制粘贴测试

src/config/index.js

@@ -17,12 +17,11 @@ export default {
     statusWhiteList: [],    //http的status默认放行列表
     ossUrl: 'https://bladex-test-info.oss-cn-chengdu.aliyuncs.com', //oss地址
     smsPhone: '',  //测试接受短信验证码的手机号
-    dev_version: '202303281056',    //开发版本号
-    // host: 'http://47.110.251.215:8090',  //测试线上
+    dev_version: '202303301528',    //开发版本号
+    host: 'http://47.110.251.215:8090',  //测试线上
     //host: 'http://127.0.0.1:8090',  //打包线上
     //host: 'http://192.168.0.118', //祝炜
     //host: 'http://192.168.0.155', //刘依程
-     host: 'http://127.0.0.1:8090', //杨宇就
     socket: 'wss://business.hcxxy.com/wss/websocket/',  //测试线上
     //socket: 'ws://127.0.0.1:5399/websocket/',  //打包线上
 }

src/plugins/HTableForm.js

@@ -27,13 +27,14 @@ const components = {
 
 //表单渲染
 export default class HTableForm {
-    static createForm({template, tableForm, keys, appId, onRight, onBlur}) {
+    static createForm({template, tableForm, keys, appId, onRight, onBlur, onLeftClick}) {
         const _this = this;
         const app = createApp({
             data() {
                 return {
                     getTokenHeader: getTokenHeader(),
                     formData: tableForm,
+                    isDownKey: null,
                 }
             },
             //html标签数据
@@ -116,6 +117,10 @@ export default class HTableForm {
                 dateKeydown({type, name}) {
                     _this.setKeyupData(name, type, keys)
                 },
+                //输入左键点击事件
+                inputLeftClick(event, key) {
+                    onLeftClick(key)
+                },
             }
         })
         app.mount(appId)
@@ -252,4 +257,25 @@ export default class HTableForm {
             }
         }
     }
+
+    //设置选中样式
+    static setCheckKeyStyle(key, remove = false) {
+        const dom = document.getElementById(key);
+        const parent = dom?.parentElement ?? ''
+        if (parent && !remove) {
+            if (dom.tagName === 'INPUT') {
+                parent.style = '--el-input-border-color: #1ECC95; box-shadow: 0 0 0 2px #1ECC95 inset;'
+            } else if (dom.tagName === 'TEXTAREA') {
+                dom.style = '--el-input-border-color: #1ECC95; box-shadow: 0 0 0 2px #1ECC95 inset;'
+            }
+        } else if (parent && remove) {
+            if (dom.tagName === 'INPUT') {
+                parent.style = ''
+            } else if (dom.tagName === 'TEXTAREA') {
+                dom.style = ''
+            }
+        }
+    }
+
+
 }

src/test/data.js

@@ -0,0 +1,151 @@
+export const data = `
+<table cellspacing="0" style="border-collapse: collapse;">
+<colgroup></colgroup>
+<tbody>
+<tr xy_type="1,false,9,false">
+<td colspan="9" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);vertical-align:bottom;text-align:right;word-wrap:inherit;height:21px;">A15</td></tr>
+<tr xy_type="1,false,9,false">
+<td colspan="9" style="color:rgb(0,0,0);font-family:宋体;font-size:18.0pt;background-color:rgb(255,255,255);font-weight:bold;vertical-align:center;text-align:center;word-wrap:inherit;height:32px;" titlexx="">1-5（引用白马私有）</td></tr>
+<tr xy_type="1,false,9,false">
+<td colspan="9" style="color:rgb(0,0,0);font-family:宋体;font-size:18.0pt;background-color:rgb(255,255,255);font-weight:bold;vertical-align:center;text-align:center;word-wrap:inherit;height:40px;">检验申请批复单</td></tr>
+<tr xy_type="1,false,9,true">
+<td style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);vertical-align:center;text-align:left;word-wrap:inherit;height:26px;">承包单位：</td>
+<td colspan="4" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);vertical-align:center;text-align:left;word-wrap:inherit;height:26px;" titlexx="承包单位">
+    <el-input type="text"
+    @contextmenu.prevent.native="RightClick(3,1,2,5,4,4,$event)"
+    trindex="3" tdindex="1" x1="2" x2="5" y1="4" y2="4"
+    style="width:100%;height:100%;"
+    placeholderxx="承包单位"
+    @focus="getInformation('承包单位',3,1)"
+    weighing="100.0" id="key_14__3_1" keyname="key_14__3_1"
+    @blur="getRegularExpression($event,'','请输入字符串',3,1)"
+    @mousedown.left="inputLeftClick($event, 'key_14__3_1')"
+    v-model="formData.key_14__3_1"></el-input>
+</td>
+<td style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);vertical-align:center;text-align:left;word-wrap:inherit;height:26px;">合同段：</td>
+<td colspan="3" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);vertical-align:center;text-align:left;word-wrap:inherit;height:26px;" titlexx="合同段" @click="getInformation('合同段',3,3)">
+<el-input type="text" v-model="formData.key_15__3_3"
+placeholderxx="合同段" keyname="key_15__3_3"
+weighing="100.0"
+id="key_15__3_3"
+@contextmenu.prevent.native="RightClick(3,3,7,9,4,4,$event)"
+trindex="3" tdindex="3" x1="7" x2="9" y1="4" y2="4"
+@mousedown.left="inputLeftClick($event, 'key_15__3_3')"
+style="width:100%;height:100%"></el-input>
+</td></tr>
+<tr xy_type="1,false,9,true">
+<td style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;vertical-align:center;text-align:left;word-wrap:inherit;height:26px;">监理单位：</td>
+<td colspan="4" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;vertical-align:center;text-align:left;word-wrap:inherit;height:26px;" titlexx="监理单位">
+<el-input type="text"
+@contextmenu.prevent.native="RightClick(4,1,2,5,5,5,$event)"
+trindex="4" tdindex="1" x1="2" x2="5" y1="5" y2="5"
+style="width:100%;height:100%;"
+placeholderxx="监理单位"
+@focus="getInformation('监理单位',4,1)"
+weighing="100.0" id="key_10__4_1" keyname="key_10__4_1"
+@mousedown.left="inputLeftClick($event, 'key_10__4_1')"
+@blur="getRegularExpression($event,'','请输入字符串',4,1)" v-model="formData.key_10__4_1"></el-input>
+</td>
+<td style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;vertical-align:center;text-align:left;word-wrap:inherit;height:26px;">编号：</td>
+<td colspan="3" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;vertical-align:center;text-align:left;word-wrap:inherit;height:26px;" @click="getInformation('编号',4,3)" titlexx="编号">
+<el-input type="text" @keyup.shift.up="keyupShiftUp" @keyup.shift.down="keyupShiftDown" @keyup.shift.left="keyupShiftLeft" @keyup.shift.right="keyupShiftRight" @contextmenu.prevent.native="RightClick(4,3,7,9,5,5,$event)" trindex="4" tdindex="3" x1="7" x2="9" y1="5" y2="5" style="width:100%;height:100%" placeholderxx="编号" keyname="key_11__4_3" id="key_11__4_3" weighing="100" v-model="formData.key_11__4_3"></el-input>
+</td></tr>
+<tr xy_type="2,true,9,true">
+<td colspan="2" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-top-color:#000000;border-top-style:solid;border-top-width:1;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;border-left-color:#000000;border-left-style:solid;border-left-width:1;border-right-color:#000000;border-right-style:solid;border-right-width:1;vertical-align:center;text-align:left;word-wrap:inherit;height:45px;">工程项目</td>
+<td colspan="7" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-top-color:#000000;border-top-style:solid;border-top-width:1;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;border-left-color:#000000;border-left-style:solid;border-left-width:1;border-right-color:#000000;border-right-style:solid;border-right-width:1;vertical-align:center;text-align:center;word-wrap:inherit;height:45px;" @click="getInformation('工程项目',5,1)" titlexx="工程项目" gscolor="11">
+<el-input type="text" @contextmenu.prevent.native="RightClick(5,1,3,9,6,6,$event)" trindex="5" tdindex="1" x1="3" x2="9" y1="6" y2="6" style="width:100%;height:100%" placeholderxx="工程项目" keyname="key_13__5_1" id="key_13__5_1" weighing="100" v-model="formData.key_13__5_1"></el-input>
+</td></tr>
+<tr xy_type="2,true,9,true">
+<td colspan="2" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-top-color:#000000;border-top-style:solid;border-top-width:1;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;border-left-color:#000000;border-left-style:solid;border-left-width:1;border-right-color:#000000;border-right-style:solid;border-right-width:1;vertical-align:center;text-align:left;word-wrap:inherit;height:45px;">工程地点及桩号</td>
+<td colspan="7" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-top-color:#000000;border-top-style:solid;border-top-width:1;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;border-left-color:#000000;border-left-style:solid;border-left-width:1;border-right-color:#000000;border-right-style:solid;border-right-width:1;vertical-align:center;text-align:center;word-wrap:inherit;height:45px;" @click="getInformation('工程地点及桩号',6,1)" titlexx="工程地点及桩号" gscolor="11">
+<el-input type="text" @contextmenu.prevent.native="RightClick(6,1,3,9,7,7,$event)" trindex="6" tdindex="1" x1="3" x2="9" y1="7" y2="7" style="width:100%;height:100%;" @blur="getRegularExpression($event,'','请输入字符串',6,1)" placeholderxx="工程地点及桩号" keyname="key_8__6_1" id="key_8__6_1" weighing="100" v-model="formData.key_8__6_1"></el-input>
+</td></tr>
+<tr xy_type="2,true,9,true">
+<td colspan="2" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-top-color:#000000;border-top-style:solid;border-top-width:1;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;border-left-color:#000000;border-left-style:solid;border-left-width:1;border-right-color:#000000;border-right-style:solid;border-right-width:1;vertical-align:center;text-align:left;word-wrap:inherit;height:45px;">具体部位</td>
+<td colspan="7" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-top-color:#000000;border-top-style:solid;border-top-width:1;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;border-left-color:#000000;border-left-style:solid;border-left-width:1;border-right-color:#000000;border-right-style:solid;border-right-width:1;vertical-align:center;text-align:center;word-wrap:inherit;height:45px;" titlexx="具体部位" gscolor="11">
+<el-input type="text" @contextmenu.prevent.native="RightClick(7,1,3,9,8,8,$event)" trindex="7" tdindex="1" x1="3" x2="9" y1="8" y2="8" style="width:100%;height:100%;" placeholderxx="具体部位" @focus="getInformation('具体部位',7,1)" weighing="100.0" id="key_3__7_1" keyname="key_3__7_1" @blur="getRegularExpression($event,'','请输入字符串',7,1)" v-model="formData.key_3__7_1"></el-input>
+</td></tr>
+<tr xy_type="2,true,9,true">
+<td colspan="2" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-top-color:#000000;border-top-style:solid;border-top-width:1;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;border-left-color:#000000;border-left-style:solid;border-left-width:1;border-right-color:#000000;border-right-style:solid;border-right-width:1;vertical-align:center;text-align:left;word-wrap:inherit;height:45px;">检验内容</td>
+<td colspan="7" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-top-color:#000000;border-top-style:solid;border-top-width:1;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;border-left-color:#000000;border-left-style:solid;border-left-width:1;border-right-color:#000000;border-right-style:solid;border-right-width:1;vertical-align:center;text-align:center;word-wrap:inherit;height:45px;" @click="getInformation('检验内容',8,1)" titlexx="检验内容" gscolor="11">
+<el-input :rows="0" id="key_9__8_1"
+@keydown.shift.up="keyupShiftUp"
+@keydown.shift.down="keyupShiftDown"
+ @keydown.shift.left="keyupShiftLeft"
+ @keydown.shift.right="keyupShiftRight"
+ type="textarea" placeholderxx="检验内容" v-model="formData.key_9__8_1"
+ keyname="key_9__8_1" weighing="100"
+ @contextmenu.prevent.native="RightClick(8,1,3,9,9,9,$event)"
+@mousedown.left="inputLeftClick($event, 'key_9__8_1')"
+ trindex="8" tdindex="1" x1="3" x2="9" y1="9" y2="9" style="width:100%;height:100%"></el-input>
+</td></tr>
+<tr xy_type="2,true,9,true">
+<td colspan="2" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-top-color:#000000;border-top-style:solid;border-top-width:1;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;border-left-color:#000000;border-left-style:solid;border-left-width:1;vertical-align:center;text-align:left;word-wrap:inherit;height:45px;">要求到现场检验时间：</td>
+<td colspan="7" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-top-color:#000000;border-top-style:solid;border-top-width:1;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;border-right-color:#000000;border-right-style:solid;border-right-width:1;vertical-align:center;text-align:left;word-wrap:inherit;height:45px;" titlexx="要求到现场检验时间" @click="getInformation('要求到现场检验时间',9,1)" gscolor="11">
+<el-input type="text" @keyup.shift.up="keyupShiftUp" @keyup.shift.down="keyupShiftDown" @keyup.shift.left="keyupShiftLeft" @keyup.shift.right="keyupShiftRight" v-model="formData.key_6__9_1" placeholderxx="要求到现场检验时间" keyname="key_6__9_1" weighing="100.0" @contextmenu.prevent.native="RightClick(9,1,3,9,10,10,$event)" trindex="9" tdindex="1" x1="3" x2="9" y1="10" y2="10" style="width:100%;height:100%"></el-input>
+</td></tr>
+<tr xy_type="2,true,9,false">
+<td colspan="2" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-top-color:#000000;border-top-style:solid;border-top-width:1;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;border-left-color:#000000;border-left-style:solid;border-left-width:1;vertical-align:center;text-align:left;word-wrap:inherit;height:45px;">承包人递交日期、时间和签字：</td>
+<td colspan="3" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-top-color:#000000;border-top-style:solid;border-top-width:1;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;vertical-align:center;text-align:center;word-wrap:inherit;height:45px;" @click="getInformation('承包人递交日期时间和签字',10,1)" titlexx="承包人递交日期时间和签字" gscolor="11">
+<el-date-picker v-model="formData.key_2__10_1" type="date" format="YYYY年MM月DD日" value-format="YYYY年MM月DD日" placeholderxx="承包人递交日期时间和签字" keyname="key_2__10_1" weighing="100" @contextmenu.prevent.native="RightClick(10,1,3,5,11,11,$event)" trindex="10" tdindex="1" x1="3" x2="5" y1="11" y2="11" style="width:100%;height:100%"></el-date-picker>
+</td>
+<td colspan="4" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-top-color:#000000;border-top-style:solid;border-top-width:1;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;border-right-color:#000000;border-right-style:solid;border-right-width:1;vertical-align:center;text-align:left;word-wrap:inherit;height:45px;" titlexx="承包人递交日期时间和签字" dqid="1637740829172826112">
+<el-input type="text" @contextmenu.prevent.native="RightClick(10,2,6,9,11,11,$event)" trindex="10" tdindex="2" x1="6" x2="9" y1="11" y2="11" style="width:100%;height:100%;" id="key_2__10_2" @blur="getRegularExpression($event,'','请输入字符串',10,2)" placeholderxx="承包人递交签字" keyname="key_23__10_2" weighing="100" v-model="formData.key_23__10_2" @focus="getInformation('承包人递交签字',10,2)" :readonly="true"></el-input>
+</td></tr>
+<tr xy_type="2,true,9,false">
+<td colspan="2" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-top-color:#000000;border-top-style:solid;border-top-width:1;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;border-left-color:#000000;border-left-style:solid;border-left-width:1;vertical-align:center;text-align:left;word-wrap:inherit;height:45px;">监理员收件日期、时间和签字：</td>
+<td colspan="3" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-top-color:#000000;border-top-style:solid;border-top-width:1;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;vertical-align:center;text-align:center;word-wrap:inherit;height:45px;" @click="getInformation('监理员收件日期时间和签字',11,1)" titlexx="监理员收件日期时间和签字" gscolor="11">
+<el-date-picker v-model="formData.key_1__11_1" type="date" format="YYYY年MM月DD日" value-format="YYYY年MM月DD日" placeholderxx="监理员收件日期时间和签字" keyname="key_1__11_1" weighing="100" @contextmenu.prevent.native="RightClick(11,1,3,5,12,12,$event)" trindex="11" tdindex="1" x1="3" x2="5" y1="12" y2="12" style="width:100%;height:100%"></el-date-picker>
+</td>
+<td colspan="4" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-top-color:#000000;border-top-style:solid;border-top-width:1;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;border-right-color:#000000;border-right-style:solid;border-right-width:1;vertical-align:center;text-align:left;word-wrap:inherit;height:45px;" titlexx="监理员收件日期时间和签字" dqid="1637740829218963456">
+<el-input type="text" @contextmenu.prevent.native="RightClick(11,2,6,9,12,12,$event)" trindex="11" tdindex="2" x1="6" x2="9" y1="12" y2="12" style="width:100%;height:100%;" id="key_1__11_2" @blur="getRegularExpression($event,'','请输入字符串',11,2)" placeholderxx="监理员收件签字" keyname="key_24__11_2" weighing="100" v-model="formData.key_24__11_2" @focus="getInformation('监理员收件签字',11,2)" :readonly="true"></el-input>
+</td></tr>
+<tr xy_type="3,true,9,false">
+<td colspan="9" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-top-color:#000000;border-top-style:solid;border-top-width:1;border-left-color:#000000;border-left-style:solid;border-left-width:1;border-right-color:#000000;border-right-style:solid;border-right-width:1;vertical-align:center;text-align:left;word-wrap:inherit;height:22px;">质量证明附件：</td></tr>
+<tr xy_type="3,true,9,false">
+<td colspan="9" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;border-left-color:#000000;border-left-style:solid;border-left-width:1;border-right-color:#000000;border-right-style:solid;border-right-width:1;vertical-align:top;text-align:left;word-wrap:inherit;height:224px;" titlexx="质量证明附件" @click="getInformation('质量证明附件',13,0)" gscolor="11">
+<el-input :rows="0" type="textarea" @contextmenu.prevent.native="RightClick(13,0,1,9,14,14,$event)" trindex="13" tdindex="0" x1="1" x2="9" y1="14" y2="14" style="width:100%;height:100%" placeholderxx="质量证明附件" keyname="key_18__13_0" id="key_18__13_0" weighing="100" v-model="formData.key_18__13_0"></el-input>
+</td></tr>
+<tr xy_type="4,true,9,false">
+<td colspan="9" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-top-color:#000000;border-top-style:solid;border-top-width:1;border-left-color:#000000;border-left-style:solid;border-left-width:1;border-right-color:#000000;border-right-style:solid;border-right-width:1;vertical-align:center;text-align:general;word-wrap:inherit;height:28px;">监理员意见：</td></tr>
+<tr xy_type="4,true,9,false">
+<td colspan="9" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-left-color:#000000;border-left-style:solid;border-left-width:1;border-right-color:#000000;border-right-style:solid;border-right-width:1;vertical-align:center;text-align:center;word-wrap:inherit;height:46px;" titlexx="监理员意见" @click="getInformation('监理员意见',15,0)">
+<el-input :rows="0" type="textarea" placeholderxx="监理员意见" v-model="formData.key_7__15_0" keyname="key_7__15_0" weighing="100.0" @contextmenu.prevent.native="RightClick(15,0,1,9,16,16,$event)" trindex="15" tdindex="0" x1="1" x2="9" y1="16" y2="16" style="width:100%;height:100%"></el-input>
+</td></tr>
+<tr xy_type="4,true,9,false">
+<td style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;border-left-color:#000000;border-left-style:solid;border-left-width:1;vertical-align:center;text-align:left;word-wrap:inherit;height:24px;">签字：</td>
+<td colspan="5" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;vertical-align:center;text-align:left;word-wrap:inherit;height:24px;" titlexx="签字_监理员意见" dqid="1637740829130883072">
+<el-input type="text" @contextmenu.prevent.native="RightClick(16,1,2,6,17,17,$event)" trindex="16" tdindex="1" x1="2" x2="6" y1="17" y2="17" style="width:100%;height:100%;" placeholderxx="签字_监理员意见" @focus="getInformation('签字_监理员意见',16,1)" weighing="100.0" id="key_5__16_1" keyname="key_5__16_1" @blur="getRegularExpression($event,'^-?((([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$','请输入小数，格式0.0',16,1)" v-model="formData.key_5__16_1" :readonly="true"></el-input>
+</td>
+<td colspan="3" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;border-right-color:#000000;border-right-style:solid;border-right-width:1;vertical-align:center;text-align:center;word-wrap:inherit;height:24px;" @click="getInformation('日期_监理员意见',16,2)" titlexx="日期_监理员意见" gscolor="11">
+<el-date-picker type="date" format="YYYY年MM月DD日" @contextmenu.prevent.native="RightClick(16,2,7,9,17,17,$event)" trindex="16" tdindex="2" x1="7" x2="9" y1="17" y2="17" style="width:100%;height:100%" placeholderxx="日期_监理员意见" keyname="key_19__16_2" weighing="100" v-model="formData.key_19__16_2"></el-date-picker>
+</td></tr>
+<tr xy_type="5,true,9,false">
+<td colspan="9" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-top-color:#000000;border-top-style:solid;border-top-width:1;border-left-color:#000000;border-left-style:solid;border-left-width:1;border-right-color:#000000;border-right-style:solid;border-right-width:1;vertical-align:top;text-align:left;word-wrap:inherit;height:22px;">专业监理工程师意见：</td></tr>
+<tr xy_type="5,true,9,false">
+<td colspan="9" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-left-color:#000000;border-left-style:solid;border-left-width:1;border-right-color:#000000;border-right-style:solid;border-right-width:1;vertical-align:center;text-align:center;word-wrap:inherit;height:58px;" titlexx="专业监理工程师意见" @click="getInformation('专业监理工程师意见',18,0)">
+<el-input :rows="0" type="textarea" placeholderxx="专业监理工程师意见" v-model="formData.key_12__18_0" keyname="key_12__18_0" weighing="100.0" @contextmenu.prevent.native="RightClick(18,0,1,9,19,19,$event)" trindex="18" tdindex="0" x1="1" x2="9" y1="19" y2="19" style="width:100%;height:100%"></el-input>
+</td></tr>
+<tr xy_type="5,true,9,false">
+<td style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;border-left-color:#000000;border-left-style:solid;border-left-width:1;vertical-align:center;text-align:left;word-wrap:inherit;height:25px;">签字：</td>
+<td colspan="5" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;vertical-align:center;text-align:left;word-wrap:inherit;height:25px;" titlexx="签字_专业监理工程师意见" dqid="1637740829260906496">
+<el-input type="text" @contextmenu.prevent.native="RightClick(19,1,2,6,20,20,$event)" trindex="19" tdindex="1" x1="2" x2="6" y1="20" y2="20" style="width:100%;height:100%;" placeholderxx="签字_专业监理工程师意见" @focus="getInformation('签字_专业监理工程师意见',19,1)" weighing="100.0" id="key_4__19_1" keyname="key_4__19_1" @blur="getRegularExpression($event,'','请输入字符串',19,1)" v-model="formData.key_4__19_1" :readonly="true"></el-input>
+</td>
+<td colspan="3" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;border-right-color:#000000;border-right-style:solid;border-right-width:1;vertical-align:center;text-align:center;word-wrap:inherit;height:25px;" titlexx="日期_专业监理工程师意见" @click="getInformation('日期_专业监理工程师意见',19,2)" gscolor="11">
+<el-date-picker type="date" format="YYYY年MM月DD日" @contextmenu.prevent.native="RightClick(19,2,7,9,20,20,$event)" trindex="19" tdindex="2" x1="7" x2="9" y1="20" y2="20" style="width:100%;height:100%" placeholderxx="日期_专业监理工程师意见" keyname="key_20__19_2" weighing="100" v-model="formData.key_20__19_2"></el-date-picker>
+</td></tr>
+<tr xy_type="6,true,9,false">
+<td colspan="9" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-top-color:#000000;border-top-style:solid;border-top-width:1;border-left-color:#000000;border-left-style:solid;border-left-width:1;border-right-color:#000000;border-right-style:solid;border-right-width:1;vertical-align:top;text-align:left;word-wrap:inherit;height:22px;">承包人收到日期：</td></tr>
+<tr xy_type="6,true,9,false">
+<td colspan="9" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-left-color:#000000;border-left-style:solid;border-left-width:1;border-right-color:#000000;border-right-style:solid;border-right-width:1;vertical-align:center;text-align:center;word-wrap:inherit;height:60px;" titlexx="承包人收到日期">
+<el-input type="text" @contextmenu.prevent.native="RightClick(21,0,1,9,22,22,$event)" trindex="21" tdindex="0" x1="1" x2="9" y1="22" y2="22" style="width:100%;height:100%;" placeholderxx="签字_承包人收到日期" @focus="getInformation('签字_承包人收到日期',21,0)" weighing="0.7" id="key_16__21_0" keyname="key_16__21_0" @blur="getRegularExpression($event,'','请输入字符串',21,0)" v-model="formData.key_16__21_0"></el-input>
+</td></tr>
+<tr xy_type="6,true,9,false">
+<td style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;border-left-color:#000000;border-left-style:solid;border-left-width:1;vertical-align:center;text-align:left;word-wrap:inherit;height:26px;">签字：</td>
+<td colspan="5" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;vertical-align:center;text-align:left;word-wrap:inherit;height:26px;" titlexx="签字_承包人收到" @click="getInformation('签字_承包人收到',22,1)" dqid="1637740829302849536">
+<el-input type="text" @contextmenu.prevent.native="RightClick(22,1,2,6,23,23,$event)" trindex="22" tdindex="1" x1="2" x2="6" y1="23" y2="23" style="width:100%;height:100%;" id="key_16__22_1" @blur="getRegularExpression($event,'','请输入字符串',22,1)" placeholderxx="签字_承包人收到" keyname="key_17__22_1" weighing="100" v-model="formData.key_17__22_1" :readonly="true"></el-input>
+</td>
+<td colspan="3" style="color:rgb(0,0,0);font-family:宋体;font-size:11.0pt;background-color:rgb(255,255,255);border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1;border-right-color:#000000;border-right-style:solid;border-right-width:1;vertical-align:center;text-align:center;word-wrap:inherit;height:26px;" @click="getInformation('日期_承包人收到日期',22,2)" titlexx="日期_承包人收到日期" gscolor="11">
+<el-date-picker type="date" format="YYYY年MM月DD日" @contextmenu.prevent.native="RightClick(22,2,7,9,23,23,$event)" trindex="22" tdindex="2" x1="7" x2="9" y1="23" y2="23" style="width:100%;height:100%" placeholderxx="日期_承包人收到日期" keyname="key_21__22_2" weighing="100" v-model="formData.key_21__22_2"></el-date-picker>
+</td></tr></tbody></table>
+`

src/test/index.vue

@@ -2,70 +2,216 @@
     <div class="hc-page-box">
         <HcCard>
             <template #header>
-                <el-button type="primary" @click="TableFormShow">查看表单</el-button>
+                <el-button type="primary">查看表单</el-button>
             </template>
-
-            <!--查看表单-->
-            <HcDragModal :isShow="isTableFormShow" lefts="120" title="A15检验申请批复单" eid="1572864967831453696"
-                         tops="80" widths="960px" height="800px" isSortTop isCloseDestroy @close="TableFormClose">
-                <HcDragNode :more-menu="dragNodeMoreMenu" @menuTap="dragNodeMoreMenuTap">
-                    <HcTableForm kid="1572864967831453696" :api="apis" width="798px" height="1299px"/>
-                </HcDragNode>
-            </HcDragModal>
-
-            <HcDragModal :isShow="isTableFormShow" lefts="120" title="G10平面位置检测记录表" eid="1572853967430352896"
-                         tops="80" widths="960px" height="840px" isSortTop isCloseDestroy @close="TableFormClose">
-                <HcDragNode :more-menu="dragNodeMoreMenu" @menuTap="dragNodeMoreMenuTap">
-                    <HcTableForm kid="1572853967430352896" :api="apis" width="1235px" height="1200px"/>
-                </HcDragNode>
-            </HcDragModal>
-
-            <HcDragModal :isShow="isTableFormShow" lefts="120" title="C10.26洞身开挖地质情况检查记录表" eid="1610893927836024835"
-                         tops="80" widths="960px" height="840px" isSortTop isCloseDestroy @close="TableFormClose">
-                <HcDragNode :more-menu="dragNodeMoreMenu" @menuTap="dragNodeMoreMenuTap">
-                    <HcTableForm kid="1610893927836024835" :api="apis" width="1250px" height="1100px"/>
-                </HcDragNode>
-            </HcDragModal>
-
+            <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, ref} from "vue";
-import HcDragNode from "~com/drag-node/index.vue"
-import HcTableForm from "~com/table-form/index.vue"
-import wbsApi from "~api/data-fill/wbs"
-import {useAppStore} from "~src/store";
-const useAppState = useAppStore()
-
-const apis = ref({
-    dataInfo: wbsApi.getBussDataInfo,
-    bussCols: wbsApi.getHtmlBussCols,
-    excelHtml: wbsApi.getExcelHtml
-})
+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(() => {
-    useAppState.setDragModalSortTop([])
+    getExcelHtml()
 })
 
+const formData = ref({})
 
-const isTableFormShow = ref(true)
-const TableFormShow = () => {
-    isTableFormShow.value = true
+const getExcelHtml = () => {
+    HTableForm.createForm({
+        template: data,
+        tableForm: formData.value,
+        keys: {},
+        appId: `#table-form-1`,
+        onLeftClick: (key) => {
+            setShiftTableForm(key)
+        },
+    })
 }
-const TableFormClose = (closeFunc) => {
-    isTableFormShow.value = false
-    closeFunc()
+
+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)
+    }
 }
 
-const dragNodeMoreMenu = [
-    {key: 'save', icon: 'save-2', name: '保存'},
-    {key: 'preview', icon: 'eye', name: '预览'},
-]
+//全局按键按下监听
+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')
+    }
+}
 
-//菜单被点击
-const dragNodeMoreMenuTap = (item) => {
-    console.log(item)
+//全局键盘放开监听
+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>

src/test/json.js

@@ -0,0 +1,8 @@
+import {data} from './data.js'
+
+export default {
+    "code": 200,
+    "success": true,
+    "data": data,
+    "msg": "操作成功"
+}

src/utils/tools.js

@@ -1,5 +1,6 @@
 import {toColor, clog, getIndex} from "vue-utils-plus"
 import {useAppStore} from "~src/store";
+
 const store = useAppStore()
 
 //设置主色调
@@ -8,7 +9,7 @@ export const setMainColor = (color) => {
     const el = document.documentElement
     el.style.setProperty('--el-color-primary', color)
     // 设置 css 渐变 变量
-    const numArr = [3,5,7,8,9]
+    const numArr = [3, 5, 7, 8, 9]
     numArr.forEach(item => {
         let amount = 0
         if (item === 3) {
@@ -18,11 +19,11 @@ export const setMainColor = (color) => {
         } else if (item >= 7) {
             amount = amount = (10 - item) / 10
         }
-        const val = toColor('#FFFFFF', color , amount)
+        const val = toColor('#FFFFFF', color, amount)
         el.style.setProperty(`--el-color-primary-light-${item}`, val)
     })
     //生成深主色颜色
-    const val = toColor('#000000', color , 0.9)
+    const val = toColor('#000000', color, 0.9)
     el.style.setProperty('--el-color-primary-dark-2', val)
 }
 
@@ -44,11 +45,11 @@ export const getRowsValue = (arr, key, key2, value) => {
 
 //拼接ID
 export const rowsToId = (rows) => {
-    return rowsToKey(rows,'id')
+    return rowsToKey(rows, 'id')
 }
 
 //拼接字段
-export const rowsToKey = (rows,key) => {
+export const rowsToKey = (rows, key) => {
     return rows.map((obj) => {
         return obj[key];
     }).join(",")
@@ -68,3 +69,35 @@ export const delMessage = (cbk) => {
         }
     })
 }
+
+
+//设置复制文本
+export const setCopyText = (text) => {
+    return new Promise((resolve) => {
+        if (window.navigator?.clipboard) {
+            window.navigator.clipboard.writeText(text).then(() => {
+                resolve(true)
+            }).catch(() => {
+                resolve(false)
+            });
+        } else {
+            resolve(false)
+        }
+    })
+}
+
+//取剪切板文本
+export const getCopyText = () => {
+    return new Promise((resolve) => {
+        if (window.navigator?.clipboard) {
+            window.navigator.clipboard.readText().then((text) => {
+                resolve(text)
+            }).catch(() => {
+                resolve(false)
+            });
+        } else {
+            resolve(false)
+        }
+    })
+}
+

vite.config.js

@@ -37,7 +37,7 @@ export default defineConfig({
     ],
     server: {
         //port: '3001',
-        //host: '0.0.0.0',
+        host: '0.0.0.0',
         proxy: {
             '/api': {
                 ws: true,