เอา columns/visibleColumns ใส่ store

src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue

@@ -1,12 +1,9 @@
 <script setup lang="ts">
-import type { QTableProps } from "quasar";
 import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
 import { useInvestigateDisStore } from "../../store/InvestigateDisStore";
 
 import { useRouter } from "vue-router";
@@ -15,127 +12,14 @@ const { fecthList } = dataInvestigateDis;
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
-const {
-  date2Thai,
-  success,
-  typeCategoryExam,
-  messageError,
-  showLoader,
-  hideLoader,
-} = mixin;
+const { hideLoader } = mixin;
 const filter = ref<string>(""); //search data table
 const initialPagination = ref<Pagination>({
   rowsPerPage: 0,
 });
-const visibleColumns = ref<String[]>([
-  "no",
-  "subject",
-  "interrogated",
-  "fault",
-  "penaltyLevel",
-  "caseFault",
-  "dateInvestigate",
-  "status",
-]);
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "center",
-    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",
-  },
-  {
-    name: "interrogated",
-    align: "left",
-    label: "ผู้ถูกสืบสวน",
-    sortable: true,
-    field: "interrogated",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "fault",
-    align: "left",
-    label: "ลักษณะความผิด",
-    sortable: true,
-    field: "fault",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "penaltyLevel",
-    align: "left",
-    label: "ระดับโทษความผิด",
-    sortable: true,
-    field: "penaltyLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "caseFault",
-    align: "left",
-    label: "กรณีความผิด",
-    sortable: true,
-    field: "caseFault",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "dateInvestigate",
-    align: "left",
-    label: "วันที่สอบสวน",
-    sortable: true,
-    field: "dateInvestigate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "status",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "status",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
 
 onMounted(async () => {
-  await fecthInvestigateDis();
-  await hideLoader();
-});
-
-const clickDelete = (id: string) => {
-  $q.dialog({
-    title: "ยืนยันการลบข้อมูล",
-    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  })
-    .onOk(async () => {
-      //   await deleteData(id);
-    })
-    .onCancel(() => {})
-    .onDismiss(() => {});
-};
-
-function fecthInvestigateDis() {
-  const data = [
+  fecthList([
     {
       subject: "ทุจริตในหน้าที่",
       interrogated: "ศิรินภา คงน้อยี่",
@@ -176,28 +60,13 @@ function fecthInvestigateDis() {
       status: "0",
       active: "1",
     },
-  ];
-  fecthList(data); // ส่งข้อมูลไป stores
-}
+  ]);
+  await hideLoader();
+});
 
 const clickAdd = () => {
   router.push(`/discipline/InvestigateDisciplinary/add`);
 };
-
-const deleteData = async (id: string) => {
-  //   showLoader();
-  //   await http
-  //     .delete(config.API.periodExamId(id))
-  //     .then((res) => {
-  //       success($q, "ลบข้อมูลสำเร็จ");
-  //     })
-  //     .catch((e) => {
-  //       messageError($q, e);
-  //     })
-  //     .finally(async () => {
-  //       hideLoader();
-  //     });
-};
 </script>
 
 <template>
@@ -209,11 +78,11 @@ const deleteData = async (id: string) => {
       <Table
         style="max-height: 80vh"
         :rows="dataInvestigateDis.rows"
-        :columns="columns"
+        :columns="dataInvestigateDis.columns"
         :filter="filter"
-        :visible-columns="visibleColumns"
+        :visible-columns="dataInvestigateDis.visibleColumns"
         v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
+        v-model:inputvisible="dataInvestigateDis.visibleColumns"
         :pagination="initialPagination"
         :nornmalData="true"
         :add="clickAdd"
@@ -222,29 +91,13 @@ const deleteData = async (id: string) => {
       >
         <template #columns="props">
           <q-tr :props="props" class="cursor-pointer">
-            <q-td key="no" :props="props">
-              {{ props.rowIndex + 1 }}
-            </q-td>
-            <q-td key="subject" :props="props">
-              {{ props.row.subject }}
-            </q-td>
-            <q-td key="interrogated" :props="props">
-              {{ props.row.interrogated }}
-            </q-td>
-            <q-td key="fault" :props="props">
-              {{ props.row.fault }}
-            </q-td>
-            <q-td key="penaltyLevel" :props="props">
-              {{ props.row.penaltyLevel }}
-            </q-td>
-            <q-td key="caseFault" :props="props">
-              {{ props.row.caseFault }}
-            </q-td>
-            <q-td key="dateInvestigate" :props="props">
-              {{ props.row.dateInvestigate }}
-            </q-td>
-            <q-td key="status" :props="props">
-              {{ props.row.status }}
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <q-td v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <div>
+                {{ col.value }}
+              </div>
             </q-td>
             <q-td style="font-size: 14px; width: 10rem">
               <q-btn

src/modules/11_discipline/interface/index/Main.ts

@@ -5,22 +5,20 @@ interface DataOption {
 interface investigatefactsDataRowType {
   subject: string;
   interrogated: string;
-  fault: string|undefined;
-  status: string|undefined;
-  active: string|undefined;
+  fault: string | undefined;
+  status: string | undefined;
+  active: string | undefined;
 }
 
-
-
 interface investigateDisDataRowType {
   subject: string;
   interrogated: string;
-  fault: string;
-  penaltyLevel: string;
-  caseFault: string;
-  dateInvestigate: string;
-  status: string;
-  active: string;
+  fault: string | undefined;
+  penaltyLevel: string | undefined;
+  caseFault: string | undefined;
+  dateInvestigate: string | undefined;
+  status: string | undefined;
+  active: string | undefined;
 }
 
 interface directorType {

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

@@ -1,5 +1,6 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
+import type { QTableProps } from "quasar";
 import type {
   investigateDisDataRowType,
   DataOption,
@@ -97,6 +98,100 @@ export const useInvestigateDisStore = defineStore(
           return "ไล่ออก";
       }
     }
+
+    const visibleColumns = ref<String[]>([
+      "no",
+      "subject",
+      "interrogated",
+      "fault",
+      "penaltyLevel",
+      "caseFault",
+      "dateInvestigate",
+      "status",
+    ]);
+
+    const columns = ref<QTableProps["columns"]>([
+      {
+        name: "no",
+        align: "center",
+        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",
+      },
+      {
+        name: "interrogated",
+        align: "left",
+        label: "ผู้ถูกสืบสวน",
+        sortable: true,
+        field: "interrogated",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      },
+      {
+        name: "fault",
+        align: "left",
+        label: "ลักษณะความผิด",
+        sortable: true,
+        field: "fault",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      },
+      {
+        name: "penaltyLevel",
+        align: "left",
+        label: "ระดับโทษความผิด",
+        sortable: true,
+        field: "penaltyLevel",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      },
+      {
+        name: "caseFault",
+        align: "left",
+        label: "กรณีความผิด",
+        sortable: true,
+        field: "caseFault",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      },
+      {
+        name: "dateInvestigate",
+        align: "left",
+        label: "วันที่สอบสวน",
+        sortable: true,
+        field: "dateInvestigate",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "status",
+        align: "left",
+        label: "สถานะ",
+        sortable: true,
+        field: "status",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+    ]);
     return {
       fecthList,
       rows,
@@ -104,6 +199,8 @@ export const useInvestigateDisStore = defineStore(
       optionsTypefault,
       optionsfaultLevel,
       fecthDirector,
+      visibleColumns,
+      columns,
     };
   }
 );