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

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

// interface DataType {
//   key: string;
//   name: string;
//   photo: string;
//   number: number;
//   status: number;
//   record_id: string;
// }

/**
 * 家列表
 * @constructor
 */
const Home: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [searchData, setSearchData] = useState<object | null>({});
  const [dataList, setDataList] = useState([
    {
      photo:
        '/s/yongxu/1t7svi0uq7jcofyssvo2czj200w7iwdr/%E6%B0%B8%E7%BB%AD%E7%BB%BF%E5%BB%BAlogo.png',
      name: '家',
      number: 12,
      status: 1,
      record_id: 1,
    },
  ]);
  const [pagination, setPagination] = useState({ total: 0, current: 1, pageSize: 10 });

  const getData = () => {
    const params = {
      q: 'page',
      current: pagination.current,
      pageSize: pagination.pageSize,
      ...searchData,
    };
    queryHomeList(params).then((res) => {
      if (res.code === 0) {
        setDataList(res.data.list);
        setPagination(res.data.pagination);
        setLoading(false);
        console.log(loading, dataList);
      }
    });
  };

  // useEffect(()=>{
  //   setLoading(true);
  //   getData();
  // },[]);

  useEffect(() => {
    getData();
  }, [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 param = {
  //     q: 'page',
  //     current: page.current,
  //     pageSize: page.pageSize,
  //     ...searchData,
  //   };
  //   queryHomeList(param).then(res =>{
  //     if (res.code === 0) {
  //       setDataList(res.data.list);
  //       setPagination(res.data.pagination);
  //       setLoading(false);
  //     }
  //   })
  // }

  // 跳转到房间
  // const toRoom = (record: DataType) => {
  //   history.push({ pathname  : '/room' , state :record.record_id})
  // }

  // const columns: ColumnsType<DataType> = [
  //   {
  //     title: '序号',
  //     align: 'center',
  //     key: 'index',
  //     render: (_: any, row: any, index: number) => index + 1,
  //   },
  //   {
  //     title: '头像',
  //     dataIndex: 'photo',
  //     key: 'photo',
  //     render: (v) => v && <Image width={50} src={v} alt="头像" />,
  //   },
  //   {
  //     title: '姓名',
  //     dataIndex: 'name',
  //     key: 'name',
  //   },
  //   {
  //     title: '成员人数',
  //     dataIndex: 'number',
  //     key: 'number',
  //   },
  //   {
  //     title: '状态',
  //     dataIndex: 'status',
  //     key: 'status',
  //     render: (v) =>
  //       v && (
  //         <span style={{ color: `${{ 1: '#00a650', 2: 'red' }[v]}` }}>
  //           {{ 1: '在线', 2: '离线' }[v]}
  //         </span>
  //       ),
  //   },
  //   {
  //     title: '操作',
  //     key: 'action',
  //     render: (_, record) => (
  //       <Space size="middle">
  //         <a
  //           onClick={() => {
  //             toRoom(record);
  //           }}
  //         >
  //           查看房间
  //         </a>
  //       </Space>
  //     ),
  //   },
  // ]

  // 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>
            </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 Home;