Merge remote-tracking branch 'origin/feature/management-screen-eunsun' into iipbs/st/dev
refactor: DataGrid 컴포넌트를 사용하는 부모 컴포넌트에서 rowData state를 직접 생성 후 자식 컴포넌트로 내려주는 방식으로 수정, TabDataGrid는 동일 방식으로 수정할 예정
This commit is contained in:
@@ -1,29 +1,63 @@
|
||||
import SearchForm from "@/components/module/SearchForm";
|
||||
import TabDataGrid from "@/components/module/TabDataGrid";
|
||||
import ApproveButton from "@/components/button/ApproveButton";
|
||||
import RejectButton from "@/components/button/RejectButton"
|
||||
import SubmitButton from "@/components/button/SumitButton";
|
||||
import SaveButton from "@/components/button/SaveButton";
|
||||
import LastYearDataButton from "@/components/button/LastYearDataButton";
|
||||
import SubmitExceptionButton from "@/components/button/SubmitExceptionButton";
|
||||
|
||||
import { SewagePipeMngColumnInfoList } from "@/components/util/column/management/SewagePipeMngColumn";
|
||||
import { RegionalFacilityColumn } from "@/components/util/column/management/sewagePipe/RegionalFacility";
|
||||
import { FacilityInstallColumn } from "@/components/util/column/management/sewagePipe/FacilityInstall";
|
||||
import { PipeTypeColumn } from "@/components/util/column/management/sewagePipe/PipeTypeStatus";
|
||||
import { PipeDiameterColumn } from "@/components/util/column/management/sewagePipe/PipeDiameterStatus";
|
||||
import { ManholeStatusColumn } from "@/components/util/column/management/sewagePipe/ManholeStatus";
|
||||
import {
|
||||
AdminAreaConnectionColumn,
|
||||
TreatmentPlantConnectionColumn
|
||||
} from "@/components/util/column/management/sewagePipe/ConnectionStatus";
|
||||
|
||||
// 하수도 통계 관리 > 02. 하수관로
|
||||
const SewagePipeMng = () => {
|
||||
|
||||
const approveFunc = () => {
|
||||
console.log('appoved');
|
||||
// 승인 요청 로직
|
||||
// tab List
|
||||
const SewagePipeMngColumnInfoList = [
|
||||
RegionalFacilityColumn,
|
||||
FacilityInstallColumn,
|
||||
PipeTypeColumn,
|
||||
PipeDiameterColumn,
|
||||
ManholeStatusColumn,
|
||||
// 일단 각 tab으로 구현
|
||||
TreatmentPlantConnectionColumn,
|
||||
AdminAreaConnectionColumn
|
||||
];
|
||||
|
||||
const submitFunc = () => {
|
||||
console.log('submit');
|
||||
// 제출 로직
|
||||
};
|
||||
|
||||
const rejectFunc = () => {
|
||||
console.log('reject');
|
||||
// 보완 요청 로직
|
||||
const saveFunc = () => {
|
||||
console.log('save');
|
||||
// 저장 로직
|
||||
};
|
||||
|
||||
const getLastYearDataFunc = () => {
|
||||
console.log('get last year data');
|
||||
// 전년도 데이터 가져오기
|
||||
};
|
||||
|
||||
const SubmitExceptionFunc = () => {
|
||||
console.log('submit exception');
|
||||
// 예외 제출 로직
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<SearchForm userMenual={true} />
|
||||
<div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
|
||||
<RejectButton rejectFunc={rejectFunc} />
|
||||
<ApproveButton approveFunc={approveFunc} />
|
||||
<SubmitButton submitFunc={submitFunc} />
|
||||
<SaveButton saveFunc={saveFunc} />
|
||||
<LastYearDataButton getLastYearDataFunc={getLastYearDataFunc} />
|
||||
<SubmitExceptionButton SubmitExceptionFunc={SubmitExceptionFunc} />
|
||||
</div>
|
||||
<TabDataGrid columnInfo={SewagePipeMngColumnInfoList}/>
|
||||
</>
|
||||
|
||||
@@ -4,125 +4,13 @@ import SubmitButton from "@/components/button/SumitButton";
|
||||
import SaveButton from "@/components/button/SaveButton";
|
||||
import LastYearDataButton from "@/components/button/LastYearDataButton";
|
||||
import SubmitExceptionButton from "@/components/button/SubmitExceptionButton";
|
||||
import type { GridView, DataColumn } from "@/components/type/DataGrid.type";
|
||||
import { getFooterSummary } from "@/components/util/grid/footerSummary";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
import { SeweragePenetrationRateMngColumnInfo } from "@/components/util/column/management/SeweragePenetrationRateMngColumn";
|
||||
|
||||
// 하수도 통계 관리 > 01. 하수도 보급률
|
||||
const SeweragePenetrationRateMng = () => {
|
||||
const columns = [
|
||||
{ name: 'sido', fieldName: '시도', header: { text: '시도' } },
|
||||
{
|
||||
name: 'sgg',
|
||||
fieldName: '구군',
|
||||
header: { text: '구군' },
|
||||
footer: {
|
||||
text: '합계'
|
||||
},
|
||||
},
|
||||
{ name: 'rvbsn', fieldName: '수계', header: { text: '수계' } },
|
||||
{ name: 'bstrm', fieldName: '지류', header: { text: '지류' } },
|
||||
{ name: 'mdbsn', fieldName: '세부단위유역', header: { text: '세부단위유역' } },
|
||||
{ name: 'lgbsn', fieldName: '중권역', header: { text: '중권역' } },
|
||||
{ name: 'mdmbsn', fieldName: '소권역', header: { text: '소권역' } },
|
||||
{ name: 'specl_cntrpln_ar', fieldName: '특별대책지역', header: { text: '특별대책지역' } },
|
||||
{
|
||||
name: 'total_popl',
|
||||
fieldName: '총인구',
|
||||
header: { text: '총인구' },
|
||||
footer: {
|
||||
expression: 'sum' as const,
|
||||
numberFormat: '#,##0',
|
||||
valueCallback: (grid: GridView, column: DataColumn) => {
|
||||
return getFooterSummary(grid, column);
|
||||
},
|
||||
},
|
||||
},
|
||||
{ name: 'popl_sm', fieldName: '내국인', header: { text: '내국인' } },
|
||||
{ name: 'frgnr_popl_sm', fieldName: '외국인', header: { text: '외국인' } },
|
||||
{ name: 'area', fieldName: '행정참고자료면적(㎢)', header: { text: '행정참고자료면적(㎢)' } },
|
||||
{ name: 'popltn_sm', fieldName: '총인구(명)', header: { text: '총인구(명)' } },
|
||||
{ name: 'ar_sm', fieldName: '총면적(㎢)', header: { text: '총면적(㎢)' } },
|
||||
{ name: 'swge_proc_zone_inner_sm', fieldName: '합계', header: { text: '합계' } },
|
||||
{ name: 'pblswrg_popltn_sm', fieldName: '소계', header: { text: '소계' } },
|
||||
{ name: 'pblswrg_prm_trt', fieldName: '물리적처리', header: { text: '물리적처리' } },
|
||||
{ name: 'pblswrg_scd_trt', fieldName: '생물학적처리', header: { text: '생물학적처리' } },
|
||||
{ name: 'pblswrg_tert_trt', fieldName: '고도처리', header: { text: '고도처리' } },
|
||||
{ name: 'wstr_popltn_sm', fieldName: '소계', header: { text: '소계' } },
|
||||
{ name: 'wstr_prm_trt', fieldName: '물리적처리', header: { text: '물리적처리' } },
|
||||
{ name: 'wstr_scd_trt', fieldName: '생물학적처리', header: { text: '생물학적처리' } },
|
||||
{ name: 'wstr_tert_trt', fieldName: '고도처리', header: { text: '고도처리' } },
|
||||
{ name: 'not_conect_popltn', fieldName: '미접속인구', header: { text: '미접속인구' } },
|
||||
{ name: 'swge_proc_zone_inner_ar', fieldName: '면적(㎢)', header: { text: '면적(㎢)' } },
|
||||
{ name: 'swge_proc_zone_outer_sm', fieldName: '합계', header: { text: '합계' } },
|
||||
{ name: 'town_unproc_popltn', fieldName: '미처리인구', header: { text: '미처리인구' } },
|
||||
{ name: 'town_swtt_popltn', fieldName: '오수처리인구', header: { text: '오수처리인구' } },
|
||||
{ name: 'town_wrrtn_popltn', fieldName: '정화조인구', header: { text: '정화조인구' } },
|
||||
{ name: 'swge_proc_zone_outer_ar', fieldName: '면적(㎢)', header: { text: '면적(㎢)' } },
|
||||
{ name: 'pblswrg_popltn_suprt', fieldName: '공공하수처리구역인구보급율(%)', header: { text: '공공하수처리구역인구보급율(%)' } },
|
||||
{ name: 'adtrt_popltn_suprt', fieldName: '고도처리인구보급율(%)', header: { text: `고도처리인구보급율(%)` } },
|
||||
{ name: 'swrg_instlrt', fieldName: '하수도설치율(%)', header: { text: '하수도설치율(%)' } },
|
||||
{ name: 'rmk', fieldName: '비고', header: { text: '비고' } },
|
||||
];
|
||||
|
||||
const columnLayout = [
|
||||
{
|
||||
name: 'groupA',
|
||||
hideChildHeaders: false,
|
||||
header: { text: '행정구역' },
|
||||
items: ['sido', 'sgg'],
|
||||
},
|
||||
'rvbsn',
|
||||
'bstrm',
|
||||
{
|
||||
name: 'groupB',
|
||||
hideChildHeaders: false,
|
||||
header: { text: '수계영향권별분류류' },
|
||||
items: ['mdbsn', 'lgbsn', 'mdmbsn'],
|
||||
},
|
||||
'specl_cntrpln_ar',
|
||||
{
|
||||
name: 'groupC',
|
||||
hideChildHeaders: false,
|
||||
header: { text: '행정참고자료인구' },
|
||||
items: ['total_popl', 'popl_sm', 'frgnr_popl_sm'],
|
||||
},
|
||||
'area',
|
||||
'popltn_sm',
|
||||
'ar_sm',
|
||||
{
|
||||
name: 'groupD',
|
||||
hideChildHeaders: false,
|
||||
header: { text: '하수처리구역내' },
|
||||
items: [
|
||||
'swge_proc_zone_inner_sm',
|
||||
{
|
||||
name: 'pblswrgGroup',
|
||||
hideChildHeaders: false,
|
||||
header: { text: '공공하수처리인구(명)' },
|
||||
items: ['pblswrg_popltn_sm', 'pblswrg_prm_trt', 'pblswrg_scd_trt', 'pblswrg_tert_trt'],
|
||||
},
|
||||
{
|
||||
name: 'wstrGroup',
|
||||
hideChildHeaders: false,
|
||||
header: { text: '폐수처리인구(명)' },
|
||||
items: ['wstr_popltn_sm', 'wstr_prm_trt', 'wstr_scd_trt', 'wstr_tert_trt'],
|
||||
},
|
||||
'not_conect_popltn',
|
||||
'swge_proc_zone_inner_ar'
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'groupE',
|
||||
hideChildHeaders: false,
|
||||
header: { text: '하수처리구역외' },
|
||||
items: ['swge_proc_zone_outer_sm', 'town_swtt_popltn', 'town_unproc_popltn', 'town_wrrtn_popltn', 'swge_proc_zone_outer_ar'],
|
||||
},
|
||||
'pblswrg_popltn_suprt',
|
||||
'adtrt_popltn_suprt',
|
||||
'swrg_instlrt',
|
||||
'rmk',
|
||||
];
|
||||
|
||||
const submitFunc = () => {
|
||||
console.log('submit');
|
||||
@@ -130,18 +18,18 @@ const SeweragePenetrationRateMng = () => {
|
||||
};
|
||||
|
||||
const saveFunc = () => {
|
||||
console.log('submit');
|
||||
console.log('save');
|
||||
// 저장 로직
|
||||
};
|
||||
|
||||
const getLastYearDataFunc = () => {
|
||||
console.log('get last year data');
|
||||
// 지난연도 데이터 가져오기 로직
|
||||
// 전년도 데이터 가져오기
|
||||
};
|
||||
|
||||
const SubmitExceptionFunc = () => {
|
||||
console.log('submit exception');
|
||||
// 예외 제출 로직
|
||||
// 예외 제출 로직
|
||||
};
|
||||
|
||||
const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
|
||||
@@ -155,7 +43,14 @@ const SeweragePenetrationRateMng = () => {
|
||||
<LastYearDataButton getLastYearDataFunc={getLastYearDataFunc} />
|
||||
<SubmitExceptionButton SubmitExceptionFunc={SubmitExceptionFunc} />
|
||||
</div>
|
||||
<DataGrid columnInfo={{ columns, columnLayout }} rowStartNum={3} isExcelImport={true} fixedColumns={1} rowData={rowData} setRowData={setRowData} />
|
||||
<DataGrid
|
||||
columnInfo={SeweragePenetrationRateMngColumnInfo}
|
||||
rowStartNum={3}
|
||||
isExcelImport={true}
|
||||
fixedColumns={1}
|
||||
rowData={rowData}
|
||||
setRowData={setRowData}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user