Fix showDetail function in RGangguan_ALL, RGangguan_CTTM, and RGangguan_BerdasarMedia

This commit is contained in:
Dede Fuji Abdul 2024-04-02 13:39:21 +07:00
parent 96f0593a74
commit 232ac14df1
8 changed files with 647 additions and 11 deletions

View File

@ -4,7 +4,7 @@ import { ref, watch } from 'vue'
import VueTailwindDatepicker from 'vue-tailwind-datepicker'
const dateValue = ref(
`${new Date().getDay().toString().length == 1 ? `0${new Date().getDay()}` : new Date().getDay()}-${new Date().getMonth().toString().length == 1 ? `0${new Date().getMonth()}` : new Date().getMonth()}-${new Date().getFullYear()} s/d ${new Date().getDay().toString().length == 1 ? `0${new Date().getDay()}` : new Date().getDay()}-${new Date().getMonth().toString().length == 1 ? `0${new Date().getMonth()}` : new Date().getMonth()}-${new Date().getFullYear()}`
`${new Date().getDay().toString().length == 1 ? `0${new Date().getDay()}` : new Date().getDay()}-${(new Date().getMonth() + 1).toString().length == 1 ? `0${new Date().getMonth() + 1}` : new Date().getMonth() + 1}-${new Date().getFullYear()} s/d ${new Date().getDay().toString().length == 1 ? `0${new Date().getDay()}` : new Date().getDay()}-${(new Date().getMonth() + 1).toString().length == 1 ? `0${new Date().getMonth() + 1}` : new Date().getMonth() + 1}-${new Date().getFullYear()}`
)
const formatter = ref({
date: 'DD-MM-YYYY',

View File

@ -19,7 +19,7 @@
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxGrouping auto-expand-all="false" expand-mode="rowClick" />
<DxGrouping :auto-expand-all="false" expand-mode="rowClick" />
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -31,7 +31,32 @@
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn
alignment="center"
data-field=""
caption="Semua Unit"
css-class="custom-table-column"
cell-template="formatText"
:group-index="0"
/>
<DxColumn
alignment="center"
data-field="id_uid"
caption="UID"
css-class="custom-table-column"
cell-template="formatText"
:group-index="1"
:calculate-display-value="(dataRow: any) => dataRow.nama_uid"
/>
<DxColumn
alignment="center"
data-field="id_up3"
caption="UP3"
css-class="custom-table-column"
cell-template="formatText"
:group-index="2"
:calculate-display-value="(dataRow: any) => dataRow.nama_up3"
/>
<DxColumn
alignment="center"
data-field="nama_ulp"
@ -79,7 +104,7 @@
alignment="center"
data-field="wo_total"
data-type="number"
caption="d=b+c"
caption="d=a+b+c"
css-class="custom-table-column"
cell-template="formatNumber"
/>
@ -153,8 +178,528 @@
}}
</p>
</template>
<DxSummary :calculate-custom-summary="calculateCustomSummary">
<DxGroupItem
column="wo_cc123"
name="wo_cc123"
summaryType="custom"
:customize-text="(e: any) => formatNumber(e.value)"
:show-in-group-footer="false"
:align-by-column="true"
css-class="!text-right"
/>
<DxGroupItem
column="wo_pln_mobile"
name="wo_pln_mobile"
summaryType="custom"
:customize-text="(e: any) => formatNumber(e.value)"
:show-in-group-footer="false"
:align-by-column="true"
css-class="!text-right"
/>
<DxGroupItem
column="wo_comcen"
name="wo_comcen"
summaryType="custom"
:customize-text="(e: any) => formatNumber(e.value)"
:show-in-group-footer="false"
:align-by-column="true"
css-class="!text-right"
/>
<DxGroupItem
column="wo_total"
name="wo_total"
summary-type="custom"
:customize-text="(e: any) => formatNumber(e.value)"
:show-in-group-footer="false"
:align-by-column="true"
css-class="!text-right"
/>
<DxGroupItem
column="rekomendasi_mendatangkan_petugas"
summaryType="sum"
:customize-text="(e: any) => formatNumber(e.value)"
:show-in-group-footer="false"
:align-by-column="true"
css-class="!text-right"
/>
<DxGroupItem
column="rekomendasi_diberikan_ke_pelanggan"
summaryType="sum"
:customize-text="(e: any) => formatNumber(e.value)"
:show-in-group-footer="false"
:align-by-column="true"
css-class="!text-right"
/>
<DxGroupItem
column="dpld"
summaryType="sum"
:customize-text="(e: any) => formatNumber(e.value)"
:show-in-group-footer="false"
:align-by-column="true"
css-class="!text-right"
/>
<DxGroupItem
column="history_p2lt"
summaryType="sum"
:customize-text="(e: any) => formatNumber(e.value)"
:show-in-group-footer="false"
:align-by-column="true"
css-class="!text-right"
/>
</DxSummary>
</DxDataGrid>
</div>
<DetailDialog
:open="dialogDetail"
title="Detail CTT & KWH Periksa"
@on-close="closedialogDetail"
:full-width="true"
>
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]"
:data-source="dataSub"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onDataSubSelectionChanged"
:column-width="100"
@exporting="onExportingDetail"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxSelection mode="single" />
<DxPaging :page-size="20" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[20, 50, 100]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<!-- -->
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculate-display-value="(item: any) => dataSub.findIndex((i: any) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="UIW/D"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="UP3"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Rayon"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="IDPEL"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="NOMETER"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="No. Telpon"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Nama"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Alamat"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Sumber Lapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="No Laporan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption=""
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="08"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="70"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="71"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="41"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="44"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="45"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="46"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="37"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="47"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Jenis DLPD"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Keterangan DLPD"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Bulan Tahun DLPD"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="No. Agenda P2TL"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Tgl Mohon P2T"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Tgl Sah P2TL"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="Rekomendasi Sistem"
caption="Tgl/Jam Lapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Petugas Regu"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="User VCC"
css-class="custom-table-column"
cell-template="formatText"
/>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatTime="{ data }">
<p>
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
</DxDataGrid>
</div>
</div>
<div class="w-full mb-4 lg:w-[30%] lg:float-right">
<div class="p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">UIW/D:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">UP3:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Rayon:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">NOMETER:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">No. Telpon:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Nama:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Sumber Lapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">08:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">70:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">71:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">41:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">44:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">45:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">46:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">37:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">47:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Jenis DLPD:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan DLPD:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Bulan Tahun DLPD:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">No. Agenda P2TL:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Mohon P2T:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Sah P2TL:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Lapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Petugas Regu:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">User VCC:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
</div>
</div>
</DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template>
@ -165,12 +710,15 @@ import {
DxColumn,
DxColumnFixing,
DxExport,
DxGroupItem,
DxGrouping,
DxLoadPanel,
DxPager,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
DxSelection,
DxSummary
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -185,6 +733,9 @@ import { apolloClient, queries, requestGraphQl } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import InputText from '@/components/InputText.vue'
const client = apolloClient()
provideApolloClient(client)
@ -201,6 +752,46 @@ const closedialogDetail = () => (dialogDetail.value = false)
const loadingData = ref(false)
const loadingSubData = ref(false)
let cc123 = 0
let plnMobile = 0
let comcen = 0
const calculateCustomSummary = (options: any) => {
if (options.name === 'wo_cc123') {
if (options.summaryProcess === 'calculate') {
cc123 += options.value
} else if (options.summaryProcess === 'finalize') {
options.totalValue = cc123
}
}
if (options.name === 'wo_pln_mobile') {
if (options.summaryProcess === 'calculate') {
plnMobile += options.value
} else if (options.summaryProcess === 'finalize') {
options.totalValue = plnMobile
}
}
if (options.name === 'wo_comcen') {
if (options.summaryProcess === 'calculate') {
comcen += options.value
} else if (options.summaryProcess === 'finalize') {
options.totalValue = comcen
}
}
if (options.name === 'wo_total') {
if (options.summaryProcess === 'start') {
plnMobile = 0
cc123 = 0
comcen = 0
} else if (options.summaryProcess === 'calculate') {
} else if (options.summaryProcess === 'finalize') {
options.totalValue = plnMobile + cc123 + comcen
}
}
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -230,6 +821,8 @@ const onExporting = (e: any) => {
}
}
const onExportingDetail = (e: any) => {}
const resetData = () => {
data.value = []
dataSub.value = []

View File

@ -1325,7 +1325,7 @@ const showDetail = () => {
if (agreeToShowDialog.value) {
dataSub.value = []
dataSubSelected.value = null
// getDetail()
getDetail()
}
}

View File

@ -562,7 +562,7 @@ const showDetail = () => {
dataSub.value = []
dataSubSelected.value = null
if (date.value != '') {
// getDetail()
getDetail()
}
}

View File

@ -544,7 +544,7 @@ const showDetail = () => {
clearSelection()
dataSubSelected.value = null
if (monthSelected.value != null) {
// getDetail()
getDetail()
}
}

View File

@ -75,6 +75,15 @@
name="UIDGroup"
:group-index="2"
/>
<DxColumn
alignment="center"
data-field="nama_up3"
caption="UP3"
css-class="custom-table-column"
cell-template="formatText"
name="UP3Group"
:group-index="3"
/>
<DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
<DxColumn
alignment="center"
@ -1174,6 +1183,7 @@ const setMonth = (month: any) => {
const getDetail = async () => {
loadingSubData.value = true
const { jenisTransaksi } = filters.value
const dateValue = filters.value.periode.split(' s/d ')
const ref = dataSelected.value
const compDate = dateValue[0].split('-').reverse().join('-').split('-')
@ -1185,11 +1195,35 @@ const getDetail = async () => {
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: ref?.id_posko ? ref?.id_posko : 0,
posko: ref?.id_ulp ? ref?.id_ulp : 0,
idUid: ref?.id_uid ? ref?.id_uid : 0,
idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
bulan: monthSelected.value,
tahun: parseInt(compDate[0])
tahun: parseInt(compDate[0]),
is_transaksi_individual:
jenisTransaksi.length == 4 || jenisTransaksi.length == 0
? 0
: jenisTransaksi.includes('Koreksi Transaksi Individual')
? 1
: 2,
is_cleansing_transaksi_tm:
jenisTransaksi.length == 4 || jenisTransaksi.length == 0
? 0
: jenisTransaksi.includes('Cleansing Traksaksi TM')
? 1
: 2,
is_koreksi_transaksi_tm:
jenisTransaksi.length == 4 || jenisTransaksi.length == 0
? 0
: jenisTransaksi.includes('Koreksi Transaksi TM')
? 1
: 2,
is_koreksi_gangguan_dan_anev:
jenisTransaksi.length == 4 || jenisTransaksi.length == 0
? 0
: jenisTransaksi.includes('Koreksi Kode Gangguan dan Anev')
? 1
: 2
}
loadingSubData.value = true

View File

@ -399,7 +399,8 @@ const getDetail = async () => {
: new Date().toISOString().slice(0, 10),
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
idUid: selected?.id_uid ? selected?.id_uid : 0,
idUp3: selected?.id_up3 ? selected?.id_up3 : 0
idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
isSelesai: 0
}
loadingSubData.value = true

View File

@ -1090,6 +1090,10 @@ export const queries = {
$posko: Int!
$idUid: Int!
$idUp3: Int!
$is_transaksi_individual: Int!
$is_cleansing_transaksi_tm: Int!
$is_koreksi_transaksi_tm: Int!
$is_koreksi_gangguan_dan_anev: Int!
) {
detailGangguanKoreksiTransaksiIndividu(
dateFrom: $dateFrom
@ -1097,6 +1101,10 @@ export const queries = {
posko: $posko
idUid: $idUid
idUp3: $idUp3
is_transaksi_individual: $is_transaksi_individual
is_cleansing_transaksi_tm: $is_cleansing_transaksi_tm
is_koreksi_transaksi_tm: $is_koreksi_transaksi_tm
is_koreksi_gangguan_dan_anev: $is_koreksi_gangguan_dan_anev
) {
id
no_laporan