refactor：重构 修改通信参数 功能

frontend/src/components/device_communication/DeviceInfoCard.vue

@@ -6,9 +6,17 @@
 		</template>
 		<el-descriptions-item label="协议名">{{ props.deviceInfo.protocol_name }}</el-descriptions-item>
 		<el-descriptions-item label="通信参数" :column=3>
-			<span> {{ props.deviceInfo.communicate_mode }} </span>
-			<span ml-9> {{ ip }} </span>
-			<span ml-9> {{ port }} </span>
+      <span> {{ props.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>
+      <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>
 		</el-descriptions-item>
 		<el-descriptions-item label="性能参数">
 			<el-tag v-for="tag in checked_performance_fields" :key="tag" class="mx-1 mt-1">
@@ -18,56 +26,11 @@
 	</el-descriptions>
 	<el-divider />
 
-	Form
-	<el-dialog v-model="dialogFormVisible" title="编辑通信参数">
-		<el-form :model="form">
-			<el-form-item label="设备名称" :label-width="formLabelWidth">
-				<el-input v-model="form.device_name" autocomplete="false" />
-			</el-form-item>
-			<el-form-item label="设备中文名" :label-width="formLabelWidth">
-				<el-input v-model="form.device_name_chn" autocomplete="false" />
-			</el-form-item>
-			<el-form-item label="所属站点" :label-width="formLabelWidth">
-				<el-input v-model="form.station_id" autocomplete="false" />
-			</el-form-item>
-			<el-form-item label="协议名称" :label-width="formLabelWidth">
-				<el-input v-model="form.protocol_name" autocomplete="false" />
-			</el-form-item>
-			<el-form-item label="通信模式" :label-width="formLabelWidth">
-				<el-select v-model="form.communicate_mode" @change="console.log(form.communicate_mode)">
-					<el-option label="TCP_SERVER" value="TCP_SERVER" />
-					<el-option label="TCP_CLIENT" value="TCP_CLIENT" />
-					<el-option label="UDP" value="UDP" />
-					<el-option label="UDP_MC" value="UDP_MC" />
-				</el-select>
-			</el-form-item>
-			<el-form-item label="IP" :label-width="formLabelWidth">
-				<el-input v-model="form.tcp_ip" autocomplete="false" />
-			</el-form-item>
-			<el-form-item label="端口" :label-width="formLabelWidth">
-				<el-input v-model="form.tcp_port" autocomplete="false" />
-			</el-form-item>
-			<el-form-item label="监控属性" :label-width="formLabelWidth">
-				<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
-					Check all
-				</el-checkbox>
-				<el-checkbox-group v-model="checked_performance_fields" @change="handleCheckedCitiesChange">
-					<el-checkbox v-for="city in performance_fields" :key="city" :label="city">
-						{{ city }}
-					</el-checkbox>
-				</el-checkbox-group>
-			</el-form-item>
-
-		</el-form>
-		<template #footer>
-			<span class="dialog-footer">
-				<el-button @click="dialogFormVisible = false">Cancel</el-button>
-				<el-button type="primary" @click="update_communication">
-					Confirm
-				</el-button>
-			</span>
-		</template>
-	</el-dialog>
+	<edit-dialog 
+    :is-show="dialogFormVisible" 
+    :device-info="props.deviceInfo"
+    @close="dialogFormVisible = false" 
+    type="edit" />
 </template>
 
 
@@ -76,22 +39,19 @@ import { onMounted, ref } from 'vue';
 import axios from 'axios';
 
 import type { DeviceInfo } from '@/components/device_communication/types';
-import type { CheckboxValueType } from 'element-plus';
+import EditDialog from './EditDialog.vue';
 
 type propType = {
 	deviceInfo: DeviceInfo
 }
 const props = defineProps<propType>();
-const ip = ref<string>()
-const port = ref<number>()
 const checked_performance_fields = ref<string[]>([])
-let is_tcp = false
+const isTcp = ref<boolean>(true)
 
 onMounted(() => {
-	is_tcp = props.deviceInfo.communicate_mode.toUpperCase().includes('TCP'.toUpperCase())
-	ip.value = is_tcp ? props.deviceInfo.tcp_ip : props.deviceInfo.udp_ip_src
-	port.value = is_tcp ? props.deviceInfo.tcp_port : props.deviceInfo.udp_port_src
+	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
 })
 
 const emit = defineEmits(['deleteDeviceInfo'])
@@ -110,69 +70,6 @@ const del = () => {
 
 // performance_fields tag
 const dialogFormVisible = ref(false)
-const formLabelWidth = '130px'
-
-const form = ref<DeviceInfo>({
-	id: props.deviceInfo.id,
-	station_id: props.deviceInfo.station_id,
-	device_id: props.deviceInfo.device_id,
-	device_name: props.deviceInfo.device_name,
-	device_name_chn: props.deviceInfo.device_name_chn,
-	protocol_name: props.deviceInfo.protocol_name,
-	communicate_mode: props.deviceInfo.communicate_mode,
-	tcp_ip: props.deviceInfo.tcp_ip,
-	tcp_port: props.deviceInfo.tcp_port,
-	udp_ip_src: props.deviceInfo.udp_ip_src,
-	udp_port_src: props.deviceInfo.udp_port_src,
-	udp_ip_dst: props.deviceInfo.udp_ip_dst,
-	udp_port_dst: props.deviceInfo.udp_port_dst
-})
-
-const checkAll = ref(false)
-const isIndeterminate = ref(true)
-const performance_fields = ref<string[]>([])
-
-onMounted(() => {
-	axios.get(
-		'api/device_communication/protocol_performance/' + props.deviceInfo.protocol_name + '/',
-	).then((res) => {
-		performance_fields.value = res.data
-	}).catch((err) => {
-		console.log(err);
-	})
-})
-
-const handleCheckAllChange = (val: CheckboxValueType) => {
-	checked_performance_fields.value = val ? performance_fields.value : []
-	isIndeterminate.value = false
-}
-const handleCheckedCitiesChange = (value: CheckboxValueType[]) => {
-	const checkedCount = value.length
-	checkAll.value = checkedCount === performance_fields.value.length
-	isIndeterminate.value = checkedCount > 0 && checkedCount < performance_fields.value.length
-}
-
-const update_communication = () => {
-	dialogFormVisible.value = false
-
-	props.deviceInfo.device_name = form.value.device_name
-	props.deviceInfo.device_name_chn = form.value.device_name_chn
-	props.deviceInfo.station_id = form.value.station_id
-	props.deviceInfo.protocol_name = form.value.protocol_name
-	props.deviceInfo.communicate_mode = form.value.communicate_mode
-	ip.value = form.value.tcp_ip
-	port.value = form.value.tcp_port
-
-	form.value.performance_fields = JSON.stringify(checked_performance_fields.value)
-	axios.put(
-		'api/device_communication/communicate/' + form.value.id + '/',
-		form.value
-	).then((res) => {
-		console.log(res);
-	}).catch((err) => {
-		console.log(err);
-	})
-}
 
 </script>
 
@@ -181,20 +78,4 @@ const update_communication = () => {
 	color: var(--el-text-color-regular) !important;
 	font-weight: bold;
 }
-
-.el-button--text {
-	margin-right: 15px;
-}
-
-.el-select {
-	width: 300px;
-}
-
-.el-input {
-	width: 300px;
-}
-
-.dialog-footer button:first-child {
-	margin-right: 10px;
-}
 </style>
\ No newline at end of file

frontend/src/components/device_communication/EditDialog.vue

@@ -87,7 +87,7 @@ const formLabelWidth = "120px"
 type porpsType = {
   isShow: boolean,
   deviceInfo?: DeviceInfo,
-  type: string
+  type: string,
 }
 const props = defineProps<porpsType>()
 const emit = defineEmits(['close'])
@@ -111,13 +111,33 @@ const form = ref<DeviceInfo>({
   udp_port_dst: 0
 })
 
-watch(props, () => {
+watch(() => props.isShow, () => {
   dialogFormVisible.value = props.isShow
+  if (props.isShow) {
+    form.value = {
+      id: props.deviceInfo!.id,
+      station_id: props.deviceInfo!.station_id,
+      device_id: props.deviceInfo!.device_id,
+      device_name: props.deviceInfo!.device_name,
+      device_name_chn: props.deviceInfo!.device_name_chn,
+      protocol_name: props.deviceInfo!.protocol_name,
+      communicate_mode: props.deviceInfo!.communicate_mode,
+      tcp_ip: props.deviceInfo!.tcp_ip,
+      tcp_port: props.deviceInfo!.tcp_port,
+      udp_ip_src: props.deviceInfo!.udp_ip_src,
+      udp_port_src: props.deviceInfo!.udp_port_src,
+      udp_ip_dst: props.deviceInfo!.udp_ip_dst,
+      udp_port_dst: props.deviceInfo!.udp_port_dst,
+    }
+    handleModeChange(form.value.communicate_mode)
+    handleProtocolChange(form.value.protocol_name)
+    checked_performance_fields.value = props.deviceInfo!.checked_performance_fields!
+  }
 })
 
 const validateIP = (_: any, value: any, callback: any) => {
   if (value === '') {
-    callback(new Error('Please input the password again'))
+    callback(new Error('Please input the IP again'))
   }
   const ipRegex = /^(\d{1,3}\.){3}\d{1,3}$/;
   if (!ipRegex.test(value)) {
@@ -129,7 +149,7 @@ const validateIP = (_: any, value: any, callback: any) => {
 
 const validatePort = (_: any, value: any, callback: any) => {
   if (value === '') {
-    callback(new Error('Please input the password again'))
+    callback(new Error('Please input the port again'))
   }
   const portRegex = /^[1-9]\d{1,4}$/;
   if (!portRegex.test(value)) {
@@ -235,7 +255,7 @@ const submit_form = () => {
 
 const submit = () => {
   // 获取表单数据
-  let data = {
+  let data: DeviceInfo = {
     station_id: form.value.station_id,
     device_id: form.value.device_id,
     device_name: form.value.device_name,
@@ -266,6 +286,23 @@ const submit = () => {
         console.log(err);
       })
   }
+  else if (props.type === "edit")
+  {
+    // 修改通信参数方法
+    data.id = form.value.id
+
+    axios.put('/api/device_communication/communicate/' + data.id + '/', data)
+      .then((res) => {
+        console.log(res);
+        ElMessage({
+          message: '修改成功',
+          type: 'success'
+        })
+      })
+      .catch((err) => {
+        console.log(err);
+      })
+  }
   emit('close')
 }