Vue使用element-ui组件中的组件，一共有两级选择，如何清除选择过的痕迹？
问题详述
当选择不同的端口类型时，会有不同的绑定端口下拉框选择数据。现在遇见的问题是：比如当选择端口类型为虚拟网卡时，绑定端口进行选择，这个时候我只选择了一级
然后就不想选这个端口类型想重新进行选择，这个时候再选择端口类型为网桥映射时，绑定端口一打开就默认之前选择过的痕迹，该如何把这种痕迹去掉，每次打开这个绑定端口下拉框时都是初始化的。
代码
<!-- 添加交换机以及端口弹出框 -->
<el-dialog :title="title" :visible.sync="open" width="600px" :close-on-click-modal="false" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item label="交换机名称" prop="lsName">
<el-input v-model="form.lsName" placeholder="请输入交换机名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="网关设备" prop="gwEqpId">
<el-select v-model="form.gwEqpId" filterable placeholder="请选择网关设备" clearable style="width:160px">
<el-option
v-for="item in uuidList"
:key="item.id"
:label="item.eqpName"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<!-- 添加端口 -->
<div style="margin-bottom:10px;margin-top:-10px">
<span style="margin-left:-525px;font-weight:bold">添加端口</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="addPort">+ 新增端口</el-button>
</div>
<div v-for="(port, index) in form.ports" :key="index">
<el-card class="box-card" style="width:530px;margin-left:30px;" >
<div slot="header" class="clearfix">
<span>端口{{ index+1 }}</span>
<el-button style="float: right; padding: 3px 0;color:red" type="text" @click="removePort(index)" >- 删除端口</el-button>
</div>
<el-row>
<el-col :span="12">
<el-form-item label="端口名称" label-width="100px" :prop="'ports.' + index + '.portName'" :rules="portRules.portName">
<el-input v-model="port.portName" placeholder="请输入端口名称"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="端口类型" label-width="100px" :prop="'ports.' + index + '.portType'" :rules="portRules.portType">
<el-select
v-model="port.portType"
placeholder="请选择端口类型"
clearable
@change="handleBindLgcTypeChange(port)"
>
<el-option
v-for="dict in dict.type.logical_switch_port_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<!-- <el-form-item label="绑定端口" label-width="100px" v-if="port.portType === 'default'" :prop="'ports.' + index + '.bindLgcPortId'" :rules="portRules.bindLgcPortId"> -->
<el-form-item label="绑定端口" label-width="100px" v-if="port.portType === 'default'">
<el-cascader
v-model="port.bindLgcPortId"
:options="port.bindLgcIdOptions"
:props="{ lazy:true,value: 'value', label: 'label', children: 'children',lazyLoad: loadVnicChildrenData }"
placeholder="请选择端口"
filterable
clearable
@change="handleCascaderChange(port, $event)"
></el-cascader>
</el-form-item>
<el-form-item label="绑定端口" label-width="100px" v-if="port.portType === 'router'">
<el-cascader
v-model="port.bindLgcPortId"
:options="port.bindLgcIdOptions"
:props="{ lazy:true,value: 'value', label: 'label', children: 'children',lazyLoad: loadLgcChildrenData}"
placeholder="请选择端口"
filterable
clearable
@change="handleCascaderChange(port, $event)"
></el-cascader>
</el-form-item>
<el-form-item label="绑定端口" label-width="100px" v-if="port.portType === 'localnet'">
<el-cascader
v-model="port.bindLgcPortId"
:options="port.bindLgcIdOptions"
:props="{ lazy:true,value: 'value', label: 'label', children: 'children',lazyLoad:loadBrChildrenData}"
placeholder="请选择端口"
filterable
clearable
@change="handleCascaderChange(port, $event)"
></el-cascader>
</el-form-item>
</el-col>
</el-row>
</el-card>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
.......
<script>
import {listLogicalSwitch,listAllRouter,listRouterPort,listBridge,listBridgeMapping,addLogicalSwitch,reAddLsw,delLogicalSwitch,delAllLogicalSwitch/* listControlNode, addControlNode,delControlNode,delAllControlNode */ } from "@/api/logicalDevice/interchanger";
import {listPorts,addPorts,reAddPorts,delPorts,updatePorts,getPorts} from "@/api/logicalDevice/interChangerPorts";
import {listAcl,addAcl,reAddAcl,delAcl} from "@/api/logicalDevice/aclRules";
import { listAllInterface } from "@/api/networkEquipment/networkInterface";
import { getRegisterList } from "@/api/networkEquipment/networkEquipment";
import { listCtrlNode } from "@/api/controlNode/controlNode";
import rootComponent from '@/views/network/logicalDevice/index'
import breadCrumb from "@/components/Breadcrumb/index.vue"
import autoComputedH from '@/utils/mixins/autoComputedH'
export default {
name: "Post",
mixins: [autoComputedH],
dicts: ['logical_equipment_type','logical_switch_port_type','acl_rule_direction','acl_rule_action','acl_rule_ip_protocol','acl_rule_trans_protocol'],
components: {
breadCrumb,
rootComponent
},
data() {
return {
disabled: false,
// 遮罩层
//loading: true,
portLoading:true,
aclLoading:true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
portsTotal:0,
rulesTotal:0,
// 控制节点表格数据
postList: [],
//端口列表
portsList:[],
//ACL
aclList:[],
// 弹出层标题
title: "",
// 控制节点下拉框
ctrlList: [],
uuidList: [],
// 是否显示弹出层
open: false,
//是否显示规则弹框
openRule:false,
openAclRule:false,
//是否显示端口弹框
openPorts:false,
openAddPorts:false,
pageNum: 1,
pageSize: 10,
// 存储查看端口→添加端口信息的数组
port: {
id:'',
portName: '',
bindLgcId: '',
portType: '',
bindLgcPortId: '',
bindLgcIdOptions: []
},
//存储添加设备→添加端口信息的数组
//ports:[],
// 控制端口区域的显示
showPort: false,
// 查询参数
queryParams: {
//eqpName: undefined,
lsName: undefined,
ctrlId: undefined,
pageNum: 1,
pageSize: 10,
},
//查看端口 查询端口参数
queryPortsParams: {
portName:undefined,
pageNum: 1,
pageSize: 10,
},
queryRulesParams: {
pageNum: 1,
pageSize: 10,
},
// 表单参数
form: {
ctrlId: undefined,
/* uuid: undefined,
eqpName: undefined, */
gwEqpId:undefined,
lsName: undefined,
ports:[]
},
// 表单添加端口参数
formAddPorts: {
gwEqpId:undefined,
portName:undefined,
nicName:undefined,
ipAddress:undefined,
mac:undefined,
},
ruleForm: {
ruleName:undefined,
uuid:undefined,
direction:undefined,
priority:undefined,
ip4Src:undefined,
ip4Dst:undefined,
ipProtocol:undefined,
transProtocol:undefined,
dstPort:undefined,
},
// 表单校验
rules: {
lsName: [
{ required: true, message: "交换机名称不能为空", trigger: "blur" }
],
gwEqpId: [
{ required: true, message: "网关设备不能为空", trigger: "blur" }
],
portName: [
{ required: true, message: "端口名称不能为空", trigger: "blur" }
],
ruleName: [
{ required: true, message: "规则名称不能为空", trigger: "blur" }
],
action: [
{ required: true, message: "行动不能为空", trigger: "blur" }
],
direction: [
{ required: true, message: "方向不能为空", trigger: "blur" }
],
priority: [
{ required: true, message: "优先级不能为空", trigger: "blur" }
],
ip4Src: [
{ required: true, message: "源ipv4地址不能为空", trigger: "blur" }
],
ip4Dst: [
{ required: true, message: "目的ipv4地址不能为空", trigger: "blur" }
]
},
portRules:{
portName: [
{ required: true, message: "端口名称不能为空", trigger: "blur" }
],
portType: [
{ required: true, message: "端口类型不能为空", trigger: "blur" }
],
bindLgcPortId: [
{ required: true, message: "绑定端口名称不能为空", trigger: "blur" }
]
},
ctrlId:null,
lgcId:null,
containerTop: null,
};
},
beforeDestroy() {
localStorage.removeItem('lgcCtrl')
},
created() {
this.getCtrlListSelect();
this.ctrlId = localStorage.getItem('lgcCtrl');
},
methods: {
//添加端口
addPort() {
this.form.ports.push({ portName: '',bindLgcId: '', portType: '', bindLgcPortId:'', bindLgcIdOptions:[] });
this.showPort = true;
},
//删除端口
removePort(index) {
this.form.ports.splice(index, 1);
if (this.form.ports.length === 0) {
this.showPort = false;
}
},
/** 查询岗位列表 */
getList() {
//this.loading = true;
listLogicalSwitch({ ctrlId: this.ctrlId, ...this.queryParams }).then(response => {
this.postList = response.rows;
this.total = response.total;
//this.loading = false;
});
},
formatter(row,column) {
if(row.portType == 'default') {
return "虚拟网卡"
}
if(row.portType == 'router') {
return "路由器端口"
}
if(row.portType == 'localnet') {
return "网桥映射"
}
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
//关闭查看端口弹出框
cancelPortsForm(){
this.openPorts = false;
},
//关闭添加端口弹出框
cancelAddPortsForm(){
this.openAddPorts = false;
},
submitPortsForm(){
this.openPorts = false;
},
// 表单重置
reset() {
this.form = {
ctrlId: undefined,
//uuid: undefined,
//eqpName: undefined,
gwEqpId: undefined,
lsName: undefined,
ports:[]
};
//this.ports = [];
this.resetForm("form");
},
resetPort(){
this.port = {
id:'',
portName: '',
bindLgcId: '',
portType: '',
bindLgcPortId: '',
bindLgcIdOptions: []
};
this.resetForm("port");
},
resetRuleForm(){
this.ruleForm = {
ruleName: undefined,
action: undefined,
direction: undefined,
priority: 1000,
ip4Src: undefined,
ip4Dst: undefined,
ipProtocol:undefined,
transProtocol:undefined,
dstPort:undefined,
};
this.resetForm("ruleForm");
},
changeAction() {
if (this.ruleForm.action == 'drop') {
this.ruleForm.priority = 100;
} else {
this.ruleForm.priority = 1000;
}
},
/** 搜索按钮操作 */
handleQuery() {
//localStorage.setItem('lgcCtrl', this.queryParams.ctrlId);
this.queryParams.pageNum = 1;
this.getList();
},
handleQueryPortsOut(){
this.queryPortsParams.pageNum = 1
this.handleQueryPorts()
},
handleQueryPorts() {
this.portLoading = true;
listPorts({lgcId: this.lgcId,...this.queryPortsParams}).then(response => {
this.portsList = response.rows;
this.portsTotal = response.total;
this.portLoading = false;
}).catch(error => {
this.portLoading = false;
});
},
/** 重置按钮操作 */
resetQuery() {
this.queryParams.lsName = undefined;
this.queryParams.pageNum = 1;
this.queryParams.pageSize = 10;
this.handleQuery();
},
resetQueryPorts() {
this.resetForm("queryFormPorts");
this.handleQueryPorts();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!=1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.form.ctrlId = this.queryParams.ctrlId;
this.open = true;
this.title = "添加逻辑交换机";
getRegisterList({ ctrlId: this.ctrlId }).then((response) => {
this.uuidList = response.rows.map((item) => ({
id: item.id,
eqpName: item.eqpName
}));
}).catch(() => {});
},
handleReAddPort(row) {
const params = {id:row.id};
this.$modal.confirm('是否确认重新创建？').then(()=> {
return reAddPorts(params).then((response) => {
if (response.success) {
this.$modal.msgSuccess("调用成功");
this.handleQueryPorts();
} else {
this.$modal.msgError( "调用失败");
}
});
}).catch(() => {});
},
/* 新增添加端口操作 */
handleAddPort(row){
this.resetPort();
/* this.port = {
portName: '',
bindLgcId: '',
portType: '',
bindLgcPortId: '',
bindLgcIdOptions: []
}; */
this.disabled = false;
this.openAddPorts = true;
this.title= "添加端口";
//this.formAddPorts.gwEqpId = this.currentGwEqpId;
},
//绑定端口操作(修改)
handleUpdatePort(row){
this.resetPort();
const id = {id:row.id};
getPorts(id).then(response => {
//this.port.portType = response.data.portType;
this.port.id = response.data.id;
this.port.portName = response.data.portName;
this.disabled = true;
this.openAddPorts = true;
this.title = "修改端口";
});
},
handleViewPorts(row){
this.portLoading = true;
this.openPorts = true;
this.lgcId = row.id;
this.queryPortsParams.portName = undefined;
this.queryPortsParams.pageNum = 1;
this.queryPortsParams.pageSize = 10;
const params = {
lgcId: row.id,
pageNum: this.queryPortsParams.pageNum,
pageSize: this.queryPortsParams.pageSize,
};
//const id = {lgcId:row.id}
listPorts(params).then(response => {
this.portsList = response.rows;
this.portsTotal = response.total;
this.portLoading = false;
})
},
/** 修改按钮操作 */
/* handleUpdate(row) {
this.reset();
const postId = row.postId || this.ids
getPost(postId).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改岗位";
});
}, */
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
if (valid) {
const formData = {
...this.form,
ctrlId: this.form.ctrlId,
ports: this.form.ports.map(port => ({
portName: port.portName,
bindLgcPortId: Array.isArray(port.bindLgcPortId) && port.bindLgcPortId.length === 0 ? null : port.bindLgcPortId,
bindLgcId: port.bindLgcId,
//bindLgcPortId: Array.isArray(port.bindLgcPortId) ? port.bindLgcPortId[port.bindLgcPortId.length - 1] : port.bindLgcPortId,
portType: port.portType
})),
};
if (this.form.id != undefined) {
delControlNode(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addLogicalSwitch(formData).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/* 查看端口→添加/修改端口操作 */
submitAddPortsForm:function() {
this.$refs["port"].validate(valid => {
if(valid) {
const params = {
lgcId: this.lgcId,
portName: this.port.portName,
portType: this.port.portType,
bindLgcPortId: Array.isArray(this.port.bindLgcPortId) && this.port.bindLgcPortId.length === 0 ? null : this.port.bindLgcPortId,
bindLgcId: this.port.bindLgcId,
};
if (this.port.id) {
updatePorts({ id: this.port.id, ...params }).then(response => {
this.$modal.msgSuccess("修改成功");
this.openAddPorts = false;
const id = { lgcId: this.lgcId };
listPorts(id).then(response => {
this.portsList = response.rows;
this.portsTotal = response.total;
});
});
} else {
addPorts(params).then(response => {
this.$modal.msgSuccess("新增成功");
this.openAddPorts = false;
const id = { lgcId: this.lgcId };
listPorts(id).then(response => {
this.portsList = response.rows;
this.portsTotal = response.total;
});
})
}
}
})
},
handleReAdd(row) {
const params = {id:row.id};
this.$modal.confirm('是否确认重新创建？').then(()=> {
return reAddLsw(params).then((response) => {
if (response.success) {
this.$modal.msgSuccess("调用成功");
this.getList();
} else {
this.$modal.msgError( "调用失败");
}
});
}).catch(() => {});
},
/** 删除按钮操作 */
handleDelete(row) {
const controlNodeId = {id:row.id || this.ids[0]};
const controlNodeIds = {ids:this.ids}
if(this.ids.length<2){
this.$modal.confirm('是否确认删除所选数据项？').then(()=> {
return delLogicalSwitch(controlNodeId).then((response) => {
if(response.success){
this.postList = this.postList.filter(item => item.id !== row.id);
this.$modal.msgSuccess("删除成功");
this.getList();
}else {
this.$modal.msgError( "删除失败");
}
});
}).catch(() => {});
} else {
this.$modal.confirm('是否确认删除所选数据项?').then(()=> {
return delAllLogicalSwitch(controlNodeIds).then((response) => {
if(response.success){
this.postList = this.postList.filter(item => item.id !== row.id);
this.$modal.msgSuccess("删除成功");
this.getList();
}else {
this.$modal.msgError( "删除失败");
}
});
}).catch(() => {});
}
},
//获取所在设备下拉框
getCtrlListSelect() {
listCtrlNode(this.queryParams).then((response) => {
if (this.ctrlId !== null) {
this.queryParams.ctrlId = this.ctrlId;
this.ctrlList = response.rows;
this.getList();
} else {
this.ctrlList = response.rows;
this.queryParams.ctrlId = response.rows[0].id;
this.getList();
}
});
},
/* 删除端口操作 */
handleDeletePort(row) {
const Id = {id:row.id };
if(this.ids.length<2){
this.$modal.confirm('是否确认删除所选数据项？').then(()=> {
return delPorts(Id).then((response) => {
if(response.success){
this.portsList = this.portsList.filter(item => item.id !== row.id);
this.$modal.msgSuccess("删除成功");
this.handleQueryPorts();
}else {
this.$modal.msgError( "删除失败");
}
});
}).catch(() => {});
}},
/** 导出按钮操作 */
handleExport() {
this.download('logicalSwitch/export', {
...this.queryParams
}, `逻辑交换机_${new Date().getTime()}.xlsx`)
},
handleCascaderChange(port, value) {
if(value.length >= 2) {
port.bindLgcId = value[0];
port.bindLgcPortId = value[1];
}
},
/* 添加端口中获取对应设备类型的下拉框数据 */
handleBindLgcTypeChange(port) {
console.log(port,'port123')
this.$nextTick(() => {
port.bindLgcId = '';
port.bindLgcPortId = ''
});
if (port.portType === 'default') {
getRegisterList({ ctrlId: this.ctrlId, ...this.queryParams }).then(response => {
port.bindLgcIdOptions = response.rows.map(item => ({
value: item.id,
label: item.eqpName,
children: []
}));
}).catch(() => {});
} else if (port.portType === 'router') {
listAllRouter({ ctrlId: this.ctrlId, ...this.queryParams }).then(response => {
port.bindLgcIdOptions = response.rows.map(item => ({
value: item.id,
label: item.lrName,
children: []
}));
}).catch(() => {});
} else if (port.portType === 'localnet') {
// listBridge({ ctrlId: this.ctrlId, ...this.queryParams }).then(response => {
getRegisterList({ ctrlId: this.ctrlId, ...this.queryParams }).then(response => {
port.bindLgcIdOptions = response.rows.map(item => ({
value: item.id,
label: item.eqpName,
children: []
}));
}).catch(() => {});
}
},
// 虚拟网卡
loadVnicChildrenData(node, resolve) {
const { level, value } = node;
if (level === 1) {
const gwEqpId = value;
listAllInterface({gwEqpId: gwEqpId}).then(response => {
if (response.rows && response.rows.length > 0) {
const nodes = response.rows.map(item => ({
value: item.id,
label: item.vnicName,
leaf: true
}));
resolve(nodes);
} else {
resolve([
{
value:'no-data',
label:'没有数据',
leaf:true,
disabled: true
}
])
}
})
} else {
resolve([]);
}
},
// 路由
loadLgcChildrenData(node, resolve) {
const { level, value } = node;
if (level === 1) {
const lgcId = value;
listRouterPort({lgcId: lgcId }).then(response => {
if (response.rows && response.rows.length > 0) {
const nodes = response.rows.map(item => ({
value: item.id,
label: item.portName,
leaf: true
}));
resolve(nodes);
} else {
resolve([
{
value:'no-data',
label:'没有数据',
leaf:true,
disabled: true
}
])
}
})
} else {
resolve([]);
}
},
// 网桥
loadBrChildrenData(node, resolve) {
const { level, value } = node;
if (level === 1) {
const gwEqpId = value;
listBridge({gwEqpId: gwEqpId }).then(response => {
if (response.rows && response.rows.length > 0) {
const nodes = response.rows.map(item => ({
value: item.id,
label: item.brName,
leaf: true
}));
resolve(nodes);
} else {
resolve([
{
value:'no-data',
label:'没有数据',
leaf:true,
disabled: true
}
])
}
})
} else {
resolve([]);
}
},
//查询ACL规则列表
handleViewAcl(row) {
this.aclLoading = true;
this.openRule = true;
this.title = "规则信息";
this.queryRulesParams.pageNum = 1;
this.queryRulesParams.pageSize = 10;
const params = {
lgcId: row.id,
pageNum: this.queryRulesParams.pageNum,
pageSize: this.queryRulesParams.pageSize,
};
listAcl(params).then(response => {
this.aclList = response.rows;
this.rulesTotal = response.total;
this.lgcId = row.id;
this.aclLoading = false;
}).catch(error => {
this.aclLoading = false;
});
},
//添加ACL规则
handleAddRule() {
this.resetRuleForm();
this.openAclRule = true;
this.title = "规则信息"
},
//ACL规则弹框提交
submitRuleForm:function (){
this.$refs["ruleForm"].validate(valid => {
if(valid) {
addAcl({lgcId:this.lgcId,...this.ruleForm}).then(response => {
if(response.success){
this.$modal.msgSuccess("新增成功")
this.openAclRule = false;
const id = { lgcId: this.lgcId };
listAcl(id).then(response => {
this.aclList = response.rows;
this.rulesTotal = response.total;
});
}
})
}
})
},
handleReAddAcl(row) {
const params = {id:row.id};
this.$modal.confirm('是否确认重新创建？').then(()=> {
return reAddAcl(params).then((response) => {
if (response.success) {
this.$modal.msgSuccess("调用成功");
this.handleQueryPorts();
} else {
this.$modal.msgError( "调用失败");
}
});
}).catch(() => {});
},
//关闭添加Acl规则信息弹框
cancelRuleForm() {
this.openAclRule = false;
this.resetRuleForm()
},
handleQueryAcl() {
this.aclLoading = true;
const id = { lgcId: this.lgcId };
listAcl({lgcId: this.lgcId,...this.queryRulesParams}).then(response => {
this.aclList = response.rows;
this.rulesTotal = response.total;
this.aclLoading = false;
});
},
//删除ACL规则
handleDeleteRule(row) {
const Id = {id:row.id };
if(this.ids.length<2){
this.$modal.confirm('是否确认删除所选数据项？').then(()=> {
return delAcl(Id).then((response) => {
if(response.success){
this.aclList = this.aclList.filter(item => item.id !== row.id);
this.$modal.msgSuccess("删除成功");
this.handleQueryAcl();
}else {
this.$modal.msgError( "删除失败");
}
});
}).catch(() => {});
}
}
}
};
</script>
