表单 上下左右快捷键处理

src/plugins/HTableForm.js

@@ -1,6 +1,6 @@
 import {createApp} from "vue/dist/vue.esm-bundler.js";
 import {getTokenHeader} from '~src/api/request/header';
-import {toParse} from "vue-utils-plus";
+import {toParse, isArray} from "vue-utils-plus";
 import HcTableFormUpload from "~com/plugins/table-form/hc-form-upload.vue"
 import HcFormSelectSearch from "~com/plugins/table-form/hc-form-select-search.vue"
 import HcFormCheckboxGroup from "~com/plugins/table-form/hc-form-checkbox-group.vue"
@@ -20,7 +20,9 @@ const components = {
 
 //表单渲染
 export default class HTableForm {
+
     static createForm({template, tableForm, appId, onRight, onBlur}) {
+        const _this = this;
         const app = createApp({
             data() {
                 return {
@@ -89,19 +91,19 @@ export default class HTableForm {
                 },
                 //键盘事件 上键
                 keyupShiftUp(event) {
-
+                    _this.setKeyupData(event, 'up', this.formData.keys)
                 },
                 //键盘事件 下键
                 keyupShiftDown(event) {
-
+                    _this.setKeyupData(event, 'down', this.formData.keys)
                 },
                 //键盘事件 左键
                 keyupShiftLeft(event) {
-
+                    _this.setKeyupData(event, 'left', this.formData.keys)
                 },
                 //键盘事件 右键
                 keyupShiftRight(event) {
-
+                    _this.setKeyupData(event, 'right', this.formData.keys)
                 },
             }
         })
@@ -125,4 +127,91 @@ export default class HTableForm {
         }
         return data
     }
+    //计算上下左右快捷键的
+    static setKeyupData({target}, type, keys) {
+        const key = target.id
+        /*const keys = [
+            ['key_15__3_1', 'key_16__3_3'],
+            ['key_10__4_1', 'key_11__4_3'],
+            ['key_13__5_1'],
+            ['key_8__6_1'],
+            ['key_3__7_1'],
+            ['key_9__8_1'],
+            ['key_6__9_1'],
+            ['key_2__10_1', 'key_2__10_2'],
+            ['key_1__11_1', 'key_1__11_2'],
+            ['key_18__13_0'],
+            ['key_7__15_0'],
+            ['key_5__16_1', 'key__16_2'],
+            ['key_12__18_0'],
+            ['key_4__19_1', 'key_12__19_2'],
+            ['key_21__21_0'],
+            ['key_17__22_1', 'key_17__22_2'],
+        ]*/
+        //处理快捷键数据和事件
+        if (key && type && isArray(keys)) {
+            //计算当前的位置
+            let left = -1, top = -1;
+            for (let i = 0; i < keys.length; i++) {
+                if (isArray(keys[i])) {
+                    const index = keys[i].findIndex(id => id === key)
+                    if (index !== -1) {
+                        left = index
+                        top = i
+                        break;
+                    }
+                }
+            }
+            if (type === 'up') {
+                //向上移动
+                if (top > 0) {
+                    let keyId = '';
+                    const tops = keys[top - 1]
+                    const keyLength = tops.length -1;
+                    if (keyLength < left) {
+                        keyId = tops[keyLength]
+                    } else {
+                        keyId = tops[left]
+                    }
+                    if (keyId) {
+                        document.getElementById(keyId).focus();
+                    }
+                }
+            } else if (type === 'down') {
+                //向下移动
+                const tops = keys.length - 1;
+                if (tops > top) {
+                    let keyId = '';
+                    const tops = keys[top + 1]
+                    const keyLength = tops.length -1;
+                    if (keyLength < left) {
+                        keyId = tops[keyLength]
+                    } else {
+                        keyId = tops[left]
+                    }
+                    if (keyId) {
+                        document.getElementById(keyId).focus();
+                    }
+                }
+            } else if (type === 'left') {
+                //向左移动
+                if (left > 0) {
+                    const keyId = keys[top][left-1]
+                    if (keyId) {
+                        document.getElementById(keyId).focus();
+                    }
+                }
+            } else if (type === 'right') {
+                //向右移动
+                const lefts = keys[top]
+                const leftLength = lefts.length - 1;
+                if (leftLength > left) {
+                    const keyId = lefts[left + 1]
+                    if (keyId) {
+                        document.getElementById(keyId).focus();
+                    }
+                }
+            }
+        }
+    }
 }

src/test/index.vue

@@ -2,18 +2,25 @@
     <div class="hc-page-box">
         <HcCard title="测试">
             <el-button type="primary" @click="hideClick">设置焦点</el-button>
-            <el-input type="text" id="xxxxx" @keyup.shift.up="keyupShiftUp" @keyup.shift.down="keyupShiftDown" @keyup.shift.left="keyupShiftLeft" @keyup.shift.right="keyupShiftRight"/>
+            <el-input type="text" id="a1"
+                      @keyup.shift.up="keyupShiftUp"
+                      @keyup.shift.down="keyupShiftDown"/>
+            <!--el-date-picker
+                v-model="value1"
+                type="date" id="a2"
+                @keyup.shift.up="keyupShiftUp"
+                @keyup.shift.down="keyupShiftDown"
+                placeholder="Pick a day"/-->
+
         </HcCard>
     </div>
 </template>
 
 <script setup>
-import {ref, onMounted, nextTick} from "vue";
+import {ref} from "vue";
 //import { getRandom } from "vue-utils-plus"
 
-onMounted(()=> {
-
-})
+const value1 = ref('')
 
 const hideClick = () => {
     document.getElementById('xxxxx').focus();
@@ -28,14 +35,4 @@ const keyupShiftUp = (event) => {
 const keyupShiftDown = (event) => {
     console.log(event)
 }
-
-//左
-const keyupShiftLeft = (event) => {
-    console.log(event)
-}
-
-//右
-const keyupShiftRight = (event) => {
-    console.log(event)
-}
 </script>

src/views/data-fill/components/WbsTree.vue

@@ -10,7 +10,7 @@
                             <span v-else>{{ node.label }}</span>
                             <div class="text-blue submit-counts" v-if="submitCounts">【{{ data.submitCounts ?? 0 }}】</div>
                 </div>
-               
+
                 <!--树组件，操作菜单-->
                 <div class="menu-icon1" :class="node.showTreeMenu?'show':''" v-if="node.level !== 1 && menusData.length > 0">
                     <div class="cu-tree-node-popover-menu-icon" @click.prevent.stop="ElTreeLabelContextMenu($event,data,node)">
@@ -87,10 +87,10 @@ const props = defineProps({
     },
      classifyType: {
         type: String,
-       
+
     },
     treeKey:{
-         type: String,
+         type: [String,Number],
     }
 })
 
@@ -210,17 +210,17 @@ const ElTreeLoadNode = async (node, resolve) => {
 //         nextTick(()=>{
 //         // ElTreeRef?.value. ElTreeLoadNode(rootNode.value, rootResolve.value)
 //          ElTreeLoadNode(rootNode.value, rootResolve.value)
-        
+
 //         })
 //      return 11111111
-       
+
 //  }
 
 watch(classifyTypedata, (val) => {
     if(val){
         classifyTypedata.value=val
     }
-   
+
 },
 
 {immediate:true}
@@ -266,7 +266,7 @@ const ElTreeLabelContextMenu = (e,data,node) => {
 const handleMenuSelect = async({key}) => {
     const node = treeRefNode.value;
     const data = treeRefData.value;
-   
+
     //如果为标记菜单
     if (key === 'mark' && menuMark.value) {
         if (data.isFirst === true) {
@@ -281,7 +281,7 @@ const handleMenuSelect = async({key}) => {
         const autoKeys = autoKeysArr.reverse()
          emit('menuTap', {key, node, data,keys:autoKeys})
     }
-       
+
     }
 }
 
@@ -320,10 +320,10 @@ defineExpose({
 <style lang="scss" scoped>
 @import "../../../styles/app/tree.scss";
 .el-radio-group {
-   width: 100% !important; 
+   width: 100% !important;
    display:inline-grid;
-  
-  
+
+
 }
 
 .data-custom-tree-node {