全景图新需求

package.json

@@ -63,7 +63,7 @@
     "react-dom": "^16.8.6",
     "react-zmage": "^0.8.5",
     "redux": "^4.0.1",
-    "umi": "^2.8.7",
+    "umi": "^2.13.3",
     "umi-plugin-pro-block": "^1.3.2",
     "umi-plugin-react": "^1.9.5",
     "umi-request": "^1.0.8",

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

@@ -0,0 +1,249 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Table, Avatar, Radio, Modal, Descriptions, notification } from 'antd';
+import moment from 'moment';
+import request from '../../../../../utils/request';
+import apis from '../../../../../services/apis';
+import Styles from '../style.less';
+import ImageUpload from '../../../../../components/XForm/ImageUpload'
+import ImageListUpload from '../../../../../components/XForm/ImageListUpload'
+import Wangedit from '../../../../../components/Wangedit/Wangedit'
+
+
+const { Option } = Select;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const { Meta } = Card;
+
+const { TextArea } = Input;
+
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 2 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 16 },
+  },
+};
+
+const saleType = [
+  {
+    id: 1,
+    name: '待售',
+  },
+  {
+    id: 2,
+    name: '售罄',
+  },
+  {
+    id: 3,
+    name: '在售',
+  },
+]
+
+const houseType = [
+  {
+    id: '1',
+    name: '1室',
+  },
+  {
+    id: '2',
+    name: '2室',
+  },
+  {
+    id: '3',
+    name: '3室',
+  },
+  {
+    id: '4',
+    name: '4室',
+  },
+  {
+    id: '5',
+    name: '5室及以上',
+  },
+]
+  
+/**
+ * 图片信息
+ *
+ * @param {*} props
+ * @returns
+ */
+class ModalPanoramaImage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+       visibleData: { visible: false, apartmentId: '', buildingId: '',panoramaType: "apartment" },
+    }
+  }
+
+  // 挂载之后
+  // componentDidMount() {
+  //
+  // }
+
+  componentDidUpdate(preProps, preState) {
+    if (this.props.visibleData.visible !== preState.visibleData.visible) {
+      console.log(this.props.visibleData)
+      this.getById()
+      this.setState({ visibleData: this.props.visibleData });
+    }
+  }
+
+  // 弹框确定按钮
+  // eslint-disable-next-line react/sort-comp
+  handleOk() {
+    this.setState({ visibleData: { visible: false, apartmentId: '', buildingId: '' } })
+  }
+
+  // 弹框取消按钮
+  handleCancel() {
+    this.setState({ visibleData: { visible: false, apartmentId: '', buildingId: '' } })
+  }
+
+  getById(params) {
+    const { apartmentId } = this.props.visibleData
+    if (apartmentId === '' || apartmentId === undefined) {
+      return
+    }
+
+    // 网路请求
+    request({ ...apis.building.buildingApartmentGetById, urlData: { id: apartmentId }, params: { ...params } }).then(res => {
+      // res.img = res.buildingImgList.map(item => item.url)
+      if (res.buildingImgList) {
+        res.img = res.buildingImgList[0].url
+      }
+      
+      this.props.form.setFieldsValue(res)
+    }).catch(err => {
+     this.openNotificationWithIcon('error', err)
+    })
+  }
+
+  openNotificationWithIcon = (type, message) => {
+    notification[type]({
+      message,
+      description:
+        '',
+    });
+  };
+
+  // 提交
+  handleSubmit(e) {
+    e.preventDefault();
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        this.submitData(values)
+      }
+    });
+  }
+
+  submitData(data) {
+    data.buildingId = this.props.visibleData.buildingId;
+    const api = apis.paorama.add;
+
+    // 网路请求
+    request({ ...api, data: { ...data } }).then(() => {
+      // eslint-disable-next-line no-unused-expressions
+      this.openNotificationWithIcon('success', '操作成功')
+
+      // 传递父组件事件
+      // onSuccess() 是自定义
+      this.props.onSuccess()
+
+      // this.setState({ visibleData: { visible: false, apartmentId: '', buildingId: '' } }, () => console.log('回调：', this.state.visibleData))
+    }).catch(err => {
+      // eslint-disable-next-line no-unused-expressions
+      this.openNotificationWithIcon('error', err)
+    })
+  }
+
+  radioOnChange(e) {
+    this.setState({ visibleData: { ...this.state.visibleData, panoramaType: e.target.value } })
+  }
+
+  /**
+   * 取消按钮
+   *
+   * @memberof ModalImage
+   */
+  closeModal() {
+    this.setState({ visibleData: { visible: false, apartmentId: '', buildingId: '' } })
+  }
+
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    return (
+      <>
+        <Modal
+            title="新增全景图"
+            width={1100}
+            destroyOnClose="true"
+            footer={null}
+            visible={this.state.visibleData.visible}
+            onOk={() => this.handleOk()}
+            onCancel={e => this.handleCancel(e)}
+          >
+            <Form {...formItemLayout} onSubmit={e => this.handleSubmit(e)}>
+              <Form.Item label="全景类型">
+                {getFieldDecorator('panoramaType', {
+                  rules: [
+                    {
+                      required: true,
+                      message: '请选择全景类型',
+                    },
+                  ],
+                })(
+                  <Radio.Group onChange={(e) => this.radioOnChange(e)}>
+                    <Radio value="apartment">户型</Radio>
+                    <Radio value="building">项目</Radio>
+                  </Radio.Group>,
+                )}
+              </Form.Item>
+              { this.state.visibleData.panoramaType == "apartment" && <Form.Item label="全景内容">
+                {getFieldDecorator('apartmentId', {
+                  rules: [{ required: true, message: '请选择全景内容' }],
+                })(
+                  <Select placeholder="户型">
+                    {
+                      (this.state.visibleData.panoramaList || []).map((item, _) => <Option value={item.apartmentId}>{item.apartmentName}</Option>)
+                    }
+                  </Select>,
+                )}
+              </Form.Item>}
+              { this.state.visibleData.panoramaType == "building" && <Form.Item label="全景内容">
+                {getFieldDecorator('content', {
+                  rules: [{ required: true, message: '请输入全景内容' }],
+                })(
+                  <Input />,
+                )}
+              </Form.Item>}
+              <Form.Item label="选择封面" help="建议图片尺寸750px*600px，比例5:4,格式：jpg">
+              {getFieldDecorator('coverImg', {
+                  rules: [{ required: true, message: '请上传封面图片' }],
+              })(
+                // <ImageListUpload />,
+                <ImageUpload />,
+              )}
+              </Form.Item>
+              <Form.Item label="链接地址">
+                {getFieldDecorator('panoramaLink', {
+                  rules: [{ required: true, message: '请输入链接地址' }],
+                })(<Input />)}
+              </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={() => this.closeModal()}>取消</Button>
+              </Form.Item>
+            </Form>
+        </Modal>
+      </>
+    );
+  }
+}
+
+const WrappedModalPanoramaImageForm = Form.create({ name: 'modalPanoramaImage' })(ModalPanoramaImage);
+
+export default WrappedModalPanoramaImageForm

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

@@ -0,0 +1,182 @@
+import React, { useState, useEffect } from 'react';
+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 Styles from '../style.less';
+import { router } from 'umi';
+import ModalPanoramaImage from './modalPanoramaImage';
+
+const { confirm } = Modal;
+
+
+const saleType = [
+  {
+    id: 1,
+    name: '待售',
+  },
+  {
+    id: 2,
+    name: '售罄',
+  },
+  {
+    id: 3,
+    name: '在售',
+  },
+]
+
+const houseType = [
+  {
+    id: 1,
+    name: '1室',
+  },
+  {
+    id: 2,
+    name: '2室',
+  },
+  {
+    id: 3,
+    name: '3室',
+  },
+  {
+    id: 4,
+    name: '4室',
+  },
+  {
+    id: 5,
+    name: '5室及以上',
+  },
+]
+
+/**
+ *图片设置
+ *
+ * @param {*} props
+ * @returns
+ */
+function panoramaImage(props) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [data, setData] = useState([])
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [visibleData, setVisibleData] = useState({ visible: false, apartmentId: '', buildingId: '' })
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    getList()
+  }, [])
+
+  function openNotificationWithIcon(type, message) {
+    notification[type]({
+      message,
+      description:
+        '',
+    });
+  }
+
+  function getList(params) {
+    // 网路请求
+    request({ ...apis.paorama.list, urlData: { id: props.building.buildingId }, params: { ...params, apartmentType: 'apart' } }).then(res => {
+      setData(res)
+    }).catch(err => {
+      openNotificationWithIcon('error', err.message)
+    })
+  }
+
+  /**
+   *回调事件
+   *
+   */
+  function onModalChange() {
+    getList()
+    setVisibleData({ visible: false, apartmentId: '', buildingId: '' })
+  }
+
+  /**
+   *打开编辑页
+   *
+   * @param {*} record
+   */
+  function showEdi(record) {
+    // 网路请求
+    request({ ...apis.paorama.panoramaApartList, params: { buildingId:  props.building.buildingId } }).then(res => {
+      setVisibleData({ visible: true, apartmentId: record === undefined ? '' : record.apartmentId, buildingId: props.building.buildingId, panoramaType: "apartment", panoramaList: res })
+     }).catch(err => {
+      this.openNotificationWithIcon('error', err)
+     })
+  }
+
+  /**
+   * 删除
+   *
+   * @param {*} record
+   */
+  function deleteApartment(record) {
+    confirm({
+      title: '确认删除当前数据?',
+      content: '确定后成功删除，点击取消则放弃当前操作',
+      okText: '确定',
+      cancelText: '取消',
+      onOk() {
+        // 网路请求
+        request({ ...apis.paorama.delete, urlData: { id: record.panoramaId } }).then(res => {
+          getList()
+          openNotificationWithIcon('success', '操作成功')
+        }).catch(err => {
+          // openNotificationWithIcon('error', err.message)
+        })
+      },
+      onCancel() {},
+    });
+  }
+
+
+  const columns = [
+    {
+      title: '封面图',
+      dataIndex: 'coverImg',
+      key: 'coverImg',
+      render: (x, record) =>  <img style={{ width: '150px', height: '120px' }} 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) => (
+        <>
+          <Button type="link" style={{ color: 'red' }} onClick={() => deleteApartment(record)}>删除</Button>
+        </>
+      ),
+    },
+  ]
+
+  return (
+    <>
+      <Button type="primary" onClick={() => showEdi()}>新增全景图</Button>
+      <Button type="danger" style={{ marginLeft: '18px'}} onClick={() => router.go(-1)}>返回</Button>
+      <Table dataSource={data} columns={columns} pagination={false} rowKey="imageSet" />
+
+      {/* 编辑页 */}
+      {/*  onSuccess是子组件传递事件信息  */}
+      <ModalPanoramaImage visibleData={visibleData} key="ModalImage" onSuccess={() => onModalChange()}/>
+    </>
+  )
+}
+
+export default panoramaImage

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

@@ -12,6 +12,7 @@ import Wangedit from '../../../../components/Wangedit/Wangedit'
 import TagGroup from './components/tags'
 import Base from './components/base'
 import Apartment from './components/imageSet'
+import PanoramaImage from './components/panoramaImage'
 import Poster from './components/poster'
 import Share from './components/share'
 import BuildingImage from './components/buildingImage';
@@ -64,6 +65,7 @@ function AddBuilding(props) {
         <Radio.Button value="base">基本信息</Radio.Button>
         <Radio.Button value="apartment">户型库</Radio.Button>
         <Radio.Button value="image">项目相册</Radio.Button>
+        <Radio.Button value="panorama">全景图片</Radio.Button>
         <Radio.Button value="poster">海报图片</Radio.Button>
         <Radio.Button value="share">分享设置</Radio.Button>
       </Radio.Group>
@@ -71,6 +73,7 @@ function AddBuilding(props) {
         { tab === 'base' && <Base building={{ buildingId: buildingData.buildingId || (props.location.query && props.location.query.id) }} onSuccess={e => buildingOnSuccess(e)}/> }
         { (tab === 'apartment' && <Apartment building={buildingData} />)}
         { (tab === 'image' && <BuildingImage building={buildingData} />)}
+        { (tab === 'panorama' && <PanoramaImage building={buildingData} />)}
         { (tab === 'poster' && <Poster building={buildingData} />)}
         { (tab === 'share' && <Share building={buildingData} />)}
       </div>

src/pages/building/list/index.jsx

@@ -175,7 +175,7 @@ function body(props) {
   const { getFieldDecorator } = props.form
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const [dataSource, setDataSource] = useState({ records: [] })
+  const [dataSource, setDataSource] = useState({ records: [],size: 0 })
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {

src/services/apis.js

@@ -1028,6 +1028,28 @@ export default {
     action: 'admin.posterTemplate.get',
   },
  },
+ paorama: {
+  panoramaApartList: {
+    url: `${prefix}/panorama/apartment`,
+    method: 'GET',
+    action: 'admin.panoramaApartList.get',
+  },
+  add: {
+    url: `${prefix}/panorama`,
+    method: 'POST',
+    action: 'admin.panorama.post',
+  },
+  list: {
+    url: `${prefix}/panorama/:id`,
+    method: 'GET',
+    action: 'admin.panorama.id.get',
+  },
+  delete: {
+    method: 'DELETE',
+    url: `${prefix}/panorama/:id`,
+    action: 'admin.panorama.id.delete',
+  }
+ },
  amap: { // 高德地图
    webService: { // Web服务Api ---- 周边搜索
      url: `${amapPrefix}/place/around`,