อัตรากำลังลูกจ้างชั่วคราว

src/modules/20_positionTemp/components/DialogAddPosition.vue

@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+/**
+ * importType
+ */
+import type {
+  ResGroup,
+  ResLevel,
+} from "@/modules/01_masterdata/interface/response/positionEmployee/Main";
+import type { DataOption } from "@/modules/20_positionTemp/interface/index/Main";
+import type { OptionType } from "@/modules/20_positionTemp/interface/response/organizational";
+
+/**
+ * importComponents
+ */
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/**
+ * use
+ */
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
+
+/**
+ * props
+ */
+const modal = defineModel<boolean>("modalAdd", { required: true });
+const isEditCheck = defineModel<boolean>("isEdit", { required: true });
+const props = defineProps({
+  emitSearch: Function,
+  getData: Function,
+  data: Object,
+  levelOp: Object,
+});
+
+//ข้อมูลตำแหน่ง
+const formDataPos = reactive({
+  posName: "", //ชือตำแหน่ง
+  posTypeName: "", //กลุ่มงาน
+  posLevelName: "", //ระดับชั้นงาน
+});
+
+const posTypeMain = ref<ResGroup[]>([]); //ข้อมูลกลุ่มงาน
+const posTypeOp = ref<DataOption[]>([]); //รายการกลุ่มงาน
+const posLevelOp = ref<DataOption[]>([]); //รายการระดับชั้นงาน
+
+/**
+ * ฟังก์ชันยืนยันการบันทึกข้อมุล
+ */
+async function onSubmit() {
+  dialogConfirm($q, async () => {
+    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);
+      await props.emitSearch?.(formDataPos.posName, "positionName");
+      await success($q, "บันทีกข้อมูลสำเร็จ");
+      close();
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
+    }
+  });
+}
+
+/**
+ * ฟังก์ชันปิด popup
+ */
+function close() {
+  modal.value = false;
+  isEditCheck.value = false;
+  formDataPos.posName = "";
+  formDataPos.posTypeName = "";
+  formDataPos.posLevelName = "";
+}
+
+/**
+ * ฟังก์ชันดึงข้อมุลกลุ่มงาน
+ */
+async function fetchType() {
+  showLoader();
+  await http
+    .get(config.API.orgEmployeeType)
+    .then((res) => {
+      posTypeMain.value = res.data.result;
+      posTypeOp.value = res.data.result.map((e: OptionType) => ({
+        id: e.id,
+        name: e.posTypeName,
+      }));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังก์ชันหาข้อมูลระดับชั้นงานตามกลุ่มงาน
+ * @param id  กลุ่มงาน
+ */
+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 = "";
+}
+
+/**
+ * ทำงานเมื่อ modal เป็น true
+ */
+watch(
+  () => modal.value,
+  async () => {
+    if (modal.value === true) {
+      await fetchType();
+
+      if (props.data) {
+        const dataList = props.data;
+        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">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="`${
+            isEditCheck ? `แก้ไขข้อมูลตำแหน่ง` : `เพิ่มข้อมูลตำแหน่ง`
+          }`"
+          :close="close"
+        />
+        <q-separator />
+
+        <q-card-section class="q-pa-none">
+          <div class="row q-col-gutter-sm col-12 q-pa-md">
+            <div class="col-12">
+              <q-input
+                ref="posNameRef"
+                v-model="formDataPos.posName"
+                dense
+                outlined
+                for="#positionName"
+                label="ชื่อตำแหน่ง"
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อตำแหน่ง'}`]"
+                class="inputgreen"
+              />
+            </div>
+
+            <div class="col-6">
+              <q-select
+                ref="posTypeNameRef"
+                label="กลุ่มงาน"
+                v-model="formDataPos.posTypeName"
+                :options="posTypeOp"
+                emit-value
+                dense
+                map-options
+                outlined
+                option-label="name"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
+                @update:model-value="updatePosTypeName"
+                class="inputgreen"
+              />
+            </div>
+
+            <div class="col-6">
+              <q-select
+                ref="posLevelNameRef"
+                label="ระดับชั้นงาน"
+                v-model="formDataPos.posLevelName"
+                :disable="formDataPos.posTypeName === ''"
+                :options="posLevelOp"
+                emit-value
+                dense
+                map-options
+                outlined
+                option-label="name"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
+                class="inputgreen"
+              />
+            </div>
+          </div>
+
+          <q-separator />
+          <q-card-actions align="right" class="bg-white text-teal q-pa-sm">
+            <q-btn
+              type="submit"
+              :label="`${isEditCheck ? 'แก้ไขตำแหน่ง' : 'เพิ่มตำแหน่ง'}`"
+              color="public"
+            />
+          </q-card-actions>
+        </q-card-section>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>