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

src/modules/04_registryNew/components/TableView.vue

@@ -295,16 +295,7 @@ watch(
               <q-item>
                 <q-item-section avatar>
                   <q-avatar>
-                    <img
+                    <img :src="props.row.avartar" class="col-4 img-info" />
-                      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"
-                    />
                   </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">
+            <q-avatar size="80px" class="bg-grey-2">
-              <img src="@/assets/avatar_user.jpg" />
+              <q-img :src="props.row.avatar" />
             </q-avatar>
 
             <div class="text-weight-medium q-mt-md">

src/modules/04_registryNew/components/detail/TabMain.vue

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

src/modules/04_registryNew/interface/response/Main.ts

@@ -13,6 +13,7 @@ interface DataLevel {
 }
 
 interface DataPerson {
+  avatar?: string;
   citizenId: string;
   firstName: string;
   id: string;

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
+    http
-        .post(config.API.listDeceased(), formData)
+      .post(config.API.listDeceased(), formData)
-        .then(() => {
+      .then(() => {
-          success($q, "บันทึกข้อมูลสำเร็จ");
+        success($q, "บันทึกข้อมูลสำเร็จ");
-          router.push("/deceased");
+        router.push("/deceased");
-        })
+      })
-        .catch((e) => {
+      .catch((e) => {
-          messageError($q, e);
+        messageError($q, e);
-        })
+      })
-        .finally(() => {
+      .finally(() => {
-          hideLoader();
+        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-avatar size="90px" class="bg-grey-2">
-          <q-img :src="profilePicture"/>
+          <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{
+.bg-toolbar {
-  background-color: #F2FBFA;
+  background-color: #f2fbfa;
 }
-.btnEditImg{
+.btnEditImg {
-  position: absolute; 
+  position: absolute;
-  bottom: 0; 
+  bottom: 0;
-  right: 0; 
+  right: 0;
-  border: 1px solid #EDEDED ;
+  border: 1px solid #ededed;
 }
-</style>
+</style>

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">
         ค้นหาข้อมูลทะเบียนประวัติ