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

2023-10-27 10:12:09 +07:00 · 2023-10-27 10:12:09 +07:00 · 0939d490df
commit 0939d490df
parent 511fe670ae
5 changed files with 209 additions and 56 deletions
--- a/src/modules/07_insignia/components/5_Borrow/DialogForm.vue
+++ b/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();
    }
  }
 };
--- a/src/modules/07_insignia/components/5_Borrow/Main.vue
+++ b/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-tabs dense v-model="tab" align="left" class="bg-white text-grey" active-color="primary" indicator-color="primary">
+  <q-card
+    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
-              :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,
+            <q-select
+              v-model="yearRound"
+              dense
+              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
-              debounce="300" placeholder="ค้นหา">
+            <q-input
+              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
-              :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" />
+            <q-select
+              v-model="visibleColumns"
+              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
-                :label="`${'เครื่องราชฯ'}`" emit-value map-options option-label="name" :options="fileterInsigniaList"
-                option-value="id" :readonly="false" :borderless="false" style="min-width: 230px" @update:model-value="
+              <q-select
+                v-model="DataStore.insignia"
+                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
-                :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="
+              <q-select
+                class="col-2"
+                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"
-            row-key="id" :pagination-label="paginationLabel" v-model:pagination="pagination" :paging="true">
+          <d-table
+            :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"
-      :round-id="selectRound == '0' ? 'all' : selectRound" :action="action" :profile-id="profileId"
-      v-model:selectRoundOption="selectRoundOption" v-model:filterSelectRoundOption="filterSelectRoundOption"
-      :type-id="tab" />
+    <DialogForm
+      :modal="modal"
+      :close="close"
+      :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">
--- a/src/modules/09_leave/interface/response/work.ts
+++ b/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
 }
--- a/src/modules/09_leave/stores/WorkStore.ts
+++ b/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[]) {
-        let datalist = data.map((e: TableRows) => ({
+    function fetchList(data: DataRes[]) {
+        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) {
-        srarchStatus = srarchStatus || "all";
-        if (searchDate == null && srarchStatus == "all") {
+    function searchDataFn(searchDate: any, searchStatus: any) {
+        searchStatus = searchStatus || "all";
+        if (searchDate == null && searchStatus == "all") {
            rows.value = dataMain.value
-        } else if (searchDate == null && srarchStatus !== "all") {
-            rows.value = dataMain.value.filter((e: any) => e.status === srarchStatus)
+        } else if (searchDate == null && searchStatus !== "all") {
+            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)
        }
    }
    //
--- a/src/modules/09_leave/views/WorkingMain.vue
+++ b/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