<template>
|
<div class="equ-form equ-form-add">
|
<!-- 正常情况下就一个按钮 -->
|
<div class="equ-form-add-button" @click="openform"></div>
|
<div class="equ-form-container" v-if="open">
|
<div class="flex">
|
<div class="label">设备名称:</div>
|
<input class="value input" v-model="name" placeholder="请输入设备名称" placeholder-class="value input" />
|
</div>
|
<div class="flex m-t-2rem">
|
<div class="label">厂区:</div>
|
<select class="value select" placeholder="请选择厂区" v-model="selectcode" @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">{{ 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">
|
<div class="equ-form-add-button-confirm" @click="submit">确认</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
addDeviceInfo, getDeviceList
|
} from "@/api/area";
|
export default {
|
props: {
|
code: "",
|
areas: [],
|
init_device_list:[],
|
},
|
data() {
|
return {
|
device_list: [],
|
name: "",
|
selectcode: "",
|
selectswitch: "",
|
|
// colindex: 0,
|
// rowindex: 0,
|
open: false,
|
|
// selectswitchindex: "",
|
};
|
},
|
mounted(){
|
if(this.code){
|
this.selectcode = this.code
|
this.device_list = this.init_device_list || []
|
}
|
},
|
methods: {
|
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.name || !this.selectcode || !this.selectswitch){
|
this.$message.warning('数据未填写完整')
|
return
|
}
|
var deviceselect = {}
|
for (var device of this.device_list) {
|
if (device.id == this.selectswitch) {
|
deviceselect = device
|
break
|
}
|
}
|
await this.$modal.confirm('确定新增设备吗?')
|
|
var dto = {
|
operateType: 2,
|
networkPort: deviceselect.networkPort,
|
deviceInfo: {
|
...deviceselect,
|
areaCode: this.selectcode,
|
description: this.name,
|
}
|
}
|
const re = await addDeviceInfo(dto)
|
console.log('addDeviceInfo', re, info)
|
// this.open = false;
|
|
},
|
openform() {
|
if (this.open) {
|
this.open = !this.open;
|
} else {
|
//展开，显示表格
|
this.open = !this.open;
|
}
|
},
|
},
|
watch: {
|
code(newval, oldval) {
|
if (!this.selectcode || this.selectcode == oldval) {
|
this.selectcode = newval;
|
}
|
},
|
},
|
};
|
</script>
|
|
<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;
|
}
|
|
.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;
|
}
|
.label::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;
|
}
|
}
|
</style>
|
