feat: create export pdf and xlsx in detail rekapitulasi gangguan koreksi transaksi individual
This commit is contained in:
kur0nek-o
parent
f98ed9f261
commit
527ce9a9a9
@ -330,7 +330,7 @@
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onDataSubSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
@exporting="onExportingDetail"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
@ -1119,10 +1119,6 @@ import {
|
||||
DxSelection,
|
||||
DxSummary
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
@ -1130,7 +1126,12 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
import InputText from '@/components/InputText.vue'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_KTI'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX,
|
||||
exportDetailToPDF,
|
||||
exportDetailToXLSX
|
||||
} from '@/report/Gangguan/Rekap/RGangguan_KTI'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -1207,21 +1208,18 @@ const closeDialog = () => {
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} 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) => {
|
||||
if (e.format === 'pdf') {
|
||||
exportDetailToPDF(reportMeta.value, dataSub.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportDetailToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -21,6 +21,8 @@ import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||
import { formatNumber } from '@/utils/numbers'
|
||||
|
||||
const reportName = 'Rekapitulasi Koreksi Transaksi Individual'
|
||||
const fontSize = 5
|
||||
const detailFontSize = 3
|
||||
|
||||
const formatData = (rawData: any) => {
|
||||
const formattedData: any = []
|
||||
@ -125,7 +127,6 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
})
|
||||
const fontSize = 5
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
@ -278,4 +279,291 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
|
||||
}
|
||||
}
|
||||
|
||||
export { exportToPDF }
|
||||
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',
|
||||
'No Laporan',
|
||||
'Tgl Lapor',
|
||||
'Tgl Lapor Sebelum',
|
||||
'Tgl Lapor Koreksi',
|
||||
'Tgl Penugasan Sebelum',
|
||||
'Tgl Penugasan Koreksi',
|
||||
'Tgl Perjalanan Sebelum',
|
||||
'Tgl Perjalanan Koreksi',
|
||||
'Tgl Pengerjaan Sebelum',
|
||||
'Tgl Pengerjaan Koreksi',
|
||||
'Tgl Nyala Sebelum',
|
||||
'Tgl Nyala Koreksi',
|
||||
'Tgl Selesai Sebelum',
|
||||
'Tgl Selesai Koreksi',
|
||||
'Durasi Response Time Sebelum',
|
||||
'Durasi Response Time Koreksi',
|
||||
'Durasi Recovery Time Koreksi',
|
||||
'Kelompok ID Sebelum',
|
||||
'Kelompok ID Koreksi',
|
||||
'Sub Kelompok ID Sebelum',
|
||||
'Sub Kelompok ID Koreksi',
|
||||
'Fasilitas ID Sebelum',
|
||||
'Fasilitas ID Koreksi',
|
||||
'Sub Fasilitas ID Sebelum',
|
||||
'Sub Fasilitas ID Koreksi',
|
||||
'Equipment ID Sebelum',
|
||||
'Equipment ID Koreksi',
|
||||
'Event Damage ID Sebelum',
|
||||
'Event Damage ID Koreksi',
|
||||
'Cause ID Sebelum',
|
||||
'Cause ID Koreksi',
|
||||
'Cause Group ID Sebelum',
|
||||
'Cause Group ID Koreksi',
|
||||
'Weather ID Sebelum',
|
||||
'Weather ID Koreksi',
|
||||
'Group Koreksi',
|
||||
'ALASAN',
|
||||
'IDPEL/NO METER',
|
||||
'Keterangan Pelapor',
|
||||
'Posko',
|
||||
'Tindakan',
|
||||
'Penyebab'
|
||||
]
|
||||
],
|
||||
body: rawData.map((item: any, i: any) => [
|
||||
{ content: i + 1, styles: { halign: 'right' } },
|
||||
item.no_laporan,
|
||||
item.tgl_lapor,
|
||||
item.tgl_lapor_sblm,
|
||||
item.tgl_lapor_sdh,
|
||||
item.tgl_penugasan_sblm,
|
||||
item.tgl_penugasan_sdh,
|
||||
item.tgl_perjalanan_sblm,
|
||||
item.tgl_perjalanan_sdh,
|
||||
item.tgl_pengerjaan_sblm,
|
||||
item.tgl_pengerjaan_sdh,
|
||||
item.tgl_nyala_sementara_sblm,
|
||||
item.tgl_nyala_sementara_sdh,
|
||||
item.tgl_nyala_sblm,
|
||||
item.tgl_nyala_sdh,
|
||||
item.tgl_selesai_sblm,
|
||||
item.tgl_selesai_sdh,
|
||||
item.durasi_response_time_sblm,
|
||||
item.durasi_response_time_sdh,
|
||||
item.durasi_recovery_time_sdh,
|
||||
item.kelompok_sblm,
|
||||
item.kelompok_sdh,
|
||||
item.sub_kelompok_sblm,
|
||||
item.sub_kelompok_sdh,
|
||||
item.fasilitas_id_sblm,
|
||||
item.fasilitas_id_sdh,
|
||||
item.sub_fasilitas_id_sblm,
|
||||
item.sub_fasilitas_id_sdh,
|
||||
item.equipment_id_sblm,
|
||||
item.equipment_id_sdh,
|
||||
item.event_damage_sblm,
|
||||
item.event_damage_sdh,
|
||||
item.cause_id_sblm,
|
||||
item.cause_id_sdh,
|
||||
item.cause_group_id_sblm,
|
||||
item.cause_group_id_sdh,
|
||||
item.weather_id_sblm,
|
||||
item.weather_id_sdh,
|
||||
item.group_koreksi,
|
||||
item.alasan,
|
||||
item.idpel_no_meter,
|
||||
item.keterangan_pelapor,
|
||||
item.nama_posko,
|
||||
item.tindakan,
|
||||
item.penyebab
|
||||
]),
|
||||
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,
|
||||
`POSKO : ${
|
||||
reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
|
||||
setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
8,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('A1:M1')
|
||||
worksheet.mergeCells('A2:M2')
|
||||
worksheet.mergeCells('A3:M3')
|
||||
worksheet.mergeCells('A4:M4')
|
||||
worksheet.mergeCells('A7:M7')
|
||||
worksheet.mergeCells('A8:M8')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 10, column: 1 }
|
||||
}).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, 8, `Daftar Detail ${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
4,
|
||||
8,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('H3:J3')
|
||||
worksheet.mergeCells('H4:J4')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 6, column: 1 }
|
||||
}).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 }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user