feat：切换协议版本

frontend/src/components/protocol/CollapseTable.vue

@@ -3,19 +3,19 @@
     <div class="container">
       <div class="left">
         <div class="mr-4">协议版本</div>
-        <el-select v-model="currentVersion">
+        <el-select v-model="currentVersion" @change="changeProtocolVersion">
           <!-- TODO: 选择协议版本 -->
           <el-option
-              v-for="option in options"
-              :key="option.value"
-              :label="option.label"
-              :value="option.value"
+            v-for="option in options"
+            :key="option.value"
+            :label="option.label"
+            :value="option.value"
           >
-
           </el-option>
         </el-select>
       </div>
       <div class="right">
+        <el-button>上传原始文件</el-button>
         <el-button @click="addCmd = true">新增指令</el-button>
         <el-button>导出协议</el-button>
       </div>
@@ -25,13 +25,13 @@
 
     <el-collapse class="mt-4">
       <el-collapse-item 
-        v-for="cmd in props.info[props.name]" 
+        v-for="cmd in cmdInfos" 
         :title="cmd.cmd_name + ' ' + cmd.cmd_explain + ' ' + cmd.cmd_type">
-        <protocol-table 
-          v-if="props.protocolCmd !== undefined" 
+        <protocol-table
+          v-if="fieldInfos !== undefined" 
           :cmd-name="cmd.cmd_name" 
           :cmd-type="cmd.cmd_type"
-          :message="props.protocolCmd[cmd.cmd_name]" />
+          :message="fieldInfos[cmd.cmd_name]" />
       </el-collapse-item>
     </el-collapse>
 
@@ -75,12 +75,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref,onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from "element-plus";
 import { ProtocolInit } from "@/dao/protocol"
 import ProtocolTable from "./ProtocolTable.vue";
 import type { DeviceProtocolResponse, ProtocolCmdResponse } from './types';
 import { useProtocolVersionStore } from '@/stores/allProtocolVersion';
+import axios from 'axios';
 
 const addCmd = ref<boolean>(false)
 const currentVersion = ref('')
@@ -135,10 +136,18 @@ function Init(){
 }
 
 const store = useProtocolVersionStore()
-onMounted(() => {
+const cmdInfos = ref()
+const fieldInfos = ref<Record<string, any>>({})
+// 需要延时一下，不然 store 里面的数据可能没有被赋值上去，组件就被渲染了
+onMounted(() => setTimeout(() => {
   // 判断是否需要初始化
   let flag = true
 
+  cmdInfos.value = props.info[props.name]
+  // 将 props.protocolCmd 转成 Record<string, any> 类型, 统一类型，方便后面过来的数据操作
+  for (const [key, value] of Object.entries(props.protocolCmd)){
+    fieldInfos.value[key] = value
+  } 
   for (let protocolVersion of store.protocolVersions){
     if (protocolVersion.protocol_name === props.name) {
       let version_paths = JSON.parse(protocolVersion.version_paths)
@@ -164,7 +173,30 @@ onMounted(() => {
   if (flag){
     Init()
   }
-})
+}, 500))
+
+// 修改协议版本
+const changeProtocolVersion = () => {
+  axios.post('/api/protocol_version_manage/change_protocol_version/',
+  {
+    version: currentVersion.value,
+    protocol_name: props.name,
+  })
+  .then((res) => {
+    const { cmds } = res.data 
+    cmdInfos.value = cmds
+    // 转成和上面 ProtocolCmdResponse 一样的类型
+    for (let cmd of cmds) {
+      const { fields, ...info} = cmd
+      fieldInfos.value[info.cmd_name] = fields
+    }
+    
+  })
+  .catch((err) => {
+    console.log(err);
+  })
+}
+
 </script>
 
 <style>

frontend/src/components/protocol/KitCollapse.vue

@@ -47,7 +47,7 @@ function getProtocolCmd() {
   })
 }
 
-onMounted(async () => {
+onMounted(() => {
   getDeviceProtocol()
   getProtocolCmd()
 })

frontend/src/components/protocol/types.ts

@@ -59,9 +59,14 @@ interface ProtocolCmdResponse {
   fields: any[];
 }
 
+interface ChangeCmdInfo extends ProtocolInfo {
+  version: string
+  fields: any[]
+}
 
 export type {
   DeviceProtocolResponse,
   ProtocolCmdResponse,
   CmdInfo,
+  ChangeCmdInfo
 }
\ No newline at end of file

frontend/src/dao/device.ts

@@ -3,7 +3,7 @@ import axios from "axios"
 // const baseURL = 'http://192.168.0.214:8000/op' 
 
 export function DeviceProtocol() {
-    return axios.get('/api/dev_cmd_name_poll').then(
+    return axios.get('/api/dev_cmd_name_poll/').then(
         function (response) {
             return response.data
         }
@@ -11,7 +11,7 @@ export function DeviceProtocol() {
 }
 
 export function ProtocolCmd() {
-    return axios.get('/api/all_dev_cmd_define').then(
+    return axios.get('/api/all_dev_cmd_define/').then(
         function (response) {
             return response.data
         }
@@ -27,7 +27,7 @@ export function EditProtocolCmd(id: number, params: any) {
 }
 
 export function DeleteProtocolCmd(id: number) {
-    return axios.delete('/api/all_dev_cmd_define/' + id).then(
+    return axios.delete('/api/all_dev_cmd_define/' + id + '/').then(
         function (response) {
             return response.data
         }