feats

src/components/Poster/Form.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { Button, Form, Input } from 'antd'
+import ImageUpload from '@/components/XForm/ImageUpload'
+
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 3 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 19 },
+  },
+}
+
+const PosterForm = (props) => {
+  const { form } = props
+  const { getFieldDecorator } = form
+
+  const handleImageChange = (img) => {
+    props.onImageChange(img)
+  }
+
+  return (
+    <Form {...formItemLayout}>
+      <Form.Item label="海报图" help="图片建议尺寸：1080*1925px，比例9:16,格式：jpg">
+      {getFieldDecorator('posterImg', {
+          rules: [{ required: true, message: '请楼盘海报图' }],
+      })(<ImageUpload onChange={handleImageChange} />)}
+      </Form.Item>
+      <Form.Item label="海报标题">
+      {getFieldDecorator('posterTitle')(<Input />)}
+      </Form.Item>
+      <Form.Item label="海报描述">
+      {getFieldDecorator('posterDescription')(<Input.TextArea row={4} />)}
+      </Form.Item>
+      <Form.Item label=" " colon={false} style={{marginTop: '2em'}}>
+        <Button style={{marginLeft: '4em'}} type="primary" htmlType="submit">保存</Button>
+        <Button style={{marginLeft: '2em'}} onClick={props.onCancel}>取消</Button>
+      </Form.Item>
+    </Form>
+  )
+}
+
+export default Form.create({})(PosterForm)

src/components/Poster/Preview.jsx

@@ -0,0 +1,34 @@
+import React, { useMemo } from 'react'
+import { Avatar, Row, Col, Empty, Typography } from 'antd'
+import Styles from './style.less'
+
+const { Title } = Typography;
+const qrStyle = {
+  width: '100%',
+  height: '100%',
+}
+
+export default (props) => {
+  const qrCode = useMemo(() => require('@/assets/xiaochengxu.png'), [])
+  const avatar = useMemo(() => require('@/assets/touxiang.jpg'), [])
+
+  return (
+    <div>
+      <div className={Styles.image}>
+        {
+          props.img ?
+            <img src={props.img} alt="" style={{width: '100%', height: '100%'}} /> :
+            <div style={{paddingTop: '200px'}}><Empty description="暂无海报图" /></div>
+        }
+      </div>
+      <Row gutter={24} style={{padding: '2em'}}>
+        <Col span={6}><Avatar size={78} src={avatar} /></Col>
+        <Col span={10}>
+          <Title level={4}>新联家</Title>
+          <div>长按识别看房</div>
+        </Col>
+        <Col span={8}><img src={qrCode} alt="" style={qrStyle} /></Col>
+      </Row>
+    </div>
+  )
+}

src/components/Poster/index.jsx

@@ -0,0 +1,25 @@
+import React, { useMemo, useState } from 'react'
+import { getImgURL } from '@/utils/image'
+import Preview from './Preview'
+import Form from './Form'
+import Styles from './style.less'
+
+export default (props) => {
+  const { target } = props
+  const { id: targetId, type: targetType } = target
+
+  const [poster, setPoster] = useState()
+
+  const posterImage = useMemo(() => (poster ? getImgURL(poster) : undefined), [poster]);
+
+  return (
+    <div className={Styles['building-poster']}>
+      <div className={Styles['poster-preview']}>
+        <Preview img={posterImage} />
+      </div>
+      <div className={Styles['poster-form']}>
+        <Form onImageChange={setPoster} />
+      </div>
+    </div>
+  )
+}

src/components/Poster/style.less

@@ -0,0 +1,25 @@
+.building-poster {
+  display: flex;
+  margin: 2em;
+
+  .poster-preview {
+    flex: none;
+    width: 375px;
+    height: 810px;
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px 3px;
+  
+    .image {
+      width: 100%;
+      height: 667px;
+      border: 0;
+      background: rgba(0, 0, 0, 0.05);
+    }
+  }
+
+  .poster-form {
+    flex: auto;
+    margin-left: 4em;
+    max-width: 800px;
+  }
+}

src/components/Share/index.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Button, Form, Input } from 'antd'
+import ImageUpload from '@/components/XForm/ImageUpload'
+
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 3 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 19 },
+  },
+}
+
+const ShareForm = (props) => {
+  const { target, form } = props
+  const { id: targetId, type: shareContentType } = target
+  const { getFieldDecorator } = form
+
+  return (
+    <Form {...formItemLayout}>
+      <Form.Item label="分享标题">
+      {getFieldDecorator('shareContentTitle', {
+        rules: [{required: true, message: '请填写分享标题'}]
+      })(<Input />)}
+      </Form.Item>
+      <Form.Item label="分享图" help="建议图片尺寸：750*600px，比例5:4,格式：jpg">
+      {getFieldDecorator('posterImg', {
+          rules: [{ required: true, message: '请上传分享图' }],
+      })(<ImageUpload />)}
+      </Form.Item>
+      <Form.Item label=" " colon={false} style={{marginTop: '2em'}}>
+        <Button style={{marginLeft: '4em'}} type="primary" htmlType="submit">保存</Button>
+        <Button style={{marginLeft: '2em'}} onClick={props.onCancel}>取消</Button>
+      </Form.Item>
+    </Form>
+  )
+}
+
+export default Form.create({})(ShareForm)

src/components/TableList/index.jsx

@@ -10,9 +10,9 @@ export default React.forwardRef((props, ref) => {
   const mounted = useRef(false);
   const [list, setList] = useState();
   const [pageTotal, setPageTotal] = useState(0);
-  const [pageConfig, setPageConfig] = useState({ current: 1, pageSize: 10 });
 
-  const { api, urlData, params, onPageChange, postData=()=>{}, ...tableProps } = props;
+  const { api, urlData, params, onPageChange, postData=()=>{}, page, ...tableProps } = props;
+  const [pageConfig, setPageConfig] = useState({ current: 1, pageSize: !page ? 500 : 10, ...(page || {}) });
 
   // 更新分页
   const updatePage = useCallback(
@@ -37,9 +37,9 @@ export default React.forwardRef((props, ref) => {
 
 
     const queryParams = {
-      ...(postData(params) || params || {}),
       pageNum: pageConfig.current,
       pageSize: pageConfig.pageSize,
+      ...(postData(params) || params || {}),
     };
 
     request({ ...api, urlData: urlData || undefined, params: queryParams })
@@ -94,7 +94,12 @@ export default React.forwardRef((props, ref) => {
   return (
     <>
       <TableList loading={loading} dataSource={list} {...tableProps} />
-      <Pagination {...pageConfig} total={pageTotal} onChange={updatePage} />
+      {
+        props.page !== false &&
+        (
+          <Pagination {...pageConfig} total={pageTotal} onChange={updatePage} />
+        )
+      }
     </>
   );
 });

src/pages/building/Edit/AlbumList/Form.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { Button, Form, Input, Select } from 'antd'
+import ImageListUpload from '@/components/XForm/ImageListUpload'
+import ModalForm from '../components/ModalForm'
+
+const AMForm = (props) => {
+  const { visible, onCancel, form } = props
+  const { getFieldDecorator } = form
+
+  return (
+    <ModalForm
+      title="相册设置"
+      visible={visible}
+      onCancel={onCancel}
+    >
+      <Form.Item label="相册名称">
+        {getFieldDecorator('apartmentName', {
+          rules: [
+            { required: true, message: '请填写相册名称' },
+            { max: 10, message: '相册名称不超过10个字符' },
+          ],
+        })(<Input placeholder="相册名称不超过10个字符"/>)}
+      </Form.Item>
+      <Form.Item label="相册图片" help="建议图片尺寸750*600，比例5:4,格式：jpg">
+      {getFieldDecorator('img', {
+          rules: [{ required: true, message: '请上传相册图片' }],
+      })(
+        <ImageListUpload />,
+      )}
+      </Form.Item>
+      <Form.Item label=" " colon={false} style={{marginTop: '2em'}}>
+        <Button style={{marginLeft: '4em'}} type="primary" htmlType="submit">保存</Button>
+        <Button style={{marginLeft: '2em'}} onClick={props.onCancel}>取消</Button>
+      </Form.Item>
+    </ModalForm>
+  )
+}
+
+export default Form.create({})(AMForm)

src/pages/building/Edit/AlbumList/List.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Button, Collapse, Popconfirm } from 'antd'
+
+const { Panel } = Collapse;
+
+const Extra = (props) => (
+  <>
+    <Button type="link" size="small" onClick={props.onRename}>重命名</Button>
+    <Popconfirm
+      title="Are you sure delete this task?"
+      onConfirm={props.onDelete}
+    >
+      <Button type="link" size="small" style={{color: 'red'}}>删除</Button>
+    </Popconfirm>    
+  </>
+)
+
+export default (props) => {
+
+  return (
+    <Collapse defaultActiveKey={['1']} expandIconPosition="right" style={{marginTop: '2em'}}>
+      <Panel header="This is panel header 1" key="1" extra={<Extra />}>
+        <div>123</div>
+      </Panel>
+      <Panel header="This is panel header 2" key="2" extra={<Extra />}>
+        <div>456</div>
+      </Panel>
+    </Collapse>
+  )
+}

src/pages/building/Edit/AlbumList/index.jsx

@@ -0,0 +1,18 @@
+import React, { useState } from 'react'
+import { Button } from 'antd'
+import Form from './Form'
+import List from './List'
+
+export default (props) => {
+  const [visible, setVisible] = useState(false)
+
+  return (
+    <div>
+      <div>
+        <Button type="primary" onClick={() => setVisible(true)}>新增户型</Button>
+      </div>
+      <Form visible={visible} onCancel={() => setVisible(false)} />
+      <List />
+    </div>
+  )
+}

src/pages/building/Edit/Apartment/Form.jsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import { Button, Form, Input, Select } from 'antd'
+import ImageUpload from '@/components/XForm/ImageUpload'
+import ModalForm from '../components/ModalForm'
+import InputNumber from '../components/InputNumber'
+import { validMinNum } from '../utils'
+
+const Option = Select.Option
+const fullWidth = { width: '100%' }
+
+const AMForm = (props) => {
+  const { visible, onCancel, form } = props
+  const { getFieldDecorator } = form
+
+  return (
+    <ModalForm
+      title="户型设置"
+      visible={visible}
+      onCancel={onCancel}
+    >
+      <Form.Item label="编号" style={{ display: 'none' }}>
+          {getFieldDecorator('apartmentId')(<Input />)}
+      </Form.Item>
+      <Form.Item label="户型名称">
+        {getFieldDecorator('apartmentName', {
+          rules: [
+            { required: true, message: '请填写户型名称' },
+            { max: 10, message: '户型名称不超过10个字符' },
+          ],
+        })(<Input placeholder="户型名称不超过10个字符"/>)}
+      </Form.Item>
+      <Form.Item label="销售状态">
+        {getFieldDecorator('marketStatus', {
+          rules: [{ required: true, message: '请选择销售状态' }],
+        })(
+          <Select placeholder="销售状态">
+            <Option value="未开盘">未开盘</Option>
+            <Option value="在售">在售</Option>
+            <Option value="售罄">售罄</Option>
+          </Select>
+        )}
+      </Form.Item>
+      <Form.Item label="图片" help="建议图片尺寸336px*336px，比例1:1,格式：jpg">
+      {getFieldDecorator('img', {
+          rules: [{ required: true, message: '请上传户型图片' }],
+      })(
+        <ImageUpload />,
+      )}
+      </Form.Item>
+      <Form.Item label="厅室">
+        {getFieldDecorator('houseType', {
+          rules: [{ required: true, message: '请填写户型厅室' }],
+        })(<Input placeholder="例如: 三室一厅" />)}
+      </Form.Item>
+      <Form.Item label="面积">
+        {getFieldDecorator('buildingArea', {
+            rules: [{ validator: validMinNum }]
+          })(<InputNumber precision={2} min={0} step={0.01} addonAfter="㎡" />)}
+      </Form.Item>
+      <Form.Item label="使用面积">
+        {getFieldDecorator('insideArea', {
+            rules: [{ validator: validMinNum }]
+          })(<InputNumber precision={2} min={0} step={0.01} addonAfter="㎡" />)}
+      </Form.Item>
+      <Form.Item label="权重" help="数值越大越靠前">
+        {getFieldDecorator('orderNo', {
+            rules: [{ validator: validMinNum }]
+          })(<InputNumber min={0} step={1} style={fullWidth} />)}
+      </Form.Item>
+      <Form.Item label=" " colon={false} style={{marginTop: '2em'}}>
+        <Button style={{marginLeft: '4em'}} type="primary" htmlType="submit">保存</Button>
+        <Button style={{marginLeft: '2em'}} onClick={props.onCancel}>取消</Button>
+      </Form.Item>
+    </ModalForm>
+  )
+}
+
+export default Form.create({})(AMForm)

src/pages/building/Edit/Apartment/List.jsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { Button, Table } from 'antd'
+
+export default (props) => {
+  
+  const columns = [
+    {
+      title: '户型名称',
+      dataIndex: 'apartmentName',
+      key: 'apartmentName',
+    },
+    {
+      title: '销售状态',
+      dataIndex: 'marketStatus',
+      key: 'marketStatus',
+    },
+    {
+      title: '户型',
+      dataIndex: 'houseType',
+      key: 'houseType',
+    },
+    {
+      title: '面积',
+      dataIndex: 'buildingArea',
+      key: 'buildingArea',
+      render: (buildingArea, _) => <span>{`${buildingArea === 0 || buildingArea === null ? "-" : buildingArea + "m²"}`}</span>,
+    },
+    {
+      title: '使用面积',
+      dataIndex: 'insideArea',
+      key: 'insideArea',
+      render: (insideArea, _) => <span>{`${insideArea === 0 || insideArea === null ? "-" : insideArea + "m²"}`}</span>,
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createDate',
+      key: 'createDate',
+      render: (_, record) => <span>{moment(record.createDate).format('YYYY-MM-DD HH:mm')}</span>,
+    },
+    {
+      title: '操作',
+      dataIndex: 'apartmentId',
+      key: 'apartmentId',
+      render: (_, record) => (
+        <>
+          <Button type="link" onClick={() => props.onEdit(record)}>编辑</Button>
+          <Popconfirm
+            title="确定要进行删除操作 ?"
+            onConfirm={() => props.onDelete(record)}
+          >
+            <Button type="link" style={{ color: 'red' }}>删除</Button>
+          </Popconfirm>
+        </>
+      ),
+    },
+  ]
+
+  return (
+    <Table columns={columns} style={{marginTop: '1em', width: '100%'}} rowKey="apartmentId" />
+  )
+}

src/pages/building/Edit/Apartment/index.jsx

@@ -0,0 +1,18 @@
+import React, { useState } from 'react'
+import { Button } from 'antd'
+import Form from './Form'
+import List from './List'
+
+export default (props) => {
+  const [visible, setVisible] = useState(false)
+
+  return (
+    <div>
+      <div>
+        <Button type="primary" onClick={() => setVisible(true)}>新增户型</Button>
+      </div>
+      <Form visible={visible} onCancel={() => setVisible(false)} />
+      <List />
+    </div>
+  )
+}

src/pages/building/Edit/Basic/getData.js

@@ -0,0 +1,53 @@
+import moment from 'moment'
+import { fetch, apis } from '@/utils/request'
+
+export default (id) => {
+  if (!id) {
+    return Promise.reject('没有找到有效的项目ID');
+  }
+
+  return new Promise((resolve, reject) => {
+    fetch(apis.building.buildingGetById)({ urlData: { id } }).then((res) => {
+      const data = { ...res }
+
+      // 交房时间
+      if (res.receivedDate) {
+        data.receivedDate = moment(res.receivedDate)
+      }
+
+      // 标签
+      if (res.buildingTag) {
+        data.tag = res.buildingTag.map((x) => x.tagName)
+      }
+
+      // 主图 - 多个
+      if (res.buildingImg) {
+        data.avatarImage = res.buildingImg.map((x) => x.url)
+      }
+
+      // 封面 - 一个
+      if (res.buildingListImg) {
+        data.listImage = res.buildingListImg.map(item => item.url)[0]
+      }
+
+      // 视频
+      if (res.videoUrl) {
+        data.videoUrl = [].concat(res.videoUrl)
+      }
+
+      // 视频封面
+      if (res.videoImage) {
+        data.videoImage = res.videoImage[0].url
+      }
+
+      // POI 相关
+      if (res.mapJson) {
+        data.mapJson = JSON.parse(res.mapJson) || []
+      }
+
+      resolve(data)
+    }).catch((err) => {
+      reject(err.message || err)
+    })
+  })
+}

src/pages/building/Edit/Basic.jsx → src/pages/building/Edit/Basic/index.jsx

@@ -6,12 +6,12 @@ import ImageListUpload from '@/components/XForm/ImageListUpload'
 import SelectCity from '@/components/SelectButton/CitySelect'
 import AreaSelect from '@/components/SelectButton/AreaSelect'
 import { POI_TYPES_KETY, POI_TYPES, getPoiData } from '@/utils/map'
-import BuildingType from './components/BuildingTypeSelect'
-import OpenTimePicker from './components/OpenTimePicker'
-import Amap from './components/Amap'
-import EditableArround from './components/EditableArround'
-import FormGroupItem, { gourpItemLayout } from './components/FormGroupItem'
-import { formItemLayout, validMinNum } from './utils'
+import Amap from '../components/Amap'
+import BuildingType from '../components/BuildingTypeSelect'
+import OpenTimePicker from '../components/OpenTimePicker'
+import EditableArround from '../components/EditableArround'
+import FormGroupItem, { gourpItemLayout } from '../components/FormGroupItem'
+import { formItemLayout, validMinNum } from '../utils'
 
 const fullWidth= { width: '100%' }
 const Item = Form.Item

src/pages/building/Edit/Channel.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { Button, Form, Input, Select } from 'antd'
+import InputNumber from './components/InputNumber'
+import { formItemLayout, validMinNum } from './utils'
+
+const ChannelForm = (props) => {
+  const { form } = props
+  const { getFieldDecorator } = form
+
+  return (
+    <Form {...formItemLayout}>
+      <Form.Item label="渠道">
+      {getFieldDecorator('shareContentTitle', {
+        rules: [{required: true, message: '请填写分享标题'}]
+      })(<Select />)}
+      </Form.Item>
+      <Form.Item label="报备有效期">
+      {getFieldDecorator('posterImg', {
+          rules: [{ validator: validMinNum }],
+      })(<InputNumber min={0} step={1} addonAfter="天" />)}
+      </Form.Item>
+      <Form.Item label="报备有效期">
+      {getFieldDecorator('posterImg', {
+          rules: [{ validator: validMinNum }],
+      })(<Input.TextArea row={4} />)}
+      </Form.Item>
+      <Form.Item label=" " colon={false} style={{marginTop: '2em'}}>
+        <Button style={{marginLeft: '4em'}} type="primary" htmlType="submit">保存</Button>
+        <Button style={{marginLeft: '2em'}} onClick={props.onCancel}>取消</Button>
+      </Form.Item>
+    </Form>
+  )
+}
+
+export default Form.create({})(ChannelForm)

src/pages/building/Edit/News/Form.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { Button, Form, Input, DatePicker } from 'antd'
+import ModalForm from '../components/ModalForm'
+
+const fullWidth = { width: '100%' }
+
+const AMForm = (props) => {
+  const { visible, onCancel, form } = props
+  const { getFieldDecorator } = form
+
+  return (
+    <ModalForm
+      title="项目动态设置"
+      visible={visible}
+      onCancel={onCancel}
+    >
+      <Form.Item label="时间">
+      {getFieldDecorator('img', {
+          rules: [{ required: true, message: '请选择时间' }],
+      })(
+        <DatePicker style={fullWidth} />,
+      )}
+      </Form.Item>
+      <Form.Item label="标题">
+        {getFieldDecorator('apartmentName', {
+          rules: [
+            { required: true, message: '请填写标题' },
+            { max: 30, message: '标题不超过30个字符' },
+          ],
+        })(<Input placeholder="标题不超过30个字符"/>)}
+      </Form.Item>
+      <Form.Item label="内容">
+        {getFieldDecorator('marketStatus', {
+          rules: [{ required: true, message: '请填写内容' }],
+        })(<Input.TextArea row={4} />)}
+      </Form.Item>
+      <Form.Item label=" " colon={false} style={{marginTop: '2em'}}>
+        <Button style={{marginLeft: '4em'}} type="primary" htmlType="submit">保存</Button>
+        <Button style={{marginLeft: '2em'}} onClick={props.onCancel}>取消</Button>
+      </Form.Item>
+    </ModalForm>
+  )
+}
+
+export default Form.create({})(AMForm)

src/pages/building/Edit/News/List.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { Button, Table } from 'antd'
+
+export default (props) => {
+  
+  const columns = [
+    {
+      title: '标题',
+      dataIndex: 'apartmentName',
+      key: 'apartmentName',
+    },
+    {
+      title: '内容',
+      dataIndex: 'marketStatus',
+      key: 'marketStatus',
+    },
+    {
+      title: '时间',
+      dataIndex: 'createDate',
+      key: 'createDate',
+      render: (_, record) => <span>{moment(record.createDate).format('YYYY-MM-DD')}</span>,
+    },
+    {
+      title: '操作',
+      dataIndex: 'apartmentId',
+      key: 'apartmentId',
+      render: (_, record) => (
+        <>
+          <Button type="link" onClick={() => props.onEdit(record)}>编辑</Button>
+          <Popconfirm
+            title="确定要进行删除操作 ?"
+            onConfirm={() => props.onDelete(record)}
+          >
+            <Button type="link" style={{ color: 'red' }}>删除</Button>
+          </Popconfirm>
+        </>
+      ),
+    },
+  ]
+
+  return (
+    <Table columns={columns} style={{marginTop: '1em', width: '100%'}} rowKey="apartmentId" />
+  )
+}

src/pages/building/Edit/News/index.jsx

@@ -0,0 +1,18 @@
+import React, { useState } from 'react'
+import { Button } from 'antd'
+import Form from './Form'
+import List from './List'
+
+export default (props) => {
+  const [visible, setVisible] = useState(false)
+
+  return (
+    <div>
+      <div>
+        <Button type="primary" onClick={() => setVisible(true)}>新增动态</Button>
+      </div>
+      <Form visible={visible} onCancel={() => setVisible(false)} />
+      <List />
+    </div>
+  )
+}

src/pages/building/Edit/Panorama/Form.jsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react'
+import { Button, Form, Input, Select, Radio } from 'antd'
+import ImageUpload from '@/components/XForm/ImageUpload'
+import ModalForm from '../components/ModalForm'
+
+const fullWidth = { width: '100%' }
+
+const AMForm = (props) => {
+  const { visible, onCancel, form } = props
+  const { getFieldDecorator } = form
+
+  const [panoramaType, setPanoramaType] = useState('apartment')
+
+  return (
+    <ModalForm
+      title="全景设置"
+      visible={visible}
+      onCancel={onCancel}
+    >
+      <Form.Item label="全景类型">
+        {getFieldDecorator('panoramaType', {
+          rules: [{ required: true, message: '请选择全景类型' } ],
+        })(
+          <Radio.Group onChange={(e) => setPanoramaType(e.target.value)} buttonStyle="solid">
+            <Radio.Button value="apartment">户型</Radio.Button>
+            <Radio.Button value="building">项目</Radio.Button>
+          </Radio.Group>,
+        )}
+      </Form.Item>
+      { panoramaType == "apartment" && <Form.Item label="全景内容">
+        {getFieldDecorator('apartmentId', {
+          rules: [{ required: true, message: '请选择全景内容' }],
+        })(
+          <Select placeholder="户型" style={fullWidth}>
+          </Select>
+        )}
+      </Form.Item>}
+      { panoramaType == "building" && <Form.Item label="全景内容">
+        {getFieldDecorator('content', {
+          rules: [{ required: true, message: '请输入全景内容' }],
+        })(<Input placeholder="请简述全景内容" />)}
+      </Form.Item>}
+      <Form.Item label="选择封面" help="建议图片尺寸750px*600px，比例5:4,格式：jpg">
+      {getFieldDecorator('coverImg', {
+          rules: [{ required: true, message: '请上传封面图片' }],
+      })(<ImageUpload />)}
+      </Form.Item>
+      <Form.Item label="链接地址">
+        {getFieldDecorator('panoramaLink', {
+          rules: [{ required: true, message: '请输入链接地址' }],
+        })(<Input />)}
+      </Form.Item>
+      <Form.Item label=" " colon={false} style={{marginTop: '2em'}}>
+        <Button style={{marginLeft: '4em'}} type="primary" htmlType="submit">保存</Button>
+        <Button style={{marginLeft: '2em'}} onClick={props.onCancel}>取消</Button>
+      </Form.Item>
+    </ModalForm>
+  )
+}
+
+export default Form.create({})(AMForm)

src/pages/building/Edit/Panorama/List.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Button, Table } from 'antd'
+
+export default (props) => {
+  
+  const columns = [
+    {
+      title: '封面图',
+      dataIndex: 'coverImg',
+      key: 'coverImg',
+      render: (x, record) => <img style={{ width: '150px', height: '120px', borderRadius: '4px' }} src={x} alt="" />,
+    },
+    {
+      title: '类型',
+      dataIndex: 'panoramaType',
+      key: 'panoramaType',
+      render: (x, record) => <span>{x === "apartment" ? "户型" : "项目"}</span>,
+    },
+    {
+      title: '内容',
+      dataIndex: 'content',
+      key: 'content',
+    },
+    {
+      title: '链接地址',
+      dataIndex: 'panoramaLink',
+      key: 'panoramaLink',
+    },
+    {
+      title: '操作',
+      dataIndex: 'apartmentId',
+      key: 'apartmentId',
+      render: (_, record) => (
+        <Popconfirm
+          title="确定要进行删除操作 ?"
+          onConfirm={() => props.onDelete(record)}
+        >
+          <Button type="link" style={{ color: 'red' }}>删除</Button>
+        </Popconfirm>
+      ),
+    },
+  ]
+
+  return (
+    <Table columns={columns} style={{marginTop: '1em', width: '100%'}} rowKey="apartmentId" />
+  )
+}

src/pages/building/Edit/Panorama/index.jsx

@@ -0,0 +1,18 @@
+import React, { useState } from 'react'
+import { Button } from 'antd'
+import Form from './Form'
+import List from './List'
+
+export default (props) => {
+  const [visible, setVisible] = useState(false)
+
+  return (
+    <div>
+      <div>
+        <Button type="primary" onClick={() => setVisible(true)}>新增全景</Button>
+      </div>
+      <Form visible={visible} onCancel={() => setVisible(false)} />
+      <List />
+    </div>
+  )
+}

src/pages/building/Edit/SpecialRoom/Form.jsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import { Button, Form, Input, DatePicker } from 'antd'
+import ModalForm from '../components/ModalForm'
+import InputNumber from '../components/InputNumber'
+import { validMinNum } from '../utils'
+
+const fullWidth = { width: '100%' }
+
+const AMForm = (props) => {
+  const { visible, onCancel, form } = props
+  const { getFieldDecorator } = form
+
+  return (
+    <ModalForm
+      title="特价房设置"
+      visible={visible}
+      onCancel={onCancel}
+    >
+      <Form.Item label="房源">
+        {getFieldDecorator('apartmentName', {
+          rules: [
+            { required: true, message: '请填写房源' },
+            { max: 30, message: '房源不超过30个字符' },
+          ],
+        })(<Input placeholder="比如 3# 15-02"/>)}
+      </Form.Item>
+      <Form.Item label="户型">
+        {getFieldDecorator('apartmentName', {
+          rules: [
+            { required: true, message: '请填写房源' },
+            { max: 30, message: '房源不超过30个字符' },
+          ],
+        })(<Input placeholder="比如 三室一厅"/>)}
+      </Form.Item>
+      <Form.Item label="面积">
+        {getFieldDecorator('apartmentName', {
+          rules: [
+            { required: true, message: '请填写面积' },
+            { validator: validMinNum },
+          ],
+        })(<InputNumber min={0} precision={0.01} step={1} addonAfter="㎡"/>)}
+      </Form.Item>
+      <Form.Item label="时间">
+      {getFieldDecorator('img', {
+          rules: [{ required: true, message: '请选择时间' }],
+      })(
+        <DatePicker.RangePicker
+          showTime={{ format: 'HH:mm' }}
+          format="YYYY-MM-DD HH:mm"
+          placeholder={['开始时间', '结束时间']}
+          style={fullWidth} />,
+      )}
+      </Form.Item>
+      <Form.Item label="原始价">
+        {getFieldDecorator('apartmentName', {
+          rules: [
+            { required: true, message: '请填写原始价' },
+          ],
+        })(<Input placeholder="请填写原始价"/>)}
+      </Form.Item>
+      <Form.Item label="现价">
+        {getFieldDecorator('apartmentName', {
+          rules: [
+            { required: true, message: '请填写现价' },
+          ],
+        })(<Input placeholder="请填写现价"/>)}
+      </Form.Item>
+      <Form.Item label="节省价">
+        {getFieldDecorator('apartmentName', {
+          rules: [
+            { required: true, message: '请填写节省价' },
+          ],
+        })(<Input placeholder="请填写节省价"/>)}
+      </Form.Item>
+      <Form.Item label=" " colon={false} style={{marginTop: '2em'}}>
+        <Button style={{marginLeft: '4em'}} type="primary" htmlType="submit">保存</Button>
+        <Button style={{marginLeft: '2em'}} onClick={props.onCancel}>取消</Button>
+      </Form.Item>
+    </ModalForm>
+  )
+}
+
+export default Form.create({})(AMForm)

src/pages/building/Edit/SpecialRoom/List.jsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { Button, Table } from 'antd'
+
+export default (props) => {
+  
+  const columns = [
+    {
+      title: '房源',
+      dataIndex: 'apartmentName',
+      key: 'apartmentName',
+    },
+    {
+      title: '户型',
+      dataIndex: 'marketStatus',
+      key: 'marketStatus',
+    },
+    {
+      title: '面积',
+      dataIndex: 'marketStatus',
+      key: 'marketStatus',
+      render: (t) => <span>{`${t || ' -- '} ㎡`}</span>,
+    },
+    {
+      title: '开始时间',
+      dataIndex: 'createDate',
+      key: 'createDate',
+      render: (_, record) => <span>{moment(record.createDate).format('YYYY-MM-DD')}</span>,
+    },
+    {
+      title: '结束时间',
+      dataIndex: 'createDate',
+      key: 'createDate',
+      render: (_, record) => <span>{moment(record.createDate).format('YYYY-MM-DD')}</span>,
+    },
+    {
+      title: '操作',
+      dataIndex: 'apartmentId',
+      key: 'apartmentId',
+      render: (_, record) => (
+        <>
+          <Button type="link" onClick={() => props.onEdit(record)}>编辑</Button>
+          <Popconfirm
+            title="确定要进行删除操作 ?"
+            onConfirm={() => props.onDelete(record)}
+          >
+            <Button type="link" style={{ color: 'red' }}>删除</Button>
+          </Popconfirm>
+        </>
+      ),
+    },
+  ]
+
+  return (
+    <Table columns={columns} style={{marginTop: '1em', width: '100%'}} rowKey="apartmentId" />
+  )
+}

src/pages/building/Edit/SpecialRoom/index.jsx

@@ -0,0 +1,18 @@
+import React, { useState } from 'react'
+import { Button } from 'antd'
+import Form from './Form'
+import List from './List'
+
+export default (props) => {
+  const [visible, setVisible] = useState(false)
+
+  return (
+    <div>
+      <div>
+        <Button type="primary" onClick={() => setVisible(true)}>新增特价房</Button>
+      </div>
+      <Form visible={visible} onCancel={() => setVisible(false)} />
+      <List />
+    </div>
+  )
+}

src/pages/building/Edit/components/Amap/index.jsx

@@ -95,7 +95,7 @@ export default (props) => {
     ...inputStyle,
     top: '10px',
     background: 'rgba(255, 255, 255, .9)',
-    border: '1px solid',
+    border: '1px solid #bbb',
   }
 
   return (

src/pages/building/Edit/components/InputNumber.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Input, InputNumber } from 'antd'
+
+export default (props) => {
+  const { addonAfter, ...leftProps } = props;
+
+  if (!addonAfter) {
+    return <InputNumber {...leftProps} />
+  }
+
+  return (
+    <Input.Group compact>
+      <InputNumber style={{ width: 'calc(100% - 3em - 1px)' }} {...leftProps} />
+      <Input value={addonAfter} disabled style={{ width: '3em' }} />
+    </Input.Group>
+  )
+}

src/pages/building/Edit/components/ModalForm/index.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Modal, Form } from 'antd'
+import { formItemLayout } from '../../utils'
+
+const noop = () => undefined
+
+export default (props) => {
+  const { title, visible, onCancel = noop, modalProps = {}, children, ...leftProps } = props
+
+  return (
+    <Modal
+      title={title}
+      width={800}
+      visible={visible}
+      onCancel={onCancel}
+      footer={null}
+      {...modalProps}
+    >
+      <Form {...formItemLayout} {...leftProps} >
+        {children}
+      </Form>
+    </Modal>
+  )
+}

src/pages/building/Edit/index.jsx

@@ -1,11 +1,21 @@
 import React from 'react'
 import { Tabs, Card } from 'antd'
+import Poster from '@/components/Poster'
+import Share from '@/components/Share'
 import Basic from './Basic'
+import Apartment from './Apartment'
+import AlbumList from './AlbumList'
+import Panorama from './Panorama'
+import Channel from './Channel'
+import News from './News'
+import SpecialRoom from './SpecialRoom'
 import styles from './style.less'
 
 const { TabPane } = Tabs
 
 export default (props) => {
+  const target = { id: '', type: 'building' }
+
   return (
     <Card>
       <Tabs defaultActiveKey="1">
@@ -15,22 +25,42 @@ export default (props) => {
           </div>
         </TabPane>
         <TabPane tab="户型设置" key="2">
-          Content of Tab Pane 2
+          <div className={styles['tab-wrapper']}>
+            <Apartment />
+          </div>
         </TabPane>
         <TabPane tab="项目相册" key="3">
-          Content of Tab Pane 3
+          <div className={styles['tab-wrapper']}>
+            <AlbumList />
+          </div>
         </TabPane>
         <TabPane tab="全景照片" key="4">
-          Content of Tab Pane 3
+          <div className={styles['tab-wrapper']}>
+            <Panorama />
+          </div>
         </TabPane>
-        <TabPane tab="海报图片" key="5">
-          Content of Tab Pane 3
+        <TabPane tab="项目动态" key="8">
+          <div className={styles['tab-wrapper']}>
+            <News />
+          </div>
         </TabPane>
-        <TabPane tab="分享设置" key="6">
-          Content of Tab Pane 3
+        <TabPane tab="特价房源" key="9">
+          <div className={styles['tab-wrapper']}>
+            <SpecialRoom />
+          </div>
         </TabPane>
         <TabPane tab="渠道设置" key="7">
-          Content of Tab Pane 3
+          <div className={styles['tab-wrapper']} style={{maxWidth: '800px'}}>
+            <Channel />
+          </div>
+        </TabPane>
+        <TabPane tab="海报图片" key="5">
+          <Poster target={target} />
+        </TabPane>
+        <TabPane tab="分享设置" key="6">
+          <div className={styles['tab-wrapper']} style={{maxWidth: '800px'}}>
+            <Share target={target} />
+          </div>
         </TabPane>
       </Tabs>
     </Card>

src/pages/document.ejs

@@ -7,7 +7,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
     />
-    <title>Ant Design Pro</title>
+    <title>新 联 家</title>
     <link rel="icon" href="/favicon.png" type="image/x-icon" />
   </head>
   <body>