Merge branch 'dev-defuj' of https://github.com/defuj/eis into dev-eko
This commit is contained in:
Eko Haryadi
@ -1,20 +1,21 @@
|
||||
<template>
|
||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
||||
<Filters @run-report="() => exportToPDF(reportMeta, data, true)" @reset-form="data = []"
|
||||
@run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
||||
<Type3 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
<div>
|
||||
<DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onDataSelectionChanged"
|
||||
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||
<DxGrouping :auto-expand-all="false" :context-menu-enabled="true" expand-mode="rowClick" />
|
||||
<DxDataGrid @cell-click="onCellClicked" ref="dataGridRef" :allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||
@selection-changed="onDataSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget">
|
||||
<DxPaging :enabled="false" />
|
||||
<DxGrouping :auto-expand-all="false" :context-menu-enabled="true" />
|
||||
<DxSelection mode="single" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
|
||||
:show-pane="showPane" :shading="shading" v-model:visible="loadingData" :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<!-- <DxColumnFixing :enabled="true" /> -->
|
||||
|
||||
<DxColumn alignment="center" :width="200" data-field="nama_ulp" caption="Nama Unit"
|
||||
css-class="custom-table-column" />
|
||||
@ -83,10 +84,6 @@
|
||||
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_dispatch"
|
||||
summary-type="min" css-class="!text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
|
||||
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_diatas_sla_dispatch"
|
||||
summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_dibawah_sla_dispatch"
|
||||
summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="avg_durasi_response"
|
||||
summary-type="avg" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_response"
|
||||
@ -122,12 +119,12 @@
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
@ -146,7 +143,7 @@
|
||||
<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="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||
@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"
|
||||
@ -157,21 +154,21 @@
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
|
||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number" caption="No"
|
||||
cell-template="formatNumber" />
|
||||
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number"
|
||||
caption="No" cell-template="formatNumber" />
|
||||
<DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||
css-class="custom-table-column" cell-template="formatText" />
|
||||
<DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
||||
css-class="custom-table-column" cell-template="formatText" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Dalam Proses Bidang" :allow-resizing="false"
|
||||
css-class="custom-table-column" cell-template="formatText" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Selesai Bidang Unit" :allow-resizing="false"
|
||||
css-class="custom-table-column" cell-template="formatText" />
|
||||
<DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Dalam Proses Bidang"
|
||||
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
|
||||
<DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Selesai Bidang Unit"
|
||||
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
|
||||
<DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
||||
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
|
||||
<DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
||||
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Status" :allow-resizing="false"
|
||||
<DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status" :allow-resizing="false"
|
||||
css-class="custom-table-column" cell-template="formatTime" />
|
||||
<DxColumn :width="150" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
||||
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
|
||||
@ -183,12 +180,12 @@
|
||||
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
|
||||
<DxColumn :width="200" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Rayon" :allow-resizing="false"
|
||||
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Rayon" :allow-resizing="false"
|
||||
css-class="custom-table-column" cell-template="formatText" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Uraian" :allow-resizing="false"
|
||||
css-class="custom-table-column" cell-template="formatText" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Respon Pelanggan" :allow-resizing="false"
|
||||
<DxColumn :width="150" alignment="center" data-field="uraian" caption="Uraian" :allow-resizing="false"
|
||||
css-class="custom-table-column" cell-template="formatText" />
|
||||
<DxColumn :width="150" alignment="center" data-field="respon_pelanggan" caption="Respon Pelanggan"
|
||||
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
|
||||
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
@ -203,7 +200,7 @@
|
||||
</template>
|
||||
|
||||
<template #formatTime="{ data }">
|
||||
<p>
|
||||
<p class="text-right cursor-pointer">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
@ -225,28 +222,28 @@
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Dalam Proses Bidang:</h3>
|
||||
<InputText :readonly="true" :value="dataSubSelected?.dalam_proses_bidang" class-name="flex-1" />
|
||||
<InputText :readonly="true" :value="dataSubSelected?.waktu_response" 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">Selesai Bidang Unit:</h3>
|
||||
<InputText :readonly="true" :value="dataSubSelected?.selesai_bidang_unit" class-name="flex-1" />
|
||||
<InputText :readonly="true" :value="dataSubSelected?.waktu_recovery" 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">Durasi Response Time:</h3>
|
||||
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
|
||||
? formatWaktu(dataSubSelected?.durasi_response_time)
|
||||
: '-'
|
||||
" class-name="flex-1" />
|
||||
? formatWaktu(dataSubSelected?.durasi_response_time)
|
||||
: '-'
|
||||
" 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">Durasi Recovery Time:</h3>
|
||||
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
|
||||
? formatWaktu(dataSubSelected?.durasi_recovery_time)
|
||||
: '-'
|
||||
" class-name="flex-1" />
|
||||
? formatWaktu(dataSubSelected?.durasi_recovery_time)
|
||||
: '-'
|
||||
" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
@ -281,7 +278,7 @@
|
||||
|
||||
<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="dataSubSelected?.rayon" class-name="flex-1" />
|
||||
<InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
@ -291,8 +288,7 @@
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Response Pelanggan:</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataSubSelected?.response_pelanggan"
|
||||
class-name="flex-1" />
|
||||
<InputText :readonly="true" type="textarea" :value="dataSubSelected?.respon_pelanggan" class-name="flex-1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -320,17 +316,12 @@ import {
|
||||
DxGroupItem,
|
||||
DxGrouping
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { queries } from '@/utils/api/api.graphql'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import { exportToPDF, exportDetailToPDF } from '@/report/Keluhan/Rekap/RKeluhan_ALL'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -346,12 +337,87 @@ const dialogDetail = ref(false)
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const agreeToShowDialog = ref(false)
|
||||
const progressSelected = ref(0)
|
||||
const groupIndex = ref(0)
|
||||
const groupDialog = ref(false)
|
||||
const groupData = ref<any>(null)
|
||||
const reportMeta = ref({
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
periode: ''
|
||||
})
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const onCellClicked = (e: any) => {
|
||||
console.log('cell clicked', e)
|
||||
// console.log('group cell clicked', e.column.caption)
|
||||
// console.log('value', e.values[e.row.groupIndex])
|
||||
if (e.rowType == 'group') {
|
||||
groupDialog.value = true
|
||||
groupIndex.value = e.row.groupIndex
|
||||
setAgreementDialog(e.column.caption)
|
||||
if (e.row.groupIndex == 0) {
|
||||
//
|
||||
} else if (e.row.groupIndex == 1) {
|
||||
if (e.row.isExpanded) {
|
||||
const data = e.data.items[0].collapsedItems[0].items[0]
|
||||
groupData.value = data
|
||||
} else {
|
||||
const data = e.data.collapsedItems[0].items[0].items[0]
|
||||
groupData.value = data
|
||||
}
|
||||
} else if (e.row.groupIndex == 2) {
|
||||
if (e.row.isExpanded) {
|
||||
const data = e.data.items[0].collapsedItems[0]
|
||||
groupData.value = data
|
||||
} else {
|
||||
const data = e.data.collapsedItems[0].items[0]
|
||||
groupData.value = data
|
||||
}
|
||||
} else if (e.row.groupIndex == 3) {
|
||||
if (e.row.isExpanded) {
|
||||
const data = e.data.items[0]
|
||||
groupData.value = data
|
||||
} else {
|
||||
const data = e.data.collapsedItems[0]
|
||||
groupData.value = data
|
||||
}
|
||||
}
|
||||
showDetail()
|
||||
} else {
|
||||
groupDialog.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const setAgreementDialog = (column: string) => {
|
||||
if (column == 'Total' || column == 'Selesai' || column == 'In Progress') {
|
||||
agreeToShowDialog.value = true
|
||||
if (column == 'Total') {
|
||||
progressSelected.value = 0
|
||||
} else if (column == 'Selesai') {
|
||||
progressSelected.value = 1
|
||||
} else {
|
||||
progressSelected.value = 2
|
||||
}
|
||||
} else {
|
||||
agreeToShowDialog.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const resetData = () => {
|
||||
data.value = []
|
||||
dataSub.value = []
|
||||
dataSelected.value = null
|
||||
dataSubSelected.value = null
|
||||
}
|
||||
|
||||
const filterData = async (params: any) => {
|
||||
resetData()
|
||||
const { ulp, uid, up3 } = params
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
|
||||
const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.rekapKeluhanAll, {
|
||||
const query = {
|
||||
dateFrom: dateValue[0]
|
||||
? dateValue[0].split('-').reverse().join('-')
|
||||
: new Date().toISOString().slice(0, 10),
|
||||
@ -361,55 +427,109 @@ const filterData = (params: any) => {
|
||||
idUlp: ulp ? ulp.id : 0,
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
})
|
||||
}
|
||||
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.rekapitulasiKeluhanAll
|
||||
}
|
||||
})
|
||||
loadingData.value = true
|
||||
await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAll, query)
|
||||
.then((result) => {
|
||||
if (result.data.data != undefined) {
|
||||
data.value = result.data.data.rekapitulasiKeluhanAll
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
|
||||
watch(loading, (value) => {
|
||||
loadingData.value = value
|
||||
})
|
||||
reportMeta.value = filters.value
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
.finally(() => {
|
||||
loadingData.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const getDetail = async () => {
|
||||
loadingSubData.value = true
|
||||
const dateValue = filters.value.periode.split(' s/d ')
|
||||
const selected = dataSelected.value
|
||||
|
||||
const query = {
|
||||
var query = {
|
||||
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),
|
||||
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
|
||||
idUid: selected?.id_uid ? selected?.id_uid : 0,
|
||||
idUp3: selected?.id_up3 ? selected?.id_up3 : 0
|
||||
idUlp: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0,
|
||||
namaRegional: '',
|
||||
isSelesai: progressSelected.value,
|
||||
media: '',
|
||||
tanggal: '',
|
||||
namaIssuetype: '',
|
||||
namaSubissuetype: ''
|
||||
}
|
||||
|
||||
const result = useQuery(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
|
||||
|
||||
result.onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
dataSub.value = queryResult.data.detailKeluhanAll
|
||||
if (groupDialog.value) {
|
||||
if (groupIndex.value == 0) {
|
||||
query = {
|
||||
...query,
|
||||
isSelesai: progressSelected.value
|
||||
}
|
||||
} else if (groupIndex.value == 1) {
|
||||
query = {
|
||||
...query,
|
||||
namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
|
||||
}
|
||||
} else if (groupIndex.value == 2) {
|
||||
query = {
|
||||
...query,
|
||||
idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
|
||||
namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
|
||||
}
|
||||
} else if (groupIndex.value == 3) {
|
||||
query = {
|
||||
...query,
|
||||
idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
|
||||
idUp3: groupData.value?.id_up3 ? groupData.value?.id_up3 : 0,
|
||||
namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
query = {
|
||||
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),
|
||||
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
|
||||
idUid: selected?.id_uid ? selected?.id_uid : 0,
|
||||
idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
|
||||
namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
|
||||
media: selected?.media ? selected?.media : '',
|
||||
isSelesai: progressSelected.value,
|
||||
tanggal: '',
|
||||
namaIssuetype: '',
|
||||
namaSubissuetype: ''
|
||||
}
|
||||
}
|
||||
|
||||
result.onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
|
||||
watch(result.loading, (value) => {
|
||||
loadingSubData.value = value
|
||||
})
|
||||
loadingSubData.value = true
|
||||
await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
|
||||
.then((result) => {
|
||||
if (result.data.data != undefined) {
|
||||
dataSub.value = result.data.data.detailKeluhanAll
|
||||
} else {
|
||||
dataSub.value = []
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
.finally(() => {
|
||||
loadingSubData.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||
@ -422,38 +542,27 @@ const clearSelection = () => {
|
||||
}
|
||||
const showDetail = () => {
|
||||
clearSelection()
|
||||
dataSub.value = []
|
||||
dataSubSelected.value = null
|
||||
dialogDetail.value = true
|
||||
getDetail()
|
||||
if (agreeToShowDialog.value) {
|
||||
dataSub.value = []
|
||||
dataSubSelected.value = null
|
||||
dialogDetail.value = true
|
||||
getDetail()
|
||||
}
|
||||
}
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
}
|
||||
}
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
const onExportingDetail = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
exportDetailToPDF(reportMeta.value, dataSub.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
<DxColumn
|
||||
:width="100"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
caption="NO"
|
||||
css-class="custom-table-column"
|
||||
data-field="no"
|
||||
@ -102,7 +102,7 @@
|
||||
</DxSummary>
|
||||
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="!text-right cursor-pointer">
|
||||
<p class="!text-right cursor-pointer" @click="setDate(data.column.caption)">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
@ -114,7 +114,7 @@
|
||||
</template>
|
||||
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
<p class="text-left cursor-pointer" @click="setDate(data.column.caption)">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
@ -174,7 +174,7 @@
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
||||
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="formatNumber"
|
||||
@ -489,7 +489,7 @@ import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { queries } from '@/utils/api/api.graphql'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
@ -508,43 +508,61 @@ const dialogDetail = ref(false)
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const date = ref('2023-02-04')
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const setDate = (value: any) => {
|
||||
if (isNumber(value)) {
|
||||
const tanggal = value < 10 ? `0${value}` : value
|
||||
const dateValue = filters.value.periode.split(' s/d ')
|
||||
const dateYear = dateValue[0].split('-').reverse().join('-').slice(0, -2) + tanggal
|
||||
console.log('date', dateYear)
|
||||
date.value = dateYear
|
||||
} else {
|
||||
date.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
const resetData = () => {
|
||||
data.value = []
|
||||
dataSub.value = []
|
||||
}
|
||||
|
||||
const filterData = async (params: any) => {
|
||||
resetData()
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
const { ulp, uid, up3 } = params
|
||||
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.keluhan.rekap.rekapKeluhanBerdasarkanMedia,
|
||||
{
|
||||
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),
|
||||
idUlp: ulp ? ulp.id : 0,
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0,
|
||||
media: ''
|
||||
}
|
||||
)
|
||||
const query = {
|
||||
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),
|
||||
idUlp: ulp ? ulp.id : 0,
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0,
|
||||
media: ''
|
||||
}
|
||||
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.rekapitulasiKeluhanBerdasarkanMedia
|
||||
}
|
||||
})
|
||||
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
|
||||
watch(loading, (value) => {
|
||||
loadingData.value = value
|
||||
})
|
||||
loadingData.value = true
|
||||
await requestGraphQl(queries.keluhan.rekap.rekapKeluhanBerdasarkanMedia, query)
|
||||
.then((result) => {
|
||||
if (result.data.data != undefined) {
|
||||
data.value = result.data.data.rekapitulasiKeluhanBerdasarkanMedia
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
.finally(() => {
|
||||
loadingData.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const getDetail = () => {
|
||||
const getDetail = async () => {
|
||||
const dateValue = filters.value.periode.split(' s/d ')
|
||||
const selected = dataSelected.value
|
||||
|
||||
@ -557,27 +575,29 @@ const getDetail = () => {
|
||||
: 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,
|
||||
media: selected?.media ? selected?.media : '',
|
||||
tanggal: date.value,
|
||||
namaIssuetype: '',
|
||||
namaSubissuetype: ''
|
||||
}
|
||||
|
||||
const { onResult, onError, loading } = useQuery(
|
||||
queries.keluhan.rekap.rekapKeluhanAllDetail,
|
||||
query
|
||||
)
|
||||
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
dataSub.value = queryResult.data.detailKeluhanAll
|
||||
}
|
||||
})
|
||||
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
|
||||
watch(loading, (value) => {
|
||||
loadingSubData.value = value
|
||||
})
|
||||
loadingSubData.value = true
|
||||
await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
|
||||
.then((result) => {
|
||||
if (result.data.data != undefined) {
|
||||
dataSub.value = result.data.data.detailKeluhanAll
|
||||
} else {
|
||||
dataSub.value = []
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
.finally(() => {
|
||||
loadingSubData.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||
@ -588,8 +608,10 @@ const clearSelection = () => {
|
||||
const showDetail = () => {
|
||||
clearSelection()
|
||||
dataSubSelected.value = null
|
||||
dialogDetail.value = true
|
||||
getDetail()
|
||||
if (date.value != '') {
|
||||
dialogDetail.value = true
|
||||
getDetail()
|
||||
}
|
||||
}
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
|
||||
@ -49,11 +49,10 @@
|
||||
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="100"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
data-field="no"
|
||||
data-field="number"
|
||||
caption="No"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
@ -61,11 +60,21 @@
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="nama_uid"
|
||||
caption="Nama UID"
|
||||
caption="UID"
|
||||
css-class="custom-table-column"
|
||||
:group-index="0"
|
||||
name="NamaUID"
|
||||
v-if="filters.groupBy"
|
||||
v-if="isGroupBy"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Seluruh Distribusi"
|
||||
css-class="custom-table-column"
|
||||
:group-index="0"
|
||||
name="Distribusi"
|
||||
v-else
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
@ -83,7 +92,7 @@
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
cell-template="formatNumberLaporanTotal"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
@ -93,7 +102,7 @@
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
cell-template="formatNumberLaporanJmlSelesai"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
@ -113,7 +122,7 @@
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
cell-template="formatNumberLaporanJmlBelumSelesai"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
@ -251,8 +260,8 @@
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="Total"
|
||||
show-in-column="no"
|
||||
css-class="text-white !text-right"
|
||||
show-in-column="Fungsi Bidang"
|
||||
css-class="text-white !text-left"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
@ -365,12 +374,48 @@
|
||||
</DxSummary>
|
||||
|
||||
<template #formatTime="{ data }">
|
||||
<p class="cursor-pointer !text-right">
|
||||
<p class="cursor-pointer !text-right" @click="setAgreementDialog(false, 0)">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
<p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumberLaporanTotal="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumberLaporanJmlSelesai="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumberLaporanJmlBelumSelesai="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
@ -382,7 +427,7 @@
|
||||
</template>
|
||||
|
||||
<template #formatText="{ data }">
|
||||
<p class="cursor-pointer !text-left">
|
||||
<p class="cursor-pointer !text-left" @click="setAgreementDialog(false, 0)">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
@ -442,7 +487,7 @@
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
||||
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="formatNumber"
|
||||
@ -764,7 +809,7 @@ import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { queries } from '@/utils/api/api.graphql'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, isNumber, formatPercentage } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
@ -783,42 +828,68 @@ const dialogDetail = ref(false)
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const agreeToShowDialog = ref(false)
|
||||
const progressSelected = ref(0)
|
||||
const isGroupBy = ref(false)
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const setAgreementDialog = (status: boolean, progress: number) => {
|
||||
agreeToShowDialog.value = status
|
||||
progressSelected.value = progress
|
||||
}
|
||||
|
||||
const resetData = () => {
|
||||
data.value = []
|
||||
dataSub.value = []
|
||||
}
|
||||
|
||||
const filterData = async (params: any) => {
|
||||
resetData()
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
const { ulp, uid, up3 } = params
|
||||
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.keluhan.rekap.keluhanPenyelesaianPerFungsiBIidang,
|
||||
{
|
||||
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),
|
||||
idUlp: ulp ? ulp.id : 0,
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
}
|
||||
)
|
||||
const query = {
|
||||
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),
|
||||
idUlp: ulp ? ulp.id : 0,
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
}
|
||||
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
|
||||
}
|
||||
})
|
||||
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
|
||||
watch(loading, (value) => {
|
||||
loadingData.value = value
|
||||
})
|
||||
loadingData.value = true
|
||||
await requestGraphQl(queries.keluhan.rekap.keluhanPenyelesaianPerFungsiBIidang, query)
|
||||
.then((result) => {
|
||||
if (result.data.data != undefined) {
|
||||
isGroupBy.value = params.groupBy
|
||||
if (filters.value.groupBy) {
|
||||
data.value = [...result.data.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang]
|
||||
.sort((a, b) => a.nama_uid.localeCompare(b.nama_uid))
|
||||
.map((item, index) => {
|
||||
return { ...item, number: index + 1 }
|
||||
})
|
||||
} else {
|
||||
data.value = [...result.data.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang].map(
|
||||
(item, index) => {
|
||||
return { ...item, number: index + 1 }
|
||||
}
|
||||
)
|
||||
}
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
.finally(() => {
|
||||
loadingData.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const getDetail = () => {
|
||||
const getDetail = async () => {
|
||||
const dateValue = filters.value.periode.split(' s/d ')
|
||||
const selected = dataSelected.value
|
||||
|
||||
@ -831,27 +902,30 @@ const getDetail = () => {
|
||||
: 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,
|
||||
namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
|
||||
isSelesai: progressSelected.value,
|
||||
media: '',
|
||||
tanggal: '',
|
||||
namaIssuetype: '',
|
||||
namaSubissuetype: ''
|
||||
}
|
||||
|
||||
const { onResult, onError, loading } = useQuery(
|
||||
queries.keluhan.rekap.rekapKeluhanAllDetail,
|
||||
query
|
||||
)
|
||||
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
dataSub.value = queryResult.data.detailKeluhanAll
|
||||
}
|
||||
})
|
||||
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
|
||||
watch(loading, (value) => {
|
||||
loadingSubData.value = value
|
||||
})
|
||||
loadingSubData.value = true
|
||||
await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
|
||||
.then((result) => {
|
||||
if (result.data.data != undefined) {
|
||||
dataSub.value = result.data.data.detailKeluhanAll
|
||||
} else {
|
||||
dataSub.value = []
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
.finally(() => {
|
||||
loadingSubData.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||
@ -862,8 +936,10 @@ const clearSelection = () => {
|
||||
const showDetail = () => {
|
||||
clearSelection()
|
||||
dataSubSelected.value = null
|
||||
dialogDetail.value = true
|
||||
getDetail()
|
||||
if (agreeToShowDialog.value) {
|
||||
dialogDetail.value = true
|
||||
getDetail()
|
||||
}
|
||||
}
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="100"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
data-type="number"
|
||||
data-field="number"
|
||||
@ -67,8 +67,8 @@
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="tipe_keluhan"
|
||||
caption="Jenis Keluhan"
|
||||
data-field="grouping_tipe_keluhan"
|
||||
caption=""
|
||||
name="tipeKeluhan"
|
||||
css-class="custom-table-column"
|
||||
:group-index="0"
|
||||
@ -81,7 +81,7 @@
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
cell-template="formatNumberLaporanTotal"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
@ -91,7 +91,7 @@
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
cell-template="formatNumberLaporanJmlSelesai"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
@ -111,7 +111,7 @@
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
cell-template="formatNumberLaporanJmlBelumSelesai"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
@ -247,17 +247,16 @@
|
||||
|
||||
<DxSummary>
|
||||
<DxGroupItem
|
||||
summary-type="sum"
|
||||
display-format="Total"
|
||||
show-in-column="no"
|
||||
css-class="text-white !text-right"
|
||||
show-in-column="Jenis Keluhan"
|
||||
css-class="!text-left"
|
||||
:show-in-group-footer="true"
|
||||
/>
|
||||
<DxGroupItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total"
|
||||
css-class="text-white !text-right"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
@ -265,7 +264,7 @@
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_selesai"
|
||||
css-class="text-white !text-right"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
@ -273,7 +272,7 @@
|
||||
summary-type="avg"
|
||||
display-format="{0}%"
|
||||
column="persen_selesai"
|
||||
css-class="text-white !text-right"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => formatPercentage(e.value)"
|
||||
/>
|
||||
@ -281,7 +280,7 @@
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_inproses"
|
||||
css-class="text-white !text-right"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
@ -289,7 +288,7 @@
|
||||
summary-type="avg"
|
||||
display-format="{0}%"
|
||||
column="persen_inproses"
|
||||
css-class="text-white !text-right"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => formatPercentage(e.value)"
|
||||
/>
|
||||
@ -297,7 +296,7 @@
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_durasi_response"
|
||||
css-class="text-white !text-right"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
@ -305,7 +304,7 @@
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
column="avg_durasi_response"
|
||||
css-class="text-white !text-right"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
@ -313,7 +312,7 @@
|
||||
summary-type="min"
|
||||
display-format="{0}"
|
||||
column="min_durasi_response"
|
||||
css-class="text-white !text-right"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
@ -321,7 +320,7 @@
|
||||
summary-type="max"
|
||||
display-format="{0}"
|
||||
column="max_durasi_response"
|
||||
css-class="text-white !text-right"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
@ -329,7 +328,7 @@
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_diatas_sla_response"
|
||||
css-class="text-white !text-right"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
@ -337,7 +336,7 @@
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_dibawah_sla_response"
|
||||
css-class="text-white !text-right"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
@ -345,7 +344,7 @@
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_durasi_recovery"
|
||||
css-class="text-white !text-right"
|
||||
css-class="text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
@ -353,7 +352,7 @@
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
column="avg_durasi_recovery"
|
||||
css-class="text-white !text-right"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
@ -361,7 +360,7 @@
|
||||
summary-type="min"
|
||||
display-format="{0}"
|
||||
column="min_durasi_recovery"
|
||||
css-class="text-white !text-right"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
@ -369,7 +368,7 @@
|
||||
summary-type="max"
|
||||
display-format="{0}"
|
||||
column="max_durasi_recovery"
|
||||
css-class="text-white !text-right"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
@ -377,7 +376,7 @@
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_diatas_sla_recovery"
|
||||
css-class="text-white !text-right"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
@ -385,16 +384,15 @@
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_dibawah_sla_recovery"
|
||||
css-class="text-white !text-right"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="Total"
|
||||
show-in-column="no"
|
||||
css-class="text-white !text-right"
|
||||
show-in-column="Jenis Keluhan"
|
||||
css-class="text-white !text-left"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
@ -518,13 +516,13 @@
|
||||
</DxSummary>
|
||||
|
||||
<template #formatTime="{ data }">
|
||||
<p class="cursor-pointer !text-right">
|
||||
<p class="cursor-pointer !text-right" @click="setAgreementDialog(false, 0)">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
<p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
@ -535,7 +533,43 @@
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatText="{ data }">
|
||||
<template #formatNumberLaporanTotal="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumberLaporanJmlSelesai="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumberLaporanJmlBelumSelesai="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatText="{ data }" @click="setAgreementDialog(false, 0)">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
@ -596,7 +630,7 @@
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
||||
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="formatNumber"
|
||||
@ -620,7 +654,7 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="waktu_response"
|
||||
caption="Dalam Proses Bidang"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
@ -629,7 +663,7 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="waktu_recovery"
|
||||
caption="Selesai Bidang Unit"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
@ -656,7 +690,7 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="status_akhir"
|
||||
caption="Status"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
@ -710,7 +744,7 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="nama_ulp"
|
||||
caption="Rayon"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
@ -719,7 +753,7 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="uraian"
|
||||
caption="Uraian"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
@ -728,7 +762,7 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="respon_pelanggan"
|
||||
caption="Respon Pelanggan"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
@ -743,7 +777,13 @@
|
||||
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
{{ data.text }}
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
@ -772,7 +812,7 @@
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Dalam Proses Bidang:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="dataSubSelected?.dalam_proses_bidang"
|
||||
:value="dataSubSelected?.waktu_response"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
@ -781,7 +821,7 @@
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Selesai Bidang Unit:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="dataSubSelected?.selesai_bidang_unit"
|
||||
:value="dataSubSelected?.waktu_recovery"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
@ -857,7 +897,7 @@
|
||||
|
||||
<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="dataSubSelected?.rayon" class-name="flex-1" />
|
||||
<InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
@ -875,7 +915,7 @@
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataSubSelected?.response_pelanggan"
|
||||
:value="dataSubSelected?.respon_pelanggan"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
@ -913,7 +953,7 @@ import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { queries } from '@/utils/api/api.graphql'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, isNumber, formatPercentage } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
@ -932,49 +972,61 @@ const dialogDetail = ref(false)
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const agreeToShowDialog = ref(false)
|
||||
const progressSelected = ref(0)
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const setAgreementDialog = (status: boolean, progress: number) => {
|
||||
agreeToShowDialog.value = status
|
||||
progressSelected.value = progress
|
||||
}
|
||||
|
||||
const resetData = () => {
|
||||
data.value = []
|
||||
dataSub.value = []
|
||||
}
|
||||
|
||||
const filterData = async (params: any) => {
|
||||
resetData()
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
const { ulp, uid, up3 } = params
|
||||
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.keluhan.rekap.keluhanPerJenisKeluhan,
|
||||
{
|
||||
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),
|
||||
idUlp: ulp ? ulp.id : 0,
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
}
|
||||
)
|
||||
const query = {
|
||||
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),
|
||||
idUlp: ulp ? ulp.id : 0,
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
}
|
||||
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = [...queryResult.data.rekapitulasiKeluhanPerJenisKeluhan]
|
||||
.sort((a: any, b: any) => a.tipe_keluhan.localeCompare(b.tipe_keluhan))
|
||||
.map((item: any, index: number) => {
|
||||
return {
|
||||
...item,
|
||||
number: index + 1
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
|
||||
watch(loading, (value) => {
|
||||
loadingData.value = value
|
||||
})
|
||||
loadingData.value = true
|
||||
await requestGraphQl(queries.keluhan.rekap.keluhanPerJenisKeluhan, query)
|
||||
.then((result) => {
|
||||
if (result.data.data != undefined) {
|
||||
data.value = [...result.data.data.rekapitulasiKeluhanPerJenisKeluhan]
|
||||
.sort((a: any, b: any) => a.tipe_keluhan.localeCompare(b.tipe_keluhan))
|
||||
.map((item: any, index: number) => {
|
||||
return {
|
||||
...item,
|
||||
number: index + 1
|
||||
}
|
||||
})
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
.finally(() => {
|
||||
loadingData.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const getDetail = () => {
|
||||
const getDetail = async () => {
|
||||
const dateValue = filters.value.periode.split(' s/d ')
|
||||
const selected = dataSelected.value
|
||||
|
||||
@ -987,27 +1039,30 @@ const getDetail = () => {
|
||||
: 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,
|
||||
namaRegional: '',
|
||||
isSelesai: progressSelected.value,
|
||||
media: '',
|
||||
tanggal: '',
|
||||
namaIssuetype: '',
|
||||
namaSubissuetype: selected?.tipe_keluhan ? selected?.tipe_keluhan : ''
|
||||
}
|
||||
|
||||
const { onResult, onError, loading } = useQuery(
|
||||
queries.keluhan.rekap.rekapKeluhanAllDetail,
|
||||
query
|
||||
)
|
||||
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
dataSub.value = queryResult.data.detailKeluhanAll
|
||||
}
|
||||
})
|
||||
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
|
||||
watch(loading, (value) => {
|
||||
loadingSubData.value = value
|
||||
})
|
||||
loadingSubData.value = true
|
||||
await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
|
||||
.then((result) => {
|
||||
if (result.data.data != undefined) {
|
||||
dataSub.value = result.data.data.detailKeluhanAll
|
||||
} else {
|
||||
dataSub.value = []
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
.finally(() => {
|
||||
loadingSubData.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||
@ -1018,8 +1073,10 @@ const clearSelection = () => {
|
||||
const showDetail = () => {
|
||||
clearSelection()
|
||||
dataSubSelected.value = null
|
||||
dialogDetail.value = true
|
||||
getDetail()
|
||||
if (agreeToShowDialog.value) {
|
||||
dialogDetail.value = true
|
||||
getDetail()
|
||||
}
|
||||
}
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
|
||||
@ -49,23 +49,33 @@
|
||||
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="100"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<!-- <DxColumn
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="nama_uid"
|
||||
caption="Nama UID"
|
||||
caption="UID"
|
||||
css-class="custom-table-column"
|
||||
:group-index="0"
|
||||
name="NamaUID"
|
||||
v-if="filters.groupBy"
|
||||
/> -->
|
||||
v-if="isGroupBy"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Seluruh Distribusi"
|
||||
css-class="custom-table-column"
|
||||
:group-index="0"
|
||||
name="Distribusi"
|
||||
v-else
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
@ -82,7 +92,7 @@
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
cell-template="formatNumberLaporanTotal"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
@ -92,7 +102,7 @@
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
cell-template="formatNumberLaporanJmlSelesai"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
@ -112,7 +122,7 @@
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
cell-template="formatNumberLaporanJmlBelumSelesai"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
@ -250,7 +260,7 @@
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="Total"
|
||||
show-in-column="no"
|
||||
show-in-column="kelompok"
|
||||
css-class="text-white !text-left"
|
||||
/>
|
||||
<DxTotalItem
|
||||
@ -375,13 +385,49 @@
|
||||
</DxSummary>
|
||||
|
||||
<template #formatTime="{ data }">
|
||||
<p class="!text-right cursor-pointer">
|
||||
<p class="!text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
<p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumberLaporanTotal="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumberLaporanJmlSelesai="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumberLaporanJmlBelumSelesai="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
@ -393,7 +439,7 @@
|
||||
</template>
|
||||
|
||||
<template #formatText="{ data }">
|
||||
<p class="!text-left cursor-pointer">
|
||||
<p class="!text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
@ -453,7 +499,7 @@
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
||||
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="formatNumber"
|
||||
@ -477,7 +523,7 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="waktu_response"
|
||||
caption="Dalam Proses Bidang"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
@ -486,7 +532,7 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="waktu_recovery"
|
||||
caption="Selesai Bidang Unit"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
@ -513,7 +559,7 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="status_akhir"
|
||||
caption="Status"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
@ -567,7 +613,7 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="nama_ulp"
|
||||
caption="Rayon"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
@ -576,7 +622,7 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="uraian"
|
||||
caption="Uraian"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
@ -585,7 +631,7 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="respon_pelanggan"
|
||||
caption="Respon Pelanggan"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
@ -629,7 +675,7 @@
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Dalam Proses Bidang:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="dataSubSelected?.dalam_proses_bidang"
|
||||
:value="dataSubSelected?.waktu_response"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
@ -638,7 +684,7 @@
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Selesai Bidang Unit:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="dataSubSelected?.selesai_bidang_unit"
|
||||
:value="dataSubSelected?.waktu_recovery"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
@ -714,7 +760,7 @@
|
||||
|
||||
<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="dataSubSelected?.rayon" class-name="flex-1" />
|
||||
<InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
@ -732,7 +778,7 @@
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataSubSelected?.response_pelanggan"
|
||||
:value="dataSubSelected?.respon_pelanggan"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
@ -769,7 +815,7 @@ import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { queries } from '@/utils/api/api.graphql'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
@ -788,42 +834,63 @@ const dialogDetail = ref(false)
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const agreeToShowDialog = ref(false)
|
||||
const progressSelected = ref(0)
|
||||
const isGroupBy = ref(false)
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const setAgreementDialog = (status: boolean, progress: number) => {
|
||||
agreeToShowDialog.value = status
|
||||
progressSelected.value = progress
|
||||
}
|
||||
|
||||
const resetData = () => {
|
||||
data.value = []
|
||||
dataSub.value = []
|
||||
}
|
||||
|
||||
const filterData = async (params: any) => {
|
||||
resetData()
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
const { ulp, uid, up3 } = params
|
||||
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.keluhan.rekap.keluhanPerKelompokKeluhan,
|
||||
{
|
||||
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),
|
||||
idUlp: ulp ? ulp.id : 0,
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
}
|
||||
const query = {
|
||||
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),
|
||||
idUlp: ulp ? ulp.id : 0,
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
}
|
||||
|
||||
loadingData.value = true
|
||||
await requestGraphQl(
|
||||
params.groupBy
|
||||
? queries.keluhan.rekap.keluhanPerKelompokKeluhanUID
|
||||
: queries.keluhan.rekap.keluhanPerKelompokKeluhan,
|
||||
query
|
||||
)
|
||||
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.rekapitulasiKeluhanPerKelompokKeluhan
|
||||
}
|
||||
})
|
||||
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
|
||||
watch(loading, (value) => {
|
||||
loadingData.value = value
|
||||
})
|
||||
.then((result) => {
|
||||
isGroupBy.value = params.groupBy
|
||||
if (result.data.data != undefined) {
|
||||
data.value = isGroupBy.value
|
||||
? result.data.data.rekapitulasiKeluhanPerKelompokKeluhanUid
|
||||
: result.data.data.rekapitulasiKeluhanPerKelompokKeluhan
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
.finally(() => {
|
||||
loadingData.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const getDetail = () => {
|
||||
const getDetail = async () => {
|
||||
const dateValue = filters.value.periode.split(' s/d ')
|
||||
const selected = dataSelected.value
|
||||
|
||||
@ -834,29 +901,32 @@ const getDetail = () => {
|
||||
dateTo: dateValue[1]
|
||||
? dateValue[1].split('-').reverse().join('-')
|
||||
: 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
|
||||
idUlp: 0,
|
||||
idUid: isGroupBy.value ? (selected?.id_uid ? selected?.id_uid : 0) : 0,
|
||||
idUp3: 0,
|
||||
namaRegional: '',
|
||||
isSelesai: progressSelected.value,
|
||||
media: '',
|
||||
tanggal: '',
|
||||
namaIssuetype: selected?.kelompok ? selected?.kelompok : '',
|
||||
namaSubissuetype: ''
|
||||
}
|
||||
|
||||
const { onResult, onError, loading } = useQuery(
|
||||
queries.keluhan.rekap.rekapKeluhanAllDetail,
|
||||
query
|
||||
)
|
||||
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
dataSub.value = queryResult.data.detailKeluhanAll
|
||||
}
|
||||
})
|
||||
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
|
||||
watch(loading, (value) => {
|
||||
loadingSubData.value = value
|
||||
})
|
||||
loadingSubData.value = true
|
||||
await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
|
||||
.then((result) => {
|
||||
if (result.data.data != undefined) {
|
||||
dataSub.value = result.data.data.detailKeluhanAll
|
||||
} else {
|
||||
dataSub.value = []
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
.finally(() => {
|
||||
loadingSubData.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||
@ -867,8 +937,10 @@ const clearSelection = () => {
|
||||
const showDetail = () => {
|
||||
clearSelection()
|
||||
dataSubSelected.value = null
|
||||
dialogDetail.value = true
|
||||
getDetail()
|
||||
if (agreeToShowDialog.value) {
|
||||
dialogDetail.value = true
|
||||
getDetail()
|
||||
}
|
||||
}
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
|
||||
@ -48,13 +48,12 @@
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn
|
||||
:width="100"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
caption="NO"
|
||||
css-class="custom-table-column"
|
||||
data-type="number"
|
||||
data-field="no"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
@ -69,10 +68,19 @@
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_uid"
|
||||
caption="Nama UID"
|
||||
caption="UID"
|
||||
css-class="custom-table-column"
|
||||
:group-index="0"
|
||||
v-if="filters.groupBy"
|
||||
v-if="isGroupBy"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Seluruh Distribusi"
|
||||
css-class="custom-table-column"
|
||||
:group-index="0"
|
||||
v-else
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
@ -82,7 +90,7 @@
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
cell-template="formatNumberLaporanTotal"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
@ -92,7 +100,7 @@
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
cell-template="formatNumberLaporanJmlSelesai"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
@ -112,7 +120,7 @@
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
cell-template="formatNumberLaporanJmlBelumSelesai"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
@ -250,7 +258,7 @@
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="Total"
|
||||
show-in-column="no"
|
||||
show-in-column="tanggal_lapor"
|
||||
css-class="text-white !text-left"
|
||||
/>
|
||||
<DxTotalItem
|
||||
@ -375,17 +383,53 @@
|
||||
</DxSummary>
|
||||
|
||||
<template #formatTime="{ data }">
|
||||
<p class="!text-right cursor-pointer">
|
||||
<p class="!text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #percent="{ data }">
|
||||
<p class="cursor-pointer">{{ data.text }}%</p>
|
||||
<p class="cursor-pointer" @click="setAgreementDialog(false, 0)">{{ data.text }}%</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
<p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumberLaporanTotal="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumberLaporanJmlSelesai="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumberLaporanJmlBelumSelesai="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
@ -397,7 +441,7 @@
|
||||
</template>
|
||||
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
<p class="text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
@ -457,7 +501,7 @@
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
||||
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="formatNumber"
|
||||
@ -481,7 +525,7 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="waktu_response"
|
||||
caption="Dalam Proses Bidang"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
@ -490,7 +534,7 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="waktu_recovery"
|
||||
caption="Selesai Bidang Unit"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
@ -517,7 +561,7 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="status_akhir"
|
||||
caption="Status"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
@ -571,7 +615,7 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="nama_ulp"
|
||||
caption="Rayon"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
@ -580,7 +624,7 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="uraian"
|
||||
caption="Uraian"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
@ -589,7 +633,7 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="respon_pelanggan"
|
||||
caption="Respon Pelanggan"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
@ -633,7 +677,7 @@
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Dalam Proses Bidang:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="dataSubSelected?.dalam_proses_bidang"
|
||||
:value="dataSubSelected?.waktu_response"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
@ -642,7 +686,7 @@
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Selesai Bidang Unit:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="dataSubSelected?.selesai_bidang_unit"
|
||||
:value="dataSubSelected?.waktu_recovery"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
@ -718,7 +762,7 @@
|
||||
|
||||
<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="dataSubSelected?.rayon" class-name="flex-1" />
|
||||
<InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
@ -736,7 +780,7 @@
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataSubSelected?.response_pelanggan"
|
||||
:value="dataSubSelected?.respon_pelanggan"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
@ -773,10 +817,11 @@ import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { queries } from '@/utils/api/api.graphql'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import { reformatDate } from '@/utils/texts'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -792,44 +837,24 @@ const dialogDetail = ref(false)
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const agreeToShowDialog = ref(false)
|
||||
const progressSelected = ref(0)
|
||||
const isGroupBy = ref(false)
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
const { ulp, uid, up3 } = params
|
||||
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.keluhan.rekap.keluhanPerTanggal,
|
||||
{
|
||||
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),
|
||||
idUlp: ulp ? ulp.id : 0,
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
}
|
||||
)
|
||||
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.rekapitulasiKeluhanPerTanggal
|
||||
}
|
||||
})
|
||||
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
|
||||
watch(loading, (value) => {
|
||||
loadingData.value = value
|
||||
})
|
||||
const setAgreementDialog = (status: boolean, progress: number) => {
|
||||
agreeToShowDialog.value = status
|
||||
progressSelected.value = progress
|
||||
}
|
||||
|
||||
const getDetail = () => {
|
||||
const dateValue = filters.value.periode.split(' s/d ')
|
||||
const selected = dataSelected.value
|
||||
const resetData = () => {
|
||||
data.value = []
|
||||
dataSub.value = []
|
||||
}
|
||||
|
||||
const filterData = async (params: any) => {
|
||||
resetData()
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
const { ulp, uid, up3 } = params
|
||||
|
||||
const query = {
|
||||
dateFrom: dateValue[0]
|
||||
@ -838,29 +863,68 @@ const getDetail = () => {
|
||||
dateTo: dateValue[1]
|
||||
? dateValue[1].split('-').reverse().join('-')
|
||||
: 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
|
||||
idUlp: ulp ? ulp.id : 0,
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
}
|
||||
|
||||
const { onResult, onError, loading } = useQuery(
|
||||
queries.keluhan.rekap.rekapKeluhanAllDetail,
|
||||
query
|
||||
)
|
||||
loadingData.value = true
|
||||
await requestGraphQl(queries.keluhan.rekap.keluhanPerTanggal, query)
|
||||
.then((result) => {
|
||||
isGroupBy.value = params.groupBy
|
||||
if (result.data.data != undefined) {
|
||||
data.value = result.data.data.rekapitulasiKeluhanPerTanggal
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
.finally(() => {
|
||||
loadingData.value = false
|
||||
})
|
||||
}
|
||||
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
dataSub.value = queryResult.data.detailKeluhanAll
|
||||
}
|
||||
})
|
||||
const getDetail = async () => {
|
||||
const dateValue = filters.value.periode.split(' s/d ')
|
||||
const selected = dataSelected.value
|
||||
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
const query = {
|
||||
dateFrom: selected?.tanggal_lapor
|
||||
? reformatDate(selected?.tanggal_lapor, 'dd/MM/yyyy', 'yyyy-MM-dd')
|
||||
: '',
|
||||
dateTo: selected?.tanggal_lapor
|
||||
? reformatDate(selected?.tanggal_lapor, 'dd/MM/yyyy', 'yyyy-MM-dd')
|
||||
: '',
|
||||
idUlp: 0,
|
||||
idUid: isGroupBy.value ? (selected?.id_uid ? selected?.id_uid : 0) : 0,
|
||||
idUp3: 0,
|
||||
namaRegional: '',
|
||||
isSelesai: progressSelected.value,
|
||||
media: '',
|
||||
tanggal: selected?.tanggal_lapor
|
||||
? reformatDate(selected?.tanggal_lapor, 'dd/MM/yyyy', 'yyyy-MM-dd')
|
||||
: '',
|
||||
namaIssuetype: '',
|
||||
namaSubissuetype: ''
|
||||
}
|
||||
|
||||
watch(loading, (value) => {
|
||||
loadingSubData.value = value
|
||||
})
|
||||
loadingSubData.value = true
|
||||
await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
|
||||
.then((result) => {
|
||||
if (result.data.data != undefined) {
|
||||
dataSub.value = result.data.data.detailKeluhanAll
|
||||
} else {
|
||||
dataSub.value = []
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
.finally(() => {
|
||||
loadingSubData.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||
@ -871,8 +935,10 @@ const clearSelection = () => {
|
||||
const showDetail = () => {
|
||||
clearSelection()
|
||||
dataSubSelected.value = null
|
||||
dialogDetail.value = true
|
||||
getDetail()
|
||||
if (agreeToShowDialog.value) {
|
||||
dialogDetail.value = true
|
||||
getDetail()
|
||||
}
|
||||
}
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn
|
||||
:width="100"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
caption="NO"
|
||||
css-class="custom-table-column"
|
||||
@ -81,7 +81,7 @@
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
cell-template="formatNumberLaporanTotal"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
@ -91,7 +91,7 @@
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
cell-template="formatNumberLaporanJmlSelesai"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
@ -111,6 +111,7 @@
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumberLaporanJmlBelumSelesai"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
@ -248,7 +249,7 @@
|
||||
<DxGroupItem
|
||||
summary-type="sum"
|
||||
display-format="Total"
|
||||
show-in-column="no"
|
||||
show-in-column="nama_ulp"
|
||||
css-class="!text-left"
|
||||
:show-in-group-footer="true"
|
||||
/>
|
||||
@ -392,7 +393,7 @@
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="Total"
|
||||
show-in-column="no"
|
||||
show-in-column="nama_ulp"
|
||||
css-class="text-white !text-left"
|
||||
/>
|
||||
<DxTotalItem
|
||||
@ -517,13 +518,13 @@
|
||||
</DxSummary>
|
||||
|
||||
<template #formatTime="{ data }">
|
||||
<p class="cursor-pointer !text-right">
|
||||
<p class="cursor-pointer !text-right" @click="setAgreementDialog(false, 0)">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="!text-right cursor-pointer">
|
||||
<p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
@ -534,7 +535,43 @@
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatText="{ data }">
|
||||
<template #formatNumberLaporanTotal="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumberLaporanJmlSelesai="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumberLaporanJmlBelumSelesai="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatText="{ data }" @click="setAgreementDialog(false, 0)">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
@ -595,7 +632,7 @@
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
||||
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="formatNumber"
|
||||
@ -619,7 +656,7 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="waktu_response"
|
||||
caption="Dalam Proses Bidang"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
@ -628,7 +665,7 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="waktu_recovery"
|
||||
caption="Selesai Bidang Unit"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
@ -655,7 +692,7 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="status_akhir"
|
||||
caption="Status"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
@ -709,7 +746,7 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="nama_ulp"
|
||||
caption="Rayon"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
@ -718,7 +755,7 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="uraian"
|
||||
caption="Uraian"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
@ -727,7 +764,7 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="respon_pelanggan"
|
||||
caption="Respon Pelanggan"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
@ -771,7 +808,7 @@
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Dalam Proses Bidang:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="dataSubSelected?.dalam_proses_bidang"
|
||||
:value="dataSubSelected?.waktu_response"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
@ -780,7 +817,7 @@
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Selesai Bidang Unit:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="dataSubSelected?.selesai_bidang_unit"
|
||||
:value="dataSubSelected?.waktu_recovery"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
@ -856,7 +893,7 @@
|
||||
|
||||
<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="dataSubSelected?.rayon" class-name="flex-1" />
|
||||
<InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
@ -874,7 +911,7 @@
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataSubSelected?.response_pelanggan"
|
||||
:value="dataSubSelected?.respon_pelanggan"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
@ -912,7 +949,7 @@ import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { queries } from '@/utils/api/api.graphql'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
@ -931,12 +968,24 @@ const dialogDetail = ref(false)
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const agreeToShowDialog = ref(false)
|
||||
const progressSelected = ref(0)
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const setAgreementDialog = (status: boolean, progress: number) => {
|
||||
agreeToShowDialog.value = status
|
||||
progressSelected.value = progress
|
||||
}
|
||||
|
||||
const resetData = () => {
|
||||
data.value = []
|
||||
dataSub.value = []
|
||||
}
|
||||
|
||||
const filterData = async (params: any) => {
|
||||
resetData()
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
const { ulp, uid, up3 } = params
|
||||
|
||||
const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.keluhanPerUnit, {
|
||||
const query = {
|
||||
dateFrom: dateValue[0]
|
||||
? dateValue[0].split('-').reverse().join('-')
|
||||
: new Date().toISOString().slice(0, 10),
|
||||
@ -946,31 +995,33 @@ const filterData = (params: any) => {
|
||||
idUlp: ulp ? ulp.id : 0,
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
})
|
||||
}
|
||||
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = [...queryResult.data.rekapitulasiKeluhanPerUnit]
|
||||
.sort((a, b) => a.nama_up3.localeCompare(b.nama_up3))
|
||||
.map((item, index) => {
|
||||
return {
|
||||
...item,
|
||||
number: index + 1
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
|
||||
watch(loading, (value) => {
|
||||
loadingData.value = value
|
||||
})
|
||||
loadingData.value = true
|
||||
await requestGraphQl(queries.keluhan.rekap.keluhanPerUnit, query)
|
||||
.then((result) => {
|
||||
if (result.data.data != undefined) {
|
||||
data.value = [...result.data.data.rekapitulasiKeluhanPerUnit]
|
||||
.sort((a, b) => a.nama_up3.localeCompare(b.nama_up3))
|
||||
.map((item, index) => {
|
||||
return {
|
||||
...item,
|
||||
number: index + 1
|
||||
}
|
||||
})
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
.finally(() => {
|
||||
loadingData.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const getDetail = () => {
|
||||
const getDetail = async () => {
|
||||
const dateValue = filters.value.periode.split(' s/d ')
|
||||
const selected = dataSelected.value
|
||||
|
||||
@ -983,27 +1034,30 @@ const getDetail = () => {
|
||||
: 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,
|
||||
namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
|
||||
isSelesai: progressSelected.value,
|
||||
media: '',
|
||||
tanggal: '',
|
||||
namaIssuetype: '',
|
||||
namaSubissuetype: ''
|
||||
}
|
||||
|
||||
const { onResult, onError, loading } = useQuery(
|
||||
queries.keluhan.rekap.rekapKeluhanAllDetail,
|
||||
query
|
||||
)
|
||||
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
dataSub.value = queryResult.data.detailKeluhanAll
|
||||
}
|
||||
})
|
||||
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
|
||||
watch(loading, (value) => {
|
||||
loadingSubData.value = value
|
||||
})
|
||||
loadingSubData.value = true
|
||||
await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
|
||||
.then((result) => {
|
||||
if (result.data.data != undefined) {
|
||||
dataSub.value = result.data.data.detailKeluhanAll
|
||||
} else {
|
||||
dataSub.value = []
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
.finally(() => {
|
||||
loadingSubData.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||
@ -1014,8 +1068,10 @@ const clearSelection = () => {
|
||||
const showDetail = () => {
|
||||
clearSelection()
|
||||
dataSubSelected.value = null
|
||||
dialogDetail.value = true
|
||||
getDetail()
|
||||
if (agreeToShowDialog.value) {
|
||||
dialogDetail.value = true
|
||||
getDetail()
|
||||
}
|
||||
}
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
/>
|
||||
@ -219,7 +219,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import { queries } from '@/utils/api/api.graphql'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
|
||||
@ -238,41 +238,46 @@ const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const resetData = () => {
|
||||
data.value = []
|
||||
dataSub.value = []
|
||||
}
|
||||
|
||||
const filterData = async (params: any) => {
|
||||
resetData()
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
const { ulp, uid, up3 } = params
|
||||
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.keluhan.rekap.keluhanPerRatingUnit,
|
||||
{
|
||||
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),
|
||||
idUlp: ulp ? ulp.id : 0,
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
}
|
||||
)
|
||||
const query = {
|
||||
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),
|
||||
idUlp: ulp ? ulp.id : 0,
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
}
|
||||
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.rekapitulasiKeluhanRatingPerUnit
|
||||
}
|
||||
})
|
||||
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
|
||||
watch(loading, (value) => {
|
||||
loadingData.value = value
|
||||
})
|
||||
loadingData.value = true
|
||||
await requestGraphQl(queries.keluhan.rekap.keluhanPerRatingUnit, query)
|
||||
.then((result) => {
|
||||
if (result.data.data != undefined) {
|
||||
data.value = result.data.data.rekapitulasiKeluhanRatingPerUnit
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
.finally(() => {
|
||||
loadingData.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const getDetail = () => {
|
||||
const getDetail = async () => {
|
||||
const dateValue = filters.value.periode.split(' s/d ')
|
||||
const selected = dataSelected.value
|
||||
|
||||
@ -288,24 +293,21 @@ const getDetail = () => {
|
||||
idUp3: selected?.id_up3 ? selected?.id_up3 : 0
|
||||
}
|
||||
|
||||
const { onResult, onError, loading } = useQuery(
|
||||
queries.keluhan.rekap.rekapKeluhanAllDetail,
|
||||
query
|
||||
)
|
||||
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
dataSub.value = queryResult.data.detailKeluhanAll
|
||||
}
|
||||
})
|
||||
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
|
||||
watch(loading, (value) => {
|
||||
loadingSubData.value = value
|
||||
})
|
||||
loadingSubData.value = true
|
||||
await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
|
||||
.then((result) => {
|
||||
if (result.data.data != undefined) {
|
||||
dataSub.value = result.data.data.detailKeluhanAll
|
||||
} else {
|
||||
dataSub.value = []
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
.finally(() => {
|
||||
loadingSubData.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||
|
||||
Reference in New Issue
Block a user