feat: role member

ui/src/api/system/role.ts

@@ -1,8 +1,9 @@
 import { get, post, del } from '@/request/index'
 import type { Ref } from 'vue'
 import { Result } from '@/request/Result'
-import type { RoleItem, RolePermissionItem, CreateOrUpdateParams } from '@/api/type/role'
+import type { RoleItem, RolePermissionItem, CreateOrUpdateParams, RoleMemberItem, CreateMemberParams } from '@/api/type/role'
 import { RoleTypeEnum } from '@/enums/system'
+import type { pageRequest } from '@/api/type/common'
 
 const prefix = '/system/role'
 /**
@@ -57,11 +58,52 @@ const saveRolePermission: (
   return post(`${prefix}/${role_id}/permission`, data, undefined, loading)
 }
 
+/**
+ * 获取角色成员列表
+ */
+const getRoleMemberList: (
+  role_id: string,
+  page: pageRequest,
+  param: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<RoleMemberItem>> = (role_id, page, param, loading) => {
+  return get(
+    `${prefix}/${role_id}/user_list/${page.current_page}/${page.page_size}`,
+    param,
+    loading,
+  )
+}
+
+/**
+ * 新建角色成员
+ */
+const CreateMember: (
+  role_id: string,
+  data: CreateMemberParams,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (role_id, data, loading) => {
+  return post(`${prefix}/${role_id}/add_member`, data, undefined, loading)
+}
+
+/**
+ * 删除角色成员
+ */
+const deleteRoleMember: (role_id: string, user_relation_id: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  role_id,
+  user_relation_id,
+  loading,
+) => {
+  return del(`${prefix}/${role_id}/remove_member/${user_relation_id}`, undefined, {}, loading)
+}
+
 export default {
   getRoleList,
   getRolePermissionList,
   getRoleTemplate,
   CreateOrUpdateRole,
   deleteRole,
-  saveRolePermission
+  saveRolePermission,
+  getRoleMemberList,
+  CreateMember,
+  deleteRoleMember
 }

ui/src/api/type/role.ts

@@ -40,4 +40,17 @@ interface CreateOrUpdateParams {
   role_type?: RoleTypeEnum,
 }
 
-export type { RoleItem, RolePermissionItem, RoleTableDataItem, CreateOrUpdateParams, ChildrenPermissionItem }
+interface RoleMemberItem {
+  user_relation_id: string,
+  user_id: string,
+  username: string,
+  nick_name: string,
+  workspace_id: string,
+  workspace_name: string,
+}
+
+interface CreateMemberParams {
+  members: { user_ids: string[], workspace_ids: string[] }[]
+}
+
+export type { RoleItem, RolePermissionItem, RoleTableDataItem, CreateOrUpdateParams, ChildrenPermissionItem, RoleMemberItem, CreateMemberParams }

ui/src/locales/lang/zh-CN/views/role.ts

@@ -17,6 +17,13 @@ export default {
     moduleName: '模块名称'
   },
   member: {
-    title: '成员'
+    title: '成员',
+    add: '添加成员',
+    workspace: '工作空间',
+    role: '角色',
+    delete: {
+      button: '移除',
+      confirmTitle: '是否删除成员：',
+    }
   }
 }

ui/src/views/role/component/CreateOrUpdateRoleDialog.vue

@@ -30,7 +30,7 @@ import type { FormInstance } from 'element-plus'
 import { MsgSuccess } from '@/utils/message'
 import { t } from '@/locales'
 import type { RoleItem, CreateOrUpdateParams } from '@/api/type/role'
-import RoleApi from '@/api/user/role'
+import RoleApi from '@/api/system/role'
 import { roleTypeMap } from '../index'
 
 const emit = defineEmits<{

ui/src/views/role/component/Member.vue

@@ -1,5 +1,109 @@
 <template>
-  <div></div>
+  <div class="p-24 pt-0">
+    <div class="flex-between mb-16">
+      <el-button type="primary" @click="handleAdd">
+        {{ $t('views.role.member.add') }}
+      </el-button>
+      <div class="flex complex-search">
+        <el-select class="complex-search__left" v-model="searchType" style="width: 120px">
+          <el-option :label="$t('views.login.loginForm.username.label')" value="username" />
+        </el-select>
+        <el-input v-if="searchType === 'username'" v-model="searchForm.username" @change="getList"
+          :placeholder="$t('common.inputPlaceholder')" style="width: 220px" clearable />
+      </div>
+    </div>
+    <app-table class="mt-16" :data="tableData" :pagination-config="paginationConfig" @sizeChange="handleSizeChange"
+      @changePage="getList" v-loading="loading">
+      <el-table-column prop="nick_name" :label="$t('views.userManage.form.nick_name.label')" />
+      <el-table-column prop="username" :label="$t('views.userManage.form.username.label')" />
+      <el-table-column prop="workspace_name" :label="$t('views.role.member.workspace')" />
+      <!-- TODO -->
+      <el-table-column prop="nick_name" :label="$t('views.role.member.role')" />
+      <el-table-column :label="$t('common.operation')" width="100" fixed="right">
+        <template #default="{ row }">
+          <el-tooltip effect="dark" :content="`${$t('common.create')}${$t('views.role.customRole')}`" placement="top">
+            <el-button type="primary" text @click.stop="handleDelete(row)" :title="$t('common.edit')">
+              <el-icon>
+                <EditPen />
+              </el-icon>
+            </el-button>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+    </app-table>
+  </div>
+  <!-- <AddMemberDrawer ref="addMemberDrawerRef" /> -->
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onMounted, ref, reactive, watch } from 'vue'
+import RoleApi from '@/api/system/role'
+import type { RoleItem, RoleMemberItem } from '@/api/type/role'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import { t } from '@/locales'
+
+const props = defineProps<{
+  currentRole?: RoleItem
+}>()
+
+const loading = ref(false)
+
+const searchType = ref('username')
+const searchForm = ref<Record<string, any>>({
+  username: '',
+})
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 20,
+  total: 0,
+})
+
+const tableData = ref<RoleMemberItem[]>([])
+
+async function getList() {
+  try {
+    const params = {
+      [searchType.value]: searchForm.value[searchType.value],
+    }
+    const res = await RoleApi.getRoleMemberList(props.currentRole?.id as string, paginationConfig, params, loading)
+    console.log('🤔️ =>', res);
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+function handleSizeChange() {
+  paginationConfig.current_page = 1
+  getList()
+}
+
+onMounted(() => {
+  getList()
+})
+
+watch(() => props.currentRole?.id, () => {
+  getList()
+})
+
+// TODO
+function handleAdd() {
+}
+
+function handleDelete(row: RoleMemberItem) {
+  MsgConfirm(
+    `${t('views.role.member.delete.confirmTitle')}${row.nick_name} ?`, '',
+    {
+      confirmButtonText: t('common.confirm'),
+      confirmButtonClass: 'danger',
+    },
+  )
+    .then(() => {
+      loading.value = true
+      RoleApi.deleteRoleMember(props.currentRole?.id as string, row.user_relation_id, loading).then(() => {
+        MsgSuccess(t('common.deleteSuccess'))
+        getList()
+      })
+    })
+    .catch(() => { })
+}
+</script>

ui/src/views/role/component/PermissionConfiguration.vue

@@ -36,7 +36,7 @@
 <script setup lang="ts">
 import { ref, watch, computed } from 'vue'
 import type { RoleItem, RolePermissionItem, RoleTableDataItem, ChildrenPermissionItem } from '@/api/type/role'
-import RoleApi from '@/api/user/role'
+import RoleApi from '@/api/system/role'
 import { MsgSuccess } from '@/utils/message'
 import { t } from '@/locales'
 

ui/src/views/role/index.vue

@@ -44,9 +44,12 @@
               </div>
               <div class="role-left_title">
                 <span class="color-secondary lighter">{{ $t('views.role.customRole') }}</span>
-                <AppIcon iconName="app-wordspace" style="font-size: 16px" class="cursor color-primary"
+                <el-tooltip effect="dark" :content="`${$t('common.create')}${$t('views.role.customRole')}`"
-                  @click="createOrUpdateRole()">
+                  placement="top">
-                </AppIcon>
+                  <el-button type="primary" text @click="createOrUpdateRole()">
+                    <AppIcon iconName="app-copy"></AppIcon>
+                  </el-button>
+                </el-tooltip>
               </div>
               <common-list :data="filterCustomRole" @click="clickRole" :default-active="currentRole?.id">
                 <template #default="{ row }">
@@ -113,7 +116,7 @@
 
 <script lang="ts" setup>
 import { onMounted, ref, watch } from 'vue'
-import RoleApi from '@/api/user/role'
+import RoleApi from '@/api/system/role'
 import { t } from '@/locales'
 import PermissionConfiguration from './component/PermissionConfiguration.vue'
 import Member from './component/Member.vue'