80 lines
3.1 KiB
TypeScript
80 lines
3.1 KiB
TypeScript
|
import { useState } from 'react';
|
||
|
|
import { Table } from 'antd';
|
||
|
|
import { useQuery } from '@tanstack/react-query';
|
||
|
|
import { useNavigate } from 'react-router-dom';
|
||
|
|
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 PermissionButton from '@/components/common/PermissionButton';
|
||
|
|
import ExcelExportButton from '@/components/common/ExcelExportButton';
|
||
|
|
import { agentApi, AgentResp, AgentSearchParam } from '@/api/agent';
|
||
|
|
|
||
|
|
export default function AgentList() {
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const [param, setParam] = useState<AgentSearchParam>({ pageNum: 1, pageSize: 20 });
|
||
|
|
|
||
|
|
const { data, isLoading } = useQuery({
|
||
|
|
queryKey: ['agent', 'list', param],
|
||
|
|
queryFn: () => agentApi.list(param),
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<PageContainer
|
||
|
|
title="설계사 관리"
|
||
|
|
extra={
|
||
|
|
<div>
|
||
|
|
<PermissionButton menuCode="ORG_AGENT" permCode="CREATE" type="primary"
|
||
|
|
onClick={() => navigate('/org/agents/new')} style={{ marginRight: 8 }}>
|
||
|
|
등록
|
||
|
|
</PermissionButton>
|
||
|
|
<ExcelExportButton url="/api/agents/export" params={param} fileName="설계사목록" />
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<SearchForm
|
||
|
|
conditions={[
|
||
|
|
{ type: 'text', name: 'searchKeyword', label: '설계사명' },
|
||
|
|
{ type: 'code', name: 'status', label: '상태', groupCode: 'AGENT_STATUS' },
|
||
|
|
]}
|
||
|
|
onSearch={(v) => setParam({ ...param, ...v, pageNum: 1 })}
|
||
|
|
onReset={() => setParam({ pageNum: 1, pageSize: 20 })}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<Table<AgentResp>
|
||
|
|
rowKey="agentId"
|
||
|
|
loading={isLoading}
|
||
|
|
dataSource={data?.list}
|
||
|
|
pagination={{
|
||
|
|
current: param.pageNum,
|
||
|
|
pageSize: param.pageSize,
|
||
|
|
total: data?.total,
|
||
|
|
showSizeChanger: true,
|
||
|
|
onChange: (page, size) => setParam({ ...param, pageNum: page, pageSize: size }),
|
||
|
|
}}
|
||
|
|
onRow={(r) => ({ onClick: () => navigate(`/org/agents/${r.agentId}`) })}
|
||
|
|
columns={[
|
||
|
|
{ title: '설계사명', dataIndex: 'agentName', width: 120 },
|
||
|
|
{ title: '사번', dataIndex: 'licenseNo', width: 120 },
|
||
|
|
{ title: '소속', dataIndex: 'orgName', width: 200 },
|
||
|
|
{ title: '직급', dataIndex: 'gradeName', width: 100 },
|
||
|
|
{ title: '전화번호', dataIndex: 'phone', width: 140 },
|
||
|
|
{
|
||
|
|
title: '상태', dataIndex: 'status', width: 100,
|
||
|
|
render: (v) => <CodeBadge groupCode="AGENT_STATUS" value={v} />,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '계약수', dataIndex: 'contractCount', align: 'right', width: 90,
|
||
|
|
render: (v) => <MoneyText value={v} />,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '누적수수료', dataIndex: 'totalCommission', align: 'right', width: 130,
|
||
|
|
render: (v) => <MoneyText value={v} />,
|
||
|
|
},
|
||
|
|
{ title: '입사일', dataIndex: 'joinDate', width: 110 },
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
</PageContainer>
|
||
|
|
);
|
||
|
|
}
|