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

Update Anomali_LAPPGP.vue and Anomali_LAPPGU_LPT.vue components

Browse Source
This commit is contained in:
Dede Fuji Abdul
2024-04-01 14:50:49 +07:00
parent f1f7ab7871
commit 7766351568
4 changed files with 209 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
View File

@ -29,8 +29,7 @@
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
@ -104,7 +103,7 @@
data-type="number"
caption="Marking"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberPLNMobileMarking"
/>
<DxColumn
:width="150"
@ -113,7 +112,7 @@
data-type="number"
caption="Non Marking"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberPLNMobileNonMarking"
/>
</DxColumn>
</DxColumn>
@ -126,7 +125,7 @@
data-type="number"
caption="Marking"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberCCMarking"
/>
<DxColumn
:width="150"
@ -135,7 +134,7 @@
data-type="number"
caption="Non Marking"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberCCNonMarking"
/>
</DxColumn>
</DxColumn>
@ -148,7 +147,7 @@
data-type="number"
caption="Marking"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberTotalMarking"
/>
<DxColumn
:width="150"
@ -157,7 +156,7 @@
data-type="number"
caption="Non Marking"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberTotalNonMarking"
/>
</DxColumn>
</DxColumn>
@ -235,8 +234,80 @@
</DxColumn>
</DxColumn>
<template #formatNumberPLNMobileMarking="{ data }">
<p class="text-right cursor-pointer" @click="setParameterRequest('PLN Mobile', 1)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberPLNMobileNonMarking="{ data }">
<p class="text-right cursor-pointer" @click="setParameterRequest('PLN Mobile', 2)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberCCMarking="{ data }">
<p class="text-right cursor-pointer" @click="setParameterRequest('Call PLN 123', 1)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberCCNonMarking="{ data }">
<p class="text-right cursor-pointer" @click="setParameterRequest('Call PLN 123', 2)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberTotalMarking="{ data }">
<p class="text-right cursor-pointer" @click="setParameterRequest('', 1)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberTotalNonMarking="{ data }">
<p class="text-right cursor-pointer" @click="setParameterRequest('', 2)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
<p class="text-right cursor-pointer" @click="setParameterRequest(null, null)">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -248,19 +319,19 @@
</template>
<template #formatPercentage="{ data }">
<p class="text-right cursor-pointer">
<p class="text-right cursor-pointer" @click="setParameterRequest(null, null)">
{{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
</p>
</template>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
<p class="text-left cursor-pointer" @click="setParameterRequest(null, null)">
{{ data.text }}
</p>
</template>
<template #formatTime="{ data }">
<p class="!text-right">
<p class="!text-right" @click="setParameterRequest(null, null)">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -397,6 +468,7 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
const position = { of: '#data' }
const showIndicator = ref(true)
@ -404,29 +476,115 @@ const shading = ref(true)
const showPane = ref(true)
const props = defineProps({
data: Array as () => any[],
filters: Object as () => any,
loading: {
type: Boolean,
default: false
}
})
const filters = ref<any>(computed(() => props.filters))
const data = computed(() => props.data)
const dataSub = ref<any[]>([])
const dataSelected = ref<any>({})
const dataSubSelected = ref<any>({})
const dataSelected = ref<any>(null)
const dataSubSelected = ref<any>(null)
const dialogDetail = ref(false)
const loadingData = ref(computed(() => props.loading))
const loadingSubData = ref(false)
const agreeToShowDialog = ref(false)
const mediaSelected = ref<any>(null)
const markingSelected = ref<any>(null)
const emit = defineEmits(['update:dataSub', 'update:loadingSubData'])
const setParameterRequest = (media: any, marking: any) => {
mediaSelected.value = media
markingSelected.value = marking
if (media != null && marking != null) {
agreeToShowDialog.value = true
} else {
agreeToShowDialog.value = false
}
}
const resetData = () => {
dataSub.value = []
dataSubSelected.value = null
}
const getDetail = async () => {
resetData()
const { ulp, uid, up3, jenisLaporan, periode } = filters.value
console.table('LAPPGU', jenisLaporan)
console.log('Media', mediaSelected.value)
console.log('isMarking', markingSelected.value)
console.log('periode', periode)
const dateValue = periode.split(' s/d ')
const selected = dataSelected.value
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: selected?.id_ulp ? selected?.id_ulp : 0,
idUid: selected?.id_uid ? selected?.id_uid : 0,
idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
namaRegional: '',
media: mediaSelected.value,
isMarking: markingSelected.value
}
loadingSubData.value = true
emit('update:loadingSubData', loadingSubData.value)
await requestGraphQl(
jenisLaporan.name == 'Laporan Berulang Unit'
? queries.anomali.gangguan.petugasBerulangDetail
: jenisLaporan.name == 'Laporan Rating Negatif'
? queries.anomali.gangguan.petugasRatingNegatifDetail
: queries.anomali.gangguan.petugasSkipStepDetail,
query
)
.then((result) => {
if (result.data.data != undefined) {
if (jenisLaporan.name == 'Laporan Berulang Unit') {
dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanUnitBerulang
} else if (jenisLaporan.name == 'Laporan Rating Negatif') {
dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanUnitRatingNegatif
} else {
dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanUnitSkipStep
}
} else {
dataSub.value = []
}
emit('update:dataSub', dataSub.value)
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingSubData.value = false
emit('update:loadingSubData', loadingSubData.value)
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
clearSelection()
dialogDetail.value = true
dataSub.value = []
dataSubSelected.value = null
if (agreeToShowDialog.value) {
dialogDetail.value = true
getDetail()
}
}
const closeDialog = () => {
dialogDetail.value = false
}
const loading = ref(computed(() => props.loading))
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -460,7 +618,7 @@ const onExporting = (e: any) => {
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
showDetail()
}
showDetail()
}
</script>