diff --git a/src/store/modules/users.js b/src/store/modules/users.js index c36030771c49a1f9bec71868cbf922647294ca0e..e96dbe0942716308f0381589183b3c38533924ae 100644 --- a/src/store/modules/users.js +++ b/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) } } } diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue index 0e14f1604f7eadd974b1e5ea1d3de7040e72a3c2..f24ef044e15a0cb4b662ea18d0ee00d86ca70666 100644 --- a/src/views/layout/Layout.vue +++ b/src/views/layout/Layout.vue @@ -4,7 +4,6 @@ <sidebar class="sidebar-container"/> <div class="main-container"> <navbar/> - <tags-view/> <app-main/> </div> </div> diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue index 5c3bcda406387618b4a227abfa930a24bccbf7cd..d7bc3cb82785885fa363f885b3f01d121f7c69ad 100644 --- a/src/views/layout/components/Navbar.vue +++ b/src/views/layout/components/Navbar.vue @@ -1,32 +1,9 @@ <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; diff --git a/src/views/users/index.vue b/src/views/users/index.vue index 93190a6880c07f8730daee9aa45f005ed0db782f..86b27a7f172add171f3a6ac5b86567da6b830bed 100644 --- a/src/views/users/index.vue +++ b/src/views/users/index.vue @@ -1,6 +1,26 @@ <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>