create-bubbles 0.1.26 → 0.1.28

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

@@ -0,0 +1,207 @@
+import { Alert, Modal, Select, Space, Table, Typography } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type {
+  OrganizationDuty,
+  OrganizationMemberCandidate,
+  OrganizationScope,
+  OrganizationUnitMemberInput,
+  OrganizationUnitNode,
+} from 'shared/types'
+import { accessScopeKey } from 'shared/utils'
+import OrganizationMemberSelector from '@/components/Selector/OrganizationMemberSelector'
+import type {
+  OrganizationMemberBrowserFilters,
+  OrganizationMemberSearchRequest,
+  OrganizationMemberSearchResult,
+} from '@/components/Selector/OrganizationMemberSelector'
+import {
+  canAddOrganizationAssignment,
+  canChangeOrganizationDuty,
+} from '@/utils/organization-assignment'
+
+export interface OrganizationMembersDialogRef {
+  show: (
+    unit: OrganizationUnitNode,
+    selected: OrganizationMemberCandidate[],
+    filters: OrganizationMemberBrowserFilters,
+  ) => void
+  hide: () => void
+}
+
+/** 从候选在当前完整作用域的身份中读取指定组织单元职责。 */
+function currentDuty(
+  candidate: OrganizationMemberCandidate,
+  scope: OrganizationScope,
+  unitId: string,
+): OrganizationDuty {
+  const scopeKey = accessScopeKey(scope)
+  const identity = candidate.identities.find((item) => accessScopeKey(item.scope) === scopeKey)
+  const relation = identity?.organizationUnits.find((item) => item.id === unitId)
+  if (relation) return relation.duty
+  return 'member'
+}
+
+/** 按组织单元完整替换成员集合，并为每名成员维护唯一职责。 */
+export default function OrganizationMembersDialog({
+  ref,
+  scope,
+  request,
+  resolve,
+  onSave,
+}: {
+  ref: Ref<OrganizationMembersDialogRef>
+  scope: OrganizationScope
+  request: (input: OrganizationMemberSearchRequest) => Promise<OrganizationMemberSearchResult>
+  resolve: (userIds: string[]) => Promise<OrganizationMemberCandidate[]>
+  onSave: (unit: OrganizationUnitNode, members: OrganizationUnitMemberInput[]) => Promise<boolean>
+}) {
+  const [open, setOpen] = useState(false)
+  const [unit, setUnit] = useState<OrganizationUnitNode>()
+  const [selected, setSelected] = useState<OrganizationMemberCandidate[]>([])
+  const [browserFilters, setBrowserFilters] = useState<OrganizationMemberBrowserFilters>({})
+  const [duties, setDuties] = useState<Record<string, OrganizationDuty>>({})
+  const [initialDuties, setInitialDuties] = useState<Record<string, OrganizationDuty>>({})
+  const [saving, setSaving] = useState(false)
+  const { tr } = useI18n()
+  const hide = () => {
+    if (!saving) setOpen(false)
+  }
+  useImperativeHandle(ref, () => ({
+    /** 使用该组织单元当前完整成员集合打开编辑会话。 */
+    show: (record, candidates, filters) => {
+      setUnit(record)
+      setSelected(candidates)
+      setBrowserFilters(filters)
+      const nextDuties = Object.fromEntries(
+        candidates.map((candidate) => [candidate.userId, currentDuty(candidate, scope, record.id)]),
+      )
+      setDuties(nextDuties)
+      setInitialDuties(nextDuties)
+      setOpen(true)
+    },
+    hide,
+  }))
+
+  /** 更新成员职责；选择负责人时自动保证界面中至多一名负责人。 */
+  const changeDuty = (userId: string, duty: OrganizationDuty) => {
+    setDuties((current) => {
+      const next = { ...current, [userId]: duty }
+      if (duty === 'leader') {
+        for (const key of Object.keys(next))
+          if (key !== userId && next[key] === 'leader') next[key] = 'member'
+      }
+      return next
+    })
+  }
+
+  return (
+    <Modal
+      title={tr('组织成员 · {name}', { name: unit?.name ?? '' })}
+      open={open}
+      width={920}
+      destroyOnHidden
+      confirmLoading={saving}
+      onCancel={hide}
+      onOk={
+        /** 将当前选择转换为完整成员职责集合并保存。 */ async () => {
+          if (!unit) return
+          setSaving(true)
+          try {
+            const ok = await onSave(
+              unit,
+              selected.map((candidate) => ({
+                userId: candidate.userId,
+                duty: duties[candidate.userId] ?? 'member',
+              })),
+            )
+            if (ok) setOpen(false)
+          } finally {
+            setSaving(false)
+          }
+        }
+      }
+    >
+      <Alert
+        type="info"
+        showIcon
+        title={tr('成员可以同时属于多个组织单元')}
+        description={tr(
+          '本次只替换当前组织单元的成员；一个单元最多一名负责人，可以有多名副负责人。',
+        )}
+        style={{ marginBottom: 16 }}
+      />
+      <Space direction="vertical" size={16} style={{ width: '100%' }}>
+        <OrganizationMemberSelector
+          candidateContextKey={`${accessScopeKey(scope)}:browseOrganization`}
+          scope={{ type: scope.type }}
+          multiple
+          value={selected.map((candidate) => candidate.userId)}
+          selectedCandidates={selected}
+          filters={browserFilters}
+          request={request}
+          resolve={resolve}
+          getCandidateDisabled={(candidate) =>
+            !unit ||
+            !canAddOrganizationAssignment({
+              candidate,
+              scope,
+              unitEffective: unit.effective,
+            })
+          }
+          placeholder={tr('添加或移除组织成员')}
+          onChange={(_, candidates) => {
+            setSelected(candidates)
+            setDuties((current) => ({
+              ...Object.fromEntries(candidates.map((candidate) => [candidate.userId, 'member'])),
+              ...Object.fromEntries(
+                candidates
+                  .filter((candidate) => current[candidate.userId] !== undefined)
+                  .map((candidate) => [candidate.userId, current[candidate.userId]!] as const),
+              ),
+            }))
+          }}
+        />
+        <Table
+          rowKey="userId"
+          size="small"
+          pagination={false}
+          dataSource={selected}
+          scroll={{ y: 300 }}
+          columns={[
+            { title: tr('姓名'), dataIndex: 'name', width: 150 },
+            { title: tr('完整账号'), dataIndex: 'account', width: 210 },
+            {
+              title: tr('职责'),
+              render: (_, candidate) => (
+                <Select<OrganizationDuty>
+                  value={duties[candidate.userId] ?? 'member'}
+                  style={{ width: 150 }}
+                  options={[
+                    { value: 'member', label: tr('成员') },
+                    { value: 'deputy', label: tr('副负责人') },
+                    { value: 'leader', label: tr('负责人') },
+                  ].map((option) => ({
+                    ...option,
+                    disabled:
+                      !unit ||
+                      !canChangeOrganizationDuty({
+                        candidate,
+                        scope,
+                        unitEffective: unit.effective,
+                        initialDuty: initialDuties[candidate.userId],
+                        nextDuty: option.value as OrganizationDuty,
+                      }),
+                  }))}
+                  onChange={(duty) => changeDuty(candidate.userId, duty)}
+                />
+              ),
+            },
+          ]}
+          locale={{
+            emptyText: <Typography.Text type="secondary">{tr('暂未选择成员')}</Typography.Text>,
+          }}
+        />
+      </Space>
+    </Modal>
+  )
+}

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

@@ -0,0 +1,110 @@
+import { ModalForm, ProFormDigit, ProFormText, ProFormTextArea } from '@ant-design/pro-components'
+import { Alert } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type { CreateOrganizationUnitRequest, OrganizationUnitRecord } from 'shared/types'
+
+export interface OrganizationUnitDialogRef {
+  show: (record?: OrganizationUnitRecord, parentId?: string | null) => void
+  hide: () => void
+}
+
+/** 新增或编辑组织单元；父级变更由独立移动操作负责。 */
+export default function OrganizationUnitDialog({
+  ref,
+  onSave,
+}: {
+  ref: Ref<OrganizationUnitDialogRef>
+  onSave: (
+    values: CreateOrganizationUnitRequest,
+    record?: OrganizationUnitRecord,
+  ) => Promise<boolean>
+}) {
+  const [open, setOpen] = useState(false)
+  const [record, setRecord] = useState<OrganizationUnitRecord>()
+  const [parentId, setParentId] = useState<string | null>(null)
+  const { tr } = useI18n()
+  const hide = () => setOpen(false)
+  useImperativeHandle(ref, () => ({
+    /** 载入编辑记录或新节点父级并打开表单。 */
+    show: (item, nextParentId = null) => {
+      setRecord(item)
+      setParentId(item?.parentId ?? nextParentId)
+      setOpen(true)
+    },
+    hide,
+  }))
+  return (
+    <ModalForm<CreateOrganizationUnitRequest>
+      title={record ? tr('编辑组织单元') : tr('创建组织单元')}
+      open={open}
+      width={580}
+      initialValues={record ?? { sort: 1 }}
+      modalProps={{ destroyOnHidden: true, onCancel: hide }}
+      onOpenChange={(visible) => {
+        if (!visible) hide()
+      }}
+      submitter={{ searchConfig: { submitText: tr('保存组织单元') } }}
+      onFinish={
+        /** 规范化名称、编码和说明，并在新增时带入选定父级。 */ async (values) => {
+          const ok = await onSave(
+            {
+              ...(!record ? { parentId } : {}),
+              name: values.name.trim(),
+              code: values.code.trim().toLowerCase(),
+              description: values.description?.trim(),
+              sort: values.sort,
+            },
+            record,
+          )
+          if (ok) hide()
+          return ok
+        }
+      }
+    >
+      {!record && parentId && (
+        <Alert
+          type="info"
+          showIcon
+          title={tr('将在当前选中的组织单元下创建子级')}
+          style={{ marginBottom: 20 }}
+        />
+      )}
+      <ProFormText
+        name="name"
+        label={tr('组织单元名称')}
+        rules={[
+          {
+            required: true,
+            whitespace: true,
+            min: 2,
+            max: 100,
+            message: tr('请输入 2–100 字组织单元名称'),
+          },
+        ]}
+        fieldProps={{ maxLength: 100 }}
+      />
+      <ProFormText
+        name="code"
+        label={tr('组织单元编码')}
+        extra={tr('编码在当前组织树中唯一，保存时转为小写。')}
+        rules={[
+          { required: true, pattern: /^[A-Za-z0-9_-]{2,32}$/, message: tr('请输入有效编码') },
+        ]}
+        fieldProps={{ maxLength: 32 }}
+      />
+      <ProFormDigit
+        name="sort"
+        label={tr('排序')}
+        min={0}
+        max={999999999}
+        fieldProps={{ precision: 0 }}
+        rules={[{ required: true, message: tr('请输入排序整数') }]}
+      />
+      <ProFormTextArea
+        name="description"
+        label={tr('说明')}
+        fieldProps={{ maxLength: 500, showCount: true, rows: 3 }}
+      />
+    </ModalForm>
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/organization/index.tsx

@@ -0,0 +1,258 @@
+import type { ActionType } from '@ant-design/pro-components'
+import { App, Card } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type {
+  OrganizationMemberCandidate,
+  OrganizationScope,
+  OrganizationUnitNode,
+  OrganizationUnitRecord,
+} from 'shared/types'
+import { accessScopeKey } from 'shared/utils'
+import FullHeightProTable from '@/components/FullHeightProTable/FullHeightProTable'
+import { useLatestDialogRequest } from '@/hooks/useLatestDialogRequest'
+import { useAccess, useManagementAction } from '@/pages/access/use-access'
+import { organizationApi } from './api'
+import OrganizationMembersDialog, {
+  type OrganizationMembersDialogRef,
+} from './components/OrganizationMembersDialog'
+import OrganizationUnitDialog, {
+  type OrganizationUnitDialogRef,
+} from './components/OrganizationUnitDialog'
+import MoveOrganizationUnitDialog, {
+  type MoveOrganizationUnitDialogRef,
+} from './components/MoveOrganizationUnitDialog'
+import {
+  createOrganizationMemberColumns,
+  findTreeNode,
+  loadOrganizationMemberDialogData,
+  loadOrganizationMoveOptions,
+  OrganizationMemberHeader,
+  OrganizationTreePanel,
+  replaceChildren,
+  toTreeNodes,
+  type BrowserSelection,
+  type OrganizationTreeNode,
+} from './components/OrganizationBrowser'
+
+/** 管理企业或项目独立组织树，并按组织或未归属视图浏览成员。 */
+export default function OrganizationPage() {
+  const access = useAccess()
+  const scope = access.scope as OrganizationScope
+  const scopeKey = accessScopeKey(scope)
+  const api = useMemo(() => organizationApi(scope), [scopeKey])
+  const execute = useManagementAction()
+  const { message } = App.useApp()
+  const { tr } = useI18n()
+  const [treeData, setTreeData] = useState<OrganizationTreeNode[]>([])
+  const [treeLoading, setTreeLoading] = useState(true)
+  const [selection, setSelection] = useState<BrowserSelection>('all')
+  const tableRef = useRef<ActionType>(null)
+  const unitRef = useRef<OrganizationUnitDialogRef>(null)
+  const moveRef = useRef<MoveOrganizationUnitDialogRef>(null)
+  const membersRef = useRef<OrganizationMembersDialogRef>(null)
+  const membersRequest = useLatestDialogRequest(scopeKey)
+  const moveRequest = useLatestDialogRequest(scopeKey)
+  const prefix = `${scope.type}.organization`
+  const allowed = (operation: string) => access.permissionKeys.includes(`${prefix}.${operation}`)
+  const selectedNode =
+    selection === 'all' || selection === 'unassigned'
+      ? undefined
+      : findTreeNode(treeData, selection)
+  const selectedUnit = selectedNode?.unit
+
+  /** 清空当前作用域树缓存并重新加载根节点。 */
+  const reloadTree = useCallback(async () => {
+    setTreeLoading(true)
+    setSelection('all')
+    try {
+      const result = await api.tree()
+      setTreeData(toTreeNodes(result.units, tr('停用')))
+    } catch (error) {
+      if ((error as Error).name !== 'AbortError')
+        void message.error(error instanceof Error ? error.message : tr('无法加载组织架构'))
+    } finally {
+      setTreeLoading(false)
+    }
+  }, [api, message, tr])
+
+  useEffect(() => {
+    void reloadTree()
+  }, [reloadTree])
+
+  /** 在结构变更后同时刷新树根和当前成员表。 */
+  const refreshAll = () => {
+    void reloadTree()
+    void tableRef.current?.reload()
+  }
+
+  /** 展开节点时仅请求其直接子级。 */
+  async function loadNodeChildren(node: OrganizationTreeNode) {
+    if (node.children || node.isLeaf) return
+    try {
+      const result = await api.tree({ parentId: node.unit.id })
+      setTreeData((current) =>
+        replaceChildren(current, node.unit.id, toTreeNodes(result.units, tr('停用'))),
+      )
+    } catch (error) {
+      if ((error as Error).name !== 'AbortError')
+        void message.error(error instanceof Error ? error.message : tr('无法加载下级组织'))
+      throw error
+    }
+  }
+
+  /** 加载当前组织单元的完整成员集合并打开职责编辑弹窗。 */
+  async function openMembers(unit: OrganizationUnitNode) {
+    await membersRequest.run({
+      targetId: unit.id,
+      load: () =>
+        loadOrganizationMemberDialogData({
+          api,
+          scope,
+          permissionKeys: access.permissionKeys,
+          unitId: unit.id,
+        }),
+      onSuccess: (data) => membersRef.current?.show(unit, data.selected, data.filters),
+      onError: (error) => {
+        if ((error as Error).name !== 'AbortError')
+          void message.error(error instanceof Error ? error.message : tr('无法加载组织成员'))
+      },
+    })
+  }
+
+  /** 加载完整树并打开移动弹窗。 */
+  async function openMove(unit: OrganizationUnitRecord) {
+    await moveRequest.run({
+      targetId: unit.id,
+      load: () => loadOrganizationMoveOptions(api, unit.id),
+      onSuccess: (options) => moveRef.current?.show(unit, options),
+      onError: (error) => {
+        if ((error as Error).name !== 'AbortError')
+          void message.error(error instanceof Error ? error.message : tr('无法加载可选父级'))
+      },
+    })
+  }
+
+  const columns = createOrganizationMemberColumns(selectedUnit, tr)
+
+  return (
+    <div className="h-full min-h-0 p-[16px] flex gap-[16px]">
+      <OrganizationTreePanel
+        scopeType={scope.type}
+        treeData={treeData}
+        loading={treeLoading}
+        selection={selection}
+        selectedUnit={selectedUnit}
+        onReload={() => void reloadTree()}
+        onSelect={setSelection}
+        onLoadData={loadNodeChildren}
+      />
+
+      <Card
+        className="h-full min-w-0 flex-1 overflow-hidden"
+        styles={{ body: { height: '100%', padding: 0 } }}
+      >
+        <OrganizationMemberHeader
+          selection={selection}
+          selectedUnit={selectedUnit}
+          canCreate={allowed('create')}
+          canUpdate={allowed('update')}
+          canMove={allowed('move')}
+          canAssign={allowed('assign')}
+          moving={moveRequest.loadingId === selectedUnit?.id}
+          assigning={membersRequest.loadingId === selectedUnit?.id}
+          onCreate={(parentId) => unitRef.current?.show(undefined, parentId)}
+          onEdit={(unit) => unitRef.current?.show(unit)}
+          onMove={(unit) => void openMove(unit)}
+          onAssign={(unit) => void openMembers(unit)}
+          onToggleStatus={(unit) =>
+            execute(
+              () =>
+                api.updateUnitStatus(unit.id, {
+                  status: unit.status === 'active' ? 'disabled' : 'active',
+                  expectedVersion: unit.version,
+                }),
+              refreshAll,
+            )
+          }
+        />
+        <div style={{ height: 'calc(100% - 64px)', minHeight: 0 }}>
+          <FullHeightProTable<OrganizationMemberCandidate>
+            actionRef={tableRef}
+            rowKey="userId"
+            columns={columns}
+            headerTitle={false}
+            search={{ labelWidth: 'auto' }}
+            pagination={{
+              defaultPageSize: 20,
+              showSizeChanger: true,
+              pageSizeOptions: [20, 50, 100],
+            }}
+            request={
+              /** 按当前树选择查询全部、未归属或单组织成员。 */ async (params) => {
+                const result = await api.memberCandidates({
+                  purpose: 'browseOrganization',
+                  page: params.current,
+                  pageSize: params.pageSize,
+                  query: params.query as string | undefined,
+                  ...(selectedUnit ? { organizationUnitIds: [selectedUnit.id] } : {}),
+                  ...(selection === 'unassigned' ? { unassigned: true } : {}),
+                })
+                return { data: result.items, total: result.total, success: true }
+              }
+            }
+            params={{ selection }}
+            onRequestError={(error) => {
+              if (error.name !== 'AbortError') void message.error(error.message)
+            }}
+          />
+        </div>
+      </Card>
+
+      <OrganizationUnitDialog
+        ref={unitRef}
+        onSave={(values, record) =>
+          execute(
+            () =>
+              record
+                ? api.updateUnit(record.id, {
+                    name: values.name,
+                    code: values.code,
+                    description: values.description,
+                    sort: values.sort,
+                    expectedVersion: record.version,
+                  })
+                : api.createUnit(values),
+            refreshAll,
+          )
+        }
+      />
+      <MoveOrganizationUnitDialog
+        ref={moveRef}
+        onSave={(record, values) => execute(() => api.moveUnit(record.id, values), refreshAll)}
+      />
+      <OrganizationMembersDialog
+        ref={membersRef}
+        scope={scope}
+        request={async (input) => {
+          const { signal, ...params } = input
+          const result = await api.memberCandidates(
+            { ...params, purpose: 'browseOrganization' },
+            signal,
+          )
+          return { items: result.items, total: result.total }
+        }}
+        resolve={(userIds) =>
+          api.resolveMemberCandidates({ userIds, purpose: 'browseOrganization' })
+        }
+        onSave={(unit, members) =>
+          execute(
+            () => api.replaceUnitMembers(unit.id, { members }),
+            () => {
+              void tableRef.current?.reload()
+            },
+          )
+        }
+      />
+    </div>
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/organization-templates/api.ts

@@ -0,0 +1,53 @@
+import type {
+  CreateOrganizationTemplateRequest,
+  OrganizationTemplateListQuery,
+  OrganizationTemplateRecord,
+  OrganizationTemplateSummary,
+  PageResult,
+  ReplaceOrganizationTemplateRequest,
+  UpdateOrganizationTemplateStatusRequest,
+} from 'shared/types'
+import { accessScopeKey } from 'shared/utils'
+import {
+  freshRequest,
+  runWorkspaceRequest,
+  workspaceRequest as http,
+} from '@/utils/request/workspace'
+
+/** 为企业项目组织模板页绑定当前企业的模板聚合接口。 */
+export function organizationTemplatesApi(companyId: string) {
+  const base = `/companies/${companyId}/organization/templates`
+  const workspaceKey = accessScopeKey({ type: 'company', companyId })
+  /** 发送模板查询并纳入工作空间代次取消。 */
+  const get = <T>(url: string, params?: object) =>
+    runWorkspaceRequest({
+      method: http.Get<T>(url, { ...freshRequest, params }),
+      workspaceKey,
+    })
+  /** 发送模板创建请求。 */
+  const post = <T>(url: string, data: object) =>
+    runWorkspaceRequest({ method: http.Post<T>(url, data, freshRequest), workspaceKey })
+  /** 发送模板整体替换请求。 */
+  const put = <T>(url: string, data: object) =>
+    runWorkspaceRequest({ method: http.Put<T>(url, data, freshRequest), workspaceKey })
+  /** 发送模板状态或默认标记更新。 */
+  const patch = <T>(url: string, data: object) =>
+    runWorkspaceRequest({ method: http.Patch<T>(url, data, freshRequest), workspaceKey })
+
+  return {
+    /** 分页查询模板摘要，不加载完整树定义。 */
+    list: (params: OrganizationTemplateListQuery = {}) =>
+      get<PageResult<OrganizationTemplateSummary>>(base, params),
+    /** 读取模板当前版本的完整组织与岗位定义。 */
+    detail: (id: string) => get<OrganizationTemplateRecord>(`${base}/${id}`),
+    /** 创建完整模板聚合。 */
+    create: (data: CreateOrganizationTemplateRequest) =>
+      post<OrganizationTemplateRecord>(base, data),
+    /** 以乐观锁完整替换模板定义。 */
+    replace: (id: string, data: ReplaceOrganizationTemplateRequest) =>
+      put<OrganizationTemplateRecord>(`${base}/${id}`, data),
+    /** 停用、恢复或设为默认模板。 */
+    updateStatus: (id: string, data: UpdateOrganizationTemplateStatusRequest) =>
+      patch<OrganizationTemplateRecord>(`${base}/${id}/status`, data),
+  }
+}