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

				if (isNotEmpty(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() {
		if (isNotEmpty(invoiceZDDetail)){
			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}>
								<Descriptions column={4} title={"Invoice " + index + 1}>
									<Descriptions.Item span={4}>
										<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"></Upload>
									</Descriptions.Item>
									<Descriptions.Item label="Amount">{data.GMD_Cost}</Descriptions.Item>
									<Descriptions.Item label="Currency">{data.GMD_Currency}</Descriptions.Item>
									<Descriptions.Item label="Due Dat">{data.GMD_PayDate}</Descriptions.Item>
									<Descriptions.Item label="Status">{invoiceStore.invoiceStatus(data.FKState)}</Descriptions.Item>
								</Descriptions>

								{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"
											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} 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>
								</Form>
							</Col>
							<Col span={4}></Col>
						</Row>
					);
				}
			});
			return submitForm;
		}else{
				return(
					<Row gutter={16} style={{ backgroundColor: "#f6f7f9", width: "100%", padding: "20px 40px" }}>
						<Col span={4}></Col>
							<Col span={18}>
								{addButton(1==1)}
							</Col>
							<Col span={4}></Col>
					</Row>
				);				
			
		}
		
	}

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