提交

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

@@ -1,36 +1,112 @@
-import React, { useState } from 'react';
+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, Layout } from 'antd';
 import ImageListUpload from '../../../../../components/XForm/ImageListUpload';
 
 const { Header, Footer, Sider, Content } = Layout;
 
-function BuildingImageModel() {
+/**
+ * 弹框
+ */
+function ModalEdi(props) {
+
+  const [visibleData, setVisibleData] = useState({ visible: false })
+
+  if (!props.visibleData) {
+    console.error('缺少visibleData参数!')
+  }
+
+  useEffect(() => {
+    setVisibleData(props.visibleData)
+  }, [props.visibleData.visible])
+
+  function handleOk(e) {
+    // console.log(e);
+    props.onCancel();
+  }
+
+  function handleCancel(e) {
+    // console.log(e);
+    props.onCancel();
+  }
+
+  return (
+    <>
+      <Modal
+          title="Basic Modal"
+          visible={visibleData.visible}
+          onOk={handleOk}
+          onCancel={handleCancel}
+        >
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+        </Modal>
+    </>
+  )
+}
+
+/**
+ * 模块
+ */
+function BuildingImageModel(props) {
   const [imageList, setImageList] = useState([])
+  const [visibleData, setVisibleData] = useState({ visible: false })
 
   function onImageChange(e) {
     setImageList(e)
   }
 
+  function edi() {
+    setVisibleData({ visible: true })
+  }
+
+  function onCancel(e) {
+    setVisibleData({ visible: false })
+  }
+
+  function deletePhoto() {
+
+  }
+
   return (
     <>
-      <span>效果图（10）</span>
-      <Button type="link" style={{ color: 'blue' }}>重命名</Button>
-      <Button type="link" style={{ color: 'blue' }}>删除相册</Button>
+<span style={{ marginTop: '10px', marginBottom: '10px' }}>效果图（{imageList.length}）</span>
+      <Button type="link" style={{ color: 'blue' }} onClick={() => edi()}>重命名</Button>
+      <Button type="link" style={{ color: 'blue' }} onClick={() => deletePhoto()}>删除相册</Button>
       <ImageListUpload value={imageList} onChange={onImageChange} unlimited/>
+
+       {/* 编辑页 */}
+       <ModalEdi visibleData={visibleData} onCancel={e => onCancel(e)}/>
+       <hr />
     </>
   )
 }
 
-
+/**
+ * 主体
+ */
 function buildingImage() {
+  const [visibleData, setVisibleData] = useState({ visible: false })
+
+  function edi() {
+    setVisibleData({ visible: true })
+  }
+
+  function onCancel(e) {
+    setVisibleData({ visible: false })
+  }
+
   return (
     <>
-      <Button type="primary">新增</Button>
-      <Layout>
+      <Button type="primary" onClick={() => edi()}>新增</Button>
+      <Layout style={{ background: '#fff' }}>
         <Content><BuildingImageModel /></Content>
         <Content><BuildingImageModel /></Content>
         <Content><BuildingImageModel /></Content>
       </Layout>
+
+      {/* 编辑页 */}
+      <ModalEdi visibleData={visibleData} onCancel={e => onCancel(e)}/>
     </>
   )
 }