feat: 심의결과 excel download 기능 추가

mpower
minuk926 2 years ago
parent f8e270dc74
commit 5831c191a5

@ -10,13 +10,15 @@ import { FormControl, Grid, InputLabel, MenuItem, Select, TableFooter, Typograph
import PropTypes from 'prop-types';
import Box from '@mui/material/Box';
import combo from 'commons/combo_data';
import { useCallback, useState } from 'react';
import { useCallback, useRef, useState } from 'react';
import Button from '@mui/material/Button';
import { IconSearch } from '@tabler/icons';
import { IconFileExport, IconSearch } from '@tabler/icons';
import { findJudgeResults } from 'apis/judge';
import _ from 'lodash';
import { useAlert } from 'react-alert';
import JudgeModal from './JudgeModal';
import saveAs from 'file-saver';
import * as Excel from 'exceljs';
const StyledTableCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: {
@ -113,6 +115,73 @@ const ModalJudgeResult = ({ totJudgeUsers, totJudgeUserData, judgeCars, judgeUse
[]
);
const handleExcelDownload = () => {
const colNames = ['No.', '접수번호', '차량번호'];
judgeResult.totJudgeUsers.forEach((u) => colNames.push(u.NAME));
colNames.push('결과');
const excelDatas = [];
judgeResult.totJudgeUserData.forEach((u, idx) => {
excelDatas.push(['', totLabel[idx], '', ...u]);
});
judgeResult.judgeCars.forEach((d, idx) => {
excelDatas.push([
idx + 1,
d.msSeq,
d.msCarnum,
..._.range(idx, judgeResult.judgeUserData.length, judgeResult.judgeCars.length).map((i) => judgeResult.judgeUserData[i].msuResult),
judgeResult.judgeUserData[idx].msResultNm
]);
});
if (!excelDatas || excelDatas.length === 0) {
alert.show('다운로드할 대상이 없습니다.[데이타 조회후 실행]');
return;
}
const workbook = new Excel.Workbook();
const worksheet = workbook.addWorksheet('Sheet'); // sheet My Sheet
const headerRow = worksheet.addRow();
worksheet.getRow(1).font = { bold: true };
colNames.forEach((col, idx) => {
worksheet.getColumn(idx + 1).width = 10;
const cell = headerRow.getCell(idx + 1);
cell.value = col;
});
worksheet.properties.outlineProperties = {
summaryBelow: false,
summaryRight: false
};
excelDatas.forEach((row, idx) => {
const dataRow = worksheet.addRow();
colNames.forEach((col, i) => {
const cell = dataRow.getCell(i + 1);
cell.value = row[i];
return false;
});
});
let fileName = '';
if (!selectedRow.msDatagb) {
fileName = '주정차';
} else {
fileName = selectedRow.msDatagb === '1' ? '거주자' : '장애인';
}
workbook.xlsx.writeBuffer().then((buffer) => {
saveAs(
new Blob([buffer], { type: 'application/octet-stream' }),
`${fileName} 심사결과[${selectedRow.msChasu}차-${msuTeam.substring(2)}팀(${selectedRow.msSdate} ~ ${selectedRow.msEdate})].xlsx`
);
});
};
return (
<Box
sx={{
@ -125,14 +194,14 @@ const ModalJudgeResult = ({ totJudgeUsers, totJudgeUserData, judgeCars, judgeUse
>
<Grid container spacing={1} alignItems="center" mb={1}>
<Grid container spacing={1}>
<Grid item xs={7}>
<Grid item xs={6}>
<Typography variant="subtitle1">
심의차수: {selectedRow.msChasu} 심의기간: {selectedRow.msSdate} ~ {selectedRow.msEdate}
</Typography>
</Grid>
<Grid item xs={5}>
<Grid container spacing={0.5} alignItems="center" mb={1}>
<Grid item xs={6} style={{ marginLeft: 'auto' }}>
<Grid item xs={6}>
<Grid container spacing={0.5} style={{ marginLeft: 'auto' }} alignItems="flex-end" mb={1}>
<Grid item xs={3.7}>
<FormControl fullWidth>
<InputLabel required></InputLabel>
<Select
@ -150,7 +219,7 @@ const ModalJudgeResult = ({ totJudgeUsers, totJudgeUserData, judgeCars, judgeUse
</Select>
</FormControl>
</Grid>
<Grid item xs={6} sx={{ marginTop: 1 }}>
<Grid item xs={8} sx={{ marginTop: 1, marginLeft: 1 }} alignItems="flex-end">
<Button variant="contained" color="primary" size="small" startIcon={<IconSearch />} onClick={onSearch}>
조회
</Button>
@ -164,6 +233,15 @@ const ModalJudgeResult = ({ totJudgeUsers, totJudgeUserData, judgeCars, judgeUse
>
일괄처리
</Button>
<Button
disabled={judgeDatas.length === 0}
variant="contained"
size="small"
startIcon={<IconFileExport />}
onClick={handleExcelDownload}
>
엑셀다운로드
</Button>
</Grid>
</Grid>
</Grid>

@ -1,111 +0,0 @@
import PropTypes from 'prop-types';
import { IconFileExport } from '@tabler/icons';
import { Button } from '@mui/material';
import * as Excel from 'exceljs';
import saveAs from 'file-saver';
import { useAlert } from 'react-alert';
const ExcelDownloadGrid = ({ fileName, gridColumns, excelDatas, isDisabled = true }) => {
const alert = useAlert();
const handleExcelDownload = () => {
if (!excelDatas || excelDatas.length === 0) {
alert.show('다운로드할 대상이 없습니다.[데이타 조회후 실행]');
return;
}
const workbook = new Excel.Workbook();
const worksheet = workbook.addWorksheet('Sheet'); // sheet My Sheet
/*
// subject
worksheet.mergeCells('A2:I2');
const customCell = worksheet.getCell('A2');
customCell.font = {
name: 'Comic Sans MS',
family: 4,
size: 20,
underline: true,
bold: true
};
customCell.value = 'Subject';
*/
const headerRow = worksheet.addRow();
worksheet.getRow(1).font = { bold: true };
gridColumns.forEach((col, idx) => {
const currentColumnWidth = col.width;
worksheet.getColumn(idx + 1).width = currentColumnWidth !== undefined ? currentColumnWidth / 6 : 20;
const cell = headerRow.getCell(idx + 1);
cell.value = col.headerName;
});
// if (this.state.excelFilterEnabled === true) {
worksheet.autoFilter = {
from: {
row: 1,
column: 1
},
to: {
row: 1,
column: gridColumns.length
}
};
worksheet.properties.outlineProperties = {
summaryBelow: false,
summaryRight: false
};
excelDatas.forEach((row) => {
const dataRow = worksheet.addRow();
// eslint-disable-next-line guard-for-in,no-restricted-syntax
for (const [k, v] of Object.entries(row)) {
// eslint-disable-next-line no-plusplus
// eslint-disable-next-line consistent-return
gridColumns.forEach((col, idx) => {
if (col.field === k) {
const cell = dataRow.getCell(idx + 1);
cell.value = v;
return false;
}
});
}
});
/*
// Footer
const rowCount = worksheet.rowCount;
worksheet.mergeCells(`A${rowCount}:I${rowCount + 1}`);
worksheet.getRow(1).font = { bold: true };
worksheet.getCell(`A${rowCount}`).font = {
name: 'Comic Sans MS',
family: 4,
size: 20,
underline: true,
bold: true
};
worksheet.getCell(`A${rowCount}`).value = 'Custom Footer here';
*/
workbook.xlsx.writeBuffer().then((buffer) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `${fileName}.xlsx`);
});
};
return (
<Button disabled={isDisabled} variant="contained" size="small" startIcon={<IconFileExport />} onClick={handleExcelDownload}>
엑셀다운로드
</Button>
);
};
ExcelDownloadGrid.propTypes = {
fileName: PropTypes.string.isRequired,
gridColumns: PropTypes.array.isRequired,
excelDatas: PropTypes.array.isRequired,
isDisabled: PropTypes.bool.isRequired
};
export default ExcelDownloadGrid;
Loading…
Cancel
Save