Users table

src/store/modules/users.js

@@ -2,11 +2,15 @@ import { fetchUsers } from '@/api/users'
 
 const user = {
   state: {
-    fetchedUsers: []
+    fetchedUsers: [],
+    loading: true
   },
   mutations: {
     SET_USERS: (state, users) => {
       state.fetchedUsers = users
+    },
+    SET_LOADING: (state, status) => {
+      state.loading = status
     }
   },
   actions: {
@@ -14,6 +18,7 @@ const user = {
       const response = await fetchUsers()
 
       commit('SET_USERS', response.data)
+      commit('SET_LOADING', false)
     }
   }
 }

src/views/layout/Layout.vue

@@ -4,7 +4,6 @@
     <sidebar class="sidebar-container"/>
     <div class="main-container">
       <navbar/>
-      <tags-view/>
       <app-main/>
     </div>
   </div>

src/views/layout/components/Navbar.vue

 <template>
   <div class="navbar">
-    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
-
-    <breadcrumb class="breadcrumb-container"/>
-
     <div class="right-menu">
-      <template v-if="device!=='mobile'">
-        <search class="right-menu-item" />
-
-        <error-log class="errLog-container right-menu-item hover-effect"/>
-
-        <screenfull class="right-menu-item hover-effect"/>
-
-        <el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
-          <size-select class="right-menu-item hover-effect"/>
-        </el-tooltip>
-
-        <lang-select class="right-menu-item hover-effect"/>
-
-        <el-tooltip :content="$t('navbar.theme')" effect="dark" placement="bottom">
-          <theme-picker class="right-menu-item hover-effect"/>
-        </el-tooltip>
-      </template>
-
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
-          <i class="el-icon-caret-bottom"/>
         </div>
         <el-dropdown-menu slot="dropdown">
           <router-link to="/">
@@ -34,11 +11,6 @@
               {{ $t('navbar.dashboard') }}
             </el-dropdown-item>
           </router-link>
-          <a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">
-            <el-dropdown-item>
-              {{ $t('navbar.github') }}
-            </el-dropdown-item>
-          </a>
           <el-dropdown-item divided>
             <span style="display:block;" @click="logout">{{ $t('navbar.logOut') }}</span>
           </el-dropdown-item>
@@ -50,26 +22,8 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
-import ErrorLog from '@/components/ErrorLog'
-import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
-import LangSelect from '@/components/LangSelect'
-import ThemePicker from '@/components/ThemePicker'
-import Search from '@/components/HeaderSearch'
 
 export default {
-  components: {
-    Breadcrumb,
-    Hamburger,
-    ErrorLog,
-    Screenfull,
-    SizeSelect,
-    LangSelect,
-    ThemePicker,
-    Search
-  },
   computed: {
     ...mapGetters([
       'sidebar',
@@ -145,8 +99,6 @@ export default {
     }
 
     .avatar-container {
-      margin-right: 30px;
-
       .avatar-wrapper {
         margin-top: 5px;
         position: relative;

src/views/users/index.vue

 <template>
   <div class="users-container">
-    123
+    <h1>Users</h1>
+    <el-table
+      v-loading="loading"
+      :data="users"
+      style="width: 100%">
+      <el-table-column
+        prop="id"
+        label="ID"
+        width="100" />
+      <el-table-column
+        prop="fullname"
+        label="Name" />
+      <el-table-column
+        fixed="right"
+        label="Operations"
+        width="120">
+        <template>
+          <el-button type="text" size="small" @click="handleRevoke">Disable user</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
   </div>
 </template>
 
@@ -8,15 +28,32 @@
 
 export default {
   name: 'Users',
-  data: function() {
-    return {
-      users: []
+  computed: {
+    loading() {
+      return this.$store.state.users.loading
+    },
+    users() {
+      return this.$store.state.users.fetchedUsers
     }
   },
   mounted: function() {
     this.$store.dispatch('FetchUsers')
+  },
+  methods: {
+    handleRevoke() {
+
+    }
   }
 }
 
 </script>
 
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.users-container {
+  h1 {
+    margin-left: 15px;
+  }
+}
+
+</style>