defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: create docx export in daftar gangguan dialihkan ke posko lain

Browse Source
This commit is contained in:
kur0nek-o 2024-03-20 15:29:55 +07:00
parent dbc6d3265b
commit 6f7043818e
3 changed files with 385 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
package-lock.json generated
View File

@ -25,6 +25,7 @@
"axios": "^1.6.7", "axios": "^1.6.7",
"devextreme": "23.2.4", "devextreme": "23.2.4",
"devextreme-vue": "23.2.4", "devextreme-vue": "23.2.4",
"docx": "^8.5.0",
"dotenv": "^16.3.1", "dotenv": "^16.3.1",
"encrypt-storage": "^2.12.22", "encrypt-storage": "^2.12.22",
"exceljs": "^4.4.0", "exceljs": "^4.4.0",
@ -4032,6 +4033,46 @@
"node": ">=6.0.0" "node": ">=6.0.0"
} }
}, },
"node_modules/docx": {
"version": "8.5.0",
"resolved": "https://registry.npmjs.org/docx/-/docx-8.5.0.tgz",
"integrity": "sha512-4SbcbedPXTciySXiSnNNLuJXpvxFe5nqivbiEHXyL8P/w0wx2uW7YXNjnYgjW0e2e6vy+L/tMISU/oAiXCl57Q==",
"dependencies": {
"@types/node": "^20.3.1",
"jszip": "^3.10.1",
"nanoid": "^5.0.4",
"xml": "^1.0.1",
"xml-js": "^1.6.8"
},
"engines": {
"node": ">=10"
}
},
"node_modules/docx/node_modules/@types/node": {
"version": "20.11.30",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.30.tgz",
"integrity": "sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==",
"dependencies": {
"undici-types": "~5.26.4"
}
},
"node_modules/docx/node_modules/nanoid": {
"version": "5.0.6",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.6.tgz",
"integrity": "sha512-rRq0eMHoGZxlvaFOUdK1Ev83Bd1IgzzR+WJ3IbDJ7QOSdAxYjlurSPqFs9s4lJg29RT6nPwizFtJhQS6V5xgiA==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"bin": {
"nanoid": "bin/nanoid.js"
},
"engines": {
"node": "^18 || >=20"
}
},
"node_modules/domexception": { "node_modules/domexception": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz", "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
@ -7414,6 +7455,11 @@
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
}, },
"node_modules/sax": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",
"integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA=="
},
"node_modules/saxes": { "node_modules/saxes": {
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz", "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
@ -8098,8 +8144,7 @@
"node_modules/undici-types": { "node_modules/undici-types": {
"version": "5.26.5", "version": "5.26.5",
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
"integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
"devOptional": true
}, },
"node_modules/universalify": { "node_modules/universalify": {
"version": "0.2.0", "version": "0.2.0",
@ -9747,6 +9792,22 @@
} }
} }
}, },
"node_modules/xml": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
"integrity": "sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw=="
},
"node_modules/xml-js": {
"version": "1.6.11",
"resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz",
"integrity": "sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==",
"dependencies": {
"sax": "^1.2.4"
},
"bin": {
"xml-js": "bin/cli.js"
}
},
"node_modules/xml-name-validator": { "node_modules/xml-name-validator": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz", "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",

1
package.json
View File

@ -31,6 +31,7 @@
"axios": "^1.6.7", "axios": "^1.6.7",
"devextreme": "23.2.4", "devextreme": "23.2.4",
"devextreme-vue": "23.2.4", "devextreme-vue": "23.2.4",
"docx": "^8.5.0",
"dotenv": "^16.3.1", "dotenv": "^16.3.1",
"encrypt-storage": "^2.12.22", "encrypt-storage": "^2.12.22",
"exceljs": "^4.4.0", "exceljs": "^4.4.0",

379
src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
View File

@ -365,6 +365,20 @@ import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql' import { queries } from '@/utils/api/api.graphql'
import { dummyData } from '@/utils/dummy' import { dummyData } from '@/utils/dummy'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' 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 position = { of: '#dataTable' }
const showIndicator = ref(true) 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 onExporting = (e: any) => {
const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : '' const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
@ -566,7 +639,7 @@ const onExporting = (e: any) => {
.then(() => { .then(() => {
console.log('pdf berhasil disimpan') console.log('pdf berhasil disimpan')
}) })
} else { } else if (e.format === 'xlsx') {
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Daftar Gangguan Dialihkan Ke Posko Lain') const worksheet = workbook.addWorksheet('Daftar Gangguan Dialihkan Ke Posko Lain')
@ -633,65 +706,255 @@ const onExporting = (e: any) => {
}) })
e.cancel = true e.cancel = true
} } else {
} const generateRows = () => {
return data.value.map((item, i) => {
const filterData = (params: any) => { return new TableRow({
const { posko, uid, up3 } = params children: [
const dateValue = params.periode.split(' s/d ') { text: `${++i}`, field: 'no_laporan' },
{ text: item.no_laporan, field: 'no_laporan' },
refetch({ { text: item.pembuat_laporan, field: 'pembuat_laporan' },
dateFrom: dateValue[0] { text: item.waktu_lapor, field: 'waktu_lapor' },
? dateValue[0].split('-').reverse().join('-') { text: item.waktu_dialihkan, field: 'waktu_dialihkan' },
: new Date().toISOString().slice(0, 10), { text: item.waktu_response, field: 'waktu_response' },
dateTo: dateValue[1] { text: item.waktu_recovery, field: 'waktu_recovery' },
? dateValue[1].split('-').reverse().join('-') {
: new Date().toISOString().slice(0, 10), text: parseInt(item.durasi_response_time)
posko: posko ? posko.id : 0, ? formatWaktu(item.durasi_response_time)
idUid: uid ? uid.id : 0, : '-',
idUp3: up3 ? up3.id : 0 field: 'durasi_response_time'
}) },
onResult((queryResult) => { {
if (queryResult.data != undefined) { text: parseInt(item.durasi_recovery_time)
data.value = queryResult.data.daftarGangguanDialihkanKePoskoLain ? 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 const doc = new Document({
console.log(queryResult.data) sections: [
console.log(queryResult.loading) {
console.log(queryResult.networkStatus) properties: {
}) page: {
onError((error) => { size: {
console.log(error) orientation: PageOrientation.LANDSCAPE
}) }
} }
const { onResult, onError, loading, refetch } = useQuery( },
queries.gangguan.daftar.dataDialihkanKePoskoLain, children: [
{ new Paragraph({
dateFrom: new Date().toISOString().slice(0, 10), children: [
dateTo: new Date().toISOString().slice(0, 10), new TextRun({
posko: 0, text: 'PT. PLN(Persero)',
idUid: 0, bold: true,
idUp3: 0 size: 4
} })
) ]
const onSelectionChanged = ({ selectedRowsData }: any) => { }),
const data = selectedRowsData[0] new Paragraph({
dataDetail.value = data children: [
} new TextRun({
const showData = () => (showDetail.value = true) 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() Packer.toBlob(doc).then((blob) => {
const reportMeta = ref({ console.log(blob)
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' }, saveAs(blob, 'Laporan Daftar Gangguan Dialihkan Ke Posko Lain.docx')
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' }, console.log('Document created successfully')
posko: { id: 0, name: 'Semua Posko' }, })
periode: ''
})
onMounted(() => {
if (import.meta.env.DEV) {
data.value = dummyData.gangguan.daftar.dialihkanKePoskoLain
} }
}) }
</script> </script>