送货单悠哈

src/renderer/components/views/keyboard/sendKeyBoard.vue

@@ -0,0 +1,342 @@
+<template>
+  <div>
+    <div @click="closeByClickOverlay()" v-if="_overlay" class="back-bord" />
+    <div @click="open()" ref="inputBlock">
+      <a-form-model-item label="交货单号">
+        <a-input v-model="inputValue" style="width: 1080px" size="large"
+                 ref="deliveryNote" allowClear></a-input>
+      </a-form-model-item>
+    </div>
+
+    <!--键盘-->
+    <transition name="keybordSlide">
+      <div v-if="visible" class="keybord-wrap">
+        <header class="keybord-header">
+          <span @click.stop="cancel()" style="color: red;font-size: large">取消</span>
+          <span v-if="previewOnKeyboard" :class="['preview', { 'new-energy': newEnergy }]">{{ inputValue}}</span>
+          <span :class="[{ gray: inputValue.length !== 10 ||  inputValue.length !== 9}]" style="font-size: large" @click.stop="submit()">完成</span>
+        </header>
+
+        <div class="keybord-keys">
+          <ul class="keybord-keys-word-wrap" >
+            <li @click.stop="inputWord(item)" class="button" v-for="item in numberList.slice(0, 3)" :key="item">
+              {{ item }}
+            </li>
+          </ul>
+          <ul class="keybord-keys-word-wrap" >
+            <li @click.stop="inputWord(item)" class="button" v-for="item in numberList.slice(3, 6)" :key="item">
+              {{ item }}
+            </li>
+          </ul>
+          <ul class="keybord-keys-word-wrap" >
+            <li @click.stop="inputWord(item)" class="button" v-for="item in numberList.slice(6, 9)" :key="item">
+              {{ item }}
+            </li>
+          </ul>
+          <div class="keybord-keys-bottom">
+            <div @click.stop="toggle()" class="big-button">
+              {{ keybordType }}
+            </div>
+
+            <ul class="keybord-keys-bottom-line">
+              <li @click.stop="inputWord(item)" class="button" v-for="item in numberList.slice(9, 10)" :key="item">
+                {{ item }}
+              </li>
+            </ul>
+            <div @click.stop="deleteOne()" class="big-button">
+              <slot name="backspace">
+                <span class="icon-delete">⇦</span>
+              </slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'send-key-board',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    openKeyboardOnInit: {
+      type: Boolean,
+      default: false
+    },
+    closeOnClickOverlay: {
+      type: Boolean,
+      default: true
+    },
+    overlay: {
+      type: Boolean,
+      default: true
+    },
+    previewOnKeyboard: {
+      type: Boolean,
+      default: true
+    },
+    checkInputBlocked: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: function() {
+    return {
+      placeholderDom: null,
+      keybordType: '数字',
+      inputValue: "",
+      visible: false,
+      numberList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
+    }
+  },
+  computed: {
+    _overlay() {
+      return this.visible && this.overlay
+    },
+    // judgeList() {
+    //   if (this.keybordType === 'ABC') {
+    //     return this.abcList.slice(29, 36)
+    //   } else if (this.keybordType === '英') {
+    //     return this.carNo2List.slice(21, 26)
+    //   } else {
+    //     return this.wordList.slice(30, 37)
+    //   }
+    // },
+    newEnergy() {
+      return this.inputValue.length === 9 || this.inputValue.length === 10
+    }
+  },
+  methods: {
+    init() {
+      this.visible = this.openKeyboardOnInit
+    },
+    isActive(index) {
+      return this.inputValue.length === index - 1
+    },
+    // 键盘类型切换
+    toggle() {
+
+    },
+    // 文字输入
+    inputWord(word) {
+      if (this.inputValue.length === 9 || this.inputValue.length === 10) return
+      this.inputValue += word
+      this.$emit('submit', this.inputValue)
+    },
+    // 删除一个字符
+    deleteOne() {
+      this.inputValue = this.inputValue.slice(0, -1)
+    },
+    closeByClickOverlay() {
+      if (!this.closeOnClickOverlay) return
+      this.cancel()
+    },
+    // 取消
+    cancel() {
+      this.visible = false
+      // this.inputValue = []
+      this.$emit('cancel', this.inputValue="")
+    },
+    // 完成
+    submit() {
+      if (this.inputValue.length < 9) return
+      this.visible = false
+      this.$emit('submit', this.inputValue)
+    },
+    // 打开键盘
+    open() {
+      if (this.readonly) return
+      this.visible = true
+    },
+    // 判断展示框是否被键盘挡住
+    checkInputLocation(visible) {
+      if (!this.checkInputBlocked) return
+      if (visible) {
+        const clientHeight = document.documentElement.clientHeight
+        const scrollHeight = document.documentElement.scrollHeight
+        const inputTopHeight = this.$refs.inputBlock.getBoundingClientRect().top
+        const inputHeight = this.$refs.inputBlock.scrollHeight
+        //如果键盘被挡住，并且页面没有滚动条
+        if (inputHeight + 250 + inputTopHeight >= clientHeight && scrollHeight === clientHeight) {
+          this.placeholderDom.style.display = 'block'
+        }
+        //键盘唤醒并且键盘挡住输入框,同时页面无滚动条时，占位块展示出来从而使页面可以通过scrllTo()来滚动
+        window.scrollTo(0, 250)
+      } else {
+        document.body.scrollIntoView({
+          block: 'start',
+          behavior: 'smooth'
+        })
+        this.placeholderDom.style.display = 'none'
+      }
+    },
+    createPlaceholderDom() {
+      if (!this.checkInputBlocked) return
+      this.placeholderDom = document.createElement('div')
+      this.placeholderDom.className = 'placeholder'
+      this.placeholderDom.style.cssText = 'height: 260px;width: 100%;background: red;opacity:0'
+      this.placeholderDom.style.display = 'none'
+      document.body.appendChild(this.placeholderDom)
+    }
+  },
+  created() {
+    this.init()
+    this.createPlaceholderDom()
+  },
+  watch: {
+    value(value = '') {
+
+    },
+    inputValue(key) {
+
+    },
+    visible(bool) {
+      this.checkInputLocation(bool)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@backBordZIndex: 980511;
+
+.back-bord {
+  width: 100vw;
+  overflow-y: scroll;
+  height: calc(100vh + 250px);
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: @backBordZIndex;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.gray {
+  color: rgb(173, 171, 171);
+}
+
+.data-show {
+  position: relative;
+  width: 100%;
+  column-count: 8;
+  column-gap: 2px;
+  min-width: 190px;
+  max-width: 450px;
+  .data-show-block {
+    display: flex;
+    height: 0;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #dcdfe6;
+    padding: 50% 0;
+    color: #323233;
+    font-size: 18px;
+    border-radius: 4px;
+  }
+  .active {
+    outline: none;
+    border: 1px solid #409eff;
+  }
+  .new-energy {
+    border-color: #67c23a;
+  }
+}
+
+.keybord-wrap {
+  position: fixed;
+  z-index: @backBordZIndex + 1;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 250px;
+  background: #e7e8eb;
+  .keybord-header {
+    padding: 0 15px;
+    height: 40px;
+    line-height: 40px;
+    display: flex;
+    justify-content: space-between;
+    background: #f0f0f0;
+    .preview {
+      color: #409eff;
+    }
+    .new-energy {
+      color: #67c23a;
+    }
+  }
+
+  .keybord-keys {
+    padding: 5px 5px 15px 5px;
+    box-sizing: border-box;
+    .keybord-keys-word-wrap {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      column-count: 3;
+      column-gap: 5px;
+    }
+
+
+
+    .keybord-keys-bottom {
+      display: flex;
+      justify-content: space-between;
+      .keybord-keys-bottom-line {
+        width: 100%;
+        margin: 0;
+        padding: 0 5px;
+        list-style: none;
+        column-count: 1;
+        column-gap: 5px;
+      }
+    }
+  }
+}
+
+.button {
+  &:active {
+    background: #bbbbbb;
+  }
+  text-align: center;
+  line-height: 40px;
+  height: 40px;
+  border-radius: 5px;
+  background: #fff;
+  color: black;
+  margin-bottom: 7px;
+}
+
+.big-button {
+  &:active {
+    background: #177ce2;
+  }
+  width: 40vw;
+  height: 40px;
+  background: #1989fa;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 5px;
+  color: white;
+  .icon-delete {
+    font-size: 20px;
+  }
+}
+
+.keybordSlide-enter-active,
+.keybordSlide-leave-active {
+  transition: all 0.2s linear;
+  transform: translateY(0px);
+}
+.keybordSlide-enter, .keybordSlide-leave-to /* .keybordSlide-leave-active below version 2.1.8 */ {
+  transform: translateY(250px);
+}
+</style>

src/renderer/components/views/sendDeliveryNote.vue

@@ -2,10 +2,9 @@
     <div class="wrapper">
         <a-card style="height: 700px">
             <a-form-model layout="inline" :model="searchModel" class="text-center form" size="large">
-                <a-form-model-item label="交货单号">
-                    <a-input v-model="searchModel.deliveryNote" style="width: 1080px" size="large"
-                             ref="deliveryNote" allowClear></a-input>
-                </a-form-model-item>
+                <send-key-board :value="searchModel.deliveryNote" :overlay=true :close-on-click-overlay=true  @submit="submit">
+                </send-key-board>
+
                 <a-form-model-item>
                     <a-button type="primary" @click="search" size="large" :loading="searchLoading">
                         查询
@@ -49,6 +48,7 @@
 
 
 import {sendPrintSock, webSock} from "../../store/modules/hrPrint";
+import SendKeyBoard from "./keyboard/sendKeyBoard.vue";
 
 const columns = [
     {
@@ -120,6 +120,7 @@ export default {
         }
     },
     components: {
+      SendKeyBoard,
         sendPrintSock,
         webSock
     },
@@ -141,6 +142,10 @@ export default {
             // 执行注销操作或者跳转到登录页面的代码
             self.$router.push('/');
           }, 0.5 * 60 * 1000) // 30分钟
+
+        },
+        submit(value) {
+          this.searchModel.deliveryNote = value
         },
         search() {
             const self = this
@@ -349,7 +354,7 @@ export default {
     },
     mounted() {
         this.$nextTick(() => {
-            this.$refs.deliveryNote.focus()
+            // this.$refs.deliveryNote.focus()
         })
       this.getDevices()
     }