feat: create export pdf, xlsx ctt

This commit is contained in:
kur0nek-o 2024-04-04 15:01:59 +07:00
parent f5cbb4986e
commit 3cae5bcee9
2 changed files with 552 additions and 32 deletions

View File

@ -1,7 +1,8 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid
ref="dataGridRef"
@ -925,15 +926,8 @@ import {
DxSelection,
DxSummary
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { Type3 } from '@/components/Form/FiltersType'
import { useQuery } from '@vue/apollo-composable'
import Filters from '@/components/Form/Filters.vue'
import gql from 'graphql-tag'
import { apolloClient, queries, requestGraphQl } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
@ -941,6 +935,12 @@ import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import InputText from '@/components/InputText.vue'
import {
exportToPDF,
exportToXLSX,
exportDetailToPDF,
exportDetailToXLSX
} from '@/report/Ctt/CTT_LaporanCttKwhPeriksa'
const client = apolloClient()
provideApolloClient(client)
@ -962,6 +962,12 @@ const requirementData = ref<any>({
dlpd: 0,
historyP2tl: 0
})
const reportMeta = ref({
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
periode: ''
})
const setRequirementData = (data: any) => (requirementData.value = data)
@ -1007,34 +1013,21 @@ const calculateCustomSummary = (options: any) => {
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
exportToPDF(reportMeta.value, data.value, true)
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta.value, e)
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
}
const onExportingDetail = (e: any) => {}
const onExportingDetail = (e: any) => {
if (e.format === 'pdf') {
exportDetailToPDF(reportMeta.value, dataSub.value)
} else if (e.format === 'xlsx') {
exportDetailToXLSX(reportMeta.value, e)
} else {
}
}
const resetData = () => {
data.value = []
@ -1068,6 +1061,8 @@ const filterData = async (params: any) => {
} else {
data.value = []
}
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)

View File

@ -0,0 +1,525 @@
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'
import { formatNumber } from '@/utils/numbers'
const reportName = 'Laporan CTT & KWH Periksa'
const fontSize = 5
const detailFontSize = 4
const formatData = (rawData: any) => {
const formattedData: any = []
const total: any = {
wo_cc123: 0,
wo_pln_mobile: 0,
wo_comcen: 0,
// wo_total
rekomendasi_mendatangkan_petugas: 0,
rekomendasi_diberikan_ke_pelanggan: 0,
dpld: 0,
history_p2lt: 0
}
rawData.forEach((item: any) => {
total.wo_cc123 += item.wo_cc123
total.wo_pln_mobile += item.wo_pln_mobile
total.wo_comcen += item.wo_comcen
total.rekomendasi_mendatangkan_petugas += item.rekomendasi_mendatangkan_petugas
total.rekomendasi_diberikan_ke_pelanggan += item.rekomendasi_diberikan_ke_pelanggan
total.dpld += item.dpld
total.history_p2lt += item.history_p2lt
})
const wo_total = total.wo_cc123 + total.wo_pln_mobile + total.wo_comcen
formattedData.push([
'Semua Unit',
formatNumber(total.wo_cc123),
formatNumber(total.wo_pln_mobile),
formatNumber(total.wo_comcen),
formatNumber(wo_total),
formatNumber(total.rekomendasi_mendatangkan_petugas),
formatNumber(total.rekomendasi_diberikan_ke_pelanggan),
formatNumber(total.dpld),
formatNumber(total.history_p2lt)
])
return formattedData
}
const formatMetaData = (reportMeta: any) => {
const periode = reportMeta.periode ? reportMeta.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, rawData: any, preview: boolean = false) => {
const data = formatData(rawData)
const meta = formatMetaData(reportMeta)
const doc = new jsPDF({
orientation: 'landscape'
})
autoTable(doc, {
head: [
['PT. PLN(Persero)', '', ''],
[
{ content: 'UNIT INDUK', styles: { cellWidth: 40 } },
{ content: ':', styles: { cellWidth: 1 } },
reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
],
[
'UNIT PELAKSANA PELAYANAN PELANGGAN',
':',
reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
],
[
'UNIT LAYANAN PELANGGAN',
':',
reportMeta.ulp
? reportMeta.ulp.name.toUpperCase()
: 'Semua Unit Layanan Pelanggan'.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: 'Nama Unit',
rowSpan: 3
},
{
content: 'Total WO',
colSpan: 4
},
{
content: 'Rekomendasi Sistem',
colSpan: 2
},
'DLPD',
'Histori P2LT'
],
[
'CC 123',
'PLN Mobile',
'Comcen',
'Total',
'Mendatangkan Petugas',
'Diberikan ke Pelanggan',
{
content: 'g',
rowSpan: 2
},
{
content: 'h',
rowSpan: 2
}
],
['a', 'b', 'c', 'd=a+b+c', 'e', 'f']
],
body: data,
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',
valign: 'middle'
},
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()
})
}
if (data.cell.text[0] === 'TOTAL') {
for (const key in data.row.cells) {
data.row.cells[key].styles.fillColor = [192, 192, 192]
data.row.cells[key].styles.fontStyle = 'bold'
}
}
},
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 }
})
if (preview) {
doc.setProperties({
title: `${reportName}`
})
window.open(doc.output('bloburl'))
} else {
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
console.log('pdf berhasil disimpan')
})
}
}
const exportDetailToPDF = (reportMeta: any, rawData: any) => {
const meta = formatMetaData(reportMeta)
const doc = new jsPDF({
orientation: 'landscape'
})
autoTable(doc, {
head: [['PT. PLN(Persero)']],
styles: {
fontSize: detailFontSize,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold'
},
theme: 'plain',
startY: 10,
margin: 5
})
autoTable(doc, {
head: [
[`Daftar Detail ${reportName}`.toUpperCase()],
[`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
],
styles: {
fontSize: detailFontSize,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold',
halign: 'center'
},
theme: 'plain',
startY: 18,
margin: 5
})
autoTable(doc, {
head: [
[
'No',
'UIW/D',
'UP3',
'Rayon',
'IDPEL',
'NOMETER',
'No. Telepon',
'Nama',
'Alamat',
'Sumber Lapor',
'No Laporan',
'08',
'70',
'71',
'41',
'44',
'45',
'46',
'37',
'47',
'Jenis DLPD',
'Keterangan DLPD',
'Bulan Tahun DLPD',
'No. Agenda P2TL',
'Tgl Mohon P2T',
'Tgl Sah P2TL',
'Rekomendasi Sistem',
'Tgl/Jam Lapor',
'Petugas Regu',
'User VCC'
]
],
body: rawData
? rawData.map((item: any, i: any) => [
{ content: i + 1, styles: { halign: 'right' } },
item.nama_uid,
item.nama_up3,
item.nama_ulp,
item.id_pelanggan,
item.nomormeter,
item.no_telp_pelapor,
item.nama_pelapor,
item.alamat_pelapor,
item.media,
item.no_laporan,
item.r08,
item.r70,
item.r71,
item.r41,
item.r44,
item.r45,
item.r46,
item.r37,
item.r47,
item.jenis_dlpd,
item.keterangan_dlpd,
item.blth_dlpd,
item.no_agenda_p2tl,
item.tgl_mohon_p2tl,
item.tgl_sah_p2tl,
item.rekomendasi_sistem,
item.waktu_lapor,
item.petugas_regu,
item.user_vcc
])
: [],
styles: {
fontSize: detailFontSize,
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',
valign: 'middle'
},
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: 24,
margin: 5
})
autoTable(doc, {
head: [
[`${meta.dayTo}, ${meta.dateToFormat}`],
[
{
content: '(.........................................)',
styles: { minCellHeight: 8, valign: 'bottom' }
}
]
],
styles: {
fontSize: detailFontSize,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold',
halign: 'center'
},
theme: 'plain',
tableWidth: 50,
margin: { left: 230 }
})
doc.save(`Laporan Detail ${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,
`UNIT INDUK : ${
reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
4,
1,
`UNIT LAYANAN PELANGGAN : ${
reportMeta.ulp
? reportMeta.ulp.name.toUpperCase()
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
}`
)
setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true)
setHeaderStyle(
worksheet,
7,
1,
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
true
)
worksheet.mergeCells('A1:I1')
worksheet.mergeCells('A2:I2')
worksheet.mergeCells('A3:I3')
worksheet.mergeCells('A4:I4')
worksheet.mergeCells('A6:I6')
worksheet.mergeCells('A7:I7')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
topLeftCell: { row: 9, 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
}
const exportDetailToXLSX = (reportMeta: any, e: any) => {
const meta = formatMetaData(reportMeta)
const workbook = new Workbook()
const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true)
setHeaderStyle(
worksheet,
4,
1,
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
true
)
worksheet.mergeCells('A1:AD1')
worksheet.mergeCells('A3:AD3')
worksheet.mergeCells('A4:AD4')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
topLeftCell: { row: 6, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(
new Blob([buffer], { type: 'application/octet-stream' }),
`Laporan Detail ${reportName}.xlsx`
)
})
})
e.cancel = true
}
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }