日志填报的按键

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

@@ -0,0 +1,138 @@
+.hc-table-form-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    margin-left: 24px;
+    height: 100%;
+    .hc-table-forem-box, .hc-fixed-page, .hc-right-pian-box, .hc-footer-box {
+        padding: 24px;
+        background: #f1f5f8;
+        border-radius: 10px;
+        box-shadow: -2px 0px 10px 0px rgba(32, 37, 50, 0.03), 0px 10px 21px 20px rgba(32, 37, 50, 0.03);
+    }
+    .hc-content-box {
+        flex: 1;
+        display: flex;
+        position: relative;
+        margin-bottom: 24px;
+        height: calc(100% - 105px);
+        .hc-table-forem-box {
+            flex: 1;
+            margin-right: 24px;
+            position: relative;
+        }
+        .hc-fixed-page {
+            position: relative;
+            margin-right: 24px;
+            padding: 0;
+            .hc-fixed-page-list-box {
+                position: relative;
+                padding: 24px;
+                user-select: none;
+                .fixed-page-item {
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    border-radius: 3px;
+                    padding: 6px 10px;
+                    font-size: 14px;
+                    background: #f1f5f8;
+                    border: 1px solid #f1f5f8;
+                    color: var(--el-color-primary-light-3);
+                    box-shadow: 4px 4px 8px 0 rgba(54, 92, 167, 0.15), -4px -4px 8px 0 #ffffff;
+                    transition: .1s;
+                    .name-box {
+                        position: relative;
+                        display: flex;
+                        align-items: center;
+                        margin-right: 24px;
+                        cursor: pointer;
+                        .page {
+                            margin-left: 5px;
+                        }
+                    }
+                    .close-box {
+                        position: relative;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        cursor: pointer;
+                        font-size: 16px;
+                    }
+                    &.primary {
+                        background: var(--el-color-primary);
+                        color: var(--el-color-white);
+                        box-shadow: var(--hc-shadow);
+                        border: 1px solid #f1f5f8;
+                    }
+                    & + .fixed-page-item {
+                        margin-top: 20px;
+                    }
+                }
+            }
+        }
+        .hc-right-pian-box {
+            width: 360px;
+            position: relative;
+            padding: 24px 20px;
+            .hc-process-box {
+                position: relative;
+                flex: 1;
+                overflow: hidden;
+                .hc-scrollbar-box {
+                    display: contents;
+                }
+                .process-item-box {
+                    position: relative;
+                    color: #838791;
+                    font-size: 14px;
+                    padding: 8px 0;
+                    display: flex;
+                    align-items: flex-start;
+                    .process-item {
+                        position: relative;
+                        flex: 1;
+                    }
+                    .process-icon {
+                        font-size: 20px;
+                        cursor: pointer;
+                        margin-left: 16px;
+                        transition: color 0.2s;
+                        &:hover {
+                            color: var(--el-color-primary-light-3);
+                        }
+                    }
+                }
+                .process-item-box + .process-item-box {
+                    border-top: 0.5px solid #e9e9e9;
+                }
+            }
+        }
+    }
+    .hc-footer-box {
+        position: relative;
+        height: 80px;
+        display: flex;
+        align-items: center;
+        padding: 20px 24px;
+        overflow: hidden;
+    }
+}
+
+.hc-user-time-box {
+    position: relative;
+    height: 100%;
+    display: flex;
+    .tree-box {
+        border-right: 1px solid #EEEEEE;
+        position: relative;
+        padding: 20px;
+        width: 200px;
+    }
+    .user-box {
+        position: relative;
+        flex: 1;
+    }
+}

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

@@ -12,7 +12,7 @@
             <div v-if="formLogDataList.length > 1" class="hc-fixed-page">
                 <el-scrollbar>
                     <div class="hc-fixed-page-list-box">
-                        <template v-for="(item,index) in formLogDataList">
+                        <template v-for="(item, index) in formLogDataList">
                             <div :class="index === formLogIndex ? 'primary' : ''" class="fixed-page-item"
                                  @click="getBussDataInfo(index)">
                                 <div class="name-box">
@@ -141,10 +141,9 @@
 </template>
 
 <script setup>
-import {ref, watch, nextTick} from "vue";
+import {ref, watch, onMounted, onActivated, onDeactivated, onUnmounted} from "vue";
 import queryApi from '~api/ledger/query';
 import wbsQueryApi from '~api/data-fill/query';
-//import HTableForm from "~src/plugins/HTableForm"
 import DateCalendar from "./dateCalendar/index.vue"
 import {getObjValue, getObjNullValue, isString, getArrValue, isValueNull} from "vue-utils-plus"
 import HcTableForm from "~com/table-form/index.vue";
@@ -199,8 +198,9 @@ watch(() => [
 })
 
 //渲染完成
-nextTick(() => {
+onMounted(() => {
     setQueryDataDate()
+    setMountKey_down_up()
 })
 
 //获取相关数据
@@ -739,147 +739,58 @@ const theLogOneAbolish = async () => {
         window?.location?.reload()  //刷新页面
     }
 }
-</script>
 
-<style lang="scss" scoped>
-.hc-table-form-content {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    margin-left: 24px;
-    height: 100%;
-    .hc-table-forem-box, .hc-fixed-page, .hc-right-pian-box, .hc-footer-box {
-        padding: 24px;
-        background: #f1f5f8;
-        border-radius: 10px;
-        box-shadow: -2px 0px 10px 0px rgba(32, 37, 50, 0.03), 0px 10px 21px 20px rgba(32, 37, 50, 0.03);
-    }
-    .hc-content-box {
-        flex: 1;
-        display: flex;
-        position: relative;
-        margin-bottom: 24px;
-        height: calc(100% - 105px);
-        .hc-table-forem-box {
-            flex: 1;
-            margin-right: 24px;
-            position: relative;
+//缓存被激活时
+onActivated(() => {
+    setMountKey_down_up()
+})
+
+//缓存时被移除
+onDeactivated(() => {
+    setUnloadKey_down_up()
+})
+
+
+const setMountKey_down_up = () => {
+    //全局按键按下监听
+    document.onkeydown = async (event) => {
+        console.log('按下' + event.key + '键')
+        const {key, ctrlKey} = event
+        //按下ctrl键
+        if (ctrlKey && key === 'Control') {
+            tableFormRef.value?.setIsCtrlKey(true)
         }
-        .hc-fixed-page {
-            position: relative;
-            margin-right: 24px;
-            padding: 0;
-            .hc-fixed-page-list-box {
-                position: relative;
-                padding: 24px;
-                user-select: none;
-                .fixed-page-item {
-                    position: relative;
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
-                    border-radius: 3px;
-                    padding: 6px 10px;
-                    font-size: 14px;
-                    background: #f1f5f8;
-                    border: 1px solid #f1f5f8;
-                    color: var(--el-color-primary-light-3);
-                    box-shadow: 4px 4px 8px 0 rgba(54, 92, 167, 0.15), -4px -4px 8px 0 #ffffff;
-                    transition: .1s;
-                    .name-box {
-                        position: relative;
-                        display: flex;
-                        align-items: center;
-                        margin-right: 24px;
-                        cursor: pointer;
-                        .page {
-                            margin-left: 5px;
-                        }
-                    }
-                    .close-box {
-                        position: relative;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        cursor: pointer;
-                        font-size: 16px;
-                    }
-                    &.primary {
-                        background: var(--el-color-primary);
-                        color: var(--el-color-white);
-                        box-shadow: var(--hc-shadow);
-                        border: 1px solid #f1f5f8;
-                    }
-                    & + .fixed-page-item {
-                        margin-top: 20px;
-                    }
-                }
-            }
+        //按下复制快捷键
+        if (ctrlKey && key === 'c') {
+            tableFormRef.value?.setCopyKeyList(event)
         }
-        .hc-right-pian-box {
-            width: 360px;
-            position: relative;
-            padding: 24px 20px;
-            .hc-process-box {
-                position: relative;
-                flex: 1;
-                overflow: hidden;
-                .hc-scrollbar-box {
-                    display: contents;
-                }
-                .process-item-box {
-                    position: relative;
-                    color: #838791;
-                    font-size: 14px;
-                    padding: 8px 0;
-                    display: flex;
-                    align-items: flex-start;
-                    .process-item {
-                        position: relative;
-                        flex: 1;
-                    }
-                    .process-icon {
-                        font-size: 20px;
-                        cursor: pointer;
-                        margin-left: 16px;
-                        transition: color 0.2s;
-                        &:hover {
-                            color: var(--el-color-primary-light-3);
-                        }
-                    }
-                }
-                .process-item-box + .process-item-box {
-                    border-top: 0.5px solid #e9e9e9;
-                }
-            }
+        //按下粘贴快捷键
+        if (ctrlKey && key === 'v') {
+            await tableFormRef.value?.setPasteKeyList(event)
         }
     }
-    .hc-footer-box {
-        position: relative;
-        height: 80px;
-        display: flex;
-        align-items: center;
-        padding: 20px 24px;
-        overflow: hidden;
+    //全局键盘放开监听
+    document.onkeyup = async (event) => {
+        const {key, ctrlKey} = event
+        if (!ctrlKey && key === 'Control') {
+            tableFormRef.value?.setIsCtrlKey(false)
+        }
     }
 }
 
-.hc-user-time-box {
-    position: relative;
-    height: 100%;
-    display: flex;
-    .tree-box {
-        border-right: 1px solid #EEEEEE;
-        position: relative;
-        padding: 20px;
-        width: 200px;
-    }
-    .user-box {
-        position: relative;
-        flex: 1;
-    }
+const setUnloadKey_down_up = () => {
+    document.onkeydown = null
+    document.onkeyup = null
 }
+
+//页面被卸载
+onUnmounted(() => {
+    setUnloadKey_down_up()
+})
+</script>
+
+<style lang="scss" scoped>
+@import "./table-form.scss";
 </style>
 
 <style lang="scss">

src/views/ledger/query.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="hc-layout-box" v-loading="boxLoading">
-        <HcCard ui="flex-1" v-if="menuDatas.length <= 0">
+    <div v-loading="boxLoading" class="hc-layout-box">
+        <HcCard v-if="menuDatas.length <= 0" ui="flex-1">
             <HcStatus/>
         </HcCard>
         <template v-if="menuDatas.length > 0">
@@ -8,15 +8,20 @@
                 <el-scrollbar>
                     <el-menu :default-active="menuKey" class="hc-ledger-query-menu" unique-opened>
                         <el-sub-menu v-for="item in menuDatas" :key="item?.primaryKeyId" :index="item?.primaryKeyId">
-                            <template #title>{{item?.title}}</template>
-                            <el-menu-item :index="`${item?.primaryKeyId}-form`" @click="handleMenuValue('form',item)">日志填报</el-menu-item>
-                            <el-menu-item :index="`${item?.primaryKeyId}-table`" @click="handleMenuValue('table',item)">日志列表查看</el-menu-item>
+                            <template #title>{{ item?.title }}</template>
+                            <el-menu-item :index="`${item?.primaryKeyId}-form`" @click="handleMenuValue('form',item)">
+                                日志填报
+                            </el-menu-item>
+                            <el-menu-item :index="`${item?.primaryKeyId}-table`" @click="handleMenuValue('table',item)">
+                                日志列表查看
+                            </el-menu-item>
                         </el-sub-menu>
                     </el-menu>
                 </el-scrollbar>
             </div>
-            <HcTableForm :projectId="projectId" :contractId="contractId" :items="menuItem" :userName="userInfo['real_name']" v-if="menuType === 'form'"/>
-            <HcTableList :projectId="projectId" :contractId="contractId" :items="menuItem" v-if="menuType === 'table'"/>
+            <HcTableForm v-if="menuType === 'form'" :contractId="contractId" :items="menuItem"
+                         :projectId="projectId" :userName="userInfo['real_name']"/>
+            <HcTableList v-if="menuType === 'table'" :contractId="contractId" :items="menuItem" :projectId="projectId"/>
         </template>
     </div>
 </template>
@@ -38,7 +43,7 @@ const contractId = ref(useAppState.getContractId);
 const userInfo = ref(useAppState.getUserInfo);
 
 //渲染完成
-onMounted(()=> {
+onMounted(() => {
     queryLogList()
 })
 
@@ -72,7 +77,7 @@ const queryLogList = async () => {
 }
 
 //菜单被点击
-const handleMenuValue = (type,item) => {
+const handleMenuValue = (type, item) => {
     menuItem.value = item
     menuKey.value = `${item?.primaryKeyId}-${type}`
     menuType.value = type
@@ -102,7 +107,7 @@ const handleMenuValue = (type,item) => {
     .el-sub-menu .el-menu-item.is-active {
         background: #f1f5f8;
         border-radius: 6px;
-        box-shadow: 4px 4px 8px 0 rgba(54,92,167,0.15), -4px -4px 8px 0 #ffffff;
+        box-shadow: 4px 4px 8px 0 rgba(54, 92, 167, 0.15), -4px -4px 8px 0 #ffffff;
     }
 }
 </style>