278 lines
7.9 KiB
TypeScript
278 lines
7.9 KiB
TypeScript
export const exportToWord = (
|
|
rawMeta: any,
|
|
formattedMeta: any,
|
|
rawData: any,
|
|
reportName: String
|
|
) => {
|
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
|
const date = new Date().getDate()
|
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
|
const year = new Date().getFullYear()
|
|
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
|
|
}
|
|
|
|
const 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>
|
|
<tr>
|
|
<td><h6>JENIS LAPORAN</h6></td>
|
|
<td><h6>:</h6></td>
|
|
<td><h6>${rawMeta.jenisLaporan.name.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 rowspan="3">Nama Petugas</th>
|
|
<th>Total WO</th>
|
|
<th colspan="3">Total Pengaduan Yang Diselesaikan Secara Anomali</th>
|
|
<th colspan="3">% Pengaduan Diselesaikan Secara Anomali</th>
|
|
</tr>
|
|
<tr>
|
|
<th>(PLN Mobile, CC123, DLL)</th>
|
|
<th>PLN Mobile</th>
|
|
<th>CC 123</th>
|
|
<th>Total</th>
|
|
<th>PLN Mobile</th>
|
|
<th>CC 123</th>
|
|
<th>Total</th>
|
|
</tr>
|
|
<tr>
|
|
<th>a</th>
|
|
<th>b</th>
|
|
<th>c</th>
|
|
<th>d=b+c</th>
|
|
<th>e=b/a</th>
|
|
<th>f=c/a</th>
|
|
<th>g=e+f</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>${tbody}</tbody>
|
|
</table>
|
|
<br>
|
|
<footer>
|
|
<p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</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 day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
|
const date = new Date().getDate()
|
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
|
const year = new Date().getFullYear()
|
|
const filename = 'Laporan Detail ' + reportName + '.doc'
|
|
|
|
const 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: 5px;
|
|
}
|
|
|
|
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>
|
|
${rawData.field.map((item: any) => `<th>${item}</th>`).join('')}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${rawData.rows
|
|
.map((row: any) => {
|
|
return `<tr>${row.map((item: any) => `<td>${item.content || item}</td>`).join('')}</tr>`
|
|
})
|
|
.join('')}
|
|
</tbody>
|
|
</table>
|
|
<br>
|
|
<footer>
|
|
<p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</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)
|
|
}
|