Merge branch 'nice' into develop

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 />

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
     );

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

src/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue

@@ -1,14 +1,17 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive } from "vue";
 import { useQuasar } from "quasar";
+import axios from "axios";
 
 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,
   DisciplineOps,
@@ -21,6 +24,8 @@ import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogH
 const route = useRoute();
 const $q = useQuasar();
 const mixin = useCounterMixin();
+const { createPathUploadFlie, getPathUploadFlie, uploadFile } =
+  useRegistryNewDataStore();
 const {
   date2Thai,
   dialogConfirm,
@@ -43,17 +48,6 @@ const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
 
-//ฟอร์มข้อมูลวินัย
-const disciplineData = reactive<RequestItemsObject>({
-  date: null, //วัน/เดือน/ปี
-  level: "", //ระดับการลงโทษทางวินัย
-  detail: "", //รายละเอียด
-  unStigma: "", //ประเภทคำสั่ง
-  refCommandNo: "", //เลขที่คำสั่ง
-  profileId: profileId.value,
-  refCommandDate: null, //เอกสารอ้างอิง (ลงวันที่)
-});
-
 const baseColumns = ref<QTableColumn[]>([
   {
     name: "date",
@@ -234,6 +228,22 @@ const OpsFilter = ref<DisciplineOps>({
   ],
 });
 
+//ฟอร์มข้อมูลวินัย
+const disciplineData = reactive<RequestItemsObject>({
+  date: null, //วัน/เดือน/ปี
+  level: "", //ระดับการลงโทษทางวินัย
+  detail: "", //รายละเอียด
+  unStigma: "", //ประเภทคำสั่ง
+  refCommandNo: "", //เลขที่คำสั่ง
+  profileId: profileId.value,
+  refCommandDate: null, //เอกสารอ้างอิง (ลงวันที่)
+});
+
+const fileGroup = ref<string>("เอกสารวินัย");
+const fileUpload = ref<File | null>(null);
+const fileData = ref<ResFileData | null>(null);
+const isUpload = ref<boolean>(false);
+
 /**
  * function ค้นหา คำใน option
  * @param val คำค้นหา
@@ -295,16 +305,33 @@ async function fetchData(id: string) {
  * กดเลือกข้อมูลที่จะแก้ไข
  * @param props ค่า props ใน row ที่เลือก
  */
-function openDialogEdit(props: RequestItemsObject) {
+async function openDialogEdit(props: RequestItemsObject) {
-  modal.value = true;
+  showLoader();
-  edit.value = true;
+  try {
-  id.value = props.id ? props.id : "";
+    modal.value = true;
-  disciplineData.date = props.date;
+    edit.value = true;
-  disciplineData.detail = props.detail;
+    id.value = props.id ? props.id : "";
-  disciplineData.level = props.level;
+    disciplineData.date = props.date;
-  disciplineData.unStigma = props.unStigma;
+    disciplineData.detail = props.detail;
-  disciplineData.refCommandNo = props.refCommandNo;
+    disciplineData.level = props.level;
-  disciplineData.refCommandDate = props.refCommandDate;
+    disciplineData.unStigma = props.unStigma;
+    disciplineData.refCommandNo = props.refCommandNo;
+    disciplineData.refCommandDate = props.refCommandDate;
+    isUpload.value = props.isUpload ? props.isUpload : false;
+
+    if (isUpload.value) {
+      const data = await getPathUploadFlie(
+        fileGroup.value,
+        profileId.value,
+        id.value
+      );
+      fileData.value = data;
+    }
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
 }
 
 /** function ยืนยันการบันทึกข้อมูล*/
@@ -336,7 +363,11 @@ function onSubmit() {
       };
 
       await method(url, body)
-        .then(async () => {
+        .then(async (res) => {
+          if (fileUpload.value) {
+            const isId = edit.value ? id.value : res.data.result;
+            await uploadfile(isId);
+          }
           await fetchData(profileId.value);
           success($q, "บันทึกข้อมูลสำเร็จ");
           closeDialog();
@@ -353,6 +384,26 @@ function onSubmit() {
   );
 }
 
+async function uploadfile(id: string) {
+  try {
+    const uploadUrl = await createPathUploadFlie(
+      fileGroup.value,
+      profileId.value,
+      id
+    );
+
+    await uploadFile(uploadUrl, fileUpload.value);
+    fileUpload.value = null;
+  } catch (err) {
+    messageError($q, err);
+  }
+}
+
+async function onDownloadFile(id: string) {
+  const data = await getPathUploadFlie(fileGroup.value, profileId.value, id);
+  window.open(data.downloadUrl, "_blank");
+}
+
 /**
  * function ดูประวัติการแ้ไขรายการวินัย
  * @param idOrder
@@ -484,10 +535,11 @@ onMounted(() => {
     >
     <template v-slot:header="props">
       <q-tr :props="props">
-        <q-th auto-width></q-th>
+        <q-th auto-width />
         <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'">
@@ -521,6 +573,19 @@ onMounted(() => {
             {{ col.value ? col.value : "-" }}
           </div>
         </q-td>
+        <q-td auto-width>
+          <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-td>
       </q-tr>
     </template>
     <template v-slot:item="props" v-else>
@@ -529,6 +594,17 @@ onMounted(() => {
           <div class="row bg-grey-3">
             <q-space />
             <div>
+              <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
                 color="deep-purple"
                 icon="mdi-history"
@@ -753,6 +829,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(id)"
+                      />
+
+                      <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 />

src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue

@@ -348,7 +348,7 @@ async function uploadProfile(id: string) {
     .post(
       config.API.subFile(
         "ทะเบียนประวัติ",
-        "ประกาศเกียรติคุณ",
+        "เอกสารปฏิบัติราชการพิเศษ",
         profileId.value,
         id
       ),
@@ -418,7 +418,7 @@ async function onDownloadFile(id: string, isLoad: boolean = true) {
     .get(
       config.API.subFileByFileName(
         "ทะเบียนประวัติ",
-        "ประกาศเกียรติคุณ",
+        "เอกสารปฏิบัติราชการพิเศษ",
         profileId.value,
         id,
         "เอกสารหลักฐาน"

src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue

@@ -193,8 +193,9 @@ function onSubmit() {
       };
       await method(url, body)
         .then(async (res) => {
-          if (fileUpload.value && res.data.result) {
+          if (fileUpload.value) {
-            await uploadProfile(res.data.result);
+            const isId = isEdit.value ? editId.value : res.data.result;
+            await uploadfile(isId);
           }
           await fetchData(id.value);
           success($q, "บันทึกข้อมูลสำเร็จ");
@@ -292,12 +293,12 @@ async function fetchDataHistory() {
  * ฟังก์ชันส้ราง Path อัปโหลดไฟล์
  * @param id
  */
-async function uploadProfile(id: string) {
+async function uploadfile(id: string) {
   await http
     .post(
       config.API.subFile(
         "ทะเบียนประวัติ",
-        "ประกาศเกียรติคุณ",
+        "เอกสารความสามารถพิเศษ",
         profileId.value,
         id
       ),
@@ -366,7 +367,7 @@ async function onDownloadFile(id: string, isLoad: boolean = true) {
     .get(
       config.API.subFileByFileName(
         "ทะเบียนประวัติ",
-        "ประกาศเกียรติคุณ",
+        "เอกสารความสามารถพิเศษ",
         profileId.value,
         id,
         "เอกสารหลักฐาน"

src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue

@@ -5,10 +5,12 @@ import { 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 { RowList } from "@/modules/04_registryPerson/interface/index/salary";
 import type { RequestNoPaidObject } from "@/modules/04_registryPerson/interface/request/Salary";
 
@@ -28,6 +30,8 @@ const {
   onSearchDataTable,
   convertDateToAPI,
 } = useCounterMixin();
+const { createPathUploadFlie, getPathUploadFlie, uploadFile } =
+  useRegistryNewDataStore();
 
 const id = ref<string>("");
 const profileId = ref<string>(
@@ -162,6 +166,11 @@ const pagination = ref({
 const columnsHistory = ref<QTableColumn[]>(baseColumns.value);
 const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
 
+const fileGroup = ref<string>("เอกสารบันทึกวันที่ไม่ได้รับเงินเดือน");
+const fileUpload = ref<File | null>(null);
+const fileData = ref<ResFileData | null>(null);
+const isUpload = ref<boolean>(false);
+
 /** funciton ยืนยันการบันทึกข้อมูล*/
 function onSubmit() {
   dialogConfirm($q, async () => {
@@ -187,7 +196,11 @@ function onSubmit() {
         ? profileId.value
         : undefined,
     })
-      .then(async () => {
+      .then(async (res) => {
+        if (fileUpload.value) {
+          const isId = isStatusEdit.value ? id.value : res.data.result;
+          await uploadfile(isId);
+        }
         await getData();
         success($q, "บันทึกข้อมูลสำเร็จ");
         onClickCloseDialog();
@@ -201,12 +214,27 @@ function onSubmit() {
   });
 }
 
+async function uploadfile(id: string) {
+  try {
+    const uploadUrl = await createPathUploadFlie(
+      fileGroup.value,
+      profileId.value,
+      id
+    );
+
+    await uploadFile(uploadUrl, fileUpload.value);
+    fileUpload.value = null;
+  } catch (err) {
+    messageError($q, err);
+  }
+}
+
 /**
  * function เปิด Didalig  บันทึกวันที่ไม่ได้รับเงินเดือนฯ
  * @param StatusEdit แก้ไข , เพิ่ม
  * @param data ข้อมูล
  */
-function onClickOpenDialog(
+async function onClickOpenDialog(
   StatusEdit: boolean = false,
   data: RowList = {} as RowList
 ) {
@@ -217,7 +245,16 @@ function onClickOpenDialog(
   formData.detail = StatusEdit ? data.detail : "";
   formData.refCommandNo = StatusEdit ? data.refCommandNo : "";
   formData.refCommandDate = StatusEdit ? data.refCommandDate : null;
+  isUpload.value = data.isUpload;
   modalDialog.value = true;
+  if (isUpload.value) {
+    const data = await getPathUploadFlie(
+      fileGroup.value,
+      profileId.value,
+      id.value
+    );
+    fileData.value = data;
+  }
 }
 
 /** function ปิด Didalig  บันทึกวันที่ไม่ได้รับเงินเดือนฯ*/
@@ -226,6 +263,11 @@ function onClickCloseDialog() {
   isStatusEdit.value = false;
 }
 
+async function onDownloadFile(id: string) {
+  const data = await getPathUploadFlie(fileGroup.value, profileId.value, id);
+  window.open(data.downloadUrl, "_blank");
+}
+
 /** function fetch รายการบันทึกวันที่ไม่ได้รับเงินเดือนฯ*/
 async function getData() {
   showLoader();
@@ -277,6 +319,7 @@ onMounted(() => {
   getData();
 });
 </script>
+
 <template>
   <div class="row items-center q-gutter-x-sm q-pb-sm">
     <q-btn
@@ -368,6 +411,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="modelView === 'table'">
@@ -398,6 +442,19 @@ onMounted(() => {
         <q-td v-for="col in props.cols" :key="col.id">
           <div>{{ col.value ? col.value : "-" }}</div>
         </q-td>
+        <q-td auto-width>
+          <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-td>
       </q-tr>
     </template>
     <template v-slot:item="props" v-else>
@@ -406,6 +463,17 @@ onMounted(() => {
       >
         <q-card bordered>
           <q-card-actions class="bg-grey-3" align="right">
+            <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
@@ -585,6 +653,108 @@ 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(id)"
+                      />
+
+                      <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 />

src/modules/04_registryPerson/interface/index/discipline.ts

@@ -7,6 +7,7 @@ interface RequestItemsObject {
   refCommandNo: string;
   refCommandDate: Date | null;
   date: Date | null;
+  isUpload?: boolean;
 }
 
 interface FormFilter {

src/modules/04_registryPerson/interface/index/salary.ts

@@ -5,6 +5,7 @@ interface RowList {
   detail: string;
   refCommandNo: string;
   refCommandDate: Date | null;
+  isUpload: boolean;
 }
 
 interface ObjectSalaryRef {

src/modules/04_registryPerson/interface/response/ProfesLicense.ts

@@ -7,6 +7,7 @@ interface ResponseObject {
   issueDate: Date | null;
   isActive: boolean;
   expireDate: Date | null;
+  isUpload?: boolean;
 }
 
 export type { ResponseObject };

src/modules/04_registryPerson/store.ts

@@ -1,5 +1,11 @@
 import { defineStore } from "pinia";
 import { ref, reactive, computed } from "vue";
+import { useQuasar } from "quasar";
+import axios from "axios";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import { useRoute } from "vue-router";
 
 import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
@@ -9,6 +15,9 @@ import type {
 } from "@/modules/04_registryPerson/interface/response/Main";
 import type { FormFilter } from "@/modules/04_registryPerson/interface/request/Main";
 
+const $q = useQuasar();
+const { messageError } = useCounterMixin();
+
 export const useRegistryNewDataStore = defineStore("registryNew", () => {
   const route = useRoute();
   const routerName = ref<any>();
@@ -151,6 +160,82 @@ export const useRegistryNewDataStore = defineStore("registryNew", () => {
     { id: "ASC", name: "เรียงตามวันที่บรรจุแต่งตั้ง (เก่า-ล่าสุด)" },
   ]);
 
+  /**
+   * ฟังก์ชันสร้าง Path อัพโหลดไฟล์
+   * @param group กลุ่มไฟล์
+   * @param profileId  id
+   * @param id subId
+   * @returns Path อัพโหลดไฟล์
+   */
+  async function createPathUploadFlie(
+    group: string,
+    profileId: string,
+    id: string
+  ) {
+    try {
+      const res = await http.post(
+        config.API.subFile("ทะเบียนประวัติ", group, profileId, id),
+        {
+          replace: true,
+          fileList: [
+            {
+              fileName: "เอกสารหลักฐาน",
+            },
+          ],
+        }
+      );
+
+      return res.data["เอกสารหลักฐาน"].uploadUrl;
+    } catch (err) {
+      messageError($q, err);
+    }
+  }
+
+  /**
+   * ฟังก์ชันเรียก Path อัพโหลดไฟล์
+   * @param group  กลุ่มไฟล์
+   * @param profileId   id
+   * @param id subId
+   * @returns ข้อมูลไฟล์
+   */
+  async function getPathUploadFlie(
+    group: string,
+    profileId: string,
+    id: string
+  ) {
+    try {
+      const res = await http.get(
+        config.API.subFileByFileName(
+          "ทะเบียนประวัติ",
+          group,
+          profileId,
+          id,
+          "เอกสารหลักฐาน"
+        )
+      );
+      return res.data;
+    } catch (err) {
+      messageError($q, err);
+    }
+  }
+
+  /**
+   * ฟังก์ชันอัพโหลดไฟล์
+   * @param uploadUrl Path อัพโหลดไฟล์
+   * @param file  ไฟล์
+   */
+  async function uploadFile(uploadUrl: string, file: any) {
+    try {
+      await axios.put(uploadUrl, file, {
+        headers: {
+          "Content-Type": file.type,
+        },
+      });
+    } catch (err) {
+      messageError($q, err);
+    }
+  }
+
   return {
     fetchType,
     fetchLevel,
@@ -172,5 +257,8 @@ export const useRegistryNewDataStore = defineStore("registryNew", () => {
     citizenId,
     displayOrderOps,
     routerName,
+    createPathUploadFlie,
+    getPathUploadFlie,
+    uploadFile,
   };
 });