Skip to content

V
vue_django_test
Commit 6f9d794f by qianmo
Options

update: 删除字段

parent 1afd0664
Showing with 138 additions and 35 deletions
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",
// }
// },
],
},
......
xdc.sqlite
No preview for this file type
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment