修改样式

src/views/systemManagement/EditSystem/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>
@@ -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>
@@ -56,24 +93,35 @@
         <div class="titleBtn">
           <span class="titleStyle">已分配职员 </span>
           <div class="searchBox">
-            <el-input placeholder="请输入内容" clearable v-model.trim="keyWordsUp" @keyup.enter.native="queryDatas"></el-input>
+            <el-input
+              placeholder="请输入内容"
+              clearable
+              v-model.trim="keyWordsUp"
+              @keyup.enter.native="queryDatas"
+            ></el-input>
             <el-button @click="queryDatas()">搜索</el-button>
           </div>
         </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">
                   <div class="header-top">
                     <div class="header-mid">
-                      <!-- <span class="title">{{ item.UserName }}</span> -->
                       <span :title="item.UserName" 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>
@@ -81,7 +129,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>
 
@@ -89,13 +141,23 @@
         <div class="titleBtn">
           <span class="titleStyle">选择职员 </span>
           <div class="searchBox">
-            <el-input placeholder="请输入内容" clearable @clear="clearData" v-model.trim="keyWords" @keyup.enter.native="queryData"></el-input>
+            <el-input
+              placeholder="请输入内容"
+              clearable
+              @clear="clearData"
+              v-model.trim="keyWords"
+              @keyup.enter.native="queryData"
+            ></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">
@@ -105,7 +167,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>
@@ -113,7 +178,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>
@@ -123,7 +192,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>
@@ -137,7 +212,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,
@@ -214,26 +289,26 @@ export default {
   },
   components: { Dialog },
   watch: {
-    keyWords () {
+    keyWords() {
       if (this.keyWords.length == 0) {
         this.getDetial(this.editId);
       }
     },
-    keyWordsUp () {
+    keyWordsUp() {
       if (this.keyWordsUp.length == 0) {
         this.FormData.UseList = this.FormData.UseLists;
       }
     },
   },
   methods: {
-    compare (property) {
+    compare(property) {
       return function (a, b) {
         var value1 = a[property];
         var value2 = b[property];
         return value1 - value2;
       };
     },
-    queryDatas () {
+    queryDatas() {
       this.keyWordsUp = this.keyWordsUp.replace(/\s+/g, "");
       const search = this.keyWordsUp;
       if (search) {
@@ -246,7 +321,7 @@ export default {
         this.FormData.UseList = this.FormData.UseLists;
       }
     },
-    queryData () {
+    queryData() {
       this.keyWords = this.keyWords.replace(/\s+/g, "");
       const search = this.keyWords;
       if (search) {
@@ -270,7 +345,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) {
@@ -326,7 +401,7 @@ export default {
         }
       });
     },
-    getDetial (id) {
+    getDetial(id) {
       let that = this;
       return new Promise((resolve, reject) => {
         GetTacDetails({ TacId: id })
@@ -359,14 +434,14 @@ export default {
           });
       });
     },
-    changeChecked (val, index) {
+    changeChecked(val, index) {
       this.checkList = false;
       this.FormData.UseList.push(val);
       this.FormData.UseLists = this.FormData.UseList;
       this.FormData.Unuselist.splice(index, 1);
     },
 
-    UnchangeChecked (val, index) {
+    UnchangeChecked(val, index) {
       this.UncheckList = true;
       this.FormData.Unuselist.push(val);
       this.FormData.Unuselist = this.FormData.Unuselist.sort(
@@ -391,7 +466,7 @@ export default {
       }
     },
     //删除
-    remove () {
+    remove() {
       let that = this;
       return new Promise((resolve, reject) => {
         DeleteTac({ TacId: this.FormData.TacId })
@@ -411,7 +486,7 @@ export default {
           });
       });
     },
-    clearData () {
+    clearData() {
       this.FormData.Unuselist = this.boxArr;
     },
   },
@@ -559,6 +634,7 @@ export default {
   background: #ffffff;
   box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
   border-radius: 4px;
+  overflow: auto;
   .searchBox {
     display: flex;
   }

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.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>
@@ -38,12 +69,18 @@
         <div class="fristLine" style="margin-top: 24px">
           <div class="inputBox2">
             <el-form-item prop="IpList" label="IP段">
-              <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>
@@ -54,13 +91,22 @@
         <div class="titleBtn">
           <span class="titleStyle">已分配职员 </span>
           <div class="searchBox">
-            <el-input placeholder="请输入内容" clearable v-model.trim="keyWordsUp" @keyup.enter.native="queryDatas"></el-input>
+            <el-input
+              placeholder="请输入内容"
+              clearable
+              v-model.trim="keyWordsUp"
+              @keyup.enter.native="queryDatas"
+            ></el-input>
             <el-button @click="queryDatas()">搜索</el-button>
           </div>
         </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">
@@ -70,7 +116,10 @@
                         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>
@@ -78,7 +127,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>
 
@@ -86,13 +139,23 @@
         <div class="titleBtn">
           <span class="titleStyle">选择职员 </span>
           <div class="searchBox">
-            <el-input placeholder="请输入内容" clearable @clear="clearData" v-model.trim="keyWords" @keyup.enter.native="getUserData"></el-input>
+            <el-input
+              placeholder="请输入内容"
+              clearable
+              @clear="clearData"
+              v-model.trim="keyWords"
+              @keyup.enter.native="getUserData"
+            ></el-input>
             <el-button @click="getUserData">搜索</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">
@@ -102,7 +165,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>
@@ -110,7 +176,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>
@@ -123,7 +193,7 @@ import { SaveTac } from "@/api/systemConfiguration";
 import { findarrays } from "@/utils/validate";
 import { lengthValidator } from "@/utils/validate";
 export default {
-  data () {
+  data() {
     return {
       keyWordsUp: "",
       keyWords: "",
@@ -207,15 +277,15 @@ export default {
     });
   },
   computed: {
-    noMore () {
+    noMore() {
       return this.pageNum >= this.total;
     },
-    disabled () {
+    disabled() {
       return this.loading || this.noMore;
     },
   },
   watch: {
-    keyWords () {
+    keyWords() {
       if (this.keyWords.length == 0) {
         this.getUserList({
           QueryName: this.keyWords,
@@ -224,7 +294,7 @@ export default {
         });
       }
     },
-    keyWordsUp () {
+    keyWordsUp() {
       if (this.keyWordsUp.length == 0) {
         this.FormData.UseList = this.FormData.UseLists;
       }
@@ -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) {
@@ -291,7 +361,7 @@ export default {
         }
       });
     },
-    getUserList (obj) {
+    getUserList(obj) {
       return new Promise((resolve, reject) => {
         this.loading = true;
         GetUserList(obj)
@@ -322,20 +392,20 @@ export default {
           });
       });
     },
-    changeChecked (val, index) {
+    changeChecked(val, index) {
       this.checkList = false;
       this.FormData.UseList.push(val);
       this.FormData.UseLists = this.FormData.UseList;
       this.FormData.Unuselist.splice(index, 1);
     },
-    compare (property) {
+    compare(property) {
       return function (a, b) {
         var value1 = a[property];
         var value2 = b[property];
         return value1 - value2;
       };
     },
-    UnchangeChecked (val, index) {
+    UnchangeChecked(val, index) {
       this.UncheckList = true;
       this.FormData.Unuselist.push(val);
       this.FormData.Unuselist = this.FormData.Unuselist.sort(
@@ -355,7 +425,7 @@ export default {
       this.FormData.TimeBegin = data[0];
       this.FormData.TimeEnd = data[1];
     },
-    load () {
+    load() {
       this.pageNum += 1;
       this.getUserList({
         QueryName: this.keyWords,
@@ -363,7 +433,7 @@ export default {
         PageIndex: this.pageNum,
       });
     },
-    queryDatas () {
+    queryDatas() {
       this.keyWordsUp = this.keyWordsUp.replace(/\s+/g, "");
       const search = this.keyWordsUp;
       if (search) {
@@ -376,7 +446,7 @@ export default {
         this.FormData.UseList = this.FormData.UseLists;
       }
     },
-    getUserData (val) {
+    getUserData(val) {
       // this.arrList = [];
       // this.FormData.Unuselist = [];
       // this.pageNum = 1;
@@ -402,7 +472,7 @@ export default {
         // this.getWarningList();
       }
     },
-    clearData () {
+    clearData() {
       this.arrList = [];
       this.FormData.Unuselist = [];
       this.pageNum = 1;
@@ -433,7 +503,9 @@ export default {
   box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
   border-radius: 16px;
 }
-
+.fpBox {
+  display: block;
+}
 .fristLine {
   display: flex;
   margin-left: 33px;