|
@@ -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="FormData.TacName"></el-input>
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ v-model="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="FormData.IpList"></el-input>
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入IP,并以‘;’号隔开"
|
|
|
+ v-model="FormData.IpList"
|
|
|
+ ></el-input>
|
|
|
</el-form-item>
|
|
|
</div>
|
|
|
<div class="inputBox3">
|
|
|
<el-form-item label="描述" prop="TacDesc">
|
|
|
- <el-input placeholder="请输入" v-model="FormData.TacDesc"></el-input>
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ v-model="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,21 +130,35 @@
|
|
|
<div class="titleBtn">
|
|
|
<span class="titleStyle">选择职员 </span>
|
|
|
<div class="searchBox">
|
|
|
- <el-input placeholder="请输入内容" clearable @clear="clearData" v-model="keyWords"></el-input>
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入内容"
|
|
|
+ clearable
|
|
|
+ @clear="clearData"
|
|
|
+ v-model="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">
|
|
|
<div class="header-top">
|
|
|
<div class="header-mid">
|
|
|
- <span :title="item.UserName" class="title">{{ item.UserName }}</span>
|
|
|
+ <span :title="item.UserName" class="title">{{
|
|
|
+ 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>
|
|
@@ -104,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>
|
|
@@ -114,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>
|
|
@@ -126,7 +198,7 @@
|
|
|
import { EditTac, GetTacDetails, DeleteTac } from "@/api/systemConfiguration";
|
|
|
import Dialog from "@/layout/components/Dialog";
|
|
|
export default {
|
|
|
- data () {
|
|
|
+ data() {
|
|
|
return {
|
|
|
flag: false,
|
|
|
checkList: false,
|
|
@@ -188,17 +260,20 @@ export default {
|
|
|
},
|
|
|
components: { Dialog },
|
|
|
methods: {
|
|
|
- queryData () {
|
|
|
+ queryData() {
|
|
|
const search = this.keyWords;
|
|
|
- const datas = this.FormData.Unuselist
|
|
|
- this.FormData.Unuselist = datas.filter(data => !search || data.UserName.toLowerCase().includes(search.toLowerCase()))
|
|
|
+ const datas = this.FormData.Unuselist;
|
|
|
+ this.FormData.Unuselist = datas.filter(
|
|
|
+ (data) =>
|
|
|
+ !search || data.UserName.toLowerCase().includes(search.toLowerCase())
|
|
|
+ );
|
|
|
},
|
|
|
isValidIP: function (ip) {
|
|
|
let reg =
|
|
|
/^(\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 = this.FormData.IpList.split(";");
|
|
|
let isSave = true;
|
|
@@ -246,7 +321,7 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- getDetial (id) {
|
|
|
+ getDetial(id) {
|
|
|
let that = this;
|
|
|
return new Promise((resolve, reject) => {
|
|
|
GetTacDetails({ TacId: id })
|
|
@@ -276,12 +351,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);
|
|
@@ -299,7 +374,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
//删除
|
|
|
- remove () {
|
|
|
+ remove() {
|
|
|
let that = this;
|
|
|
return new Promise((resolve, reject) => {
|
|
|
DeleteTac({ TacId: this.FormData.TacId })
|
|
@@ -319,9 +394,9 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
- clearData () {
|
|
|
+ clearData() {
|
|
|
this.FormData.Unuselist = this.boxArr;
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
@@ -456,6 +531,7 @@ export default {
|
|
|
.centerBox {
|
|
|
display: flex;
|
|
|
margin-top: 23px;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
.leftB {
|
|
|
width: 1242px;
|
|
@@ -527,6 +603,17 @@ export default {
|
|
|
border-radius: 16px;
|
|
|
margin-left: 40px;
|
|
|
overflow: auto;
|
|
|
+ > .titleBtn {
|
|
|
+ width: 610px;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 99;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ background: #ffffff;
|
|
|
+ }
|
|
|
+ > .center-box {
|
|
|
+ margin-top: 41px;
|
|
|
+ }
|
|
|
.searchBox {
|
|
|
display: flex;
|
|
|
}
|