create export doc in ctt & kwh

2024-04-05 20:42:15 +07:00 · 2024-04-05 20:42:15 +07:00 · a4d1d9574d
commit a4d1d9574d
parent 4aeb2958f7
3 changed files with 356 additions and 3 deletions
--- a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
+++ b/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
@ -939,7 +939,9 @@ import {
  exportToPDF,
  exportToXLSX,
  exportDetailToPDF,
-  exportDetailToXLSX
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
 } from '@/report/Ctt/CTT_LaporanCttKwhPeriksa'

 const client = apolloClient()
@ -1013,10 +1015,11 @@ const calculateCustomSummary = (options: any) => {

 const onExporting = (e: any) => {
  if (e.format === 'pdf') {
-    exportToPDF(reportMeta.value, data.value, true)
+    exportToPDF(reportMeta.value, data.value)
  } else if (e.format === 'xlsx') {
    exportToXLSX(reportMeta.value, e)
  } else {
+    exportToDOCX(reportMeta.value, data.value)
  }
 }

@ -1026,6 +1029,7 @@ const onExportingDetail = (e: any) => {
  } else if (e.format === 'xlsx') {
    exportDetailToXLSX(reportMeta.value, e)
  } else {
+    exportDetailToDOCX(reportMeta.value, dataSub.value)
  }
 }

--- a/src/report/Ctt/CTT_LaporanCttKwhPeriksa.ts
+++ b/src/report/Ctt/CTT_LaporanCttKwhPeriksa.ts
@ -18,6 +18,7 @@ import autoTable from 'jspdf-autotable'
 import { Workbook } from 'exceljs'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber } from '@/utils/numbers'
+import { exportToWord, exportDetailToWord } from './doc/CTT_LaporanCttKwhPeriksa'

 const reportName = 'Laporan CTT & KWH Periksa'
 const fontSize = 5
@ -90,6 +91,7 @@ const formatMetaData = (reportMeta: any) => {

 const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
  const data = formatData(rawData)
+  console.log(data)
  const meta = formatMetaData(reportMeta)
  const doc = new jsPDF({
    orientation: 'landscape'
@ -522,4 +524,21 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
  e.cancel = true
 }

-export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  exportToWord(reportMeta, meta, formatData(rawData), reportName)
+}
+
+const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  exportDetailToWord(meta, rawData, reportName)
+}
+
+export {
+  exportToPDF,
+  exportToXLSX,
+  exportDetailToPDF,
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
+}
--- a/src/report/Ctt/doc/CTT_LaporanCttKwhPeriksa.ts
+++ b/src/report/Ctt/doc/CTT_LaporanCttKwhPeriksa.ts
@ -0,0 +1,330 @@
+export const exportToWord = (
+  rawMeta: any,
+  formattedMeta: any,
+  rawData: any,
+  reportName: String
+) => {
+  const filename = 'Laporan ' + reportName + '.doc'
+
+  let tbody = ''
+
+  for (let index = 0; index < rawData.length; index++) {
+    const element = rawData[index]
+
+    let column = `<tr>`
+    let styleTotal = ''
+
+    for (let i = 0; i < element.length; i++) {
+      const content = element[i]
+      const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
+
+      if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
+        styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
+      }
+
+      i === 0
+        ? (column += `<th ${styleTotal} ${colSpan} align="left">${content.content || content}</th>`)
+        : (column += `<td ${styleTotal}>${content}</td>`)
+    }
+
+    column += `</tr>`
+    tbody += column
+  }
+
+  let preHtml = `
+    <html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'>
+    <head>
+      <meta charset='utf-8'>
+      <title>${reportName}</title>
+      <style type="text/css" media="print">
+        @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+        }
+    
+        div.Section1 {
+          page:Section1;
+        }
+
+        table.meta tr td {
+          text-align: left;
+        }
+
+        table.main {
+          border-collapse: collapse;
+          width: 100%;
+          text-transform: uppercase;
+          font-size: 8px;
+        }
+
+        table.main thead tr {
+          background-color: #c0c0c0;
+        }
+      </style>
+    </head>
+    <body>
+  `
+
+  const body = `
+    <div class=Section1>
+      <header>
+        <h6>PT. PLN(Persero)</h6>
+
+        <table class="meta">
+          <tr>
+            <td><h6>UNIT INDUK</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${
+              rawMeta.uid
+                ? rawMeta.uid.name.toUpperCase()
+                : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+            }</h6></td>
+          </tr>
+          <tr>
+            <td><h6>UNIT PELAKSANA PELAYANAN PELANGGAN</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${
+              rawMeta.up3
+                ? rawMeta.up3.name.toUpperCase()
+                : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+            }</h6></td>
+          </tr>
+          <tr>
+            <td><h6>UNIT LAYANAN PELANGGAN</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${
+              rawMeta.ulp
+                ? rawMeta.ulp.name.toUpperCase()
+                : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+            }</h6></td>
+          </tr>
+        </table>
+
+        <br>
+        <br>
+        
+        <table width="100%">
+          <tr>
+            <th><h6>${reportName.toUpperCase()}</h6></th>
+          </tr>
+          <tr>
+            <th><h6>${`PERIODE TANGGAL : ${formattedMeta.dateFromFormat} SD TGL ${formattedMeta.dateToFormat}`}</h6></th>
+          </tr>
+        </table>
+      </header>
+
+      <br>
+
+      <table border="1" class="main">
+        <thead>
+          <tr>
+            <th rowspan="3">Nama Unit</th>
+            <th colspan="4">Total WO</th>
+            <th colspan="2">Rekomendasi Sistem</th>
+            <th>DLPD</th>
+            <th>Histori P2LT</th>
+          </tr>
+          <tr>
+            <th>CC 123</th>
+            <th>PLN Mobile</th>
+            <th>Comcen</th>
+            <th>Total</th>
+            <th>Mendatangkan Petugas</th>
+            <th>Diberikan ke Pelanggan</th>
+            <th rowspan="2">g</th>
+            <th rowspan="2">h</th>
+          </tr>
+          <tr>
+            <th>a</th>
+            <th>b</th>
+            <th>c</th>
+            <th>d=a+b+c</th>
+            <th>e</th>
+            <th>f</th>
+          </tr>
+        </thead>
+        <tbody>${tbody}</tbody>
+      </table>
+      <br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${formattedMeta.dayTo}, ${formattedMeta.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer>
+    </div>
+  `
+
+  const postHtml = '</body></html>'
+  const html = preHtml + body + postHtml
+  const url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html)
+  const downloadLink = document.createElement('a')
+
+  document.body.appendChild(downloadLink)
+  downloadLink.href = url
+  downloadLink.download = filename
+  downloadLink.click()
+  document.body.removeChild(downloadLink)
+}
+
+export const exportDetailToWord = (formattedMeta: any, rawData: any, reportName: String) => {
+  const filename = 'Laporan Detail ' + reportName + '.doc'
+
+  let preHtml = `
+    <html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'>
+    <head>
+      <meta charset='utf-8'>
+      <title>Daftar Detail ${reportName}</title>
+      <style type="text/css" media="print">
+        @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:1.0cm 1.0cm 1.0cm 1.0cm;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+        }
+    
+        div.Section1 {
+          page:Section1;
+        }
+
+        table.meta tr td {
+          text-align: left;
+        }
+
+        table.main {
+          border-collapse: collapse;
+          width: 100%;
+          text-transform: uppercase;
+          font-size: 6px;
+        }
+
+        table.main thead tr {
+          background-color: #c0c0c0;
+        }
+      </style>
+    </head>
+    <body>
+  `
+
+  const body = `
+    <div class=Section1>
+      <header>
+        <h6>PT. PLN(Persero)</h6>
+        <br>
+        <table width="100%">
+          <tr>
+            <th><h6>${'DAFTAR DETAIL ' + reportName.toUpperCase()}</h6></th>
+          </tr>
+          <tr>
+            <th><h6>${`PERIODE TANGGAL : ${formattedMeta.dateFromFormat} SD TGL ${formattedMeta.dateToFormat}`}</h6></th>
+          </tr>
+        </table>
+      </header>
+
+      <br>
+
+      <table border="1" class="main">
+        <thead>
+          <tr>
+            <th>No</th>
+            <th>UIW/D</th>
+            <th>UP3</th>
+            <th>Rayon</th>
+            <th>IDPEL</th>
+            <th>NOMETER</th>
+            <th>No. Telepon</th>
+            <th>Nama</th>
+            <th>Alamat</th>
+            <th>Sumber Lapor</th>
+            <th>No Laporan</th>
+            <th>08</th>
+            <th>70</th>
+            <th>71</th>
+            <th>41</th>
+            <th>44</th>
+            <th>45</th>
+            <th>46</th>
+            <th>37</th>
+            <th>47</th>
+            <th>Jenis DLPD</th>
+            <th>Keterangan DLPD</th>
+            <th>Bulan Tahun DLPD</th>
+            <th>No. Agenda P2TL</th>
+            <th>Tgl Mohon P2T</th>
+            <th>Tgl Sah P2TL</th>
+            <th>Rekomendasi Sistem</th>
+            <th>Tgl/Jam Lapor</th>
+            <th>Petugas Regu</th>
+            <th>User VCC</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${
+            rawData
+              ? rawData
+                  .map(
+                    (item: any, i: any) => `
+                      <tr>
+                        <td>${i + 1}</td>
+                        <td>${item.nama_uid}</td>
+                        <td>${item.nama_up3}</td>
+                        <td>${item.nama_ulp}</td>
+                        <td>${item.id_pelanggan}</td>
+                        <td>${item.nomormeter}</td>
+                        <td>${item.no_telp_pelapor}</td>
+                        <td>${item.nama_pelapor}</td>
+                        <td>${item.alamat_pelapor}</td>
+                        <td>${item.media}</td>
+                        <td>${item.no_laporan}</td>
+                        <td>${item.r08}</td>
+                        <td>${item.r70}</td>
+                        <td>${item.r71}</td>
+                        <td>${item.r41}</td>
+                        <td>${item.r44}</td>
+                        <td>${item.r45}</td>
+                        <td>${item.r46}</td>
+                        <td>${item.r37}</td>
+                        <td>${item.r47}</td>
+                        <td>${item.jenis_dlpd}</td>
+                        <td>${item.keterangan_dlpd}</td>
+                        <td>${item.blth_dlpd}</td>
+                        <td>${item.no_agenda_p2tl}</td>
+                        <td>${item.tgl_mohon_p2tl}</td>
+                        <td>${item.tgl_sah_p2tl}</td>
+                        <td>${item.rekomendasi_sistem}</td>
+                        <td>${item.waktu_lapor}</td>
+                        <td>${item.petugas_regu}</td>
+                        <td>${item.user_vcc}</td>
+                      </tr>
+                    `
+                  )
+                  .join('')
+              : ''
+          }
+        </tbody>
+      </table>
+      <br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${formattedMeta.dayTo}, ${formattedMeta.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer>
+    </div>
+  `
+
+  const postHtml = '</body></html>'
+  const html = preHtml + body + postHtml
+  const url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html)
+  const downloadLink = document.createElement('a')
+
+  document.body.appendChild(downloadLink)
+  downloadLink.href = url
+  downloadLink.download = filename
+  downloadLink.click()
+  document.body.removeChild(downloadLink)
+}