เอกสาร ก.พ.7

src/modules/10_registry/05_Other/03_FileOther.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
+
+import type { FileFormType } from "@/modules/10_registry/interface/index/Main";
+
+const fileList = ref<FileFormType[]>([]);
+const store = useRegistryInFormationStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const modalHistory = ref<boolean>(false);
+/** ตัวแปรข้อมูล */
+
+function onHistory() {
+  modalHistory.value = true;
+}
+
+/** get data */
+function getData() {
+  showLoader();
+  http
+    .get(
+      config.API.fileByFileUser(
+        "ระบบทะเบียนประวัติ",
+        "เอกสารหลักฐานเพิ่มเติม",
+        store.citizenId
+      )
+    )
+    .then((res) => {
+      const data = res.data;
+      fileList.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      setTimeout(() => {
+        hideLoader();
+      }, 1500);
+    });
+}
+
+/**
+ * ดาวน์โหลดลิงค์ไฟล์
+ * @param fileName file name
+ */
+function downloadFile(fileName: string) {
+  showLoader();
+  http
+    .get(
+      config.API.fileByFile(
+        "ระบบทะเบียนประวัติ",
+        "เอกสารหลักฐานเพิ่มเติม",
+        store.citizenId,
+        fileName
+      )
+    )
+    .then((res) => {
+      const data = res.data.downloadUrl;
+      window.open(data, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  getData();
+});
+</script>
+
+<template>
+  <div class="col-12">
+    <q-toolbar class="q-px-none q-mt-md">
+      <span class="text-blue-6 text-weight-bold text-body1">เอกสาร ก.พ.7 </span>
+    </q-toolbar>
+    <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 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
+                >
+              </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>
+  </div>
+</template>
+
+<style scoped>
+.absolute_button {
+  position: absolute;
+  right: 5px;
+  top: -20px;
+}
+
+.fix_top {
+  justify-content: start !important;
+}
+</style>

src/modules/10_registry/store/registry.ts

@@ -10,6 +10,7 @@ export const useRegistryInFormationStore = defineStore(
   () => {
     const typeProfile = ref<string>("OFFICER");
     const profileId = ref<string>("");
+    const citizenId = ref<string>("");
 
     function typeChangeName(val: string) {
       switch (val) {
@@ -29,6 +30,6 @@ export const useRegistryInFormationStore = defineStore(
           return "-";
       }
     }
-    return { typeChangeName, typeProfile, profileId };
+    return { typeChangeName, typeProfile, profileId, citizenId };
   }
 );

src/modules/10_registry/tabs/05_other.vue

@@ -4,6 +4,7 @@ import { useRouter } from "vue-router";
 /** component */
 import Other from "@/modules/10_registry/05_Other/01_Other.vue";
 import File from "@/modules/10_registry/05_Other/02_File.vue";
+import FileOther from "@/modules/10_registry/05_Other/03_FileOther.vue";
 
 const router = useRouter();
 </script>
@@ -27,6 +28,7 @@ const router = useRouter();
   <div :class="`row q-my-sm ${$q.screen.gt.xs ? '' : 'mobileClass'}`">
     <Other />
     <File />
+    <FileOther />
   </div>
 </template>
 <style scoped>

src/stores/data.ts

@@ -9,7 +9,7 @@ import { useCounterMixin } from "./mixin";
 import type { ProfileData } from "@/interface/Main";
 
 export const useDataStore = defineStore("dataMain", () => {
-  const dataProfile = ref<any>()
+  const dataProfile = ref<any>();
   const storeRegistry = useRegistryInFormationStore();
   const $q = useQuasar();
   const mixin = useCounterMixin();
@@ -107,6 +107,7 @@ export const useDataStore = defineStore("dataMain", () => {
     formData.posLevelName = data.posLevelName;
     formData.posNo = findPosMasterNo(data);
     storeRegistry.profileId = data.profileId;
+    storeRegistry.citizenId = data.citizenId;
   }
 
   async function getProFileType() {
@@ -146,7 +147,7 @@ export const useDataStore = defineStore("dataMain", () => {
     formData,
     officerLink,
     getProFileType,
-    dataProfile
+    dataProfile,
   };
 });