|
|
|
|
@ -1,18 +1,152 @@
|
|
|
|
|
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} 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>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
赵鹏
2 years ago