screen-module.jsx
10.7 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
// Module configuration screen — KPI process tree on left, dense form on right.
// Form fields mirror the structural pattern in 模块 1.png but with original copy.
const moduleSections = [
{
title: "估价管理流程", processes: [
{ id: "01", code: "01/04", label: "【新增】新报价单", active: true },
{ id: "02", code: "02/04", label: "审核报价单->客户确认->二次确认" },
{ id: "03", code: "03/04", label: "客户确认->二次确认" },
{ id: "04", code: "04/04", label: "报价单->销售订单" },
{ id: "05", code: "04/04", label: "报价单->转拼版单" },
{ id: "06", code: "04/07", label: "主管审核报价单" },
{ id: "07", code: "05/07", label: "业务确认报价单" },
],
},
{ title: "订单生产流程", collapsed: true },
{ title: "自动拼版流程", collapsed: true },
{ title: "销售送货流程", collapsed: true },
{ title: "物料采购流程", collapsed: true },
{ title: "物料领用流程", collapsed: true },
{ title: "发外加工流程", collapsed: true },
{ title: "质量管理流程", collapsed: true },
{ title: "财务收付款流程", collapsed: true },
];
const ModuleScreen = () => {
const [mode, setMode] = React.useState("view"); // 'view' | 'edit'
const [activeProcess] = React.useState("01");
const initial = {
displayCategory: "印刷业务",
deptEn: "Pricing Personnel",
deptCn: "报价员",
permissionVisible: true,
seq: "1",
saveProc: "Sp_Check_sQtt",
storageUrl: "/indexPage/quotationPackTl...",
showOpt: false,
nodes: "-1752556899000998290E",
deptId: "",
flowId: "20250303094458291296...",
uniqueId: "10125124011501607650...",
flowEnName: "",
flowReqName: "",
titleCn: "01/04【新增】新报价单",
mobileLogo: "",
nameEn: "Quotation Document",
nameNotice: "常规产品报价单据",
showCategory: "待处理",
deptManager: "报价人员",
storeProc: "Sp_Calc_sQtt",
quickShow: "",
addId: "",
modType: "quotation/quotation/quotati",
calcProc: "Sp_Quotation_CalcDataPac",
saveAfterProc: "Sp_beforeSave_sQtt",
parent: "1752562484000281572E",
};
const [form, setForm] = React.useState(initial);
const set = (k, v) => setForm((s) => ({ ...s, [k]: v }));
const startEdit = () => setMode("edit");
const save = () => { setMode("view"); };
const cancel = () => { setForm(initial); setMode("view"); };
const disabled = mode === "view";
return (
<div style={{ display: "flex", flexDirection: "column", height: "100%", background: "var(--bg-app)" }}>
{/* Light blue toolbar */}
<div style={{
display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap", rowGap: 6,
padding: "6px 8px", background: "#eaf1f7",
borderBottom: "1px solid var(--border)", flex: "none",
}}>
<ToolbarBtnLight icon={<Ic.plus size={12} />} primary disabled={mode === "edit"}>添加节点</ToolbarBtnLight>
<ToolbarBtnLight icon={<Ic.plus size={12} />} primary disabled={mode === "edit"}>添加子节点</ToolbarBtnLight>
<ToolbarBtnLight icon={<Ic.edit size={12} />} primary disabled={mode === "edit"} onClick={startEdit}>修 改</ToolbarBtnLight>
<ToolbarBtnLight icon={<Ic.clipboard size={12} />} primary disabled={mode === "edit"}>复制节点</ToolbarBtnLight>
<ToolbarBtnLight icon={<Ic.save size={12} />} success disabled={mode !== "edit"} onClick={save}>保 存</ToolbarBtnLight>
<ToolbarBtnLight icon={<Ic.cancel size={12} />} disabled={mode !== "edit"} onClick={cancel}>取 消</ToolbarBtnLight>
<ToolbarBtnLight icon={<Ic.trash size={12} />} danger disabled={mode === "edit"}>删除节点</ToolbarBtnLight>
<div style={{ flex: 1 }} />
<ToolbarBtnLight icon={<Ic.settings size={12} />} primary>生成监听器单</ToolbarBtnLight>
</div>
{/* Body: form only (tree lives in main sidebar) */}
<div style={{ flex: 1, display: "flex", overflow: "hidden", minHeight: 0 }}>
{/* Form panel */}
<div style={{ flex: 1, overflow: "auto", padding: 12, minWidth: 0 }}>
<div style={{
display: "grid",
gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
rowGap: 8, columnGap: 14,
background: "#fff", padding: "14px 14px 16px",
border: "1px solid var(--border)",
}}>
<Field label="显示类别(默认)" required>
<Select value={form.displayCategory} onChange={(v) => set("displayCategory", v)} disabled={disabled} required options={["印刷业务", "包装业务", "物流业务", "数码印刷"]} />
</Field>
<Field label="所有节点ID">
<Input value={form.nodes} disabled mono />
</Field>
<Field label="存储过程(算)">
<Input value={form.storeProc} onChange={(v) => set("storeProc", v)} disabled={disabled} mono />
</Field>
<Field label="模块类型">
<Input value={form.modType} onChange={(v) => set("modType", v)} disabled={disabled} mono />
</Field>
<Field label="管理部门英文">
<Input value={form.deptEn} onChange={(v) => set("deptEn", v)} disabled={disabled} />
</Field>
<Field label="管理部门ID">
<Input value={form.deptId} onChange={(v) => set("deptId", v)} disabled={disabled} mono />
</Field>
<Field label="快速下单显示">
<Select value={form.quickShow} onChange={(v) => set("quickShow", v)} disabled={disabled} options={["显示", "隐藏"]} />
</Field>
<Field label="加载ID">
<Input value={form.addId} onChange={(v) => set("addId", v)} disabled={disabled} mono />
</Field>
<Field label="权限是否显示" required>
<div style={{ flex: 1, height: "var(--input-h)", display: "flex", alignItems: "center", paddingLeft: 4, background: !disabled ? "#fff8e1" : "transparent", border: "1px solid var(--border-input)" }}>
<Checkbox checked={form.permissionVisible} onChange={(v) => set("permissionVisible", v)} disabled={disabled} />
</div>
</Field>
<Field label="流程ID">
<Input value={form.flowId} disabled mono />
</Field>
<Field label="流程名称">
<Select value={form.flowEnName} onChange={(v) => set("flowEnName", v)} disabled={disabled} options={["主流程", "子流程"]} />
</Field>
<Field label="流程英文名称">
<Input value={form.flowReqName} onChange={(v) => set("flowReqName", v)} disabled={disabled} />
</Field>
<Field label="序号" required>
<Input value={form.seq} onChange={(v) => set("seq", v)} disabled={disabled} required />
</Field>
<Field label="唯一ID">
<Input value={form.uniqueId} disabled mono />
</Field>
<Field label="计算过程名">
<Input value={form.calcProc} onChange={(v) => set("calcProc", v)} disabled={disabled} mono />
</Field>
<Field label="保存前校验过...">
<Input value={form.saveAfterProc} onChange={(v) => set("saveAfterProc", v)} disabled={disabled} mono />
</Field>
<Field label="保存过程名">
<Input value={form.saveProc} onChange={(v) => set("saveProc", v)} disabled={disabled} mono />
</Field>
<Field label="界面名中文">
<Input value={form.titleCn} onChange={(v) => set("titleCn", v)} disabled={disabled} />
</Field>
<Field label="删除过程名">
<Input value={form.deleteProc || ""} onChange={(v) => set("deleteProc", v)} disabled={disabled} mono />
</Field>
<Field label="父级">
<Input value={form.parent} disabled mono />
</Field>
<Field label="存储页面URL路...">
<Input value={form.storageUrl} onChange={(v) => set("storageUrl", v)} disabled={disabled} mono />
</Field>
<Field label="手机端LOGO">
<Input value={form.mobileLogo} onChange={(v) => set("mobileLogo", v)} disabled={disabled} />
</Field>
<Field label="界面名英文">
<Input value={form.nameEn} onChange={(v) => set("nameEn", v)} disabled={disabled} />
</Field>
<Field label="界面名备注">
<Input value={form.nameNotice} onChange={(v) => set("nameNotice", v)} disabled={disabled} />
</Field>
<Field label="是否显示">
<div style={{ flex: 1, height: "var(--input-h)", display: "flex", alignItems: "center", paddingLeft: 4, border: "1px solid var(--border-input)", background: disabled ? "var(--bg-disabled)" : "var(--bg-input)" }}>
<Checkbox checked={form.showOpt} onChange={(v) => set("showOpt", v)} disabled={disabled} />
</div>
</Field>
<Field label="是否消息通知">
<Select value={form.notice || ""} onChange={(v) => set("notice", v)} disabled={disabled} options={["开启", "关闭"]} />
</Field>
<Field label="显示类型">
<Select value={form.showCategory} onChange={(v) => set("showCategory", v)} disabled={disabled} options={["待处理", "已处理", "全部"]} />
</Field>
<Field label="管理部门">
<Select value={form.deptManager} onChange={(v) => set("deptManager", v)} disabled={disabled} options={["报价人员", "业务员", "主管", "财务"]} />
</Field>
<div style={{ gridColumn: "1 / -1", display: "flex", gap: 8, marginTop: 4, paddingTop: 8, borderTop: "1px dashed var(--border)" }}>
<ToolbarBtnLight icon={<Ic.import size={12} />} disabled={disabled}>上传</ToolbarBtnLight>
<span style={{ fontSize: 11, color: "var(--text-faint)", lineHeight: "26px" }}>
关联文件（PDF / 图片，≤ 5 MB）
</span>
</div>
</div>
<div style={{ marginTop: 8, padding: "6px 12px", background: "#fff", border: "1px solid var(--border)", fontSize: 11, color: "var(--text-muted)", display: "flex", justifyContent: "space-between" }}>
<span>当前节点：{activeProcess} 【新增】新报价单</span>
<span>状态：<span style={{ color: mode === "edit" ? "var(--warning)" : "var(--success)", fontWeight: 500 }}>{mode === "edit" ? "编辑中" : "只读"}</span></span>
</div>
</div>
</div>
</div>
);
};
window.ModuleScreen = ModuleScreen;