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

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

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

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

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

Write Preview
Loading…
Cancel
Save