优化按键切换

src/components/plugins/table-form/hc-time-picker.vue

@@ -0,0 +1,109 @@
+<template>
+    <el-time-picker
+        :id="keyname"
+        ref="timePickerRef"
+        v-model="modelValues"
+        :clearable="clearable"
+        :disabled="disabled"
+        :format="format"
+        :keyname="keyname"
+        :popper-class="popperClass"
+        :readonly="readonly"
+        :value-format="valueFormat"
+        style="width:100%;height:100%"
+        type="date"
+        @blur="timePickerBlur"
+        @change="timePickerChange"
+        @focus="timePickerFocus"
+        @visible-change="visibleChange"
+        @keydown.shift.up="keyupShiftUp"
+        @keydown.shift.down="keyupShiftDown"
+        @keydown.shift.left="keyupShiftLeft"
+        @keydown.shift.right="keyupShiftRight"></el-time-picker>
+</template>
+
+<script setup>
+import {nextTick, ref, watch} from 'vue'
+
+const props = defineProps({
+    modelValue: {
+        type: [String, Number],
+        default: 1
+    },
+    format: {
+        type: String,
+        default: 'HH:mm:ss'
+    },
+    keyname: {
+        type: String,
+        default: ''
+    },
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    clearable: {
+        type: Boolean,
+        default: true
+    },
+    valueFormat: {
+        type: String,
+        default: 'HH:mm:ss'
+    },
+    popperClass: {
+        type: String,
+        default: ''
+    },
+})
+
+//变量
+const modelValues = ref(props.modelValue)
+const timePickerRef = ref(null)
+
+//监听
+watch(() => [
+    props.modelValue,
+], ([val]) => {
+    modelValues.value = val
+})
+
+//事件
+const emit = defineEmits(['update:modelValue', 'change', 'blur', 'focus', 'visible-change',])
+//@keydown.shift.up="" @keydown.shift.down="" @keydown.shift.left="" @keydown.shift.right=
+
+const timePickerChange = (val) => {
+    emit('update:modelValue', val)
+    emit('change', val)
+}
+
+const timePickerBlur = (e) => {
+    emit('blur', e)
+}
+const timePickerFocus = (e) => {
+    console.log('获得焦点', e)
+    emit('focus', e)
+}
+const visibleChange = (visibility) => {
+    emit('visible-change', visibility)
+}
+
+const keyupShiftUp = (e) => {
+    console.log(e)
+}
+
+const keyupShiftDown = (e) => {
+    console.log(e)
+}
+
+const keyupShiftLeft = (e) => {
+    console.log(e)
+}
+
+const keyupShiftRight = (e) => {
+    console.log(e)
+}
+</script>

src/layout/index.vue

@@ -1,37 +1,41 @@
 <template>
     <el-container class="hc-layout-box">
-        <div class="hc-layout-bg-box" v-show="MenuBarKey === 'home-index'">
-            <img :src="HomeTheme.bg" alt="" id="imagebox" v-if="HomeTheme.bg" crossOrigin="anonymous">
+        <div v-show="MenuBarKey === 'home-index'" class="hc-layout-bg-box">
+            <img v-if="HomeTheme.bg" id="imagebox" :src="HomeTheme.bg" alt="" crossOrigin="anonymous">
         </div>
-        <el-aside :width="isCollapse?'120px':'250px'" class="hc-aside-box" :class="[isCollapse?'collapse':'', MenuBarKey]">
+        <el-aside :class="[isCollapse?'collapse':'', MenuBarKey]" :width="isCollapse?'120px':'250px'"
+                  class="hc-aside-box">
             <div class="hc-aside-logo-box" @click="logoClick">
-                <img class="logo-img" :src="getAssetsHomeFile(`${AppColor.name}.png`)" alt="">
-                <img class="logo-img-1 white" :src="MenuBarKey === 'home-index' ? NameWhite : NameDark" alt="" v-if="!isCollapse">
-                <img class="logo-img-1 dark" :src="NameWhite" alt="" v-if="!isCollapse">
+                <img :src="getAssetsHomeFile(`${AppColor.name}.png`)" alt="" class="logo-img">
+                <img v-if="!isCollapse" :src="MenuBarKey === 'home-index' ? NameWhite : NameDark" alt=""
+                     class="logo-img-1 white">
+                <img v-if="!isCollapse" :src="NameWhite" alt="" class="logo-img-1 dark">
             </div>
             <div class="hc-aside-menu-box">
                 <el-scrollbar>
-                    <MenuBar :datas="MenuBarData" :cur="MenuBarKey" :collapse="isCollapse" :msgCount="msgCount" @change="MenuBarChange"/>
+                    <MenuBar :collapse="isCollapse" :cur="MenuBarKey" :datas="MenuBarData" :msgCount="msgCount"
+                             @change="MenuBarChange"/>
                 </el-scrollbar>
             </div>
             <div class="hc-aside-bar-box">
                 <div :class="isCollapse?'':'active'" @click="collapseChange(false)">
                     <HcIcon name="menu-unfold"/>
                 </div>
-                <div :class="isCollapse?'active':''" @click="collapseChange(true)" v-show="!isCollapse">
+                <div v-show="!isCollapse" :class="isCollapse?'active':''" @click="collapseChange(true)">
                     <HcIcon name="menu-fold"/>
                 </div>
             </div>
         </el-aside>
-        <el-container class="hc-container-view" :class="MenuBarKey === 'home-index'?'home':''">
+        <el-container :class="MenuBarKey === 'home-index'?'home':''" class="hc-container-view">
             <el-header class="hc-header-view">
-                <div class="hc-header-page-name" id="hc-header-page-name">
-                    {{RoutesTitle}}
+                <div id="hc-header-page-name" class="hc-header-page-name">
+                    {{ RoutesTitle }}
                 </div>
                 <div class="hc-header-content">
                     <div class="hc-header-cascader-box">
-                        <div class="project-name-box">{{projectInfo.projectAlias}} / {{contractInfo.name}}</div>
-                        <el-cascader ref="ElCascaderRef" v-model="projectValue" :options="projectContract" :props="projectProps" placeholder="请选择项目" @change="projectContractChange"/>
+                        <div class="project-name-box">{{ projectInfo.projectAlias }} / {{ contractInfo.name }}</div>
+                        <el-cascader ref="ElCascaderRef" v-model="projectValue" :options="projectContract"
+                                     :props="projectProps" placeholder="请选择项目" @change="projectContractChange"/>
                     </div>
                     <MenuStretchBar/>
                     <HelpInfoBar></HelpInfoBar>
@@ -40,8 +44,8 @@
                 </div>
             </el-header>
             <TopMenuBar v-show="menuBarShow"/>
-            <el-main class="hc-main-box" id="hc-main-box">
-                <router-view v-slot="{ Component }" v-if="reloadRouter">
+            <el-main id="hc-main-box" class="hc-main-box">
+                <router-view v-if="reloadRouter" v-slot="{ Component }">
                     <transition name="fade-transform">
                         <keep-alive :max="10" exclude="home,home-index,home-config">
                             <component :is="Component" :msgCount="msgCount"/>
@@ -63,7 +67,7 @@ import UserInfoBar from "./modules/UserInfoBar.vue"
 import ConfigBar from "./modules/ConfigBar.vue"
 import TopMenuBar from "./modules/TopMenuBar.vue"
 import MenuStretchBar from "./modules/MenuStretchBar.vue"
-import {initButtons,initProjectContract} from "~sto/app";
+import {initButtons, initProjectContract} from "~sto/app";
 import NameDark from "~src/assets/logo/name-dark.png";
 import NameWhite from "~src/assets/logo/name-white.png";
 import website from '~src/config/index'
@@ -164,10 +168,10 @@ const projectContractData = (projectContractData) => {
         })
         //处理其他数据
         projectContract.value = projectContractData
-        const projectId =  useAppState.getProjectId     //项目ID
-        const contractId =  useAppState.getContractId   //合同段ID
-        const UserProjectInfo =  useAppState.getProjectInfo
-        const UserContractInfo =  useAppState.getContractInfo
+        const projectId = useAppState.getProjectId     //项目ID
+        const contractId = useAppState.getContractId   //合同段ID
+        const UserProjectInfo = useAppState.getProjectInfo
+        const UserContractInfo = useAppState.getContractInfo
         //查询缓存的选中ID是否存在
         const pid = projectContractData.findIndex(item => Number(item.id) === Number(projectId))
         const contractList = projectContractData[pid]?.contractInfoList || []
@@ -187,14 +191,12 @@ const projectContractData = (projectContractData) => {
             useAppState.setProjectId(letProjectInfo?.id)
             useAppState.setContractId(letContractInfo?.id)
             //发送消息
-            console.log('111')
             socketSend(letProjectInfo?.id + ',' + letContractInfo?.id)
         } else {
             projectValue.value = String(contractId)
             projectInfo.value = UserProjectInfo
             contractInfo.value = UserContractInfo
             //发送消息
-            console.log('222')
             socketSend(projectId + ',' + contractId)
         }
     } else {
@@ -224,7 +226,7 @@ const projectContractChange = (val) => {
     socketSend(val[0] + ',' + val[1])
     //刷新路由
     reloadRouter.value = false
-    nextTick(()=>{
+    nextTick(() => {
         reloadRouter.value = true
     })
 }
@@ -245,7 +247,7 @@ const getAssetsHomeFile = (url) => {
 
 const handleChange = () => {
     let file = document.getElementById("file").files[0]; // 获取input上传的图片数据;
-    let url = window.URL.createObjectURL(file); // 得到bolb对象路径，可当成普通的文件路径一样使用，赋值给src;
+    const url = window.URL.createObjectURL(file); // 得到bolb对象路径，可当成普通的文件路径一样使用，赋值给src;
     document.getElementById("imagebox").src = url;
 }
 
@@ -259,11 +261,11 @@ const msgCount = ref({
     allCount: 0,
     taskCount: 0,
     messageCount: 0,
-    messageCount_1:0,
-    messageCount_2:0,
-    messageCount_3:0,
-    messageCount_4:0,
-    messageCount_5:0,
+    messageCount_1: 0,
+    messageCount_2: 0,
+    messageCount_3: 0,
+    messageCount_4: 0,
+    messageCount_5: 0,
 })
 
 //推送系统
@@ -281,7 +283,7 @@ const setInitSocket = () => {
         if (data) {
             msgCount.value = JSON.parse(data)
         }
-        console.log(data,'消息信息')
+        console.log(data, '消息信息')
     };
     socket.onerror = function ({data}) {
         console.log('发生错误:', data)
@@ -293,7 +295,7 @@ const socketSend = (msg) => {
     if (socket) {
         socket.send(msg);
     } else {
-        setTimeout(()=>{
+        setTimeout(() => {
             socket.send(msg);
         }, 1000)
     }
@@ -318,12 +320,13 @@ const socketSend = (msg) => {
             background: #f1f5f8;
             color: #202532;
             box-shadow: var(--hc-shadow);
+
             .el-input__inner, .el-input__suffix {
                 color: #202532;
             }
         }
         .el-cascader .el-input.is-focus .el-input__wrapper {
-            box-shadow: 4px 4px 8px 0 rgba(54,92,167,0.15), -4px -4px 8px 0px #ffffff;
+            box-shadow: 4px 4px 8px 0 rgba(54, 92, 167, 0.15), -4px -4px 8px 0px #ffffff;
         }
         .el-cascader .el-input .icon-arrow-down {
             font-size: 18px;
@@ -336,6 +339,7 @@ const socketSend = (msg) => {
                 background-color: #00000000;
                 border: 1px solid white;
                 box-shadow: initial;
+
                 .el-input__inner, .el-input__suffix {
                     color: white;
                 }

src/layout/layout.scss

@@ -35,6 +35,7 @@
             left: -10px;
             .logo-img {
                 height: 40px;
+                width: 40px;
             }
             .logo-img-1 {
                 height: 35px;

src/layout/modules/TopMenuBar.vue

@@ -2,16 +2,16 @@
     <div class="hc-top-menu-bar">
         <el-scrollbar always>
             <div class="bar-menu-content">
-                <div v-for="(item, index) in barMenuData" class="bar-menu-btn" :class="item.key === barRoutes.key?'cur':''"
+                <div v-for="(item, index) in barMenuData" :class="item.key === barRoutes.key?'cur':''"
+                     class="bar-menu-btn"
                      @click="barMenuClick(item)" @contextmenu.prevent="barMenuContextMenu($event, item, index)">
-                    <span>{{item.title}}</span>
+                    <span>{{ item.title }}</span>
                     <div class="bar-close-icon" @click.stop="barMenuCloseClick(item, index)">
                         <HcIcon name="close"/>
                     </div>
                 </div>
             </div>
         </el-scrollbar>
-
         <!--右键菜单-->
         <HcContextMenu ref="contextMenuRef" :datas="menusData" @item-click="handleMenuSelect"/>
     </div>
@@ -63,7 +63,7 @@ const setBarMenuData = () => {
 
 //菜单被点击
 const barMenuClick = (item) => {
-    const { key } = barRoutes.value
+    const {key} = barRoutes.value
     if (key !== item.key) {
         router.push({name: item.key});
     }
@@ -98,15 +98,15 @@ const handleMenuSelect = ({key}) => {
 
 //菜单关闭被点击
 const barMenuCloseClick = (item, index) => {
-    const total = barMenuData.value.length -1;
-    const { key } = barRoutes.value
+    const total = barMenuData.value.length - 1;
+    const {key} = barRoutes.value
     barMenuData.value.splice(index, 1)
     if (key === item.key) {
         let items = {};
-        const indexs = barMenuData.value.length -1;
-        if(total > index) {
+        const indexs = barMenuData.value.length - 1;
+        if (total > index) {
             items = barMenuData.value[index]
-        } else if(indexs >= 0) {
+        } else if (indexs >= 0) {
             items = barMenuData.value[indexs]
         }
         if (indexs < 0) {

src/plugins/HTableForm.js

@@ -1,4 +1,4 @@
-import {createApp} from "vue/dist/vue.esm-bundler.js";
+import {createApp, nextTick} from "vue/dist/vue.esm-bundler.js";
 import {getTokenHeader} from '~src/api/request/header';
 import {toParse, isArray} from "vue-utils-plus";
 import HcTableFormUpload from "~com/plugins/table-form/hc-form-upload.vue"
@@ -6,11 +6,12 @@ import HcFormSelectSearch from "~com/plugins/table-form/hc-form-select-search.vu
 import HcFormCheckboxGroup from "~com/plugins/table-form/hc-form-checkbox-group.vue"
 
 import {
-    ElButton,ElTooltip,ElInput,ElDatePicker,ElUpload,
-    ElInputNumber,ElTimePicker,ElSelect,ElOption,ElRadioGroup,
-    ElRadio,ElCheckbox,ElCheckboxGroup
+    ElButton, ElTooltip, ElInput, ElDatePicker, ElUpload,
+    ElInputNumber, ElSelect, ElOption, ElRadioGroup,
+    ElRadio, ElCheckbox, ElCheckboxGroup, ElTimePicker
 } from 'element-plus'
 
+
 const components = {
     ElButton, ElTooltip, ElInput, ElDatePicker, ElUpload,
     ElInputNumber, ElTimePicker, ElSelect, ElOption, ElRadioGroup,
@@ -50,7 +51,7 @@ export default class HTableForm {
             },
             methods: {
                 //鼠标右键事件
-                RightClick(a,b,c,d,e,f,event) {
+                RightClick(a, b, c, d, e, f, event) {
                     event.preventDefault();
                     const KeyName = event?.target?.getAttribute('keyname') || ''
                     if (onRight) {
@@ -58,13 +59,14 @@ export default class HTableForm {
                     }
                 },
                 //焦点事件
-                getInformation() {},
+                getInformation() {
+                },
                 //日期选择事件
-                datePickerChange(val,key) {
+                datePickerChange(val, key) {
                     this.formData[key] = val
                 },
                 //上传完成
-                formUploadSuccess({src,key}) {
+                formUploadSuccess({src, key}) {
                     this.formData[key] = src
                 },
                 //删除上传的文件
@@ -109,6 +111,7 @@ export default class HTableForm {
         app.mount(appId)
         return app
     }
+
     //处理日期范围数据
     static setPickerKey(data) {
         const pickerKey = data['pickerKey'] || ''
@@ -117,7 +120,7 @@ export default class HTableForm {
             for (let i = 0; i < pickerKeys.length; i++) {
                 const val = data[pickerKeys[i]] || ''
                 if (val) {
-                    const dataVal = val.replace(/'/g,'"');
+                    const dataVal = val.replace(/'/g, '"');
                     data[pickerKeys[i]] = toParse(dataVal) || []
                 } else {
                     data[pickerKeys[i]] = []
@@ -129,34 +132,42 @@ export default class HTableForm {
 
     //处理日期时间框的切换事件
     static setByClassKeyup(keys) {
-        const _this = this;
-        let poppers = document.getElementsByClassName('hc-table-form-date-picker')
-        for (let i = 0; i < poppers.length; i++) {
-            let key = '';
-            const classList = poppers[i].getAttribute('class')
-            const ids = classList.split('-form-id-')
-            if (ids.length >= 1) {
-                key = ids[1]
-            }
-            if (ids) {
-                let panels = poppers[i].getElementsByClassName('el-picker-panel__content')
-                for (let x = 0; x < panels.length; x++) {
-                    panels[x].addEventListener("keydown", e => {
-                        e.stopPropagation()
-                        if (e.key === 'ArrowUp') {
-                            _this.setKeyupData({target: {id: key}}, 'up', keys)
-                        } else if (e.key === 'ArrowDown') {
-                            _this.setKeyupData({target: {id: key}}, 'down', keys)
-                        } else if (e.key === 'ArrowLeft') {
-                            _this.setKeyupData({target: {id: key}}, 'left', keys)
-                        } else if (e.key === 'ArrowRight') {
-                            _this.setKeyupData({target: {id: key}}, 'right', keys)
-                        }
-                    }, {
-                        capture: true
-                    });
+        try {
+            let poppers = document.getElementsByClassName('hc-table-form-date-picker')
+            for (let i = 0; i < poppers.length; i++) {
+                let item = poppers[i], key = '';
+                const ids = item.getAttribute('class').split('-form-id-')
+                if (ids.length >= 1) {
+                    key = ids[1]
+                }
+                if (ids) {
+                    let panels = item.getElementsByClassName('el-picker-panel__content')
+                    this.setElementsEvent(panels, key, keys)
                 }
             }
+        } catch (e) {
+            console.log(e)
+        }
+    }
+
+    //设置事件
+    static setElementsEvent(elements, key, keys) {
+        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)
+                } else if (e.key === 'ArrowDown') {
+                    _this.setKeyupData({target: {id: key}}, 'down', keys)
+                } else if (e.key === 'ArrowLeft') {
+                    _this.setKeyupData({target: {id: key}}, 'left', keys)
+                } else if (e.key === 'ArrowRight') {
+                    _this.setKeyupData({target: {id: key}}, 'right', keys)
+                }
+            }, {
+                capture: true
+            });
         }
     }
 
@@ -182,15 +193,13 @@ export default class HTableForm {
                 if (top > 0) {
                     let keyId = '';
                     const tops = keys[top - 1]
-                    const keyLength = tops.length -1;
+                    const keyLength = tops.length - 1;
                     if (keyLength < left) {
                         keyId = tops[keyLength]
                     } else {
                         keyId = tops[left]
                     }
-                    if (keyId) {
-                        document.getElementById(keyId).focus();
-                    }
+                    this.setElementFocus(keyId)
                 }
             } else if (type === 'down') {
                 //向下移动
@@ -198,23 +207,19 @@ export default class HTableForm {
                 if (tops > top) {
                     let keyId = '';
                     const tops = keys[top + 1]
-                    const keyLength = tops.length -1;
+                    const keyLength = tops.length - 1;
                     if (keyLength < left) {
                         keyId = tops[keyLength]
                     } else {
                         keyId = tops[left]
                     }
-                    if (keyId) {
-                        document.getElementById(keyId).focus();
-                    }
+                    this.setElementFocus(keyId)
                 }
             } else if (type === 'left') {
                 //向左移动
                 if (left > 0) {
-                    const keyId = keys[top][left-1]
-                    if (keyId) {
-                        document.getElementById(keyId).focus();
-                    }
+                    const keyId = keys[top][left - 1]
+                    this.setElementFocus(keyId)
                 }
             } else if (type === 'right') {
                 //向右移动
@@ -222,11 +227,21 @@ export default class HTableForm {
                 const leftLength = lefts.length - 1;
                 if (leftLength > left) {
                     const keyId = lefts[left + 1]
-                    if (keyId) {
-                        document.getElementById(keyId).focus();
-                    }
+                    this.setElementFocus(keyId)
                 }
             }
         }
     }
+
+    //设置元素焦点
+    static setElementFocus(keyId) {
+        if (keyId) {
+            try {
+                console.log('focus', keyId)
+                document.getElementById(keyId).focus();
+            } catch (e) {
+                console.log(e)
+            }
+        }
+    }
 }