GHHub/src/views/invoice/Detail.jsx

import { useParams, useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";
import { observer } from "mobx-react";
import { toJS, runInAction } from "mobx";
import { Row, Col, Space, Button, Typography,Card,Form,Upload ,Input,Divider} from "antd";
import { useStore } from "@/stores/StoreContext.js";
import { PlusOutlined } from "@ant-design/icons";
import * as config from "@/config";
const { Title } = Typography;

function Detail() {
    const navigate = useNavigate();
    const {GMDSN,GSN} = useParams();
    const { invoiceStore, authStore } = useStore();
    const { invoicekImages ,invoiceGroupInfo,invocieProductList} = invoiceStore;
    const [form] = Form.useForm();
    const [dataLoading, setDataLoading] = useState(false);


    useEffect(() => {
        console.info("Detail.useEffect: " + GMDSN+"/"+GSN);
        setDataLoading(true);
        invoiceStore.fetchInvoiceDetail(GMDSN,GSN)
        .catch(ex => {
            notification.error({
            message: `Notification`,
            description: ex.message,
            placement: 'top',
            duration: 4,
            });
        })
        .finally(() => {
            setDataLoading(false);
        });

    },[GMDSN,GSN]);

    const fileList = toJS(invoicekImages);
    const onFinish = values => {
		console.log("Success:", values);
		if (values) {
            alert(values);
		}
	};
    const handleChange = info => {
		console.log(info);
		let newFileList = [...info.fileList];
		newFileList = newFileList.map(file => {
			if (file.response && file.response.result) {
				file.url = file.response.result.file_url;
			}
			return file;
		});
		runInAction(() => {
			invoiceStore.invoicekImages = newFileList;
		});
	};

	const handRemove = info => {
		console.log(info);
		invoiceStore.removeFeedbackImages(info.url);
		return true;
	};


    return (
        <Space direction="vertical" style={{ width: "100%" }}>
            <Row gutter={16}>
				<Col span={20}>
					<Title level={4}>Reference Number: {invoiceGroupInfo.VGroupInfo}</Title>
				</Col>
				<Col span={4}>
					<Button type="link" onClick={() => navigate("/invoice")}>
						Back
					</Button>
				</Col>
			</Row>
            <Title level={5}>基础信息</Title>
            <Row gutter={16} style={{ backgroundColor:"#f6f7f9",width:"100%",padding:"20px 40px"}} >
                    <Col span={8}>
                    <Card title="组 团" bordered={false}>
                      <p>CHINA HIGHLIGHTS</p>  
                    </Card>
                    </Col>
                    <Col span={8}>
                    <Card title="组团人" bordered={false}>
                       <p>{invoiceGroupInfo.WLFirstName} {invoiceGroupInfo.WLLastName} &nbsp;&nbsp; Email: {invoiceGroupInfo.WLEmail}</p>
                    </Card>
                    </Col>
                    <Col span={8}>
                    <Card title="客人国籍" bordered={false}>
                     <p>{invoiceGroupInfo.County}</p>
                    </Card>
                    </Col>
                </Row>
            <Title level={5}>报账信息</Title>
            <Row gutter={16} style={{ backgroundColor:"#f6f7f9",width:"100%",padding:"20px 40px"}} >
                <Col span={4}></Col>
                <Col span={18}>
                    <Form name="invoice_submit" onFinish={onFinish} labelCol={{ span: 5 }} form={form}>
                        <Divider orientation="left">上传照片</Divider>
                        <Form.Item>
                            <Upload
								name="ghhfile"
								accept="image/*"
								multiple={true}
								action={config.HT_HOST + `/service-fileServer/FileUpload?GRI_SN=${GSN}&VEI_SN=${authStore.login.travelAgencyId}`}
								fileList={fileList}
								listType="picture-card"
								onChange={handleChange}
								onRemove={handRemove}>
								<div>
									<PlusOutlined />
									<div style={{ marginTop: 8 }}>Click to Upload</div>
								</div>
							</Upload>
                        </Form.Item>
                        <Divider orientation="left">提交信息</Divider>
                        <Form.Item>
                            <Input addonBefore="报账总额：" defaultValue="0.00" />
                        </Form.Item>
                        <Form.Item>
                            <Input addonBefore="币种选择：" defaultValue="0.00" />
                        </Form.Item>
                        <Form.Item
                            name="info_content"
                            rules={[
                                {
                                    required: true,
                                    message: "Please input your messages!",
                                },
                            ]}
                        >

                            <Input addonBefore="付款日期：" defaultValue="0.00" />
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit">
								Submit
							</Button>
                        </Form.Item>
                    </Form>
                </Col>
                <Col span={4}></Col>
            </Row>

        </Space>
    );



    
}


export default observer(Detail);