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

Refactor component imports and add getUidRegional function

Browse Source
This commit is contained in:
probdg 2024-02-11 14:25:18 +07:00
parent b9732be2c9
commit a1212ffa01
57 changed files with 1219 additions and 908 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Form/FiltersType/Type2.vue
View File

@ -1,11 +1,13 @@
<script setup lang="ts"> <script setup lang="ts">
import Select from '@/components/Select.vue' import Select from '@/components/Select.vue'
import { selectedUid, selectedUp3Ulp, fetchUid, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference'; import { selectedUid, selectedUp3Ulp,fetchRegional, fetchUid, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'; const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'; const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'; const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
const regionalPlaceholder = 'Semua Regional'; const regionalPlaceholder = 'Semua Regional';
const bulanPlaceholder = 'Pilih Bulan';
const tahunPlaceholder = 'Pilih Tahun';
const uppp = ref({ id: 0, name: up3Placholder }); const uppp = ref({ id: 0, name: up3Placholder });
const uid = ref({ id: 0, name: uidPlaceholder }); const uid = ref({ id: 0, name: uidPlaceholder });
const ulp = ref({ id: 0, name: ulpPlaceholder }); const ulp = ref({ id: 0, name: ulpPlaceholder });
@ -47,7 +49,7 @@ const setUlp = (value: any) => {
}; };
onMounted(() => { onMounted(() => {
emit('update:filters', data.value) emit('update:filters', data.value)
fetchUid() fetchRegional()
}) })
</script> </script>
@ -55,7 +57,7 @@ onMounted(() => {
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Regional:</label> <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Regional:</label>
<Select @update:selected="setRegional($event)" :data="itemsRegional" :placeholder="regionalPlaceholder" /> <Select @update:selected="setRegional($event)" :data="itemsRegional" :placeholder="regionalPlaceholder" />
</div> </div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -80,8 +82,8 @@ onMounted(() => {
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode</label> <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode</label>
<div class="grid grid-cols-2 gap-x-2"> <div class="grid grid-cols-2 gap-x-2">
<Select :data="months" placeholder="Pilih Bulan" /> <Select :data="months" :placeholder="bulanPlaceholder" />
<Select :data="years" placeholder="Pilih Tahun" /> <Select :data="years" :placeholder="tahunPlaceholder" />
</div> </div>
</div> </div>
</template> </template>

4
src/components/Form/FiltersType/Type6.vue
View File

@ -77,11 +77,11 @@ onMounted(() => {
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Lapor Ulang:</label> <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Lapor Ulang:</label>
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5"> <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
<InputNumber @update:time-value="(value) => { <InputNumber :value="data.minJmlLapor" @update:time-value="(value) => {
data.minJmlLapor = value data.minJmlLapor = value
}" /> }" />
<small class="flex items-center">s/d</small> <small class="flex items-center">s/d</small>
<InputNumber @update:time-value="(value) => { <InputNumber :value="data.maxJmlLapor" @update:time-value="(value) => {
data.maxJmlLapor = value data.maxJmlLapor = value
}" /> }" />
</div> </div>

16
src/components/Form/FiltersType/reference.ts
View File

@ -1,4 +1,4 @@
import { getUid, getUp3, getPosko, getUlp } from '@/utils/network' import { getUid, getUp3, getPosko, getUlp,getUidRegional } from '@/utils/network'
import { ref } from 'vue' import { ref } from 'vue'
import { usePostsStore } from '@/stores/posts' import { usePostsStore } from '@/stores/posts'
import { useUp3Store } from '@/stores/up3' import { useUp3Store } from '@/stores/up3'
@ -94,7 +94,19 @@ const fetchUid = async () => {
console.error('Error fetching data:', error); console.error('Error fetching data:', error);
} }
}; };
const fetchUidWithRegional = async (regional: number) => {
try {
const res = await getUidRegional(regional)
itemsUid.value = res.data.map((item: any) => (
{
id: item.id,
name: item.nama,
}
));
} catch (error) {
console.error('Error fetching data:', error);
}
}
const fetchDataUp3 = async (uid: number) => { const fetchDataUp3 = async (uid: number) => {
try { try {
const res = await getUp3(uid) const res = await getUp3(uid)

3
src/components/Pages/Anomali/Table_61.vue
View File

@ -11,7 +11,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />

3
src/components/Pages/Anomali/Table_62.vue
View File

@ -10,7 +10,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />

3
src/components/Pages/Anomali/Table_63.vue
View File

@ -11,7 +11,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />

3
src/components/Pages/Anomali/Table_64.vue
View File

@ -11,7 +11,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />

3
src/components/Pages/Anomali/Table_65.vue
View File

@ -11,7 +11,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />

3
src/components/Pages/Anomali/Table_66.vue
View File

@ -10,7 +10,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />

3
src/components/Pages/Cico/Table_60.vue
View File

@ -7,7 +7,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />

3
src/components/Pages/Ctt/Table_67.vue
View File

@ -7,7 +7,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />

9
src/components/Pages/Gangguan/Table_1.vue
View File

@ -217,15 +217,10 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { useDialogStore } from '@/stores/dialog' import { useDialogStore } from '@/stores/dialog'
import { useDateStore } from '@/stores/date'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue' import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue' import InputText from '@/components/InputText.vue'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag' import gql from 'graphql-tag'
import { useSearchStore } from '@/stores/filtersAction'
import { usePostsStore } from '@/stores/posts'
import { useUp3Store } from '@/stores/up3'
import { useRegionStore } from '@/stores/region'
const position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
@ -303,8 +298,8 @@ const filterData = (params: any) => {
const uid = params.uid ? params.uid.id : 0 const uid = params.uid ? params.uid.id : 0
const up3 = params.up3 ? params.up3.id : 0 const up3 = params.up3 ? params.up3.id : 0
refetch({ refetch({
dateFrom: dateValue[0].split('-').reverse().join('-'), dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1].split('-').reverse().join('-'), dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko, posko: posko,
idUid: uid, idUid: uid,
idUp3: up3 idUp3: up3

3
src/components/Pages/Gangguan/Table_20.vue
View File

@ -55,8 +55,7 @@
<script setup lang="ts"> <script setup lang="ts">
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 { onMounted, ref } from 'vue' import { ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
DxColumn, DxColumn,

64
src/components/Pages/Keluhan/Table_21.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
@ -9,19 +15,20 @@
<DxPaging :page-size="5" :enabled="true" /> <DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full" <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" /> :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
data-type="number" <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
caption="No" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan" <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan" <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response" <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
@ -32,8 +39,10 @@
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time" <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="posko_asal" caption="Unit Asal" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="posko_asal" caption="Unit Asal"
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER" <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor" <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
@ -144,21 +153,30 @@ const GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_POSKO_LAIN = gql`
} }
} }
` `
const loadingVisible = ref<boolean>(true) const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_POSKO_LAIN, {
onMounted(() => { dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
const filters = useFiltersStore() dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
const { onResult, onError } = useQuery(GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_POSKO_LAIN, { posko: '',
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10), idUid: 0,
dateTo: new Date('2023-10-01').toISOString().slice(0, 10), idUp3: 0
posko: '', })
idUid: 0,
idUp3: 0
})
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const posko = params.posko ? params.posko.id : ''
const uid = params.uid ? params.uid.id : 0
const up3 = params.up3 ? params.up3.id : 0
refetch({
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,
idUid: uid,
idUp3: up3
})
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanDipindahkanKePoskoLain data.value = queryResult.data.daftarKeluhanDipindahkanKePoskoLain
loadingVisible.value = false
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)
@ -167,8 +185,6 @@ onMounted(() => {
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
filters.setConfig({ }
type: 'type-3' const filters = ref();
})
})
</script> </script>

70
src/components/Pages/Keluhan/Table_22.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type10 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@ -8,29 +14,34 @@
<DxPaging :page-size="5" :enabled="true" /> <DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full" <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" /> :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" /> :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan" <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan" <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response" <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery" <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="jml_lapor" caption="Jml Lapor" css-class="custom-table-column" /> <DxColumn :width="120" alignment="center" data-field="jml_lapor" caption="Jml Lapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time" <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time" <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" /> <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER" <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor" <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
@ -43,7 +54,8 @@
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor" <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="posko" caption="Nama ULP" css-class="custom-table-column" /> <DxColumn :width="150" alignment="center" data-field="posko" caption="Nama ULP"
css-class="custom-table-column" />
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>
@ -144,23 +156,37 @@ const GET_DATA = gql`
} }
} }
` `
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_DATA, {
minJmlLapor: 1,
maxJmlLapor: 100,
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
})
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
minJmlLapor: 1,
maxJmlLapor: 100,
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
})
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const posko = params.posko ? params.posko.id : ''
const uid = params.uid ? params.uid.id : 0
const up3 = params.up3 ? params.up3.id : 0
const minJmlLapor = params.minJmlLapor ? params.minJmlLapor : 1;
const maxJmlLapor = params.maxJmlLapor ? params.maxJmlLapor : 100;
refetch({
minJmlLapor: minJmlLapor,
maxJmlLapor: maxJmlLapor,
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,
idUid: uid,
idUp3: up3
})
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanMelaporLebihDariSatuKali data.value = queryResult.data.daftarKeluhanMelaporLebihDariSatuKali
loadingVisible.value = false
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)
@ -169,8 +195,6 @@ onMounted(() => {
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
filters.setConfig({ }
type: 'type-10' const filters = ref();
})
})
</script> </script>

73
src/components/Pages/Keluhan/Table_23.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type11 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@ -8,19 +14,20 @@
<DxPaging :page-size="5" :enabled="true" /> <DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full" <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" /> :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
data-type="number" <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
caption="No" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan" <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan" <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response" <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
@ -31,7 +38,8 @@
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time" <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" /> <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER" <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor" <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
@ -42,7 +50,8 @@
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor" <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="posko" caption="Nama ULP" css-class="custom-table-column" /> <DxColumn :width="150" alignment="center" data-field="posko" caption="Nama ULP"
css-class="custom-table-column" />
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>
@ -50,8 +59,8 @@
<script setup lang="ts"> <script setup lang="ts">
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type11 from '@/components/Form/FiltersType/Type11.vue' import Type11 from '@/components/Form/FiltersType/Type11.vue'
import { onMounted, ref } from 'vue' import { ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
DxColumn, DxColumn,
@ -143,23 +152,35 @@ const GET_DATA = gql`
} }
} }
` `
const loadingVisible = ref<boolean>(true) const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
onMounted(() => { dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
const filters = useFiltersStore() dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
const { onResult, onError } = useQuery(GET_DATA, { minDurasiResponseTime: 0,
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10), maxDurasiResponseTime: 0,
dateTo: new Date('2023-10-01').toISOString().slice(0, 10), posko: '',
minDurasiResponseTime: 0, idUid: 0,
maxDurasiResponseTime: 0, idUp3: 0
posko: '', })
idUid: 0, const filterData = (params: any) => {
idUp3: 0 const dateValue = params.periode.split(' s/d ')
const posko = params.posko ? params.posko.id : ''
const uid = params.uid ? params.uid.id : 0
const up3 = params.up3 ? params.up3.id : 0
const minDurasiResponseTime = params.minDurasiResponseTime ? params.minDurasiResponseTime : 0
const maxDurasiResponseTime = params.maxDurasiResponseTime ? params.maxDurasiResponseTime : 0
refetch({
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),
minDurasiResponseTime: minDurasiResponseTime,
maxDurasiResponseTime: maxDurasiResponseTime,
posko: posko,
idUid: uid,
idUp3: up3
}) })
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanResponseTime data.value = queryResult.data.daftarKeluhanResponseTime
loadingVisible.value = false
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)
@ -168,8 +189,6 @@ onMounted(() => {
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
filters.setConfig({ }
type: 'type-11' const filters = ref();
})
})
</script> </script>

77
src/components/Pages/Keluhan/Table_24.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type11 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@ -8,31 +14,34 @@
<DxPaging :page-size="5" :enabled="true" /> <DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full" <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" /> :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
data-type="number" <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
caption="No" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan" <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan" <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response" <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery" <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor" css-class="custom-table-column" /> <DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time" <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time" <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" /> <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER" <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor" <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
@ -43,7 +52,8 @@
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor" <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="posko" caption="Nama ULP" css-class="custom-table-column" /> <DxColumn :width="150" alignment="center" data-field="posko" caption="Nama ULP"
css-class="custom-table-column" />
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>
@ -144,23 +154,37 @@ const GET_DATA = gql`
} }
} }
` `
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
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),
minDurasiRecoveryTime: 0,
maxDurasiRecoveryTime: 0,
posko: '',
idUid: 0,
idUp3: 0
})
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
minDurasiRecoveryTime: 0,
maxDurasiRecoveryTime: 0,
posko: '',
idUid: 0,
idUp3: 0
})
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const posko = params.posko ? params.posko.id : ''
const uid = params.uid ? params.uid.id : 0
const up3 = params.up3 ? params.up3.id : 0
const minDurasiRecoveryTime = params.minDurasiRecoveryTime ? params.minDurasiRecoveryTime : 0
const maxDurasiRecoveryTime = params.maxDurasiRecoveryTime ? params.maxDurasiRecoveryTime : 0
refetch({
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),
minDurasiRecoveryTime: minDurasiRecoveryTime,
maxDurasiRecoveryTime: maxDurasiRecoveryTime,
posko: posko,
idUid: uid,
idUp3: up3
})
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanRecoveryTime data.value = queryResult.data.daftarKeluhanRecoveryTime
loadingVisible.value = false
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)
@ -169,8 +193,7 @@ onMounted(() => {
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
filters.setConfig({
type: 'type-11' }
}) const filters = ref();
})
</script> </script>

46
src/components/Pages/Keluhan/Table_25.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@ -8,7 +14,8 @@
<DxPaging :page-size="5" :enabled="true" /> <DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full" <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" /> :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -145,21 +152,32 @@ const GET_DATA = gql`
} }
} }
` `
const loadingVisible = ref<boolean>(true)
onMounted(() => { const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
const filters = useFiltersStore() dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
const { onResult, onError } = useQuery(GET_DATA, { dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10), posko: '',
dateTo: new Date('2023-10-01').toISOString().slice(0, 10), idUid: 0,
posko: '', idUp3: 0
idUid: 0, })
idUp3: 0
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const posko = params.posko ? params.posko.id : ''
const uid = params.uid ? params.uid.id : 0
const up3 = params.up3 ? params.up3.id : 0
refetch({
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,
idUid: uid,
idUp3: up3
}) })
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan
loadingVisible.value = false
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)
@ -168,8 +186,6 @@ onMounted(() => {
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
filters.setConfig({ }
type: 'type-3' const filters = ref();
})
})
</script> </script>

64
src/components/Pages/Keluhan/Table_26.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@ -8,16 +14,16 @@
<DxPaging :page-size="5" :enabled="true" /> <DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full" <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" /> :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
data-type="number" <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
caption="No" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor" <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor" <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
@ -26,9 +32,11 @@
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor" <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" /> <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response" <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" /> css-class="custom-table-column" />
@ -40,7 +48,8 @@
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor" <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media" css-class="custom-table-column" /> <DxColumn :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media" <DxColumn :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxDataGrid> </DxDataGrid>
@ -141,21 +150,32 @@ const GET_DATA = gql`
} }
} }
` `
const loadingVisible = ref<boolean>(true)
onMounted(() => { const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
const filters = useFiltersStore() dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
const { onResult, onError } = useQuery(GET_DATA, { dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10), posko: '',
dateTo: new Date('2023-10-01').toISOString().slice(0, 10), idUid: 0,
posko: '', idUp3: 0
idUid: 0, })
idUp3: 0
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const posko = params.posko ? params.posko.id : ''
const uid = params.uid ? params.uid.id : 0
const up3 = params.up3 ? params.up3.id : 0
refetch({
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,
idUid: uid,
idUp3: up3
}) })
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanBerdasarkanMedia data.value = queryResult.data.daftarKeluhanBerdasarkanMedia
loadingVisible.value = false
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)
@ -164,8 +184,6 @@ onMounted(() => {
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
filters.setConfig({ }
type: 'type-3' const filters = ref();
})
})
</script> </script>

66
src/components/Pages/Keluhan/Table_27.vue
View File

@ -1,23 +1,29 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:word-wrap-enabled="true"> :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" /> <DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full" <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" /> :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
data-type="number" <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
caption="No" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Contact Center" <DxColumn :width="170" alignment="center" data-field="" caption="Contact Center"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="UI Dist." css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="" caption="UI Dist." css-class="custom-table-column" />
@ -142,22 +148,35 @@ const GET_DATA = gql`
} }
} }
` `
const loadingVisible = ref<boolean>(true)
onMounted(() => { const { onResult, onError ,loading,refetch} = useQuery(GET_DATA, {
const filters = useFiltersStore() dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
const { onResult, onError } = useQuery(GET_DATA, { dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10), posko: '',
dateTo: new Date('2023-10-01').toISOString().slice(0, 10), idUid: 0,
posko: '', idUp3: 0,
idUid: 0, media: 'Twitter'
idUp3: 0, })
media: 'Twitter' const filters = ref();
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const posko = params.posko ? params.posko.id : ''
const uid = params.uid ? params.uid.id : 0
const up3 = params.up3 ? params.up3.id : 0
const media = params.media ? params.media.id : ''
refetch({
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,
idUid: uid,
idUp3: up3,
media: media
}) })
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanDiselesaikanCC123 data.value = queryResult.data.daftarKeluhanDiselesaikanCC123
loadingVisible.value = false
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)
@ -166,8 +185,5 @@ onMounted(() => {
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
filters.setConfig({ }
type: 'type-3'
})
})
</script> </script>

44
src/components/Pages/Keluhan/Table_28.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@ -7,7 +13,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -74,7 +81,12 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag' import gql from 'graphql-tag'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const dataDetail = ref<any>()
const showDetail = ref(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()
@ -152,21 +164,33 @@ query rekapitulasiKeluhanAll
total_selesai total_selesai
} }
}` }`
const loadingVisible = ref<boolean>(true)
onMounted(() => { const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_DATA, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10), dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10), dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: '', posko: '',
idUid: 0, idUid: 0,
idUp3: 0 idUp3: 0
}) })
const filters = ref();
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const posko = params.posko ? params.posko.id : ''
const uid = params.uid ? params.uid.id : 0
const up3 = params.up3 ? params.up3.id : 0
refetch({
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,
idUid: uid,
idUp3: up3
})
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanAll data.value = queryResult.data.rekapitulasiKeluhanAll
loadingVisible.value = false
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)
@ -175,9 +199,5 @@ onMounted(() => {
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
filters.setConfig({ }
type: 'type-3',
reportButton: true
})
})
</script> </script>

97
src/components/Pages/Keluhan/Table_29.vue
View File

@ -1,5 +1,11 @@
<template> <template>
<div> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type13 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
@ -7,7 +13,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -36,36 +43,36 @@
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column"> <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total" <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avgDurasiResponse" data-type="number" caption="Rata-Rata" <DxColumn :width="150" alignment="center" data-field="avgDurasiResponse" data-type="number"
css-class="custom-table-column" /> caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="maxDurasiResponse" data-type="number" caption="Max" <DxColumn :width="150" alignment="center" data-field="maxDurasiResponse" data-type="number"
css-class="custom-table-column" /> caption="Max" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="minDurasiResponse" data-type="number" caption="Min" <DxColumn :width="150" alignment="center" data-field="minDurasiResponse" data-type="number"
css-class="custom-table-column" /> caption="Min" css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="totalDiatasSlaResponse" data-type="number" caption=">SLA" <DxColumn :width="150" alignment="center" data-field="totalDiatasSlaResponse" data-type="number"
css-class="custom-table-column" /> caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="totalDibawahSlaResponse" data-type="number" caption="≤SLA" <DxColumn :width="150" alignment="center" data-field="totalDibawahSlaResponse" data-type="number"
css-class="custom-table-column" /> caption="≤SLA" css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column"> <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column"> <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total" <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avgDurasiPenyelesaian" data-type="number" caption="Rata-Rata" <DxColumn :width="150" alignment="center" data-field="avgDurasiPenyelesaian" data-type="number"
css-class="custom-table-column" /> caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="maxDurasiPenyelesaian" data-type="number" caption="Max" <DxColumn :width="150" alignment="center" data-field="maxDurasiPenyelesaian" data-type="number"
css-class="custom-table-column" /> caption="Max" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="minDurasiPenyelesaian" data-type="number" caption="Min" <DxColumn :width="150" alignment="center" data-field="minDurasiPenyelesaian" data-type="number"
css-class="custom-table-column" /> caption="Min" css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="totalDiatasSlaPenyelesaian" data-type="number" caption=">SLA" <DxColumn :width="150" alignment="center" data-field="totalDiatasSlaPenyelesaian" data-type="number"
css-class="custom-table-column" /> caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="totalDibawahSlaPenyelesaian" data-type="number" caption="≤SLA" <DxColumn :width="150" alignment="center" data-field="totalDibawahSlaPenyelesaian" data-type="number"
css-class="custom-table-column" /> caption="≤SLA" css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>
@ -95,7 +102,12 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag' import gql from 'graphql-tag'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const dataDetail = ref<any>()
const showDetail = ref(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()
@ -167,21 +179,33 @@ const GET_DATA = gql`
} }
} }
` `
const loadingVisible = ref<boolean>(true) const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
onMounted(() => { dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
const filters = useFiltersStore() dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
const { onResult, onError } = useQuery(GET_DATA, { posko: '',
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10), idUid: 0,
dateTo: new Date('2023-10-01').toISOString().slice(0, 10), idUp3: 0
posko: '', })
idUid: 0, const filters = ref();
idUp3: 0
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const posko = params.posko ? params.posko.id : ''
const uid = params.uid ? params.uid.id : 0
const up3 = params.up3 ? params.up3.id : 0
refetch({
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,
idUid: uid,
idUp3: up3
}) })
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerFungsiBidang data.value = queryResult.data.rekapitulasiKeluhanPerFungsiBidang
loadingVisible.value = false
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)
@ -190,9 +214,6 @@ onMounted(() => {
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
filters.setConfig({
type: 'type-13', }
reportButton: true
})
})
</script> </script>

106
src/components/Pages/Keluhan/Table_30.vue
View File

@ -1,21 +1,26 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:word-wrap-enabled="true"> :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
data-type="number"
caption="No" />
<DxColumn :width="170" alignment="center" data-field="tipe_permasalahan" caption="Jenis Keluhan" <DxColumn :width="170" alignment="center" data-field="tipe_permasalahan" caption="Jenis Keluhan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@ -38,39 +43,38 @@
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column"> <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total" <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata" <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
css-class="custom-table-column" /> caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max" <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number"
css-class="custom-table-column" /> caption="Max" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min" <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number"
css-class="custom-table-column" /> caption="Min" css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number" caption=">SLA" <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
css-class="custom-table-column" /> caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤SLA" <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
css-class="custom-table-column" /> caption="≤SLA" css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column"> <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column"> <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total" <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata" <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
css-class="custom-table-column" /> caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max" <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number"
css-class="custom-table-column" /> caption="Max" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min" <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number"
css-class="custom-table-column" /> caption="Min" css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" caption=">SLA" <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
css-class="custom-table-column" /> caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_recovery" data-type="number" caption="≤SLA" <DxColumn :width="150" alignment="center" data-field="total_dibawah_recovery" data-type="number"
css-class="custom-table-column" /> caption="≤SLA" css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>
@ -78,8 +82,8 @@
<script setup lang="ts"> <script setup lang="ts">
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type3 from '@/components/Form/FiltersType/Type3.vue' import Type3 from '@/components/Form/FiltersType/Type3.vue'
import { onMounted, ref } from 'vue' import { ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
@ -166,22 +170,34 @@ query rekapitulasiKeluhanPerJenisKeluhan
total_selesai total_selesai
} }
}`; }`;
const loadingVisible = ref<boolean>(true) const { onResult, onError, loading,refetch } = useQuery(GET_DATA, {
onMounted(() => { dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
const filters = useFiltersStore() dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
const { onResult, onError } = useQuery(GET_DATA, { posko: "",
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10), idUid: 0,
dateTo: new Date("2023-10-01").toISOString().slice(0, 10), idUp3: 0,
posko: "", })
idUid: 0, const filters = ref();
idUp3: 0,
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const posko = params.posko ? params.posko.id : ''
const uid = params.uid ? params.uid.id : 0
const up3 = params.up3 ? params.up3.id : 0
refetch({
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,
idUid: uid,
idUp3: up3
}) })
onResult(queryResult => { onResult(queryResult => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerJenisKeluhan data.value = queryResult.data.rekapitulasiKeluhanPerJenisKeluhan
; ;
loadingVisible.value = false
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)
@ -190,8 +206,6 @@ onMounted(() => {
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
filters.setConfig({
type: 'type-3' }
})
})
</script> </script>

61
src/components/Pages/Keluhan/Table_31.vue
View File

@ -1,21 +1,26 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type13 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:word-wrap-enabled="true"> :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
data-type="number"
caption="No" />
<DxColumn :width="170" alignment="center" data-field="" caption="Kelompok Keluhan" <DxColumn :width="170" alignment="center" data-field="" caption="Kelompok Keluhan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@ -166,22 +171,34 @@ query rekapitulasiKeluhanPerKelompokKeluhan
total_selesai total_selesai
} }
}`; }`;
const loadingVisible = ref<boolean>(true) const { onResult, onError ,loading,refetch} = useQuery(GET_DATA, {
onMounted(() => { dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
const filters = useFiltersStore() dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
const { onResult, onError } = useQuery(GET_DATA, { posko: "",
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10), idUid: 0,
dateTo: new Date("2023-10-01").toISOString().slice(0, 10), idUp3: 0,
posko: "", })
idUid: 0, const filters = ref();
idUp3: 0,
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const posko = params.posko ? params.posko.id : ''
const uid = params.uid ? params.uid.id : 0
const up3 = params.up3 ? params.up3.id : 0
refetch({
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,
idUid: uid,
idUp3: up3
}) })
onResult(queryResult => { onResult(queryResult => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerKelompokKeluhan data.value = queryResult.data.rekapitulasiKeluhanPerKelompokKeluhan
; ;
loadingVisible.value = false
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)
@ -190,9 +207,5 @@ onMounted(() => {
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
filters.setConfig({ }
type: 'type-13',
reportButton: true
})
})
</script> </script>

49
src/components/Pages/Keluhan/Table_32.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type13 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div> <div>
<DxDataGrid <DxDataGrid
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)]"
@ -18,7 +24,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -299,21 +306,33 @@ const GET_DATA = gql`
} }
} }
` `
const loadingVisible = ref<boolean>(true) const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
onMounted(() => { dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
const filters = useFiltersStore() dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
const { onResult, onError } = useQuery(GET_DATA, { posko: '',
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10), idUid: 0,
dateTo: new Date('2023-10-01').toISOString().slice(0, 10), idUp3: 0
posko: '', })
idUid: 0, const filters = ref();
idUp3: 0
}) const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const posko = params.posko ? params.posko.id : ''
const uid = params.uid ? params.uid.id : 0
const up3 = params.up3 ? params.up3.id : 0
refetch({
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,
idUid: uid,
idUp3: up3
})
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerTanggal data.value = queryResult.data.rekapitulasiKeluhanPerTanggal
loadingVisible.value = false
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)
@ -322,9 +341,5 @@ onMounted(() => {
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
filters.setConfig({ }
type: 'type-13',
reportButton: true
})
})
</script> </script>

49
src/components/Pages/Keluhan/Table_33.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type8 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@ -7,7 +13,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -171,21 +178,32 @@ const GET_DATA = gql`
} }
} }
` `
const loadingVisible = ref<boolean>(true) const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
onMounted(() => { dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
const filters = useFiltersStore() dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
const { onResult, onError } = useQuery(GET_DATA, { posko: '',
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10), idUid: 0,
dateTo: new Date('2023-10-01').toISOString().slice(0, 10), idUp3: 0
posko: '', })
idUid: 0, const filters = ref();
idUp3: 0
}) const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const posko = params.posko ? params.posko.id : ''
const uid = params.uid ? params.uid.id : 0
const up3 = params.up3 ? params.up3.id : 0
refetch({
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,
idUid: uid,
idUp3: up3
})
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerUnit data.value = queryResult.data.rekapitulasiKeluhanPerUnit
loadingVisible.value = false
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)
@ -194,9 +212,6 @@ onMounted(() => {
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
filters.setConfig({
type: 'type-8', }
reportButton: true
})
})
</script> </script>

47
src/components/Pages/Keluhan/Table_34.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@ -7,7 +13,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -132,21 +139,32 @@ const GET_DATA = gql`
} }
} }
` `
const loadingVisible = ref<boolean>(true) const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
onMounted(() => { dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
const filters = useFiltersStore() dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
const { onResult, onError } = useQuery(GET_DATA, { posko: '',
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10), idUid: 0,
dateTo: new Date('2023-10-01').toISOString().slice(0, 10), idUp3: 0
posko: '', })
idUid: 0, const filters = ref();
idUp3: 0
}) const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const posko = params.posko ? params.posko.id : ''
const uid = params.uid ? params.uid.id : 0
const up3 = params.up3 ? params.up3.id : 0
refetch({
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,
idUid: uid,
idUp3: up3
})
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanBerdasarkanMedia data.value = queryResult.data.rekapitulasiKeluhanBerdasarkanMedia
loadingVisible.value = false
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)
@ -155,8 +173,5 @@ onMounted(() => {
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
filters.setConfig({ }
type: 'type-3'
})
})
</script> </script>

39
src/components/Pages/Keluhan/Table_35.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type8 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@ -7,7 +13,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -150,21 +157,34 @@ query rekapitulasiKeluhanRatingPerUnit
total total
} }
}`; }`;
const loadingVisible = ref<boolean>(true) const { onResult, onError ,loading,refetch} = useQuery(GET_DATA, {
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_DATA, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10), dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10), dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
posko: "", posko: "",
idUid: 0, idUid: 0,
idUp3: 0, idUp3: 0,
}) })
const filters = ref();
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const posko = params.posko ? params.posko.id : ''
const uid = params.uid ? params.uid.id : 0
const up3 = params.up3 ? params.up3.id : 0
refetch({
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,
idUid: uid,
idUp3: up3
})
onResult(queryResult => { onResult(queryResult => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanRatingPerUnit; data.value = queryResult.data.rekapitulasiKeluhanRatingPerUnit;
loadingVisible.value = false
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)
@ -173,9 +193,6 @@ onMounted(() => {
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
filters.setConfig({
type: 'type-8', }
reportButton: true
})
})
</script> </script>

3
src/components/Pages/Material/Table_68.vue
View File

@ -7,7 +7,8 @@
<DxPaging :page-size="5" :enabled="true" /> <DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full" <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" /> :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />

3
src/components/Pages/Material/Table_69.vue
View File

@ -7,7 +7,8 @@
<DxPaging :page-size="5" :enabled="true" /> <DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full" <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" /> :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />

43
src/components/Pages/Monalisa/Table_36.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :remote-operations="true" :data-source="data" <DxDataGrid class="max-h-[calc(100vh-140px)]" :remote-operations="true" :data-source="data"
:show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
@ -40,8 +46,7 @@
<script setup lang="ts"> <script setup lang="ts">
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue' import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { computed, onMounted, ref, watch } from 'vue' import { ref, } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
@ -59,10 +64,7 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { useSearchStore } from '@/stores/filtersAction'
import { usePostsStore } from '@/stores/posts'
import { useRegionStore } from '@/stores/region'
import { useUp3Store } from '@/stores/up3'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag' import gql from 'graphql-tag'
const position = { of: '#data' } const position = { of: '#data' }
@ -138,19 +140,16 @@ const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIGANGG
tahun: 2023 tahun: 2023
}) })
const reportButton = useSearchStore() const filterData = (params: any) => {
const detected = computed(() => reportButton.isTriggerChange) const {regional, posko, idUid, idUp3, bulan, tahun} = params;
watch(detected, () => {
const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({ refetch({
regional: '', regional: regional,
posko: posko, posko: posko,
idUid: uid, idUid: idUid ? idUid : 0,
idUp3: up3, idUp3: idUp3 ? idUp3 : 0,
bulan: 10, bulan: bulan ? bulan : 10,
tahun: 2023, tahun: bulan ? tahun : 2023
}) })
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
@ -163,17 +162,11 @@ watch(detected, () => {
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
}) }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
onMounted(() => { const filters= ref();
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script> </script>

42
src/components/Pages/Monalisa/Table_37.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@ -7,10 +13,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
:show-indicator="showIndicator" v-if="loading" v-model:visible="loading" :enabled="true" />
:show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -136,19 +140,16 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaDispatchingTime
bulan: 10, bulan: 10,
tahun: 2023 tahun: 2023
}) })
const reportButton = useSearchStore() const filterData = (params: any) => {
const detected = computed(() => reportButton.isTriggerChange) const { regional, posko, idUid, idUp3, bulan, tahun } = params;
watch(detected, () => {
const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({ refetch({
regional: '', regional: regional,
posko: posko, posko: posko,
idUid: uid, idUid: idUid ? idUid : 0,
idUp3: up3, idUp3: idUp3 ? idUp3 : 0,
bulan: 10, bulan: bulan ? bulan : 10,
tahun: 2023 tahun: bulan ? tahun : 2023
}) })
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
@ -168,18 +169,11 @@ watch(detected, () => {
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
}) }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
onMounted(() => { const filters = ref()
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script> </script>

42
src/components/Pages/Monalisa/Table_38.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@ -7,10 +13,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
:show-indicator="showIndicator" v-if="loading" v-model:visible="loading" :enabled="true" />
:show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -93,20 +97,17 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeKel
bulan: 10, bulan: 10,
tahun: 2023, tahun: 2023,
}) })
const reportButton = useSearchStore() const filterData = (params: any) => {
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => { const { regional, posko, idUid, idUp3, bulan, tahun } = params;
const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({ refetch({
bulan: 10, regional: regional,
tahun: 2023,
regional: "",
posko: posko, posko: posko,
idUid: uid, idUid: idUid ? idUid : 0,
idUp3: up3, idUp3: idUp3 ? idUp3 : 0,
bulan: bulan ? bulan : 10,
tahun: bulan ? tahun : 2023
}) })
onResult(queryResult => { onResult(queryResult => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
@ -123,7 +124,7 @@ watch(detected, () => {
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
}) }
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
@ -159,12 +160,5 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data) console.log(data)
} }
onMounted(() => { const filters = ref()
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script> </script>

42
src/components/Pages/Monalisa/Table_39.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@ -7,10 +13,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
:show-indicator="showIndicator" v-if="loading" v-model:visible="loading" :enabled="true" />
:show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -108,19 +112,16 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaResponseTimeKel
idUid: 0, idUid: 0,
idUp3: 0 idUp3: 0
}) })
const reportButton = useSearchStore() const filterData = (params: any) => {
const detected = computed(() => reportButton.isTriggerChange) const { regional, posko, idUid, idUp3, bulan, tahun } = params;
watch(detected, () => {
const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({ refetch({
bulan: 10, regional: regional,
tahun: 2023,
regional: '',
posko: posko, posko: posko,
idUid: uid, idUid: idUid ? idUid : 0,
idUp3: up3 idUp3: idUp3 ? idUp3 : 0,
bulan: bulan ? bulan : 10,
tahun: bulan ? tahun : 2023
}) })
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
@ -140,7 +141,7 @@ watch(detected, () => {
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
}) }
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
@ -176,12 +177,5 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data) console.log(data)
} }
onMounted(() => { const filters = ref()
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script> </script>

210
src/components/Pages/Monalisa/Table_40.vue
View File

@ -1,174 +1,77 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div> <div>
<DxDataGrid <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
class="max-h-[calc(100vh-140px)]" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:data-source="data" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
:show-column-lines="true" column-resizing-mode="widget" :word-wrap-enabled="true">
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
:position="position" v-if="loading" v-model:visible="loading" :enabled="true" />
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
:width="200" css-class="custom-table-column" />
alignment="center" <DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Gangguan" css-class="custom-table-column">
data-field="nama_posko"
caption="Nama Unit"
css-class="custom-table-column"
/>
<DxColumn
alignment="center"
caption="Jumlah dan Durasi RPT & RCT Gangguan"
css-class="custom-table-column"
>
<DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column"> <DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column"> <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field="total_rpt_bulan"
:width="150" css-class="custom-table-column" />
alignment="center"
caption="a"
data-type="number"
data-field="total_rpt_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" caption="b" data-type="number"
:width="150" data-field="jumlah_gangguan_rpt_bulan" css-class="custom-table-column" />
alignment="center"
caption="b"
data-type="number"
data-field="jumlah_gangguan_rpt_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field="rpt_gangguan_bulan"
:width="150" css-class="custom-table-column" />
alignment="center"
caption="c=a/b"
data-type="number"
data-field="rpt_gangguan_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column"> <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field="total_rct_bulan"
:width="150" css-class="custom-table-column" />
alignment="center"
caption="d"
data-type="number"
data-field="total_rct_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" caption="e" data-type="number"
:width="150" data-field="jumlah_gangguan_rct_bulan" css-class="custom-table-column" />
alignment="center"
caption="e"
data-type="number"
data-field="jumlah_gangguan_rct_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field="rct_gangguan_bulan"
:width="150" css-class="custom-table-column" />
alignment="center"
caption="f=d/e"
data-type="number"
data-field="rct_gangguan_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="s.d Januari 2021" css-class="custom-table-column"> <DxColumn alignment="center" caption="s.d Januari 2021" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column"> <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field="total_rpt_sampai_bulan"
:width="150" css-class="custom-table-column" />
alignment="center"
caption="a"
data-type="number"
data-field="total_rpt_sampai_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" caption="b" data-type="number"
:width="150" data-field="jumlah_gangguan_rpt_sampai_bulan" css-class="custom-table-column" />
alignment="center"
caption="b"
data-type="number"
data-field="jumlah_gangguan_rpt_sampai_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number"
:width="150" data-field="rpt_gangguan_sampai_bulan" css-class="custom-table-column" />
alignment="center"
caption="c=a/b"
data-type="number"
data-field="rpt_gangguan_sampai_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column"> <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field="total_rct_sampai_bulan"
:width="150" css-class="custom-table-column" />
alignment="center"
caption="d"
data-type="number"
data-field="total_rct_sampai_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" caption="e" data-type="number"
:width="150" data-field="jumlah_gangguan_rct_sampai_bulan" css-class="custom-table-column" />
alignment="center"
caption="e"
data-type="number"
data-field="jumlah_gangguan_rct_sampai_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number"
:width="150" data-field="rch_gangguan_sampai_bulan" css-class="custom-table-column" />
alignment="center"
caption="f=d/e"
data-type="number"
data-field="rch_gangguan_sampai_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
@ -251,19 +154,16 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaJumlahDurasiRpt
idUid: 0, idUid: 0,
idUp3: 0 idUp3: 0
}) })
const reportButton = useSearchStore() const filterData = (params: any) => {
const detected = computed(() => reportButton.isTriggerChange) const { regional, posko, idUid, idUp3, bulan, tahun } = params;
watch(detected, () => {
const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({ refetch({
bulan: 10, regional: regional,
tahun: 2023,
regional: '',
posko: posko, posko: posko,
idUid: uid, idUid: idUid ? idUid : 0,
idUp3: up3 idUp3: idUp3 ? idUp3 : 0,
bulan: bulan ? bulan : 10,
tahun: bulan ? tahun : 2023
}) })
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
@ -280,10 +180,10 @@ watch(detected, () => {
console.log(queryResult.loading) console.log(queryResult.loading)
console.log(queryResult.networkStatus) console.log(queryResult.networkStatus)
}) })
onError((error) => { onError((error) => {
console.log(error) console.log(error)
})
}) })
}
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
@ -318,12 +218,6 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data) console.log(data)
} }
onMounted(() => { const filters = ref()
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script> </script>

48
src/components/Pages/Monalisa/Table_41.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@ -14,11 +20,15 @@
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" <DxColumn :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="NO" css-class="custom-table-column" /> :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="NO"
css-class="custom-table-column" />
<DxColumn alignment="center" data-field="id_gangguan" caption="ID Gangguan" css-class="custom-table-column" /> <DxColumn alignment="center" data-field="id_gangguan" caption="ID Gangguan" css-class="custom-table-column" />
<DxColumn alignment="center" data-field="tipe_permasalahan" caption="Jenis Gangguan" css-class="custom-table-column" /> <DxColumn alignment="center" data-field="tipe_permasalahan" caption="Jenis Gangguan"
<DxColumn :width="170" alignment="center" data-field="jumlah" caption="Jumlah" css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="persen_gangguan" caption="%" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="jumlah" caption="Jumlah"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="persen_gangguan" caption="%"
css-class="custom-table-column" />
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>
@ -89,19 +99,16 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanPerJeni
idUid: 0, idUid: 0,
idUp3: 0 idUp3: 0
}) })
const reportButton = useSearchStore() const filterData = (params: any) => {
const detected = computed(() => reportButton.isTriggerChange) const { regional, posko, idUid, idUp3, bulan, tahun } = params;
watch(detected, () => {
const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({ refetch({
bulan: 10, regional: regional,
tahun: 2023,
regional: '',
posko: posko, posko: posko,
idUid: uid, idUid: idUid ? idUid : 0,
idUp3: up3 idUp3: idUp3 ? idUp3 : 0,
bulan: bulan ? bulan : 10,
tahun: bulan ? tahun : 2023
}) })
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
@ -121,7 +128,7 @@ watch(detected, () => {
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
}) }
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
@ -156,12 +163,5 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data) console.log(data)
} }
onMounted(() => { const filters = ref()
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script> </script>

39
src/components/Pages/Monalisa/Table_42.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@ -7,7 +13,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -105,19 +112,16 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLap
idUid: 0, idUid: 0,
idUp3: 0 idUp3: 0
}) })
const reportButton = useSearchStore() const filterData = (params: any) => {
const detected = computed(() => reportButton.isTriggerChange) const { regional, posko, idUid, idUp3, bulan, tahun } = params;
watch(detected, () => {
const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({ refetch({
bulan: 10, regional: regional,
tahun: 2023,
regional: '',
posko: posko, posko: posko,
idUid: uid, idUid: idUid ? idUid : 0,
idUp3: up3 idUp3: idUp3 ? idUp3 : 0,
bulan: bulan ? bulan : 10,
tahun: bulan ? tahun : 2023
}) })
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
@ -137,7 +141,7 @@ watch(detected, () => {
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
}) }
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
@ -172,12 +176,5 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data) console.log(data)
} }
onMounted(() => { const filters = ref()
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script> </script>

39
src/components/Pages/Monalisa/Table_43.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@ -7,7 +13,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -105,19 +112,16 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiEns
idUid: 0, idUid: 0,
idUp3: 0 idUp3: 0
}) })
const reportButton = useSearchStore() const filterData = (params: any) => {
const detected = computed(() => reportButton.isTriggerChange) const {regional, posko, idUid, idUp3, bulan, tahun} = params;
watch(detected, () => {
const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({ refetch({
bulan: 10, regional: regional,
tahun: 2023,
regional: '',
posko: posko, posko: posko,
idUid: uid, idUid: idUid ? idUid : 0,
idUp3: up3 idUp3: idUp3 ? idUp3 : 0,
bulan: bulan ? bulan : 10,
tahun: bulan ? tahun : 2023
}) })
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
@ -137,7 +141,7 @@ watch(detected, () => {
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
}) }
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
@ -172,12 +176,5 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data) console.log(data)
} }
onMounted(() => { const filters = ref()
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script> </script>

24
src/components/Pages/Monalisa/Table_44.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@ -6,7 +12,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -93,9 +100,7 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanBelumSe
idUid: 0, idUid: 0,
idUp3: 0 idUp3: 0
}) })
const reportButton = useSearchStore() const filterData = (params: any) => {
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const posko = usePostsStore().getData() ? usePostsStore().getData() : '' const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0 const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0 const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
@ -125,7 +130,7 @@ watch(detected, () => {
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
}) }
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
@ -160,12 +165,5 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data) console.log(data)
} }
onMounted(() => { const filters = ref()
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script> </script>

24
src/components/Pages/Monalisa/Table_45.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@ -7,7 +13,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -38,7 +45,7 @@
<script setup lang="ts"> <script setup lang="ts">
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue' import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { onMounted } from 'vue' import { ref } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@ -81,13 +88,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const filterData = (params: any) => {
onMounted(() => { console.log(params)
const filters = useFiltersStore() }
const filters = ref()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script> </script>

34
src/components/Pages/Monalisa/Table_46.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@ -7,7 +13,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -38,7 +45,7 @@
<script setup lang="ts"> <script setup lang="ts">
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue' import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { onMounted } from 'vue' import { ref } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@ -47,7 +54,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const loading = ref(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()
@ -81,13 +95,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const filterData = (params:any) =>
onMounted(() => { {
const filters = useFiltersStore() console.log(params)
}
filters.setConfig({ const filters = ref()
type: 'type-2',
reportButton: true
})
})
</script> </script>

37
src/components/Pages/Monalisa/Table_47.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@ -7,7 +13,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -36,8 +43,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { ref } from 'vue'
import { useFiltersStore } from '@/stores/filters' import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
@ -45,7 +53,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const loading = ref(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()
@ -79,13 +94,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const filterData = (params:any) =>
onMounted(() => { {
const filters = useFiltersStore() console.log(params)
}
filters.setConfig({ const filters = ref()
type: 'type-2',
reportButton: true
})
})
</script> </script>

37
src/components/Pages/Monalisa/Table_48.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@ -7,7 +13,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -72,8 +79,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { ref } from 'vue'
import { useFiltersStore } from '@/stores/filters' import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
@ -81,7 +89,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const loading = ref(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()
@ -115,13 +130,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const filterData = (params:any) =>
onMounted(() => { {
const filters = useFiltersStore() console.log(params)
}
filters.setConfig({ const filters = ref()
type: 'type-2',
reportButton: true
})
})
</script> </script>

37
src/components/Pages/Monalisa/Table_49.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@ -6,7 +12,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -22,8 +29,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { ref } from 'vue'
import { useFiltersStore } from '@/stores/filters' import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
@ -31,7 +39,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const loading = ref(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()
@ -65,13 +80,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const filterData = (params:any) =>
onMounted(() => { {
const filters = useFiltersStore() console.log(params)
}
filters.setConfig({ const filters = ref()
type: 'type-2',
reportButton: true
})
})
</script> </script>

37
src/components/Pages/Monalisa/Table_50.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@ -7,7 +13,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -36,8 +43,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { ref } from 'vue'
import { useFiltersStore } from '@/stores/filters' import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
@ -45,7 +53,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const loading = ref(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()
@ -79,13 +94,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const filterData = (params:any) =>
onMounted(() => { {
const filters = useFiltersStore() console.log(params)
}
filters.setConfig({ const filters = ref()
type: 'type-2',
reportButton: true
})
})
</script> </script>

37
src/components/Pages/Monalisa/Table_51.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@ -6,7 +12,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -25,8 +32,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { ref } from 'vue'
import { useFiltersStore } from '@/stores/filters' import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
@ -34,7 +42,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const loading = ref(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()
@ -68,13 +83,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const filterData = (params:any) =>
onMounted(() => { {
const filters = useFiltersStore() console.log(params)
}
filters.setConfig({ const filters = ref()
type: 'type-2',
reportButton: true
})
})
</script> </script>

37
src/components/Pages/Monalisa/Table_52.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@ -7,7 +13,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -82,8 +89,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { ref } from 'vue'
import { useFiltersStore } from '@/stores/filters' import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
@ -91,7 +99,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const loading = ref(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()
@ -125,13 +140,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const filterData = (params:any) =>
onMounted(() => { {
const filters = useFiltersStore() console.log(params)
}
filters.setConfig({ const filters = ref()
type: 'type-2',
reportButton: true
})
})
</script> </script>

38
src/components/Pages/Monalisa/Table_53.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@ -7,7 +13,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -44,8 +51,10 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { ref } from 'vue'
import { useFiltersStore } from '@/stores/filters' import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
@ -53,7 +62,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const loading = ref(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()
@ -87,13 +103,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const filterData = (params:any) =>
onMounted(() => { {
const filters = useFiltersStore() console.log(params)
}
filters.setConfig({ const filters = ref()
type: 'type-2',
reportButton: true
})
})
</script> </script>

37
src/components/Pages/Monalisa/Table_54.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@ -7,7 +13,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -34,8 +41,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { ref } from 'vue'
import { useFiltersStore } from '@/stores/filters' import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
@ -43,7 +51,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const loading = ref(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()
@ -77,13 +92,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const filterData = (params:any) =>
onMounted(() => { {
const filters = useFiltersStore() console.log(params)
}
filters.setConfig({ const filters = ref()
type: 'type-2',
reportButton: true
})
})
</script> </script>

37
src/components/Pages/Monalisa/Table_55.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@ -7,7 +13,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -36,8 +43,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { ref } from 'vue'
import { useFiltersStore } from '@/stores/filters' import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
@ -45,7 +53,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const loading = ref(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()
@ -79,13 +94,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const filterData = (params:any) =>
onMounted(() => { {
const filters = useFiltersStore() console.log(params)
}
filters.setConfig({ const filters = ref()
type: 'type-2',
reportButton: true
})
})
</script> </script>

37
src/components/Pages/Monalisa/Table_56.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@ -7,7 +13,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -69,8 +76,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { ref } from 'vue'
import { useFiltersStore } from '@/stores/filters' import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
@ -78,7 +86,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const loading = ref(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()
@ -112,13 +127,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const filterData = (params:any) =>
onMounted(() => { {
const filters = useFiltersStore() console.log(params)
}
filters.setConfig({ const filters = ref()
type: 'type-2',
reportButton: true
})
})
</script> </script>

37
src/components/Pages/Monalisa/Table_57.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@ -7,7 +13,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -44,8 +51,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { ref } from 'vue'
import { useFiltersStore } from '@/stores/filters' import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
@ -53,7 +61,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const loading = ref(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()
@ -87,13 +102,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const filterData = (params:any) =>
onMounted(() => { {
const filters = useFiltersStore() console.log(params)
}
filters.setConfig({ const filters = ref()
type: 'type-2',
reportButton: true
})
})
</script> </script>

37
src/components/Pages/Monalisa/Table_58.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@ -7,7 +13,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -34,8 +41,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { ref } from 'vue'
import { useFiltersStore } from '@/stores/filters' import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
@ -43,7 +51,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const loading = ref(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()
@ -77,13 +92,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const filterData = (params:any) =>
onMounted(() => { {
const filters = useFiltersStore() console.log(params)
}
filters.setConfig({ const filters = ref()
type: 'type-2',
reportButton: true
})
})
</script> </script>

35
src/components/Pages/Monalisa/Table_59.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@ -7,7 +13,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -37,8 +44,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import Filters from '@/components/Form/Filters.vue'
import { useFiltersStore } from '@/stores/filters' import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
@ -46,7 +54,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const dataDetail = ref<any>()
const showDetail = ref(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()
@ -80,13 +93,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const filterData = (params:any) =>
onMounted(() => { {
const filters = useFiltersStore() console.log(params)
}
filters.setConfig({ const filters = ref()
type: 'type-2',
reportButton: true
})
})
</script> </script>

14
src/components/Pages/PencarianData/Table_71.vue
View File

@ -7,7 +7,8 @@
<DxPaging :page-size="5" :enabled="true" /> <DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full" <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" /> :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
@ -36,11 +37,18 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { onMounted,ref } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const loading = ref(false)
onMounted(() => { onMounted(() => {
const filters = useFiltersStore() const filters = useFiltersStore()

13
src/components/Pages/Transaksi/Table_70.vue
View File

@ -7,7 +7,8 @@
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -31,7 +32,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { onMounted,ref } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@ -40,7 +41,13 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const dataDetail = ref<any>()
const showDetail = ref(false)
const loading = ref(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()

3
src/utils/network.ts
View File

@ -5,9 +5,10 @@ const instance = axios.create({
}) })
const getUid = async () => await instance.get('/uid') const getUid = async () => await instance.get('/uid')
const getUidRegional = async (regional: number) => await instance.get('/uid?regional=' + regional)
const getMedia = async () => await instance.get('/media') const getMedia = async () => await instance.get('/media')
const getJenisTransaksi = async () => await instance.get('/jenisTransaksi') const getJenisTransaksi = async () => await instance.get('/jenisTransaksi')
const getUp3 = async (uid: number) => await instance.get('/up3?uid=' + uid) const getUp3 = async (uid: number) => await instance.get('/up3?uid=' + uid)
const getUlp = async (up3: number) => await instance.get('/ulp?up3=' + up3) const getUlp = async (up3: number) => await instance.get('/ulp?up3=' + up3)
const getPosko = async (uppp: number) => await instance.get('/posko?up3=' + uppp) const getPosko = async (uppp: number) => await instance.get('/posko?up3=' + uppp)
export { getUid, getUp3, getPosko, getUlp, getMedia, getJenisTransaksi } export { getUid, getUp3, getPosko, getUlp, getMedia, getJenisTransaksi, getUidRegional}