用户管理 静态页面 修改

src/icons/ic_add.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 64 (93537) - https://sketch.com -->
+    <title>ic_add</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="16" height="16"></rect>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="角色管理" transform="translate(-349.000000, -162.000000)">
+            <g id="ic_add" transform="translate(348.000000, 161.000000)">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <use id="矩形" fill="#D8D8D8" fill-rule="nonzero" opacity="0" xlink:href="#path-1"></use>
+                <path d="M8.5,1.5 L8.5,7.5 L14.5,7.5 L14.5,8.5 L8.5,8.5 L8.5,14.5 L7.5,14.5 L7.5,8.5 L1.5,8.5 L1.5,7.5 L7.5,7.5 L7.5,1.5 L8.5,1.5 Z" id="合并形状" fill="#055FE7" fill-rule="nonzero" mask="url(#mask-2)"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/views/SystemManage/UserManage.vue

@@ -87,29 +87,59 @@
       <div class="btn">筛选用户</div>
     </div>
     <div class="operation">
-      <div class="btn1">批量操作</div>
+      <div class="btn1" @click="batch">批量操作</div>
       <div class="btns">
         <div class="btn1">删除</div>
-        <div class="add">新增用户</div>
+        <div class="add">
+          <svg-icon
+            style="width: 13px;height: 13px;margin-bottom: -1px;margin-right: 4px "
+            icon-class="ic_add"
+          />新增用户
+        </div>
       </div>
     </div>
+    <el-tag
+      style="width:100%;color:#666666;margin-bottom:16px"
+      v-show="isShowTip"
+    >
+      <i class="el-icon-info" style="color:#055FE7;font-size:15px"></i>
+      已选择
+      <span style="color:#055FE7">{{ multipleSelection.length }}</span> 项​
+      <span v-html="'&nbsp;&nbsp;'"></span>
+      ​服务调用总计:<span v-html="'&nbsp;&nbsp;'"></span>36.4万
+      <el-link
+        type="primary"
+        :underline="false"
+        style="margin-left:20px;"
+        @click="toggleSelection()"
+        >清除</el-link
+      >
+    </el-tag>
     <div class="table-data">
-      <el-table :data="tableData" style="width: 100%">
-        <el-table-column prop="date" label="用户名" width="180">
+      <el-table
+        highlight-current-row
+        ref="singleTable"
+        :data="tableData"
+        class="table"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" height width="auto" v-if="isSelected">
         </el-table-column>
-        <el-table-column prop="name" label="姓名" width="180">
+        <el-table-column prop="date" label="用户名" width="100">
+        </el-table-column>
+        <el-table-column prop="name" label="姓名" width="100">
         </el-table-column>
         <el-table-column prop="address" label="警号"> </el-table-column
-        ><el-table-column prop="date" label="用户组" width="180">
+        ><el-table-column prop="date" label="用户组" width="100">
         </el-table-column>
         <el-table-column prop="name" label="所属单位" width="180">
         </el-table-column>
         <el-table-column prop="address" label="角色"> </el-table-column
         ><el-table-column prop="date" label="权限" width="180">
         </el-table-column>
-        <el-table-column prop="name" label="启用状态" width="180">
+        <el-table-column prop="name" label="启用状态" width="100">
         </el-table-column>
-        <el-table-column prop="address" label="操作"> </el-table-column>
+        <el-table-column prop="address" label="操作"></el-table-column>
       </el-table>
     </div>
     <div class="footer">
@@ -137,6 +167,7 @@
 </template>
 
 <script>
+import "@/icons/ic_add.svg";
 export default {
   name: "UserManage",
   data() {
@@ -144,9 +175,7 @@ export default {
       username: "",
       userdesc: "",
       unitcode: "",
-
       auth: "",
-
       reqParam: {
         userdesc: "",
         page: {
@@ -155,6 +184,10 @@ export default {
           currPage: 1
         }
       },
+      // 选中数据
+      multipleSelection: [],
+      isShowTip: false, //批量操作提示
+      isSelected: false, // 是否批量操作
       tableData: [
         {
           date: "2016-05-02",
@@ -214,6 +247,31 @@ export default {
     clear() {
       console.info("清空方法");
     },
+    // 清除所有选项
+    toggleSelection(rows) {
+      if (rows) {
+        rows.forEach(row => {
+          this.$refs.multipleTable.toggleRowSelection(row);
+        });
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
+      console.log(this.multipleSelection);
+    },
+    // 选择数据
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+      console.info(this.multipleSelection);
+      if (this.multipleSelection.length) {
+        this.isShowTip = true;
+      } else {
+        this.isShowTip = false;
+      }
+    },
+    //是否是批量操作
+    batch() {
+      this.isSelected = !this.isSelected;
+    },
     // 当期页发生变化
     handleCurrPageChange: function(val) {
       this.reqParam.page.currPage = val;
@@ -229,11 +287,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-//div {
-//  margin: 0;
-//  padding: 0;
-//  display: inline-block;
-//}
 .manage-page {
   width: 100%;
   padding: 24px;
@@ -371,15 +424,55 @@ export default {
     justify-content: space-between;
     align-items: center;
     .count {
-      .record {
-        font-size: 14px;
-        font-family: MicrosoftYaHei;
-        color: #666666;
-      }
+      font-size: 14px;
+      font-family: MicrosoftYaHei;
+      color: #666666;
     }
     .paging {
       float: right;
     }
+    /deep/.el-pager {
+      .number {
+        background-color: transparent;
+      }
+      .number.active {
+        background-color: #055fe7 !important;
+        box-shadow: 0px 12px 16px 1px rgba(0, 21, 51, 0.03);
+        border-radius: 6px;
+      }
+      .el-icon.more.btn-quicknext.el-icon-more,
+      .el-icon.more.btn-quickprev.el-icon-more {
+        background-color: transparent !important;
+      }
+    }
+    /deep/ .btn-prev,
+    /deep/ .btn-next {
+      background-color: transparent !important;
+    }
+    /deep/ .el-pagination__sizes {
+      position: absolute;
+      right: 0;
+    }
+    /deep/ .btn-next {
+      //margin-right: 120px !important;
+    }
+  }
+
+  /deep/.el-table th,
+  .el-table tr {
+    height: 48px;
+    background: #f6f8fa;
+    font-size: 14px;
+    color: #282f3c;
+  }
+  /deep/.el-table td,
+  .el-table tr {
+    height: 55px;
+    background: #ffffff;
+    font-size: 14px;
+    color: #333333;
+    padding: 0;
+    font-weight: 400;
   }
 }
 </style>