Refactor dialogDetail variable names in Vue components
This commit is contained in:
parent
9d75cdf7c2
commit
b472cd29a7
@ -140,7 +140,7 @@
|
|||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<template #formatNumber="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer" @click="showData()">
|
<p class="text-right cursor-pointer" @click="showDetail()">
|
||||||
{{
|
{{
|
||||||
isNumber(data.text)
|
isNumber(data.text)
|
||||||
? data.column.caption == '%'
|
? data.column.caption == '%'
|
||||||
@ -152,18 +152,18 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatPercentage="{ data }">
|
<template #formatPercentage="{ data }">
|
||||||
<p class="text-right cursor-pointer" @click="showData()">
|
<p class="text-right cursor-pointer" @click="showDetail()">
|
||||||
{{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
|
{{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatText="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer" @click="showData()">
|
<p class="text-left cursor-pointer" @click="showDetail()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatTime="{ data }" @click="showData()">
|
<template #formatTime="{ data }" @click="showDetail()">
|
||||||
<p class="!text-right">
|
<p class="!text-right">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
@ -197,12 +197,12 @@ const data = computed(() => props.data)
|
|||||||
const dataSub = ref([])
|
const dataSub = ref([])
|
||||||
const dataSelected = ref({})
|
const dataSelected = ref({})
|
||||||
const dataSubSelected = ref({})
|
const dataSubSelected = ref({})
|
||||||
const showDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
const showData = () => {
|
const showDetail = () => {
|
||||||
showDetail.value = true
|
dialogDetail.value = true
|
||||||
}
|
}
|
||||||
const closeDetail = () => {
|
const closeDialog = () => {
|
||||||
showDetail.value = false
|
dialogDetail.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
|
@ -214,7 +214,7 @@
|
|||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<template #formatNumber="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer" @click="showData()">
|
<p class="text-right cursor-pointer" @click="showDetail()">
|
||||||
{{
|
{{
|
||||||
isNumber(data.text)
|
isNumber(data.text)
|
||||||
? data.column.caption == '%'
|
? data.column.caption == '%'
|
||||||
@ -226,18 +226,18 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatPercentage="{ data }">
|
<template #formatPercentage="{ data }">
|
||||||
<p class="text-right cursor-pointer" @click="showData()">
|
<p class="text-right cursor-pointer" @click="showDetail()">
|
||||||
{{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
|
{{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatText="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer" @click="showData()">
|
<p class="text-left cursor-pointer" @click="showDetail()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatTime="{ data }" @click="showData()">
|
<template #formatTime="{ data }" @click="showDetail()">
|
||||||
<p class="!text-right">
|
<p class="!text-right">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
@ -391,12 +391,12 @@ const data = computed(() => props.data)
|
|||||||
const dataSub = ref<any[]>([])
|
const dataSub = ref<any[]>([])
|
||||||
const dataSelected = ref<any>({})
|
const dataSelected = ref<any>({})
|
||||||
const dataSubSelected = ref<any>({})
|
const dataSubSelected = ref<any>({})
|
||||||
const showDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
const showData = () => {
|
const showDetail = () => {
|
||||||
showDetail.value = true
|
dialogDetail.value = true
|
||||||
}
|
}
|
||||||
const closeDetail = () => {
|
const closeDialog = () => {
|
||||||
showDetail.value = false
|
dialogDetail.value = false
|
||||||
}
|
}
|
||||||
const loading = ref(computed(() => props.loading))
|
const loading = ref(computed(() => props.loading))
|
||||||
|
|
||||||
|
@ -78,7 +78,7 @@
|
|||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<template #formatNumber="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer" @click="showData()">
|
<p class="text-right cursor-pointer" @click="showDetail()">
|
||||||
{{
|
{{
|
||||||
isNumber(data.text)
|
isNumber(data.text)
|
||||||
? data.column.caption == '%'
|
? data.column.caption == '%'
|
||||||
@ -90,18 +90,18 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatPercentage="{ data }">
|
<template #formatPercentage="{ data }">
|
||||||
<p class="text-right cursor-pointer" @click="showData()">
|
<p class="text-right cursor-pointer" @click="showDetail()">
|
||||||
{{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
|
{{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatText="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer" @click="showData()">
|
<p class="text-left cursor-pointer" @click="showDetail()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatTime="{ data }" @click="showData()">
|
<template #formatTime="{ data }" @click="showDetail()">
|
||||||
<p class="!text-right">
|
<p class="!text-right">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
@ -135,12 +135,12 @@ const data = computed(() => props.data)
|
|||||||
const dataSub = ref<any[]>([])
|
const dataSub = ref<any[]>([])
|
||||||
const dataSelected = ref<any>({})
|
const dataSelected = ref<any>({})
|
||||||
const dataSubSelected = ref<any>({})
|
const dataSubSelected = ref<any>({})
|
||||||
const showDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
const showData = () => {
|
const showDetail = () => {
|
||||||
showDetail.value = true
|
dialogDetail.value = true
|
||||||
}
|
}
|
||||||
const closeDetail = () => {
|
const closeDialog = () => {
|
||||||
showDetail.value = false
|
dialogDetail.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
|
@ -262,7 +262,7 @@
|
|||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<template #formatNumber="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer" @click="showData()">
|
<p class="text-right cursor-pointer" @click="showDetail()">
|
||||||
{{
|
{{
|
||||||
isNumber(data.text)
|
isNumber(data.text)
|
||||||
? data.column.caption == '%'
|
? data.column.caption == '%'
|
||||||
@ -274,18 +274,18 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatPercentage="{ data }">
|
<template #formatPercentage="{ data }">
|
||||||
<p class="text-right cursor-pointer" @click="showData()">
|
<p class="text-right cursor-pointer" @click="showDetail()">
|
||||||
{{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
|
{{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatText="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer" @click="showData()">
|
<p class="text-left cursor-pointer" @click="showDetail()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatTime="{ data }" @click="showData()">
|
<template #formatTime="{ data }" @click="showDetail()">
|
||||||
<p class="!text-right">
|
<p class="!text-right">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
@ -472,9 +472,9 @@ const data = computed(() => props.data)
|
|||||||
const dataSelected = ref()
|
const dataSelected = ref()
|
||||||
const dataSub = ref([])
|
const dataSub = ref([])
|
||||||
const dataSubSelected = ref()
|
const dataSubSelected = ref()
|
||||||
const showDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
const showData = () => (showDetail.value = true)
|
const showDetail = () => (dialogDetail.value = true)
|
||||||
const closeDetail = () => (showDetail.value = false)
|
const closeDialog = () => (dialogDetail.value = false)
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
const doc = new jsPDF()
|
const doc = new jsPDF()
|
||||||
|
@ -164,7 +164,7 @@ const shading = ref(true)
|
|||||||
const showPane = ref(true)
|
const showPane = ref(true)
|
||||||
const dataDetail = ref<any>()
|
const dataDetail = ref<any>()
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const showDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
|
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
@ -268,8 +268,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
dataDetail.value = data
|
dataDetail.value = data
|
||||||
console.log(data)
|
console.log(data)
|
||||||
}
|
}
|
||||||
const showData = () => {
|
const showDetail = () => {
|
||||||
showDetail.value = true
|
dialogDetail.value = true
|
||||||
}
|
}
|
||||||
const filters = ref()
|
const filters = ref()
|
||||||
</script>
|
</script>
|
||||||
|
@ -13,7 +13,7 @@
|
|||||||
:show-borders="true"
|
:show-borders="true"
|
||||||
:row-alternation-enabled="true"
|
:row-alternation-enabled="true"
|
||||||
:hover-state-enabled="true"
|
:hover-state-enabled="true"
|
||||||
@selection-changed=""
|
@selection-changed="onSelectionChanged"
|
||||||
:column-width="100"
|
:column-width="100"
|
||||||
@exporting="onExporting"
|
@exporting="onExporting"
|
||||||
:allow-column-resizing="true"
|
:allow-column-resizing="true"
|
||||||
@ -167,28 +167,133 @@
|
|||||||
cell-template="formatText"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<template #cellCenter="{ data }">
|
|
||||||
<p class="cursor-pointer">
|
|
||||||
{{ data.text }}
|
|
||||||
</p>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #formatText="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer" @click="showDetail()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatTime="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p class="!text-right">
|
<p class="!text-right cursor-pointer" @click="showDetail()">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<DetailDialog
|
||||||
|
:open="dialogDetail"
|
||||||
|
title="Daftar Gangguan Berdasarkan Media"
|
||||||
|
@on-close="closeDialog"
|
||||||
|
>
|
||||||
|
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail.no_laporan" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Response:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">Tgl Recovery:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">Response Time:</h3>
|
||||||
|
<InputText
|
||||||
|
:readonly="true"
|
||||||
|
:value="
|
||||||
|
parseInt(dataDetail?.durasi_response_time)
|
||||||
|
? formatWaktu(dataDetail?.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-[170px] text-gray-800">Recovery Time:</h3>
|
||||||
|
<InputText
|
||||||
|
:readonly="true"
|
||||||
|
class-name="flex-1"
|
||||||
|
:value="
|
||||||
|
parseInt(dataDetail?.durasi_recovery_time)
|
||||||
|
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||||
|
: '-'
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NOMETER:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumper Lapor:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">TGL Media:</h3>
|
||||||
|
<InputText
|
||||||
|
:readonly="true"
|
||||||
|
type="textarea"
|
||||||
|
:value="dataDetail?.waktu_media"
|
||||||
|
class-name="flex-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Media:</h3>
|
||||||
|
<InputText
|
||||||
|
:readonly="true"
|
||||||
|
type="textarea"
|
||||||
|
:value="dataDetail?.keterangan_media"
|
||||||
|
class-name="flex-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DetailDialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||||
|
import InputText from '@/components/InputText.vue'
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type16 from '@/components/Form/FiltersType/Type16.vue'
|
import Type16 from '@/components/Form/FiltersType/Type16.vue'
|
||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
@ -217,6 +322,17 @@ const showIndicator = ref(true)
|
|||||||
const shading = ref(true)
|
const shading = ref(true)
|
||||||
const showPane = ref(true)
|
const showPane = ref(true)
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
|
const dataDetail = ref<any>({})
|
||||||
|
const dialogDetail = ref(false)
|
||||||
|
|
||||||
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
|
const data = selectedRowsData[0]
|
||||||
|
dataDetail.value = data
|
||||||
|
}
|
||||||
|
|
||||||
|
const showDetail = () => (dialogDetail.value = true)
|
||||||
|
|
||||||
|
const closeDialog = () => (dialogDetail.value = false)
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.berdasarkanMedia, {
|
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.berdasarkanMedia, {
|
||||||
dateFrom: new Date().toISOString().slice(0, 10),
|
dateFrom: new Date().toISOString().slice(0, 10),
|
||||||
|
@ -202,19 +202,19 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<template #cellCenter="{ data }">
|
<template #cellCenter="{ data }">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer" @click="showDetail()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatText="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer" @click="showData()">
|
<p class="text-left cursor-pointer" @click="showDetail()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatTime="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p class="cursor-pointer !text-right" @click="showData()">
|
<p class="cursor-pointer !text-right" @click="showDetail()">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
@ -222,9 +222,9 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DetailDialog
|
<DetailDialog
|
||||||
:open="showDetail"
|
:open="dialogDetail"
|
||||||
title="Daftar Gangguan Dialihkan ke Posko Lain"
|
title="Daftar Gangguan Dialihkan ke Posko Lain"
|
||||||
@on-close="closeDetail"
|
@on-close="closeDialog"
|
||||||
>
|
>
|
||||||
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -377,7 +377,6 @@ import {
|
|||||||
VerticalAlign,
|
VerticalAlign,
|
||||||
TextRun,
|
TextRun,
|
||||||
WidthType,
|
WidthType,
|
||||||
TableBorders,
|
|
||||||
PageOrientation
|
PageOrientation
|
||||||
} from 'docx'
|
} from 'docx'
|
||||||
|
|
||||||
@ -387,8 +386,8 @@ const shading = ref(true)
|
|||||||
const showPane = ref(true)
|
const showPane = ref(true)
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const dataDetail = ref<any>()
|
const dataDetail = ref<any>()
|
||||||
const showDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
const closeDetail = () => (showDetail.value = false)
|
const closeDialog = () => (dialogDetail.value = false)
|
||||||
|
|
||||||
const setHeaderStyle = (
|
const setHeaderStyle = (
|
||||||
worksheet: any,
|
worksheet: any,
|
||||||
@ -451,7 +450,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
const data = selectedRowsData[0]
|
const data = selectedRowsData[0]
|
||||||
dataDetail.value = data
|
dataDetail.value = data
|
||||||
}
|
}
|
||||||
const showData = () => (showDetail.value = true)
|
const showDetail = () => (dialogDetail.value = true)
|
||||||
|
|
||||||
const filters = ref()
|
const filters = ref()
|
||||||
const reportMeta = ref({
|
const reportMeta = ref({
|
||||||
|
@ -13,7 +13,7 @@
|
|||||||
:show-borders="true"
|
:show-borders="true"
|
||||||
:row-alternation-enabled="true"
|
:row-alternation-enabled="true"
|
||||||
:hover-state-enabled="true"
|
:hover-state-enabled="true"
|
||||||
@selection-changed=""
|
@selection-changed="onSelectionChanged"
|
||||||
:column-width="100"
|
:column-width="100"
|
||||||
@exporting="onExporting"
|
@exporting="onExporting"
|
||||||
:allow-column-resizing="true"
|
:allow-column-resizing="true"
|
||||||
@ -60,7 +60,7 @@
|
|||||||
alignment="center"
|
alignment="center"
|
||||||
data-field="no_laporan"
|
data-field="no_laporan"
|
||||||
caption="No Laporan"
|
caption="No Laporan"
|
||||||
cell-template="cellCenter"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
@ -68,7 +68,7 @@
|
|||||||
alignment="center"
|
alignment="center"
|
||||||
data-field="waktu_lapor"
|
data-field="waktu_lapor"
|
||||||
caption="Tgl Lapor"
|
caption="Tgl Lapor"
|
||||||
cell-template="cellCenter"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
@ -76,7 +76,7 @@
|
|||||||
alignment="center"
|
alignment="center"
|
||||||
data-field="waktu_response"
|
data-field="waktu_response"
|
||||||
caption="Tgl Response"
|
caption="Tgl Response"
|
||||||
cell-template="cellCenter"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
@ -84,7 +84,7 @@
|
|||||||
alignment="center"
|
alignment="center"
|
||||||
data-field="waktu_recovery"
|
data-field="waktu_recovery"
|
||||||
caption="Tgl Recovery"
|
caption="Tgl Recovery"
|
||||||
cell-template="cellCenter"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
@ -108,7 +108,7 @@
|
|||||||
alignment="center"
|
alignment="center"
|
||||||
data-field="status_akhir"
|
data-field="status_akhir"
|
||||||
caption="Status"
|
caption="Status"
|
||||||
cell-template="cellCenter"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
@ -116,7 +116,7 @@
|
|||||||
alignment="center"
|
alignment="center"
|
||||||
data-field="idpel_nometer"
|
data-field="idpel_nometer"
|
||||||
caption="IDPEL/NO METER"
|
caption="IDPEL/NO METER"
|
||||||
cell-template="cellCenter"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
@ -140,7 +140,7 @@
|
|||||||
alignment="center"
|
alignment="center"
|
||||||
data-field="no_telp_pelapor"
|
data-field="no_telp_pelapor"
|
||||||
caption="No Telp Pelapor"
|
caption="No Telp Pelapor"
|
||||||
cell-template="cellCenter"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
@ -156,7 +156,7 @@
|
|||||||
alignment="center"
|
alignment="center"
|
||||||
data-field="media"
|
data-field="media"
|
||||||
caption="Sumber Lapor"
|
caption="Sumber Lapor"
|
||||||
cell-template="cellCenter"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
@ -167,28 +167,143 @@
|
|||||||
cell-template="formatText"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<template #cellCenter="{ data }">
|
|
||||||
<p class="cursor-pointer">
|
|
||||||
{{ data.text }}
|
|
||||||
</p>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #formatText="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer" @click="showDetail()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatTime="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p class="!text-right">
|
<p class="!text-right cursor-pointer" @click="showDetail()">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<DetailDialog
|
||||||
|
:open="dialogDetail"
|
||||||
|
title="Daftar Gangguan Diselesaikan Mobile APKT"
|
||||||
|
@on-close="closeDialog"
|
||||||
|
>
|
||||||
|
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail.no_laporan" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Response:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">Tgl Recovery:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">Response Time:</h3>
|
||||||
|
<InputText
|
||||||
|
:readonly="true"
|
||||||
|
:value="
|
||||||
|
parseInt(dataDetail?.durasi_response_time)
|
||||||
|
? formatWaktu(dataDetail?.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-[170px] text-gray-800">Recovery Time:</h3>
|
||||||
|
<InputText
|
||||||
|
:readonly="true"
|
||||||
|
class-name="flex-1"
|
||||||
|
:value="
|
||||||
|
parseInt(dataDetail?.durasi_recovery_time)
|
||||||
|
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||||
|
: '-'
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NOMETER:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumper Lapor:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama ULP:</h3>
|
||||||
|
<InputText
|
||||||
|
:readonly="true"
|
||||||
|
type="textarea"
|
||||||
|
:value="dataDetail?.nama_posko"
|
||||||
|
class-name="flex-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
|
||||||
|
<InputText
|
||||||
|
:readonly="true"
|
||||||
|
type="textarea"
|
||||||
|
:value="dataDetail?.penyebab"
|
||||||
|
class-name="flex-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
|
||||||
|
<InputText
|
||||||
|
:readonly="true"
|
||||||
|
type="textarea"
|
||||||
|
:value="dataDetail?.tindakan"
|
||||||
|
class-name="flex-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DetailDialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||||
|
import InputText from '@/components/InputText.vue'
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
@ -217,6 +332,17 @@ const showIndicator = ref(true)
|
|||||||
const shading = ref(true)
|
const shading = ref(true)
|
||||||
const showPane = ref(true)
|
const showPane = ref(true)
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
|
const dataDetail = ref<any>({})
|
||||||
|
const dialogDetail = ref(false)
|
||||||
|
|
||||||
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
|
const data = selectedRowsData[0]
|
||||||
|
dataDetail.value = data
|
||||||
|
}
|
||||||
|
|
||||||
|
const showDetail = () => (dialogDetail.value = true)
|
||||||
|
|
||||||
|
const closeDialog = () => (dialogDetail.value = false)
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
queries.gangguan.daftar.diselesaikanMobileAPKT,
|
queries.gangguan.daftar.diselesaikanMobileAPKT,
|
||||||
|
@ -174,25 +174,25 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<template #cellCenter="{ data }">
|
<template #cellCenter="{ data }">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer" @click="showDetail()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatText="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer" @click="showData()">
|
<p class="text-left cursor-pointer" @click="showDetail()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatNumber="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer" @click="showData()">
|
<p class="text-right cursor-pointer" @click="showDetail()">
|
||||||
{{ isNumber(data.text) ? formatNumber(data.text) : data.text }}
|
{{ isNumber(data.text) ? formatNumber(data.text) : data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatTime="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p class="cursor-pointer !text-right" @click="showData()">
|
<p class="cursor-pointer !text-right" @click="showDetail()">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
@ -200,9 +200,9 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DetailDialog
|
<DetailDialog
|
||||||
:open="showDetail"
|
:open="dialogDetail"
|
||||||
title="Daftar Gangguan Melapor Lebih Dari 1 Kali"
|
title="Daftar Gangguan Melapor Lebih Dari 1 Kali"
|
||||||
@on-close="closeDetail"
|
@on-close="closeDialog"
|
||||||
>
|
>
|
||||||
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -337,7 +337,7 @@ const shading = ref(true)
|
|||||||
const showPane = ref(true)
|
const showPane = ref(true)
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const dataDetail = ref<any>({})
|
const dataDetail = ref<any>({})
|
||||||
const showDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
const filters = ref()
|
const filters = ref()
|
||||||
const reportMeta = ref({
|
const reportMeta = ref({
|
||||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||||
@ -353,9 +353,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
dataDetail.value = data
|
dataDetail.value = data
|
||||||
}
|
}
|
||||||
|
|
||||||
const showData = () => (showDetail.value = true)
|
const showDetail = () => (dialogDetail.value = true)
|
||||||
|
|
||||||
const closeDetail = () => (showDetail.value = false)
|
const closeDialog = () => (dialogDetail.value = false)
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
queries.gangguan.daftar.melaporLebihDariSatuKali,
|
queries.gangguan.daftar.melaporLebihDariSatuKali,
|
||||||
|
@ -192,26 +192,26 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<template #cellCenter="{ data }">
|
<template #cellCenter="{ data }">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer" @click="showDetail()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatText="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer" @click="showData()">
|
<p class="text-left cursor-pointer" @click="showDetail()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatTime="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p class="cursor-pointer !text-right" @click="showData()">
|
<p class="cursor-pointer !text-right" @click="showDetail()">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DetailDialog :open="showDetail" title="Daftar Gangguan Recovery Time" @on-close="closeDetail">
|
<DetailDialog :open="dialogDetail" title="Daftar Gangguan Recovery Time" @on-close="closeDialog">
|
||||||
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
||||||
@ -359,16 +359,16 @@ const shading = ref(true)
|
|||||||
const showPane = ref(true)
|
const showPane = ref(true)
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const dataDetail = ref<any>({})
|
const dataDetail = ref<any>({})
|
||||||
const showDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
const data = selectedRowsData[0]
|
const data = selectedRowsData[0]
|
||||||
dataDetail.value = data
|
dataDetail.value = data
|
||||||
}
|
}
|
||||||
|
|
||||||
const showData = () => (showDetail.value = true)
|
const showDetail = () => (dialogDetail.value = true)
|
||||||
|
|
||||||
const closeDetail = () => (showDetail.value = false)
|
const closeDialog = () => (dialogDetail.value = false)
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const { minTime, maxTime, posko, uid, up3 } = params
|
const { minTime, maxTime, posko, uid, up3 } = params
|
||||||
|
@ -169,26 +169,26 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<template #cellCenter="{ data }">
|
<template #cellCenter="{ data }">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer" @click="showDetail()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatText="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer" @click="showData()">
|
<p class="text-left cursor-pointer" @click="showDetail()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatTime="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p class="cursor-pointer !text-right" @click="showData()">
|
<p class="cursor-pointer !text-right" @click="showDetail()">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DetailDialog :open="showDetail" title="Daftar Gangguan Response Time" @on-close="closeDetail">
|
<DetailDialog :open="dialogDetail" title="Daftar Gangguan Response Time" @on-close="closeDialog">
|
||||||
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
||||||
@ -336,16 +336,16 @@ const shading = ref(true)
|
|||||||
const showPane = ref(true)
|
const showPane = ref(true)
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const dataDetail = ref<any>({})
|
const dataDetail = ref<any>({})
|
||||||
const showDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
const data = selectedRowsData[0]
|
const data = selectedRowsData[0]
|
||||||
dataDetail.value = data
|
dataDetail.value = data
|
||||||
}
|
}
|
||||||
|
|
||||||
const showData = () => (showDetail.value = true)
|
const showDetail = () => (dialogDetail.value = true)
|
||||||
|
|
||||||
const closeDetail = () => (showDetail.value = false)
|
const closeDialog = () => (dialogDetail.value = false)
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const { minTime, maxTime, posko, uid, up3 } = params
|
const { minTime, maxTime, posko, uid, up3 } = params
|
||||||
|
@ -13,7 +13,7 @@
|
|||||||
:show-borders="true"
|
:show-borders="true"
|
||||||
:row-alternation-enabled="true"
|
:row-alternation-enabled="true"
|
||||||
:hover-state-enabled="true"
|
:hover-state-enabled="true"
|
||||||
@selection-changed=""
|
@selection-changed="onSelectionChanged"
|
||||||
:column-width="100"
|
:column-width="100"
|
||||||
@exporting="onExporting"
|
@exporting="onExporting"
|
||||||
:allow-column-resizing="true"
|
:allow-column-resizing="true"
|
||||||
@ -60,7 +60,7 @@
|
|||||||
alignment="center"
|
alignment="center"
|
||||||
data-field="no_laporan"
|
data-field="no_laporan"
|
||||||
caption="No Laporan"
|
caption="No Laporan"
|
||||||
cell-template="cellCenter"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
@ -68,7 +68,7 @@
|
|||||||
alignment="center"
|
alignment="center"
|
||||||
data-field="waktu_lapor"
|
data-field="waktu_lapor"
|
||||||
caption="Tgl Lapor"
|
caption="Tgl Lapor"
|
||||||
cell-template="cellCenter"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
@ -76,7 +76,7 @@
|
|||||||
alignment="center"
|
alignment="center"
|
||||||
data-field="waktu_response"
|
data-field="waktu_response"
|
||||||
caption="Tgl Response"
|
caption="Tgl Response"
|
||||||
cell-template="cellCenter"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
@ -84,7 +84,7 @@
|
|||||||
alignment="center"
|
alignment="center"
|
||||||
data-field="waktu_recovery"
|
data-field="waktu_recovery"
|
||||||
caption="Tgl Recovery"
|
caption="Tgl Recovery"
|
||||||
cell-template="cellCenter"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
@ -108,7 +108,7 @@
|
|||||||
alignment="center"
|
alignment="center"
|
||||||
data-field="status_akhir"
|
data-field="status_akhir"
|
||||||
caption="Status"
|
caption="Status"
|
||||||
cell-template="cellCenter"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
@ -116,7 +116,7 @@
|
|||||||
alignment="center"
|
alignment="center"
|
||||||
data-field="idpel_nometer"
|
data-field="idpel_nometer"
|
||||||
caption="IDPEL/NO METER"
|
caption="IDPEL/NO METER"
|
||||||
cell-template="cellCenter"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
@ -140,7 +140,7 @@
|
|||||||
alignment="center"
|
alignment="center"
|
||||||
data-field="no_telp_pelapor"
|
data-field="no_telp_pelapor"
|
||||||
caption="No Telp Pelapor"
|
caption="No Telp Pelapor"
|
||||||
cell-template="cellCenter"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
@ -156,7 +156,7 @@
|
|||||||
alignment="center"
|
alignment="center"
|
||||||
data-field="media"
|
data-field="media"
|
||||||
caption="Sumber Lapor"
|
caption="Sumber Lapor"
|
||||||
cell-template="cellCenter"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
@ -167,28 +167,143 @@
|
|||||||
cell-template="formatText"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<template #cellCenter="{ data }">
|
|
||||||
<p class="cursor-pointer">
|
|
||||||
{{ data.text }}
|
|
||||||
</p>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #formatText="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer" @click="showDetail()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatTime="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p class="!text-right">
|
<p class="!text-right cursor-pointer" @click="showDetail()">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<DetailDialog
|
||||||
|
:open="dialogDetail"
|
||||||
|
title="Daftar Gangguan Diselesaikan Tanpa ID Pelanggan"
|
||||||
|
@on-close="closeDialog"
|
||||||
|
>
|
||||||
|
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail.no_laporan" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Response:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">Tgl Recovery:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">Response Time:</h3>
|
||||||
|
<InputText
|
||||||
|
:readonly="true"
|
||||||
|
:value="
|
||||||
|
parseInt(dataDetail?.durasi_response_time)
|
||||||
|
? formatWaktu(dataDetail?.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-[170px] text-gray-800">Recovery Time:</h3>
|
||||||
|
<InputText
|
||||||
|
:readonly="true"
|
||||||
|
class-name="flex-1"
|
||||||
|
:value="
|
||||||
|
parseInt(dataDetail?.durasi_recovery_time)
|
||||||
|
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||||
|
: '-'
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NOMETER:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumper Lapor:</h3>
|
||||||
|
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
|
||||||
|
<InputText
|
||||||
|
:readonly="true"
|
||||||
|
type="textarea"
|
||||||
|
:value="dataDetail?.nama_posko"
|
||||||
|
class-name="flex-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
|
||||||
|
<InputText
|
||||||
|
:readonly="true"
|
||||||
|
type="textarea"
|
||||||
|
:value="dataDetail?.penyebab"
|
||||||
|
class-name="flex-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
|
||||||
|
<InputText
|
||||||
|
:readonly="true"
|
||||||
|
type="textarea"
|
||||||
|
:value="dataDetail?.tindakan"
|
||||||
|
class-name="flex-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DetailDialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||||
|
import InputText from '@/components/InputText.vue'
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
@ -217,6 +332,17 @@ const showIndicator = ref(true)
|
|||||||
const shading = ref(true)
|
const shading = ref(true)
|
||||||
const showPane = ref(true)
|
const showPane = ref(true)
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
|
const dataDetail = ref<any>({})
|
||||||
|
const dialogDetail = ref(false)
|
||||||
|
|
||||||
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
|
const data = selectedRowsData[0]
|
||||||
|
dataDetail.value = data
|
||||||
|
}
|
||||||
|
|
||||||
|
const showDetail = () => (dialogDetail.value = true)
|
||||||
|
|
||||||
|
const closeDialog = () => (dialogDetail.value = false)
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
queries.gangguan.daftar.selesaiTanpaIDPelanggan,
|
queries.gangguan.daftar.selesaiTanpaIDPelanggan,
|
||||||
|
@ -306,7 +306,7 @@
|
|||||||
<DetailDialog
|
<DetailDialog
|
||||||
:open="dialogDetail"
|
:open="dialogDetail"
|
||||||
title="Detail Rekapitulasi Koreksi Transaksi Individual"
|
title="Detail Rekapitulasi Koreksi Transaksi Individual"
|
||||||
@on-close="closeDetail"
|
@on-close="closeDialog"
|
||||||
:full-width="true"
|
:full-width="true"
|
||||||
>
|
>
|
||||||
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||||
@ -1058,7 +1058,7 @@ const showDetail = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const closeDetail = () => {
|
const closeDialog = () => {
|
||||||
dialogDetail.value = false
|
dialogDetail.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -235,7 +235,7 @@
|
|||||||
<DetailDialog
|
<DetailDialog
|
||||||
:open="dialogDetail"
|
:open="dialogDetail"
|
||||||
title="Detail Rating Per Posko"
|
title="Detail Rating Per Posko"
|
||||||
@on-close="closeDetail"
|
@on-close="closeDialog"
|
||||||
:full-width="true"
|
:full-width="true"
|
||||||
>
|
>
|
||||||
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||||
@ -697,7 +697,7 @@ const showDetail = () => {
|
|||||||
getDetail()
|
getDetail()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const closeDetail = () => {
|
const closeDialog = () => {
|
||||||
dialogDetail.value = false
|
dialogDetail.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -226,7 +226,7 @@
|
|||||||
<DetailDialog
|
<DetailDialog
|
||||||
:open="dialogDetail"
|
:open="dialogDetail"
|
||||||
title="Detail Rating Per Regu"
|
title="Detail Rating Per Regu"
|
||||||
@on-close="closeDetail"
|
@on-close="closeDialog"
|
||||||
:full-width="true"
|
:full-width="true"
|
||||||
>
|
>
|
||||||
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||||
@ -688,7 +688,7 @@ const showDetail = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const closeDetail = () => {
|
const closeDialog = () => {
|
||||||
dialogDetail.value = false
|
dialogDetail.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -172,20 +172,20 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<template #formatText="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer" @click="showData()">
|
<p class="text-left cursor-pointer" @click="showDetail()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatTime="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p class="cursor-pointer !text-right" @click="showData()">
|
<p class="cursor-pointer !text-right" @click="showDetail()">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
|
<DetailDialog :open="dialogDetail" title="Detail Keluhan" @on-close="closeDialog">
|
||||||
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
||||||
@ -323,14 +323,14 @@ const showIndicator = ref(true)
|
|||||||
const shading = ref(true)
|
const shading = ref(true)
|
||||||
const showPane = ref(true)
|
const showPane = ref(true)
|
||||||
const dataDetail = ref<any>()
|
const dataDetail = ref<any>()
|
||||||
const showDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
|
|
||||||
const closeDetail = () => {
|
const closeDialog = () => {
|
||||||
showDetail.value = false
|
dialogDetail.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
const showData = () => {
|
const showDetail = () => {
|
||||||
showDetail.value = true
|
dialogDetail.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
|
@ -178,19 +178,19 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<template #cellCenter="{ data }">
|
<template #cellCenter="{ data }">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer" @click="showDetail()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatText="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer" @click="showData()">
|
<p class="text-left cursor-pointer" @click="showDetail()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatNumber="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer" @click="showData()">
|
<p class="text-right cursor-pointer" @click="showDetail()">
|
||||||
{{
|
{{
|
||||||
isNumber(data.text)
|
isNumber(data.text)
|
||||||
? data.column.caption == '%'
|
? data.column.caption == '%'
|
||||||
@ -202,14 +202,14 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatTime="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p class="cursor-pointer !text-right" @click="showData()">
|
<p class="cursor-pointer !text-right" @click="showDetail()">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
|
<DetailDialog :open="dialogDetail" title="Detail Keluhan" @on-close="closeDialog">
|
||||||
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
||||||
@ -348,14 +348,14 @@ const showIndicator = ref(true)
|
|||||||
const shading = ref(true)
|
const shading = ref(true)
|
||||||
const showPane = ref(true)
|
const showPane = ref(true)
|
||||||
const dataDetail = ref<any>()
|
const dataDetail = ref<any>()
|
||||||
const showDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
|
|
||||||
const closeDetail = () => {
|
const closeDialog = () => {
|
||||||
showDetail.value = false
|
dialogDetail.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
const showData = () => {
|
const showDetail = () => {
|
||||||
showDetail.value = true
|
dialogDetail.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
|
@ -179,20 +179,20 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<template #formatText="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer" @click="showData()">
|
<p class="text-left cursor-pointer" @click="showDetail()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatTime="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p class="cursor-pointer !text-right" @click="showData()">
|
<p class="cursor-pointer !text-right" @click="showDetail()">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
|
<DetailDialog :open="dialogDetail" title="Detail Keluhan" @on-close="closeDialog">
|
||||||
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
||||||
@ -325,14 +325,14 @@ const showIndicator = ref(true)
|
|||||||
const shading = ref(true)
|
const shading = ref(true)
|
||||||
const showPane = ref(true)
|
const showPane = ref(true)
|
||||||
const dataDetail = ref<any>()
|
const dataDetail = ref<any>()
|
||||||
const showDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
|
|
||||||
const closeDetail = () => {
|
const closeDialog = () => {
|
||||||
showDetail.value = false
|
dialogDetail.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
const showData = () => {
|
const showDetail = () => {
|
||||||
showDetail.value = true
|
dialogDetail.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
|
@ -179,19 +179,19 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<template #cellCenter="{ data }">
|
<template #cellCenter="{ data }">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer" @click="showDetail()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatText="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer" @click="showData()">
|
<p class="text-left cursor-pointer" @click="showDetail()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatNumber="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer" @click="showData()">
|
<p class="text-right cursor-pointer" @click="showDetail()">
|
||||||
{{
|
{{
|
||||||
isNumber(data.text)
|
isNumber(data.text)
|
||||||
? data.column.caption == '%'
|
? data.column.caption == '%'
|
||||||
@ -203,14 +203,14 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatTime="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p class="cursor-pointer !text-right" @click="showData()">
|
<p class="cursor-pointer !text-right" @click="showDetail()">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
|
<DetailDialog :open="dialogDetail" title="Detail Keluhan" @on-close="closeDialog">
|
||||||
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
||||||
@ -344,14 +344,14 @@ const showIndicator = ref(true)
|
|||||||
const shading = ref(true)
|
const shading = ref(true)
|
||||||
const showPane = ref(true)
|
const showPane = ref(true)
|
||||||
const dataDetail = ref<any>()
|
const dataDetail = ref<any>()
|
||||||
const showDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
|
|
||||||
const closeDetail = () => {
|
const closeDialog = () => {
|
||||||
showDetail.value = false
|
dialogDetail.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
const showData = () => {
|
const showDetail = () => {
|
||||||
showDetail.value = true
|
dialogDetail.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
|
@ -170,20 +170,20 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<template #formatText="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer" @click="showData()">
|
<p class="text-left cursor-pointer" @click="showDetail()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatTime="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p class="cursor-pointer !text-right" @click="showData()">
|
<p class="cursor-pointer !text-right" @click="showDetail()">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
|
<DetailDialog :open="dialogDetail" title="Detail Keluhan" @on-close="closeDialog">
|
||||||
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
||||||
@ -316,14 +316,14 @@ const showIndicator = ref(true)
|
|||||||
const shading = ref(true)
|
const shading = ref(true)
|
||||||
const showPane = ref(true)
|
const showPane = ref(true)
|
||||||
const dataDetail = ref<any>()
|
const dataDetail = ref<any>()
|
||||||
const showDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
|
|
||||||
const closeDetail = () => {
|
const closeDialog = () => {
|
||||||
showDetail.value = false
|
dialogDetail.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
const showData = () => {
|
const showDetail = () => {
|
||||||
showDetail.value = true
|
dialogDetail.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
|
@ -221,7 +221,7 @@ const shading = ref(true)
|
|||||||
const showPane = ref(true)
|
const showPane = ref(true)
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const dataDetail = ref<any>()
|
const dataDetail = ref<any>()
|
||||||
const showDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
queries.monalisa.gangguan.rekap.rekapitulasiEnsGangguan,
|
queries.monalisa.gangguan.rekap.rekapitulasiEnsGangguan,
|
||||||
|
@ -131,7 +131,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DetailDialog
|
<DetailDialog
|
||||||
:open="showDetail"
|
:open="dialogDetail"
|
||||||
title="Detail Gangguan Belum Selesai"
|
title="Detail Gangguan Belum Selesai"
|
||||||
@on-close="closeDialog"
|
@on-close="closeDialog"
|
||||||
:full-width="true"
|
:full-width="true"
|
||||||
@ -470,15 +470,15 @@ const data = ref<any[]>([])
|
|||||||
const dataSub = ref<any[]>([])
|
const dataSub = ref<any[]>([])
|
||||||
const dataSelected = ref<any>()
|
const dataSelected = ref<any>()
|
||||||
const dataSubSelected = ref<any>()
|
const dataSubSelected = ref<any>()
|
||||||
const showDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
const loadingSubData = ref(false)
|
const loadingSubData = ref(false)
|
||||||
|
|
||||||
const showDialog = () => {
|
const showDialog = () => {
|
||||||
showDetail.value = true
|
dialogDetail.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const closeDialog = () => {
|
const closeDialog = () => {
|
||||||
showDetail.value = false
|
dialogDetail.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
|
@ -176,7 +176,7 @@ const shading = ref(true)
|
|||||||
const showPane = ref(true)
|
const showPane = ref(true)
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const dataDetail = ref<any>()
|
const dataDetail = ref<any>()
|
||||||
const showDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
queries.monalisa.gangguan.rekap.gangguanPerJenisGangguan,
|
queries.monalisa.gangguan.rekap.gangguanPerJenisGangguan,
|
||||||
|
@ -384,7 +384,7 @@ const shading = ref(true)
|
|||||||
const showPane = ref(true)
|
const showPane = ref(true)
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const dataDetail = ref<any>()
|
const dataDetail = ref<any>()
|
||||||
const showDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
const { onResult, onError, loading, refetch } = useQuery(
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
queries.monalisa.gangguan.rekap.jumlahDurasiRptRctGangguan,
|
queries.monalisa.gangguan.rekap.jumlahDurasiRptRctGangguan,
|
||||||
{
|
{
|
||||||
|
@ -288,7 +288,7 @@ const shading = ref(true)
|
|||||||
const showPane = ref(true)
|
const showPane = ref(true)
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const dataDetail = ref<any>()
|
const dataDetail = ref<any>()
|
||||||
const showDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
const { onResult, onError, loading, refetch } = useQuery(
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
queries.monalisa.gangguan.rekap.laporUlangGangguan,
|
queries.monalisa.gangguan.rekap.laporUlangGangguan,
|
||||||
{
|
{
|
||||||
|
@ -152,13 +152,13 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<template #formatTime="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p class="cursor-pointer !text-right" @click="showData()">
|
<p class="cursor-pointer !text-right" @click="showDetail()">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatNumber="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer" @click="showData()">
|
<p class="text-right cursor-pointer" @click="showDetail()">
|
||||||
{{
|
{{
|
||||||
isNumber(data.text)
|
isNumber(data.text)
|
||||||
? data.column.caption == '%'
|
? data.column.caption == '%'
|
||||||
@ -170,14 +170,14 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #formatText="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="cursor-pointer !text-left" @click="showData()">
|
<p class="cursor-pointer !text-left" @click="showDetail()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DetailDialog :open="showDetail" title="Daftar Pencarian Report Number" @on-close="closeDetail">
|
<DetailDialog :open="dialogDetail" title="Daftar Pencarian Report Number" @on-close="closeDialog">
|
||||||
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
||||||
@ -258,7 +258,7 @@ const shading = ref(true)
|
|||||||
const showPane = ref(true)
|
const showPane = ref(true)
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const dataDetail = ref<any>()
|
const dataDetail = ref<any>()
|
||||||
const showDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
const filters = ref({
|
const filters = ref({
|
||||||
type: '',
|
type: '',
|
||||||
keyword: '',
|
keyword: '',
|
||||||
@ -266,12 +266,12 @@ const filters = ref({
|
|||||||
periode: ''
|
periode: ''
|
||||||
})
|
})
|
||||||
|
|
||||||
const closeDetail = () => {
|
const closeDialog = () => {
|
||||||
showDetail.value = false
|
dialogDetail.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
const showData = () => {
|
const showDetail = () => {
|
||||||
showDetail.value = true
|
dialogDetail.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
|
@ -153,7 +153,7 @@ const showIndicator = ref(true)
|
|||||||
const shading = ref(true)
|
const shading = ref(true)
|
||||||
const showPane = ref(true)
|
const showPane = ref(true)
|
||||||
const dataDetail = ref<any>()
|
const dataDetail = ref<any>()
|
||||||
const showDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user