81 lines
3.0 KiB
TypeScript
81 lines
3.0 KiB
TypeScript
|
import { useState } from 'react';
|
||
|
|
import { Card, Col, Empty, Row, Table, Tag, Typography } from 'antd';
|
||
|
|
import { useQuery } from '@tanstack/react-query';
|
||
|
|
import PageContainer from '@/components/common/PageContainer';
|
||
|
|
import { commonCodeApi, CommonCodeGroup } from '@/api/user';
|
||
|
|
|
||
|
|
const { Text } = Typography;
|
||
|
|
|
||
|
|
export default function CodeList() {
|
||
|
|
const [selected, setSelected] = useState<CommonCodeGroup | null>(null);
|
||
|
|
|
||
|
|
const { data: groups = [] } = useQuery({
|
||
|
|
queryKey: ['code', 'groups'],
|
||
|
|
queryFn: () => commonCodeApi.groups(),
|
||
|
|
});
|
||
|
|
|
||
|
|
const { data: codes = [] } = useQuery({
|
||
|
|
queryKey: ['code', 'codes', selected?.groupCode],
|
||
|
|
queryFn: () => commonCodeApi.codes(selected!.groupCode),
|
||
|
|
enabled: !!selected,
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<PageContainer title="공통코드 관리">
|
||
|
|
<Row gutter={16}>
|
||
|
|
<Col span={10}>
|
||
|
|
<Card title="그룹" size="small">
|
||
|
|
<Table
|
||
|
|
rowKey="groupCode"
|
||
|
|
dataSource={groups}
|
||
|
|
size="small"
|
||
|
|
pagination={false}
|
||
|
|
scroll={{ y: 600 }}
|
||
|
|
onRow={(r) => ({ onClick: () => setSelected(r), style: { cursor: 'pointer' } })}
|
||
|
|
rowClassName={(r) => r.groupCode === selected?.groupCode ? 'ant-table-row-selected' : ''}
|
||
|
|
columns={[
|
||
|
|
{ title: '그룹코드', dataIndex: 'groupCode', width: 160 },
|
||
|
|
{ title: '그룹명', dataIndex: 'groupName' },
|
||
|
|
{
|
||
|
|
title: '시스템', dataIndex: 'isSystem', width: 80, align: 'center',
|
||
|
|
render: (v) => v === 'Y' ? <Tag color="orange">시스템</Tag> : <Tag>일반</Tag>,
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
</Card>
|
||
|
|
</Col>
|
||
|
|
<Col span={14}>
|
||
|
|
<Card title={selected ? `상세 코드 — ${selected.groupName}` : '상세 코드'} size="small">
|
||
|
|
{!selected ? (
|
||
|
|
<Empty description="그룹을 선택하세요" />
|
||
|
|
) : (
|
||
|
|
<Table
|
||
|
|
rowKey="codeId"
|
||
|
|
dataSource={codes}
|
||
|
|
size="small"
|
||
|
|
pagination={false}
|
||
|
|
scroll={{ y: 600 }}
|
||
|
|
columns={[
|
||
|
|
{ title: '코드', dataIndex: 'code', width: 120 },
|
||
|
|
{ title: '코드명', dataIndex: 'codeName' },
|
||
|
|
{ title: '설명', dataIndex: 'codeDesc' },
|
||
|
|
{ title: '정렬', dataIndex: 'sortOrder', width: 60, align: 'right' },
|
||
|
|
{
|
||
|
|
title: '활성', dataIndex: 'isActive', width: 70, align: 'center',
|
||
|
|
render: (v) => v === 'Y' ? <Tag color="green">Y</Tag> : <Tag>N</Tag>,
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
{selected?.isSystem === 'Y' && (
|
||
|
|
<Text type="warning" style={{ display: 'block', marginTop: 8 }}>
|
||
|
|
⚠ 시스템 그룹의 코드는 식별자 변경/삭제가 제한됩니다.
|
||
|
|
</Text>
|
||
|
|
)}
|
||
|
|
</Card>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
</PageContainer>
|
||
|
|
);
|
||
|
|
}
|