สรรหาเพิ่มฟิลด์ข้อมูลสำหรับชำระเงินและจัดทำเอกสารการชำระเงิน

2025-01-28 13:58:40 +07:00 · 2025-01-28 13:58:40 +07:00 · 0aa778cca5
commit 0aa778cca5
parent 1eca4d4457
8 changed files with 651 additions and 16 deletions
--- a/src/modules/09_leave/components/02_WorkList/Tab1.vue
+++ b/src/modules/09_leave/components/02_WorkList/Tab1.vue
@ -31,6 +31,7 @@ const page = ref<number>(1);
 const rowsPerPage = ref<number>(10);
 const maxPage = ref<number>(1);
 const filetStatus = ref<string>("ALL");
+const roleStatus = ref<string>("ALL");

 /** ข้อมูลตาราง*/
 const columns = ref<QTableProps["columns"]>([
@ -43,6 +44,7 @@ const columns = ref<QTableProps["columns"]>([
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
+
  {
    name: "fullName",
    align: "left",
@ -52,6 +54,15 @@ const columns = ref<QTableProps["columns"]>([
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
+  {
+    name: "profileType",
+    align: "left",
+    label: "สถานภาพ",
+    sortable: true,
+    field: "profileType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
  {
    name: "checkInTime",
    align: "left",
@ -110,6 +121,7 @@ const columns = ref<QTableProps["columns"]>([
 const visibleColumns = ref<string[]>([
  "no",
  "fullName",
+  "profileType",
  "checkInTime",
  "checkInLocation",
  "checkInStatus",
@ -130,12 +142,13 @@ async function fetchListTimeRecord() {
    page: page.value, //*หน้า
    pageSize: rowsPerPage.value, //*จำนวนแถวต่อหน้า
    keyword: keyword.value.trim(), //keyword ค้นหา
+    profileType: roleStatus.value.trim(), //keyword ค้นหา
  };
  showLoader();
  await http
    .get(
      config.API.timeRecord() +
-        `?startDate=${querySting.startDate}&endDate=${querySting.startDate}&status=${querySting.status}&page=${querySting.page}&pageSize=${querySting.pageSize}&keyword=${querySting.keyword}`
+        `?startDate=${querySting.startDate}&endDate=${querySting.startDate}&status=${querySting.status}&page=${querySting.page}&pageSize=${querySting.pageSize}&keyword=${querySting.keyword}&profileType=${querySting.profileType}`
    )
    .then((res) => {
      total.value = res.data.result.total;
@ -144,6 +157,7 @@ async function fetchListTimeRecord() {
        (e: DataResTime) => ({
          id: e.id,
          fullName: e.fullName,
+          profileType: e.profileType,
          checkInDate: e.checkInDate ? date2Thai(e.checkInDate) : "-",
          checkInTime: e.checkInTime,
          checkInLocation: e.checkInLocation,
@ -200,7 +214,11 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <ToolBar :filetStatus="filetStatus" @update:pagination="updatePaging" />
+  <ToolBar
+    :filetStatus="filetStatus"
+    @update:pagination="updatePaging"
+    v-model:role-status="roleStatus"
+  />
  <TableList
    :total="total"
    :rows="rows.length > 0 ? rows : []"
--- a/src/modules/09_leave/components/02_WorkList/Tab2.vue
+++ b/src/modules/09_leave/components/02_WorkList/Tab2.vue
@ -24,7 +24,7 @@ const total = ref<number>(0);
 const mixin = useCounterMixin();
 const workStore = useWorklistDataStore();
 const { date2Thai, dateToISO, showLoader, hideLoader, messageError } = mixin;
-
+const roleStatus = ref<string>("ALL");
 const $q = useQuasar(); //ใช้ noti quasar

 /** ข้อมูลตาราง*/
@ -47,6 +47,15 @@ const columns = ref<QTableProps["columns"]>([
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
+  {
+    name: "profileType",
+    align: "left",
+    label: "สถานภาพ",
+    sortable: true,
+    field: "profileType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
  {
    name: "checkInTime",
    align: "left",
@ -87,6 +96,7 @@ const columns = ref<QTableProps["columns"]>([
 const visibleColumns = ref<string[]>([
  "no",
  "fullName",
+  "profileType",
  "checkInTime",
  "checkInLocation",
  "checkOutTime",
@ -110,7 +120,9 @@ async function fetchListLogRecord() {
      config.API.logRecord() +
        `?startDate=${dateToISO(date)}&endDate=${dateToISO(date)}&page=${
          page.value
-        }&pageSize=${rowsPerPage.value}&keyword=${keyword.value}`
+        }&pageSize=${rowsPerPage.value}&keyword=${keyword.value}&profileType=${
+          roleStatus.value
+        }`
    )
    .then((res) => {
      total.value = res.data.result.total;
@ -160,7 +172,11 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <ToolBarDate :keyword="keyword" @update:pagination="updatePagingProp" />
+  <ToolBarDate
+    :keyword="keyword"
+    @update:pagination="updatePagingProp"
+    v-model:role-status="roleStatus"
+  />

  <TableList
    :total="total"
--- a/src/modules/09_leave/components/02_WorkList/TableList.vue
+++ b/src/modules/09_leave/components/02_WorkList/TableList.vue
@ -187,6 +187,13 @@ onMounted(() => {
              </q-item-section>
            </q-item>
          </div>
+          <div v-else-if="col.name == 'profileType'">
+            {{
+              col.value == "OFFICER"
+                ? "ข้าราชการ กทม. สามัญ"
+                : "ลูกจ้างประจำ กทม."
+            }}
+          </div>
          <div v-else>
            {{ col.value }}
          </div>
--- a/src/modules/09_leave/components/02_WorkList/ToolBar.vue
+++ b/src/modules/09_leave/components/02_WorkList/ToolBar.vue
@ -27,6 +27,8 @@ const emit = defineEmits(["update:pagination"]);
 const filetStatus = ref<string>(
  props.filetStatus?.toString() || "default-value"
 );
+const roleStatus = defineModel<string>("roleStatus", { required: true });
+
 const keyword = ref<string>("");
 const optionMain = ref<DataOption[]>([
  { id: "ALL", name: "ทั้งหมด" },
@ -34,7 +36,14 @@ const optionMain = ref<DataOption[]>([
  { id: "LATE", name: "สาย" },
  { id: "ABSENT", name: "ขาดราชการ" },
 ]);
+
+const roleMainOp = ref<DataOption[]>([
+  { id: "ALL", name: "ทั้งหมด" },
+  { id: "OFFICER", name: "ข้าราชการ กทม. สามัญ" },
+  { id: "EMPLOYEE", name: "ลูกจ้างประจำ กทม." },
+]);
 const option = ref<DataOption[]>(optionMain.value);
+const roleOp = ref<DataOption[]>(roleMainOp.value);

 /**
 * function updateProps
@ -57,12 +66,20 @@ function filterFn() {
 * @param val คำค้นหา
 * @param update function
 */
-function filterOptionFn(val: string, update: Function) {
-  update(() => {
-    option.value = optionMain.value.filter(
-      (e: any) => e.name.search(val) !== -1
-    );
-  });
+function filterOptionFn(val: string, update: Function, type?: string) {
+  if (type == "role") {
+    update(() => {
+      roleOp.value = roleMainOp.value.filter(
+        (e: any) => e.name.search(val) !== -1
+      );
+    });
+  } else {
+    update(() => {
+      option.value = optionMain.value.filter(
+        (e: any) => e.name.search(val) !== -1
+      );
+    });
+  }
 }

 /** Functicon หาค่ามากสุดและปิดวันที่ไม่ให้เลือกวันล่วงหน้า*/
@ -111,6 +128,41 @@ function calculateMaxDate() {
        </template>
      </datepicker>
    </div>
+    <div class="col-xs-12 col-sm-3 col-md-3">
+      <q-select
+        for="selectStatus"
+        emit-value
+        map-options
+        outlined
+        dense
+        option-value="id"
+        option-label="name"
+        label="สถานภาพ"
+        use-input
+        v-model="roleStatus"
+        hide-selected
+        fill-input
+        :options="roleOp"
+        @update:model-value="filterFn"
+        @filter="(inputValue:string,
+                    doneFn:Function) => filterOptionFn(inputValue,doneFn,'role')"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template>
+        <template v-if="roleStatus !== 'ALL'" v-slot:append>
+          <q-icon
+            name="cancel"
+            @click.stop.prevent="
+              (roleOp = roleMainOp), (roleStatus = 'ALL'), filterFn()
+            "
+            class="cursor-pointer"
+          />
+        </template>
+      </q-select>
+    </div>
    <div class="col-xs-12 col-sm-3 col-md-2">
      <q-select
        for="selectStatus"
--- a/src/modules/09_leave/components/02_WorkList/ToolBarDate.vue
+++ b/src/modules/09_leave/components/02_WorkList/ToolBarDate.vue
@ -5,6 +5,8 @@ import { ref } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";

+import type { DataOption } from "@/modules/09_leave/interface/index/Main";
+
 /** useStore */
 const workStore = useWorklistDataStore();
 const mixin = useCounterMixin();
@ -13,11 +15,19 @@ const { date2Thai } = mixin;
 const emit = defineEmits(["update:pagination"]);

 /** ตัวแปร filter*/
+const roleStatus = defineModel<string>("roleStatus", { required: true });
 const keyword = ref<string>("");
 const pagination = ref({
  page: 1,
 });

+const roleMainOp = ref<DataOption[]>([
+  { id: "ALL", name: "ทั้งหมด" },
+  { id: "OFFICER", name: "ข้าราชการ กทม. สามัญ" },
+  { id: "EMPLOYEE", name: "ลูกจ้างประจำ กทม." },
+]);
+const roleOp = ref<DataOption[]>(roleMainOp.value);
+
 /**
 * function updateProps
 * @param newPagination paging
@ -39,6 +49,19 @@ function calculateMaxDate() {
 function filterFn() {
  updateProp(pagination.value, keyword.value);
 }
+
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ */
+function filterOptionFn(val: string, update: Function) {
+  update(() => {
+    roleOp.value = roleMainOp.value.filter(
+      (e: any) => e.name.search(val) !== -1
+    );
+  });
+}
 </script>

 <template>
@ -79,6 +102,40 @@ function filterFn() {
        </template>
      </datepicker>
    </div>
+    <div class="col-xs-12 col-sm-3 col-md-3">
+      <q-select
+        for="selectStatus"
+        emit-value
+        map-options
+        outlined
+        dense
+        option-value="id"
+        option-label="name"
+        label="สถานภาพ"
+        use-input
+        v-model="roleStatus"
+        hide-selected
+        fill-input
+        :options="roleOp"
+        @update:model-value="filterFn"
+        @filter="filterOptionFn"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template>
+        <template v-if="roleStatus !== 'ALL'" v-slot:append>
+          <q-icon
+            name="cancel"
+            @click.stop.prevent="
+              (roleOp = roleMainOp), (roleStatus = 'ALL'), filterFn()
+            "
+            class="cursor-pointer"
+          />
+        </template>
+      </q-select>
+    </div>
    <q-space />
    <div class="col-xs-12 col-sm-3 col-md-2">
      <q-input
--- a/src/modules/09_leave/interface/response/work.ts
+++ b/src/modules/09_leave/interface/response/work.ts
@ -15,6 +15,7 @@ interface TableRows {
 interface TableRowsTime {
  id: string; //id รายการลงเวลาปฏิบัติงาน
  fullName: string; //ชื่อ-นามสกุล
+  profileType: string; //สถานภาพ
  checkInDate: string | null; //วันที่เข้างาน
  checkInTime: string; //เวลาเข้างาน
  checkInLocation: string; //พิกัดเข้างาน
@ -31,6 +32,7 @@ interface TableRowsTime {
 interface DataResTime {
  id: string; //id รายการลงเวลาปฏิบัติงาน
  fullName: string; //ชื่อ-นามสกุล
+  profileType: string; //สถานภาพ
  checkInDate: Date | null; //วันที่เข้างาน
  checkInTime: string; //เวลาเข้างาน
  checkInLocation: string; //พิกัดเข้างาน