提交

src/components/XForm/FileUpload.jsx

+import React, { useState, useEffect } from 'react'
+import { Upload, Button, Icon } from 'antd';
+import { uploaderProps } from '../../utils/upload';
+
+function fileUpload(props) {
+
+  const { value } = props
+  console.log('fileUploadProps： ', props)
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [defaultFileList, setDefaultFileList] = useState([])
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    setDefaultValue()
+  }, [props.value]);
+
+
+  function getFileList() {
+    return (value || []).map((img, inx) => ({ uid: inx, url: img, name: img.substring(img.lastIndexOf('/') + 1, img.length), status: 'done' }))
+  }
+
+  function setDefaultValue() {
+    if (!value) {
+      return;
+    }
+
+    setDefaultFileList(getFileList())
+  }
+
+  function onFileChange({ file, fileList }) {
+    setDefaultFileList(fileList)
+    if (file.status === 'uploading') {
+      return
+    }
+
+    if (file.status === 'done') {
+      props.onChange([].concat(file.response))
+    }
+  }
+
+  return (
+    <>
+      <Upload
+        { ...uploaderProps }
+        {...props}
+        onChange={onFileChange}
+        fileList={defaultFileList}
+      >
+        <Button>
+          <Icon type="upload" /> {props.label}
+        </Button>
+      </Upload>
+    </>
+  )
+}
+
+export default fileUpload

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

       if (value) {
         const temp = value.split(',')
         this.setState({ markerPosition: { longitude: temp[1], latitude: temp[0] } }, () => {
-          // 需要在设置坐标成功后，重新设置 缩放级别
-          this.mapInstance.setZoom(15)
+          if (this.mapInstance) {
+            // 需要在设置坐标成功后，重新设置 缩放级别
+            this.mapInstance.setZoom(15)
+          }
         })
       }
     }

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

 import Amap from './amap'
 import BudildingProjectType from './buildingProjectType'
 import SelectCity from '../../../../../components/SelectButton/CitySelect'
+import FileUpload from '@/components/XForm/FileUpload';
 
 const { Option } = Select
 const { TabPane } = Tabs;
       }
 
       res.avatarImage = res.buildingImg.map(item => item.url)
+      res.listImage = res.buildingListImg.map(item => item.url)
       res.mapCoordinate = res.coordinate
+      if (res.videoUrl) {
+        res.videoUrl = [].concat(res.videoUrl)
+      }
       props.form.setFieldsValue(res)
       props.onSuccess(res)
     })
     data.receivedDate = moment(data.receivedDate, 'yyyy-MM-dd HH:mm:ss')
     // 项目主图
     data.img = data.avatarImage && data.avatarImage.map((item, index) => ({ imgType: 'banner', url: item, orderNo: index + 1 }))
+    // 列表图
+    data.listImg = data.listImage && data.listImage.map((item, index) => ({ imgType: 'list', url: item, orderNo: index + 1 }))
+    data.videoUrl = data.videoUrl[0]
     if (data.tag) {
       data.tag = data.tag.map((item, _) => ({ tagName: item }))
     }
     })
   }
 
+  // 视频文件上传前 回调
+  function fileUploadBeforeUpload(file, fileList) {
+    console.log(file, fileList)
+    return new Promise((resolve, reject) => {
+      if (file.type === 'video/mp4' || file.type === '.mp4') {
+          resolve(file)
+      } else {
+        openNotificationWithIcon('error', '项目视频，仅支持MP4格式')
+        reject()
+      }
+    })
+  }
+
   return (
         <Form {...formItemLayout} onSubmit={handleSubmit}>
           <Form.Item label="项目Id" style={{ display: 'none' }}>
               </Select>,
             )}
           </Form.Item>
+          <Form.Item label="项目视频" help="视频仅支持mp4格式，建议尺寸：1920*1080，比例16:9">
+            {getFieldDecorator('videoUrl')(
+              <FileUpload accept=".mp4" beforeUpload={fileUploadBeforeUpload} label="上传视频"/>,
+            )}
+          </Form.Item>
           <Form.Item label="项目主图" help="建议图片尺寸：640px*360px">
             {getFieldDecorator('avatarImage', {
               rules: [{ required: true, message: '请选择项目主图' }],
               <ImageListUpload />,
             )}
           </Form.Item>
-          <Form.Item label="地址图片" help="建议图片尺寸：750px*455px">
+          <Form.Item label="列表图" help="建议图片尺寸：640px*360px">
+            {getFieldDecorator('listImage', {
+              rules: [{ required: true, message: '请选择列表图' }],
+            })(
+              <ImageListUpload />,
+            )}
+          </Form.Item>
+          {/* <Form.Item label="地址图片" help="建议图片尺寸：750px*455px">
             {getFieldDecorator('mapImg')(
               <ImageUpload />,
             )}
-          </Form.Item>
+          </Form.Item> */}
           {/* <Form.Item label="海报底图" help="建议图片尺寸：640px*1136px" >
             {getFieldDecorator('poster')(
               <ImageUpload />,
           <Form.Item label="地图位置" >
             {getFieldDecorator('mapCoordinate')(<Amap onChange={e => props.form.setFieldsValue({ coordinate: e })}/>)}
           </Form.Item>
+          <Form.Item label="周边设施搜索范围" style={{ width: '2000px' }}>
+            {getFieldDecorator('mapScope', {
+              rules: [{ required: true, message: '请选择周边设施搜索范围' }],
+            })(
+              <Select placeholder="请选择周边设施搜索范围" style={{ width: '970px' }}>
+                <Option value={1000}>1公里</Option>
+                <Option value={3000}>3公里</Option>
+                <Option value={5000}>5公里</Option>
+                <Option value={10000}>10公里</Option>
+              </Select>,
+            )}
+          </Form.Item>
           <Form.Item label="周边交通" >
             {getFieldDecorator('buildingTransport')(
               <TagGroup />,

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

+import React from 'react';
+import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Radio, Tag, Tooltip, Tabs, Table, notification, Modal, Layout } from 'antd';
+
+const { Header, Footer, Sider, Content } = Layout;
+
+function BuildingImageModel() {
+  return (
+    <>
+      <span>效果图（10）</span>
+      <Button type="link">重命名</Button>
+      <Button type="link">删除相册</Button>
+    </>
+  )
+}
+
+
+function buildingImage() {
+  return (
+    <>
+      <Button type="primary">新增</Button>
+      <Layout>
+        <Content><BuildingImageModel /></Content>
+        <Content><BuildingImageModel /></Content>
+        <Content><BuildingImageModel /></Content>
+      </Layout>
+    </>
+  )
+}
+
+export default buildingImage

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

 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 { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Radio, Tag, Tooltip, Tabs, Table, notification, Modal } from 'antd';
 import moment from 'moment';
 import request from '../../../../../utils/request';
 import apis from '../../../../../services/apis';
 import { router } from 'umi';
 import ModalImage from './modalImage';
 
+const { confirm } = Modal;
+
 
 const saleType = [
   {
    * @param {*} record
    */
   function deleteApartment(record) {
-    // 网路请求
-    request({ ...apis.building.buildingApartmentDelete, urlData: { id: record.apartmentId } }).then(res => {
-      getList()
-      openNotificationWithIcon('success', '操作成功')
-    }).catch(err => {
-      // openNotificationWithIcon('error', err.message)
-    })
+    confirm({
+      title: '确认删除当前数据?',
+      content: '确定后成功删除，点击取消则放弃当前操作',
+      okText: '确定',
+      cancelText: '取消',
+      onOk() {
+        // 网路请求
+        request({ ...apis.building.buildingApartmentDelete, urlData: { id: record.apartmentId } }).then(res => {
+          getList()
+          openNotificationWithIcon('success', '操作成功')
+        }).catch(err => {
+          // openNotificationWithIcon('error', err.message)
+        })
+      },
+      onCancel() {},
+    });
   }
 
 
       dataIndex: 'apartmentName',
       key: 'apartmentName',
     },
-    {
-      title: '类型',
-      dataIndex: 'apartmentType',
-      key: 'apartmentType',
-      render: (_, record) => <span>{ record.apartmentType === 'apart' ? '户型' : '相册' }</span>,
-    },
     {
       title: '销售状态',
       dataIndex: 'marketStatus',
       render: (_, record) => <span>{ (saleType.filter(x => x.id == record.marketStatus)[0] || {}).name }</span>,
     },
     {
-      title: '备注',
-      dataIndex: 'remark',
-      key: 'remark',
+      title: '面积',
+      dataIndex: 'buildingArea',
+      key: 'buildingArea',
+      render: (buildingArea, _) => <span>{ `${buildingArea}m²` }</span>,
+    },
+    {
+      title: '套内面积',
+      dataIndex: 'insideArea',
+      key: 'insideArea',
+      render: (insideArea, _) => <span>{ `${insideArea}m²` }</span>,
     },
     {
       title: '创建时间',
 
       {/* 编辑页 */}
       {/*  onSuccess是子组件传递事件信息  */}
-      <ModalImage visibleData={visibleData} key={1} onSuccess={() => onModalChange()}/>
+      <ModalImage visibleData={visibleData} key="ModalImage" onSuccess={() => onModalChange()}/>
     </>
   )
 }

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

 const saleType = [
   {
     id: 1,
-    name: '待定',
+    name: '待售',
   },
   {
     id: 2,
               <Form.Item label="编号" style={{ display: 'none' }}>
                   {getFieldDecorator('apartmentId')(<Input />)}
               </Form.Item>
-              <Form.Item label="名称">
+              <Form.Item label="户型名称">
                 {getFieldDecorator('apartmentName', {
-                  rules: [{ required: true, message: '请输入名称' }],
-                })(<Input />)}
-              </Form.Item>
-              <Form.Item label="类型">
-                {getFieldDecorator('apartmentType', {
-                  rules: [{ required: true, message: '请选择类型' }],
-                })(
-                  <Select placeholder="类型">
-                    <Option value="apart">户型</Option>
-                    <Option value="photo">相册</Option>
-                  </Select>,
-                )}
+                  rules: [
+                    { required: true, message: '请填写户型名称' },
+                    { max: 10, message: '户型名称不超过10个字符' },
+                  ],
+                })(<Input placeholder="户型名称不超过10个字符"/>)}
               </Form.Item>
               <Form.Item label="销售状态">
-                {getFieldDecorator('marketStatus')(
+                {getFieldDecorator('marketStatus', {
+                  rules: [{ required: true, message: '请选择销售状态' }],
+                })(
                   <Select placeholder="销售状态">
                     {
                       saleType.map((item, _) => <Option value={item.id}>{item.name}</Option>)
               </Form.Item>
               <Form.Item label="图片">
               {getFieldDecorator('img', {
-                  rules: [{ required: true, message: '请选择图片' }],
+                  rules: [{ required: true, message: '请上传户型图片' }],
               })(
                 <ImageListUpload />,
               )}
               </Form.Item>
-              <Form.Item label="面积">
-                {getFieldDecorator('buildingArea')(<Input />)}
-              </Form.Item>
-              <Form.Item label="套内面积">
-                {getFieldDecorator('insideArea')(<Input />)}
-              </Form.Item>
-              <Form.Item label="户型总价">
-                {getFieldDecorator('apartmentPrice')(<Input />)}
-              </Form.Item>
-              <Form.Item label="户型简介">
-                {getFieldDecorator('apartmentDescription')(
-                  <Wangedit />,
-                )}
+              <Form.Item label="面积" help="单位 ㎡">
+                {getFieldDecorator('buildingArea', {
+                  rules: [{ required: true, message: '请填写面积' }],
+                })(<Input type="number" />)}
               </Form.Item>
-              <Form.Item label="备注">
-                {getFieldDecorator('remark')(<TextArea rows={10} />)}
+              <Form.Item label="套内面积" help="单位 ㎡">
+                {getFieldDecorator('insideArea', {
+                  rules: [{ required: true, message: '请填写套内面积' }],
+                })(<Input type="number" />)}
               </Form.Item>
               <Form.Item style={{ width: '400px', margin: 'auto', display: 'flex', justifyContent: 'space-between' }}>
                 <Button type="primary" htmlType="submit">保存</Button>

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

 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 { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Radio, Tag, Tooltip, Tabs, notification } from 'antd';
 import moment from 'moment';
 import request from '../../../../utils/request';
 import apis from '../../../../services/apis';
 import Wangedit from '../../../../components/Wangedit/Wangedit'
 import TagGroup from './components/tags'
 import Base from './components/base'
-import ImageSet from './components/imageSet'
+import Apartment from './components/imageSet'
 import Poster from './components/poster'
 import Share from './components/share'
+import BuildingImage from './components/buildingImage';
 
 
 const { Option } = Select
   },
 };
 
+function openNotificationWithIcon(type, message) {
+  notification[type]({
+    message,
+    description:
+      '',
+  });
+}
+
 function AddBuilding(props) {
 
   const [tab, setTab] = useState('base')
 
   function tabsCallback(e) {
     console.log(e);
-    setTab(e.target.value)
+    if (!buildingData.buildingId) {
+      openNotificationWithIcon('error', '请先保存基本信息')
+    } else {
+      setTab(e.target.value)
+    }
   }
 
   // building 回调
     setBuildingData(e)
   }
 
-  console.log('buildingData: ', buildingData)
-
   return (
     <>
       <Radio.Group value={ tab } buttonStyle="solid" onChange={e => tabsCallback(e)}>
         <Radio.Button value="base">基本信息</Radio.Button>
-        {
-          buildingData.buildingId &&
-          (
-            <>
-              <Radio.Button value="image">户型库</Radio.Button>
-              <Radio.Button value="poster">海报图片</Radio.Button>
-              <Radio.Button value="share">分享设置</Radio.Button>
-            </>
-          )
-        }
+        <Radio.Button value="apartment">户型库</Radio.Button>
+        <Radio.Button value="image">项目相册</Radio.Button>
+        <Radio.Button value="poster">海报图片</Radio.Button>
+        <Radio.Button value="share">分享设置</Radio.Button>
       </Radio.Group>
       <div style={{ marginTop: '20px' }}>
         { tab === 'base' && <Base building={{ buildingId: buildingData.buildingId || (props.location.query && props.location.query.id) }} onSuccess={e => buildingOnSuccess(e)}/> }
-        { buildingData.buildingId && (tab === 'image' && <ImageSet building={buildingData} />)}
-        { buildingData.buildingId && (tab === 'poster' && <Poster building={buildingData} />)}
-        { buildingData.buildingId && (tab === 'share' && <Share building={buildingData} />)}
+        { (tab === 'apartment' && <Apartment building={buildingData} />)}
+        { (tab === 'image' && <BuildingImage building={buildingData} />)}
+        { (tab === 'poster' && <Poster building={buildingData} />)}
+        { (tab === 'share' && <Share building={buildingData} />)}
       </div>
     </>
     // <Tabs defaultActiveKey="1" onChange={tabsCallback}>