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

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import ViewPDF from "@/modules/12_evaluatePersonal/components/Detail/viewstep/viewPDF.vue";
import { useCounterMixin } from "@/stores/mixin";
import { useRouter, useRoute } from "vue-router";
import { useQuasar } from "quasar";
import type { FormCommand } from "@/modules/12_evaluatePersonal/interface/index/evalute";
import http from "@/plugins/http";
import config from "@/app.config";

const router = useRouter();
const route = useRoute();
const id = ref<string>(route.params.id as string);
const $q = useQuasar();
const dateEndPrepareDoc2 = ref<string | null>();
const mixin = useCounterMixin();
const { date2Thai, showLoader, hideLoader, messageError, success } = mixin;
const AnnouncementDate = ref<string | null>(date2Thai(new Date()));
const fileEvaluation1 = ref<any>();

const pdfSrc = ref<any>();
const modalView = ref<boolean>(false);
const emit = defineEmits(["update:form"]);
const formCommand = reactive<FormCommand>({
  elementaryFullName: "",
  elementaryPosition: "",
  abovelevelFullname: "",
  abovelevelPosition: "",
});

function onClickViewPDF(file: any) {
  pdfSrc.value = file.webkitRelativePath;
  modalView.value = true;
}

const updateInput = (value: any) => {
  emit("update:form", value, ref);
};

function getDate() {
  showLoader();
  http
    .get(config.API.evaluationDateAnnounce(id.value))
    .then((res) => {
      const data = res.data.result;
      const endDate = new Date(data.dateEndAnnounce);
      endDate.setDate(endDate.getDate() + 180);
      dateEndPrepareDoc2.value = date2Thai(endDate);
      // dateEndPrepareDoc2.value = dateEndPrepareDoc2.value;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

const author = ref<string>("");
const subject = ref<string>("");
const assignedPosition = ref<string>("");

function getSigner() {
  showLoader();
  http
    .get(config.API.evaluationSigner(id.value, 2))
    .then((res) => {
      const data = res.data.result;
      formCommand.elementaryFullName = data.commanderFullnameDoc2;
      formCommand.elementaryPosition = data.commanderPositionDoc2;
      formCommand.abovelevelFullname = data.commanderAboveFullnameDoc2;
      formCommand.abovelevelPosition = data.commanderAbovePositionDoc2;
      author.value = data.authorDoc2;
      subject.value = data.subjectDoc2;
      assignedPosition.value = data.assignedPosition;
    })
    // .catch((e) => {
    //   messageError($q, e);
    // })
    .finally(() => {
      hideLoader();
    });
}

onMounted(() => {
  getSigner();
  getDate();
});
</script>

<template>
  <div class="row q-col-gutter-md">
    <div class="col-12">
      <q-banner class="text-weight-bold text-red-14 bg-red-2 text-center">
        <div class="text-weight-bold">
          <q-icon name="info_outline" color="red-14" size="24px" />
          วันสุดท้ายของการส่งผลงานคือวันที่ {{ dateEndPrepareDoc2 }}
        </div>
      </q-banner>
    </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="row col-12 q-col-gutter-md q-pa-sm">
                  <q-input
                    dense
                    class="col-xs-12 col-sm-6"
                    outlined
                    label="ชื่อผลงาน"
                    v-model="subject"
                    @update:model-value="updateInput(formCommand)"
                    :rules="[(val) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
                    lazy-rules
                  />
                  <q-input
                    readonly
                    class="col-xs-12 col-sm-6"
                    dense
                    outlined
                    v-model="author"
                    @update:model-value="updateInput(formCommand)"
                    label="เจ้าของผลงาน"
                    :rules="[(val) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
                    lazy-rules
                  />
                  <q-input
                    readonly
                    class="col-xs-12 col-sm-6"
                    dense
                    outlined
                    v-model="assignedPosition"
                    @update:model-value="updateInput(formCommand)"
                    label="ต่ำแหน่งที่ได้รับ"
                    :rules="[(val) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
                    lazy-rules
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </q-card>
    </div>
    <!-- <div class="col-6">
      <q-card bordered style="border: 1px solid #d6dee1">
        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
          เอกสารเล่ม 2
        </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-6 row">
                <q-btn
                  class="col-12"
                  outline
                  icon="download"
                  label="ดาวน์โหลดต้นแบบ"
                  color="primary"
                >
                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  v-if="fileEvaluation1"
                  class="col-12"
                  outline
                  icon="visibility"
                  label="ดูไฟล์เอกสาร"
                  color="primary"
                  @click="onClickViewPDF(fileEvaluation1)"
                >
                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-11 row">
                <q-file
                  v-model="fileEvaluation1"
                  class="col-12"
                  outlined
                  dense
                  hide-bottom-space
                  lazy-rules
                  accept=".pdf"
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" />
                  </template>
                </q-file>
              </div>
              <div class="col-1 self-center text-center">
                <q-btn flat round dense color="primary" icon="mdi-upload"
                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                >
              </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"
                    @update:model-value="updateInput(formCommand)"
                    :rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
                    lazy-rules
                  />
                  <q-input
                    readonly
                    ref="elementaryPositonRef"
                    class="col-xs-12 col-sm-6"
                    dense
                    outlined
                    v-model="formCommand.elementaryPosition"
                    @update:model-value="updateInput(formCommand)"
                    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
                    @update:model-value="updateInput(formCommand)"
                  />
                  <q-input
                    ref="abovelevelPositionRef"
                    class="col-xs-12 col-sm-6"
                    dense
                    readonly
                    outlined
                    v-model="formCommand.abovelevelPosition"
                    label="ตำแหน่ง"
                    :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
                    lazy-rules
                    @update:model-value="updateInput(formCommand)"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </q-card>
    </div>
  </div>

  <!-- Dialog Full Screen -->
  <q-dialog
    v-model="modalView"
    persistent
    :maximized="true"
    transition-show="slide-up"
    transition-hide="slide-down"
  >
    <q-card class="bg-white">
      <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
        <q-btn
          icon="close"
          unelevated
          round
          dense
          style="color: #ff8080; background-color: #ffdede"
          size="12px"
          v-close-popup
        />
      </div>

      <div class="q-pa-md">
        <ViewPDF />
      </div>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>