From 4ef3ad8d3f525a1aef7f8b4882db8d22bd20ace3 Mon Sep 17 00:00:00 2001
From: fangyunong <fangyunogn@ylzinfo.com>
Date: Sat, 12 Jul 2025 15:48:30 +0800
Subject: [PATCH] =?UTF-8?q?feature:=E6=96=B0=E5=A2=9E=E8=A7=92=E8=89=B2?=
 =?UTF-8?q?=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 auto-imports.d.ts                   |  3 ++
 src/api/roleApi.ts                  | 71 ++++++++++++++++++++---------
 src/components/Ls-UI/LsRoleBase.vue | 63 +++++++++++++++++++++++++
 src/views/role/pages/Auth.vue       | 62 +++++++++++++++++++++----
 4 files changed, 167 insertions(+), 32 deletions(-)
 create mode 100644 src/components/Ls-UI/LsRoleBase.vue

diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index 9068c09..b9a680c 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -14,8 +14,11 @@ declare global {
   const defineComponent: typeof import('vue')['defineComponent']
   const deleteUser: typeof import('./src/api/roleApi')['deleteUser']
   const effectScope: typeof import('vue')['effectScope']
+  const enable: typeof import('./src/api/roleApi')['enable']
+  const enableRole: typeof import('./src/api/roleApi')['enableRole']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const getRoleList: typeof import('./src/api/roleApi')['getRoleList']
   const getUserInfo: typeof import('./src/api/userApi')['getUserInfo']
   const getUserList: typeof import('./src/api/roleApi')['getUserList']
   const h: typeof import('vue')['h']
diff --git a/src/api/roleApi.ts b/src/api/roleApi.ts
index 529c70f..2ea37bf 100644
--- a/src/api/roleApi.ts
+++ b/src/api/roleApi.ts
@@ -1,29 +1,56 @@
 import http from "@/utils/request";
 // 用户列表
-interface UserListQuery{
-    roleName?:string
-    page:number
-    pageSize:number
+interface UserListQuery {
+  roleName?: string;
+  page: number;
+  pageSize: number;
 }
-interface UserListReturn{
-    totalCount:number,
-    users:UserRaw[]
+interface UserListReturn {
+  totalCount: number;
+  users: UserRaw[];
 }
-export function getUserList(data:UserListQuery):Promise<UserListReturn>{
-    return http({
-        url:"/api/v1/AdminRoleControllers/SearchUserFromRole",
-        method:'POST',
-        data
-    })
+export function getUserList(data: UserListQuery): Promise<UserListReturn> {
+  return http({
+    url: "/api/v1/AdminRoleControllers/SearchUserFromRole",
+    method: "POST",
+    data,
+  });
 }
 
 // 删除用户
-export function deleteUser(userId:string){
-    return http({
-        url:'/api/v1/AdminRoleControllers/DelUser',
-        method:'POST',
-        params:{
-            userId
-        }
-    })
-}
\ No newline at end of file
+export function deleteUser(userId: string) {
+  return http({
+    url: "/api/v1/AdminRoleControllers/DelUser",
+    method: "POST",
+    params: {
+      userId,
+    },
+  });
+}
+
+// 获取角色列表
+export interface RoleListReturn {
+  concurrencyStamp?: string;
+  id: string;
+  name: string;
+  normalizedName: string;
+}
+export function getRoleList(): Promise<RoleListReturn[]> {
+  return http({
+    url: "/api/v1/AdminRoleControllers/AllRole",
+    method: "GET",
+  });
+}
+
+// 授权角色
+interface EnableRoleQuery {
+  userId: string;
+  roleName: string;
+}
+export function enableRole(data:EnableRoleQuery) {
+  return http({
+    url: "/api/v1/AdminRoleControllers/EndowRole",
+    method: "POST",
+    data,
+  });
+}
diff --git a/src/components/Ls-UI/LsRoleBase.vue b/src/components/Ls-UI/LsRoleBase.vue
new file mode 100644
index 0000000..5fd2608
--- /dev/null
+++ b/src/components/Ls-UI/LsRoleBase.vue
@@ -0,0 +1,63 @@
+<template>
+    <n-modal v-model:show="show">
+        <n-card style="width: 450px" title="角色库" :bordered="false" size="huge" role="dialog" aria-modal="true">
+            <n-table :bordered="false" :single-line="false">
+                <thead>
+                    <tr>
+                        <th>角色Code</th>
+                        <th>角色Name</th>
+                        <th>操作</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="item in list" :key="item.id">
+                        <td>{{ item.name }}</td>
+                        <td>{{ item.normalizedName }}</td>
+                        <td>
+                            <n-button type="primary" size="small" @click="chooseRole(item)">选择</n-button>
+                        </td>
+                    </tr>
+                </tbody>
+            </n-table>
+            <template #footer>
+                <div class="flex-content right">
+                    <n-button type="primary" size="small">新增角色</n-button>
+                    <n-button @click="show = false" size="small">关 闭</n-button>
+                </div>
+            </template>
+        </n-card>
+    </n-modal>
+</template>
+
+<script setup lang='ts'>
+import { getRoleList } from '@/api/roleApi';
+import { useMessage } from 'naive-ui';
+import type { RoleListReturn } from '@/api/roleApi';
+const emit = defineEmits<{
+    (event: 'choose', row:RoleListReturn): void
+}>()
+const show = ref(false);
+const list = ref([]);
+const message = useMessage();
+
+const chooseRole = (row:RoleListReturn) => {
+    emit('choose', toRaw(row));
+    show.value = false;
+}
+const openDialog = () => {
+    show.value = true;
+}
+const init = async () => {
+    try {
+        const result = await getRoleList();
+        list.value = result;
+    } catch (error) {
+        message.error(error instanceof Error ? error.message : error);
+    }
+};
+init();
+defineExpose({
+    openDialog
+})
+</script>
+<style scoped lang='scss'></style>
\ No newline at end of file
diff --git a/src/views/role/pages/Auth.vue b/src/views/role/pages/Auth.vue
index d4745db..1cdba61 100644
--- a/src/views/role/pages/Auth.vue
+++ b/src/views/role/pages/Auth.vue
@@ -2,18 +2,19 @@
   <div class="main__container table">
     <header class="table-header">
       <div class="table-header__search">
-        <n-input placeholder="请输入用户名称" v-model:value="queryInfo.userName" size="small" style="width: 240px;" clearable />
+        <n-input placeholder="请输入用户名称" v-model:value="queryInfo.userName" size="small" style="width: 240px;"
+          clearable />
         <n-select placeholder="请选择角色" v-model:value="queryInfo.roleName" :options="options" size="small"
-          style="width: 240px;" clearable/>
+          style="width: 240px;" clearable />
       </div>
       <ls-list-button @search="init" @reset="resetList"></ls-list-button>
     </header>
     <main class="table-main" ref="tableMainRef">
       <n-data-table v-if="height" :columns="columns" :data="data" :max-height="`${height}px`"
         :min-height="`${height}px`">
-         <template #empty>
-            <LsEmpty type="no-data" title="暂无数据" description="Not Found 404"></LsEmpty>
-         </template>
+        <template #empty>
+          <LsEmpty type="no-data" title="暂无数据" description="Not Found 404"></LsEmpty>
+        </template>
       </n-data-table>
       <div class="table-main__pagination">
         <n-pagination v-model:page="pagination.page" v-model:page-size="pagination.pageSize" :item-count="data.length"
@@ -29,8 +30,8 @@
   <n-modal v-model:show="addRoleDialog">
     <n-card style="width: 450px" title="授权角色" :bordered="false" size="huge" role="dialog" aria-modal="true">
       <n-input-group>
-        <n-input readonly :style="{ width: '70%' }" placeholder="请从角色库选择角色" />
-        <n-button type="warning" strong secondary :style="{ width: '30%' }">
+        <n-input v-model:value="roleName" readonly :style="{ width: '70%' }" placeholder="请从角色库选择角色" />
+        <n-button type="warning" strong secondary :style="{ width: '30%' }" @click="openRoleDialog">
           角色库
           <template #icon>
             <n-icon>
@@ -41,22 +42,26 @@
       </n-input-group>
       <template #footer>
         <div class="flex-content right">
-          <n-button type="primary" size="small">授 权</n-button>
+          <n-button type="primary" size="small" @click="handleEnableRole">授 权</n-button>
           <n-button @click="addRoleDialog = false" size="small">关 闭</n-button>
         </div>
       </template>
     </n-card>
   </n-modal>
+  <!-- 角色库 -->
+  <LsRoleBase ref="roleRef" @choose="chooseRole"></LsRoleBase>
 </template>
 
 <script setup lang='ts'>
 import { Server } from '@vicons/ionicons5';
-import { getUserList, deleteUser } from '@/api/roleApi';
+import { getUserList, deleteUser, enableRole } from '@/api/roleApi';
 import { DataTableColumns, NButton, NTag, useDialog, useMessage } from 'naive-ui';
 import LsEmpty from '@/components/Ls-UI/LsEmpty.vue';
+import LsRoleBase from '@/components/Ls-UI/LsRoleBase.vue';
 
 const message = useMessage();
 const tableMainRef = ref<HTMLElement | null>(null);
+const roleRef = ref<InstanceType<typeof LsRoleBase> | null>(null);
 const queryInfo = reactive({
   roleName: void 0,
   userName: ''
@@ -67,11 +72,13 @@ const pagination = reactive<PageController>({
   page: 1,
 });
 const options = ref([]);
+
 const data = ref([]);
 const height = ref(null);
 const dialog = useDialog();
 const addRoleDialog = ref(false);
 const operationUuid = ref('');
+const roleName = ref(''); //授权角色
 
 // 类似render - 函数式组件渲染
 function createColumns({
@@ -234,9 +241,44 @@ onMounted(() => {
   if (tableMainRef.value) {
     height.value = tableMainRef.value.clientHeight - 64 - 50; //减去两次内边距 - 分页的大小
   };
+  initRoleList();
   init();
 });
-
+const openRoleDialog = () => {
+  roleRef.value?.openDialog();
+}
+const handleEnableRole = async () => {
+  try {
+    const query = {
+      userId: operationUuid.value,
+      roleName: roleName.value
+    }
+    await enableRole(query);
+    init();
+    message.success('授权成功！');
+  } catch (error) {
+    message.error(error.message);
+  }
+}
+// 获取角色
+const initRoleList = async () => {
+  try {
+    const result = await getRoleList();
+    options.value = result.map(item => {
+      return {
+        label:item.normalizedName,
+        value:item.name
+      }
+    });
+  } catch (error) {
+    message.error(error instanceof Error ? error.message : error);
+  }
+};
+// 赋予角色
+const chooseRole = (row) => {
+  console.log(row, 'row');
+  roleName.value = row.name;
+}
 </script>
 <style scoped lang='scss'>
 .table-header {