Update table components to include a "No" column

This commit is contained in:
probdg
2024-01-31 15:40:36 +07:00
parent 146af29812
commit f5fe6ae0e6
27 changed files with 857 additions and 438 deletions

View File

@@ -1,4 +1,3 @@
<!-- Rekapitulasi Keluhan Per Fungsi Bidang -->
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
@@ -13,8 +12,11 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Jenis Keluhan"
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number"
caption="No" />
<DxColumn :width="170" alignment="center" data-field="tipe_permasalahan" caption="Jenis Keluhan"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
@@ -122,8 +124,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO = gql`
query rekapitulasiGangguanRatingPerPosko
const GET_DATA = gql`
query rekapitulasiKeluhanPerJenisKeluhan
(
$dateFrom: Date!
$dateTo: Date!
@@ -131,7 +133,7 @@ query rekapitulasiGangguanRatingPerPosko
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiGangguanRatingPerPosko
rekapitulasiKeluhanPerJenisKeluhan
(
dateFrom: $dateFrom
dateTo: $dateTo
@@ -139,29 +141,33 @@ query rekapitulasiGangguanRatingPerPosko
idUid: $idUid
idUp3: $idUp3
) {
in_process
indeks_rating
jumlah_non_rating
jumlah_rating
nama_posko
persen_in_process
persen_non_rating
persen_rating
persen_selesai
rating_1
rating_2
rating_3
rating_4
rating_5
regu
selesai
total
avg_durasi_dispatch
avg_durasi_recovery
avg_durasi_response
max_durasi_dispatch
max_durasi_recovery
max_durasi_response
min_durasi_dispatch
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
tipe_permasalahan
total
total_diatas_sla_dispatch
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_dispatch
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
total_selesai
}
}`;
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO, {
const { onResult, onError } = useQuery(GET_DATA, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
posko: "",
@@ -171,7 +177,7 @@ onMounted(() => {
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanRatingPerPosko
data.value = queryResult.data.rekapitulasiKeluhanPerJenisKeluhan
;
loadingVisible.value = false
}