删除配方

src/components/Formula.vue

@@ -15,16 +15,14 @@
             : 'content_wrap'
         "
       >
-        <div
-          class="line"
-          v-for="item in formulaStore?.formulaList"
-          :key="item.id"
-        >
+        <!-- v-for="item in formulaStore?.formulaList"
+          :key="item.id" -->
+        <div class="line">
           <div class="username">{{ item?.formula_id }}</div>
           <div class="btns">
-            <div class="btn" @click="delModalShow">删除</div>
-            <div class="btn mg" @click="showSetting">配置</div>
-            <div class="btn" @click="runConfig">执行</div>
+            <div class="btn" @click="delModalShow(item)">删除</div>
+            <div class="btn mg" @click="showSetting(item)">配置</div>
+            <div class="btn" @click="runConfig(item)">执行</div>
           </div>
         </div>
         <svg
@@ -120,13 +118,15 @@ import AddPreModal from 'cpns/dialogs/AddPreModal'
 import PreSetting from './PreSetting'
 import { getAllFormulaJSON } from '@/mock/command'
 import { useWebSocketStore, useFormulaStore } from '@/store'
+import { startFormulaJSON } from '@/mock/command'
 
 const webSocketStore = useWebSocketStore()
 const formulaStore = useFormulaStore()
 
 const delPreModalVisible = ref(false)
 
-const delModalShow = () => {
+const delModalShow = item => {
+  formulaStore.updateCurrentFormula(item)
   delPreModalVisible.value = true
 }
 
@@ -147,7 +147,8 @@ const hideAddNewPreModal = () => {
 
 const isSettingVisible = ref(false)
 
-const showSetting = () => {
+const showSetting = item => {
+  formulaStore.updateCurrentFormula(item)
   isSettingVisible.value = true
 }
 
@@ -156,12 +157,14 @@ const hideSettingModal = () => {
 }
 
 // 执行配置
-const runConfig = () => {
-  console.log('run config')
+const runConfig = item => {
+  formulaStore.updateCurrentFormula(item)
+  webSocketStore.sendCommandMsg(startFormulaJSON(item.id))
+  console.log('run config', item)
 }
 
 onMounted(() => {
-  webSocketStore.sendCommandMsg(getAllFormulaJSON)
+  // webSocketStore.sendCommandMsg(getAllFormulaJSON)
 })
 </script>
 

src/components/dialogs/AddPreModal.vue

@@ -55,7 +55,7 @@ const addNewRecord = () => {
   justify-content: center;
   .modal_content {
     width: 476px;
-    height: 414px;
+    height: 314px;
     border-radius: 16px;
     background: #ffffff;
     position: relative;

src/components/dialogs/DelPreModal.vue

@@ -22,7 +22,7 @@
         <span class="red">确定要删除当前预设吗？</span>
       </p>
       <div class="btns">
-        <div class="ok style-btn">确定</div>
+        <div class="ok style-btn" @click="delThisPre">确定</div>
         <div class="cancel style-btn" @click="handleCancel">取消</div>
       </div>
     </div>
@@ -30,6 +30,11 @@
 </template>
 
 <script setup>
+import { useFormulaStore, useWebSocketStore } from '@/store'
+import { delFormulaJSON, getAllFormulaJSON } from '@/mock/command'
+
+const formulaStore = useFormulaStore()
+const webSocketStore = useWebSocketStore()
 const props = defineProps({
   hideDelModal: {
     type: Function,
@@ -39,6 +44,16 @@ const props = defineProps({
 const handleCancel = () => {
   props.hideDelModal()
 }
+
+const delThisPre = () => {
+  if (formulaStore.currentFormula) {
+    webSocketStore.sendCommandMsg(
+      delFormulaJSON(formulaStore.currentFormula?.id),
+    )
+    webSocketStore.sendCommandMsg(getAllFormulaJSON)
+  }
+  props.hideDelModal()
+}
 </script>
 
 <style lang="scss" scoped>

src/store/modules/formula.js

@@ -5,10 +5,14 @@ export const useFormulaStore = defineStore({
   state: () => {
     return {
       formulaList: [],
+      currentFormula: {},
     }
   },
   // actions
   actions: {
+    updateCurrentFormula(currentFormula) {
+      this.currentFormula = currentFormula
+    },
     updateFormulaList(formulaList) {
       this.formulaList = formulaList
     },