serv\web- 多租户修改

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

@@ -30,9 +30,12 @@
         <template #default="{ data }">
           <div class="custom-tree-node">
             <div class="node-label">
-              <el-icon v-if="data.icon" class="node-icon">
-                <component :is="data.icon" />
-              </el-icon>
+              <img 
+                v-if="data.icon" 
+                :src="PUBLIC_IMG_PATH + '/' + data.icon" 
+                class="node-icon"
+                :alt="data.name"
+              />
               <span class="node-name">{{ data.name }}</span>
               <el-tag 
                 :type="getMenuTypeTagType(data.type)" 
@@ -156,61 +159,19 @@
     </el-dialog>
 
     <!-- 绑定权限对话框 -->
-    <el-dialog v-model="bindPermissionDialogVisible" title="绑定权限" width="800px" @close="resetBindList">
-      <div class="permission-binding-container">
-        <!-- 菜单信息显示 -->
-        <div class="menu-info" v-if="currentMenu">
-          <h4>菜单信息：{{ currentMenu.name }}</h4>
-          <p>菜单ID：{{ currentMenu.menuID }}</p>
-        </div>
-        
-        <!-- 权限绑定状态表格 -->
-        <el-table :data="permissionList" style="width: 100%" border stripe>
-          <el-table-column width="80" label="绑定状态">
-            <template #default="{ row }">
-              <el-tag 
-                :type="isPermissionSelected(row.permissionID) ? 'success' : 'info'"
-                size="small"
-              >
-                {{ isPermissionSelected(row.permissionID) ? '已绑定' : '未绑定' }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column prop="name" label="权限名称" min-width="150" />
-          <el-table-column prop="permissionID" label="权限ID" min-width="120" />
-          <el-table-column prop="code" label="权限编码" min-width="150" />
-          <el-table-column prop="description" label="权限描述" min-width="200" show-overflow-tooltip />
-          <el-table-column label="操作" width="100">
-            <template #default="{ row }">
-              <el-button 
-                :type="isPermissionSelected(row.permissionID) ? 'danger' : 'primary'"
-                size="small"
-                @click="togglePermissionSelection(row)"
-              >
-                {{ isPermissionSelected(row.permissionID) ? '解绑' : '绑定' }}
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-        
-        <!-- 统计信息 -->
-        <div class="binding-stats">
-          <el-alert 
-            :title="`已绑定 ${selectedPermissions.length} 个权限，未绑定 ${permissionList.length - selectedPermissions.length} 个权限`"
-            type="info"
-            :closable="false"
-            show-icon
-          />
-        </div>
-      </div>
-      
-      <template #footer>
-        <el-button @click="bindPermissionDialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="savePermissionBinding" :loading="submitting">
-          保存
-        </el-button>
-      </template>
-    </el-dialog>
+    <GenericSelector
+      v-model:visible="bindPermissionDialogVisible"
+      :title="`绑定权限 - ${currentMenu?.name || ''}`"
+      left-title="可选权限"
+      right-title="已选权限"
+      :fetch-available-api="fetchAllPermissions"
+      :fetch-selected-api="fetchMenuPermissions"
+      :item-config="{ id: 'permissionID', label: 'name', sublabel: 'code' }"
+      unit-name="个"
+      search-placeholder="搜索权限名称或编码..."
+      @confirm="handlePermissionConfirm"
+      @cancel="resetBindList"
+    />
     </div>
   </AdminLayout>
 </template>
@@ -220,6 +181,8 @@ import { menuApi } from '@/apis/system/menu';
 import { permissionApi } from '@/apis/system/permission';
 import { SysMenu, SysPermission } from '@/types';
 import { AdminLayout } from '@/views/admin';
+import { PUBLIC_IMG_PATH } from '@/config';
+import { GenericSelector } from '@/components/base';
 
 defineOptions({
   name: 'MenuManageView'
@@ -235,12 +198,7 @@ const submitting = ref(false);
 const treeRef = ref();
 
 // 权限绑定相关数据
-const permissionList = ref<SysPermission[]>([]);
-const selectedPermissions = ref<string[]>([]);
 const currentMenu = ref<SysMenu | null>(null);
-const bindList = ref<{ permissions: SysPermission[] }>({
-  permissions: []
-});
 
 // 对话框状态
 const dialogVisible = ref(false);
@@ -533,65 +491,38 @@ function resetForm() {
   });
 }
 
+// 获取所有可选权限的接口
+async function fetchAllPermissions() {
+  const permission: SysPermission = {
+    permissionID: undefined,
+    name: undefined,
+    code: undefined,
+    description: undefined,
+  };
+  return await permissionApi.getPermissionList(permission);
+}
+
+// 获取菜单已绑定权限的接口
+async function fetchMenuPermissions() {
+  if (!currentMenu.value?.menuID) {
+    return { success: true, dataList: [] };
+  }
+  return await menuApi.getMenuPermission(currentMenu.value.menuID);
+}
+
 // 查看绑定权限
 async function handleBindPermission(row: SysMenu) {
   currentMenu.value = row;
-  
-  try {
-    // 获取所有权限
-    let permission:SysPermission = {
-        permissionID: undefined,
-        name: undefined,
-        code: undefined,
-        description: undefined,
-    };
-    const permissionResult = await permissionApi.getPermissionList(permission);
-    permissionList.value = permissionResult.dataList || [];
-    
-    // 获取已绑定的权限
-    const bindingResult = await menuApi.getMenuPermission(row.menuID!);
-    bindList.value.permissions = bindingResult.dataList || [];
-    
-    // 设置已选中的权限
-    selectedPermissions.value = bindList.value.permissions.map(permission => permission.permissionID).filter((id): id is string => !!id);
-    
-    console.log('已绑定的权限:', bindList.value.permissions);
-    console.log('所有权限:', permissionList.value);
-    bindPermissionDialogVisible.value = true;
-  } catch (error) {
-    console.error('获取权限绑定信息失败:', error);
-    ElMessage.error('获取权限绑定信息失败');
-  }
+  bindPermissionDialogVisible.value = true;
 }
 
 // 重置绑定列表
 function resetBindList() {
-  bindList.value = {
-    permissions: []
-  };
-  selectedPermissions.value = [];
   currentMenu.value = null;
 }
 
-// 检查权限是否已选中
-function isPermissionSelected(permissionID: string | undefined): boolean {
-  return permissionID ? selectedPermissions.value.includes(permissionID) : false;
-}
-
-// 切换权限选择状态
-function togglePermissionSelection(permission: SysPermission) {
-  if (!permission.permissionID) return;
-  
-  const index = selectedPermissions.value.indexOf(permission.permissionID);
-  if (index > -1) {
-    selectedPermissions.value.splice(index, 1);
-  } else {
-    selectedPermissions.value.push(permission.permissionID);
-  }
-}
-
-// 保存权限绑定
-async function savePermissionBinding() {
+// 权限选择确认 - 在confirm时提交请求
+async function handlePermissionConfirm(items: SysPermission[]) {
   if (!currentMenu.value || !currentMenu.value.menuID) {
     ElMessage.error('菜单信息不完整');
     return;
@@ -600,21 +531,22 @@ async function savePermissionBinding() {
   try {
     submitting.value = true;
     
-    // 获取当前已绑定的权限ID
-    const currentBoundPermissions = (bindList.value.permissions || []).map(permission => permission.permissionID).filter((id): id is string => !!id);
+    // 获取当前已绑定的权限
+    const currentBoundResult = await menuApi.getMenuPermission(currentMenu.value.menuID);
+    const currentBoundIds = (currentBoundResult.dataList || []).map(p => p.permissionID).filter((id): id is string => !!id);
+    
+    // 新选择的权限ID
+    const newSelectedIds = items.map(p => p.permissionID).filter((id): id is string => !!id);
     
     // 找出需要绑定的权限（新增的）
-    const permissionsToBind = selectedPermissions.value.filter(permissionID => !currentBoundPermissions.includes(permissionID));
+    const permissionsToBind = newSelectedIds.filter(id => !currentBoundIds.includes(id));
     
     // 找出需要解绑的权限（移除的）
-    const permissionsToUnbind = currentBoundPermissions.filter(permissionID => !selectedPermissions.value.includes(permissionID));
+    const permissionsToUnbind = currentBoundIds.filter(id => !newSelectedIds.includes(id));
     
     // 构建需要绑定的权限对象数组
     if (permissionsToBind.length > 0) {
-      const permissionsToBindObjects = permissionsToBind.map(permissionID => {
-        const permission = permissionList.value.find(p => p.permissionID === permissionID);
-        return permission || { permissionID: permissionID };
-      });
+      const permissionsToBindObjects = items.filter(p => p.permissionID && permissionsToBind.includes(p.permissionID));
       
       const bindMenu = {
         ...currentMenu.value,
@@ -626,10 +558,7 @@ async function savePermissionBinding() {
     
     // 构建需要解绑的权限对象数组
     if (permissionsToUnbind.length > 0) {
-      const permissionsToUnbindObjects = permissionsToUnbind.map(permissionID => {
-        const permission = permissionList.value.find(p => p.permissionID === permissionID);
-        return permission || { permissionID: permissionID };
-      });
+      const permissionsToUnbindObjects = (currentBoundResult.dataList || []).filter(p => p.permissionID && permissionsToUnbind.includes(p.permissionID));
       
       const unbindMenu = {
         ...currentMenu.value,
@@ -640,7 +569,6 @@ async function savePermissionBinding() {
     }
     
     ElMessage.success('权限绑定保存成功');
-    bindPermissionDialogVisible.value = false;
     
     // 刷新菜单列表
     await loadMenuList();
@@ -742,8 +670,9 @@ async function handleNodeDrop(draggingNode: any, dropNode: any, dropType: string
           
           .node-icon {
             margin-right: 8px;
-            color: #409EFF;
-            font-size: 16px;
+            width: 16px;
+            height: 16px;
+            object-fit: contain;
           }
           
           .node-name {
@@ -890,30 +819,4 @@ async function handleNodeDrop(draggingNode: any, dropNode: any, dropType: string
     }
   }
 }
-
-// 权限绑定容器样式
-.permission-binding-container {
-  .menu-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>