511 lines
		
	
	
		
			14 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
			
		
		
	
	
			511 lines
		
	
	
		
			14 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
| 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 { formatWaktu } from '@/components/Form/FiltersType/reference'
 | |
| import { setHeaderStyle } from '@/report/utils/xlsx'
 | |
| 
 | |
| const reportName = 'Daftar Gangguan Diselesaikan Mobile APKT'
 | |
| 
 | |
| 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('default', {
 | |
|       month: 'long'
 | |
|     })}-${dateFrom.getFullYear()}`
 | |
| 
 | |
|     dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
 | |
|       month: 'long'
 | |
|     })}-${dateTo.getFullYear()}`
 | |
| 
 | |
|     dayTo = dateTo.toLocaleString('default', { 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: 'UNIT INDUK', styles: { cellWidth: 25 } },
 | |
|         { content: ':', styles: { cellWidth: 1 } },
 | |
|         reportMeta.value.uid
 | |
|           ? reportMeta.value.uid.name.toUpperCase()
 | |
|           : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
 | |
|       ],
 | |
|       [
 | |
|         'UNIT PELAKSANA PELAYANAN PELANGGAN',
 | |
|         ':',
 | |
|         reportMeta.value.up3
 | |
|           ? reportMeta.value.up3.name.toUpperCase()
 | |
|           : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
 | |
|       ],
 | |
|       [
 | |
|         'POSKO',
 | |
|         ':',
 | |
|         reportMeta.value.posko
 | |
|           ? reportMeta.value.posko.name.toUpperCase()
 | |
|           : 'Semua Posko'.toUpperCase()
 | |
|       ]
 | |
|     ],
 | |
|     styles: {
 | |
|       fontSize: 3,
 | |
|       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: 3,
 | |
|       cellPadding: 0.1,
 | |
|       textColor: [0, 0, 0],
 | |
|       fontStyle: 'bold',
 | |
|       halign: 'center'
 | |
|     },
 | |
|     theme: 'plain',
 | |
|     startY: 18
 | |
|   })
 | |
| 
 | |
|   autoTable(doc, {
 | |
|     head: [
 | |
|       [
 | |
|         'No',
 | |
|         'No Laporan',
 | |
|         'Tgl Lapor',
 | |
|         'Tgl Response',
 | |
|         'Tgl Recovery',
 | |
|         'Durasi Response Time',
 | |
|         'Durasi Recovery Time',
 | |
|         'Status',
 | |
|         'IDPEL/NO METER',
 | |
|         'Nama Pelapor',
 | |
|         'Alamat Pelapor',
 | |
|         'No Telp Pelapor',
 | |
|         'Keterangan Pelapor',
 | |
|         'Sumber Lapor',
 | |
|         'Posko'
 | |
|       ]
 | |
|     ],
 | |
|     body: data.value.map((item: any, i: any) => [
 | |
|       { content: ++i, styles: { halign: 'right' } },
 | |
|       item.no_laporan,
 | |
|       item.waktu_lapor,
 | |
|       item.waktu_response,
 | |
|       item.waktu_recovery,
 | |
|       parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
 | |
|       parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
 | |
|       item.status_akhir,
 | |
|       item.idpel_nometer,
 | |
|       item.nama_pelapor,
 | |
|       item.alamat_pelapor,
 | |
|       item.no_telp_pelapor,
 | |
|       item.keterangan_pelapor,
 | |
|       item.media,
 | |
|       item.nama_posko
 | |
|     ]),
 | |
|     styles: {
 | |
|       fontSize: 3,
 | |
|       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: 23
 | |
|   })
 | |
| 
 | |
|   autoTable(doc, {
 | |
|     head: [
 | |
|       [`${meta.dayTo}, ${meta.dateToFormat}`],
 | |
|       [
 | |
|         {
 | |
|           content: '(.........................................)',
 | |
|           styles: { minCellHeight: 8, valign: 'bottom' }
 | |
|         }
 | |
|       ]
 | |
|     ],
 | |
|     styles: {
 | |
|       fontSize: 3,
 | |
|       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, data: 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.value.uid
 | |
|         ? reportMeta.value.uid.name.toUpperCase()
 | |
|         : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
 | |
|     }`
 | |
|   )
 | |
|   setHeaderStyle(
 | |
|     worksheet,
 | |
|     3,
 | |
|     1,
 | |
|     `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
 | |
|       reportMeta.value.up3
 | |
|         ? reportMeta.value.up3.name.toUpperCase()
 | |
|         : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
 | |
|     }`
 | |
|   )
 | |
|   setHeaderStyle(
 | |
|     worksheet,
 | |
|     4,
 | |
|     1,
 | |
|     `POSKO : ${
 | |
|       reportMeta.value.posko
 | |
|         ? reportMeta.value.posko.name.toUpperCase()
 | |
|         : 'Semua Posko'.toUpperCase()
 | |
|     }`
 | |
|   )
 | |
| 
 | |
|   setHeaderStyle(worksheet, 7, 8, `${reportName}`.toUpperCase(), true)
 | |
|   setHeaderStyle(
 | |
|     worksheet,
 | |
|     8,
 | |
|     8,
 | |
|     `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
 | |
|     true
 | |
|   )
 | |
| 
 | |
|   worksheet.mergeCells('A1:F1')
 | |
|   worksheet.mergeCells('A2:F2')
 | |
|   worksheet.mergeCells('A3:F3')
 | |
|   worksheet.mergeCells('A4:F4')
 | |
|   worksheet.mergeCells('H7:J7')
 | |
|   worksheet.mergeCells('H8:J8')
 | |
| 
 | |
|   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 exportToDOCX = (reportMeta: any, data: any) => {
 | |
|   const meta = formatMetaData(reportMeta)
 | |
| 
 | |
|   const generateRows = () => {
 | |
|     return data.value.map((item: any, i: any) => {
 | |
|       return new TableRow({
 | |
|         children: [
 | |
|           { text: `${++i}`, field: 'no' },
 | |
|           { text: item.no_laporan, field: 'no_laporan' },
 | |
|           { text: item.waktu_lapor, field: 'waktu_lapor' },
 | |
|           { text: item.waktu_response, field: 'waktu_response' },
 | |
|           { text: item.waktu_recovery, field: 'waktu_recovery' },
 | |
|           {
 | |
|             text: parseInt(item.durasi_response_time)
 | |
|               ? formatWaktu(item.durasi_response_time)
 | |
|               : '-',
 | |
|             field: 'durasi_response_time'
 | |
|           },
 | |
|           {
 | |
|             text: parseInt(item.durasi_recovery_time)
 | |
|               ? formatWaktu(item.durasi_recovery_time)
 | |
|               : '-',
 | |
|             field: 'durasi_recovery_time'
 | |
|           },
 | |
|           { text: item.status_akhir, field: 'status_akhir' },
 | |
|           { text: item.idpel_nometer, field: 'idpel_nometer' },
 | |
|           { text: item.nama_pelapor, field: 'nama_pelapor' },
 | |
|           { text: item.alamat_pelapor, field: 'alamat_pelapor' },
 | |
|           { text: item.no_telp_pelapor, field: 'no_telp_pelapor' },
 | |
|           { text: item.keterangan_pelapor, field: 'keterangan_pelapor' },
 | |
|           { text: item.media, field: 'media' },
 | |
|           { text: item.nama_posko, field: 'posko' }
 | |
|         ].map(
 | |
|           (cell) =>
 | |
|             new TableCell({
 | |
|               children: [
 | |
|                 new Paragraph({
 | |
|                   children: [
 | |
|                     new TextRun({
 | |
|                       text: cell.text,
 | |
|                       size: 5
 | |
|                     })
 | |
|                   ]
 | |
|                 })
 | |
|               ],
 | |
|               verticalAlign: VerticalAlign.CENTER,
 | |
|               margins: { top: 0, bottom: 0, right: 0, left: 30 }
 | |
|             })
 | |
|         )
 | |
|       })
 | |
|     })
 | |
|   }
 | |
| 
 | |
|   const doc = new Document({
 | |
|     sections: [
 | |
|       {
 | |
|         properties: {
 | |
|           page: {
 | |
|             size: {
 | |
|               orientation: PageOrientation.LANDSCAPE
 | |
|             }
 | |
|           }
 | |
|         },
 | |
|         children: [
 | |
|           new Paragraph({
 | |
|             children: [
 | |
|               new TextRun({
 | |
|                 text: 'PT. PLN(Persero)',
 | |
|                 bold: true,
 | |
|                 size: 5
 | |
|               })
 | |
|             ]
 | |
|           }),
 | |
|           new Paragraph({
 | |
|             children: [
 | |
|               new TextRun({
 | |
|                 text: `UNIT INDUK : ${
 | |
|                   reportMeta.value.uid
 | |
|                     ? reportMeta.value.uid.name.toUpperCase()
 | |
|                     : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
 | |
|                 }`,
 | |
|                 bold: true,
 | |
|                 size: 5
 | |
|               })
 | |
|             ]
 | |
|           }),
 | |
|           new Paragraph({
 | |
|             children: [
 | |
|               new TextRun({
 | |
|                 text: `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
 | |
|                   reportMeta.value.up3
 | |
|                     ? reportMeta.value.up3.name.toUpperCase()
 | |
|                     : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
 | |
|                 }`,
 | |
|                 bold: true,
 | |
|                 size: 5
 | |
|               })
 | |
|             ]
 | |
|           }),
 | |
|           new Paragraph({
 | |
|             children: [
 | |
|               new TextRun({
 | |
|                 text: `POSKO : ${
 | |
|                   reportMeta.value.posko
 | |
|                     ? reportMeta.value.posko.name.toUpperCase()
 | |
|                     : 'Semua Posko'.toUpperCase()
 | |
|                 }`,
 | |
|                 bold: true,
 | |
|                 size: 5
 | |
|               })
 | |
|             ]
 | |
|           }),
 | |
|           new Paragraph({
 | |
|             children: [
 | |
|               new TextRun({
 | |
|                 text: '',
 | |
|                 bold: true,
 | |
|                 size: 5
 | |
|               })
 | |
|             ]
 | |
|           }),
 | |
|           new Paragraph({
 | |
|             alignment: AlignmentType.CENTER,
 | |
|             children: [
 | |
|               new TextRun({
 | |
|                 text: `${reportName}`.toUpperCase(),
 | |
|                 bold: true,
 | |
|                 size: 5
 | |
|               })
 | |
|             ]
 | |
|           }),
 | |
|           new Paragraph({
 | |
|             alignment: AlignmentType.CENTER,
 | |
|             children: [
 | |
|               new TextRun({
 | |
|                 text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
 | |
|                 bold: true,
 | |
|                 size: 5
 | |
|               })
 | |
|             ]
 | |
|           }),
 | |
|           new Paragraph({
 | |
|             children: [
 | |
|               new TextRun({
 | |
|                 text: '',
 | |
|                 bold: true,
 | |
|                 size: 5
 | |
|               })
 | |
|             ]
 | |
|           }),
 | |
|           new Table({
 | |
|             width: {
 | |
|               size: 13950,
 | |
|               type: WidthType.DXA
 | |
|             },
 | |
|             rows: [
 | |
|               new TableRow({
 | |
|                 children: [
 | |
|                   { text: 'No', field: 'no' },
 | |
|                   { text: 'No Laporan', field: 'no_laporan' },
 | |
|                   { text: 'Tgl Lapor', field: 'waktu_lapor' },
 | |
|                   { text: 'Tgl Response', field: 'waktu_response' },
 | |
|                   { text: 'Tgl Recovery', field: 'waktu_recovery' },
 | |
|                   { text: 'Durasi Response Time', field: 'durasi_response_time' },
 | |
|                   { text: 'Durasi Recovery Time', field: 'durasi_recovery_time' },
 | |
|                   { text: 'Status', field: 'status_akhir' },
 | |
|                   { text: 'IDPEL/NO METER', field: 'idpel_nometer' },
 | |
|                   { text: 'Nama Pelapor', field: 'nama_pelapor' },
 | |
|                   { text: 'Alamat Pelapor', field: 'alamat_pelapor' },
 | |
|                   { text: 'No Telp Pelapor', field: 'no_telp_pelapor' },
 | |
|                   { text: 'Keterangan Pelapor', field: 'keterangan_pelapor' },
 | |
|                   { text: 'Sumber Lapor', field: 'media' },
 | |
|                   { text: 'Posko', field: 'posko' }
 | |
|                 ].map(
 | |
|                   (header) =>
 | |
|                     new TableCell({
 | |
|                       children: [
 | |
|                         new Paragraph({
 | |
|                           alignment: AlignmentType.CENTER,
 | |
|                           children: [
 | |
|                             new TextRun({
 | |
|                               text: header.text,
 | |
|                               bold: true,
 | |
|                               size: 5,
 | |
|                               allCaps: true
 | |
|                             })
 | |
|                           ]
 | |
|                         })
 | |
|                       ],
 | |
|                       verticalAlign: VerticalAlign.CENTER
 | |
|                     })
 | |
|                 )
 | |
|               }),
 | |
|               ...generateRows()
 | |
|             ]
 | |
|           }),
 | |
|           new Paragraph({
 | |
|             children: [
 | |
|               new TextRun({
 | |
|                 text: '',
 | |
|                 bold: true,
 | |
|                 size: 5
 | |
|               })
 | |
|             ]
 | |
|           }),
 | |
|           new Paragraph({
 | |
|             alignment: AlignmentType.RIGHT,
 | |
|             children: [
 | |
|               new TextRun({
 | |
|                 text: `${meta.dayTo}, ${meta.dateToFormat}`,
 | |
|                 bold: true,
 | |
|                 size: 5
 | |
|               })
 | |
|             ]
 | |
|           }),
 | |
|           new Paragraph({
 | |
|             children: [
 | |
|               new TextRun({
 | |
|                 text: '',
 | |
|                 bold: true,
 | |
|                 size: 5
 | |
|               })
 | |
|             ]
 | |
|           }),
 | |
|           new Paragraph({
 | |
|             alignment: AlignmentType.RIGHT,
 | |
|             children: [
 | |
|               new TextRun({
 | |
|                 text: '(.........................................)',
 | |
|                 bold: true,
 | |
|                 size: 5
 | |
|               })
 | |
|             ]
 | |
|           })
 | |
|         ]
 | |
|       }
 | |
|     ]
 | |
|   })
 | |
| 
 | |
|   Packer.toBlob(doc).then((blob) => {
 | |
|     saveAs(blob, `Laporan ${reportName}.docx`)
 | |
|     console.log('Document created successfully')
 | |
|   })
 | |
| }
 | |
| 
 | |
| export { exportToPDF, exportToXLSX, exportToDOCX }
 |