<template>
|
<div class="formNet">
|
<el-form ref="form" :model="form" label-width="80px">
|
<el-form-item label="网卡">
|
<el-select
|
v-model="form.netName"
|
placeholder="请选择网卡"
|
popper-class="formNet_select"
|
>
|
<el-option
|
v-for="(item, index) in options"
|
:key="index"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="IP">
|
<ipInput :ip="form.ip" @on-blur="form.ip = arguments[0]"></ipInput>
|
</el-form-item>
|
|
<el-form-item label="子网掩码">
|
<ipInput
|
:ip="form.subMask"
|
@on-blur="form.subMask = arguments[0]"
|
></ipInput>
|
</el-form-item>
|
|
<el-form-item label="网关">
|
<ipInput
|
:ip="form.gateway"
|
@on-blur="form.gateway = arguments[0]"
|
></ipInput>
|
</el-form-item>
|
|
<el-form-item label="DNS">
|
<ipInput :ip="form.dns" @on-blur="form.dns = arguments[0]"></ipInput>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
import ipInput from "../components/IPInput";
|
import { networkList } from "../api";
|
|
export default {
|
created() {
|
this.networkList();
|
},
|
data() {
|
return {
|
form: { netName: "", ip: "", subMask: "", gateway: "", dns: "" },
|
|
options: [],
|
};
|
},
|
components: {
|
ipInput,
|
},
|
methods: {
|
getFormData() {
|
return this.form;
|
},
|
async networkList() {
|
const res = await networkList();
|
res.data.forEach((item) => {
|
this.options.push({
|
value: item.name,
|
label: item.name,
|
});
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.formNet {
|
.el-form-item ::v-deep {
|
label {
|
font-size: 14px;
|
color: #fff;
|
text-align-last: left;
|
}
|
|
.el-form-item__content {
|
margin-left: 110px !important;
|
}
|
}
|
|
.ip-input-container ::v-deep {
|
background-color: rgba(0, 0, 0, 0.1);
|
border: none !important;
|
height: 40px;
|
max-width: none;
|
|
.ip-segment-input {
|
color: #fff;
|
}
|
}
|
|
.el-select ::v-deep {
|
width: 100%;
|
|
input {
|
background-color: rgba(0, 0, 0, 0.1);
|
border: none !important;
|
color: #fff;
|
}
|
}
|
}
|
</style>
|
|
<style lang="scss">
|
.el-select-dropdown.el-popper.formNet_select {
|
background-color: rgb(60, 62, 99);
|
|
border: none;
|
margin: 0 0;
|
z-index: 5;
|
|
* {
|
color: #fff;
|
}
|
|
li {
|
z-index: 4;
|
}
|
.el-select-dropdown__item.hover {
|
background-color: rgba(85, 82, 117) !important;
|
}
|
|
.popper__arrow::after,
|
.popper__arrow {
|
display: none;
|
}
|
}
|
</style>
|
