hrms-mgt/src/modules/04_registryPerson/components/requestEdit/Page01_Detail.vue

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

import { useRouter, useRoute } from "vue-router";
import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";

import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
import type { DataRequest } from "@/modules/04_registryPerson/interface/response/Main";

import Workflow from "@/components/Workflow/Main.vue";
import DialogUpdate from "@/modules/04_registryPerson/components/Dialog/DialogUpdate.vue";

const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const store = useRequestEditStore();
const {
  dialogConfirm,
  date2Thai,
  showLoader,
  hideLoader,
  messageError,
  success,
} = useCounterMixin();

const urlImg = ref<string>("");
const modalUpdate = ref<boolean>(false);
const profileId = ref<string>("");
const idCard = ref<string>("");
const requestId = ref<string>(route.params.id.toString());
const dataRequest = ref<any>({
  fullname: "",
  createdAt: null,
  topic: "",
  detail: "",
});

//ฟอร์มสถานะคำร้อง
const formData = reactive({
  status: "", //สถานะ
  remark: "", //หมายเหตุ
});

const isReadOnly = ref<boolean>(false); //อ่ายได้อย่างเดียว
const workflowRef = ref<any>(null);
//ข้อมูลรายการสถานะ
const statusOptionMain = ref<DataOption[]>(
  store.optionStatus.filter((e) => e.id !== "")
);
const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเลือกรายการสถานะ

const isCheckData = computed(() => {
  if (isReadOnly.value === true) {
    return true;
  } else return false;
});

/** function fetch ข้อมูลคำร้องแก้ไข*/
async function fetchDataRequest() {
  showLoader();
  await http
    .get(config.API.requestEdit + `${requestId.value}`)
    .then((res) => {
      const data = res.data.result;
      dataRequest.value = {
        fullname: data.fullname,
        createdAt: data.createdAt,
        topic: data.topic,
        detail: data.detail,
      };

      formData.status = data.status;
      formData.remark = data.remark;
      if (data.status !== "PENDING") {
        isReadOnly.value = true;
      } else {
        isReadOnly.value = false;
      }
      if (dataRequest.value.topic == "ขอแก้ไขรูปภาพประจำตัว") {
        onDownloadFile(requestId.value);
      }
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** function บันทึกรายการคำร้อง*/
function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .patch(config.API.requestEdit + `${requestId.value}`, {
        status: formData.status,
        remark: formData.remark,
      })
      .then(async () => {
        await fetchDataRequest();
        await success($q, "บันทึกข้อมูลสำเร็จ");
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/**
 * function ค้นหาคำใน select  สถานะคำร้อง
 * @param val คำค้น
 * @param update Function
 */
function filterOption(val: string, update: Function) {
  update(() => {
    statusOption.value = statusOptionMain.value.filter(
      (v: DataOption) => v.name.indexOf(val) > -1
    );
  });
}

/**
 * class inpui
 * @param val ค่าสถานะ
 */
function classInput(val: boolean) {
  return {
    "full-width cursor-pointer ": val,
    "full-width cursor-pointer inputgreen": !val,
  };
}

/**
 * function หาชื่อไฟล์
 * @param id รายการยื่นคำร้องขอแก้ไขข้อมูล
 */
function onDownloadFile(id: string) {
  showLoader();
  http
    .get(
      config.API.file(
        "ระบบทะเบียนประวัติ",
        "เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
        id
      )
    )
    .then(async (res) => {
      if (res.data.length !== 0) {
        await downloadUrl(id, res.data[0].fileName);
      } else {
        hideLoader();
      }
    })
    .catch((e) => {
      messageError($q, e);
      hideLoader();
    });
}

/**
 * function  โหลดไฟล์
 * @param id  รายการยื่นคำร้องขอแก้ไขข้อมูล
 * @param fileName  ชื่อไฟล์
 */
async function downloadUrl(id: string, fileName: string) {
  await http
    .get(
      config.API.fileByFile(
        "ระบบทะเบียนประวัติ",
        "เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
        id,
        fileName
      )
    )
    .then((res) => {
      if (dataRequest.value.topic == "ขอแก้ไขรูปภาพประจำตัว") {
        urlImg.value = res.data.downloadUrl;
      } else {
        window.open(res.data.downloadUrl, "_blank");
      }
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

function onUpdate() {
  modalUpdate.value = true;
}

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

<template>
  <div class="row items-center">
    <div class="toptitle text-dark row items-center q-py-xs">
      <q-btn
        icon="mdi-arrow-left"
        unelevated
        round
        dense
        flat
        color="primary"
        class="q-mr-sm"
        @click="router.go(-1)"
      />
      รายละเอียดคำร้องขอแก้ไขทะเบียนประวัติของ{{ dataRequest.fullname }}
    </div>
    <q-space />
    <q-btn
      v-if="workflowRef?.permission.isUpdate"
      color="public"
      label="ปรับปรุงข้อมูลจากกรมการปกครอง"
      @click="onUpdate"
    >
      <q-tooltip>ปรับปรุงข้อมูลจากกรมการปกครอง</q-tooltip>
    </q-btn>
  </div>
  <q-card>
    <q-card-section>
      <div class="row q-col-gutter-sm">
        <!-- รายละเอียดคำร้องขอแก้ไข -->
        <div class="col-12">
          <q-card bordered class="row col-12">
            <div class="bg-grey-1 q-pa-sm col-12 row items-center">
              <div class="q-pl-sm text-weight-bold text-dark">
                รายละเอียดคำร้องขอแก้ไข
              </div>
            </div>
            <div class="col-12"><q-separator /></div>
            <q-card-section class="col-12">
              <div class="row q-col-gutter-sm">
                <!-- วันที่ยื่นขอ -->
                <div class="col-md-2 col-xs-12">
                  <datepicker
                    menu-class-name="modalfix"
                    v-model="dataRequest.createdAt"
                    :locale="'th'"
                    autoApply
                    readonly
                    borderless
                    :enableTimePicker="false"
                    week-start="0"
                  >
                    <template #year="{ year }">
                      {{ year + 543 }}
                    </template>
                    <template #year-overlay-value="{ value }">
                      {{ parseInt(value + 543) }}
                    </template>
                    <template #trigger>
                      <q-input
                        outlined
                        readonly
                        dense
                        hide-bottom-space
                        class="full-width"
                        :model-value="
                          dataRequest.createdAt != null
                            ? date2Thai(dataRequest.createdAt)
                            : null
                        "
                        :label="`${'วันที่ยื่นขอ'}`"
                      >
                        <template v-slot:prepend>
                          <q-icon
                            name="event"
                            class="cursor-pointer"
                            style="color: var(--q-primary)"
                          >
                          </q-icon>
                        </template>
                      </q-input>
                    </template>
                  </datepicker>
                </div>

                <!-- เรื่อง -->
                <div class="col-md-10 col-xs-12">
                  <q-input
                    :class="classInput(true)"
                    readonly
                    v-model="dataRequest.topic"
                    label="เรื่องที่ต้องการแก้ไข"
                    dense
                    outlined
                  />
                </div>

                <!-- รายละเอียด -->
                <div class="col-12">
                  <q-input
                    :class="classInput(true)"
                    readonly
                    v-model="dataRequest.detail"
                    label="รายละเอียด"
                    dense
                    outlined
                    type="textarea"
                  />
                </div>
                <div class="text-weight-bold text-dark col-12">
                  {{
                    dataRequest.topic == "ขอแก้ไขรูปภาพประจำตัว"
                      ? "รูปภาพประจำตัว"
                      : "เอกสารหลักฐาน"
                  }}
                </div>
                <div class="col-12">
                  <!-- เอกสารหลักฐาน -->
                  <q-btn
                    v-if="dataRequest.topic !== 'ขอแก้ไขรูปภาพประจำตัว'"
                    icon="mdi-download"
                    dense
                    flat
                    label="ดาวน์โหลดเอกสารหลักฐาน"
                    color="blue"
                    @click.stop.pervent="onDownloadFile(requestId)"
                  >
                    <q-tooltip>หลักฐานอ้างอิง</q-tooltip>
                  </q-btn>
                  <div v-else>
                    <span v-if="urlImg == ''"
                      ><div
                        style="
                          height: 200px;
                          max-width: 200px;
                          display: flex;
                          flex-direction: column;
                          justify-content: center;
                          align-items: center;
                        "
                        class="text-grey-5"
                      >
                        <q-spinner color="primary" size="3em" :thickness="10" />
                      </div>
                    </span>
                    <q-img
                      v-else
                      :src="urlImg"
                      :ratio="1"
                      spinner-color="primary"
                      spinner-size="82px"
                      fit="cover"
                      style="
                        height: 200px;
                        max-width: 200px;
                        border-radius: 20px;
                      "
                    >
                    </q-img>
                  </div>
                </div>
              </div>
            </q-card-section>
          </q-card>
        </div>

        <!-- แก้ไขสถานะคำร้อง -->
        <q-form
          class="col-12"
          greedy
          @submit.prevent
          @validation-success="onSubmit"
        >
          <q-card bordered class="row col-12">
            <div class="bg-grey-1 q-pa-sm col-12 row items-center">
              <div class="q-pl-sm text-weight-bold text-dark">
                แก้ไขสถานะคำร้อง
              </div>
            </div>
            <div class="col-12"><q-separator /></div>
            <q-card-section class="col-12">
              <div class="row q-col-gutter-sm">
                <div class="col-xs-12 col-md-12">
                  <q-select
                    :class="
                      classInput(
                        isReadOnly || !workflowRef?.permission.isUpdate
                      )
                    "
                    :readonly="isReadOnly || !workflowRef?.permission.isUpdate"
                    v-model="formData.status"
                    label="สถานะ"
                    dense
                    outlined
                    emit-value
                    map-options
                    :options="statusOption"
                    :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
                    lazy-rules
                    hide-bottom-space
                    use-input
                    option-label="name"
                    option-value="id"
                    @filter="(inputValue:string,
                          doneFn:Function) => filterOption(inputValue, doneFn
                          ) "
                  >
                    <template v-slot:no-option>
                      <q-item>
                        <q-item-section class="text-grey">
                          ไม่มีข้อมูล
                        </q-item-section>
                      </q-item>
                    </template>
                  </q-select>
                </div>

                <div class="col-xs-12 col-md-12">
                  <q-input
                    :class="
                      classInput(
                        isReadOnly || !workflowRef?.permission.isUpdate
                      )
                    "
                    :readonly="isReadOnly || !workflowRef?.permission.isUpdate"
                    v-model="formData.remark"
                    label="หมายเหตุ"
                    dense
                    outlined
                    type="textarea"
                    hide-bottom-space
                  />
                </div>

                <div
                  class="row col-12 justify-end"
                  v-if="!isReadOnly && workflowRef?.permission.isUpdate"
                >
                  <q-btn label="บันทึก" color="secondary" type="submit"
                    ><q-tooltip>บันทึก</q-tooltip></q-btn
                  >
                </div>
              </div>
            </q-card-section>
            <q-separator />
          </q-card>
        </q-form>

        <div class="col-12">
          <Workflow
            v-model:is-check-data="isCheckData"
            ref="workflowRef"
            :id="requestId"
            sys-name="REGISTRY_PROFILE"
          />
        </div>
      </div>
    </q-card-section>
  </q-card>

  <DialogUpdate
    v-model:modal="modalUpdate"
    v-model:id-card="idCard"
    v-model:profile-id="profileId"
    :fetch-data="fetchDataRequest"
    :request-id="requestId"
  />
</template>

<style scoped></style>