Update network base URL and table columns
This commit is contained in:
		| @@ -12,17 +12,14 @@ | ||||
|             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> | ||||
|             <DxColumnFixing :enabled="true" /> | ||||
|  | ||||
|              <DxColumn css-class="custom-table-column" :width="50" alignment="center" | ||||
|             :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" | ||||
|              data-type="number" | ||||
|                 caption="No" /> | ||||
|             <DxColumn css-class="custom-table-column" :width="50" alignment="center" | ||||
|                 :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" /> | ||||
|             <DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media" | ||||
|                 css-class="custom-table-column" /> | ||||
|             <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column"> | ||||
|                 <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number" | ||||
|                     :caption="i" css-class="custom-table-column" /> | ||||
|             </DxColumn> | ||||
|  | ||||
|         </DxDataGrid> | ||||
|     </div> | ||||
| </template> | ||||
| @@ -31,18 +28,27 @@ | ||||
| import { onMounted, ref } from 'vue' | ||||
| import { useFiltersStore } from '@/stores/filters' | ||||
| 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 { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' | ||||
| import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' | ||||
| import { saveAs } from 'file-saver' | ||||
| import { Workbook } from 'exceljs' | ||||
| import { useQuery } from '@vue/apollo-composable' | ||||
| import gql from 'graphql-tag'; | ||||
| const position = { of: '#data' }; | ||||
| const showIndicator = ref(true); | ||||
| const shading = ref(true); | ||||
| const showPane = ref(true); | ||||
| import gql from 'graphql-tag' | ||||
| const position = { of: '#data' } | ||||
| const showIndicator = ref(true) | ||||
| const shading = ref(true) | ||||
| const showPane = ref(true) | ||||
| const onExporting = (e: any) => { | ||||
|     if (e.format === 'pdf') { | ||||
|         const doc = new jsPDF() | ||||
| @@ -50,7 +56,7 @@ const onExporting = (e: any) => { | ||||
|         exportToPdf({ | ||||
|             jsPDFDocument: doc, | ||||
|             component: e.component, | ||||
|             indent: 5, | ||||
|             indent: 5 | ||||
|         }).then(() => { | ||||
|             doc.save(`.pdf`) | ||||
|         }) | ||||
| @@ -61,7 +67,7 @@ const onExporting = (e: any) => { | ||||
|         exportToExcel({ | ||||
|             component: e.component, | ||||
|             worksheet, | ||||
|             autoFilterEnabled: true, | ||||
|             autoFilterEnabled: true | ||||
|         }).then(() => { | ||||
|             workbook.xlsx.writeBuffer().then((buffer: any) => { | ||||
|                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') | ||||
| @@ -77,71 +83,71 @@ const onSelectionChanged = ({ selectedRowsData }: any) => { | ||||
|     console.log(data) | ||||
| } | ||||
|  | ||||
|  | ||||
| const data = ref<any[]>([]) | ||||
| const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql` | ||||
| query rekapitulasiGangguanBerdasarkanMedia( | ||||
|   query rekapitulasiGangguanBerdasarkanMedia( | ||||
|     $dateFrom: Date! | ||||
|     $dateTo: Date! | ||||
|     $posko: String! | ||||
|     $idUid: Int! | ||||
|     $idUp3: Int! | ||||
| ) { | ||||
|   ) { | ||||
|     rekapitulasiGangguanBerdasarkanMedia( | ||||
|         dateFrom: $dateFrom | ||||
|         dateTo: $dateTo | ||||
|         posko: $posko | ||||
|         idUid: $idUid | ||||
|         idUp3: $idUp3 | ||||
|       dateFrom: $dateFrom | ||||
|       dateTo: $dateTo | ||||
|       posko: $posko | ||||
|       idUid: $idUid | ||||
|       idUp3: $idUp3 | ||||
|     ) { | ||||
|                 media | ||||
|             tgl1 | ||||
|             tgl10 | ||||
|             tgl11 | ||||
|             tgl12 | ||||
|             tgl13 | ||||
|             tgl14 | ||||
|             tgl15 | ||||
|             tgl16 | ||||
|             tgl17 | ||||
|             tgl18 | ||||
|             tgl19 | ||||
|             tgl2 | ||||
|             tgl20 | ||||
|             tgl21 | ||||
|             tgl22 | ||||
|             tgl23 | ||||
|             tgl24 | ||||
|             tgl25 | ||||
|             tgl26 | ||||
|             tgl27 | ||||
|             tgl28 | ||||
|             tgl29 | ||||
|             tgl3 | ||||
|             tgl30 | ||||
|             tgl31 | ||||
|             tgl4 | ||||
|             tgl5 | ||||
|             tgl6 | ||||
|             tgl7 | ||||
|             tgl8 | ||||
|             tgl9 | ||||
|         } | ||||
| }`; | ||||
|       media | ||||
|       tgl1 | ||||
|       tgl10 | ||||
|       tgl11 | ||||
|       tgl12 | ||||
|       tgl13 | ||||
|       tgl14 | ||||
|       tgl15 | ||||
|       tgl16 | ||||
|       tgl17 | ||||
|       tgl18 | ||||
|       tgl19 | ||||
|       tgl2 | ||||
|       tgl20 | ||||
|       tgl21 | ||||
|       tgl22 | ||||
|       tgl23 | ||||
|       tgl24 | ||||
|       tgl25 | ||||
|       tgl26 | ||||
|       tgl27 | ||||
|       tgl28 | ||||
|       tgl29 | ||||
|       tgl3 | ||||
|       tgl30 | ||||
|       tgl31 | ||||
|       tgl4 | ||||
|       tgl5 | ||||
|       tgl6 | ||||
|       tgl7 | ||||
|       tgl8 | ||||
|       tgl9 | ||||
|     } | ||||
|   } | ||||
| ` | ||||
| const loadingVisible = ref<boolean>(true) | ||||
| onMounted(() => { | ||||
|     const filters = useFiltersStore() | ||||
|     const { onResult, onError } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, { | ||||
|         dateFrom: new Date("2023-10-01").toISOString().slice(0, 10), | ||||
|         dateTo: new Date("2023-10-01").toISOString().slice(0, 10), | ||||
|         posko: "", | ||||
|         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, | ||||
|         idUp3: 0 | ||||
|     }) | ||||
|  | ||||
|     onResult(queryResult => { | ||||
|     onResult((queryResult) => { | ||||
|         if (queryResult.data != undefined) { | ||||
|             data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia; | ||||
|             data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia | ||||
|             loadingVisible.value = false | ||||
|         } | ||||
|         console.log(queryResult.data) | ||||
| @@ -156,4 +162,4 @@ onMounted(() => { | ||||
|         reportButton: true | ||||
|     }) | ||||
| }) | ||||
| </script> | ||||
| </script> | ||||
|   | ||||
		Reference in New Issue
	
	Block a user