Haina
/
GHHub
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

账单列表页显示金额和币种

Browse Source
release
YCC 2 years ago
parent 43e4e05bdf
commit 948b12ad33
3 changed files with 305 additions and 352 deletions
Show Stats Download Patch File Download Diff File

2
src/stores/Invoice.js
Unescape Escape View File

@ -70,6 +70,7 @@ class Invoice {
GroupName: data.GroupName,
AllMoney: data.AllMoney,
PersonNum: data.PersonNum,
GMD_Currency: data.GMD_Currency,
VName: data.VName,
FKState: data.FKState,
};
@ -239,6 +240,7 @@ class Invoice {
GMD_FillWorkers_Name: "",
GroupName: " 中华游230501-CA230402033",
AllMoney: 3539,
GMD_Currency: "",
PersonNum: "1大1小",
VName: "",
},

637
src/views/invoice/Detail.jsx
Unescape Escape View File

@ -1,5 +1,5 @@
import { useParams, useNavigate } from "react-router-dom";
import { useEffect, useState ,useRef } from "react";
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, Modal } from "antd";
@ -13,341 +13,304 @@ 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;
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() {
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">Invoice {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">Details</Divider>
<Row gutter={16}>
<Col span={8}>
<Input addonBefore="Amount：" value={data.GMD_Cost} />
</Col>
<Col span={8}>
Currency： <Select
placeholder="Select Currency type"
allowClear
options={bindCurrency()}
value={data.GMD_Currency}
>
</Select>
</Col>
<Col span={8}>
<Input addonBefore="Due Dat:" 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} style={{backgroundColor:"#fff" , padding:"20px"}}>
<Divider orientation="left">Invoice {index + 1}</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">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}
allowClear
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;
}
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>
</>
);
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;
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() {
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">Invoice {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">Details</Divider>
<Row gutter={16}>
<Col span={8}>
<Input addonBefore="Amount：" value={data.GMD_Cost} />
</Col>
<Col span={8}>
Currency： <Select placeholder="Select Currency type" allowClear options={bindCurrency()} value={data.GMD_Currency}></Select>
</Col>
<Col span={8}>
<Input addonBefore="Due Dat:" 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} style={{ backgroundColor: "#fff", padding: "20px" }}>
<Divider orientation="left">Invoice {index + 1}</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">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} allowClear 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;
}
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}>
<NavLink to="/invoice">Back</NavLink>
</Col>
</Row>
<Title level={5}></Title>
{bindSubmitForm()}
</Space>
</>
);
}
export default observer(Detail);

18
src/views/invoice/Index.jsx
Unescape Escape View File

@ -26,14 +26,15 @@ function Index() {
},
{
title: "Arrival Date",
key: "LeftGDate",
dataIndex: "LeftGDate",
key: "GetGDate",
dataIndex: "GetGDate",
render: (text, record) => (isNotEmpty(text) ? formatDate(new Date(text)) : ""),
},
{
title: "Total Amount",
key: "AllMoney",
dataIndex: "AllMoney",
render: (text, record) => (isNotEmpty(record.GMD_Currency) ? record.GMD_Currency + " " + text : text),
},
{
title: "Status",
@ -43,15 +44,6 @@ function Index() {
];
function BillStatus(text, record) {
// if (record.GMD_Dealed){
// return "已审核";
// }else if (record.GMDFillworkers_SN<1){
// return "未填写";
// }else if (record.VRequestVerify){
// return "未审核";
// }else{
// return "未提交";
// }
let FKState = record.FKState - 1;
return (
<Steps
@ -60,22 +52,18 @@ function Index() {
items={[
{
title: "Submitted",
//status: 'finish',
icon: <EditOutlined />,
},
{
title: "Travel Advisor",
// status: 'finish',
icon: <SolutionOutlined />,
},
{
title: "Finance Dept",
//status: 'process',
icon: <AuditOutlined />,
},
{
title: "Paid",
//status: 'wait',
icon: <SmileOutlined />,
},
]}

Write Preview
Loading…
Cancel
Save