修改

src/views/systemManagement/LoginPolicy/index.vue

@@ -2,40 +2,70 @@
   <div class="Box">
     <div class="centerBox">
       <div class="searchBox">
-        <Search :isAdd="false" @getSearchData="getSearchData" @clearSearchData="clearSearchData" :isSlot="true">
-          <el-button v-is="['logintac_btn_add']" class="btnAdd" @click="gotoAdd">新增策略</el-button>
+        <Search
+          :isAdd="false"
+          @getSearchData="getSearchData"
+          @clearSearchData="clearSearchData"
+          :isSlot="true"
+        >
+          <el-button v-is="['logintac_btn_add']" class="btnAdd" @click="gotoAdd"
+            >新增策略</el-button
+          >
         </Search>
       </div>
       <div class="content-box">
         <div v-if="tacList.length" class="contentBox">
-          <div v-infinite-scroll="load" :infinite-scroll-distance="20" infinite-scroll-disabled="disabled" class="center-box">
-            <el-card class="box-card" v-for="(item, index) in tacList" :key="index">
-              <button v-is="['logintac_btn_delete']" type="text" @click="open(item,index)" style="
-              float: right;
-              padding: 3px 0;
-              border: none;
-              color: #303133;
-              width: 20px;
-              background: #fff;
-            ">
-                ×
-              </button>
-              <div style="padding: 10px">
-                <div class="header-top">
-                  <div class="header-mid">
-                    <span class="title">{{ item.TacName }} </span>
+          <div
+            v-infinite-scroll="load"
+            :infinite-scroll-distance="20"
+            infinite-scroll-disabled="disabled"
+            class="center-box"
+          >
+            <el-row :gutter="24">
+              <el-col :span="4" v-for="(item, index) in tacList" :key="index">
+                <el-card class="box-card">
+                  <button
+                    v-is="['logintac_btn_delete']"
+                    type="text"
+                    @click="open(item, index)"
+                    style="
+                      float: right;
+                      padding: 3px 0;
+                      border: none;
+                      color: #303133;
+                      width: 20px;
+                      background: #fff;
+                      bottom: 23px;
+                    "
+                  >
+                    ×
+                  </button>
+                  <div style="padding: 10px">
+                    <div class="header-top">
+                      <div class="header-mid">
+                        <span class="title">{{ item.TacName }} </span>
+                      </div>
+                      <div
+                        class="loger"
+                        v-is="['logintac_btn_edit']"
+                        @click="EditStystem(item.TacId)"
+                      ></div>
+                    </div>
                   </div>
-                  <div class="loger" v-is="['logintac_btn_edit']" @click="EditStystem(item.TacId)"></div>
-                </div>
-              </div>
-            </el-card>
+                </el-card>
+              </el-col>
+            </el-row>
           </div>
           <template v-if="total > 1">
             <p class="center" v-if="loading">加载中...</p>
             <p class="center" v-if="noMore">没有更多数据了~</p>
           </template>
         </div>
-        <el-empty v-else description="没有内容" style="margin:0 auto"></el-empty>
+        <el-empty
+          v-else
+          description="没有内容"
+          style="margin: 0 auto"
+        ></el-empty>
       </div>
     </div>
 
@@ -49,7 +79,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>
@@ -63,7 +99,7 @@ import Dialog from "@/layout/components/Dialog";
 import { GetTacList, DeleteTac } from "@/api/systemConfiguration";
 export default {
   components: { Search, Dialog },
-  data () {
+  data() {
     return {
       flag: false, //弹框开关
       tacList: [],
@@ -75,29 +111,29 @@ export default {
       loading: false,
       total: null,
       dataList: [],
-      num: null
+      num: null,
     };
   },
-  created () {
+  created() {
     if (this.$route.query.keyWords) {
       this.keyWord = this.$route.query.keyWords;
     }
     this.getTacList({
       QueryName: this.keyWord,
       PageSize: this.PageSize,
-      PageIndex: this.pageNum
+      PageIndex: this.pageNum,
     });
   },
   computed: {
-    noMore () {
-      return this.pageNum >= this.total
+    noMore() {
+      return this.pageNum >= this.total;
+    },
+    disabled() {
+      return this.loading || this.noMore;
     },
-    disabled () {
-      return this.loading || this.noMore
-    }
   },
   methods: {
-    getSearchData (data) {
+    getSearchData(data) {
       this.keyWord = data;
       this.dataList = [];
       this.tacList = [];
@@ -105,21 +141,21 @@ export default {
       this.getTacList({
         QueryName: this.keyWord,
         PageSize: this.PageSize,
-        PageIndex: this.pageNum
+        PageIndex: this.pageNum,
       });
     },
-    clearSearchData () {
-      this.keyWord = '';
+    clearSearchData() {
+      this.keyWord = "";
       this.dataList = [];
       this.tacList = [];
       this.pageNum = 1;
       this.getTacList({
         QueryName: this.keyWord,
         PageSize: this.PageSize,
-        PageIndex: this.pageNum
+        PageIndex: this.pageNum,
       });
     },
-    getTacList (obj) {
+    getTacList(obj) {
       this.loading = true;
       return new Promise((resolve, reject) => {
         GetTacList(obj)
@@ -128,8 +164,8 @@ export default {
               const { returnData } = response;
               const datas = returnData.records;
               this.total = returnData.pages;
-              this.dataList.push(datas)
-              const arrs = this.dataList.flat()
+              this.dataList.push(datas);
+              const arrs = this.dataList.flat();
               this.tacList = arrs;
               this.loading = false;
             }
@@ -141,27 +177,27 @@ export default {
           });
       });
     },
-    gotoSystem () {
+    gotoSystem() {
       this.$router.push("/systemManagement");
     },
     // 新增页面
-    gotoAdd () {
+    gotoAdd() {
       this.$router.push("/addSystem");
     },
     //编辑页面
-    EditStystem (id) {
+    EditStystem(id) {
       this.$router.push({ path: "/EditSystem", query: { TacId: id } });
     },
     //删除
-    remove () {
+    remove() {
       return new Promise((resolve, reject) => {
         DeleteTac({ TacId: this.delItem.TacId })
           .then((response) => {
             if (response.code === 0) {
               this.delItem = null;
               this.$message.success("删除成功");
-              this.tacList.splice(this.delIndex, 1)
-              this.delIndex = null
+              this.tacList.splice(this.delIndex, 1);
+              this.delIndex = null;
               this.flag = false;
             }
             resolve();
@@ -172,20 +208,20 @@ export default {
           });
       });
     },
-    open (data, index) {
+    open(data, index) {
       this.delItem = data;
       this.delIndex = index;
       this.flag = true;
     },
     //滚动加载数据
-    load () {
-      this.pageNum += 1
+    load() {
+      this.pageNum += 1;
       this.getTacList({
         QueryName: this.keyWord,
         PageSize: this.PageSize,
-        PageIndex: this.pageNum
+        PageIndex: this.pageNum,
       });
-    }
+    },
   },
 };
 </script>
@@ -201,6 +237,10 @@ export default {
   margin-left: 24px;
   display: inline-block;
 }
+.header-mid {
+  display: flex;
+  align-items: center;
+}
 .loger:hover {
   cursor: pointer;
   background: url("../../../assets/status/ic_edit_hovar.png") no-repeat;
@@ -232,7 +272,7 @@ export default {
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
-  margin-left: 160px;
+  margin-left: 64px;
   width: calc(100% - 149px);
   height: 70vh;
   overflow-y: auto;
@@ -248,11 +288,11 @@ export default {
   float: left;
 }
 .box-card {
-  width: 254px;
+  width: 100%;
   height: 80px;
   margin-right: 10px;
   box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
-  border-radius: 16px;
+  border-radius: 12px;
   margin-top: 24px;
   position: relative;
   button {
@@ -278,9 +318,10 @@ export default {
   padding: 10px;
 }
 .title {
-  width: 120px;
+  // width: 120px;
+  max-width: 80px;
   height: 18px;
-  font-size: 18px;
+  font-size: 14px;
   font-weight: bold;
   color: #303133;
   display: inline-block;

src/views/systemManagement/addSystem/index.vue

@@ -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>
@@ -10,26 +16,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>
@@ -38,12 +69,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="IpList">
-              <el-input placeholder="请输入" v-model="FormData.TacDesc"></el-input>
+              <el-input
+                placeholder="请输入"
+                v-model="FormData.TacDesc"
+              ></el-input>
             </el-form-item>
           </div>
         </div>
@@ -57,7 +94,11 @@
         <div class="center-box">
           <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-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">
@@ -75,7 +116,11 @@
               </el-col>
             </el-checkbox-group>
           </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>
 
@@ -83,14 +128,29 @@
         <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="getUserData">搜索</el-button>
           </div>
         </div>
         <div class="center-box">
-          <el-row v-infinite-scroll="load" :infinite-scroll-distance="20" infinite-scroll-disabled="disabled" class="scCont scrollbar" :gutter="16">
+          <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-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">
@@ -112,7 +172,11 @@
             <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>
+          <el-empty
+            v-if="FormData.Unuselist.length == 0"
+            description="没有内容"
+            style="margin: 0 auto"
+          ></el-empty>
         </div>
       </div>
     </div>
@@ -123,7 +187,7 @@
 import { GetUserList } from "@/api/apiAuthority";
 import { SaveTac } from "@/api/systemConfiguration";
 export default {
-  data () {
+  data() {
     return {
       keyWords: "",
       checkList: [],
@@ -177,23 +241,23 @@ export default {
       total: null,
       arrList: [],
       dataList: [],
-      checkData: []
+      checkData: [],
     };
   },
   created: function () {
     this.getUserList({
       QueryName: this.keyWords,
       PageSize: this.PageSize,
-      PageIndex: this.pageNum
+      PageIndex: this.pageNum,
     });
   },
   computed: {
-    noMore () {
-      return this.pageNum >= this.total
+    noMore() {
+      return this.pageNum >= this.total;
+    },
+    disabled() {
+      return this.loading || this.noMore;
     },
-    disabled () {
-      return this.loading || this.noMore
-    }
   },
   methods: {
     isValidIP: function (ip) {
@@ -201,11 +265,11 @@ 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 = this.FormData.IpList.split(";");
       let isSave = true;
-      if (ipArr.length > 0) {
+      if (ipArr.length >= 2) {
         ipArr.forEach((item) => {
           if (this.isValidIP(item) == false) {
             this.$message.error("请输入正确IP段，并以;号隔开");
@@ -248,7 +312,7 @@ export default {
         }
       });
     },
-    getUserList (obj) {
+    getUserList(obj) {
       return new Promise((resolve, reject) => {
         this.loading = true;
         GetUserList(obj)
@@ -272,20 +336,20 @@ export default {
           });
       });
     },
-    changeChecked (arr) {
+    changeChecked(arr) {
       const datas = this.dataList;
       datas.forEach((item, index) => {
-        arr.forEach(p => {
+        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,34 +362,34 @@ export default {
       this.FormData.TimeBegin = data[0];
       this.FormData.TimeEnd = data[1];
     },
-    load () {
+    load() {
       this.pageNum += 1;
       this.getUserList({
         QueryName: this.keyWords,
         PageSize: this.PageSize,
-        PageIndex: this.pageNum
-      })
+        PageIndex: this.pageNum,
+      });
     },
-    getUserData () {
+    getUserData() {
       this.arrList = [];
       this.FormData.Unuselist = [];
       this.pageNum = 1;
       this.getUserList({
         QueryName: this.keyWords,
         PageSize: this.PageSize,
-        PageIndex: this.pageNum
-      })
+        PageIndex: this.pageNum,
+      });
     },
-    clearData () {
+    clearData() {
       this.arrList = [];
       this.FormData.Unuselist = [];
       this.pageNum = 1;
       this.getUserList({
-        QueryName: '',
+        QueryName: "",
         PageSize: this.PageSize,
-        PageIndex: this.pageNum
-      })
-    }
+        PageIndex: this.pageNum,
+      });
+    },
   },
 };
 </script>