yongxu-web/src/pages/home/room/index.tsx

import { PageContainer } from '@ant-design/pro-components';
import React, { useEffect, useState } from 'react';
import { Button, Card, Form, Input, Select, Space, Table } from 'antd';
import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import { history } from 'umi';
import { queryRoomList } from '@/services/home';

interface DataType {
  control_number: number;
  home_name: string;
  name: string;
  type: string;
  temperature: number;
  humidity: number;
  is_master: number;
  power: number;
  status: number;
  record_id: string;
}

/**
 * 房间列表
 * @constructor
 */
const Room: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [searchData, setSearchData] = useState<object | null>({});
  const [pagination, setPagination] = useState({ total: 0, current: 1, pageSize: 10 });
  const [dataList, setDataList] = useState([]);

  // 获取列表数据秀
  const getRoomList = () => {
    const { state } = history.location;
    const params = {
      q: 'page',
      home_id: state,
      current: pagination.current,
      pageSize: pagination.pageSize,
      ...searchData,
    };
    queryRoomList(params).then((res) => {
      if (res.code === 0) {
        setDataList(res.data.list);
        setPagination(res.data.pagination);
        setLoading(false);
      }
    });
  };

  useEffect(() => {
    getRoomList();
  }, []);

  useEffect(() => {
    getRoomList();
  }, [searchData]);

  const onFinish = () => {
    form.validateFields().then((data) => {
      setLoading(true);
      setSearchData(data);
    });
  };

  // 重置
  const onReset = () => {
    form.resetFields();
    setLoading(true);
    setSearchData(null);
  };

  // table切换
  const tableChange = (page: any) => {
    setLoading(true);
    const { state } = history.location;
    const param = {
      q: 'page',
      current: page.current,
      pageSize: page.pageSize,
      home_id: state,
      ...searchData,
    };
    queryRoomList(param).then((res) => {
      if (res.code === 0) {
        setDataList(res.data.list);
        setPagination(res.data.pagination);
        setLoading(false);
      }
    });
  };

  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      align: 'center',
      key: 'index',
      render: (_: any, row: any, index: number) => index + 1,
    },
    {
      title: '分控编号',
      dataIndex: 'control_number',
      key: 'control_number',
    },
    {
      title: '家名称',
      dataIndex: 'home_name',
      key: 'home_name',
    },
    {
      title: '房间名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '温度',
      dataIndex: 'temperature',
      key: 'temperature',
    },
    {
      title: '设定温度',
      dataIndex: 'set_temp',
      key: 'set_temp',
    },
    {
      title: '湿度',
      dataIndex: 'humidity',
      key: 'humidity',
    },
    {
      title: '是否为主控',
      dataIndex: 'is_master',
      key: 'is_master',
      render: (v) => <span>{v ? '是' : '否'}</span>,
    },
    {
      title: '模式',
      dataIndex: 'mode',
      key: 'mode',
      render: (v) => <span>{{ 0: '制冷', 1: '制热', 2: '除湿', 3: '送风', 4: '加湿' }[v]}</span>,
    },
    {
      title: '风速',
      dataIndex: 'fan_speed',
      key: 'fan_speed',
    },
    {
      title: '状态',
      dataIndex: 'power',
      key: 'power',
      render: (v) => <span>{v ? '开' : '关'}</span>,
    },
  ];

  const paginationProps = {
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total: number) => {
      return <span> 共 {total}条 </span>;
    },
    ...pagination,
  };

  return (
    <PageContainer>
      <Card>
        <Form form={form} layout="inline" onFinish={onFinish}>
          <Form.Item name="name" label="名称">
            <Input placeholder="请输入姓名" />
          </Form.Item>
          <Form.Item name="status" label="状态">
            <Select style={{ width: '175px' }} placeholder="请选择状态">
              <Select.Option key={1} value={1}>
                在线
              </Select.Option>
              <Select.Option key={2} value={2}>
                离线
              </Select.Option>
            </Select>
          </Form.Item>
          <Form.Item style={{ marginBottom: '10px' }}>
            <Space>
              <Button type="primary" htmlType="submit">
                <SearchOutlined />
                查询
              </Button>
              <Button htmlType="button" onClick={onReset}>
                <ReloadOutlined />
                重置
              </Button>
              <Button
                onClick={() => {
                  history.goBack();
                }}
              >
                返回
              </Button>
            </Space>
          </Form.Item>
        </Form>
        <Table
          columns={columns}
          dataSource={dataList}
          rowKey={(record: any) => record.record_id}
          pagination={paginationProps}
          loading={loading}
          onChange={tableChange}
          style={{ marginTop: '20px' }}
        />
      </Card>
    </PageContainer>
  );
};
export default Room;