310 lines
8.4 KiB
Vue
310 lines
8.4 KiB
Vue
<template>
|
|
<div>
|
|
<el-dialog title="对象管理" :visible.sync="dialogVisible" width="80%">
|
|
<div class="title">
|
|
<el-button style="margin-bottom: 10px" @click="addObj"
|
|
>新增对象</el-button
|
|
>
|
|
<p>只能添加两条数据</p>
|
|
</div>
|
|
|
|
<el-table :data="dxgl" style="width: 100%" border>
|
|
<el-table-column label="序号">
|
|
<template slot-scope="scope">
|
|
{{ scope.$index + 1 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="dx_name" label="对象名称"> </el-table-column>
|
|
<el-table-column prop="ip" 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"
|
|
@click="deleteRow(scope.$index, scope.row)"
|
|
>删除</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-dialog>
|
|
|
|
<el-dialog title="新增对象" :visible.sync="dialogVisible1" width="30%">
|
|
<div class="ip_address">
|
|
<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" style="width: 200px">
|
|
<el-option label="IPV4" value="IPV4"></el-option>
|
|
<el-option label="IPV6" value="IPV6"></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" style="width: 200px">
|
|
<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-form-item label="IP" prop="ip">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input v-model="ip1"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">. </el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="ip2"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="ip3"></el-input>
|
|
</el-col>
|
|
<el-col :span="1">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="ip4"></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="submitForm">保存</el-button>
|
|
<el-button @click="dialogVisible1 = false">取 消</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { SaveUserAnswer, GetUserAnswer } from "../api/user";
|
|
export default {
|
|
data() {
|
|
return {
|
|
dialogVisible: true,
|
|
user_id: "",
|
|
dialogVisible1: false,
|
|
labelPosition: "left",
|
|
dxgl: [],
|
|
ip1: "",
|
|
ip2: "",
|
|
ip3: "",
|
|
ip4: "",
|
|
ruleForm: {
|
|
iplx: "",
|
|
dxmc: "",
|
|
ip: "",
|
|
},
|
|
rules: {
|
|
iplx: [
|
|
{ required: true, trigger: "change", message: "选择一个ip类型" },
|
|
],
|
|
dxmc: [
|
|
{ required: true, trigger: "blur", message: "选择一个对象名称" },
|
|
],
|
|
ip: [
|
|
{
|
|
required: true,
|
|
validator: this.validateIpAddress,
|
|
},
|
|
],
|
|
},
|
|
json: {},
|
|
};
|
|
},
|
|
created() {
|
|
let that = this;
|
|
window.getParameter = that.getParameter;
|
|
this.GetUserAnswer();
|
|
},
|
|
methods: {
|
|
getParameter(data) {
|
|
console.log(data);
|
|
this.user_id = data.split("|")[0];
|
|
if (data.split("|")[1] == 1) {
|
|
this.$store.commit("setType", "GYWZ_yx");
|
|
} else {
|
|
this.$store.commit("setType", "GYWZ_wx");
|
|
}
|
|
},
|
|
//ip地址验证
|
|
validateIpAddress(rule, value, callback) {
|
|
if (this.ip1 + "." + this.ip2 + "." + this.ip3 + "." + this.ip4 === "") {
|
|
callback(new Error("请输入IP地址"));
|
|
} else if (
|
|
!/^(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]?)$/.test(
|
|
this.ip1 + "." + this.ip2 + "." + this.ip3 + "." + this.ip4
|
|
)
|
|
) {
|
|
callback(new Error("请输入有效的IP地址"));
|
|
} else {
|
|
callback();
|
|
}
|
|
},
|
|
submitForm(formName) {
|
|
this.$refs["ruleForm"].validate((valid) => {
|
|
if (valid) {
|
|
this.SaveUserAnswer();
|
|
} else {
|
|
console.log("error submit!!");
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
async SaveUserAnswer() {
|
|
//拿本地存的数据
|
|
if (this.dxgl.length == 2) {
|
|
return false;
|
|
}
|
|
var json = JSON.parse(sessionStorage.getItem(this.$store.state.type));
|
|
|
|
// console.log(this.dxgl);
|
|
let { data } = await SaveUserAnswer({
|
|
mark: `${this.$store.state.type}`,
|
|
user_id: this.user_id,
|
|
mark_value: JSON.stringify({ ...json, ...{ dxgl: this.dxgl } }),
|
|
});
|
|
console.log(data.state);
|
|
if (data.state) {
|
|
console.log(data.data.mark_value);
|
|
this.dxgl.push({
|
|
dx_name: this.ruleForm.dxmc,
|
|
iplx: this.ruleForm.iplx,
|
|
ip: this.ip1 + "." + this.ip2 + "." + this.ip3 + "." + this.ip4,
|
|
});
|
|
this.ruleForm.dxmc = "";
|
|
this.ruleForm.iplx = "";
|
|
this.ip1 = "";
|
|
this.ip2 = "";
|
|
this.ip3 = "";
|
|
this.ip4 = "";
|
|
this.$message({
|
|
message: "保存成功",
|
|
type: "success",
|
|
});
|
|
this.dialogVisible1 = false;
|
|
this.GetUserAnswer();
|
|
} else {
|
|
this.$message.error(data.message);
|
|
}
|
|
},
|
|
async GetUserAnswer() {
|
|
let { data } = await GetUserAnswer({
|
|
mark: `${this.$store.state.type}`,
|
|
user_id: this.user_id,
|
|
});
|
|
if (data.state && data.data) {
|
|
console.log(JSON.parse(data.data.mark_value).dxgl);
|
|
if (JSON.parse(data.data.mark_value).dxgl) {
|
|
this.dxgl = JSON.parse(data.data.mark_value).dxgl;
|
|
}
|
|
}
|
|
},
|
|
//删除
|
|
async deleteRow(index, rows) {
|
|
var json = JSON.parse(sessionStorage.getItem(this.$store.state.type));
|
|
this.dxgl.splice(index, 1);
|
|
let { data } = await SaveUserAnswer({
|
|
mark: `${this.$store.state.type}`,
|
|
user_id: this.user_id,
|
|
mark_value: JSON.stringify({ ...json, ...{ dxgl: this.dxgl } }),
|
|
});
|
|
console.log(data.data);
|
|
if (data.state) {
|
|
this.$message({
|
|
message: "删除成功",
|
|
type: "success",
|
|
});
|
|
} else {
|
|
this.$message.error("删除失败");
|
|
}
|
|
},
|
|
addObj() {
|
|
if (this.dxgl.length == 2) {
|
|
return;
|
|
}
|
|
this.dialogVisible1 = true;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped lang="less">
|
|
// /deep/ .ip_address {
|
|
// .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;
|
|
// }
|
|
// }
|
|
// }
|
|
.el-table--enable-row-hover .el-table__body tr:hover > td {
|
|
background-color: transparent !important;
|
|
}
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
p {
|
|
margin-left: 20px;
|
|
color: red;
|
|
}
|
|
}
|
|
.el-col-1 {
|
|
padding: 0px 4px;
|
|
line-height: 62px;
|
|
height: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.el-input__inner {
|
|
height: 30px;
|
|
}
|
|
|
|
.el-col-5 {
|
|
width: 43px;
|
|
height: 30px;
|
|
}
|
|
.el-table {
|
|
height: 400px;
|
|
}
|
|
</style>
|