refactor: 重构 修改数据后直接展示

frontend/src/components/device_communication/DeviceInfoCard.vue

 <template>
-	<el-descriptions :title="props.deviceInfo.device_name" :column=1>
+	<el-descriptions :title="deviceInfo.device_name" :column=1>
 		<template #extra>
 			<el-button type="danger" size="small" @click="del">delete</el-button>
 			<el-button type="primary" size="small" @click="dialogFormVisible = true">Edit</el-button>
 		</template>
-		<el-descriptions-item label="协议名">{{ props.deviceInfo.protocol_name }}</el-descriptions-item>
+		<el-descriptions-item label="协议名">{{ deviceInfo.protocol_name }}</el-descriptions-item>
 		<el-descriptions-item label="通信参数" :column=3>
-      <span> {{ props.deviceInfo.communicate_mode }} </span>
+      <span> {{ deviceInfo.communicate_mode }} </span>
 			<span v-if="isTcp">
-				<span ml-9> {{ props.deviceInfo.tcp_ip }} </span>
-				<span ml-9> {{ props.deviceInfo.tcp_port }} </span>
+				<span ml-9> {{ deviceInfo.tcp_ip }} </span>
+				<span ml-9> {{ deviceInfo.tcp_port }} </span>
       </span>
       <span v-else>
-				<span ml-9> {{ props.deviceInfo.udp_ip_src}} </span>
-				<span ml-9> {{ props.deviceInfo.udp_port_src }} </span>
-				<span ml-9> {{ props.deviceInfo.udp_ip_dst }} </span>
-				<span ml-9> {{ props.deviceInfo.udp_port_dst }} </span>
+				<span ml-9> {{ deviceInfo.udp_ip_src}} </span>
+				<span ml-9> {{ deviceInfo.udp_port_src }} </span>
+				<span ml-9> {{ deviceInfo.udp_ip_dst }} </span>
+				<span ml-9> {{ deviceInfo.udp_port_dst }} </span>
       </span>
 		</el-descriptions-item>
 		<el-descriptions-item label="性能参数">
@@ -28,8 +28,9 @@
 
 	<edit-dialog 
     :is-show="dialogFormVisible" 
-    :device-info="props.deviceInfo"
+    :device-info="deviceInfo"
     @close="dialogFormVisible = false" 
+    @change-device-info="changeDeviceInfo"
     type="edit" />
 </template>
 
@@ -45,19 +46,22 @@ type propType = {
 	deviceInfo: DeviceInfo
 }
 const props = defineProps<propType>();
+const deviceInfo = ref<DeviceInfo>(props.deviceInfo)
 const checked_performance_fields = ref<string[]>([])
 const isTcp = ref<boolean>(true)
+// performance_fields tag
+const dialogFormVisible = ref(false)
 
 onMounted(() => {
-	isTcp.value = props.deviceInfo.communicate_mode.toUpperCase().includes('TCP'.toUpperCase())
-	checked_performance_fields.value = JSON.parse(props.deviceInfo.performance_fields!)
-  props.deviceInfo.checked_performance_fields = checked_performance_fields.value
+	isTcp.value = deviceInfo.value.communicate_mode.toUpperCase().includes('TCP'.toUpperCase())
+	checked_performance_fields.value = JSON.parse(deviceInfo.value.performance_fields!)
+  deviceInfo.value.checked_performance_fields = checked_performance_fields.value
 })
 
 const emit = defineEmits(['deleteDeviceInfo'])
 const del = () => {
-	let station_id = props.deviceInfo.station_id
-	let id = props.deviceInfo.id
+	let station_id = deviceInfo.value.station_id
+	let id = deviceInfo.value.id
 	axios.delete('/api/device_communication/communicate/' + id + '/')
 	.then((res) => {
 		emit('deleteDeviceInfo', { station_id, id })
@@ -68,8 +72,13 @@ const del = () => {
 	})
 }
 
-// performance_fields tag
-const dialogFormVisible = ref(false)
+const changeDeviceInfo = (device_info: DeviceInfo) => {
+  console.log('changeDeviceInfo')
+  
+  deviceInfo.value = device_info
+  checked_performance_fields.value = JSON.parse(device_info.performance_fields!)
+}
+
 
 </script>
 

frontend/src/components/device_communication/EditDialog.vue

@@ -90,7 +90,7 @@ type porpsType = {
   type: string,
 }
 const props = defineProps<porpsType>()
-const emit = defineEmits(['close'])
+const emit = defineEmits(['close', 'changeDeviceInfo'])
 const handleClose = () => {
   emit('close')
   formRef.value!.resetFields()
@@ -304,6 +304,7 @@ const submit = () => {
       })
   }
   emit('close')
+  emit('changeDeviceInfo', data)
 }
 
 

frontend/src/views/DeviceCommunication.vue

@@ -22,7 +22,11 @@
     </el-tab-pane>
   </el-tabs>
 
-  <edit-dialog :is-show="isShow" @close="isShow = false" type="add" />
+  <edit-dialog 
+    :is-show="isShow" 
+    @close="isShow = false" 
+    @change-device-info="changeDeviceInfo"
+    type="add" />
 </template>
 
 <script lang="ts" setup>
@@ -85,8 +89,13 @@ const deleteDeviceInfo = (params: param) => {
 
 const isShow = ref(false)
 const addDevice = () => {
-  console.log('addDevice')
   isShow.value = true
 }
 
+const changeDeviceInfo = (params: param) => {
+  console.log('changeDeviceInfo')
+  console.log(params);
+  
+}
+
 </script>