表单增加验证

src/components/formula/FormulaConfig.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import SelectModal from 'components/common/SelectModal/index.vue'
 import SoftKeyboard from 'components/common/SoftKeyboard/index.vue'
 import { ElMessage } from 'element-plus'
 import { formulaNameMap } from 'libs/constant'
@@ -13,8 +12,6 @@ import { useFormulaStore } from '@/stores/formulaStore'
 
 const homeStore = useHomeStore()
 
-const nameLength = 10
-
 const formulaStore = useFormulaStore()
 
 const targetInputRef = ref<HTMLInputElement | null>(null)
@@ -61,16 +58,10 @@ const registerGrandsonMethods = inject<(methods: any) => void>('registerGrandson
 const formulaConfigList = ref(formulaStore.formulaConfigList)
 
 /**
- * 日志级别选项列表
- */
-const options = ref(formulaStore.logLevelOptions)
-
-/**
  * 标签单位映射表，用于显示各参数的单位
  */
 const labelUnitMap: Record<string, any> = formulaStore.labelUnitMap
 
-const currentFormulaItem = ref()
 onMounted(() => {
   formulaStore.getFormualDefaultData() // 获取表单的配置信息
   registerGrandsonMethods && registerGrandsonMethods({ getFormData })
@@ -91,40 +82,7 @@ watchEffect(() => {
   formData.value = convertValuesToInt(formData.value)
 })
 
-/**
- * 模态框是否打开
- */
-const isModalOpen = ref(false)
-
-/**
- * 打开模态框
- */
-const openModal = () => {
-  isModalOpen.value = true
-}
 const disinfectionState = ref(homeStore.disinfectionState) // 消毒状态
-/**
- * 监听软键盘输入值变化，更新表单数据
- * @param {string | number} newVal - 新的输入值
- */
-watch(inputValue, (newVal: string | number) => {
-  if (focusedInput.value) {
-    if (focusedInput.value !== 'name') {
-      newVal = Number(newVal)
-      if (currentFormulaItem.value && newVal > currentFormulaItem.value.val_upper_limit) {
-        newVal = currentFormulaItem.value.val_upper_limit
-      }
-      formData.value[focusedInput.value] = newVal
-    }
-    else {
-      if (newVal && newVal.toString().length > nameLength) {
-        inputValue.value = formData.value[focusedInput.value]
-        return
-      }
-      formData.value[focusedInput.value] = newVal
-    }
-  }
-})
 
 /**
  * 获取当前表单数据，将值转换为字符串格式
@@ -194,25 +152,7 @@ const handleSubmit = () => {
 const deviceState = computed(() => {
   return disinfectionState.value.state === 'idle' || disinfectionState.value.state === 'finished'
 })
-/**
- * 打开软键盘
- * @param {Event} e - 事件对象
- * @param item
- */
-const openKeyboard = (e: any, item: Formula.FormulaItem) => {
-  setTimeout(() => {
-    keyboardVisible.value = true
-    const labelName: string = e.target.name
-    openKeyboardType(labelName)
-    const formValue = formData.value[labelName]
-    inputValue.value = formValue.toString()
-    focusedInput.value = e.target.name
-    currentFormulaItem.value = item
 
-    const inputDom = e.target as HTMLInputElement
-    targetInputRef.value = inputDom
-  }, 100)
-}
 /**
  * 确认输入值
  * @param {string} value - 输入值
@@ -220,30 +160,7 @@ const openKeyboard = (e: any, item: Formula.FormulaItem) => {
 const handleConfirm = (value: string) => {
   console.log('确认输入:', value)
 }
-/**
- * 确认日志级别选择
- * @param {any} value - 选择的值
- */
-const handleLogConfirm = (value: any) => {
-  isModalOpen.value = false
-  formData.value.loglevel = value
-  formulaStore.updateLogLevel(value)
-}
 
-/**
- * 取消日志级别选择
- */
-const handleLogCancel = () => {
-  isModalOpen.value = false
-}
-
-/**
- * 根据标签名称确定软键盘类型
- * @param {string} labelName - 标签名称
- */
-const openKeyboardType = (labelName: string) => {
-  keyboardType.value = labelName === 'name' ? 'text' : 'number'
-}
 const size = 'default'
 // 新增配方方法
 const addFormula = async () => {
@@ -258,6 +175,18 @@ const addFormula = async () => {
 defineExpose({
   addFormula,
 })
+const validatePass = (rule: any, value: any, callback: any, config: Formula.FormulaConfig) => {
+  if (!value && value !== 0 && value !== '0') {
+    callback(new Error('此为必填项'))
+  }
+  else if (config.val_type === 'int' || config.val_type === 'float') {
+    const temp = Number(value)
+    if (temp < config.val_lower_limit || temp > config.val_upper_limit) {
+      callback(new Error(`输入范围为${config.val_lower_limit}-${config.val_upper_limit}`))
+    }
+  }
+  callback()
+}
 </script>
 
 <template>
@@ -271,14 +200,26 @@ defineExpose({
         :size="size"
         inline
       >
-        <el-form-item label="配方名称" style="width: 93%">
+        <el-form-item
+          label="配方名称" style="width: 93%" prop="name" :rules="[
+            {
+              required: true,
+              message: '请输入配方名称',
+              trigger: 'blur',
+            },
+            {
+              min: '1',
+              max: '20',
+              message: '长度在1-20个字符',
+              trigger: 'blur',
+            },
+          ]"
+        >
           <el-input
             v-model="formData.name"
             v-prevent-keyboard
             name="name"
-            prop="name"
             placeholder="配方名称"
-            @focus="openKeyboard"
           />
         </el-form-item>
         <el-form-item
@@ -286,6 +227,14 @@ defineExpose({
           :key="item.setting_id"
           :label="formulaNameMap[item.setting_id]"
           style="width: 50%"
+          :prop="item.setting_id"
+          :rules="[
+            {
+              required: true,
+              validator: (rule, value, callback) => validatePass(rule, value, callback, item),
+              trigger: 'blur',
+            },
+          ]"
         >
           <template v-if="item.val_type === 'int'">
             <el-input
@@ -295,7 +244,6 @@ defineExpose({
               type="number"
               :name="item.setting_id"
               :controls="false"
-              @focus="e => openKeyboard(e, item)"
             >
               <template v-if="labelUnitMap[item.setting_id]" #append>
                 {{ labelUnitMap[item.setting_id] }}
@@ -310,7 +258,6 @@ defineExpose({
               type="number"
               :name="item.setting_id"
               :controls="false"
-              @focus="e => openKeyboard(e, item)"
             >
               <template v-if="labelUnitMap[item.setting_id]" #append>
                 {{ labelUnitMap[item.setting_id] }}
@@ -318,18 +265,15 @@ defineExpose({
             </el-input>
           </template>
           <template v-else-if="item.val_type === 'enum'">
-            <el-input
+            <el-select
               v-model="formData[item.setting_id]"
               v-prevent-keyboard
-              style="width: 80%"
+              style="width: 80%;height:40px"
               placeholder="请选择"
               readonly
-              @focus="openModal"
             >
-              <template #append>
-                {{ labelUnitMap[item.setting_id] }}
-              </template>
-            </el-input>
+              <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]">
@@ -364,14 +308,6 @@ defineExpose({
           @close="keyboardVisible = false"
         />
       </Teleport>
-      <SelectModal
-        v-if="isModalOpen"
-        :options="options"
-        :selected-value="formData.loglevel"
-        placeholder="请选择"
-        @confirm="handleLogConfirm"
-        @cancel="handleLogCancel"
-      />
     </div>
   </transition>
 </template>

src/views/home/index.vue

@@ -126,7 +126,7 @@ const deviceType = computed(() => {
 
         <div class="middle">
           <!-- 选择消毒的等级 -->
-          <HomeLogLevel v-if="formulaStore.isDefaultFormula" />
+          <HomeLogLevel  />
           <!-- 开始消毒、停止消毒及状态区 -->
           <HomeOperation />
         </div>