UI ทะเบียนประวัติ Part 1

src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref, reactive } from "vue";
 import { useQuasar } from "quasar";
+import axios from "axios";
 
 import { checkPermission } from "@/utils/permissions";
 import { useRoute } from "vue-router";
@@ -36,6 +37,8 @@ const {
   onSearchDataTable,
 } = mixin;
 
+const fileUpload = ref<File>();
+const uploadUrl = ref<string>("");
 /** props*/
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
@@ -74,6 +77,7 @@ const OpsFilter = ref<InsigniaOps>({
 });
 
 const insigniaOptions = ref<any[]>([]);
+const insigniaOptionsMain = ref<any[]>([]);
 //ต้วลือกรายการครื่องราช
 const Ops = ref<InsigniaOps>({
   insigniaOptions: [],
@@ -516,7 +520,12 @@ async function addEditData(editStatus: boolean = false) {
       !editStatus && empType.value === "" ? profileId.value : undefined,
   };
   try {
-    await http[method](url, reqBody);
+    await http[method](url, reqBody).then(async (res) => {
+      if (fileUpload.value && res.data.result) {
+        await uploadProfile(res.data.result);
+      }
+    });
+
     await fetchData();
     await success($q, "บันทึกข้อมูลสำเร็จ");
     modal.value = false;
@@ -527,6 +536,80 @@ async function addEditData(editStatus: boolean = false) {
   }
 }
 
+/**
+ * ฟังก์ชันส้ราง Path อัปโหลดไฟล์
+ * @param id
+ */
+async function uploadProfile(id: string) {
+  await http
+    .post(
+      config.API.subFile("ทะเบียนประวัติ", "เครื่องราชฯ", profileId.value, id),
+      {
+        replace: true,
+        fileList: [
+          {
+            fileName: "เอกสารหลักฐาน",
+          },
+        ],
+      }
+    )
+    .then(async (res) => {
+      uploadUrl.value = res.data["เอกสารหลักฐาน"].uploadUrl;
+      await uploadFileURL(uploadUrl.value, fileUpload.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * ฟังก์ชันอัปโหลดำไฟล์
+ * @param uploadUrl Path อัปโหลดไฟล์
+ * @param file ไฟล์เอกสาร
+ */
+async function uploadFileURL(uploadUrl: string, file: any) {
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then(() => {
+      fileUpload.value = undefined;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * ฟังก์ชันโหลไฟลเอกสารหลักฐาน
+ * @param id รายการที่ต้องการโหลด
+ */
+ async function onDownloadFile(id: string) {
+  showLoader();
+  await http
+    .get(
+      config.API.subFileByFileName(
+        "ทะเบียนประวัติ",
+        "เครื่องราชฯ",
+        profileId.value,
+        id,
+        "เอกสารหลักฐาน"
+      )
+    )
+    .then(async (res) => {
+      const data = res.data.downloadUrl;
+      window.open(data, "_blank");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /** เปิด form ข้อมูลเครื่องราชอิสริยาภรณ์*/
 function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
   modal.value = true;
@@ -534,7 +617,7 @@ function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
 
   if (editStatus && row) {
     id.value = row.id;
-    insigniaType.value = row.insignia.insigniaType.name;
+    insigniaType.value = row.insignia.insigniaType.id;
     insigniaForm.year = row.year;
     insigniaForm.no = row.no;
     insigniaForm.volume = row.volume;
@@ -548,6 +631,14 @@ function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
     insigniaForm.refCommandDate = row.refCommandDate;
     insigniaForm.refCommandNo = row.refCommandNo;
     insigniaForm.note = row.note;
+
+    const insigniaTypeFilter = insigniaOptionsMain.value.filter(
+      (r: any) => r.typeId === insigniaType.value
+    );
+    if (insigniaTypeFilter.length > 0) {
+      OpsFilter.value.insigniaOptions = insigniaTypeFilter;
+      insigniaOptions.value = OpsFilter.value.insigniaOptions;
+    }
   } else {
     clearData();
   }
@@ -610,12 +701,15 @@ function filterSelector(val: string, update: Function, refData: string) {
 }
 
 /** ค้นหาลำดับชั้น*/
-function insigniaTypeSelection() {
+function insigniaTypeSelection(check: boolean) {
-  const insigniaTypeFilter = Ops.value.insigniaOptions.filter(
+  if (check) {
-    (r: DataOptionInsignia) => r.id === insigniaForm.insigniaId
+    insigniaForm.insigniaId = "";
+  }
+  const insigniaTypeFilter = insigniaOptionsMain.value.filter(
+    (r: any) => r.typeId === insigniaType.value
   );
   if (insigniaTypeFilter.length > 0) {
-    insigniaType.value = insigniaTypeFilter[0].typeName;
+    OpsFilter.value.insigniaOptions = insigniaTypeFilter;
   }
 }
 
@@ -635,6 +729,7 @@ function clearData() {
   insigniaForm.refCommandNo = "";
   insigniaForm.refCommandDate = null;
   insigniaForm.note = "";
+  fileUpload.value = undefined;
 }
 
 function serchDataTable() {
@@ -658,7 +753,8 @@ onMounted(async () => {
   await fetchData();
   store.insigniaOption.length === 0 ? await fetchInsignia() : "";
   Ops.value.insigniaOptions = store.insigniaOption;
-  OpsFilter.value.insigniaOptions = store.insigniaOption;
+
+  insigniaOptionsMain.value = store.insigniaOption;
   insigniaOptions.value = store.insigniaOption;
 });
 </script>
@@ -755,6 +851,7 @@ onMounted(async () => {
         <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-th>
       </q-tr>
     </template>
 
@@ -789,6 +886,19 @@ onMounted(async () => {
             {{ col.value ? col.value : "-" }}
           </div>
         </q-td>
+        <q-td auto-width>
+          <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-td>
       </q-tr>
     </template>
 
@@ -951,15 +1061,15 @@ onMounted(async () => {
                 option-value="id"
                 input-debounce="0"
                 option-label="name"
-                v-model="insigniaForm.insigniaId"
+                v-model="insigniaType"
                 class="inputgreen"
-                :label="`${'ชื่อเครื่องราชฯ'}`"
+                :label="`${'ลำดับชั้น'}`"
-                :options="insigniaOptions"
+                :options="store.insigniaTypeOp"
-                :rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อเครื่องราชฯ'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกลำดับชั้น'}`]"
                 @filter="(inputValue:string,
                     doneFn:Function) => filterSelector(inputValue, doneFn,'insigniaOptions'
                     ) "
-                @update:modelValue="insigniaTypeSelection"
+                @update:modelValue="insigniaTypeSelection(true)"
               >
                 <template v-slot:no-option>
                   <q-item>
@@ -971,16 +1081,39 @@ onMounted(async () => {
               </q-select>
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
+              <q-select
                 dense
-                readonly
                 outlined
+                :readonly="insigniaType == ''"
+                use-input
+                hide-selected
+                fill-input
+                emit-value
                 lazy-rules
+                map-options
                 hide-bottom-space
-                v-model="insigniaType"
+                option-value="id"
-                :label="`${'ลำดับชั้น'}`"
+                input-debounce="0"
-              />
+                option-label="name"
+                v-model="insigniaForm.insigniaId"
+                class="inputgreen"
+                :label="`${'ชื่อเครื่องราชฯ'}`"
+                :options="insigniaOptions"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อเครื่องราชฯ'}`]"
+                @filter="(inputValue:string,
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'insigniaOptions'
+                    ) "
+              >
+                <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-6 col-sm-6 col-md-6">
               <q-input
                 dense
@@ -1152,6 +1285,83 @@ onMounted(async () => {
                 label="หมายเหตุ"
               />
             </div>
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <div class="row">
+                <q-uploader
+                  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>
+              </div>
+            </div>
           </div>
         </q-card-section>
         <q-separator />

src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive } from "vue";
 import { useQuasar } from "quasar";
+import axios from "axios";
 
 import { checkPermission } from "@/utils/permissions";
 import { useRoute } from "vue-router";
@@ -10,6 +11,7 @@ import config from "@/app.config";
 
 import type { QTableProps } from "quasar";
 import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/DeclarationHonor";
+import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
 import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/DeclarationHonor";
 
 import DialogHeader from "@/components/DialogHeader.vue";
@@ -38,9 +40,24 @@ const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
 
+const fileUpload = ref<File>();
+const uploadUrl = ref<string>("");
+
+const typeOp = ref<DataOption[]>([
+  {
+    id: "CER_RETIRE",
+    name: "ประกาศเกียรติคุณประเภทที่ 4 ชั้นที่ 1 (เกษียณอายุราชการ)",
+  },
+  {
+    id: "CER_20YEAR",
+    name: "ประกาศเกียรติคุณประเภทที่ 4 ชั้นที่ 2 (ปฏิบัติหน้าที่ราชการครบ 20 ปีบริบูรณ์)",
+  },
+  { id: "OUTSTAND", name: "ข้าราชการกรุงเทพมหานครสามัญดีเด่น" },
+]);
 const id = ref<string>(""); //id ที่ต้องการแก้ไข
 const issueDateYear = ref<number>(0); //ปีที่ได้รับ
 const declHonorForm = reactive<RequestItemsObject>({
+  type: "", //ประเภท
   isDate: "false", //ปี
   issuer: "", //ผู้มีอำนาจลงนาม
   detail: "", //รายละเอียด
@@ -277,7 +294,11 @@ async function addEditData(editStatus: boolean = false) {
   };
 
   try {
-    await http[method](url, reqBody);
+    await http[method](url, reqBody).then(async (res) => {
+      if (fileUpload.value && res.data.result) {
+        await uploadProfile(res.data.result);
+      }
+    });
     await fetchData();
     await success($q, "บันทึกข้อมูลสำเร็จ");
     modal.value = false;
@@ -288,6 +309,85 @@ async function addEditData(editStatus: boolean = false) {
   }
 }
 
+/**
+ * ฟังก์ชันส้ราง Path อัปโหลดไฟล์
+ * @param id
+ */
+async function uploadProfile(id: string) {
+  await http
+    .post(
+      config.API.subFile(
+        "ทะเบียนประวัติ",
+        "ประกาศเกียรติคุณ",
+        profileId.value,
+        id
+      ),
+      {
+        replace: true,
+        fileList: [
+          {
+            fileName: "เอกสารหลักฐาน",
+          },
+        ],
+      }
+    )
+    .then(async (res) => {
+      uploadUrl.value = res.data["เอกสารหลักฐาน"].uploadUrl;
+      await uploadFileURL(uploadUrl.value, fileUpload.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * ฟังก์ชันอัปโหลดำไฟล์
+ * @param uploadUrl Path อัปโหลดไฟล์
+ * @param file ไฟล์เอกสาร
+ */
+async function uploadFileURL(uploadUrl: string, file: any) {
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then(() => {
+      fileUpload.value = undefined;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * ฟังก์ชันโหลไฟลเอกสารหลักฐาน
+ * @param id รายการที่ต้องการโหลด
+ */
+async function onDownloadFile(id: string) {
+  showLoader();
+  await http
+    .get(
+      config.API.subFileByFileName(
+        "ทะเบียนประวัติ",
+        "ประกาศเกียรติคุณ",
+        profileId.value,
+        id,
+        "เอกสารหลักฐาน"
+      )
+    )
+    .then(async (res) => {
+      const data = res.data.downloadUrl;
+      window.open(data, "_blank");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /** เปิด form ข้อมูลประกาศเกียรติคุณ*/
 function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
   modal.value = true;
@@ -302,6 +402,7 @@ function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
     declHonorForm.issueDate = row.issueDate;
     declHonorForm.refCommandNo = row.refCommandNo;
     declHonorForm.refCommandDate = row.refCommandDate;
+    declHonorForm.type = row.type;
     declHonorForm.isDate = row.isDate ? "true" : "false";
   } else {
     clearData();
@@ -352,6 +453,7 @@ function clearData() {
   declHonorForm.detail = "";
   declHonorForm.issueDate = new Date();
   declHonorForm.refCommandNo = "";
+  declHonorForm.type = "";
   declHonorForm.refCommandDate = null;
   declHonorForm.isDate = "false";
 }
@@ -469,6 +571,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>
 
@@ -502,6 +605,19 @@ onMounted(() => {
             {{ col.value ? col.value : "-" }}
           </div>
         </q-td>
+        <q-td auto-width>
+          <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-td>
       </q-tr>
     </template>
 
@@ -687,6 +803,21 @@ onMounted(() => {
                 :label="`${'ผู้มีอำนาจลงนาม'}`"
               />
             </div>
+            <div class="col-12">
+              <q-select
+                outlined
+                dense
+                label="ประเภท"
+                v-model="declHonorForm.type"
+                :options="typeOp"
+                option-label="name"
+                option-value="id"
+                class="inputgreen"
+                emit-value
+                map-options
+              >
+              </q-select>
+            </div>
             <div class="col-12">
               <q-input
                 dense
@@ -756,6 +887,83 @@ onMounted(() => {
                 </template>
               </datepicker>
             </div>
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <div class="row">
+                <q-uploader
+                  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>
+              </div>
+            </div>
           </div>
         </q-card-section>
         <q-separator color="grey-4" />

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
+import axios from "axios";
 
 import { useRoute } from "vue-router";
 import { checkPermission } from "@/utils/permissions";
@@ -32,7 +33,8 @@ const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
-
+const fileUpload = ref<File>();
+const uploadUrl = ref<string>("");
 /** props*/
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
@@ -177,6 +179,7 @@ function closeDialog() {
   dutyData.reference = "";
   dutyData.refCommandNo = "";
   dutyData.refCommandDate = null;
+  fileUpload.value = undefined;
 }
 
 /** fetch ข้อมูลรายการพิเศษ*/
@@ -211,7 +214,10 @@ function addData() {
   };
   http
     .post(config.API.profileNewDuty(empType.value), body)
-    .then(async () => {
+    .then(async (res) => {
+      if (fileUpload.value && res.data.result) {
+        await uploadProfile(res.data.result);
+      }
       await fetchData(profileId.value);
       await success($q, "บันทึกข้อมูลสำเร็จ");
       closeDialog();
@@ -232,7 +238,10 @@ function editData(idData: string) {
       ...dutyData,
       profileId: undefined,
     })
-    .then(async () => {
+    .then(async (res) => {
+      if (fileUpload.value && res.data.result) {
+        await uploadProfile(res.data.result);
+      }
       await fetchData(profileId.value);
       await success($q, "บันทึกข้อมูลสำเร็จ");
       closeDialog();
@@ -245,6 +254,85 @@ function editData(idData: string) {
     });
 }
 
+/**
+ * ฟังก์ชันส้ราง Path อัปโหลดไฟล์
+ * @param id
+ */
+async function uploadProfile(id: string) {
+  await http
+    .post(
+      config.API.subFile(
+        "ทะเบียนประวัติ",
+        "ประกาศเกียรติคุณ",
+        profileId.value,
+        id
+      ),
+      {
+        replace: true,
+        fileList: [
+          {
+            fileName: "เอกสารหลักฐาน",
+          },
+        ],
+      }
+    )
+    .then(async (res) => {
+      uploadUrl.value = res.data["เอกสารหลักฐาน"].uploadUrl;
+      await uploadFileURL(uploadUrl.value, fileUpload.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * ฟังก์ชันอัปโหลดำไฟล์
+ * @param uploadUrl Path อัปโหลดไฟล์
+ * @param file ไฟล์เอกสาร
+ */
+async function uploadFileURL(uploadUrl: string, file: any) {
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then(() => {
+      fileUpload.value = undefined;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * ฟังก์ชันโหลไฟลเอกสารหลักฐาน
+ * @param id รายการที่ต้องการโหลด
+ */
+async function onDownloadFile(id: string) {
+  showLoader();
+  await http
+    .get(
+      config.API.subFileByFileName(
+        "ทะเบียนประวัติ",
+        "ประกาศเกียรติคุณ",
+        profileId.value,
+        id,
+        "เอกสารหลักฐาน"
+      )
+    )
+    .then(async (res) => {
+      const data = res.data.downloadUrl;
+      window.open(data, "_blank");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /** ยืนยันการบันทึกข้อมูล*/
 function onSubmit() {
   dialogConfirm(
@@ -364,6 +452,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'">
@@ -397,6 +486,19 @@ onMounted(() => {
             {{ col.value ? col.value : "-" }}
           </div>
         </q-td>
+        <q-td auto-width>
+          <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-td>
       </q-tr>
     </template>
     <template v-slot:item="props" v-else>
@@ -651,6 +753,83 @@ onMounted(() => {
                 </template>
               </datepicker>
             </div>
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <div class="row">
+                <q-uploader
+                  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>
+              </div>
+            </div>
           </div>
         </q-card-section>
         <q-separator />

src/modules/04_registryPerson/components/detail/Other/03_Document7.vue

@@ -0,0 +1,275 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import axios from "axios";
+
+import { checkPermission } from "@/utils/permissions";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { ArrayFileList } from "@/modules/04_registryPerson/interface/index/document";
+
+const $q = useQuasar();
+const route = useRoute();
+const mixin = useCounterMixin();
+const {
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  dialogRemove,
+} = mixin;
+
+/**
+ * props
+ */
+const isLeave = defineModel<boolean>("isLeave", {
+  required: true,
+});
+
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const documentFile = ref<any>(null);
+const fileList = ref<ArrayFileList[]>([]); //รายการเอกสารหลักฐาน
+
+/**
+ * ฟังก์ชันดึงข้อมูลรายการเอกสารหลักฐาน
+ */
+async function getData() {
+  showLoader();
+  await http
+    .get(
+      config.API.file("ระบบทะเบียนประวัติ", "เอกสาร ก.พ.7", profileId.value)
+    )
+    .then((res) => {
+        console.log("ระบบทะเบียนประวัติ", "เอกสาร ก.พ.7", profileId.value)
+      fileList.value = res.data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังก์ชั่นสร้าง Path สำหรับอัพโหลดไฟล์เอกสารหลักฐาน
+ */
+function clickUpload(file: any) {
+  const fileName = { fileName: file.name };
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      const selectedFile = file;
+      const formdata = new FormData();
+      formdata.append("file", selectedFile);
+      await http
+        .post(
+          config.API.file(
+            "ระบบทะเบียนประวัติ",
+            "เอกสาร ก.พ.7",
+            profileId.value
+          ),
+          {
+            replace: false,
+            fileList: fileName,
+          }
+        )
+        .then(async (res) => {
+          const foundKey: string | undefined = Object.keys(res.data).find(
+            (key) =>
+              res.data[key]?.fileName !== undefined &&
+              res.data[key]?.fileName !== ""
+          );
+          foundKey &&
+            uploadFileDoc(res.data[foundKey]?.uploadUrl, documentFile.value);
+        })
+        .catch((err) => {
+          messageError($q, err);
+        });
+    },
+    "ยืนยันการอัปโหลดไฟล์",
+    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
+  );
+}
+
+/**
+ * ฟังก์ชั่นสำหรับอัพโหลดไฟล์เอกสารหลักฐาน
+ */
+async function uploadFileDoc(uploadUrl: string, file: any) {
+  const Data = new FormData();
+  Data.append("file", documentFile.value);
+  showLoader();
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then(async () => {
+      await getData();
+      success($q, "อัปโหลดไฟล์สำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      documentFile.value = null;
+    });
+}
+
+/**
+ * ดาวน์โหลดลิงก์ไฟล์
+ * @param fileName file name
+ */
+function downloadFile(fileName: string) {
+  showLoader();
+  http
+    .get(
+      config.API.fileByFile(
+        "ระบบทะเบียนประวัติ",
+        "เอกสาร ก.พ.7",
+        profileId.value,
+        fileName
+      )
+    )
+    .then((res) => {
+      const data = res.data.downloadUrl;
+      window.open(data, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+/**
+ * ลบไฟล์
+ * @param fileName file name
+ */
+function deleteFile(fileName: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    http
+      .delete(
+        config.API.fileByFile(
+          "ระบบทะเบียนประวัติ",
+          "เอกสาร ก.พ.7",
+          profileId.value,
+          fileName
+        )
+      )
+      .then(async () => {
+        await setTimeout(async () => {
+          await getData();
+          await success($q, `ลบไฟล์สำเร็จ`);
+        }, 1500);
+      })
+      .catch((e) => {
+        messageError($q, e);
+        hideLoader();
+      });
+  });
+}
+
+onMounted(() => {
+  getData();
+});
+</script>
+<template>
+  <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
+    <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+      อัปโหลดไฟล์เอกสาร ก.พ.7
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
+      <div class="col-12 row">
+        <q-file
+          v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
+          for="inputFiles"
+          class="col-12"
+          outlined
+          dense
+          v-model="documentFile"
+          label="ไฟล์เอกสาร ก.พ.7"
+          hide-bottom-space
+          accept=".pdf,.xlsx,.docx,.png,.jpg"
+          clearable
+        >
+          <template v-slot:prepend>
+            <q-icon name="attach_file" color="primary" />
+          </template>
+          <template v-slot:after>
+            <q-btn
+              size="14px"
+              v-if="documentFile"
+              flat
+              round
+              dense
+              color="primary"
+              icon="mdi-upload"
+              @click="clickUpload(documentFile)"
+              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+            >
+          </template>
+        </q-file>
+
+        <!-- <div class="col-1 self-center" v-if="formData.documentFile"></div> -->
+      </div>
+
+      <div v-if="fileList.length > 0" class="col-xs-12 row">
+        <q-list class="full-width rounded-borders" bordered separator>
+          <q-item
+            clickable
+            v-ripple
+            v-for="data in fileList"
+            :key="data.id"
+            class="items-center"
+          >
+            <q-item-section>{{ data.fileName }}</q-item-section>
+            <q-space />
+            <div>
+              <q-btn
+                size="12px"
+                flat
+                round
+                dense
+                color="blue"
+                icon="mdi-download"
+                @click="downloadFile(data.fileName)"
+                ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+              >
+              <q-btn
+                v-if="isLeave == false"
+                size="12px"
+                flat
+                round
+                dense
+                color="red"
+                class="q-ml-sm"
+                icon="mdi-delete-outline"
+                @click="deleteFile(data.fileName)"
+                ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
+              >
+            </div>
+          </q-item>
+        </q-list>
+      </div>
+
+      <div class="col-12" v-else>
+        <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+      </div>
+    </div>
+  </q-card>
+</template>
+
+<style scoped></style>

src/modules/04_registryPerson/components/detail/Other/Main.vue

@@ -6,6 +6,7 @@ import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
 /** importComponents*/
 import OtherInformation from "@/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue";
 import Documentipline from "@/modules/04_registryPerson/components/detail/Other/02_Document.vue";
+import Document7 from "@/modules/04_registryPerson/components/detail/Other/03_Document7.vue";
 
 const storeRegistry = useRegistryNewDataStore();
 
@@ -32,6 +33,7 @@ const tab = ref<string>("1");
   >
     <q-tab name="1" label="ข้อมูลอื่นๆ" />
     <q-tab name="2" label="เอกสารหลักฐาน" />
+    <q-tab name="3" label="เอกสาร ก.พ.7" />
   </q-tabs>
   <q-separator />
 
@@ -42,6 +44,9 @@ const tab = ref<string>("1");
     <q-tab-panel name="2">
       <Documentipline :is-leave="storeRegistry.isLeave" />
     </q-tab-panel>
+    <q-tab-panel name="3">
+      <Document7 :is-leave="storeRegistry.isLeave" />
+    </q-tab-panel>
   </q-tab-panels>
 </template>
 

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
+import axios from "axios";
 
 import { useRoute } from "vue-router";
 import http from "@/plugins/http";
@@ -30,7 +31,12 @@ const {
 } = mixin;
 
 const id = ref<string>(route.params.id.toString()); //id profile
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
+const fileUpload = ref<File>();
+const uploadUrl = ref<string>("");
 
 const mode = ref<string>("table"); //การแสดงของ Table card
 /**
@@ -221,6 +227,7 @@ function clearForm() {
   specialSkill.field = "";
   specialSkill.reference = "";
   specialSkill.remark = "";
+  fileUpload.value = undefined;
 }
 
 /**
@@ -285,7 +292,10 @@ async function addData() {
       profileId: empType.value === "" ? id.value : undefined,
       profileEmployeeId: empType.value !== "" ? id.value : undefined,
     })
-    .then(async () => {
+    .then(async (res) => {
+      if (fileUpload.value && res.data.result) {
+        await uploadProfile(res.data.result);
+      }
       await fetchData(id.value);
       await success($q, "บันทึกข้อมูลสำเร็จ");
       closeDialog();
@@ -311,7 +321,10 @@ async function editData(idData: string) {
       dateEnd: null,
       profileId: undefined,
     })
-    .then(async () => {
+    .then(async (res) => {
+      if (fileUpload.value && res.data.result) {
+        await uploadProfile(res.data.result);
+      }
       await fetchData(id.value);
       await success($q, "บันทึกข้อมูลสำเร็จ");
       closeDialog();
@@ -324,6 +337,85 @@ async function editData(idData: string) {
     });
 }
 
+/**
+ * ฟังก์ชันส้ราง Path อัปโหลดไฟล์
+ * @param id
+ */
+async function uploadProfile(id: string) {
+  await http
+    .post(
+      config.API.subFile(
+        "ทะเบียนประวัติ",
+        "ประกาศเกียรติคุณ",
+        profileId.value,
+        id
+      ),
+      {
+        replace: true,
+        fileList: [
+          {
+            fileName: "เอกสารหลักฐาน",
+          },
+        ],
+      }
+    )
+    .then(async (res) => {
+      uploadUrl.value = res.data["เอกสารหลักฐาน"].uploadUrl;
+      await uploadFileURL(uploadUrl.value, fileUpload.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * ฟังก์ชันอัปโหลดำไฟล์
+ * @param uploadUrl Path อัปโหลดไฟล์
+ * @param file ไฟล์เอกสาร
+ */
+async function uploadFileURL(uploadUrl: string, file: any) {
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then(() => {
+      fileUpload.value = undefined;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * ฟังก์ชันโหลไฟลเอกสารหลักฐาน
+ * @param id รายการที่ต้องการโหลด
+ */
+async function onDownloadFile(id: string) {
+  showLoader();
+  await http
+    .get(
+      config.API.subFileByFileName(
+        "ทะเบียนประวัติ",
+        "ประกาศเกียรติคุณ",
+        profileId.value,
+        id,
+        "เอกสารหลักฐาน"
+      )
+    )
+    .then(async (res) => {
+      const data = res.data.downloadUrl;
+      window.open(data, "_blank");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /** function ปิด popup  ข้อมูลความสามารถพิเศษ*/
 function closeDialog() {
   dialog.value = false;
@@ -452,6 +544,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'">
@@ -489,6 +582,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 == true"
+            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>
@@ -604,6 +710,83 @@ onMounted(() => {
                 label="เอกสารอ้างอิง"
               />
             </div>
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <div class="row">
+                <q-uploader
+                  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>
+              </div>
+            </div>
           </div>
         </q-card-section>
 

src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue

@@ -109,7 +109,15 @@ const baseColumns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "positionType",
     align: "left",
@@ -166,6 +174,7 @@ const visibleColumns = ref<string[]>([
   "positionSalaryAmount",
   "mouthSalaryAmount",
   "posNo",
+  "position",
   "positionType",
   "positionLevel",
   "templateDoc",
@@ -718,7 +727,9 @@ onMounted(() => {
           <q-btn
             v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
             flat
-            :disable="props.row.commandId !== null &&  props.row.commandId !== ''"
+            :disable="
+              props.row.commandId !== null && props.row.commandId !== ''
+            "
             :color="props.row.commandId ? 'grey' : 'edit'"
             dense
             round

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

@@ -19,6 +19,7 @@ interface DataOptionSys {
 interface DataOptionInsignia {
   id: string;
   name: string;
+  typeId: string;
   typeName: string;
 }
 

src/modules/04_registryPerson/interface/request/DeclarationHonor.ts

@@ -6,6 +6,7 @@ interface RequestItemsObject {
   issuer: string;
   refCommandDate: Date | null;
   refCommandNo: string;
+  type: string;
   isDate: boolean | string;
 }
 

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

@@ -12,6 +12,7 @@ interface ResponseObject {
   lastUpdateUserId: string;
   lastUpdatedAt: Date;
   profileId: string;
+  type: string;
   refCommandDate: Date;
   refCommandNo: string;
 }

src/modules/04_registryPerson/stores/insignia.ts

@@ -1,21 +1,30 @@
 import { ref, computed } from "vue";
 import { defineStore } from "pinia";
-import type { DataOptionInsignia } from "@/modules/04_registryPerson/interface/index/Main";
+import type { DataOptionInsignia,DataOption } from "@/modules/04_registryPerson/interface/index/Main";
 import type { ResponseObject as Insignia } from "@/modules/07_insignia/interface/response/Main";
 
 export const useInsigniaDataStore = defineStore("insigniaDataStore", () => {
   const insigniaOption = ref<DataOptionInsignia[]>([]);
+  const insigniaTypeOp = ref<DataOption[]>([]);
+  const insigniaTypeOpMain = ref<DataOption[]>([]);
 
   function mapInsigniaOption(resData: any) {
+    insigniaTypeOp.value = Array.from(
+      new Map(
+        resData.map((item:any) => [item.insigniaTypeName, { id: item.insigniaTypeId, name: item.insigniaTypeName }])
+      ).values()
+    ) as DataOption[];
+
     insigniaOption.value = [];
     resData.map((r: Insignia) => {
       insigniaOption.value.push({
         id: r.id.toString(),
         name: r.name.toString() + ` (${r.shortName})`,
+        typeId: r.insigniaTypeId.toString(),
         typeName: r.insigniaTypeName.toString(),
       });
     });
   }
 
-  return { insigniaOption, mapInsigniaOption };
+  return { insigniaOption, mapInsigniaOption,insigniaTypeOp };
 });

src/modules/07_insignia/interface/response/Main.ts

@@ -8,6 +8,7 @@ interface ResponseObject {
   lastUpdateFullName: string;
   isActive: boolean;
   note: string;
+  insigniaTypeId: string;
 }
 
 interface ResponsePeriod {