forked from wangziqi/gongxue-base
780 lines
24 KiB
TypeScript
780 lines
24 KiB
TypeScript
import React, { useEffect, useRef, useState } from 'react';
|
||
import { Button, Form, Input, Modal, Popconfirm, Select, Spin, Steps, Tag, Typography } from 'antd';
|
||
import {
|
||
CloudUploadOutlined,
|
||
DeleteOutlined,
|
||
EditOutlined,
|
||
LinkOutlined,
|
||
PlusOutlined,
|
||
SaveOutlined,
|
||
SearchOutlined,
|
||
} from '@ant-design/icons';
|
||
import api from '../api';
|
||
import { message } from '../ui/app-message';
|
||
import { usePermission } from '../hooks/usePermission';
|
||
import PermissionButton from './PermissionButton';
|
||
|
||
const { Text } = Typography;
|
||
|
||
// ── Types ──
|
||
|
||
interface JinshujuEntryRow {
|
||
serialNumber: number;
|
||
name: string;
|
||
phone: string | null;
|
||
suggestedStudent: {
|
||
id: number;
|
||
name: string;
|
||
phone: string | null;
|
||
studentNo: string | null;
|
||
} | null;
|
||
}
|
||
|
||
interface StudentOption {
|
||
id: number;
|
||
name: string;
|
||
phone: string | null;
|
||
studentNo: string | null;
|
||
}
|
||
|
||
interface PreviewResponse {
|
||
success: boolean;
|
||
entries: JinshujuEntryRow[];
|
||
students: StudentOption[];
|
||
}
|
||
|
||
interface MatchRule {
|
||
id: number;
|
||
name: string;
|
||
formToken: string;
|
||
mappings: Record<string, string>;
|
||
createdAt: string;
|
||
}
|
||
|
||
interface JinshujuFormField {
|
||
key: string;
|
||
label: string;
|
||
type: string;
|
||
}
|
||
|
||
type MatchDecision =
|
||
| { action: 'match'; matchStudentId: number }
|
||
| { action: 'create'; createName: string; createPhone: string }
|
||
| { action: 'skip' };
|
||
|
||
// ── Constants ──
|
||
|
||
const ROW_HEIGHT = 72;
|
||
const LEFT_WIDTH = 260;
|
||
const GAP = 80;
|
||
|
||
const STUDENT_FIELDS = [
|
||
{ key: 'name', label: '姓名' },
|
||
{ key: 'phone', label: '手机号' },
|
||
{ key: 'idNumber', label: '身份证号' },
|
||
{ key: 'gender', label: '性别' },
|
||
{ key: 'ethnicity', label: '民族' },
|
||
{ key: 'emergencyContact', label: '紧急联系人' },
|
||
{ key: 'emergencyPhone', label: '紧急联系电话' },
|
||
{ key: 'studentNo', label: '学号' },
|
||
];
|
||
|
||
// ── MatchSelector sub-component ──
|
||
|
||
interface MatchSelectorProps {
|
||
entry: JinshujuEntryRow;
|
||
decision: MatchDecision | undefined;
|
||
studentOptions: StudentOption[];
|
||
onChange: (d: MatchDecision) => void;
|
||
}
|
||
|
||
const MatchSelector: React.FC<MatchSelectorProps> = ({
|
||
entry,
|
||
decision,
|
||
studentOptions,
|
||
onChange,
|
||
}) => {
|
||
const action = decision?.action ?? 'skip';
|
||
|
||
if (action === 'match') {
|
||
const matchD = decision as { action: 'match'; matchStudentId: number };
|
||
const matchedStudent = studentOptions.find((s) => s.id === matchD.matchStudentId);
|
||
return (
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%' }}>
|
||
<Tag color="blue" icon={<LinkOutlined />}>
|
||
已匹配
|
||
</Tag>
|
||
<Text style={{ flex: 1 }}>
|
||
{matchedStudent?.name ?? '未知'}
|
||
{matchedStudent?.studentNo && (
|
||
<Text type="secondary" style={{ fontSize: 12, marginLeft: 4 }}>
|
||
({matchedStudent.studentNo})
|
||
</Text>
|
||
)}
|
||
</Text>
|
||
<Button size="small" type="link" danger onClick={() => onChange({ action: 'skip' })}>
|
||
取消
|
||
</Button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (action === 'create') {
|
||
const createD = decision as { action: 'create'; createName: string; createPhone: string };
|
||
return (
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%' }}>
|
||
<Tag color="green" icon={<PlusOutlined />}>
|
||
将新建
|
||
</Tag>
|
||
<Input
|
||
size="small"
|
||
value={createD.createName}
|
||
placeholder="姓名"
|
||
style={{ width: 100 }}
|
||
onChange={(e) =>
|
||
onChange({
|
||
action: 'create',
|
||
createName: e.target.value,
|
||
createPhone: createD.createPhone,
|
||
})
|
||
}
|
||
/>
|
||
<Input
|
||
size="small"
|
||
value={createD.createPhone}
|
||
placeholder="手机号"
|
||
style={{ width: 120 }}
|
||
onChange={(e) =>
|
||
onChange({
|
||
action: 'create',
|
||
createName: createD.createName,
|
||
createPhone: e.target.value,
|
||
})
|
||
}
|
||
/>
|
||
<Button size="small" type="link" danger onClick={() => onChange({ action: 'skip' })}>
|
||
取消
|
||
</Button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%' }}>
|
||
<Select
|
||
showSearch
|
||
size="small"
|
||
placeholder="搜索学生…"
|
||
style={{ flex: 1 }}
|
||
value={undefined}
|
||
filterOption={(input, option) =>
|
||
((option?.label as string) || '').toLowerCase().includes(input.toLowerCase())
|
||
}
|
||
options={studentOptions.map((s) => ({
|
||
value: s.id,
|
||
label: `${s.name}${s.phone ? ` (${s.phone})` : ''}${s.studentNo ? ` [${s.studentNo}]` : ''}`,
|
||
}))}
|
||
onChange={(studentId: number) => onChange({ action: 'match', matchStudentId: studentId })}
|
||
/>
|
||
<Button
|
||
size="small"
|
||
type="dashed"
|
||
icon={<PlusOutlined />}
|
||
onClick={() =>
|
||
onChange({
|
||
action: 'create',
|
||
createName: entry.name || '',
|
||
createPhone: entry.phone || '',
|
||
})
|
||
}
|
||
>
|
||
新建
|
||
</Button>
|
||
<Button size="small" type="link" onClick={() => onChange({ action: 'skip' })}>
|
||
跳过
|
||
</Button>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// ── Rule Editor sub-component ──
|
||
|
||
interface RuleEditorProps {
|
||
rule: MatchRule | null;
|
||
formToken: string;
|
||
fields: JinshujuFormField[];
|
||
onSave: () => void;
|
||
onDelete: (id: number) => void;
|
||
onCancel: () => void;
|
||
}
|
||
|
||
const RuleEditor: React.FC<RuleEditorProps> = ({
|
||
rule,
|
||
formToken,
|
||
fields,
|
||
onSave,
|
||
onDelete,
|
||
onCancel,
|
||
}) => {
|
||
const [name, setName] = useState(rule?.name ?? '');
|
||
const [mappings, setMappings] = useState<Record<string, string>>(
|
||
rule?.mappings ?? { name: 'field_1', phone: 'field_2' },
|
||
);
|
||
const [saving, setSaving] = useState(false);
|
||
|
||
const handleSave = async () => {
|
||
if (!name.trim()) {
|
||
message.warning('请输入规则名称');
|
||
return;
|
||
}
|
||
setSaving(true);
|
||
try {
|
||
if (rule) {
|
||
await api.put(`/sync/jinshuju/rules/${rule.id}`, { name, mappings });
|
||
} else {
|
||
await api.post('/sync/jinshuju/rules', { name, formToken, mappings });
|
||
}
|
||
message.success('规则已保存');
|
||
onSave();
|
||
} catch (e: unknown) {
|
||
const err = e as { message?: string };
|
||
if (err?.message) message.error(err.message);
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div style={{ padding: '12px 0' }}>
|
||
<Input
|
||
placeholder="规则名称"
|
||
value={name}
|
||
onChange={(e) => setName(e.target.value)}
|
||
style={{ marginBottom: 12 }}
|
||
/>
|
||
<Text type="secondary" style={{ display: 'block', marginBottom: 8 }}>
|
||
选择金数据字段映射到学生资料
|
||
</Text>
|
||
{STUDENT_FIELDS.map((sf) => (
|
||
<div
|
||
key={sf.key}
|
||
style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}
|
||
>
|
||
<Text style={{ width: 100, textAlign: 'right', fontSize: 13 }}>{sf.label}</Text>
|
||
<Text type="secondary" style={{ fontSize: 12 }}>
|
||
←
|
||
</Text>
|
||
<Select
|
||
allowClear
|
||
showSearch
|
||
optionFilterProp="label"
|
||
placeholder="选择金数据字段"
|
||
value={mappings[sf.key]}
|
||
style={{ flex: 1 }}
|
||
options={fields.map((field) => ({
|
||
value: field.key,
|
||
label: `${field.label}（${field.key}）`,
|
||
}))}
|
||
onChange={(value) =>
|
||
setMappings((prev) => {
|
||
const next = { ...prev };
|
||
if (value) next[sf.key] = value;
|
||
else delete next[sf.key];
|
||
return next;
|
||
})
|
||
}
|
||
/>
|
||
</div>
|
||
))}
|
||
<div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
|
||
<Button type="primary" icon={<SaveOutlined />} loading={saving} onClick={handleSave}>
|
||
保存
|
||
</Button>
|
||
{rule && (
|
||
<Popconfirm title="确定删除此规则？" onConfirm={() => onDelete(rule.id)}>
|
||
<Button danger icon={<DeleteOutlined />}>
|
||
删除
|
||
</Button>
|
||
</Popconfirm>
|
||
)}
|
||
<Button onClick={onCancel}>取消</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// ── Main MatchModal ──
|
||
|
||
interface MatchModalProps {
|
||
open: boolean;
|
||
onClose: () => void;
|
||
onApplied: () => void;
|
||
}
|
||
|
||
const JinshujuMatchModal: React.FC<MatchModalProps> = ({ open, onClose, onApplied }) => {
|
||
const { hasPermission, hasAllPermissions, permissionsReady } = usePermission();
|
||
const canTriggerSync = hasPermission('sync:trigger');
|
||
const canEnterModal = permissionsReady && hasAllPermissions('sync:read', 'sync:trigger');
|
||
const [step, setStep] = useState<'connection' | 'rule' | 'match' | 'applying'>('connection');
|
||
const [loading, setLoading] = useState(false);
|
||
const [selectedRuleId, setSelectedRuleId] = useState<number | undefined>();
|
||
const [rules, setRules] = useState<MatchRule[]>([]);
|
||
const [editingRule, setEditingRule] = useState<MatchRule | null>(null);
|
||
const [showRuleEditor, setShowRuleEditor] = useState(false);
|
||
const [credForm] = Form.useForm();
|
||
const formToken = Form.useWatch('formToken', credForm) ?? '';
|
||
|
||
const [entries, setEntries] = useState<JinshujuEntryRow[]>([]);
|
||
const [studentOptions, setStudentOptions] = useState<StudentOption[]>([]);
|
||
const [decisions, setDecisions] = useState<Map<number, MatchDecision>>(new Map());
|
||
const leftRef = useRef<HTMLDivElement>(null);
|
||
const rightRef = useRef<HTMLDivElement>(null);
|
||
const [formFields, setFormFields] = useState<JinshujuFormField[]>([]);
|
||
const [formName, setFormName] = useState('');
|
||
const [scrollTop, setScrollTop] = useState(0);
|
||
|
||
// Load rules on open
|
||
useEffect(() => {
|
||
if (open && canEnterModal) loadRules();
|
||
}, [open, canEnterModal]);
|
||
|
||
// Close and reset when permission is lost
|
||
const enteredRef = useRef(false);
|
||
useEffect(() => {
|
||
if (canEnterModal) {
|
||
enteredRef.current = true;
|
||
return;
|
||
}
|
||
if (enteredRef.current) {
|
||
enteredRef.current = false;
|
||
reset();
|
||
onClose();
|
||
}
|
||
}, [canEnterModal, onClose]);
|
||
|
||
const loadRules = async () => {
|
||
try {
|
||
const res = await api.get<{ success: boolean; data: MatchRule[] }>('/sync/jinshuju/rules');
|
||
if (res.success) setRules(res.data);
|
||
} catch {
|
||
/* ignore */
|
||
}
|
||
};
|
||
|
||
const handleConnectionNext = async () => {
|
||
if (!canTriggerSync) return;
|
||
try {
|
||
const values = await credForm.validateFields();
|
||
setLoading(true);
|
||
const response = await api.post<{
|
||
success: boolean;
|
||
data: { name: string; fields: JinshujuFormField[] };
|
||
}>('/sync/jinshuju/fields', values);
|
||
setFormFields(response.data.fields);
|
||
setFormName(response.data.name);
|
||
setStep('rule');
|
||
} catch (error: unknown) {
|
||
const apiError = error as { message?: string; errorFields?: unknown[] };
|
||
if (!apiError.errorFields && apiError.message) message.error(apiError.message);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const handlePreview = async () => {
|
||
if (!canTriggerSync) return;
|
||
try {
|
||
const values = await credForm.validateFields();
|
||
setLoading(true);
|
||
const body: Record<string, unknown> = { ...values };
|
||
if (selectedRuleId) body.ruleId = selectedRuleId;
|
||
const res = await api.post<PreviewResponse>('/sync/jinshuju/preview', body);
|
||
if (!res.success) throw new Error('预览失败');
|
||
setEntries(res.entries);
|
||
setStudentOptions(res.students);
|
||
const initial = new Map<number, MatchDecision>();
|
||
for (const entry of res.entries) {
|
||
if (entry.suggestedStudent) {
|
||
initial.set(entry.serialNumber, {
|
||
action: 'match',
|
||
matchStudentId: entry.suggestedStudent.id,
|
||
});
|
||
}
|
||
}
|
||
setDecisions(initial);
|
||
setStep('match');
|
||
} catch (e: unknown) {
|
||
const err = e as { message?: string };
|
||
if (err?.message) message.error(err.message);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleApply = async () => {
|
||
if (!canTriggerSync) return;
|
||
setLoading(true);
|
||
setStep('applying');
|
||
try {
|
||
const decisionList = [...decisions.entries()].map(([serialNumber, d]) => ({
|
||
serialNumber,
|
||
...d,
|
||
}));
|
||
const body: Record<string, unknown> = {
|
||
...credForm.getFieldsValue(),
|
||
decisions: decisionList,
|
||
};
|
||
if (selectedRuleId) body.ruleId = selectedRuleId;
|
||
const res = await api.post<{
|
||
success: boolean;
|
||
log: { recordsCount: number; message?: string };
|
||
}>('/sync/jinshuju/apply', body);
|
||
if (res.success) {
|
||
message.success(res.log.message || `处理 ${res.log.recordsCount} 条记录`);
|
||
onApplied();
|
||
reset();
|
||
}
|
||
} catch (e: unknown) {
|
||
const err = e as { message?: string };
|
||
if (err?.message) message.error(err.message);
|
||
setStep('match');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const reset = () => {
|
||
setStep('connection');
|
||
setEntries([]);
|
||
setStudentOptions([]);
|
||
setDecisions(new Map());
|
||
setSelectedRuleId(undefined);
|
||
setFormFields([]);
|
||
setFormName('');
|
||
setShowRuleEditor(false);
|
||
credForm.resetFields();
|
||
};
|
||
|
||
const handleClose = () => {
|
||
reset();
|
||
onClose();
|
||
};
|
||
const handleScroll = (source: 'left' | 'right') => {
|
||
const el = source === 'left' ? leftRef.current : rightRef.current;
|
||
if (el) setScrollTop(el.scrollTop);
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (leftRef.current) leftRef.current.scrollTop = scrollTop;
|
||
if (rightRef.current) rightRef.current.scrollTop = scrollTop;
|
||
}, [scrollTop]);
|
||
|
||
const getDecision = (serial: number): MatchDecision | undefined => decisions.get(serial);
|
||
const setDecision = (serial: number, d: MatchDecision) =>
|
||
setDecisions((prev) => new Map(prev).set(serial, d));
|
||
const total = entries.length;
|
||
const matched = [...decisions.values()].filter((d) => d.action !== 'skip').length;
|
||
|
||
const visibleRules = rules.filter((rule) => rule.formToken === formToken);
|
||
const selectedRule = visibleRules.find((rule) => rule.id === selectedRuleId) ?? null;
|
||
|
||
// ── Render ──
|
||
|
||
const renderConnectionStep = () => (
|
||
<Form form={credForm} layout="vertical" style={{ marginTop: 24 }}>
|
||
<Form.Item
|
||
name="apiKey"
|
||
label="API Key"
|
||
extra="金数据个人中心 → API 中获取"
|
||
rules={[{ required: true, message: '请输入 API Key' }]}
|
||
>
|
||
<Input placeholder="请输入 API Key" autoComplete="username" />
|
||
</Form.Item>
|
||
<Form.Item
|
||
name="apiSecret"
|
||
label="API Secret"
|
||
rules={[{ required: true, message: '请输入 API Secret' }]}
|
||
>
|
||
<Input.Password placeholder="请输入 API Secret" autoComplete="current-password" />
|
||
</Form.Item>
|
||
<Form.Item
|
||
name="formToken"
|
||
label="表单 Token"
|
||
extra="例如表单地址 /f/AbC123 中的 AbC123"
|
||
rules={[{ required: true, message: '请输入表单 Token' }]}
|
||
>
|
||
<Input placeholder="请输入表单 Token" />
|
||
</Form.Item>
|
||
</Form>
|
||
);
|
||
|
||
const renderRuleStep = () => (
|
||
<div style={{ marginTop: 24 }}>
|
||
<div style={{ marginBottom: 12 }}>
|
||
<Text strong>选择匹配规则</Text>
|
||
<Text type="secondary" style={{ display: 'block', marginTop: 4 }}>
|
||
已连接表单「{formName}」，共 {formFields.length} 个字段。选择已有规则或新建字段映射。
|
||
</Text>
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
||
<Select
|
||
style={{ flex: 1 }}
|
||
placeholder="默认规则：field_1 → 姓名，field_2 → 手机号"
|
||
allowClear
|
||
value={selectedRuleId}
|
||
onChange={(value) => setSelectedRuleId(value)}
|
||
options={visibleRules.map((rule) => ({ value: rule.id, label: rule.name }))}
|
||
/>
|
||
{canTriggerSync && selectedRule ? (
|
||
<Button
|
||
icon={<EditOutlined />}
|
||
onClick={() => {
|
||
setEditingRule(selectedRule);
|
||
setShowRuleEditor(true);
|
||
}}
|
||
>
|
||
编辑
|
||
</Button>
|
||
) : null}
|
||
{canTriggerSync ? (
|
||
<Button
|
||
icon={<PlusOutlined />}
|
||
onClick={() => {
|
||
setEditingRule(null);
|
||
setShowRuleEditor(true);
|
||
}}
|
||
>
|
||
新建规则
|
||
</Button>
|
||
) : null}
|
||
</div>
|
||
|
||
{visibleRules.length === 0 && !showRuleEditor ? (
|
||
<Text type="secondary" style={{ display: 'block', marginTop: 12 }}>
|
||
当前表单还没有保存的规则。
|
||
</Text>
|
||
) : null}
|
||
|
||
{canTriggerSync && showRuleEditor ? (
|
||
<RuleEditor
|
||
rule={editingRule}
|
||
formToken={formToken}
|
||
fields={formFields}
|
||
onSave={() => {
|
||
setShowRuleEditor(false);
|
||
loadRules();
|
||
}}
|
||
onDelete={async (id) => {
|
||
await api.delete(`/sync/jinshuju/rules/${id}`);
|
||
message.success('规则已删除');
|
||
if (selectedRuleId === id) setSelectedRuleId(undefined);
|
||
setShowRuleEditor(false);
|
||
loadRules();
|
||
}}
|
||
onCancel={() => setShowRuleEditor(false)}
|
||
/>
|
||
) : null}
|
||
</div>
|
||
);
|
||
|
||
const renderMatchStep = () => {
|
||
const svgHeight = entries.length * ROW_HEIGHT;
|
||
const lines: React.ReactNode[] = [];
|
||
entries.forEach((entry, i) => {
|
||
const y = i * ROW_HEIGHT + ROW_HEIGHT / 2;
|
||
const d = getDecision(entry.serialNumber);
|
||
const isMatched = d?.action === 'match';
|
||
const color = isMatched ? '#1677ff' : '#d9d9d9';
|
||
lines.push(
|
||
<line
|
||
key={entry.serialNumber}
|
||
x1={LEFT_WIDTH}
|
||
y1={y}
|
||
x2={LEFT_WIDTH + GAP}
|
||
y2={y}
|
||
stroke={color}
|
||
strokeWidth={isMatched ? 2 : 1}
|
||
strokeDasharray={isMatched ? undefined : '4 4'}
|
||
opacity={isMatched ? 0.7 : 0.3}
|
||
/>,
|
||
);
|
||
});
|
||
|
||
return (
|
||
<div style={{ position: 'relative' }}>
|
||
<div
|
||
style={{
|
||
marginBottom: 12,
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
}}
|
||
>
|
||
<Text type="secondary">
|
||
共 {total} 条，已匹配 {matched} 条
|
||
</Text>
|
||
<Button size="small" onClick={() => setDecisions(new Map())}>
|
||
清除全部匹配
|
||
</Button>
|
||
</div>
|
||
<div style={{ display: 'flex', position: 'relative' }}>
|
||
<svg
|
||
style={{
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
width: LEFT_WIDTH + GAP,
|
||
height: svgHeight,
|
||
pointerEvents: 'none',
|
||
zIndex: 1,
|
||
}}
|
||
>
|
||
{lines}
|
||
</svg>
|
||
<div
|
||
ref={leftRef}
|
||
onScroll={() => handleScroll('left')}
|
||
style={{ width: LEFT_WIDTH, maxHeight: 480, overflowY: 'auto', flexShrink: 0 }}
|
||
>
|
||
{entries.map((entry, i) => {
|
||
const d = getDecision(entry.serialNumber);
|
||
const isMatched = d?.action === 'match';
|
||
return (
|
||
<div
|
||
key={entry.serialNumber}
|
||
style={{
|
||
height: ROW_HEIGHT,
|
||
padding: '8px 12px',
|
||
borderBottom: '1px solid #f0f0f0',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
justifyContent: 'center',
|
||
background: isMatched ? '#f6ffed' : i % 2 === 0 ? '#fafafa' : '#fff',
|
||
borderLeft: isMatched ? '3px solid #1677ff' : '3px solid transparent',
|
||
}}
|
||
>
|
||
<Text strong style={{ fontSize: 13 }}>
|
||
{entry.name || <Text type="secondary">无姓名</Text>}
|
||
</Text>
|
||
{entry.phone && (
|
||
<Text type="secondary" style={{ fontSize: 12 }}>
|
||
{entry.phone}
|
||
</Text>
|
||
)}
|
||
<Text type="secondary" style={{ fontSize: 11 }}>
|
||
#{entry.serialNumber}
|
||
</Text>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
<div style={{ width: GAP, flexShrink: 0 }} />
|
||
<div
|
||
ref={rightRef}
|
||
onScroll={() => handleScroll('right')}
|
||
style={{ flex: 1, maxHeight: 480, overflowY: 'auto' }}
|
||
>
|
||
{entries.map((entry) => (
|
||
<div
|
||
key={entry.serialNumber}
|
||
style={{
|
||
height: ROW_HEIGHT,
|
||
padding: '8px 12px',
|
||
borderBottom: '1px solid #f0f0f0',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: 8,
|
||
}}
|
||
>
|
||
<MatchSelector
|
||
entry={entry}
|
||
decision={getDecision(entry.serialNumber)}
|
||
studentOptions={studentOptions}
|
||
onChange={(newD) => setDecision(entry.serialNumber, newD)}
|
||
/>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const currentStep = step === 'connection' ? 0 : step === 'rule' ? 1 : 2;
|
||
|
||
return (
|
||
<Modal
|
||
title="同步金数据"
|
||
open={open && canEnterModal}
|
||
onCancel={handleClose}
|
||
width={step === 'match' || step === 'applying' ? 900 : 640}
|
||
maskClosable={false}
|
||
footer={
|
||
step === 'connection'
|
||
? [
|
||
<Button key="cancel" onClick={handleClose}>
|
||
取消
|
||
</Button>,
|
||
<Button key="next" type="primary" onClick={handleConnectionNext}>
|
||
下一步
|
||
</Button>,
|
||
]
|
||
: step === 'rule'
|
||
? [
|
||
<Button key="back" onClick={() => setStep('connection')}>
|
||
上一步
|
||
</Button>,
|
||
<Button key="cancel" onClick={handleClose}>
|
||
取消
|
||
</Button>,
|
||
<Button
|
||
key="next"
|
||
type="primary"
|
||
icon={<SearchOutlined />}
|
||
loading={loading}
|
||
onClick={handlePreview}
|
||
>
|
||
获取数据并下一步
|
||
</Button>,
|
||
]
|
||
: step === 'match'
|
||
? [
|
||
<Button key="back" onClick={() => setStep('rule')}>
|
||
上一步
|
||
</Button>,
|
||
<Button key="cancel" onClick={handleClose}>
|
||
取消
|
||
</Button>,
|
||
canTriggerSync ? (
|
||
<PermissionButton
|
||
key="apply"
|
||
permission="sync:trigger"
|
||
type="primary"
|
||
icon={<CloudUploadOutlined />}
|
||
loading={loading}
|
||
onClick={handleApply}
|
||
>
|
||
应用匹配
|
||
</PermissionButton>
|
||
) : null,
|
||
]
|
||
: null
|
||
}
|
||
>
|
||
<Steps
|
||
current={currentStep}
|
||
items={[{ title: '连接表单' }, { title: '匹配规则' }, { title: '确认匹配' }]}
|
||
/>
|
||
{step === 'connection' ? renderConnectionStep() : null}
|
||
{step === 'rule' ? renderRuleStep() : null}
|
||
{step === 'match' ? renderMatchStep() : null}
|
||
{step === 'applying' ? (
|
||
<Spin tip="正在同步..." style={{ display: 'block', margin: '48px auto' }} />
|
||
) : null}
|
||
</Modal>
|
||
);
|
||
};
|
||
|
||
export default JinshujuMatchModal;
|