implemented filters to modul gangguan

src/assets/css/style.css

@@ -962,10 +962,6 @@ select {
   z-index: 50;
 }
 
-.z-\[9999\] {
-  z-index: 9999;
-}
-
 .order-last {
   order: 9999;
 }

src/components/Pages/Gangguan/Table_10.vue

@@ -73,6 +73,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } 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 { jsPDF } from 'jspdf'
@@ -115,4 +117,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-1',
+        reportButton: true
+    })
+})
 </script>

src/components/Pages/Gangguan/Table_11.vue

@@ -71,6 +71,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } 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 { jsPDF } from 'jspdf'
@@ -113,4 +115,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-8',
+        reportButton: true
+    })
+})
 </script>

src/components/Pages/Gangguan/Table_12.vue

@@ -72,6 +72,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } 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 { jsPDF } from 'jspdf'
@@ -114,4 +116,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-9'
+    })
+})
 </script>

src/components/Pages/Gangguan/Table_13.vue

@@ -72,6 +72,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } 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 { jsPDF } from 'jspdf'
@@ -114,4 +116,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-9'
+    })
+})
 </script>

src/components/Pages/Gangguan/Table_14.vue

@@ -32,6 +32,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } 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 { jsPDF } from 'jspdf'
@@ -74,4 +76,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-1',
+        reportButton: true
+    })
+})
 </script>

src/components/Pages/Gangguan/Table_15.vue

@@ -22,6 +22,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } 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 { jsPDF } from 'jspdf'
@@ -64,4 +66,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-1',
+        reportButton: true
+    })
+})
 </script>

src/components/Pages/Gangguan/Table_16.vue

@@ -138,6 +138,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } 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 { jsPDF } from 'jspdf'
@@ -180,4 +182,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-1',
+        reportButton: true
+    })
+})
 </script>

src/components/Pages/Gangguan/Table_17.vue

@@ -62,6 +62,7 @@
 </template>
 
 <script setup lang="ts">
+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 { onMounted, ref } from 'vue'
@@ -140,6 +141,13 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 onMounted(() => {
     createDummy()
+    
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-1',
+        reportButton: true
+    })
 })
 
 </script>

src/components/Pages/Gangguan/Table_18.vue

@@ -62,6 +62,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } 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 { jsPDF } from 'jspdf'
@@ -105,5 +107,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
 
+    filters.setConfig({
+        type: 'type-1',
+        reportButton: true
+    })
+})
 </script>

src/components/Pages/Gangguan/Table_19.vue

@@ -43,6 +43,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } 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 { jsPDF } from 'jspdf'
@@ -86,5 +88,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
 
+    filters.setConfig({
+        type: 'type-1',
+        reportButton: true
+    })
+})
 </script>

src/components/Pages/Gangguan/Table_2.vue

@@ -44,7 +44,16 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
+import { useFiltersStore } from '@/stores/filters'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-6',
+    })
+})
 </script>

src/components/Pages/Gangguan/Table_20.vue

@@ -43,6 +43,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } 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 { jsPDF } from 'jspdf'
@@ -86,5 +88,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+onMounted(() => {
+    const filters = useFiltersStore()
 
+    filters.setConfig({
+        type: 'type-1',
+        reportButton: true
+    })
+})
 </script>

src/components/Pages/Gangguan/Table_3.vue

@@ -43,7 +43,16 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
+import { useFiltersStore } from '@/stores/filters'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-7',
+    })
+})
 </script>

src/components/Pages/Gangguan/Table_4.vue

@@ -45,7 +45,16 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
+import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-7',
+    })
+})
 </script>

src/components/Pages/Gangguan/Table_5.vue

@@ -43,7 +43,16 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
+import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-1',
+    })
+})
 </script>

src/components/Pages/Gangguan/Table_6.vue

@@ -41,7 +41,16 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
+import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-16',
+    })
+})
 </script>

src/components/Pages/Gangguan/Table_7.vue

@@ -43,7 +43,16 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
+import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-1',
+    })
+})
 </script>

src/components/Pages/Gangguan/Table_8.vue

@@ -64,6 +64,7 @@
 </template>
 
 <script setup lang="ts">
+import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { onMounted, ref } from 'vue'
@@ -142,6 +143,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 onMounted(() => {
     createDummy()
-})
 
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-1',
+        reportButton: true
+    })
+})
 </script>

src/components/Pages/Gangguan/Table_9.vue

@@ -77,6 +77,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
+import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxGroupItem, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection, DxSummary } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -162,4 +164,12 @@ const data = [
     },
 ]
 
+onMounted(() => {
+    const filters = useFiltersStore()
+
+    filters.setConfig({
+        type: 'type-1',
+        reportButton: true
+    })
+})
 </script>

src/stores/filters.ts

@@ -1,8 +1,5 @@
-import { ref, computed, VueElement } from 'vue'
+import { ref, VueElement } from 'vue'
 import { defineStore } from 'pinia'
-import { dispatchNotification } from '@/components/Notification'
-import { readData, removeData, writeData } from '@/utils/storage'
-import router from '@/router'
 
 import {
   Type1,
@@ -26,7 +23,22 @@ import {
 
 const test1: { [key: string]: any } = {
   'type-1': Type1,
-  'type-2': Type2
+  'type-2': Type2,
+  'type-3': Type3,
+  'type-4': Type4,
+  'type-5': Type5,
+  'type-6': Type6,
+  'type-7': Type7,
+  'type-8': Type8,
+  'type-9': Type9,
+  'type-10': Type10,
+  'type-11': Type11,
+  'type-12': Type12,
+  'type-13': Type13,
+  'type-14': Type14,
+  'type-15': Type15,
+  'type-16': Type16,
+  'type-17': Type17
 }
 
 const getFilters = (type: string): VueElement => {