fe_service_ebtp_frontend/src/pages/notice/noticeManage/components/NoticeManageComponents.tsx

import {BarsOutlined, UploadOutlined} from "@ant-design/icons"
import {
  Button,
  Card,
  Checkbox,
  Col,
  Collapse,
  DatePicker, Drawer,
  Form, Image,
  Input, List,
  message,
  Modal, Popover,
  Radio,
  Row,
  Spin, 
  Upload
} from "antd"
import React, {useEffect, useRef, useState} from "react"
import style from './style.less'
import {GetNoticeMsg, GetNoticeUsablePackage, creatNotice, getChooseRoom,addNotice,getPageInfo} from '../service'
import moment from "moment";
import request from '@/utils/request';
import FileDown from '@/utils/Download';
import Weboffice from "@/pages/webOffice/weboffice";
import {existingProblem} from "@/pages/Evaluation/expert/ReviewResults/Jury/service";
import {commonMessage} from "@/utils/MessageUtils";

//<FileDown apiUrl={`/api/biz-service-ebtp-rsms/v1/abstract/getJuryAbstracet?reviewTurnId=${getURLInformation("turnId")}&reviewType=2&projectName=${projectName}`} fileName='详审摘录表' type='xlsx' method='GET' btnName='详审摘录表导出'/>
interface NoticeManageComponents {
  modalVisible: boolean;
  titleName: string;
  onCancel: () => void;
  type: string;
  tpId: string;
  pkId: string;
  SX: () => void;
  noticeTitle:String;
  noticeContent:String;
  noticeFile:String;
}

const layout = {
  labelCol: {span: 7},
  wrapperCol: {span: 10},
};


const NoticeManageComponents: React.FC<NoticeManageComponents> = (props) => {
  const {Panel} = Collapse;
  const {titleName, modalVisible, onCancel, type, tpId, pkId, SX} = props;
  const [form] = Form.useForm();
  const [spinning, setSping] = useState<boolean>();//加载遮罩
  const [TpPackageId, setTpPackageId] = useState<any[]>([]); //标包信息
  const [editInformation, setEditInformation] = useState<boolean>(false);//是否可编
  const [editInformation4Change, setEditInformation4Change] = useState<boolean>(false);//是否可编
  const [annoNature, setAnnoNature] = useState<number>(1);
  const [TpPackageName, setTpPackageName] = useState<string>("招标");

  const [choiceHallType, setChoiceHallType] = useState<boolean>(false);//选择开标大厅窗口状态
  const [choiceHallData, setChoiceHallData] = useState<any>([]);//选择开标大厅窗口状态

  const [docFileCode, setDocFileCode] = useState<string>("");//文档id
  const [docBtnName, setDocBtnName] = useState<any>();//文档按钮文字
  const [docReadOnly, setDocReadOnly] = useState<string>("false");//是否可编辑
  const [docSaveBtn, setDocSaveBtn] = useState<string>("compact");//保存按钮是否展示


  /*weboffice 相关*/
  const WebofficeRef = useRef<Weboffice>(null);
  const onRef = (ref) => {
    /* this.child= ref;*/
  }
  /*拉取数据 beg*/
  useEffect(() => {
    Int();

    form.resetFields();//清除form中数据
  }, [pkId, type]);
  const Int = () => {
    setSping(true);
    if (type == "cease") {
      return;
    } else if (type == "new") {//==========================================================新建
 
          setSping(false);
          setDocBtnName("新建");
      setAnnoNature(1);//公告类型
      setEditInformation(false);//可编辑
    } else if (type == "edit" || type == "change") {//==========================================================编辑
      
      getPageInfo(pkId).then(res => {
        if (res != null && res.message == "success") {
          const data = res.data
          form.setFieldsValue({
            "id":pkId,
            "noticeTitle": data.noticeTitle,
            "noticeContent": data.noticeContent,
            "noticeFile": data.noticeFile,
          });
          setDocBtnName("编辑");
          //setDocFileCode(data.contentFileId);
          setSping(false);

        } else {
          onCancel();
          message.error('程序出错，请您稍后再试');
        }
      }
     );
      setAnnoNature(1);//公告类型
      setEditInformation(false);//可编辑
    } 
  };
  /*拉取数据 end*/


  /*提交数据*/
  const onFinish = async (data: any) => {
    form.validateFields().then(res => {
      const fromData = {
        "noticeTitle": form.getFieldValue("noticeTitle"),
        "noticeContent": form.getFieldValue("noticeContent"),
        "noticeFile": form.getFieldValue("noticeFile"),
        "id": pkId,
      }

      addNotice(fromData).then(res => {
        if (res != null && res.message == "success") {
          message.success("成功");
          setSping(true);
          onCancel();
          SX();
        } else {
          message.error("失败");
          setSping(true);
          onCancel();
        }

      });
    }).catch(res => {
      message.warn("您有未填写的选项！")
    });
  }
 

  /*提交数据*/
  const onSave = async (data: any) => {
    form.validateFields().then(res => {
      const fromData = {
        "noticeTitle": form.getFieldValue("noticeTitle"),
        "noticeContent": form.getFieldValue("noticeContent"),
        "noticeFile": form.getFieldValue("noticeFile"),
      }

      addNotice(fromData).then(res => {
        if (res != null && res.message == "success") {
          message.success("成功");
          setSping(true);
          onCancel();
          SX();
        } else {
          message.error("失败");
          setSping(true);
          onCancel();
        }

      });
    }).catch(res => {
      message.warn("您有未填写的选项！")
    });
  }


  const renderFooter = () => {
    if (type == "read") {
      return (
        <>
          <Button onClick={onCancel}>确认</Button>
        </>
      );
    } else if(type == "edit"){
      return (
        <>
          <Button onClick={onFinish}>确认</Button>
          <Button onClick={onCancel}>取消</Button>
        </>
      );
    }else if(type == "new"){
      return (
        <>
          <Button onClick={onSave}>确认</Button>
          <Button onClick={onCancel}>取消</Button>
        </>
      );
    }
  }
  // const getChooseRoomList = (day: any) => {
  //   let param = "";
  //   if (day == "") {
  //     param = moment().format("yyyy-MM-DD");
  //   } else {
  //     param = day;
  //   }
  //   getChooseRoom(param).then(res => {
  //     if (res != null && res.message == "success") {
  //       setChoiceHallData(res.data)
  //       setChoiceHallType(true);
  //     } else {
  //       message.error('程序出错，请您稍后再试');
  //     }

  //   })

  // }

  // const DatePickeronChange = (date: any, dateString: any) => {
  //   getChooseRoomList(dateString);
  // }
  // const confirmChooseRoom = (data: any) => {
  //   setChoiceHallType(false);
  //   form.setFieldsValue({
  //     "openhallId": data.id,
  //     "openhallIdTime": data.openDate
  //   });
  // }


  return (
    <Modal
    destroyOnClose={true}
    getContainer={false}
      title={titleName}
      visible={modalVisible}
      className="返回"
      onCancel={() => onCancel()}
      width={1000}
      bodyStyle={{padding: '32px 40px 48px', height: "600px", overflowY: 'auto'}}
      footer={renderFooter()}
    ><Spin spinning={spinning}>
      <Card>
        <Form
          {...layout}
          name="basic"
          form={form}
        >

          <Form.Item
            label="公告名称"
            name="noticeTitle"
            validateStatus="error"
            rules={[
              {
                required: true,
                message: '当前项不可为空',
              },
            ]}
          >
            <Input readOnly={editInformation || editInformation4Change}/>
          </Form.Item>

          <Form.Item
            label="公告内容"
            name="noticeContent"
            validateStatus="error"
            rules={[
              {
                required: true,
                message: '当前项不可为空',
              },
            ]}
          >
            <Input readOnly={editInformation || editInformation4Change}/>
          </Form.Item>
          {/* <Form.Item
            label={TpPackageName + "文件获取开始时间"}
            name="docStartTime"
            rules={[
              {
                required: true,
                message: '当前项不可为空',
              },
            ]}
          >
            <DatePicker disabled={editInformation || editInformation4Change} format={"yyyy-MM-DD HH:mm:ss"} showTime
                        style={{width: "100%"}}/>
          </Form.Item>
          <Form.Item
            label={TpPackageName + "文件获取截止时间"}
            name="docEndTime"
            rules={[
              {
                required: true,
                message: '当前项不可为空',
              },
            ]}
          >
            <DatePicker disabled={editInformation} showTime style={{width: "100%"}}/>
          </Form.Item> */}
    
          <Form.Item
            label="公告文档"
            name="noticeFile"
          >
            <div className={style.bidding}>
              <div className="uploadTotal">
                <Upload>
                  <Button type="primary" disabled={editInformation || editInformation4Change}
                          className="upload"><UploadOutlined/>上传</Button>
                </Upload>
                <p className="uploadLabel">最大能上传10M文件！</p>
              </div>
            </div>
          </Form.Item>
        </Form>
      </Card>
    </Spin>
    </Modal>

  )
}


export default NoticeManageComponents