Merge branch 'develop' of github.com:Frappet/bma-ehr-frontend into develop

# Conflicts: # src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue
2024-02-28 15:24:53 +07:00 · 2024-02-28 15:24:53 +07:00 · 16a6a4255b
commit 16a6a4255b
parent 84bb5b20a0 84978b8ada
12 changed files with 531 additions and 63 deletions
--- a/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue
+++ b/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue
@ -0,0 +1,309 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
+import type { DataFilterPerson } from "@/modules/13_salary/interface/index/SalaryList";
+import type { DataPersonReq } from "@/modules/13_salary/interface/request/SalaryList";
+import type { DataPerson } from "@/modules/13_salary/interface/response/SalaryList";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+
+/** use*/
+const $q = useQuasar();
+const store = useSalaryListSDataStore();
+const { messageError, showLoader, hideLoader, dialogConfirm, success } =
+  useCounterMixin();
+
+/** props*/
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  fetchData: {
+    type: Function,
+  },
+});
+
+/** Table*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    field: "fullName",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posType",
+    align: "left",
+    label: "ประเภทตำเเหน่ง",
+    sortable: false,
+    field: "posType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevel",
+    align: "left",
+    label: "ระดับตำเเหน่ง",
+    sortable: false,
+    field: "posLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const rows = ref<DataPerson[]>([]);
+
+/** ข้อมูุลค้นหา*/
+const formFilter = reactive<DataFilterPerson>({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+const maxPage = ref<number>(1);
+
+/** function close popup*/
+function closeModal() {
+  modal.value = false;
+  formFilter.page = 1;
+}
+
+/** function เรียกรายชื่อ คนเลื่อนเงินเดือน*/
+async function fetchListPerson() {
+  showLoader();
+  await http
+    .post(config.API.salaryListPerson, formFilter)
+    .then((res) => {
+      const data = res.data.result.data;
+      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+      closeModal();
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * function ยืนยันการเพิ่มคนเลื่อนเงินเดือน
+ * @param data ข้อมูลคนที่เพิ่ม
+ */
+async function onClickAddPerson(data: DataPerson) {
+  const body: DataPersonReq = {
+    id: store.groupId,
+    type: store.tabType,
+    ...data,
+  };
+
+  dialogConfirm(
+    $q,
+    async () => {
+      await http
+        .post(config.API.salaryPeriodProfile, body)
+        .then(() => {
+          props.fetchData?.();
+          success($q, "เพื่มรายชื่อสำเร็จ");
+          closeModal();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการเพิ่มรายชื่อ",
+    "ต้องการยืนยันการเพิ่มรายชื่อนี้ใช่หรือไม่?"
+  );
+}
+
+/** function updatePage*/
+async function updatePagePagination() {
+  fetchListPerson();
+}
+
+/** function updatePageSize*/
+function updatePageSizePagination(newPagination: NewPagination) {
+  formFilter.page = 1;
+  formFilter.pageSize = newPagination.rowsPerPage;
+}
+
+/** function ค้นหาข้อมูลตาม keyword*/
+function searchData() {
+  formFilter.page = 1;
+  fetchListPerson();
+}
+
+/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปิด Popup*/
+watch(
+  () => modal.value,
+  async () => {
+    if (modal.value) {
+      await fetchListPerson();
+    }
+  }
+);
+
+/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปลี่ยน PageSize*/
+watch(
+  () => formFilter.pageSize,
+  () => {
+    updatePagePagination();
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="max-width: 100vw">
+      <Header :tittle="'เพิ่มคนเลื่อนเงินเดือน'" :close="closeModal" />
+      <q-separator />
+
+      <q-card-section class="scroll" style="max-height: 70vh">
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <q-input
+              borderless
+              dense
+              debounce="300"
+              outlined
+              placeholder="ค้นหา"
+              v-model="formFilter.keyword"
+              @keydown.enter.prevent="searchData"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+          </div>
+          <div class="col-12">
+            <d-table
+              ref="table"
+              :columns="columns"
+              :rows="rows"
+              row-key="id"
+              flat
+              bordered
+              :paging="true"
+              dense
+              :rows-per-page-options="[10, 25, 50, 100]"
+              @update:pagination="updatePageSizePagination"
+            >
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <span class="text-weight-medium">{{ col.label }}</span>
+                  </q-th>
+                  <q-th auto-width></q-th>
+                </q-tr>
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div v-if="col.name === 'no'">
+                      {{
+                        (formFilter.page - 1) * formFilter.pageSize +
+                        props.rowIndex +
+                        1
+                      }}
+                    </div>
+                    <div v-else-if="col.name === 'fullName'">
+                      {{
+                        `${props.row.prefix}${props.row.firstName}  ${props.row.lastName}`
+                      }}
+                    </div>
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </div>
+                  </q-td>
+                  <q-td>
+                    <q-btn
+                      outline
+                      color="primary"
+                      label="เพิ่ม"
+                      @click="onClickAddPerson(props.row)"
+                    />
+                  </q-td>
+                </q-tr>
+              </template>
+              <template v-slot:pagination="scope">
+                <q-pagination
+                  v-model="formFilter.page"
+                  active-color="primary"
+                  color="dark"
+                  :max="Number(maxPage)"
+                  :max-pages="5"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                  @update:model-value="updatePagePagination()"
+                ></q-pagination>
+              </template>
+            </d-table>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          type="submit"
+          unelevated
+          dense
+          class="q-px-md items-center"
+          color="light-blue-10"
+          label="บันทึก"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
--- a/src/modules/13_salary/components/SalaryLists/DialogFormEdit.vue
+++ b/src/modules/13_salary/components/SalaryLists/DialogFormEdit.vue
@ -34,7 +34,7 @@ function close() {

 function onSubmit() {
  dialogConfirm($q, () => {
-    if (amount.value) {
+    if (amount.value !== null) {
      const amountString: string = amount.value.toString();
      const body = {
        profileId: profileId.value,
@ -58,13 +58,6 @@ function onSubmit() {
    }
  });
 }
-
-function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer inputgreen ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
 </script>

 <template>
@ -76,7 +69,6 @@ function inputEdit(val: boolean) {
      <q-card-section class="scroll" style="max-height: 70vh">
        <div class="q-gutter-y-sm">
          <q-input
-            ref="salaryRef"
            dense
            outlined
            v-model="amount"
@ -92,7 +84,6 @@ function inputEdit(val: boolean) {
      <q-separator />
      <form @submit.prevent="validateForm">
        <q-card-actions align="right" class="bg-white text-teal">
-          <!-- <q-btn flat label="OK" v-close-popup /> -->
          <q-btn
            type="submit"
            for="#submitForm"
--- a/src/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue
+++ b/src/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue
@ -22,13 +22,17 @@ const props = defineProps({
 });

 const group = ref<string>("");
+const groupRef = ref<any>(null);
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 const mixin = useCounterMixin();
 const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;

 /*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
 function validateForm() {
-  onSubmit();
+  groupRef.value.validate();
+  if (groupRef.value.validate()) {
+    onSubmit();
+  }
 }

 function close() {
@ -76,7 +80,7 @@ function inputEdit(val: boolean) {
      <q-card-section class="scroll" style="max-height: 70vh">
        <div class="q-gutter-y-sm">
          <q-select
-            ref="periodRef"
+            ref="groupRef"
            :class="inputEdit(isReadonly)"
            v-model="group"
            label="กลุ่ม"
@ -87,7 +91,7 @@ function inputEdit(val: boolean) {
            option-label="name"
            option-value="id"
            :options="store.groupOp.filter((e) => e.name !== props.group)"
-            :rules="[(val) => !!val || `${'กรุณาเลือกรอบการขึ้นเงินเดือน'}`]"
+            :rules="[(val) => !!val || `${'กรุณากลุ่ม'}`]"
            lazy-rules
            hide-bottom-space
          />
--- a/src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue
+++ b/src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue
@ -14,6 +14,7 @@ const store = useSalaryListSDataStore();
 const modal = defineModel<boolean>("modal", { required: true });
 const profileId = defineModel<string>("profileId", { required: true });
 const type = ref<string>("");
+const typeRef = ref<any>(null);
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 const mixin = useCounterMixin();
 const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;
@ -26,7 +27,10 @@ const props = defineProps({

 /*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
 function validateForm() {
-  onSubmit();
+  typeRef.value.validate();
+  if (typeRef.value.validate()) {
+    onSubmit();
+  }
 }

 function close() {
@ -74,7 +78,7 @@ function inputEdit(val: boolean) {
      <q-card-section class="scroll" style="max-height: 70vh">
        <div class="q-gutter-y-sm">
          <q-select
-            ref="periodRef"
+            ref="typeRef"
            :class="inputEdit(isReadonly)"
            v-model="type"
            label="เลื่อนขั้น"
--- a/src/modules/13_salary/components/SalaryLists/TabMain.vue
+++ b/src/modules/13_salary/components/SalaryLists/TabMain.vue
@ -171,7 +171,6 @@ async function fetchDataPeriod(id: string) {
    .then((res) => {
      rows.value = res.data.result.data;
      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
-      // maxPage.value = 10;
    })
    .catch((err) => {
      messageError($q, err);
@ -198,6 +197,7 @@ function changeTabType() {

 function updatePagination() {
  store.groupId && fetchDataPeriod(store.groupId);
+  store.groupId && fetchDataQuota(store.groupId);
 }

 onMounted(async () => {
@ -307,28 +307,28 @@ onMounted(async () => {
                  :rows="rows"
                  v-model:maxPage="maxPage"
                  v-model:formFilter="formFilter"
-                  :updatePagination="updatePagination"
+                  :fetchDataTable="updatePagination"
                />
                <TableTabType2
                  v-if="index + 1 === 2"
                  :rows="rows"
                  v-model:maxPage="maxPage"
                  v-model:formFilter="formFilter"
-                  :updatePagination="updatePagination"
+                  :fetchDataTable="updatePagination"
                />
                <TableTabType2
                  v-if="index + 1 === 3"
                  :rows="rows"
                  v-model:maxPage="maxPage"
                  v-model:formFilter="formFilter"
-                  :updatePagination="updatePagination"
+                  :fetchDataTable="updatePagination"
                />
                <TableTabType2
                  v-if="index + 1 === 4"
                  :rows="rows"
                  v-model:maxPage="maxPage"
                  v-model:formFilter="formFilter"
-                  :updatePagination="updatePagination"
+                  :fetchDataTable="updatePagination"
                />
                <TableTabType2
                  v-if="index + 1 === 5"
--- a/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue
+++ b/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue
@ -13,6 +13,7 @@ import type {
 import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";

 /** importComponents*/
+import DialogAddPerson from "@/modules/13_salary/components/SalaryLists//DialogAddPerson.vue";
 import DialogFormEdit from "@/modules/13_salary/components/SalaryLists/DialogFormEdit.vue";
 import DialogMoveGroup from "@/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue";
 import DialogMoveLevel from "@/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue";
@ -36,7 +37,7 @@ const formFilter = defineModel<DataFilter>("formFilter", { required: true });
 const maxPage = defineModel<Number>("maxPage", { required: true });
 const props = defineProps({
  rows: { type: Array },
-  updatePagination: {
+  fetchDataTable: {
    type: Function,
  },
 });
@ -70,11 +71,11 @@ const columns = ref<QTableProps["columns"]>([
    style: "font-size: 14px",
  },
  {
-    name: "posPath",
+    name: "position",
    align: "left",
    label: "ตำแหน่งในสายงาน",
    sortable: true,
-    field: "posPath",
+    field: "position",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
@ -119,7 +120,7 @@ const visibleColumns = ref<string[]>([
  "no",
  "posNo",
  "fullName",
-  "posPath",
+  "position",
  "posLevel",
  "posExecutive",
  "amount",
@ -127,10 +128,15 @@ const visibleColumns = ref<string[]>([
 ]);

 /** modal*/
+const modalDialogAddPerson = ref<boolean>(false);
 const modalDialogForm = ref<boolean>(false);
 const modalDialogMoveGroup = ref<boolean>(false);
 const modalDialogMoveLeve = ref<boolean>(false);

+function onClickAddPerson() {
+  modalDialogAddPerson.value = !modalDialogAddPerson.value;
+}
+
 const profileId = ref<string>("");
 const amount = ref<number>(0);
 function onClickEdit(id: string, amountSalary: number) {
@ -156,7 +162,7 @@ function onClickDelete(id: string) {
      .delete(config.API.salaryListPeriodProfileById(id))
      .then(() => {
        success($q, "ลบข้อมูลสำเร็จ");
-        props.updatePagination?.();
+        props.fetchDataTable?.();
      })
      .catch((err) => {
        messageError($q, err);
@ -168,7 +174,7 @@ function onClickDelete(id: string) {
 }

 function updatePagePagination() {
-  props.updatePagination?.();
+  props.fetchDataTable?.();
 }

 function updatePageSizePagination(newPagination: NewPagination) {
@ -178,7 +184,7 @@ function updatePageSizePagination(newPagination: NewPagination) {

 function searchData() {
  formFilter.value.page = 1;
-  props.updatePagination?.();
+  props.fetchDataTable?.();
 }
 watch(
  () => formFilter.value.pageSize,
@ -189,7 +195,7 @@ watch(
 </script>
 <template>
  <q-toolbar class="text-primary" style="padding: 0px">
-    <q-btn flat round dense icon="add">
+    <q-btn flat round dense icon="add" @click="onClickAddPerson">
      <q-tooltip>เพิ่ม </q-tooltip>
    </q-btn>
    <q-space />
@ -249,7 +255,9 @@ watch(
      <q-tr :props="props" class="cursor-pointer">
        <q-td v-for="col in props.cols" :key="col.name" :props="props">
          <div v-if="col.name === 'no'">
-            {{ props.rowIndex + 1 }}
+            {{
+              (formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
+            }}
          </div>
          <div v-else-if="col.name === 'posNo'">
            {{ `${props.row.orgShortName}${props.row.posMasterNo}` }}
@ -328,22 +336,27 @@ watch(
    ></q-pagination>
  </d-table>

+  <DialogAddPerson
+    v-model:modal="modalDialogAddPerson"
+    :fetchData="props.fetchDataTable"
+  />
+
  <DialogFormEdit
    v-model:modal="modalDialogForm"
    v-model:profileId="profileId"
    v-model:amount="amount"
-    :fetchData="props.updatePagination"
+    :fetchData="props.fetchDataTable"
  />
  <DialogMoveGroup
    v-model:modal="modalDialogMoveGroup"
    v-model:profileId="profileId"
    :group="store.tabGroup === 'group1' ? 'กลุ่ม1' : 'กลุ่ม2'"
-    :fetchData="props.updatePagination"
+    :fetchData="props.fetchDataTable"
  />
  <DialogMoveLevel
    v-model:modal="modalDialogMoveLeve"
    v-model:profileId="profileId"
-    :fetchData="props.updatePagination"
+    :fetchData="props.fetchDataTable"
    :type="store.tabType"
  />
 </template>
--- a/src/modules/13_salary/components/SalaryLists/TableTypePending.vue
+++ b/src/modules/13_salary/components/SalaryLists/TableTypePending.vue
@ -8,6 +8,7 @@ import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
 import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";

 /** importComponents*/
+import DialogAddPerson from "@/modules/13_salary/components/SalaryLists//DialogAddPerson.vue";
 import DialogFormEdit from "@/modules/13_salary/components/SalaryLists/DialogFormEdit.vue";
 import DialogMoveGroup from "@/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue";
 import DialogMoveLevel from "@/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue";
@ -127,7 +128,7 @@ const formFilter = defineModel<DataFilter>("formFilter", { required: true });
 const maxPage = defineModel<Number>("maxPage", { required: true });
 const props = defineProps({
  rows: { type: Array },
-  updatePagination: {
+  fetchDataTable: {
    type: Function,
  },
  maxPage: {
@ -136,6 +137,7 @@ const props = defineProps({
 });

 /** modal*/
+const modalDialogAddPerson = ref<boolean>(false);
 const modalDialogForm = ref<boolean>(false);
 const modalDialogMoveGroup = ref<boolean>(false);
 const modalDialogMoveLeve = ref<boolean>(false);
@ -148,6 +150,9 @@ function onClickDelete() {
    success($q, "ลบข้อมูลสำเร็จ");
  });
 }
+function onClickAddPerson() {
+  modalDialogAddPerson.value = !modalDialogAddPerson.value;
+}

 function onClickEdit(id: string, amountSalary: number) {
  profileId.value = id;
@ -166,7 +171,7 @@ function onClickMoveLevel(id: string) {
 }

 function updatePagePagination() {
-  props.updatePagination?.();
+  props.fetchDataTable?.();
 }

 function updatePageSizePagination(newPagination: NewPagination) {
@ -176,7 +181,7 @@ function updatePageSizePagination(newPagination: NewPagination) {

 function searchData() {
  formFilter.value.page = 1;
-  props.updatePagination?.();
+  props.fetchDataTable?.();
 }
 watch(
  () => formFilter.value.pageSize,
@ -187,7 +192,7 @@ watch(
 </script>
 <template>
  <q-toolbar class="text-primary" style="padding: 0px">
-    <q-btn flat round dense icon="add">
+    <q-btn flat round dense icon="add" @click="onClickAddPerson">
      <q-tooltip>เพิ่ม </q-tooltip>
    </q-btn>
    <q-space />
@ -246,7 +251,9 @@ watch(
      <q-tr :props="props" class="cursor-pointer">
        <q-td v-for="col in props.cols" :key="col.name" :props="props">
          <div v-if="col.name === 'no'">
-            {{ props.rowIndex + 1 }}
+            {{
+              (formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
+            }}
          </div>
          <div v-else-if="col.name === 'fullName'">
            {{
@ -378,22 +385,27 @@ watch(
    </template>
  </d-table>

+  <DialogAddPerson
+    v-model:modal="modalDialogAddPerson"
+    :fetchData="props.fetchDataTable"
+  />
+
  <DialogFormEdit
    v-model:modal="modalDialogForm"
    v-model:profileId="profileId"
    v-model:amount="amount"
-    :fetchData="props.updatePagination"
+    :fetchData="props.fetchDataTable"
  />
  <DialogMoveGroup
    v-model:modal="modalDialogMoveGroup"
    v-model:profileId="profileId"
    :group="store.tabGroup === 'group1' ? 'กลุ่ม1' : 'กลุ่ม2'"
-    :fetchData="props.updatePagination"
+    :fetchData="props.fetchDataTable"
  />
  <DialogMoveLevel
    v-model:modal="modalDialogMoveLeve"
    v-model:profileId="profileId"
-    :fetchData="props.updatePagination"
+    :fetchData="props.fetchDataTable"
  />
 </template>