配方列表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, watchEffect } from 'vue'
+import { computed, inject, nextTick, onMounted, ref, watch } from 'vue'
 
 import { FtMessage } from '@/libs/message'
 import { compareJSON, convertValuesToInt, convertValuesToString } from '@/libs/utils'
@@ -25,7 +25,7 @@ const props = defineProps<{
 }>()
 const homeStore = useHomeStore()
 
-const nameLeng = 10
+const nameLength = 10
 
 const formulaStore = useFormulaStore()
 
@@ -105,26 +105,7 @@ const currentFormulaItem = ref()
  * 组件挂载时注册方法供父组件调用
  */
 onMounted(() => {
-  registerGrandsonMethods && registerGrandsonMethods({ getFormData })
-})
-/**
- * 模态框是否打开
- */
-const isModalOpen = ref(false)
-
-/**
- * 打开模态框
- */
-const openModal = () => {
-  isModalOpen.value = true
-}
-const disinfectionState = ref(homeStore.disinfectionState) // 消毒状态
-/**
- * 监听配方配置列表和表单数据变化
- * 根据不同的type属性值初始化表单数据
- */
-watchEffect(() => {
-  formulaConfigList.value = formulaStore.formulaConfigList
+  initFormulaConfig()
   if (props.type === 'home') {
     formData.value = cloneDeep(formulaStore.selectedFormulaInfo) || cloneDeep(formulaStore.defaultFormulaInfo)
   }
@@ -136,15 +117,36 @@ watchEffect(() => {
       formData.value = cloneDeep(formulaStore.resetFormulaInfo)
     }
     else {
-      formData.value = cloneDeep(formulaStore.currentSelectedFormulaInfo) || cloneDeep(formulaStore.defaultFormulaInfo)
+      formData.value = cloneDeep(formulaStore.currentSelectedFormulaInfo)
     }
   }
   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) {
+    formulaStore.getFormualDefaultData()
+    console.log(formulaStore.formulaConfigList)
+  }
+}
+/**
+ * 模态框是否打开
+ */
+const isModalOpen = ref(false)
 
 /**
+ * 打开模态框
+ */
+const openModal = () => {
+  isModalOpen.value = true
+}
+const disinfectionState = ref(homeStore.disinfectionState) // 消毒状态
+/**
  * 监听软键盘输入值变化，更新表单数据
  * @param {string | number} newVal - 新的输入值
  */
@@ -158,7 +160,7 @@ watch(inputValue, (newVal: string | number) => {
       formData.value[focusedInput.value] = newVal
     }
     else {
-      if (newVal && newVal.toString().length > nameLeng) {
+      if (newVal && newVal.toString().length > nameLength) {
         inputValue.value = formData.value[focusedInput.value]
         return
       }

src/components/formula/FormulaTable.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { syncSendCmd } from 'apis/system'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { cloneDeep } from 'lodash'
 import { onMounted, ref, watch } from 'vue'
 
 import { FtMessage } from '@/libs/message'
@@ -11,7 +12,7 @@ import { useFormulaStore } from '@/stores/formulaStore'
 const formulaStore = useFormulaStore()
 const selectedIndex = ref<number | null>(formulaStore.selectedIndex)
 const recipes = ref<Formula.FormulaItem[]>([])
-const currectFormula = ref<Formula.FormulaItem>()
+const currentFormula = ref<Formula.FormulaItem>(formulaStore.currentSelectedFormulaInfo)
 
 // 移除列表的选中
 const selectedIndexRest = async () => {
@@ -44,6 +45,10 @@ watch(() => selectedIndex.value, () => {
     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 = () => {
   if (formulaStore.formulaList && formulaStore.formulaList.length) {
@@ -65,7 +70,7 @@ const onStartFormula = (item: Formula.FormulaItem) => {
   formulaStore.updateSelectedFormulaData(item)
   // 执行配方时做设备的状态检查
   FtMessageBox.warning('请确认是否使用此配方进行消毒？').then(() => {
-    currectFormula.value = item
+    currentFormula.value = item
     if (item.formula_id) {
       const params = {
         className: 'DisinfectionCtrlServiceExt',
@@ -122,7 +127,7 @@ const deleteRecipe = (item: Formula.FormulaItem) => {
         :class="{ selected: selectedIndex === index }"
         @click="selectRecipe(item, index)"
       >
-        <span class="formula-name">{{ item.name  }}</span>
+        <span class="formula-name">{{ item.name }}</span>
         <div class="actions">
           <el-button class="view-button" @click.stop="onStartFormula(item)">
             执行配方

src/stores/formulaStore.ts

@@ -56,13 +56,13 @@ export const useFormulaStore = defineStore('formula', () => {
   const defaultFormulaInfo = ref<Formula.FormulaItem>(createDefaultFormulaInfo())
   const resetFormulaInfo = ref<Formula.FormulaItem>(createResetFormulaInfo())
   const pressurOptionList = ref<string[]>(['10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%'])
-  const currentSelectedFormulaInfo = ref<Formula.FormulaItem>(cloneDeep(defaultFormulaInfo.value))
-  const selectedFormulaInfo = ref<Formula.FormulaItem | null>(cloneDeep(defaultFormulaInfo.value))
+  const currentSelectedFormulaInfo = ref<Formula.FormulaItem>(cloneDeep(defaultFormulaInfo.value)) // 当前列表选中的配方信息
+  const selectedFormulaInfo = ref<Formula.FormulaItem | null>(cloneDeep(defaultFormulaInfo.value)) // 选中执行的配方信息
   const formulaConfigList = ref<Formula.FormulaConfig[]>([])
   const formulaList = ref<Formula.FormulaItem[]>([])
   const loglevel = ref<string>('1')
   const flip = ref(true)
-  const selectedIndex = ref<number | null>(0)
+  const selectedIndex = ref<number | null>(0) // 左侧列表选中值 从0开始
 
   watch(
     defaultFormulaInfo,