estateagents-admin-manager/src/pages/building/list/index.jsx

import React from 'react';
import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination } from 'antd';
import { connect } from 'dva';
import Styles from './style.less';


const { Option } = Select;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { Meta } = Card;

// 假数据
const tempData = [
  {
    code: 'S101',
    name: '城开花园',
    price: '111',
    address: '顾戴路1801弄',
    status: '1', // 已发布
    createDate: '2019-08-28 17',
  },
  {
    code: 'S102',
    name: '星河天街',
    price: '111',
    address: '长征路1801弄',
    status: '1', // 已发布
    createDate: '2019-08-29 17',
  },
  {
    code: 'S103',
    name: '喜洋洋别墅',
    price: '111',
    address: '阳杨路1801弄',
    status: '1', // 已发布
    createDate: '2019-08-29 17',
  },
  {
    code: 'S104',
    name: '武大郎洋房',
    price: '111',
    address: '太郎路1801弄',
    status: '1', // 已发布
    createDate: '2019-08-29 17',
  },
]


// 网路数据请求
connect(({ getList, loading }) => ({
  getList,
  submitting: loading.effects['building/getList'],
}))

// 提交事件
function handleSubmit(e, props) {
  e.preventDefault();
  props.form.validateFields((err, values) => {
    if (!err) {
      // eslint-disable-next-line no-console
      console.log('提交数据: ', values)
    }
  });
}

// Change 事件
function handleSelectChange(props) {
  // eslint-disable-next-line no-console
  console.log(props)
}

// 分页
function onChange(pageNumber) {
  // eslint-disable-next-line no-console
  console.log('Page: ', pageNumber);
}

/**
 *卡片
 *
 * @returns
 */
function CartBody(props) {
  const { data } = props

  return (
          <Card
            hoverable
            style={{ minWidth: '400px', borderRadius: '12px', margin: '10px', boxShadow: '0px 0px 16px 2px rgba(0,0,0,0.12)' }}
            cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" style={{ borderRadius: '12px 12px 0 0', width: '100%', height: '14vw' }}></img>}
            bodyStyle={{ padding: '10px 20px' }}
          >
            <p className={Styles.cardText}>
              <span className={Styles.title}>楼盘编号</span>
              <span >：{ data.code }</span>
              <span className={Styles.ediText}>
                编辑
                <Icon type="form" style={{ color: '#C0C4CC', marginLeft: '10px' }} />
              </span>
            </p>
            <p className={Styles.cardText}>
              <span className={Styles.title}>楼盘名称</span>
              <span >：{ data.name }</span>
            </p>
            <p className={Styles.cardItem}>
              <span className={Styles.title}>均价</span>
              <span >
                ：约<span style={{ color: '#FF0707', fontSize: '20px' }}> { data.price } </span>元/m
        </span>
            </p>
            <p className={Styles.cardItem}>
              <span className={Styles.title}>项目地址</span>
              <span >：{ data.address }</span>
            </p>
            <p className={Styles.cardItem}>
              <span className={Styles.title}>发布状态</span>
              <span >：{ data.status === '1' ? '已发布' : '未发布' }</span>
            </p>
            <p className={Styles.cardItem}>
              <span className={Styles.title}>录入时间</span>
              <span >：2019-08-28 17</span>
            </p>
            <p style={{ margin: '15px 0', position: 'relative', fontSize: '18px' }}>
              <span style={{ color: '#1990FF' }}>
                取消发布
                <Icon type="close-circle" style={{ color: '#C0C4CC', marginLeft: '8px' }} />
              </span>
              <span style={{
                color: '#FF4A4A', position: 'absolute', right: '0',
              }} >
                删除
                <Icon type="rest" style={{ color: '#C0C4CC', marginLeft: '8px' }} />
              </span>
            </p>
          </Card>
  )
}

/**
 *
 *
 * @param {*} props
 * @returns
 */
function body(props) {
  const { getFieldDecorator } = props.form
  connect()
  return (
    <>
      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
        <Form.Item>
          {getFieldDecorator('code')(
            <Input
              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="楼盘编号"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('name')(
            <Input
              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
              type="password"
              placeholder="楼盘名称"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('startDate')(
            <DatePicker placeholder="开盘时间" />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('buildingStatus')(
            <Select style={{ width: '180px' }} placeholder="楼盘状态" onChange={handleSelectChange}>
              <Option value="1">发布</Option>
              <Option value="0">未发布</Option>
            </Select>,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('marketStatus')(
            <Select style={{ width: '180px' }} placeholder="销售状态" onChange={handleSelectChange}>
              <Option value="1">已销售</Option>
              <Option value="0">未销售</Option>
            </Select>,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('cityId')(
            <Select style={{ width: '180px' }} placeholder="城市" onChange={handleSelectChange}>
              <Option value="male">male</Option>
              <Option value="female">female</Option>
            </Select>,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('isMain')(
            <Select style={{ width: '180px' }} placeholder="首页推荐" onChange={handleSelectChange}>
              <Option value="1">首页推荐</Option>
              <Option value="0">首页未推荐</Option>
            </Select>,
          )}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" className={Styles.SubmitButton}>
            搜索
          </Button>
        </Form.Item>
      </Form>
      <Button type="primary" className={Styles.addButton}>
        新增楼盘
      </Button>

      {/* 卡片内容，显示楼盘项目  */}
      <Row style={{ padding: ' 0 10px' }}>
        {
          tempData.map((item, index) => (
              <Col span={8}>
                <CartBody data={item} />
              </Col>
            ))
        }
      </Row>
      {/* 分页 */}
      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
        <Pagination showQuickJumper defaultCurrent={1} total={500} onChange={onChange} />
      </div>
    </>
  );
}
const WrappedBody = Form.create({ name: 'body' })(body);

export default WrappedBody