软键盘遮挡

src/pages/xinrui/dispatch/FixedPointTask.vue

@@ -1,7 +1,7 @@
 <template>
   <section>
     <nav-bar title="定点作业"></nav-bar>
-    <section class="content mgt186">
+    <section class="content mgt186" ref="content">
       <div class="filter-wraper">
         <div class="bottom-filter-tip">
           <div class="filter-label txtjustify">起点区域</div>
@@ -62,7 +62,7 @@
         <div class="bottom-filter-tip">
           <div class="filter-label txtjustify">载具码</div>
           <div class="fxcol mgl20">
-            <input type="text" class="filter-input filter-scan-input" v-model="cano">
+            <input type="text" class="filter-input filter-scan-input" v-model="cano" @focus="windowScrollTo($event)" @blur="windowsScrollTopZero">
           </div>
         </div>
         <div class="bottom-filter-tip">
@@ -127,6 +127,25 @@ export default {
     this._queryPoint1('', '2')
   },
   methods: {
+    windowScrollTo (e) {
+      // 可见窗口高
+      let innerHeight = 6.12 * parseFloat(document.documentElement.style.fontSize)
+      // 元素底部到可视窗口的距离
+      let elHeight = e.target.getBoundingClientRect().bottom
+      if (elHeight > innerHeight) {
+        let mgb = elHeight - innerHeight
+        this.$refs.content.style.marginBottom = mgb + 'px'
+        setTimeout(() => {
+          window.scrollTo(0, mgb)
+        }, 100)
+      }
+    },
+    windowsScrollTopZero () {
+      this.$refs.content.style.marginBottom = '0px'
+      setTimeout(() => {
+        window.scrollTo(0, 0)
+      }, 100)
+    },
     /** 模糊匹配 */
     selectMatchItem (lists, keyWord) {
       let resArr = []
@@ -295,4 +314,7 @@ export default {
 <style lang="stylus" scoped>
 >>>.filter-label
   width 1.8rem
+.content
+  height calc(100% - 1.86rem)
+  overflow hidden
 </style>

src/pages/xinrui/production/ProcessGrindBall.vue

@@ -21,7 +21,7 @@
         <div class="bottom-filter-tip">
           <div class="filter-label txtjustify">备注</div>
           <div class="fxcol mgl20">
-            <input type="text" class="filter-input filter-scan-input" v-model="val4">
+            <input type="text" class="filter-input filter-scan-input" v-model="val4" @focus="windowScrollTo($event)" @blur="windowsScrollTopZero">
           </div>
         </div>
       </div>
@@ -115,6 +115,25 @@ export default {
     }
   },
   methods: {
+    windowScrollTo (e) {
+      // 可见窗口高
+      let innerHeight = 6.12 * parseFloat(document.documentElement.style.fontSize)
+      // 元素底部到可视窗口的距离
+      let elHeight = e.target.getBoundingClientRect().bottom
+      if (elHeight > innerHeight) {
+        let mgb = elHeight - innerHeight
+        this.$refs.content.style.marginBottom = mgb + 'px'
+        setTimeout(() => {
+          window.scrollTo(0, mgb)
+        }, 100)
+      }
+    },
+    windowsScrollTopZero () {
+      this.$refs.content.style.marginBottom = '0px'
+      setTimeout(() => {
+        window.scrollTo(0, 0)
+      }, 100)
+    },
     handleChange2 (e, type) {
       if (type) {
         this.barCode = e
@@ -247,4 +266,7 @@ export default {
 <style lang="stylus" scoped>
 >>>.filter-label
   width 1.6rem
+.content
+  height calc(100% - 1.86rem)
+  overflow hidden
 </style>

src/pages/xinrui/softwaste/CleaningGroupBarrel.vue

@@ -1,7 +1,7 @@
 <template>
   <section>
     <nav-bar title="清洗组桶标签打印"></nav-bar>
-    <section class="content mgt186">
+    <section class="content mgt186" ref="content">
       <div class="filter-wraper">
         <search-box
         label="装入桶"
@@ -35,7 +35,7 @@
         <div class="bottom-filter-tip">
           <div class="filter-label txtjustify">桶数</div>
           <div class="fxcol mgl20">
-            <input type="text" class="filter-input filter-scan-input" v-model="val5">
+            <input type="text" class="filter-input filter-scan-input" v-model="val5" @focus="windowScrollTo($event)" @blur="windowsScrollTopZero">
           </div>
         </div>
       </div>
@@ -89,6 +89,25 @@ export default {
     this._getpcsn()
   },
   methods: {
+    windowScrollTo (e) {
+      // 可见窗口高
+      let innerHeight = 6.12 * parseFloat(document.documentElement.style.fontSize)
+      // 元素底部到可视窗口的距离
+      let elHeight = e.target.getBoundingClientRect().bottom
+      if (elHeight > innerHeight) {
+        let mgb = elHeight - innerHeight
+        this.$refs.content.style.marginBottom = mgb + 'px'
+        setTimeout(() => {
+          window.scrollTo(0, mgb)
+        }, 100)
+      }
+    },
+    windowsScrollTopZero () {
+      this.$refs.content.style.marginBottom = '0px'
+      setTimeout(() => {
+        window.scrollTo(0, 0)
+      }, 100)
+    },
     handleChange (e, type) {
       if (type) {
         this._queryInfoBybucket2(e)
@@ -199,3 +218,9 @@ export default {
   }
 }
 </script>
+
+<style lang="stylus" scoped>
+.content
+  height calc(100% - 1.86rem)
+  overflow hidden
+</style>

src/pages/xinrui/storage/settings/AbnormalBarrelPrint.vue

@@ -1,7 +1,7 @@
 <template>
   <section>
     <nav-bar title="异常桶标签打印"></nav-bar>
-    <section class="content mgt186">
+    <section class="content mgt186" ref="content">
       <div class="filter-wraper">
         <search-box
         label="桶码"
@@ -70,14 +70,14 @@
         <div class="bottom-filter-tip">
           <div class="filter-label txtjustify">重量</div>
           <div class="fxcol mgl20">
-            <input type="number" class="filter-input filter-scan-input" v-model="val5">
+            <input type="number" class="filter-input filter-scan-input" v-model="val5" @focus="windowScrollTo($event)" @blur="windowsScrollTopZero">
           </div>
           <div v-show="JSON.stringify(result) !== '{}'" class="mgl20">{{result.qty_unit_name}}</div>
         </div>
         <div class="bottom-filter-tip">
           <div class="filter-label txtjustify">顺序号</div>
           <div class="fxcol mgl20">
-            <input type="text" class="filter-input filter-scan-input" v-model="val6">
+            <input type="text" class="filter-input filter-scan-input" v-model="val6" @focus="windowScrollTo($event)" @blur="windowsScrollTopZero">
           </div>
         </div>
       </div>
@@ -140,6 +140,25 @@ export default {
     this._getDictInfo('is_active')
   },
   methods: {
+    windowScrollTo (e) {
+      // 可见窗口高
+      let innerHeight = 6.12 * parseFloat(document.documentElement.style.fontSize)
+      // 元素底部到可视窗口的距离
+      let elHeight = e.target.getBoundingClientRect().bottom
+      if (elHeight > innerHeight) {
+        let mgb = elHeight - innerHeight
+        this.$refs.content.style.marginBottom = mgb + 'px'
+        setTimeout(() => {
+          window.scrollTo(0, mgb)
+        }, 100)
+      }
+    },
+    windowsScrollTopZero () {
+      this.$refs.content.style.marginBottom = '0px'
+      setTimeout(() => {
+        window.scrollTo(0, 0)
+      }, 100)
+    },
     handleChange (e, type) {
       if (type) {
         this._queryInfoByUnusual(e)
@@ -330,3 +349,9 @@ export default {
   }
 }
 </script>
+
+<style lang="stylus" scoped>
+.content
+  height calc(100% - 1.86rem)
+  overflow hidden
+</style>

src/pages/xinrui/storage/settings/ChengPinBarrelPrint.vue

@@ -1,7 +1,7 @@
 <template>
   <section>
     <nav-bar title="成品组桶标签打印"></nav-bar>
-    <section class="content mgt186">
+    <section class="content mgt186" ref="content">
       <div class="filter-wraper">
         <search-box
         label="桶码"
@@ -35,13 +35,13 @@
         <div class="bottom-filter-tip">
           <div class="filter-label txtjustify">桶数量</div>
           <div class="fxcol mgl20">
-            <input type="number" class="filter-input filter-scan-input" v-model="val5">
+            <input type="number" class="filter-input filter-scan-input" v-model="val5" @focus="windowScrollTo($event)" @blur="windowsScrollTopZero">
           </div>
         </div>
         <div class="bottom-filter-tip">
           <div class="filter-label txtjustify">起始序号</div>
           <div class="fxcol mgl20">
-            <input type="number" class="filter-input filter-scan-input" v-model="val6">
+            <input type="number" class="filter-input filter-scan-input" v-model="val6" @focus="windowScrollTo($event)" @blur="windowsScrollTopZero">
           </div>
         </div>
         <div class="bottom-filter-tip">
@@ -120,6 +120,25 @@ export default {
     }
   },
   methods: {
+    windowScrollTo (e) {
+      // 可见窗口高
+      let innerHeight = 6.12 * parseFloat(document.documentElement.style.fontSize)
+      // 元素底部到可视窗口的距离
+      let elHeight = e.target.getBoundingClientRect().bottom
+      if (elHeight > innerHeight) {
+        let mgb = elHeight - innerHeight
+        this.$refs.content.style.marginBottom = mgb + 'px'
+        setTimeout(() => {
+          window.scrollTo(0, mgb)
+        }, 100)
+      }
+    },
+    windowsScrollTopZero () {
+      this.$refs.content.style.marginBottom = '0px'
+      setTimeout(() => {
+        window.scrollTo(0, 0)
+      }, 100)
+    },
     handleChange (e, type) {
       if (type) {
         this._endProductqueryInfoBybucket()
@@ -241,3 +260,9 @@ export default {
   }
 }
 </script>
+
+<style lang="stylus" scoped>
+.content
+  height calc(100% - 1.86rem)
+  overflow hidden
+</style>

src/pages/xinrui/storage/settings/FinishProdBarrelPrint.vue

@@ -1,7 +1,7 @@
 <template>
   <section>
     <nav-bar title="产成品组桶标签打印"></nav-bar>
-    <section class="content mgt186">
+    <section class="content mgt186" ref="content">
       <div class="filter-wraper">
         <search-box
         label="桶码"
@@ -35,7 +35,7 @@
         <div class="bottom-filter-tip">
           <div class="filter-label txtjustify">桶数</div>
           <div class="fxcol mgl20">
-            <input type="text" class="filter-input filter-scan-input" v-model="val5">
+            <input type="text" class="filter-input filter-scan-input" v-model="val5" @focus="windowScrollTo($event)" @blur="windowsScrollTopZero">
           </div>
         </div>
       </div>
@@ -81,6 +81,25 @@ export default {
     this.val2 = this.$store.getters.materObj.material_code
   },
   methods: {
+    windowScrollTo (e) {
+      // 可见窗口高
+      let innerHeight = 6.12 * parseFloat(document.documentElement.style.fontSize)
+      // 元素底部到可视窗口的距离
+      let elHeight = e.target.getBoundingClientRect().bottom
+      if (elHeight > innerHeight) {
+        let mgb = elHeight - innerHeight
+        this.$refs.content.style.marginBottom = mgb + 'px'
+        setTimeout(() => {
+          window.scrollTo(0, mgb)
+        }, 100)
+      }
+    },
+    windowsScrollTopZero () {
+      this.$refs.content.style.marginBottom = '0px'
+      setTimeout(() => {
+        window.scrollTo(0, 0)
+      }, 100)
+    },
     handleChange (e, type) {
       if (type) {
         this._queryInfoBybucket()
@@ -171,3 +190,9 @@ export default {
   }
 }
 </script>
+
+<style lang="stylus" scoped>
+.content
+  height calc(100% - 1.86rem)
+  overflow hidden
+</style>

src/pages/xinrui/storage/settings/PeifenBarrelPrint.vue

@@ -2,7 +2,7 @@
   <section>
     <nav-bar v-if="$route.query.id !== '' && $route.query.id !== undefined" :inner2="true" @goIn="goIn" title="配粉间桶标签打印"></nav-bar>
     <nav-bar v-else title="配粉间桶标签打印"></nav-bar>
-    <section class="content mgt186">
+    <section class="content mgt186" ref="content">
       <div class="filter-wraper">
         <search-box
         label="桶码"
@@ -71,7 +71,7 @@
         <div class="bottom-filter-tip">
           <div class="filter-label txtjustify">重量</div>
           <div class="fxcol mgl20">
-            <input type="number" class="filter-input filter-scan-input" v-model="val5">
+            <input type="number" class="filter-input filter-scan-input" v-model="val5" @focus="windowScrollTo($event)" @blur="windowsScrollTopZero">
           </div>
           <div v-show="JSON.stringify(result) !== '{}'" class="mgl20">{{result.qty_unit_name}}</div>
         </div>
@@ -148,6 +148,25 @@ export default {
     this.initDrop()
   },
   methods: {
+    windowScrollTo (e) {
+      // 可见窗口高
+      let innerHeight = 6.12 * parseFloat(document.documentElement.style.fontSize)
+      // 元素底部到可视窗口的距离
+      let elHeight = e.target.getBoundingClientRect().bottom
+      if (elHeight > innerHeight) {
+        let mgb = elHeight - innerHeight
+        this.$refs.content.style.marginBottom = mgb + 'px'
+        setTimeout(() => {
+          window.scrollTo(0, mgb)
+        }, 100)
+      }
+    },
+    windowsScrollTopZero () {
+      this.$refs.content.style.marginBottom = '0px'
+      setTimeout(() => {
+        window.scrollTo(0, 0)
+      }, 100)
+    },
     initDrop () {
       this._getDictInfo('quality_scode')
       this._getDictInfo('ivt_level')
@@ -350,3 +369,9 @@ export default {
   }
 }
 </script>
+
+<style lang="stylus" scoped>
+.content
+  height calc(100% - 1.86rem)
+  overflow hidden
+</style>

src/pages/xinrui/storage/settings/ReworkBarrelPrint.vue

@@ -1,7 +1,7 @@
 <template>
   <section>
     <nav-bar title="返工料桶标签打印"></nav-bar>
-    <section class="content mgt186">
+    <section class="content mgt186" ref="content">
       <div class="filter-wraper">
         <search-box
         label="桶码"
@@ -35,7 +35,7 @@
         <div class="bottom-filter-tip">
           <div class="filter-label txtjustify">桶数</div>
           <div class="fxcol mgl20">
-            <input type="text" class="filter-input filter-scan-input" v-model="val5">
+            <input type="text" class="filter-input filter-scan-input" v-model="val5" @focus="windowScrollTo($event)" @blur="windowsScrollTopZero">
           </div>
         </div>
       </div>
@@ -81,6 +81,25 @@ export default {
     this.val2 = this.$store.getters.materObj.material_code
   },
   methods: {
+    windowScrollTo (e) {
+      // 可见窗口高
+      let innerHeight = 6.12 * parseFloat(document.documentElement.style.fontSize)
+      // 元素底部到可视窗口的距离
+      let elHeight = e.target.getBoundingClientRect().bottom
+      if (elHeight > innerHeight) {
+        let mgb = elHeight - innerHeight
+        this.$refs.content.style.marginBottom = mgb + 'px'
+        setTimeout(() => {
+          window.scrollTo(0, mgb)
+        }, 100)
+      }
+    },
+    windowsScrollTopZero () {
+      this.$refs.content.style.marginBottom = '0px'
+      setTimeout(() => {
+        window.scrollTo(0, 0)
+      }, 100)
+    },
     handleChange (e, type) {
       if (type) {
         this._queryInfoBybucket2(e)
@@ -176,3 +195,9 @@ export default {
   }
 }
 </script>
+
+<style lang="stylus" scoped>
+.content
+  height calc(100% - 1.86rem)
+  overflow hidden
+</style>