UI - สืบสวนข้อเท็จจริง เพิ่ม type ให้ any เเล้ว ย้าย option ไป store

src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue

@@ -2,26 +2,26 @@
 import { ref, useAttrs, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import router from "@/router";
-import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
+// import { useCounterMixin } from "@/stores/mixin";
 
-import config from "@/app.config";
-import http from "@/plugins/http";
+// import config from "@/app.config";
+// import http from "@/plugins/http";
 
 import { useInvestigateFactStore }  from '../../stroes/InvestigateFactStore'
 const dataInvestigate = useInvestigateFactStore()
 const { fecthList } = dataInvestigate
 
-const mixin = useCounterMixin();
-const {
-  date2Thai,
-  success,
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-  dialogRemove,
-} = mixin;
+// const mixin = useCounterMixin();
+// const {
+//   date2Thai,
+//   success,
+//   messageError,
+//   showLoader,
+//   hideLoader,
+//   dialogConfirm,
+//   dialogRemove,
+// } = mixin;
 const $q = useQuasar(); //ใช้ noti quasar
 
 const visibleColumns = ref<string[]>([
@@ -116,7 +116,7 @@ function fecthInvestigateFact() {
     {
       subject: "ทุจริตในหน้าที่",
       interrogated: "ศิรินภา คงน้อยี่",
-      fault: "0",
+      fault: "1",
       status: "0",
       active:'1'
     },
@@ -130,15 +130,15 @@ function fecthInvestigateFact() {
     {
       subject: "กระทำทุจริตเงินกองทุน",
       interrogated: "นายกัณฐิมา  กาฬสินธ์ุ",
-      fault: "1",
-      status: "2",
+      fault: "0",
+      status: "1",
       active:'1'
     },
     {
       subject: "พูดจาไม่สุภาพ",
       interrogated: "นายปิยรมย์ ศิริธาราฟ",
-      fault: "2",
-      status: "3",
+      fault: "0",
+      status: "1",
       active:'1'
     },
   ];
@@ -210,7 +210,7 @@ onMounted(()=>{
         />
       </div>
       <div class="col-12">
-        <q-table
+        <d-table
           ref="table"
           :columns="columns"
           :rows="dataInvestigate.rows"
@@ -228,7 +228,7 @@ onMounted(()=>{
         >
           <template v-slot:header="props">
             <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props" style="padding: 10px;color:#35373C;font-weight: 500;">
                 <span class="text-weight-medium">{{ col.label }}</span>
               </q-th>
               <q-th auto-width />
@@ -267,8 +267,8 @@ onMounted(()=>{
               <q-td style="font-size: 14px;width: 10rem">
                 {{ props.row.active }}
               </q-td>
-              <q-td auto-width style="width: 10rem">
-                <q-btn v-if="props.row.status === 'ยุติเรื่อง'" color="primary" class="q-px-xl q-py-xs">ยกเลิกยุติเรื่อง</q-btn>
+              <q-td auto-width >
+                <q-btn v-if="props.row.status === 'ยุติเรื่อง'" class="q-px-xl q-py-xs text-white no-shadow" style="background-color:#00AA86 ; border-radius: 6px;">ยกเลิกยุติเรื่อง</q-btn>
               </q-td>
             </q-tr>
           </template>
@@ -284,57 +284,10 @@ onMounted(()=>{
               direction-links
             ></q-pagination>
           </template>
-        </q-table>
+        </d-table>
       </div>
     </div>
   </q-card>
 </template>
 
-<style lang="scss" scope>
-.filter-card {
-  background-color: #f1f1f1b0;
-}
 
-.toggle-expired-account {
-  font-size: 12px;
-  font-weight: 400;
-  font-size: 15px;
-  line-height: 150%;
-  color: #35373c;
-}
-
-.icon-color {
-  color: #4154b3;
-}
-
-.custom-header-table {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>