177 lines
5.6 KiB
Vue
177 lines
5.6 KiB
Vue
<template>
|
|
<div>
|
|
<el-button @click="dialogVisible = true">网络管理</el-button>
|
|
|
|
<el-dialog title="网络管理" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
|
|
<div class="net_setting">
|
|
<h3>内网网卡</h3>
|
|
<el-divider></el-divider>
|
|
<el-table :data="tableData" style="width: 100%" border>
|
|
<el-table-column prop="name" label="网卡名称"> </el-table-column>
|
|
<el-table-column prop="ipv4Address" label="IPV4地址">
|
|
<template slot-scope="scope">
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">. </el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="ipv4Code" label="IPV4掩码">
|
|
<template slot-scope="scope">
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">. </el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row></template></el-table-column>
|
|
</el-table>
|
|
<h3>外网网卡</h3>
|
|
<el-divider></el-divider>
|
|
<el-table :data="tableData1" style="width: 100%" border>
|
|
<el-table-column prop="name" label="网卡名称"> </el-table-column>
|
|
<el-table-column prop="ipv4Address" label="IPV4地址">
|
|
<template slot-scope="scope">
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">. </el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="ipv4Code" label="IPV4掩码">
|
|
<template slot-scope="scope">
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">. </el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input1"></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row></template></el-table-column>
|
|
</el-table>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="dialogVisible = false">保存</el-button>
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
</span>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
dialogVisible: false,
|
|
tableData: [
|
|
{
|
|
name: "内网网卡1",
|
|
ipv4Address: "",
|
|
ipv4Code: "",
|
|
},
|
|
],
|
|
tableData1: [
|
|
{
|
|
name: "外网网卡1",
|
|
ipv4Address: "",
|
|
ipv4Code: "",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
<style scope lang="less">
|
|
/deep/ .net_setting {
|
|
.el-input__inner {
|
|
height: 30px;
|
|
text-align: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.el-table__row {
|
|
.el-row {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
|
|
.el-col-1 {
|
|
padding: 0px 2px;
|
|
color: black;
|
|
text-align: left;
|
|
line-height: 32px;
|
|
height: 20px;
|
|
}
|
|
|
|
.el-col-5 {
|
|
width: 43px;
|
|
height: 30px;
|
|
}
|
|
|
|
.el-col-24 {
|
|
padding-right: 152px
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|