UI ประเมิณ

src/modules/08_KPI/views/form.vue

@@ -130,7 +130,7 @@ function onSubmit() {
             ? commanderHighId.value.id
             : null,
         })
-        .then(() => {
+        .then((res) => {
           success($q, "บันทึกสำเร็จ");
           close();
         })
@@ -246,11 +246,13 @@ function filterOption(val: any, update: Function, refData: string) {
 //   getAll();
 // }
 
-function getAll() {
-  getProfile();
-  fetchEvaluation();
-  store.checkStep();
-  getOrgOp();
+async function getAll() {
+  await getProfile();
+  await fetchEvaluation();
+
+  await store.checkStep();
+
+  await getOrgOp();
 }
 
 function sendToEvaluatore(status: string) {
@@ -263,7 +265,7 @@ function sendToEvaluatore(status: string) {
           .put(config.API.kpiSendToStatus(id.value), {
             status: status,
           })
-          .then(() => {
+          .then((res) => {
             success($q, "ส่งข้อตกลงให้ผู้ประเมินอนุมัติสำเร็จ");
             close();
           })
@@ -290,7 +292,7 @@ function requireEdit() {
           .put(config.API.kpiReqEdit(id.value), {
             status: "EVALUATOR",
           })
-          .then(() => {
+          .then((res) => {
             success($q, "ขอแก้ไขสำเร็จ");
             close();
           })
@@ -307,9 +309,10 @@ function requireEdit() {
   );
 }
 
-onMounted(() => {
+onMounted(async () => {
   showLoader();
-  getAll();
+  await getAll();
+  console.log(store.dataEvaluation.avartar);
 });
 </script>
 
@@ -340,11 +343,25 @@ onMounted(() => {
       </div>
       <div class="col-12">
         <q-card bordered flat class="relative-position">
+          <div class="row justify-center q-pa-md" v-if="!$q.screen.gt.xs">
+            <q-avatar size="80px">
+              <q-img
+                :src="store.dataEvaluation.avartar"
+                v-if="store.dataEvaluation.avartar !== undefined"
+              />
+              <q-img src="@/assets/avatar_user.jpg" v-else />
+            </q-avatar>
+          </div>
+          <!-- <div class="row text-center">
+        
+          </div> -->
+
           <div
+            v-if="$q.screen.gt.xs"
             class="absolute-center-left"
             style="left: 2%; top: 50%; transform: translateY(-50%)"
           >
-            <q-avatar size="95px">
+            <q-avatar size="80px">
               <q-img
                 :src="store.dataEvaluation.avartar"
                 v-if="store.dataEvaluation.avartar !== undefined"
@@ -354,12 +371,16 @@ onMounted(() => {
           </div>
           <div class="row col-12">
             <div class="row items-center col-12 q-pa-sm">
-              <div class="col-12" style="padding-left: 12%">
-                <div class="row col-12 items-center">
+              <div
+                class="col-12"
+                :style="$q.screen.gt.xs ? 'padding-left: 12%' : ''"
+              >
+                <div class="row col-12 items-center justify-center">
                   <span class="text-h6 text-weight-medium text-primary">{{
                     `${store.dataEvaluation.prefix}${store.dataEvaluation.firstName} ${store.dataEvaluation.lastName}`
                   }}</span>
-                  <q-space />
+                  <q-space v-if="$q.screen.gt.xs" />
+
                   <div class="q-gutter-x-sm">
                     <span
                       v-if="
@@ -473,7 +494,12 @@ onMounted(() => {
             </div>
 
             <div class="row items-center bg-toolbar col-12 q-pa-sm">
-              <div class="col-12 q-py-xs" style="padding-left: 12%">
+              <div
+                class="col-12 q-py-xs"
+                :style="
+                  $q.screen.gt.xs ? 'padding-left: 12%' : 'padding-left:5%'
+                "
+              >
                 <div class="row no-wrap">
                   <div class="col-2">
                     <div class="column">