From 944c7c62b32b32db18e7208589248f6c94fb1724 Mon Sep 17 00:00:00 2001 From: kur0nek-o Date: Thu, 4 Apr 2024 16:26:57 +0700 Subject: [PATCH] feat: create pdf, xlsx in material --- .../Pages/Material/Daftar/Material_DGMYG.vue | 31 +- .../Pages/Material/Rekap/Material_RPM.vue | 28 +- src/report/Material/Daftar/Material_DGMYG.ts | 283 ++++++++++++++++++ .../Material/Rekapitulasi/Material_RPM.ts | 273 +++++++++++++++++ 4 files changed, 611 insertions(+), 4 deletions(-) create mode 100644 src/report/Material/Daftar/Material_DGMYG.ts create mode 100644 src/report/Material/Rekapitulasi/Material_RPM.ts diff --git a/src/components/Pages/Material/Daftar/Material_DGMYG.vue b/src/components/Pages/Material/Daftar/Material_DGMYG.vue index 8b65304..66f9e02 100755 --- a/src/components/Pages/Material/Daftar/Material_DGMYG.vue +++ b/src/components/Pages/Material/Daftar/Material_DGMYG.vue @@ -2,6 +2,7 @@ +
() const dataSubSelected = ref() const dialogDetail = ref(false) const loadingData = ref(false) +const reportMeta = ref({ + uid: { + id: 0, + name: 'Semua Distribusi/Wilayah' + }, + up3: { + id: 0, + name: 'Semua Area' + }, + posko: { + id: 0, + name: 'Semua Unit Layanan Pelanggan' + }, + periode: '' +}) const resetData = () => { data.value = [] @@ -279,6 +295,8 @@ const filterData = async (params: any) => { } else { data.value = [] } + + reportMeta.value = filters.value }) .catch((err) => { console.error(err) @@ -310,7 +328,14 @@ const onSelectionChanged = ({ selectedRowsData }: any) => { } } -const onExporting = (e: any) => {} +const onExporting = (e: any) => { + if (e.format === 'pdf') { + exportToPDF(reportMeta, data) + } else if (e.format === 'xlsx') { + exportToXLSX(reportMeta, e) + } else { + } +} const filters = ref() diff --git a/src/components/Pages/Material/Rekap/Material_RPM.vue b/src/components/Pages/Material/Rekap/Material_RPM.vue index e8a42f7..e18338a 100755 --- a/src/components/Pages/Material/Rekap/Material_RPM.vue +++ b/src/components/Pages/Material/Rekap/Material_RPM.vue @@ -180,6 +180,8 @@ import BufferDialog from '@/components/Dialogs/BufferDialog.vue' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import DetailDialog from '@/components/Dialogs/DetailDialog.vue' import InputText from '@/components/InputText.vue' +import { exportToPDF, exportToXLSX } from '@/report/Material/Rekapitulasi/Material_RPM' + const position = { of: '#data' } const showIndicator = ref(true) const shading = ref(true) @@ -190,6 +192,21 @@ const dataSelected = ref() const dataSubSelected = ref() const dialogDetail = ref(false) const loadingData = ref(false) +const reportMeta = ref({ + uid: { + id: 0, + name: 'Semua Distribusi/Wilayah' + }, + up3: { + id: 0, + name: 'Semua Area' + }, + posko: { + id: 0, + name: 'Semua Unit Layanan Pelanggan' + }, + periode: '' +}) const resetData = () => { data.value = [] @@ -219,6 +236,8 @@ const filterData = async (params: any) => { } else { data.value = [] } + + reportMeta.value = filters.value }) .catch((err) => { console.error(err) @@ -250,7 +269,14 @@ const onSelectionChanged = ({ selectedRowsData }: any) => { } } -const onExporting = (e: any) => {} +const onExporting = (e: any) => { + if (e.format === 'pdf') { + exportToPDF(reportMeta, data) + } else if (e.format === 'xlsx') { + exportToXLSX(reportMeta, e) + } else { + } +} const filters = ref() diff --git a/src/report/Material/Daftar/Material_DGMYG.ts b/src/report/Material/Daftar/Material_DGMYG.ts new file mode 100644 index 0000000..a7444f8 --- /dev/null +++ b/src/report/Material/Daftar/Material_DGMYG.ts @@ -0,0 +1,283 @@ +import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' +import { + Document, + AlignmentType, + Packer, + Paragraph, + Table, + TableCell, + TableRow, + VerticalAlign, + TextRun, + WidthType, + PageOrientation +} from 'docx' +import { saveAs } from 'file-saver' +import { jsPDF } from 'jspdf' +import autoTable from 'jspdf-autotable' +import { Workbook } from 'exceljs' +import { setHeaderStyle } from '@/report/utils/xlsx' + +const reportName = 'Daftar Gangguan Dan Material Yang Dipakai' +const fontSize = 5 + +const formatMetaData = (reportMeta: any) => { + const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : '' + + let dateFromFormat = '' + let dateToFormat = '' + let dayTo = '' + + if (periode != '') { + const dateFrom = new Date(periode[0].split('-').reverse().join('-')) + const dateTo = new Date(periode[1].split('-').reverse().join('-')) + + dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', { + month: 'long' + })}-${dateFrom.getFullYear()}` + + dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', { + month: 'long' + })}-${dateTo.getFullYear()}` + + dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' }) + } + + return { dateFromFormat, dateToFormat, dayTo } +} + +const exportToPDF = (reportMeta: any, data: any) => { + const meta = formatMetaData(reportMeta) + const doc = new jsPDF({ + orientation: 'landscape' + }) + + autoTable(doc, { + head: [ + ['PT. PLN(Persero)', '', ''], + [ + { content: 'DISTRIBUSI/WILAYAH', styles: { cellWidth: 35 } }, + { content: ':', styles: { cellWidth: 1 } }, + reportMeta.value.uid + ? reportMeta.value.uid.name.toUpperCase() + : 'Semua Distribusi/Wilayah'.toUpperCase() + ], + [ + 'AREA', + ':', + reportMeta.value.up3 ? reportMeta.value.up3.name.toUpperCase() : 'Semua Area'.toUpperCase() + ], + [ + 'POSKO', + ':', + reportMeta.value.posko + ? reportMeta.value.posko.name.toUpperCase() + : 'Semua Posko'.toUpperCase() + ] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold' + }, + theme: 'plain', + startY: 10 + }) + + autoTable(doc, { + head: [ + [`${reportName}`.toUpperCase()], + [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold', + halign: 'center' + }, + theme: 'plain', + startY: 25 + }) + + autoTable(doc, { + head: [ + [ + { + content: 'No', + rowSpan: 2 + }, + { + content: 'Nomor Gangguan', + rowSpan: 2 + }, + { + content: 'Nama Pelanggan', + rowSpan: 2 + }, + { + content: 'Isi Laporan', + rowSpan: 2 + }, + { + content: 'Penyebab Gangguan', + rowSpan: 2 + }, + { + content: 'Tgl Padam', + rowSpan: 2 + }, + { + content: 'Tgl Nyala', + rowSpan: 2 + }, + { + content: 'Regu', + rowSpan: 2 + }, + { + content: 'Material Yang Dipakai', + colSpan: 4 + } + ], + ['Sumber', 'Nama', 'Satuan', 'Vol'] + ], + body: data.value.map((item: any, i: any) => [ + { content: ++i, styles: { halign: 'right' } }, + item.no_laporan, + item.nama_pelapor, + item.keterangan_pelapor, + item.penyebab, + item.waktu_lapor, + item.waktu_recovery, + item.regu, + item.media, + item.nama_material, + item.satuan_material, + item.volume_material + ]), + styles: { + fontSize, + cellPadding: 1, + lineColor: [0, 0, 0], + lineWidth: 0.1, + cellWidth: 'auto' + }, + rowPageBreak: 'auto', + headStyles: { + fillColor: [192, 192, 192], + textColor: [0, 0, 0], + fontStyle: 'bold', + cellWidth: 'wrap', + halign: 'center' + }, + bodyStyles: { + textColor: [0, 0, 0] + }, + didParseCell: function (data) { + if (data.row.section === 'head') { + data.cell.text = data.cell.text.map(function (word: any) { + return word.toUpperCase() + }) + } + }, + startY: 35 + }) + + autoTable(doc, { + head: [ + [`${meta.dayTo}, ${meta.dateToFormat}`], + [ + { + content: '(.........................................)', + styles: { minCellHeight: 8, valign: 'bottom' } + } + ] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold', + halign: 'center' + }, + theme: 'plain', + tableWidth: 50, + margin: { left: 230 } + }) + + doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => { + console.log('pdf berhasil disimpan') + }) +} + +const exportToXLSX = (reportMeta: any, e: any) => { + const meta = formatMetaData(reportMeta) + const workbook = new Workbook() + const worksheet = workbook.addWorksheet(`${reportName}`) + + setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)') + setHeaderStyle( + worksheet, + 2, + 1, + `DISTRIBUSI/WILAYAH : ${ + reportMeta.value.uid + ? reportMeta.value.uid.name.toUpperCase() + : 'Semua Distribusi/Wilayah'.toUpperCase() + }` + ) + setHeaderStyle( + worksheet, + 3, + 1, + `AREA : ${ + reportMeta.value.up3 ? reportMeta.value.up3.name.toUpperCase() : 'Semua Area'.toUpperCase() + }` + ) + setHeaderStyle( + worksheet, + 4, + 1, + `POSKO : ${ + reportMeta.value.posko + ? reportMeta.value.posko.name.toUpperCase() + : 'Semua Posko'.toUpperCase() + }` + ) + + setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true) + setHeaderStyle( + worksheet, + 7, + 1, + `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, + true + ) + + worksheet.mergeCells('A1:L1') + worksheet.mergeCells('A2:L2') + worksheet.mergeCells('A3:L3') + worksheet.mergeCells('A4:L4') + worksheet.mergeCells('A6:L6') + worksheet.mergeCells('A7:L7') + + exportToExcel({ + component: e.component, + worksheet, + autoFilterEnabled: true, + topLeftCell: { row: 10, column: 1 }, + loadPanel: { + enabled: false + } + }).then(() => { + workbook.xlsx.writeBuffer().then((buffer: any) => { + saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`) + }) + }) + + e.cancel = true +} + +export { exportToPDF, exportToXLSX } diff --git a/src/report/Material/Rekapitulasi/Material_RPM.ts b/src/report/Material/Rekapitulasi/Material_RPM.ts new file mode 100644 index 0000000..9c6b97a --- /dev/null +++ b/src/report/Material/Rekapitulasi/Material_RPM.ts @@ -0,0 +1,273 @@ +import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' +import { + Document, + AlignmentType, + Packer, + Paragraph, + Table, + TableCell, + TableRow, + VerticalAlign, + TextRun, + WidthType, + PageOrientation +} from 'docx' +import { saveAs } from 'file-saver' +import { jsPDF } from 'jspdf' +import autoTable from 'jspdf-autotable' +import { Workbook } from 'exceljs' +import { setHeaderStyle } from '@/report/utils/xlsx' + +const reportName = 'Rekapitulasi Pemakaian Material' +const fontSize = 5 + +const formatMetaData = (reportMeta: any) => { + const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : '' + + let dateFromFormat = '' + let dateToFormat = '' + let dayTo = '' + + if (periode != '') { + const dateFrom = new Date(periode[0].split('-').reverse().join('-')) + const dateTo = new Date(periode[1].split('-').reverse().join('-')) + + dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', { + month: 'long' + })}-${dateFrom.getFullYear()}` + + dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', { + month: 'long' + })}-${dateTo.getFullYear()}` + + dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' }) + } + + return { dateFromFormat, dateToFormat, dayTo } +} + +const exportToPDF = (reportMeta: any, data: any) => { + const meta = formatMetaData(reportMeta) + const doc = new jsPDF({ + orientation: 'landscape' + }) + + autoTable(doc, { + head: [ + ['PT. PLN(Persero)', '', ''], + [ + { content: 'DISTRIBUSI/WILAYAH', styles: { cellWidth: 35 } }, + { content: ':', styles: { cellWidth: 1 } }, + reportMeta.value.uid + ? reportMeta.value.uid.name.toUpperCase() + : 'Semua Distribusi/Wilayah'.toUpperCase() + ], + [ + 'AREA', + ':', + reportMeta.value.up3 ? reportMeta.value.up3.name.toUpperCase() : 'Semua Area'.toUpperCase() + ], + [ + 'POSKO', + ':', + reportMeta.value.posko + ? reportMeta.value.posko.name.toUpperCase() + : 'Semua Posko'.toUpperCase() + ] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold' + }, + theme: 'plain', + startY: 10 + }) + + autoTable(doc, { + head: [ + [`${reportName}`.toUpperCase()], + [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold', + halign: 'center' + }, + theme: 'plain', + startY: 25 + }) + + autoTable(doc, { + head: [ + [ + { + content: 'No', + rowSpan: 2 + }, + { + content: 'Kode Material', + rowSpan: 2 + }, + { + content: 'Nama Material', + rowSpan: 2 + }, + { + content: 'Satuan', + rowSpan: 2 + }, + { + content: 'Sumber Material', + rowSpan: 2 + }, + { + content: 'Tanggal', + colSpan: 31 + }, + { + content: 'Jumlah', + rowSpan: 2 + } + ], + [ + ...Array.from({ length: 31 }, (_, i) => i + 1).map((item) => ({ + content: item.toString() + })) + ] + ], + body: data.value.map((item: any, i: any) => [ + { content: ++i, styles: { halign: 'right' } }, + item.kode, + item.nama_material, + item.satuan, + item.sumber_material, + ...Array.from({ length: 31 }, (_, i) => item[`tgl${i + 1}`]), + item.total + ]), + styles: { + fontSize, + cellPadding: 1, + lineColor: [0, 0, 0], + lineWidth: 0.1, + cellWidth: 'auto' + }, + rowPageBreak: 'auto', + headStyles: { + fillColor: [192, 192, 192], + textColor: [0, 0, 0], + fontStyle: 'bold', + halign: 'center' + }, + bodyStyles: { + textColor: [0, 0, 0] + }, + didParseCell: function (data) { + if (data.row.section === 'head') { + data.cell.text = data.cell.text.map(function (word: any) { + return word.toUpperCase() + }) + } + }, + startY: 35 + }) + + autoTable(doc, { + head: [ + [`${meta.dayTo}, ${meta.dateToFormat}`], + [ + { + content: '(.........................................)', + styles: { minCellHeight: 8, valign: 'bottom' } + } + ] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold', + halign: 'center' + }, + theme: 'plain', + tableWidth: 50, + margin: { left: 230 } + }) + + doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => { + console.log('pdf berhasil disimpan') + }) +} + +const exportToXLSX = (reportMeta: any, e: any) => { + const meta = formatMetaData(reportMeta) + const workbook = new Workbook() + const worksheet = workbook.addWorksheet(`${reportName}`) + + setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)') + setHeaderStyle( + worksheet, + 2, + 1, + `DISTRIBUSI/WILAYAH : ${ + reportMeta.value.uid + ? reportMeta.value.uid.name.toUpperCase() + : 'Semua Distribusi/Wilayah'.toUpperCase() + }` + ) + setHeaderStyle( + worksheet, + 3, + 1, + `AREA : ${ + reportMeta.value.up3 ? reportMeta.value.up3.name.toUpperCase() : 'Semua Area'.toUpperCase() + }` + ) + setHeaderStyle( + worksheet, + 4, + 1, + `POSKO : ${ + reportMeta.value.posko + ? reportMeta.value.posko.name.toUpperCase() + : 'Semua Posko'.toUpperCase() + }` + ) + + setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true) + setHeaderStyle( + worksheet, + 7, + 1, + `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, + true + ) + + worksheet.mergeCells('A1:AK1') + worksheet.mergeCells('A2:AK2') + worksheet.mergeCells('A3:AK3') + worksheet.mergeCells('A4:AK4') + worksheet.mergeCells('A6:AK6') + worksheet.mergeCells('A7:AK7') + + exportToExcel({ + component: e.component, + worksheet, + autoFilterEnabled: true, + topLeftCell: { row: 10, column: 1 }, + loadPanel: { + enabled: false + } + }).then(() => { + workbook.xlsx.writeBuffer().then((buffer: any) => { + saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`) + }) + }) + + e.cancel = true +} + +export { exportToPDF, exportToXLSX }