136 lines
4.1 KiB
Vue
136 lines
4.1 KiB
Vue
<template>
|
|
<div>
|
|
<el-button @click="dialogVisible = true">对象管理</el-button>
|
|
<el-dialog title="对象管理" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
|
|
<el-button style="margin-bottom: 10px" @click="dialogVisible1 = true">新增对象</el-button>
|
|
<el-table :data="tableData" style="width: 100%" border>
|
|
<el-table-column label="序号">
|
|
<template slot-scope="scope">
|
|
{{ scope.$index + 1 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="name" label="对象名称"> </el-table-column>
|
|
<el-table-column prop="address" label="IP地址信息"> </el-table-column>
|
|
<el-table-column fixed="right" label="操作" width="100">
|
|
<template slot-scope="scope">
|
|
<el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
|
|
<el-button type="text" size="small">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-dialog>
|
|
|
|
<el-dialog title="新增对象" :visible.sync="dialogVisible1" width="30%" :before-close="handleClose">
|
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm"
|
|
:label-position="labelPosition">
|
|
<el-form-item label="IP类型:" prop="iplx">
|
|
<el-col :span="10">
|
|
<el-select v-model="ruleForm.iplx">
|
|
<el-option label="IP4" value="IP4"></el-option>
|
|
<el-option label="IP6" value="IP6"></el-option>
|
|
</el-select>
|
|
</el-col>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="对象名称:" prop="dxmc">
|
|
<el-col :span="10">
|
|
<el-select v-model="ruleForm.dxmc">
|
|
<el-option label="有线区交换机" value="有线区交换机"></el-option>
|
|
<el-option label="无线区路由器" value="无线区路由器"></el-option>
|
|
<el-option label="数采服务器" value="数采服务器"></el-option>
|
|
</el-select>
|
|
</el-col>
|
|
</el-form-item>
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-form-item label="IP地址:" prop="ipdz">
|
|
<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="input2"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input3"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="input4"></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="dialogVisible1 = false">保存</el-button>
|
|
<el-button @click="dialogVisible1 = false">取 消</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
dialogVisible: false,
|
|
dialogVisible1: false,
|
|
labelPosition: "left",
|
|
tableData: [
|
|
{
|
|
name: "数来服务器",
|
|
address: "192.168.89.21",
|
|
},
|
|
{
|
|
name: "网关1",
|
|
address: "192.168.89.16",
|
|
},
|
|
],
|
|
ruleForm: {
|
|
iplx: "IP4",
|
|
dxmc: "有线区交换机",
|
|
},
|
|
rules: {
|
|
iplx: [{ required: true, trigger: "change" }],
|
|
dxmc: [{ required: true, trigger: "blur" }],
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
handleClick() { },
|
|
},
|
|
};
|
|
</script>
|
|
<style scope lang="less">
|
|
/deep/ .el-input__inner {
|
|
height: 30px;
|
|
text-align: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.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>
|