xs-manage/src/pages/property/proprietor/index.jsx

import React, { useState, useEffect } from 'react'
import { Select, Spin, Table, Button, Form, Input } from 'antd'
import NavLink from 'umi/navlink'
import { fetchList, apis } from '@/utils/request'
import Search from '../components/Search'
import List from '../components/List'

const fetchPhaseList = fetchList(apis.buildingOwnerInfo.getPhaseList)
const fetchBuildingList = fetchList(apis.buildingOwnerInfo.getBuildingList)
const fetchUnitList = fetchList(apis.buildingOwnerInfo.getUnitList)
const fetchLevelList = fetchList(apis.buildingOwnerInfo.getLevelList)
const fetchRoomNoList = fetchList(apis.buildingOwnerInfo.getRoomNoList)

const Condition = props => {
  const [phaseList, setPhaseList] = useState([])
  const [buildingList, setBuildingList] = useState([])
  const [unitList, setUnitList] = useState([])
  const [levelList, setLevelList] = useState([])
  const [roomNoList, setRoomNoList] = useState([])

  useEffect(() => {
    // getPhaseList()
  }, [])

  return (    
    <Search
      onSearch={props.onSearch}
      onReset={props.onReset}
      render={form => {
        const { getFieldDecorator, setFieldsValue } = form
        
        const getPhaseList = () => {}
        const getBuildingList = () => {}
        const getUnitList = () => {}
        const getLevelList = () => {}
        const getRoomNoList  = () => {}

        return (
          <>
            <Form.Item>
            {
              getFieldDecorator('phaseId')(
                <Select onChange={getBuildingList} style={{ minWidth: '120px' }} placeholder="期/区">
                  {
                    phaseList.map(x => (<Select.Option key={x.id} value={x.id}>{x.name}</Select.Option>))
                  }
                </Select>
              )
            }
            </Form.Item>
            <Form.Item>
            {
              getFieldDecorator('buildingId')(
                <Select onChange={getUnitList} style={{ minWidth: '120px' }} placeholder="栋">
                  {
                    buildingList.map(x => (<Select.Option key={x.id} value={x.id}>{x.name}</Select.Option>))
                  }
                </Select>
              )
            }
            </Form.Item>
            <Form.Item>
            {
              getFieldDecorator('unitId')(
                <Select onChange={getLevelList} style={{ minWidth: '120px' }} placeholder="单元">
                  {
                    unitList.map(x => (<Select.Option key={x.id} value={x.id}>{x.name}</Select.Option>))
                  }
                </Select>
              )
            }
            </Form.Item>
            <Form.Item>
            {
              getFieldDecorator('levelId')(
                <Select onChange={getRoomNoList} style={{ minWidth: '120px' }} placeholder="楼层">
                  {
                    levelList.map(x => (<Select.Option key={x.id} value={x.id}>{x.name}</Select.Option>))
                  }
                </Select>
              )
            }
            </Form.Item>
            <Form.Item>
            {
              getFieldDecorator('roomNoId')(
                <Select style={{ minWidth: '120px' }} placeholder="户号">
                  {
                    roomNoList.map(x => (<Select.Option key={x.id} value={x.id}>{x.name}</Select.Option>))
                  }
                </Select>
              )
            }
            </Form.Item>
            <Form.Item>
            {
              getFieldDecorator('ownerName')(<Input style={{ width: '160px' }} placeholder="姓名" />)
            }
            </Form.Item>
            <Form.Item>
            {
              getFieldDecorator('ownerTel')(<Input style={{ width: '160px' }} placeholder="手机号" />)
            }
            </Form.Item>
            <Form.Item>
            {
              getFieldDecorator('idCard')(<Input style={{ width: '200px' }} placeholder="身份证" />)
            }
            </Form.Item>
          </>
        )
      }}
    />
  )
}

const verifyStatusDict = {
  '0': '未审核',
  '1': '审核通过',
  '2': '审核不通过'
}

export default props => {
  const [loading, setLoading] = useState(false)
  const [listData, setListData] = useState([])

  const handleSearch = () => {

  }

  const handleDeleteRow = row => {

  }

  const handlePageChange = (pageNum, pageSize) => {

  }

  return (
    <div>
      <Condition onSearch={handleSearch} onReset={handleSearch} />
      <div style={{ margin: '24px 0' }}>
        <NavLink to={`/xxx`}>
          <Button type="primary">添加</Button>
        </NavLink>
        <Button style={{ marginLeft: '24px' }}>批量导入业主资料</Button>
      </div>
      <Spin spinning={loading}>
        <List dataSource={listData} onPageChange={handlePageChange} rowKey="userVerifyId">
          <Table.Column title="编号" dataIndex="userVerifyId" key="userVerifyId" />
          <Table.Column
            title="姓名"
            dataIndex="ownerName"
            key="ownerName"
            render={(_, row) => {
              return (
                <NavLink to={`/xxx?id=${row.userVerifyId}`}>
                  <Button type="link">{row.ownerName}</Button>
                </NavLink>
              )
            }}
          />
          <Table.Column title="手机号" dataIndex="ownerTel" key="ownerTel" />
          <Table.Column title="身份证" dataIndex="idCard" key="idCard" />
          <Table.Column
            title="房间号"
            dataIndex="roomNoName"
            key="roomNoName"
            render={(_, row) => {
              return (
                <span>
                  {row.phaseName + row.buildingName + row.unitName + row.levelName + row.roomNoName}
                </span>
              )
            }}
          />
          <Table.Column title="身份" dataIndex="roleName" key="roleName" />
          <Table.Column
            title="审核状态"
            dataIndex="verifyStatus"
            key="verifyStatus"
            render={(_, row) => {
              return (
                <span>
                  {verifyStatusDict[row.verifyStatus] || ''}
                </span>
              )
            }}
          />
          <Table.Column title="编辑人" dataIndex="updateName" key="updateName" />
          <Table.Column title="编辑时间" dataIndex="createDate" key="createDate" />
          <Table.Column
            title="操作"
            key="action"
            render={(_, row) => {
              return (
                <Popconfirm
                  title="确认进行删除操作?"
                  onConfirm={() => handleDeleteRow(row)}
                  okText="删除"
                  cancelText="取消"
                >
                  <Button type="link">删除</Button>
                </Popconfirm>
              )
            }}
          />
        </List>
      </Spin>

    </div>
  )
}