配方bug

src/components/formula/FormulaConfig.vue

@@ -6,7 +6,7 @@ import { ElMessage } from 'element-plus'
 import { formulaNameMap } from 'libs/constant'
 import { cloneDeep } from 'lodash'
 import { useHomeStore } from 'stores/homeStore'
-import { computed, inject, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, inject, nextTick, onMounted, ref, watch, watchEffect } from 'vue'
 
 import { FtMessage } from '@/libs/message'
 import { compareJSON, convertValuesToInt, convertValuesToString } from '@/libs/utils'
@@ -100,12 +100,14 @@ const labelUnitMap: Record<string, any> = {
 }
 
 const currentFormulaItem = ref()
-
+onMounted(() => {
+  initFormulaConfig()
+  registerGrandsonMethods && registerGrandsonMethods({ getFormData })
+})
 /**
  * 组件挂载时注册方法供父组件调用
  */
-onMounted(() => {
-  initFormulaConfig()
+watchEffect(() => {
   if (props.type === 'home') {
     formData.value = cloneDeep(formulaStore.selectedFormulaInfo) || cloneDeep(formulaStore.defaultFormulaInfo)
   }
@@ -123,10 +125,6 @@ onMounted(() => {
   isFlip.value = formulaStore.flip
   // 后端给的数据类型是字符串型，前端需要的是int型，后端开发说（赵贺）后端不好转换，由前端进行转换.
   formData.value = convertValuesToInt(formData.value)
-  registerGrandsonMethods && registerGrandsonMethods({ getFormData })
-})
-watch(() => formulaStore.currentSelectedFormulaInfo, () => {
-  formData.value = cloneDeep(formulaStore.currentSelectedFormulaInfo)
 })
 const initFormulaConfig = () => {
   if (!formulaStore.formulaList.length) {
@@ -468,6 +466,22 @@ defineExpose({
               </template>
             </el-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"
+              :disabled="!item.is_visible_in_setting_page"
+              @focus="e => openKeyboard(e, item)"
+            >
+              <template v-if="labelUnitMap[item.setting_id]" #append>
+                {{ labelUnitMap[item.setting_id] }}
+              </template>
+            </el-input>
+          </template>
           <template v-else-if="item.val_type === 'enum'">
             <el-input
               v-model="formData[item.setting_id]"

src/components/formula/FormulaTable.vue

@@ -10,13 +10,11 @@ import { convertValuesToInt } from '@/libs/utils'
 import { useFormulaStore } from '@/stores/formulaStore'
 
 const formulaStore = useFormulaStore()
-const selectedIndex = ref<number | null>(formulaStore.selectedIndex)
-const recipes = ref<Formula.FormulaItem[]>([])
 const currentFormula = ref<Formula.FormulaItem>(formulaStore.currentSelectedFormulaInfo)
 
 // 移除列表的选中
 const selectedIndexRest = async () => {
-  selectedIndex.value = null
+  formulaStore.updateSelectedIndex(null)
   console.log('子组件方法被调用')
 }
 
@@ -28,36 +26,33 @@ defineExpose({
 onMounted(() => {
   initFormulaList()
 })
-
-watch(() => formulaStore.formulaList.length, () => {
-  recipes.value = formulaStore.formulaList
-  if (formulaStore.formulaList && formulaStore.formulaList.length > 0) {
-    selectedIndex.value = formulaStore.formulaList.length - 1
+watch(() => formulaStore.selectedIndex, () => {
+  if (formulaStore.selectedIndex == null) {
+    if (formulaStore.formulaList && formulaStore.formulaList.length > 0) {
+      formulaStore.updateSelectedIndex(formulaStore.formulaList.length - 1)
+      const currentIndex: number | null = formulaStore.selectedIndex
+      const selectItem: Formula.FormulaItem = formulaStore.formulaList[currentIndex]
+      const item = convertValuesToInt(selectItem) as Formula.FormulaItem
+      formulaStore.updateSelectedFormulaData(item)
+    }
+    else {
+      const formData = cloneDeep(formulaStore.resetFormulaInfo)
+      formulaStore.updateSelectedFormulaData(convertValuesToInt(formData) as Formula.FormulaItem)
+    }
   }
   else {
-    selectedIndex.value = null
-  }
-})
-watch(() => selectedIndex.value, () => {
-  if (selectedIndex.value != null) {
-    const currentIndex: number = selectedIndex.value
-    const selectItem: Formula.FormulaItem = recipes.value[currentIndex]
+    const currentIndex: number = formulaStore.selectedIndex
+    const selectItem: Formula.FormulaItem = formulaStore.formulaList[currentIndex]
     const item = convertValuesToInt(selectItem) as Formula.FormulaItem
     formulaStore.updateSelectedFormulaData(item)
   }
-  else {
-    const formData = cloneDeep(formulaStore.resetFormulaInfo)
-    formulaStore.updateSelectedFormulaData(convertValuesToInt(formData) as Formula.FormulaItem)
-  }
 })
 const initFormulaList = () => {
   formulaStore.initFormulaList()
-  recipes.value = formulaStore.formulaList as Formula.FormulaItem[]
 }
 const selectRecipe = (item: Formula.FormulaItem, index: number) => {
-  selectedIndex.value = index
   formulaStore.updateSelectedIndex(index)
-  console.log('selectedIndex--', selectedIndex.value)
+  formulaStore.updateSelectedIndex(index)
   item = convertValuesToInt(item) as Formula.FormulaItem
   formulaStore.updateSelectedFormulaData(item)
 }
@@ -106,7 +101,6 @@ const deleteRecipe = (item: Formula.FormulaItem) => {
       }
       syncSendCmd(delParams).then(() => {
         FtMessage.success('操作成功')
-        formulaStore.updateSelectedIndex(0)
         formulaStore.initFormulaList()
       })
     }
@@ -115,12 +109,12 @@ const deleteRecipe = (item: Formula.FormulaItem) => {
 </script>
 
 <template>
-  <div v-if="recipes.length" class="recipe-management">
+  <div v-if="formulaStore.formulaList.length" class="recipe-management">
     <ul class="recipe-list">
       <li
-        v-for="(item, index) in recipes"
+        v-for="(item, index) in formulaStore.formulaList"
         :key="index"
-        :class="{ selected: selectedIndex === index }"
+        :class="{ selected: formulaStore.selectedIndex === index }"
         @click="selectRecipe(item, index)"
       >
         <span class="formula-name">{{ item.name }}</span>

src/stores/formulaStore.ts

@@ -30,7 +30,7 @@ const createDefaultFormulaInfo = (): Formula.FormulaItem => ({
   stoped_gs: 300,
   stoped_humi: 85,
   stoped_satur: 85,
-  name: '默认配置',
+  name: '',
 })
 // 清空配方函数
 const createResetFormulaInfo = (): Formula.FormulaItem => ({
@@ -62,7 +62,7 @@ export const useFormulaStore = defineStore('formula', () => {
   const formulaList = ref<Formula.FormulaItem[]>([])
   const loglevel = ref<string>('1')
   const flip = ref(true)
-  const selectedIndex = ref<number | null>(0) // 左侧列表选中值 从0开始
+  const selectedIndex = ref<number | null>(null) // 左侧列表选中值 从0开始
 
   watch(
     defaultFormulaInfo,
@@ -87,7 +87,7 @@ export const useFormulaStore = defineStore('formula', () => {
         updateLogLevels(item)
       }
     })
-    formulaMap.name = '默认配置'
+    formulaMap.name = ''
     return formulaMap as Formula.FormulaItem
   }
 
@@ -182,15 +182,18 @@ export const useFormulaStore = defineStore('formula', () => {
       const res = await syncSendCmd(params)
       if (res.rely) {
         formulaList.value = res.rely
-        if (res.rely.length) {
+        if (res.rely.length > 0) {
           console.log('selectedIndex.value--', selectedIndex.value)
-          currentSelectedFormulaInfo.value = selectedIndex.value
-            ? res.rely[selectedIndex.value]
-            : res.rely[res.rely.length - 1]
+          currentSelectedFormulaInfo.value = res.rely[res.rely.length - 1]
+          selectedIndex.value = res.rely.length - 1
+        }
+        else {
+          selectedIndex.value = null
         }
       }
       else {
         formulaList.value = []
+        selectedIndex.value = null
       }
     }
     catch (error) {
@@ -242,7 +245,7 @@ export const useFormulaStore = defineStore('formula', () => {
     flip.value = data
   }
 
-  const updateSelectedIndex = (index: number) => {
+  const updateSelectedIndex = (index: number | null) => {
     selectedIndex.value = index
   }