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

账单多次提交展示完成及弹出多次提交的窗体60%

Browse Source
release
赵鹏 2 years ago
parent ef6a19e32a
commit b6f0be26a2
3 changed files with 378 additions and 107 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,8 +1,10 @@
import { makeAutoObservable,runInAction } from "mobx";
import { fetchJSON } from "@/utils/request";
import { fetchJSON,postForm} from "@/utils/request";
import { prepareUrl,isNotEmpty } from '@/utils/commons';
import { HT_HOST } from "@/config";
import { json } from "react-router-dom";
import * as config from "@/config";
import dayjs from "dayjs";
class Invoice {
constructor(root) {
@ -13,8 +15,11 @@ class Invoice {
invoiceList = []; //账单列表
invoicekImages = []; //图片列表
invoiceGroupInfo= {}; //账单详细
invocieProductList=[];//账单细项
invocieCurrencyList=[];//币种
invoiceProductList=[];//账单细项
invoiceZDDetail = []; //报账信息
invoiceCurrencyList=[];//币种
invoicePicList = []; //多账单图片列表数组
invoiceFormData = {'info_money':0,'info_Currency':'','info_date':''}; //存储form数据
@ -23,7 +28,7 @@ class Invoice {
const totalNum = current == 1 ? 0 : this.invoicePage.total;
//组合param
const fetchUrl = prepareUrl(HT_HOST + '/service-cusservice/PTSearchGMBPageList')
.append('VEI_SN', '628') //this.root.authStore.login.travelAgencyId
.append('VEI_SN', this.root.authStore.login.travelAgencyId) //
.append('OrderType',OrderType)
.append('GroupNo',GroupNo)
.append('DateStart',DateStart)
@ -86,7 +91,7 @@ class Invoice {
fetchInvoiceDetail(GMDSN,GSN){
const fetchUrl = prepareUrl(HT_HOST + '/service-cusservice/PTGetZDDetail')
.append('VEI_SN', '628') //this.root.authStore.login.travelAgencyId
.append('VEI_SN', this.root.authStore.login.travelAgencyId) //
.append('GRI_SN',GSN)
.append('GMD_SN',GMDSN)
.append('LGC',1)
@ -98,8 +103,12 @@ class Invoice {
runInAction(()=>{
if(json.errcode==0){
this.invoiceGroupInfo = json.GroupInfo[0];
this.invocieProductList = json.ProductList;
this.invocieCurrencyList = json.CurrencyList;
this.invoiceProductList = json.ProductList;
this.invoiceCurrencyList = json.CurrencyList;
this.invoiceZDDetail = json.ZDDetail;
//循环获取图片列表
this.getInvoicekImages_fromData(json.ZDDetail);
this.getFormData(json.ZDDetail);
}else{
throw new Error(json.errmsg + ': ' + json.errcode);
}
@ -112,7 +121,7 @@ class Invoice {
//获取供应商提交的图片
getInvoicekImages(VEI_SN, GRI_SN) {
let url = `/service-fileServer/ListFile`;
url += `?GRI_SN=${GRI_SN}&VEI_SN=${VEI_SN}`;
url += `?GRI_SN=${GRI_SN}&VEI_SN=${VEI_SN}&FilePathName=invoice`;
fetch(config.HT_HOST + url)
.then(response => response.json())
.then(json => {
@ -133,6 +142,42 @@ class Invoice {
});
}
//从数据库获取图片列表
getInvoicekImages_fromData(jsonData){
let arrLen = jsonData.length;
const arrPicList = jsonData.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)){
this.invoicekImages = picList;
}
return picList;
})
this.invoicePicList = arrPicList;
}
//获取数据库的表单默认数据回填。
getFormData(jsonData){
let arrLen = jsonData.length;
return jsonData.map((data,index)=>{
if (data.GMD_Dealed == false && arrLen == (index+1)){ //只有最后一条账单未审核通过才显示
this.invoiceFormData = {'info_money':data.GMD_Cost,'info_Currency':data.GMD_Currency,'info_date':isNotEmpty(data.GMD_PayDate)?dayjs(data.GMD_PayDate):''};
}
});
}
removeFeedbackImages(fileurl) {
let url = `/service-fileServer/FileDelete`;
@ -149,6 +194,25 @@ class Invoice {
}
postEditInvoiceDetail(GMD_SN,Currency,Cost,PayDate,Pic,Memo){
let postUrl = HT_HOST + '/service-cusservice/EditSupplierFK';
let formData = new FormData();
formData.append('LMI_SN', this.root.authStore.login.userId);
formData.append('GMD_SN', GMD_SN);
formData.append('Currency', Currency);
formData.append('Cost', Cost);
formData.append('PayDate', isNotEmpty(PayDate)?PayDate:'' );
formData.append('Pic', Pic);
formData.append('Memo', Memo);
return postForm(postUrl,formData)
.then(json=>{
console.info(json);
return json;
});
}
invoicePage = {
current:1,
size:10,

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

@ -2,27 +2,37 @@ 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, DatePicker, Select } from "antd";
import { Row, Col, Space, Button, Typography, Card, Form, Upload, Input, Divider, DatePicker, Select, App, Modal } from "antd";
import { useStore } from "@/stores/StoreContext.js";
import { PlusOutlined } from "@ant-design/icons";
import { isNotEmpty } from "@/utils/commons";
import * as config from "@/config";
import dayjs from "dayjs";
const { Title } = Typography;
const { TextArea } = Input;
function Detail() {
const navigate = useNavigate();
const { GMDSN, GSN } = useParams();
const { invoiceStore, authStore } = useStore();
const { invoicekImages, invoiceGroupInfo, invocieProductList, invocieCurrencyList } = invoiceStore;
const { invoicekImages, invoiceGroupInfo, invoiceProductList, invoiceCurrencyList, invoiceZDDetail, invoicePicList } = invoiceStore;
const [form] = Form.useForm();
const [dataLoading, setDataLoading] = useState(false);
const { formDate, onDateChange } = useState();
const { formCurrency, onCurrencyChange } = useState();
const { notification } = App.useApp();
const [isModalOpen, setIsModalOpen] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false);
useEffect(() => {
console.info("Detail.useEffect: " + GMDSN + "/" + GSN);
setDataLoading(true);
invoiceStore.fetchInvoiceDetail(GMDSN, GSN)
.then(() => {
form.setFieldsValue(invoiceStore.invoiceFormData); //{'info_money':'111','info_Currency':'THB','info_date':''}
})
.catch(ex => {
notification.error({
message: `Notification`,
@ -38,13 +48,34 @@ function Detail() {
}, [GMDSN, GSN]);
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': values['info_date'].format('YYYY-MM-DD'),
'info_images': fileList,
'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(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;
})
});
}
};
const handleChange = info => {
console.log(info);
@ -66,126 +97,301 @@ function Detail() {
return true;
};
//币种
function bindCurrency() {
let arr = [];
arr = invocieCurrencyList.map((data, index) => {
arr = invoiceCurrencyList.map((data, index) => {
return {
value: data.CRI_Code,
label: data.CRI_Name
};
// (<Option value="data.CRI_Code">data.CRI_Name</Option>);
});
return arr;
}
function addButton(check) {
if (check) {
return (
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
<Row>
<Divider orientation="left"></Divider>
<Button type="primary" block onClick={() => showConfirmModal(confirm)}>
ADD New Invoice
</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} &nbsp;&nbsp; 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>
</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">第 {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}`}
fileList={fileList}
action={config.HT_HOST + `/service-fileServer/FileUpload?GRI_SN=${GSN}&VEI_SN=${authStore.login.travelAgencyId}&FilePathName=invoice`}
fileList={invoiceStore.invoicePicList[index]}
listType="picture-card"
onChange={handleChange}
onRemove={handRemove}>
>
<div>
<PlusOutlined />
<div style={{ marginTop: 8 }}>Click to Upload</div>
</div>
</Upload>
<Divider orientation="left">提交信息</Divider>
<Row gutter={16}>
<Col span={8}>
<Input addonBefore="报账总额：" value={data.GMD_Cost} />
</Col>
<Col span={8}>
金额币种： <Select
placeholder="Select Currency type"
allowClear
options={bindCurrency()}
value={data.GMD_Currency}
>
</Select>
</Col>
<Col span={8}>
<Input addonBefore="最迟付款日期:" 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}>
<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}&FilePathName=invoice`}
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>
<Row gutter={16}>
<Col span={8}> <Form.Item
name="info_money"
label="报账总额："
rules={[
{
required: true,
message: "Please input your money!",
},
]}
>
<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>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
</Col>
<Col span={4}></Col>
</Row>
)
}
})
// console.info(invoiceStore.invoiceFormData)
return submitForm;
}
//#region Modal
const showConfirmModal = (confirm) => {
setIsModalOpen(true);
// setConfirmText(confirm.PCI_ConfirmText);
//reservationStore.editConfirmation(confirm);
};
const handleOk = () => {
setConfirmLoading(true);
// reservationStore.submitConfirmation(confirmText)
// .finally(() => {
// setIsModalOpen(false);
// setConfirmLoading(false);
// });
};
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_submit" onFinish={onFinish} labelCol={{ span: 5 }} form={form}>
<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`}
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>
<Divider orientation="left">提交信息</Divider>
<Row gutter={16}>
<Col span={8}> <Form.Item
name="info_money"
label="报账总额："
rules={[
{
required: true,
message: "Please input your money!",
},
]}
>
<Input defaultValue="0.00" />
</Form.Item></Col>
<Col span={8}><Form.Item
name="info_Currency"
label="金额币种："
rules={[
{
required: true,
message: "Please select Currency type!",
},
]}
<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
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>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Select>
</Form.Item>
</Form>
</Col>
<Col span={4}></Col>
</Row>
</Space>
<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} &nbsp;&nbsp; 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>
</>
);

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

@ -35,7 +35,8 @@ function Index() {
{
title: '接团时间',
key: 'LeftGDate',
dataIndex: 'LeftGDate'
dataIndex: 'LeftGDate',
render:(text,record) => isNotEmpty(text)?formatDate(new Date(text)):""
},
{
title: '人数',

Write Preview
Loading…
Cancel
Save