feat: 初始化义工时长管理系统
- 管理台：活动设置、时长登记、用户管理、数据导出（Excel/PNG） - 用户端：姓名查询个人义工时长与活动记录 - 技术栈：React + Vite + TailwindCSS / Node.js + Express + sql.js (SQLite) - 支持 Docker 部署，附带 Gitea Actions 自动部署工作流 - 响应式界面，兼容移动端与 PC 端 - 默认管理员账号：admin / admin123
This commit is contained in:
Trae Assistant
@@ -0,0 +1,174 @@
|
||||
import { useRef, useState } from 'react';
|
||||
import Button from '../../components/Button';
|
||||
import { exportApi, errMsg } from '../../api';
|
||||
import { exportToExcel, exportTableToImage, formatDateRange } from '../../utils/export';
|
||||
import type { ExportResult } from '../../types';
|
||||
|
||||
type Opts = {
|
||||
include_users: boolean;
|
||||
include_activities: boolean;
|
||||
include_hours: boolean;
|
||||
include_user_totals: boolean;
|
||||
include_user_activities: boolean;
|
||||
};
|
||||
|
||||
const defaultOpts: Opts = {
|
||||
include_users: true,
|
||||
include_activities: true,
|
||||
include_hours: true,
|
||||
include_user_totals: true,
|
||||
include_user_activities: false,
|
||||
};
|
||||
|
||||
export default function Export() {
|
||||
const [opts, setOpts] = useState<Opts>(defaultOpts);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [preview, setPreview] = useState<ExportResult | null>(null);
|
||||
const previewRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const toggle = (k: keyof Opts) => setOpts(o => ({ ...o, [k]: !o[k] }));
|
||||
const anySelected = Object.values(opts).some(Boolean);
|
||||
|
||||
const load = async () => {
|
||||
if (!anySelected) { alert('请至少选择一项导出内容'); return; }
|
||||
setLoading(true); setPreview(null);
|
||||
try {
|
||||
const d = await exportApi.data(opts);
|
||||
setPreview(d);
|
||||
} catch (e) {
|
||||
alert(errMsg(e));
|
||||
} finally { setLoading(false); }
|
||||
};
|
||||
|
||||
const doExcel = () => {
|
||||
if (!preview) return alert('请先生成预览');
|
||||
const sheets: Array<{ name: string; data: any[] }> = [];
|
||||
if (preview.users?.length) sheets.push({ name: '部员名册', data: preview.users.map((u, i) => ({ '序号': i + 1, '班级': u.class, '姓名': u.name, '义工号': u.volunteer_no || '—', '所属工作组': u.group_name || '—' })) });
|
||||
if (preview.activities?.length) sheets.push({ name: '活动列表', data: preview.activities.map((a, i) => ({ '序号': i + 1, '活动标题': a.title, '内容': a.content || '', '开始时间': a.start_time, '结束时间': a.end_time, '参与工作组': a.groups_name || '', '创建时间': (a.created_at || '').slice(0, 16) })) });
|
||||
if (preview.hours?.length) sheets.push({ name: '全部时长明细', data: preview.hours.map((h: any, i: number) => ({ '序号': i + 1, '班级': h.class, '姓名': h.name, '义工号': h.volunteer_no || '—', '工作组': h.group_name || '—', '活动名称': h.activity_title, '活动时间': formatDateRange(h.start_time, h.end_time), '时长(小时)': Number(h.hours || 0).toFixed(2), '备注': h.remark || '—', '登记时间': (h.created_at || '').slice(0, 16) })) });
|
||||
if (preview.user_totals?.length) sheets.push({ name: '部员总时长', data: preview.user_totals.map((u, i) => ({ '排名': i + 1, '班级': u.class, '姓名': u.name, '义工号': u.volunteer_no || '—', '工作组': u.group_name || '—', '参与活动数': u.activity_count, '累计时长(小时)': Number(u.total_hours || 0).toFixed(2) })) });
|
||||
if (preview.user_activities?.length) {
|
||||
const flat: any[] = [];
|
||||
preview.user_activities.forEach(u => {
|
||||
if (u.activities.length === 0) flat.push({ '班级': u.class, '姓名': u.name, '义工号': u.volunteer_no || '—', '工作组': u.group_name || '—', '活动名称': '（未参与任何活动）', '时间': '', '时长(小时)': '', '备注': '' });
|
||||
u.activities.forEach(a => flat.push({ '班级': u.class, '姓名': u.name, '义工号': u.volunteer_no || '—', '工作组': u.group_name || '—', '活动名称': a.title, '时间': formatDateRange(a.start_time, a.end_time), '时长(小时)': Number(a.hours || 0).toFixed(2), '备注': a.remark || '—' }));
|
||||
});
|
||||
sheets.push({ name: '部员活动明细', data: flat });
|
||||
}
|
||||
exportToExcel(sheets, `义工数据-全部导出-${new Date().toISOString().slice(0,10)}.xlsx`);
|
||||
};
|
||||
|
||||
const doImage = async () => {
|
||||
if (!previewRef.current) return;
|
||||
await exportTableToImage(previewRef.current, `义工数据-全部导出-${new Date().toISOString().slice(0,10)}.png`);
|
||||
};
|
||||
|
||||
const Row = ({ title, desc, value, onChange }: { title: string; desc: string; value: boolean; onChange: () => void }) => (
|
||||
<label className={`block p-4 border-2 cursor-pointer transition ${value ? 'border-black bg-gray-50' : 'border-gray-200 bg-white hover:border-gray-400'}`}>
|
||||
<div className="flex items-start gap-3">
|
||||
<input type="checkbox" className="mt-1 w-4 h-4" checked={value} onChange={onChange} />
|
||||
<div className="flex-1">
|
||||
<div className="font-bold text-black">{title}</div>
|
||||
<div className="text-sm text-gray-600 mt-0.5">{desc}</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-5">
|
||||
<h1 className="text-xl md:text-2xl font-black mb-1">📤 数据导出</h1>
|
||||
<p className="text-sm text-gray-500">勾选需要导出的内容，预览后一键导出为 Excel 表格或 PNG 图片</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white border-2 border-black p-4 md:p-5 mb-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-4">
|
||||
<Row title="① 部员名册" desc="导出所有部员的班级、姓名、义工号与所属工作组" value={opts.include_users} onChange={() => toggle('include_users')} />
|
||||
<Row title="② 活动列表" desc="导出所有活动的标题、时间、参与工作组" value={opts.include_activities} onChange={() => toggle('include_activities')} />
|
||||
<Row title="③ 全部时长明细" desc="所有部员在所有活动中的时长登记记录（含备注）" value={opts.include_hours} onChange={() => toggle('include_hours')} />
|
||||
<Row title="④ 部员总义工时长" desc="所有部员各自的累计总时长与活动数（按时长降序排名）" value={opts.include_user_totals} onChange={() => toggle('include_user_totals')} />
|
||||
<Row title="⑤ 部员参加的活动" desc="每位部员参与过的所有活动明细（活动较多时文件较大）" value={opts.include_user_activities} onChange={() => toggle('include_user_activities')} />
|
||||
</div>
|
||||
<div className="flex gap-2 flex-wrap justify-end">
|
||||
<Button variant="secondary" onClick={load} disabled={loading || !anySelected}>{loading ? '生成中...' : '生成预览'}</Button>
|
||||
<Button variant="secondary" onClick={doExcel} disabled={!preview}>📊 导出 Excel</Button>
|
||||
<Button onClick={doImage} disabled={!preview}>🖼 导出为图片</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{preview && (
|
||||
<div ref={previewRef} className="bg-white border-2 border-gray-200 p-3 md:p-5 space-y-6">
|
||||
<div className="border-b-2 border-black pb-3 text-center hidden md:block">
|
||||
<div className="text-xl font-black">义工数据汇总导出</div>
|
||||
<div className="text-sm text-gray-600 mt-1">生成时间：{new Date().toLocaleString('zh-CN')}</div>
|
||||
</div>
|
||||
|
||||
{preview.users?.length && (
|
||||
<section>
|
||||
<h3 className="font-black text-lg mb-2 border-l-4 border-black pl-3">① 部员名册（{preview.users.length} 人）</h3>
|
||||
<MiniTable heads={['序号', '班级', '姓名', '义工号', '工作组']} rows={preview.users.map((u, i) => [i + 1, u.class, u.name, u.volunteer_no || '—', u.group_name || '—'])} />
|
||||
</section>
|
||||
)}
|
||||
{preview.activities?.length && (
|
||||
<section>
|
||||
<h3 className="font-black text-lg mb-2 border-l-4 border-black pl-3">② 活动列表（{preview.activities.length} 个）</h3>
|
||||
<MiniTable heads={['序号', '活动标题', '时间', '参与工作组']} rows={preview.activities.map((a, i) => [i + 1, a.title, formatDateRange(a.start_time, a.end_time), a.groups_name || '全部'])} />
|
||||
</section>
|
||||
)}
|
||||
{preview.hours?.length && (
|
||||
<section>
|
||||
<h3 className="font-black text-lg mb-2 border-l-4 border-black pl-3">③ 全部时长明细（{preview.hours.length} 条）</h3>
|
||||
<MiniTable heads={['班级', '姓名', '活动', '时长(h)', '备注']} rows={preview.hours.map((h: any) => [h.class, h.name, h.activity_title, Number(h.hours || 0).toFixed(2), h.remark || '—'])} />
|
||||
</section>
|
||||
)}
|
||||
{preview.user_totals?.length && (
|
||||
<section>
|
||||
<h3 className="font-black text-lg mb-2 border-l-4 border-black pl-3">④ 部员总时长排行</h3>
|
||||
<MiniTable heads={['排名', '班级', '姓名', '工作组', '活动数', '累计时长(h)']} rows={preview.user_totals.map((u, i) => [i + 1, u.class, u.name, u.group_name || '—', u.activity_count, Number(u.total_hours || 0).toFixed(2)])} />
|
||||
</section>
|
||||
)}
|
||||
{preview.user_activities?.length && (
|
||||
<section>
|
||||
<h3 className="font-black text-lg mb-2 border-l-4 border-black pl-3">⑤ 部员参加的活动</h3>
|
||||
<div className="space-y-4">
|
||||
{preview.user_activities.map(u => (
|
||||
<div key={u.id} className="border-2 border-gray-200">
|
||||
<div className="bg-gray-50 px-3 py-2 border-b-2 border-gray-200 font-bold">
|
||||
{u.class} {u.name} {u.group_name ? `（${u.group_name}）` : ''}
|
||||
<span className="text-gray-500 font-normal text-sm ml-3">共 {u.activities.length} 次活动</span>
|
||||
</div>
|
||||
{u.activities.length === 0
|
||||
? <div className="p-3 text-sm text-gray-500">未参与任何活动</div>
|
||||
: <MiniTable heads={['活动名称', '时间', '时长(h)', '备注']} rows={u.activities.map(a => [a.title, formatDateRange(a.start_time, a.end_time), Number(a.hours || 0).toFixed(2), a.remark || '—'])} />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MiniTable({ heads, rows }: { heads: string[]; rows: any[][] }) {
|
||||
return (
|
||||
<div className="w-full overflow-x-auto">
|
||||
<table className="w-full text-sm border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b-2 border-black">
|
||||
{heads.map((h, i) => <th key={i} className="px-3 py-2 text-left font-bold border border-gray-200 whitespace-nowrap">{h}</th>)}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((r, ri) => (
|
||||
<tr key={ri} className="border-b border-gray-200">
|
||||
{r.map((c, ci) => <td key={ci} className="px-3 py-1.5 border border-gray-200 whitespace-nowrap">{c}</td>)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user