优化复制粘贴的按键事件

src/components/AppConfig/index.vue

@@ -3,19 +3,28 @@
 </template>
 
 <script setup>
+import { onMounted } from 'vue';
 import {ElMessage, ElLoading, ElNotification, ElMessageBox} from 'element-plus'
-//import split from "split.js";
 import {HcLog} from '~uti/tools'
 
-// 将ui的函数挂载在windows对象上
-function registerElTools() {
+//获取系统平台
+const userAgent = navigator.userAgent
+const isWin = userAgent.indexOf("Win") !== -1;
+const isMac = userAgent.indexOf("Mac") !== -1;
+
+onMounted(() => {
+    // 将ui的函数挂载在windows对象上
     window['$loading'] = ElLoading;
     window['$messageBox'] = ElMessageBox;
     window['$message'] = ElMessage;
     window['$notification'] = ElNotification;
+
+    //扩展方法函数
     window['$HcLog'] = HcLog;
-    //window['$split'] = split;
-}
 
-registerElTools()
+    //检测系统平台
+    window['isWin'] = isWin
+    window['isMac'] = isMac
+    window['isCtrl'] = isMac ? 'Meta' : 'Control';
+})
 </script>

src/components/table-form/index.vue

@@ -102,7 +102,7 @@ watch(() => [
     props.form
 ], ([val]) => {
     excelForm.value = val
-    console.log('表单数据变动', val)
+    //console.log('表单数据变动', val)
     setPickerKey()
     setFormData(val)
 }, {

src/plugins/HTableForm.js

@@ -30,7 +30,8 @@ export default class HTableForm {
 
     static tableFormApp = null
 
-    static createForm({template, tableForm, keys, appId, pid, onRight, onBlur, onLeftClick, onFormDataChange}) {
+    static createForm({template, tableForm, keys, appId, pid, onRight, onBlur, onLeftClick, onFormDataChange}) 
+    {
         const _this = this;
         const app = createApp({
             data() {
@@ -152,7 +153,8 @@ export default class HTableForm {
     }
 
     //处理日期范围数据
-    static setPickerKey(data) {
+    static setPickerKey(data) 
+    {
         const pickerKey = data['pickerKey'] || ''
         if (pickerKey) {
             const pickerKeys = pickerKey.split(',')
@@ -170,7 +172,8 @@ export default class HTableForm {
     }
 
     //处理日期时间框的切换事件
-    static setByClassKeyup(keys, pid = '') {
+    static setByClassKeyup(keys, pid = '') 
+    {
         try {
             let poppers = document.getElementsByClassName('hc-table-form-date-picker')
             for (let i = 0; i < poppers.length; i++) {
@@ -190,7 +193,8 @@ export default class HTableForm {
     }
 
     //设置事件
-    static setElementsEvent(elements, key, keys, pid = '') {
+    static setElementsEvent(elements, key, keys, pid = '') 
+    {
         if (elements.length > 0) {
             const _this = this;
             elements[0].addEventListener("keydown", e => {
@@ -211,7 +215,8 @@ export default class HTableForm {
     }
 
     //计算上下左右快捷键的
-    static setKeyupData({target}, type, keys, pid = '') {
+    static setKeyupData({target}, type, keys, pid = '') 
+    {
         const key = target.id
         //处理快捷键数据和事件
         if (key && type && isArray(keys)) {
@@ -273,7 +278,8 @@ export default class HTableForm {
     }
 
     //设置元素焦点
-    static setElementFocus(key, pid) {
+    static setElementFocus(key, pid) 
+    {
         if (key) {
             try {
                 this.getQuerySelector(key, pid)?.focus();
@@ -283,7 +289,8 @@ export default class HTableForm {
     }
 
     //获取表单元素
-    static getQuerySelector(key, pid = '') {
+    static getQuerySelector(key, pid = '') 
+    {
         let dom;
         if (pid) {
             dom = document.querySelector('#' + pid + ' #' + (key + ''))
@@ -294,7 +301,8 @@ export default class HTableForm {
     }
 
     //设置表单样式
-    static setFormStyle(key, name = 'hc-red-border', pid = '', add = false) {
+    static setFormStyle(key, name = 'hc-red-border', pid = '', add = false) 
+    {
         const dom = this.getQuerySelector(key, pid)
         const parent = dom?.parentElement ?? ''
         if (dom.tagName === 'INPUT') {
@@ -305,7 +313,8 @@ export default class HTableForm {
         }
     }
 
-    static setFormClass(dom, name = 'hc-red-border', add = false) {
+    static setFormClass(dom, name = 'hc-red-border', add = false) 
+    {
         const classStr = dom.getAttribute('class')
         const classArr = classStr.split(' ')
         const index = classArr.indexOf(name)
@@ -318,7 +327,8 @@ export default class HTableForm {
     }
 
     //设置选中样式
-    static setCheckKeyStyle(key, pid = '', remove = false) {
+    static setCheckKeyStyle(key, pid = '', remove = false) 
+    {
         if (remove) {
             this.setFormStyle(key, 'hc-green-border', pid)
         } else {
@@ -326,7 +336,48 @@ export default class HTableForm {
         }
     }
 
-    //卸载示例
+    //设置全局按键监听
+    static setOnEventKey({onCtrlDown, onCtrlDownC, onCtrlDownV, onCtrlUp}) 
+    {
+        //全局按键按下监听
+        document.onkeydown = (event) => {
+            if(onCtrlDown || onCtrlDownC || onCtrlDownV) {
+                const {key, ctrlKey, metaKey} = event
+                const isCtrl = window.isMac ? metaKey : window.isWin ? ctrlKey : false
+                //window.$HcLog('全局按键', 'isCtrl', isCtrl)
+                //按下ctrl键 或 control 键
+                if (onCtrlDown && isCtrl && key === window?.isCtrl) {
+                    onCtrlDown(event)
+                }
+                //按下复制快捷键
+                if (onCtrlDownC && isCtrl && key === 'c') {
+                    onCtrlDownC(event)
+                }
+                //按下粘贴快捷键
+                if (onCtrlDownV && isCtrl && key === 'v') {
+                    onCtrlDownV(event)
+                }
+            }
+        }
+        //全局键盘放开监听
+        document.onkeyup = (event) => {
+            if(onCtrlUp) {
+                const {key, ctrlKey, metaKey} = event
+                const isCtrl = window.isMac ? metaKey : window.isWin ? ctrlKey : false
+                if (!isCtrl && key === window?.isCtrl) {
+                    onCtrlUp(event)
+                }
+            }
+        }
+    }
+
+    //卸载全局按键监听
+    static unmountEventKey() {
+        document.onkeydown = null
+        document.onkeyup = null
+    }
+
+    //卸载实例
     static unmountFormApp() {
         if (this.tableFormApp) {
             this.tableFormApp?.unmount()

src/test/data.js

@@ -13,8 +13,8 @@ export const data = `
 <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.capture="contextmenuClick($event)"
-    @mouseup.right="RightClick(3,1,2,5,4,4,$event)"
-    @mouseup.left="inputLeftClick($event, 'key_14__3_1')"
+    @mousedown.right="RightClick(3,1,2,5,4,4,$event)"
+    @mousedown.left="inputLeftClick($event, 'key_14__3_1')"
     trindex="3" tdindex="1" x1="2" x2="5" y1="4" y2="4"
     style="width:100%;height:100%;"
     placeholderxx="承包单位"

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

@@ -435,7 +435,7 @@ onMounted(() => {
     setTableFormMenu(useAppState.projectInfo)
     const {offsetHeight} = document.body
     DragModalHeight.value = offsetHeight - 200
-    setMountKey_down_up()
+    setMountOnEventKey()
 })
 
 //处理变动的数据
@@ -1227,58 +1227,56 @@ const excelTableFormClick = (key) => {
 
 //缓存被激活时
 onActivated(() => {
-    setMountKey_down_up()
+    setMountOnEventKey()
 })
 
 //缓存时被移除
 onDeactivated(() => {
-    setUnloadKey_down_up()
+    HTableForm.unmountEventKey()
 })
 
 //页面被卸载
 onUnmounted(() => {
-    setUnloadKey_down_up()
+    HTableForm.unmountEventKey()
 })
 
-const setMountKey_down_up = () => {
-    //全局按键按下监听
-    document.onkeydown = async (event) => {
-        const pkeyId = presentId.value
-        if (!isNullES(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 (!isNullES(pkeyId)) {
-            const {key, ctrlKey} = event
-            if (!ctrlKey && key === 'Control') {
-                const refs = await getFormRef(pkeyId)
-                refs?.setIsCtrlKey(false)
-            }
-        }
-    }
+const setMountOnEventKey = () => {
+    HTableForm.setOnEventKey({
+        //按下ctrl键 或 control 键
+        onCtrlDown: async () => {
+            //window.$HcLog('全局按键', '按下ctrl键 或 control 键')
+            const refs = await setOnFuncFormRef()
+            refs?.setIsCtrlKey(true)
+        },
+        //按下复制快捷键
+        onCtrlDownC: async (event) => {
+            //window.$HcLog('全局按键', '按下复制快捷键')
+            const refs = await setOnFuncFormRef()
+            refs?.setCopyKeyList(event)
+        },
+        //按下粘贴快捷键
+        onCtrlDownV: async (event) => {
+            //window.$HcLog('全局按键', '按下粘贴快捷键')
+            const refs = await setOnFuncFormRef()
+            await refs?.setPasteKeyList(event)
+        },
+        //放开ctrl键 或 control 键
+        onCtrlUp: async () => {
+            //window.$HcLog('全局按键', '放开ctrl键 或 control 键')
+            const refs = await setOnFuncFormRef()
+            refs?.setIsCtrlKey(false)
+        },
+    })
 }
 
-const setUnloadKey_down_up = () => {
-    document.onkeydown = null
-    document.onkeyup = null
+//获取表单的ref
+const setOnFuncFormRef = async () => {
+    const pkeyId = presentId.value
+    if (!isNullES(pkeyId)) {
+        return await getFormRef(pkeyId)
+    } else {
+        return;
+    }
 }
 
 

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

@@ -231,7 +231,7 @@ const tableFormRightTap = (item) => {
 const setFormChangeData = (data) => {
     const form = deepClone(tableFormInfo.value)
     tableFormInfo.value = {...form, ...data}
-    console.log('设置数据', {...form, ...data})
+    //console.log('设置数据', {...form, ...data})
 }
 
 const getFormData = () => {

src/views/ledger/components/table-form.vue

@@ -143,10 +143,11 @@
 <script setup>
 import {ref, watch, onMounted, onActivated, onDeactivated, onUnmounted} from "vue";
 import {getObjValue, isString, getArrValue, isNullES, getObjVal} from "js-fast-way"
-import queryApi from '~api/ledger/query';
-import wbsQueryApi from '~api/data-fill/query';
 import DateCalendar from "./dateCalendar/index.vue"
 import HcTableForm from "~com/table-form/index.vue";
+import HTableForm from "~src/plugins/HTableForm"
+import wbsQueryApi from '~api/data-fill/query';
+import queryApi from '~api/ledger/query';
 import {useAppStore} from "~src/store";
 
 const useAppState = useAppStore()
@@ -200,7 +201,7 @@ watch(() => [
 //渲染完成
 onMounted(() => {
     setQueryDataDate()
-    setMountKey_down_up()
+    setMountOnEventKey()
 })
 
 //获取相关数据
@@ -742,50 +743,42 @@ const theLogOneAbolish = async () => {
 
 //缓存被激活时
 onActivated(() => {
-    setMountKey_down_up()
+    setMountOnEventKey()
 })
 
 //缓存时被移除
 onDeactivated(() => {
-    setUnloadKey_down_up()
+    HTableForm.unmountEventKey()
 })
 
-
-const setMountKey_down_up = () => {
-    //全局按键按下监听
-    document.onkeydown = async (event) => {
-        console.log('按下' + event.key + '键')
-        const {key, ctrlKey} = event
-        //按下ctrl键
-        if (ctrlKey && key === 'Control') {
+const setMountOnEventKey = () => {
+    HTableForm.setOnEventKey({
+        //按下ctrl键 或 control 键
+        onCtrlDown: () => {
+            //window.$HcLog('全局按键', '按下ctrl键 或 control 键')
             tableFormRef.value?.setIsCtrlKey(true)
-        }
+        },
         //按下复制快捷键
-        if (ctrlKey && key === 'c') {
+        onCtrlDownC: (event) => {
+            //window.$HcLog('全局按键', '按下复制快捷键')
             tableFormRef.value?.setCopyKeyList(event)
-        }
+        },
         //按下粘贴快捷键
-        if (ctrlKey && key === 'v') {
+        onCtrlDownV: async (event) => {
+            //window.$HcLog('全局按键', '按下粘贴快捷键')
             await tableFormRef.value?.setPasteKeyList(event)
-        }
-    }
-    //全局键盘放开监听
-    document.onkeyup = async (event) => {
-        const {key, ctrlKey} = event
-        if (!ctrlKey && key === 'Control') {
+        },
+        //放开ctrl键 或 control 键
+        onCtrlUp: () => {
+            //window.$HcLog('全局按键', '放开ctrl键 或 control 键')
             tableFormRef.value?.setIsCtrlKey(false)
-        }
-    }
-}
-
-const setUnloadKey_down_up = () => {
-    document.onkeydown = null
-    document.onkeyup = null
+        },
+    })
 }
 
 //页面被卸载
 onUnmounted(() => {
-    setUnloadKey_down_up()
+    HTableForm.unmountEventKey()
 })
 </script>