added user management

frontend/src/i18n/zh.js

@@ -230,8 +230,8 @@ export default {
   'Are you sure to run this spider?': '你确定要运行该爬虫?',
   'Node info has been saved successfully': '节点信息已成功保存',
   'A task has been scheduled successfully': '已经成功派发一个任务',
-  'Are you sure to deploy this spider?': '你确定要部署该爬虫?',
   'Are you sure to delete this spider?': '你确定要删除该爬虫?',
+  'Are you sure to delete this user?': '你确定要删除该用户?',
   'Spider info has been saved successfully': '爬虫信息已成功保存',
   'Do you allow us to collect some statistics to improve Crawlab?': '您允许我们收集统计数据以更好地优化Crawlab？',
   'Saved file successfully': '成功保存文件',
@@ -241,6 +241,8 @@ export default {
   'Password length should be no shorter than 5': '密码长度不能小于5',
   'Two passwords must be the same': '两个密码必须要一致',
   'username already exists': '用户名已存在',
+  'Deleted successfully': '成功删除',
+  'Saved successfully': '成功保存',
 
   // 登录
   'Sign in': '登录',
@@ -255,5 +257,10 @@ export default {
   'Initial Username/Password': '初始用户名/密码',
   'Username': '用户名',
   'Password': '密码',
-  'Confirm Password': '确认密码'
+  'Confirm Password': '确认密码',
+  'normal': '正常用户',
+  'admin': '管理用户',
+  'Role': '角色',
+  'Edit User': '更改用户',
+  'Users': '用户'
 }

frontend/src/router/index.js

@@ -156,37 +156,6 @@ export const constantRouterMap = [
       }
     ]
   },
-  {
-    name: 'Deploy',
-    path: '/deploys',
-    component: Layout,
-    hidden: true,
-    meta: {
-      title: 'Deploy',
-      icon: 'fa fa-cloud'
-    },
-    children: [
-      {
-        path: '',
-        name: 'DeployList',
-        component: () => import('../views/deploy/DeployList'),
-        meta: {
-          title: 'Deploys',
-          icon: 'fa fa-cloud'
-        }
-      },
-      {
-        path: ':id',
-        name: 'DeployDetail',
-        component: () => import('../views/deploy/DeployDetail'),
-        meta: {
-          title: 'Deploy Detail',
-          icon: 'fa fa-circle-o'
-        },
-        hidden: true
-      }
-    ]
-  },
   {
     name: 'Site',
     path: '/sites',
@@ -207,6 +176,26 @@ export const constantRouterMap = [
       }
     ]
   },
+  {
+    name: 'User',
+    path: '/users',
+    component: Layout,
+    meta: {
+      title: 'User',
+      icon: 'fa fa-user'
+    },
+    children: [
+      {
+        path: '',
+        name: 'UserList',
+        component: () => import('../views/user/UserList'),
+        meta: {
+          title: 'Users',
+          icon: 'fa fa-user'
+        }
+      }
+    ]
+  },
 
   { path: '*', redirect: '/404', hidden: true }
 ]

frontend/src/store/modules/user.js

@@ -7,7 +7,12 @@ const user = {
     // token: getToken(),
     name: '',
     avatar: '',
-    roles: []
+    roles: [],
+    userList: [],
+    userForm: {},
+    pageNum: 1,
+    pageSize: 10,
+    totalCount: 0
   },
 
   mutations: {
@@ -22,6 +27,21 @@ const user = {
     },
     SET_ROLES: (state, roles) => {
       state.roles = roles
+    },
+    SET_USER_LIST: (state, value) => {
+      state.userList = value
+    },
+    SET_USER_FORM: (state, value) => {
+      state.userForm = value
+    },
+    SET_PAGE_NUM: (state, value) => {
+      state.pageNum = value
+    },
+    SET_PAGE_SIZE: (state, value) => {
+      state.pageSize = value
+    },
+    SET_TOTAL_COUNT: (state, value) => {
+      state.totalCount = value
     }
   },
 
@@ -83,6 +103,30 @@ const user = {
         commit('SET_ROLES', [])
         resolve()
       })
+    },
+
+    // 获取用户列表
+    getUserList ({ commit, state }) {
+      return new Promise((resolve, reject) => {
+        request.get('/users', {
+          page_num: state.pageNum,
+          page_size: state.pageSize
+        })
+          .then(response => {
+            commit('SET_USER_LIST', response.data.data)
+            commit('SET_TOTAL_COUNT', response.data.total)
+          })
+      })
+    },
+
+    // 删除用户
+    deleteUser ({ state }, id) {
+      return request.delete(`/users/${id}`)
+    },
+
+    // 编辑用户
+    editUser ({ state }) {
+      return request.post(`/users/${state.userForm._id}`, state.userForm)
     }
   }
 }

frontend/src/views/user/UserList.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="app-container">
+    <!--dialog-->
+    <el-dialog :visible.sync="dialogVisible" :title="$t('Edit User')">
+      <el-form label-width="80px">
+        <el-form-item :label="$t('Username')">
+          <el-input v-model="userForm.username" disabled></el-input>
+        </el-form-item>
+        <!--<el-form-item :label="$t('Password')">-->
+        <!--<el-input type="password" v-model="userForm.password" :placeholder="$t('Password')"></el-input>-->
+        <!--</el-form-item>-->
+        <el-form-item :label="$t('Role')">
+          <el-select v-model="userForm.role">
+            <el-option value="admin" :label="$t('admin')"></el-option>
+            <el-option value="normal" :label="$t('normal')"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template slot="footer">
+        <el-button size="small" @click="dialogVisible=false">{{$t('Cancel')}}</el-button>
+        <el-button type="primary" size="small" @click="onConfirm">{{$t('Confirm')}}</el-button>
+      </template>
+    </el-dialog>
+    <!--./dialog-->
+
+    <el-card>
+      <!--table-->
+      <el-table
+        :data="userList"
+        :header-cell-style="{background:'rgb(48, 65, 86)',color:'white'}"
+        border
+      >
+        <el-table-column
+          width="120px"
+          :label="$t('Username')"
+          prop="username"
+        >
+        </el-table-column>
+        <el-table-column
+          width="150px"
+          :label="$t('Role')"
+        >
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.role === 'admin'" type="primary">
+              {{ $t(scope.row.role) }}
+            </el-tag>
+            <el-tag v-else type="warning">
+              {{ $t(scope.row.role) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          width="150px"
+          :label="$t('Create Time')"
+        >
+          <template slot-scope="scope">
+            {{getTime(scope.row.create_ts)}}
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="$t('Action')"
+          fixed="right"
+        >
+          <template slot-scope="scope">
+            <el-button icon="el-icon-edit" type="warning" size="mini" @click="onEdit(scope.row)"></el-button>
+            <el-button icon="el-icon-delete" type="danger" size="mini" @click="onRemove(scope.row)"></el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="pagination">
+        <el-pagination
+          @current-change="onPageChange"
+          @size-change="onPageChange"
+          :current-page.sync="pageNum"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size.sync="pageSize"
+          layout="sizes, prev, pager, next"
+          :total="totalCount">
+        </el-pagination>
+      </div>
+      <!--./table-->
+    </el-card>
+  </div>
+</template>
+
+<script>
+import {
+  mapState
+} from 'vuex'
+import dayjs from 'dayjs'
+
+export default {
+  name: 'UserList',
+  data () {
+    return {
+      dialogVisible: false
+    }
+  },
+  computed: {
+    ...mapState('user', [
+      'userList',
+      'userForm',
+      'totalCount'
+    ]),
+    pageSize: {
+      get () {
+        return this.$store.state.user.pageSize
+      },
+      set (value) {
+        this.$store.commit('user/SET_PAGE_SIZE', value)
+      }
+    },
+    pageNum: {
+      get () {
+        return this.$store.state.user.pageNum
+      },
+      set (value) {
+        this.$store.commit('user/SET_PAGE_NUM', value)
+      }
+    }
+  },
+  methods: {
+    onPageChange () {
+      this.$store.dispatch('user/getUserList')
+    },
+    getTime (ts) {
+      return dayjs(ts).format('YYYY-MM-DD HH:mm:ss')
+    },
+    onEdit (row) {
+      this.$store.commit('user/SET_USER_FORM', row)
+      this.dialogVisible = true
+    },
+    onRemove (row) {
+      this.$confirm(this.$t('Are you sure to delete this user?'), this.$t('Notification'), {
+        confirmButtonText: this.$t('Confirm'),
+        cancelButtonText: this.$t('Cancel'),
+        type: 'warning'
+      }).then(() => {
+        this.$store.dispatch('user/deleteUser', row._id)
+          .then(() => {
+            this.$message({
+              type: 'success',
+              message: this.$t('Deleted successfully')
+            })
+          })
+        this.$st.sendEv('用户', '删除', 'id', row._id)
+      })
+      // this.$store.commit('user/SET_USER_FORM', row)
+    },
+    onConfirm () {
+      this.dialogVisible = false
+      this.$store.dispatch('user/editUser')
+        .then(() => {
+          this.$message({
+            type: 'success',
+            message: this.$t('Saved successfully')
+          })
+        })
+      this.$st.sendEv('用户', '编辑')
+    }
+  },
+  created () {
+    this.$store.dispatch('user/getUserList')
+  }
+}
+</script>
+
+<style scoped>
+  .el-table {
+    border-radius: 5px;
+  }
+
+  .el-table .el-button {
+    padding: 7px;
+  }
+</style>