GHHub/src/views/invoice/Detail.jsx

import { useParams, useNavigate } 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 [isModalOpen, setIsModalOpen] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);

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


    useEffect(() => {
        console.info("Detail.useEffect: " + GMDSN + "/" + GSN);
        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);
        });

    }, [GMDSN, GSN]);


    function defaultShow(json){
        
    }

    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 onAddFinish = 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.postAddInvoice(GSN, fieldVaule.info_Currency, fieldVaule.info_money, fieldVaule.info_date, fieldVaule.info_images, "").then((data) => {
                console.log("return:",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,
                    // });
                    setIsModalOpen(false);
                }

            });
        }

    };


    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) => {
            runInAction(() => {
                invoiceStore.invoiceFormData = {'info_money':0,'info_Currency':'','info_date':'','info_gmdsn':GMDSN};
            });    
        });
    }

    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">第 {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">提交信息</Divider>
                            <Row gutter={16}>
                                <Col span={8}>
                                    <Input addonBefore="报账总额：" value={data.GMD_Cost} />
                                </Col>
                                <Col span={8}>
                                    金额币种： <Select
                                        placeholder="Select Currency type"
                                        allowClear
                                        options={bindCurrency()}
                                        value={data.GMD_Currency}
                                    >
                                    </Select>
                                </Col>
                                <Col span={8}>
                                    <Input addonBefore="最迟付款日期:" 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}>
                                <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}&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">提交信息</Divider>
                                <Row gutter={16}>

                                    <Col span={8}> <Form.Item
                                        name="info_money"
                                        label="报账总额："
                                        rules={[
                                            {
                                                required: true,
                                                message: "Please input your money!",
                                            },
                                        ]}
                                    >
                                        <Input />
                                    </Form.Item></Col>
                                    <Col span={8}><Form.Item
                                        name="info_Currency"
                                        label="金额币种："
                                        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="最迟付款日期: "
                                        >
                                            <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>
                            </Form>
                        </Col>
                        <Col span={4}></Col>
                    </Row>
                )
            }

        })
        return submitForm;
    }


    //#region  Modal
    const showConfirmModal = (confirm) => {
        setIsModalOpen(true);
    };

    const fromRef = useRef()
    const handleOk = () => {
        setConfirmLoading(true);
        try{
            fromRef.current?.submit();
            //onAddFinish;
            //setIsModalOpen(false);
        } finally{
           
            setConfirmLoading(false);
            navigate("/invoice/detail/"+GMDSN+"/"+GSN)
        }
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };

    //#endregion



    return (
        <>
            {/* <Modal
                centered
                confirmLoading={confirmLoading}
                open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
                width={1000}
            >
                <Title level={4}>Add New Invoice</Title>
                <Form name="invoice_add" onFinish={onAddFinish} labelCol={{ span: 5 }} form={form} ref={fromRef}>
                    <Divider orientation="left">上传照片</Divider>
                    <Form.Item 
                      labelCol={{
                        span: 8,
                      }}
                      wrapperCol={{
                        span: 16,
                      }}
                    >
                        <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">提交信息</Divider>                

                         <Form.Item
                            name="info_money"
                            label="报账总额："
                            rules={[
                                {
                                    required: true,
                                    message: "Please input your money!",
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            name="info_Currency"
                            label="金额币种："
                            rules={[
                                {
                                    required: true,
                                    message: "Please select Currency type!",
                                },
                            ]}
                        >
                            <Select
                                placeholder="Select Currency type"
                                onChange={onCurrencyChange}
                                allowClear
                                options={bindCurrency()}
                            >
                            </Select>
                        </Form.Item>
               
                            <Form.Item
                                name="info_date"
                                label="最迟付款日期: "
                            >
                                <DatePicker />
                            </Form.Item>

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




}


export default observer(Detail);