openxiangda-cli 2.0.0-alpha.49 → 2.0.0-alpha.56

package/template/apps/web/src/InstrumentForm.tsx

@@ -0,0 +1,322 @@
+import {
+  Button,
+  Card,
+  DatePicker,
+  Descriptions,
+  Form,
+  Input,
+  InputNumber,
+  Select,
+  Switch,
+  Upload,
+  type UploadFile,
+} from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+import dayjs from 'dayjs';
+import { useEffect } from 'react';
+import type { DataFileRef } from 'openxiangda-contracts/browser';
+import { instrumentFields, sectionTitles, type InstrumentField } from './fields';
+import type { InstrumentRecord } from './instrument';
+import { instrumentDataApi } from './platform-client';
+import { useRuntime } from './runtime';
+
+type Values = Record<string, unknown>;
+
+export function instrumentFieldAllowed(
+  field: InstrumentField,
+  mode: 'create' | 'edit',
+  hasCapability: (capability: string) => boolean
+) {
+  const capability =
+    mode === 'create' ? field.createCapability : field.updateCapability;
+  return !capability || hasCapability(capability);
+}
+
+export function sanitizeInstrumentValues(
+  values: Values,
+  mode: 'create' | 'edit',
+  hasCapability: (capability: string) => boolean
+): Values {
+  return Object.fromEntries(
+    instrumentFields
+      .filter(
+        field =>
+          !field.system && instrumentFieldAllowed(field, mode, hasCapability)
+      )
+      .filter(field => Object.prototype.hasOwnProperty.call(values, field.key))
+      .map(field => [field.key, values[field.key]])
+  );
+}
+
+export function InstrumentForm({
+  mode,
+  record,
+  onCancel,
+  onSubmit,
+}: {
+  mode: 'create' | 'edit' | 'detail';
+  record?: InstrumentRecord;
+  onCancel: () => void;
+  onSubmit?: (values: Values) => Promise<void>;
+}) {
+  const [form] = Form.useForm();
+  const { hasCapability } = useRuntime();
+  useEffect(() => {
+    if (record) {
+      form.setFieldsValue({
+        ...record,
+        enabledDate: record.enabledDate ? dayjs(record.enabledDate) : undefined,
+      });
+    }
+  }, [form, record]);
+  if (mode === 'detail' && record) return <Detail record={record} />;
+  const isCreate = mode === 'create';
+  const writeMode = isCreate ? 'create' : 'edit';
+  const submit = async () => {
+    const values = await form.validateFields();
+    const normalized = {
+      ...values,
+      enabledDate:
+        values.enabledDate &&
+        typeof values.enabledDate === 'object' &&
+        'format' in values.enabledDate
+          ? (values.enabledDate as { format(pattern: string): string }).format(
+              'YYYY-MM-DD'
+            )
+          : values.enabledDate,
+    };
+    await onSubmit?.(
+      sanitizeInstrumentValues(normalized, writeMode, hasCapability)
+    );
+  };
+  return (
+    <Form
+      form={form}
+      layout="vertical"
+      initialValues={
+        isCreate
+          ? {
+              openToOutside: false,
+              instrumentStatus: 'normal',
+              usageStatus: 'active',
+            }
+          : undefined
+      }
+    >
+      <div className="oxa-sections">
+        {Object.entries(sectionTitles).map(([section, title]) => (
+          <Card key={section} title={title}>
+            <div className="oxa-grid">
+              {instrumentFields
+                .filter(field => field.section === section && !field.system)
+                .map(field => (
+                  <FieldControl
+                    field={field}
+                    key={field.key}
+                    disabled={
+                      !instrumentFieldAllowed(field, writeMode, hasCapability)
+                    }
+                    recordId={record?.id}
+                  />
+                ))}
+            </div>
+          </Card>
+        ))}
+      </div>
+      <div className="oxa-actions">
+        <Button onClick={onCancel}>取消</Button>
+        <Button
+          data-testid="save-instrument"
+          type="primary"
+          onClick={() => void submit()}
+        >
+          {isCreate ? '创建仪器' : '保存修改'}
+        </Button>
+      </div>
+    </Form>
+  );
+}
+
+function FieldControl({
+  field,
+  disabled,
+  recordId,
+}: {
+  field: InstrumentField;
+  disabled: boolean;
+  recordId?: string;
+}) {
+  const rules = [
+    ...(field.required
+      ? [{ required: true, message: `请填写或选择${field.label}` }]
+      : []),
+    ...(field.kind === 'email'
+      ? [{ type: 'email' as const, message: '邮箱格式不正确' }]
+      : []),
+    ...(field.kind === 'phone'
+      ? [{ pattern: /^1\d{10}$/, message: '请输入 11 位手机号' }]
+      : []),
+  ];
+  const common = { disabled, placeholder: `请输入${field.label}` };
+  let control = <Input {...common} />;
+  if (field.kind === 'textarea')
+    control = <Input.TextArea {...common} rows={3} />;
+  if (field.kind === 'number')
+    control = <InputNumber {...common} min={0} style={{ width: '100%' }} />;
+  if (field.kind === 'date')
+    control = <DatePicker disabled={disabled} style={{ width: '100%' }} />;
+  if (field.kind === 'boolean')
+    control = (
+      <Switch
+        disabled={disabled}
+        checkedChildren="是"
+        unCheckedChildren="否"
+      />
+    );
+  if (field.kind === 'select')
+    control = (
+      <Select
+        disabled={disabled}
+        options={field.options}
+        placeholder={`请选择${field.label}`}
+      />
+    );
+  if (field.kind === 'multi')
+    control = (
+      <Select
+        disabled={disabled}
+        mode="multiple"
+        options={field.options}
+        placeholder={`请选择${field.label}`}
+      />
+    );
+  if (field.kind === 'file')
+    control = (
+      <FileValue
+        accept={field.accept}
+        disabled={disabled}
+        fieldCode={field.key as 'image' | 'attachments'}
+        maxCount={field.maxCount}
+        multiple={field.multiple}
+        recordId={recordId}
+      />
+    );
+  return (
+    <Form.Item
+      label={field.label}
+      name={field.key}
+      rules={rules}
+      valuePropName={field.kind === 'boolean' ? 'checked' : 'value'}
+    >
+      {control}
+    </Form.Item>
+  );
+}
+
+function FileValue({
+  value,
+  onChange,
+  fieldCode,
+  recordId,
+  disabled,
+  multiple,
+  maxCount = 1,
+  accept,
+}: {
+  value?: DataFileRef | DataFileRef[];
+  onChange?: (value: DataFileRef | DataFileRef[] | undefined) => void;
+  fieldCode: 'image' | 'attachments';
+  recordId?: string;
+  disabled?: boolean;
+  multiple?: boolean;
+  maxCount?: number;
+  accept?: string;
+}) {
+  const refs = Array.isArray(value) ? value : value ? [value] : [];
+  const files: UploadFile[] = refs.map(file => ({
+    uid: file.id,
+    name: file.name,
+    status: 'done',
+  }));
+  return (
+    <Upload
+      accept={accept}
+      disabled={disabled}
+      fileList={files}
+      maxCount={maxCount}
+      multiple={multiple}
+      customRequest={async options => {
+        try {
+          const uploaded = await instrumentDataApi.upload(
+            fieldCode,
+            options.file as File,
+            recordId
+          );
+          onChange?.(multiple ? [...refs, uploaded] : uploaded);
+          options.onSuccess?.(uploaded);
+        } catch (error) {
+          options.onError?.(
+            error instanceof Error ? error : new Error(String(error))
+          );
+        }
+      }}
+      onRemove={file => {
+        const next = refs.filter(item => item.id !== file.uid);
+        onChange?.(multiple ? next : undefined);
+        return true;
+      }}
+    >
+      <Button icon={<UploadOutlined />}>上传</Button>
+    </Upload>
+  );
+}
+
+function Detail({ record }: { record: InstrumentRecord }) {
+  return (
+    <div className="oxa-sections">
+      {Object.entries(sectionTitles).map(([section, title]) => (
+        <Card key={section} title={title}>
+          <Descriptions
+            column={2}
+            items={instrumentFields
+              .filter(field => field.section === section)
+              .map(field => ({
+                key: field.key,
+                label: field.label,
+                children: displayValue(field, record[field.key]),
+              }))}
+          />
+        </Card>
+      ))}
+    </div>
+  );
+}
+
+function displayValue(field: InstrumentField, value: unknown) {
+  if (value === undefined || value === null || value === '') return '-';
+  if (field.kind === 'boolean') return value ? '是' : '否';
+  if (field.kind === 'file') {
+    const values = Array.isArray(value) ? value : [value];
+    return values
+      .map(item =>
+        item && typeof item === 'object' && 'name' in item
+          ? String(item.name)
+          : String(item)
+      )
+      .join('、');
+  }
+  if (Array.isArray(value))
+    return (
+      value
+        .map(
+          item =>
+            field.options?.find(option => option.value === item)?.label ||
+            String(item)
+        )
+        .join('、') || '-'
+    );
+  return (
+    field.options?.find(option => option.value === value)?.label ||
+    String(value)
+  );
+}

package/template/apps/web/src/InstrumentFormPage.tsx

@@ -0,0 +1,77 @@
+import { useCreate, useOne, useUpdate } from '@refinedev/core';
+import { App, Result, Spin, Typography } from 'antd';
+import { useNavigate, useParams } from 'react-router-dom';
+import { InstrumentForm } from './InstrumentForm';
+import { Shell } from './Shell';
+import { INSTRUMENT_CAPABILITIES, type InstrumentRecord } from './instrument';
+import { useRuntime } from './runtime';
+
+export function InstrumentFormPage({ mode }: { mode: 'create' | 'edit' }) {
+  const { id = '' } = useParams();
+  const navigate = useNavigate();
+  const { hasCapability } = useRuntime();
+  const { message } = App.useApp();
+  const create = useCreate();
+  const update = useUpdate();
+  const query = useOne<InstrumentRecord>({
+    resource: 'instruments',
+    id,
+    queryOptions: { enabled: mode === 'edit' },
+  });
+  const record = query.result;
+  const allowed =
+    mode === 'create'
+      ? hasCapability(INSTRUMENT_CAPABILITIES.create)
+      : hasCapability(INSTRUMENT_CAPABILITIES.update);
+  if (!allowed)
+    return (
+      <Shell>
+        <Result status="403" title="当前平台用户无此操作权限" />
+      </Shell>
+    );
+  if (mode === 'edit' && query.query.isLoading)
+    return (
+      <Shell>
+        <Spin />
+      </Shell>
+    );
+  if (mode === 'edit' && !record)
+    return (
+      <Shell>
+        <Result status="404" title="仪器不存在或不在数据范围内" />
+      </Shell>
+    );
+  return (
+    <Shell>
+      <Typography.Title level={3}>
+        {mode === 'create' ? '新增仪器' : '编辑仪器'}
+      </Typography.Title>
+      <InstrumentForm
+        mode={mode}
+        record={record}
+        onCancel={() =>
+          navigate(mode === 'edit' ? `/instruments/${id}` : '/instruments')
+        }
+        onSubmit={async values => {
+          if (mode === 'create') {
+            await create.mutateAsync({
+              resource: 'instruments',
+              values,
+            });
+            message.success('仪器已创建');
+            navigate('/instruments');
+          } else {
+            const result = await update.mutateAsync({
+              resource: 'instruments',
+              id,
+              values,
+              meta: { expectedRevision: record!.revision },
+            });
+            message.success('修改已保存');
+            navigate(`/instruments/${result.data.id}`);
+          }
+        }}
+      />
+    </Shell>
+  );
+}