openxiangda-cli 2.0.0-alpha.84 → 2.0.0-alpha.86

package/template/apps/web/src/components/platform-fields/SubtableField.tsx

@@ -0,0 +1,553 @@
+import {
+  DeleteOutlined,
+  DownOutlined,
+  EditOutlined,
+  PlusOutlined,
+  ReloadOutlined,
+  UpOutlined,
+} from '@ant-design/icons';
+import {
+  Alert,
+  Button,
+  Drawer,
+  Empty,
+  Form,
+  Modal,
+  Space,
+  Spin,
+  Table,
+  Tooltip,
+  Typography,
+} from 'antd';
+import type {
+  DataFieldSurface,
+  DataResourceSurface,
+} from 'openxiangda-contracts/browser';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { resourceDefinitions } from '../../../../../packages/contracts/src/generated.js';
+import { createNativeResourceClient } from '../../platform-client';
+import { useRuntime } from '../../runtime';
+import {
+  MobileSurfaceFieldControl,
+  SurfaceFieldControl,
+  SurfaceFieldValue,
+  type SurfaceField,
+} from '../resource/SurfaceFields';
+import {
+  fieldValueForData,
+  fieldValueForForm,
+} from './field-form-codec';
+import type { SubtableDraftRow } from './subtable-value';
+
+interface GeneratedDefinition {
+  code: string;
+  name: string;
+  capabilities: {
+    read: string;
+    create: string;
+    update: string;
+    delete: string;
+  };
+  surface: DataResourceSurface;
+}
+
+const definitions = resourceDefinitions as unknown as Record<
+  string,
+  GeneratedDefinition
+>;
+
+export interface SubtableFieldProps {
+  field: SurfaceField;
+  disabled?: boolean;
+  mobile?: boolean;
+  operation: 'create' | 'update';
+  parentRecordId?: string;
+  value?: SubtableDraftRow[];
+  onChange?: (value: SubtableDraftRow[]) => void;
+}
+
+export function SubtableField({
+  field,
+  disabled,
+  mobile,
+  operation,
+  parentRecordId,
+  value,
+  onChange,
+}: SubtableFieldProps) {
+  const config = field.subtable;
+  const definition = config ? definitions[config.resourceCode] : undefined;
+  const { hasCapability, identity } = useRuntime();
+  const [internalRows, setInternalRows] = useState<SubtableDraftRow[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [loadError, setLoadError] = useState('');
+  const [editorOpen, setEditorOpen] = useState(false);
+  const [editingKey, setEditingKey] = useState<string>();
+  const [rowForm] = Form.useForm();
+  const loadedKey = useRef('');
+  const rows = value ?? internalRows;
+  const maxRows = config?.maxRows ?? 20;
+  const visibleRows = rows.filter(row => row.state !== 'deleted');
+  const childFields = useMemo(
+    () => childSurfaceFields(definition?.surface, config?.foreignKey, config?.orderField),
+    [config?.foreignKey, config?.orderField, definition?.surface]
+  );
+  const readableFields = childFields.filter(child =>
+    fieldReadable(child, hasCapability, identity.isAppSuperAdmin)
+  );
+  const editableFields = childFields.filter(child =>
+    fieldReadable(child, hasCapability, identity.isAppSuperAdmin) ||
+    fieldWritable(
+      child,
+      editingKey ? 'update' : 'create',
+      hasCapability,
+      identity.isAppSuperAdmin
+    )
+  );
+  const editingRow = rows.find(row => row.key === editingKey);
+  const editorOperation = editingRow?.state === 'persisted' ? 'update' : 'create';
+  const canCreate = Boolean(
+    definition &&
+      !disabled &&
+      (identity.isAppSuperAdmin || hasCapability(definition.capabilities.create))
+  );
+  const canUpdate = Boolean(
+    definition &&
+      !disabled &&
+      (identity.isAppSuperAdmin || hasCapability(definition.capabilities.update))
+  );
+  const canDelete = Boolean(
+    definition &&
+      !disabled &&
+      (identity.isAppSuperAdmin || hasCapability(definition.capabilities.delete))
+  );
+
+  const emit = (next: SubtableDraftRow[]) => {
+    setInternalRows(next);
+    onChange?.(next);
+  };
+
+  useEffect(() => {
+    if (!parentRecordId || !definition || !config) {
+      if (operation === 'create' && value === undefined && internalRows.length === 0) {
+        onChange?.([]);
+      }
+      return;
+    }
+    const key = `${definition.code}:${parentRecordId}`;
+    if (value !== undefined || loadedKey.current === key) return;
+    loadedKey.current = key;
+    let active = true;
+    setLoading(true);
+    setLoadError('');
+    void loadChildRows(definition, config.foreignKey, config.orderField, parentRecordId, maxRows)
+      .then(records => {
+        if (!active) return;
+        const next = records.map(record =>
+          draftFromRecord(record, definition.surface, config.foreignKey, config.orderField)
+        );
+        emit(next);
+      })
+      .catch(error => {
+        if (!active) return;
+        setLoadError(error instanceof Error ? error.message : String(error));
+      })
+      .finally(() => {
+        if (active) setLoading(false);
+      });
+    return () => {
+      active = false;
+    };
+  }, [
+    config,
+    definition,
+    internalRows.length,
+    maxRows,
+    onChange,
+    operation,
+    parentRecordId,
+    value,
+  ]);
+
+  if (!config || !definition) {
+    return (
+      <Alert
+        message="子表配置不可用"
+        showIcon
+        type="error"
+      />
+    );
+  }
+
+  const openEditor = (row?: SubtableDraftRow) => {
+    setEditingKey(row?.key);
+    rowForm.resetFields();
+    if (row) rowForm.setFieldsValue(row.data);
+    setEditorOpen(true);
+  };
+  const saveEditor = async () => {
+    const data = await rowForm.validateFields();
+    if (editingKey) {
+      emit(
+        rows.map(row =>
+          row.key === editingKey
+            ? {
+                ...row,
+                data,
+                snapshot: {
+                  ...(row.snapshot || {}),
+                  ...Object.fromEntries(
+                    Object.entries(data).map(([key, item]) => [
+                      key,
+                      fieldValueForData(definition.surface.fields[key], item),
+                    ])
+                  ),
+                },
+              }
+            : row
+        )
+      );
+    } else {
+      emit([
+        ...rows,
+        {
+          key: crypto.randomUUID(),
+          state: 'created',
+          data,
+          snapshot: Object.fromEntries(
+            Object.entries(data).map(([key, item]) => [
+              key,
+              fieldValueForData(definition.surface.fields[key], item),
+            ])
+          ),
+        },
+      ]);
+    }
+    setEditorOpen(false);
+  };
+  const removeRow = (target: SubtableDraftRow) => {
+    emit(
+      target.state === 'created'
+        ? rows.filter(row => row.key !== target.key)
+        : rows.map(row =>
+            row.key === target.key ? { ...row, state: 'deleted' } : row
+          )
+    );
+  };
+  const moveRow = (index: number, direction: -1 | 1) => {
+    const target = index + direction;
+    if (target < 0 || target >= visibleRows.length) return;
+    const reordered = [...visibleRows];
+    [reordered[index], reordered[target]] = [reordered[target]!, reordered[index]!];
+    emit([...reordered, ...rows.filter(row => row.state === 'deleted')]);
+  };
+  const columns = [
+    ...readableFields.map(child => ({
+      title: child.label,
+      key: child.key,
+      render: (_: unknown, row: SubtableDraftRow) => (
+        <SurfaceFieldValue
+          field={child}
+          resourceCode={definition.code}
+          value={row.snapshot?.[child.key] ?? fieldValueForData(
+            definition.surface.fields[child.key],
+            row.data[child.key]
+          )}
+        />
+      ),
+    })),
+    ...(disabled
+      ? []
+      : [{
+          title: '操作',
+          key: 'actions',
+          width: 168,
+          render: (_: unknown, row: SubtableDraftRow, index: number) => (
+            <Space size={4}>
+              <Tooltip title="上移">
+                <Button
+                  aria-label="上移"
+                  disabled={index === 0 || !canUpdate}
+                  icon={<UpOutlined />}
+                  onClick={() => moveRow(index, -1)}
+                  size="small"
+                  type="text"
+                />
+              </Tooltip>
+              <Tooltip title="下移">
+                <Button
+                  aria-label="下移"
+                  disabled={index === visibleRows.length - 1 || !canUpdate}
+                  icon={<DownOutlined />}
+                  onClick={() => moveRow(index, 1)}
+                  size="small"
+                  type="text"
+                />
+              </Tooltip>
+              <Tooltip title="编辑">
+                <Button
+                  aria-label="编辑"
+                  disabled={row.state === 'persisted' ? !canUpdate : !canCreate}
+                  icon={<EditOutlined />}
+                  onClick={() => openEditor(row)}
+                  size="small"
+                  type="text"
+                />
+              </Tooltip>
+              <Tooltip title="删除">
+                <Button
+                  aria-label="删除"
+                  danger
+                  disabled={row.state === 'persisted' ? !canDelete : !canCreate}
+                  icon={<DeleteOutlined />}
+                  onClick={() => removeRow(row)}
+                  size="small"
+                  type="text"
+                />
+              </Tooltip>
+            </Space>
+          ),
+        }]),
+  ];
+  const editor = (
+    <Form component={false} form={rowForm} layout="vertical">
+      <div className={mobile ? 'oxa-mobile-subtable-editor' : 'oxa-grid'}>
+        {editableFields.map(child => {
+          const Control = mobile
+            ? MobileSurfaceFieldControl
+            : SurfaceFieldControl;
+          const childOperation = editorOperation;
+          return (
+            <Control
+              disabled={!fieldWritable(
+                child,
+                childOperation,
+                hasCapability,
+                identity.isAppSuperAdmin
+              )}
+              field={child}
+              key={child.key}
+              operation={childOperation}
+              recordId={rows.find(row => row.key === editingKey)?.id}
+              resourceCode={definition.code}
+              renderers={{
+                upload: (current, file, recordId) =>
+                  createNativeResourceClient(definition.code, definition.surface)
+                    .upload(current.key, file, recordId),
+              }}
+            />
+          );
+        })}
+      </div>
+    </Form>
+  );
+
+  return (
+    <div className="oxa-subtable-field">
+      <div className="oxa-subtable-toolbar">
+        <Typography.Text type="secondary">
+          {visibleRows.length} / {maxRows}
+        </Typography.Text>
+        {!disabled && (
+          <Button
+            disabled={!canCreate || visibleRows.length >= maxRows}
+            icon={<PlusOutlined />}
+            onClick={() => openEditor()}
+            size="small"
+          >
+            添加
+          </Button>
+        )}
+      </div>
+      {loadError ? (
+        <Alert
+          action={(
+            <Button
+              icon={<ReloadOutlined />}
+              onClick={() => {
+                loadedKey.current = '';
+                setLoadError('');
+                setInternalRows([]);
+              }}
+              size="small"
+            >
+              重试
+            </Button>
+          )}
+          message={loadError}
+          showIcon
+          type="error"
+        />
+      ) : loading ? (
+        <div className="oxa-subtable-loading"><Spin size="small" /></div>
+      ) : mobile ? (
+        visibleRows.length ? (
+          <div className="oxa-mobile-subtable-list">
+            {visibleRows.map((row, index) => (
+              <div className="oxa-mobile-subtable-row" key={row.key}>
+                <div className="oxa-mobile-subtable-values">
+                  {readableFields.map(child => (
+                    <div key={child.key}>
+                      <Typography.Text type="secondary">{child.label}</Typography.Text>
+                      <SurfaceFieldValue
+                        field={child}
+                        resourceCode={definition.code}
+                        value={row.snapshot?.[child.key] ?? row.data[child.key]}
+                      />
+                    </div>
+                  ))}
+                </div>
+                {!disabled && (columns[columns.length - 1] as any)?.render?.(null, row, index)}
+              </div>
+            ))}
+          </div>
+        ) : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+      ) : (
+        <Table
+          columns={columns}
+          dataSource={visibleRows}
+          locale={{ emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> }}
+          pagination={false}
+          rowKey="key"
+          scroll={{ x: true }}
+          size="small"
+        />
+      )}
+      {mobile ? (
+        <Drawer
+          extra={<Button onClick={() => void saveEditor()} type="primary">保存</Button>}
+          onClose={() => setEditorOpen(false)}
+          open={editorOpen}
+          placement="bottom"
+          title={editingKey ? '编辑明细' : '添加明细'}
+        >
+          {editor}
+        </Drawer>
+      ) : (
+        <Modal
+          onCancel={() => setEditorOpen(false)}
+          onOk={() => void saveEditor()}
+          open={editorOpen}
+          title={editingKey ? '编辑明细' : '添加明细'}
+        >
+          {editor}
+        </Modal>
+      )}
+    </div>
+  );
+}
+
+export function SubtableValueDisplay({
+  field,
+  parentRecordId,
+  mobile,
+}: {
+  field: SurfaceField;
+  parentRecordId: string;
+  mobile?: boolean;
+}) {
+  return (
+    <SubtableField
+      disabled
+      field={field}
+      mobile={mobile}
+      operation="update"
+      parentRecordId={parentRecordId}
+    />
+  );
+}
+
+function childSurfaceFields(
+  surface: DataResourceSurface | undefined,
+  foreignKey?: string,
+  orderField?: string
+) {
+  return Object.entries(surface?.fields || {})
+    .filter(([key, field]) =>
+      key !== foreignKey &&
+      key !== orderField &&
+      !field.system &&
+      field.type !== 'subtable'
+    )
+    .map(([key, field]) => ({ key, ...field }));
+}
+
+function fieldReadable(
+  field: SurfaceField,
+  hasCapability: (code: string) => boolean,
+  isSuperAdmin: boolean
+) {
+  return isSuperAdmin || (
+    field.readCapabilities.length > 0 &&
+    field.readCapabilities.every(hasCapability)
+  );
+}
+
+function fieldWritable(
+  field: SurfaceField,
+  operation: 'create' | 'update',
+  hasCapability: (code: string) => boolean,
+  isSuperAdmin: boolean
+) {
+  if (field.widget === 'readonly' || field.type === 'subtable') return false;
+  if (isSuperAdmin) return true;
+  const capabilities = operation === 'create'
+    ? field.createCapabilities
+    : field.updateCapabilities;
+  return capabilities.length > 0 && capabilities.every(hasCapability);
+}
+
+async function loadChildRows(
+  definition: GeneratedDefinition,
+  foreignKey: string,
+  orderField: string,
+  parentRecordId: string,
+  maxRows: number
+) {
+  const client = createNativeResourceClient(definition.code, definition.surface);
+  const records: Record<string, unknown>[] = [];
+  let page = 1;
+  let total = 0;
+  do {
+    const pageSize = Math.min(200, maxRows - records.length);
+    const result = await client.list({
+      page,
+      pageSize,
+      filters: { [foreignKey]: parentRecordId },
+      sort: { field: orderField, order: 'asc' },
+    });
+    records.push(...result.rows);
+    total = result.total;
+    page += 1;
+  } while (records.length < total && records.length < maxRows);
+  if (total > maxRows) throw new Error('OPENXIANGDA_SUBTABLE_STORED_ROWS_EXCEEDED');
+  return records;
+}
+
+function draftFromRecord(
+  record: Record<string, unknown>,
+  surface: DataResourceSurface,
+  foreignKey: string,
+  orderField: string
+): SubtableDraftRow {
+  const data = Object.fromEntries(
+    Object.entries(record)
+      .filter(([key]) => key !== foreignKey && key !== orderField && surface.fields[key])
+      .map(([key, item]) => [key, fieldValueForForm(surface.fields[key], item)])
+  );
+  const originalData = Object.fromEntries(
+    Object.entries(record).filter(
+      ([key]) => key !== foreignKey && key !== orderField && surface.fields[key]
+    )
+  );
+  return {
+    key: String(record.id),
+    state: 'persisted',
+    id: String(record.id),
+    revision: Number(record.revision),
+    originalOrder: Number(record[orderField]),
+    data,
+    originalData,
+    snapshot: record,
+  };
+}

package/template/apps/web/src/components/platform-fields/address-value.ts

@@ -0,0 +1,80 @@
+import type {
+  LabeledValue,
+  StableAddressValue,
+} from 'openxiangda-contracts/browser';
+
+export const ADDRESS_LEVELS = [
+  'province',
+  'city',
+  'district',
+  'street',
+] as const;
+
+export type AddressLevel = (typeof ADDRESS_LEVELS)[number];
+
+const CHINA: LabeledValue = { label: '中国', value: '100000' };
+
+function snapshot(value: LabeledValue): LabeledValue {
+  return {
+    label: String(value.label || '').trim(),
+    value: String(value.value || '').trim(),
+  };
+}
+
+export function addressPath(value?: StableAddressValue) {
+  return ADDRESS_LEVELS
+    .map(level => value?.[level])
+    .filter((item): item is LabeledValue => Boolean(item?.value));
+}
+
+export function addressControlValue(value?: StableAddressValue) {
+  return addressPath(value).map(item => item.value);
+}
+
+export function addressDisplay(value?: StableAddressValue) {
+  if (!value) return '';
+  if (value.fullAddress?.trim()) return value.fullAddress.trim();
+  return composeFullAddress(addressPath(value), value.detail);
+}
+
+export function composeFullAddress(path: LabeledValue[], detail?: string) {
+  const labels: string[] = [];
+  for (const item of path) {
+    const label = String(item.label || '').trim();
+    if (label && labels[labels.length - 1] !== label) labels.push(label);
+  }
+  const normalizedDetail = String(detail || '').trim();
+  if (normalizedDetail) labels.push(normalizedDetail);
+  return labels.join('');
+}
+
+export function addressStoredValue(
+  path: LabeledValue[],
+  detail?: string
+): StableAddressValue | undefined {
+  const normalizedPath = path
+    .slice(0, ADDRESS_LEVELS.length)
+    .map(snapshot)
+    .filter(item => item.label && item.value);
+  if (!normalizedPath.length) return undefined;
+  const normalizedDetail = String(detail || '').trim();
+  const value: StableAddressValue = { country: { ...CHINA } };
+  normalizedPath.forEach((item, index) => {
+    const level = ADDRESS_LEVELS[index];
+    if (level) value[level] = item;
+  });
+  if (normalizedDetail) value.detail = normalizedDetail;
+  value.fullAddress = composeFullAddress(normalizedPath, normalizedDetail);
+  return value;
+}
+
+export function deepestAddressPredicate(value?: StableAddressValue) {
+  for (let index = ADDRESS_LEVELS.length - 1; index >= 0; index -= 1) {
+    const level = ADDRESS_LEVELS[index];
+    const part = level ? value?.[level] : undefined;
+    if (level && part?.value) {
+      return { path: `${level}.value`, value: part.value };
+    }
+  }
+  return undefined;
+}

package/template/apps/web/src/components/platform-fields/cascade-value.ts

@@ -0,0 +1,66 @@
+import type { DataFieldOption, LabeledValue } from 'openxiangda-contracts/browser';
+
+export type CascadeStoredValue = LabeledValue[] | LabeledValue[][];
+
+function optionSnapshot(option: DataFieldOption): LabeledValue {
+  return {
+    value: option.value,
+    label: option.label,
+    ...(option.description ? { description: option.description } : {}),
+    ...(option.color ? { color: option.color } : {}),
+  };
+}
+
+function resolvePath(
+  options: DataFieldOption[],
+  ids: string[],
+  index = 0
+): LabeledValue[] | undefined {
+  const option = options.find(item => item.value === ids[index]);
+  if (!option) return undefined;
+  if (index === ids.length - 1) return [optionSnapshot(option)];
+  const child = resolvePath(option.children || [], ids, index + 1);
+  return child ? [optionSnapshot(option), ...child] : undefined;
+}
+
+export function cascadeControlValue(
+  value: CascadeStoredValue | undefined,
+  multiple: boolean
+) {
+  if (multiple) {
+    return (Array.isArray(value) ? value : [])
+      .filter((path): path is LabeledValue[] => Array.isArray(path))
+      .map(path => path.map(item => item.value));
+  }
+  return (Array.isArray(value) ? value : [])
+    .filter((item): item is LabeledValue => !Array.isArray(item))
+    .map(item => item.value);
+}
+
+export function cascadeStoredValue(
+  options: DataFieldOption[],
+  value: unknown,
+  multiple: boolean
+) {
+  const paths = multiple
+    ? (Array.isArray(value) ? value : []).filter(Array.isArray) as string[][]
+    : Array.isArray(value) && value.length ? [value.map(String)] : [];
+  const snapshots = paths
+    .map(path => resolvePath(options, path.map(String)))
+    .filter((path): path is LabeledValue[] => Boolean(path));
+  return multiple ? snapshots : snapshots[0];
+}
+
+export function cascadeTerminalValues(
+  value: CascadeStoredValue | undefined,
+  multiple: boolean
+) {
+  const paths = multiple
+    ? (Array.isArray(value) ? value : []).filter(Array.isArray) as LabeledValue[][]
+    : [Array.isArray(value)
+        ? value.filter(item => !Array.isArray(item)) as LabeledValue[]
+        : []];
+  return paths
+    .map(path => path[path.length - 1]?.value)
+    .filter((item): item is string => Boolean(item));
+}