fix: 键盘退格和输入同步

src/app.vue

@@ -58,7 +58,7 @@ subscribeEvent('stateUpdate', (data) => {
     homeStore.updateHomeDisinfectionState(data.rely)
   }
   else if (data.fromClass === 'H2O2SensorMgr') {
-    console.log(data.rely)
+    // console.log(data.rely)
     // 首页传感器状态上报
     homeStore.updateHomeData(data.rely)
   }
@@ -103,12 +103,12 @@ const startProgress = () => {
  */
 const initData = async () => {
   // 获取消毒状态
-  const disinfectionParams = {
-    className: 'DisinfectionCtrlServiceExt',
-    fnName: 'getState',
-  }
-  const disinfectionData = await sendCmd(disinfectionParams)
-  homeStore.updateHomeDisinfectionState(disinfectionData)
+  // const disinfectionParams = {
+  //   className: 'DisinfectionCtrlServiceExt',
+  //   fnName: 'getState',
+  // }
+  // const disinfectionData = await sendCmd(disinfectionParams)
+  // homeStore.updateHomeDisinfectionState(disinfectionData)
   await formulaStore.getFormualDefaultData() // 获取默认配方数据
 }
 /**
@@ -137,12 +137,12 @@ const initLiquidConfig = async () => {
   const liquidConfig = await sendCmd(params)
   liquidStore.initLiquidConfig(liquidConfig)
 
-  const liquidParams = {
-    fnName: 'getState',
-    className: 'AddLiquidService',
-  }
-  const liquidData = await sendCmd(liquidParams)
-  liquidStore.updateLiquidState(liquidData)
+  // const liquidParams = {
+  //   fnName: 'getState',
+  //   className: 'AddLiquidService',
+  // }
+  // const liquidData = await sendCmd(liquidParams)
+  // liquidStore.updateLiquidState(liquidData)
 }
 console.log(__DEVICE_TYPE__)
 </script>

src/components/common/FTInput/index.vue

@@ -140,7 +140,9 @@ const onInit = (keyboard: any) => {
   document.addEventListener('click', handlePopClose)
 }
 const onChange = (input: any) => {
+  console.log(input)
   model.value = input
+
   emits('onChange', input)
 }
 
@@ -159,7 +161,19 @@ const onKeyPress = (button: any) => {
     return handleArrow(0)
   if (button === '{arrowright}')
     return handleArrow(1)
+  if (button === '{bksp}')
+    return handleBackspace()
 }
+
+const handleBackspace = () => {
+  // const position = keyboard.value.getCaretPosition()
+  // console.log(position)
+  const value = model.value?.toString() || ''
+  model.value = value.slice(0, -1)
+
+  console.log(model.value)
+}
+
 const handleLock = () => {
   entering.value = true
   const currentLayout = keyboard.value.options.layoutName

src/components/formula/FormulaConfig.vue

@@ -7,7 +7,7 @@ import { useHomeStore } from 'stores/homeStore'
 import { computed, inject, nextTick, onMounted, ref, watch, watchEffect } from 'vue'
 
 import { FtMessage } from '@/libs/message'
-import { convertValuesToInt, convertValuesToString } from '@/libs/utils'
+import { convertValuesToString } from '@/libs/utils'
 import { useFormulaStore } from '@/stores/formulaStore'
 
 const homeStore = useHomeStore()
@@ -72,14 +72,14 @@ onMounted(() => {
  */
 watchEffect(() => {
   if (formulaStore.currentSelectedIndex === null) {
-    formData.value = cloneDeep(formulaStore.defaultFormulaInfo)
+    formData.value = cloneDeep(formulaStore.defaultFormulaInfo || {})
   }
   else {
-    formData.value = cloneDeep(formulaStore.currentSelectedFormulaInfo)
+    formData.value = cloneDeep(formulaStore.currentSelectedFormulaInfo || {})
   }
   isFlip.value = formulaStore.flip
   // 后端给的数据类型是字符串型，前端需要的是int型，后端开发说（赵贺）后端不好转换，由前端进行转换.
-  formData.value = convertValuesToInt(formData.value)
+  formData.value = convertValuesToString(formData.value, 'name')
 })
 
 const disinfectionState = ref(homeStore.disinfectionState) // 消毒状态
@@ -126,7 +126,15 @@ const handleSubmit = async () => {
         return
       }
       const formulaForm: Record<string, any> = convertValuesToString(formData.value, 'name')
-      formulaStore.editFormula(formulaForm.formula_id, formulaForm as Formula.FormulaItem)
+      formulaStore
+        .editFormula(formulaForm.formula_id, formulaForm as Formula.FormulaItem)
+        .then(() => {
+          FtMessage.success('操作成功')
+          formulaStore.initFormulaList('edit')
+        })
+        .catch((e) => {
+          console.log(e)
+        })
     }
     else {
       // 新增配方
@@ -135,10 +143,15 @@ const handleSubmit = async () => {
           const item = res.rely
           const formulaForm: Record<string, any> = convertValuesToString(formData.value, 'name')
           formulaForm.formula_id = item.formula_id
-          formulaStore.editFormula(item.formula_id, formulaForm as Formula.FormulaItem).then(() => {
-            FtMessage.success('操作成功')
-            formulaStore.initFormulaList()
-          })
+          formulaStore
+            .editFormula(item.formula_id, formulaForm as Formula.FormulaItem)
+            .then(() => {
+              FtMessage.success('操作成功')
+              formulaStore.initFormulaList('add')
+            })
+            .catch((e) => {
+              console.log(e)
+            })
         }
       })
     }
@@ -167,8 +180,8 @@ const handleConfirm = (value: string) => {
 const size = 'default'
 // 新增配方方法
 const addFormula = async () => {
-  const formulaInfo = cloneDeep(formulaStore.defaultFormulaInfo)
-  formData.value = convertValuesToInt(formulaInfo)
+  formData.value = cloneDeep(formulaStore.defaultFormulaInfo)
+  // formData.value = convertValuesToInt(formulaInfo)
   await nextTick() // 等待DOM更新
   formData.value.name = ''
   formData.value.formula_id = null
@@ -238,7 +251,7 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
             </ft-input>
           </template>
           <template v-if="item.val_type === 'float'">
-            <ft-input v-model.number="formData[item.setting_id]" layout-name="number" style="width: 80%" type="number">
+            <ft-input v-model="formData[item.setting_id]" layout-name="number" style="width: 80%">
               <template v-if="labelUnitMap[item.setting_id]" #append>
                 {{ labelUnitMap[item.setting_id] }}
               </template>
@@ -267,7 +280,7 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
           </template>
         </el-form-item>
       </el-form>
-      <div :style="{ marginLeft: '33%' }">
+      <div>
         <slot name="formulaBtn">
           <div class="default-btn">
             <el-button type="primary" class="config-btn" @click="handleSubmit">
@@ -295,11 +308,12 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
 <style lang="scss" scoped>
 .formula-form {
   font-size: 20px !important;
-  padding: 5px;
-  padding-left: 15px;
+  padding: 5px 5px 5px 15px;
   align-items: center;
   .default-btn {
     margin-top: 1rem;
+    display: flex;
+    justify-content: center;
   }
   .config-btn {
     height: 3rem;
@@ -320,7 +334,7 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
   height: 40px;
 }
 :deep(.el-select__wrapper) {
-  height: 40px;
+  height: 42px;
 }
 :deep(.el-form-item) {
   margin-right: 0;

src/libs/utils.ts

@@ -103,6 +103,8 @@ function isNumber(str: string | number) {
 
 export const convertValuesToInt = (jsonObj: Record<string, any>) => {
   const result: Record<string, any> = {}
+  if (!jsonObj)
+    return
   for (const [key, value] of Object.entries(jsonObj)) {
     if (key !== 'name' && isNumber(value)) {
       result[key] = Number(value)

src/stores/formulaStore.ts

@@ -185,7 +185,7 @@ export const useFormulaStore = defineStore('formula', () => {
    * @function initFormulaList
    * @desc 初始化配方列表，从服务器获取所有配方
    */
-  const initFormulaList = async () => {
+  const initFormulaList = async (flag: 'add' | 'edit') => {
     try {
       const params = {
         className: 'SettingMgrService',
@@ -197,8 +197,8 @@ export const useFormulaStore = defineStore('formula', () => {
         formulaList.value = res.rely
         if (res.rely.length > 0) {
           console.log('selectedIndex.value--', currentSelectedIndex.value)
-          currentSelectedFormulaInfo.value = res.rely[res.rely.length - 1]
-          currentSelectedIndex.value = res.rely.length - 1
+          flag === 'add' && (currentSelectedFormulaInfo.value = res.rely[res.rely.length - 1])
+          flag === 'add' && (currentSelectedIndex.value = res.rely.length - 1)
         }
         else {
           currentSelectedIndex.value = null