430 lines
14 KiB
TypeScript
430 lines
14 KiB
TypeScript
import React from 'react';
|
||
import {
|
||
Card,
|
||
DatePicker,
|
||
Empty,
|
||
Form,
|
||
Input,
|
||
InputNumber,
|
||
Modal,
|
||
Popconfirm,
|
||
Select,
|
||
Space,
|
||
Table,
|
||
Tag,
|
||
} from 'antd';
|
||
import { DollarOutlined, InboxOutlined, PlusOutlined } from '@ant-design/icons';
|
||
import PermissionButton from '../../components/PermissionButton';
|
||
import EditableCell from '../../components/EditableCell';
|
||
import type { DepositStudentLookup } from './deposit-student-option';
|
||
import { useSubmitShortcut } from '../../hooks/useSubmitShortcut';
|
||
|
||
export interface DepositRecord {
|
||
id: number;
|
||
studentId: number;
|
||
amount: number;
|
||
status: string;
|
||
paidDate: string;
|
||
refundDate?: string | null;
|
||
notes?: string | null;
|
||
installments?: Array<{
|
||
id: number;
|
||
amount: number;
|
||
dueDate: string;
|
||
paidDate?: string | null;
|
||
status: string;
|
||
}>;
|
||
student?: DepositStudentLookup;
|
||
}
|
||
|
||
export interface EligibleStudent {
|
||
studentId: number;
|
||
studentName: string;
|
||
studentNo?: string | null;
|
||
roomId: number;
|
||
roomNumber: string;
|
||
building?: string | null;
|
||
roomType?: string | null;
|
||
capacity: number;
|
||
depositAmount: number;
|
||
}
|
||
|
||
export const statusMap: Record<string, { text: string; color: string }> = {
|
||
paid: { text: '有余额', color: 'green' },
|
||
refunded: { text: '已全退', color: 'blue' },
|
||
depleted: { text: '已扣完', color: 'red' },
|
||
};
|
||
|
||
export const installmentStatusMap: Record<string, { text: string; color: string }> = {
|
||
pending: { text: '待缴', color: 'orange' },
|
||
paid: { text: '已缴', color: 'green' },
|
||
};
|
||
|
||
export const roomTypeOptions = [
|
||
{ value: '单人间', label: '单人间' },
|
||
{ value: '四人间', label: '四人间' },
|
||
];
|
||
|
||
export const suggestedDepositByRoomType: Record<string, number> = {
|
||
单人间: 200,
|
||
四人间: 100,
|
||
};
|
||
|
||
export interface DepositModalsProps {
|
||
batchModal: boolean;
|
||
createModal: boolean;
|
||
refundModal: DepositRecord | null;
|
||
detailModal: DepositRecord | null;
|
||
installmentModal: number | null;
|
||
batchForm: ReturnType<typeof Form.useForm>[0];
|
||
createForm: ReturnType<typeof Form.useForm>[0];
|
||
refundForm: ReturnType<typeof Form.useForm>[0];
|
||
installmentForm: ReturnType<typeof Form.useForm>[0];
|
||
saving: boolean;
|
||
batchRoomType: string;
|
||
effectiveSelectedEligibleIds: number[];
|
||
eligibleStudents: EligibleStudent[];
|
||
eligibleLoading: boolean;
|
||
eligibleColumns: Array<{ title: string; render?: unknown; dataIndex?: string }>;
|
||
studentOptions: Array<{ value: number; label: string }>;
|
||
onBatchRoomTypeChange: (roomType: string) => void;
|
||
onBatchCreate: () => void;
|
||
onCreate: () => void;
|
||
onRefund: () => void;
|
||
onAddInstallment: () => void;
|
||
onPayInstallment: (installmentId: number) => void;
|
||
onSaveInstallmentCell: (
|
||
installmentId: number,
|
||
field: 'status' | 'paidDate',
|
||
value: unknown,
|
||
) => void;
|
||
onDeleteInstallment: (installmentId: number) => void;
|
||
onCloseBatch: () => void;
|
||
onCloseCreate: () => void;
|
||
onCloseRefund: () => void;
|
||
onCloseDetail: () => void;
|
||
onCloseInstallment: () => void;
|
||
onOpenInstallment: (id: number) => void;
|
||
onSelectEligible: (ids: number[]) => void;
|
||
}
|
||
|
||
export const DepositModals: React.FC<DepositModalsProps> = ({
|
||
batchModal,
|
||
createModal,
|
||
refundModal,
|
||
detailModal,
|
||
installmentModal,
|
||
batchForm,
|
||
createForm,
|
||
refundForm,
|
||
installmentForm,
|
||
saving,
|
||
batchRoomType,
|
||
effectiveSelectedEligibleIds,
|
||
eligibleStudents,
|
||
eligibleLoading,
|
||
eligibleColumns,
|
||
studentOptions,
|
||
onBatchRoomTypeChange,
|
||
onBatchCreate,
|
||
onCreate,
|
||
onRefund,
|
||
onAddInstallment,
|
||
onPayInstallment,
|
||
onSaveInstallmentCell,
|
||
onDeleteInstallment,
|
||
onCloseBatch,
|
||
onCloseCreate,
|
||
onCloseRefund,
|
||
onCloseDetail,
|
||
onCloseInstallment,
|
||
onOpenInstallment,
|
||
onSelectEligible,
|
||
}) => {
|
||
useSubmitShortcut(batchModal && !saving, onBatchCreate);
|
||
useSubmitShortcut(createModal && !saving, onCreate);
|
||
useSubmitShortcut(!!refundModal && !saving, onRefund);
|
||
useSubmitShortcut(!!installmentModal && !saving, onAddInstallment);
|
||
return (
|
||
<>
|
||
<Modal
|
||
title="按房型批量收取押金"
|
||
open={batchModal}
|
||
onOk={onBatchCreate}
|
||
onCancel={onCloseBatch}
|
||
okText="确认批量收取"
|
||
confirmLoading={saving}
|
||
okButtonProps={{ disabled: effectiveSelectedEligibleIds.length === 0 }}
|
||
width={760}
|
||
>
|
||
<Form form={batchForm} layout="vertical" scrollToFirstError>
|
||
<Space style={{ width: '100%' }} align="start" wrap>
|
||
<Form.Item
|
||
name="roomType"
|
||
label="房型"
|
||
rules={[{ required: true, message: '请选择房型' }]}
|
||
>
|
||
<Select
|
||
style={{ width: 140 }}
|
||
options={roomTypeOptions}
|
||
onChange={onBatchRoomTypeChange}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item
|
||
name="amount"
|
||
label="每人收取金额（元）"
|
||
rules={[{ required: true, message: '请输入金额' }]}
|
||
>
|
||
<InputNumber min={0.01} precision={2} style={{ width: 180 }} />
|
||
</Form.Item>
|
||
<Form.Item
|
||
name="paidDate"
|
||
label="收取日期"
|
||
rules={[{ required: true, message: '请选择日期' }]}
|
||
>
|
||
<DatePicker style={{ width: 180 }} placeholder="选择收取日期" format="YYYY-MM-DD" />
|
||
</Form.Item>
|
||
</Space>
|
||
<Form.Item name="notes" label="备注">
|
||
<Input.TextArea rows={2} placeholder={`${batchRoomType}押金`} />
|
||
</Form.Item>
|
||
</Form>
|
||
<div style={{ marginBottom: 8 }}>
|
||
已选择 <strong>{effectiveSelectedEligibleIds.length}</strong> / {eligibleStudents.length}{' '}
|
||
人
|
||
{suggestedDepositByRoomType[batchRoomType] && (
|
||
<span style={{ color: '#999', marginLeft: 8 }}>
|
||
建议金额：¥{suggestedDepositByRoomType[batchRoomType]}
|
||
</span>
|
||
)}
|
||
</div>
|
||
<Table scroll={{ x: 'max-content' }}
|
||
size="small"
|
||
columns={eligibleColumns as never}
|
||
dataSource={eligibleStudents}
|
||
rowKey="studentId"
|
||
loading={eligibleLoading}
|
||
locale={{ emptyText: <Empty description="暂无符合条件的在住人员" /> }}
|
||
pagination={{ pageSize: 6, showSizeChanger: false }}
|
||
rowSelection={{
|
||
selectedRowKeys: effectiveSelectedEligibleIds,
|
||
onChange: (keys) => onSelectEligible(keys as number[]),
|
||
}}
|
||
/>
|
||
</Modal>
|
||
|
||
<Modal
|
||
title="收取押金"
|
||
open={createModal}
|
||
onOk={onCreate}
|
||
onCancel={onCloseCreate}
|
||
okText="确认"
|
||
confirmLoading={saving}
|
||
>
|
||
<Form form={createForm} layout="vertical" scrollToFirstError>
|
||
<Form.Item
|
||
name="studentId"
|
||
label="学生"
|
||
rules={[{ required: true, message: '请选择学生' }]}
|
||
>
|
||
<Select
|
||
showSearch
|
||
optionFilterProp="label"
|
||
placeholder="搜索并选择学生"
|
||
options={studentOptions}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item name="amount" label="本次收取金额（元）" rules={[{ required: true }]}>
|
||
<InputNumber min={0.01} precision={2} style={{ width: '100%' }} />
|
||
</Form.Item>
|
||
<Form.Item name="paidDate" label="收取日期" rules={[{ required: true }]}>
|
||
<DatePicker style={{ width: '100%' }} placeholder="选择收取日期" format="YYYY-MM-DD" />
|
||
</Form.Item>
|
||
<Form.Item name="notes" label="备注">
|
||
<Input.TextArea rows={2} />
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
|
||
<Modal
|
||
title={`退还押金 - ${refundModal?.student?.name}`}
|
||
open={!!refundModal}
|
||
onOk={onRefund}
|
||
onCancel={onCloseRefund}
|
||
okText="确认退还"
|
||
confirmLoading={saving}
|
||
>
|
||
<Form form={refundForm} layout="vertical" scrollToFirstError>
|
||
<div style={{ marginBottom: 16, padding: 12, background: '#f5f5f5', borderRadius: 8 }}>
|
||
当前可用押金: <strong>¥{Number(refundModal?.amount || 0).toFixed(2)}</strong>
|
||
</div>
|
||
<Form.Item name="refundDate" label="退还日期" rules={[{ required: true }]}>
|
||
<DatePicker style={{ width: '100%' }} placeholder="选择退还日期" format="YYYY-MM-DD" />
|
||
</Form.Item>
|
||
<Form.Item name="notes" label="备注">
|
||
<Input.TextArea rows={2} />
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
|
||
<Modal
|
||
title={`押金详情 - ${detailModal?.student?.name}`}
|
||
open={!!detailModal}
|
||
onCancel={onCloseDetail}
|
||
footer={null}
|
||
width={640}
|
||
>
|
||
{detailModal && (
|
||
<div>
|
||
<Card size="small" style={{ marginBottom: 16 }}>
|
||
<p>
|
||
<strong>当前可用押金:</strong> ¥{Number(detailModal.amount).toFixed(2)}
|
||
</p>
|
||
<p>
|
||
<strong>最近收取日期:</strong> {detailModal.paidDate}
|
||
</p>
|
||
<p>
|
||
<strong>状态:</strong>{' '}
|
||
<Tag color={statusMap[detailModal.status]?.color}>
|
||
{statusMap[detailModal.status]?.text || detailModal.status}
|
||
</Tag>
|
||
</p>
|
||
{detailModal.notes && (
|
||
<p>
|
||
<strong>备注:</strong> {detailModal.notes}
|
||
</p>
|
||
)}
|
||
</Card>
|
||
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
marginBottom: 8,
|
||
}}
|
||
>
|
||
<h4 style={{ margin: 0 }}>分期记录</h4>
|
||
<PermissionButton
|
||
permission="deposit:edit"
|
||
size="small"
|
||
type="primary"
|
||
icon={<PlusOutlined />}
|
||
onClick={() => onOpenInstallment(detailModal.id)}
|
||
>
|
||
添加分期
|
||
</PermissionButton>
|
||
</div>
|
||
{detailModal.installments && detailModal.installments.length > 0 ? (
|
||
<Table scroll={{ x: 'max-content' }}
|
||
size="small"
|
||
pagination={false}
|
||
rowKey="id"
|
||
dataSource={detailModal.installments}
|
||
columns={[
|
||
{
|
||
title: '金额',
|
||
dataIndex: 'amount',
|
||
render: (value: number) => `¥${value.toFixed(2)}`,
|
||
},
|
||
{ title: '到期日', dataIndex: 'dueDate' },
|
||
{
|
||
title: '实付日',
|
||
dataIndex: 'paidDate',
|
||
render: (value: string, item: any) => (
|
||
<EditableCell
|
||
value={value}
|
||
editor="date"
|
||
permission="deposit:edit"
|
||
onSave={async (next) =>
|
||
onSaveInstallmentCell(item.id, 'paidDate', next)
|
||
}
|
||
>
|
||
{value || '-'}
|
||
</EditableCell>
|
||
),
|
||
},
|
||
{
|
||
title: '状态',
|
||
dataIndex: 'status',
|
||
render: (value: string, item: any) => (
|
||
<EditableCell
|
||
value={value}
|
||
editor="select"
|
||
options={[
|
||
{ value: 'pending', label: '待缴' },
|
||
{ value: 'paid', label: '已缴' },
|
||
{ value: 'overdue', label: '逾期' },
|
||
]}
|
||
permission="deposit:edit"
|
||
onSave={async (next) =>
|
||
onSaveInstallmentCell(item.id, 'status', next)
|
||
}
|
||
>
|
||
<Tag color={installmentStatusMap[value]?.color}>
|
||
{installmentStatusMap[value]?.text || value}
|
||
</Tag>
|
||
</EditableCell>
|
||
),
|
||
},
|
||
{
|
||
title: '操作',
|
||
render: (_: unknown, item: any) => (
|
||
<Space>
|
||
{item.status === 'pending' && (
|
||
<PermissionButton
|
||
permission="deposit:edit"
|
||
size="small"
|
||
type="primary"
|
||
icon={<DollarOutlined />}
|
||
onClick={() => onPayInstallment(item.id)}
|
||
>
|
||
标记已缴
|
||
</PermissionButton>
|
||
)}
|
||
<Popconfirm
|
||
title="确定归档？"
|
||
onConfirm={() => onDeleteInstallment(item.id)}
|
||
>
|
||
<PermissionButton
|
||
permission="deposit:delete"
|
||
size="small"
|
||
danger
|
||
icon={<InboxOutlined />}
|
||
>
|
||
归档
|
||
</PermissionButton>
|
||
</Popconfirm>
|
||
</Space>
|
||
),
|
||
},
|
||
]}
|
||
/>
|
||
) : (
|
||
<p style={{ color: '#999' }}>暂无分期记录</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
</Modal>
|
||
|
||
<Modal
|
||
title="添加分期"
|
||
open={installmentModal != null}
|
||
onOk={onAddInstallment}
|
||
onCancel={onCloseInstallment}
|
||
okText="确认"
|
||
confirmLoading={saving}
|
||
>
|
||
<Form form={installmentForm} layout="vertical" scrollToFirstError>
|
||
<Form.Item name="amount" label="分期金额（元）" rules={[{ required: true }]}>
|
||
<InputNumber min={0.01} precision={2} style={{ width: '100%' }} />
|
||
</Form.Item>
|
||
<Form.Item name="dueDate" label="到期日期" rules={[{ required: true }]}>
|
||
<DatePicker style={{ width: '100%' }} placeholder="选择到期日期" format="YYYY-MM-DD" />
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
</>
|
||
);
|
||
};
|