refactor(user): upgrade user management page (#415)

re #414

Author: vanoneang

src/lin/model/admin.js

@@ -35,13 +35,13 @@ export default class Admin {
     return get('cms/admin/permission')
   }
 
-  static async getAdminUsers({ groupID, count = this.uCount, page = this.uPage }) {
+  static async getAdminUsers({ groupId, count = this.uCount, page = this.uPage }) {
     let res
-    if (groupID) {
+    if (groupId) {
       res = await get('cms/admin/users', {
         count,
         page,
-        group_id: groupID,
+        group_id: groupId,
       })
     } else {
       res = await get('cms/admin/users', {

src/lin/model/user.js

@@ -15,6 +15,7 @@ export default class User {
         email: user.email,
         username: user.username,
         password: user.password,
+        group_ids: user.groupIds,
         confirm_password: user.confirmPassword,
       },
       handleError: true,

src/view/admin/group/group-list.vue

@@ -2,17 +2,17 @@
   <!-- 列表页面 -->
   <div class="container">
     <div class="title">分组列表信息</div>
-    <lin-table
-      :tableColumn="tableColumn"
-      :tableData="tableData"
-      :operate="operate"
-      @handleEdit="handleEdit"
-      @goToGroupEditPage="goToGroupEditPage"
-      @handleDelete="handleDelete"
-      @row-click="rowClick"
-      v-loading="loading"
-    >
-    </lin-table>
+    <el-table :data="tableData" v-loading="loading">
+      <el-table-column prop="name" label="名称"></el-table-column>
+      <el-table-column prop="info" label="分组描述"></el-table-column>
+      <el-table-column label="操作" fixed="right" width="275">
+        <template #default="scope">
+          <el-button plain size="mini" type="primary" @click="handleEdit(scope.row.id)">信息</el-button>
+          <el-button plain size="mini" type="info" @click="goToGroupEditPage(scope.row.id)">权限</el-button>
+          <el-button plain size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
     <el-dialog
       title="分组信息"
       :append-to-body="true"
@@ -39,7 +39,7 @@
           </el-form-item>
         </el-form>
       </div>
-      <template v-slot:footer>
+      <template #footer>
         <div class="dialog-footer" style="padding-left:5px;">
           <el-button type="primary" @click="confirmEdit">确 定</el-button>
           <el-button @click="resetForm('form')">重 置</el-button>
@@ -50,25 +50,10 @@
 </template>
 
 <script>
-import LinTable from '@/component/base/table/lin-table'
 import { useGroupList, useEditGroup } from './hook'
 
 export default {
-  components: {
-    LinTable,
-  },
   setup(props, ctx) {
-    // originally data properties
-    const tableColumn = [
-      { prop: 'name', label: '名称' },
-      { prop: 'info', label: '分组描述' },
-    ]
-    const operate = [
-      { name: '信息', func: 'handleEdit', type: 'primary' },
-      { name: '权限', func: 'goToGroupEditPage', type: 'info' },
-      { name: '删除', func: 'handleDelete', type: 'danger' },
-    ]
-
     /**
      * 分组列表所需数据
      */
@@ -102,13 +87,11 @@ export default {
       id,
       rules,
       group,
-      operate,
       loading,
       rowClick,
       tableData,
       resetForm,
       handleEdit,
-      tableColumn,
       confirmEdit,
       handleClose,
       handleDelete,

src/view/admin/user/hook.js src/view/admin/user/use-user.jssrc/view/admin/user/hook.js renamed to src/view/admin/user/use-user.js

@@ -2,10 +2,10 @@ import { ref, onMounted } from 'vue'
 import AdminModel from '@/lin/model/admin'
 
 export const useUserList = () => {
-  const groups = ref([])
+  const allGroups = ref([])
   const pageCount = ref(10) // 每页10条数据
   const tableData = ref([])
-  const groupID = ref(null)
+  const groupId = ref(null)
   const loading = ref(false)
   const totalNum = ref(0) // 分组内的用户总数
   const currentPage = ref(1) // 默认获取第一页的数据
@@ -14,11 +14,11 @@ export const useUserList = () => {
    * 获取管理员列表数据
    */
   const getAdminUsers = async () => {
-    let res
+    let res = {}
     try {
       loading.value = true
       res = await AdminModel.getAdminUsers({
-        groupID: groupID.value,
+        groupId: groupId.value,
         count: pageCount.value,
         page: currentPage.value - 1,
       })
@@ -37,7 +37,7 @@ export const useUserList = () => {
   const getAllGroups = async () => {
     try {
       loading.value = true
-      groups.value = await AdminModel.getAllGroups()
+      allGroups.value = await AdminModel.getAllGroups()
       loading.value = false
     } catch (e) {
       loading.value = false
@@ -46,16 +46,12 @@ export const useUserList = () => {
   }
 
   /**
-   * 多分组用 ',' 分割展示
+   * 多分组用 '，' 分割展示
    */
   const shuffleList = users => {
     const list = []
     users.forEach(element => {
-      const userGroups = []
-      element.groups.forEach(item => {
-        userGroups.push(item.name)
-      })
-      element.groupNames = userGroups.join(',')
+      element.groupNames = element.groups.map(item => item.name).join('，')
       list.push(element)
     })
     return list
@@ -67,18 +63,18 @@ export const useUserList = () => {
   })
 
   return {
-    groups,
-    groupID,
+    groupId,
     loading,
     totalNum,
+    allGroups,
     pageCount,
     tableData,
     currentPage,
     getAdminUsers,
   }
 }
 
-export const useFormData = (ctx, dialogFormVisible, getAdminUsers, currentPage, loading) => {
+export const useFormData = (ctx, dialogFormVisible, getAdminUsers, currentPage, loading, info, password) => {
   const id = ref(null)
   const activeTab = ref('修改信息')
 
@@ -113,13 +109,6 @@ export const useFormData = (ctx, dialogFormVisible, getAdminUsers, currentPage,
     }
   }
 
-  /**
-   * 切换弹窗Tab栏
-   */
-  const handleClick = tab => {
-    activeTab.value = tab.name
-  }
-
   /**
    * 翻页
    */
@@ -133,9 +122,9 @@ export const useFormData = (ctx, dialogFormVisible, getAdminUsers, currentPage,
    */
   const confirmEdit = async () => {
     if (activeTab.value === '修改信息') {
-      await ctx.refs.userInfo.submitForm('form')
+      await info.value.submitForm()
     } else {
-      await ctx.refs.password.submitForm('form')
+      await password.value.submitForm()
     }
   }
 
@@ -147,14 +136,18 @@ export const useFormData = (ctx, dialogFormVisible, getAdminUsers, currentPage,
     done()
   }
 
+  const handleClick = tab => {
+    activeTab.value = tab.props.name
+  }
+
   /**
    * 重置表单
    */
   const resetForm = () => {
     if (activeTab.value === '修改信息') {
-      ctx.refs.userInfo.resetForm('form')
+      info.value.resetForm()
     } else {
-      ctx.refs.password.resetForm('form')
+      password.value.resetForm()
     }
   }
 

src/view/admin/user/user-create.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <div class="title">新建用户</div>
-    <div class="wrap"><user-info :groups="groups" /></div>
+    <div class="wrap"><user-info :allGroups="allGroups" /></div>
   </div>
 </template>
 
@@ -15,13 +15,13 @@ export default {
     UserInfo,
   },
   setup() {
-    const groups = ref([])
+    const allGroups = ref([])
     const loading = ref(false)
 
     onMounted(async () => {
       try {
         loading.value = true
-        groups.value = await Admin.getAllGroups()
+        allGroups.value = await Admin.getAllGroups()
         loading.value = false
       } catch (e) {
         loading.value = false
@@ -30,8 +30,8 @@ export default {
     })
 
     return {
-      groups,
       loading,
+      allGroups,
     }
   },
 }