เลื่อนขั้นของลูกจ้าง

2025-04-24 14:38:39 +07:00 · 2025-04-24 14:38:39 +07:00 · 2cb11a7445
commit 2cb11a7445
parent 21156b8782
6 changed files with 457 additions and 40 deletions
--- a/src/modules/13_salary/components/04_salaryLists/DialogMoveLevelMulti.vue
+++ b/src/modules/13_salary/components/04_salaryLists/DialogMoveLevelMulti.vue
@ -309,11 +309,6 @@ watch(
                    <div v-if="col.name === 'no'">
                      {{ props.rowIndex + 1 }}
                    </div>
-                    <div v-else-if="col.name === 'fullName'">
-                      {{
-                        `${props.row.prefix}${props.row.firstName}  ${props.row.lastName}`
-                      }}
-                    </div>
                    <div
                      v-else-if="col.name == 'organization'"
                      class="text-html"
--- a/src/modules/13_salary/components/04_salaryLists/TableTypePending.vue
+++ b/src/modules/13_salary/components/04_salaryLists/TableTypePending.vue
@ -14,7 +14,6 @@ import DialogFormEdit from "@/modules/13_salary/components/04_salaryLists/Dialog
 import DialogMoveGroup from "@/modules/13_salary/components/04_salaryLists/DialogMoveGroup.vue"; // ย้ายกลุ่ม
 import DialogMoveLevel from "@/modules/13_salary/components/04_salaryLists/DialogMoveLevel.vue"; // เลื่อนขั้น
 import DialogMoveLevelMulti from "@/modules/13_salary/components/04_salaryLists/DialogMoveLevelMulti.vue";
-
 import DialogProperties from "@/modules/13_salary/components/04_salaryLists/DialogProperties.vue"; //แก้ไขคุณสมบัติ
 import DialogInfo from "@/modules/13_salary/components/DialogInfoMain.vue";

@ -76,6 +75,9 @@ const columns = ref<QTableColumn[]>([
    label: "ชื่อ-นามสกุล",
    sortable: false,
    field: "fullName",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
@ -331,11 +333,7 @@ function onProperties(data: any) {
  isLeave.value = data.isLeave;
 }

-/**
- * function openPopup ย้ายกขั้น
- * @param id profileId
- *
- */
+/** function openPopup ย้ายกขั้น*/
 function onClickMoveLevelMulti() {
  modalDialogMoveLeveMulti.value = !modalDialogMoveLeve.value;
 }
@ -381,11 +379,7 @@ function onClickViewInfo(type: string, id: string) {
    </q-btn>

    <q-btn
-      v-if="
-        !store.isClosedRound &&
-        checkPermission($route)?.attrIsCreate &&
-        !isClose
-      "
+      v-if="!store.isClosedRound && !isClose"
      flat
      round
      dense
@ -514,11 +508,6 @@ function onClickViewInfo(type: string, id: string) {
              (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-if="col.name == 'organization'" class="text-html">
            {{ findOrgNameHtml(props.row) }}
          </div>
--- a/src/modules/13_salary/components/05_salaryListsEmployee/DialogMoveLevelMulti.vue
+++ b/src/modules/13_salary/components/05_salaryListsEmployee/DialogMoveLevelMulti.vue
@ -0,0 +1,383 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import type { QTableColumn } from "quasar";
+import type { PropType } from "vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** use*/
+const $q = useQuasar();
+const store = useSalaryEmployeeListSDataStore();
+const {
+  dialogConfirm,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  findOrgNameHtml,
+  onSearchDataTable,
+} = useCounterMixin();
+
+/**porps*/
+const modal = defineModel<boolean>("modal", { required: true });
+const columns = defineModel<QTableColumn[]>("columns", {
+  required: true,
+});
+const visibleColumns = defineModel<string[]>("visibleColumns", {
+  required: true,
+});
+
+const props = defineProps({
+  fetchData: {
+    type: Function,
+  },
+  total: {
+    type: Number,
+  },
+  columns: {
+    type: Array as PropType<QTableColumn[]>,
+  },
+  visibleColumns: {
+    type: Array as PropType<string[]>,
+  },
+  isRetire: {
+    type: Boolean,
+  },
+});
+
+const rows = ref<any[]>([]);
+const rowsMain = ref<any[]>([]);
+const selectedData = ref<any[]>([]); //ตำแหน่งที่ต้องการย้าย
+
+const type = ref<string>(""); //เลื่อนขั้น
+const note = ref<string>(""); //หมายเหตุ
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const isReserve = ref<boolean>(false); // สำรองหรือไม่
+
+const typeRangeOps = computed(() => {
+  return store.roundMainCode == "OCT"
+    ? [
+        { id: "NONE", name: "ไม่ได้เลื่อน" },
+        { id: "HAFT", name: "0.5 ขั้น" },
+        { id: "FULL", name: "1 ขั้น" },
+        { id: "FULLHAFT", name: "1.5 ขั้น" },
+      ]
+    : store.roundMainCode == "APR"
+    ? [
+        { id: "NONE", name: "ไม่ได้เลื่อน" },
+        { id: "HAFT", name: "0.5 ขั้น" },
+        { id: "FULL", name: "1 ขั้น" },
+      ]
+    : [
+        { id: "HAFT", name: "0.5 ขั้น" },
+        { id: "FULL", name: "1 ขั้น" },
+      ];
+});
+
+const keyword = ref<string>("");
+
+/**
+ * function เรียกข้อมูลรายชื่อ
+ * @param id กลุ่ม
+ */
+async function fetchDataPeriod() {
+  showLoader();
+  let formData = {
+    page: "1",
+    pageSize: props.total?.toString(),
+    keyword: keyword.value,
+    type: store.tabType,
+    isRetire: store.roundMainCode !== "OCT" ? null : props.isRetire ? "1" : "0",
+  };
+
+  await http
+    .put(config.API.salaryListPeriodORGEmp(store.groupId), formData)
+    .then((res) => {
+      rowsMain.value = res.data.result.data;
+      rows.value = res.data.result.data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * function ปืด Popup
+ */
+function close() {
+  modal.value = false;
+}
+
+/** function ยืนยันการบันทึกข้อมูล*/
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    const ArrayProfileId = selectedData.value.map((e) => e.id);
+    const body = {
+      type: type.value,
+      isReserve: isReserve.value,
+      remark: type.value === "NONE" ? note.value : undefined,
+      profileId: ArrayProfileId,
+    };
+    await http
+      .post(config.API.salaryPeriodEmp() + `/change/type-multi`, body)
+      .then(async () => {
+        await props.fetchData?.();
+        await success($q, "บันทึกข้อมูลสำเร็จ");
+        close();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * function เปลี่ยนระดับ
+ */
+function chengType() {}
+
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    props.columns ? props.columns : []
+  );
+}
+
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      fetchDataPeriod();
+    } else {
+      rows.value = [];
+      rowsMain.value = [];
+      keyword.value = "";
+      type.value = "";
+      selectedData.value = [];
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 85%">
+      <Header :tittle="`เลื่อนขั้น`" :close="close" />
+      <q-separator />
+
+      <q-card-section class="scroll" style="max-height: 80vh">
+        <div class="q-col-gutter-sm">
+          <div class="row q-col-gutter-sm jus">
+            <div class="col-3">
+              <q-select
+                class="inputgreen"
+                v-model="type"
+                label="เลื่อนขั้น"
+                dense
+                outlined
+                emit-value
+                map-options
+                option-label="name"
+                option-value="id"
+                :options="typeRangeOps"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก ขั้น'}`]"
+                lazy-rules
+                hide-bottom-space
+                @update:model-value="chengType()"
+                style="min-width: 140px"
+              />
+            </div>
+
+            <div class="row col-9 items-center">
+              <q-checkbox
+                v-if="type === 'FULL'"
+                keep-color
+                label="สำรอง"
+                dense
+                v-model="isReserve"
+              />
+
+              <q-input
+                v-if="type === 'NONE'"
+                outlined
+                dense
+                v-model="note"
+                label="หมายเหตุ"
+                type="textarea"
+                :class="inputEdit(isReadonly)"
+              />
+            </div>
+          </div>
+          <div class="col-12">
+            <q-separator class="col-12" />
+          </div>
+
+          <div class="row justify-end q-col-gutter-sm">
+            <q-input
+              standout
+              dense
+              v-model="keyword"
+              ref="filterRef"
+              outlined
+              placeholder="ค้นหา"
+              @keydown.enter.pervent="serchDataTable"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              style="min-width: 140px"
+            />
+          </div>
+
+          <div class="row justify-end">ทั้งหมด {{ rows.length }} รายการ</div>
+
+          <div class="col-12 q-mt-sm">
+            <q-table
+              class="custom-header-table"
+              ref="table"
+              :columns="columns"
+              :rows="rows"
+              row-key="id"
+              flat
+              bordered
+              dense
+              hide-pagination
+              :visible-columns="visibleColumns"
+              selection="multiple"
+              v-model:selected="selectedData"
+              :pagination="{ page: 1, rowsPerPage: total }"
+            >
+              <template v-slot:header-selection="scope">
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="scope.selected"
+                />
+              </template>
+
+              <template v-slot:body="props">
+                <q-tr :props="props">
+                  <q-td auto-width>
+                    <q-checkbox
+                      v-model="props.selected"
+                      keep-color
+                      color="primary"
+                      dense
+                    />
+                  </q-td>
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div v-if="col.name === 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
+                    <div
+                      v-else-if="col.name == 'organization'"
+                      class="text-html"
+                    >
+                      {{ findOrgNameHtml(props.row) }}
+                    </div>
+                    <div v-else-if="col.name == 'amount'">
+                      {{ Number(props.row.amount).toLocaleString() }}
+                    </div>
+                    <div v-else-if="col.name == 'isSuspension'">
+                      <q-icon
+                        v-if="props.row.isSuspension !== null"
+                        :name="props.row.isSuspension ? 'done' : 'close'"
+                        :color="props.row.isSuspension ? 'primary' : 'red'"
+                        size="24px"
+                      />
+                      <div v-else-if="props.row.isSuspension == null">
+                        {{ props.row.isSuspension == null ? "-" : "" }}
+                      </div>
+                    </div>
+
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </q-table>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn
+          :disable="selectedData.length === 0 || type === ''"
+          @click="onSubmit"
+          color="secondary"
+          label="บันทึก"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped>
+.custom-header-table {
+  height: auto;
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
--- a/src/modules/13_salary/components/05_salaryListsEmployee/TabMain.vue
+++ b/src/modules/13_salary/components/05_salaryListsEmployee/TabMain.vue
@ -40,7 +40,7 @@ const props = defineProps({

 const splitterModel = ref<number>(13);
 const modalDialogInfoCriteria = ref<boolean>(false); //popup หลักเกณฑ์การพิจารณาเลื่อนขั้นเงินข้าราชการ
-const isRetire = ref<boolean | string>(false); //แสดงเฉพาะผู้เกษียณอายุราชการ
+const isRetire = ref<boolean>(false); //แสดงเฉพาะผู้เกษียณอายุราชการ
 const rows = ref<DataPeriod[]>([]); //ข้อมูลรายชื่อ
 const total = ref<number>(0); //จำนวนรายการ
 const maxPage = ref<number>(1); //จำนวนหน้า
@ -515,6 +515,8 @@ onMounted(() => {
                  :rows="rows"
                  :total="total"
                  :snap-shot="props?.snapShot"
+                  :is-retire="isRetire"
+                  :is-close="props.periodLatest?.group1IsClose ?? false"
                />
                <TableTabType2
                  v-else
@ -525,6 +527,7 @@ onMounted(() => {
                  :total="total"
                  :type="item.type"
                  :snap-shot="props?.snapShot"
+                  :is-close="props.periodLatest?.group1IsClose ?? false"
                />
              </q-tab-panel>
            </q-tab-panels>
--- a/src/modules/13_salary/components/05_salaryListsEmployee/TableTypeOther.vue
+++ b/src/modules/13_salary/components/05_salaryListsEmployee/TableTypeOther.vue
@ -28,6 +28,7 @@ const { dialogRemove, messageError, showLoader, hideLoader, success } =
 /** props*/
 const formFilter = defineModel<DataFilter>("formFilter", { required: true });
 const maxPage = defineModel<Number>("maxPage", { required: true });
+const isClose = defineModel<boolean>("isClose", { required: true });
 const snapShot = defineModel<string>("snapShot");
 const props = defineProps({
  rows: { type: Array },
@ -311,7 +312,11 @@ watch(
    <!-- &&
    snapShot === 'SNAP1' -->
    <q-btn
-      v-if="!store.isClosedRound && checkPermission($route)?.attrIsCreate"
+      v-if="
+        !store.isClosedRound &&
+        !isClose &&
+        checkPermission($route)?.attrIsCreate
+      "
      flat
      round
      dense
@ -390,6 +395,7 @@ watch(
          <q-btn
            v-if="
              !store.isClosedRound &&
+              !isClose &&
              (checkPermission($route)?.attrIsUpdate ||
                checkPermission($route)?.attrIsDelete)
            "
--- a/src/modules/13_salary/components/05_salaryListsEmployee/TableTypePending.vue
+++ b/src/modules/13_salary/components/05_salaryListsEmployee/TableTypePending.vue
@ -9,7 +9,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";

 /** importType*/
-import type { QTableProps } from "quasar";
+import type { QTableColumn } from "quasar";
 import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
 import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";

@ -20,6 +20,7 @@ import DialogMoveGroup from "@/modules/13_salary/components/05_salaryListsEmploy
 import DialogMoveLevel from "@/modules/13_salary/components/05_salaryListsEmployee/DialogMoveLevel.vue";
 import DialogProperties from "@/modules/13_salary/components/05_salaryListsEmployee/DialogProperties.vue";
 import DialogInfo from "@/modules/13_salary/components/DialogInfoMain.vue";
+import DialogMoveLevelMulti from "@/modules/13_salary/components/05_salaryListsEmployee/DialogMoveLevelMulti.vue";

 /** use*/
 const $q = useQuasar();
@ -30,12 +31,14 @@ const {
  showLoader,
  hideLoader,
  success,
+  findOrgName,
  findOrgNameHtml,
 } = useCounterMixin();

 /** Props*/
 const formFilter = defineModel<DataFilter>("formFilter", { required: true });
 const maxPage = defineModel<Number>("maxPage", { required: true });
+const isClose = defineModel<boolean>("isClose", { required: true });
 const snapShot = defineModel<string>("snapShot");

 const props = defineProps({
@ -49,10 +52,13 @@ const props = defineProps({
  total: {
    type: Number,
  },
+  isRetire: {
+    type: Boolean,
+  },
 });

 /** ข้อมูล Table*/
-const columns = ref<QTableProps["columns"]>([
+const columns = ref<QTableColumn[]>([
  {
    name: "no",
    align: "left",
@ -68,6 +74,9 @@ const columns = ref<QTableProps["columns"]>([
    label: "ชื่อ-นามสกุล",
    sortable: false,
    field: "fullName",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
@ -149,6 +158,9 @@ const columns = ref<QTableProps["columns"]>([
    label: "สังกัด",
    sortable: false,
    field: "organization",
+    format(val, row) {
+      return findOrgName(row);
+    },
    headerStyle: "font-size: 14px;min-width:280px",
    style: "font-size: 14px",
  },
@ -223,6 +235,7 @@ const modalDialogMoveGroup = ref<boolean>(false); //popup ย้ายกลุ
 const modalDialogMoveLeve = ref<boolean>(false); //popup เลื่อนขั้น
 const modalDialogProperties = ref<boolean>(false); //popup คุณสมบัติ
 const modalDialogInfo = ref<boolean>(false); //popup ข้อมูลส่วนตัว
+const modalDialogMoveLeveMulti = ref<boolean>(false); //popup เลื่อนขั้น

 /** ตัวแปร*/
 const profileId = ref<string>(""); //id คน
@ -256,9 +269,7 @@ function onClickDelete(id: string) {
  });
 }

-/**
- * function openPopup เพิ่มคนเลื่อนค่าจ้าง
- */
+/** function openPopup เพิ่มคนเลื่อนค่าจ้าง*/
 function onClickAddPerson() {
  modalDialogAddPerson.value = !modalDialogAddPerson.value;
 }
@ -297,9 +308,7 @@ function onClickMoveLevel(id: string, typeVal: string, isReserveVal: boolean) {
  isReserve.value = isReserveVal;
 }

-/**
- * function updatePageTable
- */
+/** function updatePageTable*/
 function updatePagePagination() {
  props.fetchDataTable?.();
 }
@ -312,9 +321,7 @@ function updatePageSizePagination(newPagination: NewPagination) {
  formFilter.value.pageSize = newPagination.rowsPerPage;
 }

-/**
- * function ค้นหาข้อมูล Table
- */
+/** function ค้นหาข้อมูล Table*/
 function searchData() {
  formFilter.value.page = 1;
  props.fetchDataTable?.();
@ -345,6 +352,11 @@ function onClickViewInfo(type: string, id: string) {
  modalDialogInfo.value = true;
 }

+/** function openPopup ย้ายกขั้น*/
+function onClickMoveLevelMulti() {
+  modalDialogMoveLeveMulti.value = !modalDialogMoveLeve.value;
+}
+
 /**
 * callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize
 */
@ -361,7 +373,11 @@ watch(
    <!-- &&
    snapShot === 'SNAP1' -->
    <q-btn
-      v-if="!store.isClosedRound && checkPermission($route)?.attrIsCreate"
+      v-if="
+        !store.isClosedRound &&
+        checkPermission($route)?.attrIsCreate &&
+        !isClose
+      "
      flat
      round
      dense
@ -370,6 +386,18 @@ watch(
    >
      <q-tooltip>เพิ่ม </q-tooltip>
    </q-btn>
+
+    <q-btn
+      v-if="!store.isClosedRound && !isClose"
+      flat
+      round
+      dense
+      color="green-6"
+      icon="mdi-swap-vertical-bold"
+      @click="onClickMoveLevelMulti"
+    >
+      <q-tooltip>เลื่อนขั้น</q-tooltip>
+    </q-btn>
    <q-space />
    <q-input
      borderless
@ -431,6 +459,7 @@ watch(
          <q-btn
            v-if="
              !store.isClosedRound &&
+              !isClose &&
              (checkPermission($route)?.attrIsUpdate ||
                checkPermission($route)?.attrIsDelete)
            "
@ -490,11 +519,6 @@ watch(
              (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-if="col.name == 'organization'" class="text-html">
            {{ findOrgNameHtml(props.row) }}
          </div>
@ -600,6 +624,23 @@ watch(
    :type="infoType"
    :employee-class="'-employee'"
  />
+
+  <!-- เลื่อนขั้นเลือกหลายคน -->
+  <DialogMoveLevelMulti
+    v-model:modal="modalDialogMoveLeveMulti"
+    :fetch-data="props.fetchDataTable"
+    :columns="
+      columns.filter(
+        (e) =>
+          e.name !== 'leave' &&
+          e.name !== 'discipline' &&
+          e.name !== 'posSalary'
+      )
+    "
+    :visible-columns="visibleColumns"
+    :total="props?.total"
+    :is-retire="isRetire"
+  />
 </template>

 <style scoped></style>