|
|
|
@ -1,8 +1,8 @@
|
|
|
|
import { useParams, useNavigate } from "react-router-dom";
|
|
|
|
import { useParams, useNavigate, NavLink } from "react-router-dom";
|
|
|
|
import { useEffect, useState ,useRef } from "react";
|
|
|
|
import { useEffect, useState, useRef } from "react";
|
|
|
|
import { observer } from "mobx-react";
|
|
|
|
import { observer } from "mobx-react";
|
|
|
|
import { toJS, runInAction } from "mobx";
|
|
|
|
import { toJS, runInAction } from "mobx";
|
|
|
|
import { Row, Col, Space, Button, Typography, Card, Form, Upload, Input, Divider, DatePicker, Select, App, Modal } from "antd";
|
|
|
|
import { Row, Col, Space, Button, Typography, Card, Form, Upload, Input, Divider, DatePicker, Select, App, Descriptions } from "antd";
|
|
|
|
import { useStore } from "@/stores/StoreContext.js";
|
|
|
|
import { useStore } from "@/stores/StoreContext.js";
|
|
|
|
import { PlusOutlined } from "@ant-design/icons";
|
|
|
|
import { PlusOutlined } from "@ant-design/icons";
|
|
|
|
import { isNotEmpty } from "@/utils/commons";
|
|
|
|
import { isNotEmpty } from "@/utils/commons";
|
|
|
|
@ -13,493 +13,299 @@ const { Title } = Typography;
|
|
|
|
const { TextArea } = Input;
|
|
|
|
const { TextArea } = Input;
|
|
|
|
|
|
|
|
|
|
|
|
function Detail() {
|
|
|
|
function Detail() {
|
|
|
|
const navigate = useNavigate();
|
|
|
|
const navigate = useNavigate();
|
|
|
|
const { GMDSN, GSN } = useParams();
|
|
|
|
const { GMDSN, GSN } = useParams();
|
|
|
|
const { invoiceStore, authStore } = useStore();
|
|
|
|
const { invoiceStore, authStore } = useStore();
|
|
|
|
const { invoicekImages, invoiceGroupInfo, invoiceProductList, invoiceCurrencyList, invoiceZDDetail } = invoiceStore;
|
|
|
|
const { invoicekImages, invoiceGroupInfo, invoiceProductList, invoiceCurrencyList, invoiceZDDetail } = invoiceStore;
|
|
|
|
const [form] = Form.useForm();
|
|
|
|
const [form] = Form.useForm();
|
|
|
|
const [dataLoading, setDataLoading] = useState(false);
|
|
|
|
const [dataLoading, setDataLoading] = useState(false);
|
|
|
|
const { formCurrency, onCurrencyChange } = useState();
|
|
|
|
const { formCurrency, onCurrencyChange } = useState();
|
|
|
|
const { notification } = App.useApp();
|
|
|
|
const { notification } = App.useApp();
|
|
|
|
|
|
|
|
|
|
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
|
|
const [invoicePicList, setInvoicePicList] = useState([]);
|
|
|
|
const [confirmLoading, setConfirmLoading] = useState(false);
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
const [invoicePicList,setInvoicePicList] = useState([]);
|
|
|
|
console.info("Detail.useEffect: " + GMDSN + "/" + GSN);
|
|
|
|
|
|
|
|
defaultShow();
|
|
|
|
|
|
|
|
}, [GMDSN, GSN]);
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
|
|
console.info("Detail.useEffect: " + GMDSN + "/" + GSN);
|
|
|
|
function defaultShow() {
|
|
|
|
defaultShow();
|
|
|
|
setDataLoading(true);
|
|
|
|
|
|
|
|
invoiceStore
|
|
|
|
}, [GMDSN, GSN]);
|
|
|
|
.fetchInvoiceDetail(GMDSN, GSN)
|
|
|
|
|
|
|
|
.then(json => {
|
|
|
|
|
|
|
|
let ZDDetail = json.ZDDetail;
|
|
|
|
function defaultShow(){
|
|
|
|
let arrLen = ZDDetail.length;
|
|
|
|
setDataLoading(true);
|
|
|
|
const formData = ZDDetail.map((data, index) => {
|
|
|
|
invoiceStore.fetchInvoiceDetail(GMDSN, GSN)
|
|
|
|
if (data.GMD_Dealed == false && arrLen == index + 1) {
|
|
|
|
.then((json) => {
|
|
|
|
//只有最后一条账单未审核通过才显示
|
|
|
|
let ZDDetail = json.ZDDetail;
|
|
|
|
runInAction(() => {
|
|
|
|
let arrLen = ZDDetail.length;
|
|
|
|
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 };
|
|
|
|
const formData = ZDDetail.map((data,index)=>{
|
|
|
|
});
|
|
|
|
if (data.GMD_Dealed == false && arrLen == (index+1)){ //只有最后一条账单未审核通过才显示
|
|
|
|
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 };
|
|
|
|
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':''}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
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);
|
|
|
|
let arrPicList = ZDDetail.map((data,index)=>{
|
|
|
|
picList = js_Pic.map((picData, pic_Index) => {
|
|
|
|
const GMD_Pic = data.GMD_Pic;
|
|
|
|
return {
|
|
|
|
let picList = [];
|
|
|
|
uid: -pic_Index, //用负数，防止添加删除的时候错误
|
|
|
|
if (isNotEmpty(GMD_Pic)){
|
|
|
|
name: "",
|
|
|
|
let js_Pic = JSON.parse(GMD_Pic)
|
|
|
|
status: "done",
|
|
|
|
picList = js_Pic.map((picData,pic_Index)=>{
|
|
|
|
url: picData.url,
|
|
|
|
return {
|
|
|
|
};
|
|
|
|
uid: -pic_Index, //用负数，防止添加删除的时候错误
|
|
|
|
});
|
|
|
|
name: '',
|
|
|
|
}
|
|
|
|
status: "done",
|
|
|
|
if (data.GMD_Dealed == false && arrLen == index + 1) {
|
|
|
|
url: picData.url,
|
|
|
|
runInAction(() => {
|
|
|
|
}
|
|
|
|
invoiceStore.invoicekImages = picList;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (data.GMD_Dealed == false && arrLen == (index+1)){
|
|
|
|
return picList;
|
|
|
|
runInAction(() => {
|
|
|
|
});
|
|
|
|
invoiceStore.invoicekImages = picList;
|
|
|
|
setInvoicePicList(arrPicList);
|
|
|
|
});
|
|
|
|
})
|
|
|
|
}
|
|
|
|
.catch(ex => {
|
|
|
|
return picList;
|
|
|
|
notification.error({
|
|
|
|
|
|
|
|
message: `Notification`,
|
|
|
|
})
|
|
|
|
description: ex.message,
|
|
|
|
setInvoicePicList(arrPicList);
|
|
|
|
placement: "top",
|
|
|
|
})
|
|
|
|
duration: 4,
|
|
|
|
.catch(ex => {
|
|
|
|
});
|
|
|
|
notification.error({
|
|
|
|
})
|
|
|
|
message: `Notification`,
|
|
|
|
.finally(() => {
|
|
|
|
description: ex.message,
|
|
|
|
setDataLoading(false);
|
|
|
|
placement: 'top',
|
|
|
|
});
|
|
|
|
duration: 4,
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
})
|
|
|
|
const fileList = toJS(invoicekImages);
|
|
|
|
.finally(() => {
|
|
|
|
//图片列表
|
|
|
|
setDataLoading(false);
|
|
|
|
let arrimg = [];
|
|
|
|
});
|
|
|
|
if (isNotEmpty(fileList)) {
|
|
|
|
}
|
|
|
|
arrimg = fileList.map((data, index) => {
|
|
|
|
|
|
|
|
return {
|
|
|
|
const fileList = toJS(invoicekImages);
|
|
|
|
url: data.url,
|
|
|
|
//图片列表
|
|
|
|
};
|
|
|
|
let arrimg = [];
|
|
|
|
});
|
|
|
|
if (isNotEmpty(fileList)) {
|
|
|
|
}
|
|
|
|
arrimg = fileList.map((data, index) => {
|
|
|
|
const onFinish = values => {
|
|
|
|
return {
|
|
|
|
const fieldVaule = {
|
|
|
|
url: data.url
|
|
|
|
...values,
|
|
|
|
}
|
|
|
|
info_date: isNotEmpty(values["info_date"]) ? values["info_date"].format("YYYY-MM-DD") : null,
|
|
|
|
});
|
|
|
|
info_images: JSON.stringify(arrimg),
|
|
|
|
}
|
|
|
|
};
|
|
|
|
const onFinish = values => {
|
|
|
|
console.log("Success:", fieldVaule);
|
|
|
|
const fieldVaule = {
|
|
|
|
//入库
|
|
|
|
...values,
|
|
|
|
if (fieldVaule) {
|
|
|
|
'info_date': isNotEmpty(values['info_date']) ? values['info_date'].format('YYYY-MM-DD') : null,
|
|
|
|
invoiceStore.postEditInvoiceDetail(fieldVaule.info_gmdsn, fieldVaule.info_Currency, fieldVaule.info_money, fieldVaule.info_date, fieldVaule.info_images, "").then(data => {
|
|
|
|
'info_images': JSON.stringify(arrimg),
|
|
|
|
console.log(data);
|
|
|
|
}
|
|
|
|
runInAction(() => {
|
|
|
|
console.log("Success:", fieldVaule);
|
|
|
|
let param = { info_money: fieldVaule.info_money, info_Currency: fieldVaule.info_Currency, info_date: fieldVaule.info_date };
|
|
|
|
//入库
|
|
|
|
invoiceStore.invoiceFormData = param;
|
|
|
|
if (fieldVaule) {
|
|
|
|
});
|
|
|
|
invoiceStore.postEditInvoiceDetail(fieldVaule.info_gmdsn, fieldVaule.info_Currency, fieldVaule.info_money, fieldVaule.info_date, fieldVaule.info_images, "").then((data) => {
|
|
|
|
if (data.errcode == 0) {
|
|
|
|
console.log(data);
|
|
|
|
notification.success({
|
|
|
|
runInAction(() => {
|
|
|
|
message: `Notification`,
|
|
|
|
let param = { 'info_money': fieldVaule.info_money, 'info_Currency': fieldVaule.info_Currency, 'info_date': fieldVaule.info_date };
|
|
|
|
description: "Success Submit!",
|
|
|
|
invoiceStore.invoiceFormData = param;
|
|
|
|
placement: "top",
|
|
|
|
})
|
|
|
|
duration: 4,
|
|
|
|
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;
|
|
|
|
const onAddFinish = values => {
|
|
|
|
});
|
|
|
|
const fieldVaule = {
|
|
|
|
runInAction(() => {
|
|
|
|
...values,
|
|
|
|
invoiceStore.invoicekImages = newFileList;
|
|
|
|
'info_date': isNotEmpty(values['info_date']) ? values['info_date'].format('YYYY-MM-DD') : null,
|
|
|
|
});
|
|
|
|
'info_images': JSON.stringify(arrimg),
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
console.log("Success:", fieldVaule);
|
|
|
|
const handRemove = info => {
|
|
|
|
//入库
|
|
|
|
console.log(info);
|
|
|
|
if (fieldVaule) {
|
|
|
|
invoiceStore.removeFeedbackImages(info.url);
|
|
|
|
invoiceStore.postAddInvoice(GSN, fieldVaule.info_Currency, fieldVaule.info_money, fieldVaule.info_date, fieldVaule.info_images, "").then((data) => {
|
|
|
|
return true;
|
|
|
|
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;
|
|
|
|
function bindCurrency() {
|
|
|
|
})
|
|
|
|
let arr = [];
|
|
|
|
if (data.errcode == 0 ){
|
|
|
|
arr = invoiceCurrencyList.map((data, index) => {
|
|
|
|
// notification.success({
|
|
|
|
return {
|
|
|
|
// message: `Notification`,
|
|
|
|
value: data.CRI_Code,
|
|
|
|
// description: "Success Submit!",
|
|
|
|
label: data.CRI_Name,
|
|
|
|
// placement: "top",
|
|
|
|
};
|
|
|
|
// duration: 4,
|
|
|
|
});
|
|
|
|
// });
|
|
|
|
|
|
|
|
setIsModalOpen(false);
|
|
|
|
return arr;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
function addInvoice() {
|
|
|
|
}
|
|
|
|
invoiceStore
|
|
|
|
|
|
|
|
.postAddInvoice(GSN, "", 0, "", "[]", "")
|
|
|
|
};
|
|
|
|
.then(data => {})
|
|
|
|
|
|
|
|
.finally(() => {
|
|
|
|
|
|
|
|
defaultShow();
|
|
|
|
const handleChange = info => {
|
|
|
|
});
|
|
|
|
console.log(info);
|
|
|
|
}
|
|
|
|
let newFileList = [...info.fileList];
|
|
|
|
|
|
|
|
newFileList = newFileList.map(file => {
|
|
|
|
function addButton(check) {
|
|
|
|
if (file.response && file.response.result) {
|
|
|
|
if (check) {
|
|
|
|
file.url = file.response.result.file_url;
|
|
|
|
return (
|
|
|
|
}
|
|
|
|
<Row>
|
|
|
|
return file;
|
|
|
|
<Divider orientation="left"></Divider>
|
|
|
|
});
|
|
|
|
<Button type="primary" block onClick={() => addInvoice(confirm)}>
|
|
|
|
runInAction(() => {
|
|
|
|
ADD New Invoice
|
|
|
|
invoiceStore.invoicekImages = newFileList;
|
|
|
|
</Button>
|
|
|
|
});
|
|
|
|
</Row>
|
|
|
|
};
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
const handRemove = info => {
|
|
|
|
}
|
|
|
|
console.log(info);
|
|
|
|
|
|
|
|
invoiceStore.removeFeedbackImages(info.url);
|
|
|
|
//循环生成多次报账信息
|
|
|
|
return true;
|
|
|
|
function bindSubmitForm() {
|
|
|
|
};
|
|
|
|
let submitForm = invoiceZDDetail.map((data, index) => {
|
|
|
|
|
|
|
|
if (data.GMD_Dealed) {
|
|
|
|
//币种
|
|
|
|
//已审核的直接显示信息即可，无需表单
|
|
|
|
function bindCurrency() {
|
|
|
|
return (
|
|
|
|
let arr = [];
|
|
|
|
<Row key={data.GMD_SN} gutter={16} style={{ backgroundColor: "#f6f7f9", width: "100%", padding: "20px 40px" }}>
|
|
|
|
arr = invoiceCurrencyList.map((data, index) => {
|
|
|
|
<Col span={4}></Col>
|
|
|
|
return {
|
|
|
|
<Col span={18}>
|
|
|
|
value: data.CRI_Code,
|
|
|
|
<Divider orientation="left">Invoice {index + 1}</Divider>
|
|
|
|
label: data.CRI_Name
|
|
|
|
<Upload
|
|
|
|
};
|
|
|
|
name="ghhfile"
|
|
|
|
});
|
|
|
|
accept="image/*"
|
|
|
|
|
|
|
|
multiple={true}
|
|
|
|
return arr;
|
|
|
|
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>
|
|
|
|
function addInvoice(){
|
|
|
|
<Descriptions title={"Detail"}>
|
|
|
|
invoiceStore.postAddInvoice(GSN, "", 0, "", "[]", "").then((data) => {
|
|
|
|
<Descriptions.Item label="Amount">{data.GMD_Cost}</Descriptions.Item>
|
|
|
|
runInAction(() => {
|
|
|
|
<Descriptions.Item label="Currency">{data.GMD_Currency}</Descriptions.Item>
|
|
|
|
invoiceStore.invoiceFormData = {'info_money':0,'info_Currency':'','info_date':'','info_gmdsn':GMDSN};
|
|
|
|
<Descriptions.Item label="Due Dat">{data.GMD_PayDate}</Descriptions.Item>
|
|
|
|
});
|
|
|
|
</Descriptions>
|
|
|
|
}).finally(()=>{
|
|
|
|
|
|
|
|
defaultShow();
|
|
|
|
{addButton(index + 1 == invoiceZDDetail.length)}
|
|
|
|
})
|
|
|
|
</Col>
|
|
|
|
}
|
|
|
|
<Col span={4}></Col>
|
|
|
|
|
|
|
|
</Row>
|
|
|
|
function addButton(check) {
|
|
|
|
);
|
|
|
|
if (check) {
|
|
|
|
} else {
|
|
|
|
return (
|
|
|
|
// 一个团只能有一个未审核的账单记录
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Row>
|
|
|
|
<Row key={data.GMD_SN} gutter={16} style={{ backgroundColor: "#f6f7f9", width: "100%", padding: "20px 40px" }}>
|
|
|
|
<Divider orientation="left"></Divider>
|
|
|
|
<Col span={4}></Col>
|
|
|
|
<Button type="primary" block onClick={() => addInvoice(confirm)}>
|
|
|
|
<Col span={18}>
|
|
|
|
ADD New Invoice
|
|
|
|
<Form name="invoice_submit" onFinish={onFinish} labelCol={{ span: 5 }} form={form} style={{ backgroundColor: "#fff", padding: "20px" }}>
|
|
|
|
</Button>
|
|
|
|
<Divider orientation="left">Invoice {index + 1}</Divider>
|
|
|
|
</Row>
|
|
|
|
<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"
|
|
|
|
function bindSubmitForm() {
|
|
|
|
onChange={handleChange}
|
|
|
|
let submitForm = invoiceZDDetail.map((data, index) => {
|
|
|
|
onRemove={handRemove}>
|
|
|
|
if (data.GMD_Dealed) { //已审核的直接显示信息即可，无需表单
|
|
|
|
<div>
|
|
|
|
return (
|
|
|
|
<PlusOutlined />
|
|
|
|
<Row key={data.GMD_SN} gutter={16} style={{ backgroundColor: "#f6f7f9", width: "100%", padding: "20px 40px" }} >
|
|
|
|
<div style={{ marginTop: 8 }}>Click to Upload</div>
|
|
|
|
<Col span={4}></Col>
|
|
|
|
</div>
|
|
|
|
<Col span={18} >
|
|
|
|
</Upload>
|
|
|
|
<Divider orientation="left">第 {index + 1} 次报账</Divider>
|
|
|
|
</Form.Item>
|
|
|
|
<Upload
|
|
|
|
<Divider orientation="left">Details</Divider>
|
|
|
|
name="ghhfile"
|
|
|
|
<Row gutter={16}>
|
|
|
|
accept="image/*"
|
|
|
|
<Col span={8}>
|
|
|
|
multiple={true}
|
|
|
|
{" "}
|
|
|
|
action={config.HT_HOST + `/service-fileServer/FileUpload?GRI_SN=${GSN}&VEI_SN=${authStore.login.travelAgencyId}&FilePathName=invoice&token=${authStore.login.token}`}
|
|
|
|
<Form.Item
|
|
|
|
fileList={invoicePicList[index]}
|
|
|
|
name="info_money"
|
|
|
|
listType="picture-card"
|
|
|
|
label="Amount："
|
|
|
|
>
|
|
|
|
rules={[
|
|
|
|
<div>
|
|
|
|
{
|
|
|
|
<PlusOutlined />
|
|
|
|
required: true,
|
|
|
|
<div style={{ marginTop: 8 }}>Click to Upload</div>
|
|
|
|
message: "Please input your money!",
|
|
|
|
</div>
|
|
|
|
},
|
|
|
|
</Upload>
|
|
|
|
]}>
|
|
|
|
<Divider orientation="left">提交信息</Divider>
|
|
|
|
<Input />
|
|
|
|
<Row gutter={16}>
|
|
|
|
</Form.Item>
|
|
|
|
<Col span={8}>
|
|
|
|
</Col>
|
|
|
|
<Input addonBefore="报账总额：" value={data.GMD_Cost} />
|
|
|
|
<Col span={8}>
|
|
|
|
</Col>
|
|
|
|
<Form.Item
|
|
|
|
<Col span={8}>
|
|
|
|
name="info_Currency"
|
|
|
|
金额币种： <Select
|
|
|
|
label="Currency："
|
|
|
|
placeholder="Select Currency type"
|
|
|
|
rules={[
|
|
|
|
allowClear
|
|
|
|
{
|
|
|
|
options={bindCurrency()}
|
|
|
|
required: true,
|
|
|
|
value={data.GMD_Currency}
|
|
|
|
message: "Please select Currency type!",
|
|
|
|
>
|
|
|
|
},
|
|
|
|
</Select>
|
|
|
|
]}>
|
|
|
|
</Col>
|
|
|
|
<Select placeholder="Select Currency type" onChange={onCurrencyChange} options={bindCurrency()}></Select>
|
|
|
|
<Col span={8}>
|
|
|
|
</Form.Item>
|
|
|
|
<Input addonBefore="最迟付款日期:" value={data.GMD_PayDate} />
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
<Col span={8}>
|
|
|
|
</Row>
|
|
|
|
<Form.Item name="info_date" label="Due Date: ">
|
|
|
|
{addButton(index + 1 == invoiceZDDetail.length)}
|
|
|
|
<DatePicker />
|
|
|
|
</Col>
|
|
|
|
</Form.Item>
|
|
|
|
<Col span={4}></Col>
|
|
|
|
</Col>
|
|
|
|
|
|
|
|
</Row>
|
|
|
|
</Row>
|
|
|
|
<Form.Item name="info_gmdsn" hidden={true}>
|
|
|
|
|
|
|
|
<input />
|
|
|
|
)
|
|
|
|
</Form.Item>
|
|
|
|
} else {
|
|
|
|
<Form.Item>
|
|
|
|
// 一个团只能有一个未审核的账单记录
|
|
|
|
<Button type="primary" htmlType="submit">
|
|
|
|
return (
|
|
|
|
Submit
|
|
|
|
<Row key={data.GMD_SN} gutter={16} style={{ backgroundColor: "#f6f7f9", width: "100%", padding: "20px 40px" }} >
|
|
|
|
</Button>
|
|
|
|
<Col span={4}></Col>
|
|
|
|
</Form.Item>
|
|
|
|
<Col span={18} >
|
|
|
|
<p>
|
|
|
|
<Form name="invoice_submit" onFinish={onFinish} labelCol={{ span: 5 }} form={form} style={{backgroundColor:"#fff" , padding:"20px"}}>
|
|
|
|
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
|
|
|
|
<Divider orientation="left">上传照片</Divider>
|
|
|
|
separately.
|
|
|
|
<Form.Item>
|
|
|
|
</p>
|
|
|
|
<Upload
|
|
|
|
</Form>
|
|
|
|
name="ghhfile"
|
|
|
|
</Col>
|
|
|
|
accept="image/*"
|
|
|
|
<Col span={4}></Col>
|
|
|
|
multiple={true}
|
|
|
|
</Row>
|
|
|
|
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}
|
|
|
|
return submitForm;
|
|
|
|
onRemove={handRemove}>
|
|
|
|
}
|
|
|
|
<div>
|
|
|
|
|
|
|
|
<PlusOutlined />
|
|
|
|
return (
|
|
|
|
<div style={{ marginTop: 8 }}>Click to Upload</div>
|
|
|
|
<>
|
|
|
|
</div>
|
|
|
|
<Space direction="vertical" style={{ width: "100%" }}>
|
|
|
|
</Upload>
|
|
|
|
<Row gutter={16}>
|
|
|
|
</Form.Item>
|
|
|
|
<Col span={20}>
|
|
|
|
<Divider orientation="left">提交信息</Divider>
|
|
|
|
<Title level={4}>Reference Number: {invoiceGroupInfo.VGroupInfo}</Title>
|
|
|
|
<Row gutter={16}>
|
|
|
|
</Col>
|
|
|
|
|
|
|
|
<Col span={4}>
|
|
|
|
<Col span={8}> <Form.Item
|
|
|
|
<Button type="link" onClick={() => navigate("/invoice")}>
|
|
|
|
name="info_money"
|
|
|
|
Back
|
|
|
|
label="报账总额："
|
|
|
|
</Button>
|
|
|
|
rules={[
|
|
|
|
</Col>
|
|
|
|
{
|
|
|
|
</Row>
|
|
|
|
required: true,
|
|
|
|
<Title level={5}></Title>
|
|
|
|
message: "Please input your money!",
|
|
|
|
{bindSubmitForm()}
|
|
|
|
},
|
|
|
|
</Space>
|
|
|
|
]}
|
|
|
|
</>
|
|
|
|
>
|
|
|
|
);
|
|
|
|
<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} 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);
|
|
|
|
export default observer(Detail);
|
|
|
|
|
|
|
|
|
|
|
|
|
Jimmy Liow
2 years ago