serv\web- 多租户修改

schoolNewsWeb/src/views/admin/manage/system/DeptManageView.vue

@@ -112,60 +112,19 @@
     </el-dialog>
 
     <!-- 绑定角色对话框 -->
-    <el-dialog v-model="bindRoleDialogVisible" title="绑定角色" width="800px" @close="resetBindList">
-      <div class="role-binding-container">
-        <!-- 部门信息显示 -->
-        <div class="dept-info" v-if="currentDept">
-          <h4>部门信息：{{ currentDept.name }}</h4>
-          <p>部门ID：{{ currentDept.deptID }}</p>
-        </div>
-        
-        <!-- 角色绑定状态表格 -->
-        <el-table :data="roleList" style="width: 100%" border stripe>
-          <el-table-column width="80" label="绑定状态">
-            <template #default="{ row }">
-              <el-tag 
-                :type="isRoleSelected(row.roleID) ? 'success' : 'info'"
-                size="small"
-              >
-                {{ isRoleSelected(row.roleID) ? '已绑定' : '未绑定' }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column prop="name" label="角色名称" min-width="150" />
-          <el-table-column prop="roleID" label="角色ID" min-width="120" />
-          <el-table-column prop="description" label="角色描述" min-width="200" show-overflow-tooltip />
-          <el-table-column label="操作" width="100">
-            <template #default="{ row }">
-              <el-button 
-                :type="isRoleSelected(row.roleID) ? 'danger' : 'primary'"
-                size="small"
-                @click="toggleRoleSelection(row)"
-              >
-                {{ isRoleSelected(row.roleID) ? '解绑' : '绑定' }}
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-        
-        <!-- 统计信息 -->
-        <div class="binding-stats">
-          <el-alert 
-            :title="`已绑定 ${selectedRoles.length} 个角色，未绑定 ${roleList.length - selectedRoles.length} 个角色`"
-            type="info"
-            :closable="false"
-            show-icon
-          />
-        </div>
-      </div>
-      
-      <template #footer>
-        <el-button @click="bindRoleDialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="saveRoleBinding" :loading="submitting">
-          保存
-        </el-button>
-      </template>
-    </el-dialog>
+    <GenericSelector
+      v-model:visible="bindRoleDialogVisible"
+      :title="`绑定角色 - ${currentDept?.name || ''}`"
+      left-title="可选角色"
+      right-title="已选角色"
+      :fetch-available-api="fetchAllRoles"
+      :fetch-selected-api="fetchDeptRoles"
+      :item-config="{ id: 'roleID', label: 'name', sublabel: 'description' }"
+      unit-name="个"
+      search-placeholder="搜索角色名称或描述..."
+      @confirm="handleRoleConfirm"
+      @cancel="resetBindList"
+    />
     </div>
   </AdminLayout>
 </template>
@@ -175,6 +134,7 @@ import { deptApi } from '@/apis/system/dept';
 import { roleApi } from '@/apis/system/role';
 import { SysDept, SysRole } from '@/types';
 import { AdminLayout } from '@/views/admin';
+import { GenericSelector } from '@/components/base';
 
 defineOptions({
   name: 'DeptManageView'
@@ -190,12 +150,7 @@ const submitting = ref(false);
 const treeRef = ref();
 
 // 角色绑定相关数据
-const roleList = ref<SysRole[]>([]);
-const selectedRoles = ref<string[]>([]);
 const currentDept = ref<SysDept | null>(null);
-const bindList = ref<{ roles: SysRole[] }>({
-  roles: []
-});
 
 // 对话框状态
 const dialogVisible = ref(false);
@@ -452,59 +407,39 @@ function resetForm() {
   });
 }
 
+// 获取所有可选角色的接口
+async function fetchAllRoles() {
+  return await roleApi.getAllRoles();
+}
+
+// 获取部门已绑定角色的接口
+async function fetchDeptRoles() {
+  if (!currentDept.value) {
+    return { 
+      success: true, 
+      dataList: [],
+      code: 200,
+      message: '',
+      login: true,
+      auth: true
+    };
+  }
+  return await deptApi.getDeptByRole(currentDept.value);
+}
+
 // 查看绑定角色
 async function handleBindRole(row: SysDept) {
   currentDept.value = row;
-  
-  try {
-    // 获取所有角色
-    const roleResult = await roleApi.getAllRoles();
-    roleList.value = roleResult.dataList || [];
-    
-    // 获取已绑定的角色
-    const bindingResult = await deptApi.getDeptByRole(row);
-    bindList.value.roles = bindingResult.dataList || [];
-    
-    // 设置已选中的角色
-    selectedRoles.value = bindList.value.roles.map(role => role.roleID).filter((id): id is string => !!id);
-    
-    console.log('已绑定的角色:', bindList.value.roles);
-    console.log('所有角色:', roleList.value);
-    bindRoleDialogVisible.value = true;
-  } catch (error) {
-    console.error('获取角色绑定信息失败:', error);
-    ElMessage.error('获取角色绑定信息失败');
-  }
+  bindRoleDialogVisible.value = true;
 }
 
 // 重置绑定列表
 function resetBindList() {
-  bindList.value = {
-    roles: []
-  };
-  selectedRoles.value = [];
   currentDept.value = null;
 }
 
-// 检查角色是否已选中
-function isRoleSelected(roleID: string | undefined): boolean {
-  return roleID ? selectedRoles.value.includes(roleID) : false;
-}
-
-// 切换角色选择状态
-function toggleRoleSelection(role: SysRole) {
-  if (!role.roleID) return;
-  
-  const index = selectedRoles.value.indexOf(role.roleID);
-  if (index > -1) {
-    selectedRoles.value.splice(index, 1);
-  } else {
-    selectedRoles.value.push(role.roleID);
-  }
-}
-
-// 保存角色绑定
-async function saveRoleBinding() {
+// 角色选择确认 - 在confirm时提交请求
+async function handleRoleConfirm(items: SysRole[]) {
   if (!currentDept.value || !currentDept.value.deptID) {
     ElMessage.error('部门信息不完整');
     return;
@@ -513,21 +448,22 @@ async function saveRoleBinding() {
   try {
     submitting.value = true;
     
-    // 获取当前已绑定的角色ID
-    const currentBoundRoles = (bindList.value.roles || []).map(role => role.roleID).filter((id): id is string => !!id);
+    // 获取当前已绑定的角色
+    const currentBoundResult = await deptApi.getDeptByRole(currentDept.value);
+    const currentBoundIds = (currentBoundResult.dataList || []).map(r => r.roleID).filter((id): id is string => !!id);
+    
+    // 新选择的角色ID
+    const newSelectedIds = items.map(r => r.roleID).filter((id): id is string => !!id);
     
     // 找出需要绑定的角色（新增的）
-    const rolesToBind = selectedRoles.value.filter(roleID => !currentBoundRoles.includes(roleID));
+    const rolesToBind = newSelectedIds.filter(id => !currentBoundIds.includes(id));
     
     // 找出需要解绑的角色（移除的）
-    const rolesToUnbind = currentBoundRoles.filter(roleID => !selectedRoles.value.includes(roleID));
+    const rolesToUnbind = currentBoundIds.filter(id => !newSelectedIds.includes(id));
     
     // 构建需要绑定的角色对象数组
     if (rolesToBind.length > 0) {
-      const rolesToBindObjects = rolesToBind.map(roleID => {
-        const role = roleList.value.find(r => r.roleID === roleID);
-        return role || { roleID: roleID };
-      });
+      const rolesToBindObjects = items.filter(r => r.roleID && rolesToBind.includes(r.roleID));
       
       const bindDept = {
         dept: currentDept.value,
@@ -539,10 +475,7 @@ async function saveRoleBinding() {
     
     // 构建需要解绑的角色对象数组
     if (rolesToUnbind.length > 0) {
-      const rolesToUnbindObjects = rolesToUnbind.map(roleID => {
-        const role = roleList.value.find(r => r.roleID === roleID);
-        return role || { roleID: roleID };
-      });
+      const rolesToUnbindObjects = (currentBoundResult.dataList || []).filter(r => r.roleID && rolesToUnbind.includes(r.roleID));
       
       const unbindDept = {
         dept: currentDept.value,
@@ -553,7 +486,6 @@ async function saveRoleBinding() {
     }
     
     ElMessage.success('角色绑定保存成功');
-    bindRoleDialogVisible.value = false;
     
     // 刷新部门列表
     await loadDeptList();
@@ -799,30 +731,4 @@ async function handleNodeDrop(draggingNode: any, dropNode: any, dropType: string
     }
   }
 }
-
-// 角色绑定容器样式
-.role-binding-container {
-  .dept-info {
-    background: #f5f7fa;
-    padding: 15px;
-    border-radius: 4px;
-    margin-bottom: 20px;
-    
-    h4 {
-      margin: 0 0 8px 0;
-      color: #303133;
-      font-size: 16px;
-    }
-    
-    p {
-      margin: 0;
-      color: #606266;
-      font-size: 14px;
-    }
-  }
-  
-  .binding-stats {
-    margin-top: 20px;
-  }
-}
 </style>