+
No Laporan:
@@ -302,6 +296,130 @@
/>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ data.text }}
+
+
+
+
+
+ {{ data.text }}
+
+
+
+
+
+
+
+
+
+
No Laporan:
+
+
+
+
+
Create Date:
+
+
+
+
+
User:
+
+
+
+
+
Keterangan:
+
+
+
+
@@ -309,7 +427,7 @@
import Filters from '@/components/Form/Filters.vue'
import Type6 from '@/components/Form/FiltersType/Type6.vue'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
@@ -326,14 +444,25 @@ import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql'
import { formatNumber, isNumber } from '@/utils/numbers'
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_MLD1K'
+import { apolloClient } from '@/utils/api/api.graphql'
+import { provideApolloClient } from '@vue/apollo-composable'
+const client = apolloClient()
+provideApolloClient(client)
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref
([])
-const dataSelected = ref({})
+const dataSub = ref([])
+const dataSelected = ref()
+const dataSubSelected = ref()
const dialogDetail = ref(false)
+const closedialogDetail = () => (dialogDetail.value = false)
+const loadingData = ref(false)
+const loadingSubData = ref(false)
+const detailType = ref('form') // form, table
+
const filters = ref()
const reportMeta = ref({
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@@ -343,63 +472,128 @@ const reportMeta = ref({
minJmlLapor: 1,
maxJmlLapor: 1
})
-const dataGridRef = ref(null)
-const clearSelection = () => {
- const dataGrid = dataGridRef.value!.instance!
- dataGrid.clearSelection()
-}
-const onSelectionChanged = ({ selectedRowsData }: any) => {
- if (selectedRowsData[0] != undefined) {
- dataSelected.value = selectedRowsData[0]
+
+const setDetailType = (columnCaption: string) => {
+ console.log('Column Caption', columnCaption)
+
+ if (columnCaption == 'Jml Lapor') {
+ detailType.value = 'table'
+ } else {
+ detailType.value = 'form'
}
- clearSelection()
- showDetail()
}
-const showDetail = () => (dialogDetail.value = true)
+const getDetail = () => {
+ const dateValue = filters.value.periode.split(' s/d ')
+ const selected = dataSelected.value
-const closeDialog = () => (dialogDetail.value = false)
-
-const { onResult, onError, loading, refetch } = useQuery(
- queries.gangguan.daftar.melaporLebihDariSatuKali,
- {
- minJmlLapor: 1,
- maxJmlLapor: 1,
- dateFrom: new Date().toISOString().slice(0, 10),
- dateTo: new Date().toISOString().slice(0, 10),
- posko: 0,
- idUid: 0,
- idUp3: 0
- }
-)
-
-const filterData = (params: any) => {
- const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params
- const dateValue = params.periode.split(' s/d ')
- refetch({
- minJmlLapor: minJmlLapor ? minJmlLapor : 1,
- maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
+ 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),
- posko: posko ? posko.id : 0,
- idUid: uid ? uid.id : 0,
- idUp3: up3 ? up3.id : 0
+ idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
+ idUid: selected?.id_uid ? selected?.id_uid : 0,
+ 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
+ })
+}
+
+const dataGridRef = ref(null)
+const clearSelection = () => {
+ const dataGrid = dataGridRef.value!.instance!
+ dataGrid.clearSelection()
+}
+const showDetail = () => {
+ clearSelection()
+ dataSubSelected.value = null
+ dialogDetail.value = true
+ if (detailType.value == 'table') {
+ getDetail()
+ }
+}
+
+const onDataSelectionChanged = ({
+ selectedRowsData,
+ selectedRowKeys,
+ currentSelectedRowKeys,
+ element,
+ component
+}: any) => {
+ if (selectedRowsData[0] != undefined) {
+ // console.log(selectedRowKeys)
+ // console.log(currentSelectedRowKeys)
+ // console.log(element)
+ // console.log(component)
+
+ dataSelected.value = selectedRowsData[0]
+ showDetail()
+ }
+}
+
+const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
+ const data = selectedRowsData[0]
+ dataSubSelected.value = data
+}
+
+const closeDialog = () => (dialogDetail.value = false)
+
+const filterData = (params: any) => {
+ const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params
+ const dateValue = params.periode.split(' s/d ')
+
+ const { onResult, onError, loading, refetch } = useQuery(
+ queries.gangguan.daftar.melaporLebihDariSatuKali,
+ {
+ minJmlLapor: minJmlLapor ? minJmlLapor : 1,
+ maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
+ 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),
+ posko: posko ? posko.id : 0,
+ idUid: uid ? uid.id : 0,
+ idUp3: up3 ? up3.id : 0
+ }
+ )
+
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali
}
reportMeta.value = filters.value
- console.log(queryResult.data)
})
+
onError((error) => {
console.log(error)
})
+
+ watch(loading, (value) => {
+ loadingData.value = value
+ })
}
const onExporting = (e: any) => {