fix: 新的键盘事件

src/components/common/FTKeyboard/index.vue → src/components/common/FTInput/index.vue

@@ -19,11 +19,6 @@ const props = defineProps({
     type: Number,
     default: 2,
   },
-  // 获取焦点打开键盘
-  isOpen: {
-    type: Boolean,
-    default: true,
-  },
 })
 const emits = defineEmits(['onChange', 'enter', 'close', 'focus'])
 const deviceStore = useDeviceStore()
@@ -64,25 +59,18 @@ const open = () => {
 
 const focusInput = (e: any) => {
   const rect = e.target.getBoundingClientRect()
-  console.log('元素位置信息:', {
-    top: rect.top + window.scrollY,
-    left: rect.left + window.scrollX,
-    width: rect.width,
-    height: rect.height,
-  })
   if (rect.top + window.scrollY > 800) {
     placement.value = 'top'
   }
   else {
     placement.value = 'bottom'
   }
-  console.log(rect)
   if (visible.value)
     return
-  emits('focus')
   if (deviceType.value !== deviceStore.deviceTypeMap.LargeSpaceDM_B)
     visible.value = true
 }
+emits('focus')
 
 // const blurInput = debounce(() => {
 //  if (!entering.value) {

src/components/formula/FormulaConfig.vue

@@ -105,23 +105,21 @@ watch(
   },
   { deep: true },
 )
-const formRef = ref(null)
+const formRef = ref()
 
 /**
  * 处理表单提交
  * 根据不同的type属性值执行不同的保存逻辑
  */
-const handleSubmit = () => {
+const handleSubmit = async () => {
   // 表单验证
-  if (formData.value.name === '') {
-    FtMessage.warning('请输入配方名称')
+  try {
+    const valid = await formRef.value.validate()
+    if (!valid) {
       return
     }
-  if (formData.value.name && formData.value.name.length > 20) {
-    FtMessage.warning('配方名称1-20字符')
-    return
-  }
-  if (formData.value.formula_id) { // 修改配方
+    if (formData.value.formula_id) {
+      // 修改配方
       // 判断消毒是否正在执行 且正在执行配方是当前修改配方
       if (!deviceState.value && formulaStore.selectedFormulaInfo?.formula_id === formData.value.formula_id) {
         ElMessage.warning('禁止修改正在执行的配方信息!')
@@ -130,7 +128,8 @@ const handleSubmit = () => {
       const formulaForm: Record<string, any> = convertValuesToString(formData.value, 'name')
       formulaStore.editFormula(formulaForm.formula_id, formulaForm as Formula.FormulaItem)
     }
-  else { // 新增配方
+    else {
+      // 新增配方
       formulaStore.onAddFormula().then((res) => {
         if (res.ackcode === 0) {
           const item = res.rely
@@ -143,6 +142,10 @@ const handleSubmit = () => {
         }
       })
     }
+  }
+  catch (e) {
+    console.log(e)
+  }
 }
 /**
  * @computed 计算属性 - 设备状态判断
@@ -192,16 +195,12 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
 <template>
   <transition name="slide-right">
     <div v-if="isFlip" class="formula-form">
-      <el-form
-        ref="formRef"
-        :model="formData"
-        label-width="auto"
-        label-position="right"
-        :size="size"
-        inline
-      >
+      <el-form ref="formRef" :model="formData" label-width="auto" label-position="right" :size="size" inline>
         <el-form-item
-          label="配方名称" style="width: 93%" prop="name" :rules="[
+          label="配方名称"
+          style="width: 93%"
+          prop="name"
+          :rules="[
             {
               required: true,
               message: '请输入配方名称',
@@ -215,15 +214,10 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
             },
           ]"
         >
-          <el-input
-            v-model="formData.name"
-            v-prevent-keyboard
-            name="name"
-            placeholder="配方名称"
-          />
+          <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_formula_page)"
+          v-for="item in formulaConfigList.filter(data => data.is_visible_in_formula_page)"
           :key="item.setting_id"
           :label="formulaNameMap[item.setting_id]"
           style="width: 50%"
@@ -237,38 +231,24 @@ 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
-              style="width: 80%"
-              type="number"
-              :name="item.setting_id"
-              :controls="false"
-            >
+            <ft-input v-model="formData[item.setting_id]" style="width: 80%" layout-name="number">
               <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
-              v-model.number="formData[item.setting_id]"
-              v-prevent-keyboard
-              style="width: 80%"
-              type="number"
-              :name="item.setting_id"
-              :controls="false"
-            >
+            <ft-input v-model.number="formData[item.setting_id]" layout-name="number" style="width: 80%" type="number">
               <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="请选择"
               readonly
             >
@@ -339,6 +319,9 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
   text-align: left;
   height: 40px;
 }
+:deep(.el-select__wrapper) {
+  height: 40px;
+}
 :deep(.el-form-item) {
   margin-right: 0;
   align-items: center;

src/main.ts

@@ -5,6 +5,7 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import BTButton from 'components/common/BTButton/index.vue'
 import FtButton from 'components/common/FTButton/index.vue'
 import FtDialog from 'components/common/FTDialog/index.vue'
+import FtInput from 'components/common/FTInput/index.vue'
 import FtTable from 'components/common/FTTable/index.vue'
 import ElementPlus from 'element-plus'
 import locale from 'element-plus/es/locale/lang/zh-cn'
@@ -27,7 +28,7 @@ const i18n = createI18n<{
   }
 }>({
   legacy: false,
-  locale: localStorage.getItem('locale') as LocaleType || defaultLocale,
+  locale: (localStorage.getItem('locale') as LocaleType) || defaultLocale,
   fallbackLocale: 'en',
   messages,
 })
@@ -50,8 +51,5 @@ app.component('BtButton', BTButton)
 app.component('FtTable', FtTable)
 app.component('FtButton', FtButton)
 app.component('FtDialog', FtDialog)
-app
-  .use(router)
-  .use(i18n)
-  .use(ElementPlus, { locale, zIndex: 3000 })
-  .mount('#app')
+app.component('FtInput', FtInput)
+app.use(router).use(i18n).use(ElementPlus, { locale, zIndex: 3000 }).mount('#app')