From 0aa778cca53cd5108260040fed65e446a1476e05 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Tue, 28 Jan 2025 13:58:40 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=AA=E0=B8=A3=E0=B8=A3=E0=B8=AB=E0=B8=B2?=
 =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1=E0=B8=9F=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=94=E0=B9=8C=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=A5=E0=B8=AA=E0=B8=B3=E0=B8=AB=E0=B8=A3=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=8A=E0=B8=B3=E0=B8=A3=E0=B8=B0=E0=B9=80=E0=B8=87?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=99=E0=B9=81=E0=B8=A5=E0=B8=B0=E0=B8=88=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=94=E0=B8=97=E0=B8=B3=E0=B9=80=E0=B8=AD=E0=B8=81=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=8A=E0=B8=B3?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B9=80=E0=B8=87=E0=B8=B4=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/recruiting/api.period-exam.ts         |   2 +
 .../views/02_qualify/PeriodAdd.vue            | 491 +++++++++++++++++-
 .../09_leave/components/02_WorkList/Tab1.vue  |  22 +-
 .../09_leave/components/02_WorkList/Tab2.vue  |  22 +-
 .../components/02_WorkList/TableList.vue      |   7 +
 .../components/02_WorkList/ToolBar.vue        |  64 ++-
 .../components/02_WorkList/ToolBarDate.vue    |  57 ++
 .../09_leave/interface/response/work.ts       |   2 +
 8 files changed, 651 insertions(+), 16 deletions(-)

diff --git a/src/api/recruiting/api.period-exam.ts b/src/api/recruiting/api.period-exam.ts
index 31972f538..d52f2df27 100644
--- a/src/api/recruiting/api.period-exam.ts
+++ b/src/api/recruiting/api.period-exam.ts
@@ -28,6 +28,8 @@ export default {
   periodExamId: (examId: string) => `${periodExam}${examId}`,
   periodExamDoc: (examId: string) => `${periodExam}doc/${examId}`,
   periodExamImg: (examId: string) => `${periodExam}img/${examId}`,
+  periodExambarcode: (examId: string) => `${periodExam}barcode/${examId}`,
+  periodExamqrcode: (examId: string) => `${periodExam}qrcode/${examId}`,
   periodExamStatus: (examId: string) => `${periodExam}status-payment/${examId}`,
 
   countDashbordPeriodExam: (examId: string) =>
diff --git a/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue b/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
index 75db8aa35..30e68ccce 100644
--- a/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
+++ b/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
@@ -1,7 +1,7 @@
 <!-- page:จัดการรอบการสอบ สรรหา -->
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch, computed } from "vue";
 import { useQuasar, QForm } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 
@@ -39,6 +39,7 @@ const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
 const checkRoutePermisson = ref<boolean>(
   route.name == "qualifyPeriodEditDetail"
 ); //เช็คชื่อ route
+const fileList = ref<any[]>([]);
 const myForm = ref<QForm | null>(null); //form data input
 const name = ref<string>("");
 const note = ref<string>("");
@@ -49,10 +50,22 @@ const editorCondition = ref<string>(
 const editorConfirm = ref<string>(
   `<div style="text-align: center;"><span style="color: rgb(93, 190, 21); font-weight: 700; letter-spacing: 0.14992px;">คำรับรอง</span><br></div><div><div style=""><div style=""><font color="#35473c"><span style="font-size: 14px;"><br></span></font></div><div style=""><font color="#35473c"><span style="font-size: 14px;">1.<span style="white-space: pre;"> </span>ข้าพเจ้าขอให้คำรับรองว่า ข้อความดังกล่าวข้างต้นเป็นจริงทุกประการ และข้าพเจ้ามีคุณสมบัติทั่วไปและไม่มีลักษณะต้องห้ามตามมาตรา 43 แห่งพระราชบัญญัติระเบียบข้าราชการกรุงเทพมหานครและบุคลากรกรุงเทพมหานคร พ.ศ. 2554 และมีคุณสมบัติเฉพาะสำหรับตำแหน่งที่สมัครตรงตามประกาศรับสมัคร</span></font></div><div style=""><font color="#35473c"><span style="font-size: 14px;">2.<span style="white-space:pre"> </span>กรณีข้าพเจ้ามีลักษณะต้องห้าม ตามมาตรา 43 ข. แห่งพระราชบัญญัติระเบียบข้าราชการกรุงเทพมหานครและบุคลากรกรุงเทพมหานคร พ.ศ. 2554 และประสงค์จะยื่นคำขอยกเว้นเข้ารับราชการฯ ต่อสำนักงาน ก.ก. ตามระเบียบ ก.ก. ว่าด้วยการยกเว้นให้ผู้มีลักษณะต้องห้ามเข้ารับราชการเป็นข้าราชการกรุงเทพมหานคร พ.ศ. 2556 ตามมติ ก.ก. ครั้งที่ 7/2556 เมื่อวันที่ 15 สิงหาคม 2556 ข้าพเจ้าจะยื่นคำขอยกเว้นฯ ภายในวันปิดรับสมัคร ทั้งนี้ หากยื่นภายหลังกำหนด สำนักงาน ก.ก. จะไม่รับคำขอดังกล่าว</span></font></div><div style=""><font color="#35473c"><span style="font-size: 14px;">3.<span style="white-space:pre"> </span>ข้าพเจ้าจะยื่นหลักฐานและเอกสารที่แสดงว่า เป็นผู้มีคุณสมบัติทั่วไปและมีคุณสมบัติเฉพาะสำหรับตำแหน่งที่สมัครตรงตามประกาศรับสมัครภายในระยะเวลาที่กำหนดตามประกาศฯ หากมีการตรวจสอบหลักฐานและเอกสาร และหรือคุณวุฒิการศึกษาของข้าพเจ้าในภายหลังปรากฏว่าข้าพเจ้ามีคุณสมบัติไม่ตรงหรือมีลักษณะต้องห้ามตามประกาศรับสมัครหรือไม่ได้รับการยกเว้นให้ถือว่า ข้าพเจ้าเป็นผู้ขาดคุณสมบัติในการสมัครครั้งนี้มาตั้งแต่ต้น และไม่มีสิทธิได้รับการบรรจุและแต่งตั้งให้ดำรงตำแหน่ง และข้าพเจ้าจะไม่มีสิทธิเรียกร้องใดๆ ทั้งสิ้น และหากข้าพเจ้าจงใจกรอกข้อความอันเป็นเท็จ อาจมีความผิดทางอาญาฐานแจ้งความเท็จต่อเจ้าพนักงาน ตามประมวลกฎหมายอาญา มาตรา 137</span></font></div><div style=""><font color="#35473c"><span style="font-size: 14px;">4.<span style="white-space:pre"> </span>ข้าพเจ้าได้ศึกษาและทำความเข้าใจพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562 ตลอดจนประกาศและระเบียบที่เกี่ยวข้องโดยละเอียดครบถ้วนแล้ว ข้าพเจ้าขอแสดงความยินยอมให้หน่วยงานหรือบุคคลที่เกี่ยวข้องกับการดำเนินการสรรหา สามารถเก็บ รวบรวม ใช้และเปิดเผยข้อมูลส่วนบุคคลที่เกี่ยวข้องกับข้าพเจ้า เพื่อประโยชน์ของทางราชการตามกฎหมายที่เกี่ยวข้อง</span></font></div><div style=""><font color="#35473c"><span style="font-size: 14px;">5.<span style="white-space:pre"> </span>ข้าพเจ้ารับทราบว่าการส่งใบสมัครคัดเลือกฯ พร้อมเอกสารนี้ ยังไม่ได้รับการตรวจสอบคุณสมบัติตามหลักเกณฑ์ ประกาศรับสมัครคัดเลือก และเงื่อนไขต่างๆ โดยจะได้รับการตรวจสอบคุณสมบัติเมื่อเป็นผู้สอบผ่านข้อเขียนภาคความรู้ความสามารถที่ใช้เฉพาะตำแหน่งแล้วเท่านั้น</span></font></div></div>`
 );
+
+const fee = ref<number>(0);
+const remark = ref<string>("");
+const companyCode = ref<string>("");
+const reason = ref<string>("");
+const refNo1 = ref<string>("");
+
+const qrCodes = ref<File | any>(null);
+const barCodes = ref<File | any>(null);
+
+const qrCodesFile = ref<UploadType[]>([]);
+const barCodesFile = ref<UploadType[]>([]);
+
 const checkDocument = ref<boolean>(false);
 const checkDisability = ref<boolean>(false);
 const announcementExam = ref<boolean>(true);
-const fee = ref<number>(0);
 const round = ref<number>(1);
 const yearly = ref<number>(new Date().getFullYear());
 const nameRaw = ref<number | null>(null);
@@ -286,7 +299,13 @@ async function fetchData() {
       note.value = data.note;
       fileDocs.value = data.documents;
       fileImgs.value = data.images;
+      qrCodesFile.value = data.qrCodes;
+      barCodesFile.value = data.barCodes;
       category.value = data.category;
+      remark.value = data.remark;
+      companyCode.value = data.companyCode;
+      refNo1.value = data.refNo1;
+      reason.value = data.reason;
     })
     .catch((e) => {
       messageError($q, e);
@@ -420,6 +439,10 @@ function sendData() {
     round: round.value,
     year: yearly.value,
     category: category.value,
+    remark: remark.value,
+    companyCode: companyCode.value,
+    refNo1: refNo1.value,
+    reason: reason.value,
   };
   return valueData;
 }
@@ -435,6 +458,8 @@ async function addData() {
       success($q, "บันทึกรอบคัดเลือกสำเร็จ");
       await uploadImgData();
       await uploadDocData();
+      await uploadBarCodes();
+      await uploadQrCodes();
       await clickBack();
     })
     .catch((e) => {
@@ -456,6 +481,8 @@ async function editData(id: string) {
     .then(async () => {
       await uploadImgData();
       await uploadDocData();
+      await uploadBarCodes();
+      await uploadQrCodes();
       success($q, "แก้ไขรอบคัดเลือกสำเร็จ");
       await clickBack();
     })
@@ -507,9 +534,47 @@ async function uploadDocData() {
       .finally(async () => {
         hideLoader();
       });
-  } else {
-    clickBack();
-  }
+  } 
+}
+
+
+/** อัปโหลดไฟล์เอกสาร */
+async function uploadBarCodes() {
+  const formData = new FormData();
+  if (barCodes.value !== null) {
+    formData.append("", barCodes.value);
+
+    showLoader();
+    
+    await http
+      .put(config.API.periodExambarcode(id.value), formData)
+      .then((res) => {
+        console.log(1)
+      })
+      .catch((e) => {})
+      .finally(async () => {
+        hideLoader();
+      });
+  } 
+}
+
+/** อัปโหลดไฟล์เอกสาร */
+async function uploadQrCodes() {
+  const formData = new FormData();
+  if (qrCodes.value !== null) {
+    formData.append("", qrCodes.value);
+
+    showLoader();
+    await http
+      .put(config.API.periodExamqrcode(id.value), formData)
+      .then((res) => {
+        console.log(2)
+      })
+      .catch((e) => {})
+      .finally(async () => {
+        hideLoader();
+      });
+  } 
 }
 
 /**
@@ -756,9 +821,45 @@ function onUpdateHighDegree(val: string, index: string) {
 watch(fee, () => {
   if (fee.value <= 0) {
     pay.value = "";
+    remark.value = "";
+  } else if (fee.value > 0) {
+    remark.value = `*ค่าธรรมเนียมการสมัครคัดเลือก จำนวน ${
+      fee.value
+    } บาท ประกอบไปด้วย ค่าธรรมเนียมสอบ จำนวน ${
+      fee.value > 30 ? fee.value - 30 : "..."
+    } บาท และค่าธรรมเนียมธนาคารรวมค่าบริการอินเทอร์เน็ตจำนวน ${
+      fee.value > 30 ? "30" : "..."
+    } บาท โดยค่าธรรมเนียมดังกล่าวจะไม่จ่ายคืนให้ไม่ว่ากรณีใดๆ ทั้งสิ้น`;
   }
 });
 
+pay.value;
+watch(
+  () => ({ datePayment: datePayment.value, pay: pay.value }),
+  ({ datePayment, pay }) => {
+    if (datePayment) {
+      reason.value = `โปรดนำแบบฟอร์มการชำระเงินฺฉบับนี้ พร้อมเงินสดไปยื่นขำระเงินที่เคาน์เตอร์ บมจ.ธนาคารกรุงไทย
+ได้ทุกสาขาทั่วประเทศ ตั้งแต่วันที่ ${dateThaiRange(
+        datePayment
+      )} ภายในวันเวลาทำการของธนาคาร
+หรือผ่านระบบ Internet payment (Krungthai NEXT/เป๋าตัง) ตลอด 24 ชั่วโมง
+ตั้งแต่วันที่ ${date2Thai(
+        datePayment[0]
+      )} เปิดชำระเงิน เวลา 08.30 น. – ${date2Thai(
+        datePayment[1]
+      )} ปิดชำระเงินเวลา 22.00 น.
+    `;
+    }
+    if (pay == "payment1" && datePayment == null) {
+      reason.value = `โปรดนำแบบฟอร์มการชำระเงินฺฉบับนี้ พร้อมเงินสดไปยื่นขำระเงินที่เคาน์เตอร์ บมจ.ธนาคารกรุงไทย
+ได้ทุกสาขาทั่วประเทศ ตั้งแต่วันที่ ... – ... ภายในวันเวลาทำการของธนาคาร
+หรือผ่านระบบ Internet payment (Krungthai NEXT/เป๋าตัง) ตลอด 24 ชั่วโมง
+ตั้งแต่วันที่ ... เปิดชำระเงิน เวลา ... น. – ... ปิดชำระเงินเวลา ... น.
+`;
+    }
+  }
+);
+
 onMounted(async () => {
   hideLoader();
   if (route.params.id != undefined) {
@@ -1286,6 +1387,386 @@ onMounted(async () => {
                     >
                   </q-item-section>
                 </q-item>
+                <q-slide-transition :duration="100">
+                  <div v-show="pay == 'payment1'" class="q-py-sm bg-grey-1">
+                    <div class="row q-col-gutter-sm">
+                      <div class="col-12">
+                        <q-separator />
+                      </div>
+                      <div
+                        class="col-12 text-weight-medium text-subtitle1 q-px-md"
+                      >
+                        รายละเอียดการชำระ
+                      </div>
+                      <div class="col-12">
+                        <q-separator />
+                      </div>
+                      <div class="col-12">
+                        <div class="row q-col-gutter-sm q-pa-sm">
+                          <div class="col-12">
+                            <q-input
+                              label="ข้อความส่วนหัว"
+                              outlined
+                              dense
+                              type="textarea"
+                              rows="2"
+                              :readonly="checkRoutePermisson"
+                              bg-color="white"
+                              v-model="remark"
+                              :rules="[(val:string) => !!val || `${'กรุณากรอกข้อความส่วนหัว'}`]"
+                              hide-bottom-space
+                            >
+                            </q-input>
+                          </div>
+                          <div class="col-6">
+                            <q-input
+                              label="Company Code"
+                              outlined
+                              dense
+                              bg-color="white"
+                              :readonly="checkRoutePermisson"
+                              v-model="companyCode"
+                              :rules="[(val:string) => !!val || `${'กรุณากรอก Company Code'}`]"
+                              hide-bottom-space
+                            >
+                            </q-input>
+                          </div>
+                          <div class="col-6">
+                            <q-input
+                              label="refNo1."
+                              outlined
+                              dense
+                              bg-color="white"
+                              :readonly="checkRoutePermisson"
+                              v-model="refNo1"
+                              :rules="[(val:string) => !!val || `${'กรุณากรอก refNo1.'}`]"
+                              hide-bottom-space
+                            >
+                            </q-input>
+                          </div>
+                          <div class="col-12">
+                            <q-input
+                              label="หมายเหตุ"
+                              outlined
+                              dense
+                              :readonly="checkRoutePermisson"
+                              bg-color="white"
+                              v-model="reason"
+                              type="textarea"
+                              rows="4"
+                            >
+                            </q-input>
+                          </div>
+                          <div class="row col-12 items-top q-col-gutter-x-sm">
+                            <div class="col-xs-12 col-sm-6">
+                              <div class="text-bold text-subtitle2 q-pb-sm">
+                                อัปโหลดบาร์โค้ด
+                              </div>
+                              <div class="row justify-center row col-12">
+                                <q-uploader
+                                  v-model="qrCodes"
+                                  color="gray"
+                                  type="file"
+                                  flat
+                                  :readonly="checkRoutePermisson"
+                                  ref="uploader"
+                                  class="full-width"
+                                  text-color="dark"
+                                  :max-size="10000000"
+                                  accept=".jpg,.png"
+                                  bordered
+                                  label="[ไฟล์ jpg,png ขนาดไม่เกิน 10MB]"
+                                  @removed="qrCodes = null"
+                                  @added="(v:any) => (qrCodes = v[0])"
+                                >
+                                  <template v-slot:header="scope">
+                                    <div
+                                      class="row no-wrap items-center q-pa-sm q-gutter-xs text-white"
+                                    >
+                                      <q-btn
+                                        v-if="
+                                          scope.queuedFiles.length > 0 &&
+                                          !checkRoutePermisson
+                                        "
+                                        icon="clear_all"
+                                        @click="scope.removeQueuedFiles"
+                                        round
+                                        dense
+                                        flat
+                                      >
+                                        <q-tooltip>ลบทั้งหมด</q-tooltip>
+                                      </q-btn>
+                                      <q-btn
+                                        v-if="
+                                          scope.uploadedFiles.length > 0 &&
+                                          !checkRoutePermisson
+                                        "
+                                        icon="done_all"
+                                        @click="scope.removeUploadedFiles"
+                                        round
+                                        dense
+                                        flat
+                                      >
+                                        <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
+                                      </q-btn>
+                                      <q-spinner
+                                        v-if="scope.isUploading"
+                                        class="q-uploader__spinner"
+                                      />
+                                      <div class="col">
+                                        <div class="q-uploader__title">
+                                          {{
+                                            "[ไฟล์ jpg,png ขนาดไม่เกิน 10MB]"
+                                          }}
+                                        </div>
+                                        <div class="q-uploader__subtitle">
+                                          {{ scope.uploadSizeLabel }}
+                                          /
+                                          {{ scope.uploadProgressLabel }}
+                                        </div>
+                                      </div>
+                                      <q-btn
+                                        v-if="
+                                          scope.canAddFiles &&
+                                          !checkRoutePermisson
+                                        "
+                                        type="a"
+                                        icon="add_box"
+                                        @click="scope.pickFiles"
+                                        round
+                                        dense
+                                        flat
+                                      >
+                                        <q-uploader-add-trigger />
+                                        <q-tooltip>เลือกไฟล์</q-tooltip>
+                                      </q-btn>
+                                      <q-btn
+                                        v-if="
+                                          scope.isUploading &&
+                                          !checkRoutePermisson
+                                        "
+                                        icon="clear"
+                                        @click="scope.abort"
+                                        round
+                                        dense
+                                        flat
+                                      >
+                                        <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
+                                      </q-btn>
+                                    </div>
+                                  </template>
+                                </q-uploader>
+                              </div>
+                              <q-card
+                                bordered
+                                flat
+                                class="full-width q-my-md"
+                                v-if="qrCodesFile.length != 0"
+                              >
+                                <q-list separator>
+                                  <q-item
+                                    v-for="file in qrCodesFile"
+                                    :key="file.id"
+                                    class="q-my-xs"
+                                  >
+                                    <q-item-section>
+                                      <q-item-label class="full-width ellipsis">
+                                        {{ file.fileName }}
+                                      </q-item-label>
+
+                                      <q-item-label caption>
+                                        สถานะ: {{ file.fileType }} /
+                                        {{ file.fileSize }}
+                                      </q-item-label>
+                                    </q-item-section>
+                                    <q-item-section top side>
+                                      <div class="q-gutter-sm">
+                                        <q-btn
+                                          size="12px"
+                                          flat
+                                          dense
+                                          round
+                                          color="blue"
+                                          icon="mdi-download-outline"
+                                          @click="downloadData(file.detail)"
+                                        >
+                                          <q-tooltip>ดาวน์โหลด</q-tooltip>
+                                        </q-btn>
+                                        <q-btn
+                                          size="12px"
+                                          flat
+                                          dense
+                                          round
+                                          color="red"
+                                          icon="mdi-delete-outline"
+                                          v-if="edit && !checkRoutePermisson"
+                                          @click="deleteDocData(file.id)"
+                                        >
+                                          <q-tooltip>ลบไฟล์</q-tooltip>
+                                        </q-btn>
+                                      </div>
+                                    </q-item-section>
+                                  </q-item>
+                                </q-list>
+                              </q-card>
+                            </div>
+                            <div class="col-xs-12 col-sm-6">
+                              <div class="text-bold text-subtitle2 q-pb-sm">
+                                อัปโหลดคิวอาร์โค้ด
+                              </div>
+                              <div class="row justify-center row col-12">
+                                <q-uploader
+                                  color="gray"
+                                  type="file"
+                                  flat
+                                  ref="uploader"
+                                  class="full-width"
+                                  :readonly="checkRoutePermisson"
+                                  text-color="dark"
+                                  :max-size="10000000"
+                                  accept=".jpg,.png"
+                                  bordered
+                                  label="[ไฟล์ jpg,png ขนาดไม่เกิน 10MB]"
+                                  @removed="barCodes = null"
+                                  @added="(v:any) => (barCodes = v[0])"
+                                >
+                                  <template v-slot:header="scope">
+                                    <div
+                                      class="row no-wrap items-center q-pa-sm q-gutter-xs text-white"
+                                    >
+                                      <q-btn
+                                        v-if="
+                                          scope.queuedFiles.length > 0 &&
+                                          !checkRoutePermisson
+                                        "
+                                        icon="clear_all"
+                                        @click="scope.removeQueuedFiles"
+                                        round
+                                        dense
+                                        flat
+                                      >
+                                        <q-tooltip>ลบทั้งหมด</q-tooltip>
+                                      </q-btn>
+                                      <q-btn
+                                        v-if="
+                                          scope.uploadedFiles.length > 0 &&
+                                          !checkRoutePermisson
+                                        "
+                                        icon="done_all"
+                                        @click="scope.removeUploadedFiles"
+                                        round
+                                        dense
+                                        flat
+                                      >
+                                        <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
+                                      </q-btn>
+                                      <q-spinner
+                                        v-if="scope.isUploading"
+                                        class="q-uploader__spinner"
+                                      />
+                                      <div class="col">
+                                        <div class="q-uploader__title">
+                                          {{
+                                            "[ไฟล์ jpg,png ขนาดไม่เกิน 10MB]"
+                                          }}
+                                        </div>
+                                        <div class="q-uploader__subtitle">
+                                          {{ scope.uploadSizeLabel }}
+                                          /
+                                          {{ scope.uploadProgressLabel }}
+                                        </div>
+                                      </div>
+                                      <q-btn
+                                        v-if="
+                                          scope.canAddFiles &&
+                                          !checkRoutePermisson
+                                        "
+                                        type="a"
+                                        icon="add_box"
+                                        @click="scope.pickFiles"
+                                        round
+                                        dense
+                                        flat
+                                      >
+                                        <q-uploader-add-trigger />
+                                        <q-tooltip>เลือกไฟล์</q-tooltip>
+                                      </q-btn>
+                                      <q-btn
+                                        v-if="
+                                          scope.isUploading &&
+                                          !checkRoutePermisson
+                                        "
+                                        icon="clear"
+                                        @click="scope.abort"
+                                        round
+                                        dense
+                                        flat
+                                      >
+                                        <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
+                                      </q-btn>
+                                    </div>
+                                  </template>
+                                </q-uploader>
+                              </div>
+                              <q-card
+                                bordered
+                                flat
+                                class="full-width q-my-md"
+                                v-if="barCodesFile.length != 0"
+                              >
+                                <q-list separator>
+                                  <q-item
+                                    v-for="file in barCodesFile"
+                                    :key="file.id"
+                                    class="q-my-xs"
+                                  >
+                                    <q-item-section>
+                                      <q-item-label class="full-width ellipsis">
+                                        {{ file.fileName }}
+                                      </q-item-label>
+
+                                      <q-item-label caption>
+                                        สถานะ: {{ file.fileType }} /
+                                        {{ file.fileSize }}
+                                      </q-item-label>
+                                    </q-item-section>
+                                    <q-item-section top side>
+                                      <div class="q-gutter-sm">
+                                        <q-btn
+                                          size="12px"
+                                          flat
+                                          dense
+                                          round
+                                          color="blue"
+                                          icon="mdi-download-outline"
+                                          @click="downloadData(file.detail)"
+                                        >
+                                          <q-tooltip>ดาวน์โหลด</q-tooltip>
+                                        </q-btn>
+                                        <q-btn
+                                          size="12px"
+                                          flat
+                                          dense
+                                          round
+                                          color="red"
+                                          icon="mdi-delete-outline"
+                                          v-if="edit && !checkRoutePermisson"
+                                          @click="deleteDocData(file.id)"
+                                        >
+                                          <q-tooltip>ลบไฟล์</q-tooltip>
+                                        </q-btn>
+                                      </div>
+                                    </q-item-section>
+                                  </q-item>
+                                </q-list>
+                              </q-card>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </q-slide-transition>
               </q-list>
 
               <q-list dense bordered class="col-12 rounded-borders">
diff --git a/src/modules/09_leave/components/02_WorkList/Tab1.vue b/src/modules/09_leave/components/02_WorkList/Tab1.vue
index 796f0dffb..fbda1a43e 100644
--- 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 : []"
diff --git a/src/modules/09_leave/components/02_WorkList/Tab2.vue b/src/modules/09_leave/components/02_WorkList/Tab2.vue
index 5bfa5752e..ac597d3c1 100644
--- 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"
diff --git a/src/modules/09_leave/components/02_WorkList/TableList.vue b/src/modules/09_leave/components/02_WorkList/TableList.vue
index d61e0ceec..db391c93f 100644
--- 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>
diff --git a/src/modules/09_leave/components/02_WorkList/ToolBar.vue b/src/modules/09_leave/components/02_WorkList/ToolBar.vue
index 09b6bc8f5..f401aebff 100644
--- 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"
diff --git a/src/modules/09_leave/components/02_WorkList/ToolBarDate.vue b/src/modules/09_leave/components/02_WorkList/ToolBarDate.vue
index 35d95580c..0dab24ce3 100644
--- 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
diff --git a/src/modules/09_leave/interface/response/work.ts b/src/modules/09_leave/interface/response/work.ts
index 8a1fb718f..c42163b13 100644
--- 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; //พิกัดเข้างาน