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, Image, Steps } from "antd";
import { useStore } from "@/stores/StoreContext.js";
import { PlusOutlined, AuditOutlined, SmileOutlined, SolutionOutlined, EditOutlined } from "@ant-design/icons";
import { isNotEmpty } from "@/utils/commons";
import * as config from "@/config";
import dayjs from "dayjs";

const { Title,Text } = 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 [edited, setEdited] = useState(true); //表单是否允许编辑
	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);
							setEdited(false);
						}}>
						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}>
							<Col span={4}></Col>
							<Col span={16}>
								<Card type="inner" title={"Invoice " + ++index}>
									<Row gutter={16}>
										<Col span={12}>
											<Descriptions column={1}>
												<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>
										</Col>
										<Col span={12}>
											<Image.PreviewGroup>
												{invoicePicList[index] &&
													invoicePicList[index].map(item => {
														return <Image key={item.uid} width={90} src={item.url} />;
													})}
											</Image.PreviewGroup>
										</Col>
									</Row>
								</Card>
								{addButton(index++ == invoiceZDDetail.length)}
							</Col>
							<Col span={4}></Col>
						</Row>
					);
				} else {
					// 一个团只能有一个未审核的账单记录
					return (
						<Row key={data.GMD_SN} gutter={16}>
							<Col span={4}></Col>
							<Col span={16}>
								<Card
									type="inner"
									title={"Invoice " + ++index}
									extra={
										<Button type="link" onClick={() => setEdited(false)}>
											Edit
										</Button>
									}>
									<Form name="invoice_submit" onFinish={onFinish} form={form} disabled={edited}>
										<Row gutter={16}>
											<Col span={12}>
												<Form.Item
													name="info_money"
													label="Amount"
													rules={[
														{
															required: true,
															message: "Please input your money!",
														},
													]}>
													<Input />
												</Form.Item>

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

												<Form.Item name="info_date" label="Due Month">
													<DatePicker picker="month" /><br/>
													<Text type="secondary">Payment is arranged during the last week of each month. If the invoice is issued after the 20th, please select the following month for payment. For urgent payments, please contact the travel advisor. </Text>
												</Form.Item>

												<Form.Item name="info_gmdsn" hidden={true}>
													<input />
												</Form.Item>
												<Form.Item>
													<Button type="primary" htmlType="submit">
														Submit
													</Button>
												</Form.Item>
											</Col>
											<Col span={12}>
												<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}
														accept=".jpg,.png,.peg,.bmp"
														>
														<div>
															<PlusOutlined />
															<div style={{ marginTop: 8 }}>Upload Invoice</div>
														</div>
													</Upload>
												</Form.Item>
											</Col>
										</Row>
									</Form>
								</Card>
							</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);