From d6152616f0b4be09c25f89170f62b685ad0e6a98 Mon Sep 17 00:00:00 2001
From: ronger <ronger-x@outlook.com>
Date: Tue, 11 Aug 2020 14:43:53 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E5=90=8E=E5=8F=B0=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86-=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/admin/user.vue  | 217 ++++++++++++++++++++++++++++++++++++++++++
 plugins/element-ui.js |   2 +-
 store/admin.js        |  72 ++++++++++++++
 3 files changed, 290 insertions(+), 1 deletion(-)
 create mode 100644 pages/admin/user.vue
 create mode 100644 store/admin.js

diff --git a/pages/admin/user.vue b/pages/admin/user.vue
new file mode 100644
index 0000000..603eae0
--- /dev/null
+++ b/pages/admin/user.vue
@@ -0,0 +1,217 @@
+<template>
+  <el-row>
+    <el-col style="margin-bottom: 1rem;">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ path: '/admin/dashboard' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
+      </el-breadcrumb>
+    </el-col>
+    <el-col>
+      <el-table
+        :data="users"
+        style="width: 100%">
+        <el-table-column
+          label="#"
+          width="40"
+          prop="idUser">
+        </el-table-column>
+        <el-table-column
+          label="头像"
+          width="60"
+          prop="avatarUrl">
+          <template slot-scope="scope">
+            <el-avatar v-if="scope.row.avatarUrl" size="medium" :src="scope.row.avatarUrl"></el-avatar>
+            <el-avatar v-else size="medium" src="https://rymcu.com/article/1578475481946.png"></el-avatar>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="昵称"
+          width="180"
+          prop="nickname">
+          <template slot-scope="scope">
+            <el-link type="primary" @click="onRouter('user', scope.row.nickname)" :underline="false">{{
+              scope.row.nickname }}
+            </el-link>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="账号"
+          width="180"
+          prop="account">
+        </el-table-column>
+        <el-table-column
+          label="注册时间"
+          width="180"
+          prop="createdTime">
+        </el-table-column>
+        <el-table-column
+          label="状态"
+          width="180"
+          prop="status">
+          <template slot-scope="scope">
+            <el-tag type="primary" disable-transitions>
+              {{scope.row.status === '0' ? '正常' : '禁用'}}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="handleRole(scope.$index, scope.row)">授权</el-button>
+            <el-button v-if="scope.row.status == 1" size="mini" type="primary"
+                       @click="toggleStatus(scope.$index, scope.row)">启用
+            </el-button>
+            <el-button v-else size="mini" type="danger" @click="toggleStatus(scope.$index, scope.row)">禁用</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-col>
+    <el-col>
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="pagination.currentPage"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pagination.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="pagination.total">
+      </el-pagination>
+    </el-col>
+    <el-col>
+      <el-dialog :visible.sync="dialogVisible">
+        <el-form>
+          <el-form-item>
+            <el-radio-group v-model="idRole">
+              <el-radio v-for="role in roles" :key="role.idRole" border :label="role.idRole">{{ role.name }}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="updateRole">确 定</el-button>
+        </div>
+      </el-dialog>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+  import {mapState} from 'vuex';
+
+  export default {
+    name: "user",
+    fetch({store, params, error}) {
+      return Promise.all([
+        store
+          .dispatch('admin/fetchUsers', params)
+          .catch(err => error({statusCode: 404})),
+        store.dispatch("admin/fetchRoles")
+      ])
+    },
+    computed: {
+      ...mapState({
+        users: state => state.admin.user.users,
+        pagination: state => state.admin.user.pagination,
+        roles: state => state.admin.role.roles
+      })
+    },
+    data() {
+      return {
+        order: 'desc',
+        idRole: 0,
+        idUser: 0,
+        dialogVisible: false
+      }
+    },
+    methods: {
+      onRouter(name, data) {
+        this.$router.push({
+          path: `/${name}/${data}`
+        })
+      },
+      handleRole(index, user) {
+        let _ts = this;
+        _ts.$set(_ts, 'idUser', user.idUser);
+        _ts.$axios.$get('/api/admin/user/' + user.idUser + '/role')
+          .then(function (res) {
+            _ts.$set(_ts, 'dialogVisible', true);
+            _ts.$set(_ts, 'idRole', res[0].idRole);
+          });
+      },
+      toggleStatus(index, user) {
+        let _ts = this;
+        let title, status;
+        if (user.status == 0) {
+          title = '禁用';
+          status = 1;
+        } else {
+          title = '启用';
+          status = 0;
+        }
+        _ts.$confirm('确定' + title + '用户' + user.nickname + '(' + user.account + ')?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          _ts.$axios.$patch('/api/admin/user/update-status', {
+            idUser: user.idUser,
+            status: status
+          }).then(function (res) {
+            if (res && res.message) {
+              _ts.$message.error(res.message);
+            } else {
+              _ts.$message({
+                type: 'success',
+                message: title + '成功!'
+              });
+              _ts.handleCurrentChange(1);
+            }
+          });
+        }).catch(() => {
+          _ts.$message({
+            type: 'info',
+            message: '已取消'
+          });
+        });
+      },
+      handleSizeChange(page) {
+        let _ts = this;
+        _ts.$store.dispatch('admin/fetchUsers', {
+          page: page
+        })
+      },
+      handleCurrentChange(page) {
+        let _ts = this;
+        _ts.$store.dispatch('admin/fetchUsers', {
+          page: page
+        })
+      },
+      updateRole() {
+        let _ts = this;
+        let data = {
+          idUser: _ts.idUser,
+          idRole: _ts.idRole
+        };
+        _ts.$axios.$patch('/api/admin/user/update-role', data).then(function (res) {
+          if (res && res.message) {
+            _ts.$message.error(res.message);
+          } else {
+            _ts.$message({
+              message: '授权成功',
+              type: 'success'
+            });
+            _ts.$set(_ts, 'dialogVisible', false);
+            _ts.$set(_ts, 'idUser', 0);
+            _ts.$set(_ts, 'idRole', 0);
+          }
+        })
+      }
+    },
+    mounted() {
+      this.$store.commit("setActiveMenu", "admin-user");
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/plugins/element-ui.js b/plugins/element-ui.js
index 9ec8b61..ff3dbc9 100644
--- a/plugins/element-ui.js
+++ b/plugins/element-ui.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
 import Element from 'element-ui'
-import locale from 'element-ui/lib/locale/lang/en'
+import locale from 'element-ui/lib/locale/lang/zh-CN'
 
 Vue.use(Element, { locale })
diff --git a/store/admin.js b/store/admin.js
new file mode 100644
index 0000000..3b43b61
--- /dev/null
+++ b/store/admin.js
@@ -0,0 +1,72 @@
+export const ADMIN_API_PATH = '/api/admin'
+
+const getDefaultUsersData = () => {
+  return {
+    users: [],
+    pagination: {}
+  }
+}
+
+const getDefaultRolesData = () => {
+  return {
+    role: [],
+    pagination: {}
+  }
+}
+
+export const state = () => {
+  return {
+    fetching: false,
+    user: getDefaultUsersData(),
+    role: getDefaultRolesData()
+  }
+}
+
+export const mutations = {
+  updateFetching(state, action) {
+    state.fetching = action
+  },
+  updateUsersData(state, action) {
+    state.user.users = action.users
+    state.user.pagination = action.pagination
+  },
+  updateRolesData(state, action) {
+    state.role.roles = action.roles
+    state.role.pagination = action.pagination
+  }
+}
+
+export const actions = {
+  fetchUsers({commit}, params = {}) {
+    // 清空已有数据
+    commit('updateUsersData', getDefaultUsersData())
+    commit('updateFetching', true)
+
+    return this.$axios
+      .$get(`${ADMIN_API_PATH}/users`)
+      .then(response => {
+        commit('updateFetching', false);
+        commit('updateUsersData', response);
+      })
+      .catch(error => {
+        console.log(error);
+        commit('updateFetching', false);
+      });
+  },
+  fetchRoles({commit}, params = {}) {
+    // 清空已有数据
+    commit('updateRolesData', getDefaultRolesData())
+    commit('updateFetching', true)
+
+    return this.$axios
+      .$get(`${ADMIN_API_PATH}/roles`)
+      .then(response => {
+        commit('updateFetching', false);
+        commit('updateRolesData', response);
+      })
+      .catch(error => {
+        console.log(error);
+        commit('updateFetching', false);
+      });
+  }
+}