project/chuhai-payment-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add table column diy

Browse Source
This commit is contained in:
LittleBoy 2024-08-08 20:24:10 +08:00
parent 66330f4913
commit 9c6fbd839d
1 changed files with 340 additions and 271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
src/components/bill/list.tsx
View File

@ -1,14 +1,16 @@
import {Space, Table, Typography} from "@douyinfe/semi-ui"; import {Button, Checkbox, CheckboxGroup, Space, Table, Typography} from "@douyinfe/semi-ui";
import {ColumnProps} from "@douyinfe/semi-ui/lib/es/table"; import {ColumnProps} from "@douyinfe/semi-ui/lib/es/table";
import React, {useMemo, useState} from "react"; import React, {ReactNode, useMemo, useState} from "react";
import {useTranslation} from "react-i18next"; import {useTranslation} from "react-i18next";
import dayjs from "dayjs"; import dayjs from "dayjs";
import {IconCheckCircleStroked} from "@douyinfe/semi-icons"; import {IconCheckCircleStroked, IconSetting} from "@douyinfe/semi-icons";
import MoneyFormat from "@/components/money-format.tsx"; import MoneyFormat from "@/components/money-format.tsx";
import {Card} from "@/components/card"; import {Card} from "@/components/card";
import './bill.less' import './bill.less'
import {BillStatus} from "@/service/types.ts"; import {BillStatus} from "@/service/types.ts";
import {useSetState} from "ahooks";
import {clone} from "lodash";
type BillListProps = { type BillListProps = {
type: 'query' | 'reconciliation'; type: 'query' | 'reconciliation';
@ -27,14 +29,23 @@ const CheckNumberCorrect = ({origin,confirmed}:{origin: string,confirmed?:string
} }
return <div style={{lineHeight: 1}}> return <div style={{lineHeight: 1}}>
<div style={confirmed ? {color: 'red'} : {}}>{origin?.length ? origin : 'N/A'}</div> <div style={confirmed ? {color: 'red'} : {}}>{origin?.length ? origin : 'N/A'}</div>
{confirmed&&<Space style={{marginTop:2,color:'green'}}><span>{confirmed}</span><IconCheckCircleStroked /></Space>} {confirmed &&
<Space style={{marginTop: 2, color: 'green'}}><span>{confirmed}</span><IconCheckCircleStroked/></Space>}
</div> </div>
} }
export const BillList: React.FC<BillListProps> = (props) => { export const BillList: React.FC<BillListProps> = (props) => {
const {t, i18n} = useTranslation() const {t, i18n} = useTranslation()
const [currentTotalAmount, setCurrentTotalAmount] = useState(0) const [currentTotalAmount, setCurrentTotalAmount] = useState(0)
const [state, setState] = useSetState<{
showColumnsConfig?: boolean;
showCols: string[]
}>({
showCols: [
"id", "merchant_ref", "student_number", "application_number", "initiated_paid_at", "delivered_at", "paid_at", "student_english_name", "student_email", "programme_chinese_name",
"intake_year", "detail", "_detail", "amount", "pay_amount", "actual_payment_amount", "pay_method", "status", "apply_status"
]
})
const billStatusText = (billStatus: string) => { const billStatusText = (billStatus: string) => {
switch (billStatus) { switch (billStatus) {
@ -62,7 +73,7 @@ export const BillList: React.FC<BillListProps> = (props) => {
} }
} }
const columns = useMemo<ColumnProps<BillModel>[]>(() => { const allCols = useMemo<ColumnProps<BillModel>[]>(() => {
const cols: ColumnProps<BillModel>[] = [ const cols: ColumnProps<BillModel>[] = [
{ {
title: '#ID', title: '#ID',
@ -79,22 +90,28 @@ export const BillList: React.FC<BillListProps> = (props) => {
title: t('base.student_number'), title: t('base.student_number'),
dataIndex: 'student_number', dataIndex: 'student_number',
width: 150, width: 150,
render: (value,record) => (<CheckNumberCorrect origin={value} confirmed={record.student_number_confirm || 'test-confirm'} />) render: (value, record) => (
<CheckNumberCorrect origin={value} confirmed={record.student_number_confirm || 'test-confirm'}/>)
}, },
{ {
title: t('base.bill_number'), title: t('base.bill_number'),
dataIndex: 'application_number', dataIndex: 'application_number',
width: 150, width: 150,
render: (value,record) => (<CheckNumberCorrect origin={value} confirmed={value||record.application_number_confirm} />) render: (value, record) => (
<CheckNumberCorrect origin={value} confirmed={value || record.application_number_confirm}/>)
}, },
{ {
title: t('bill.title_initiated_paid_at'), title: <div className="table-header-title">{t('bill.title_initiated_paid_at')}
<div className="tips">(PPS Input Date)</div>
</div>,
dataIndex: 'initiated_paid_at', dataIndex: 'initiated_paid_at',
width: 180, width: 180,
render: (value) => value?.length ? value : 'N/A' render: (value) => value?.length ? value : 'N/A'
}, },
{ {
title: t('bill.title_delivered_at'), title: <div className="table-header-title">{t('bill.title_delivered_at')}
<div className="tips">(PPS Statement Date)</div>
</div>,
dataIndex: 'delivered_at', dataIndex: 'delivered_at',
width: 180, width: 180,
render: (value) => value?.length ? value : 'N/A' render: (value) => value?.length ? value : 'N/A'
@ -105,12 +122,12 @@ export const BillList: React.FC<BillListProps> = (props) => {
width: 180, width: 180,
render: (value) => value?.length ? value : 'N/A' render: (value) => value?.length ? value : 'N/A'
}, },
{ // {
title: t('bill.title_create_at'), // title: t('bill.title_create_at'),
dataIndex: 'create_at', // dataIndex: 'create_at',
width: 180, // width: 180,
render: (value) => value?.length ?value: 'N/A' // render: (value) => value?.length ?value: 'N/A'
}, // },
{ {
title: t('bill.title_student_name'), title: t('bill.title_student_name'),
dataIndex: 'student_english_name', dataIndex: 'student_english_name',
@ -132,13 +149,15 @@ export const BillList: React.FC<BillListProps> = (props) => {
{ {
title: t('bill.title_department'), title: t('bill.title_department'),
width: 200, width: 200,
dataIndex: i18n.language == 'en-US' ? 'department_english_name' : 'department_chinese_name', dataIndex: '',
render: (_, record) => (i18n.language == 'en-US' ? record.department_english_name : record.department_chinese_name),
}, },
{ {
title: t('bill.title_year'), title: t('bill.title_year'),
dataIndex: 'intake_year', dataIndex: 'intake_year',
width: 120, width: 120,
render: (_, record) => record.intake_year?(<div>{record.intake_year}/{String(record.intake_semester).length == 1 ? '0':''}{record.intake_semester}</div>):"N/A" render: (_, record) => record.intake_year ? (
<div>{record.intake_year}/{String(record.intake_semester).length == 1 ? '0' : ''}{record.intake_semester}</div>) : "N/A"
}, },
// { // {
// title: t('bill.title_semester'), // title: t('bill.title_semester'),
@ -150,8 +169,15 @@ export const BillList: React.FC<BillListProps> = (props) => {
dataIndex: 'detail', dataIndex: 'detail',
ellipsis: {showTitle: true}, ellipsis: {showTitle: true},
width: 220, width: 220,
render: (_, record) => (<div style={{fontSize: 13, lineHeight: 1.2,wordBreak:'break-all',maxWidth:'100%',whiteSpace:'normal'}}> render: (_, record) => (<div style={{
{record.details.map((it, idx) => (<div key={idx}>{it.bill_type}: <MoneyFormat money={it.amount}/></div>))} fontSize: 13,
lineHeight: 1.2,
wordBreak: 'break-all',
maxWidth: '100%',
whiteSpace: 'normal'
}}>
{record.details.map((it, idx) => (
<div key={idx}>{it.bill_type}: <MoneyFormat money={it.amount}/></div>))}
</div>), </div>),
}, },
{ {
@ -159,8 +185,15 @@ export const BillList: React.FC<BillListProps> = (props) => {
dataIndex: '_detail', dataIndex: '_detail',
ellipsis: {showTitle: true}, ellipsis: {showTitle: true},
width: 220, width: 220,
render: (_, record) => (<div style={{fontSize: 13, lineHeight: 1.2,wordBreak:'break-all',maxWidth:'100%',whiteSpace:'normal'}}> render: (_, record) => (<div style={{
{record.details.filter(s=>s.confirm_status == 'CONFIRMED').map((it) => (<div key={it.id}>{it.confirm_type}: <MoneyFormat money={it.amount}/></div>))} fontSize: 13,
lineHeight: 1.2,
wordBreak: 'break-all',
maxWidth: '100%',
whiteSpace: 'normal'
}}>
{record.details.filter(s => s.confirm_status == 'CONFIRMED').map((it) => (
<div key={it.id}>{it.confirm_type}: <MoneyFormat money={it.amount}/></div>))}
</div>), </div>),
}, },
{ {
@ -222,6 +255,12 @@ export const BillList: React.FC<BillListProps> = (props) => {
render: value => applyStatusText(value), render: value => applyStatusText(value),
}) })
} }
return cols;
}, [props.type, i18n.language])
const columns = useMemo<ColumnProps<BillModel>[]>(() => {
const _cols = clone(allCols);
const cols = state.showCols.length == 0 ? _cols : _cols.filter((it: ColumnProps<BillModel>) => !it.dataIndex || state.showCols.includes(it.dataIndex))
if (props.operationRender) { if (props.operationRender) {
cols.push({ cols.push({
title: t('bill.title_operate'), title: t('bill.title_operate'),
@ -232,11 +271,12 @@ export const BillList: React.FC<BillListProps> = (props) => {
}) })
} }
return cols; return cols;
}, [props.operationRender, props.type, i18n.language]); }, [props.operationRender, props.type, i18n.language, allCols, state.showCols]);
const isExpired = (bill: BillModel) => { const isExpired = (bill: BillModel) => {
return bill.status == BillStatus.PENDING && dayjs(bill.expiration_time).isBefore(Date.now()) return bill.status == BillStatus.PENDING && dayjs(bill.expiration_time).isBefore(Date.now())
} }
const currentList = useMemo(() => { const currentList = useMemo(() => {
const originList = props.source?.list || []; const originList = props.source?.list || [];
originList.forEach(s => { originList.forEach(s => {
@ -250,7 +290,12 @@ export const BillList: React.FC<BillListProps> = (props) => {
}, [props.source]) }, [props.source])
return <Card return <Card
title={t('bill.title_bill_list')} title={<Space>
<span>{t('bill.title_bill_list')}</span>
<span className={'cursor-pointer'} onClick={() => setState({showColumnsConfig: true})}>
<IconSetting size={'small'}/>
</span>
</Space>}
headerRight={<Space spacing={20}> headerRight={<Space spacing={20}>
{props.beforeTotalAmount} {props.beforeTotalAmount}
<div className="bill-info"> <div className="bill-info">
@ -265,6 +310,29 @@ export const BillList: React.FC<BillListProps> = (props) => {
</div> </div>
</Space>} </Space>}
> >
{state.showColumnsConfig && <div style={{
marginBottom: 20,
padding: 20,
backgroundColor: '#fafafa',
borderRadius: 5,
border: 'solid 1px #f0f0f0'
}}>
<div className="table-column-config">
<CheckboxGroup direction="horizontal" defaultValue={state.showCols}
onChange={showCols => setState({showCols})}>
{allCols.map((it) => {
return (<Checkbox value={it.dataIndex}><span>{it.title as ReactNode}</span></Checkbox>)
})}
</CheckboxGroup>
</div>
<div className="table-column-action" style={{marginTop: 20}}>
<Space>
<Button>{t('base.cancel')}</Button>
<Button theme={'solid'}>{t('base.confirm')}</Button>
</Space>
</div>
</div>}
<div className="bill-list-table"> <div className="bill-list-table">
<Table<BillModel> <Table<BillModel>
bordered bordered
@ -279,7 +347,8 @@ export const BillList: React.FC<BillListProps> = (props) => {
formatPageText: (params) => ( formatPageText: (params) => (
<div className="bill-list-pagination"> <div className="bill-list-pagination">
{props.tableFooter} {props.tableFooter}
{props.source && props.source.pagination.recordTotal > 0 && <span>{t('page.record-show',params)}</span>} {props.source && props.source.pagination.recordTotal > 0 &&
<span>{t('page.record-show', params)}</span>}
</div> </div>
) )
}} }}