67 lines
2.8 KiB
TypeScript
67 lines
2.8 KiB
TypeScript
|
import { useState } from 'react';
|
||
|
|
import { Table } from 'antd';
|
||
|
|
import { useQuery } from '@tanstack/react-query';
|
||
|
|
import PageContainer from '@/components/common/PageContainer';
|
||
|
|
import SearchForm from '@/components/common/SearchForm';
|
||
|
|
import CodeBadge from '@/components/common/CodeBadge';
|
||
|
|
import MoneyText from '@/components/common/MoneyText';
|
||
|
|
import { contractApi, ContractResp, ContractSearchParam } from '@/api/contract';
|
||
|
|
|
||
|
|
export default function ContractList() {
|
||
|
|
const [param, setParam] = useState<ContractSearchParam>({ pageNum: 1, pageSize: 20 });
|
||
|
|
|
||
|
|
const { data, isLoading } = useQuery({
|
||
|
|
queryKey: ['contract', 'list', param],
|
||
|
|
queryFn: () => contractApi.list(param),
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<PageContainer title="계약 관리">
|
||
|
|
<SearchForm
|
||
|
|
conditions={[
|
||
|
|
{ type: 'text', name: 'searchKeyword', label: '계약자/증권번호' },
|
||
|
|
{ type: 'code', name: 'insuranceType', label: '보험종류', groupCode: 'INSURANCE_TYPE' },
|
||
|
|
{ type: 'code', name: 'status', label: '상태', groupCode: 'CONTRACT_STATUS' },
|
||
|
|
{ type: 'dateRange', name: 'dateRange', label: '계약일' },
|
||
|
|
]}
|
||
|
|
onSearch={(v) => setParam({ ...param, ...v, pageNum: 1 })}
|
||
|
|
onReset={() => setParam({ pageNum: 1, pageSize: 20 })}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<Table<ContractResp>
|
||
|
|
rowKey="contractId"
|
||
|
|
loading={isLoading}
|
||
|
|
dataSource={data?.list}
|
||
|
|
pagination={{
|
||
|
|
current: param.pageNum, pageSize: param.pageSize, total: data?.total, showSizeChanger: true,
|
||
|
|
onChange: (p, s) => setParam({ ...param, pageNum: p, pageSize: s }),
|
||
|
|
}}
|
||
|
|
columns={[
|
||
|
|
{ title: '증권번호', dataIndex: 'policyNo', width: 140 },
|
||
|
|
{ title: '계약자', dataIndex: 'contractorName', width: 100 },
|
||
|
|
{ title: '설계사', dataIndex: 'agentName', width: 100 },
|
||
|
|
{ title: '보험사', dataIndex: 'companyName', width: 120 },
|
||
|
|
{ title: '상품', dataIndex: 'productName', width: 220 },
|
||
|
|
{
|
||
|
|
title: '보험종류', dataIndex: 'insuranceType', width: 100,
|
||
|
|
render: (v) => <CodeBadge groupCode="INSURANCE_TYPE" value={v} />,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '보험료', dataIndex: 'premium', width: 120, align: 'right',
|
||
|
|
render: (v) => <MoneyText value={v} />,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '납입주기', dataIndex: 'payCycle', width: 90,
|
||
|
|
render: (v) => <CodeBadge groupCode="PAY_CYCLE" value={v} />,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '상태', dataIndex: 'status', width: 90,
|
||
|
|
render: (v) => <CodeBadge groupCode="CONTRACT_STATUS" value={v} />,
|
||
|
|
},
|
||
|
|
{ title: '계약일', dataIndex: 'contractDate', width: 110 },
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
</PageContainer>
|
||
|
|
);
|
||
|
|
}
|