项目图片设置

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

 import apis from '../../../../../services/apis';
 import Styles from '../style.less';
 import { router } from 'umi';
+import ModalImage from './modalImage';
 
 
 const saleType = [
   // 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 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)
+      openNotificationWithIcon('error', err.message)
+    })
+  }
+
+  /**
+   *打开编辑页
+   *
+   * @param {*} record
+   */
+  function showEdi(record) {
+    setVisibleData({ visible: true, apartmentId: record === undefined ? '' : record.apartmentId, buildingId: props.building.buildingId })
+  }
+
+  /**
+   * 删除
+   *
+   * @param {*} record
+   */
+  function deleteApartment(record) {
+    // 网路请求
+    const { url, method } = apis.building.buildingApartmentDelete
+    const tempUrl = url.substring(0, url.lastIndexOf('id')).concat(record.apartmentId)
+
+    request({ url: tempUrl, method }).then(res => {
+      getList()
+      openNotificationWithIcon('error', '操作成功')
+    }).catch(err => {
+      openNotificationWithIcon('error', err.message)
     })
   }
 
       key: 'apartmentId',
       render: (_, record) => (
         <>
-          <Button type="link" style={{ color: 'red' }}>编辑</Button>
-          <Button type="link" style={{ color: 'red' }}>删除</Button>
+          <Button type="link" style={{ color: 'red' }} onClick={() => showEdi(record)}>编辑</Button>
+          <Button type="link" style={{ color: 'red' }} onClick={() => deleteApartment(record)}>删除</Button>
         </>
       ),
     },
 
   return (
     <>
-      <Button type="primary">新增图片库</Button>
+      <Button type="primary" onClick={() => showEdi()}>新增图片库</Button>
       <Table dataSource={data} columns={columns} pagination={false} />
+
+      {/* 编辑页 */}
+      {/*  onSuccess是子组件传递事件信息  */}
+      <ModalImage visibleData={visibleData} key={visibleData.apartmentId} onSuccess={getList}/>
     </>
   )
 }

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

+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 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: '在售',
+  },
+]
+
+/**
+ * 图片信息
+ *
+ * @param {*} props
+ * @returns
+ */
+class ModalImage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+       visibleData: { visible: false, apartmentId: '', buildingId: '' },
+    }
+  }
+
+  // 挂载之后
+  // componentDidMount() {
+  //
+  // }
+
+  componentDidUpdate(preProps, preState) {
+    console.log(this.props.visibleData)
+    if (this.props.visibleData.visible !== preState.visibleData.visible) {
+      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
+    }
+
+    // 网路请求
+    const { url, method } = apis.building.buildingApartmentGetById
+    const tempUrl = url.substring(0, url.lastIndexOf('id')).concat(apartmentId)
+
+    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)
+    }).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) {
+    // TODO 这里应该是要支持多图，但是封装的控件没有
+    data.img = [{ imgType: 'aparment', url: data.img, orderNo: 1 }]
+    data.buildingId = this.props.visibleData.buildingId;
+    const api = data.apartmentId !== undefined ? apis.building.buildingApartmentUpdate : apis.building.buildingApartmentAdd;
+
+    // 网路请求
+    request({ ...api, data: { ...data } }).then(() => {
+      // eslint-disable-next-line no-unused-expressions
+      this.openNotificationWithIcon('success', '操作成功')
+
+      // 传递父组件事件
+      // onSuccess() 是自定义
+      this.props.onSuccess()
+
+      this.handleCancel()
+    }).catch(err => {
+      // eslint-disable-next-line no-unused-expressions
+      this.openNotificationWithIcon('error', err)
+    })
+  }
+
+  /**
+   * 取消按钮
+   *
+   * @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="编号" style={{ display: 'none' }}>
+                  {getFieldDecorator('apartmentId')(<Input />)}
+              </Form.Item>
+              <Form.Item label="名称">
+                {getFieldDecorator('apartmentName')(<Input />)}
+              </Form.Item>
+              <Form.Item label="类型">
+                {getFieldDecorator('apartmentType')(
+                  <Select placeholder="类型">
+                    <Option value="apart">户型</Option>
+                    <Option value="photo">相册</Option>
+                  </Select>,
+                )}
+              </Form.Item>
+              <Form.Item label="销售状态">
+                {getFieldDecorator('marketStatus')(
+                  <Select placeholder="销售状态">
+                    {
+                      saleType.map((item, _) => <Option value={item.id}>{item.name}</Option>)
+                    }
+                  </Select>,
+                )}
+              </Form.Item>
+              <Form.Item label="图片">
+              {getFieldDecorator('img')(
+                <ImageUpload />,
+              )}
+              </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>
+              <Form.Item label="备注">
+                {getFieldDecorator('remark')(<TextArea rows={10} />)}
+              </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 WrappedModalImageForm = Form.create({ name: 'modalImage' })(ModalImage);
+
+export default WrappedModalImageForm

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

         {tags.map((tag, index) => {
           const isLongTag = tag.length > 20;
           const tagElem = (
-            <Tag key={tag} closable={index !== 0} onClose={() => this.handleClose(tag)}>
+            <Tag key={tag} closable onClose={() => this.handleClose(tag)}>
               {isLongTag ? `${tag.slice(0, 20)}...` : tag}
             </Tag>
           );

src/pages/building/list/index.jsx

           )}
         </Form.Item>
         <Form.Item>
-          <Button type="primary" htmlType="submit" className={Styles.SubmitButton}>
+          <Button type="primary" htmlType="submit">
             搜索
           </Button>
         </Form.Item>
       </Form>
-      <Button type="primary" className={Styles.addButton} onClick={() => toAdd()}>
+      <Button type="danger" className={Styles.addButton} onClick={() => toAdd()}>
         新增楼盘
       </Button>
 

src/pages/building/list/style.css

   border: 1px solid #dbdbdb;
 }
 .addButton {
-  background: #50be00;
   border-radius: 4px;
   border: 0px;
   margin: 10px 0px;

src/pages/building/list/style.less

   border: 1px solid #dbdbdb;
 }
 .addButton {
-  background: #50be00;
   border-radius: 4px;
   border: 0px;
   margin: 10px 0px;

src/pages/building/list/style.wxss

   border: 1px solid #dbdbdb;
 }
 .addButton {
-  background: #50be00;
   border-radius: 4px;
   border: 0px;
   margin: 10px 0px;

src/services/apis.js

       method: 'GET',
       url: `${prefix}/buildingApartment/buildingId/id`,
     },
+    buildingApartmentGetById: {
+      method: 'GET',
+      url: `${prefix}/buildingApartment/id`,
+    },
+    buildingApartmentUpdate: {
+      method: 'PUT',
+      url: `${prefix}/buildingApartment/update`,
+    },
+    buildingApartmentAdd: {
+      method: 'POST',
+      url: `${prefix}/buildingApartment/add`,
+    },
+    buildingApartmentDelete: {
+      method: 'DELETE',
+      url: `${prefix}/apartment/deleted/id`,
+    },
   },
   buildingType: {
     getList: {