gongxue-base/frontend/src/pages/Rooms/index.tsx

import React, { useEffect, useState, useMemo } from 'react';
import { Table, Button, Modal, Form, Input, InputNumber, Select, Space, message, Tag, Popconfirm, Badge, Upload } from 'antd';
import { PlusOutlined, UploadOutlined, DownloadOutlined, UndoOutlined, InboxOutlined, SearchOutlined, ExportOutlined, DeleteOutlined } from '@ant-design/icons';
import api from '../../api';

const statusMap: Record<string, { text: string; color: string }> = {
  available: { text: '可入住', color: 'green' },
  full: { text: '已满', color: 'red' },
  maintenance: { text: '维修中', color: 'orange' },
  archived: { text: '已归档', color: '#999' },
};

const RoomsPage: React.FC = () => {
  const [data, setData] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [modalOpen, setModalOpen] = useState(false);
  const [editing, setEditing] = useState<any>(null);
  const [detailModal, setDetailModal] = useState<any>(null);
  const [showArchived, setShowArchived] = useState(false);
  const [archivedCount, setArchivedCount] = useState(0);
  const [searchText, setSearchText] = useState('');
  const [filterBuilding, setFilterBuilding] = useState<string | undefined>(undefined);
  const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]);
  const [form] = Form.useForm();

  const handleBatchDelete = async () => {
    try {
      const res: any = await api.post('/rooms/batch-delete', { ids: selectedRowKeys });
      message.success(res?.message || `已批量归档 ${selectedRowKeys.length} 间`);
      setSelectedRowKeys([]);
      fetchData();
    } catch (e: any) { message.error(e?.message || '批量归档失败'); }
  };

  const fetchData = async () => {
    setLoading(true);
    try {
      const params: any = { includeArchived: 'true' };
      const res: any = await api.get('/rooms/overview', { params });
      const archived = res.filter((r: any) => r.status === 'archived');
      setArchivedCount(archived.length);
      const filtered = showArchived ? res : res.filter((r: any) => r.status !== 'archived');
      setData(filtered);
    } catch (e) { console.error(e); }
    setLoading(false);
  };

  useEffect(() => { fetchData(); }, [showArchived]);

  // 获取楼栋列表用于筛选
  const buildings = useMemo(() => {
    const set = new Set(data.map((r: any) => r.building).filter(Boolean));
    return [...set].sort();
  }, [data]);

  // 前端搜索和楼栋筛选
  const filteredData = useMemo(() => {
    let result = data;
    if (searchText) {
      const keyword = searchText.toLowerCase();
      result = result.filter((r: any) => r.roomNumber?.toLowerCase().includes(keyword));
    }
    if (filterBuilding) {
      result = result.filter((r: any) => r.building === filterBuilding);
    }
    return result;
  }, [data, searchText, filterBuilding]);

  const handleSave = async () => {
    const values = await form.validateFields();
    try {
      if (editing) {
        await api.put(`/rooms/${editing.id}`, values);
        message.success('更新成功');
      } else {
        await api.post('/rooms', values);
        message.success('创建成功');
      }
      setModalOpen(false);
      form.resetFields();
      setEditing(null);
      fetchData();
    } catch (e: any) { message.error(e?.message || '操作失败'); }
  };

  const showDetail = async (id: number) => {
    try {
      const res = await api.get(`/rooms/${id}`);
      setDetailModal(res);
    } catch (e) { console.error(e); }
  };

  const handleArchive = async (id: number) => {
    try {
      await api.delete(`/rooms/${id}`);
      message.success('已归档');
      fetchData();
    } catch (e: any) { message.error(e?.message || '归档失败'); }
  };

  const handleRestore = async (id: number) => {
    try {
      await api.put(`/rooms/${id}/restore`);
      message.success('已恢复');
      fetchData();
    } catch (e: any) { message.error(e?.message || '恢复失败'); }
  };

  const handleDownloadTemplate = () => {
    const baseURL = import.meta.env.PROD ? '/api' : `http://localhost:${import.meta.env.VITE_API_PORT || 3002}/api`;
    const token = localStorage.getItem('token');
    fetch(`${baseURL}/rooms/template`, { headers: { Authorization: `Bearer ${token}` } })
      .then(res => res.blob())
      .then(blob => {
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = '宿舍导入模板.xlsx';
        a.click();
        URL.revokeObjectURL(url);
      })
      .catch(() => message.error('下载失败'));
  };

  const handleExport = () => {
    const baseURL = import.meta.env.PROD ? '/api' : `http://localhost:${import.meta.env.VITE_API_PORT || 3002}/api`;
    const token = localStorage.getItem('token');
    const params = showArchived ? '?includeArchived=true' : '';
    fetch(`${baseURL}/rooms/export${params}`, { headers: { Authorization: `Bearer ${token}` } })
      .then(res => res.blob())
      .then(blob => {
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = '宿舍列表.xlsx';
        a.click();
        URL.revokeObjectURL(url);
      })
      .catch(() => message.error('导出失败'));
  };

  const columns = [
    { title: '房间号', dataIndex: 'roomNumber', sorter: (a: any, b: any) => a.roomNumber.localeCompare(b.roomNumber) },
    { title: '楼栋', dataIndex: 'building' },
    { title: '楼层', dataIndex: 'floor' },
    { title: '类型', dataIndex: 'roomType', render: (v: any) => v || '-' },
    { title: '额定人数', dataIndex: 'capacity' },
    {
      title: '当前入住',
      render: (_: any, r: any) => r.status === 'archived' ? <Tag color="#999">-</Tag> : <Badge count={r.currentCount} showZero overflowCount={99} style={{ backgroundColor: r.currentCount >= r.capacity ? '#ff4d4f' : '#52c41a' }} />,
    },
    { title: '性别', dataIndex: 'gender', width: 60, render: (v: any) => v ? <Tag color={v === '男' ? 'blue' : 'pink'}>{v}</Tag> : '-' },
    {
      title: '状态', dataIndex: 'status',
      render: (s: string) => <Tag color={statusMap[s]?.color}>{statusMap[s]?.text || s}</Tag>,
    },
    {
      title: '操作', width: 220,
      render: (_: any, record: any) => (
        <Space>
          {record.status === 'archived' ? (
            <Popconfirm title="确定恢复此宿舍？恢复后将重新出现在宿舍总览中。" onConfirm={() => handleRestore(record.id)} okText="恢复" cancelText="取消">
              <Button size="small" icon={<UndoOutlined />} type="link">恢复</Button>
            </Popconfirm>
          ) : (
            <>
              <Button size="small" type="link" onClick={() => showDetail(record.id)}>查看住户</Button>
              <Button size="small" onClick={() => { setEditing(record); form.setFieldsValue(record); setModalOpen(true); }}>编辑</Button>
              <Popconfirm title="归档后不会删除数据，可随时恢复。有在住人员将无法归档。" onConfirm={() => handleArchive(record.id)} okText="归档" cancelText="取消">
                <Button size="small" icon={<InboxOutlined />}>归档</Button>
              </Popconfirm>
            </>
          )}
        </Space>
      ),
    },
  ];

  return (
    <div>
      <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8 }}>
        <Space wrap>
          <h3 style={{ margin: 0 }}>宿舍管理</h3>
          <Input.Search
            placeholder="搜索房间号"
            onSearch={setSearchText}
            allowClear
            style={{ width: 160 }}
            prefix={<SearchOutlined />}
          />
          <Select
            placeholder="筛选楼栋"
            allowClear
            style={{ width: 120 }}
            onChange={(v) => setFilterBuilding(v)}
            options={buildings.map((b) => ({ value: b, label: b }))}
          />
          <Button
            type={showArchived ? 'primary' : 'default'}
            onClick={() => setShowArchived(!showArchived)}
          >
            {showArchived ? '隐藏已归档' : `显示已归档${archivedCount > 0 ? ` (${archivedCount})` : ''}`}
          </Button>
        </Space>
        <Space wrap>
          <Popconfirm title={`确定批量归档选中的 ${selectedRowKeys.length} 间宿舍？（有在住人员的会跳过）`} onConfirm={handleBatchDelete} okText="归档" cancelText="取消" disabled={selectedRowKeys.length === 0}>
            <Button danger icon={<DeleteOutlined />} disabled={selectedRowKeys.length === 0}>批量归档</Button>
          </Popconfirm>
          <Button type="primary" icon={<PlusOutlined />} onClick={() => { setEditing(null); form.resetFields(); setModalOpen(true); }}>
            添加宿舍
          </Button>
          <Upload
            accept=".xlsx,.xls"
            showUploadList={false}
            customRequest={async ({ file, onSuccess, onError }: any) => {
              const formData = new FormData();
              formData.append('file', file);
              try {
                const res: any = await api.post('/rooms/import', formData, { headers: { 'Content-Type': 'multipart/form-data' } });
                message.success(res.message);
                onSuccess?.(res);
                fetchData();
              } catch (e: any) { message.error(e?.message || '导入失败'); onError?.(e); }
            }}
          >
            <Button icon={<UploadOutlined />}>导入Excel</Button>
          </Upload>
          <Button icon={<DownloadOutlined />} onClick={handleDownloadTemplate}>下载模板</Button>
          <Button icon={<ExportOutlined />} onClick={handleExport}>导出列表</Button>
        </Space>
      </div>
      <Table
        columns={columns}
        dataSource={filteredData}
        rowKey="id"
        loading={loading}
        pagination={{ pageSize: 20, showTotal: (total) => `共 ${total} 间` }}
        rowClassName={(record) => record.status === 'archived' ? 'archived-row' : ''}
        rowSelection={{
          selectedRowKeys,
          onChange: (keys) => setSelectedRowKeys(keys as number[]),
          getCheckboxProps: (record: any) => ({ disabled: record.status === 'archived' }),
        }}
      />
      <style>{`.archived-row { opacity: 0.6; background: #fafafa !important; }`}</style>

      <Modal title={editing ? '编辑宿舍' : '添加宿舍'} open={modalOpen} onOk={handleSave} onCancel={() => { setModalOpen(false); setEditing(null); }} okText="保存">
        <Form form={form} layout="vertical">
          <Form.Item name="roomNumber" label="房间号" rules={[{ required: true }]}><Input placeholder="如：4-102（自动解析楼栋楼层）" /></Form.Item>
          <Form.Item name="building" label="楼栋"><Input placeholder="如：4号楼（留空自动解析）" /></Form.Item>
          <Form.Item name="floor" label="楼层"><InputNumber min={1} style={{ width: '100%' }} /></Form.Item>
          <Form.Item name="capacity" label="额定人数" rules={[{ required: true }]}><InputNumber min={1} max={20} style={{ width: '100%' }} /></Form.Item>
          <Form.Item name="roomType" label="宿舍类型">
            <Select allowClear options={[
              { value: '四人间', label: '四人间' },
              { value: '单人间', label: '单人间' },
              { value: '家庭房', label: '家庭房' },
              { value: '爆改房', label: '爆改房' },
            ]} placeholder="留空自动解析" />
          </Form.Item>
          {editing && (
            <Form.Item name="status" label="状态">
              <Select options={[
                { value: 'available', label: '可入住' },
                { value: 'full', label: '已满' },
                { value: 'maintenance', label: '维修中' },
              ]} />
            </Form.Item>
          )}
        </Form>
      </Modal>

      <Modal title={`宿舍 ${detailModal?.roomNumber} 当前住户`} open={!!detailModal} onCancel={() => setDetailModal(null)} footer={null} width={600}>
        {detailModal?.currentOccupants?.length > 0 ? (
          <Table
            dataSource={detailModal.currentOccupants}
            rowKey="id"
            pagination={false}
            columns={[
              { title: '学生', render: (_: any, r: any) => r.student?.name },
              { title: '入住日期', dataIndex: 'checkInDate' },
              { title: '计费起始', dataIndex: 'billingStartDate' },
            ]}
          />
        ) : (
          <div style={{ textAlign: 'center', padding: 24, color: '#999' }}>暂无住户</div>
        )}
      </Modal>
    </div>
  );
};

export default RoomsPage;