update: 角色管理

src/api/system/role.ts

@@ -6,11 +6,15 @@ export const getRoleList_api = (data: any): Promise<any> => server.post(`/role/_
 export const delRole_api = (id: string): Promise<any> => server.remove(`/role/${id}`);
 // 保存角色
 export const saveRole_api = (data: any): Promise<any> => server.post(`/role`, data);
+// 获取角色详细信息
+export const getRoleDetails_api = (id: string): Promise<any> => server.get(`/role/${id}`);
 // 获取角色对应的权限树
 export const getPrimissTree_api = (id: string): Promise<any> => server.get(`/menu/role/${id}/_grant/tree`);
 
 
 // 获取用户列表
 export const getUserByRole_api = (data: any): Promise<any> => server.post(`/user/_query/`, data);
-// 将用户与该角色进行绑定
+// 将用户与角色绑定
-export const bindUser_api = (roleId:string, data: string[]): Promise<any> => server.post(`/role/${roleId}/users/_bind`, data);
+export const bindUser_api = (roleId:string, data: string[]): Promise<any> => server.post(`/role/${roleId}/users/_bind`, data);
+// 将用户与角色解绑
+export const unbindUser_api = (roleId:string, data: string[]): Promise<any> => server.post(`/role/${roleId}/users/_unbind`, data);

src/views/system/Role/Detail/Permiss/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="role-permiss-container">
-        <a-card>
+        <a-card style="max-width: 60%">
             <h5>基本信息</h5>
             <a-form ref="formRef" :model="form.data" layout="vertical">
                 <a-form-item
@@ -11,7 +11,6 @@
                     <a-input
                         v-model:value="form.data.name"
                         placeholder="请输入角色名称"
-                        allow-clear
                         :maxlength="64"
                     />
                 </a-form-item>
@@ -19,7 +18,6 @@
                     <a-textarea
                         v-model:value="form.data.description"
                         placeholder="请输入说明"
-                        allow-clear
                         :maxlength="200"
                     />
                 </a-form-item>
@@ -30,14 +28,24 @@
             <h5>权限分配</h5>
             <PermissTree />
 
-            <a-button type="primary" :disabled="form.loading" @click="form.clickSave">保存</a-button>
+            <a-button
+                type="primary"
+                :disabled="form.loading"
+                @click="form.clickSave"
+                >保存</a-button
+            >
         </a-card>
     </div>
 </template>
 
 <script setup lang="ts" name="RolePermiss">
 import { FormInstance } from 'ant-design-vue';
-import PermissTree from '../components/PermissTree.vue'
+import PermissTree from '../components/PermissTree.vue';
+
+import { getRoleDetails_api } from '@/api/system/role';
+
+const route = useRoute();
+const roleId = route.params.id as string;
 
 // 表单相关
 const formRef = ref<FormInstance>();
@@ -47,9 +55,17 @@ const form = reactive({
         name: '',
         description: '',
     },
-    getForm: ()=>{},
+    getForm: () => {
-    clickSave: ()=>{}
+        getRoleDetails_api(roleId).then((resp) => {
+            if (resp.status) {
+                form.data = resp.result;
+            }
+        });
+    },
+    clickSave: () => {},
 });
+
+form.getForm();
 </script>
 
 <style lang="less" scoped></style>

src/views/system/Role/Detail/User/index.d.ts

@@ -0,0 +1,23 @@
+type columnsType = {
+    title: string,
+    dataIndex: string,
+    key: string,
+    scopedSlots?:boolean
+}
+
+export type queryType = {
+    columns: columnsType[],
+    params?: object
+}
+
+export type tableType = {
+    columns: columnsType[],
+    tableData: any[],
+    refresh: Function,
+    clickAdd: Function,
+    clickUnBind: Function,
+    unbind: Function,
+    _selectedRowKeys?: string[],
+    onSelectChange?: Function,
+    cancelSelect?: Function
+}

src/views/system/Role/Detail/User/index.vue

@@ -7,7 +7,12 @@
             :columns="table.columns"
             :request="getUserByRole_api"
             model="TABLE"
-            :params="query.params"
+            :defaultParams="query.params"
+            :rowSelection="{
+                selectedRowKeys: table._selectedRowKeys,
+                onChange: table.onSelectChange,
+            }"
+            @cancelSelect="table.cancelSelect"
         >
             <template #headerTitle>
                 <a-button type="primary" @click="table.clickAdd"
@@ -16,7 +21,21 @@
             </template>
 
             <template #action="slotProps">
-                <a-space :size="16"> </a-space>
+                <a-space :size="16">
+                    <a-popconfirm
+                        title="确认解绑"
+                        ok-text="确定"
+                        cancel-text="取消"
+                        @confirm="table.clickUnBind(slotProps)"
+                    >
+                        <a-tooltip>
+                            <template #title>解绑</template>
+                            <a-button style="padding: 0" type="link">
+                                <disconnect-outlined />
+                            </a-button>
+                        </a-tooltip>
+                    </a-popconfirm>
+                </a-space>
             </template>
         </JTable>
 
@@ -27,11 +46,15 @@
 </template>
 
 <script setup lang="ts" name="RoleUser">
+import { PlusOutlined, DisconnectOutlined } from '@ant-design/icons-vue';
 import AddUserDialog from '../components/AddUserDialog.vue';
-import { getUserByRole_api } from '@/api/system/role';
+import { getUserByRole_api, unbindUser_api } from '@/api/system/role';
+import { message } from 'ant-design-vue';
+import userType from './index';
 
-const route = useRoute()
+const route = useRoute();
-const query = reactive({
+const roleId = route.params.id as string;
+const query = reactive<userType.queryType>({
     columns: [
         {
             title: '姓名',
@@ -69,7 +92,7 @@ const query = reactive({
 });
 
 const tableRef = ref<Record<string, any>>({});
-const table = reactive({
+const table = reactive<userType.tableType>({
     columns: [
         {
             title: '姓名',
@@ -99,12 +122,35 @@ const table = reactive({
         },
     ],
     tableData: [],
+    // 点击打开新增弹窗
     clickAdd: () => {
         dialog.openAdd += 1;
     },
-    refresh: ()=>{
+    // 点击解绑
-        tableRef.value.reload()
+    clickUnBind: (row: any) => {
-    }
+        table.unbind([row.id]);
+    },
+    // 批量解绑
+    unbind: (ids: string[] = []) => {
+        unbindUser_api(roleId, ids).then((resp) => {
+            if (resp.status === 200) {
+                message.success('操作成功');
+                table.refresh();
+            }
+        });
+    },
+    // 刷新表格
+    refresh: () => {
+        tableRef.value.reload();
+    },
+    // 多选
+    _selectedRowKeys: [] as string[],
+    onSelectChange: (keys: string[]) => {
+        table._selectedRowKeys = [...keys];
+    },
+    cancelSelect: () => {
+        table._selectedRowKeys = [];
+    },
 });
 
 // 弹窗相关