GHHub/src/views/invoice/Detail.jsx

import { useParams, useNavigate, NavLink } from "react-router-dom";
import { useEffect, useState, useRef } from "react";
import { observer } from "mobx-react";
import { toJS, runInAction } from "mobx";
import { Row, Col, Space, Button, Typography, Card, Form, Upload, Input, Divider, DatePicker, Select, App, Modal } from "antd";
import { useStore } from "@/stores/StoreContext.js";
import { PlusOutlined } from "@ant-design/icons";
import { isNotEmpty } from "@/utils/commons";
import * as config from "@/config";
import dayjs from "dayjs";

const { Title } = Typography;
const { TextArea } = Input;

function Detail() {
	const navigate = useNavigate();
	const { GMDSN, GSN } = useParams();
	const { invoiceStore, authStore } = useStore();
	const { invoicekImages, invoiceGroupInfo, invoiceProductList, invoiceCurrencyList, invoiceZDDetail } = invoiceStore;
	const [form] = Form.useForm();
	const [dataLoading, setDataLoading] = useState(false);
	const { formCurrency, onCurrencyChange } = useState();
	const { notification } = App.useApp();

	const [invoicePicList, setInvoicePicList] = useState([]);

	useEffect(() => {
		console.info("Detail.useEffect: " + GMDSN + "/" + GSN);
		defaultShow();
	}, [GMDSN, GSN]);

	function defaultShow() {
		setDataLoading(true);
		invoiceStore
			.fetchInvoiceDetail(GMDSN, GSN)
			.then(json => {
				let ZDDetail = json.ZDDetail;
				let arrLen = ZDDetail.length;
				const formData = ZDDetail.map((data, index) => {
					if (data.GMD_Dealed == false && arrLen == index + 1) {
						//只有最后一条账单未审核通过才显示
						runInAction(() => {
							invoiceStore.invoiceFormData = { info_money: data.GMD_Cost, info_Currency: data.GMD_Currency, info_date: isNotEmpty(data.GMD_PayDate) ? dayjs(data.GMD_PayDate) : "", info_gmdsn: data.GMD_SN };
						});
						return { info_money: data.GMD_Cost, info_Currency: data.GMD_Currency, info_date: isNotEmpty(data.GMD_PayDate) ? dayjs(data.GMD_PayDate) : "", info_gmdsn: data.GMD_SN };
					}
				});

				if (form) {
					form.setFieldsValue(formData[arrLen - 1]); //{'info_money':'111','info_Currency':'THB','info_date':''}
				}

				//图片列表
				let arrPicList = ZDDetail.map((data, index) => {
					const GMD_Pic = data.GMD_Pic;
					let picList = [];
					if (isNotEmpty(GMD_Pic)) {
						let js_Pic = JSON.parse(GMD_Pic);
						picList = js_Pic.map((picData, pic_Index) => {
							return {
								uid: -pic_Index, //用负数，防止添加删除的时候错误
								name: "",
								status: "done",
								url: picData.url,
							};
						});
					}
					if (data.GMD_Dealed == false && arrLen == index + 1) {
						runInAction(() => {
							invoiceStore.invoicekImages = picList;
						});
					}
					return picList;
				});
				setInvoicePicList(arrPicList);
			})
			.catch(ex => {
				notification.error({
					message: `Notification`,
					description: ex.message,
					placement: "top",
					duration: 4,
				});
			})
			.finally(() => {
				setDataLoading(false);
			});
	}

	const fileList = toJS(invoicekImages);
	//图片列表
	let arrimg = [];
	if (isNotEmpty(fileList)) {
		arrimg = fileList.map((data, index) => {
			return {
				url: data.url,
			};
		});
	}
	const onFinish = values => {
		const fieldVaule = {
			...values,
			info_date: isNotEmpty(values["info_date"]) ? values["info_date"].format("YYYY-MM-DD") : null,
			info_images: JSON.stringify(arrimg),
		};
		console.log("Success:", fieldVaule);
		//入库
		if (fieldVaule) {
			invoiceStore.postEditInvoiceDetail(fieldVaule.info_gmdsn, fieldVaule.info_Currency, fieldVaule.info_money, fieldVaule.info_date, fieldVaule.info_images, "").then(data => {
				console.log(data);
				runInAction(() => {
					let param = { info_money: fieldVaule.info_money, info_Currency: fieldVaule.info_Currency, info_date: fieldVaule.info_date };
					invoiceStore.invoiceFormData = param;
				});
				if (data.errcode == 0) {
					notification.success({
						message: `Notification`,
						description: "Success Submit!",
						placement: "top",
						duration: 4,
					});
				}
			});
		}
	};

	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;
	};

	//币种
	function bindCurrency() {
		let arr = [];
		arr = invoiceCurrencyList.map((data, index) => {
			return {
				value: data.CRI_Code,
				label: data.CRI_Name,
			};
		});

		return arr;
	}

	function addInvoice() {
		invoiceStore
			.postAddInvoice(GSN, "", 0, "", "[]", "")
			.then(data => {})
			.finally(() => {
				defaultShow();
			});
	}

	function addButton(check) {
		if (check) {
			return (
				<Row>
					<Divider orientation="left"></Divider>
					<Button type="primary" block onClick={() => addInvoice(confirm)}>
						ADD New Invoice
					</Button>
				</Row>
			);
		}
	}

    //循环生成多次报账信息
    function bindSubmitForm() {
        let submitForm = invoiceZDDetail.map((data, index) => {
            if (data.GMD_Dealed) { //已审核的直接显示信息即可，无需表单
                return (
                    <Row key={data.GMD_SN} gutter={16} style={{ backgroundColor: "#f6f7f9", width: "100%", padding: "20px 40px" }} >
                        <Col span={4}></Col>
                        <Col span={18} >
                            <Divider orientation="left">Invoice {index + 1}</Divider>
                            <Upload
                                name="ghhfile"
                                accept="image/*"
                                multiple={true}
                                action={config.HT_HOST + `/service-fileServer/FileUpload?GRI_SN=${GSN}&VEI_SN=${authStore.login.travelAgencyId}&FilePathName=invoice&token=${authStore.login.token}`}
                                fileList={invoicePicList[index]}
                                listType="picture-card"
                            >
                                <div>
                                    <PlusOutlined />
                                    <div style={{ marginTop: 8 }}>Click to Upload</div>
                                </div>
                            </Upload>
                            <Divider orientation="left">Details</Divider>
                            <Row gutter={16}>
                                <Col span={8}>
                                    <Input addonBefore="Amount：" value={data.GMD_Cost} />
                                </Col>
                                <Col span={8}>
                                Currency： <Select
                                        placeholder="Select Currency type"
                                        allowClear
                                        options={bindCurrency()}
                                        value={data.GMD_Currency}
                                    >
                                    </Select>
                                </Col>
                                <Col span={8}>
                                    <Input addonBefore="Due Dat:" value={data.GMD_PayDate} />
                                </Col>
                            </Row>
                            {addButton(index + 1 == invoiceZDDetail.length)}
                        </Col>
                        <Col span={4}></Col>

                    </Row>

                )
            } else {
                // 一个团只能有一个未审核的账单记录
                return (
                    <Row key={data.GMD_SN} 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} style={{backgroundColor:"#fff" , padding:"20px"}}>
                                <Divider orientation="left">Invoice  {index + 1}</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}&FilePathName=invoice&token=${authStore.login.token}`}
                                        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">Details</Divider>
                                <Row gutter={16}>

                                    <Col span={8}> <Form.Item
                                        name="info_money"
                                        label="Amount："
                                        rules={[
                                            {
                                                required: true,
                                                message: "Please input your money!",
                                            },
                                        ]}
                                    >
                                        <Input />
                                    </Form.Item></Col>
                                    <Col span={8}><Form.Item
                                        name="info_Currency"
                                        label="Currency："
                                        rules={[
                                            {
                                                required: true,
                                                message: "Please select Currency type!",
                                            },
                                        ]}
                                    >
                                        <Select
                                            placeholder="Select Currency type"
                                            onChange={onCurrencyChange}
                                            allowClear
                                            options={bindCurrency()}
                                        >
                                        </Select>
                                    </Form.Item></Col>
                                    <Col span={8}>
                                        <Form.Item
                                            name="info_date"
                                            label="Due Date: "
                                        >
                                            <DatePicker />
                                        </Form.Item></Col>

                                </Row>
                                <Form.Item
                                    name="info_gmdsn"
                                    hidden={true}                                    
                                >
                                    <input />
                                </Form.Item>
                                <Form.Item>
                                    <Button type="primary" htmlType="submit">
                                        Submit
                                    </Button>
                                </Form.Item>
                                <p>Our Finance Dept makes payment during the last week in each month. So due date can only the last day of each month. If there's urgent payment, please contact the travel advisor and send invoice separately.</p>
                            </Form>
                        </Col>
                        <Col span={4}></Col>
                    </Row>
                )
            }

        })
        return submitForm;
    }



    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>
                {bindSubmitForm()}               
            </Space>
        </>
    );




}

export default observer(Detail);