create-bubbles 0.1.26 → 0.1.27

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

@@ -0,0 +1,189 @@
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons'
+import { Button, Card, Form, Input, InputNumber, Select, Space, Tabs } from 'antd'
+import type { FormInstance } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type { TemplateFormValues } from './types'
+
+/** 为新模板节点生成只在本次请求中使用的父子引用 key。 */
+function createClientKey() {
+  return crypto.randomUUID()
+}
+
+/** 编辑模板中的组织单元定义和独立岗位定义。 */
+export default function TemplateDefinitionTabs({
+  form,
+}: {
+  form: FormInstance<TemplateFormValues>
+}) {
+  const units = Form.useWatch('units', form) ?? []
+  const positions = Form.useWatch('positions', form) ?? []
+  const { tr } = useI18n()
+
+  return (
+    <Tabs
+      items={[
+        {
+          key: 'units',
+          label: tr('组织单元（{count}）', { count: units.length }),
+          children: (
+            <Form.List name="units">
+              {(fields, { add, remove }) => (
+                <Space direction="vertical" size={12} style={{ width: '100%' }}>
+                  {fields.map((field, index) => {
+                    const selfKey = units[index]?.clientKey
+                    const parentOptions = units
+                      .filter((unit) => unit.clientKey && unit.clientKey !== selfKey)
+                      .map((unit) => ({ value: unit.clientKey, label: unit.name || unit.code }))
+                    return (
+                      <Card
+                        key={field.key}
+                        size="small"
+                        title={tr('组织单元 {index}', { index: index + 1 })}
+                        extra={
+                          <Button
+                            type="text"
+                            danger
+                            icon={<DeleteOutlined />}
+                            onClick={() => remove(field.name)}
+                          />
+                        }
+                      >
+                        <Form.Item name={[field.name, 'clientKey']} hidden>
+                          <Input />
+                        </Form.Item>
+                        <Space align="start" wrap style={{ width: '100%' }}>
+                          <Form.Item
+                            name={[field.name, 'name']}
+                            label={tr('名称')}
+                            rules={[{ required: true, whitespace: true, min: 2, max: 100 }]}
+                          >
+                            <Input maxLength={100} style={{ width: 190 }} />
+                          </Form.Item>
+                          <Form.Item
+                            name={[field.name, 'code']}
+                            label={tr('编码')}
+                            rules={[{ required: true, pattern: /^[A-Za-z0-9_-]{2,32}$/ }]}
+                          >
+                            <Input maxLength={32} style={{ width: 160 }} />
+                          </Form.Item>
+                          <Form.Item name={[field.name, 'parentClientKey']} label={tr('父级')}>
+                            <Select
+                              allowClear
+                              options={parentOptions}
+                              placeholder={tr('顶级组织')}
+                              style={{ width: 190 }}
+                            />
+                          </Form.Item>
+                          <Form.Item
+                            name={[field.name, 'sort']}
+                            label={tr('排序')}
+                            rules={[{ required: true }]}
+                          >
+                            <InputNumber
+                              min={0}
+                              max={999999999}
+                              precision={0}
+                              style={{ width: 130 }}
+                            />
+                          </Form.Item>
+                        </Space>
+                        <Form.Item name={[field.name, 'description']} label={tr('说明')}>
+                          <Input maxLength={500} />
+                        </Form.Item>
+                      </Card>
+                    )
+                  })}
+                  <Button
+                    type="dashed"
+                    block
+                    icon={<PlusOutlined />}
+                    onClick={() =>
+                      add({
+                        clientKey: createClientKey(),
+                        parentClientKey: null,
+                        name: '',
+                        code: '',
+                        description: '',
+                        sort: fields.length + 1,
+                      })
+                    }
+                  >
+                    {tr('添加组织单元')}
+                  </Button>
+                </Space>
+              )}
+            </Form.List>
+          ),
+        },
+        {
+          key: 'positions',
+          label: tr('岗位（{count}）', { count: positions.length }),
+          children: (
+            <Form.List name="positions">
+              {(fields, { add, remove }) => (
+                <Space direction="vertical" size={12} style={{ width: '100%' }}>
+                  {fields.map((field, index) => (
+                    <Card
+                      key={field.key}
+                      size="small"
+                      title={tr('岗位 {index}', { index: index + 1 })}
+                      extra={
+                        <Button
+                          type="text"
+                          danger
+                          icon={<DeleteOutlined />}
+                          onClick={() => remove(field.name)}
+                        />
+                      }
+                    >
+                      <Space align="start" wrap>
+                        <Form.Item
+                          name={[field.name, 'name']}
+                          label={tr('名称')}
+                          rules={[{ required: true, whitespace: true, min: 2, max: 100 }]}
+                        >
+                          <Input maxLength={100} style={{ width: 210 }} />
+                        </Form.Item>
+                        <Form.Item
+                          name={[field.name, 'code']}
+                          label={tr('编码')}
+                          rules={[{ required: true, pattern: /^[A-Za-z0-9_-]{2,32}$/ }]}
+                        >
+                          <Input maxLength={32} style={{ width: 180 }} />
+                        </Form.Item>
+                        <Form.Item
+                          name={[field.name, 'status']}
+                          label={tr('初始状态')}
+                          rules={[{ required: true }]}
+                        >
+                          <Select
+                            style={{ width: 140 }}
+                            options={[
+                              { value: 'active', label: tr('启用') },
+                              { value: 'disabled', label: tr('停用') },
+                            ]}
+                          />
+                        </Form.Item>
+                      </Space>
+                      <Form.Item name={[field.name, 'description']} label={tr('说明')}>
+                        <Input maxLength={500} />
+                      </Form.Item>
+                    </Card>
+                  ))}
+                  <Button
+                    type="dashed"
+                    block
+                    icon={<PlusOutlined />}
+                    onClick={() => add({ name: '', code: '', description: '', status: 'active' })}
+                  >
+                    {tr('添加岗位')}
+                  </Button>
+                </Space>
+              )}
+            </Form.List>
+          ),
+        },
+      ]}
+    />
+  )
+}

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

@@ -0,0 +1,135 @@
+import {
+  ModalForm,
+  ProFormCheckbox,
+  ProFormText,
+  ProFormTextArea,
+} from '@ant-design/pro-components'
+import { Alert, Form, Space, Typography } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type { CreateOrganizationTemplateRequest, OrganizationTemplateRecord } from 'shared/types'
+import TemplateDefinitionTabs from './TemplateDefinitionTabs'
+import type { TemplateFormValues } from './types'
+
+export interface OrganizationTemplateDialogRef {
+  show: (record?: OrganizationTemplateRecord) => void
+  hide: () => void
+}
+
+/** 把模板当前版本转换为可编辑表单值。 */
+function templateFormValues(record?: OrganizationTemplateRecord): TemplateFormValues {
+  return {
+    name: record?.name ?? '',
+    description: record?.description ?? '',
+    isDefault: record?.isDefault ?? false,
+    units:
+      record?.units.map((unit) => ({
+        clientKey: unit.id,
+        parentClientKey: unit.parentId,
+        name: unit.name,
+        code: unit.code,
+        description: unit.description,
+        sort: unit.sort,
+      })) ?? [],
+    positions:
+      record?.positions.map((position) => ({
+        name: position.name,
+        code: position.code,
+        description: position.description,
+        status: position.status,
+      })) ?? [],
+  }
+}
+
+/** 编辑模板基本信息、组织单元树定义和独立岗位列表。 */
+export default function OrganizationTemplateDialog({
+  ref,
+  onSave,
+}: {
+  ref: Ref<OrganizationTemplateDialogRef>
+  onSave: (
+    values: CreateOrganizationTemplateRequest,
+    record?: OrganizationTemplateRecord,
+  ) => Promise<boolean>
+}) {
+  const [open, setOpen] = useState(false)
+  const [record, setRecord] = useState<OrganizationTemplateRecord>()
+  const [form] = Form.useForm<TemplateFormValues>()
+  const { tr } = useI18n()
+  const hide = () => setOpen(false)
+  useImperativeHandle(ref, () => ({
+    /** 载入模板当前完整定义并打开编辑器；省略记录时创建新模板。 */
+    show: (item) => {
+      setRecord(item)
+      form.setFieldsValue(templateFormValues(item))
+      setOpen(true)
+    },
+    hide,
+  }))
+
+  return (
+    <ModalForm<TemplateFormValues>
+      form={form}
+      title={record ? tr('编辑项目组织模板') : tr('创建项目组织模板')}
+      open={open}
+      width={1000}
+      modalProps={{ destroyOnHidden: true, onCancel: hide }}
+      onOpenChange={(visible) => {
+        if (!visible) hide()
+      }}
+      submitter={{ searchConfig: { submitText: tr('保存模板') } }}
+      onFinish={
+        /** 规范化完整模板定义并提交，父子关系只使用本次请求 clientKey。 */ async (values) => {
+          const input: CreateOrganizationTemplateRequest = {
+            name: values.name.trim(),
+            description: values.description?.trim(),
+            isDefault: values.isDefault,
+            units: (values.units ?? []).map((unit) => ({
+              clientKey: unit.clientKey,
+              parentClientKey: unit.parentClientKey ?? null,
+              name: unit.name.trim(),
+              code: unit.code.trim().toLowerCase(),
+              description: unit.description?.trim(),
+              sort: unit.sort,
+            })),
+            positions: (values.positions ?? []).map((position) => ({
+              name: position.name.trim(),
+              code: position.code.trim().toLowerCase(),
+              description: position.description?.trim(),
+              status: position.status,
+            })),
+          }
+          const ok = await onSave(input, record)
+          if (ok) hide()
+          return ok
+        }
+      }
+    >
+      <Alert
+        type="info"
+        showIcon
+        title={tr('模板只在创建项目时复制一次')}
+        description={tr('之后修改模板不会同步到已有项目；模板岗位独立于模板组织单元。')}
+        style={{ marginBottom: 20 }}
+      />
+      <Space align="start" size={16} style={{ width: '100%' }}>
+        <ProFormText
+          name="name"
+          label={tr('模板名称')}
+          width="md"
+          rules={[{ required: true, whitespace: true, min: 2, max: 100 }]}
+          fieldProps={{ maxLength: 100 }}
+        />
+        <ProFormCheckbox name="isDefault">{tr('作为默认模板')}</ProFormCheckbox>
+      </Space>
+      <ProFormTextArea
+        name="description"
+        label={tr('模板说明')}
+        fieldProps={{ maxLength: 500, showCount: true, rows: 2 }}
+      />
+      <TemplateDefinitionTabs form={form} />
+      <Typography.Text type="secondary">
+        {tr('组织单元最多 10 层；保存时服务端会校验父子引用、循环、名称和编码唯一性。')}
+      </Typography.Text>
+    </ModalForm>
+  )
+}

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

@@ -0,0 +1,25 @@
+import type { EntityStatus } from 'shared/types'
+
+export interface TemplateUnitValues {
+  clientKey: string
+  parentClientKey?: string | null
+  name: string
+  code: string
+  description?: string
+  sort: number
+}
+
+export interface TemplatePositionValues {
+  name: string
+  code: string
+  description?: string
+  status: EntityStatus
+}
+
+export interface TemplateFormValues {
+  name: string
+  description?: string
+  isDefault: boolean
+  units: TemplateUnitValues[]
+  positions: TemplatePositionValues[]
+}

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

@@ -0,0 +1,201 @@
+import { PlusOutlined } from '@ant-design/icons'
+import type { ActionType, ProColumns } from '@ant-design/pro-components'
+import { App, Button, Popconfirm, Space, Tag } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type {
+  CreateOrganizationTemplateRequest,
+  EntityStatus,
+  OrganizationTemplateRecord,
+  OrganizationTemplateSummary,
+} 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 { organizationTemplatesApi } from './api'
+import OrganizationTemplateDialog, {
+  type OrganizationTemplateDialogRef,
+} from './components/OrganizationTemplateDialog'
+
+/** 管理企业可用于新项目初始化的组织与岗位模板。 */
+export default function OrganizationTemplatesPage() {
+  const access = useAccess()
+  if (access.scope.type !== 'company') throw new Error('组织模板页仅支持企业作用域')
+  const api = organizationTemplatesApi(access.scope.companyId)
+  const execute = useManagementAction()
+  const { message } = App.useApp()
+  const { tr } = useI18n()
+  const actionRef = useRef<ActionType>(null)
+  const dialogRef = useRef<OrganizationTemplateDialogRef>(null)
+  const editRequest = useLatestDialogRequest(accessScopeKey(access.scope))
+  const prefix = 'company.organization.templates'
+  const allowed = (operation: string) => access.permissionKeys.includes(`${prefix}.${operation}`)
+  /** 刷新模板摘要列表。 */
+  const refresh = () => void actionRef.current?.reload()
+
+  /** 获取当前完整定义后打开模板编辑器。 */
+  async function openEdit(record: OrganizationTemplateSummary) {
+    await editRequest.run({
+      targetId: record.id,
+      load: () => api.detail(record.id),
+      onSuccess: (detail) => dialogRef.current?.show(detail),
+      onError: (error) => {
+        if ((error as Error).name !== 'AbortError')
+          void message.error(error instanceof Error ? error.message : tr('无法加载模板详情'))
+      },
+    })
+  }
+
+  const columns: ProColumns<OrganizationTemplateSummary>[] = [
+    {
+      title: tr('搜索'),
+      dataIndex: 'query',
+      hideInTable: true,
+      fieldProps: { placeholder: tr('搜索模板名称') },
+    },
+    { title: tr('模板名称'), dataIndex: 'name', search: false, width: 200 },
+    {
+      title: tr('状态'),
+      dataIndex: 'status',
+      width: 100,
+      valueEnum: {
+        active: { text: tr('启用'), status: 'Success' },
+        disabled: { text: tr('停用'), status: 'Default' },
+      },
+    },
+    {
+      title: tr('默认模板'),
+      dataIndex: 'isDefault',
+      search: false,
+      width: 110,
+      render: (_, record) =>
+        record.isDefault ? <Tag color="purple">{tr('默认')}</Tag> : <span>—</span>,
+    },
+    { title: tr('组织单元'), dataIndex: 'unitCount', search: false, width: 100 },
+    { title: tr('岗位'), dataIndex: 'positionCount', search: false, width: 90 },
+    { title: tr('版本'), dataIndex: 'version', search: false, width: 80 },
+    { title: tr('说明'), dataIndex: 'description', search: false, ellipsis: true },
+    {
+      title: tr('更新时间'),
+      dataIndex: 'updatedAt',
+      valueType: 'dateTime',
+      search: false,
+      width: 180,
+    },
+    {
+      title: tr('操作'),
+      valueType: 'option',
+      width: 280,
+      render: (_, record) => (
+        <Space size={4} wrap>
+          {allowed('update') && (
+            <Button
+              type="link"
+              size="small"
+              loading={editRequest.loadingId === record.id}
+              onClick={() => void openEdit(record)}
+            >
+              {tr('编辑定义')}
+            </Button>
+          )}
+          {allowed('update') && record.status === 'active' && !record.isDefault && (
+            <Popconfirm
+              title={tr('设为默认模板？')}
+              description={tr('企业现有默认模板会自动取消默认。')}
+              onConfirm={() =>
+                execute(
+                  () =>
+                    api.updateStatus(record.id, {
+                      isDefault: true,
+                      expectedVersion: record.version,
+                    }),
+                  refresh,
+                )
+              }
+            >
+              <Button type="link" size="small">
+                {tr('设为默认')}
+              </Button>
+            </Popconfirm>
+          )}
+          {allowed('update') && (
+            <Popconfirm
+              title={record.status === 'active' ? tr('停用模板？') : tr('恢复模板？')}
+              description={tr('停用模板不能用于新项目，历史项目不受影响。')}
+              onConfirm={() =>
+                execute(
+                  () =>
+                    api.updateStatus(record.id, {
+                      status: record.status === 'active' ? 'disabled' : 'active',
+                      expectedVersion: record.version,
+                    }),
+                  refresh,
+                )
+              }
+            >
+              <Button type="link" size="small" danger={record.status === 'active'}>
+                {record.status === 'active' ? tr('停用') : tr('恢复')}
+              </Button>
+            </Popconfirm>
+          )}
+        </Space>
+      ),
+    },
+  ]
+
+  return (
+    <>
+      <FullHeightProTable<OrganizationTemplateSummary>
+        rowKey="id"
+        actionRef={actionRef}
+        columns={columns}
+        headerTitle={tr('项目组织模板')}
+        pagination={{ defaultPageSize: 20, showSizeChanger: true, pageSizeOptions: [20, 50, 100] }}
+        request={
+          /** 查询模板摘要分页，不在列表阶段加载完整定义。 */ async (params) => {
+            const result = await api.list({
+              page: params.current,
+              pageSize: params.pageSize,
+              query: params.query as string | undefined,
+              status: params.status as EntityStatus | undefined,
+            })
+            return { data: result.items, total: result.total, success: true }
+          }
+        }
+        onRequestError={(error) => {
+          if (error.name !== 'AbortError') void message.error(error.message)
+        }}
+        toolBarRender={() =>
+          allowed('create')
+            ? [
+                <Button
+                  key="create"
+                  type="primary"
+                  icon={<PlusOutlined />}
+                  onClick={() => dialogRef.current?.show()}
+                >
+                  {tr('创建模板')}
+                </Button>,
+              ]
+            : []
+        }
+      />
+      <OrganizationTemplateDialog
+        ref={dialogRef}
+        onSave={(values: CreateOrganizationTemplateRequest, record?: OrganizationTemplateRecord) =>
+          execute(
+            () =>
+              record
+                ? api.replace(record.id, {
+                    ...values,
+                    isDefault: values.isDefault ?? false,
+                    expectedVersion: record.version,
+                  })
+                : api.create(values),
+            refresh,
+          )
+        }
+      />
+    </>
+  )
+}

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

@@ -0,0 +1,81 @@
+import type {
+  CreatePositionRequest,
+  OrganizationMemberCandidate,
+  OrganizationMemberCandidateQuery,
+  OrganizationScope,
+  PageResult,
+  PositionListQuery,
+  PositionRecord,
+  ReplaceMemberPositionsRequest,
+  ReplaceMemberPositionsResult,
+  ReplacePositionMembersRequest,
+  ReplacePositionMembersResult,
+  ResolveOrganizationMemberCandidatesRequest,
+  StatusRequest,
+  UpdatePositionRequest,
+} from 'shared/types'
+import { accessScopeBasePath, accessScopeKey } from 'shared/utils'
+import {
+  freshRequest,
+  runWorkspaceRequest,
+  workspaceRequest as http,
+} from '@/utils/request/workspace'
+
+/** 为企业或项目岗位页绑定岗位、任职和候选接口。 */
+export function positionsApi(scope: OrganizationScope) {
+  const base = accessScopeBasePath(scope)
+  const workspaceKey = accessScopeKey(scope)
+  /** 发送岗位查询并纳入工作空间取消机制。 */
+  const get = <T>(url: string, params?: object, signal?: AbortSignal) =>
+    runWorkspaceRequest({
+      method: http.Get<T>(url, { ...freshRequest, params }),
+      workspaceKey,
+      signal,
+    })
+  /** 发送岗位创建或候选补查请求。 */
+  const post = <T>(url: string, data: object, signal?: AbortSignal) =>
+    runWorkspaceRequest({ method: http.Post<T>(url, data, freshRequest), workspaceKey, signal })
+  /** 发送岗位局部更新请求。 */
+  const patch = <T>(url: string, data: object) =>
+    runWorkspaceRequest({ method: http.Patch<T>(url, data, freshRequest), workspaceKey })
+  /** 发送任职关系全量替换请求。 */
+  const put = <T>(url: string, data: object) =>
+    runWorkspaceRequest({ method: http.Put<T>(url, data, freshRequest), workspaceKey })
+
+  return {
+    /** 分页查询当前作用域岗位。 */
+    list: (params: PositionListQuery = {}) =>
+      get<PageResult<PositionRecord>>(`${base}/positions`, params),
+    /** 创建当前作用域岗位。 */
+    create: (data: CreatePositionRequest) => post<PositionRecord>(`${base}/positions`, data),
+    /** 更新岗位名称、编码或说明。 */
+    update: (id: string, data: UpdatePositionRequest) =>
+      patch<PositionRecord>(`${base}/positions/${id}`, data),
+    /** 停用或恢复岗位，保留既有任职。 */
+    updateStatus: (id: string, data: StatusRequest) =>
+      patch<PositionRecord>(`${base}/positions/${id}/status`, data),
+    /** 查询岗位分配场景下的成员候选。 */
+    memberCandidates: (params: OrganizationMemberCandidateQuery, signal?: AbortSignal) =>
+      get<PageResult<OrganizationMemberCandidate>>(
+        `${base}/organization/member-candidates`,
+        params,
+        signal,
+      ),
+    /** 按 userId 补查岗位成员候选。 */
+    resolveMemberCandidates: (
+      data: ResolveOrganizationMemberCandidatesRequest,
+      signal?: AbortSignal,
+    ) =>
+      post<OrganizationMemberCandidate[]>(
+        `${base}/organization/member-candidates/resolve`,
+        data,
+        signal,
+      ),
+    /** 按岗位完整替换该岗位任职成员。 */
+    replacePositionMembers: (id: string, data: ReplacePositionMembersRequest) =>
+      put<ReplacePositionMembersResult>(`${base}/positions/${id}/members`, data),
+    /** 按成员完整替换其当前作用域岗位。 */
+    replaceMemberPositions: (userId: string, data: ReplaceMemberPositionsRequest) =>
+      put<ReplaceMemberPositionsResult>(`${base}/organization/members/${userId}/positions`, data),
+  }
+}