refactor: Invoice/Paid, PaidDetail, 读取authstore; 使用搜索组件
Lei OT
1 year ago
parent
30a8301329
commit
2c8da99712
@ -1,121 +1,104 @@
|
||||
import { NavLink, useNavigate } from "react-router-dom";
|
||||
import { useEffect, useState } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { toJS } from "mobx";
|
||||
import { Row, Col, Space, Button, Table, Input, DatePicker, Typography, App, Image } from "antd";
|
||||
import { useStore } from "@/stores/StoreContext.js";
|
||||
import * as config from "@/config";
|
||||
import { formatDate, isNotEmpty } from "@/utils/commons";
|
||||
import { NavLink, useNavigate } from 'react-router-dom';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { toJS } from 'mobx';
|
||||
import { Row, Col, Space, Button, Table, Input, DatePicker, Typography, App, Image } from 'antd';
|
||||
import { useStore } from '@/stores/StoreContext.js';
|
||||
import * as config from '@/config';
|
||||
import { formatDate, isNotEmpty } from '@/utils/commons';
|
||||
import usePresets from '@/hooks/usePresets';
|
||||
import SearchForm from '@/components/SearchForm';
|
||||
import useAuthStore from '@/stores/Auth';
|
||||
import dayjs from 'dayjs';
|
||||
const { Title } = Typography;
|
||||
|
||||
function Paid(){
|
||||
const { authStore, invoiceStore } = useStore();
|
||||
const { invoicePaid, search_date_start, search_date_end } = invoiceStore;
|
||||
const [groupNo, onGroupNoChange] = useState("");
|
||||
const navigate = useNavigate();
|
||||
const showTotal = total => `Total ${invoicePaid.length} items`;
|
||||
function Paid() {
|
||||
const { invoiceStore } = useStore();
|
||||
const { invoicePaid, search_date_start, search_date_end } = invoiceStore;
|
||||
const [travelAgencyId] = useAuthStore((state) => [state.loginUser.travelAgencyId]);
|
||||
const navigate = useNavigate();
|
||||
const showTotal = (total) => `Total ${total} items`;
|
||||
|
||||
useEffect(() => {
|
||||
invoiceStore.fetchInvoicePaid(travelAgencyId, '', '', '');
|
||||
}, []);
|
||||
const invoicePaidColumns = [
|
||||
{
|
||||
title: 'Payment ref.NO',
|
||||
dataIndex: 'fl_finaceNo',
|
||||
key: 'fl_finaceNo',
|
||||
render: (text, record) => <NavLink to={`/invoice/paid/detail/${record.key}`}>{text}</NavLink>,
|
||||
},
|
||||
{
|
||||
title: 'Payment date',
|
||||
key: 'fl_adddate',
|
||||
dataIndex: 'fl_adddate',
|
||||
render: (text, record) => (isNotEmpty(text) ? formatDate(new Date(text)) : ''),
|
||||
},
|
||||
{
|
||||
title: 'Number of bills',
|
||||
key: 'fcount',
|
||||
dataIndex: 'fcount',
|
||||
},
|
||||
{
|
||||
title: 'Total amount',
|
||||
key: 'pSum',
|
||||
dataIndex: 'pSum',
|
||||
//render: (text, record) => (isNotEmpty(record.GMD_Currency) ? record.GMD_Currency + " " + text : text),
|
||||
},
|
||||
{
|
||||
title: 'Bank statement',
|
||||
key: 'fl_pic',
|
||||
dataIndex: 'fl_pic',
|
||||
render: showPIc,
|
||||
},
|
||||
];
|
||||
|
||||
useEffect (() => {
|
||||
invoiceStore.fetchInvoicePaid(authStore.login.travelAgencyId,"","","");
|
||||
|
||||
},[]);
|
||||
const invoicePaidColumns = [
|
||||
{
|
||||
title: "Payment ref.NO",
|
||||
dataIndex: "fl_finaceNo",
|
||||
key: "fl_finaceNo",
|
||||
render: (text, record) => <NavLink to={`/invoice/paid/detail/${record.key}`}>{text}</NavLink>,
|
||||
},
|
||||
{
|
||||
title: "Payment date",
|
||||
key: "fl_adddate",
|
||||
dataIndex: "fl_adddate",
|
||||
render: (text, record) => (isNotEmpty(text) ? formatDate(new Date(text)) : ""),
|
||||
},
|
||||
{
|
||||
title: "Number of bills",
|
||||
key: "fcount",
|
||||
dataIndex: "fcount",
|
||||
},
|
||||
{
|
||||
title: "Total amount",
|
||||
key: "pSum",
|
||||
dataIndex: "pSum",
|
||||
//render: (text, record) => (isNotEmpty(record.GMD_Currency) ? record.GMD_Currency + " " + text : text),
|
||||
},
|
||||
{
|
||||
title: "Bank statement",
|
||||
key: "fl_pic",
|
||||
dataIndex: "fl_pic",
|
||||
render: showPIc,
|
||||
},
|
||||
];
|
||||
|
||||
function showPIc(text,record) {
|
||||
let strPic = record.fl_pic;
|
||||
//console.log(JSON.parse(strPic));
|
||||
if (isNotEmpty(strPic)){
|
||||
return (
|
||||
|
||||
JSON.parse(strPic).map((item,index) => {
|
||||
return <Image key={index} width={90} src={item.url} />;
|
||||
})
|
||||
|
||||
);
|
||||
}else{
|
||||
return "";
|
||||
}
|
||||
|
||||
function showPIc(text, record) {
|
||||
let strPic = record.fl_pic;
|
||||
//console.log(JSON.parse(strPic));
|
||||
if (isNotEmpty(strPic)) {
|
||||
return JSON.parse(strPic).map((item, index) => {
|
||||
return <Image key={index} width={90} src={item.url} />;
|
||||
});
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Space direction="vertical" style={{ width: "100%" }}>
|
||||
<Row gutter={16}>
|
||||
<Col span={20}>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Button type="link" onClick={() => navigate("/invoice")}>
|
||||
Back
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Title level={3}></Title>
|
||||
<Row gutter={16}>
|
||||
<Col md={24} lg={6} xxl={4}>
|
||||
<Input
|
||||
placeholder="Reference Number"
|
||||
onChange={e => {
|
||||
onGroupNoChange(e.target.value);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col md={24} lg={8} xxl={6}>
|
||||
<Space direction="horizontal">
|
||||
Date
|
||||
<DatePicker.RangePicker format={config.DATE_FORMAT} allowClear={false} style={{ width: "100%" }} value={[search_date_start, search_date_end]} presets={usePresets()} onChange={invoiceStore.onDateRangeChange} />
|
||||
</Space>
|
||||
</Col>
|
||||
<Col md={24} lg={4} xxl={4}>
|
||||
<Button
|
||||
type="primary"
|
||||
loading={invoiceStore.loading}
|
||||
onClick={() => invoiceStore.fetchInvoicePaid(authStore.login.travelAgencyId, groupNo, search_date_start.format(config.DATE_FORMAT), search_date_end.format(config.DATE_FORMAT))}>
|
||||
Search
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Title level={3}></Title>
|
||||
<Row>
|
||||
<Col md={24} lg={24} xxl={24}>
|
||||
<Table bordered columns={invoicePaidColumns} dataSource={toJS(invoicePaid)} />
|
||||
</Col>
|
||||
</Row>
|
||||
</Space>
|
||||
);
|
||||
return (
|
||||
<Space direction='vertical' style={{ width: '100%' }}>
|
||||
<Row gutter={16}>
|
||||
<Col span={20}>
|
||||
<SearchForm
|
||||
initialValue={{
|
||||
dates: [dayjs().subtract(2, 'M').startOf('M'), dayjs().endOf('M')],
|
||||
}}
|
||||
defaultValue={{
|
||||
shows: ['referenceNo', 'dates'],
|
||||
fieldProps: {
|
||||
referenceNo: { col: 5 },
|
||||
dates: { col: 10, label: 'Date' },
|
||||
},
|
||||
}}
|
||||
onSubmit={(err, formVal, filedsVal) => {
|
||||
invoiceStore.fetchInvoicePaid(travelAgencyId, formVal.referenceNo, formVal.startdate, formVal.enddate);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Button type='link' onClick={() => navigate('/invoice')}>
|
||||
Back
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col md={24} lg={24} xxl={24}>
|
||||
<Table bordered columns={invoicePaidColumns} dataSource={toJS(invoicePaid)} />
|
||||
</Col>
|
||||
</Row>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
|
||||
export default observer(Paid);
|
||||
|
||||
Loading…
Reference in New Issue