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

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

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import router from "@/router";
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
+import { useInvestigateFactStore } from "@/modules/11_discipline/stroes/InvestigateFactStore";
+const investigateFactStore = useInvestigateFactStore();
+const { filterFnOptionsType } = investigateFactStore;
 const mixin = useCounterMixin();
 const {
   messageError,
@@ -17,51 +20,15 @@ const detail = ref<string>("");
 const fault = ref<string>("");
 const results = ref<string>("");
 const other = ref<string>("");
-const evidenceFiles = ref<any>(null);
+const evidenceFiles = ref<File | null>(null);
-const fileComplaint = ref<any>(null);
+const fileComplaint = ref<File | null>(null);
 const clickTime = ref<boolean>(false);
-const date = ref<Date | null>(null);
+const date = ref<Date>();
-const dateEnd = ref<Date | null>(null);
+const dateEnd = ref<Date>();
 const investigation = ref<string>("");
-const faultOps = ref<any>([
-  { id: "001", value: "ยังไม่ระบุ" },
-  { id: "002", value: "ไม่ร้ายเเรง" },
-  { id: "003", value: "ร้ายเเรง" },
-]);
-const faultOp = ref<any>();
-const investigationOps = ref<any>([
-  { id: "001", value: "เเต่งตั้งการสืบสวน" },
-  { id: "002", value: "สืบสวนทางลับ" },
-  { id: "003", value: "อื่นๆ" },
-]);
-const daysExtend = ref<string>("");
-const daysExtendOp = ref<any>();
-const daysExtendOps = ref<any>([
-  { id: "000", value: "15 วัน" },
-  { id: "001", value: "30 วัน" },
-  { id: "002", value: "45 วัน" },
-  { id: "003", value: "60 วัน" },
-]);
-const investigationOp = ref<any>();
 
-function filterFnOptionsType(val: string, update: any, type: string) {
+const daysExtend = ref<string>("");
-  update(() => {
+
-    const needle = val.toLowerCase();
-    if (type === "faultOp") {
-      faultOp.value = faultOps.value.filter(
-        (v: any) => v.value.toLowerCase().indexOf(needle) > -1
-      );
-    } else if (type === "investigationOp") {
-      investigationOp.value = investigationOps.value.filter(
-        (v: any) => v.value.toLowerCase().indexOf(needle) > -1
-      );
-    } else if (type === "daysExtendOp") {
-      daysExtendOp.value = daysExtendOps.value.filter(
-        (v: any) => v.value.toLowerCase().indexOf(needle) > -1
-      );
-    }
-  });
-}
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -103,11 +70,11 @@ function filterFnOptionsType(val: string, update: any, type: string) {
                     outlined
                     dense
                     v-model="fault"
-                    :options="faultOp"
+                    :options="investigateFactStore.faultOp"
                     label="ลักษณะความผิด"
                     emit-value
                     map-options
-                    option-label="value"
+                    option-label="name"
                     option-value="id"
                     use-input
                     @filter="(inputValue: any,
@@ -127,11 +94,11 @@ function filterFnOptionsType(val: string, update: any, type: string) {
                     outlined
                     dense
                     v-model="investigation"
-                    :options="investigationOp"
+                    :options="investigateFactStore.investigationOp"
                     label="ลักษณะการสืบสวน"
                     emit-value
                     map-options
-                    option-label="value"
+                    option-label="name"
                     option-value="id"
                     use-input
                     @filter="(inputValue: any,
@@ -195,7 +162,7 @@ function filterFnOptionsType(val: string, update: any, type: string) {
                           dense
                           lazy-rules
                           borderless
-                          :model-value="date !== null ? date2Thai(date) : null"
+                          :model-value="date ? date2Thai(date) : null"
                           :rules="[
                             (val) =>
                               !!val || `${'กรุณาเลือกวันที่เริ่มการสอบสวน'}`,
@@ -234,9 +201,7 @@ function filterFnOptionsType(val: string, update: any, type: string) {
                           dense
                           lazy-rules
                           borderless
-                          :model-value="
+                          :model-value="dateEnd ? date2Thai(dateEnd) : null"
-                            dateEnd !== null ? date2Thai(dateEnd) : null
-                          "
                           :rules="[
                             (val) =>
                               !!val || `${'กรุณาเลือกวันที่สิ้นสุดการสอบสวน'}`,
@@ -262,14 +227,17 @@ function filterFnOptionsType(val: string, update: any, type: string) {
                     dense
                     lazy-rules
                     v-model="daysExtend"
-                    :options="daysExtendOp"
+                    :options="investigateFactStore.daysExtendOp"
                     label="จำนวนวันที่ต้องการขยาย"
                     emit-value
                     map-options
                     :rules="[
-                      (val) => !!val || `${'กรุณาเลือกจำนวนวันที่ต้องการขยาย'}`,
+                      (val) =>
+                        clickTime === true
+                          ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
+                          : true,
                     ]"
-                    option-label="value"
+                    option-label="name"
                     option-value="id"
                     use-input
                     @filter="(inputValue: any,

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 config from "@/app.config";
-import http from "@/plugins/http";
+// import http from "@/plugins/http";
 
 import { useInvestigateFactStore }  from '../../stroes/InvestigateFactStore'
 const dataInvestigate = useInvestigateFactStore()
 const { fecthList } = dataInvestigate
 
-const mixin = useCounterMixin();
+// const mixin = useCounterMixin();
-const {
+// const {
-  date2Thai,
+//   date2Thai,
-  success,
+//   success,
-  messageError,
+//   messageError,
-  showLoader,
+//   showLoader,
-  hideLoader,
+//   hideLoader,
-  dialogConfirm,
+//   dialogConfirm,
-  dialogRemove,
+//   dialogRemove,
-} = mixin;
+// } = 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",
+      fault: "0",
-      status: "2",
+      status: "1",
       active:'1'
     },
     {
       subject: "พูดจาไม่สุภาพ",
       interrogated: "นายปิยรมย์ ศิริธาราฟ",
-      fault: "2",
+      fault: "0",
-      status: "3",
+      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-td auto-width >
-                <q-btn v-if="props.row.status === 'ยุติเรื่อง'" color="primary" class="q-px-xl q-py-xs">ยกเลิกยุติเรื่อง</q-btn>
+                <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>

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

@@ -2,6 +2,15 @@ interface DataOption {
     id: string;
     name: string;
 }
+interface investigatefactsDataRowType {
+subject: string;
+interrogated: string;
+fault: string;
+status: string;
+active: string;
+}
+
 export type {
-    DataOption
+    DataOption,
+    investigatefactsDataRowType
 };

src/modules/11_discipline/router.ts

@@ -4,7 +4,7 @@ const factsMain = () =>
   import("@/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue");
 const investigatefactsAdd = () =>
   import(
-    "@/modules/11_discipline/components/2_InvestigateFacts/investigatefactsAdd.vue"
+    "@/modules/11_discipline/components/2_InvestigateFacts/AddPage.vue"
   );
 const disciplinaryMain = () =>
   import(

src/modules/11_discipline/stroes/InvestigateFactStore.ts

@@ -1,41 +1,71 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
-
+import type { investigatefactsDataRowType, DataOption } from '@/modules/11_discipline/interface/index/Main'
 export const useInvestigateFactStore = defineStore("InvestigateFact", () => {
-    const rows = ref<any>([])
 
-    async function fecthList(data: any) {
+    const rows = ref<investigatefactsDataRowType[]>([])
-        let datalist = data.map((e: any) => ({
+    const faultOp = ref<DataOption[]>();
+    const daysExtendOp = ref<DataOption[]>();
+    const investigationOp = ref<DataOption[]>();
+    const daysExtendOps = ref<DataOption[]>([
+        { id: "000", name: "15 วัน" },
+        { id: "001", name: "30 วัน" },
+        { id: "002", name: "45 วัน" },
+        { id: "003", name: "60 วัน" },
+    ]);
+    const investigationOps = ref<DataOption[]>([
+        { id: "001", name: "เเต่งตั้งการสืบสวน" },
+        { id: "002", name: "สืบสวนทางลับ" },
+        { id: "003", name: "อื่นๆ" },
+    ]);
+    const faultOps = ref<DataOption[]>([
+        { id: "001", name: "ยังไม่ระบุ" },
+        { id: "002", name: "ไม่ร้ายเเรง" },
+        { id: "003", name: "ร้ายเเรง" },
+    ]);
+    function filterFnOptionsType(val: string, update: any, type: string) {
+        update(() => {
+            const needle = val.toLowerCase();
+            if (type === "faultOp") {
+                faultOp.value = faultOps.value.filter(
+                    (v: any) => v.value.toLowerCase().indexOf(needle) > -1
+                );
+            } else if (type === "investigationOp") {
+                investigationOp.value = investigationOps.value.filter(
+                    (v: any) => v.value.toLowerCase().indexOf(needle) > -1
+                );
+            } else if (type === "daysExtendOp") {
+                daysExtendOp.value = daysExtendOps.value.filter(
+                    (v: any) => v.value.toLowerCase().indexOf(needle) > -1
+                );
+            }
+        });
+    }
+    async function fecthList(data:investigatefactsDataRowType[]) {
+        let datalist:investigatefactsDataRowType[] = data.map((e: any) => ({
             subject: e.subject,
             interrogated: e.interrogated,
-            fault: convertFault(e.fault),
+            fault: e.fault ?? convertFault(e.fault),
-            status: convertSatatus(e.status),
+            status: e.status ?? convertSatatus(e.status),
-            active: activeStatus(e.active)
+            active: e.active ?? activeStatus(e.active)
-            
+
         }))
         rows.value = datalist
-        console.log(rows.value)
     }
     function convertFault(val: string) {
         switch (val) {
             case "0":
-                return "ความผิดวินัยยังไม่ระบุ"
-            case "1":
                 return "ความผิดวินัยไม่ร้ายแรง"
-            case "2":
+            case "1":
                 return "ความผิดวินัยร้ายแรง"
         }
     }
     function convertSatatus(val: string) {
         switch (val) {
             case "0":
-                return "ยังไม่ระบุ"
-            case "1":
-                return "ร้ายแรง"
-            case "2":
-                return "ไม่ร้ายแรง"
-            case "3":
                 return "ยุติเรื่อง"
+            case "1":
+                return "เสร็จสิ้นเเล้ว"
         }
     }
     function activeStatus(val: string) {
@@ -49,5 +79,12 @@ export const useInvestigateFactStore = defineStore("InvestigateFact", () => {
     return {
         fecthList,
         rows,
+        daysExtendOps,
+        investigationOps,
+        faultOps,
+        filterFnOptionsType,
+        faultOp,
+        daysExtendOp,
+        investigationOp,
     };
 })