feat: add table column diy
This commit is contained in:
parent
66330f4913
commit
9c6fbd839d
@ -1,296 +1,365 @@
|
||||
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 React, {useMemo, useState} from "react";
|
||||
import React, {ReactNode, useMemo, useState} from "react";
|
||||
import {useTranslation} from "react-i18next";
|
||||
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 {Card} from "@/components/card";
|
||||
import './bill.less'
|
||||
import {BillStatus} from "@/service/types.ts";
|
||||
import {useSetState} from "ahooks";
|
||||
import {clone} from "lodash";
|
||||
|
||||
type BillListProps = {
|
||||
type: 'query' | 'reconciliation';
|
||||
operationRender?: (record: BillModel) => React.ReactNode;
|
||||
operationRenderWidth?: number;
|
||||
onRowSelection?: (selectedRowKeys: (string | number)[]) => void;
|
||||
source?: RecordList<BillModel>;
|
||||
onPageChange: (pageIndex:number) => void;
|
||||
tableFooter?: React.ReactNode;
|
||||
loading?: boolean;
|
||||
beforeTotalAmount?: React.ReactNode;
|
||||
type: 'query' | 'reconciliation';
|
||||
operationRender?: (record: BillModel) => React.ReactNode;
|
||||
operationRenderWidth?: number;
|
||||
onRowSelection?: (selectedRowKeys: (string | number)[]) => void;
|
||||
source?: RecordList<BillModel>;
|
||||
onPageChange: (pageIndex: number) => void;
|
||||
tableFooter?: React.ReactNode;
|
||||
loading?: boolean;
|
||||
beforeTotalAmount?: React.ReactNode;
|
||||
}
|
||||
const CheckNumberCorrect = ({origin,confirmed}:{origin: string,confirmed?:string}) => {
|
||||
if(origin == confirmed && origin){
|
||||
return (<Space style={{marginTop:2,color:'green'}}><span>{origin}</span><IconCheckCircleStroked /></Space>)
|
||||
}
|
||||
return <div style={{lineHeight:1}}>
|
||||
<div style={confirmed?{color:'red'}:{}}>{origin?.length ?origin: 'N/A'}</div>
|
||||
{confirmed&&<Space style={{marginTop:2,color:'green'}}><span>{confirmed}</span><IconCheckCircleStroked /></Space>}
|
||||
</div>
|
||||
const CheckNumberCorrect = ({origin, confirmed}: { origin: string, confirmed?: string }) => {
|
||||
if (origin == confirmed && origin) {
|
||||
return (<Space style={{marginTop: 2, color: 'green'}}><span>{origin}</span><IconCheckCircleStroked/></Space>)
|
||||
}
|
||||
return <div style={{lineHeight: 1}}>
|
||||
<div style={confirmed ? {color: 'red'} : {}}>{origin?.length ? origin : 'N/A'}</div>
|
||||
{confirmed &&
|
||||
<Space style={{marginTop: 2, color: 'green'}}><span>{confirmed}</span><IconCheckCircleStroked/></Space>}
|
||||
</div>
|
||||
}
|
||||
|
||||
export const BillList: React.FC<BillListProps> = (props) => {
|
||||
const {t, i18n} = useTranslation()
|
||||
const [currentTotalAmount,setCurrentTotalAmount] = useState(0)
|
||||
const {t, i18n} = useTranslation()
|
||||
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) => {
|
||||
switch (billStatus) {
|
||||
case 'PENDING':
|
||||
return t('bill.pay_status_pending')
|
||||
case 'PAID':
|
||||
return t('bill.pay_status_paid')
|
||||
case 'EXPIRED':
|
||||
return t('bill.pay_status_expired')
|
||||
case 'CANCELED':
|
||||
case 'CANCELLED':
|
||||
return t('bill.pay_status_canceled')
|
||||
default:
|
||||
return billStatus
|
||||
}
|
||||
}
|
||||
const applyStatusText = (status: string) => {
|
||||
switch (status) {
|
||||
case 'UNCHECKED':
|
||||
return t('bill.reconciliation_status_pending')
|
||||
case 'CHECKED':
|
||||
return t('bill.reconciliation_status_submitted')
|
||||
default:
|
||||
return status
|
||||
}
|
||||
}
|
||||
|
||||
const billStatusText = (billStatus: string) => {
|
||||
switch (billStatus) {
|
||||
case 'PENDING':
|
||||
return t('bill.pay_status_pending')
|
||||
case 'PAID':
|
||||
return t('bill.pay_status_paid')
|
||||
case 'EXPIRED':
|
||||
return t('bill.pay_status_expired')
|
||||
case 'CANCELED':
|
||||
case 'CANCELLED':
|
||||
return t('bill.pay_status_canceled')
|
||||
default:
|
||||
return billStatus
|
||||
}
|
||||
}
|
||||
const applyStatusText = (status:string) => {
|
||||
switch (status) {
|
||||
case 'UNCHECKED':
|
||||
return t('bill.reconciliation_status_pending')
|
||||
case 'CHECKED':
|
||||
return t('bill.reconciliation_status_submitted')
|
||||
default:
|
||||
return status
|
||||
}
|
||||
}
|
||||
const allCols = useMemo<ColumnProps<BillModel>[]>(() => {
|
||||
const cols: ColumnProps<BillModel>[] = [
|
||||
{
|
||||
title: '#ID',
|
||||
dataIndex: 'id',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: 'Merchant Ref',
|
||||
dataIndex: 'merchant_ref',
|
||||
width: 200,
|
||||
// render: (_) => (<MoneyFormat money={_}/>),
|
||||
},
|
||||
{
|
||||
title: t('base.student_number'),
|
||||
dataIndex: 'student_number',
|
||||
width: 150,
|
||||
render: (value, record) => (
|
||||
<CheckNumberCorrect origin={value} confirmed={record.student_number_confirm || 'test-confirm'}/>)
|
||||
},
|
||||
{
|
||||
title: t('base.bill_number'),
|
||||
dataIndex: 'application_number',
|
||||
width: 150,
|
||||
render: (value, record) => (
|
||||
<CheckNumberCorrect origin={value} confirmed={value || record.application_number_confirm}/>)
|
||||
},
|
||||
{
|
||||
title: <div className="table-header-title">{t('bill.title_initiated_paid_at')}
|
||||
<div className="tips">(PPS Input Date)</div>
|
||||
</div>,
|
||||
dataIndex: 'initiated_paid_at',
|
||||
width: 180,
|
||||
render: (value) => value?.length ? value : 'N/A'
|
||||
},
|
||||
{
|
||||
title: <div className="table-header-title">{t('bill.title_delivered_at')}
|
||||
<div className="tips">(PPS Statement Date)</div>
|
||||
</div>,
|
||||
dataIndex: 'delivered_at',
|
||||
width: 180,
|
||||
render: (value) => value?.length ? value : 'N/A'
|
||||
},
|
||||
{
|
||||
title: t('bill.title_paid_at'),
|
||||
dataIndex: 'paid_at',
|
||||
width: 180,
|
||||
render: (value) => value?.length ? value : 'N/A'
|
||||
},
|
||||
// {
|
||||
// title: t('bill.title_create_at'),
|
||||
// dataIndex: 'create_at',
|
||||
// width: 180,
|
||||
// render: (value) => value?.length ?value: 'N/A'
|
||||
// },
|
||||
{
|
||||
title: t('bill.title_student_name'),
|
||||
dataIndex: 'student_english_name',
|
||||
width: 180,
|
||||
render: (_, record) => (<div>{record.student_english_name}<br/>{record.student_chinese_name}</div>)
|
||||
},
|
||||
{
|
||||
title: 'Email',
|
||||
dataIndex: 'student_email',
|
||||
width: 200,
|
||||
render: (value) => value?.length ? value : 'N/A'
|
||||
// render: (_, record) => (<div>{record.student_english_name}<br/>{record.student_chinese_name}</div>)
|
||||
},
|
||||
{
|
||||
title: t('bill.title_program_name'),
|
||||
width: 250,
|
||||
dataIndex: i18n.language == 'en-US' ? 'programme_english_name' : 'programme_chinese_name',
|
||||
},
|
||||
{
|
||||
title: t('bill.title_department'),
|
||||
width: 200,
|
||||
dataIndex: '',
|
||||
render: (_, record) => (i18n.language == 'en-US' ? record.department_english_name : record.department_chinese_name),
|
||||
},
|
||||
{
|
||||
title: t('bill.title_year'),
|
||||
dataIndex: 'intake_year',
|
||||
width: 120,
|
||||
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'),
|
||||
// dataIndex: 'intake_semester',
|
||||
// width: 120,
|
||||
// },
|
||||
{
|
||||
title: t('bill.title_bill_detail'),
|
||||
dataIndex: 'detail',
|
||||
ellipsis: {showTitle: true},
|
||||
width: 220,
|
||||
render: (_, record) => (<div style={{
|
||||
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>),
|
||||
},
|
||||
{
|
||||
title: t('bill.title_bill_type_confirm'),
|
||||
dataIndex: '_detail',
|
||||
ellipsis: {showTitle: true},
|
||||
width: 220,
|
||||
render: (_, record) => (<div style={{
|
||||
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>),
|
||||
},
|
||||
{
|
||||
title: t('bill.title_amount'),
|
||||
dataIndex: 'amount',
|
||||
width: 150,
|
||||
render: (_) => (<MoneyFormat money={_}/>),
|
||||
},
|
||||
{
|
||||
title: t('bill.title_pay_amount'),
|
||||
dataIndex: 'pay_amount',
|
||||
width: 190,
|
||||
render: (_, record) => {
|
||||
|
||||
const columns = useMemo<ColumnProps<BillModel>[]>(() => {
|
||||
const cols: ColumnProps<BillModel>[] = [
|
||||
{
|
||||
title: '#ID',
|
||||
dataIndex: 'id',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: 'Merchant Ref',
|
||||
dataIndex: 'merchant_ref',
|
||||
width: 200,
|
||||
// render: (_) => (<MoneyFormat money={_}/>),
|
||||
},
|
||||
{
|
||||
title: t('base.student_number'),
|
||||
dataIndex: 'student_number',
|
||||
width: 150,
|
||||
render: (value,record) => (<CheckNumberCorrect origin={value} confirmed={record.student_number_confirm || 'test-confirm'} />)
|
||||
},
|
||||
{
|
||||
title: t('base.bill_number'),
|
||||
dataIndex: 'application_number',
|
||||
width: 150,
|
||||
render: (value,record) => (<CheckNumberCorrect origin={value} confirmed={value||record.application_number_confirm} />)
|
||||
},
|
||||
{
|
||||
title: t('bill.title_initiated_paid_at'),
|
||||
dataIndex: 'initiated_paid_at',
|
||||
width: 180,
|
||||
render: (value) => value?.length ?value: 'N/A'
|
||||
},
|
||||
{
|
||||
title: t('bill.title_delivered_at'),
|
||||
dataIndex: 'delivered_at',
|
||||
width: 180,
|
||||
render: (value) => value?.length ?value: 'N/A'
|
||||
},
|
||||
{
|
||||
title: t('bill.title_paid_at'),
|
||||
dataIndex: 'paid_at',
|
||||
width: 180,
|
||||
render: (value) => value?.length ?value: 'N/A'
|
||||
},
|
||||
{
|
||||
title: t('bill.title_create_at'),
|
||||
dataIndex: 'create_at',
|
||||
width: 180,
|
||||
render: (value) => value?.length ?value: 'N/A'
|
||||
},
|
||||
{
|
||||
title: t('bill.title_student_name'),
|
||||
dataIndex: 'student_english_name',
|
||||
width: 180,
|
||||
render: (_, record) => (<div>{record.student_english_name}<br/>{record.student_chinese_name}</div>)
|
||||
},
|
||||
{
|
||||
title: 'Email',
|
||||
dataIndex: 'student_email',
|
||||
width: 200,
|
||||
render: (value) => value?.length ?value: 'N/A'
|
||||
// render: (_, record) => (<div>{record.student_english_name}<br/>{record.student_chinese_name}</div>)
|
||||
},
|
||||
{
|
||||
title: t('bill.title_program_name'),
|
||||
width: 250,
|
||||
dataIndex: i18n.language == 'en-US' ? 'programme_english_name' : 'programme_chinese_name',
|
||||
},
|
||||
{
|
||||
title: t('bill.title_department'),
|
||||
width: 200,
|
||||
dataIndex: i18n.language == 'en-US' ? 'department_english_name' : 'department_chinese_name',
|
||||
},
|
||||
{
|
||||
title: t('bill.title_year'),
|
||||
dataIndex: 'intake_year',
|
||||
width: 120,
|
||||
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'),
|
||||
// dataIndex: 'intake_semester',
|
||||
// width: 120,
|
||||
// },
|
||||
{
|
||||
title: t('bill.title_bill_detail'),
|
||||
dataIndex: 'detail',
|
||||
ellipsis: {showTitle: true},
|
||||
width: 220,
|
||||
render: (_, record) => (<div style={{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>),
|
||||
},
|
||||
{
|
||||
title: t('bill.title_bill_type_confirm'),
|
||||
dataIndex: '_detail',
|
||||
ellipsis: {showTitle: true},
|
||||
width: 220,
|
||||
render: (_, record) => (<div style={{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>),
|
||||
},
|
||||
{
|
||||
title: t('bill.title_amount'),
|
||||
dataIndex: 'amount',
|
||||
width: 150,
|
||||
render: (_) => (<MoneyFormat money={_}/>),
|
||||
},
|
||||
{
|
||||
title: t('bill.title_pay_amount'),
|
||||
dataIndex: 'pay_amount',
|
||||
width: 190,
|
||||
render: (_, record) => {
|
||||
|
||||
if (record.service_charge && record.service_charge > 0) {
|
||||
return <div>
|
||||
<MoneyFormat money={record.payment_amount}/><br/>
|
||||
<Typography.Text type={'quaternary'} size={'small'} style={{position: "absolute"}}>
|
||||
{t('bill.title_service_charge')}: <MoneyFormat money={record.service_charge}/>
|
||||
</Typography.Text>
|
||||
</div>
|
||||
}
|
||||
return (<div><MoneyFormat money={record.payment_amount}/></div>)
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('bill.title_actual_payment_amount'),
|
||||
dataIndex: 'actual_payment_amount',
|
||||
width: 150,
|
||||
render: (_,record) => (<MoneyFormat money={_} currency={record.currency}/>),
|
||||
},
|
||||
{
|
||||
title: t('bill.title_pay_method'),
|
||||
dataIndex: 'pay_method',
|
||||
width: 130,
|
||||
render: (_, {payment_method, payment_channel}) => (payment_channel?(
|
||||
<div>
|
||||
{payment_channel}
|
||||
{payment_method && payment_method.length > 0 && <div>
|
||||
if (record.service_charge && record.service_charge > 0) {
|
||||
return <div>
|
||||
<MoneyFormat money={record.payment_amount}/><br/>
|
||||
<Typography.Text type={'quaternary'} size={'small'} style={{position: "absolute"}}>
|
||||
{t('bill.title_service_charge')}: <MoneyFormat money={record.service_charge}/>
|
||||
</Typography.Text>
|
||||
</div>
|
||||
}
|
||||
return (<div><MoneyFormat money={record.payment_amount}/></div>)
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('bill.title_actual_payment_amount'),
|
||||
dataIndex: 'actual_payment_amount',
|
||||
width: 150,
|
||||
render: (_, record) => (<MoneyFormat money={_} currency={record.currency}/>),
|
||||
},
|
||||
{
|
||||
title: t('bill.title_pay_method'),
|
||||
dataIndex: 'pay_method',
|
||||
width: 130,
|
||||
render: (_, {payment_method, payment_channel}) => (payment_channel ? (
|
||||
<div>
|
||||
{payment_channel}
|
||||
{payment_method && payment_method.length > 0 && <div>
|
||||
<Typography.Text type={'quaternary'} size={'small'} style={{position: "absolute"}}>
|
||||
({payment_method})
|
||||
</Typography.Text>
|
||||
</div>}
|
||||
</div>
|
||||
):'N/A'),
|
||||
},
|
||||
{
|
||||
title: t('bill.title_bill_status'),
|
||||
dataIndex: 'status',
|
||||
width: 150,
|
||||
render: value => billStatusText(value),
|
||||
},
|
||||
]
|
||||
if (props.type != 'reconciliation') {
|
||||
cols.push({
|
||||
title: t('bill.title_reconciliation_status'),
|
||||
dataIndex: 'apply_status',
|
||||
width: 150,
|
||||
render: value => applyStatusText(value),
|
||||
})
|
||||
}
|
||||
if (props.operationRender) {
|
||||
cols.push({
|
||||
title: t('bill.title_operate'),
|
||||
dataIndex: 'operate',
|
||||
fixed: 'right',
|
||||
width: props.operationRenderWidth || (props.type == 'reconciliation'?120:220),
|
||||
render: (_, record) => props.operationRender?.(record),
|
||||
})
|
||||
}
|
||||
return cols;
|
||||
}, [props.operationRender, props.type, i18n.language]);
|
||||
</div>
|
||||
) : 'N/A'),
|
||||
},
|
||||
{
|
||||
title: t('bill.title_bill_status'),
|
||||
dataIndex: 'status',
|
||||
width: 150,
|
||||
render: value => billStatusText(value),
|
||||
},
|
||||
]
|
||||
if (props.type != 'reconciliation') {
|
||||
cols.push({
|
||||
title: t('bill.title_reconciliation_status'),
|
||||
dataIndex: 'apply_status',
|
||||
width: 150,
|
||||
render: value => applyStatusText(value),
|
||||
})
|
||||
}
|
||||
return cols;
|
||||
}, [props.type, i18n.language])
|
||||
|
||||
const isExpired = (bill: BillModel) => {
|
||||
return bill.status == BillStatus.PENDING && dayjs(bill.expiration_time).isBefore(Date.now())
|
||||
}
|
||||
const currentList = useMemo(()=>{
|
||||
const originList = props.source?.list || [];
|
||||
originList.forEach(s => {
|
||||
if(isExpired(s)){
|
||||
s.status = BillStatus.EXPIRED;
|
||||
}
|
||||
})
|
||||
const _total = originList.map(s=>Number(s.amount)).reduce((s, c) => (s + c), 0)
|
||||
setCurrentTotalAmount(_total)
|
||||
return originList;
|
||||
},[props.source])
|
||||
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) {
|
||||
cols.push({
|
||||
title: t('bill.title_operate'),
|
||||
dataIndex: 'operate',
|
||||
fixed: 'right',
|
||||
width: props.operationRenderWidth || (props.type == 'reconciliation' ? 120 : 220),
|
||||
render: (_, record) => props.operationRender?.(record),
|
||||
})
|
||||
}
|
||||
return cols;
|
||||
}, [props.operationRender, props.type, i18n.language, allCols, state.showCols]);
|
||||
|
||||
return <Card
|
||||
title={t('bill.title_bill_list')}
|
||||
headerRight={<Space spacing={20}>
|
||||
{props.beforeTotalAmount}
|
||||
<div className="bill-info">
|
||||
<div className="bill-info-item">
|
||||
<span className="bill-info-title">{t('bill.query_amount_total')} :</span>
|
||||
<MoneyFormat money={props.source?.pagination.recordTotal || 0}/>
|
||||
</div>
|
||||
<div className="bill-info-item">
|
||||
<span className="bill-info-title current-amount">{t('bill.query_amount_current_page')} :</span>
|
||||
<MoneyFormat money={currentTotalAmount || 0}/>
|
||||
</div>
|
||||
const isExpired = (bill: BillModel) => {
|
||||
return bill.status == BillStatus.PENDING && dayjs(bill.expiration_time).isBefore(Date.now())
|
||||
}
|
||||
|
||||
const currentList = useMemo(() => {
|
||||
const originList = props.source?.list || [];
|
||||
originList.forEach(s => {
|
||||
if (isExpired(s)) {
|
||||
s.status = BillStatus.EXPIRED;
|
||||
}
|
||||
})
|
||||
const _total = originList.map(s => Number(s.amount)).reduce((s, c) => (s + c), 0)
|
||||
setCurrentTotalAmount(_total)
|
||||
return originList;
|
||||
}, [props.source])
|
||||
|
||||
return <Card
|
||||
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}>
|
||||
{props.beforeTotalAmount}
|
||||
<div className="bill-info">
|
||||
<div className="bill-info-item">
|
||||
<span className="bill-info-title">{t('bill.query_amount_total')} :</span>
|
||||
<MoneyFormat money={props.source?.pagination.recordTotal || 0}/>
|
||||
</div>
|
||||
<div className="bill-info-item">
|
||||
<span className="bill-info-title current-amount">{t('bill.query_amount_current_page')} :</span>
|
||||
<MoneyFormat money={currentTotalAmount || 0}/>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</Space>}
|
||||
>
|
||||
<div className="bill-list-table">
|
||||
<Table<BillModel>
|
||||
bordered
|
||||
columns={columns}
|
||||
dataSource={currentList}
|
||||
rowKey={'id'}
|
||||
pagination={{
|
||||
currentPage: props.source?.pagination.current,
|
||||
pageSize: props.source?.pagination.pageSize,
|
||||
total: props.source?.pagination.total,
|
||||
onPageChange: props.onPageChange,
|
||||
formatPageText: (params) => (
|
||||
<div className="bill-list-pagination">
|
||||
{props.tableFooter}
|
||||
{props.source && props.source.pagination.recordTotal > 0 && <span>{t('page.record-show',params)}</span>}
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
loading={props.loading}
|
||||
rowSelection={props.onRowSelection ? {
|
||||
fixed: true,
|
||||
onChange: (selectedRowKeys) => {
|
||||
selectedRowKeys && props.onRowSelection?.(selectedRowKeys)
|
||||
}
|
||||
} : undefined}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
<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">
|
||||
<Table<BillModel>
|
||||
bordered
|
||||
columns={columns}
|
||||
dataSource={currentList}
|
||||
rowKey={'id'}
|
||||
pagination={{
|
||||
currentPage: props.source?.pagination.current,
|
||||
pageSize: props.source?.pagination.pageSize,
|
||||
total: props.source?.pagination.total,
|
||||
onPageChange: props.onPageChange,
|
||||
formatPageText: (params) => (
|
||||
<div className="bill-list-pagination">
|
||||
{props.tableFooter}
|
||||
{props.source && props.source.pagination.recordTotal > 0 &&
|
||||
<span>{t('page.record-show', params)}</span>}
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
loading={props.loading}
|
||||
rowSelection={props.onRowSelection ? {
|
||||
fixed: true,
|
||||
onChange: (selectedRowKeys) => {
|
||||
selectedRowKeys && props.onRowSelection?.(selectedRowKeys)
|
||||
}
|
||||
} : undefined}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user