SceneForm.tsx
10.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
import { useEffect, useMemo, useState } from 'react'
import {
Card, Row, Col, Form, Button, Table, Space, Tag, Typography, Alert, message, Divider, Empty,
} from 'antd'
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons'
import { api } from '../api'
import type { DragComponent, OptionItem, SceneSchema } from '../types'
import { FieldControl } from './FieldControl'
const { Text } = Typography
type Role = 'master' | 'single' | 'table'
function roleOf(container: DragComponent): Role {
const fb = container.fieldBind || ({} as any)
if (fb.bindSourceType === 'aggregate_root') return 'master'
if (container.compType === 'table') return 'table'
return 'single'
}
function collectOptionSources(comps: DragComponent[], acc: Set<string>) {
for (const c of comps) {
const src = c.fieldBind?.optionsSource
if (src) acc.add(src.aggregateId)
if (c.childComponents) collectOptionSources(c.childComponents, acc)
}
}
/**
* 场景通用渲染引擎：读取合成后的场景 Schema，动态生成表单。
* 完全由 M8 模板结构驱动——主表(aggregate_root)渲染为卡片字段，
* 子实体(aggregate_entity)按 table/card 渲染为多行表格或单行卡片。改模板即改页面。
*/
export function SceneForm({ schema, onExecuted, principal }:
{ schema: SceneSchema; onExecuted: (r: any) => void; principal: string }) {
const template = schema.template!
const containers = template.rootComponents || []
const [master, setMaster] = useState<Record<string, any>>({})
const [singles, setSingles] = useState<Record<string, Record<string, any>>>({})
const [tables, setTables] = useState<Record<string, Array<Record<string, any>>>>({})
const [optionsMap, setOptionsMap] = useState<Record<string, OptionItem[]>>({})
const [precheck, setPrecheck] = useState<any>(null)
const [submitting, setSubmitting] = useState(false)
// 初始化表单状态（据模板结构）
useEffect(() => {
const s: Record<string, Record<string, any>> = {}
const t: Record<string, Array<Record<string, any>>> = {}
for (const c of containers) {
const role = roleOf(c)
const entity = c.fieldBind?.domainEntityName
if (role === 'single' && entity) s[entity] = {}
if (role === 'table' && entity) t[entity] = [{}]
}
setMaster({})
setSingles(s)
setTables(t)
setPrecheck(null)
// 拉取所有引用下拉数据源
const aggs = new Set<string>()
collectOptionSources(containers, aggs)
Promise.all([...aggs].map((a) => api.options(a).then((opts) => [a, opts] as const)))
.then((pairs) => setOptionsMap(Object.fromEntries(pairs)))
.catch(() => {})
}, [schema.sceneId])
function buildPayload() {
const details: Record<string, any[]> = {}
for (const c of containers) {
const role = roleOf(c)
const entity = c.fieldBind?.domainEntityName
if (!entity) continue
if (role === 'table') details[entity] = tables[entity] || []
if (role === 'single') details[entity] = [singles[entity] || {}]
}
return { master, details }
}
async function doPrecheck() {
try {
const r = await api.precheck(schema.sceneId, buildPayload(), principal)
setPrecheck(r)
if (r.reject) message.warning('预检未通过，请查看提示')
else message.success('预检通过，可提交')
} catch (e: any) {
message.error('预检失败：' + e.message)
}
}
async function doSubmit() {
setSubmitting(true)
try {
const r = await api.execute(schema.sceneId, buildPayload(), principal)
onExecuted(r)
if (r.success) {
message.success(`${schema.sceneName}成功：${r.rootId ?? ''}`)
setPrecheck(null)
} else {
message.error(`${r.stage} · ${r.message}`)
setPrecheck({ reject: true, errors: r.errors || [], rejectRules: r.appliedRules?.filter((x: any) => x.effect === 'REJECT') || [], warnings: r.warnings || [] })
}
} catch (e: any) {
message.error('提交失败：' + e.message)
} finally {
setSubmitting(false)
}
}
return (
<div>
<Space wrap style={{ marginBottom: 12 }}>
<Tag color="blue">模板 {template.templateId}</Tag>
<Tag color="geekblue">{template.templateType}</Tag>
<Tag color="purple">主聚合 {template.masterAggregate}</Tag>
<Tag color="cyan">命令 API {schema.commandApi}</Tag>
<Tag color="gold">权限 {schema.permissionBind?.join(',')}</Tag>
</Space>
{precheck && (precheck.reject || precheck.warnings?.length > 0) && (
<Alert
style={{ marginBottom: 12 }}
type={precheck.reject ? 'error' : 'warning'}
showIcon
message={precheck.reject ? '预检拦截（MetaRule / 校验）' : '预检提示'}
description={
<div>
{(precheck.errors || []).map((e: string, i: number) => <div key={'e' + i}>❌ {e}</div>)}
{(precheck.rejectRules || []).map((r: any, i: number) => <div key={'r' + i}>⛔ [{r.ruleId}] {r.message}</div>)}
{(precheck.warnings || []).map((w: any, i: number) => <div key={'w' + i}>⚠️ [{w.ruleId}] {w.message}</div>)}
</div>
}
/>
)}
<Form layout="vertical">
{containers.map((c) => {
const role = roleOf(c)
if (role === 'master') return <MasterCard key={c.compId} container={c} values={master} setValues={setMaster} optionsMap={optionsMap} />
if (role === 'single') return <SingleCard key={c.compId} container={c} state={singles} setState={setSingles} optionsMap={optionsMap} />
return <TableCard key={c.compId} container={c} state={tables} setState={setTables} optionsMap={optionsMap} />
})}
</Form>
<Divider />
<Space>
<Button onClick={doPrecheck}>提交前预检（MetaRule 实时风控）</Button>
<Button type="primary" loading={submitting} onClick={doSubmit}>提交「{schema.sceneName}」</Button>
</Space>
</div>
)
}
// ---------- 字段标签（展示 M1 绑定溯源，强化"字段强绑定领域模型"） ----------
function FieldLabel({ comp }: { comp: DragComponent }) {
const fb = comp.fieldBind!
const path = `${fb.bindAggregateId}${fb.domainEntityName ? '.' + fb.domainEntityName : ''}.${fb.domainFieldName}`
return (
<span>
{fb.formLabel}
{fb.required && <Text type="danger"> *</Text>}
<Text type="secondary" style={{ fontSize: 11, marginLeft: 6 }}>[{fb.fieldType}]</Text>
{fb.masked && <Tag color="orange" style={{ marginLeft: 6, fontSize: 10 }}>脱敏</Tag>}
<div title={path} style={{ fontSize: 10, color: '#999', fontWeight: 400,
whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: '100%' }}>⇠ {path}</div>
</span>
)
}
function MasterCard({ container, values, setValues, optionsMap }: any) {
const children: DragComponent[] = container.childComponents || []
return (
<Card size="small" title={<b>{container.fieldBind?.formLabel}</b>} style={{ marginBottom: 12 }}>
<Row gutter={16}>
{children.map((ch) => (
<Col span={ch.span || 12} key={ch.compId}>
<Form.Item label={<FieldLabel comp={ch} />}>
<FieldControl comp={ch} value={values[ch.fieldBind!.domainFieldName]}
onChange={(v) => setValues((prev: any) => ({ ...prev, [ch.fieldBind!.domainFieldName]: v }))}
optionsMap={optionsMap} />
</Form.Item>
</Col>
))}
</Row>
</Card>
)
}
function SingleCard({ container, state, setState, optionsMap }: any) {
const entity = container.fieldBind?.domainEntityName
const children: DragComponent[] = container.childComponents || []
const values = state[entity] || {}
return (
<Card size="small" title={<b>{container.fieldBind?.formLabel}</b>} extra={<Tag>子实体 {entity}</Tag>} style={{ marginBottom: 12 }}>
<Row gutter={16}>
{children.map((ch) => (
<Col span={ch.span || 12} key={ch.compId}>
<Form.Item label={<FieldLabel comp={ch} />}>
<FieldControl comp={ch} value={values[ch.fieldBind!.domainFieldName]}
onChange={(v) => setState((prev: any) => ({ ...prev, [entity]: { ...prev[entity], [ch.fieldBind!.domainFieldName]: v } }))}
optionsMap={optionsMap} />
</Form.Item>
</Col>
))}
</Row>
</Card>
)
}
function TableCard({ container, state, setState, optionsMap }: any) {
const entity = container.fieldBind?.domainEntityName
const children: DragComponent[] = container.childComponents || []
const rows: Array<Record<string, any>> = state[entity] || []
const setCell = (idx: number, field: string, v: any) =>
setState((prev: any) => {
const next = [...(prev[entity] || [])]
next[idx] = { ...next[idx], [field]: v }
return { ...prev, [entity]: next }
})
const addRow = () => setState((prev: any) => ({ ...prev, [entity]: [...(prev[entity] || []), {}] }))
const delRow = (idx: number) => setState((prev: any) => ({ ...prev, [entity]: (prev[entity] || []).filter((_: any, i: number) => i !== idx) }))
const columns = [
...children.map((ch) => ({
title: <FieldLabel comp={ch} />,
key: ch.compId,
render: (_: any, __: any, idx: number) => (
<FieldControl comp={ch} value={rows[idx]?.[ch.fieldBind!.domainFieldName]}
onChange={(v) => setCell(idx, ch.fieldBind!.domainFieldName, v)} optionsMap={optionsMap} />
),
})),
{
title: '操作', key: '_op', width: 70,
render: (_: any, __: any, idx: number) => (
<Button danger size="small" icon={<DeleteOutlined />} onClick={() => delRow(idx)} />
),
},
]
return (
<Card size="small" title={<b>{container.fieldBind?.formLabel}</b>} extra={<Tag>子实体 {entity}（多行）</Tag>}
style={{ marginBottom: 12 }}>
<Table size="small" pagination={false} rowKey={(_, i) => String(i)}
dataSource={rows.map((r, i) => ({ ...r, _k: i }))} columns={columns as any}
locale={{ emptyText: <Empty description="暂无明细行" /> }} />
<Button type="dashed" block icon={<PlusOutlined />} style={{ marginTop: 8 }} onClick={addRow}>新增一行明细</Button>
</Card>
)
}