feats

config/routes.js

@@ -73,7 +73,7 @@ export default [
               {
                 path: 'buildingInfo',
                 name: '楼栋管理',
-                component: './property/building'
+                component: './property/building/list'
               },
               {
                 path: 'buildingInfo/importExcel',

src/pages/property/building/components/Building.jsx

@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from 'react'
+import { Tabs, Spin, Button, Icon, Modal, notification } from 'antd'
+import { fetch, fetchList, apis } from '@/utils/request'
+import Prompt from '@/components/Prompt'
+import BuildingUnit from './BuildingUnit'
+
+const fetchBuildingList = fetch(apis.buildingOwnerInfo.getBuildingList)
+const addNode = fetch(apis.buildingOwnerInfo.addNode)
+const deleteNode = fetch(apis.buildingOwnerInfo.deleteNode)
+
+export default props => {
+  const [loading, setLoading] = useState(false)
+  const [buildingVisible, setBuildingVisible] = useState(false)
+  const [buildingList, setBuildingList] = useState([])
+
+  const handleAddBuilding = v => {
+    addNode({ data: {
+      id: props.phase.id,
+      name: props.phase.name,
+      type: 'building',
+      nodeNumber: v,
+    }}).then((res) => {
+      notification.success({message: '添加成功'})
+      setBuildingList(buildingList.concat(res))
+    })
+    setBuildingVisible(false)
+  }
+
+  const handleDeleteBuilding = building => {
+    Modal.confirm({
+      title: `确认删除 ${building.name} 数据?`,
+      content: '谨慎操作, 数据不可恢复',
+      onOk: () => {
+        deleteNode({ data: {
+          id: building.id,
+          name: building.name,
+          type: 'unit', // 删除的时候, type 是 unit 。这个接口比较诡异
+          nodeNumber: building.name,
+        }}).then(() => {
+          notification.success({message: '删除成功'})
+          setBuildingList(buildingList.filter(x => x.id !== building.id))
+        })
+
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (props.phase && props.phase.id) {
+      setLoading(true)
+      fetchBuildingList({params: {phaseId: props.phase.id}}).then(res => {
+        setBuildingList(res)
+        setLoading(false)
+      }).catch(() => setLoading(false))
+    }
+  }, [props.phase])
+
+  return (
+    <div style={{marginTop: 8}}>
+      <Spin spinning={loading}>
+        <Tabs
+          defaultActiveKey="0"
+          type="line"
+          tabPosition="left"
+          tabBarExtraContent={<Button type="link" onClick={() => setBuildingVisible(true)}><Icon type="plus" />栋</Button>}
+        >
+        {
+          buildingList.map((building, index) => {
+            return (
+              <Tabs.TabPane
+                key={`${index}`}
+                tab={<span>{building.name} <Icon type="close" style={{fontSize: '0.8em', color: '#888', marginLeft: 8}} onClick={() => handleDeleteBuilding(building)} /></span>}
+              >
+                <BuildingUnit building={building} phase={props.phase} />
+              </Tabs.TabPane>
+            )
+          })
+        }
+        </Tabs>
+      </Spin>
+      <Prompt visible={buildingVisible} onOk={handleAddBuilding} onCancel={() => setBuildingVisible(false)} placeholder="请填写楼栋名称" />
+    </div>
+  )
+}

src/pages/property/building/components/BuildingLevelCell.jsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from 'react'
+import { Menu, Dropdown, Button, Popconfirm, Icon, notification } from 'antd'
+import Prompt from '@/components/Prompt'
+import { fetchList, fetch, apis } from '@/utils/request'
+
+const addNode = fetch(apis.buildingOwnerInfo.addNode)
+const updateNode = fetch(apis.buildingOwnerInfo.updateNode)
+const deleteNode = fetch(apis.buildingOwnerInfo.deleteNode)
+
+export default props => {
+  const [roomInfo, setRoomInfo] = useState({})
+  const [levelVisible, setLevelVisible] = useState(false)
+  const [houseVisible, setHouseVisible] = useState(false)
+
+  const handleEdit = val => {
+    updateNode({ data: {
+      id: roomInfo.levelId,
+      name: val,
+      type: 'level',
+    }}).then(() => {
+      const room = {
+        ...roomInfo,
+        levelName: val
+      }
+      if (props.onEdit) {
+        props.onEdit(room)
+      }
+      notification.success({message: '修改成功'})
+    })
+    setLevelVisible(false)
+  }
+
+  const handleDelete = () => {
+    deleteNode({ data: {
+      id: roomInfo.levelId,
+      name: roomInfo.levelName,
+      type: 'roomNo',   // 删除楼层传 roomNo
+      nodeNumber: undefined,
+    }}).then(() => {
+      if (props.onDelete) {
+        props.onDelete(roomInfo)
+      }
+      notification.success({message: '删除成功'})
+    })
+  }
+
+  const handleHouseAdd = val => {
+    addNode({ data: {
+      id: roomInfo.levelId,
+      name: roomInfo.levelName,
+      type: 'roomNo',
+      nodeNumber: val,
+    }}).then((res) => {
+      if (props.onHouseAdd) {
+        props.onHouseAdd(res)
+      }
+      notification.success({message: '添加成功'})
+    })
+    setHouseVisible(false)
+  }
+
+  const menu = (
+    <Menu>
+      <Menu.Item>
+        <Button type="link" onClick={() => setHouseVisible(true)}><Icon type="plus" />房</Button>
+      </Menu.Item>
+      <Menu.Item>
+        <Button type="link" onClick={() => setLevelVisible(true)}>编辑</Button>
+      </Menu.Item>
+      <Menu.Item>
+        <Popconfirm
+         title={`确认删除 ${roomInfo.levelName}`}
+         onConfirm={handleDelete}
+         okText="是"
+         cancelText="否"
+        >
+          <Button type="danger" ghost style={{border: 'none', boxShadow: 'none'}}>删除</Button>
+        </Popconfirm>
+      </Menu.Item>
+    </Menu>
+  );
+  
+  useEffect(() => {
+    setRoomInfo(props.dataSource || {})
+  }, [props.dataSource])
+
+  return (
+    <span>
+      <Dropdown overlay={menu} trigger={['contextMenu']} placement="topCenter">
+        <div style={{cursor: 'pointer'}}>{roomInfo.levelName}</div>
+      </Dropdown>
+      <Prompt visible={levelVisible} onOk={handleEdit} onCancel={() => setLevelVisible(false)} placeholder="请填写楼层名称" />
+      <Prompt visible={houseVisible} onOk={handleHouseAdd} onCancel={() => setHouseVisible(false)} placeholder="请填写房室名称" />
+    </span>
+  )
+}

src/pages/property/building/components/BuildingLevelRow.jsx

@@ -0,0 +1,111 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { Table, Spin, Menu, Dropdown, Button, Popconfirm, Icon, notification } from 'antd'
+import { maxBy } from 'lodash'
+import Prompt from '@/components/Prompt'
+import { fetchList, fetch, apis } from '@/utils/request'
+import BuildingRoomCell from './BuildingRoomCell'
+import BuildingLevelCell from './BuildingLevelCell'
+import BuildingUnitCell from './BuildingUnitCell'
+
+const addNode = fetch(apis.buildingOwnerInfo.addNode)
+const updateNode = fetch(apis.buildingOwnerInfo.updateNode)
+const deleteNode = fetch(apis.buildingOwnerInfo.deleteNode)
+
+const nvlIdStart = 'tmp'
+
+export default props => {
+  const [dataList, setDataList] = useState([])
+  const [roomNum, setRoomNum] = useState(0)
+
+  // 表格列
+  const columns = useMemo(() => {
+    const rooms = new Array(roomNum).fill()
+
+    return [
+      // 楼层字段
+      {
+        title: '#',
+        dataIndex: 'levelName',
+        key: 'levelName',
+        width: 80,
+        align: 'center',
+        render: (t, row) => (
+          <BuildingLevelCell
+            dataSource={row}
+            onHouseAdd={props.onHouseAdd}
+            onEdit={props.onLevelEdit}
+            onDelete={props.onLevelDelete}
+          />
+        )
+      },
+      ...rooms.map((_, index) => ({
+        title: `房间 ${index + 1}`,
+        dataIndex: `name-${index}`,
+        key: `name-${index}`,
+        align: 'center',      
+        render: (t, row) => (
+          <BuildingRoomCell
+            dataSource={{
+              ...row,
+              id: row[`id-${index}`],
+              name: row[`name-${index}`]
+            }}
+            onEdit={props.onHouseEdit}
+            onDelete={props.onHouseDelete}
+          />
+        )
+      }))
+    ]
+  }, [roomNum, props])
+  
+  useEffect(() => {
+    const list = (props.dataSource || []).slice()
+    if (!list.length) {
+      return
+    }
+
+    // 找到 房间最多的那层, 然后所有的楼层都按照这个房间数造数据
+    const maxRooms = maxBy(list, x => x.length)
+    setRoomNum(maxRooms.length)
+
+    // 合并同楼层的房间
+    const zipedList = list.map(rooms => {
+      return maxRooms.reduce((acc, _, index) => {
+        const room = rooms[index] || {}
+
+        return {
+          ...acc,
+          ...room,
+          id: acc.id || room.id || `${nvlIdStart}-${Math.random().toString(36).substring(2)}`,
+          [`id-${index}`]: room.id,
+          [`name-${index}`]: room.name || '#'
+        }
+      }, {})
+    })
+
+    setDataList(zipedList)
+  }, [props.dataSource])
+
+  // 任意一个房间数据都可以
+  // 因为所有房间的单元信息都是一样的
+  const anyRoom = dataList[0]
+
+  return (
+    <div>
+      <BuildingUnitCell
+        dataSource={anyRoom}
+        onLevelAdd={props.onLevelAdd}
+        onEdit={props.onUnitEdit}
+        onDelete={props.onUnitDelete}
+      />
+      <Table
+        columns={columns}
+        dataSource={dataList}
+        pagination={false}
+        rowKey="id"
+        size="middle"
+        bordered
+      />
+    </div>
+  )
+}

src/pages/property/building/components/BuildingRoomCell.jsx

@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from 'react'
+import { Menu, Dropdown, Button, Popconfirm, Icon, notification } from 'antd'
+import Prompt from '@/components/Prompt'
+import { fetchList, fetch, apis } from '@/utils/request'
+
+const addNode = fetch(apis.buildingOwnerInfo.addNode)
+const updateNode = fetch(apis.buildingOwnerInfo.updateNode)
+const deleteNode = fetch(apis.buildingOwnerInfo.deleteNode)
+
+export default props => {
+  const [houseVisible, setHouseVisible] = useState(false)
+  const [roomInfo, setRoomInfo] = useState({})
+
+  const handleDelete = () => {
+    deleteNode({ data: {
+      id: roomInfo.id,
+      name: roomInfo.name,
+      type: 'end',   // 删除房间传 end
+      nodeNumber: undefined,
+    }}).then(() => {
+      if (props.onDelete) {
+        props.onDelete(roomInfo)
+      }
+      notification.success({message: '删除成功'})
+    })
+  }
+
+  const handleEdit = val => {
+    if (!roomInfo.id) {
+      addNode({ data: {
+        id: roomInfo.levelId,
+        name: roomInfo.levelName,
+        type: 'roomNo',
+        nodeNumber: val,
+      }}).then((res) => {
+        if (props.onEdit) {
+          props.onEdit(res)
+        }
+        notification.success({message: '修改成功'})
+      })
+    } else {
+      updateNode({ data: {
+        id: roomInfo.id,
+        name: val,
+        type: 'roomNo',
+      }}).then(() => {
+        const room = {
+          ...roomInfo,
+          name: val
+        }
+
+        if (props.onEdit) {
+          props.onEdit(room)
+        }
+        notification.success({message: '修改成功'})
+      })
+    }
+    setHouseVisible(false)
+  }
+
+  const menu = (
+    <Menu>
+      <Menu.Item>
+        <Button type="link" onClick={() => setHouseVisible(true)}>编辑</Button>
+      </Menu.Item>
+      {
+        roomInfo.id && (
+          <Menu.Item>
+            <Popconfirm
+             title={`确认删除 ${roomInfo.name} ?`}
+             onConfirm={handleDelete}
+             okText="是"
+             cancelText="否"
+            >
+              <Button type="danger" ghost style={{border: 'none', boxShadow: 'none'}}>删除</Button>
+            </Popconfirm>
+          </Menu.Item>
+        )
+      }
+    </Menu>
+  );
+
+  useEffect(() => {
+    setRoomInfo(props.dataSource || {})
+  }, [props.dataSource])
+
+  return (
+    <span>
+      <Dropdown overlay={menu} trigger={['contextMenu']} placement="topCenter">
+        <div style={{cursor: 'pointer'}}>{roomInfo.name}</div>
+      </Dropdown>
+      <Prompt visible={houseVisible} onOk={handleEdit} onCancel={() => setHouseVisible(false)} placeholder="请填写房室名称" />
+    </span>
+  )
+}

src/pages/property/building/components/BuildingUnit.jsx

@@ -0,0 +1,234 @@
+import React, { useEffect, useMemo, useState, useCallback } from 'react'
+import { Table, Spin, Button, Icon, notification } from 'antd'
+import { fetchList, fetch, apis } from '@/utils/request'
+import { groupBy, orderBy } from 'lodash'
+import Prompt from '@/components/Prompt'
+import BuildingLevelRow from './BuildingLevelRow'
+
+const fetchBuildingList = fetchList(apis.buildingOwnerInfo.getAllRoomNoList)
+const addNode = fetch(apis.buildingOwnerInfo.addNode)
+const deleteNode = fetch(apis.buildingOwnerInfo.deleteNode)
+
+const getNumFromStr = str => {
+  return ((str || '').match(/\d+/g) || []).join('') - 0
+}
+
+/**
+ * 房间排序规则
+ * 1、维护内容必须有数字
+ * 2、单元 从小到大
+ * 3、楼层 从大到小
+ * 4、房号 从小到大
+ * @param {*} room 
+ */
+const sortRoomList = roomList => {
+  return orderBy(roomList,
+    [
+      room => getNumFromStr(room.unitName),
+      room => getNumFromStr(room.levelName),
+      room => getNumFromStr(room.name),
+    ],
+    [
+      'asc',
+      'desc',
+      'asc'
+    ]
+  )
+}
+
+export default props => {
+  const [loading, setLoading] = useState(false)
+  const [unitVisible, setUnitVisible] = useState(false)
+  const [roomList, setRoomList] = useState([])
+  const [roomGroup, setRoomGroup] = useState({})
+  
+  const handleAddUnit = v => {
+    addNode({ data: {
+      id: props.building.id,
+      name: props.building.name,
+      type: 'unit',
+      nodeNumber: v,
+    }}).then((res) => {
+      // 构造房间数据
+      const roomInfo = {
+        ...res,
+        unitId: res.id,
+        unitName: res.name,
+        id: undefined,
+        name: undefined,
+        levelId: undefined,
+        levelName: undefined,
+      }
+
+      setRoomList(roomList.concat(roomInfo))
+      notification.success({message: '添加成功'})
+    })
+    setUnitVisible(false)
+  }
+
+  const handleDeleteUnit = room => {
+    setRoomList(roomList.filter(r => r.unitId !== room.unitId))
+  }
+
+  const addHouse = useCallback(
+    room => {
+      // 如果有空房间, 直接替换空房间，否则新增一条记录
+      let nvlRoom = false
+  
+      let newList = roomList.map(item => {
+        if (room.phaseId === item.phaseId &&
+          room.buildingId === item.buildingId &&
+          room.unitId === item.unitId &&
+          room.levelId === item.levelId &&
+          !item.id && !nvlRoom) {
+            nvlRoom = true
+            return room
+          } else {
+            return item
+          }
+      })
+  
+      if (!nvlRoom) {
+        newList = newList.concat(room)
+      }
+  
+      setRoomList(sortRoomList(newList))
+    },
+    [roomList],
+  )
+
+  const handleHouseAdd = room => {
+    addHouse(room)
+  }
+
+  // 如果编辑 # 的房间, 实际上是新增房间
+  const handleHouseEdit = room => {
+    let edited = false
+    const newList = roomList.map(r => {
+      if (r.id === room.id) {
+        edited = true
+        return room
+      } else {
+        return r
+      }
+    })
+
+    if (edited) {
+      setRoomList(newList)
+    } else {
+      addHouse(room)
+    }
+  }
+
+  const handleHouseDelete = room => {
+    let newList = []
+    // 如果本层只有一个房间, 那么替换为空, 不删除数据
+    const sameLevelRooms = roomList.filter(r => r.levelId === room.levelId)
+    if (sameLevelRooms.length === 1) {
+      newList = roomList.map(item => {
+        if (item.id === room.id) {
+          return {
+            ...room,
+            id: undefined,
+            name: undefined,
+          }
+        } else {
+          return item
+        }
+      })
+    } else {
+      newList = roomList.filter(r => r.id !== room.id)
+    }
+    setRoomList(newList)
+  }
+
+  const handleLevelAdd = room => {
+    // 如果有空房间，替换空房间
+    let nvlRoom = false
+  
+    let newList = roomList.map(item => {
+      if (room.phaseId === item.phaseId &&
+        room.buildingId === item.buildingId &&
+        room.unitId === item.unitId &&
+        !item.levelId && !nvlRoom) {
+          nvlRoom = true
+          return room
+        } else {
+          return item
+        }
+    })
+
+    if (!nvlRoom) {
+      newList = newList.concat(room)
+    }
+
+    setRoomList(sortRoomList(newList))
+  }
+
+  const handleLevelEdit = room => {
+    setRoomList(roomList.map(item => {
+      return item.levelId === room.levelId ?
+        {...item, levelName: room.levelName} :
+        item
+    }))
+  }
+
+  const handleLevelDelete = room => {
+    setRoomList(roomList.filter(r => r.levelId !== room.levelId))
+  }
+
+  useEffect(() => {
+    if (props.building && props.phase && props.building.id && props.phase.id) {
+      setLoading(true)
+      fetchBuildingList({pageNum: 1, pageSize: 9999, phaseId: props.phase.id, buildingId: props.building.id}).then(res => {
+        const [list = []] = res || []
+        setRoomList(sortRoomList(list))
+        setLoading(false)
+      }).catch(e => console.error(e) || setLoading(false))
+    }
+  }, [props.building, props.phase])
+
+  useEffect(() => {
+    const groupByUnit = groupBy(roomList, row => [row.unitId, row.unitName].join(','))
+    const groupByLevel = Object.keys(groupByUnit).reduce((acc, key) => {
+      const groupWithLevelKey = groupBy(groupByUnit[key], row => [row.levelId, row.levelName].join(','))
+      const pureLevelArr = Object.keys(groupWithLevelKey).map(k => groupWithLevelKey[k])
+
+      return {
+        ...acc,
+        [key]: pureLevelArr
+      }
+    }, {})
+
+    setRoomGroup(groupByLevel)
+  }, [roomList])
+
+  return (
+    <div>
+      <Button style={{marginLeft: 24}} onClick={() => setUnitVisible(true)}><Icon type="plus" />单元</Button>
+      <Spin spinning={loading}>
+        <div style={{display: 'flex', overflowX: 'auto'}}>
+        {
+          Object.keys(roomGroup).map(key => {
+            return (
+              <div style={{flex: 'none', marginLeft: 48}} key={key}>
+                <BuildingLevelRow
+                  dataSource={roomGroup[key]}
+                  onUnitDelete={handleDeleteUnit}
+                  onHouseAdd={handleHouseAdd}
+                  onHouseEdit={handleHouseEdit}
+                  onHouseDelete={handleHouseDelete}
+                  onLevelAdd={handleLevelAdd}
+                  onLevelEdit={handleLevelEdit}
+                  onLevelDelete={handleLevelDelete}
+                />
+              </div>
+            )
+          })
+        }
+        </div>
+      </Spin>
+      <Prompt visible={unitVisible} onOk={handleAddUnit} onCancel={() => setUnitVisible(false)} placeholder="请填写单元名称" />
+    </div>
+  )
+}

src/pages/property/building/components/BuildingUnitCell.jsx

@@ -0,0 +1,106 @@
+import React, { useEffect, useState } from 'react'
+import { Menu, Dropdown, Button, Popconfirm, Icon, notification } from 'antd'
+import Prompt from '@/components/Prompt'
+import { fetchList, fetch, apis } from '@/utils/request'
+
+const addNode = fetch(apis.buildingOwnerInfo.addNode)
+const updateNode = fetch(apis.buildingOwnerInfo.updateNode)
+const deleteNode = fetch(apis.buildingOwnerInfo.deleteNode)
+
+export default props => {
+  const [roomInfo, setRoomInfo] = useState({})
+  const [unitVisible, setUnitVisible] = useState(false)
+  const [levelVisible, setLevelVisible] = useState(false)
+  
+  const handleEdit = val => {
+    updateNode({ data: {
+      id: roomInfo.unitId,
+      name: val,
+      type: 'unit',
+    }}).then(() => {
+      const room = {
+        ...roomInfo,
+        unitName: val
+      }
+      if (props.onEdit) {
+        props.onEdit(room)
+      }
+      notification.success({message: '修改成功'})
+    })
+    setUnitVisible(false)
+  }
+
+  const handleDelete = () => {
+    deleteNode({ data: {
+      id: roomInfo.unitId,
+      name: roomInfo.unitName,
+      type: 'level',   // 删除单元传 level
+      nodeNumber: undefined,
+    }}).then(() => {
+      if (props.onDelete) {
+        props.onDelete(roomInfo)
+      }
+      notification.success({message: '删除成功'})
+    })
+  }
+
+  const handleLevelAdd = val => {
+    addNode({ data: {
+      id: roomInfo.unitId,
+      name: roomInfo.unitName,
+      type: 'level',
+      nodeNumber: val,
+    }}).then((res) => {
+      // 构造房间数据
+      const room = {
+        ...res,
+        levelId: res.id,
+        levelName: res.name,
+        id: undefined,
+        name: undefined,
+      }
+
+      if (props.onLevelAdd) {
+        props.onLevelAdd(room)
+      }
+      notification.success({message: '添加成功'})
+    })
+
+    setLevelVisible(false)
+  }
+
+  useEffect(() => {
+    setRoomInfo(props.dataSource || {})
+  }, [props.dataSource])
+
+  const menu = (
+    <Menu>
+      <Menu.Item>
+        <Button type="link" onClick={() => setLevelVisible(true)}><Icon type="plus"/>层</Button>
+      </Menu.Item>
+      <Menu.Item>
+        <Button type="link" onClick={() => setUnitVisible(true)}>编辑</Button>
+      </Menu.Item>
+      <Menu.Item>
+        <Popconfirm
+         title={`确认删除 ${roomInfo.unitName} ?`}
+         onConfirm={handleDelete}
+         okText="是"
+         cancelText="否"
+        >
+          <Button type="danger" ghost style={{border: 'none', boxShadow: 'none'}}>删除</Button>
+        </Popconfirm>
+      </Menu.Item>
+    </Menu>
+  )
+
+  return (
+    <div style={{textAlign: 'center', fontSize: '1.2em', lineHeight: '3.5em'}} >
+      <Dropdown overlay={menu} trigger={['contextMenu']} placement="topCenter">
+        <div style={{cursor: 'pointer'}}>{roomInfo.unitName}</div>
+      </Dropdown>
+      <Prompt visible={unitVisible} onOk={handleEdit} onCancel={() => setUnitVisible(false)} placeholder="请填写单元名称" />
+      <Prompt visible={levelVisible} onOk={handleLevelAdd} onCancel={() => setLevelVisible(false)} placeholder="请填写楼层名称" />
+    </div>
+  )
+}

src/pages/property/building/list.jsx

@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from 'react'
+import { PageHeader, Tabs, Spin, Button, Icon, Modal, notification } from 'antd'
+import router from 'umi/router'
+import { fetch, fetchList, apis } from '@/utils/request'
+import Prompt from '@/components/Prompt'
+import Building from './components/Building'
+
+const fetchPhaseList = fetch(apis.buildingOwnerInfo.getPhaseList)
+const addNode = fetch(apis.buildingOwnerInfo.addNode)
+const deleteNode = fetch(apis.buildingOwnerInfo.deleteNode)
+
+export default props => {
+  const [phaseList, setPhaseList] = useState([])
+  const [loading, setLoading] = useState(false)
+  const [phaseVisible, setPhaseVisible] = useState(false)
+
+  const handleEdit = (key, act) => {
+    const phase = phaseList[key - 0]
+
+    if (act === 'remove') {
+      Modal.confirm({
+        title: `确认删除 ${phase.name} 数据?`,
+        content: '谨慎操作, 数据不可恢复',
+        onOk: () => {
+          deleteNode({ data: {
+            id: phase.id,
+            name: phase.name,
+            type: 'building', // 删除的时候, type 是 building 。这个接口比较诡异
+            nodeNumber: phase.name,
+          }}).then(() => {
+            notification.success({message: '删除成功'})
+            setPhaseList(phaseList.filter(x => x.id !== phase.id))
+          })
+
+        }
+      })
+    }
+  }
+
+  const handleBatchImport = () => {
+    router.push('/property/buildingInfo/importExcel')
+  }
+
+  const handleAddPhase = v => {
+    addNode({ data: {
+      type: 'phase',
+      nodeNumber: v,
+    }}).then((res) => {
+      notification.success({message: '添加成功'})
+      setPhaseList(phaseList.concat(res))
+    })
+    setPhaseVisible(false)
+  }
+
+  // 获取期
+  useEffect(() => {
+    setLoading(true)
+    fetchPhaseList().then(res => {
+      setPhaseList(res)
+      setLoading(false)
+    }).catch(() => setLoading(false))
+  }, [])
+
+  return (
+    <div>
+      <PageHeader
+        title="楼栋管理"
+        backIcon={false}
+        extra={<Button type="link" onClick={handleBatchImport}><Icon type="upload"/>批量导入</Button>}
+      />
+      <div style={{marginTop: 16}}>
+        <Spin spinning={loading}>
+          <Tabs
+            defaultActiveKey="0"
+            type="editable-card"
+            onEdit={handleEdit}
+            tabBarExtraContent={<Button type="link" onClick={() => setPhaseVisible(true)}><Icon type="plus" />期</Button>}
+            hideAdd={true}
+            >
+          {
+            phaseList.map((phase, index) => {
+              return (
+                <Tabs.TabPane tab={phase.name} key={`${index}`}>
+                  <Building phase={phase} />
+                </Tabs.TabPane>
+              )
+            })
+          }
+          </Tabs>
+        </Spin>
+      </div>
+      <Prompt visible={phaseVisible} onOk={handleAddPhase} onCancel={() => setPhaseVisible(false)} placeholder="请填写期数名称" />
+    </div>
+  )
+}

src/pages/property/proprietor/Add.jsx

@@ -182,6 +182,17 @@ export default Form.create()(props => {
             props.form.getFieldDecorator('ownerName')(<Input />)
           }
         </Form.Item>
+        <Form.Item label="身份证号">
+          {
+            props.form.getFieldDecorator('idCard', {
+              rules: [
+                {
+                  len: 18, message: '身份证号长度为18位'
+                }
+              ]
+            })(<Input />)
+          }
+        </Form.Item>
         <Form.Item label="性别">
           {
             props.form.getFieldDecorator('gender')(

src/pages/property/proprietor/index.jsx

@@ -271,7 +271,7 @@ export default props => {
         />
         <Table.Column title="手机号" dataIndex="ownerTel" key="ownerTel" />
         <Table.Column title="身份证" dataIndex="idCard" key="idCard" />
-        <Table.Column title="性别" dataIndex="idCard" key="idCard1" render={t => (t.substring(-2, 1) - 0) % 2 === 1 ? '男' : '女'} />
+        <Table.Column title="性别" dataIndex="idCard" key="idCard1" render={t => !t ? '' : (t.substring(-2, 1) - 0) % 2 === 1 ? '男' : '女'} />
         <Table.Column
           title="房间号"
           dataIndex="roomNoName"

src/services/buildingOwnerInfo_api.js

@@ -44,6 +44,13 @@ export default prefix => {
       action: `admin.${moduleName}.roomno`
     },
 
+    //  查询 楼栋/单元/楼层/户号
+    getAllRoomNoList: {
+      url: `${prefix}/${moduleName}/building-room/list`,
+      method: 'get',
+      action: `admin.${moduleName}.all-room`
+    },
+
     // 获取楼栋户主信息列表
     buildingList: {
       url: `${prefix}/${moduleName}/list`,
@@ -135,6 +142,13 @@ export default prefix => {
       action: `admin.${moduleName}.addnode`
     },
 
+    // 编辑当前期/栋/单元/层/户/节点
+    updateNode: {
+      url: `${prefix}/${moduleName}/updatenode`,
+      method: 'post',
+      action: `admin.${moduleName}.updatenode`
+    },
+
     // 删除当前期/栋/单元/层/户/节点
     deleteNode: {
       url: `${prefix}/${moduleName}/deletenode`,