[update]完成用户组页面组

src/api/user.js

@@ -23,6 +23,34 @@ export function getUserList(data) {
     params: data
   })
 }
+export function getUserGroupList(data) {
+  return request({
+    url: '/api/v1/users/groups/',
+    method: 'get',
+    params: data
+  })
+}
+export function getUserGroup(data) {
+  return request({
+    url: '/api/v1/users/groups/' + data + '/',
+    method: 'get'
+  })
+}
+
+export function editUserGroup(data) {
+  return request({
+    url: '/api/v1/users/groups/',
+    method: 'post',
+    data: data
+  })
+}
+export function updateUserGroup(id, data) {
+  return request({
+    url: '/api/v1/users/groups/' + id + '/',
+    method: 'put',
+    data: data
+  })
+}
 
 export function logout() {
   return request({

src/i18n/langs/cn.js

@@ -12,9 +12,9 @@ const cn = {
   },
   route: {
     'dashboard': '仪表盘',
-    'users': '用户管理',
-    'userList': '用户列表',
-    'userGroupList': '用户组',
+    'Users': '用户管理',
+    'UserList': '用户列表',
+    'UserGroupList': '用户组',
     'assets': '资产管理',
     'assetList': '资产列表',
     'domainList': '网关列表',

src/router/index.js

@@ -38,7 +38,6 @@ export const constantRoutes = [
     component: () => import('@/views/404'),
     hidden: true
   },
-
   {
     path: '/',
     component: Layout,
@@ -50,24 +49,55 @@ export const constantRoutes = [
       meta: { title: 'dashboard', icon: 'dashboard' }
     }]
   },
-
   {
-    path: '/users/',
+    path: '/users',
     component: Layout,
-    name: 'users',
-    meta: { title: 'users', icon: 'user' },
+    redirect: '/users/list',
+    name: 'Users',
+    meta: {
+      title: 'Users',
+      icon: 'nested'
+    },
     children: [
       {
-        path: 'users',
-        name: 'userList',
-        component: () => import('@/views/table/index'),
-        meta: { title: 'userList' }
+        path: 'user/list',
+        component: () => import('@/views/users/UserList.vue'), // Parent router-view
+        name: 'UserList',
+        meta: { title: 'UserList' }
       },
       {
-        path: 'groups',
-        name: 'userGroupList',
-        component: () => import('@/views/tree/index'),
-        meta: { title: 'userGroupList' }
+        path: 'user/:id',
+        component: () => import('@/views/users/UserEdit.vue'), // Parent router-view
+        name: 'UserEdit',
+        meta: { title: 'UserEdit' },
+        hidden: true
+      },
+      {
+        path: 'user/detail/:id',
+        component: () => import('@/views/users/UserDetail.vue'), // Parent router-view
+        name: 'UserDetail',
+        meta: { title: 'UserDetail' },
+        hidden: true
+      },
+      {
+        path: 'usergrop/list',
+        component: () => import('@/views/users/UserGroupList.vue'), // Parent router-view
+        name: 'UserGroupList',
+        meta: { title: 'UserGroupList' }
+      },
+      {
+        path: 'usergroup/:id',
+        component: () => import('@/views/users/UserGroupEdit.vue'), // Parent router-view
+        name: 'UserGroupEdit',
+        meta: { title: 'UserGroupEdit' },
+        hidden: true
+      },
+      {
+        path: 'usergroup/detail/:id',
+        component: () => import('@/views/users/UserGroupDetail.vue'), // Parent router-view
+        name: 'UserGroupDetail',
+        meta: { title: 'UserGroupDetail' },
+        hidden: true
       }
     ]
   },
@@ -245,31 +275,31 @@ export const asyncRoutes = [
   //     }
   //   ]
   // },
-  {
-    path: '/users',
-    component: Layout,
-    redirect: '/users/list',
-    name: 'Users',
-    meta: {
-      title: 'Users',
-      icon: 'nested'
-    },
-    children: [
-      {
-        path: 'user/list',
-        component: () => import('@/views/users/UserList.vue'), // Parent router-view
-        name: 'UserList',
-        meta: { title: 'List' }
-      },
-      {
-        path: 'user/:id',
-        component: () => import('@/views/users/UserEdit.vue'), // Parent router-view
-        name: 'UserEdit',
-        meta: { title: 'Edit' },
-        hidden: true
-      }
-    ]
-  },
+  // {
+  //   path: '/users',
+  //   component: Layout,
+  //   redirect: '/users/list',
+  //   name: 'Users',
+  //   meta: {
+  //     title: 'Users',
+  //     icon: 'nested'
+  //   },
+  //   children: [
+  //     {
+  //       path: 'user/list',
+  //       component: () => import('@/views/users/UserList.vue'), // Parent router-view
+  //       name: 'UserList',
+  //       meta: { title: 'List' }
+  //     },
+  //     {
+  //       path: 'user/:id',
+  //       component: () => import('@/views/users/UserEdit.vue'), // Parent router-view
+  //       name: 'UserEdit',
+  //       meta: { title: 'Edit' },
+  //       hidden: true
+  //     }
+  //   ]
+  // },
   {
     path: 'external-link',
     component: Layout,

src/utils/request.js

@@ -51,7 +51,7 @@ service.interceptors.response.use(
     const res = response.data
 
     // if the custom code is not 20000, it is judged as an error.
-    if (response.status !== 200) {
+    if (response.status !== 200 && response.status !== 201) {
       Message({
         message: res.message || 'Error',
         type: 'error',

src/views/users/UserEdit.vue

@@ -1,5 +1,5 @@
 <template>
-  <BackPlayground>
+  <BackPlayground :title="title">
     <el-form :inline="true" :model="formInline" class="demo-form-inline">
       <el-form-item label="审批人">
         <el-input v-model="formInline.user" placeholder="审批人" />
@@ -11,7 +11,7 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="onSubmit">查询</el-button>
+        <el-button type="primary">查询</el-button>
       </el-form-item>
     </el-form>
   </BackPlayground>
@@ -25,11 +25,18 @@ export default {
   },
   data() {
     return {
+      title: '',
       formInline: {
         user: '',
         region: ''
       }
     }
+  },
+  computed() {
+
+  },
+  methods: {
+
   }
 }
 </script>

src/views/users/UserGroupEdit.vue

@@ -1,13 +1,160 @@
 <template>
-  <div>{{}}</div>
+  <BackPlayground :title="title">
+    <el-form
+      ref="usergroup"
+      size="small"
+      :rules="rules"
+      label-position="left"
+      label-width="80px"
+      :model="usergroup"
+      class="form"
+    >
+      <el-form-item label="名称" prop="name" required>
+        <el-input v-model="usergroup.name" />
+      </el-form-item>
+      <el-form-item label="用户">
+        <el-select
+          v-model="usergroup.users"
+          multiple
+          remote
+          :remote-method="remoteSerach"
+          :loading="loading"
+          filterable
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in tableData"
+            :key="item.id"
+            :label="item.name+ '(' + item.username + ')' "
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input
+          v-model="usergroup.comment"
+          type="textarea"
+          :rows="3"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="resetForm('usergroup')">重置</el-button>
+        <el-button type="primary" @click="submitForm('usergroup')">{{ buttonTitle }}</el-button>
+      </el-form-item>
+    </el-form>
+  </BackPlayground>
 </template>
 
 <script>
+import { BackPlayground } from '@/layout/components'
+import { getUserList, editUserGroup, getUserGroup, updateUserGroup } from '@/api/user'
 export default {
-
+  components: {
+    BackPlayground
+  },
+  data() {
+    return {
+      rules: {
+        name: [
+          { required: true, message: '请输入名称', trigger: 'blur' }
+        ]
+      },
+      usergroup: {
+        name: '',
+        users: {},
+        comment: ''
+      },
+      tableData: [],
+      loading: false
+    }
+  },
+  computed: {
+    title() {
+      if (this.$route.params.id === 'create') {
+        return this.$t('users.createusergroup')
+      } else {
+        return this.$t('usergroup.update_user_group')
+      }
+    },
+    buttonTitle() {
+      if (this.$route.params.id === 'create') {
+        return this.$t('users.createusergroup')
+      } else {
+        return this.$t('usergroup.update')
+      }
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    remoteSerach(word) {
+      this.loading = true
+      getUserList({ search: word, limit: 10, offset: 0 }).then(response => {
+        this.loading = false
+        this.tableData = response.results
+      })
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (this.$route.params.id === 'create') {
+            editUserGroup(this.usergroup).then(response => {
+              this.$message({
+                message: '创建成功',
+                type: 'success',
+                duration: 5 * 1000
+              })
+              this.$router.push({ name: 'UserGroupList' })
+            }).catch(error => {
+              console.log(error)
+            })
+          } else {
+            updateUserGroup(this.$route.params.id, this.usergroup).then(response => {
+              this.$message({
+                message: '创建成功',
+                type: 'success',
+                duration: 5 * 1000
+              })
+              this.$router.push({ name: 'UserGroupList' })
+            }).catch(error => {
+              console.log(error)
+            })
+          }
+        } else {
+          // console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+    },
+    init() {
+      if (this.$route.params.id === 'create') {
+        // Do Nothing
+      } else {
+        getUserGroup(this.$route.params.id).then(response => {
+          this.usergroup.name = response.name
+          // 这里差一个API
+          this.usergroup.comment = response.comment
+        })
+      }
+    }
+  }
 }
 </script>
 
-<style>
+<style lang='less' scoped>
+.form{
+  margin-top: 20px;
+  width: 80%;
+  margin-left: 10%;
+}
+
+//重置El-select宽度
+.el-select{
+  width: 100%;
+}
 
 </style>

src/views/users/UserGroupList.vue

@@ -1,13 +1,127 @@
 <template>
-  <div>{{}}</div>
+  <BackPlayground :title="$t('users.usergrouplist')">
+    <ListTables
+      :tablebotton="$t('users.createusergroup')"
+      tableroute="UserGroupEdit"
+      @SizeChange="handleSizeChange"
+      @CurrentChange="handleCurrentChange"
+    >
+      <el-table
+        v-loading="listLoading"
+        :data="tableData"
+        stripe
+        border
+        class="userTable"
+      >
+        <el-table-column
+          type="selection"
+          width="55"
+          align="center"
+          header-align="center"
+        />
+        <el-table-column
+          :label="this.$t('usergroup.name')"
+          sortable
+          align="center"
+          header-align="center"
+        >
+          <template slot-scope="scope">
+            <el-button type="text" size="small" style="font-size:14px" @click="handleDetail(scope.$index, scope.row)">{{ scope.row.name }}</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="this.$t('usergroup.user')"
+          align="center"
+          header-align="center"
+        >
+          <template slot-scope="scope">
+            <span>{{ scope.row.users_amount }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="this.$t('usergroup.comment')"
+          align="center"
+          sortable
+          header-align="center"
+        >
+          <template slot-scope="scope">
+            <span>{{ scope.row.comment }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="this.$t('usergroup.action')"
+          align="center"
+          header-align="center"
+        >
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="primary"
+              @click="handleEdit(scope.$index, scope.row)"
+            >{{ $t('usergroup.update') }}</el-button>
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)"
+            >{{ $t('usergroup.delete') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </ListTables>
+  </BackPlayground>
 </template>
 
 <script>
+import { ListTables, BackPlayground } from '@/layout/components'
+import { getUserGroupList } from '@/api/user'
+import Tables from '@/layout/mixin/ListTables'
 export default {
-
+  components: {
+    BackPlayground,
+    ListTables
+  },
+  mixins: [Tables],
+  data() {
+    return {
+      tableData: [],
+      listLoading: true
+    }
+  },
+  created() {
+    this.getUsers(this.current_page, this.page_size, this.offset)
+  },
+  methods: {
+    handleDetail: function(index, row) {
+      this.$router.push({ name: 'UserDetail', params: { id: row.id }})
+    },
+    handleEdit: function(index, row) {
+      this.$router.push({ name: 'UserGroupEdit', params: { id: row.id }})
+    },
+    handleDelete: function(index, row) {
+      this.$router.push({ name: 'UserGroupEdit', params: { id: row.id }})
+    },
+    handleSizeChange(val) {
+      this.offset = (this.current_page - 1) * val
+      this.page_size = val
+      this.getUsers(this.current_page, val, this.offset)
+    },
+    handleCurrentChange(val) {
+      this.offset = (val - 1) * this.page_size
+      this.current_page = val
+      this.getUsers(val, this.page_size, this.offset)
+    },
+    getUsers(draw, limit, offset) {
+      this.listLoading = true
+      getUserGroupList({ draw, limit, offset }).then(response => {
+        this.tableData = response.results
+        this.total = response.count
+        this.listLoading = false
+      })
+    }
+  }
 }
 </script>
 
-<style>
+<style lang="less" scoped>
 
 </style>

src/views/users/UserList.vue

@@ -1,7 +1,7 @@
 <template>
-  <BackPlayground :title="$t('users.usergrouplist')">
+  <BackPlayground :title="$t('route.userList')">
     <ListTables
-      :tablebotton="$t('users.createusergroup')"
+      :tablebotton="$t('users.createuser')"
       tableroute="UserEdit"
       @SizeChange="handleSizeChange"
       @CurrentChange="handleCurrentChange"
@@ -91,16 +91,23 @@ export default {
     this.getUsers(this.current_page, this.page_size, this.offset)
   },
   methods: {
+    // 处理显示详情
+    handleDetail: function(index, row) {
+      this.$router.push({ name: 'UserDetail', params: { id: row.id }})
+    },
+    // 处理页面显示数量更新
     handleSizeChange(val) {
       this.offset = (this.current_page - 1) * val
       this.page_size = val
       this.getUsers(this.current_page, val, this.offset)
     },
+    // 处理页码更新
     handleCurrentChange(val) {
       this.offset = (val - 1) * this.page_size
       this.current_page = val
       this.getUsers(val, this.page_size, this.offset)
     },
+    // 获取数据详情
     getUsers(draw, limit, offset) {
       this.listLoading = true
       getUserList({ draw, limit, offset }).then(response => {