11<template >
2- <div ></div >
2+ <div class =" p-24 pt-0" >
3+ <div class =" flex-between mb-16" >
4+ <el-button type =" primary" @click =" handleAdd" >
5+ {{ $t('views.role.member.add') }}
6+ </el-button >
7+ <div class =" flex complex-search" >
8+ <el-select class =" complex-search__left" v-model =" searchType" style =" width : 120px " >
9+ <el-option :label =" $t('views.login.loginForm.username.label')" value =" username" />
10+ </el-select >
11+ <el-input v-if =" searchType === 'username'" v-model =" searchForm.username" @change =" getList"
12+ :placeholder =" $t('common.inputPlaceholder')" style =" width : 220px " clearable />
13+ </div >
14+ </div >
15+ <app-table class =" mt-16" :data =" tableData" :pagination-config =" paginationConfig" @sizeChange =" handleSizeChange"
16+ @changePage =" getList" v-loading =" loading" >
17+ <el-table-column prop =" nick_name" :label =" $t('views.userManage.form.nick_name.label')" />
18+ <el-table-column prop =" username" :label =" $t('views.userManage.form.username.label')" />
19+ <el-table-column prop =" workspace_name" :label =" $t('views.role.member.workspace')" />
20+ <!-- TODO -->
21+ <el-table-column prop =" nick_name" :label =" $t('views.role.member.role')" />
22+ <el-table-column :label =" $t('common.operation')" width =" 100" fixed =" right" >
23+ <template #default =" { row } " >
24+ <el-tooltip effect =" dark" :content =" `${$t('common.create')}${$t('views.role.customRole')}`" placement =" top" >
25+ <el-button type =" primary" text @click.stop =" handleDelete(row)" :title =" $t('common.edit')" >
26+ <el-icon >
27+ <EditPen />
28+ </el-icon >
29+ </el-button >
30+ </el-tooltip >
31+ </template >
32+ </el-table-column >
33+ </app-table >
34+ </div >
35+ <!-- <AddMemberDrawer ref="addMemberDrawerRef" /> -->
336</template >
437
5- <script setup lang="ts"></script >
38+ <script setup lang="ts">
39+ import { onMounted , ref , reactive , watch } from ' vue'
40+ import RoleApi from ' @/api/system/role'
41+ import type { RoleItem , RoleMemberItem } from ' @/api/type/role'
42+ import { MsgSuccess , MsgConfirm } from ' @/utils/message'
43+ import { t } from ' @/locales'
44+
45+ const props = defineProps <{
46+ currentRole? : RoleItem
47+ }>()
48+
49+ const loading = ref (false )
50+
51+ const searchType = ref (' username' )
52+ const searchForm = ref <Record <string , any >>({
53+ username: ' ' ,
54+ })
55+ const paginationConfig = reactive ({
56+ current_page: 1 ,
57+ page_size: 20 ,
58+ total: 0 ,
59+ })
60+
61+ const tableData = ref <RoleMemberItem []>([])
62+
63+ async function getList() {
64+ try {
65+ const params = {
66+ [searchType .value ]: searchForm .value [searchType .value ],
67+ }
68+ const res = await RoleApi .getRoleMemberList (props .currentRole ?.id as string , paginationConfig , params , loading )
69+ console .log (' 🤔️ =>' , res );
70+ } catch (error ) {
71+ console .error (error )
72+ }
73+ }
74+
75+ function handleSizeChange() {
76+ paginationConfig .current_page = 1
77+ getList ()
78+ }
79+
80+ onMounted (() => {
81+ getList ()
82+ })
83+
84+ watch (() => props .currentRole ?.id , () => {
85+ getList ()
86+ })
87+
88+ // TODO
89+ function handleAdd() {
90+ }
91+
92+ function handleDelete(row : RoleMemberItem ) {
93+ MsgConfirm (
94+ ` ${t (' views.role.member.delete.confirmTitle' )}${row .nick_name } ? ` , ' ' ,
95+ {
96+ confirmButtonText: t (' common.confirm' ),
97+ confirmButtonClass: ' danger' ,
98+ },
99+ )
100+ .then (() => {
101+ loading .value = true
102+ RoleApi .deleteRoleMember (props .currentRole ?.id as string , row .user_relation_id , loading ).then (() => {
103+ MsgSuccess (t (' common.deleteSuccess' ))
104+ getList ()
105+ })
106+ })
107+ .catch (() => { })
108+ }
109+ </script >
0 commit comments