แสดงรูปโปรไฟล์หน้ารายการทะเบียนประวัติ

2024-04-29 17:31:02 +07:00 · 2024-04-29 17:31:02 +07:00 · 81fd3a3ac8
commit 81fd3a3ac8
parent 4232c5d4e8
5 changed files with 117 additions and 91 deletions
--- a/src/modules/04_registryNew/components/TableView.vue
+++ b/src/modules/04_registryNew/components/TableView.vue
@ -295,16 +295,7 @@ watch(
              <q-item>
                <q-item-section avatar>
                  <q-avatar>
-                    <img
-                      v-if="props.row.avatar == null"
-                      src="@/assets/avatar_user.jpg"
-                      class="col-4 img-info"
-                    />
-                    <img
-                      v-else
-                      :src="props.row.avatar"
-                      class="col-4 img-info"
-                    />
+                    <img :src="props.row.avartar" class="col-4 img-info" />
                  </q-avatar>
                </q-item-section>
                <q-item-section>
@ -332,8 +323,8 @@ watch(
      <div class="col-xs-12 col-sm-4 col-md-3">
        <q-card flat bordered class="">
          <q-card-section class="text-center q-pb-none">
-            <q-avatar size="80px">
-              <img src="@/assets/avatar_user.jpg" />
+            <q-avatar size="80px" class="bg-grey-2">
+              <q-img :src="props.row.avatar" />
            </q-avatar>

            <div class="text-weight-medium q-mt-md">
--- a/src/modules/04_registryNew/components/detail/TabMain.vue
+++ b/src/modules/04_registryNew/components/detail/TabMain.vue
@ -43,59 +43,53 @@ const splitterModel = ref<number>(12);
 </script>

 <template>
-    <q-splitter 
-        v-model="splitterModel" 
-        disable
-        class="split"
-      >
-      <template v-slot:before>
-        <div class=""><!--  bg-tab-regi  -->
-          <q-tabs
-            v-model="store.tabMain" 
-            vertical 
-            
-            class="text-grey-6 text-weight-light" 
-            active-class="bg-white text-blue-8 text-weight-bold bg-blue-1"
-            ><!-- indicator-color="transparent" -->
-            <q-tab
-              class="q-py-sm"
-              v-for="(tab, index) in itemsTab"
-              :key="index"
-              :name="tab.name"
-              :icon="tab.icon"
-              :label="tab.label"
-              
-            /><!-- hover-tab  -->
-          </q-tabs>
-        </div>
-      </template>
-
-      <template v-slot:after>
-        <q-tab-panels
+  <q-splitter v-model="splitterModel" disable class="split">
+    <template v-slot:before>
+      <div class="">
+        <!--  bg-tab-regi  -->
+        <q-tabs
          v-model="store.tabMain"
-          animated
-          swipeable
          vertical
-          transition-prev="jump-up"
-          transition-next="jump-up"
-          class="q-pa-none"
-        ><!--  split -->
-          <q-tab-panel
+          class="text-grey-6 text-weight-light"
+          active-class="bg-white text-blue-8 text-weight-bold bg-blue-1"
+          ><!-- indicator-color="transparent" -->
+          <q-tab
+            class="q-py-sm"
            v-for="(tab, index) in itemsTab"
            :key="index"
            :name="tab.name"
-            class="q-pa-none"
-            
-          >
-            <PersonalInformationMain v-if="store.tabMain === '1'" />
-            <GovernmentInformationMain v-if="store.tabMain === '2'" />
-            <salaryMain v-if="store.tabMain === '3'" />
-            <AchievementMain v-if="store.tabMain === '4'" />
-            <OtherMaim v-if="store.tabMain === '5'" />
-          </q-tab-panel>
-        </q-tab-panels>
-      </template>
-    </q-splitter>
+            :icon="tab.icon"
+            :label="tab.label"
+          /><!-- hover-tab  -->
+        </q-tabs>
+      </div>
+    </template>
+
+    <template v-slot:after>
+      <q-tab-panels
+        v-model="store.tabMain"
+        animated
+        swipeable
+        vertical
+        transition-prev="jump-up"
+        transition-next="jump-up"
+        class="q-pa-none"
+        ><!--  split -->
+        <q-tab-panel
+          v-for="(tab, index) in itemsTab"
+          :key="index"
+          :name="tab.name"
+          class="q-pa-none"
+        >
+          <PersonalInformationMain v-if="store.tabMain === '1'" />
+          <GovernmentInformationMain v-if="store.tabMain === '2'" />
+          <salaryMain v-if="store.tabMain === '3'" />
+          <AchievementMain v-if="store.tabMain === '4'" />
+          <OtherMaim v-if="store.tabMain === '5'" />
+        </q-tab-panel>
+      </q-tab-panels>
+    </template>
+  </q-splitter>
 </template>

 <style scoped>
@ -104,10 +98,10 @@ const splitterModel = ref<number>(12);
  color: white !important;
  opacity: 1 !important;
 }
-.bg-tab-regi{
+.bg-tab-regi {
  background-color: #273238;
-} 
-.split{
+}
+.split {
  border-radius: 10px !important;
 }
 </style>
--- a/src/modules/04_registryNew/interface/response/Main.ts
+++ b/src/modules/04_registryNew/interface/response/Main.ts
@ -13,6 +13,7 @@ interface DataLevel {
 }

 interface DataPerson {
+  avatar?: string;
  citizenId: string;
  firstName: string;
  id: string;
--- a/src/modules/04_registryNew/views/detailView.vue
+++ b/src/modules/04_registryNew/views/detailView.vue
@ -285,21 +285,21 @@ async function clickSaveDeceased() {
  formData.append("Reason", reasonDeath.value);
  formData.append("ProfileId", profileId.value);

-  dialogConfirm($q,()=>{
+  dialogConfirm($q, () => {
    showLoader();
-      http
-        .post(config.API.listDeceased(), formData)
-        .then(() => {
-          success($q, "บันทึกข้อมูลสำเร็จ");
-          router.push("/deceased");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-  })
+    http
+      .post(config.API.listDeceased(), formData)
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        router.push("/deceased");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }

 onMounted(async () => {
@ -381,11 +381,11 @@ onMounted(async () => {
    </q-btn>
  </div>

-  <q-card >
+  <q-card>
    <div class="column" style="height: 120px">
      <div class="col row items-center">
        <div class="row col-12">
-          <div class="col"  style="padding-left: 14%;">
+          <div class="col" style="padding-left: 14%">
            <div class="col-12 text-primary">
              <h2
                class="title q-ma-none q-pa-none"
@ -402,8 +402,8 @@ onMounted(async () => {
      </div>

      <div class="absolute-center-left q-ml-lg">
-        <q-avatar size="90px" class="bg-grey-2" >
-          <q-img :src="profilePicture"/>
+        <q-avatar size="90px" class="bg-grey-2">
+          <q-img :src="profilePicture" />
        </q-avatar>
        <q-btn
          round
@ -418,7 +418,7 @@ onMounted(async () => {
      </div>

      <div class="col row items-center bg-toolbar">
-        <div class="row col-12"  style="padding-left: 14%;">
+        <div class="row col-12" style="padding-left: 14%">
          <div class="col-2">
            <div class="col-sm-3 col-md-3">
              <div class="col text-grey-6 text-caption">ตำแหน่งในสายงาน</div>
@ -584,13 +584,13 @@ h2.title {
  border-radius: 10px;
 }

-.bg-toolbar{
-  background-color: #F2FBFA;
+.bg-toolbar {
+  background-color: #f2fbfa;
 }
-.btnEditImg{
-  position: absolute; 
-  bottom: 0; 
-  right: 0; 
-  border: 1px solid #EDEDED ;
+.btnEditImg {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  border: 1px solid #ededed;
 }
-</style>
+</style>
--- a/src/modules/04_registryNew/views/list.vue
+++ b/src/modules/04_registryNew/views/list.vue
@ -12,6 +12,7 @@ import type { FormFilter } from "@/modules/04_registryNew/interface/request/Main

 /** importComponents*/
 import TableView from "@/modules/04_registryNew/components/TableView.vue";
+import avatar from "@/assets/avatar_user.jpg";

 /** importStore*/
 import { useRegistryNewDataStore } from "@/modules/04_registryNew/store";
@ -152,6 +153,7 @@ async function fetchDataPerson(search: boolean = false) {
      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
      dataPersonMain.value = res.data.result.data;
      total.value = res.data.result.total;
+      insertAvatar(res.data.result.data);
    })
    .catch((err) => {
      messageError($q, err);
@ -163,6 +165,44 @@ async function fetchDataPerson(search: boolean = false) {
    });
 }

+function insertAvatar(items: DataPerson[]) {
+  items.map((x: any, index: number) => {
+    http
+      .get(
+        config.API.fileByFile(
+          "ทะเบียนประวัติ",
+          "โปรไฟล์",
+          x.id,
+          "profile-" + x.id
+        )
+      )
+      .then((img) => {
+        dataPersonMain.value[index] = {
+          ...x,
+          avatar: img.data.downloadUrl,
+        };
+      })
+      .catch(() => {
+        dataPersonMain.value[index] = {
+          ...x,
+          avatar: avatar,
+        };
+      });
+  });
+}
+// const convertImageProfile = (id: string) => {
+//   return http
+//     .get(
+//       config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, "profile-" + id)
+//     )
+//     .then((res) => {
+//       return res.data.downloadUrl;
+//     })
+//     .catch(() => {
+//       return avatar;
+//     });
+// };
+
 function onClickShowFilter() {
  isShowFilter.value = !isShowFilter.value;
  isShowBtnFilter.value = false;
@ -229,7 +269,7 @@ onMounted(async () => {
    ข้อมูลทะเบียนประวัติ
  </div> -->

-  <q-card class="q-mt-md ">
+  <q-card class="q-mt-md">
    <q-card-section class="card-img q-pb-lg">
      <div class="text-h5 text-center q-py-md text-weight-medium">
        ค้นหาข้อมูลทะเบียนประวัติ