From 1bf987e954db2cdbc25bbb168fb1b64a5dcf56aa Mon Sep 17 00:00:00 2001
From: sige <sige@sige.com>
Date: Tue, 21 May 2024 19:23:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E5=80=BC=E8=BE=93=E5=85=A5=E6=A1=86?=
 =?UTF-8?q?=E6=BF=80=E6=B4=BB=E6=97=B6=E5=85=A8=E9=80=89=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AddPreSetting.vue             | 86 +++++++++-----------------
 src/components/LiquidHandle.vue              | 15 ++---
 src/components/MyInput.vue                   | 89 +++++++++++++++++++++++++++
 src/components/Setting/components/Device.vue | 92 +++++++++-------------------
 src/components/Test.vue                      | 12 +---
 src/components/UpdatePreSetting.vue          | 88 +++++++++-----------------
 src/main.js                                  |  3 +
 7 files changed, 187 insertions(+), 198 deletions(-)
 create mode 100644 src/components/MyInput.vue

diff --git a/src/components/AddPreSetting.vue b/src/components/AddPreSetting.vue
index db56ca5..e5ef66d 100644
--- a/src/components/AddPreSetting.vue
+++ b/src/components/AddPreSetting.vue
@@ -3,99 +3,71 @@
     <div class="row_wrap">
       <p class="title">注射蠕动泵速率(g/min)</p>
       <p class="num">
-        <van-field
-          class="field_font"
-          type="number"
-          v-model="sprayLiquidConfigVal"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="sprayLiquidConfigVal"
           :formatter="formatter7"
-          readonly
-          @click.stop="hideClickKey(2)"
-        />
+          @done="setSprayLiquidVal"
+        ></my-input>
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒停止过氧化氢浓度(ppm)</p>
       <p class="num">
-        <van-field
-          type="number"
-          class="field_font"
-          v-model="stoped_gs"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="stoped_gs"
           :formatter="formatter1"
-          readonly
-          @click.stop="hideClickKey(3)"
-        />
+          @done="setStopedGsVal"
+        ></my-input>
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒继续过氧化氢浓度(ppm)</p>
       <p class="num">
-        <van-field
-          class="field_font"
-          type="number"
-          v-model="continued_gs"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="continued_gs"
           :formatter="formatter2"
-          readonly
-          @click.stop="hideClickKey(4)"
-        />
+          @done="setcontinuedGsVal"
+        ></my-input>
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒停止相对湿度(%RH)</p>
       <p class="num">
-        <van-field
-          class="field_font"
-          type="number"
-          v-model="stoped_humi"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="stoped_humi"
           :formatter="formatter9"
-          readonly
-          @click.stop="hideClickKey(9)"
-        />
+          @done="setstoped_humiVal"
+        ></my-input>
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒继续相对湿度(%RH)</p>
       <p class="num">
-        <van-field
-          class="field_font"
-          type="number"
-          v-model="continued_humi"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="continued_humi"
           :formatter="formatter10"
-          readonly
-          @click.stop="hideClickKey(10)"
-        />
+          @done="setcontinued_humiVal"
+        ></my-input>
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒停止过氧化氢相对饱和度(%RS)</p>
       <p class="num">
-        <van-field
-          class="field_font"
-          type="number"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="stoped_satur"
           :formatter="formatter3"
-          v-model="stoped_satur"
-          :clickable="true"
-          readonly
-          @click.stop="hideClickKey(5)"
-        />
+          @done="setstopedSaturVal"
+        ></my-input>
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒继续过氧化氢相对饱和度(%RS)</p>
       <p class="num">
-        <van-field
-          type="number"
-          class="field_font"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="continued_satur"
           :formatter="formatter4"
-          v-model="continued_satur"
-          :clickable="true"
-          readonly
-          @click.stop="hideClickKey(6)"
-        />
+          @done="setContinuedSaturVal"
+        ></my-input>
       </p>
     </div>
     <div class="row_wrap" @click="showLogPicker">
@@ -813,7 +785,7 @@ onMounted(() => {
         align-items: center;
         justify-content: center;
       }
-      .field_font {
+      :deep(.field_font) {
         font-size: 26px;
         width: 180px;
       }
diff --git a/src/components/LiquidHandle.vue b/src/components/LiquidHandle.vue
index 8b2d6c0..1f2219a 100644
--- a/src/components/LiquidHandle.vue
+++ b/src/components/LiquidHandle.vue
@@ -76,14 +76,10 @@
     </div>
     <div class="right_container">
       <div class="add_liquid_wrap" v-if="tabType == 1">
-        <van-field
-          type="number"
-          v-model="addLiquidVal"
-          readonly
+        <my-input type="number" class="add_liquid_input" 
+          v-model:value="addLiquidVal"
           :formatter="formatter"
-          @click.stop="handleClickInput"
-          class="add_liquid_input"
-        />
+        ></my-input>
       </div>
       <div class="push_liquid_wrap" v-if="tabType == 2">
         <p class="num">
@@ -177,6 +173,7 @@ import {
   stopDrainingJSON,
 } from '@/mock/command'
 
+
 const numberKeyboardShow = ref(false)
 const operatorStore = useOperatorStore()
 
@@ -355,9 +352,9 @@ const handleClickInput = () => {
       background-size: 100% 100%;
       margin-bottom: 41px;
       background: url(../assets/img/liquid/form.png);
-      .add_liquid_input {
+      :deep(.add_liquid_input) {
         position: absolute;
-        left: -9px;
+        left: 5px;
         bottom: 8px;
         width: 150px;
         height: 69px;
diff --git a/src/components/MyInput.vue b/src/components/MyInput.vue
new file mode 100644
index 0000000..c018056
--- /dev/null
+++ b/src/components/MyInput.vue
@@ -0,0 +1,89 @@
+<template>
+  <van-field
+    ref="input"
+    v-model="value"
+    readonly
+    :formatter="props.formatter"
+    :class="props.class"
+    :type="props.type"
+    @click.stop="actionInputClick"
+  ></van-field>
+
+  <template v-if="keyboardVisible">
+    <van-number-keyboard v-if="'number' === props.type" 
+      v-model="value" 
+      :show="true" 
+      :title="value"
+      :theme="props.theme"
+      :close-button-text="props.closeText"
+      @input="actionKeyBoardInput" 
+      @blur="actionKeyBoardBlur"
+      @close="actionKeyBoardClose"
+    ></van-number-keyboard>
+  </template>
+</template>
+<script setup>
+import { nextTick, ref, watch } from 'vue';
+/** @var {Function} */
+const emits = defineEmits(['update:value','done']);
+/** @var {Object} */
+const props = defineProps({
+    // 格式化函数
+    formatter : { type: Function, default: value => value},
+    // 类名
+    class : { type: String, default: ''},
+    // 类型
+    type : { type: String, default: 'text'},
+    // 取值
+    value : { type: String, default: ''},
+    // 主题
+    theme : { type: String, default: ''},
+    // 关闭按钮文本
+    closeText : { type: String, default: ''},
+});
+/** @var {String} */
+const value = ref(props.value);
+/** @var {Boolean} */
+const keyboardVisible = ref(false);
+/** @var {Boolean} */
+const isFirstClick = ref(true);
+/** @var {Component} */
+const input = ref(null);
+/** @var {String} */
+let originValue = null;
+// 监听外部值变化
+watch(() => props.value, (val) => value.value = val);
+
+// 输入框点击
+async function actionInputClick() {
+    originValue = props.value;
+    isFirstClick.value = true;
+    keyboardVisible.value = true;
+    await nextTick();
+    input.value.$el.querySelector('input').select();
+    input.value.$el.querySelector('input').focus();
+}
+
+// 键盘输入
+function actionKeyBoardInput(val) {
+    if (isFirstClick.value) {
+        setTimeout(() => value.value = val + '');
+        isFirstClick.value = false
+    }
+}
+
+// 键盘失焦
+function actionKeyBoardBlur() {
+    actionKeyBoardClose();
+}
+
+// 键盘关闭
+function actionKeyBoardClose() {
+    keyboardVisible.value = false;
+    window.getSelection().removeAllRanges();
+    emits('update:value', value.value);
+    if (`${originValue}` !== value.value) {
+        emits('done');
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Setting/components/Device.vue b/src/components/Setting/components/Device.vue
index 9f5f59f..bd09eaf 100644
--- a/src/components/Setting/components/Device.vue
+++ b/src/components/Setting/components/Device.vue
@@ -10,126 +10,90 @@
     <div class="row_wrap">
       <p class="title">注射蠕动泵速率(g/min)</p>
       <p class="num">
-        <van-field
-          type="number"
-          class="field_font"
-          v-model="sprayLiquidConfigVal"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="sprayLiquidConfigVal"
           :formatter="formatter7"
-          readonly
-          @click.stop="hideClickKey(2)"
+          @done="setSprayLiquidVal"
         />
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒停止过氧化氢浓度(ppm)</p>
       <p class="num">
-        <van-field
-          type="number"
-          class="field_font"
-          v-model="stoped_gs"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="stoped_gs"
           :formatter="formatter1"
-          readonly
-          @click.stop="hideClickKey(3)"
+          @done="setStopedGsVal"
         />
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒继续过氧化氢浓度(ppm)</p>
       <p class="num">
-        <van-field
-          type="number"
-          class="field_font"
-          v-model="continued_gs"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="continued_gs"
           :formatter="formatter2"
-          readonly
-          @click.stop="hideClickKey(4)"
+          @done="setcontinuedGsVal"
         />
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒停止相对湿度(%RH)</p>
       <p class="num">
-        <van-field
-          class="field_font"
-          type="number"
-          v-model="stoped_humi"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="stoped_humi"
           :formatter="formatter9"
-          readonly
-          @click.stop="hideClickKey(9)"
+          @done="setstoped_humiVal"
         />
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒继续相对湿度(%RH)</p>
       <p class="num">
-        <van-field
-          class="field_font"
-          type="number"
-          v-model="continued_humi"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="continued_humi"
           :formatter="formatter10"
-          readonly
-          @click.stop="hideClickKey(10)"
+          @done="setcontinued_humiVal"
         />
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒停止过氧化氢相对饱和度(%RS)</p>
       <p class="num">
-        <van-field
-          class="field_font"
-          type="number"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="stoped_satur"
           :formatter="formatter3"
-          v-model="stoped_satur"
-          :clickable="true"
-          readonly
-          @click.stop="hideClickKey(5)"
+          @done="setstopedSaturVal"
         />
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒继续过氧化氢相对饱和度(%RS)</p>
       <p class="num">
-        <van-field
-          class="field_font"
-          type="number"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="continued_satur"
           :formatter="formatter4"
-          v-model="continued_satur"
-          :clickable="true"
-          readonly
-          @click.stop="hideClickKey(6)"
+          @done="setContinuedSaturVal"
         />
       </p>
     </div>
     <div class="row_wrap" v-if="[0, 5].includes(operatorStore.disinfectStatus)">
       <p class="title">允许消毒最大湿度(%RH)</p>
       <p class="num">
-        <van-field
-          class="field_font"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="max_humidity"
           :formatter="formatter5"
-          type="number"
-          v-model="max_humidity"
-          :clickable="true"
-          readonly
-          @click.stop="hideClickKey(7)"
+          @done="setMaxHumidityVal"
         />
       </p>
     </div>
     <div class="row_wrap" v-if="[0, 5].includes(operatorStore.disinfectStatus)">
       <p class="title">预热时间(s)</p>
       <p class="num">
-        <van-field
-          class="field_font"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="pre_heat_time_s"
           :formatter="formatter8"
-          type="number"
-          v-model="pre_heat_time_s"
-          :clickable="true"
-          readonly
-          @click.stop="hideClickKey(8)"
+          @done="setHeat_timeVal"
         />
       </p>
     </div>
@@ -812,7 +776,7 @@ const setSprayLiquidVal = () => {
       color: #000000;
       display: flex;
       align-items: center;
-      .field_font {
+      :deep(.field_font) {
         font-size: 26px;
         width: 180px;
       }
diff --git a/src/components/Test.vue b/src/components/Test.vue
index 2f07d8f..7f21c8f 100644
--- a/src/components/Test.vue
+++ b/src/components/Test.vue
@@ -62,15 +62,7 @@
     <div class="common_set switch_wrap">
       <p class="title">注射蠕动泵</p>
       <div class="num">
-        <van-field
-          type="number"
-          :formatter="formatter7"
-          v-model="addLiquidVal2"
-          :clickable="true"
-          readonly
-          @click.stop="hideAllKeyboards(3)"
-          class="add_liquid_input"
-        />
+        <my-input type="number" class="add_liquid_input" v-model:value="addLiquidVal2" :formatter="formatter7" />
         <p>g/min</p>
       </div>
       <div class="btn_wrap">
@@ -555,7 +547,7 @@ const changeDraughtStatus = flag => {
       display: flex;
       align-items: center;
       margin-right: 4px;
-      .add_liquid_input {
+      :deep(.add_liquid_input) {
         width: 40px;
         margin-right: 2px;
         text-align: right;
diff --git a/src/components/UpdatePreSetting.vue b/src/components/UpdatePreSetting.vue
index 1671870..90469a3 100644
--- a/src/components/UpdatePreSetting.vue
+++ b/src/components/UpdatePreSetting.vue
@@ -3,99 +3,71 @@
     <div class="row_wrap">
       <p class="title">消毒停止过氧化氢浓度(ppm)</p>
       <p class="num">
-        <van-field
-          class="field_font"
-          type="number"
-          v-model="stoped_gs"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="stoped_gs"
           :formatter="formatter1"
-          readonly
-          @click.stop="hideClickKey(3)"
-        />
+          @done="setStopedGsVal"
+        ></my-input>
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒继续过氧化氢浓度(ppm)</p>
       <p class="num">
-        <van-field
-          type="number"
-          class="field_font"
-          v-model="continued_gs"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="continued_gs"
           :formatter="formatter2"
-          readonly
-          @click.stop="hideClickKey(4)"
-        />
+          @done="setcontinuedGsVal"
+        ></my-input>
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒停止相对湿度(%RH)</p>
       <p class="num">
-        <van-field
-          type="number"
-          class="field_font"
-          v-model="stoped_humi"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="stoped_humi"
           :formatter="formatter9"
-          readonly
-          @click.stop="hideClickKey(9)"
-        />
+          @done="setstoped_humiVal"
+        ></my-input>
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒继续相对湿度(%RH)</p>
       <p class="num">
-        <van-field
-          type="number"
-          class="field_font"
-          v-model="continued_humi"
-          :clickable="true"
-          :formatter="formatter10"
-          readonly
-          @click.stop="hideClickKey(10)"
-        />
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="stoped_humi"
+          :formatter="formatter9"
+          @done="setstoped_humiVal"
+        ></my-input>
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒停止过氧化氢相对饱和度(%RS)</p>
       <p class="num">
-        <van-field
-          type="number"
-          class="field_font"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="stoped_satur"
           :formatter="formatter3"
-          v-model="stoped_satur"
-          :clickable="true"
-          readonly
-          @click.stop="hideClickKey(5)"
-        />
+          @done="setstopedSaturVal"
+        ></my-input>
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒继续过氧化氢相对饱和度(%RS)</p>
       <p class="num">
-        <van-field
-          type="number"
-          class="field_font"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="continued_satur"
           :formatter="formatter4"
-          v-model="continued_satur"
-          :clickable="true"
-          readonly
-          @click.stop="hideClickKey(6)"
-        />
+          @done="setContinuedSaturVal"
+        ></my-input>
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">注射蠕动泵速率(g/min)</p>
       <p class="num">
-        <van-field
-          type="number"
-          class="field_font"
-          v-model="sprayLiquidConfigVal"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="sprayLiquidConfigVal"
           :formatter="formatter7"
-          readonly
-          @click.stop="hideClickKey(2)"
-        />
+          @done="setSprayLiquidVal"
+        ></my-input>
       </p>
     </div>
     <div class="row_wrap" @click="showLogPicker">
@@ -874,7 +846,7 @@ onMounted(() => {
         align-items: center;
         justify-content: center;
       }
-      .field_font {
+      :deep(.field_font) {
         font-size: 26px;
         width: 180px;
       }
diff --git a/src/main.js b/src/main.js
index 80c1db2..7505e03 100644
--- a/src/main.js
+++ b/src/main.js
@@ -22,6 +22,8 @@ import '@vant/touch-emulator'
 import 'vant/lib/index.css'
 import '@/assets/css/reset.css'
 import './style.scss'
+import MyInput from 'cpns/MyInput.vue'
+
 
 createApp(App)
   .use(router)
@@ -39,4 +41,5 @@ createApp(App)
   .use(ElementPlus)
   .use(Toast)
   .use(store)
+  .component('my-input', MyInput)
   .mount('#app')