feat: เพิ่ม แก้ไขรอบการปฏิบัติงานของลูกจ้าง

src/api/09_leave/api.leave.ts

@@ -13,9 +13,13 @@ export default {
 
   /** เปลี่ยนแปลงลงเวลา*/
   leaveSearch: () => `${leave}/search`,
+  leaveSearchEMP: () => `${leave}/emp/search`,
   leaveRound: () => `${leave}/round`,
+  leaveRoundEMP: () => `${leave}/emp/round`,
   leaveRoundById: (id: string) => `${leave}/round/${id}`,
+  leaveRoundByIdEMP: (id: string) => `${leave}/emp/round/${id}`,
   leaveWorkByid: (id: string) => `${leave}/admin/work/${id}`,
+  leaveWorkByidEMP: (id: string) => `${leave}/admin/emp/work/${id}`,
 
   /**ลงเวลาพิเศษ */
   specialTime: () => `${leave}/admin/edit`,

src/modules/09_leave/components/03_ChangeRound/DialogForm.vue

@@ -36,6 +36,10 @@ const props = defineProps({
   editCheck: String,
   DataRow: Object,
   personId: String,
+  type: {
+    type: String,
+    default: "",
+  },
 });
 
 /**FormData */
@@ -114,9 +118,11 @@ function onSubmit() {
 async function changeRound() {
   const formattedDateForAPI = await convertDateToAPI(formData.effectiveDate);
 
+  const url =
+    props.type == "emp" ? config.API.leaveRoundEMP() : config.API.leaveRound();
   showLoader();
   await http
-    .post(config.API.leaveRound(), {
+    .post(url, {
       profileId: props.personId,
       roundId: formData.round,
       effectiveDate: formattedDateForAPI,
@@ -140,8 +146,14 @@ async function changeRound() {
  */
 async function fetchDataOption() {
   props.editCheck !== "history" && showLoader();
+  const url =
+    props.editCheck == "edit"
+      ? config.API.leaveRound()
+      : props.type == "emp"
+      ? config.API.leaveRoundEMP()
+      : config.API.leaveRound();
   await http
-    .get(config.API.leaveRound())
+    .get(url)
     .then((res) => {
       const data = res.data.result;
       let option: DataOption[] = [];
@@ -202,7 +214,11 @@ watch(
       formData.reson = "";
       formData.effectiveDate = null;
     }
-    if (props.modal === true && dataStore.roundOp.length == 0) {
+    if (
+      props.modal === true &&
+      dataStore.roundOp.length == 0 &&
+      props.editCheck !== "history"
+    ) {
       currentPage.value = 1;
       await fetchDataOption();
     } else {

src/modules/09_leave/router.ts

@@ -10,7 +10,8 @@ const ChangeRoundMain = () =>
 const SpecialTimeMain = () =>
   import("@/modules/09_leave/views/04_SpecialTimeMain.vue");
 const leaveReport = () => import("@/modules/09_leave/views/06_ReportMain.vue");
-
+const ChangeRoundEMP = () =>
+  import("@/modules/09_leave/views/ChangeRoundEMP.vue");
 // const CheckinReport = () =>
 //   import("@/modules/09_leave/views/!07_ReportCheckin.vue");
 
@@ -37,6 +38,16 @@ export default [
       Role: "STAFF",
     },
   },
+  {
+    path: "/change-round-emp",
+    name: "changeRoundEmp",
+    component: ChangeRoundEMP,
+    meta: {
+      Auth: true,
+      Key: "SYS_WORK_ROUND_EDIT_EMP",
+      Role: "STAFF",
+    },
+  },
   {
     path: "/work-list",
     name: "workList",

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

@@ -123,11 +123,15 @@ export const useChangeRoundDataStore = defineStore(
     const maxPageMain = ref<number>(0);
     const totalListMain = ref<number>(0);
 
-    async function fetchDataForCardId(dataDetail: any) {
+    async function fetchDataForCardId(dataDetail: any, type?: string) {
       if (dataDetail) {
         showLoader();
+        const url =
+          type && type == "emp"
+            ? config.API.leaveSearchEMP()
+            : config.API.leaveSearch();
         await http
-          .post(config.API.leaveSearch(), {
+          .post(url, {
             citizenId: dataDetail.cardId.trim() || "", //เลขประจำตัวประชาชน
             firstname: dataDetail.firstName.trim() || "", //ชื่อจริง
             lastname: dataDetail.lastName.trim() || "", //นามสกุล
@@ -180,18 +184,26 @@ export const useChangeRoundDataStore = defineStore(
      * @param pageVal page
      * @param pageSizeVal pagesize
      */
-    async function changePage(pageVal: number, pageSizeVal: number) {
+    async function changePage(
+      pageVal: number,
+      pageSizeVal: number,
+      type?: string
+    ) {
       page.value = pageVal;
       pageSize.value = pageSizeVal;
-      fetchDatainHistory();
+      fetchDatainHistory(type);
     }
     /**ฟังก์ชั่นดึงดาต้าประวัติ */
-    async function fetchDatainHistory() {
+    async function fetchDatainHistory(type?: string) {
       rowsHistory.value = [];
       showLoader();
+      const url =
+        type == "emp"
+          ? config.API.leaveRoundByIdEMP(profileId.value)
+          : config.API.leaveRoundById(profileId.value);
       await http
         .get(
-          config.API.leaveRoundById(profileId.value) +
+          url +
             `?page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}`
         )
         .then((res) => {
@@ -237,7 +249,7 @@ export const useChangeRoundDataStore = defineStore(
       totalListMain,
       maxPageMain,
       roundOp,
-      roundOpMain
+      roundOpMain,
     };
   }
 );

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

@@ -0,0 +1,384 @@
+<script setup lang="ts">
+import { ref, watch, reactive } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useChangeRoundDataStore } from "@/modules/09_leave/stores/ChangeRoundStore";
+import { checkPermission } from "@/utils/permissions";
+
+import type { DataPost } from "@/modules/09_leave/interface/request/changeRound";
+
+import Dialogform from "@/modules/09_leave/components/03_ChangeRound/DialogForm.vue";
+
+/** useStore */
+const mixin = useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  success,
+  messageError,
+  dialogMessageNotify,
+  dialogConfirm,
+} = mixin;
+const dataStore = useChangeRoundDataStore();
+
+/** use */
+const $q = useQuasar();
+
+const modal = ref<boolean>(false);
+const dateWork = ref<string>("NORMAL");
+const modalFix = ref<boolean>(false);
+const editCheck = ref<string>("");
+const DataRow = ref<any>();
+const formData = reactive<DataPost>({
+  cardId: "",
+  firstName: "",
+  lastName: "",
+  page: 1,
+  pageSize: 10,
+});
+
+/**
+ * Function openPopup
+ * @param check action edit,history
+ * @param detail รายละเอียดข้อมูลรอบการปฏิบัติของผู้ใช้งาน
+ */
+async function Openmodal(check: string, detail: any) {
+  DataRow.value = detail;
+  modal.value = true;
+  dataStore.setProfileId(DataRow.value.profileId);
+  editCheck.value = check;
+  if (check === "history") {
+    modal.value = true;
+    dataStore.changePage(1, dataStore.pageSize, "emp");
+    // dataStore.fetchDatainHistory();
+  }
+}
+
+/**
+ * function เรียกข้อมูลปฏิทินวันทำงาน
+ * @param id profileId
+ */
+async function fetchDataCalendarWork(id: string) {
+  showLoader();
+  await http
+    .get(config.API.leaveWorkByidEMP(id))
+    .then((res) => {
+      dateWork.value = res.data.result.work;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+const detailByid = ref();
+async function OpenmodalFix(detail: any) {
+  detailByid.value = detail;
+  modalFix.value = true;
+  await fetchDataCalendarWork(detail.profileId);
+}
+
+/** Function closePopup */
+function closeDialog() {
+  modal.value = false;
+  modalFix.value = false;
+}
+
+function save() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .put(config.API.leaveWorkByidEMP(detailByid.value.profileId), {
+        work: dateWork.value,
+      })
+      .then(async () => {
+        // await searchData();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        closeDialog();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: any) {
+  formData.pageSize = newPagination.rowsPerPage;
+}
+
+/** Function ค้นหาข้อมูล */
+async function searchData() {
+  if (formData.cardId || formData.firstName || formData.lastName) {
+    await dataStore.fetchDataForCardId(formData, "emp");
+  } else {
+    dialogMessageNotify($q, "กรุณากรอกข้อมูลอย่างน้อย 1 ช่อง");
+  }
+}
+
+watch(
+  () => formData.pageSize,
+  () => {
+    formData.page = 1;
+    searchData();
+  }
+);
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    เปลี่ยนแปลงรอบการปฏิบัติงานของผู้ใช้งาน
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+    <div class="row col-12 q-mb-sm">
+      <q-card flat bordered class="bg-grey-2 col-12 bg-white q-pa-lg">
+        <div class="text-dark col-12 text-weight-bold text-subtitle1">
+          ค้นหารายชื่อ
+        </div>
+        <div class="row justify-between q-gutter-y-sm">
+          <q-input
+            :readonly="!checkPermission($route)?.attrIsGet"
+            v-model="formData.cardId"
+            outlined
+            label="เลขประจำตัวประชาชน"
+            class="col-6 col-md-4 bg-white inputgreen"
+            dense
+            hide-bottom-space
+            maxlength="13"
+          />
+          <q-input
+            :readonly="!checkPermission($route)?.attrIsGet"
+            v-model="formData.firstName"
+            outlined
+            label="ชื่อ"
+            class="col-5 col-md-3 bg-white inputgreen"
+            dense
+            hide-bottom-space
+          />
+          <q-input
+            :readonly="!checkPermission($route)?.attrIsGet"
+            v-model="formData.lastName"
+            outlined
+            label="นามสกุล"
+            class="col-6 col-md-3 bg-white inputgreen"
+            dense
+            hide-bottom-space
+          />
+          <q-btn
+            v-if="checkPermission($route)?.attrIsGet"
+            @click="(formData.page = 1), searchData()"
+            for="#search"
+            dense
+            unelevated
+            color="primary"
+            class="q-px-sm col-5 col-md-1"
+            style="max-height: 40px"
+            >ค้นหา</q-btn
+          >
+        </div>
+      </q-card>
+    </div>
+    <div v-if="dataStore.rows.length === 0 && dataStore.checkCilck === true">
+      <q-card
+        flat
+        bordered
+        class="bg-grey-2 col-12 q-pa-lg text-center text-subtitle1 text-bold"
+        >ไม่พบข้อมูล</q-card
+      >
+    </div>
+    <div v-if="dataStore.rows.length !== 0" class="col-12 q-mt-xl">
+      <d-table
+        ref="table"
+        :columns="dataStore.columns"
+        :rows="dataStore.rows"
+        row-key="interrogated"
+        flat
+        bordered
+        dense
+        class="custom-header-table"
+        :visible-columns="dataStore.visibleColumns"
+        :rows-per-page-options="[10, 25, 50, 100]"
+        @update:pagination="updatePagination"
+      >
+        <!-- :paging="true" -->
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th auto-width />
+            <q-th
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              style="color: #000000; font-weight: 500"
+            >
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props">
+            <q-td>
+              <div>
+                <q-btn
+                  flat
+                  icon="mdi-dots-horizontal-circle-outline"
+                  color="secondary"
+                  for="#cancel"
+                  dense
+                  round
+                >
+                  <q-menu>
+                    <q-list>
+                      <q-item
+                        v-if="checkPermission($route)?.attrIsUpdate"
+                        clickable
+                        v-close-popup
+                        @click="Openmodal('edit', props.row)"
+                      >
+                        <q-item-section style="min-width: 0px" avatar>
+                          <q-icon
+                            color="primary"
+                            name="mdi-shuffle-variant"
+                            size="xs"
+                          />
+                        </q-item-section>
+
+                        <q-item-section>
+                          <q-item-label>เปลี่ยนรอบการลงเวลา</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                      <q-item
+                        v-if="checkPermission($route)?.attrIsUpdate"
+                        clickable
+                        v-close-popup
+                        @click="OpenmodalFix(props.row)"
+                      >
+                        <q-item-section style="min-width: 0px" avatar>
+                          <q-icon color="edit" name="edit" size="xs" />
+                        </q-item-section>
+
+                        <q-item-section>
+                          <q-item-label>แก้ไขปฏิทินวันทำงาน</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                      <q-item
+                        clickable
+                        v-close-popup
+                        @click="Openmodal('history', props.row)"
+                      >
+                        <q-item-section style="min-width: 0px" avatar>
+                          <q-icon
+                            color="deep-purple"
+                            name="mdi-history"
+                            size="xs"
+                          />
+                        </q-item-section>
+                        <q-item-section>
+                          <q-item-label>ประวัติการเปลี่ยนรอบ</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-menu>
+                </q-btn>
+              </div>
+            </q-td>
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <div>
+                {{ col.value ?? "-" }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+        <template v-slot:pagination="scope">
+          ทั้งหมด {{ dataStore.totalListMain }} รายการ
+          <q-pagination
+            v-model="formData.page"
+            active-color="primary"
+            color="dark"
+            :max="Number(dataStore.maxPageMain)"
+            size="sm"
+            boundary-links
+            direction-links
+            :max-pages="5"
+            @update:model-value="dataStore.fetchDataForCardId(formData)"
+          ></q-pagination>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+
+  <!-- popup เปลี่ยนรอบการปฏิบัติงาน ,ประวัติการเปลี่ยนรอบการปฏิบัติงาน  -->
+  <Dialogform
+    :modal="modal"
+    :closeDialog="closeDialog"
+    :editCheck="editCheck"
+    :DataRow="DataRow"
+    :personId="DataRow == null ? '' : DataRow.profileId"
+    @update:change-page="dataStore.changePage"
+    :type="'emp'"
+  />
+
+  <!-- แก้ไขปฏิทินวันทำงาน -->
+  <q-dialog v-model="modalFix" persistent>
+    <q-card style="min-width: 800px"
+      ><q-toolbar>
+        <q-toolbar-title class="text-subtitle1 text-bold">
+          {{ "แก้ไขปฏิทินวันทำงาน" }}
+        </q-toolbar-title>
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="closeDialog"
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-toolbar>
+      <q-separator color="grey-4" />
+      <q-form @submit="save" class="q-gutter-md">
+        <div class="q-pa-md">
+          <q-radio
+            name="dateWork"
+            v-model="dateWork"
+            val="NORMAL"
+            label="ทำงาน 5 วัน"
+          />
+          <q-radio
+            name="dateWork"
+            v-model="dateWork"
+            val="6DAY"
+            label="ทำงาน 6 วัน"
+          />
+        </div>
+        <q-separator color="grey-4" />
+        <div class="q-pa-xs">
+          <div class="row justify-end q-mr-sm q-py-sm">
+            <q-btn
+              id="onSubmit"
+              type="submit"
+              unelevated
+              label="บันทึก"
+              class="q-px-md items-center"
+              color="secondary"
+            />
+          </div>
+        </div>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped lang="scss">
+.q-table tbody td:before.no-background {
+  background: none;
+}
+</style>