| | |
| | | <div class="equ-form-container"> |
| | | <div class="flex"> |
| | | <div class="label require">交换机:</div> |
| | | <input |
| | | <!-- <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 |
| | | <!-- <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> |
| | |
| | | <select |
| | | class="value select" |
| | | placeholder="请选择厂区" |
| | | disabled |
| | | disabled clearable filterable |
| | | v-model="selectcode" |
| | | :disabled="areaCodeDisabled" |
| | | > |
| | | <!-- @change="updateDeviceList" --> |
| | | <option disabled selected value>- 请选择厂区</option> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { addDeviceInfo, getDeviceList } from "@/api/area"; |
| | | import { addDeviceInfo, getDeviceList,getSwitchBord,getAllSwitch } from "@/api/area"; |
| | | export default { |
| | | props: { |
| | | code: "", |
| | | areas: [], |
| | | init_device_list: [], |
| | | cur_item: {}, |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | open: false, |
| | | |
| | | // selectswitchindex: "", |
| | | cabinetList:[], |
| | | switchList:[], |
| | | nameDisabled: false, |
| | | cabinetNameDisabled: false, |
| | | areaCodeDisabled: false, |
| | | }; |
| | | }, |
| | | mounted() { |
| | |
| | | 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("加载中"); |
| | |
| | | }, |
| | | async submit() { |
| | | //todo 提交设备 |
| | | if (!this.isValidIP(this.ipAddress)) { |
| | | this.$message.warning("请输入有效的IP地址"); |
| | | return; |
| | | } |
| | | if (!this.name || !this.selectcode || !this.cabinetName || !this.networkPort) { |
| | | this.$message.warning("数据未填写完整"); |
| | | return; |
| | |
| | | cabinetName: this.cabinetName || "", |
| | | areaCode: this.selectcode, |
| | | switchName: this.name, |
| | | |
| | | areaRow:this.cur_item?.row, |
| | | areaCell:this.cur_item?.cell, |
| | | |
| | | }, |
| | | }; |
| | | const re = await addDeviceInfo(dto); |
| | |
| | | this.$message.success("创建成功"); |
| | | this.open = false; |
| | | this.$emit("update", {}); |
| | | this.$emit("update-server-info", this.code,this.name); |
| | | } |
| | | }, |
| | | openform(locInfo = {}) { |
| | |
| | | this.open = !this.open; |
| | | } |
| | | }, |
| | | openConfigform(code, cabinetName) { |
| | | 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 = cabinetName; |
| | | 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: { |
| | |
| | | } |
| | | }, |
| | | }, |
| | | |
| | | }; |
| | | </script> |
| | | <style lang="scss"> |