update: 删除字段

frontend/src/components/collapse-table.vue

@@ -17,7 +17,7 @@
 
     <el-collapse class="mt-4">
       <el-collapse-item  v-for="cmd in parentMsg" :title="cmd.cmd_name+' '+cmd.cmd_explain+' '+cmd.cmd_type">
-        <protpcol-table v-if="protocolCmd" :info="cmd.cmd_name" :message="protocolCmd"></protpcol-table>
+        <protpcol-table v-if="protocolCmd" :info="cmd.cmd_name" :message="protocolCmd" :type="cmd.cmd_type"></protpcol-table>
       </el-collapse-item>
     </el-collapse>
 

frontend/src/components/device-table.vue

@@ -77,7 +77,7 @@ const props = defineProps({
 })
 
 const isSwitchDisabled = ref(true)
-console.log("3", toRefs(props).tag.value)
+
 watch( () => toRefs(props).tag.value, (newValue) => {
   if (newValue === 'real'){
     value.value = true

frontend/src/components/kit-device.vue

@@ -45,15 +45,22 @@
         <el-select v-model="virtualDevice.mode">
           <el-option label="tcp server" value="tcp server" />
           <el-option label="tcp client" value="tcp client" />
-          <el-option label="tcp/ip" value="tcp/ip" />
           <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="virtualDevice.ip" autocomplete="off" />
+      <el-form-item label="本机ip" :label-width="formLabelWidth" v-if="isTCP_client">
+        <el-input v-model="virtualDevice.HostIP" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="本机端口" :label-width="formLabelWidth" v-if="isTCP_client">
+        <el-input v-model="virtualDevice.HostPort" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="目标ip" :label-width="formLabelWidth" v-if="isUDP">
+        <el-input v-model="virtualDevice.DstIP" autocomplete="off" />
       </el-form-item>
-      <el-form-item label="端口" :label-width="formLabelWidth">
-        <el-input v-model="virtualDevice.port" autocomplete="off" />
+      <el-form-item label="目标端口" :label-width="formLabelWidth" v-if="isUDP">
+        <el-input v-model="virtualDevice.DstPort" autocomplete="off" />
       </el-form-item>
     </el-form>
     <template #footer>
@@ -74,9 +81,11 @@ import DeviceTable from "./device-table.vue";
 const deviceVisible = ref(false)
 const virtualDeviceVisible = ref(false)
 const formLabelWidth = '140px'
+const isUDP = ref(false)
+const isTCP_client = ref(true)
 const device = ref({mode: ''})
 const virtualDevice = ref(
-    {protocol: '', version: '', mode: '', ip: '', port: ''}
+    {protocol: '', version: '', mode: '', HostIP: '', HostPort: '', DstIP: '', DstPort: ''}
 )
 const props = defineProps({
   tag: String
@@ -84,9 +93,17 @@ const props = defineProps({
 const tag = ref(toRefs(props).tag.value)
 
 const open = () => {
+  isUDP.value = false
+  isTCP_client.value = true
   if (toRefs(props).tag.value === 'real'){
+    for (const key in device.value){
+      device.value[key] = ''
+    }
     deviceVisible.value = true
   }else {
+    for (const key in virtualDevice.value){
+      virtualDevice.value[key] = ''
+    }
     virtualDeviceVisible.value = true
   }
 }
@@ -94,6 +111,19 @@ const open = () => {
 watch( () => toRefs(props).tag.value, (newValue) => {
   tag.value = newValue
 })
+
+watch( () => virtualDevice.value.mode, (newValue) => {
+  if (newValue === 'udp' || newValue === 'udp mc'){
+    isUDP.value = true
+    isTCP_client.value = true
+  }else if (newValue === 'tcp client'){
+    isUDP.value = true
+    isTCP_client.value = false
+  }else {
+    isUDP.value = false
+    isTCP_client.value = true
+  }
+})
 </script>
 
 <style scoped>

frontend/src/components/protpcol-table.vue

@@ -8,8 +8,8 @@
     <el-table-column prop="value" label="默认值" style="width: 25%" />
     <el-table-column fixed="right"  style="width: 25%">
       <template #default="{row}">
-        <div style="display: flex; justify-content: space-between;">
-          <el-button  type="primary" @click="open('delete')">删除字段</el-button>
+        <div style="display: flex;">
+          <el-button  type="primary" @click="open('delete', row)">删除字段</el-button>
           <el-button  type="primary" @click="editField(row)">修改字段</el-button>
         </div>
       </template>
@@ -22,41 +22,47 @@
       @click="addField"
   >+</el-button>
 
-  <el-dialog v-model="dialogVisible" >
+  <el-dialog v-model="dialogVisible" @close="resetForm">
     <template #title>{{flag ? '新增' : '编辑'}}字段</template>
-    <el-form  label-position="right" label-width="150px" :model="fields">
+    <el-form
+        ref="ruleFormRef"
+        label-position="right"
+        label-width="150px"
+        :model="fields"
+        :rules="rules"
+    >
       <el-row>
         <el-col :span="12">
           <el-form-item label="命令名">
-            <el-input v-model="fields.cmd_name" :disabled="!flag"></el-input>
+            <el-input v-model="fields.cmd_name" disabled></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="指令类型">
-            <el-input v-model="fields.cmd_type" :disabled="!flag"></el-input>
+            <el-input v-model="fields.cmd_type" disabled></el-input>
           </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="12">
           <el-form-item label="序号">
-            <el-input v-model="fields.fieldindex" :disabled="!flag"></el-input>
+            <el-input v-model="fields.fieldindex" disabled></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="名称">
+          <el-form-item label="名称" prop="fieldname">
             <el-input v-model="fields.fieldname"></el-input>
           </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="12">
-          <el-form-item label="长度">
+          <el-form-item label="长度" prop="fieldsize">
             <el-input v-model="fields.fieldsize"></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="值">
+          <el-form-item label="值" prop="value">
             <el-input v-model="fields.value"></el-input>
           </el-form-item>
         </el-col>
@@ -75,7 +81,7 @@
       </el-row>
       <el-row>
         <el-col :span="12">
-          <el-form-item label="字段类型">
+          <el-form-item label="字段类型" prop="datatype">
             <el-select v-model="fields.datatype">
               <el-option v-for="item in fieldTypes" :label="item.label" :value="item.value" :key="item.value"></el-option>
             </el-select>
@@ -141,7 +147,7 @@
     </el-form>
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click="dialogVisible = false; more = false">取消</el-button>
+        <el-button @click="cancel">取消</el-button>
         <el-button type="primary" @click="open">
           确定
         </el-button>
@@ -162,12 +168,27 @@ const more = ref(false)
 const props = defineProps({
   //子组件接收父组件传递过来的值
   info: String,
+  type: String,
   message: Object
 })
 const cmdName = ref(toRefs(props).info.value)
 const cmdFields = ref(toRefs(props).message.value[cmdName.value])
 const tableData = ref([])
-
+const rules = ref({
+  fieldname: [
+    {required: true, message: "请输入名称", trigger: 'blur'}
+  ],
+  fieldsize: [
+    {required: true, message: "请输入长度", trigger: 'blur'}
+  ],
+  value: [
+    {required: true, message: "请输入值", trigger: 'blur'}
+  ],
+  datatype: [
+    {required: true, message: "请选择字段类型", trigger: 'change'}
+  ],
+})
+const ruleFormRef = ref()
 for (const item of cmdFields.value){
   tableData.value.push(item)
 }
@@ -214,22 +235,46 @@ const fieldTypes = [
 let operation = ''
 
 const addField = () => {
-  dialogVisible.value = true;
   flag.value = true;
+  more.value = false
   for(const key in fields.value){
     fields.value[key] = '';
   }
+  fields.value['cmd_name'] = toRefs(props).info.value
+  fields.value['cmd_type'] = toRefs(props).type.value
+  fields.value['minvalue'] = 'null'
+  fields.value['maxvalue'] = 'null'
+  fields.value['lua_script_in'] = 'null'
+  fields.value['lua_script_out'] = 'null'
+  fields.value['operation_in'] = 0
+  fields.value['operation_in_num'] = 0
+  fields.value['operation_out'] = 0
+  fields.value['operation_out_num'] = 0
+  fields.value['operabo_in'] = 0
+  fields.value['operabo_out'] = 0
+  dialogVisible.value = true;
+  if (ruleFormRef.value){
+    ruleFormRef.value.clearValidate()
+  }
 }
 
 function editField(data){
   dialogVisible.value = true
   flag.value = false
+  more.value = false
   for (const key in data){
     fields.value[key] = data[key]
   }
 
 }
 
+const resetForm = () => {
+  for (const key in fields.value){
+    fields.value[key] = ''
+  }
+  ruleFormRef.value.clearValidate()
+}
+
 async function Edit(id, params){
   await EditProtocolCmd(id, params)
 }
@@ -238,12 +283,13 @@ async function Delete(id){
   await DeleteProtocolCmd(id)
 }
 
-function open(data){
-  if (data === 'delete'){
+function confirm(str, data){
+  if (str === 'delete'){
     operation = '删除'
   } else if(flag.value){
     operation = '增加'
   }else if (!flag.value){
+
     operation = '修改'
   }
   ElMessageBox.confirm(
@@ -272,7 +318,9 @@ function open(data){
           Edit(params['id'], params)
           window.location.reload()
         }else if (operation === '删除'){
-          // todo: 删除操作
+          console.log("id", data['id'])
+          Delete(data['id'])
+          window.location.reload()
         }
       })
       .catch(() => {
@@ -283,6 +331,31 @@ function open(data){
       })
 }
 
+const cancel = () => {
+  dialogVisible.value = false
+  more.value = false
+  ruleFormRef.value.clearValidate()
+  // ruleFormRef.value.resetFields()
+}
+
+async function open(str, data){
+  if (str === 'delete'){
+    confirm(str, data)
+    return
+  }
+  if (!ruleFormRef.value) return;
+  await ruleFormRef.value.validate((valid) => {
+    if (valid){
+      confirm(str, data)
+      // ruleFormRef.value.resetFields()
+    }else {
+      // ruleFormRef.value.resetFields()
+      return false
+    }
+  })
+
+}
+
 </script>
 
 <style>

frontend/src/dao/device.js

@@ -24,7 +24,7 @@ export function EditProtocolCmd(id,params){
 }
 
 export function DeleteProtocolCmd(id){
-    return axios.delete('http://192.168.0.214:8000/op/all_dev_cmd_define', id).then(
+    return axios.delete('http://192.168.0.214:8000/op/all_dev_cmd_define/' + id).then(
         function (response){
             return response.data
         }

frontend/src/router/index.js

@@ -38,15 +38,15 @@ export const routes = [
           menuIcon: "fee",
         },
       },
-      {
-        path: "/device",
-        name: "device",
-        component: () => import("../views/device/device.vue"),
-        meta: {
-          menuTitle: "模拟设备",
-          menuIcon: "fee",
-        }
-      },
+      // {
+      //   path: "/device",
+      //   name: "device",
+      //   component: () => import("../views/device/device.vue"),
+      //   meta: {
+      //     menuTitle: "模拟设备",
+      //     menuIcon: "fee",
+      //   }
+      // },
 
     ],
   },