filter Date รายการลงเวลาปฏิบัติงาน และ ลบคำนำหน้าออกยืมคืนเครื่องราช

src/modules/07_insignia/components/5_Borrow/DialogForm.vue

@@ -8,8 +8,11 @@ import type { DataOption } from "@/modules/04_registry/components/profileType";
 import type { ItemType } from "@/modules/07_insignia/interface/request/Main";
 import DialogHeader from "@/components/DialogHeader.vue";
 
+import { useBrrowDataStore } from "@/modules/07_insignia/storeBrrow";
+
 const $q = useQuasar();
 const myForm = ref<QForm>();
+const DataStore = useBrrowDataStore();
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -35,7 +38,7 @@ const filterOrgList = ref<any>([]);
 const insigniaNoteProfileId = ref<string>("");
 const filterSelectRound = ref<any>();
 const selectRound = ref<any>();
-const type = ref<any>();
+const type = ref<any>(DataStore.type);
 // เคลียร์ข้อมูลในฟอร์ม
 const clearData = () => {
   receivedate.value = null;
@@ -88,7 +91,7 @@ const props = defineProps({
 
 // เช็ค props ถ้าเปิด dialog ให้ดึงรายการข้อมูล
 watch(props, () => {
-  type.value = props.type;
+  // type.value = props.type;
   if (props.modal == true && props.roundId != "all") {
     roundNo.value = props.roundId;
     fecthlistInsignia();
@@ -220,25 +223,28 @@ const clickSave = async () => {
 
 // ค้นหาคนจากเลขประจำตัวประชาชน
 const searchcardid = async () => {
+  showLoader();
   if (cardid.value.length === 13) {
     const node = await listPerson.value.find(
       (e: any) => e.citizenId === cardid.value
     );
 
     if (node) {
-      fullName.value = `${node.prefix} ${node.fullName}`;
+      fullName.value = ` ${node.fullName}`;
       brand.value = `${node.requestInsignia} (${
         type.value.find((item: any) => item.name === node.requestInsignia)
           ?.shortName || ""
       })`;
       insigniaNoteProfileId.value = node.id;
       insigniaNoteProfileId.value = node.id;
+      hideLoader();
     } else {
       notifyError($q, "ไม่พบข้อมูลการได้รับในรอบนี้");
       fullName.value = "";
       brand.value = "";
       OrganazationId.value = "";
       reason.value = "";
+      hideLoader();
     }
   }
 };

src/modules/07_insignia/components/5_Borrow/Main.vue

@@ -22,7 +22,7 @@ const selectRoundOption = ref<OptionDataYear[]>([]);
 const filterSelectRoundOption = ref<any>([]);
 const selectRoundAllOption = ref<OptionDataYear[]>([]);
 const filterSelectRoundAllOption = ref<OptionDataYear[]>([]);
-const type = ref<any[]>(DataStore.type)
+const type = ref<any[]>(DataStore.type);
 const modal = ref<boolean>(false);
 const action = ref<string>("");
 const profileId = ref<string>("");
@@ -64,7 +64,6 @@ const fecthRound = async () => {
         filterSelectRoundAllOption.value = selectRoundAllOption.value;
         selectRound.value = data[0].id;
         filterSelectRoundOption.value = selectRoundOption.value;
-        console.log(filterSelectRoundOption.value);
         yearRound.value = data[0].year;
         roundYear.value = data[0].year;
         if (roundYear.value) {
@@ -109,7 +108,7 @@ const fecthInsigniaType = async () => {
     .catch((err) => {
       messageError($q, err);
     })
-    .finally(() => { });
+    .finally(() => {});
 };
 
 const visibleColumns = ref<String[]>([
@@ -438,23 +437,54 @@ const clearInsigniaFilters = (name: string) => {
   <div class="toptitle text-dark col-12 row items-center">
     ยืม-คืนเครื่องราชฯ
   </div>
-  <q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders" v-if="loadView == true">
+  <q-card
-    <q-tabs dense v-model="tab" align="left" class="bg-white text-grey" active-color="primary" indicator-color="primary">
+    flat
+    bordered
+    class="col-12 q-my-md q-mt-sm rounded-borders"
+    v-if="loadView == true"
+  >
+    <q-tabs
+      dense
+      v-model="tab"
+      align="left"
+      class="bg-white text-grey"
+      active-color="primary"
+      indicator-color="primary"
+    >
       <div v-for="item in DataStore.insigniaType">
         <q-tab :name="item.name" :label="item.label" />
       </div>
     </q-tabs>
     <q-separator />
     <q-tab-panels v-model="tab" animated>
-      <q-tab-panel v-for="item in DataStore.insigniaType" :key="item.name" :name="item.name" class="q-pa-md">
+      <q-tab-panel
+        v-for="item in DataStore.insigniaType"
+        :key="item.name"
+        :name="item.name"
+        class="q-pa-md"
+      >
         <div class="row col-12">
           <div class="row col-12 q-col-gutter-sm">
-            <q-select v-model="yearRound" dense outlined lazy-rules hide-bottom-space
+            <q-select
-              :label="`${'รอบการเสนอขอเครื่องราชฯ'}`" emit-value map-options use-input option-label="name"
+              v-model="yearRound"
-              :options="filterSelectRoundAllOption" option-value="year" :borderless="false" style="min-width: 150px"
+              dense
-              @update:model-value="selectorRound" @filter="(inputValue: any,
+              outlined
+              lazy-rules
+              hide-bottom-space
+              :label="`${'รอบการเสนอขอเครื่องราชฯ'}`"
+              emit-value
+              map-options
+              use-input
+              option-label="name"
+              :options="filterSelectRoundAllOption"
+              option-value="year"
+              :borderless="false"
+              style="min-width: 150px"
+              @update:model-value="selectorRound"
+              @filter="(inputValue: any,
                 doneFn: Function) => filterSelector(inputValue, doneFn, 'filterSelectRoundAllOption'
-                )">
+                )"
+            >
               <template v-slot:no-option>
                 <q-item>
                   <q-item-section class="text-grey">
@@ -465,31 +495,72 @@ const clearInsigniaFilters = (name: string) => {
             </q-select>
             <q-space />
 
-            <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filter" ref="filterRef" outlined
+            <q-input
-              debounce="300" placeholder="ค้นหา">
+              class="col-xs-12 col-sm-3 col-md-2"
+              standout
+              dense
+              v-model="filter"
+              ref="filterRef"
+              outlined
+              debounce="300"
+              placeholder="ค้นหา"
+            >
               <template v-slot:append>
                 <q-icon v-if="filter == ''" name="search" />
-                <q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+                <q-icon
+                  v-if="filter !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="resetFilter"
+                />
               </template>
             </q-input>
 
-            <q-select v-model="visibleColumns" multiple outlined dense options-dense
+            <q-select
-              :display-value="$q.lang.table.columns" emit-value map-options :options="columns" option-value="name"
+              v-model="visibleColumns"
-              options-cover style="min-width: 150px" class="col-xs-12 col-sm-3 col-md-2" />
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              options-cover
+              style="min-width: 150px"
+              class="col-xs-12 col-sm-3 col-md-2"
+            />
           </div>
 
           <q-card bordered class="q-pa-sm col-12 bg-grey-1 q-mt-sm">
             <div class="row col-12 q-col-gutter-sm">
-              <q-select v-model="DataStore.insignia" dense outlined use-input lazy-rules hide-bottom-space
+              <q-select
-                :label="`${'เครื่องราชฯ'}`" emit-value map-options option-label="name" :options="fileterInsigniaList"
+                v-model="DataStore.insignia"
-                option-value="id" :readonly="false" :borderless="false" style="min-width: 230px" @update:model-value="
+                dense
+                outlined
+                use-input
+                lazy-rules
+                hide-bottom-space
+                :label="`${'เครื่องราชฯ'}`"
+                emit-value
+                map-options
+                option-label="name"
+                :options="fileterInsigniaList"
+                option-value="id"
+                :readonly="false"
+                :borderless="false"
+                style="min-width: 230px"
+                @update:model-value="
                   DataStore.searchDatatable(
                     DataStore.insignia,
                     DataStore.employeeClass
                   )
-                  " @filter="(inputValue: any,
+                "
+                @filter="(inputValue: any,
     doneFn: Function) => filterSelector(inputValue, doneFn, 'fileterInsigniaList'
-    )">
+    )"
+              >
                 <template v-if="DataStore.insignia !== ''" v-slot:append>
                   <!-- <q-icon name="cancel" @click.stop.prevent="
                     clearInsigniaFilters('fileterInsigniaList'),
@@ -508,18 +579,37 @@ const clearInsigniaFilters = (name: string) => {
                 </template>
               </q-select>
 
-              <q-select class="col-2" v-model="DataStore.employeeClass" dense outlined lazy-rules hide-bottom-space
+              <q-select
-                :label="`${'สถานภาพ'}`" emit-value use-input map-options option-label="name" :options="employeeClassOps"
+                class="col-2"
-                option-value="id" :readonly="false" :borderless="false" style="min-width: 240px" @update:model-value="
+                v-model="DataStore.employeeClass"
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                :label="`${'สถานภาพ'}`"
+                emit-value
+                use-input
+                map-options
+                option-label="name"
+                :options="employeeClassOps"
+                option-value="id"
+                :readonly="false"
+                :borderless="false"
+                style="min-width: 240px"
+                @update:model-value="
                   DataStore.searchDatatable(
                     DataStore.insignia,
                     DataStore.employeeClass
-                  )" 
+                  )
-                  @filter="(inputValue: any,
+                "
+                @filter="(inputValue: any,
     doneFn: Function) => filterSelector(inputValue, doneFn, 'employeeClassOps'
     )"
-    >
+              >
-                <template v-if="DataStore.employeeClass !== 'all'" v-slot:append>
+                <template
+                  v-if="DataStore.employeeClass !== 'all'"
+                  v-slot:append
+                >
                   <!-- <q-icon name="cancel" @click.stop.prevent="
                     clearInsigniaFilters('employeeClassOps'),
                     DataStore.searchDatatable(
@@ -538,7 +628,14 @@ const clearInsigniaFilters = (name: string) => {
               </q-select>
 
               <div>
-                <q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
+                <q-btn
+                  @click="addData()"
+                  size="12px"
+                  flat
+                  round
+                  color="add"
+                  icon="mdi-plus"
+                >
                   <q-tooltip>เพิ่ม</q-tooltip>
                 </q-btn>
               </div>
@@ -547,25 +644,40 @@ const clearInsigniaFilters = (name: string) => {
         </div>
 
         <div class="col-12 q-pt-sm">
-          <d-table :rows="DataStore.rows" :columns="columns" :visible-columns="visibleColumns" :filter="filter"
+          <d-table
-            row-key="id" :pagination-label="paginationLabel" v-model:pagination="pagination" :paging="true">
+            :rows="DataStore.rows"
+            :columns="columns"
+            :visible-columns="visibleColumns"
+            :filter="filter"
+            row-key="id"
+            :pagination-label="paginationLabel"
+            v-model:pagination="pagination"
+            :paging="true"
+          >
             <template v-slot:body-cell="props">
               <q-td :props="props">
                 <div v-if="props.col.name == 'no'">
                   {{ props.rowIndex + 1 }}
                 </div>
 
-                <div v-else-if="props.col.name == 'action' && props.row.returnDate == '-'
+                <div
-                  ">
+                  v-else-if="
+                    props.col.name == 'action' && props.row.returnDate == '-'
+                  "
+                >
                   <q-td>
-                    <q-btn label="คืนเครื่องราชฯ" @click="editData(props.row.id)" color="blue" />
+                    <q-btn
+                      label="คืนเครื่องราชฯ"
+                      @click="editData(props.row.id)"
+                      color="blue"
+                    />
                   </q-td>
                 </div>
                 <div v-else-if="props.col.name == 'returnOrganization'">
                   {{
                     props.row.returnOrganization == null
-                    ? "-"
+                      ? "-"
-                    : props.row.returnOrganization
+                      : props.row.returnOrganization
                   }}
                 </div>
                 <div v-else>
@@ -578,10 +690,18 @@ const clearInsigniaFilters = (name: string) => {
       </q-tab-panel>
     </q-tab-panels>
 
-    <DialogForm :modal="modal" :close="close" :close-and-fecth="closeAndFecth" :type="type"
+    <DialogForm
-      :round-id="selectRound == '0' ? 'all' : selectRound" :action="action" :profile-id="profileId"
+      :modal="modal"
-      v-model:selectRoundOption="selectRoundOption" v-model:filterSelectRoundOption="filterSelectRoundOption"
+      :close="close"
-      :type-id="tab" />
+      :close-and-fecth="closeAndFecth"
+      :type="type"
+      :round-id="selectRound == '0' ? 'all' : selectRound"
+      :action="action"
+      :profile-id="profileId"
+      v-model:selectRoundOption="selectRoundOption"
+      v-model:filterSelectRoundOption="filterSelectRoundOption"
+      :type-id="tab"
+    />
   </q-card>
   <q-card v-else>
     <div class="q-pa-md q-gutter-sm">

src/modules/09_leave/interface/response/work.ts

@@ -9,7 +9,22 @@ interface TableRows {
     latOut: string
     longOut: string
     status: string
+    date: String | null
+}
+interface DataRes {
+    fullName: string
+    timeIn: string
+    coordinatesIn: string
+    latIn: string
+    longIn: string
+    timeOut: string
+    coordinatesOut: string
+    latOut: string
+    longOut: string
+    status: string
+    date: Date
 }
 export type {
-    TableRows
+    TableRows,
+    DataRes
 }

src/modules/09_leave/stores/WorkStore.ts

@@ -3,7 +3,7 @@ import { ref } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
 import type { DataOption } from "@/modules/09_leave/interface/index/Main"
-import type { TableRows } from "@/modules/09_leave/interface/response/work"
+import type { TableRows, DataRes } from "@/modules/09_leave/interface/response/work"
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
 export const useWorklistDataStore = defineStore("work", () => {
@@ -12,8 +12,8 @@ export const useWorklistDataStore = defineStore("work", () => {
     const columns = ref<QTableProps["columns"]>([]);
     const visibleColumns = ref<string[]>([]);
     const dataMain = ref<TableRows[]>([])
-    function fetchList(data: TableRows[]) {
+    function fetchList(data: DataRes[]) {
-        let datalist = data.map((e: TableRows) => ({
+        let datalist = data.map((e: DataRes) => ({
             fullName: e.fullName,
             timeIn: e.timeIn,
             coordinatesIn: e.coordinatesIn,
@@ -23,7 +23,8 @@ export const useWorklistDataStore = defineStore("work", () => {
             coordinatesOut: e.coordinatesOut,
             latOut: e.latOut,
             longOut: e.longOut,
-            status: convertSatatus(e.status)
+            status: convertSatatus(e.status),
+            date: date2Thai(e.date)
         }))
         dataMain.value = datalist
         fetchOption()
@@ -36,12 +37,16 @@ export const useWorklistDataStore = defineStore("work", () => {
     const selectStatus = ref<String>('all')
     const optionStatusMain = ref<DataOption[]>([])
     const optionStatus = ref<DataOption[]>([])
-    function searchDataFn(searchDate: any, srarchStatus: any) {
+    function searchDataFn(searchDate: any, searchStatus: any) {
-        srarchStatus = srarchStatus || "all";
+        searchStatus = searchStatus || "all";
-        if (searchDate == null && srarchStatus == "all") {
+        if (searchDate == null && searchStatus == "all") {
             rows.value = dataMain.value
-        } else if (searchDate == null && srarchStatus !== "all") {
+        } else if (searchDate == null && searchStatus !== "all") {
-            rows.value = dataMain.value.filter((e: any) => e.status === srarchStatus)
+            rows.value = dataMain.value.filter((e: any) => e.status === searchStatus)
+        } else if (searchDate !== null && searchStatus == "all") {
+            rows.value = dataMain.value.filter((e: any) => e.date === date2Thai(searchDate))
+        } else {
+            rows.value = dataMain.value.filter((e: any) => e.date === date2Thai(searchDate) && e.status === searchStatus)
         }
     }
     //

src/modules/09_leave/views/WorkingMain.vue

@@ -7,7 +7,10 @@ import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
 import TableList from "@/modules/09_leave/components/1_Work/TableList.vue";
 import ToolBar from "@/modules/09_leave/components/1_Work/ToolBar.vue";
 // import Type
-import type { TableRows } from "@/modules/09_leave/interface/response/work";
+import type {
+  TableRows,
+  DataRes,
+} from "@/modules/09_leave/interface/response/work";
 // use Store
 const mixin = useCounterMixin();
 const workStore = useWorklistDataStore();
@@ -19,7 +22,7 @@ onMounted(() => {
 });
 //เรียกข้อมูลรายการลงเวลาปฏิบัติงาน
 function fecthWorkList() {
-  const listData: TableRows[] = [
+  const listData: DataRes[] = [
     {
       fullName: "นายกัณฐิมา  กาฬสินธ์ุ",
       timeIn: "8:04",
@@ -31,6 +34,7 @@ function fecthWorkList() {
       latOut: "18.7903",
       longOut: "99.0029",
       status: "1",
+      date: new Date("2023-10-27"),
     },
     {
       fullName: "นายนครชัย วันดี",
@@ -43,6 +47,7 @@ function fecthWorkList() {
       latOut: "18.7903",
       longOut: "99.0029",
       status: "2",
+      date: new Date("2023-10-28"),
     },
     {
       fullName: "นายปิยรมย์ ศิริธาราฟ",
@@ -55,6 +60,7 @@ function fecthWorkList() {
       latOut: "18.7903",
       longOut: "99.0029",
       status: "3",
+      date: new Date("2023-10-27"),
     },
     {
       fullName: "นางสาวปลาทอง ใจกล้า",
@@ -67,6 +73,7 @@ function fecthWorkList() {
       latOut: "18.7903",
       longOut: "99.0029",
       status: "1",
+      date: new Date("2023-10-27"),
     },
   ];
   fetchList(listData); // ส่งข้อมูลไปยัง stores