项目编辑

config/config.js

 
   proxy: {
     '/api/': {
-      target: 'http://192.168.0.84:8080/',
+      target: 'http://localhost:8080/',
       changeOrigin: true,
       // pathRewrite: { '^/server': '' },
     },

src/components/XForm/ImageListUpload.jsx

+import React from 'react';
+import { Upload, Icon, Modal } from 'antd';
+import './style.less';
+import { uploaderProps } from '../../utils/upload';
+
+function getBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = error => reject(error);
+  });
+}
+
+class ImageListUpload extends React.Component {
+  state = {
+    previewVisible: false,
+    previewImage: '',
+    fileList: [],
+  };
+
+  handleCancel = () => this.setState({ previewVisible: false });
+
+  handlePreview = async file => {
+    if (!file.url && !file.preview) {
+      file.preview = await getBase64(file.originFileObj);
+    }
+
+    this.setState({
+      previewImage: file.url || file.preview,
+      previewVisible: true,
+    });
+  };
+
+  handleChange = ({ fileList }) => {
+    this.setState({ fileList })
+    if (typeof this.props.onChange === 'function') {
+      // return item.response.url
+      const images = fileList.filter(item => item.status === 'done')
+      this.props.onChange(images.map(item => item.response.url))
+    }
+  };
+
+  render() {
+    const { previewVisible, previewImage, fileList } = this.state;
+
+    const { value } = this.props
+
+    const uploadButton = (
+      <div>
+        <Icon type="plus" />
+        <div className="ant-upload-text">Upload</div>
+      </div>
+    );
+    return (
+      <div className="clearfix">
+        <Upload
+          listType="picture-card"
+          fileList={fileList || value}
+          onPreview={this.handlePreview}
+          onChange={this.handleChange}
+          { ...uploaderProps }
+        >
+          {fileList.length >= 8 ? null : uploadButton}
+        </Upload>
+        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
+          <img alt="example" style={{ width: '100%' }} src={previewImage} />
+        </Modal>
+      </div>
+    );
+  }
+}
+
+export default ImageListUpload;

src/components/XForm/style.css

+:global .avatar-uploader > .ant-upload {
+  width: 128px;
+  height: 128px;
+}
+/* you can make up upload button and sample style by using stylesheets */
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}

src/components/XForm/style.less

     }
   }
 }
+
+
+/* you can make up upload button and sample style by using stylesheets */
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}

src/components/XForm/style.wxss

+:global .avatar-uploader > .ant-upload {
+  width: 128px;
+  height: 128px;
+}
+/* you can make up upload button and sample style by using stylesheets */
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}

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

 import React, { useState, useEffect } from 'react';
-import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Radio, Tag, Tooltip, Tabs, InputNumber } from 'antd';
+import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Radio, Tag, Tooltip, Tabs, InputNumber, 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';
 import ImageUpload from '../../../../../components/XForm/ImageUpload'
+import ImageListUpload from '../../../../../components/XForm/ImageListUpload'
 import Wangedit from '../../../../../components/Wangedit/Wangedit'
 import TagGroup from './tags'
 
   },
 };
 
+
+function openNotificationWithIcon(type, message) {
+  notification[type]({
+    message,
+    description:
+      '',
+  });
+}
+
+
 function AddBuilding(props) {
   const { getFieldDecorator } = props.form;
 
+  if (props.building.buildingId !== undefined) {
+    const { buildingId } = props.building
+    if (buildingId !== '') {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      useEffect(() => {
+        getById(buildingId)
+      }, [])
+    }
+  }
+
+   // 获取详情信息
+   function getById(currentId) {
+    const { url, method } = apis.building.buildingGetById
+    const tempUrl = url.substring(0, url.lastIndexOf('id')).concat(currentId)
+
+    request({ url: tempUrl, method }).then(res => {
+      res.openingDate = moment(res.openingDate)
+      res.receivedDate = moment(res.receivedDate)
+      props.form.setFieldsValue(res)
+    })
+  }
+
   function handleSubmit(e) {
     e.preventDefault();
     props.form.validateFieldsAndScroll((err, values) => {
       if (!err) {
-        console.log('Received values of form: ', values);
+        addBuilding(values)
       }
     });
   }
 
+  function addBuilding(data) {
+    data.openingDate = moment(data.openingDate, 'yyyy-MM-dd HH:mm:ss')
+    data.receivedDate = moment(data.receivedDate, 'yyyy-MM-dd HH:mm:ss')
+    data.buildingProjectType = []
+    // 项目主图
+    data.img = data.avatarImage && data.avatarImage.map((item, index) => ({ imgType: 'banner', url: item, orderNo: index + 1 }))
+
+    request({ ...apis.building.addBuilding, data: { ...data } }).then(() => {
+      openNotificationWithIcon('success', '操作成功')
+    }).catch(err => {
+      openNotificationWithIcon('error', err.message)
+    })
+  }
+
   return (
         <Form {...formItemLayout} onSubmit={handleSubmit}>
-          <Form.Item label="楼盘编号">
+          <Form.Item label="楼盘编号" hasFeedback>
             {getFieldDecorator('code')(<Input />)}
           </Form.Item>
           <Form.Item label="楼盘名称" hasFeedback>
             {getFieldDecorator('name')(<Input />)}
           </Form.Item>
           <Form.Item label="项目类型" hasFeedback>
-            {getFieldDecorator('name')(<Input />)}
+            {getFieldDecorator('buildingProjectType')(<Input />)}
           </Form.Item>
           <Form.Item label="均价" hasFeedback>
             {getFieldDecorator('price')(<Input />)}
           </Form.Item>
           <Form.Item label="开盘时间" hasFeedback>
-            {getFieldDecorator('openingDate')(<DatePicker />)}
+            {getFieldDecorator('openingDate')(<DatePicker format="YYYY/MM/DD" />)}
           </Form.Item>
           <Form.Item label="电话" hasFeedback>
             {getFieldDecorator('tel')(<Input />)}
             )}
           </Form.Item>
           <Form.Item label="项目主图" hasFeedback>
-            {getFieldDecorator('tags')(
-              <ImageUpload />,
+            {getFieldDecorator('avatarImage')(
+              <ImageListUpload />,
             )}
           </Form.Item>
           <Form.Item label="地址图片" hasFeedback>
-            {getFieldDecorator('tags')(
+            {getFieldDecorator('mapImg')(
               <ImageUpload />,
             )}
           </Form.Item>
           <Form.Item label="海报底图" hasFeedback>
-            {getFieldDecorator('tags')(
+            {getFieldDecorator('poster')(
               <ImageUpload />,
             )}
           </Form.Item>
           <Form.Item label="项目坐标" hasFeedback>
             {getFieldDecorator('coordinate')(<Input disabled />)}
           </Form.Item>
-          <Form.Item label="项目地址" hasFeedback>
-            {getFieldDecorator('coordinate')(<Input />)}
+          <Form.Item label="地图位置" hasFeedback>
+            {(<Input />)}
           </Form.Item>
           <Form.Item label="周边交通" hasFeedback>
-            {getFieldDecorator('buildingArea')(
+            {getFieldDecorator('buildingTransport')(
               <TagGroup />,
             )}
           </Form.Item>
             {getFieldDecorator('rightsYear')(<InputNumber />)}
           </Form.Item>
           <Form.Item label="预售许可证" hasFeedback>
-            {getFieldDecorator('decoration')(
+            {getFieldDecorator('preSalePermit')(
               <ImageUpload />,
             )}
           </Form.Item>

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

 
       {/* 编辑页 */}
       {/*  onSuccess是子组件传递事件信息  */}
-      <ModalImage visibleData={visibleData} key={visibleData.apartmentId} onSuccess={getList}/>
+      <ModalImage visibleData={visibleData} key={1} onSuccess={getList}/>
     </>
   )
 }

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

     const { url, method } = apis.building.buildingApartmentGetById
     const tempUrl = url.substring(0, url.lastIndexOf('id')).concat(apartmentId)
 
-    request({ url: tempUrl, method , params: { ...params } }).then(res => {
+    request({ url: tempUrl, method, params: { ...params } }).then(res => {
       // res.img = res.buildingImgList.map((item, _) => item.url)
       res.img = res.buildingImgList[0].url
       this.props.form.setFieldsValue(res)

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

       inputVisible: false,
       inputValue: '',
     });
+
+    if (typeof this.props.onChange === 'function') {
+      const tempTags = tags.join(',')
+      this.props.onChange(tempTags);
+    }
   };
 
   saveInputRef = input => (this.input = input);
 
   render() {
     const { tags, inputVisible, inputValue } = this.state;
+
+    const { value } = this.props
+    let data = []
+    if (value !== undefined && value !== null) {
+      data = value.split(',')
+    } else {
+      data = tags
+    }
+
     return (
       <div>
-        {tags.map((tag, index) => {
+        {data.map((tag, index) => {
           const isLongTag = tag.length > 20;
           const tagElem = (
             <Tag key={tag} closable onClose={() => this.handleClose(tag)}>

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

 };
 
 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);
   }
 
+  console.log(props.location)
+
   return (
     <Tabs defaultActiveKey="1" onChange={tabsCallback}>
       <TabPane tab="基本信息" key="1">
-        <Base />
-      </TabPane>
-      <TabPane tab="图片" key="2">
-        <ImageSet building={{ buildingId: '159fd19bb973b6972c10fbebf07ddeb1' }} />
+        <Base building={{ buildingId: props.location.query && props.location.query.id }} />
       </TabPane>
+      {
+        props.location.query.id &&
+        <TabPane tab="图片" key="2">
+          {/* '159fd19bb973b6972c10fbebf07ddeb1' */}
+          <ImageSet building={{ buildingId: props.location.query && props.location.query.id }} />
+        </TabPane>
+      }
     </Tabs>
   )
 }

src/pages/building/list/index.jsx

 import React, { useState, useEffect } from 'react';
-import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert } from 'antd';
+import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, notification, Modal } from 'antd';
 import moment from 'moment';
 import request from '../../../utils/request';
 import apis from '../../../services/apis';
 
 const tempDate = [{ code: 's101' }]
 
+function openNotificationWithIcon(type, message) {
+  notification[type]({
+    message,
+    description:
+      '',
+  });
+}
+
 /**
  *卡片
  *
 function CartBody(props) {
   const { data } = props
 
+
+  function toEdi(record) {
+    router.push({
+      pathname: '/building/list/add',
+      query: {
+        id: record.buildingId,
+      },
+    })
+  }
+
+  /**
+   *发布 取消 发布
+   *
+   * @param {*} record
+   */
+  function pulicAndUnPulic(record) {
+    const modal = Modal.confirm();
+    const buidingStatus = record.status === 1 ? 2 : 1
+    const title = record.status === 1 ? '确认取消发布此数据?' : '确认发布此数据?'
+
+    modal.update({
+      content: title,
+      okText: '确认',
+      cancelText: '关闭',
+      onOk: () => {
+        request({ ...apis.building.updateStatus, data: { id: record.buildingId, status: buidingStatus } }).then(() => {
+          openNotificationWithIcon('success', '操作成功')
+          props.onSuccess()
+        }).catch(err => {
+          openNotificationWithIcon('error', err.message)
+        })
+
+        modal.destroy();
+      },
+      onCancel: () => {
+        modal.destroy();
+      },
+    });
+  }
+
+  /**
+   *删除楼盘
+   *
+   * @param {*} record
+   */
+  function deleteBuilding(record) {
+    const { url, method } = apis.building.deleteBuilding
+    const tempUrl = url.substring(0, url.lastIndexOf('id')).concat(record.buildingId)
+
+    const modal = Modal.confirm();
+    modal.update({
+      content: '确定删除此楼盘？',
+      okText: '确认',
+      cancelText: '关闭',
+      onOk: () => {
+        request({ url: tempUrl, method }).then(() => {
+          openNotificationWithIcon('success', '操作成功')
+          props.onSuccess()
+        }).catch(err => {
+          openNotificationWithIcon('error', err.message)
+        })
+
+        modal.destroy();
+      },
+      onCancel: () => {
+        modal.destroy();
+      },
+    });
+  }
+
   return (
           <Card
             hoverable
             <p className={Styles.cardText}>
               <span className={Styles.title}>楼盘编号</span>
               <span >：{ data.code }</span>
-              <span className={Styles.ediText}>
+              <span className={Styles.ediText} onClick={() => toEdi(data)}>
                 编辑
                 <Icon type="form" style={{ color: '#C0C4CC', marginLeft: '10px' }} />
               </span>
             </p>
             <p className={Styles.cardItem}>
               <span className={Styles.title}>发布状态</span>
-              <span >：{ data.status === '1' ? '已发布' : '未发布' }</span>
+              <span >：{ data.status === 1 ? '已发布' : '未发布' }</span>
             </p>
             <p className={Styles.cardItem}>
               <span className={Styles.title}>录入时间</span>
               <span >：{ data.createDate }</span>
             </p>
             <p style={{ margin: '15px 0', position: 'relative', fontSize: '18px' }}>
-              <span style={{ color: '#1990FF' }}>
-                取消发布
+              <span style={{ color: '#1990FF' }} onClick={() => pulicAndUnPulic(data)}>
+                {/* 已发布的时候，需要显示取消发布的字样 */}
+                { data.status === 1 ? '取消发布' : '发布' }
                 <Icon type="close-circle" style={{ color: '#C0C4CC', marginLeft: '8px' }} />
               </span>
               <span style={{
                 color: '#FF4A4A', position: 'absolute', right: '0',
-              }} >
+              }} onClick={() => deleteBuilding(data)}>
                 删除
                 <Icon type="rest" style={{ color: '#C0C4CC', marginLeft: '8px' }} />
               </span>
       {/* 卡片内容，显示楼盘项目  */}
       <Row style={{ padding: ' 0 10px' }}>
         {
-          dataSource.records.map((item, index) => (
+          dataSource.records.map((item, _) => (
               <Col span={8}>
-                <CartBody data={item} key={item.buildingId}/>
+                <CartBody data={item} key={item.buildingId} onSuccess={getList}/>
               </Col>
             ))
         }

src/services/apis.js

       method: 'GET',
       url: `${prefix}/buildinglist`,
     },
+    updateStatus: {
+      method: 'PUT',
+      url: `${prefix}/building/update/status`,
+    },
+    addBuilding: {
+      method: 'POST',
+      url: `${prefix}/building/add`,
+    },
+    buildingGetById: {
+      method: 'GET',
+      url: `${prefix}/buildingSelectId/id`,
+    },
+    deleteBuilding: {
+      method: 'DELETE',
+      url: `${prefix}/building/delete/id`,
+    },
     buildingApartment: {
       method: 'GET',
       url: `${prefix}/buildingApartment/buildingId/id`,