解决配方第一行点击不能选中的bug

去掉取消按钮

src/components/formula/FormulaConfig.vue

@@ -316,9 +316,9 @@ const openKeyboard = (e: any, item: Formula.FormulaItem) => {
 /**
  * 取消操作，重置配方数据
  */
-const handleCancel = () => {
-  formulaStore.initFormulaData()
-}
+// const handleCancel = () => {
+//   formulaStore.initFormulaData()
+// }
 
 /**
  * 恢复默认设置
@@ -456,9 +456,6 @@ defineExpose({
             <el-button v-if="type === 'setting'" class="config-btn" @click="handleResetDefault">
               恢复默认值
             </el-button>
-            <el-button v-else class="config-btn" @click="handleCancel">
-              取消
-            </el-button>
             <el-button type="primary" class="config-btn" @click="handleSubmit">
               确定
             </el-button>

src/components/formula/FormulaTable.vue

@@ -31,7 +31,7 @@ onMounted(() => {
 watchEffect(() => {
   recipes.value = formulaStore.formulaList
   if (formulaStore.formulaList) {
-    selectedIndex.value = formulaStore.selectedIndex || formulaStore.formulaList.length - 1
+    selectedIndex.value = formulaStore.selectedIndex || formulaStore.formulaList.length
   }
 })
 
@@ -45,8 +45,8 @@ const initFormulaList = () => {
 }
 
 const selectRecipe = (item: Formula.FormulaItem, index: number) => {
-  formulaStore.updateSelectedIndex(index)
   selectedIndex.value = selectedIndex.value === index ? null : index
+  formulaStore.updateSelectedIndex(index)
   console.log('selectedIndex--', selectedIndex)
   item = convertValuesToInt(item) as Formula.FormulaItem
   formulaStore.updateSelectedFormulaData(item)
@@ -109,7 +109,7 @@ const deleteRecipe = (item: Formula.FormulaItem) => {
     <ul class="recipe-list">
       <li
         v-for="(item, index) in recipes"
-        :key="index"
+        :key="index + 1"
         :class="{ selected: selectedIndex === index }"
         @click="selectRecipe(item, index)"
       >
@@ -122,7 +122,7 @@ const deleteRecipe = (item: Formula.FormulaItem) => {
             删除
           </el-button>
           <span v-if="selectedIndex === index" class="selected-icon">
-            <i class="fa fa-check-circle" />
+            <el-icon><Check /></el-icon> <!-- 使用组件形式 -->
           </span>
         </div>
       </li>

src/stores/formulaStore.ts

@@ -46,7 +46,7 @@ export const useFormulaStore = defineStore('formula', () => {
   const formulaList = ref<Formula.FormulaItem[]>([])
   const loglevel = ref<string>('1')
   const flip = ref(true)
-  const selectedIndex = ref(0)
+  const selectedIndex = ref<number | null>(0)
 
   watch(defaultFormulaInfo, (newVal) => {
     currentSelectedFormulaInfo.value = cloneDeep(newVal)