登录策略修改

src/views/systemManagement/EditSystem/index.vue

@@ -1,12 +1,6 @@
 <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>
@@ -18,51 +12,26 @@
         <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>
@@ -71,18 +40,12 @@
         <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>
@@ -93,32 +56,25 @@
         <div class="titleBtn">
           <span class="titleStyle">已分配职员 </span>
         </div>
-        <div class="center-box">
-          <el-card
-            class="box-card"
-            v-for="(item, index) in FormData.UseList"
-            :key="index"
-          >
-            <div class="lineTop"></div>
-            <div class="text item">
-              <div class="header-top">
-                <div class="header-mid">
-                  <span class="title">{{ item.UserName }}</span>
+        <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-card class="box-card">
+                <div class="lineTop"></div>
+                <div class="text item">
+                  <div class="header-top">
+                    <div class="header-mid">
+                      <span class="title">{{ item.UserName }}</span>
+                    </div>
+                    <el-checkbox-group v-model="UncheckList" @change="UnchangeChecked(item, index)">
+                      <el-checkbox checked></el-checkbox>
+                    </el-checkbox-group>
+                  </div>
                 </div>
-                <el-checkbox-group
-                  v-model="UncheckList"
-                  @change="UnchangeChecked(item, index)"
-                >
-                  <el-checkbox checked></el-checkbox>
-                </el-checkbox-group>
-              </div>
-            </div>
-          </el-card>
-          <el-empty
-            v-if="FormData.UseList.length == 0"
-            description="没有选取"
-            style="margin: 0 auto"
-          ></el-empty>
+              </el-card>
+            </el-col>
+          </el-row>
+          <el-empty v-if="FormData.UseList.length == 0" description="没有选取" style="margin: 0 auto"></el-empty>
         </div>
       </div>
 
@@ -126,36 +82,29 @@
         <div class="titleBtn">
           <span class="titleStyle">选择职员 </span>
           <div class="searchBox">
-            <el-input placeholder="请输入内容" 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-card
-            class="box-card"
-            v-for="(item, index) in FormData.Unuselist"
-            :key="index"
-          >
-            <div class="lineTop"></div>
-            <div class="text item">
-              <div class="header-top">
-                <div class="header-mid">
-                  <span class="title">{{ item.UserName }}</span>
+          <el-row class="scCont" :gutter="16">
+            <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>
+                    </div>
+                    <el-checkbox-group v-model="checkList" @change="changeChecked(item, index)">
+                      <el-checkbox></el-checkbox>
+                    </el-checkbox-group>
+                  </div>
                 </div>
-                <el-checkbox-group
-                  v-model="checkList"
-                  @change="changeChecked(item, index)"
-                >
-                  <el-checkbox></el-checkbox>
-                </el-checkbox-group>
-              </div>
-            </div>
-          </el-card>
-          <el-empty
-            v-if="FormData.Unuselist.length == 0"
-            description="没有内容"
-            style="margin: 0 auto"
-          ></el-empty>
+              </el-card>
+            </el-col>
+          </el-row>
+          <el-empty v-if="FormData.Unuselist.length == 0" description="没有内容" style="margin: 0 auto"></el-empty>
         </div>
       </div>
     </div>
@@ -165,13 +114,7 @@
         <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>
@@ -183,7 +126,7 @@
 import { EditTac, GetTacDetails, DeleteTac } from "@/api/systemConfiguration";
 import Dialog from "@/layout/components/Dialog";
 export default {
-  data() {
+  data () {
     return {
       flag: false,
       checkList: false,
@@ -245,26 +188,17 @@ export default {
   },
   components: { Dialog },
   methods: {
-    queryData() {
-      let that = this;
-      if (this.keyWords == "") {
-        this.FormData.Unuselist = this.Unuselist;
-      } else {
-        let list = this.Unuselist.filter(function (item) {
-          let str = item.UserName;
-          if (str != null && str.indexOf(that.keyWords) >= 0) {
-            return item;
-          }
-        });
-        this.FormData.Unuselist = list;
-      }
+    queryData () {
+      const search = this.keyWords;
+      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;
@@ -312,7 +246,7 @@ export default {
         }
       });
     },
-    getDetial(id) {
+    getDetial (id) {
       let that = this;
       return new Promise((resolve, reject) => {
         GetTacDetails({ TacId: id })
@@ -333,6 +267,7 @@ export default {
                 that.FormData.Unuselist = [];
               }
               that.Unuselist = that.FormData.Unuselist;
+              that.boxArr = _.cloneDeep(that.FormData.Unuselist);
             }
             resolve();
           })
@@ -341,12 +276,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);
@@ -364,7 +299,7 @@ export default {
       }
     },
     //删除
-    remove() {
+    remove () {
       let that = this;
       return new Promise((resolve, reject) => {
         DeleteTac({ TacId: this.FormData.TacId })
@@ -384,6 +319,9 @@ export default {
           });
       });
     },
+    clearData () {
+      this.FormData.Unuselist = this.boxArr;
+    }
   },
 };
 </script>
@@ -535,6 +473,9 @@ export default {
   flex-wrap: wrap;
   // overflow: auto;
 }
+.fpBox {
+  display: block;
+}
 .colorTitle {
   margin-top: 20px;
   width: 195px;
@@ -545,9 +486,7 @@ export default {
 }
 .box-card {
   margin-top: 16px;
-  width: 149px;
   height: 80px;
-  margin-right: 10px;
   background: #f5f7fa;
   box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
   border-radius: 8px;
@@ -565,7 +504,7 @@ export default {
 }
 
 .title {
-  width: 80px;
+  max-width: 60px;
   height: 16px;
   font-size: 16px;
   font-weight: 400;