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

div
<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 $q = useQuasar();

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

const id = ref<string>(route.params.id as string); //id ประเมิน
/** ฟรอมจัดเตรียมเอกสารเล่ม 1*/
const subject = ref<string[]>([""]); //ชื่อผลงาน
const author = ref<string>(""); //เจ้าของผลงาน
const formCommand = reactive<FormCommand>({
  elementaryFullName: "", //ชื่อ-นามสกุลผู้บังคับบัญชาชั้นต้น
  elementaryPosition: "", //ตำแหน่งผู้บังคับบัญชาชั้นต้น
  elementaryPositionOld: "", //ตำแหน่งเดิมผู้บังคับบัญชาชั้นต้น
  elementaryOrg: "", //สังกัดผู้บังคับบัญชาชั้นต้น
  elementaryOrgOld: "", //สังกัดเดิมผู้บังคับบัญชาชั้นต้น
  abovelevelFullname: "", //ชื่อ-นามสกุลผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
  abovelevelPosition: "", //ตำแหน่งผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
  abovelevelPositionOld: "", //ตำแหน่งเดิมผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
  abovelevelOrg: "", //สังกัดผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
  abovelevelOrgOld: "", //สังกัดเดิมผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
});

/**
 * 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.commanderFullname;
        formCommand.elementaryPosition = data.commanderPosition;
        formCommand.elementaryPositionOld = data.commanderPositionOld;
        formCommand.elementaryOrg = data.commanderOrg;
        formCommand.elementaryOrgOld = data.commanderOrgOld;
        formCommand.abovelevelFullname = data.commanderAboveFullname;
        formCommand.abovelevelPosition = data.commanderAbovePosition;
        formCommand.abovelevelPositionOld = data.commanderAbovePositionOld;
        formCommand.abovelevelOrg = data.commanderAboveOrg;
        formCommand.abovelevelOrgOld = data.commanderAboveOrgOld;
        author.value = data.author;
        subject.value = data.subject;
      }
    })
    .catch((e) => {
      console.log(e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ทำงานเมือ Components ถูกเรียกใช้งาน
 */
onMounted(async () => {
  await fetchSigner();
});
</script>

<template>
  <div class="q-pa-sm col-12">
    <div class="row q-col-gutter-sm">
      <!-- ผลงาน -->
      <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="col-12 q-pa-sm">
            <div class="row q-col-gutter-sm">
              <div class="col-12">
                <q-input
                  readonly
                  dense
                  outlined
                  v-model="author"
                  label="เจ้าของผลงาน"
                  lazy-rules
                  hide-bottom-space
                />
              </div>
              <div class="col-12" v-for="(item, index) in subject" :key="index">
                <div class="row col-12 q-col-gutter-sm">
                  <q-input
                    readonly
                    dense
                    class="col-xs-12 col-sm-12"
                    outlined
                    label="ชื่อผลงาน"
                    v-model="subject[index]"
                    lazy-rules
                    hide-bottom-space
                  />
                </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-sm col-12">
                <div class="col-xs-12 col-sm-12 row">
                  <div class="text-weight-medium q-py-xs q-pl-sm">
                    ผู้บังคับบัญชาชั้นต้น
                  </div>

                  <div class="row col-12 q-col-gutter-sm">
                    <q-input
                      readonly
                      dense
                      class="col-xs-12 col-sm-6"
                      outlined
                      v-model="formCommand.elementaryFullName"
                      label="ชื่อ-นามสกุล"
                      lazy-rules
                      hide-bottom-space
                    />

                    <div class="col-12">
                      <div class="row col-12 q-col-gutter-sm">
                        <q-input
                          readonly
                          class="col-xs-6 col-sm-3"
                          dense
                          outlined
                          v-model="formCommand.elementaryPosition"
                          label="ตำแหน่ง"
                          lazy-rules
                          hide-bottom-space
                        />
                        <q-input
                          readonly
                          class="col-xs-6 col-sm-3"
                          dense
                          outlined
                          v-model="formCommand.elementaryPositionOld"
                          label="ตำแหน่งเดิม"
                          lazy-rules
                          hide-bottom-space
                        />
                        <q-input
                          readonly
                          class="col-xs-6 col-sm-3"
                          dense
                          outlined
                          v-model="formCommand.elementaryOrg"
                          label="สังกัด"
                          lazy-rules
                          hide-bottom-space
                        />
                        <q-input
                          readonly
                          class="col-xs-6 col-sm-3"
                          dense
                          outlined
                          v-model="formCommand.elementaryOrgOld"
                          label="สังกัดเดิม"
                          lazy-rules
                          hide-bottom-space
                        />
                      </div>
                    </div>
                  </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-md q-mb-xs">
                    ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
                  </div>
                  <div class="row col-12 q-col-gutter-sm">
                    <q-input
                      readonly
                      ref="abovelevelFullnameRef"
                      dense
                      class="col-xs-12 col-sm-6"
                      outlined
                      v-model="formCommand.abovelevelFullname"
                      label="ชื่อ-นามสกุล"
                      :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
                      lazy-rules
                      hide-bottom-space
                    />
                    <div class="col-12">
                      <div class="row col-12 q-col-gutter-sm">
                        <q-input
                          readonly
                          class="col-xs-6 col-sm-3"
                          dense
                          outlined
                          v-model="formCommand.abovelevelPosition"
                          label="ตำแหน่ง"
                          lazy-rules
                          hide-bottom-space
                        />
                        <q-input
                          readonly
                          class="col-xs-6 col-sm-3"
                          dense
                          outlined
                          v-model="formCommand.abovelevelPositionOld"
                          label="ตำแหน่งเดิม"
                          lazy-rules
                          hide-bottom-space
                        />
                        <q-input
                          readonly
                          class="col-xs-6 col-sm-3"
                          dense
                          outlined
                          v-model="formCommand.abovelevelOrg"
                          label="สังกัด"
                          lazy-rules
                          hide-bottom-space
                        />
                        <q-input
                          readonly
                          class="col-xs-6 col-sm-3"
                          dense
                          outlined
                          v-model="formCommand.abovelevelOrgOld"
                          label="สังกัดเดิม"
                          lazy-rules
                          hide-bottom-space
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </q-card>
      </div>
    </div>
  </div>
</template>

<style scoped></style>