From f8346ea660d3ba9f0e8917ae17f050947e53a6d3 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Sun, 10 Sep 2023 10:56:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=95=E5=85=A5=E9=94=AE=E7=9B=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AddPreSetting.vue | 33 ++++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/components/AddPreSetting.vue b/src/components/AddPreSetting.vue
index 095ac92..2aa0497 100644
--- a/src/components/AddPreSetting.vue
+++ b/src/components/AddPreSetting.vue
@@ -101,10 +101,12 @@
       <p class="title">配方名称</p>
       <div>
         <input
+          id="id_formula"
           type="text"
           v-model="formula_id"
           class="formula_input"
           placeholder="请输入配方名称"
+          @focus="handleShowKeyBoard"
         />
       </div>
     </div>
@@ -218,11 +220,15 @@
       <div class="btn" @click="save">保存</div>
       <div class="btn ml" @click="hiddleSettingModal">返回</div>
     </div>
+    <div class="key_wrap" v-if="showkeyboard" id="keyboard_formula">
+      <SimpleKeyboard @onChange="onChange" :input="formula_id" />
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
+import SimpleKeyboard from 'cpns/SimpleKeyboard'
 import { showSuccessToast, showFailToast } from 'vant'
 import { useSettingStore, useWebSocketStore, useOperatorStore } from '@/store'
 import { storeToRefs } from 'pinia'
@@ -665,6 +671,24 @@ const setSprayLiquidVal = () => {
     return
   }
 }
+
+const showkeyboard = ref(false)
+const onChange = a => {
+  formula_id.value = a
+}
+const handleShowKeyBoard = () => {
+  showkeyboard.value = true
+}
+
+onMounted(() => {
+  document.addEventListener('click', e => {
+    let box = document.getElementById('keyboard_formula')
+    let room = document.getElementById('id_formula')
+    if (!box?.contains(e.target) && e.target != room) {
+      showkeyboard.value = false
+    }
+  })
+})
 </script>
 
 <style lang="scss" scoped>
@@ -762,5 +786,12 @@ const setSprayLiquidVal = () => {
       justify-content: center;
     }
   }
+  .key_wrap {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 230px;
+  }
 }
 </style>