fe_service_ebtp_frontend/src/pages/Bid/BiddingAnnouncement/components/BiddingDocument.tsx

import { BarsOutlined, UploadOutlined } from "@ant-design/icons"
import {Button, Card, Checkbox, Col, Collapse, Form, Input, message, Modal, Row, Spin, Upload} from "antd"
import React, {useEffect, useState} from "react"
import style from './style.less'
import {GetfileUsablePackage, GetfileMsg, creatfile, creatNotice} from "../service";

interface BiddingDocumentProps {
    modalVisible: boolean;
    titleName:string;
    onCancel: () => void;
    type:string;
    tpId:string;
    pkId:string;
  }
  const layout = {
    labelCol: { span: 7 },
    wrapperCol: { span: 10 },
  };
const BiddingDocument: React.FC<BiddingDocumentProps> = (props) => {
    const { Panel }  = Collapse;
    const { titleName , modalVisible , onCancel,type ,tpId,pkId} = props;
    const [TpPackageId,setTpPackageId] = useState<any[]>([]); //标包信息
    const [spinning,setSping]=useState<boolean>();//加载遮罩
    const [editInformation,setEditInformation]=useState<boolean>(false);//是否可编
    const [form] =Form.useForm();





  useEffect(()=>{
    Int();
    form.resetFields();//清除form中数据
  },[type,pkId]);

  const Int = () => {
    setSping(true);
    if(type=="cease"){
      return ;
    }else if(type=="new") {//==========================================================新建
      GetfileUsablePackage (tpId).then(res => {
        if(res!=null&&res.message=="success"){
          let thisData= [];
          for (const item of res.data) {
            thisData.push({"label": item.bsName, "value": item.bsId})
          }

          setTpPackageId(thisData);
        }else {
          message.error('程序出错，亲您稍后在世');
          onCancel();
        }
        setSping(false);
        setEditInformation(false);//可编辑
      });

    } else if(type=="edit") {//=========================================================修改
      GetfileUsablePackage (tpId).then(res => {
        if(res!=null&&res.message=="success"){
          let thisData1 = [];
          for (const item of res.data) {
            thisData1.push({"label": item.bsName, "value": item.bsId})
          }
          GetfileMsg (pkId).then(res => {
            if(res!=null&&res.message=="success"){
              const data = res.data;
              for(const item of data.sections){
                thisData1.push({"label":item.bsName,"value":item.bsId})
              }
              setTpPackageId(thisData1);
              form.setFieldsValue({
                  "documentName":data.documentName,
                  "documentSetId":data.documentSetId,
                  "sectionIds":data.sectionIds
                },
              )
              setSping(false);
              setEditInformation(false);//可编辑
            }else {
              message.error('程序出错，亲您稍后在世');
              onCancel();
            }
          });
        }else {
          message.error('程序出错，亲您稍后在世');
          onCancel();
        }
      });

    } else if(type=="read") {//=========================================================查看
      GetfileMsg (pkId).then(res => {
        if(res!=null&&res.message=="success"){
          const data = res.data;
          let thisData1=[];
          for(const item of data.sections){
            thisData1.push({"label":item.bsName,"value":item.bsId})
          }
          setTpPackageId(thisData1);
          form.setFieldsValue({
              "documentName":data.documentName,
              "documentSetId":data.documentSetId,
              "sectionIds":data.sectionIds
            },
          )
          setSping(false);
          setEditInformation(true)
        }else {
          message.error('程序出错，亲您稍后在世');
          onCancel();
        }
      });
    }

  }
  const onFinish = (values: any) => {
    const packageMsg=[];
    for (const item of TpPackageId){//包数据
      for (const item1 of form.getFieldValue("sectionIds"))
        if(item.value== item1)
          packageMsg.push({"bsId":item.value,"bsName":item.label})
    }
    const fromData ={
        "documentName":form.getFieldValue("documentName"),
        "documentSetId":form.getFieldValue("documentSetId")==null?"132456879":form.getFieldValue("documentSetId"),//附件id
        "sectionIds":packageMsg,

    }
    creatfile(type,fromData).then(res => {
      console.log(res.data);
    });

    console.log('Success:', fromData);
  };
  const renderFooter = () => {
    if (type=="read") {
      return (
        <>
          <Button  onClick={onCancel}>确认</Button>
        </>
      );
    }else {
      return (
        <>
          <Button  onClick={onFinish}>确认</Button>
          <Button onClick={onCancel}>取消</Button>
        </>
      );
    }
  }
    return (
        <Modal
        mask={true}
        destroyOnClose
        title={titleName}
        visible={modalVisible}
        onCancel={() => onCancel()}
        className="返回"
        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="documentName"
                >
                    <Input readOnly={editInformation} />
                </Form.Item>
                <Form.Item
                    label="关联标段"
                    name="sectionIds"
                >
                    <Checkbox.Group
                      options={TpPackageId}
                      style={{ width: '100%' }}
                      disabled={editInformation}
                    >
                    </Checkbox.Group>
                </Form.Item>
                <Form.Item
                    label="招标文件附件"
                    name="documentSetId"
                >
                    <div className={style.bidding}>
                        <div className="uploadTotal">
                            <Upload>
                                <Button type="primary" disabled={editInformation} className="upload"><UploadOutlined />上传</Button>
                            </Upload>
                            <p className="uploadLabel">最大能上传100M文件！</p>
                        </div>
                    </div>
                </Form.Item>
                </Form>
                <Collapse defaultActiveKey={['1']} ghost expandIcon={() => <BarsOutlined />}>
                    <Panel header="招标文件内容" key="1">
                            <Card style={{textAlign: "center"}}>
                                <div >
                                  <Button>请点此安装PageOffice控件</Button>
                              <p style={{color: '#ff7070'}}>安装完毕后请重启浏览器浏览本页即可</p>
                                </div>
                            </Card>
                    </Panel>
                </Collapse>
            </Card>
          </Spin>
      </Modal>

    )
}
export default BiddingDocument