create-bubbles 0.1.26 → 0.1.28

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/organization/components/OrganizationBrowser/OrganizationMemberColumns.tsx

@@ -0,0 +1,87 @@
+import type { I18nState } from '@bubblesjs/i18n-core'
+import type { ProColumns } from '@ant-design/pro-components'
+import { Space, Tag } from 'antd'
+import type { OrganizationMemberCandidate, OrganizationUnitRecord } from 'shared/types'
+
+/** 从候选身份中查找其与指定组织单元的关系。 */
+function findUnitRelation(candidate: OrganizationMemberCandidate, unitId: string) {
+  for (const identity of candidate.identities) {
+    const relation = identity.organizationUnits.find((unit) => unit.id === unitId)
+    if (relation) return relation
+  }
+  return undefined
+}
+
+/** 创建组织成员浏览表格列，并按当前组织单元补充职责列。 */
+export function createOrganizationMemberColumns(
+  selectedUnit: OrganizationUnitRecord | undefined,
+  tr: I18nState['tr'],
+): ProColumns<OrganizationMemberCandidate>[] {
+  return [
+    {
+      title: tr('搜索'),
+      dataIndex: 'query',
+      hideInTable: true,
+      fieldProps: { placeholder: tr('搜索姓名或完整账号') },
+    },
+    { title: tr('姓名'), dataIndex: 'name', search: false, width: 150 },
+    { title: tr('完整账号'), dataIndex: 'account', search: false, copyable: true, width: 200 },
+    {
+      title: tr('成员状态'),
+      search: false,
+      width: 110,
+      render: (_, candidate) => (
+        <Tag color={candidate.disabled ? 'default' : 'success'}>
+          {candidate.disabled ? tr('当前无效') : tr('有效')}
+        </Tag>
+      ),
+    },
+    ...(selectedUnit
+      ? [
+          {
+            title: tr('职责'),
+            search: false,
+            width: 120,
+            render: (_: unknown, candidate: OrganizationMemberCandidate) => {
+              const duty = findUnitRelation(candidate, selectedUnit.id)?.duty
+              return duty === 'leader'
+                ? tr('负责人')
+                : duty === 'deputy'
+                  ? tr('副负责人')
+                  : tr('成员')
+            },
+          } as ProColumns<OrganizationMemberCandidate>,
+        ]
+      : []),
+    {
+      title: tr('组织归属'),
+      search: false,
+      render: (_, candidate) => (
+        <Space size={[0, 4]} wrap>
+          {candidate.identities.flatMap((identity) =>
+            identity.organizationUnits.map((unit) => (
+              <Tag key={`${identity.memberId}:${unit.id}`} color="purple">
+                {unit.name}
+              </Tag>
+            )),
+          )}
+        </Space>
+      ),
+    },
+    {
+      title: tr('岗位'),
+      search: false,
+      render: (_, candidate) => (
+        <Space size={[0, 4]} wrap>
+          {candidate.identities.flatMap((identity) =>
+            identity.positions.map((position) => (
+              <Tag key={`${identity.memberId}:${position.id}`} color="blue">
+                {position.name}
+              </Tag>
+            )),
+          )}
+        </Space>
+      ),
+    },
+  ]
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/organization/components/OrganizationBrowser/OrganizationMemberHeader.tsx

@@ -0,0 +1,102 @@
+import { PlusOutlined, SwapOutlined } from '@ant-design/icons'
+import { Button, Flex, Popconfirm, Space, Typography } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type { OrganizationUnitNode } from 'shared/types'
+import type { BrowserSelection } from './OrganizationTreeModel'
+
+interface OrganizationMemberHeaderProps {
+  selection: BrowserSelection
+  selectedUnit?: OrganizationUnitNode
+  canCreate: boolean
+  canUpdate: boolean
+  canMove: boolean
+  canAssign: boolean
+  moving: boolean
+  assigning: boolean
+  onCreate: (parentId: string | null) => void
+  onEdit: (unit: OrganizationUnitNode) => void
+  onMove: (unit: OrganizationUnitNode) => void
+  onAssign: (unit: OrganizationUnitNode) => void
+  onToggleStatus: (unit: OrganizationUnitNode) => void
+}
+
+/** 展示当前组织浏览标题及其结构、成员和状态操作。 */
+export default function OrganizationMemberHeader({
+  selection,
+  selectedUnit,
+  canCreate,
+  canUpdate,
+  canMove,
+  canAssign,
+  moving,
+  assigning,
+  onCreate,
+  onEdit,
+  onMove,
+  onAssign,
+  onToggleStatus,
+}: OrganizationMemberHeaderProps) {
+  const { tr } = useI18n()
+
+  return (
+    <Flex
+      align="center"
+      justify="space-between"
+      gap={12}
+      wrap
+      style={{
+        minHeight: 64,
+        padding: '12px 20px',
+        borderBottom: '1px solid rgba(120,100,196,.14)',
+      }}
+    >
+      <div>
+        <Typography.Title level={5} style={{ margin: 0 }}>
+          {selectedUnit
+            ? selectedUnit.name
+            : selection === 'unassigned'
+              ? tr('未归属组织成员')
+              : tr('全部成员')}
+        </Typography.Title>
+        {selectedUnit && (
+          <Typography.Text type="secondary">{selectedUnit.fullPath}</Typography.Text>
+        )}
+      </div>
+      <Space wrap>
+        {canCreate && (
+          <Button
+            type="primary"
+            icon={<PlusOutlined />}
+            onClick={() => onCreate(selectedUnit?.id ?? null)}
+          >
+            {selectedUnit ? tr('创建子级') : tr('创建顶级组织')}
+          </Button>
+        )}
+        {selectedUnit && canUpdate && (
+          <Button onClick={() => onEdit(selectedUnit)}>{tr('编辑')}</Button>
+        )}
+        {selectedUnit && canMove && (
+          <Button icon={<SwapOutlined />} loading={moving} onClick={() => onMove(selectedUnit)}>
+            {tr('移动')}
+          </Button>
+        )}
+        {selectedUnit && canAssign && (
+          <Button loading={assigning} onClick={() => onAssign(selectedUnit)}>
+            {tr('分配成员')}
+          </Button>
+        )}
+        {selectedUnit && canUpdate && (
+          <Popconfirm
+            title={selectedUnit.status === 'active' ? tr('停用组织单元？') : tr('恢复组织单元？')}
+            description={tr('不会删除后代状态和成员关系。')}
+            onConfirm={() => onToggleStatus(selectedUnit)}
+          >
+            <Button danger={selectedUnit.status === 'active'}>
+              {selectedUnit.status === 'active' ? tr('停用') : tr('恢复')}
+            </Button>
+          </Popconfirm>
+        )}
+      </Space>
+    </Flex>
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/organization/components/OrganizationBrowser/OrganizationTreeModel.tsx

@@ -0,0 +1,59 @@
+import { Space, Tag } from 'antd'
+import type { OrganizationUnitNode } from 'shared/types'
+
+/** 组织浏览器当前选中的保留分组键或组织单元 ID。 */
+export type BrowserSelection = string
+
+export interface OrganizationTreeNode {
+  key: string
+  title: ReactNode
+  isLeaf: boolean
+  unit: OrganizationUnitNode
+  children?: OrganizationTreeNode[]
+}
+
+/** 将服务端单层组织记录转换为 Ant Design 懒加载树节点。 */
+export function toTreeNodes(
+  units: OrganizationUnitNode[],
+  disabledLabel: string,
+): OrganizationTreeNode[] {
+  return units.map((unit) => ({
+    key: unit.id,
+    title: (
+      <Space size={6}>
+        <span>{unit.name}</span>
+        {!unit.effective && <Tag color="default">{disabledLabel}</Tag>}
+      </Space>
+    ),
+    isLeaf: !unit.hasChildren,
+    unit,
+  }))
+}
+
+/** 不改变其他分支引用地替换指定父节点的直接子节点。 */
+export function replaceChildren(
+  nodes: OrganizationTreeNode[],
+  parentId: string,
+  children: OrganizationTreeNode[],
+): OrganizationTreeNode[] {
+  return nodes.map((node) =>
+    node.key === parentId
+      ? { ...node, children }
+      : node.children
+        ? { ...node, children: replaceChildren(node.children, parentId, children) }
+        : node,
+  )
+}
+
+/** 在已加载树中按 key 查找组织节点。 */
+export function findTreeNode(
+  nodes: OrganizationTreeNode[],
+  key: string,
+): OrganizationTreeNode | undefined {
+  for (const node of nodes) {
+    if (node.key === key) return node
+    const nested = node.children ? findTreeNode(node.children, key) : undefined
+    if (nested) return nested
+  }
+  return undefined
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/organization/components/OrganizationBrowser/OrganizationTreePanel.tsx

@@ -0,0 +1,88 @@
+import {
+  ApartmentOutlined,
+  ReloadOutlined,
+  TeamOutlined,
+  UserDeleteOutlined,
+} from '@ant-design/icons'
+import { Button, Card, Empty, Flex, Space, Spin, Tag, Tree } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type { OrganizationScope, OrganizationUnitRecord } from 'shared/types'
+import type { BrowserSelection, OrganizationTreeNode } from './OrganizationTreeModel'
+
+/** 展示组织树入口、全部成员和未归属成员快捷筛选。 */
+export default function OrganizationTreePanel({
+  scopeType,
+  treeData,
+  loading,
+  selection,
+  selectedUnit,
+  onReload,
+  onSelect,
+  onLoadData,
+}: {
+  scopeType: OrganizationScope['type']
+  treeData: OrganizationTreeNode[]
+  loading: boolean
+  selection: BrowserSelection
+  selectedUnit?: OrganizationUnitRecord
+  onReload: () => void
+  onSelect: (selection: BrowserSelection) => void
+  onLoadData: (node: OrganizationTreeNode) => Promise<void>
+}) {
+  const { tr } = useI18n()
+  return (
+    <Card
+      className="h-full shrink-0 overflow-hidden"
+      style={{ width: 330 }}
+      title={
+        <Space>
+          <ApartmentOutlined />
+          <span>{tr('组织架构')}</span>
+          <Tag color="purple">{scopeType === 'company' ? tr('企业级') : tr('项目级')}</Tag>
+        </Space>
+      }
+      extra={<Button type="text" icon={<ReloadOutlined />} onClick={onReload} />}
+      styles={{ body: { height: 'calc(100% - 57px)', overflow: 'auto', padding: 12 } }}
+    >
+      <Flex vertical gap={6}>
+        <Button
+          type={selection === 'all' ? 'primary' : 'text'}
+          icon={<TeamOutlined />}
+          block
+          style={{ textAlign: 'left' }}
+          onClick={() => onSelect('all')}
+        >
+          {tr('全部成员')}
+        </Button>
+        <Button
+          type={selection === 'unassigned' ? 'primary' : 'text'}
+          icon={<UserDeleteOutlined />}
+          block
+          style={{ textAlign: 'left' }}
+          onClick={() => onSelect('unassigned')}
+        >
+          {tr('未归属组织')}
+        </Button>
+        <div style={{ borderTop: '1px solid rgba(120,100,196,.18)', margin: '6px 0' }} />
+        {loading ? (
+          <Flex justify="center" style={{ padding: 32 }}>
+            <Spin />
+          </Flex>
+        ) : treeData.length ? (
+          <Tree<OrganizationTreeNode>
+            blockNode
+            treeData={treeData}
+            selectedKeys={selectedUnit ? [selectedUnit.id] : []}
+            loadData={onLoadData}
+            onSelect={(keys) => {
+              const key = keys[0]
+              if (typeof key === 'string') onSelect(key)
+            }}
+          />
+        ) : (
+          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={tr('暂无组织单元')} />
+        )}
+      </Flex>
+    </Card>
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/organization/components/OrganizationBrowser/index.ts

@@ -0,0 +1,11 @@
+export { createOrganizationMemberColumns } from './OrganizationMemberColumns'
+export { default as OrganizationMemberHeader } from './OrganizationMemberHeader'
+export { default as OrganizationTreePanel } from './OrganizationTreePanel'
+export { loadOrganizationMemberDialogData } from './organization-member-filter-loaders'
+export {
+  loadAllOrganizationUnits,
+  loadOrganizationMoveOptions,
+  loadOrganizationUnitMembers,
+} from './organization-loaders'
+export { findTreeNode, replaceChildren, toTreeNodes } from './OrganizationTreeModel'
+export type { BrowserSelection, OrganizationTreeNode } from './OrganizationTreeModel'

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/organization/components/OrganizationBrowser/organization-loaders.ts

@@ -0,0 +1,47 @@
+import type { OrganizationMemberCandidate, OrganizationUnitRecord } from 'shared/types'
+import type { organizationApi } from '../../api'
+
+/** 递归读取完整组织树，用于需要一次性列出全部父级的操作。 */
+export async function loadAllOrganizationUnits(
+  api: ReturnType<typeof organizationApi>,
+  parentId?: string,
+): Promise<OrganizationUnitRecord[]> {
+  const result = await api.tree(parentId ? { parentId } : {})
+  const descendants = await Promise.all(
+    result.units
+      .filter((unit) => unit.hasChildren)
+      .map((unit) => loadAllOrganizationUnits(api, unit.id)),
+  )
+  return [...result.units, ...descendants.flat()]
+}
+
+/** 加载移动弹窗所需的全部可选父级，并排除正在移动的组织单元本身。 */
+export async function loadOrganizationMoveOptions(
+  api: ReturnType<typeof organizationApi>,
+  movingUnitId: string,
+) {
+  const units = await loadAllOrganizationUnits(api)
+  return units
+    .filter((unit) => unit.id !== movingUnitId)
+    .map((unit) => ({ value: unit.id, label: unit.fullPath }))
+}
+
+/** 分页读取指定组织单元的完整成员集合，供职责编辑器回填。 */
+export async function loadOrganizationUnitMembers(
+  api: ReturnType<typeof organizationApi>,
+  unitId: string,
+): Promise<OrganizationMemberCandidate[]> {
+  const query = {
+    purpose: 'browseOrganization' as const,
+    organizationUnitIds: [unitId],
+    includeDisabled: true,
+    pageSize: 100,
+  }
+  const first = await api.memberCandidates({ ...query, page: 1 })
+  const rest = await Promise.all(
+    Array.from({ length: Math.ceil(first.total / 100) - 1 }, (_, index) =>
+      api.memberCandidates({ ...query, page: index + 2 }),
+    ),
+  )
+  return [...first.items, ...rest.flatMap((page) => page.items)]
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/organization/components/OrganizationBrowser/organization-member-filter-loaders.ts

@@ -0,0 +1,187 @@
+import type {
+  OrganizationMemberCandidate,
+  OrganizationScope,
+  OrganizationUnitRecord,
+  PositionRecord,
+  ProjectRecord,
+  RoleRecord,
+} from 'shared/types'
+import type {
+  OrganizationMemberBrowserFilters,
+  OrganizationMemberFilterOption,
+  OrganizationMemberResourceFilters,
+} from '@/components/Selector/OrganizationMemberSelector'
+import { managementApi } from '@/pages/access/api'
+import { positionsApi } from '@/pages/positions/api'
+import { loadAllPositions } from '@/pages/positions/loaders'
+import { organizationApi } from '../../api'
+import { loadAllOrganizationUnits, loadOrganizationUnitMembers } from './organization-loaders'
+
+interface LoadOrganizationMemberDialogDataInput {
+  api: ReturnType<typeof organizationApi>
+  scope: OrganizationScope
+  permissionKeys: readonly string[]
+  unitId: string
+}
+
+interface ProjectFilterSource {
+  id: string
+  name: string
+}
+
+/** 分页读取角色或项目等管理资源，避免选择器只拿到第一页筛选项。 */
+async function loadAllPages<T>(
+  request: (page: number, pageSize: number) => Promise<{ items: T[]; total: number }>,
+): Promise<T[]> {
+  const pageSize = 100
+  const first = await request(1, pageSize)
+  const rest = await Promise.all(
+    Array.from({ length: Math.ceil(first.total / pageSize) - 1 }, (_, index) =>
+      request(index + 2, pageSize),
+    ),
+  )
+  return [...first.items, ...rest.flatMap((page) => page.items)]
+}
+
+/** 将当前作用域组织单元转换为可搜索的完整路径选项。 */
+function organizationOptions(
+  units: readonly OrganizationUnitRecord[],
+  scopeName?: string,
+): OrganizationMemberFilterOption[] {
+  return units.map((unit) => ({
+    value: unit.id,
+    label: scopeName ? `${scopeName} / ${unit.fullPath}` : unit.fullPath,
+  }))
+}
+
+/** 将当前作用域岗位转换为可搜索选项，并在跨项目时补充来源名称。 */
+function positionOptions(
+  positions: readonly PositionRecord[],
+  scopeName?: string,
+): OrganizationMemberFilterOption[] {
+  return positions.map((position) => ({
+    value: position.id,
+    label: scopeName ? `${scopeName} / ${position.name}` : position.name,
+  }))
+}
+
+/** 将权限角色转换为可搜索选项，并在跨项目时补充来源名称。 */
+function roleOptions(
+  roles: readonly RoleRecord[],
+  scopeName?: string,
+): OrganizationMemberFilterOption[] {
+  return roles.map((role) => ({
+    value: role.id,
+    label: scopeName ? `${scopeName} / ${role.name}` : role.name,
+  }))
+}
+
+/** 分页读取指定作用域全部权限角色。 */
+function loadAllRoles(scope: OrganizationScope): Promise<RoleRecord[]> {
+  const api = managementApi(scope)
+  return loadAllPages((page, pageSize) => api.roles({ page, pageSize }))
+}
+
+/** 分页读取企业下全部项目，作为企业成员浏览器的可见项目入口。 */
+function loadAllProjects(scope: Extract<OrganizationScope, { type: 'company' }>) {
+  const api = managementApi(scope)
+  return loadAllPages<ProjectRecord>((page, pageSize) => api.projects({ page, pageSize }))
+}
+
+/** 只把 403/404 视为该项目资源类别不可见，其余异常继续交给调用方处理。 */
+function optionalVisibleResult<T>(result: PromiseSettledResult<T>): T | undefined {
+  if (result.status === 'fulfilled') return result.value
+  const status = (result.reason as { status?: number }).status
+  if (status === 403 || status === 404) return undefined
+  throw result.reason
+}
+
+/** 按项目实际权限并行读取组织、岗位和角色，缺少某类权限时不暴露该筛选项。 */
+async function loadSingleProjectFilters(
+  companyId: string,
+  project: ProjectFilterSource,
+): Promise<OrganizationMemberResourceFilters> {
+  const scope: OrganizationScope = { type: 'project', companyId, projectId: project.id }
+  const [unitsResult, positionsResult, rolesResult] = await Promise.allSettled([
+    loadAllOrganizationUnits(organizationApi(scope)),
+    loadAllPositions(positionsApi(scope)),
+    loadAllRoles(scope),
+  ])
+  const units = optionalVisibleResult(unitsResult)
+  const positions = optionalVisibleResult(positionsResult)
+  const roles = optionalVisibleResult(rolesResult)
+  return {
+    ...(units
+      ? { organizationUnits: organizationOptions(units, project.name), allowUnassigned: true }
+      : {}),
+    ...(positions ? { positions: positionOptions(positions, project.name) } : {}),
+    ...(roles ? { roles: roleOptions(roles, project.name) } : {}),
+  }
+}
+
+/** 创建企业成员浏览器的项目资源加载器，并合并多项目筛选项。 */
+function createProjectFiltersLoader(
+  companyId: string,
+  projects: readonly ProjectFilterSource[],
+): OrganizationMemberBrowserFilters['loadProjectFilters'] {
+  const projectById = new Map(projects.map((project) => [project.id, project]))
+  return async (projectIds) => {
+    const selectedProjects = [...new Set(projectIds)]
+      .map((projectId) => projectById.get(projectId))
+      .filter((project): project is ProjectFilterSource => !!project)
+    const filters = await Promise.all(
+      selectedProjects.map((project) => loadSingleProjectFilters(companyId, project)),
+    )
+    const hasOrganizations = filters.some((item) => item.organizationUnits !== undefined)
+    const hasPositions = filters.some((item) => item.positions !== undefined)
+    const hasRoles = filters.some((item) => item.roles !== undefined)
+    return {
+      ...(hasOrganizations
+        ? {
+            organizationUnits: filters.flatMap((item) => item.organizationUnits ?? []),
+            allowUnassigned: true,
+          }
+        : {}),
+      ...(hasPositions ? { positions: filters.flatMap((item) => item.positions ?? []) } : {}),
+      ...(hasRoles ? { roles: filters.flatMap((item) => item.roles ?? []) } : {}),
+    }
+  }
+}
+
+/** 加载组织成员弹窗所需的当前成员快照及全部获准筛选资源。 */
+export async function loadOrganizationMemberDialogData({
+  api,
+  scope,
+  permissionKeys,
+  unitId,
+}: LoadOrganizationMemberDialogDataInput): Promise<{
+  selected: OrganizationMemberCandidate[]
+  filters: OrganizationMemberBrowserFilters
+}> {
+  const positionPermission = `${scope.type}.positions.read`
+  const rolePermission = `${scope.type}.roles.read`
+  const canReadProjects =
+    scope.type === 'company' && permissionKeys.includes('company.projects.read')
+  const [selected, units, positions, roles, projects] = await Promise.all([
+    loadOrganizationUnitMembers(api, unitId),
+    loadAllOrganizationUnits(api),
+    permissionKeys.includes(positionPermission) ? loadAllPositions(positionsApi(scope)) : undefined,
+    permissionKeys.includes(rolePermission) ? loadAllRoles(scope) : undefined,
+    canReadProjects ? loadAllProjects(scope) : undefined,
+  ])
+  return {
+    selected,
+    filters: {
+      organizationUnits: organizationOptions(units),
+      ...(positions ? { positions: positionOptions(positions) } : {}),
+      ...(roles ? { roles: roleOptions(roles) } : {}),
+      allowUnassigned: true,
+      ...(projects
+        ? {
+            projects: projects.map((project) => ({ value: project.id, label: project.name })),
+            loadProjectFilters: createProjectFiltersLoader(scope.companyId, projects),
+          }
+        : {}),
+    },
+  }
+}