feat: create docx export in daftar gangguan dialihkan ke posko lain
This commit is contained in:
kur0nek-o
@ -365,6 +365,20 @@ import { useQuery } from '@vue/apollo-composable'
|
||||
import { queries } from '@/utils/api/api.graphql'
|
||||
import { dummyData } from '@/utils/dummy'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import {
|
||||
Document,
|
||||
AlignmentType,
|
||||
Packer,
|
||||
Paragraph,
|
||||
Table,
|
||||
TableCell,
|
||||
TableRow,
|
||||
VerticalAlign,
|
||||
TextRun,
|
||||
WidthType,
|
||||
TableBorders,
|
||||
PageOrientation
|
||||
} from 'docx'
|
||||
|
||||
const position = { of: '#dataTable' }
|
||||
const showIndicator = ref(true)
|
||||
@ -393,6 +407,65 @@ const setHeaderStyle = (
|
||||
}
|
||||
}
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const { posko, uid, up3 } = params
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
|
||||
refetch({
|
||||
dateFrom: dateValue[0]
|
||||
? dateValue[0].split('-').reverse().join('-')
|
||||
: new Date().toISOString().slice(0, 10),
|
||||
dateTo: dateValue[1]
|
||||
? dateValue[1].split('-').reverse().join('-')
|
||||
: new Date().toISOString().slice(0, 10),
|
||||
posko: posko ? posko.id : 0,
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
})
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.daftarGangguanDialihkanKePoskoLain
|
||||
}
|
||||
|
||||
reportMeta.value = filters.value
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.gangguan.daftar.dataDialihkanKePoskoLain,
|
||||
{
|
||||
dateFrom: new Date().toISOString().slice(0, 10),
|
||||
dateTo: new Date().toISOString().slice(0, 10),
|
||||
posko: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
}
|
||||
)
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
dataDetail.value = data
|
||||
}
|
||||
const showData = () => (showDetail.value = true)
|
||||
|
||||
const filters = ref()
|
||||
const reportMeta = ref({
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
posko: { id: 0, name: 'Semua Posko' },
|
||||
periode: ''
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (import.meta.env.DEV) {
|
||||
data.value = dummyData.gangguan.daftar.dialihkanKePoskoLain
|
||||
}
|
||||
})
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
|
||||
|
||||
@ -566,7 +639,7 @@ const onExporting = (e: any) => {
|
||||
.then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
} else {
|
||||
} else if (e.format === 'xlsx') {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Daftar Gangguan Dialihkan Ke Posko Lain')
|
||||
|
||||
@ -633,65 +706,255 @@ const onExporting = (e: any) => {
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const { posko, uid, up3 } = params
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
|
||||
refetch({
|
||||
dateFrom: dateValue[0]
|
||||
? dateValue[0].split('-').reverse().join('-')
|
||||
: new Date().toISOString().slice(0, 10),
|
||||
dateTo: dateValue[1]
|
||||
? dateValue[1].split('-').reverse().join('-')
|
||||
: new Date().toISOString().slice(0, 10),
|
||||
posko: posko ? posko.id : 0,
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
})
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.daftarGangguanDialihkanKePoskoLain
|
||||
} else {
|
||||
const generateRows = () => {
|
||||
return data.value.map((item, i) => {
|
||||
return new TableRow({
|
||||
children: [
|
||||
{ text: `${++i}`, field: 'no_laporan' },
|
||||
{ text: item.no_laporan, field: 'no_laporan' },
|
||||
{ text: item.pembuat_laporan, field: 'pembuat_laporan' },
|
||||
{ text: item.waktu_lapor, field: 'waktu_lapor' },
|
||||
{ text: item.waktu_dialihkan, field: 'waktu_dialihkan' },
|
||||
{ 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.nama_posko_lama, field: 'nama_posko_lama' },
|
||||
{ text: item.nama_posko_baru, field: 'nama_posko_baru' },
|
||||
{ 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.posko, field: 'posko' }
|
||||
].map(
|
||||
(cell) =>
|
||||
new TableCell({
|
||||
children: [
|
||||
new Paragraph({
|
||||
children: [
|
||||
new TextRun({
|
||||
text: cell.text,
|
||||
size: 4
|
||||
})
|
||||
]
|
||||
})
|
||||
],
|
||||
verticalAlign: VerticalAlign.CENTER
|
||||
})
|
||||
)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
reportMeta.value = filters.value
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.gangguan.daftar.dataDialihkanKePoskoLain,
|
||||
{
|
||||
dateFrom: new Date().toISOString().slice(0, 10),
|
||||
dateTo: new Date().toISOString().slice(0, 10),
|
||||
posko: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
}
|
||||
)
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
dataDetail.value = data
|
||||
}
|
||||
const showData = () => (showDetail.value = true)
|
||||
const doc = new Document({
|
||||
sections: [
|
||||
{
|
||||
properties: {
|
||||
page: {
|
||||
size: {
|
||||
orientation: PageOrientation.LANDSCAPE
|
||||
}
|
||||
}
|
||||
},
|
||||
children: [
|
||||
new Paragraph({
|
||||
children: [
|
||||
new TextRun({
|
||||
text: 'PT. PLN(Persero)',
|
||||
bold: true,
|
||||
size: 4
|
||||
})
|
||||
]
|
||||
}),
|
||||
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: 4
|
||||
})
|
||||
]
|
||||
}),
|
||||
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: 4
|
||||
})
|
||||
]
|
||||
}),
|
||||
new Paragraph({
|
||||
children: [
|
||||
new TextRun({
|
||||
text: `POSKO : ${
|
||||
reportMeta.value.posko
|
||||
? reportMeta.value.posko.name.toUpperCase()
|
||||
: 'Semua Posko'.toUpperCase()
|
||||
}`,
|
||||
bold: true,
|
||||
size: 4
|
||||
})
|
||||
]
|
||||
}),
|
||||
new Paragraph({
|
||||
children: [
|
||||
new TextRun({
|
||||
text: '',
|
||||
bold: true,
|
||||
size: 4
|
||||
})
|
||||
]
|
||||
}),
|
||||
new Paragraph({
|
||||
alignment: AlignmentType.CENTER,
|
||||
children: [
|
||||
new TextRun({
|
||||
text: 'DAFTAR GANGGUAN DIALIHKAN KE POSKO LAIN',
|
||||
bold: true,
|
||||
size: 4
|
||||
})
|
||||
]
|
||||
}),
|
||||
new Paragraph({
|
||||
alignment: AlignmentType.CENTER,
|
||||
children: [
|
||||
new TextRun({
|
||||
text: `PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`,
|
||||
bold: true,
|
||||
size: 4
|
||||
})
|
||||
]
|
||||
}),
|
||||
new Paragraph({
|
||||
children: [
|
||||
new TextRun({
|
||||
text: '',
|
||||
bold: true,
|
||||
size: 4
|
||||
})
|
||||
]
|
||||
}),
|
||||
new Table({
|
||||
width: {
|
||||
size: 13950,
|
||||
type: WidthType.DXA
|
||||
},
|
||||
rows: [
|
||||
new TableRow({
|
||||
children: [
|
||||
{ text: 'No', field: 'no' },
|
||||
{ text: 'No Laporan', field: 'no_laporan' },
|
||||
{ text: 'Pembuat Laporan', field: 'pembuat_laporan' },
|
||||
{ text: 'Tgl Lapor', field: 'waktu_lapor' },
|
||||
{ text: 'Tgl Dialihkan', field: 'waktu_dialihkan' },
|
||||
{ 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: 'Posko Awal', field: 'nama_posko_lama' },
|
||||
{ text: 'Posko Tujuan', field: 'nama_posko_baru' },
|
||||
{ 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: 4,
|
||||
allCaps: true
|
||||
})
|
||||
]
|
||||
})
|
||||
],
|
||||
verticalAlign: VerticalAlign.CENTER
|
||||
})
|
||||
)
|
||||
}),
|
||||
...generateRows()
|
||||
]
|
||||
}),
|
||||
new Paragraph({
|
||||
children: [
|
||||
new TextRun({
|
||||
text: '',
|
||||
bold: true,
|
||||
size: 4
|
||||
})
|
||||
]
|
||||
}),
|
||||
new Paragraph({
|
||||
alignment: AlignmentType.RIGHT,
|
||||
children: [
|
||||
new TextRun({
|
||||
text: `${dayTo}, ${dateToFormat}`,
|
||||
bold: true,
|
||||
size: 4
|
||||
})
|
||||
]
|
||||
}),
|
||||
new Paragraph({
|
||||
children: [
|
||||
new TextRun({
|
||||
text: '',
|
||||
bold: true,
|
||||
size: 4
|
||||
})
|
||||
]
|
||||
}),
|
||||
new Paragraph({
|
||||
alignment: AlignmentType.RIGHT,
|
||||
children: [
|
||||
new TextRun({
|
||||
text: '(.........................................)',
|
||||
bold: true,
|
||||
size: 4
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
const filters = ref()
|
||||
const reportMeta = ref({
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
posko: { id: 0, name: 'Semua Posko' },
|
||||
periode: ''
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (import.meta.env.DEV) {
|
||||
data.value = dummyData.gangguan.daftar.dialihkanKePoskoLain
|
||||
Packer.toBlob(doc).then((blob) => {
|
||||
console.log(blob)
|
||||
saveAs(blob, 'Laporan Daftar Gangguan Dialihkan Ke Posko Lain.docx')
|
||||
console.log('Document created successfully')
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user