用户管理修改样式

src/App.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<style lang="scss">
+<style lang="less">
 * {
   margin: 0;
   padding: 0;
@@ -26,12 +26,37 @@ body {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
   color: #2c3e50;
   width: 100%;
   height: 100%;
 }
 
+.container {
+  height: 100%;
+  box-sizing: border-box;
+  background-color: rgba(255, 255, 255, 1);
+  color: #333333;
+  padding: 20px 30px;
+
+  .opr-btn {
+    .el-button {
+      line-height: 24px;
+      font-size: 12px;
+      padding: 0 20px;
+      letter-spacing: 1px;
+    }
+  }
+}
+
+.el-divider--horizontal {
+  padding: 0;
+  margin: 20px 0 !important;
+}
+
+/deep/ .el-table .el-table__cell {
+  padding: 0;
+}
+
 .el-scrollbar .el-scrollbar__wrap {
   overflow-x: hidden;
 }

src/components/home/MainFrame.vue

@@ -74,5 +74,6 @@ export default {
   color: #333;
   height: 100%;
   width: 100%;
+  padding: 10px;
 }
 </style>

src/components/tags/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="c-tags">
+      <el-tag :class="activeKey==item.value?'c-tags-active':''" class="c-tags-item" v-for="(item,index) in tags" :key="index" @click="handleClick(item)">{{ item.label }}</el-tag>
+  </div>
+</template>
+
+<script>
+export default {
+    props: {
+      tags: Array
+    },
+    data() {
+        return {
+            activeKey: '',
+        }
+    },
+    mounted() {
+        this.init()
+    },
+    emits: ['selectChange'],
+    methods: {
+        init() {
+          if (!this.tags) {
+              this.$emit('update:tags', []);
+          }
+          let showArr = this.tags.filter(item=>item.show);
+          if (showArr.length>0) {
+              this.activeKey = showArr[0].value;
+          } else if (this.tags.length>0) {
+              this.activeKey = this.tags[0].value;
+          }
+          this.updateShow()
+        },
+        handleClick(item) {
+            this.activeKey = item.value;
+            this.updateShow();
+            this.$emit("selectChange", this.activeKey);
+        },
+        updateShow() {
+            let arr = JSON.parse(JSON.stringify(this.tags))
+            for (const tag of arr) {
+                tag.show = tag.value == this.activeKey;
+            }
+            this.$emit('update:tags', arr);
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.c-tags {
+  width: 100%;
+  height: 100%;
+
+  .c-tags-item {
+    height: 30px;
+    border-radius: 15px;
+    border: 1px solid #ebebeb;
+    background-color: white;
+    color: #333333;
+    margin: 3px 20px 3px 0;
+    padding: 0 15px;
+    cursor: pointer;
+    letter-spacing: 1px;
+  }
+
+  .c-tags-active {
+    background-color: #2EA8E6;
+    color: white;
+  }
+
+}
+</style>

src/main.js

@@ -7,7 +7,7 @@ import axios from "axios";
 Vue.config.productionTip = false;
 
 import ElementUI from "element-ui";
-import "element-ui/lib/theme-chalk/index.css";
+import "./style/element-variables.scss";
 import locale from "element-ui/lib/locale/lang/zh-CN";
 // 引入dayjs库
 import dayjs from "dayjs";

src/style/element-variables.scss

@@ -0,0 +1,7 @@
+$--color-primary: #2EA8E6;
+
+$--border-color-base: #ebebeb;
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@import "~element-ui/packages/theme-chalk/src/index";

src/views/userManagement/personManagement/index.vue

@@ -1,21 +1,18 @@
 <template>
     <div class="container">
         <div class="header">
-            <el-button ref="buttonFocus" class="onlineUser" @click="activeShow">
-                <i class="el-icon-user-solid"></i>在用账户
-            </el-button>
-            <el-button class="disableUser" @click="deactiveShow">
-                <i class="el-icon-user"></i>停用账户
-            </el-button>
-            
-            <el-input class="searchBox" v-model="query.name" placeholder="用户名" suffix-icon="el-icon-search" @change="searchEvent"></el-input>
-            <el-button class="addUser" @click="addUser">
-                <i class="el-icon-user"></i>添加用户
-            </el-button>
+            <Tags :tags.sync="tags" @selectChange="handleTagChange"></Tags>
         </div>
+        <el-divider style="background-color: #f4f4f4"/>
         <div class="showTable">
-            <activeuser :name="show == true ? query.name : ''" ref="activeuser" v-show="show"></activeuser>
-            <deactiveuser :name="show1 == true ? query.name : ''" ref="deactiveuser" v-show="show1"/>
+            <div class="opr-btn">
+                <el-button type="primary" @click="exportData">导出数据</el-button>
+                <el-button type="primary" @click="batchActivate">批量禁用</el-button>
+                <el-button type="primary" @click="batchDelete">批量删除</el-button>
+            </div>
+            <div class="table-data">
+                <userTableData ref="activeuser" ></userTableData>
+            </div>
         </div>
         <!--弹窗-->
         <userinfo ref="addUser" @confirmEvent="confirmEvent"></userinfo>
@@ -23,27 +20,40 @@
 </template>
 
 <script>
-import activeuser from './tables/activeUser'
-import deactiveuser from './tables/deactiveUser'
+import userTableData from './tables/userTableData.vue'
 import userinfo from './messageDialog/addUser'
-import { addUser } from '@/api/user/user';
+import Tags from "@/components/tags/index.vue";
+import {addUser} from '@/api/user/user';
 
 export default {
     name: "personManagement",
-    components: { activeuser, deactiveuser, userinfo, },
+    components: {userTableData, userinfo, Tags,},
     data() {
         return {
-            show: true,
-            show1: false,
+            tags: [
+                {
+                    label: '在用账户',
+                    value: '1',
+                    show: true,
+                },
+                {
+                    label: '停用账户',
+                    value: '2',
+                    show: false,
+                }
+            ],
             query: {
-                name:''
-            }
+                name: ''
+            },
         };
     },
-    mounted(){
-        this.$refs.buttonFocus.$el.focus();
+    mounted() {
+        //this.$refs.buttonFocus.$el.focus();
     },
     methods: {
+        handleTagChange(val) {
+            console.log(this.tags)
+        },
         activeShow() {
             this.show = true;
             this.show1 = false;
@@ -61,7 +71,7 @@ export default {
             }, 100)
         },
         confirmEvent(data) {
-            if (this.$refs.addUser.popTitle ==='用户详情') {
+            if (this.$refs.addUser.popTitle === '用户详情') {
                 let options = {
                     username: data.username,
                     password: data.password,
@@ -89,11 +99,11 @@ export default {
                 })
             }
         },
-        searchEvent(){
-            if(this.show){
+        searchEvent() {
+            if (this.show) {
                 this.$refs.activeuser.getTableData(this.$refs.activeuser.currentPage);
             }
-            if(this.show1){
+            if (this.show1) {
                 this.$refs.deactiveuser.getTableData(this.$refs.deactiveuser.currentPage);
             }
         }
@@ -103,101 +113,7 @@ export default {
 
 <style lang="less" scoped>
 .container {
-    position: relative;
-    height: 100%;
-    line-height: 20px;
-    background-color: rgba(255, 255, 255, 1);
-    color: rgba(16, 16, 16, 1);
-    font-size: 14px;
-    text-align: center;
-    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
-
-    .header {
-        height: 59px;
-        left: 218px;
-        top: 125px;
-        right: 16px;
-
-        .onlineUser {
-            position: absolute;
-            top: 15px;
-            left: 20px;
-            bottom: 4px;
-            width: 100px;
-            height: 35px;
-            line-height: 20px;
-            border-radius: 20px;
-            background-color: #FFFFFF;
-            color: #C8C8C8;
-            font-size: 14px;
-            text-align: center;
-            padding: 5px;
-        }
-
-        .onlineUser:focus {
-            background-color: #2EA8E6;
-            color: #FFFFFF;
-        }
-
-        .disableUser {
-            position: absolute;
-            top: 15px;
-            left: 135px;
-            bottom: 4px;
-            width: 100px;
-            height: 35px;
-            line-height: 20px;
-            border-radius: 20px;
-            background-color: #FFFFFF;
-            color: #C8C8C8;
-            font-size: 14px;
-            text-align: center;
-            padding: 5px;
-        }
 
-        .disableUser:focus {
-            background-color: #2EA8E6;
-            color: #FFFFFF;
-        }
-
-        .searchBox {
-            position: absolute;
-            top: 15px;
-            right: 141px;
-            bottom: 11px;
-            width: 350px;
-            height: 35px;
-            line-height: 20px;
-            border-radius: 3px;
-            background-color: #F7F9FA;
-            color: #D7D8D8;
-            font-size: 14px;
-            text-align: center;
-
-            /deep/.el-input__inner {
-                height: 35px;
-            }
-        }
 
-        .addUser {
-            position: absolute;
-            right: 16px;
-            top: 15px;
-            width: 100px;
-            height: 35px;
-            background-color: #2EA8E6;
-            color: #FFFFFF;
-            font-size: 14px;
-            text-align: center;
-            padding: 5px;
-            border-radius: 5px;
-        }
-    }
-
-    .showTable {
-        padding: 10px 16px 0 20px;
-        height: calc(100% - 60px);
-        //box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
-    }
 }
 </style>

src/views/userManagement/personManagement/tables/activeUser.vue → src/views/userManagement/personManagement/tables/userTableData.vue

@@ -1,12 +1,7 @@
 <template>
     <div>
-        <div class="batch_button">
-            <el-button class="export" @click="exportData">导出数据</el-button>
-            <el-button class="activate" @click="batchActivate">批量禁用</el-button>
-            <el-button class="delete" @click="batchDelete">批量删除</el-button>
-        </div>
-        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" :header-cell-style="{ textAlign: 'center' }"
-            :cell-style="{ textAlign: 'center' }" height="405" style="width: 100%"
+        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" :header-cell-style="{ textAlign: 'center', fontSize: '14px' }"
+            :cell-style="{ textAlign: 'center' }" min-height="500" style="width: 100%"
             @selection-change="handleSelectionChange">
             <el-table-column type="selection" width="50"> </el-table-column>
             <el-table-column prop="username" label="用户名"> </el-table-column>
@@ -15,7 +10,7 @@
             <el-table-column prop="role" label="角色"> </el-table-column>
             <el-table-column prop="permission" label="权限"> </el-table-column>
             <el-table-column prop="working_address" label="单位"> </el-table-column>
-            <el-table-column prop="register_time" label="注册时间"> </el-table-column>
+            <el-table-column prop="register_time" label="注册时间" width="180"> </el-table-column>
             <el-table-column prop="status" label="状态">
                 <template slot-scope="scope">
                     <el-tag :color="scope.row.status !== null || undefined ? '#06f77e' : '#757776'"></el-tag>
@@ -44,12 +39,6 @@ import { getUserList, getUserInfo, deleteSingleUser, updateUserInfo } from '@/ap
 import UserDetail from '../messageDialog/userInfoDetail';
 import userInfoEdit from '../messageDialog/userInfoEdit';
 export default {
-    props: {
-        name: {
-            type: String,
-            default: ''
-        }
-    },
     components: { page, UserDetail, userInfoEdit },
     data() {
         return {
@@ -165,9 +154,7 @@ export default {
 }
 
 .el-table {
-    position: relative;
-    top: 50px;
-    left: 0;
+    margin-top: 12px;
     border: 1px solid #f0f2f2;
     font-size: 0.95rem;
     font-family: PingFang SC;
@@ -219,58 +206,4 @@ export default {
     }
 }
 
-.batch_button {
-    position: relative;
-    top: 50px;
-    float: left;
-    left: 280px;
-
-    .export {
-        padding: 3px;
-        width: 80px;
-        height: 30px;
-        bottom: 15px;
-        position: absolute;
-        color: #fff;
-        border-radius: 4px;
-        right: 190px;
-        background-color: #2ea8e6;
-    }
-
-    .activate {
-        padding: 3px;
-        width: 80px;
-        height: 30px;
-        bottom: 15px;
-        position: absolute;
-        color: #fff;
-        border-radius: 4px;
-        right: 100px;
-        background-color: #2ea8e6;
-    }
-
-    .delete {
-        padding: 3px;
-        width: 80px;
-        height: 30px;
-        bottom: 15px;
-        position: absolute;
-        color: #fff;
-        border-radius: 4px;
-        right: 10px;
-        background-color: #b3b3b3;
-    }
-
-}
-
-.bottom {
-    position: absolute;
-    left: 20px;
-    right: 16px;
-    bottom: 20px;
-    height: 50px;
-    line-height: 20px;
-    background-color: #ffffff;
-    text-align: center;
-}
 </style>