home setting 表单增加验证

src/components/formula/HomeFormulaConfig.vue

@@ -43,6 +43,18 @@ watchEffect(() => {
  */
 const formulaConfigList = formulaStore.formulaConfigList
 const size = 'default'
+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>
@@ -68,6 +80,14 @@ const size = 'default'
         :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
@@ -77,7 +97,7 @@ const size = 'default'
             type="number"
             :name="item.setting_id"
             :controls="false"
-            :disabled="!item.is_editable"
+            :disabled="!(item.is_editable && !props.formulaNameVisible)"
           >
             <template v-if="labelUnitMap[item.setting_id]" #append>
               {{ labelUnitMap[item.setting_id] }}
@@ -92,7 +112,7 @@ const size = 'default'
             type="number"
             :name="item.setting_id"
             :controls="false"
-            :disabled="!item.is_editable"
+            :disabled="!(item.is_editable && !props.formulaNameVisible)"
           >
             <template v-if="labelUnitMap[item.setting_id]" #append>
               {{ labelUnitMap[item.setting_id] }}
@@ -100,18 +120,16 @@ const size = 'default'
           </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="请选择"
+            :disabled="!(item.is_editable && !props.formulaNameVisible)"
             readonly
-            :disabled="!item.is_editable"
           >
-            <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]" :disabled="!item.is_editable">

src/components/formula/SettingFormulaConfig.vue

@@ -1,9 +1,7 @@
 <script lang="ts" setup>
-import SelectModal from 'components/common/SelectModal/index.vue'
-import SoftKeyboard from 'components/common/SoftKeyboard/index.vue'
 import { formulaNameMap } from 'libs/constant'
 import { cloneDeep } from 'lodash'
-import { onMounted, ref, watch, watchEffect } from 'vue'
+import { ref, watchEffect } from 'vue'
 
 import { FtMessage } from '@/libs/message'
 import { compareJSON, convertValuesToInt } from '@/libs/utils'
@@ -13,9 +11,6 @@ const props = defineProps<{
   editable: boolean
 }>()
 const formulaStore = useFormulaStore()
-
-const targetInputRef = ref<HTMLInputElement | null>(null)
-
 /**
  * 当前表单数据
  * 不同模式下有不同的初始值：
@@ -28,36 +23,6 @@ const formData = ref<Record<string, any>>({
 })
 
 /**
- * 软键盘当前输入值
- */
-const inputValue = ref<string>('')
-
-/**
- * 软键盘是否可见
- */
-const keyboardVisible = ref(false)
-
-/**
- * 软键盘类型：'text' 或 'number'
- */
-const keyboardType = ref<'text' | 'number'>('number')
-
-/**
- * 软键盘组件引用
- */
-const softKeyboardRef = ref()
-
-/**
- * 当前聚焦的输入字段名称
- */
-const focusedInput = ref<string | null>(null)
-
-/**
- * 日志级别选项列表
- */
-const options = ref(formulaStore.logLevelOptions)
-
-/**
  * 标签单位映射表，用于显示各参数的单位
  */
 const labelUnitMap: Record<string, any> = formulaStore.labelUnitMap
@@ -72,50 +37,8 @@ watchEffect(() => {
   formData.value = cloneDeep(formulaStore.defaultFormulaInfo)
   formData.value = convertValuesToInt(formData.value)
 })
-/**
- * 模态框是否打开
- */
-const isModalOpen = ref(false)
 
 /**
- * 打开模态框
- */
-const openModal = () => {
-  isModalOpen.value = true
-}
-const currentFormulaItem = ref()
-/**
- * 监听软键盘输入值变化，更新表单数据
- * @param {string | number} newVal - 新的输入值
- */
-watch(inputValue, (newVal: string | number) => {
-  if (focusedInput.value) {
-    newVal = Number(newVal)
-    if (currentFormulaItem.value && newVal > currentFormulaItem.value.val_upper_limit) {
-      newVal = currentFormulaItem.value.val_upper_limit
-    }
-    formData.value[focusedInput.value] = newVal
-  }
-})
-/**
- * 监听表单数据变化，同步更新软键盘输入值
- * @param {Record<string, any>} newValue - 新的表单数据
- */
-watch(
-  formData,
-  (newValue) => {
-    if (focusedInput.value) {
-      inputValue.value = newValue[focusedInput.value].toString()
-    }
-  },
-  { deep: true },
-)
-const formRef = ref(null)
-// 挂载
-onMounted(() => {
-  formulaStore.getFormualDefaultData()
-})
-/**
  * 处理表单提交
  * 根据不同的type属性值执行不同的保存逻辑
  */
@@ -133,63 +56,24 @@ const handleSubmit = () => {
   }
   formulaStore.getFormualDefaultData()
 }
-/**
- * 打开软键盘
- * @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 - 输入值
- */
-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 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>
   <div class="formula-form">
     <el-form
-      ref="formRef"
       :disabled="!props.editable"
       :model="formData"
       label-width="auto"
@@ -202,6 +86,14 @@ const size = 'default'
         :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
@@ -212,7 +104,6 @@ const size = 'default'
             :name="item.setting_id"
             :controls="false"
             :disabled="!props.editable"
-            @focus="e => openKeyboard(e, item)"
           >
             <template v-if="labelUnitMap[item.setting_id]" #append>
               {{ labelUnitMap[item.setting_id] }}
@@ -228,7 +119,6 @@ const size = 'default'
             :name="item.setting_id"
             :controls="false"
             :disabled="!props.editable"
-            @focus="e => openKeyboard(e, item)"
           >
             <template v-if="labelUnitMap[item.setting_id]" #append>
               {{ labelUnitMap[item.setting_id] }}
@@ -236,19 +126,15 @@ const size = 'default'
           </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
-            :disabled="!props.editable"
-            @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>
       </el-form-item>
     </el-form>
@@ -261,26 +147,6 @@ const size = 'default'
         </div>
       </slot>
     </div>
-    <Teleport to="body">
-      <SoftKeyboard
-        ref="softKeyboardRef"
-        v-model="inputValue"
-        :is-visible="keyboardVisible"
-        :keyboard-type="keyboardType"
-        :target-input="targetInputRef"
-        @confirm="handleConfirm"
-        @update-keyboard-visible="visible => (keyboardVisible = visible)"
-        @close="keyboardVisible = false"
-      />
-    </Teleport>
-    <SelectModal
-      v-if="isModalOpen"
-      :options="options"
-      :selected-value="formData.loglevel"
-      placeholder="请选择"
-      @confirm="handleLogConfirm"
-      @cancel="handleLogCancel"
-    />
   </div>
 </template>
 

src/components/home/HomeSetting.vue

@@ -245,6 +245,7 @@ const settingWidth = computed(() => {
           @click="onClose"
         />
         <BtButton
+          v-if="!deviceState"
           bg-color="#1989fa"
           button-text="确认"
           border-radius="5px"

src/components/home/config.vue

@@ -13,7 +13,6 @@ import { useHomeStore } from '@/stores/homeStore'
  * 配方选择页面组件
  * @description 负责处理配方选择逻辑、设备状态判断及界面交互
  */
-
 // 状态管理
 const formulaStore = useFormulaStore()
 const homeStore = useHomeStore()