<template>
|
<el-dialog
|
:visible.sync="open"
|
class="equ-add-form-dialog"
|
:close-on-click-modal="true"
|
>
|
<div class="equ-form equ-form-add">
|
<!-- 正常情况下就一个按钮 -->
|
<!-- <div class="equ-form-add-button" @click="openform"></div> -->
|
<div class="equ-form-container">
|
<div class="flex">
|
<div class="label require">交换机:</div>
|
<!-- <input
|
class="value input"
|
v-model="name"
|
placeholder="请输入交换机名称"
|
placeholder-class="value input"
|
/> -->
|
<select
|
class="value select"
|
placeholder="请选择交换机"
|
v-model="name"
|
clearable filterable
|
:disabled="nameDisabled"
|
>
|
<option disabled selected value >请选择交换机</option>
|
<option v-for="item in switchList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
>
|
|
</option>
|
</select>
|
</div>
|
<div class="flex m-t-2rem">
|
<div class="label require">交换机柜:</div>
|
<!-- <input
|
class="value input"
|
v-model="cabinetName"
|
placeholder="请输入交换机柜名称"
|
placeholder-class="value input"
|
/> -->
|
<select
|
class="value select"
|
placeholder="请选择交换机柜"
|
v-model="cabinetName"
|
clearable filterable
|
:disabled="cabinetNameDisabled"
|
>
|
<option disabled selected value >请选择交换机柜</option>
|
<option v-for="item in cabinetList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
>
|
|
</option>
|
</select>
|
</div>
|
<div class="flex m-t-2rem">
|
<div class="label require">网桥:</div>
|
<input
|
class="value input"
|
v-model="networkPort"
|
placeholder="请输入网桥名称"
|
placeholder-class="value input"
|
/>
|
</div>
|
<div class="flex m-t-2rem">
|
<div class="label">Mac:</div>
|
<input
|
class="value input"
|
v-model="macAddress"
|
placeholder="请输入Mac"
|
placeholder-class="value input"
|
/>
|
</div>
|
<div class="flex m-t-2rem">
|
<div class="label">Ip地址:</div>
|
<input
|
class="value input"
|
v-model="ipAddress"
|
placeholder="请输入Ip地址"
|
placeholder-class="value input"
|
/>
|
</div>
|
<div class="flex m-t-2rem">
|
<div class="label require">端口:</div>
|
<input
|
class="value input"
|
v-model="port"
|
placeholder="请输入端口"
|
placeholder-class="value input"
|
/>
|
</div>
|
<div class="flex m-t-2rem">
|
<div class="label">厂区:</div>
|
<select
|
class="value select"
|
placeholder="请选择厂区"
|
disabled clearable filterable
|
v-model="selectcode"
|
:disabled="areaCodeDisabled"
|
>
|
<!-- @change="updateDeviceList" -->
|
<option disabled selected value>- 请选择厂区</option>
|
<!-- <option value="01">01区</option>
|
<option value="02">02区</option> -->
|
<option
|
v-for="area in areas"
|
:value="area.areaCode"
|
:key="area.areaCode"
|
>
|
{{ area.areaCode }}区
|
</option>
|
</select>
|
</div>
|
|
<!-- <div class="flex m-t-2rem" :key="selectcode">
|
<div class="label">交换机:</div>
|
<select class="value select" v-model="selectswitch">
|
<option disabled selected value>- 请选择交换机</option>
|
<option v-for="device in device_list" :value="device.id">
|
{{ device.networkPort }}
|
</option>
|
</select>
|
</div> -->
|
<!-- <div class="flex m-t-2rem">
|
<div class="label">位置:</div>
|
<select class="value select" v-model="selectswitchindex">
|
<option disabled selected value>- 请选择位置</option>
|
</select>
|
</div> -->
|
<!-- {{ selectcode }} -->
|
<div class="m-t-2rem flex">
|
<div class="equ-form-add-button-confirm" @click="submit">确认</div>
|
<div class="equ-form-add-button-cancel" @click="open = false">
|
取消
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { addDeviceInfo, getDeviceList,getSwitchBord,getAllSwitch } from "@/api/area";
|
export default {
|
props: {
|
code: "",
|
areas: [],
|
init_device_list: [],
|
cur_item: {},
|
},
|
data() {
|
return {
|
locInfo: {},
|
device_list: [],
|
name: "",
|
selectcode: "",
|
selectswitch: "",
|
cabinetName: "",
|
|
port: "",
|
networkPort: "",
|
macAddress: "",
|
ipAddress: "",
|
|
// colindex: 0,
|
// rowindex: 0,
|
open: false,
|
|
// selectswitchindex: "",
|
cabinetList:[],
|
switchList:[],
|
nameDisabled: false,
|
cabinetNameDisabled: false,
|
areaCodeDisabled: false,
|
};
|
},
|
mounted() {
|
if (this.code) {
|
this.selectcode = this.code;
|
this.device_list = this.init_device_list || [];
|
}
|
|
// 获取所有交换机柜
|
this.getSwitchBord()
|
|
// 获取所有交换柜
|
this.getAllSwitch()
|
|
|
},
|
methods: {
|
|
getSwitchBord(){
|
getSwitchBord().then((res) => {
|
this.cabinetList = res.cabinetList || [];
|
});
|
},
|
|
getAllSwitch(){
|
getAllSwitch().then((res) => {
|
this.switchList = res.cabinetList || [];
|
});
|
},
|
|
|
|
async updateDeviceList() {
|
if (this.selectcode) {
|
this.$modal.loading("加载中");
|
var re = await getDeviceList(this.selectcode);
|
this.device_list = re.switchDetialInfos || [];
|
this.$modal.closeLoading();
|
} else {
|
this.device_list = [];
|
this.selectswitch = "";
|
}
|
},
|
async submit() {
|
//todo 提交设备
|
if (this.ipAddress && !this.isValidIP(this.ipAddress)) {
|
this.$message.warning("请输入有效的IP地址");
|
return;
|
}
|
if (!this.name || !this.selectcode || !this.cabinetName || !this.networkPort || !this.port ) {
|
this.$message.warning("数据未填写完整");
|
return;
|
}
|
// var deviceselect = { ...this.locInfo };
|
|
// console.log('this.device_list',this.locInfo)
|
// for (var device of this.device_list) {
|
// if (device.id == this.selectswitch) {
|
// deviceselect = device;
|
// break;
|
// }
|
// }
|
// if (deviceselect.name) {
|
// deviceselect.switchName = deviceselect.name;
|
// delete deviceselect.name;
|
// }
|
|
await this.$modal.confirm("确定新增设备吗?");
|
|
var dto = {
|
operateType: 2,
|
deviceInfo: {
|
// ...deviceselect,
|
...this.locInfo,
|
|
port: this.port,
|
networkPort: this.networkPort,
|
macAddress: this.macAddress,
|
ipAddress: this.ipAddress,
|
|
cabinetName: this.cabinetName || "",
|
areaCode: this.selectcode,
|
switchName: this.name,
|
|
areaRow:this.cur_item?.row?this.cur_item?.row:-1,
|
areaCell:this.cur_item?.cell?this.cur_item?.cell:-1,
|
|
},
|
};
|
const re = await addDeviceInfo(dto);
|
console.log("addDeviceInfo", re);
|
if (re.isSuccess) {
|
this.$message.success("创建成功");
|
this.open = false;
|
this.$emit("update", {});
|
this.$emit("update-server-info", this.code,this.name);
|
}
|
},
|
openform(locInfo = {}) {
|
if (this.open) {
|
this.open = !this.open;
|
} else {
|
//展开，显示表格
|
this.locInfo = locInfo || {};
|
console.log("this.locInfo", this.locInfo);
|
this.name = "";
|
this.port = this.locInfo.port || "";
|
this.networkPort = this.locInfo.name || "";
|
this.macAddress = this.locInfo.macAddress || "";
|
this.ipAddress = this.locInfo.ipAddress || "";
|
|
this.open = !this.open;
|
}
|
},
|
openConfigform(code, switchName,cabinetName,config) {
|
console.log('openConfigform',code,switchName,cabinetName);
|
if (this.open) {
|
this.open = !this.open;
|
} else {
|
//展开，显示表格
|
this.locInfo = {};
|
this.selectcode = code;
|
console.log("this.locInfo", this.locInfo);
|
this.name = switchName;
|
this.cabinetName = cabinetName;
|
this.port = this.locInfo.port || "";
|
this.networkPort = this.locInfo.name || "";
|
this.macAddress = this.locInfo.macAddress || "";
|
this.ipAddress = this.locInfo.ipAddress || "";
|
this.open = !this.open;
|
}
|
if (config === 1) {
|
this.nameDisabled = true; // 将nameDisabled设置为禁用
|
this.cabinetNameDisabled = true; // 将cabinetName设置为禁用
|
this.areaCodeDisabled = true; // 将areaCode设置为不禁用
|
}
|
},
|
isValidIP(ip) {
|
const regex = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
|
return regex.test(ip);
|
},
|
},
|
watch: {
|
code(newval, oldval) {
|
if (!this.selectcode || this.selectcode == oldval) {
|
this.selectcode = newval;
|
}
|
},
|
},
|
|
};
|
</script>
|
<style lang="scss">
|
.equ-add-form-dialog .el-dialog {
|
background: none !important;
|
box-shadow: none !important;
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.equ-form-add-button {
|
width: 4.1rem;
|
height: 4.1rem;
|
background-size: 100% 100%;
|
background-image: url("../assets/area/equ-form-add-button.svg");
|
cursor: pointer;
|
}
|
|
.equ-form-add {
|
/* position: fixed;
|
left: 5.1rem;
|
top: 11.6rem; */
|
display: flex;
|
margin: 0 auto;
|
width: fit-content;
|
margin-bottom: 80px;
|
margin-top: 60px;
|
}
|
|
.equ-form-container {
|
/* position: absolute; */
|
//靠右
|
margin-left: 1rem;
|
width: 37.6rem;
|
/* height: 16.7rem; */
|
background: #ffffff;
|
box-shadow: 0rem 0.2rem 3.4rem 0rem #bccbdd;
|
border-radius: 1rem;
|
padding: 2.2rem;
|
padding-bottom: 1.5rem;
|
|
.label {
|
width: 8rem;
|
font-size: 1.6rem;
|
font-family: SourceHanSansCN-Bold, SourceHanSansCN;
|
font-weight: bold;
|
color: #333333;
|
line-height: 2em;
|
margin-right: 1rem;
|
text-align: left;
|
}
|
.require::before {
|
content: "*";
|
color: red;
|
}
|
.value.input {
|
width: 25rem;
|
max-width: 25rem;
|
height: 3.2rem;
|
border-radius: 0.2rem;
|
border: 0.1rem solid #6c99be !important;
|
padding-left: 0.8rem;
|
}
|
|
.value.input::placeholder,
|
.value.select::placeholder {
|
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
|
font-weight: 400;
|
color: #6c99be;
|
}
|
|
.value.select {
|
width: 26.1rem;
|
|
height: 3.2rem;
|
border-radius: 0.2rem;
|
border: 0.1rem solid #6c99be;
|
padding-left: 0.5rem;
|
color: #6c99be;
|
}
|
|
.equ-form-add-button-confirm {
|
width: 10.5rem;
|
height: 3.6rem;
|
background: #278afa;
|
border-radius: 0.4rem;
|
|
font-size: 1.6rem;
|
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
|
font-weight: 400;
|
color: #ffffff;
|
line-height: 3.2rem;
|
margin-left: auto;
|
margin-right: 0;
|
cursor: pointer;
|
}
|
.equ-form-add-button-cancel {
|
width: 10.5rem;
|
height: 3.6rem;
|
border: 1px solid #278afa;
|
border-radius: 0.4rem;
|
|
font-size: 1.6rem;
|
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
|
font-weight: 400;
|
color: #333;
|
line-height: 3.2rem;
|
margin-left: auto;
|
margin-right: 0;
|
cursor: pointer;
|
}
|
}
|
</style>
|
