Browse Source

华耘看板增加拆件tv-focus 支持焦点

xiaost 1 year ago
parent
commit
b81928961f

+ 14 - 0
package-lock.json

@@ -25,6 +25,7 @@
         "vue-awesome-swiper": "^2.6.7",
         "vue-router": "^3.1.5",
         "vue-seamless-scroll": "^1.1.23",
+        "vue-tv-focusable": "^2.0.1",
         "vuex": "^3.1.2",
         "vuex-persistedstate": "^4.1.0"
       },
@@ -7766,6 +7767,11 @@
         "readable-stream": "^2.3.6"
       }
     },
+    "node_modules/focusable-core": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/focusable-core/-/focusable-core-2.0.1.tgz",
+      "integrity": "sha512-sZdMNmDhYksZ1OwS9vA0Me1DLLVXD84zl7h4BvCoYffAj/lMWYNGdMdG3Hd2h9VhmaYcqPkPbbqCyEv5hG8A9Q=="
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.2",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
@@ -16230,6 +16236,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vue-tv-focusable": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/vue-tv-focusable/-/vue-tv-focusable-2.0.1.tgz",
+      "integrity": "sha512-JT8yFqsAdI5xdfPPkGL3COYn2ENBdyE442YaB5m28UTN9HMUwVFnBcYkon/HdLcAzh7z2sV0F7BtJgtAjtqJsg==",
+      "dependencies": {
+        "focusable-core": "~2.0.1"
+      }
+    },
     "node_modules/vue/node_modules/@vue/compiler-sfc": {
       "version": "2.7.14",
       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz",

+ 1 - 0
package.json

@@ -25,6 +25,7 @@
     "vue-awesome-swiper": "^2.6.7",
     "vue-router": "^3.1.5",
     "vue-seamless-scroll": "^1.1.23",
+    "vue-tv-focusable": "^2.0.1",
     "vuex": "^3.1.2",
     "vuex-persistedstate": "^4.1.0"
   },

+ 7 - 4
src/components/MsgBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="show" class="mask">
+  <div v-if="show"  class="mask" tabindex="0" v-focusable="true" >
     <div class="dlg-msg-box flex flex-col">
       <div class="flex flex-space-between full-width">
         <div class="font-bold">{{caption}}</div>
@@ -30,9 +30,12 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      if (this.$refs.boxCofirmFocus) {
-        this.$refs.boxCofirmFocus.focus();
-      }
+          setTimeout(() => {
+            if (this.$refs.boxCofirmFocus) {
+              //console.log(this.$refs.boxCofirmFocus);
+              this.$tv.requestFocus(this.$refs.boxCofirmFocus)
+            }
+          },3500);
     });
   },
   methods: {

+ 2 - 0
src/main.js

@@ -20,6 +20,7 @@ import echarts from 'echarts'
 import ElementUI from 'element-ui';
 
 import Cookies from 'js-cookie'
+import focusable from 'vue-tv-focusable';
 
 //5.x 引用方式为按需引用
 //希望使用5.x版本的话,需要在package.json中更新版本号,并切换引用方式
@@ -33,6 +34,7 @@ Vue.component('icon', Icon);
 Vue.use(dataV);
 Vue.use(ElementUI);
 Vue.use(ShowMsgBox);
+Vue.use(focusable);
 
 router.beforeEach((to, from, next) => {
   /**

+ 5 - 4
src/views/assembly/index.vue

@@ -55,14 +55,14 @@
                </el-dropdown-menu>
              </el-dropdown>
 
-              <el-select v-model="linecode" class="dropdown" @change ="handleBlur" style="width: 150px">
+<!--              <el-select v-model="linecode" class="dropdown" @change ="handleBlur" style="width: 150px">
                 <el-option
                         v-for="item in linedata"
                         :key="item.LI_CODE"
                         :label="item.LI_CODE"
                         :value="item.LI_CODE"
                 ></el-option>
-              </el-select>
+              </el-select>-->
               <span class="text">&nbsp;&nbsp;&nbsp;&nbsp;</span>
               <span class="text"
                 >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
@@ -140,7 +140,8 @@ export default {
       dateYear: null,
       dateWeek: null,
       weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
-      decorationColor: ['#568aea', '#000000']
+      decorationColor: ['#568aea', '#000000'],
+      linecode:''
     }
   },
   components: {
@@ -153,7 +154,7 @@ export default {
     bottomRight,
   },
   created() {
-    this.getLines();
+    //this.getLines();
     this.isFullScreen = document.fullscreenElement;
   },
   mounted() {

+ 5 - 4
src/views/hj/index.vue

@@ -55,14 +55,14 @@
                     <el-dropdown-item class="dropdownitem"><router-link to="total"> 各车间总看板</router-link></el-dropdown-item>
                   </el-dropdown-menu>
             </el-dropdown>
-              <el-select v-model="linecode" class="dropdown" @change ="handleBlur" style="width: 150px">
+<!--              <el-select v-model="linecode" class="dropdown" @change ="handleBlur" style="width: 150px">
                 <el-option
                         v-for="item in linedata"
                         :key="item.LI_CODE"
                         :label="item.LI_CODE"
                         :value="item.LI_CODE"
                 ></el-option>
-              </el-select>
+              </el-select>-->
               <span class="text">&nbsp;&nbsp;&nbsp;&nbsp;</span>
               <span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
             </div>
@@ -139,7 +139,8 @@ export default {
       dateWeek: null,
       weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
       decorationColor: ['#568aea', '#000000'],
-      isShow:false
+      isShow:false,
+      linecode:''
     }
   },
   components: {
@@ -152,7 +153,7 @@ export default {
     bottomRight
   },
   created() {
-    this.getLines();
+    //this.getLines();
     this.isFullScreen = document.fullscreenElement;
   },
   mounted() {

+ 4 - 3
src/views/smt/index.vue

@@ -55,14 +55,14 @@
                     <el-dropdown-item class="dropdownitem"><router-link to="total"> 各车间总看板</router-link></el-dropdown-item>
                   </el-dropdown-menu>
             </el-dropdown>
-              <el-select v-model="linecode" class="dropdown" @change ="handleBlur" style="width: 150px">
+<!--              <el-select v-model="linecode" class="dropdown" @change ="handleBlur" style="width: 150px">
                 <el-option
                         v-for="item in linedata"
                         :key="item.LI_CODE"
                         :label="item.LI_CODE"
                         :value="item.LI_CODE"
                 ></el-option>
-              </el-select>
+              </el-select>-->
               <span class="text">&nbsp;&nbsp;&nbsp;&nbsp;</span>
               <span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
             </div>
@@ -139,6 +139,7 @@ export default {
       dateWeek: null,
       weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
       decorationColor: ['#568aea', '#000000'],
+      linecode:''
     }
   },
   components: {
@@ -151,7 +152,7 @@ export default {
     bottomRight
   },
   created() {
-    this.getLines();
+    //this.getLines();
     this.isFullScreen = document.fullscreenElement;
   },
   mounted() {

+ 4 - 3
src/views/total/index.vue

@@ -55,14 +55,14 @@
                     <el-dropdown-item ><router-link to="assembly"> 组装车间 </router-link></el-dropdown-item>
                   </el-dropdown-menu>
             </el-dropdown>
-              <el-select v-model="linecode" class="dropdown" @change ="handleBlur" style="width: 150px">
+<!--          <el-select v-model="linecode" class="dropdown" @change ="handleBlur" style="width: 150px">
                 <el-option
                         v-for="item in linedata"
                         :key="item.LI_CODE"
                         :label="item.LI_CODE"
                         :value="item.LI_CODE"
                 ></el-option>
-              </el-select>
+              </el-select>-->
               <span class="text">&nbsp;&nbsp;&nbsp;&nbsp;</span>
               <span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
             </div>
@@ -129,6 +129,7 @@ export default {
       dateWeek: null,
       weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
       decorationColor: ['#568aea', '#000000'],
+      linecode:''
     }
   },
   components: {
@@ -139,7 +140,7 @@ export default {
     centerLeft1ALL,
   },
   created() {
-    this.getLines();
+    //this.getLines();
     this.isFullScreen = document.fullscreenElement;
   },
   mounted() {

+ 12 - 0
yarn.lock

@@ -4259,6 +4259,11 @@
     "inherits" "^2.0.3"
     "readable-stream" "^2.3.6"
 
+"focusable-core@~2.0.1":
+  "integrity" "sha512-sZdMNmDhYksZ1OwS9vA0Me1DLLVXD84zl7h4BvCoYffAj/lMWYNGdMdG3Hd2h9VhmaYcqPkPbbqCyEv5hG8A9Q=="
+  "resolved" "https://registry.npmmirror.com/focusable-core/-/focusable-core-2.0.1.tgz"
+  "version" "2.0.1"
+
 "follow-redirects@^1.0.0", "follow-redirects@^1.15.0":
   "integrity" "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
   "resolved" "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz"
@@ -8876,6 +8881,13 @@
   "resolved" "https://registry.npmmirror.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz"
   "version" "1.9.1"
 
+"vue-tv-focusable@^2.0.1":
+  "integrity" "sha512-JT8yFqsAdI5xdfPPkGL3COYn2ENBdyE442YaB5m28UTN9HMUwVFnBcYkon/HdLcAzh7z2sV0F7BtJgtAjtqJsg=="
+  "resolved" "https://registry.npmmirror.com/vue-tv-focusable/-/vue-tv-focusable-2.0.1.tgz"
+  "version" "2.0.1"
+  dependencies:
+    "focusable-core" "~2.0.1"
+
 "vue@*", "vue@^2 || ^3.0.0-0", "vue@^2.0.0", "vue@^2.4.0", "vue@^2.5.17", "vue@^2.6.11":
   "integrity" "sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ=="
   "resolved" "https://registry.npmmirror.com/vue/-/vue-2.7.14.tgz"