fix: 消毒液虚拟键盘替换

src/components/formula/HomeFormulaConfig.vue

@@ -33,7 +33,10 @@ const labelUnitMap: Record<string, any> = formulaStore.labelUnitMap
  * 监听事件
  */
 watchEffect(() => {
-  formData.value = formulaStore.selectedFormulaInfo !== null ? convertValuesToInt(formulaStore.selectedFormulaInfo) : convertValuesToInt(formulaStore.defaultFormulaInfo as Record<string, any>)
+  formData.value
+    = formulaStore.selectedFormulaInfo !== null
+      ? convertValuesToInt(formulaStore.selectedFormulaInfo)
+      : convertValuesToInt(formulaStore.defaultFormulaInfo as Record<string, any>)
 })
 /**
  * 配方配置列表
@@ -44,73 +47,48 @@ const size = 'default'
 
 <template>
   <div class="formula-form">
-    <el-form
-      :model="formData"
-      label-width="auto"
-      label-position="right"
-      :size="size"
-      inline
-    >
-      <el-form-item  label="配方名称" style="width: 93%">
-        <el-input
-          v-model="formData.name"
-          v-prevent-keyboard
-          name="name"
-          placeholder="配方名称"
-          :disabled="true"
-        />
+    <el-form :model="formData" disabled label-width="auto" label-position="right" :size="size" inline>
+      <el-form-item label="配方名称" style="width: 93%">
+        <ft-input v-model="formData.name" name="name" placeholder="配方名称" />
       </el-form-item>
       <el-form-item
-        v-for="item in formulaConfigList.filter((data) => data.is_visible_in_rt_page)"
+        v-for="item in formulaConfigList.filter(data => data.is_visible_in_rt_page)"
         :key="item.setting_id"
         :label="formulaNameMap[item.setting_id]"
         style="width: 50%"
         :prop="item.setting_id"
       >
         <template v-if="item.val_type === 'int'">
-          <el-input
+          <ft-input
             v-model.number="formData[item.setting_id]"
-            v-prevent-keyboard
             style="width: 80%"
-            type="number"
             :name="item.setting_id"
             :controls="false"
-            :disabled="true"
           >
             <template v-if="labelUnitMap[item.setting_id]" #append>
               {{ labelUnitMap[item.setting_id] }}
             </template>
-          </el-input>
+          </ft-input>
         </template>
         <template v-if="item.val_type === 'float'">
-          <el-input
+          <ft-input
             v-model.number="formData[item.setting_id]"
-            v-prevent-keyboard
             style="width: 80%"
-            type="number"
             :name="item.setting_id"
             :controls="false"
-            :disabled="true"
           >
             <template v-if="labelUnitMap[item.setting_id]" #append>
               {{ labelUnitMap[item.setting_id] }}
             </template>
-          </el-input>
+          </ft-input>
         </template>
         <template v-else-if="item.val_type === 'enum'">
-          <el-select
-            v-model="formData[item.setting_id]"
-            v-prevent-keyboard
-            style="width: 80%;height:40px"
-            placeholder="请选择"
-            :disabled="true"
-            readonly
-          >
+          <el-select v-model="formData[item.setting_id]" style="width: 80%; height: 40px" placeholder="请选择" readonly>
             <el-option v-for="log in item.enums" :key="log" :label="log" :value="log" />
           </el-select>
         </template>
         <template v-else-if="item.val_type === 'boolean'">
-          <el-radio-group v-model="formData[item.setting_id]" :disabled="true">
+          <el-radio-group v-model="formData[item.setting_id]">
             <el-radio :label="true">
               是
             </el-radio>

src/components/formula/RunFormulaConfig.vue

@@ -58,16 +58,9 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
 
 <template>
   <div class="formula-form">
-    <el-form
-      ref="runtimeFormRef"
-      :model="formData"
-      label-width="auto"
-      label-position="right"
-      :size="size"
-      inline
-    >
+    <el-form ref="runtimeFormRef" :model="formData" label-width="auto" label-position="right" :size="size" inline>
       <el-form-item
-        v-for="item in formulaConfigList.filter((data) => data.is_visible_in_rt_page)"
+        v-for="item in formulaConfigList.filter(data => data.is_visible_in_rt_page)"
         :key="item.setting_id"
         :label="formulaNameMap[item.setting_id]"
         style="width: 50%"
@@ -81,42 +74,38 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
         ]"
       >
         <template v-if="item.val_type === 'int'">
-          <el-input
-            v-model.number="formData[item.setting_id]"
-            v-prevent-keyboard
+          <ft-input
+            v-model="formData[item.setting_id]"
             style="width: 80%"
-            type="number"
             :name="item.setting_id"
             :controls="false"
-            :disabled="!(item.is_editable)"
+            :disabled="!item.is_editable"
           >
             <template v-if="labelUnitMap[item.setting_id]" #append>
               {{ labelUnitMap[item.setting_id] }}
             </template>
-          </el-input>
+          </ft-input>
         </template>
         <template v-if="item.val_type === 'float'">
-          <el-input
+          <ft-input
             v-model.number="formData[item.setting_id]"
-            v-prevent-keyboard
             style="width: 80%"
-            type="number"
             :name="item.setting_id"
             :controls="false"
-            :disabled="!(item.is_editable)"
+            :disabled="!item.is_editable"
           >
             <template v-if="labelUnitMap[item.setting_id]" #append>
               {{ labelUnitMap[item.setting_id] }}
             </template>
-          </el-input>
+          </ft-input>
         </template>
         <template v-else-if="item.val_type === 'enum'">
           <el-select
             v-model="formData[item.setting_id]"
             v-prevent-keyboard
-            style="width: 80%;height:40px"
+            style="width: 80%; height: 40px"
             placeholder="请选择"
-            :disabled="!(item.is_editable)"
+            :disabled="!item.is_editable"
             readonly
           >
             <el-option v-for="log in item.enums" :key="log" :label="log" :value="log" />

src/components/home/HomeLogLevel.vue

@@ -18,10 +18,6 @@ watchEffect(() => {
   loglevel.value = formulaStore.loglevel
 })
 
-const openModal = () => {
-  isModalOpen.value = true
-}
-
 const setRealtimeConfig = async (key: string, val: string) => {
   await syncSendCmd({
     className: 'DisinfectionCtrlServiceExt',
@@ -51,15 +47,7 @@ const operationState = computed(() => {
 <template>
   <div class="home-right-level">
     消毒等级：
-    <el-input
-      v-model="loglevel"
-      v-prevent-keyboard
-      class="input"
-      placeholder="请选择"
-      style="height: 4rem"
-      readonly
-      @focus="openModal"
-    >
+    <el-input v-model="loglevel" class="input" placeholder="请选择" style="height: 4rem" readonly>
       <template #append>
         <bt-button type="primary" button-text="Log" text-color="#ffffff" height="4rem" text-size="16px" />
       </template>

src/views/liquid/index.vue

@@ -26,9 +26,9 @@ const keyboardVisible = ref(false)
 const keyboardType = ref<'text' | 'number'>('number')
 const softKeyboardRef = ref()
 const liquidStateData = ref(liquidStore.liquidStateData)
-const addWorkState = ref(liquidStore.liquidStateData)// 加液状态
-const drainWorkState = ref(liquidStore.liquidStateData)// 排液状态
-const liquidTotoal = ref(liquidStore.liquidTotal)// 总容量
+const addWorkState = ref(liquidStore.liquidStateData) // 加液状态
+const drainWorkState = ref(liquidStore.liquidStateData) // 排液状态
+const liquidTotoal = ref(liquidStore.liquidTotal) // 总容量
 const disinfectionState = ref(homeStore.disinfectionState)
 const sealInfo = ref(sealStore.sealInfo)
 const loading = ref(false)
@@ -40,9 +40,7 @@ const btnStyle = {
   textColor: '#FFFFFF',
 }
 
-onMounted(() => {
-
-})
+onMounted(() => {})
 
 watchEffect(() => {
   addWorkState.value = liquidStore.liquidAddWorkState
@@ -58,14 +56,6 @@ watch(inputValue, (newVal: string | number) => {
   stopatg.value = Number(newVal)
 })
 
-const openKeyboard = () => {
-  keyboardVisible.value = true
-}
-
-// const nowLiquid = computed(() => {
-//   return roundNumber(liquidStateData.value.nowLiquid, 0)
-// })
-
 const handleConfirm = (value: string) => {
   console.log('确认输入:', value)
 }
@@ -159,14 +149,13 @@ const onStopDrainLiquid = async () => {
 
         <!-- 输入加液/排液量 -->
         <div class="liquid-input">
-          <el-input
+          <ft-input
             v-model="stopatg"
-            v-prevent-keyboard
+            layout-name="number"
             class="input"
             name="nowLiquid"
             placeholder="请输入"
-            style="height: 4rem"
-            @focus="openKeyboard"
+            style="height: 4rem; width: 25vw"
           >
             <template #append>
               <bt-button
@@ -179,7 +168,7 @@ const onStopDrainLiquid = async () => {
                 text-size="24px"
               />
             </template>
-          </el-input>
+          </ft-input>
         </div>
 
         <!-- 操作区 -->
@@ -265,7 +254,7 @@ const onStopDrainLiquid = async () => {
       v-model="inputValue"
       :is-visible="keyboardVisible"
       :keyboard-type="keyboardType"
-      @update-keyboard-visible="(visible) => keyboardVisible = visible"
+      @update-keyboard-visible="visible => (keyboardVisible = visible)"
       @confirm="handleConfirm"
       @close="keyboardVisible = false"
     />
@@ -273,28 +262,28 @@ const onStopDrainLiquid = async () => {
 </template>
 
 <style lang="scss" scoped>
-.main-content{
+.main-content {
   display: grid;
-  grid-template-columns: repeat(3,1fr);
+  grid-template-columns: repeat(3, 1fr);
   height: $main-container-height;
   gap: 10px;
   overflow: hidden;
-  .liquid-left{
-    background: #FFFFFF;
-    grid-column:  1 / 3;
+  .liquid-left {
+    background: #ffffff;
+    grid-column: 1 / 3;
     display: flex;
     justify-content: center;
     align-items: center;
     box-shadow: 0px 1px 5px 0px rgba(9, 39, 62, 0.15);
     background: $gradient-color;
   }
-  .liquid-right{
-    background:#FFFFFF;
+  .liquid-right {
+    background: #ffffff;
     box-shadow: 0px 1px 5px 0px rgba(9, 39, 62, 0.15);
     padding-top: 15vh;
     width: 100%;
     background: $gradient-color;
-    .liquid-surplus-title{
+    .liquid-surplus-title {
       height: 13vh;
       display: flex;
       padding-left: 2.5rem;
@@ -302,30 +291,30 @@ const onStopDrainLiquid = async () => {
       font-size: 24px;
       font-weight: 400;
 
-      .liquid-title-g{
-        color: #2892F3;
+      .liquid-title-g {
+        color: #2892f3;
         font-weight: bold;
       }
     }
-    .liquid-input{
+    .liquid-input {
       display: flex;
       align-items: center;
       justify-content: center;
-      .input{
+      .input {
         width: 25vw;
       }
     }
 
-    .liquid-opt{
+    .liquid-opt {
       display: flex;
       justify-content: center;
       margin-top: 4vh;
     }
-    .liquid-add-btn{
+    .liquid-add-btn {
       width: 25vw;
       height: 8vh;
       border-radius: 12px;
-      color: #FFFFFF;
+      color: #ffffff;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -333,7 +322,7 @@ const onStopDrainLiquid = async () => {
       gap: 10px;
     }
 
-    .liquid-drain{
+    .liquid-drain {
       margin-top: 1.5rem;
     }
   }