表单渲染跨表复制粘贴的bug优化

src/components/table-form/index.vue

@@ -2,9 +2,9 @@
     <div :id="`table-form-item-${keyId}`" v-loading="isLoading" :class="!isTableForm? 'no-scroll-bar' : ''"
          :style="tableFormStyle" class="hc-table-form-data-item">
         <el-scrollbar v-if="isScroll" class="table-form-item-scrollbar">
-            <div :id="`table-form-${keyId}`" class="hc-excel-table-form"/>
+            <div :id="`table-form-${keyId}`" class="hc-excel-table-form" @click.capture="excelTableFormClick"/>
         </el-scrollbar>
-        <div v-else :id="`table-form-${keyId}`" class="hc-excel-table-form"/>
+        <div v-else :id="`table-form-${keyId}`" class="hc-excel-table-form" @click.capture="excelTableFormClick"/>
         <div v-if="!isTableForm" class="hc-no-table-form">
             <div class="table-form-no">
                 <img :src="notableform" alt=""/>
@@ -19,7 +19,7 @@ import {ref, watch, onMounted, nextTick, onUnmounted} from "vue"
 import HTableForm from "~src/plugins/HTableForm"
 import notableform from '~src/assets/view/notableform.svg'
 import {getStoreData, setStoreData, delStoreData} from "~uti/storage";
-import {getObjNullValue, isString, deepClone, getIndex} from "vue-utils-plus"
+import {getObjNullValue, getArrValue, isString, deepClone, getIndex} from "vue-utils-plus"
 
 //初始
 const props = defineProps({
@@ -54,6 +54,10 @@ const props = defineProps({
         type: Boolean,
         default: true
     },
+    pid: {
+        type: String,
+        default: ''
+    },
 })
 
 //初始变量
@@ -61,6 +65,7 @@ const keyId = ref(props.pkey)
 const noTips = ref(props.noTip)
 const isScroll = ref(props.scroll)
 const isLoading = ref(props.loading)
+const activeKey = ref(props.pid)
 
 //表单数据
 const excelHtml = ref(props.html)
@@ -73,11 +78,14 @@ const tableFormStyle = ref('')
 const isTableForm = ref(false)
 
 //监听
-watch(() => [props.pkey, props.noTip, props.scroll, props.loading, props.width, props.height], ([pkey, tip, scroll, loading, width, height]) => {
+watch(() => [
+    props.pkey, props.noTip, props.scroll, props.loading, props.width, props.height, props.pid
+], ([pkey, tip, scroll, loading, width, height, pid]) => {
     keyId.value = pkey
     noTips.value = tip
     isScroll.value = scroll
     isLoading.value = loading
+    activeKey.value = pid
     setItemStyle(width, height)
 })
 
@@ -124,7 +132,12 @@ const setItemStyle = (width, height) => {
 }
 
 //事件
-const emit = defineEmits(['rightTap', 'render'])
+const emit = defineEmits(['rightTap', 'render', 'excelBodyTap'])
+
+//表单被点击
+const excelTableFormClick = () => {
+    emit('excelBodyTap', keyId.value)
+}
 
 //获取已填写的数据
 const setPickerKey = () => {
@@ -147,30 +160,31 @@ const setExcelHtml = () => {
 
 //获取模板标签数据
 const getExcelHtml = () => {
-    const pkeyId = keyId.value
+    const pkeyId = keyId.value, pid = activeKey.value;
     const temp = isString(excelHtml.value) ? excelHtml.value : ''
     if (temp && pkeyId) {
         //渲染表单
         isTableForm.value = true
         tableFormApp.value = HTableForm.createForm({
+            pid: pid,
             template: temp,
             tableForm: excelForm.value,
             keys: colsKeys.value,
             appId: `#table-form-${pkeyId}`,
             onRight: (event, KeyName) => {
-                onRightClick(pkeyId, event, KeyName)
+                onRightClick(pkeyId, event, KeyName, pid)
             },
             //表单正则效验
             onBlur: (event, key, reg, val, msg) => {
-                setTableFormBlurReg(pkeyId, event, key, reg, val, msg)
+                setTableFormBlurReg(pkeyId, event, key, reg, val, msg, pid)
             },
             onLeftClick: (key) => {
-                setShiftTableForm(key)
+                setShiftTableForm(key, pid)
             },
         })
         excelForm.value.isRenderForm = true
         nextTick(() => {
-            HTableForm.setByClassKeyup(colsKeys.value)
+            HTableForm.setByClassKeyup(colsKeys.value, pid)
         })
         emit('render', excelForm.value)
     } else {
@@ -182,7 +196,7 @@ const getExcelHtml = () => {
 
 //正则效验
 const formRegExpJson = ref({})
-const setTableFormBlurReg = (pkeyId, event, key, reg, val, msg) => {
+const setTableFormBlurReg = (pkeyId, event, key, reg, val, msg, pid) => {
     const dom = document.getElementById(key)?.parentElement ?? ''
     if (dom) {
         if (val && reg) {
@@ -190,15 +204,15 @@ const setTableFormBlurReg = (pkeyId, event, key, reg, val, msg) => {
             let state = regx.test(val);
             if (state) {
                 delete formRegExpJson.value[key]
-                HTableForm.setFormStyle(key, 'hc-red-border')
+                HTableForm.setFormStyle(key, 'hc-red-border', pid)
             } else {
                 formRegExpJson.value[key] = {key, reg, val, msg, state}
-                HTableForm.setFormStyle(key, 'hc-red-border', true)
+                HTableForm.setFormStyle(key, 'hc-red-border', pid, true)
                 window?.$message?.warning(msg)
             }
         } else {
             delete formRegExpJson.value[key]
-            HTableForm.setFormStyle(key, 'hc-red-border')
+            HTableForm.setFormStyle(key, 'hc-red-border', pid)
         }
     } else {
         delete formRegExpJson.value[key]
@@ -206,20 +220,20 @@ const setTableFormBlurReg = (pkeyId, event, key, reg, val, msg) => {
 }
 
 //鼠标右键事件
-const onRightClick = (pkeyId, event, KeyName) => {
+const onRightClick = (pkeyId, event, KeyName, pid) => {
     //取光标位置
-    const specialDom = document.getElementById(KeyName + "")
+    const specialDom = HTableForm.getQuerySelector(KeyName, pid)
+    //const specialDom = document.getElementById(KeyName + "")
     const startPos = specialDom?.selectionStart || 0
     const endPos = specialDom?.selectionEnd || 0
-    emit('rightTap', {event, KeyName, startPos, endPos, pkeyId})
+    emit('rightTap', {event, KeyName, startPos, endPos, pkeyId, pid})
 }
 
 const isCtrlKey = ref(false)
 const checkKeyList = ref([])
-const copyKeyList = ref(getStoreData('TableFormCopyKeyList') || [])
 
 //设置选择数据
-const setShiftTableForm = (key) => {
+const setShiftTableForm = (key, pid) => {
     if (isCtrlKey.value) {
         const form = excelForm.value
         const keys = checkKeyList.value
@@ -230,94 +244,92 @@ const setShiftTableForm = (key) => {
             keys.splice(index, 1)
         }
         checkKeyList.value = keys
-        HTableForm.setCheckKeyStyle(key, index !== -1)
+        HTableForm.setCheckKeyStyle(key, pid, index !== -1)
     }
 }
 
-//全局按键按下监听
-document.onkeydown = async (event) => {
-    const {key, ctrlKey} = event
-    //按下ctrl键
-    if (ctrlKey && key === 'Control') {
-        isCtrlKey.value = true
+//按下ctrl键
+const setIsCtrlKey = (state) => {
+    isCtrlKey.value = state
+    console.log('按下ctrl键')
+}
+
+//按下复制快捷键
+const setCopyKeyList = (event) => {
+    const pid = activeKey.value
+    const keysList = deepClone(checkKeyList.value)
+    if (keysList.length > 0) {
+        event.preventDefault()
+        setStoreData('TableFormCopyKeys', keysList)
+        keysList.forEach(item => {
+            HTableForm.setCheckKeyStyle(item['key'], pid, true)
+        })
+        checkKeyList.value = []
     }
-    //按下复制快捷键
-    if (ctrlKey && key === 'c') {
-        const keysList = deepClone(checkKeyList.value)
-        if (keysList.length > 0) {
-            event.preventDefault()
-            setStoreData('TableFormCopyKeyList', keysList)
-            copyKeyList.value = keysList
-            keysList.forEach(item => {
-                HTableForm.setCheckKeyStyle(item['key'], true)
-            })
-            checkKeyList.value = []
+}
+
+//按下粘贴快捷键
+const setPasteKeyList = async (event) => {
+    let keysList = getArrValue(getStoreData('TableFormCopyKeys'))
+    const checkList = checkKeyList.value
+    if (checkList.length > 0) {
+        event.preventDefault()
+        //粘贴多个
+        if (checkList.length > 1 && keysList.length > 1) {
+            await setMultipleCheckValue(checkList, keysList)
         }
-    }
-    //按下粘贴快捷键
-    if (ctrlKey && key === 'v') {
-        const keysList = deepClone(copyKeyList.value)
-        const checkList = checkKeyList.value
-        if (checkList.length > 0) {
-            event.preventDefault()
-            //粘贴多个
-            if (checkList.length > 1 && keysList.length > 1) {
-                await setMultipleCheckValue(checkList, keysList)
-            }
-            //粘贴单个复制
-            if (checkList.length > 1 && keysList.length === 1) {
-                await setSingleCopyValue(checkList, keysList)
-            }
-            //复制单个粘贴
-            if (checkList.length === 1 && keysList.length > 1) {
-                await setCopySingleValue(checkList, keysList)
-            }
-            //清除缓存
-            checkKeyList.value = []
-            copyKeyList.value = []
-            delStoreData('TableFormCopyKeyList')
+        //粘贴单个复制
+        if (checkList.length > 1 && keysList.length === 1) {
+            await setSingleCopyValue(checkList, keysList)
+        }
+        //复制单个粘贴
+        if (checkList.length === 1 && keysList.length > 1) {
+            await setCopySingleValue(checkList, keysList)
         }
+        //清除缓存
+        checkKeyList.value = []
+        delStoreData('TableFormCopyKeys')
     }
 }
 
 //复制单个粘贴
 const setCopySingleValue = async (checkList, keysList) => {
+    const keys = deepClone(keysList)
     let form_val = '', key = checkList[0]['key']
-    const form = excelForm.value
-    for (let i = 0; i < keysList.length; i++) {
-        const val = form[keysList[i]['key']]
+    for (let i = 0; i < keys.length; i++) {
+        const val = keys[i]['val']
         form_val = form_val ? form_val + '、' + val : val
-        keysList.splice(0, 1) //删除第一个元素
+        keys.splice(0, 1) //删除第一个元素
     }
     await setTableFormInfoValue(key, form_val)
-    HTableForm.setCheckKeyStyle(key, true)
+    HTableForm.setCheckKeyStyle(key, activeKey.value, true)
 }
 
 //粘贴单个复制
 const setSingleCopyValue = async (checkList, keysList) => {
-    const form = excelForm.value
-    const form_val = form[keysList[0]['key']]
+    const keys = deepClone(keysList)
+    const form_val = keys[0]['val']
     for (let i = 0; i < checkList.length; i++) {
         const {key} = checkList[i]
         await setTableFormInfoValue(key, form_val)
-        HTableForm.setCheckKeyStyle(key, true)
+        HTableForm.setCheckKeyStyle(key, activeKey.value, true)
     }
-    keysList.splice(0, 1) //删除第一个元素
+    keys.splice(0, 1) //删除第一个元素
 }
 
 //粘贴多个
 const setMultipleCheckValue = async (checkList, keysList) => {
-    const form = excelForm.value
+    const keys = deepClone(keysList)
     for (let i = 0; i < checkList.length; i++) {
         const {key, val} = checkList[i]
-        if (keysList.length > 0) {
-            const form_val = form[keysList[0]['key']]
+        if (keys.length > 0) {
+            const form_val = keys[0]['val']
             await setTableFormInfoValue(key, form_val ? form_val : val)
-            keysList.splice(0, 1) //删除第一个元素
+            keys.splice(0, 1) //删除第一个元素
         } else {
             await setTableFormInfoValue(key, val)
         }
-        HTableForm.setCheckKeyStyle(key, true)
+        HTableForm.setCheckKeyStyle(key, activeKey.value, true)
     }
 }
 
@@ -331,20 +343,6 @@ const setTableFormInfoValue = async (key, value) => {
     })
 }
 
-//全局键盘放开监听
-document.onkeyup = (event) => {
-    const {key, ctrlKey} = event
-    if (!ctrlKey && key === 'Control') {
-        isCtrlKey.value = false
-    }
-}
-
-//卸载页面
-onUnmounted(() => {
-    document.onkeydown = null
-    document.onkeyup = null
-})
-
 //获取表单数据
 const getFormData = () => {
     return excelForm.value
@@ -385,7 +383,10 @@ defineExpose({
     getRegExpJson,
     isFormRegExp,
     setExcelHtml,
-    unmountHtml
+    unmountHtml,
+    setIsCtrlKey,
+    setCopyKeyList,
+    setPasteKeyList
 })
 </script>
 

src/plugins/HTableForm.js

@@ -30,7 +30,7 @@ export default class HTableForm {
 
     static tableFormApp = null
 
-    static createForm({template, tableForm, keys, appId, onRight, onBlur, onLeftClick}) {
+    static createForm({template, tableForm, keys, appId, pid, onRight, onBlur, onLeftClick}) {
         const _this = this;
         const app = createApp({
             data() {
@@ -107,23 +107,23 @@ export default class HTableForm {
                 },
                 //键盘事件 上键
                 keyupShiftUp(event) {
-                    _this.setKeyupData(event, 'up', keys)
+                    _this.setKeyupData(event, 'up', keys, pid)
                 },
                 //键盘事件 下键
                 keyupShiftDown(event) {
-                    _this.setKeyupData(event, 'down', keys)
+                    _this.setKeyupData(event, 'down', keys, pid)
                 },
                 //键盘事件 左键
                 keyupShiftLeft(event) {
-                    _this.setKeyupData(event, 'left', keys)
+                    _this.setKeyupData(event, 'left', keys, pid)
                 },
                 //键盘事件 右键
                 keyupShiftRight(event) {
-                    _this.setKeyupData(event, 'right', keys)
+                    _this.setKeyupData(event, 'right', keys, pid)
                 },
                 //日期时间框键盘事件
                 dateKeydown({type, name}) {
-                    _this.setKeyupData(name, type, keys)
+                    _this.setKeyupData(name, type, keys, pid)
                 },
                 //输入左键点击事件
                 inputLeftClick(event, key) {
@@ -159,7 +159,7 @@ export default class HTableForm {
     }
 
     //处理日期时间框的切换事件
-    static setByClassKeyup(keys) {
+    static setByClassKeyup(keys, pid = '') {
         try {
             let poppers = document.getElementsByClassName('hc-table-form-date-picker')
             for (let i = 0; i < poppers.length; i++) {
@@ -170,7 +170,7 @@ export default class HTableForm {
                 }
                 if (ids) {
                     let panels = item.getElementsByClassName('el-picker-panel__content')
-                    this.setElementsEvent(panels, key, keys)
+                    this.setElementsEvent(panels, key, keys, pid)
                 }
             }
         } catch (e) {
@@ -179,19 +179,19 @@ export default class HTableForm {
     }
 
     //设置事件
-    static setElementsEvent(elements, key, keys) {
+    static setElementsEvent(elements, key, keys, pid = '') {
         if (elements.length > 0) {
             const _this = this;
             elements[0].addEventListener("keydown", e => {
                 e.stopPropagation()
                 if (e.key === 'ArrowUp') {
-                    _this.setKeyupData({target: {id: key}}, 'up', keys)
+                    _this.setKeyupData({target: {id: key}}, 'up', keys, pid)
                 } else if (e.key === 'ArrowDown') {
-                    _this.setKeyupData({target: {id: key}}, 'down', keys)
+                    _this.setKeyupData({target: {id: key}}, 'down', keys, pid)
                 } else if (e.key === 'ArrowLeft') {
-                    _this.setKeyupData({target: {id: key}}, 'left', keys)
+                    _this.setKeyupData({target: {id: key}}, 'left', keys, pid)
                 } else if (e.key === 'ArrowRight') {
-                    _this.setKeyupData({target: {id: key}}, 'right', keys)
+                    _this.setKeyupData({target: {id: key}}, 'right', keys, pid)
                 }
             }, {
                 capture: true
@@ -200,7 +200,7 @@ export default class HTableForm {
     }
 
     //计算上下左右快捷键的
-    static setKeyupData({target}, type, keys) {
+    static setKeyupData({target}, type, keys, pid = '') {
         const key = target.id
         //处理快捷键数据和事件
         if (key && type && isArray(keys)) {
@@ -227,7 +227,7 @@ export default class HTableForm {
                     } else {
                         keyId = tops[left]
                     }
-                    this.setElementFocus(keyId)
+                    this.setElementFocus(keyId, pid)
                 }
             } else if (type === 'down') {
                 //向下移动
@@ -241,13 +241,13 @@ export default class HTableForm {
                     } else {
                         keyId = tops[left]
                     }
-                    this.setElementFocus(keyId)
+                    this.setElementFocus(keyId, pid)
                 }
             } else if (type === 'left') {
                 //向左移动
                 if (left > 0) {
                     const keyId = keys[top][left - 1]
-                    this.setElementFocus(keyId)
+                    this.setElementFocus(keyId, pid)
                 }
             } else if (type === 'right') {
                 //向右移动
@@ -255,29 +255,40 @@ export default class HTableForm {
                 const leftLength = lefts.length - 1;
                 if (leftLength > left) {
                     const keyId = lefts[left + 1]
-                    this.setElementFocus(keyId)
+                    this.setElementFocus(keyId, pid)
                 }
             }
         }
     }
 
     //设置元素焦点
-    static setElementFocus(keyId) {
-        if (keyId) {
+    static setElementFocus(key, pid) {
+        if (key) {
             try {
-                document.getElementById(keyId).focus();
+                this.getQuerySelector(key, pid)?.focus();
             } catch {
             }
         }
     }
 
+    //获取表单元素
+    static getQuerySelector(key, pid = '') {
+        let dom;
+        if (pid) {
+            dom = document.querySelector('#' + pid + ' #' + (key + ''))
+        } else {
+            dom = document.getElementById(key + '')
+        }
+        return dom
+    }
+
     //设置表单样式
-    static setFormStyle(key, name = 'hc-red-border', add = false) {
-        const dom = document.getElementById(key)
-        let parent = dom?.parentElement ?? ''
+    static setFormStyle(key, name = 'hc-red-border', pid = '', add = false) {
+        const dom = this.getQuerySelector(key, pid)
+        const parent = dom?.parentElement ?? ''
         if (dom.tagName === 'INPUT') {
-            parent = parent?.parentElement ?? ''
-            this.setFormClass(parent, name, add)
+            const parentElement = parent?.parentElement ?? ''
+            this.setFormClass(parentElement, name, add)
         } else if (dom.tagName === 'TEXTAREA') {
             this.setFormClass(dom, name, add)
         }
@@ -296,11 +307,11 @@ export default class HTableForm {
     }
 
     //设置选中样式
-    static setCheckKeyStyle(key, remove = false) {
+    static setCheckKeyStyle(key, pid = '', remove = false) {
         if (remove) {
-            this.setFormStyle(key, 'hc-green-border')
+            this.setFormStyle(key, 'hc-green-border', pid)
         } else {
-            this.setFormStyle(key, 'hc-green-border', true)
+            this.setFormStyle(key, 'hc-green-border', pid, true)
         }
     }
 

src/views/data-fill/collapse-form/index.vue

@@ -72,7 +72,9 @@
                                        :datas="changeFormDatas(item?.pkeyId, 'collapse')"
                                        :kid="item?.pkeyId"
                                        :nodeName="item.nodeName"
+                                       :pid="`table-form-${item?.pkeyId}`"
                                        :tid="treeId"
+                                       @excelBodyTap="excelTableFormClick($event)"
                                        @render="tableFormRender($event, item, index)"
                                        @rightTap="tableFormRightTap($event, index)"/>
                     </div>
@@ -244,9 +246,11 @@
                                :height="item.height"
                                :kid="item.pkeyId"
                                :nodeName="item.title"
+                               :pid="`table-form-${item?.pkeyId}`"
                                :scroll="false"
                                :tid="item.treeId"
                                :width="item.width"
+                               @excelBodyTap="excelTableFormClick($event)"
                                @render="tableFormRender($event, item['item'], item['index'])"
                                @rightTap="tableFormRightTap($event, item['index'])"/>
             </HcDragNode>
@@ -256,7 +260,7 @@
 </template>
 
 <script setup>
-import {ref, watch, nextTick} from "vue";
+import {ref, watch, nextTick, onUnmounted} from "vue";
 import {useAppStore} from "~src/store";
 import wbsApi from "~api/data-fill/wbs"
 import HcUpload from "../components/HcUpload.vue"
@@ -268,7 +272,7 @@ import HcTestFile from "./test-file.vue"
 import HcFormula from "./formula.vue"
 import HcDragNode from "~com/drag-node/index.vue"
 import NoDataSvg from '~src/assets/view/no-data.svg'
-import {setPosRange, isType, utilsArray, deepClone, isArray} from "vue-utils-plus"
+import {setPosRange, isType, utilsArray, deepClone, isValueNull} from "vue-utils-plus"
 //初始变量
 const useAppState = useAppStore()
 const {isIndex, getIndex} = utilsArray()
@@ -727,7 +731,7 @@ const formulaModalClose = () => {
 const DragModalTableForm = ref([])
 const DragModalHeight = ref(600)
 const windowClick = async (item, indexs) => {
-    const list = DragModalTableForm.value
+    const list = deepClone(DragModalTableForm.value)
     let index = getIndex(list, 'pkeyId', item.pkeyId)
     if (!item.isWindow) {
         const formSize = getTableFormSize(item?.pkeyId)
@@ -799,7 +803,6 @@ const dragNodeMoreMenu = [
 
 //还原窗口
 const closeIconTap = async (event, item, indexs) => {
-    console.log(event)
     const {index, pkeyId} = item
     let KeyId = `item-${index}-${pkeyId}`
     await TableFormClose(item, indexs)
@@ -1011,7 +1014,6 @@ const saveExcelBussData = async ({pkeyId}, dragItem = null, showTip = true) => {
     setDragModalLoading(dragItem, '保存中...', true)
     const refs = await getFormRef(pkeyId)
     const isRegExp = await refs?.isFormRegExp()
-    console.log(isRegExp)
     if (isRegExp) {
         const formData = refs?.getFormData()
         const {error, code} = await wbsApi.saveExcelBussData(formData)
@@ -1141,6 +1143,47 @@ const setToString = (val) => {
     return val ? val + '' : ''
 }
 
+//表单被点击
+const presentId = ref('')
+const excelTableFormClick = (key) => {
+    presentId.value = key
+}
+
+//全局按键按下监听
+document.onkeydown = async (event) => {
+    const pkeyId = presentId.value
+    if (!isValueNull(pkeyId)) {
+        const {key, ctrlKey} = event
+        //按下ctrl键
+        if (ctrlKey && key === 'Control') {
+            const refs = await getFormRef(pkeyId)
+            refs?.setIsCtrlKey(true)
+        }
+        //按下复制快捷键
+        if (ctrlKey && key === 'c') {
+            const refs = await getFormRef(pkeyId)
+            refs?.setCopyKeyList(event)
+        }
+        //按下粘贴快捷键
+        if (ctrlKey && key === 'v') {
+            const refs = await getFormRef(pkeyId)
+            await refs?.setPasteKeyList(event)
+        }
+    }
+}
+
+//全局键盘放开监听
+document.onkeyup = async (event) => {
+    const pkeyId = presentId.value
+    if (!isValueNull(pkeyId)) {
+        const {key, ctrlKey} = event
+        if (!ctrlKey && key === 'Control') {
+            const refs = await getFormRef(pkeyId)
+            refs?.setIsCtrlKey(false)
+        }
+    }
+}
+
 //获取已渲染的表单
 const getFilterFormData = async () => {
     const formArr = formDataList.value;
@@ -1198,6 +1241,13 @@ const setActiveKey = (key) => {
     return ActiveKey.value = key;
 }
 
+//卸载页面
+onUnmounted(() => {
+    console.log('卸载页面')
+    document.onkeydown = null
+    document.onkeyup = null
+})
+
 // 暴露出去
 defineExpose({
     getFormData,

src/views/data-fill/collapse-form/table-form-item.vue

@@ -5,11 +5,14 @@
                  :height="heights"
                  :html="excelHtml"
                  :loading="loading"
+                 :pid="activeKey"
                  :pkey="keyId"
                  :scroll="scroll"
                  :width="widths"
+                 @excelBodyTap="excelTableFormClick"
                  @render="tableFormRender"
-                 @rightTap="tableFormRightTap"/>
+                 @rightTap="tableFormRightTap"
+    />
 </template>
 
 <script setup>
@@ -53,6 +56,10 @@ const props = defineProps({
         type: String,
         default: ''
     },
+    pid: { // 折叠ID
+        type: String,
+        default: ''
+    },
 })
 
 //初始变量
@@ -68,6 +75,7 @@ const nodeNames = ref(props.nodeName)
 
 const heights = ref(props.height)
 const widths = ref(props.width)
+const activeKey = ref(props.pid)
 
 const tableFormRef = ref(null)
 
@@ -81,8 +89,9 @@ watch(() => [
     props.nodeName,
     props.height,
     props.width,
+    props.pid,
 ], (
-    [project_id, contract_id, tree_id, key_id, cid, nodeName, height, width]
+    [project_id, contract_id, tree_id, key_id, cid, nodeName, height, width, pid]
 ) => {
     projectId.value = project_id
     contractId.value = contract_id
@@ -90,9 +99,9 @@ watch(() => [
     keyId.value = key_id ? key_id + '' : ''
     classify.value = cid
     nodeNames.value = nodeName
-
     heights.value = height
     widths.value = width
+    activeKey.value = pid
 })
 
 //深度监听变动的对象数据
@@ -108,16 +117,21 @@ watch(() => [
 onMounted(async () => {
     loading.value = true
     //获取已填写的数据
-    await getTableFormInfo(keyId.value)
+    getTableFormInfo(keyId.value).then()
     //按键key列表
-    await getHtmlBussColsApi(keyId.value)
+    getHtmlBussColsApi(keyId.value).then()
     //渲染表单
     await getExcelHtml(keyId.value)
     loading.value = false
 })
 
 //事件
-const emit = defineEmits(['rightTap', 'render'])
+const emit = defineEmits(['rightTap', 'render', 'excelBodyTap'])
+
+//表单被点击
+const excelTableFormClick = (item) => {
+    emit('excelBodyTap', item)
+}
 
 //获取表单初始数据
 const getFormDataInit = () => {
@@ -239,12 +253,30 @@ const getNodeName = () => {
     return nodeNames.value
 }
 
+//按下ctrl键
+const setIsCtrlKey = (data) => {
+    tableFormRef.value?.setIsCtrlKey(data)
+}
+
+//按下复制快捷键
+const setCopyKeyList = (event) => {
+    tableFormRef.value?.setCopyKeyList(event)
+}
+
+//按下粘贴快捷键
+const setPasteKeyList = async (event) => {
+    await tableFormRef.value?.setPasteKeyList(event)
+}
+
 // 暴露出去
 defineExpose({
     getFormData,
     setFormData,
     getRegExpJson,
     isFormRegExp,
-    getNodeName
+    getNodeName,
+    setIsCtrlKey,
+    setCopyKeyList,
+    setPasteKeyList
 })
 </script>