新增角色成员

src/api/base.js

@@ -42,3 +42,10 @@ export function getUserRoles(params) {
 export function getUserPermissions(params) {
   return httpRequest.get('/api/permissions/admin/v1/system/user-permissions', { params })
 }
+
+/**
+ * 获取成员列表
+ */
+export function getUserList(params) {
+  return httpRequest.get(`/api/permissions/admin/v1/${params.app_id}/application/users`, { params })
+}

src/components/base/UserSelect.vue

+<template>
+  <el-dialog v-bind="$attrs" v-on="$listeners" append-to-body title="选择成员" width="60%">
+    <app-list v-bind="tableOptions" ref="list" @select="select" @selection-change="handleSelectionChange"></app-list>
+    <div class="dialog-footer">
+      <el-button @click="handleCancel">取 消</el-button>
+      <el-button type="primary" @click="handlePrimary">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getUserList } from '@/api/base.js'
+export default {
+  props: { multiple: { type: Boolean, default: true } },
+  data() {
+    return {
+      dialogVisible: false,
+      multipleSelection: [], // 选择的数据
+      selected: [] // 确定选中的
+    }
+  },
+  computed: {
+    // 列表配置
+    tableOptions() {
+      return {
+        remote: {
+          httpRequest: getUserList,
+          params: { app_id: this.$store.state.appid }
+        },
+        columns: [
+          { type: 'selection' },
+          { label: '姓名', prop: 'sso_user.realname' },
+          { label: '昵称', prop: 'sso_user.nickname' },
+          { label: '手机号', prop: 'sso_user.mobile' },
+          { label: '邮箱', prop: 'sso_user.email' }
+        ]
+      }
+    }
+  },
+  methods: {
+    // 选择
+    select(selection, row) {
+      if (!this.multiple && selection.length > 1) {
+        const selected = !!selection.find(item => item.id === row.id)
+        this.$refs.list.table.clearSelection()
+        this.$nextTick(function () {
+          this.$refs.list.table.toggleRowSelection(row, selected)
+        })
+      }
+    },
+    // 选择
+    handleSelectionChange(value) {
+      this.multipleSelection = value
+    },
+    // 取消
+    handleCancel() {
+      this.$emit('update:visible', false)
+    },
+    // 确定
+    handlePrimary() {
+      this.$emit('primary', this.multipleSelection)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dialog-footer {
+  position: sticky;
+  bottom: 0;
+  text-align: center;
+  z-index: 118;
+  padding: 20px 0;
+  border-top: 0.5px solid rgba(0, 0, 0, 0.05);
+  background-color: rgba(255, 255, 255, 0.95);
+}
+</style>

src/main.js

@@ -16,7 +16,7 @@ import AppList from './components/base/AppList.vue'
 import beforeEnter from './utils/beforeEnter'
 
 // 注册element-ui组件
-Vue.use(ElementUI, { size: 'small' })
+Vue.use(ElementUI)
 
 // 注册公共组件
 Vue.component('AppCard', AppCard)

src/modules/settings/permissions/views/List.vue

@@ -5,7 +5,7 @@
         <el-button type="primary" @click="handleCreate()">创建权限</el-button>
       </template>
       <template v-slot:table-x="{ row }">
-        <el-button type="text" @click="handleCreate(row)">新增</el-button>
+        <el-button type="text" @click="handleCreate(row)">创建子权限</el-button><br />
         <el-button type="text" @click="handleUpdate(row)">编辑</el-button>
         <el-button type="text" @click="onRemove(row)">删除</el-button>
       </template>

src/modules/settings/roles/api.js

@@ -38,7 +38,7 @@ export function addRoleUsers(data) {
  * 获取角色用户
  */
 export function getRoleUsers(params) {
-  return httpRequest.post(`/api/permissions/admin/v1/${params.app_id}/application/assign/role-users`, params)
+  return httpRequest.get(`/api/permissions/admin/v1/${params.app_id}/application/assign/role-users`, { params })
 }
 /**
  * 删除角色用户

src/modules/settings/roles/index.js

@@ -10,8 +10,10 @@ const routes = [
         // meta: { title: '角色管理' }
       },
       {
+        name: 'roleUsers',
         path: 'roles/:id/users',
-        component: () => import('./views/List.vue')
+        component: () => import('./views/Users.vue'),
+        props: true
         // meta: { title: '角色成员' }
       }
     ]

src/modules/settings/roles/views/List.vue

@@ -6,8 +6,10 @@
       </template>
       <template v-slot:table-x="{ row }">
         <el-button type="text" @click="handleUpdate(row)">修改</el-button>
-        <el-button type="text" @click="handlePermission(row)">权限配置</el-button>
-        <el-button type="text">成员管理</el-button>
+        <el-button type="text" @click="handlePermission(row)">权限配置</el-button>&nbsp;
+        <router-link :to="{ name: 'roleUsers', params: { id: row.id } }" target="_blank">
+          <el-button type="text">成员管理</el-button>
+        </router-link>
       </template>
       <template #footer>
         <el-button type="primary" @click="onRemove" :disabled="!multipleSelection.length">删除</el-button>

src/modules/settings/roles/views/Users.vue

@@ -2,36 +2,29 @@
   <app-card>
     <app-list v-bind="tableOptions" ref="list" @selection-change="handleSelectionChange">
       <template #header-aside>
-        <el-button type="primary" icon="el-icon-plus" @click="handleCreate">添加成员</el-button>
+        <el-button type="primary" icon="el-icon-plus" @click="visible = true">添加成员</el-button>
       </template>
       <template #footer>
         <el-button type="primary" @click="onRemove" :disabled="!multipleSelection.length">删除</el-button>
       </template>
     </app-list>
-    <editform
-      :visible.sync="visible"
-      :isEdit="isEdit"
-      :data="editRaw"
-      @success="handleSuccess"
-      v-if="visible"
-    ></editform>
+    <user-select :visible.sync="visible" @primary="onPrimary" v-if="visible"></user-select>
   </app-card>
 </template>
 
 <script>
 // 组件
-import Editform from '../components/Editform.vue'
+
 // 接口
-import { getUserList, deleteUsers, getRoleList } from '../api'
+import { getRoleUsers, addRoleUsers, deleteRoleUsers } from '../api'
 
 export default {
-  components: { Editform },
+  props: { id: { type: String, required: true } },
+  components: { UserSelect: () => import('@/components/base/UserSelect.vue') },
   data() {
     return {
       roles: [],
       visible: false,
-      isEdit: false, // 是否是编辑状态
-      editRaw: {}, // 编辑的数据
       multipleSelection: [] // 已选择的数据
     }
   },
@@ -43,71 +36,26 @@ export default {
     tableOptions() {
       return {
         remote: {
-          httpRequest: getUserList,
-          params: { app_id: this.$store.state.appid, role_id: '' }
+          httpRequest: getRoleUsers,
+          params: { app_id: this.$store.state.appid, role_id: this.id }
         },
-        filters: [
-          // {
-          //   type: 'input',
-          //   prop: 'name',
-          //   placeholder: '输入邮箱/手机号码搜索'
-          // },
-          {
-            type: 'select',
-            prop: 'role_id',
-            options: this.roles,
-            labelKey: 'name',
-            valueKey: 'id',
-            placeholder: '选择角色'
-          }
-        ],
         columns: [
           { type: 'selection' },
           { type: 'index' },
-          // { label: 'SSO ID', prop: 'sso_id' },
-          { label: '姓名', prop: 'sso_user.realname' },
-          { label: '角色', prop: 'roles', slots: 'table-roles' },
-          { label: '昵称', prop: 'sso_user.nickname' },
-          { label: '手机号', prop: 'sso_user.mobile' },
-          { label: '邮箱', prop: 'sso_user.email' },
-          // { label: '创建时间', prop: 'created_at' },
-          // { label: '修改时间', prop: 'updated_at' },
-          { label: '最后登录时间', prop: 'last_login_time' },
-          { label: '账号状态', prop: 'status', slots: 'table-status', width: '140' },
-          { label: '操作', slots: 'table-x', align: 'right', width: '80', fixed: 'right' }
+          { label: '姓名', prop: 'ssoUser.realname' },
+          { label: '昵称', prop: 'ssoUser.nickname' },
+          { label: '手机号', prop: 'ssoUser.mobile' },
+          { label: '邮箱', prop: 'ssoUser.email' },
+          { label: '最后登录时间', prop: 'last_login_time' }
         ]
       }
     }
   },
-  beforeMount() {
-    this.getRoleList()
-  },
   methods: {
-    getRoleList() {
-      getRoleList({ app_id: this.appid, limit: 100 }).then(res => {
-        this.roles = res.data.data
-      })
-    },
     // 选择
     handleSelectionChange(value) {
       this.multipleSelection = value
     },
-    // 创建成功刷新列表
-    handleSuccess() {
-      this.$refs.list.refetch()
-    },
-    // 创建
-    handleCreate() {
-      this.isEdit = false
-      this.editRaw = {}
-      this.visible = true
-    },
-    // 编辑
-    handleUpdate(row) {
-      this.isEdit = true
-      this.editRaw = row
-      this.visible = true
-    },
     // 删除
     onRemove() {
       this.$confirm('成员删除请谨慎操作，确定删除？', '删除成员', {
@@ -119,10 +67,19 @@ export default {
     // 删除
     handleRemove() {
       const ids = this.multipleSelection.map(item => item.id)
-      deleteUsers(this.appid, { ids: JSON.stringify(ids) }).then(res => {
+      deleteRoleUsers({ app_id: this.appid, role_id: this.id, user_ids: JSON.stringify(ids) }).then(res => {
         this.$message({ type: 'success', message: '删除成功' })
         this.$refs.list.refetch()
       })
+    },
+    // 确定添加
+    onPrimary(multipleSelection) {
+      const ids = multipleSelection.map(item => item.id)
+      addRoleUsers({ app_id: this.appid, role_id: this.id, user_ids: JSON.stringify(ids) }).then(res => {
+        this.$message({ type: 'success', message: '添加成功' })
+        this.visible = false
+        this.$refs.list.refetch()
+      })
     }
   }
 }

src/modules/settings/users/components/Editform.vue

 <template>
-  <el-dialog :title="title" :close-on-click-modal="false" v-bind="$attrs" v-on="$listeners" width="602px">
+  <el-dialog :title="title" :close-on-click-modal="false" v-bind="$attrs" v-on="$listeners" width="622px">
     <el-form ref="form" :model="form" :rules="rules" label-position="top">
-      <el-form-item label="紫荆账号" prop="sso_id">
+      <el-form-item label="紫荆账号" prop="sso_id" v-if="!isEdit">
         <user-autocomplete v-model="form.sso_id"></user-autocomplete>
       </el-form-item>
       <el-form-item label="所属角色" prop="role_ids">