yg-yygl 0.0.1

package/src/views/sys/app-menu/config/auth/auth-form.vue

@@ -0,0 +1,733 @@
+<script setup lang="ts">
+import type { App } from '../../../../../api/app-menu/types';
+
+import {onMounted, ref, watch} from 'vue';
+
+import { Icon } from '@udp/component-ui';
+
+import {
+  CircleCheckFilled,
+  Delete,
+  OfficeBuilding,
+  Search,
+  Suitcase,
+  User,
+} from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+
+import { queryAccountList } from '../../../../../api/account';
+import { allDeptThin } from '../../../../../api/department';
+import { getRoleList } from '../../../../../api/role';
+import { getAllAuthIds } from '../../../../../api/app-menu/config';
+
+const props = defineProps<{
+  application: App;
+  step: Number;
+}>();
+
+// --- State ---
+
+// TreeNode interface
+interface TreeNode {
+  id: string;
+  departName: string;
+  departCode?: string;
+  parentId: string;
+  hasChild?: boolean;
+  disabled?: boolean;
+  children?: TreeNode[];
+}
+
+// Selected items
+interface SelectedItem {
+  id: string;
+  name: string;
+  type: 'account' | 'dept' | 'role';
+  originalData?: any;
+}
+
+const selectedItems = ref<SelectedItem[]>([]);
+
+// 全选复选框状态
+const selectAllCheckbox = ref(false);
+
+// 已预选的ID集合（从接口获取，不可取消选中）
+const preSelectedIds = ref<Set<string>>(new Set());
+const preSelectedTypeMap = ref<Map<string, 'account' | 'dept' | 'role'>>(new Map());
+
+// Step 1: Selection
+const activeTab = ref('account'); // 'account', 'role', 'dept'
+const filterText = ref('');
+const loading = ref(false);
+
+// Data Lists
+const accountList = ref<any[]>([]);
+const roleList = ref<any[]>([]);
+const deptList = ref<TreeNode[]>([]);
+const allFlatData = ref<TreeNode[]>([]);
+const treeRef = ref();
+const deptTreeProps = {
+  children: 'children',
+  label: 'departName',
+  value: 'id',
+  disabled: (data: TreeNode) => isPreSelected(data.id),
+};
+
+// Step 2: Action
+const authAction = ref('0'); // '0': Allow, '1': Deny
+
+// --- Methods ---
+
+/**
+ * 将扁平化数据转换为树形结构
+ */
+const buildTree = (
+  flatData: TreeNode[],
+  parentId: string = '0',
+): TreeNode[] => {
+  const result: TreeNode[] = [];
+  for (const item of flatData) {
+    if (item.parentId === parentId) {
+      const children = buildTree(flatData, item.id);
+      result.push({
+        ...item,
+        children: children.length > 0 ? children : undefined,
+      });
+    }
+  }
+  return result;
+};
+
+/**
+ * 过滤树数据
+ */
+const filterTreeData = (filterText: string) => {
+  if (!filterText) {
+    deptList.value = buildTree(allFlatData.value);
+    return;
+  }
+
+  const matchedIds = new Set<string>();
+  const lowerFilterText = filterText.toLowerCase();
+
+  // 找到所有匹配的节点及其父节点
+  const findMatchedNodes = (nodes: TreeNode[], parents: TreeNode[]) => {
+    for (const node of nodes) {
+      if (node.departName?.toLowerCase().includes(lowerFilterText)) {
+        matchedIds.add(node.id);
+        // 添加所有父节点
+        for (const parent of parents) {
+          matchedIds.add(parent.id);
+        }
+      }
+      if (node.children) {
+        findMatchedNodes(node.children, [...parents, node]);
+      }
+    }
+  };
+
+  const fullTree = buildTree(allFlatData.value);
+  findMatchedNodes(fullTree, []);
+
+  // 只保留匹配的节点
+  const filterTree = (nodes: TreeNode[]): TreeNode[] => {
+    return nodes
+      .filter((node) => matchedIds.has(node.id))
+      .map((node) => ({
+        ...node,
+        children: node.children ? filterTree(node.children) : undefined,
+      }));
+  };
+
+  deptList.value = filterTree(fullTree);
+};
+
+/**
+ * 部门树勾选变化事件
+ */
+const onDeptCheck = () => {
+  // 获取所有选中的节点
+  const checkedNodes = treeRef.value?.getCheckedNodes() || [];
+
+  // 移除所有旧的部门选中项
+  selectedItems.value = selectedItems.value.filter((i) => i.type !== 'dept');
+
+  // 添加新选中的部门（排除预选项）
+  checkedNodes.forEach((node: TreeNode) => {
+    // 跳过预选项
+    if (!isPreSelected(node.id) && !selectedItems.value.some(s => s.id === node.id && s.type === 'dept')) {
+      selectedItems.value.push({
+        id: node.id,
+        name: node.departName,
+        type: 'dept',
+        originalData: node,
+      });
+    }
+  });
+};
+
+// Fetch Data based on active tab
+const fetchData = async () => {
+  loading.value = true;
+  try {
+    if (activeTab.value === 'account') {
+      const res = await queryAccountList({ loginCode: filterText.value });
+      accountList.value = res || [];
+    } else if (activeTab.value === 'role') {
+      const res = await getRoleList({ current: -1, size: 10_000, model: { roleStatus: 1, nameCode: filterText.value } });
+      roleList.value = res?.records || res || [];
+    } else if (activeTab.value === 'dept') {
+      // 首次加载或切换到部门 tab 时，获取所有数据
+      if (allFlatData.value.length === 0) {
+        const res = await allDeptThin();
+        allFlatData.value = res || [];
+      }
+      // 根据搜索关键词过滤树形数据
+      filterTreeData(filterText.value);
+    }
+    // 数据加载后更新全选复选框状态
+    updateSelectAllState();
+  } catch (error) {
+    console.error(error);
+    ElMessage.error('获取数据失败');
+  } finally {
+    loading.value = false;
+  }
+};
+
+// Watchers for fetching
+watch(
+  [activeTab, filterText],
+  () => {
+    fetchData();
+  },
+  { immediate: true },
+);
+
+// 监听tab切换，更新全选复选框状态
+watch(activeTab, () => {
+  updateSelectAllState();
+});
+
+// Selection Logic
+const isSelected = (item: any, type: 'account' | 'dept' | 'role') => {
+  return selectedItems.value.some((s) => s.id === item.id && s.type === type);
+};
+
+// 判断项目是否被预选（禁用状态）
+const isPreSelected = (itemId: string): boolean => {
+  return preSelectedIds.value.has(itemId);
+};
+
+const toggleSelection = (item: any, type: 'account' | 'dept' | 'role') => {
+  // 如果是预选项，不允许选中（点击无反应）
+  if (isPreSelected(item.id)) {
+    return;
+  }
+
+  const index = selectedItems.value.findIndex(
+    (s) => s.id === item.id && s.type === type,
+  );
+  if (index === -1) {
+    let name = '';
+    switch (type) {
+      case 'account': {
+        name = item.nickname || item.loginCode;
+        break;
+      }
+      case 'dept': {
+        name = item.departName;
+        break;
+      }
+      case 'role': {
+        name = item.name;
+        break;
+      }
+    }
+
+    selectedItems.value.push({
+      id: item.id,
+      name,
+      type,
+      originalData: item,
+    });
+  } else {
+    selectedItems.value.splice(index, 1);
+  }
+};
+
+const removeSelection = (index: number) => {
+  const item = selectedItems.value[index];
+
+  // 如果删除的是部门，同步取消树中的勾选状态
+  if (item.type === 'dept' && treeRef.value) {
+    treeRef.value.setChecked(item.id, false, false);
+  }
+
+  selectedItems.value.splice(index, 1);
+};
+
+// 计算当前tab的可选数据（排除预选项）
+const getCurrentSelectableList = () => {
+  if (activeTab.value === 'account') {
+    return accountList.value.filter(item => !isPreSelected(item.id));
+  } else if (activeTab.value === 'role') {
+    return roleList.value.filter(item => !isPreSelected(item.id));
+  } else if (activeTab.value === 'dept') {
+    return allFlatData.value.filter(item => !isPreSelected(item.id));
+  }
+  return [];
+};
+
+// 判断当前列表是否全选
+const isAllSelected = () => {
+  const selectableList = getCurrentSelectableList();
+  if (selectableList.length === 0) return false;
+  return selectableList.every(item => isSelected(item, activeTab.value as 'account' | 'dept' | 'role'));
+};
+
+// 更新全选复选框状态
+const updateSelectAllState = () => {
+  selectAllCheckbox.value = isAllSelected();
+};
+
+// 全选/取消全选
+const handleSelectAll = (checked: boolean) => {
+  const selectableList = getCurrentSelectableList();
+
+  if (checked) {
+    // 全选：添加所有可选项目
+    selectableList.forEach(item => {
+      const type = activeTab.value as 'account' | 'dept' | 'role';
+      if (!isSelected(item, type)) {
+        let name = '';
+        switch (type) {
+          case 'account': {
+            name = item.nickname || item.loginCode;
+            break;
+          }
+          case 'dept': {
+            name = item.departName;
+            break;
+          }
+          case 'role': {
+            name = item.name;
+            break;
+          }
+        }
+        selectedItems.value.push({
+          id: item.id,
+          name,
+          type,
+          originalData: item,
+        });
+      }
+    });
+
+    // 如果是部门，同步树的勾选状态
+    if (activeTab.value === 'dept' && treeRef.value) {
+      selectableList.forEach(item => {
+        treeRef.value?.setChecked(item.id, true, false);
+      });
+    }
+  } else {
+    // 取消全选：移除当前tab的所有选中项（排除预选项）
+    const type = activeTab.value as 'account' | 'dept' | 'role';
+    selectedItems.value = selectedItems.value.filter(item => item.type !== type || isPreSelected(item.id));
+
+    // 如果是部门，同步取消树的勾选状态
+    if (activeTab.value === 'dept' && treeRef.value) {
+      selectableList.forEach(item => {
+        treeRef.value?.setChecked(item.id, false, false);
+      });
+    }
+  }
+};
+
+// 监听选中项变化，更新全选复选框状态
+watch(selectedItems, () => {
+  updateSelectAllState();
+}, { deep: true });
+
+// 清空所有已选项
+const clearAllSelected = () => {
+  // 清空部门树的勾选状态
+  if (treeRef.value) {
+    const deptIds = selectedItems.value
+      .filter(item => item.type === 'dept')
+      .map(item => item.id);
+    deptIds.forEach(id => {
+      treeRef.value?.setChecked(id, false, false);
+    });
+  }
+
+  // 清空所有已选项
+  selectedItems.value = [];
+};
+
+// Expose data for parent component
+defineExpose({
+  getData: () => ({
+    subjects: selectedItems.value,
+    action: authAction.value,
+  }),
+});
+
+// Helper for icons
+const getIcon = (type: string) => {
+  if (type === 'account') return User;
+  if (type === 'role') return Suitcase;
+  return OfficeBuilding;
+};
+
+const getAll = () => {
+  getAllAuthIds(props.application?.id || '').then(res => {
+    console.log('getAll', res)
+
+    // 响应格式: { "1": [id1, id2], "2": [id3], "3": [id4] }
+    // 1=账号, 2=组织, 3=角色
+    const typeMap: Record<string, 'account' | 'dept' | 'role'> = {
+      '1': 'account',
+      '2': 'dept',
+      '3': 'role'
+    };
+
+    Object.entries(res).forEach(([type, ids]) => {
+      if (Array.isArray(ids)) {
+        ids.forEach((id: string) => {
+          preSelectedIds.value.add(id);
+          preSelectedTypeMap.value.set(id, typeMap[type]);
+        });
+      }
+    });
+  })
+}
+
+onMounted(() => {
+  getAll();
+})
+</script>
+
+<template>
+  <div class="flex h-[60vh] max-h-[800px] w-full flex-col overflow-hidden">
+    <!-- Steps Header -->
+    <div class="border-b px-4 py-2">
+      <el-steps :active="step" finish-status="success" align-center>
+        <el-step title="选择授权主体">
+          <template #icon>
+            <div
+              class="h-8 w-8 rounded-full border-2 border-[#DBDBDB] text-center text-[14px] font-bold leading-6 text-white"
+              :class="{
+                'bg-primary !border-primary': step === 0,
+                'text-success bg-success !border-success': step === 1,
+              }"
+            >
+              1
+            </div>
+          </template>
+        </el-step>
+        <el-step title="选择授权作用">
+          <template #icon>
+            <div
+              class="h-8 w-8 rounded-full border-2 border-[#DBDBDB] text-center text-[14px] font-bold leading-6 text-[#999999]"
+              :class="{
+                'bg-primary !border-primary text-white': step === 1,
+              }"
+            >
+              2
+            </div>
+          </template>
+        </el-step>
+      </el-steps>
+    </div>
+
+    <!-- Step 1: Selection Content -->
+    <div
+      v-if="step === 0"
+      class="flex w-full flex-1 gap-4 overflow-hidden pt-4"
+    >
+      <!-- Left Panel: Source -->
+      <div
+        class="flex h-full flex-1 flex-col overflow-hidden rounded border bg-white shadow-sm"
+      >
+        <div class="px-4 pt-2">
+          <el-tabs v-model="activeTab" class="demo-tabs">
+            <el-tab-pane label="账号" name="account" />
+            <el-tab-pane label="角色" name="role" />
+            <el-tab-pane label="组织" name="dept" />
+          </el-tabs>
+          <div class="mb-2">
+            <el-input
+              v-model="filterText"
+              placeholder="输入关键字"
+              :prefix-icon="Search"
+              clearable
+            />
+          </div>
+          <div class="flex items-center">
+            <el-checkbox
+              v-model="selectAllCheckbox"
+              @change="handleSelectAll"
+            >
+              全选
+            </el-checkbox>
+            <span class="ml-2 text-xs text-gray-400">
+              仅可选择未禁用项
+            </span>
+          </div>
+        </div>
+
+        <div class="relative flex-1 overflow-hidden" v-loading="loading">
+          <el-scrollbar>
+            <!-- User List -->
+            <div v-if="activeTab === 'account'" class="space-y-2 p-2 px-4">
+              <div
+                v-for="account in accountList"
+                :key="account.id"
+                class="group flex cursor-pointer items-center"
+                :class="{
+                  'text-primary': isSelected(account, 'account'),
+                  'opacity-50 cursor-not-allowed': isPreSelected(account.id)
+                }"
+                @click="toggleSelection(account, 'account')"
+              >
+                <div class="mr-2">
+                  <el-checkbox
+                    class="pointer-events-none"
+                    readonly
+                    :model-value="isSelected(account, 'account')"
+                    :disabled="isPreSelected(account.id)"
+                    @change="toggleSelection(account, 'account')"
+                  />
+                </div>
+                <div class="flex-1 font-medium">
+                  {{ account.nickname }}
+                  <span
+                    class="group-hover:text-primary [text-primary]-text-primary text-xs text-gray-500"
+                  >
+                    ({{ account.loginCode }})
+                  </span>
+                </div>
+              </div>
+              <el-empty
+                v-if="accountList.length === 0"
+                description="暂无数据"
+              />
+            </div>
+
+            <!-- Role List -->
+            <div v-if="activeTab === 'role'" class="space-y-2 p-2 px-4">
+              <div
+                v-for="role in roleList"
+                :key="role.id"
+                class="flex cursor-pointer items-center"
+                :class="{
+                  'text-primary': isSelected(role, 'role'),
+                  'hover:text-primary': !isPreSelected(role.id),
+                  'opacity-50 cursor-not-allowed': isPreSelected(role.id)
+                }"
+                @click="toggleSelection(role, 'role')"
+              >
+                <div class="mr-2">
+                  <el-checkbox
+                    :model-value="isSelected(role, 'role')"
+                    :disabled="isPreSelected(role.id)"
+                    @change="toggleSelection(role, 'role')"
+                  />
+                </div>
+                <div class="flex-1 font-medium">
+                  {{ role.name }}
+                </div>
+              </div>
+              <el-empty v-if="roleList.length === 0" description="暂无数据" />
+            </div>
+
+            <!-- Dept Tree -->
+            <div v-if="activeTab === 'dept'" class="p-2">
+              <el-tree
+                ref="treeRef"
+                :data="deptList"
+                :props="deptTreeProps"
+                show-checkbox
+                node-key="id"
+                check-strictly
+                default-expand-all
+                :default-checked-keys="
+                  selectedItems
+                    .filter((i) => i.type === 'dept')
+                    .map((i) => i.id)
+                "
+                @check="onDeptCheck"
+              >
+                <template #default="{ node, data }">
+                  <span
+                    class="custom-tree-node"
+                    :class="{ 'opacity-50': isPreSelected(data.id) }"
+                  >
+                    <span>{{ node.label }}</span>
+                    <span v-if="data.departCode" class="ml-2 text-xs text-gray-400">
+                      ({{ data.departCode }})
+                    </span>
+                  </span>
+                </template>
+              </el-tree>
+              <el-empty
+                v-if="deptList.length === 0"
+                description="暂无数据"
+              />
+            </div>
+          </el-scrollbar>
+        </div>
+      </div>
+
+      <!-- Right Panel: Selected -->
+      <div
+        class="flex h-full flex-1 flex-col overflow-hidden rounded border bg-white shadow-sm"
+      >
+        <div
+          class="flex items-center justify-between border-b bg-gray-50 px-4 py-3"
+        >
+          <span class="font-medium text-gray-700">
+            已选择
+            <span class="text-sm text-gray-500">({{ selectedItems.length }})</span>
+          </span>
+          <el-button
+            v-if="selectedItems.length > 0"
+            type="danger"
+            link
+            size="small"
+            @click="clearAllSelected"
+          >
+            清空
+          </el-button>
+        </div>
+        <div class="flex-1 overflow-hidden">
+          <el-scrollbar>
+            <div v-if="selectedItems.length > 0" class="space-y-2 p-2">
+              <div
+                v-for="(item, index) in selectedItems"
+                :key="item.id + item.type"
+                class="group flex items-center justify-between rounded border bg-white p-3 hover:shadow-sm"
+              >
+                <div class="flex items-center gap-2">
+                  <el-icon :size="16" class="text-gray-400">
+                    <component :is="getIcon(item.type)" />
+                  </el-icon>
+                  <span class="text-sm font-medium">{{ item.name }}</span>
+                  <span
+                    class="rounded border px-1 text-xs leading-4 text-gray-400"
+                    >{{
+                      item.type === 'account'
+                        ? '账号'
+                        : item.type === 'role'
+                          ? '角色'
+                          : '部门'
+                    }}
+                  </span>
+                </div>
+                <el-icon
+                  class="cursor-pointer text-gray-400 opacity-0 transition-opacity hover:text-red-500 group-hover:opacity-100"
+                  @click="removeSelection(index)"
+                >
+                  <Delete />
+                </el-icon>
+              </div>
+            </div>
+            <div
+              v-else
+              class="flex h-full flex-col items-center justify-center text-gray-400 mt-8"
+            >
+              <el-icon :size="48" class="mb-2"><Suitcase /></el-icon>
+              <span>暂无数据</span>
+            </div>
+          </el-scrollbar>
+        </div>
+      </div>
+    </div>
+
+    <!-- Step 2: Action Content -->
+    <div v-else-if="step === 1" class="flex w-full flex-1 justify-center pt-8">
+      <div class="w-full space-y-8 rounded bg-white shadow-sm">
+        <!--  Application Info  -->
+        <div class="space-y-3">
+          <div class="text-primary-600 flex items-center gap-2 font-medium">
+            <el-icon><CircleCheckFilled /></el-icon>
+            <span>应用名称: {{ application.appName }}</span>
+          </div>
+          <div class="flex flex-wrap pl-6">
+            <div
+              class="flex items-center gap-1 rounded bg-gray-100 px-2 py-1 text-sm text-gray-700"
+            >
+              <!-- 判断是图片URL还 是图标名称 -->
+              <img
+                v-if="application.icon && (application.icon.startsWith('http') || application.icon.startsWith('/'))"
+                :src="application.icon"
+                class="w-5 h-5 object-contain"
+                alt="应用图标"
+              />
+              <Icon
+                v-else-if="application.icon"
+                :name="application.icon"
+                size="20"
+                color="#868686"
+              />
+              <span class="leading-5">{{ application.appName }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Selected Subjects Info -->
+        <div class="space-y-3">
+          <div class="text-primary-600 flex items-center gap-2 font-medium">
+            <el-icon><CircleCheckFilled /></el-icon>
+            <span>已授权主体: {{ selectedItems.length }}个</span>
+          </div>
+          <div class="flex flex-wrap gap-2 pl-6">
+            <div
+              v-for="item in selectedItems"
+              :key="item.id"
+              class="flex items-center gap-1 rounded bg-gray-100 px-2 py-1 text-sm text-gray-700"
+            >
+              <el-icon :size="12">
+                <component :is="getIcon(item.type)" />
+              </el-icon>
+              <span class="leading-5">{{ item.name }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Auth Action -->
+        <div class="space-y-4">
+          <div class="text-primary-600 flex items-center gap-2 font-medium">
+            <el-icon><CircleCheckFilled /></el-icon>
+            <span>选择授权作用</span>
+          </div>
+          <div class="pl-6">
+            <div class="mb-3 text-sm text-red-500">* 授权作用</div>
+            <el-radio-group v-model="authAction">
+              <el-radio label="0" border>允许</el-radio>
+              <el-radio label="1" border>拒绝</el-radio>
+            </el-radio-group>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+:deep(.el-tabs__header) {
+  margin-bottom: 10px;
+}
+:deep(.el-step__title) {
+  font-size: 14px;
+}
+</style>