UI - ข้อมูลพื้นฐาน ช่องทางการร้องเรียน

ปรับ column row  ลงใน store

src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue

@@ -4,67 +4,15 @@ import type { QTableProps } from "quasar";
 import router from "@/router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
+import { useDisciplineChannelDataStore } from "@/modules/11_discipline/store/ChannelStore";
 
 import config from "@/app.config";
 import http from "@/plugins/http";
 
 const mixin = useCounterMixin();
-const {
-  date2Thai,
-  success,
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-  dialogRemove,
-} = mixin;
+const { dialogRemove } = mixin;
 const $q = useQuasar(); //ใช้ noti quasar
 
-const visibleColumns = ref<string[]>([
-  "no",
-  "subject",
-  "interrogated",
-  "fault",
-  "status",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-
-// หัวตาราง
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "subject",
-    align: "left",
-    label: "ชื่อประเภท",
-    sortable: true,
-    field: "subject",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
-const rows = ref<any>([
-  {
-    subject: " จดหมาย",
-  },
-  {
-    subject: " อีเมล์",
-  },
-  {
-    subject: " โทรศัพท์",
-  },
-  {
-    subject: " บอกเล่า",
-  },
-]);
-
 // ค้นหาในตาราง
 const filterKeyword = ref<string>("");
 const filterRef = ref<HTMLInputElement | null>(null);
@@ -74,7 +22,7 @@ const resetFilter = () => {
     filterRef.value.focus();
   }
 };
-
+const dataStore = useDisciplineChannelDataStore();
 const attrs = ref<any>(useAttrs());
 const paging = ref<boolean>(true);
 const pagination = ref({
@@ -104,7 +52,23 @@ const clickDelete = (id: string) => {
   );
 };
 
-onMounted(() => {});
+onMounted(() => {
+  // get ข้อมูลแล้วโยนใส่ store
+  dataStore.fetchData([
+    {
+      subject: " จดหมาย",
+    },
+    {
+      subject: " อีเมล์",
+    },
+    {
+      subject: " โทรศัพท์",
+    },
+    {
+      subject: " บอกเล่า",
+    },
+  ]);
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -149,7 +113,7 @@ onMounted(() => {});
       </q-input>
 
       <q-select
-        v-model="visibleColumns"
+        v-model="dataStore.visibleColumns"
         multiple
         for="visibleColumns"
         outlined
@@ -158,7 +122,7 @@ onMounted(() => {});
         :display-value="$q.lang.table.columns"
         emit-value
         map-options
-        :options="columns"
+        :options="dataStore.columns"
         option-value="name"
         options-cover
         style="min-width: 150px"
@@ -167,11 +131,11 @@ onMounted(() => {});
     </div>
     <div class="col-12">
       <d-table
-        :columns="columns"
-        :rows="rows"
+        :columns="dataStore.columns"
+        :rows="dataStore.rows"
         row-key="id"
         :filter="filterKeyword"
-        :visible-columns="visibleColumns"
+        :visible-columns="dataStore.visibleColumns"
         :pagination-label="paginationLabel"
         v-model:pagination="pagination"
       >

src/modules/11_discipline/interface/response/channel.ts

@@ -0,0 +1,5 @@
+interface ChannelRows {
+  subject: string;
+}
+
+export type { ChannelRows };

src/modules/11_discipline/store/ChannelStore.ts

@@ -0,0 +1,54 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import type { ChannelRows } from "@/modules/11_discipline/interface/response/channel";
+import type { QTableProps } from "quasar";
+
+// store ระบบวินัย >> ข้อมูลพื้นฐาน >> กรรมการ
+export const useDisciplineChannelDataStore = defineStore(
+  "disciplineChannel",
+  () => {
+    //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+    const visibleColumns = ref<string[]>([
+      "no",
+      "subject",
+      "interrogated",
+      "fault",
+      "status",
+    ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+    // หัวตาราง
+    const columns = ref<QTableProps["columns"]>([
+      {
+        name: "no",
+        align: "left",
+        label: "ลำดับ",
+        sortable: false,
+        field: "no",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "subject",
+        align: "left",
+        label: "ชื่อประเภท",
+        sortable: true,
+        field: "subject",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+    ]);
+
+    // ข้อมูลในตาราง
+    const rows = ref<ChannelRows[]>([]);
+    function fetchData(data: ChannelRows[]) {
+      rows.value = data;
+    }
+
+    return {
+      visibleColumns,
+      columns,
+      rows,
+      fetchData,
+    };
+  }
+);