From ba7b027c7b51fc790367ecbc01fdbbddf00cb546 Mon Sep 17 00:00:00 2001
From: dzq <dzq@ys.com>
Date: Wed, 21 May 2025 10:33:58 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86):=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=A7=92=E8=89=B2=E7=AE=A1=E7=90=86=E5=92=8C?=
 =?UTF-8?q?=E7=AD=9B=E9=80=89=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在用户管理模块中新增角色管理和筛选功能，包括：
1. 在用户查询和更新接口中添加 `roleId` 和 `sysRoleId` 字段
2. 在用户详情页添加角色修改功能
3. 在用户列表页添加角色筛选选项卡
---
 src/api/qy/qyUser.ts         |   3 +
 src/views/user/qy/detail.vue |  43 +++++++++++++-
 src/views/user/qy/hook.tsx   |   4 +-
 src/views/user/qy/index.vue  | 111 +++++++++++++++++++++++++++++------
 4 files changed, 141 insertions(+), 20 deletions(-)

diff --git a/src/api/qy/qyUser.ts b/src/api/qy/qyUser.ts
index 22b68b7..aea7842 100644
--- a/src/api/qy/qyUser.ts
+++ b/src/api/qy/qyUser.ts
@@ -67,6 +67,8 @@ export interface QyUserQuery extends BasePageQuery {
   mobile?: string;
   corpid?: string;
   mainDepartment?: number;
+  roleId?: number;
+  sysRoleId?: number;
 }
 
 export interface AddQyUserCommand {
@@ -77,6 +79,7 @@ export interface AddQyUserCommand {
   /** 用户余额 */
   balance?: number;
   roleId?: number;
+  sysRoleId?: number;
 }
 
 export interface UpdateQyUserCommand extends AddQyUserCommand {
diff --git a/src/views/user/qy/detail.vue b/src/views/user/qy/detail.vue
index dabd076..46c74aa 100644
--- a/src/views/user/qy/detail.vue
+++ b/src/views/user/qy/detail.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { type QyUserDTO, getQyUserDetailApi } from "@/api/qy/qyUser";
+import { type QyUserDTO, getQyUserDetailApi, updateQyUserApi } from "@/api/qy/qyUser";
 import { getOrderListApi, type OrderDTO } from "@/api/shop/order";
 import BalanceEditModal from "./BalanceEditModal.vue";
+import { getRoleListApi, RoleDTO } from "@/api/system/role";
 
 defineOptions({
   name: "QyUserDetail"
@@ -15,6 +16,9 @@ const userInfo = ref<QyUserDTO>({});
 const loading = ref(false);
 const balanceVisible = ref(false);
 const currentBalance = ref(0);
+const roleVisible = ref(false);
+const roleList = ref<RoleDTO[]>([]);
+const selectedRoleId = ref<number>();
 
 // 基础信息
 const basicInfo = ref({
@@ -56,6 +60,32 @@ watch(activeTab, (newVal) => {
   }
 });
 
+async function handleModifyRole() {
+  try {
+    const { data } = await getRoleListApi({});
+    roleList.value = data.rows;
+    selectedRoleId.value = userInfo.value.roleId;
+    roleVisible.value = true;
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+async function handleRoleConfirm() {
+  try {
+    await updateQyUserApi(userInfo.value.id!, {
+      ...userInfo.value,
+      id: userInfo.value.id,
+      roleId: selectedRoleId.value,
+      sysRoleId: selectedRoleId.value
+    });
+    roleVisible.value = false;
+    await fetchUserDetail();
+  } catch (error) {
+    console.error(error);
+  }
+}
+
 async function fetchUserDetail() {
   try {
     loading.value = true;
@@ -111,6 +141,8 @@ async function handleModifyBalance(row: QyUserDTO) {
         </div>
 
         <el-descriptions class="info-details" v-if="activeTab === 'basic'" :column="2" border>
+          <el-descriptions-item label="角色">{{ userInfo.roleName }} <el-button type="primary" size="small"
+              @click="handleModifyRole">修改</el-button></el-descriptions-item>
           <el-descriptions-item label="用户ID">{{ userInfo.userid }}</el-descriptions-item>
           <el-descriptions-item label="企业ID">{{ userInfo.corpid }}</el-descriptions-item>
           <el-descriptions-item label="职务信息">{{ userInfo.position }}</el-descriptions-item>
@@ -143,6 +175,15 @@ async function handleModifyBalance(row: QyUserDTO) {
       </el-card>
     </div>
     <BalanceEditModal v-model:visible="balanceVisible" :row="userInfo" @refresh="fetchUserDetail" />
+    <el-drawer v-model="roleVisible" title="修改角色" direction="rtl" size="30%">
+      <el-select v-model="selectedRoleId" placeholder="请选择角色" style="width: 100%; margin: 20px 0">
+        <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName" :value="item.roleId" />
+      </el-select>
+      <div style="padding: 20px; text-align: right">
+        <el-button @click="roleVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleRoleConfirm">确定</el-button>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
diff --git a/src/views/user/qy/hook.tsx b/src/views/user/qy/hook.tsx
index 059e9d5..dbe7f44 100644
--- a/src/views/user/qy/hook.tsx
+++ b/src/views/user/qy/hook.tsx
@@ -31,6 +31,7 @@ export function useHook() {
     mobile: undefined,
     corpid: wxStore.corpid, // 企业ID
     mainDepartment: undefined, // 主部门
+    sysRoleId: undefined // 角色ID
   });
 
   const timeRange = ref<[string, string]>(); // 时间范围选择
@@ -163,6 +164,7 @@ export function useHook() {
     handleViewDetail,
     handleModifyBalance,
     balanceVisible,
-    selectedUser
+    selectedUser,
+    roleOptions
   };
 }
diff --git a/src/views/user/qy/index.vue b/src/views/user/qy/index.vue
index 9c5725d..21f1e7b 100644
--- a/src/views/user/qy/index.vue
+++ b/src/views/user/qy/index.vue
@@ -25,9 +25,15 @@ const {
   handleViewDetail,
   handleModifyBalance,
   balanceVisible,
-  selectedUser
+  selectedUser,
+  roleOptions,
 } = useHook();
 
+const handleTabChange = (roleId) => {
+  searchFormParams.sysRoleId = roleId;
+  onSearch();
+};
+
 watch(
   () => searchFormParams.mainDepartment,
   () => {
@@ -41,20 +47,33 @@ watch(
     <tree class="w-[17%] float-left" v-model="searchFormParams.mainDepartment" />
     <div class="float-right w-[82%]">
       <BalanceEditModal v-model:visible="balanceVisible" :row="selectedUser" @refresh="getList" />
-      <el-form ref="formRef" :inline="true" :model="searchFormParams"
-        class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]">
-        <el-form-item label="姓名：" prop="name">
-          <el-input v-model="searchFormParams.name" placeholder="请输入" clearable class="!w-[160px]" />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" :icon="useRenderIcon(Search)" :loading="pageLoading" @click="onSearch">
-            搜索
-          </el-button>
-          <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
-            重置
-          </el-button>
-        </el-form-item>
-      </el-form>
+      <div class="search-form-container">
+        <el-form ref="formRef" :inline="true" :model="searchFormParams"
+          class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]">
+          <el-form-item label="姓名：" prop="name">
+            <el-input v-model="searchFormParams.name" placeholder="请输入" clearable class="!w-[160px]" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" :icon="useRenderIcon(Search)" :loading="pageLoading" @click="onSearch">
+              搜索
+            </el-button>
+            <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
+              重置
+            </el-button>
+          </el-form-item>
+        </el-form>
+
+        <div class="custom-tabs">
+          <button class="tab-btn" :class="{ 'active': searchFormParams.sysRoleId === undefined }"
+            @click="handleTabChange(undefined)">
+            全部
+          </button>
+          <button v-for="role in roleOptions" :key="role.roleId" class="tab-btn"
+            :class="{ 'active': searchFormParams.sysRoleId === role.roleId }" @click="handleTabChange(role.roleId)">
+            {{ role.roleName }}
+          </button>
+        </div>
+      </div>
 
       <div class="grid-container">
         <el-row :gutter="12">
@@ -101,9 +120,65 @@ watch(
   margin: 0;
 }
 
-.search-form {
-  :deep(.el-form-item) {
-    margin-bottom: 12px;
+.search-form-container {
+  .search-form {
+    :deep(.el-form-item) {
+      margin-bottom: 12px;
+    }
+  }
+
+  .custom-tabs {
+    padding: 0 20px;
+    background: var(--el-bg-color);
+    border-radius: 4px;
+    display: flex;
+    gap: 12px;
+
+    .tab-btn {
+      padding: 4px 10px;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      color: var(--el-text-color-regular);
+      position: relative;
+      border-radius: 4px 4px 0 0;
+      font-size: 14px;
+      transition: color 0.2s ease;
+
+      &.active {
+        color: var(--el-color-primary);
+        background-color: #f0f2f5;
+        border-bottom: none;
+        z-index: 1;
+
+        &::before,
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: -6px;
+          width: 18px;
+          height: 18px;
+          background: transparent;
+        }
+
+        &::before {
+          left: -18px;
+          border-bottom-right-radius: 18px;
+          box-shadow: 9px 0 0 0 #f0f2f5;
+        }
+
+        &::after {
+          right: -18px;
+          border-bottom-left-radius: 18px;
+          box-shadow: -9px 0 0 0 #f0f2f5;
+        }
+      }
+
+      &:hover {
+        color: var(--el-color-primary);
+        text-shadow: 0 0 1px rgba(64, 158, 255, 0.3);
+      }
+    }
   }
 }