feats

config/routes.js

@@ -568,6 +568,11 @@ export default [
                 name: '业主管理',
                 component: './property/proprietor'
               },
+              {
+                path: 'proprietor/add',
+                name: '增加业主',
+                component: './property/proprietor/Add'
+              },
               {
                 path: 'proprietor/detail',
                 name: '业主详情',

src/components/Prompt/index.jsx

@@ -15,6 +15,12 @@ export default props => {
     }
   }
 
+  const handleCancel = () => {
+    if (props.onCancel) {
+      return props.onCancel()
+    }
+  }
+
   return (
     <Modal
       {...props}
@@ -22,6 +28,7 @@ export default props => {
       closable={false}
       maskClosable={false}
       onOk={handleOk}
+      onCancel={handleCancel}
     >
       <Input value={value} onChange={handleValue} />
     </Modal>

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

@@ -18,15 +18,17 @@ export default props => {
 
   const menu = (
     <Menu onClick={handleMenuClick}>
-      <Menu.Item key="add">增加</Menu.Item>
+      {
+        props.data.type !== 'end' && (<Menu.Item key="add">增加子节点</Menu.Item>)
+      }
       <Menu.Item key="delete">删除</Menu.Item>
     </Menu>
   );
 
   return (
-    <Dropdown menu={menu} size="small">
+    <Dropdown overlay={menu} size="small">
       <Button type="link" size="small">
-        <span>{props.data.title}</span>
+        <span>{props.data.name}</span>
         <Icon type="edit" />
       </Button>
     </Dropdown>

src/pages/property/building/index.jsx

@@ -1,29 +1,81 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react'
-import { Tree, Button } from 'antd'
+import { Tree, Button, Icon, Modal } from 'antd'
 import router from 'umi/router'
 import Prompt from '@/components/Prompt'
 import { fetch, fetchList, apis } from '@/utils/request'
 import NodeLabel from './components/NodeLabel'
 
-const getTrees = fetchList(apis.buildingOwnerInfo.getTrees)
+const getTrees = fetch(apis.buildingOwnerInfo.getTrees)
 const addNode = fetch(apis.buildingOwnerInfo.addNode)
 const deleteNode = fetch(apis.buildingOwnerInfo.deleteNode)
 
+const noticeAndReload = (content, type = 'success') => {
+  Modal[type]({
+    content,
+    onOk: () => {
+      window.location.reload()
+    }
+  })
+}
+
 export default props => {
   const nodeRef = useRef()
   const [promptVisible, setPromptVisible] = useState(false)
   const [treeData, setTreeData] = useState()
 
-  const getTreeData = nodeData => {
+  const updateTreeData = (origin, parent, nodes) => {
+    if (!parent) {
+      const newData = [
+        ...(origin || []),
+        ...(Array.isArray(nodes) ? nodes : [nodes])
+      ]
+      return newData
+    }
+
+    const newData = (origin || []).map(x => {
+      if (x.id === parent) {
+        if (Array.isArray(nodes)) {
+          x.children = [
+            ...(x.children || []),
+            ...nodes
+          ]
+        } else {
+          x.children = [
+            ...(x.children || []),
+            nodes
+          ]
+        }
+      } else {
+        if (x.children && x.children.length) {
+          x.children = updateTreeData(x.children, parent, nodes)
+        }
+      }
+
+      return x
+    })
+
+    return newData
+  }
+
+  const getTreeData = (nodeData, refresh) => {
+
     const query = nodeData ? {
-      id: nodeData.id,
-      name: nodeData.name,
-      treeType: nodeData.treeType,
-      nodeNumber: nodeData.nodeNumber,
+      id: nodeData.props.dataRef.id,
+      name: nodeData.props.dataRef.name,
+      treeType: nodeData.props.dataRef.type,
+      nodeNumber: nodeData.props.dataRef.nodeNumber,
     } : { treeType: 'phase' }
 
-    getTrees(query).then(res => {
-      setTreeData(res.filter(x => x && Object.keys(x).length))
+    return new Promise((resolve, reject) => {
+      getTrees({ params: query }).then(res => {
+        if (refresh) {
+          setTreeData(res)
+        } else {
+          const data = updateTreeData(treeData, query.id, res)
+          setTreeData(data)
+        }
+        resolve()
+      }).catch(err => reject(err))
     })
   }
 
@@ -38,11 +90,13 @@ export default props => {
     addNode({ data: {
       id: nodeData.id,
       name: nodeData.name,
-      treeType: nodeData.treeType,
+      type: nodeData.type,
       nodeNumber: promptData,
     }}).then(() => {
       // 刷新页面, 重新请求数据
-      getTreeData()
+      // 直接刷数据, ant 有 bug
+      // getTreeData(null, true)
+      noticeAndReload('添加成功')
     })
   }
 
@@ -50,11 +104,13 @@ export default props => {
     deleteNode({ data: {
       id: nodeData.id,
       name: nodeData.name,
-      treeType: nodeData.treeType,
+      type: nodeData.type,
       nodeNumber: nodeData.nodeNumber,
     }}).then(() => {
       // 刷新页面, 重新请求数据
-      getTreeData()
+      // 直接刷数据, ant 有 bug
+      // getTreeData(null, true)
+      noticeAndReload('删除成功')
     })
   }
 
@@ -63,15 +119,16 @@ export default props => {
   }
 
   useEffect(() => {
-    getTreeData()
+    getTreeData(null, true)
   }, [])
 
   const renderTreeNodes = data => data.map(node => {
     return (      
       <Tree.TreeNode
         {...node}
-        key={node.key}
+        key={node.id}
         dataRef={node}
+        isLeaf={node.type === 'end'}
         title={(<NodeLabel data={node} onAdd={showPrompt} onDelete={handleNodeDelete} />)}
       >
         {
@@ -83,8 +140,9 @@ export default props => {
 
   return (
     <>
-      <div>
-        <Button type="primary" onClick={handleBatchImport}>批量导入小区楼栋信息</Button>
+      <div style={{ marginBottom: '24px' }}>
+        <Button onClick={() => showPrompt({ type: 'phase' })}><Icon type="plus" />增加顶级节点</Button>
+        <Button type="link" onClick={handleBatchImport} style={{ marginLeft: '24px' }}>批量导入小区楼栋信息</Button>
       </div>
       {
         treeData && treeData.length ? (
@@ -95,7 +153,7 @@ export default props => {
           <p style={{ color: '#aaa', fontSize: '0.8em', textAlign: 'center', marginTop: '16px' }}>暂无数据</p>
         )
       }
-      <Prompt visible={promptVisible} onOk={handleNodeAdd} />
+      <Prompt visible={promptVisible} onOk={handleNodeAdd} onCancel={() => setPromptVisible(false)} />
     </>
   )
 }

src/pages/property/proprietor/Add.jsx

@@ -0,0 +1,243 @@
+import React, { useRef, useState, useEffect } from 'react'
+import { Form, Input, Select, Button, Radio, Modal, Descriptions } from 'antd'
+import router from 'umi/router'
+import { fetch, apis } from '@/utils/request'
+
+const fetchPhaseList = fetch(apis.buildingOwnerInfo.getPhaseList)
+const fetchBuildingList = fetch(apis.buildingOwnerInfo.getBuildingList)
+const fetchUnitList = fetch(apis.buildingOwnerInfo.getUnitList)
+const fetchLevelList = fetch(apis.buildingOwnerInfo.getLevelList)
+const fetchRoomNoList = fetch(apis.buildingOwnerInfo.getRoomNoList)
+const addPerson = fetch(apis.buildingOwnerInfo.addBuilding)
+const taUserHasOwner = fetch(apis.propUser.taUserHasOwner)
+const taUserHas = fetch(apis.propUser.taUserHas)
+
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 6 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 12 },
+  },
+}
+
+const tailFormItemLayout = {
+  wrapperCol: {
+    xs: {
+      span: 24,
+      offset: 0,
+    },
+    sm: {
+      span: 16,
+      offset: 6,
+    },
+  },
+}
+
+export default Form.create()(props => {
+  const [phaseList, setPhaseList] = useState([])
+  const [buildingList, setBuildingList] = useState([])
+  const [unitList, setUnitList] = useState([])
+  const [levelList, setLevelList] = useState([])
+  const [roomNoList, setRoomNoList] = useState([])
+
+  const [phaseId, setPhaseId] = useState()
+  const [buildingId, setBuildingId] = useState()
+  const [unitId, setUnitId] = useState()
+  const [levelId, setLevelId] = useState()
+  const [roomNoId, setRoomNoId] = useState()
+
+  const [owerExist, setOwnerExist] = useState(false)
+  const [telAccUser, setTelAccUser] = useState()
+  
+  const handlePhaseChange = e => setPhaseId(e)
+  const handleBuildingChange = e => setBuildingId(e)
+  const handleUnitChange = e => setUnitId(e)
+  const handleLevelChange = e => setLevelId(e)
+  const handleRoomChange = e => setRoomNoId(e)
+  const handlePhoneBlur = e => {
+    const ownerTel = props.form.getFieldValue('ownerTel')
+    if (ownerTel) {
+      taUserHas({params: {ownerTel}}).then(res => {
+        setTelAccUser(res)
+      })
+    }
+  }
+
+  // 获取期
+  useEffect(() => {
+    fetchPhaseList().then(res => setPhaseList(res))
+  }, [])
+
+  // 楼栋
+  useEffect(() => {
+    if (phaseId) {
+      fetchBuildingList({params: {phaseId}}).then(res => setBuildingList(res))
+    }
+    setBuildingId()
+  }, [phaseId])
+
+  // 单元
+  useEffect(() => {
+    if (phaseId && buildingId) {
+      fetchUnitList({params: {phaseId, buildingId}}).then(res => setUnitList(res))
+    }
+    setUnitId()
+  }, [phaseId, buildingId])
+
+  // 楼层
+  useEffect(() => {
+    if (phaseId && buildingId && unitId) {
+      fetchLevelList({params: {phaseId, buildingId, unitId}}).then(res => setLevelList(res))
+    }
+    setLevelId()
+  }, [phaseId, buildingId, unitId])
+
+  // 房号
+  useEffect(() => {
+    if (phaseId && buildingId && unitId && levelId) {
+      fetchRoomNoList({params: {phaseId, buildingId, unitId, levelId}}).then(res => setRoomNoList(res))
+    }
+    setRoomNoId()
+  }, [phaseId, buildingId, unitId, levelId])
+
+  useEffect(() => {
+    if (roomNoId) {
+      taUserHasOwner({ params: {phaseId, buildingId, unitId, levelId, roomNoId} }).then(res => {
+        setOwnerExist(res.boolRole)
+      })
+    }
+  }, [roomNoId])
+  
+  useEffect(() => {
+    if (roomNoId) {
+      taUserHasOwner({ params: {phaseId, buildingId, unitId, levelId, roomNoId} }).then(res => {
+        setOwnerExist(res.boolRole)
+      })
+    }
+  }, [roomNoId])
+
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    if (telAccUser) {
+      return
+    }
+
+    props.form.validateFields((err, values) => {
+      if (!err) {
+        const data = {
+          ...values,
+          phaseId,
+          buildingId,
+          unitId,
+          levelId,
+          roomNoId
+        }
+
+        addPerson({ data }).then(res => {
+          Modal.success({
+            content: '添加成功',
+            onOk: () => {
+              router.go(-1)
+            }
+          })
+        })
+      }
+    });
+  }
+
+  return (
+    <div>
+      <Form {...formItemLayout} onSubmit={handleSubmit}>
+        <Form.Item label="期/区" required>
+          <Select value={phaseId} onChange={handlePhaseChange} style={{ minWidth: '120px' }} placeholder="期/区">
+            {
+              phaseList.map(x => (<Select.Option key={x.id} value={x.id}>{x.name}</Select.Option>))
+            }
+          </Select>
+        </Form.Item>
+        <Form.Item label="栋/幢" required>
+          <Select value={buildingId} onChange={handleBuildingChange} style={{ minWidth: '120px' }} placeholder="栋/幢">
+            {
+              buildingList.map(x => (<Select.Option key={x.id} value={x.id}>{x.name}</Select.Option>))
+            }
+          </Select>
+        </Form.Item>
+        <Form.Item label="单元" required>
+          <Select value={unitId} onChange={handleUnitChange} style={{ minWidth: '120px' }} placeholder="单元">
+            {
+              unitList.map(x => (<Select.Option key={x.id} value={x.id}>{x.name}</Select.Option>))
+            }
+          </Select>
+        </Form.Item>
+        <Form.Item label="楼层" required>
+          <Select value={levelId} onChange={handleLevelChange} style={{ minWidth: '120px' }} placeholder="楼层">
+            {
+              levelList.map(x => (<Select.Option key={x.id} value={x.id}>{x.name}</Select.Option>))
+            }
+          </Select>
+        </Form.Item>
+        <Form.Item label="户号" required>
+          <Select value={roomNoId} onChange={handleRoomChange} style={{ minWidth: '120px' }} placeholder="户号">
+            {
+              roomNoList.map(x => (<Select.Option key={x.id} value={x.id}>{x.name}</Select.Option>))
+            }
+          </Select>
+        </Form.Item>
+        <Form.Item label="手机号">
+          {
+            props.form.getFieldDecorator('ownerTel', {
+              rules: [
+                { required: true, message: '请填写手机号' }
+              ]
+            })(<Input onBlur={handlePhoneBlur} />)
+          }
+        </Form.Item>
+        <Form.Item label="身份">
+          {
+            props.form.getFieldDecorator('roleId')(
+              <Select style={{ minWidth: '120px' }} placeholder="请选择身份">
+                <Select.Option value="1" disabled={owerExist}>户主</Select.Option>
+                <Select.Option value="2">租客</Select.Option>
+                <Select.Option value="3">家属</Select.Option>
+              </Select>
+            )
+          }
+        </Form.Item>
+        <Form.Item label="姓名">
+          {
+            props.form.getFieldDecorator('ownerName')(<Input />)
+          }
+        </Form.Item>
+        <Form.Item label="性别">
+          {
+            props.form.getFieldDecorator('gender')(
+              <Radio.Group>
+                <Radio value="1">男</Radio>
+                <Radio value="2">女</Radio>
+              </Radio.Group>
+            )
+          }
+        </Form.Item>
+        {
+          telAccUser && (
+            <Form.Item label=" " colon={false}>
+              <Descriptions column={3}>
+                <Descriptions.Item label="姓名">{telAccUser.userName}</Descriptions.Item>
+                <Descriptions.Item label="性别">{telAccUser.gender === '2' ? '女' : '男'}</Descriptions.Item>
+                <Descriptions.Item label="身份证号">{(telAccUser.idCard || '').replace(/^(.{4})(?:\w+)(.{4})$/, "$1****$2")}</Descriptions.Item>
+              </Descriptions>
+            </Form.Item>
+          )
+        }
+        <Form.Item {...tailFormItemLayout}>
+          <Button type="primary" htmlType="submit">提交</Button>
+          <Button style={{ marginLeft: '48px' }} onClick={() => router.go(-1)}>取消</Button>
+        </Form.Item>
+      </Form>
+    </div>
+  )
+})

src/pages/property/proprietor/index.jsx

@@ -1,15 +1,15 @@
 import React, { useState, useEffect } from 'react'
-import { Select, Spin, Table, Button, Form, Input } from 'antd'
+import { Select, Spin, Table, Button, Form, Input, Icon } from 'antd'
 import NavLink from 'umi/navlink'
-import { fetchList, apis } from '@/utils/request'
+import { fetch, 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 fetchPhaseList = fetch(apis.buildingOwnerInfo.getPhaseList)
+const fetchBuildingList = fetch(apis.buildingOwnerInfo.getBuildingList)
+const fetchUnitList = fetch(apis.buildingOwnerInfo.getUnitList)
+const fetchLevelList = fetch(apis.buildingOwnerInfo.getLevelList)
+const fetchRoomNoList = fetch(apis.buildingOwnerInfo.getRoomNoList)
 
 const Condition = props => {
   const [phaseList, setPhaseList] = useState([])
@@ -18,79 +18,98 @@ const Condition = props => {
   const [levelList, setLevelList] = useState([])
   const [roomNoList, setRoomNoList] = useState([])
 
+  const [phaseId, setPhaseId] = useState()
+  const [buildingId, setBuildingId] = useState()
+  const [unitId, setUnitId] = useState()
+  const [levelId, setLevelId] = useState()
+  const [roomNoId, setRoomNoId] = useState()
+
+  // 获取期
   useEffect(() => {
-    // getPhaseList()
+    fetchPhaseList().then(res => setPhaseList(res))
   }, [])
 
+  // 楼栋
+  useEffect(() => {
+    if (phaseId) {
+      fetchBuildingList({params: {phaseId}}).then(res => setBuildingList(res))
+    }
+    setBuildingId()
+  }, [phaseId])
+
+  // 单元
+  useEffect(() => {
+    if (phaseId && buildingId) {
+      fetchUnitList({params: {phaseId, buildingId}}).then(res => setUnitList(res))
+    }
+    setUnitId()
+  }, [phaseId, buildingId])
+
+  // 楼层
+  useEffect(() => {
+    if (phaseId && buildingId && unitId) {
+      fetchLevelList({params: {phaseId, buildingId, unitId}}).then(res => setLevelList(res))
+    }
+    setLevelId()
+  }, [phaseId, buildingId, unitId])
+
+  // 房号
+  useEffect(() => {
+    if (phaseId && buildingId && unitId && levelId) {
+      fetchRoomNoList({params: {phaseId, buildingId, unitId, levelId}}).then(res => setRoomNoList(res))
+    }
+    setRoomNoId()
+  }, [phaseId, buildingId, unitId, levelId])
+
   return (
     <Search
       onSearch={props.onSearch}
       onReset={props.onReset}
       render={form => {
-        const { getFieldDecorator, setFieldsValue } = form
+        const { getFieldDecorator } = form
         
-        const getPhaseList = () => {}
-        const getBuildingList = () => {}
-        const getUnitList = () => {}
-        const getLevelList = () => {}
-        const getRoomNoList  = () => {}
+        const handlePhaseChange = e => setPhaseId(e)
+        const handleBuildingChange = e => setBuildingId(e)
+        const handleUnitChange = e => setUnitId(e)
+        const handleLevelChange = e => setLevelId(e)
+        const handleRoomChange = e => setRoomNoId(e)
 
         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>
-              )
-            }
+              <Select value={phaseId} onChange={handlePhaseChange} 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>
-              )
-            }
+              <Select value={buildingId} onChange={handleBuildingChange} 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>
-              )
-            }
+              <Select value={unitId} onChange={handleUnitChange} 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>
-              )
-            }
+              <Select value={levelId} onChange={handleLevelChange} 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>
-              )
-            }
+              <Select value={roomNoId} onChange={handleRoomChange} style={{ minWidth: '120px' }} placeholder="户号">
+                {
+                  roomNoList.map(x => (<Select.Option key={x.id} value={x.id}>{x.name}</Select.Option>))
+                }
+              </Select>
             </Form.Item>
             <Form.Item>
             {
@@ -140,10 +159,10 @@ export default props => {
     <div>
       <Condition onSearch={handleSearch} onReset={handleSearch} />
       <div style={{ margin: '24px 0' }}>
-        <NavLink to={`/xxx`}>
+        <NavLink to={`/property/proprietor/add`}>
           <Button type="primary">添加</Button>
         </NavLink>
-        <Button style={{ marginLeft: '24px' }}>批量导入业主资料</Button>
+        <Button type="link"><Icon type="upload"/>批量导入业主资料</Button>
       </div>
       <Spin spinning={loading}>
         <List dataSource={listData} onPageChange={handlePageChange} rowKey="userVerifyId">

src/services/prop_user_api.js

@@ -1,16 +1,34 @@
 
+const moduleName = 'prop-user'
+
 export default prefix => {
   return {
     // 获取审核列表
     userVerifyAll: {
-      url: `${prefix}/user/verify/all`,
+      url: `${prefix}/${moduleName}/verify/all`,
       method: 'get',
+      action: `admin.${moduleName}.verify.all`
     },
 
     // 审核用户
     userVerifyAudit: {
-      url: `${prefix}/user/verify/audit/:id`,
+      url: `${prefix}/${moduleName}/verify/audit/:id`,
       method: 'put',
+      action: `admin.${moduleName}.verify.audit`
+    },
+
+    // 校验移动端手机号是否注册
+    taUserHas: {
+      url: `${prefix}/${moduleName}/has`,
+      method: 'get',
+      action: `admin.${moduleName}.has`
+    },
+
+    // 校验移动端手机号是否注册以及户主
+    taUserHasOwner: {
+      url: `${prefix}/${moduleName}/hasOwner`,
+      method: 'get',
+      action: `admin.${moduleName}.hasOwner`
     }
   }
 }