อัตรากำลังลูกจ้างประจำฯ

2024-03-14 17:39:20 +07:00 · 2024-03-14 17:39:20 +07:00 · 4091d21270
commit 4091d21270
parent 748a878deb
3 changed files with 162 additions and 646 deletions
--- a/src/modules/16_positionEmployee/components/DialogAddPosition.vue
+++ b/src/modules/16_positionEmployee/components/DialogAddPosition.vue
@ -1,27 +1,21 @@
 <script setup lang="ts">
 import { ref, reactive, watch, defineProps } from "vue";
-import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import DialogHeader from "@/components/DialogHeader.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import type {
-  FormDataPosition,
-  FormPositionRef,
-  DataOption,
-  FormPositionSelect,
-  RowDetailPositions,
-  FormPositionSelectRef,
-  ListMenu,
-} from "@/modules/16_positionEmployee/interface/index/Main";

 import type {
-  OptionType,
-  OptionLevel,
-  OptionExecutive,
-  DataPosition,
-} from "@/modules/16_positionEmployee/interface/response/organizational";
+  ResGroup,
+  ResLevel,
+} from "@/modules/01_metadataNew/interface/response/positionEmployee/Main";
+import type { ObjectPosRef } from "@/modules/01_metadataNew/interface/index/positionEmployee";
+import type { DataOption } from "@/modules/16_positionEmployee/interface/index/Main";
+
+import type { OptionType } from "@/modules/16_positionEmployee/interface/response/organizational";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";

 const isSpecial = ref<boolean>(false);
 const props = defineProps({
@ -32,63 +26,36 @@ const props = defineProps({
 });
 const modal = defineModel<boolean>("modalAdd", { required: true });
 const isEditCheck = defineModel<boolean>("isEdit", { required: true });
-const dataLevel = ref<any>();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const {
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-  dialogRemove,
-} = mixin;
+const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;

-const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 const isDisValidate = ref<boolean>(false);
-const positionNameRef = ref<Object | null>(null);
-const positionFieldRef = ref<Object | null>(null);
-const positionTypeRef = ref<Object | null>(null);
-const positionLevelRef = ref<Object | null>(null);
-const positionExecutiveRef = ref<Object | null>(null);
-const positionExecutiveFieldRef = ref<Object | null>(null);
-const positionAreaRef = ref<Object | null>(null);
-
-const typeOpsMain = ref<DataOption[]>([]);
-const levelOpsMain = ref<DataOption[]>([]);
-const executiveOpsMain = ref<DataOption[]>([]);
-const executiveOps = ref<DataOption[]>([]);
-const typeOps = ref<DataOption[]>([]);
-const levelOps = ref<DataOption[]>([]);
-
-const formPositionSelect = reactive<FormPositionSelect>({
-  positionId: "",
-  positionName: "",
-  positionField: "",
-  positionType: "",
-  positionLevel: "",
-  positionExecutive: "",
-  positionExecutiveField: "",
-  positionArea: "",
+const formDataPos = reactive({
+  posName: "",
+  posTypeName: "",
+  posLevelName: "",
 });

-const objectPositionSelectRef: FormPositionSelectRef = {
-  positionName: positionNameRef,
-  positionField: positionFieldRef,
-  positionType: positionTypeRef,
-  positionLevel: positionLevelRef,
-  positionExecutive: positionExecutiveRef,
-  positionExecutiveField: positionExecutiveFieldRef,
-  positionArea: positionAreaRef,
+const posNameRef = ref<object | null>(null);
+const posTypeNameRef = ref<object | null>(null);
+const posLevelNameRef = ref<object | null>(null);
+const objectRef: ObjectPosRef = {
+  posName: posNameRef,
+  posTypeName: posTypeNameRef,
+  posLevelName: posLevelNameRef,
 };
+const posTypeMain = ref<ResGroup[]>([]);
+const posTypeOp = ref<DataOption[]>([]);
+const posLevelOp = ref<DataOption[]>([]);

 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
 function validateFormPositionEdit() {
  isDisValidate.value = false;
  const hasError = [];
-  for (const key in objectPositionSelectRef) {
-    if (Object.prototype.hasOwnProperty.call(objectPositionSelectRef, key)) {
-      const property = objectPositionSelectRef[key];
+  for (const key in objectRef) {
+    if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
+      const property = objectRef[key];
      if (property.value && typeof property.value.validate === "function") {
        const isValid = property.value.validate();
        hasError.push(isValid);
@ -96,124 +63,45 @@ function validateFormPositionEdit() {
    }
  }
  if (hasError.every((result) => result === true)) {
-    if (isEditCheck.value == true) {
-      saveSelectEdit();
-    } else {
-      onSubmitSelectEdit();
-    }
+    dialogConfirm($q, () => {
+      submit();
+    });
  }
 }
-
-function saveSelectEdit() {
-  console.log(formPositionSelect.positionExecutive);
-  dialogConfirm(
-    $q,
-    async () => {
-      showLoader();
-      const body = {
-        posDictName: formPositionSelect.positionName,
-        posDictField: formPositionSelect.positionField, //สายงาน
-        posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
-        posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
-        posExecutiveId: formPositionSelect.positionExecutive, //ตำแหน่งทางการบริหาร
-        posDictExecutiveField: formPositionSelect.positionExecutiveField, //ด้านทางการบริหาร
-        posDictArea: formPositionSelect.positionArea, //ด้าน/สาขา
-        isSpecial: isSpecial.value,
-      };
-      await http
-        .put(config.API.orgPosPositionById(formPositionSelect.positionId), body)
-        .then(() => {
-          success($q, "เพิ่มข้อมูลสำเร็จ");
-
-          props.getData?.();
-          close();
-        })
-        .catch((err) => {
-          messageError($q, err);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    },
-    "ยืนยันการแก้ไขตำแหน่ง",
-    "ต้องการยืนยันแก้ไขตำแหน่งนี้ใช่หรือไม่?"
-  );
-}
-/** ฟังชั่น บันทึก */
-function onSubmitSelectEdit() {
-  console.log(formPositionSelect.positionExecutive);
-  dialogConfirm(
-    $q,
-    async () => {
-      showLoader();
-      const body = {
-        posDictName: formPositionSelect.positionName,
-        posDictField: formPositionSelect.positionField, //สายงาน
-        posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
-        posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
-        posExecutiveId: formPositionSelect.positionExecutive, //ตำแหน่งทางการบริหาร
-        posDictExecutiveField: formPositionSelect.positionExecutiveField, //ด้านทางการบริหาร
-        posDictArea: formPositionSelect.positionArea, //ด้าน/สาขา
-        isSpecial: isSpecial.value,
-      };
-      await http
-        .post(config.API.orgPosPosition, body)
-        .then(() => {
-          success($q, "เพิ่มข้อมูลสำเร็จ");
-
-          props.emitSearch?.(formPositionSelect.positionName, "positionName");
-          close();
-        })
-        .catch((err) => {
-          messageError($q, err);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    },
-    "ยืนยันการเพิ่มตำแหน่ง",
-    "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
-  );
+async function submit() {
+  const body = {
+    posDictName: formDataPos.posName,
+    posTypeId: formDataPos.posTypeName,
+    posLevelId: formDataPos.posLevelName,
+  };
+  showLoader();
+  try {
+    const url = !isEditCheck.value
+      ? config.API.orgEmployeePos
+      : config.API.orgEmployeePosById(props?.data?.id);
+    await http[!isEditCheck.value ? "post" : "put"](url, body);
+    success($q, "บันทีกข้อมูลสำเร็จ");
+    props.emitSearch?.(formDataPos.posName, "positionName");
+    close();
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
 }

 async function clearFormPositionSelect() {
  isEditCheck.value = false;
-  isDisValidate.value = await true;
-  formPositionSelect.positionId = "";
-  formPositionSelect.positionName = "";
-  formPositionSelect.positionField = "";
-  formPositionSelect.positionType = "";
-  formPositionSelect.positionLevel = "";
-  formPositionSelect.positionExecutive = "";
-  formPositionSelect.positionExecutiveField = "";
-  formPositionSelect.positionArea = "";
+  isDisValidate.value = true;
+  formDataPos.posName = "";
+  formDataPos.posTypeName = "";
+  formDataPos.posLevelName = "";
  isSpecial.value = false;
-  setTimeout(async () => {
-    isDisValidate.value = await false;
+  setTimeout(() => {
+    isDisValidate.value = false;
  }, 1000);
 }

-/**
- * ส่งค่า css ออกไปตามเงื่อนไข
- * @param val true/false
- */
-function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer inputgreen ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
-
-function updateSelectType(val: string) {
-  const listLevel = dataLevel.value.find((e: any) => e.id === val);
-  levelOpsMain.value = listLevel.posLevels.map((e: OptionLevel) => ({
-    id: e.id,
-    name: e.posLevelName,
-  }));
-  levelOps.value = levelOpsMain.value;
-  formPositionSelect.positionLevel = "";
-}
-
 function close() {
  modal.value = false;
  clearFormPositionSelect();
@ -222,14 +110,13 @@ function close() {
 async function fetchType() {
  showLoader();
  await http
-    .get(config.API.orgPosType)
+    .get(config.API.orgEmployeeType)
    .then((res) => {
-      dataLevel.value = res.data.result;
-      typeOpsMain.value = res.data.result.map((e: OptionType) => ({
+      posTypeMain.value = res.data.result;
+      posTypeOp.value = res.data.result.map((e: OptionType) => ({
        id: e.id,
        name: e.posTypeName,
      }));
-      typeOps.value = typeOpsMain.value;
    })
    .catch((err) => {
      messageError($q, err);
@ -239,24 +126,14 @@ async function fetchType() {
    });
 }

-/** function เรียกรายการตำแหน่งทางการบริหาร */
-async function fetchExecutive() {
-  showLoader();
-  await http
-    .get(config.API.orgPosExecutive)
-    .then((res) => {
-      executiveOpsMain.value = res.data.result.map((e: OptionExecutive) => ({
-        id: e.id,
-        name: e.posExecutiveName,
-      }));
-      executiveOps.value = executiveOpsMain.value;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+function updatePosTypeName(id: string) {
+  const posLevel = posTypeMain.value.find((e: ResGroup) => e.id === id);
+  posLevelOp.value =
+    posLevel?.posLevels.map((e: ResLevel) => ({
+      id: e.id,
+      name: e.posLevelName.toString(),
+    })) ?? [];
+  formDataPos.posLevelName = "";
 }

 watch(
@ -264,26 +141,20 @@ watch(
  async () => {
    if (modal.value === true) {
      await fetchType();
-      await fetchExecutive();
+
      if (props.data) {
        const dataList = props.data;
-        console.log(dataList);
-        updateSelectType(dataList.posTypeId);
-        formPositionSelect.positionId = dataList.id;
-        formPositionSelect.positionName = dataList.positionName;
-        formPositionSelect.positionField = dataList.positionField;
-        formPositionSelect.positionType = dataList.posTypeId;
-        formPositionSelect.positionLevel = dataList.posLevelId;
-        formPositionSelect.positionExecutive = dataList.posExecutiveId;
-        formPositionSelect.positionExecutiveField =
-          dataList.positionExecutiveField;
-        formPositionSelect.positionArea = dataList.positionArea;
-        isSpecial.value = dataList.isSpecial;
+        updatePosTypeName(dataList.posTypeId);
+
+        formDataPos.posName = dataList.posDictName;
+        formDataPos.posTypeName = dataList.posTypeId;
+        formDataPos.posLevelName = dataList.posLevelId;
      }
    }
  }
 );
 </script>
+
 <template>
  <q-dialog v-model="modal" persistent>
    <q-card style="min-width: 50vw">
@ -295,74 +166,27 @@ watch(

      <q-card-section class="q-pa-none">
        <form @submit.prevent="validateFormPositionEdit">
-          <div class="row q-col-gutter-sm col-12 q-pa-sm">
-            <div class="col-6">
+          <div class="row q-col-gutter-sm col-12 q-pa-md">
+            <div class="col-12">
              <q-input
-                ref="positionNameRef"
-                v-model="formPositionSelect.positionName"
-                :class="inputEdit(isReadonly)"
+                ref="posNameRef"
+                v-model="formDataPos.posName"
                dense
                outlined
                for="#positionName"
-                label="ตำแหน่งในสายงาน"
+                label="ชื่อตำแหน่ง"
                lazy-rules
                hide-bottom-space
-                :rules="
-                  !isDisValidate
-                    ? [(val) => !!val || `${'กรุณากรอกตำแหน่งในสายงาน'}`]
-                    : []
-                "
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                ref="positionFieldRef"
-                v-model="formPositionSelect.positionField"
-                :class="inputEdit(isReadonly)"
-                dense
-                outlined
-                for="#positionField"
-                label="สายงาน"
-                lazy-rules
-                hide-bottom-space
-                :rules="
-                  !isDisValidate
-                    ? [(val) => !!val || `${'กรุณากรอกสายงาน'}`]
-                    : []
-                "
+                :rules="[(val) => !!val || `${'กรุณากรอกชื่อตำแหน่ง'}`]"
              />
            </div>
+
            <div class="col-6">
              <q-select
-                ref="positionTypeRef"
-                :class="inputEdit(isReadonly)"
-                label="ประเภทตำแหน่ง"
-                v-model="formPositionSelect.positionType"
-                :options="typeOps"
-                emit-value
-                dense
-                @update:model-value="updateSelectType"
-                map-options
-                outlined
-                option-label="name"
-                option-value="id"
-                lazy-rules
-                hide-bottom-space
-                :rules="
-                  !isDisValidate
-                    ? [(val) => !!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`]
-                    : []
-                "
-              />
-            </div>
-            <div class="col-6">
-              <q-select
-                ref="positionLevelRef"
-                :class="inputEdit(isReadonly)"
-                label="ระดับตำแหน่ง"
-                v-model="formPositionSelect.positionLevel"
-                :disable="formPositionSelect.positionType === ''"
-                :options="levelOps"
+                ref="posTypeNameRef"
+                label="กลุ่มงาน"
+                v-model="formDataPos.posTypeName"
+                :options="posTypeOp"
                emit-value
                dense
                map-options
@ -371,20 +195,18 @@ watch(
                option-value="id"
                lazy-rules
                hide-bottom-space
-                :rules="
-                  !isDisValidate
-                    ? [(val) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]
-                    : []
-                "
+                :rules="[(val) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
+                @update:model-value="updatePosTypeName"
              />
            </div>
+
            <div class="col-6">
              <q-select
-                ref="positionExecutiveRef"
-                :class="inputEdit(isReadonly)"
-                label="ตำแหน่งทางการบริหาร"
-                v-model="formPositionSelect.positionExecutive"
-                :options="executiveOps"
+                ref="posLevelNameRef"
+                label="ระดับชั้นงาน"
+                v-model="formDataPos.posLevelName"
+                :disable="formDataPos.posTypeName === ''"
+                :options="posLevelOp"
                emit-value
                dense
                map-options
@ -393,39 +215,11 @@ watch(
                option-value="id"
                lazy-rules
                hide-bottom-space
-                clearable
+                :rules="[(val) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
              />
            </div>
-            <div class="col-6">
-              <q-input
-                ref="positionExecutiveFieldRef"
-                v-model="formPositionSelect.positionExecutiveField"
-                :class="inputEdit(isReadonly)"
-                dense
-                outlined
-                for="#positionExecutiveField"
-                label="ด้านทางการบริหาร"
-                lazy-rules
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                ref="positionAreaRef"
-                v-model="formPositionSelect.positionArea"
-                :class="inputEdit(isReadonly)"
-                dense
-                outlined
-                for="#positionArea"
-                label="ด้าน/สาขา"
-                lazy-rules
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-6 self-center">
-              <q-checkbox size="md" v-model="isSpecial" label="ฉ" />
-            </div>
          </div>
+
          <q-separator />
          <q-card-actions align="right" class="bg-white text-teal q-pa-sm">
            <q-btn