修改登录策略

src/views/systemManagement/addSystem/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>
@@ -16,51 +10,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>
@@ -69,18 +38,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="IpList">
-              <el-input
-                placeholder="请输入"
-                v-model="FormData.TacDesc"
-              ></el-input>
+              <el-input placeholder="请输入" v-model="FormData.TacDesc"></el-input>
             </el-form-item>
           </div>
         </div>
@@ -92,31 +55,27 @@
           <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>
-                <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-row class="scCont" :gutter="16">
+            <el-checkbox-group @change="UnchangeChecked" v-model="UncheckList">
+              <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 flex">
+                        <span class="title">{{ item.UserName }}</span>
+                        <el-checkbox checked></el-checkbox>
+                      </div>
+                      <!-- <el-checkbox-group v-model="UncheckList" @change="UnchangeChecked(item, index)">
+                      <el-checkbox checked></el-checkbox>
+                    </el-checkbox-group> -->
+                    </div>
+                  </div>
+                </el-card>
+              </el-col>
+            </el-checkbox-group>
+          </el-row>
+          <el-empty v-if="FormData.UseList.length == 0" description="没有选取" style="margin: 0 auto"></el-empty>
         </div>
       </div>
 
@@ -124,36 +83,36 @@
         <div class="titleBtn">
           <span class="titleStyle">选择职员 </span>
           <div class="searchBox">
-            <el-input placeholder="请输入内容" v-model="keyWords"></el-input>
-            <el-button @click="getUserList()">搜索</el-button>
+            <el-input placeholder="请输入内容" clearable @clear="clearData" v-model="keyWords"></el-input>
+            <el-button @click="getUserData">搜索</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>
-                </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-row v-infinite-scroll="load" :infinite-scroll-distance="20" infinite-scroll-disabled="disabled" class="scCont scrollbar" :gutter="16">
+            <el-checkbox-group @change="changeChecked" v-model="checkList">
+              <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 flex">
+                        <span class="title">{{ item.UserName }}</span>
+                        <el-checkbox :label="index"></el-checkbox>
+                      </div>
+                      <!-- <el-checkbox-group v-model="checkList" @change="changeChecked(item, index)">
+                    <el-checkbox></el-checkbox>
+                  </el-checkbox-group> -->
+                    </div>
+                  </div>
+                </el-card>
+              </el-col>
+            </el-checkbox-group>
+          </el-row>
+          <template v-if="total > 1">
+            <p class="center" v-if="loading">加载中...</p>
+            <p class="center" v-if="noMore">没有更多数据了~</p>
+          </template>
+          <el-empty v-if="FormData.Unuselist.length == 0" description="没有内容" style="margin: 0 auto"></el-empty>
         </div>
       </div>
     </div>
@@ -164,18 +123,18 @@
 import { GetUserList } from "@/api/apiAuthority";
 import { SaveTac } from "@/api/systemConfiguration";
 export default {
-  data() {
+  data () {
     return {
       keyWords: "",
-      checkList: false,
+      checkList: [],
       UncheckList: true,
       options: [
         {
-          value: 1,
+          value: 0,
           label: "黑名单",
         },
         {
-          value: 2,
+          value: 1,
           label: "白名单",
         },
       ],
@@ -212,13 +171,37 @@ export default {
           { required: true, message: "请选择登录时间", trigger: "change" },
         ],
       },
+      pageNum: 1,
+      PageSize: 50,
+      loading: false,
+      total: null,
+      arrList: [],
+      dataList: [],
+      checkData: []
     };
   },
   created: function () {
-    this.getUserList();
+    this.getUserList({
+      QueryName: this.keyWords,
+      PageSize: this.PageSize,
+      PageIndex: this.pageNum
+    });
+  },
+  computed: {
+    noMore () {
+      return this.pageNum >= this.total
+    },
+    disabled () {
+      return this.loading || this.noMore
+    }
   },
   methods: {
-    save() {
+    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 () {
       let that = this;
       let ipArr = this.FormData.IpList.split(";");
       let isSave = true;
@@ -265,27 +248,44 @@ export default {
         }
       });
     },
-    getUserList() {
+    getUserList (obj) {
       return new Promise((resolve, reject) => {
-        GetUserList({ QueryName: this.keyWords })
-          .then((response) => {
-            if (response.code === 0) {
-              const { returnData } = response;
-              this.FormData.Unuselist = returnData;
+        this.loading = true;
+        GetUserList(obj)
+          .then((res) => {
+            if (res.code === 0) {
+              const datas = res.returnData.records;
+              const num = res.returnData.pages;
+              this.arrList.push(datas);
+              const arrs = this.arrList.flat();
+              const msgs = _.unionBy(arrs, "UserId");
+              this.FormData.Unuselist = msgs;
+              this.dataList = msgs;
+              this.total = num;
+              this.loading = false;
             }
             resolve();
           })
           .catch((error) => {
             reject(error);
+            this.loading = false;
           });
       });
     },
-    changeChecked(val, index) {
-      this.checkList = false;
-      this.FormData.UseList.push(val);
-      this.FormData.Unuselist.splice(index, 1);
+    changeChecked (arr) {
+      const datas = this.dataList;
+      datas.forEach((item, index) => {
+        arr.forEach(p => {
+          if (index == p) {
+            this.checkData.push(item);
+            this.FormData.Unuselist.splice(index, 1);
+          }
+        })
+      });
+      this.FormData.UseList = this.checkData;
+      this.checkList = [];
     },
-    UnchangeChecked(val, index) {
+    UnchangeChecked (val, index) {
       this.UncheckList = true;
       this.FormData.Unuselist.push(val);
       this.FormData.UseList.splice(index, 1);
@@ -298,6 +298,34 @@ export default {
       this.FormData.TimeBegin = data[0];
       this.FormData.TimeEnd = data[1];
     },
+    load () {
+      this.pageNum += 1;
+      this.getUserList({
+        QueryName: this.keyWords,
+        PageSize: this.PageSize,
+        PageIndex: this.pageNum
+      })
+    },
+    getUserData () {
+      this.arrList = [];
+      this.FormData.Unuselist = [];
+      this.pageNum = 1;
+      this.getUserList({
+        QueryName: this.keyWords,
+        PageSize: this.PageSize,
+        PageIndex: this.pageNum
+      })
+    },
+    clearData () {
+      this.arrList = [];
+      this.FormData.Unuselist = [];
+      this.pageNum = 1;
+      this.getUserList({
+        QueryName: '',
+        PageSize: this.PageSize,
+        PageIndex: this.pageNum
+      })
+    }
   },
 };
 </script>
@@ -435,11 +463,8 @@ export default {
 }
 .center-box {
   // max-height: calc(100% - 105px);
-  margin-top: 12px;
-  padding: 24px;
-  display: flex;
-  justify-content: flex-start;
-  flex-wrap: wrap;
+  // margin-top: 12px;
+  padding: 0 24px 24px 24px;
   // overflow: auto;
 }
 .colorTitle {
@@ -450,14 +475,15 @@ export default {
   justify-content: space-between;
   float: left;
 }
-.box-card {
+::v-deep .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;
+  .el-checkbox__label {
+    display: none;
+  }
 }
 
 // .center-box :hover {
@@ -465,14 +491,9 @@ export default {
 //   transform: translate(0, -5px);
 //   transition-delay: 0s !important;
 // }
-.header-top {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
 
 .title {
-  width: 80px;
+  max-width: 60px;
   height: 16px;
   font-size: 16px;
   font-weight: 400;