项目编辑页，还在画

config/config.js

@@ -122,6 +122,11 @@ export default {
                   name: '项目列表',
                   component: './building/list/index',
                 },
+                {
+                  path: '/building/list/add',
+                  name: '', // 项目添加
+                  component: './building/list/add/index',
+                },
                 {
                   path: '/building/type',
                   name: '项目类型',

src/pages/building/list/add/components/base.jsx

@@ -0,0 +1,217 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Radio, Tag, Tooltip, Tabs } from 'antd';
+import moment from 'moment';
+import request from '../../../../../utils/request';
+import apis from '../../../../../services/apis';
+import Styles from '../style.less';
+import { router } from 'umi';
+import ImageUpload from '../../../../../components/XForm/ImageUpload'
+import Wangedit from '../../../../../components/Wangedit/Wangedit'
+import TagGroup from './tags'
+
+const { Option } = Select
+const { TabPane } = Tabs;
+
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 2 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 16 },
+  },
+};
+
+function AddBuilding(props) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [dataSource, setDataSource] = useState({ records: [] })
+
+  const [buildingAreaTags, setBuildingAreaTags] = useState({ tags: ['Unremovable', 'Tag 2', 'Tag 3'], inputVisible: false, inputValue: '' })
+
+
+  const { getFieldDecorator } = props.form;
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    props.form.validateFieldsAndScroll((err, values) => {
+      if (!err) {
+        console.log('Received values of form: ', values);
+      }
+    });
+  }
+
+  return (
+        <Form {...formItemLayout} onSubmit={handleSubmit}>
+          <Form.Item label="楼盘编号">
+            {getFieldDecorator('code')(<Input />)}
+          </Form.Item>
+          <Form.Item label="楼盘名称" hasFeedback>
+            {getFieldDecorator('buildingName')(<Input />)}
+          </Form.Item>
+          <Form.Item label="别名" hasFeedback>
+            {getFieldDecorator('name')(<Input />)}
+          </Form.Item>
+          <Form.Item label="项目类型" hasFeedback>
+            {getFieldDecorator('name')(<Input />)}
+          </Form.Item>
+          <Form.Item label="均价" hasFeedback>
+            {getFieldDecorator('price')(<Input />)}
+          </Form.Item>
+          <Form.Item label="开盘时间" hasFeedback>
+            {getFieldDecorator('openingDate')(<DatePicker />)}
+          </Form.Item>
+          <Form.Item label="电话" hasFeedback>
+            {getFieldDecorator('tel')(<Input />)}
+          </Form.Item>
+          <Form.Item label="项目动态" hasFeedback>
+            {getFieldDecorator('dynamic')(<Input />)}
+          </Form.Item>
+          <Form.Item label="物业类型" hasFeedback>
+            {getFieldDecorator('buildingProperty')(
+              <Select mode="multiple" placeholder="物业类型" style={{ width: '1016px' }}>
+                <Option value="未知">未知</Option>
+              </Select>,
+            )}
+          </Form.Item>
+          <Form.Item label="销售状态" hasFeedback>
+            {getFieldDecorator('marketStatus')(<Input />)}
+          </Form.Item>
+          <Form.Item label="标签" hasFeedback>
+            {getFieldDecorator('tags')(
+              <Select mode="multiple" placeholder="标签" style={{ width: '1016px' }}>
+              <Option value="未知">未知</Option>
+              </Select>,
+            )}
+          </Form.Item>
+          <Form.Item label="项目主图" hasFeedback>
+            {getFieldDecorator('tags')(
+              <ImageUpload />,
+            )}
+          </Form.Item>
+          <Form.Item label="地址图片" hasFeedback>
+            {getFieldDecorator('tags')(
+              <ImageUpload />,
+            )}
+          </Form.Item>
+          <Form.Item label="海报底图" hasFeedback>
+            {getFieldDecorator('tags')(
+              <ImageUpload />,
+            )}
+          </Form.Item>
+          <Form.Item label="排序" hasFeedback>
+            {getFieldDecorator('orderNo')(<Input />)}
+          </Form.Item>
+          <Form.Item label="优惠信息" hasFeedback>
+            {getFieldDecorator('discount')(<Input />)}
+          </Form.Item>
+          <Form.Item label="首页推荐" hasFeedback>
+            {getFieldDecorator('isMain')(
+            <Radio.Group>
+              <Radio value={1}>是</Radio>
+              <Radio value={2}>否</Radio>
+            </Radio.Group>,
+            )}
+          </Form.Item>
+          <Form.Item label="所在城市" hasFeedback>
+            {getFieldDecorator('cityId')(
+              <Select placeholder="选择城市" style={{ width: '200px' }}>
+                <Option value="red">Red</Option>
+              </Select>,
+            )}
+          </Form.Item>
+          <Form.Item label="楼盘区域" hasFeedback>
+            {getFieldDecorator('buildingArea')(<Input />)}
+          </Form.Item>
+          <Form.Item label="项目地址" hasFeedback>
+            {getFieldDecorator('address')(<Input />)}
+          </Form.Item>
+          <Form.Item label="项目坐标" hasFeedback>
+            {getFieldDecorator('coordinate')(<Input disabled />)}
+          </Form.Item>
+          <Form.Item label="项目地址" hasFeedback>
+            {getFieldDecorator('coordinate')(<Input />)}
+          </Form.Item>
+          <Form.Item label="周边交通" hasFeedback>
+            {getFieldDecorator('buildingArea')(
+              <TagGroup />,
+            )}
+          </Form.Item>
+          <Form.Item label="周边交通" hasFeedback>
+            {getFieldDecorator('buildingMall')(
+              <TagGroup />,
+            )}
+          </Form.Item>
+          <Form.Item label="周边学校" hasFeedback>
+            {getFieldDecorator('buildingEdu')(
+              <TagGroup />,
+            )}
+          </Form.Item>
+          <Form.Item label="周边医院" hasFeedback>
+            {getFieldDecorator('buildingHospital')(
+              <TagGroup />,
+            )}
+          </Form.Item>
+          <Form.Item label="周边银行" hasFeedback>
+            {getFieldDecorator('buildingBank')(
+              <TagGroup />,
+            )}
+          </Form.Item>
+          <Form.Item label="周边餐饮" hasFeedback>
+            {getFieldDecorator('buildingRestaurant')(
+              <TagGroup />,
+            )}
+          </Form.Item>
+          <Form.Item label="绿化率" hasFeedback>
+            {getFieldDecorator('greeningRate')(<Input />)}
+          </Form.Item>
+          <Form.Item label="容积率" hasFeedback>
+            {getFieldDecorator('volumeRate')(<Input />)}
+          </Form.Item>
+          <Form.Item label="车位比" hasFeedback>
+            {getFieldDecorator('parkingRate')(<Input />)}
+          </Form.Item>
+          <Form.Item label="规划户数" hasFeedback>
+            {getFieldDecorator('familyNum')(<Input />)}
+          </Form.Item>
+          <Form.Item label="物业公司" hasFeedback>
+            {getFieldDecorator('serviceCompany')(<Input />)}
+          </Form.Item>
+          <Form.Item label="物业费" hasFeedback>
+            {getFieldDecorator('serviceFee')(<Input />)}
+          </Form.Item>
+          <Form.Item label="装修标准" hasFeedback>
+            {getFieldDecorator('decoration')(<Input />)}
+          </Form.Item>
+          <Form.Item label="交房时间" hasFeedback>
+            {getFieldDecorator('receivedDate')(<DatePicker />)}
+          </Form.Item>
+          <Form.Item label="产权年限" hasFeedback>
+            {getFieldDecorator('rightsYear')(<Input />)}
+          </Form.Item>
+          <Form.Item label="预售许可证" hasFeedback>
+            {getFieldDecorator('decoration')(
+              <ImageUpload />,
+            )}
+          </Form.Item>
+          <Form.Item label="项目备注" hasFeedback>
+            {getFieldDecorator('remark')(
+              <Wangedit />,
+            )}
+          </Form.Item>
+          <Form.Item style={{ width: '400px', margin: 'auto', display: 'flex', justifyContent: 'space-between' }}>
+            <Button type="primary" htmlType="submit">
+                确定
+            </Button>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <Button onClick={() => router.go(-1)}>
+                取消
+            </Button>
+          </Form.Item>
+        </Form>
+  )
+}
+
+const WrappedAddBuildingForm = Form.create({ name: 'addBuilding' })(AddBuilding);
+
+export default WrappedAddBuildingForm

src/pages/building/list/add/components/imageSet.jsx

@@ -0,0 +1,112 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Radio, Tag, Tooltip, Tabs, Table, notification } from 'antd';
+import moment from 'moment';
+import request from '../../../../../utils/request';
+import apis from '../../../../../services/apis';
+import Styles from '../style.less';
+import { router } from 'umi';
+
+
+const saleType = [
+  {
+    id: 1,
+    name: '待定',
+  },
+  {
+    id: 2,
+    name: '售罄',
+  },
+  {
+    id: 3,
+    name: '在售',
+  },
+]
+
+/**
+ *图片设置
+ *
+ * @param {*} props
+ * @returns
+ */
+function imageSet(props) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [data, setData] = useState([])
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    getList()
+  }, [])
+
+  function openNotificationWithIcon(type, message) {
+    notification[type]({
+      message,
+      description:
+        '',
+    });
+  }
+
+  function getList(params) {
+    console.log(props)
+    // 网路请求
+    const { url, method } = apis.building.buildingApartment
+    const tempUrl = url.substring(0, url.lastIndexOf('id')).concat(props.building.buildingId)
+
+    request({ url: tempUrl, method, params: { ...params } }).then(res => {
+      setData(res)
+    }).catch(err => {
+      openNotificationWithIcon('error', err)
+    })
+  }
+
+
+  const columns = [
+    {
+      title: '名称',
+      dataIndex: 'apartmentName',
+      key: 'apartmentName',
+    },
+    {
+      title: '类型',
+      dataIndex: 'apartmentType',
+      key: 'apartmentType',
+      render: (_, record) => <span>{ record.apartmentType === 'apart' ? '户型' : '相册' }</span>,
+    },
+    {
+      title: '销售状态',
+      dataIndex: 'marketStatus',
+      key: 'marketStatus',
+      render: (_, record) => <span>{ (saleType.filter(x => x.id == record.marketStatus)[0] || {}).name }</span>,
+    },
+    {
+      title: '备注',
+      dataIndex: 'remark',
+      key: 'remark',
+    },
+    {
+      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" style={{ color: 'red' }}>编辑</Button>
+          <Button type="link" style={{ color: 'red' }}>删除</Button>
+        </>
+      ),
+    },
+  ]
+
+  return (
+    <>
+      <Button type="primary">新增图片库</Button>
+      <Table dataSource={data} columns={columns} pagination={false} />
+    </>
+  )
+}
+
+export default imageSet

src/pages/building/list/add/components/tags.jsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import { Tag, Input, Tooltip, Icon } from 'antd';
+
+class EditableTagGroup extends React.Component {
+  state = {
+    tags: [],
+    inputVisible: false,
+    inputValue: '',
+  };
+
+  handleClose = removedTag => {
+    const tags = this.state.tags.filter(tag => tag !== removedTag);
+    console.log(tags);
+    this.setState({ tags });
+  };
+
+  showInput = () => {
+    this.setState({ inputVisible: true }, () => this.input.focus());
+  };
+
+  handleInputChange = e => {
+    this.setState({ inputValue: e.target.value });
+  };
+
+  handleInputConfirm = () => {
+    const { inputValue } = this.state;
+    let { tags } = this.state;
+    if (inputValue && tags.indexOf(inputValue) === -1) {
+      tags = [...tags, inputValue];
+    }
+    console.log(tags);
+    this.setState({
+      tags,
+      inputVisible: false,
+      inputValue: '',
+    });
+  };
+
+  saveInputRef = input => (this.input = input);
+
+  render() {
+    const { tags, inputVisible, inputValue } = this.state;
+    return (
+      <div>
+        {tags.map((tag, index) => {
+          const isLongTag = tag.length > 20;
+          const tagElem = (
+            <Tag key={tag} closable={index !== 0} onClose={() => this.handleClose(tag)}>
+              {isLongTag ? `${tag.slice(0, 20)}...` : tag}
+            </Tag>
+          );
+          return isLongTag ? (
+            <Tooltip title={tag} key={tag}>
+              {tagElem}
+            </Tooltip>
+          ) : (
+            tagElem
+          );
+        })}
+        {inputVisible && (
+          <Input
+            ref={this.saveInputRef}
+            type="text"
+            size="small"
+            style={{ width: 78 }}
+            value={inputValue}
+            onChange={this.handleInputChange}
+            onBlur={this.handleInputConfirm}
+            onPressEnter={this.handleInputConfirm}
+          />
+        )}
+        {!inputVisible && (
+          <Tag onClick={this.showInput} style={{ background: '#fff', borderStyle: 'dashed' }}>
+            <Icon type="plus" /> 新建
+          </Tag>
+        )}
+      </div>
+    );
+  }
+}
+
+export default EditableTagGroup

src/pages/building/list/add/index.jsx

@@ -0,0 +1,67 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Radio, Tag, Tooltip, Tabs } from 'antd';
+import moment from 'moment';
+import request from '../../../../utils/request';
+import apis from '../../../../services/apis';
+import Styles from './style.less';
+import { router } from 'umi';
+
+
+import ImageUpload from '../../../../components/XForm/ImageUpload'
+import Wangedit from '../../../../components/Wangedit/Wangedit'
+import TagGroup from './components/tags'
+import Base from './components/base'
+import ImageSet from './components/imageSet'
+
+
+const { Option } = Select
+const { TabPane } = Tabs;
+
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 2 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 16 },
+  },
+};
+
+function AddBuilding(props) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [dataSource, setDataSource] = useState({ records: [] })
+
+  const [buildingAreaTags, setBuildingAreaTags] = useState({ tags: ['Unremovable', 'Tag 2', 'Tag 3'], inputVisible: false, inputValue: '' })
+
+
+  const { getFieldDecorator } = props.form;
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    props.form.validateFieldsAndScroll((err, values) => {
+      if (!err) {
+        console.log('Received values of form: ', values);
+      }
+    });
+  }
+
+  function tabsCallback(key) {
+    console.log(key);
+  }
+
+  return (
+    <Tabs defaultActiveKey="1" onChange={tabsCallback}>
+      <TabPane tab="基本信息" key="1">
+        <Base />
+      </TabPane>
+      <TabPane tab="图片" key="2">
+        <ImageSet building={{ buildingId: '159fd19bb973b6972c10fbebf07ddeb1' }} />
+      </TabPane>
+    </Tabs>
+  )
+}
+
+const WrappedAddBuildingForm = Form.create({ name: 'addBuilding' })(AddBuilding);
+
+export default WrappedAddBuildingForm

src/pages/building/list/index.jsx

@@ -4,6 +4,7 @@ import moment from 'moment';
 import request from '../../../utils/request';
 import apis from '../../../services/apis';
 import Styles from './style.less';
+import { router } from 'umi';
 
 
 const { Option } = Select;
@@ -137,6 +138,11 @@ function body(props) {
     console.log(value, dateString)
   }
 
+
+  function toAdd() {
+    router.push({ pathname: '/building/list/add' })
+  }
+
   return (
     <>
       <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
@@ -200,7 +206,7 @@ function body(props) {
           </Button>
         </Form.Item>
       </Form>
-      <Button type="primary" className={Styles.addButton}>
+      <Button type="primary" className={Styles.addButton} onClick={() => toAdd()}>
         新增楼盘
       </Button>
 

src/pages/customer/independentList/index.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Table, Avatar } from 'antd';
+import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Table, Avatar, notification } from 'antd';
 import moment from 'moment';
 import request from '../../../utils/request';
 import apis from '../../../services/apis';
@@ -28,20 +28,21 @@ function body(props) {
     getList({ pageNumber: 1, pageSize: 10 })
   }, [])
 
+
+  function openNotificationWithIcon(type, message) {
+    notification[type]({
+      message,
+      description:
+        '',
+    });
+  }
+
   function getList(params) {
     // 网路请求
     request({ ...apis.customer.agents, params: { ...params } }).then(res => {
       setDataSource(res)
     }).catch(err => {
-      // eslint-disable-next-line no-unused-expressions
-      <Alert
-        style={{
-          marginBottom: 24,
-        }}
-        message={err}
-        type="error"
-        showIcon
-      />
+      openNotificationWithIcon('error', err)
     })
   }
 

src/pages/customer/recommendCustomer/index.jsx

@@ -115,7 +115,7 @@ function body(props) {
       title: '推荐时间',
       dataIndex: 'createDate',
       key: 'createDate',
-      render: (_, record) => <><sapn>{ moment(record.createDate).format('YYYY-MM-DD') }</sapn></>,
+      render: (_, record) => <><sapn>{ record.createDate && moment(record.createDate).format('YYYY-MM-DD') }</sapn></>,
     },
     {
       title: '状态',

src/services/apis.js

@@ -22,6 +22,10 @@ export default {
       method: 'GET',
       url: `${prefix}/buildinglist`,
     },
+    buildingApartment: {
+      method: 'GET',
+      url: `${prefix}/buildingApartment/buildingId/id`,
+    },
   },
   buildingType: {
     getList: {