CommunityNoticeDetail.tsx

import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Menu,DatePicker,Upload,Modal, Button } from 'antd';

import { Link, useIntl, connect, Dispatch } from 'umi';
import TextArea from 'antd/lib/input/TextArea';

import { PlusOutlined } from '@ant-design/icons';

import SelectOptions from '../../../components/SelectOptions/index';
const printContent = (comment: any)=>{
  console.log(comment)
}

function getBase64(file: Blob) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
const Template = () => {

  const [previewVisible, setPreviewVisible] = useState(false);
  const [previewImage, setPreviewImage] = useState("");
  const [previewTitle, setPreviewTitle] = useState("");
  const [fileList, setFileList] = useState([]);

  const uploadButton = (
    <div>
      <PlusOutlined />
      <div className="ant-upload-text">Upload</div>
    </div>
  );

  const handleCancel = () =>{ setPreviewVisible(false) };

  const handlePreview = async (file: { url: string; preview: string; originFileObj: Blob; name: any; }) => {
    if (!file.url && !file.preview) {
      file.preview =  await getBase64(file.originFileObj);
    }

    setPreviewImage((file.url || file.preview));
    setPreviewVisible(true);
    setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
  };

  const handleChange = (Obj: any) => { setFileList(Obj.fileList) }

  return (
    <div className={styles.base}>

      {/* 头部组件 */}
      <div className={styles.box}>
        <div className={styles.item1}>CommunityNotice Detail</div>
        <button className={styles.item3}>返回</button>
      </div>

      {/*<SelectOptions list={["美国", "美丽的", "美好", "加拿大", "加油", "XO"].sort()} onSubmit={printContent} />*/}
      <SelectOptions  list={["A1 Project","B1 Project","C1 Project","D1 Project","E1 Project","F1 Project"
        ,"G1 Project","H1 Project","I1 Project","J1 Project","K1 Project","L1 Project","M1 Project","N1 Project"
        ,"O1 Project","P1 Project","Q1 Project","R1 Project","S1 Project","T1 Project","U1 Project","V1 Project"
        ,"W1 Project","X1 Project","Y1 Project","Z1 Project"]}  onSubmit={printContent}/>
      <div className={styles.box1}>
        <div className={styles.box1item1}>Announcement Title</div>
        <div className={styles.box1item2}><Input style={{width:500}}/></div>
      </div>
      <div className={styles.box2}>
        <div className={styles.box2item1}>Announcement Title</div>
        <div className={styles.box2item2}><TextArea autoSize={false} style={{width:500,height:120}} /></div>
      </div>

      <div className={styles.box3}>
        <Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" listType="picture-card" fileList={fileList} onPreview={handlePreview} onChange={handleChange}>
          {fileList.length >= 3 ? null : uploadButton}
        </Upload>
        <Modal visible={previewVisible} title={previewTitle} footer={null} onCancel={handleCancel}>
          <img alt="picture" style={{ width: '100%' }} src={previewImage} />
        </Modal>
      </div>

      < div className = { styles.box4 } >
        <div className={styles.box4item1}>Entry into Force Time</div>
        <div className={styles.box4item2}><DatePicker/></div>
      </div>

      < div className = { styles.box4 } >
        <div className={styles.box4item1}>End Date</div>
        <div className={styles.box4item2}><DatePicker/></div>
      </div>

      <div className={styles.line}></div>
      <Button type="primary" style={{ width: 80, height: 32 }}>提交</Button>
    </div>
  );
};


export default Template;