hrms-mgt/src/modules/04_registryPerson/views/edit/components/DialogForm.vue

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick, watch } from "vue";
import { useQuasar } from "quasar";

import { useCounterMixin } from "@/stores/mixin";
import { useEditPosDataStore } from "@/modules/04_registryPerson/stores/Edit";
import http from "@/plugins/http";
import config from "@/app.config";

import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
import type { DataPosition } from "@/modules/04_registryPerson/interface/response/Edit";
import type { FormDataSalary } from "@/modules/04_registryPerson/interface/request/Edit";
import type {
  DataCommandCode,
  DataPosType,
  DataPosLevel,
  DataPosPosition,
  DataPosExecutive,
} from "@/modules/04_registryPerson/interface/response/Position";

import DialogHeader from "@/components/DialogHeader.vue";
import FormPosition from "@/modules/04_registryPerson/views/edit/components/FormPosition.vue";

const $q = useQuasar();
const {
  dialogConfirm,
  showLoader,
  hideLoader,
  messageError,
  success,
  convertDateToAPI,
} = useCounterMixin();
const store = useEditPosDataStore();

const modal = defineModel<boolean>("modal", { required: true });
const empType = defineModel<string>("empType", { required: true });
const rowData = defineModel<DataPosition[]>("rowData", { required: true });
const rowIndex = defineModel<number>("rowIndex", { required: true });

const props = defineProps({
  fetchData: { type: Function, required: true },
});

const formData = reactive<FormDataSalary>({
  commandCode: "", //ประเภทคำสั่ง
  commandNo: "", //เลขที่คำสั่ง
  commandYear: null, //ปี
  commandDateAffect: null, //วันที่มีผล
  commandDateSign: null, //วันที่ลงนาม
  posNoAbb: "", //ตัวย่อเลขที่ตำแหน่ง
  posNo: "", //เลขที่ตำแหน่ง
  positionName: "", //ตำแหน่ง
  positionType: "", //ประเภทตำแหน่ง | กลุ่มงาน
  positionLevel: "", //ระดับตำแหน่ง | ระดับชั้นงาน
  positionCee: "", //ตำแหน่งซี
  positionLine: "", // สายงาน
  positionPathSide: "", //ด้าน/สาขา
  positionExecutive: "", //ตำแหน่งทางการบริหาร
  amount: null, //เงินเดือน
  amountSpecial: null, //เงินค่าตอบแทนพิเศษ
  positionSalaryAmount: null, //เงินประจำตำแหน่ง
  mouthSalaryAmount: null, //เงินค่าตอบแทนรายเดือน
  orgRoot: "", //หน่วยงาน
  orgChild1: "", //ส่วนราชการระดับ 1
  orgChild2: "", //ส่วนราชการระดับ 2
  orgChild3: "", //ส่วนราชการระดับ 3
  orgChild4: "", //ส่วนราชการระดับ 4
  remark: "", //หมายเหตุ
});
const formReadonly = reactive<FormDataSalary>({
  commandCode: "", //ประเภทคำสั่ง
  commandNo: "", //เลขที่คำสั่ง
  commandYear: null, //ปี
  commandDateAffect: null, //วันที่มีผล
  commandDateSign: null, //วันที่ลงนาม
  posNoAbb: "", //ตัวย่อเลขที่ตำแหน่ง
  posNo: "", //เลขที่ตำแหน่ง
  positionName: "", //ตำแหน่ง
  positionType: "", //ประเภทตำแหน่ง | กลุ่มงาน
  positionLevel: "", //ระดับตำแหน่ง | ระดับชั้นงาน
  positionCee: "", //ตำแหน่งซี
  positionLine: "", // สายงาน
  positionPathSide: "", //ด้าน/สาขา
  positionExecutive: "", //ตำแหน่งทางการบริหาร
  amount: null, //เงินเดือน
  amountSpecial: null, //เงินค่าตอบแทนพิเศษ
  positionSalaryAmount: null, //เงินประจำตำแหน่ง
  mouthSalaryAmount: null, //เงินค่าตอบแทนรายเดือน
  orgRoot: "", //หน่วยงาน
  orgChild1: "", //ส่วนราชการระดับ 1
  orgChild2: "", //ส่วนราชการระดับ 2
  orgChild3: "", //ส่วนราชการระดับ 3
  orgChild4: "", //ส่วนราชการระดับ 4
  remark: "", //หมายเหตุ
});

const dataLevel = ref<DataPosType[]>([]); //รายการ ตำแหน่งเงินเดือน
const commandCodeOptions = ref<DataOption[]>(store.commandCodeData); //รายการปรเภทคำสั่ง
const posTypeOptions = ref<DataOption[]>(store.posTypeData); //รายการประเภทตำแหน่ง | กลุ่มงาน
const posLevelOptions = ref<DataOption[]>(store.posLevelData); //รายการระดับตำแหน่ง | ระดับชั้นงาน
const posLineOptions = ref<DataOption[]>(store.posLineData); //รายการสายงาน
const posPathSideOptions = ref<DataOption[]>(store.posPathSideData); //รายการด้าน/สาขา
const posExecutiveOptions = ref<DataOption[]>(store.posExecutiveData); //รายการตำแหน่งทางการบริหาร

const salaryId = ref<string>("");

async function fetchDataPosition() {
  try {
    showLoader();
    const res = await http.get(
      config.API.salaryTemp + `/get/${salaryId.value}`
    );
    return res.data.result;
  } catch (err) {
    messageError($q, err);
  } finally {
    hideLoader();
  }
}

/** function fetch ข้อมูลประเภทคำสั่ง*/
async function fetchDataCommandCode() {
  if (store.commandCodeData.length > 0) return false;
  await http
    .get(config.API.orgCommandCode)
    .then((res) => {
      const data = res.data.result;

      store.commandCodeData = data.map((e: DataCommandCode) => ({
        id: e.code.toString(),
        name: e.name,
      }));

      commandCodeOptions.value = store.commandCodeData;
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/** function fetch ข้อมูลปรเภทตำแหน่งข้าราชการ */
async function fetchType() {
  await http
    .get(config.API.orgPosType)
    .then((res) => {
      dataLevel.value = res.data.result;
      store.posTypeData = res.data.result.map((e: DataPosType) => ({
        id: e.id,
        name: e.posTypeName,
      }));
      posTypeOptions.value = store.posTypeData;
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/** function fetch ข้อมูลปรเภทตำแหน่งลูกจ้าง*/
async function fetchOptionGroup() {
  await http
    .get(config.API.orgEmployeeType)
    .then((res) => {
      dataLevel.value = res.data.result;
      store.posTypeData = res.data.result.map((e: DataPosType) => ({
        id: e.id,
        name: e.posTypeName,
      }));
      posTypeOptions.value = store.posTypeData;
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/** function fetch ข้อมูลสายงาน*/
async function fetchDataOption() {
  if (store.posLineData.length > 0 && store.posPathSideData.length > 0)
    return false;

  await http
    .get(config.API.orgPosPosition + `?keyword=&type=ALL`)
    .then((res) => {
      const data = res.data.result;

      const seen = new Set();
      const seen2 = new Set();

      const listPositionField = data.filter((item: DataPosPosition) => {
        if (seen.has(item.positionField)) {
          return false;
        } else {
          seen.add(item.positionField);
          return true;
        }
      });
      store.posLineData = listPositionField.map((e: DataPosPosition) => ({
        id: e.positionField,
        name: e.positionField,
      }));

      const listPositionArea = data.filter((item: DataPosPosition) => {
        if (
          item.positionArea === null ||
          item.positionArea === "" ||
          item.positionArea === "-" ||
          seen2.has(item.positionArea)
        ) {
          return false;
        } else {
          seen2.add(item.positionArea);
          return true;
        }
      });
      store.posPathSideData = listPositionArea.map((e: DataPosPosition) => ({
        id: e.positionArea,
        name: e.positionArea,
      }));
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/** function fetch ข้อมูลตำแหน่งข้อมูลทางการบริหาร*/
async function fetchDataOptionExecutive() {
  await http
    .get(config.API.orgPosExecutive)
    .then((res) => {
      const data = res.data.result;
      store.posExecutiveData = data.map((e: DataPosExecutive) => ({
        id: e.posExecutiveName,
        name: e.posExecutiveName,
      }));
    })
    .catch((e) => {
      messageError($q, e);
    });
}

/**
 * function เลือกประเภทตำแหน่ง
 * @param val id ประเภทตำแหน่ง
 * @param status แก่ไข , เพิ่ม
 */
async function updateSelectType(val: string, status: boolean = false) {
  const listLevel = val
    ? dataLevel.value.find((e: DataPosType) => e.posTypeName === val)
    : null;

  if (listLevel) {
    store.posLevelData = listLevel.posLevels.map((e: DataPosLevel) => ({
      id: e.id,
      name:
        empType.value === "officer"
          ? e.posLevelName
          : `${listLevel.posTypeShortName} ${e.posLevelName}`,
    }));

    formData.positionLevel = !status ? "" : formData.positionLevel;
  } else {
    store.posLevelData = [];
    formData.positionLevel = "";
  }
}

async function onDefineData(index: number) {
  const data = rowData.value[index];
  salaryId.value = data.id;

  const newData = await fetchDataPosition();
  updateSelectType(data.positionType);

  if (newData) {
    const salaryNew = newData.salaryNew;
    const salaryOld = newData.salaryOld;

    formData.commandCode = salaryNew.commandCode;
    formData.commandNo = salaryNew.commandNo;
    formData.commandYear = salaryNew.commandYear;
    formData.commandDateAffect = salaryNew.commandDateAffect;
    formData.commandDateSign = salaryNew.commandDateSign;
    formData.posNoAbb = salaryNew.posNoAbb;
    formData.posNo = salaryNew.posNo;
    formData.positionName = salaryNew.positionName;
    formData.positionType = salaryNew.positionType;
    formData.positionLevel = salaryNew.positionLevel;
    formData.positionCee = salaryNew.positionCee;
    formData.positionLine = salaryNew.positionLine;
    formData.positionPathSide = salaryNew.positionPathSide;
    formData.positionExecutive = salaryNew.positionExecutive;
    formData.amount = salaryNew.amount;
    formData.amountSpecial = salaryNew.amountSpecial;
    formData.positionSalaryAmount = salaryNew.positionSalaryAmount;
    formData.mouthSalaryAmount = salaryNew.mouthSalaryAmount;
    formData.orgRoot = salaryNew.orgRoot;
    formData.orgChild1 = salaryNew.orgChild1;
    formData.orgChild2 = salaryNew.orgChild2;
    formData.orgChild3 = salaryNew.orgChild3;
    formData.orgChild4 = salaryNew.orgChild4;
    formData.remark = salaryNew.remark;

    formReadonly.commandCode = salaryOld.commandCode;
    formReadonly.commandNo = salaryOld.commandNo;
    formReadonly.commandYear = salaryOld.commandYear;
    formReadonly.commandDateAffect = salaryOld.commandDateAffect;
    formReadonly.commandDateSign = salaryOld.commandDateSign;
    formReadonly.posNoAbb = salaryOld.posNoAbb;
    formReadonly.posNo = salaryOld.posNo;
    formReadonly.positionName = salaryOld.positionName;
    formReadonly.positionType = salaryOld.positionType;
    formReadonly.positionLevel = salaryOld.positionLevel;
    formReadonly.positionCee = salaryOld.positionCee;
    formReadonly.positionLine = salaryOld.positionLine;
    formReadonly.positionPathSide = salaryOld.positionPathSide;
    formReadonly.positionExecutive = salaryOld.positionExecutive;
    formReadonly.amount = salaryOld.amount;
    formReadonly.positionSalaryAmount = salaryOld.positionSalaryAmount;
    formReadonly.mouthSalaryAmount = salaryOld.mouthSalaryAmount;
    formReadonly.orgRoot = salaryOld.orgRoot;
    formReadonly.orgChild1 = salaryOld.orgChild1;
    formReadonly.orgChild2 = salaryOld.orgChild2;
    formReadonly.orgChild3 = salaryOld.orgChild3;
    formReadonly.orgChild4 = salaryOld.orgChild4;
    formReadonly.remark = salaryOld.remark;
  }
}

async function onNavigateRow(action: string) {
  action === "next" ? (rowIndex.value += 1) : (rowIndex.value -= 1);
  await nextTick();
  onDefineData(rowIndex.value);
}

function onClickCloseDialog() {
  modal.value = false;
}

function onSubmit() {
  console.log(formData);
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .patch(config.API.salaryTemp + `/${salaryId.value}`, {
        ...formData,
        type: empType.value?.toLocaleUpperCase(),
        commandDateAffect: convertDateToAPI(formData.commandDateAffect),
        commandDateSign: convertDateToAPI(formData.commandDateSign),
        amount: Number(String(formData.amount)?.replace(/,/g, "")),
        amountSpecial: Number(
          String(formData.amountSpecial)?.replace(/,/g, "")
        ),
        positionSalaryAmount: Number(
          String(formData.positionSalaryAmount)?.replace(/,/g, "")
        ),
        mouthSalaryAmount: Number(
          String(formData.mouthSalaryAmount)?.replace(/,/g, "")
        ),
      })
      .then(async () => {
        await props.fetchData?.();
        success($q, "บันทึกข้อมูลสำเร็จ");
        onClickCloseDialog();
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

watch(modal, async (val) => {
  if (val) {
    showLoader();
    if (empType.value === "officer") {
      await Promise.all([
        fetchType(),
        fetchDataOption(),
        fetchDataOptionExecutive(),
      ]);
    } else {
      await fetchOptionGroup();
    }

    commandCodeOptions.value = store.commandCodeData;
    posTypeOptions.value = store.posTypeData;
    posLevelOptions.value = store.posLevelData;
    posLineOptions.value = store.posLineData;
    posPathSideOptions.value = store.posPathSideData;
    posExecutiveOptions.value = store.posExecutiveData;
    await onDefineData(rowIndex.value);
    hideLoader();
  }
});

onMounted(async () => {
  await fetchDataCommandCode();
});
</script>

<template>
  <q-dialog v-model="modal" persistent full-width>
    <q-card>
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader
          :tittle="'แก้ไขตำแหน่ง/เงินเดือน'"
          :close="onClickCloseDialog"
        />
        <q-separator />

        <q-card-section style="padding: 0px">
          <div class="col-12 row">
            <div class="col-xs-12 col-md-6 row no-wrap">
              <div class="col-12 q-pa-md">
                <q-card
                  bordered
                  class="col-12"
                  style="border: 1px solid #d6dee1"
                >
                  <div
                    class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
                  >
                    ข้อมูลปัจุบัน
                  </div>
                  <div class="col-12"><q-separator /></div>
                  <q-card-section>
                    <FormPosition
                      :is-readonly="true"
                      :form-data="formReadonly"
                      :command-code-options="commandCodeOptions"
                      :pos-type-options="posTypeOptions"
                      :pos-level-options="posLevelOptions"
                      :pos-line-options="posLineOptions"
                      :pos-path-side-options="posPathSideOptions"
                      :pos-executive-options="posExecutiveOptions"
                      :emp-type="empType"
                      :update-select-type="updateSelectType"
                    />
                  </q-card-section>
                </q-card>
              </div>
              <div class="col-12 row">
                <q-separator :vertical="!$q.screen.lt.md" />
              </div>
            </div>

            <div class="col-xs-12 col-md-6 row">
              <div class="col-12 q-pa-md">
                <q-card
                  bordered
                  class="col-12"
                  style="border: 1px solid #d6dee1"
                >
                  <div
                    class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
                  >
                    ข้อมูลที่แก้ไข
                  </div>
                  <div class="col-12">
                    <q-separator />
                    <q-card-section>
                      <FormPosition
                        :is-readonly="false"
                        v-model:form-data="formData"
                        v-model:command-code-options="commandCodeOptions"
                        v-model:pos-type-options="posTypeOptions"
                        v-model:pos-level-options="posLevelOptions"
                        v-model:pos-line-options="posLineOptions"
                        v-model:pos-path-side-options="posPathSideOptions"
                        v-model:pos-executive-options="posExecutiveOptions"
                        :emp-type="empType"
                        :update-select-type="updateSelectType"
                      />
                    </q-card-section>
                  </div>
                </q-card>
              </div>
            </div>
          </div>
        </q-card-section>

        <q-separator />

        <q-card-actions align="right">
          <q-btn
            flat
            round
            :disable="rowIndex === 0"
            :color="rowIndex === 0 ? 'grey' : 'public'"
            icon="mdi-chevron-left"
            @click.stop.pervent="onNavigateRow('previous')"
          >
            <q-tooltip>ข้อมูลก่อนหน้า</q-tooltip>
          </q-btn>

          <q-btn
            flat
            round
            :disable="rowIndex + 1 === rowData.length"
            :color="rowIndex + 1 === rowData.length ? 'grey' : 'public'"
            icon="mdi-chevron-right"
            @click.stop.pervent="onNavigateRow('next')"
          >
            <q-tooltip>ข้อมูลถัดไป</q-tooltip>
          </q-btn>

          <q-btn label="บันทึก" id="onSubmit" type="submit" color="public">
            <q-tooltip>บันทึกข้อมูล</q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>