379 lines
11 KiB
TypeScript
379 lines
11 KiB
TypeScript
import React, { useEffect, useState, useMemo } from 'react';
|
||
import {
|
||
Table,
|
||
Button,
|
||
Modal,
|
||
Form,
|
||
Select,
|
||
DatePicker,
|
||
InputNumber,
|
||
Input,
|
||
Space,
|
||
message,
|
||
Tag,
|
||
Popconfirm,
|
||
Upload,
|
||
Tooltip,
|
||
} from 'antd';
|
||
import { PlusOutlined, UploadOutlined, DeleteOutlined, FileTextOutlined } from '@ant-design/icons';
|
||
import dayjs, { Dayjs } from 'dayjs';
|
||
import api from '../../api';
|
||
import PermissionButton from '../../components/PermissionButton';
|
||
|
||
const ClassroomRentalsPage: React.FC = () => {
|
||
const [data, setData] = useState<any[]>([]);
|
||
const [classrooms, setClassrooms] = useState<any[]>([]);
|
||
const [tenants, setTenants] = useState<any[]>([]);
|
||
const [loading, setLoading] = useState(false);
|
||
const [modalOpen, setModalOpen] = useState(false);
|
||
const [editing, setEditing] = useState<any>(null);
|
||
const [form] = Form.useForm();
|
||
const [filterMonth, setFilterMonth] = useState<Dayjs | null>(null);
|
||
const [searchText, setSearchText] = useState('');
|
||
|
||
const filteredData = useMemo(() => {
|
||
if (!searchText) return data;
|
||
const s = searchText.toLowerCase();
|
||
return data.filter((r: any) => {
|
||
const matchClassroom = r.classroom?.name?.toLowerCase().includes(s);
|
||
const matchTenant = r.tenant?.name?.toLowerCase().includes(s);
|
||
return matchClassroom || matchTenant;
|
||
});
|
||
}, [data, searchText]);
|
||
|
||
const fetchData = async () => {
|
||
setLoading(true);
|
||
try {
|
||
const params: any = {};
|
||
if (filterMonth) params.month = filterMonth.format('YYYY-MM');
|
||
const res: any = await api.get('/classroom-rentals', { params });
|
||
setData(res);
|
||
} catch (e) {
|
||
console.error(e);
|
||
}
|
||
setLoading(false);
|
||
};
|
||
|
||
const fetchMeta = async () => {
|
||
try {
|
||
const [cr, tn]: any = await Promise.all([api.get('/classrooms'), api.get('/tenants')]);
|
||
setClassrooms(cr);
|
||
setTenants(tn);
|
||
} catch (e) {
|
||
console.error(e);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
fetchMeta();
|
||
}, []);
|
||
useEffect(() => {
|
||
fetchData();
|
||
}, [filterMonth]);
|
||
|
||
const handleSave = async () => {
|
||
const values = await form.validateFields();
|
||
const payload = {
|
||
classroomId: values.classroomId,
|
||
tenantId: values.tenantId,
|
||
startDate: values.dateRange[0].format('YYYY-MM-DD'),
|
||
endDate: values.dateRange[1].format('YYYY-MM-DD'),
|
||
dailyRate: values.dailyRate,
|
||
totalAmount: values.totalAmount,
|
||
notes: values.notes,
|
||
};
|
||
try {
|
||
if (editing) {
|
||
await api.put(`/classroom-rentals/${editing.id}`, payload);
|
||
message.success('更新成功');
|
||
} else {
|
||
await api.post('/classroom-rentals', payload);
|
||
message.success('创建成功');
|
||
}
|
||
setModalOpen(false);
|
||
form.resetFields();
|
||
setEditing(null);
|
||
fetchData();
|
||
} catch (e: any) {
|
||
if (e?.conflicts?.length) {
|
||
const list = e.conflicts
|
||
.map((c: any) => `${c.tenantName}(${c.startDate}~${c.endDate})`)
|
||
.join('、');
|
||
message.error(`时间段冲突：${list}`);
|
||
} else {
|
||
message.error(e?.message || '操作失败');
|
||
}
|
||
}
|
||
};
|
||
|
||
const handleDelete = async (id: number) => {
|
||
try {
|
||
await api.delete(`/classroom-rentals/${id}`);
|
||
message.success('已删除');
|
||
fetchData();
|
||
} catch (e: any) {
|
||
message.error(e?.message || '删除失败');
|
||
}
|
||
};
|
||
|
||
const handleDownloadContract = (id: number, filename?: string) => {
|
||
const baseURL = import.meta.env.PROD
|
||
? '/api'
|
||
: `http://localhost:${import.meta.env.VITE_API_PORT || 3002}/api`;
|
||
const token = localStorage.getItem('token');
|
||
fetch(`${baseURL}/classroom-rentals/${id}/contract`, {
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
})
|
||
.then((res) => {
|
||
if (!res.ok) throw new Error('下载失败');
|
||
return res.blob();
|
||
})
|
||
.then((blob) => {
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = filename || `contract-${id}.pdf`;
|
||
a.click();
|
||
URL.revokeObjectURL(url);
|
||
})
|
||
.catch(() => message.error('下载失败（可能文件已丢失）'));
|
||
};
|
||
|
||
const handleDeleteContract = async (id: number) => {
|
||
try {
|
||
await api.delete(`/classroom-rentals/${id}/contract`);
|
||
message.success('合同已删除');
|
||
fetchData();
|
||
} catch (e: any) {
|
||
message.error(e?.message || '删除失败');
|
||
}
|
||
};
|
||
|
||
const openEdit = (record: any) => {
|
||
setEditing(record);
|
||
form.setFieldsValue({
|
||
classroomId: record.classroomId,
|
||
tenantId: record.tenantId,
|
||
dateRange: [dayjs(record.startDate), dayjs(record.endDate)],
|
||
dailyRate: record.dailyRate ? Number(record.dailyRate) : undefined,
|
||
totalAmount: record.totalAmount ? Number(record.totalAmount) : undefined,
|
||
notes: record.notes,
|
||
});
|
||
setModalOpen(true);
|
||
};
|
||
|
||
const columns = [
|
||
{
|
||
title: '教室',
|
||
dataIndex: 'classroom',
|
||
render: (c: any) =>
|
||
c ? (
|
||
<span>
|
||
{c.building ? `${c.building} · ` : ''}
|
||
{c.name}
|
||
</span>
|
||
) : (
|
||
'-'
|
||
),
|
||
},
|
||
{
|
||
title: '租赁方',
|
||
dataIndex: 'tenant',
|
||
render: (t: any) =>
|
||
t ? (
|
||
<Tag color={t.color} style={{ background: t.color, color: '#fff', borderColor: t.color }}>
|
||
{t.name}
|
||
</Tag>
|
||
) : (
|
||
'-'
|
||
),
|
||
},
|
||
{ title: '开始日期', dataIndex: 'startDate' },
|
||
{ title: '结束日期', dataIndex: 'endDate' },
|
||
{
|
||
title: '时长',
|
||
render: (_: any, r: any) => {
|
||
const d = dayjs(r.endDate).diff(dayjs(r.startDate), 'day') + 1;
|
||
return `${d}天`;
|
||
},
|
||
},
|
||
{ title: '日租金', dataIndex: 'dailyRate', render: (v: any) => (v ? `¥${v}` : '-') },
|
||
{ title: '总额', dataIndex: 'totalAmount', render: (v: any) => (v ? `¥${v}` : '-') },
|
||
{
|
||
title: '合同',
|
||
dataIndex: 'contractPath',
|
||
render: (v: string, r: any) =>
|
||
v ? (
|
||
<Space>
|
||
<Tooltip title={r.contractOriginalName}>
|
||
<Button
|
||
size="small"
|
||
icon={<FileTextOutlined />}
|
||
onClick={() => handleDownloadContract(r.id, r.contractOriginalName)}
|
||
>
|
||
下载
|
||
</Button>
|
||
</Tooltip>
|
||
<Popconfirm title="删除合同文件？" onConfirm={() => handleDeleteContract(r.id)}>
|
||
<Button size="small" danger icon={<DeleteOutlined />} />
|
||
</Popconfirm>
|
||
</Space>
|
||
) : (
|
||
<Upload
|
||
accept="application/pdf"
|
||
showUploadList={false}
|
||
customRequest={async ({ file, onSuccess, onError }: any) => {
|
||
if (file.size > 10 * 1024 * 1024) {
|
||
message.error('文件不能超过 10MB');
|
||
onError?.(new Error('size'));
|
||
return;
|
||
}
|
||
const formData = new FormData();
|
||
formData.append('file', file);
|
||
try {
|
||
await api.post(`/classroom-rentals/${r.id}/contract`, formData, {
|
||
headers: { 'Content-Type': 'multipart/form-data' },
|
||
});
|
||
message.success('合同已上传');
|
||
onSuccess?.({});
|
||
fetchData();
|
||
} catch (e: any) {
|
||
message.error(e?.message || '上传失败');
|
||
onError?.(e);
|
||
}
|
||
}}
|
||
>
|
||
<Button size="small" icon={<UploadOutlined />}>
|
||
上传PDF
|
||
</Button>
|
||
</Upload>
|
||
),
|
||
},
|
||
{
|
||
title: '操作',
|
||
width: 150,
|
||
render: (_: any, record: any) => (
|
||
<Space>
|
||
<PermissionButton permission="rental:edit" size="small" onClick={() => openEdit(record)}>
|
||
编辑
|
||
</PermissionButton>
|
||
<Popconfirm
|
||
title="确定删除该租赁订单？合同文件将一并删除。"
|
||
onConfirm={() => handleDelete(record.id)}
|
||
>
|
||
<PermissionButton permission="rental:delete" size="small" danger>
|
||
删除
|
||
</PermissionButton>
|
||
</Popconfirm>
|
||
</Space>
|
||
),
|
||
},
|
||
];
|
||
|
||
return (
|
||
<div>
|
||
<div
|
||
style={{
|
||
marginBottom: 16,
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
flexWrap: 'wrap',
|
||
gap: 8,
|
||
}}
|
||
>
|
||
<Space wrap>
|
||
<Input.Search
|
||
placeholder="搜索教室/租赁方"
|
||
allowClear
|
||
style={{ width: 180 }}
|
||
onSearch={(v) => setSearchText(v)}
|
||
onChange={(e) => {
|
||
if (!e.target.value) setSearchText('');
|
||
}}
|
||
/>
|
||
<DatePicker
|
||
picker="month"
|
||
placeholder="按月筛选"
|
||
value={filterMonth}
|
||
onChange={setFilterMonth}
|
||
allowClear
|
||
format="YYYY-MM"
|
||
/>
|
||
</Space>
|
||
<PermissionButton
|
||
permission="rental:create"
|
||
type="primary"
|
||
icon={<PlusOutlined />}
|
||
onClick={() => {
|
||
setEditing(null);
|
||
form.resetFields();
|
||
setModalOpen(true);
|
||
}}
|
||
>
|
||
新增租赁
|
||
</PermissionButton>
|
||
</div>
|
||
<Table
|
||
columns={columns}
|
||
dataSource={filteredData}
|
||
rowKey="id"
|
||
loading={loading}
|
||
pagination={{ pageSize: 15, showTotal: (total) => `共 ${total} 条` }}
|
||
scroll={{ x: 1200 }}
|
||
/>
|
||
|
||
<Modal
|
||
title={editing ? '编辑租赁' : '新增租赁'}
|
||
open={modalOpen}
|
||
onOk={handleSave}
|
||
onCancel={() => {
|
||
setModalOpen(false);
|
||
setEditing(null);
|
||
}}
|
||
okText="保存"
|
||
width={600}
|
||
>
|
||
<Form form={form} layout="vertical">
|
||
<Form.Item name="classroomId" label="教室" rules={[{ required: true }]}>
|
||
<Select
|
||
showSearch
|
||
optionFilterProp="label"
|
||
placeholder="选择教室"
|
||
options={classrooms.map((c) => ({
|
||
value: c.id,
|
||
label: `${c.building ? c.building + ' · ' : ''}${c.name}（${c.roomType}）`,
|
||
}))}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item name="tenantId" label="租赁方" rules={[{ required: true }]}>
|
||
<Select
|
||
showSearch
|
||
optionFilterProp="label"
|
||
placeholder="选择租赁方"
|
||
options={tenants.map((t) => ({ value: t.id, label: t.name }))}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item name="dateRange" label="租赁起止日期" rules={[{ required: true }]}>
|
||
<DatePicker.RangePicker
|
||
style={{ width: '100%' }}
|
||
placeholder={['开始日期', '结束日期']}
|
||
format="YYYY-MM-DD"
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item name="dailyRate" label="日租金（可选）">
|
||
<InputNumber min={0} precision={2} style={{ width: '100%' }} prefix="¥" />
|
||
</Form.Item>
|
||
<Form.Item name="totalAmount" label="合同总额（可选）">
|
||
<InputNumber min={0} precision={2} style={{ width: '100%' }} prefix="¥" />
|
||
</Form.Item>
|
||
<Form.Item name="notes" label="备注">
|
||
<Input.TextArea rows={2} />
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ClassroomRentalsPage;
|