hrms-user/src/modules/06_evaluate/components/ExpertPage.vue

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

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";

import type { FormCommandSe } from "@/modules/06_evaluate/interface/evalute";

const $q = useQuasar();
const router = useRouter();
const dataPerson = useDataStore();
const mixin = useCounterMixin();
const { dialogConfirm, messageError, showLoader, hideLoader } = mixin;

const formData = reactive<FormCommandSe>({
  subject: "",
  author: "",
  commanderFullname: "",
  commanderPosition: "",
  commanderAboveFullname: "",
  commanderAbovePosition: "",
});

const isLoading = ref(false);

/** ยืนยันการบันทึกข้อมูล */
function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();
    const body = {
      ...formData,
      citizenId: dataPerson.formData.citizenId,
      prefix: dataPerson.formData.prefix,
      fullName: `${dataPerson.formData.prefix}${dataPerson.formData.firstName} ${dataPerson.formData.lastName}`,
      position: dataPerson.formData.position,
      salary: dataPerson.formData.salary?.toString(),
      posNo: dataPerson.formData.posNo,
      birthDate: dataPerson.formData.birthDate,
    };
    await http
      .post(config.API.evaluationExpertise, body)
      .then((res) => {
        router.push(`/evaluate/detail/expertise/${res.data.result.id}`);
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/** ฟังก์ชันดึงข้อมูลรายชื่อ ผู้บังคับบัญชาชั้นต้น */
async function getData() {
  isLoading.value = true;
  await http
    .get(config.API.orgSearchCommander())
    .then(async (res) => {
      const data = await res.data.result;
      formData.author = data.fullname;
      formData.commanderFullname = data.commanderFullname;
      formData.commanderPosition = data.commanderPosition;
      formData.commanderAboveFullname = data.commanderAboveFullname;
      formData.commanderAbovePosition = data.commanderAbovePosition;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      isLoading.value = false;
    });
}

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

<template>
  <q-form greedy @submit.prevent @validation-success="onSubmit">
    <div class="col-12 row justify-center">
      <div class="col-xs-12 col-sm-12 col-md-11 q-mb-sm">
        <div class="toptitle text-white col-12 row items-center">
          <q-btn
            icon="mdi-arrow-left"
            unelevated
            round
            dense
            flat
            color="primary"
            class="q-mr-sm"
            @click="router.push('/evaluate')"
          />
          <div>ประเมินเชี่ยวชาญ</div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
        <div class="col-12">
          <q-skeleton
            v-if="isLoading"
            height="230px"
            square
            style="border-radius: 8px"
          />

          <q-card bordered v-else>
            <div class="col-12 row q-pa-md q-col-gutter-y-md">
              <div class="col-12">
                <q-card bordered class="col-12">
                  <div
                    class="text-weight-medium bg-grey-1 col-12 q-py-sm q-px-md"
                  >
                    ผลงาน
                  </div>
                  <div class="col-12"><q-separator /></div>
                  <div class="col-12 q-pa-sm">
                    <div class="row q-col-gutter-sm">
                      <q-input
                        ref="subjectRef"
                        dense
                        class="col-xs-12 col-sm-6 inputgreen"
                        outlined
                        label="ชื่อผลงาน"
                        v-model="formData.subject"
                        :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
                        lazy-rules
                        hide-bottom-space
                      />
                      <q-input
                        ref="authorRef"
                        class="col-xs-12 col-sm-6 inputgreen"
                        dense
                        outlined
                        v-model="formData.author"
                        label="เจ้าของผลงาน"
                        :rules="[
                          (val:string) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`,
                        ]"
                        lazy-rules
                        hide-bottom-space
                      />
                    </div>
                  </div>
                </q-card>
              </div>

              <!-- เลือกผู้เซ็นเอกสาร -->
              <div class="col-12">
                <q-card bordered class="col-12">
                  <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
                    เลือกผู้เซ็นเอกสาร
                  </div>
                  <div class="col-12"><q-separator /></div>
                  <div class="col-12 q-pa-sm">
                    <div class="row q-col-gutter-sm">
                      <div class="col-xs-12 col-sm-12 row">
                        <div class="text-weight-medium q-pt-xs q-pl-sm">
                          ผู้บังคับบัญชาชั้นต้น
                        </div>
                        <div class="row col-12 q-col-gutter-sm q-pa-sm">
                          <q-input
                            dense
                            class="col-xs-12 col-sm-6 inputgreen"
                            outlined
                            label="ชื่อ-นามสกุล"
                            v-model="formData.commanderFullname"
                            :rules="[
                              (val:string) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
                            ]"
                            lazy-rules
                            hide-bottom-space
                          />
                          <q-input
                            class="col-xs-12 col-sm-6 inputgreen"
                            dense
                            outlined
                            v-model="formData.commanderPosition"
                            label="ตำแหน่ง"
                            :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
                            lazy-rules
                            hide-bottom-space
                          />
                        </div>
                      </div>
                    </div>
                    <div class="row q-col-gutter-sm col-12">
                      <div class="col-xs-12 col-sm-12 row">
                        <div class="text-weight-medium q-pl-sm q-pt-sm">
                          ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
                        </div>
                        <div class="row col-12 q-col-gutter-md q-pa-sm">
                          <q-input
                            dense
                            class="col-xs-12 col-sm-6 inputgreen"
                            outlined
                            v-model="formData.commanderAboveFullname"
                            label="ชื่อ-นามสกุล"
                            :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
                            lazy-rules
                            hide-bottom-space
                          />
                          <q-input
                            class="col-xs-12 col-sm-6 inputgreen"
                            dense
                            outlined
                            v-model="formData.commanderAbovePosition"
                            label="ตำแหน่ง"
                            :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
                            lazy-rules
                            hide-bottom-space
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </q-card>
              </div>
            </div>
            <q-separator />

            <q-card-actions align="right">
              <q-btn label="บันทึกข้อมูล" color="secondary" type="submit"
                ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
              >
            </q-card-actions>
          </q-card>
        </div>
      </div>
    </div>
  </q-form>
</template>