ทะเบียนประวัติ ==> uploadFile

2025-03-18 15:25:08 +07:00 · 2025-03-18 15:25:08 +07:00 · 70373acacd
commit 70373acacd
parent a8f0a486e3
11 changed files with 656 additions and 42 deletions
--- a/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue
@ -5,10 +5,12 @@ import { QForm, useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
+import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
 import http from "@/plugins/http";
 import config from "@/app.config";

 import type { QTableColumn } from "quasar";
+import type { ResFileData } from "@/modules/04_registryPerson/interface/index/Main";
 import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/ProfesLicense";
 import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/ProfesLicense";

@ -29,6 +31,8 @@ const {
  onSearchDataTable,
  convertDateToAPI,
 } = mixin;
+const { createPathUploadFlie, getPathUploadFlie, uploadFile } =
+  useRegistryNewDataStore();

 const id = ref<string>(route.params.id.toString());
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
@ -165,6 +169,11 @@ const profesLicenseData = reactive<RequestItemsObject>({
  profileId: id.value,
 });

+const fileGroup = ref<string>("เอกสารใบอนุญาตประกอบวิชาชีพ");
+const fileUpload = ref<File | null>(null);
+const fileData = ref<ResFileData | null>(null);
+const isUpload = ref<boolean>(false);
+
 /** ยืนยันการบันทึกข้อมูล*/
 function onSubmit() {
  dialogConfirm(
@ -195,7 +204,11 @@ function onSubmit() {
          ? id.value
          : undefined,
      })
-        .then(async () => {
+        .then(async (res) => {
+          if (fileUpload.value) {
+            const isId = isEdit ? editId.value : res.data.result;
+            await uploadfile(isId);
+          }
          await fetchData(id.value);
          success($q, "บันทึกข้อมูลสำเร็จ");
          closeDialog();
@ -212,6 +225,21 @@ function onSubmit() {
  );
 }

+async function uploadfile(subId: string) {
+  try {
+    const uploadUrl = await createPathUploadFlie(
+      fileGroup.value,
+      id.value,
+      subId
+    );
+
+    await uploadFile(uploadUrl, fileUpload.value);
+    fileUpload.value = null;
+  } catch (err) {
+    messageError($q, err);
+  }
+}
+
 /** fetch ข้อมูลรายการใบอนุญาตประกอบวิชาชีพ*/
 async function fetchData(id: string) {
  showLoader();
@ -247,7 +275,7 @@ function clearForm() {
 * เปิด form แก้ไขข้อมูลใบอนุญาตประกอบวิชาชีพ
 * @param row  ข้อมูลใบอนุญาตประกอบวิชาชีพ
 */
-function editForm(row: ResponseObject) {
+async function editForm(row: ResponseObject) {
  dialogStatus.value = "edit";
  editId.value = row.id;
  profesLicenseData.certificateType = row.certificateType;
@ -255,7 +283,16 @@ function editForm(row: ResponseObject) {
  profesLicenseData.issuer = row.issuer;
  profesLicenseData.issueDate = row.issueDate;
  profesLicenseData.expireDate = row.expireDate;
+  isUpload.value = row.isUpload ? row.isUpload : false;
  dialog.value = true;
+  if (isUpload.value) {
+    const data = await getPathUploadFlie(
+      fileGroup.value,
+      id.value,
+      editId.value
+    );
+    fileData.value = data;
+  }
 }

 function onViewHistory(id: string) {
@ -281,6 +318,11 @@ async function fetchDataHistory() {
  }
 }

+async function onDownloadFile(subId: string) {
+  const data = await getPathUploadFlie(fileGroup.value, id.value, subId);
+  window.open(data.downloadUrl, "_blank");
+}
+
 function serchDataTable() {
  rows.value = onSearchDataTable(
    keyword.value,
@ -393,6 +435,7 @@ onMounted(() => {
        <q-th v-for="col in props.cols" :key="col.name" :props="props">
          <span class="text-weight-medium">{{ col.label }}</span>
        </q-th>
+        <q-th auto-width />
      </q-tr>
    </template>
    <template v-slot:body="props" v-if="mode === 'table'">
@ -430,6 +473,17 @@ onMounted(() => {
            {{ col.value ? col.value : "-" }}
          </div>
        </q-td>
+        <q-btn
+          v-if="props.row.isUpload"
+          color="green"
+          flat
+          dense
+          round
+          icon="mdi-file-document-outline"
+          @click="onDownloadFile(props.row.id)"
+        >
+          <q-tooltip>ดาวน์โหลด</q-tooltip>
+        </q-btn>
      </q-tr>
    </template>
    <template v-slot:item="props" v-else>
@ -438,6 +492,17 @@ onMounted(() => {
      >
        <q-card bordered>
          <q-card-actions align="right" class="bg-grey-3">
+            <q-btn
+              v-if="props.row.isUpload"
+              color="green"
+              flat
+              dense
+              round
+              icon="mdi-file-document-outline"
+              @click="onDownloadFile(props.row.id)"
+            >
+              <q-tooltip>ดาวน์โหลด</q-tooltip>
+            </q-btn>
            <q-btn
              flat
              round
@ -622,6 +687,107 @@ onMounted(() => {
                </template>
              </datepicker>
            </div>
+            <div class="row col-xs-12 col-sm-12 col-md-12">
+              <q-uploader
+                v-if="!isUpload"
+                color="gray"
+                type="file"
+                flat
+                ref="uploader"
+                class="full-width"
+                text-color="white"
+                :max-size="10000000"
+                accept=".pdf"
+                bordered
+                label="[ไฟล์ pdf ขนาดไม่เกิน 10MB]"
+                @added="(v:any) => (fileUpload = v[0])"
+              >
+                <template v-slot:header="scope">
+                  <div class="row no-wrap items-center q-pa-sm q-gutter-xs">
+                    <q-btn
+                      v-if="scope.queuedFiles.length > 0"
+                      icon="clear_all"
+                      @click="scope.removeQueuedFiles"
+                      round
+                      dense
+                      flat
+                    >
+                      <q-tooltip>ลบทั้งหมด</q-tooltip>
+                    </q-btn>
+                    <q-btn
+                      v-if="scope.uploadedFiles.length > 0"
+                      icon="done_all"
+                      @click="scope.removeUploadedFiles"
+                      round
+                      dense
+                      flat
+                    >
+                      <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
+                    </q-btn>
+                    <q-spinner
+                      v-if="scope.isUploading"
+                      class="q-uploader__spinner"
+                    />
+                    <div class="col">
+                      <div class="q-uploader__title">
+                        {{ "[ไฟล์ .pdf ขนาดไม่เกิน 10MB]" }}
+                      </div>
+                      <div class="q-uploader__subtitle">
+                        {{ scope.uploadSizeLabel }} /
+                        {{ scope.uploadProgressLabel }}
+                      </div>
+                    </div>
+                    <q-btn
+                      v-if="scope.canAddFiles"
+                      type="a"
+                      icon="add_box"
+                      @click="scope.pickFiles"
+                      round
+                      dense
+                      flat
+                    >
+                      <q-uploader-add-trigger />
+                      <q-tooltip>เลือกไฟล์</q-tooltip>
+                    </q-btn>
+                    <q-btn
+                      v-if="scope.isUploading"
+                      icon="clear"
+                      @click="scope.abort"
+                      round
+                      dense
+                      flat
+                    >
+                      <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
+                    </q-btn>
+                  </div>
+                </template>
+              </q-uploader>
+
+              <q-list bordered dense separator v-else class="full-width">
+                <q-item>
+                  <q-item-section> {{ fileData?.fileName }}</q-item-section>
+                  <q-item-section avatar>
+                    <div class="row">
+                      <q-btn
+                        flat
+                        round
+                        color="primary"
+                        icon="mdi-download"
+                        @click="onDownloadFile(editId)"
+                      />
+
+                      <q-btn
+                        flat
+                        round
+                        color="grey"
+                        icon="close"
+                        @click="isUpload = false"
+                      />
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </div>
          </div>
        </q-card-section>
        <q-separator />
--- a/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
@ -333,6 +333,8 @@ async function getInsigniaActive() {
    .get(config.API.orgInsigniaActive())
    .then((res) => {
      const data = res.data.result;
+      console.log(data);
+
      mapInsigniaOption(data);
    })
    .catch((e) => {
@ -365,7 +367,7 @@ async function addEditData(editStatus: boolean = false) {
  };
  try {
    await http[method](url, reqBody).then(async (res) => {
-      if ((fileUpload.value && id.value) || res.data.result) {
+      if (fileUpload.value) {
        await uploadProfile(editStatus ? id.value : res.data.result);
      }
    });
@ -589,6 +591,8 @@ function filterSelector(val: string, update: Function, refData: string) {
 function insigniaTypeSelection(check: boolean, id: string) {
  if (check) {
    insigniaForm.insigniaId = "";
+    console.log(store.insigniaTypeOpMain);
+
    const data = store.insigniaTypeOpMain.find(
      (item: InsigniasType) => item.id == id
    );
--- a/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
@ -190,15 +190,9 @@ const pagination = ref({
 });

 //Table ประวัติแก้ไข
-const rowsHistory = ref<ResponseObject[]>([]);
-const rowsHistoryMain = ref<ResponseObject[]>([]);
-const filterHistory = ref<string>("");
 const historyId = ref<string>("");
 const columnsHistory = ref<QTableColumn[]>(baseColumns.value);
 const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
-const historyPagination = ref({
-  sortBy: "lastUpdatedAt",
-});

 /** fetch รายการข้อมูลประกาศเกียรติคุณ*/
 async function fetchData() {
@ -246,7 +240,7 @@ async function addEditData(editStatus: boolean = false) {
  };
  try {
    await http[method](url, reqBody).then(async (res) => {
-      if ((fileUpload.value && id.value) || res.data.result) {
+      if (fileUpload.value) {
        await uploadProfile(editStatus ? id.value : res.data.result);
      }
    });
@ -601,6 +595,17 @@ onMounted(() => {
      <div class="col-xs-12 col-sm-6 col-md-6">
        <q-card bordered>
          <q-card-actions class="bg-grey-3" align="right">
+            <q-btn
+              v-if="props.row.isUpload == true"
+              color="green"
+              flat
+              dense
+              round
+              icon="mdi-file-document-outline"
+              @click="onDownloadFile(props.row.id)"
+            >
+              <q-tooltip>ดาวน์โหลด</q-tooltip>
+            </q-btn>
            <q-btn
              flat
              round