|
@@ -1,6 +1,12 @@
|
|
|
<template>
|
|
|
<div class="Box">
|
|
|
- <el-form :model="FormData" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
|
|
+ <el-form
|
|
|
+ :model="FormData"
|
|
|
+ :rules="rules"
|
|
|
+ ref="ruleForm"
|
|
|
+ label-width="100px"
|
|
|
+ class="demo-ruleForm"
|
|
|
+ >
|
|
|
<div class="topBox">
|
|
|
<div class="titleBtn">
|
|
|
<span class="titleStyle">策略信息编辑 </span>
|
|
@@ -12,26 +18,51 @@
|
|
|
<div class="fristLine">
|
|
|
<div class="inputBox">
|
|
|
<el-form-item label="策略名称" prop="TacName">
|
|
|
- <el-input placeholder="请输入" v-model.trim="FormData.TacName"></el-input>
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ v-model.trim="FormData.TacName"
|
|
|
+ ></el-input>
|
|
|
</el-form-item>
|
|
|
</div>
|
|
|
<div class="inputBox">
|
|
|
<el-form-item label="IP类型" prop="IpType">
|
|
|
<el-select v-model="FormData.IpType" placeholder="请选择类型">
|
|
|
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</div>
|
|
|
<div class="block inputBox1">
|
|
|
<el-form-item label="登录日期" prop="Date">
|
|
|
- <el-date-picker v-model="FormData.Date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="dataChange" value-format="yyyy-MM-dd">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="FormData.Date"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ @change="dataChange"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ >
|
|
|
</el-date-picker>
|
|
|
</el-form-item>
|
|
|
</div>
|
|
|
<div class="block inputBox1">
|
|
|
<el-form-item label="登录时间" prop="Time">
|
|
|
- <el-time-picker is-range v-model="FormData.Time" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" @change="timeChange" value-format="HH:mm:ss">
|
|
|
+ <el-time-picker
|
|
|
+ is-range
|
|
|
+ v-model="FormData.Time"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始时间"
|
|
|
+ end-placeholder="结束时间"
|
|
|
+ placeholder="选择时间范围"
|
|
|
+ @change="timeChange"
|
|
|
+ value-format="HH:mm:ss"
|
|
|
+ >
|
|
|
</el-time-picker>
|
|
|
</el-form-item>
|
|
|
</div>
|
|
@@ -40,12 +71,18 @@
|
|
|
<div class="fristLine" style="margin-top: 24px">
|
|
|
<div class="inputBox2">
|
|
|
<el-form-item label="IP段" prop="IpList">
|
|
|
- <el-input placeholder="请输入IP,并以‘;’号隔开" v-model.trim="FormData.IpList"></el-input>
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入IP,并以‘;’号隔开"
|
|
|
+ v-model.trim="FormData.IpList"
|
|
|
+ ></el-input>
|
|
|
</el-form-item>
|
|
|
</div>
|
|
|
<div class="inputBox3">
|
|
|
<el-form-item label="描述" prop="TacDesc">
|
|
|
- <el-input placeholder="请输入" v-model.trim="FormData.TacDesc"></el-input>
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ v-model.trim="FormData.TacDesc"
|
|
|
+ ></el-input>
|
|
|
</el-form-item>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -58,7 +95,11 @@
|
|
|
</div>
|
|
|
<div class="center-box fpBox">
|
|
|
<el-row class="scCont" :gutter="16">
|
|
|
- <el-col :span="4" v-for="(item, index) in FormData.UseList" :key="index">
|
|
|
+ <el-col
|
|
|
+ :span="4"
|
|
|
+ v-for="(item, index) in FormData.UseList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
<el-card class="box-card">
|
|
|
<div class="lineTop"></div>
|
|
|
<div class="text item">
|
|
@@ -66,7 +107,10 @@
|
|
|
<div class="header-mid">
|
|
|
<span class="title">{{ item.UserName }}</span>
|
|
|
</div>
|
|
|
- <el-checkbox-group v-model="UncheckList" @change="UnchangeChecked(item, index)">
|
|
|
+ <el-checkbox-group
|
|
|
+ v-model="UncheckList"
|
|
|
+ @change="UnchangeChecked(item, index)"
|
|
|
+ >
|
|
|
<el-checkbox checked></el-checkbox>
|
|
|
</el-checkbox-group>
|
|
|
</div>
|
|
@@ -74,7 +118,11 @@
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
- <el-empty v-if="FormData.UseList.length == 0" description="没有选取" style="margin: 0 auto"></el-empty>
|
|
|
+ <el-empty
|
|
|
+ v-if="FormData.UseList.length == 0"
|
|
|
+ description="没有选取"
|
|
|
+ style="margin: 0 auto"
|
|
|
+ ></el-empty>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
@@ -82,13 +130,22 @@
|
|
|
<div class="titleBtn">
|
|
|
<span class="titleStyle">选择职员 </span>
|
|
|
<div class="searchBox">
|
|
|
- <el-input placeholder="请输入内容" clearable @clear="clearData" v-model.trim="keyWords"></el-input>
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入内容"
|
|
|
+ clearable
|
|
|
+ @clear="clearData"
|
|
|
+ v-model.trim="keyWords"
|
|
|
+ ></el-input>
|
|
|
<el-button @click="queryData()">搜索</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="center-box">
|
|
|
<el-row class="scCont" :gutter="16">
|
|
|
- <el-col :span="6" v-for="(item, index) in FormData.Unuselist" :key="index">
|
|
|
+ <el-col
|
|
|
+ :span="6"
|
|
|
+ v-for="(item, index) in FormData.Unuselist"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
<el-card class="box-card">
|
|
|
<div class="lineTop"></div>
|
|
|
<div class="text item">
|
|
@@ -98,7 +155,10 @@
|
|
|
item.UserName
|
|
|
}}</span>
|
|
|
</div>
|
|
|
- <el-checkbox-group v-model="checkList" @change="changeChecked(item, index)">
|
|
|
+ <el-checkbox-group
|
|
|
+ v-model="checkList"
|
|
|
+ @change="changeChecked(item, index)"
|
|
|
+ >
|
|
|
<el-checkbox></el-checkbox>
|
|
|
</el-checkbox-group>
|
|
|
</div>
|
|
@@ -106,7 +166,11 @@
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
- <el-empty v-if="FormData.Unuselist.length == 0" description="没有内容" style="margin: 0 auto"></el-empty>
|
|
|
+ <el-empty
|
|
|
+ v-if="FormData.Unuselist.length == 0"
|
|
|
+ description="没有内容"
|
|
|
+ style="margin: 0 auto"
|
|
|
+ ></el-empty>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -116,7 +180,13 @@
|
|
|
<div class="title1">删除策略</div>
|
|
|
<div class="content">是否确认删除该策略?</div>
|
|
|
<div class="foot right t30">
|
|
|
- <el-button size="medium" @click="remove(item, index)" type="danger" class="r24">删除</el-button>
|
|
|
+ <el-button
|
|
|
+ size="medium"
|
|
|
+ @click="remove(item, index)"
|
|
|
+ type="danger"
|
|
|
+ class="r24"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
<el-button size="medium" @click="flag = false">取消</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -130,7 +200,7 @@ import Dialog from "@/layout/components/Dialog";
|
|
|
import { findarrays } from "@/utils/validate";
|
|
|
import { lengthValidator } from "@/utils/validate";
|
|
|
export default {
|
|
|
- data () {
|
|
|
+ data() {
|
|
|
return {
|
|
|
flag: false,
|
|
|
checkList: false,
|
|
@@ -193,8 +263,8 @@ export default {
|
|
|
max: 256,
|
|
|
message: "长度在 1 到 256 个字符",
|
|
|
trigger: ["change", "blur"],
|
|
|
- }
|
|
|
- ]
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
editId: null,
|
|
|
};
|
|
@@ -205,14 +275,14 @@ export default {
|
|
|
},
|
|
|
components: { Dialog },
|
|
|
watch: {
|
|
|
- keyWords () {
|
|
|
+ keyWords() {
|
|
|
if (this.keyWords.length == 0) {
|
|
|
this.getDetial(this.editId);
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
methods: {
|
|
|
- queryData () {
|
|
|
+ queryData() {
|
|
|
this.keyWords = this.keyWords.replace(/\s+/g, "");
|
|
|
const search = this.keyWords;
|
|
|
if (search) {
|
|
@@ -236,7 +306,7 @@ export default {
|
|
|
/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
|
|
|
return reg.test(ip);
|
|
|
},
|
|
|
- save () {
|
|
|
+ save() {
|
|
|
let that = this;
|
|
|
let ipArr = [];
|
|
|
if (this.FormData.IpList) {
|
|
@@ -292,7 +362,7 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- getDetial (id) {
|
|
|
+ getDetial(id) {
|
|
|
let that = this;
|
|
|
return new Promise((resolve, reject) => {
|
|
|
GetTacDetails({ TacId: id })
|
|
@@ -322,12 +392,12 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
- changeChecked (val, index) {
|
|
|
+ changeChecked(val, index) {
|
|
|
this.checkList = false;
|
|
|
this.FormData.UseList.push(val);
|
|
|
this.FormData.Unuselist.splice(index, 1);
|
|
|
},
|
|
|
- UnchangeChecked (val, index) {
|
|
|
+ UnchangeChecked(val, index) {
|
|
|
this.UncheckList = true;
|
|
|
this.FormData.Unuselist.push(val);
|
|
|
this.FormData.UseList.splice(index, 1);
|
|
@@ -345,7 +415,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
//删除
|
|
|
- remove () {
|
|
|
+ remove() {
|
|
|
let that = this;
|
|
|
return new Promise((resolve, reject) => {
|
|
|
DeleteTac({ TacId: this.FormData.TacId })
|
|
@@ -365,7 +435,7 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
- clearData () {
|
|
|
+ clearData() {
|
|
|
this.FormData.Unuselist = this.boxArr;
|
|
|
},
|
|
|
},
|
|
@@ -449,9 +519,9 @@ export default {
|
|
|
}
|
|
|
.inputBox .el-input__inner {
|
|
|
width: 184px;
|
|
|
- height: 40px;
|
|
|
+ height: 32px;
|
|
|
background: #f5f7fa;
|
|
|
- border: 1px solid #dcdfe6;
|
|
|
+ // border: 1px solid #dcdfe6;
|
|
|
border-radius: 6px;
|
|
|
}
|
|
|
.el-select__caret {
|
|
@@ -461,7 +531,7 @@ export default {
|
|
|
}
|
|
|
.inputBox1 .el-date-editor {
|
|
|
width: 322px;
|
|
|
- height: 40px;
|
|
|
+ height: 32px;
|
|
|
line-height: 40px;
|
|
|
background: #f5f7fa;
|
|
|
border: 1px solid #dcdfe6;
|
|
@@ -476,16 +546,16 @@ export default {
|
|
|
}
|
|
|
.inputBox2 .el-input__inner {
|
|
|
width: 468px;
|
|
|
- height: 40px;
|
|
|
+ height: 32px;
|
|
|
background: #f5f7fa;
|
|
|
- border: 1px solid #dcdfe6;
|
|
|
+ // border: 1px solid #dcdfe6;
|
|
|
border-radius: 6px;
|
|
|
}
|
|
|
.inputBox3 .el-input__inner {
|
|
|
width: 500px;
|
|
|
- height: 40px;
|
|
|
+ height: 32px;
|
|
|
background: #f5f7fa;
|
|
|
- border: 1px solid #dcdfe6;
|
|
|
+ // border: 1px solid #dcdfe6;
|
|
|
border-radius: 6px;
|
|
|
}
|
|
|
}
|