feat: 重构各业务模块管理页面与服务
This commit is contained in:
@@ -1,310 +1,28 @@
|
||||
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 React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { useImmer } from 'use-immer';
|
||||
import { Button, Form, Input, Modal, Select, Spin, Steps, Typography } from 'antd';
|
||||
import { CloudUploadOutlined, EditOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons';
|
||||
import api from '../api';
|
||||
import { message } from '../ui/app-message';
|
||||
import { usePermission } from '../hooks/usePermission';
|
||||
import PermissionButton from './PermissionButton';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useApiMutation } from '../hooks/useApiMutation';
|
||||
import { validateResponse } from '../utils/validate';
|
||||
import { jinshujuRulesSchema } from '../api/schemas';
|
||||
import MatchStep from './MatchStep';
|
||||
import RuleEditor from './RuleEditor';
|
||||
import type {
|
||||
JinshujuEntryRow,
|
||||
JinshujuFormField,
|
||||
MatchDecision,
|
||||
MatchRule,
|
||||
PreviewResponse,
|
||||
StudentOption,
|
||||
} from './JinshujuMatchModal.types';
|
||||
|
||||
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;
|
||||
@@ -318,7 +36,6 @@ const JinshujuMatchModal: React.FC<MatchModalProps> = ({ open, onClose, onApplie
|
||||
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();
|
||||
@@ -326,40 +43,35 @@ const JinshujuMatchModal: React.FC<MatchModalProps> = ({ open, onClose, onApplie
|
||||
|
||||
const [entries, setEntries] = useState<JinshujuEntryRow[]>([]);
|
||||
const [studentOptions, setStudentOptions] = useState<StudentOption[]>([]);
|
||||
const [decisions, setDecisions] = useState<Map<number, MatchDecision>>(new Map());
|
||||
const [decisions, setDecisions] = useImmer<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 {
|
||||
data: rules = [],
|
||||
refetch: refetchRules,
|
||||
} = useQuery<MatchRule[]>({
|
||||
queryKey: ['sync', 'jinshuju', 'rules'],
|
||||
enabled: open && canEnterModal,
|
||||
queryFn: async () => {
|
||||
try {
|
||||
const res = await api.get<{ success: boolean; data: MatchRule[] }>(
|
||||
'/sync/jinshuju/rules',
|
||||
);
|
||||
return res.success ? validateResponse<MatchRule[]>(jinshujuRulesSchema, res.data) : [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
});
|
||||
const loadRules = useCallback(() => refetchRules(), [refetchRules]);
|
||||
const deleteRuleMutation = useApiMutation(
|
||||
async (id: number) => api.delete(`/sync/jinshuju/rules/${id}`),
|
||||
{ invalidate: [['sync', 'jinshuju', 'rules']] },
|
||||
);
|
||||
|
||||
const handleConnectionNext = async () => {
|
||||
if (!canTriggerSync) return;
|
||||
@@ -471,7 +183,9 @@ const JinshujuMatchModal: React.FC<MatchModalProps> = ({ open, onClose, onApplie
|
||||
|
||||
const getDecision = (serial: number): MatchDecision | undefined => decisions.get(serial);
|
||||
const setDecision = (serial: number, d: MatchDecision) =>
|
||||
setDecisions((prev) => new Map(prev).set(serial, d));
|
||||
setDecisions((draft) => {
|
||||
draft.set(serial, d);
|
||||
});
|
||||
const total = entries.length;
|
||||
const matched = [...decisions.values()].filter((d) => d.action !== 'skip').length;
|
||||
|
||||
@@ -566,11 +280,14 @@ const JinshujuMatchModal: React.FC<MatchModalProps> = ({ open, onClose, onApplie
|
||||
loadRules();
|
||||
}}
|
||||
onDelete={async (id) => {
|
||||
await api.delete(`/sync/jinshuju/rules/${id}`);
|
||||
message.success('规则已删除');
|
||||
if (selectedRuleId === id) setSelectedRuleId(undefined);
|
||||
setShowRuleEditor(false);
|
||||
loadRules();
|
||||
try {
|
||||
await deleteRuleMutation.mutateAsync(id);
|
||||
message.success('规则已删除');
|
||||
if (selectedRuleId === id) setSelectedRuleId(undefined);
|
||||
setShowRuleEditor(false);
|
||||
} catch {
|
||||
// 错误提示由 useApiMutation 统一处理
|
||||
}
|
||||
}}
|
||||
onCancel={() => setShowRuleEditor(false)}
|
||||
/>
|
||||
@@ -579,128 +296,31 @@ const JinshujuMatchModal: React.FC<MatchModalProps> = ({ open, onClose, onApplie
|
||||
);
|
||||
|
||||
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>
|
||||
<MatchStep
|
||||
entries={entries}
|
||||
studentOptions={studentOptions}
|
||||
getDecision={getDecision}
|
||||
onDecisionChange={setDecision}
|
||||
onClear={() => setDecisions(new Map())}
|
||||
leftRef={leftRef}
|
||||
rightRef={rightRef}
|
||||
onScroll={handleScroll}
|
||||
total={total}
|
||||
matched={matched}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const backCancelButtons = (onBack: () => void) => [
|
||||
<Button key="back" onClick={onBack}>
|
||||
上一步
|
||||
</Button>,
|
||||
<Button key="cancel" onClick={handleClose}>
|
||||
取消
|
||||
</Button>,
|
||||
];
|
||||
|
||||
const currentStep = step === 'connection' ? 0 : step === 'rule' ? 1 : 2;
|
||||
|
||||
return (
|
||||
@@ -722,12 +342,7 @@ const JinshujuMatchModal: React.FC<MatchModalProps> = ({ open, onClose, onApplie
|
||||
]
|
||||
: step === 'rule'
|
||||
? [
|
||||
<Button key="back" onClick={() => setStep('connection')}>
|
||||
上一步
|
||||
</Button>,
|
||||
<Button key="cancel" onClick={handleClose}>
|
||||
取消
|
||||
</Button>,
|
||||
...backCancelButtons(() => setStep('connection')),
|
||||
<Button
|
||||
key="next"
|
||||
type="primary"
|
||||
@@ -740,12 +355,7 @@ const JinshujuMatchModal: React.FC<MatchModalProps> = ({ open, onClose, onApplie
|
||||
]
|
||||
: step === 'match'
|
||||
? [
|
||||
<Button key="back" onClick={() => setStep('rule')}>
|
||||
上一步
|
||||
</Button>,
|
||||
<Button key="cancel" onClick={handleClose}>
|
||||
取消
|
||||
</Button>,
|
||||
...backCancelButtons(() => setStep('rule')),
|
||||
canTriggerSync ? (
|
||||
<PermissionButton
|
||||
key="apply"
|
||||
@@ -770,7 +380,7 @@ const JinshujuMatchModal: React.FC<MatchModalProps> = ({ open, onClose, onApplie
|
||||
{step === 'rule' ? renderRuleStep() : null}
|
||||
{step === 'match' ? renderMatchStep() : null}
|
||||
{step === 'applying' ? (
|
||||
<Spin tip="正在同步..." style={{ display: 'block', margin: '48px auto' }} />
|
||||
<Spin description="正在同步..." style={{ display: 'block', margin: '48px auto' }} />
|
||||
) : null}
|
||||
</Modal>
|
||||
);
|
||||
|
||||
58
apps/admin/src/components/JinshujuMatchModal.types.ts
Normal file
58
apps/admin/src/components/JinshujuMatchModal.types.ts
Normal file
@@ -0,0 +1,58 @@
|
||||
export interface JinshujuEntryRow {
|
||||
serialNumber: number;
|
||||
name: string;
|
||||
phone: string | null;
|
||||
suggestedStudent: {
|
||||
id: number;
|
||||
name: string;
|
||||
phone: string | null;
|
||||
studentNo: string | null;
|
||||
} | null;
|
||||
}
|
||||
|
||||
export interface StudentOption {
|
||||
id: number;
|
||||
name: string;
|
||||
phone: string | null;
|
||||
studentNo: string | null;
|
||||
}
|
||||
|
||||
export interface PreviewResponse {
|
||||
success: boolean;
|
||||
entries: JinshujuEntryRow[];
|
||||
students: StudentOption[];
|
||||
}
|
||||
|
||||
export interface MatchRule {
|
||||
id: number;
|
||||
name: string;
|
||||
formToken: string;
|
||||
mappings: Record<string, string>;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface JinshujuFormField {
|
||||
key: string;
|
||||
label: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
export type MatchDecision =
|
||||
| { action: 'match'; matchStudentId: number }
|
||||
| { action: 'create'; createName: string; createPhone: string }
|
||||
| { action: 'skip' };
|
||||
|
||||
export const ROW_HEIGHT = 72;
|
||||
export const LEFT_WIDTH = 260;
|
||||
export const GAP = 80;
|
||||
|
||||
export 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: '学号' },
|
||||
];
|
||||
124
apps/admin/src/components/MatchSelector.tsx
Normal file
124
apps/admin/src/components/MatchSelector.tsx
Normal file
@@ -0,0 +1,124 @@
|
||||
import React from 'react';
|
||||
import { Button, Input, Select, Tag, Typography } from 'antd';
|
||||
import { LinkOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
import type { JinshujuEntryRow, MatchDecision, StudentOption } from './JinshujuMatchModal.types';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
export default MatchSelector;
|
||||
156
apps/admin/src/components/MatchStep.tsx
Normal file
156
apps/admin/src/components/MatchStep.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
import React from 'react';
|
||||
import { Button, Typography } from 'antd';
|
||||
import MatchSelector from './MatchSelector';
|
||||
import { GAP, LEFT_WIDTH, ROW_HEIGHT } from './JinshujuMatchModal.types';
|
||||
import type { JinshujuEntryRow, MatchDecision, StudentOption } from './JinshujuMatchModal.types';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
interface MatchStepProps {
|
||||
entries: JinshujuEntryRow[];
|
||||
studentOptions: StudentOption[];
|
||||
getDecision: (serial: number) => MatchDecision | undefined;
|
||||
onDecisionChange: (serial: number, d: MatchDecision) => void;
|
||||
onClear: () => void;
|
||||
leftRef: React.RefObject<HTMLDivElement | null>;
|
||||
rightRef: React.RefObject<HTMLDivElement | null>;
|
||||
onScroll: (source: 'left' | 'right') => void;
|
||||
total: number;
|
||||
matched: number;
|
||||
}
|
||||
|
||||
const MatchStep: React.FC<MatchStepProps> = ({
|
||||
entries,
|
||||
studentOptions,
|
||||
getDecision,
|
||||
onDecisionChange,
|
||||
onClear,
|
||||
leftRef,
|
||||
rightRef,
|
||||
onScroll,
|
||||
total,
|
||||
matched,
|
||||
}) => {
|
||||
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={onClear}>
|
||||
清除全部匹配
|
||||
</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={() => onScroll('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={() => onScroll('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) => onDecisionChange(entry.serialNumber, newD)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MatchStep;
|
||||
123
apps/admin/src/components/RuleEditor.tsx
Normal file
123
apps/admin/src/components/RuleEditor.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Button, Input, Popconfirm, Select, Typography } from 'antd';
|
||||
import { DeleteOutlined, SaveOutlined } from '@ant-design/icons';
|
||||
import api from '../api';
|
||||
import { message } from '../ui/app-message';
|
||||
import { useApiMutation } from '../hooks/useApiMutation';
|
||||
import { STUDENT_FIELDS } from './JinshujuMatchModal.types';
|
||||
import type { JinshujuFormField, MatchRule } from './JinshujuMatchModal.types';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
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 saveMutation = useApiMutation(
|
||||
async (payload: { name: string; mappings: Record<string, string> }) =>
|
||||
rule
|
||||
? api.put(`/sync/jinshuju/rules/${rule.id}`, payload)
|
||||
: api.post('/sync/jinshuju/rules', { ...payload, formToken }),
|
||||
{
|
||||
invalidate: [['sync', 'jinshuju', 'rules']],
|
||||
onSuccess: () => {
|
||||
message.success('规则已保存');
|
||||
onSave();
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!name.trim()) {
|
||||
message.warning('请输入规则名称');
|
||||
return;
|
||||
}
|
||||
setSaving(true);
|
||||
try {
|
||||
await saveMutation.mutateAsync({ name, mappings });
|
||||
} catch {
|
||||
// 错误提示由 useApiMutation 统一处理
|
||||
} 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>
|
||||
);
|
||||
};
|
||||
|
||||
export default RuleEditor;
|
||||
Reference in New Issue
Block a user