hrms-mgt/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";

import type { FormCommand } from "@/modules/12_evaluatePersonal/interface/index/evalute";

import { useCounterMixin } from "@/stores/mixin";
const route = useRoute();
const id = ref<string>(route.params.id as string);
const $q = useQuasar();

const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError } = mixin;

/** ฟรอมจัดเตรียมเอกสารเล่ม 1*/
const author = ref<string>("");
const subject = ref<string>("");
const formCommand = reactive<FormCommand>({
  elementaryFullName: "",
  elementaryPosition: "",
  abovelevelFullname: "",
  abovelevelPosition: "",
});

/** function เรียกข้อมลผลงาน*/
async function fetchSigner() {
  showLoader();
  await http
    .get(config.API.evaluationSigner(id.value, 1))
    .then((res) => {
      const data = res.data.result;
      if (data) {
        formCommand.elementaryFullName =
          data == null ? "" : data.commanderFullname;
        formCommand.elementaryPosition =
          data == null ? "" : data.commanderPosition;
        formCommand.abovelevelFullname =
          data == null ? "" : data.commanderAboveFullname;
        formCommand.abovelevelPosition =
          data == null ? "" : data.commanderAbovePosition;
        author.value = data.author;
        subject.value = data.subject;
      }
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}
onMounted(async () => {
  await fetchSigner();
});
</script>

<template>
  <div class="row q-col-gutter-md">
    <!-- ผลงาน -->
    <div class="col-12">
      <q-card bordered style="border: 1px solid #d6dee1">
        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">ผลงาน</div>
        <div class="col-12"><q-separator /></div>
        <div class="row">
          <div class="col-12 q-pa-sm">
            <div class="row q-col-gutter-md col-12">
              <div class="col-xs-12 col-sm-12 row">
                <div class="row col-12 q-col-gutter-md q-pa-sm">
                  <q-input
                    readonly
                    dense
                    class="col-xs-12 col-sm-6"
                    outlined
                    label="ชื่อผลงาน"
                    v-model="subject"
                    :rules="[(val) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
                    lazy-rules
                  />
                  <q-input
                    readonly
                    class="col-xs-12 col-sm-6"
                    dense
                    outlined
                    v-model="author"
                    label="เจ้าของผลงาน"
                    :rules="[(val) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
                    lazy-rules
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </q-card>
    </div>

    <!-- เลือกผู้เซ็นเอกสาร -->
    <div class="col-12">
      <q-card bordered style="border: 1px solid #d6dee1">
        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
          เลือกผู้เซ็นเอกสาร
        </div>
        <div class="col-12"><q-separator /></div>
        <div class="row">
          <div class="col-12 q-pa-sm">
            <div class="row q-col-gutter-md col-12">
              <div class="col-xs-12 col-sm-12 row">
                <div class="text-weight-medium q-py-sm">
                  ผู้บังคับบัญชาชั้นต้น
                </div>
                <div class="row col-12 q-col-gutter-md q-pa-sm">
                  <q-input
                    readonly
                    ref="elementaryFullNameRef"
                    dense
                    class="col-xs-12 col-sm-6"
                    outlined
                    label="ชื่อ-นามสกุล"
                    v-model="formCommand.elementaryFullName"
                    :rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
                    lazy-rules
                  />
                  <q-input
                    readonly
                    ref="elementaryPositonRef"
                    class="col-xs-12 col-sm-6"
                    dense
                    outlined
                    v-model="formCommand.elementaryPosition"
                    label="ตำแหน่ง"
                    :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
                    lazy-rules
                  />
                </div>
              </div>
            </div>

            <div class="row q-col-gutter-md col-12">
              <div class="col-xs-12 col-sm-12 row">
                <div class="text-weight-medium q-py-sm">
                  ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
                </div>
                <div class="row col-12 q-col-gutter-md q-pa-sm">
                  <q-input
                    readonly
                    ref="abovelevelFullnameRef"
                    dense
                    class="col-xs-12 col-sm-6"
                    outlined
                    v-model="formCommand.abovelevelFullname"
                    label="ชื่อ-นามสกุล"
                    :rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
                    lazy-rules
                  />
                  <q-input
                    ref="abovelevelPositionRef"
                    class="col-xs-12 col-sm-6"
                    dense
                    readonly
                    outlined
                    v-model="formCommand.abovelevelPosition"
                    label="ตำแหน่ง"
                    :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
                    lazy-rules
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </q-card>
    </div>
  </div>
</template>

<style scoped></style>