mod（接上

frontend/src/components/protocol/KitCollapse.vue

@@ -5,11 +5,11 @@
         <template #title>{{ item }}</template>
         <div style="margin: auto; width: 90%">
           <collapse-table 
-            v-if="protocolCmd !== undefined" 
+            v-if="props.protocolCmd !== undefined" 
             class="mt-4" 
-            :info="deviceProtocol!" 
+            :info="props.deviceProtocol!" 
             :name="item" 
-            :protocol-cmd="protocolCmd!" />
+            :protocol-cmd="props.protocolCmd!" />
         </div>
       </el-collapse-item>
     </el-collapse>
@@ -17,39 +17,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, watch } from 'vue'
 import CollapseTable from "./CollapseTable.vue";
-import { DeviceProtocol, ProtocolCmd } from "@/dao/device";
 import type { DeviceProtocolResponse, ProtocolCmdResponse } from './types';
 
-const protocol_names = ref<string[]>([]);
-const deviceProtocol = ref<DeviceProtocolResponse>()
-const protocolCmd = ref<ProtocolCmdResponse>()
-
-function getDeviceProtocol() {
-  DeviceProtocol()
-  .then((res) => {
-    deviceProtocol.value = res
-    protocol_names.value = res.fields
-  })
-  .catch((err) => {
-    console.log(err)
-  })
+type propsType = {
+  deviceProtocol: DeviceProtocolResponse,
+  protocolCmd: ProtocolCmdResponse
 }
+const props = defineProps<propsType>()
 
-function getProtocolCmd() {
-  ProtocolCmd()
-  .then((res) => {
-    protocolCmd.value = res
-  })
-  .catch((err) => {
-    console.log(err);
-  })
-}
-
-onMounted(() => {
-  getDeviceProtocol()
-  getProtocolCmd()
+const protocol_names = ref<string[]>([]);
+watch(() => props.deviceProtocol, (val) => {
+  let { fields } = val
+  protocol_names.value = fields
 })
 </script>
 

frontend/src/views/protocol/protocol.vue

@@ -6,8 +6,11 @@
     </div>
   </div>
 
-  <!-- 下拉列表 -->
-  <kit-collapse class="mt-4"></kit-collapse>
+  <!-- 折叠面板 -->
+  <kit-collapse
+    class="mt-4"
+    :device-protocol="deviceProtocol!"
+    :protocol-cmd="protocolCmd!" />
 
   <el-dialog title="新增协议" v-model="isShow">
     <el-form>
@@ -27,32 +30,45 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import KitCollapse from "@/components/protocol/KitCollapse";
+import { ref, onBeforeMount } from 'vue';
+import KitCollapse from '@/components/protocol/KitCollapse.vue';
 import { GetProtocolVersion, GetCurrentVersion } from '@/dao/protocol';
 import { useProtocolVersionStore } from '@/stores/allProtocolVersion';
+import { DeviceProtocol, ProtocolCmd } from "@/dao/device";
+import type { DeviceProtocolResponse, ProtocolCmdResponse } from '@/components/protocol/types';
 
 const isShow = ref<boolean>(false)
 const formLabelWidth = '140px'
 const store = useProtocolVersionStore()
 
-onMounted(() => {
+
+onBeforeMount(() => {
   GetProtocolVersion()
   .then(res => {
     store.protocolVersions.push(...res)
   })
-
   GetCurrentVersion()
   .then(res => {
     store.currentVersions = res    
   })
+  DeviceProtocol()
+  .then((res) => {
+    deviceProtocol.value = res
+  })
+  ProtocolCmd()
+  .then((res) => {
+    protocolCmd.value = res
+  })
 })
 
 const protocolName = ref<string>('')
 const addProtocol = () => {
   isShow.value = false
-  console.log(protocolName.value)
+  deviceProtocol.value!.fields.push(protocolName.value)
+  deviceProtocol.value![protocolName.value] = []
 }
+const deviceProtocol = ref<DeviceProtocolResponse>()
+const protocolCmd = ref<ProtocolCmdResponse>()
 </script>
 
 <style scoped>