From dbe620c549cf56525d05261cce5b7cedec6e934b Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Fri, 31 May 2024 18:05:15 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=97=E0=B8=94=E0=B8=A5=E0=B8=AD=E0=B8=87?=
 =?UTF-8?q?=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/probation/api.probation.ts            |   4 +-
 .../component/06_EvaluateResult.vue           |   1 +
 .../component/07_EvaluateReport.vue           | 580 +++++++++++++++++-
 3 files changed, 580 insertions(+), 5 deletions(-)

diff --git a/src/api/probation/api.probation.ts b/src/api/probation/api.probation.ts
index 70954c3..803135f 100644
--- a/src/api/probation/api.probation.ts
+++ b/src/api/probation/api.probation.ts
@@ -36,6 +36,8 @@ export default {
     `${probation}/evaluate-result?assign_id=${id}`,
   reportAssign: (type: string, id: string) =>
     `${reportProbation}/13/${type}/${id}`,
-  
+
+  summaryReportDetail: (id: string) => `${probation}/report?assign_id=${id}`,
+
   kpiCapacity
 };
diff --git a/src/modules/11_probation/component/06_EvaluateResult.vue b/src/modules/11_probation/component/06_EvaluateResult.vue
index 6cb3397..5c8a907 100644
--- a/src/modules/11_probation/component/06_EvaluateResult.vue
+++ b/src/modules/11_probation/component/06_EvaluateResult.vue
@@ -259,6 +259,7 @@ onMounted(async () => {
       <div>แบบรายงานการประเมิน ฯ</div>
     </div>
   </div>
+  
   <div :class="`${$q.screen.gt.xs ? '' : 'mobileClass'}`">
     <div class="col-12">
       <span class="toptitle text-dark">แบบรายงานการประเมินฯ</span>
diff --git a/src/modules/11_probation/component/07_EvaluateReport.vue b/src/modules/11_probation/component/07_EvaluateReport.vue
index 726be63..c31a92d 100644
--- a/src/modules/11_probation/component/07_EvaluateReport.vue
+++ b/src/modules/11_probation/component/07_EvaluateReport.vue
@@ -1,14 +1,100 @@
 <script setup lang="ts">
 import { useQuasar } from "quasar";
-import { ref } from "vue";
-import { useRouter } from "vue-router";
+import { ref, onMounted, reactive } from "vue";
+import { useRoute, useRouter } from "vue-router";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
 const router = useRouter();
+const route = useRoute();
 const $q = useQuasar();
 const mode = ref<any>($q.screen.gt.xs);
+
+const id = ref<string>(route.params.id as string);
+const profileId = ref<string>(route.params.profileId as string);
+const status = ref<boolean>(false);
+const achievement_score = ref<number>();
+const achievement_percent = ref<number>();
+const achievement_result = ref<number>();
+
+const develop_orientation_score = ref<number>();
+const develop_self_learning_score = ref<number>();
+const develop_training_seminar_score = ref<number>();
+const develop_other_training_score = ref<number>();
+const develop_total_score = ref<number>();
+const develop_orientation_percent = ref<number>();
+const develop_self_learning_percent = ref<number>();
+const develop_training_seminar_percent = ref<number>();
+const develop_other_training_percent = ref<number>();
+const develop_total_percent = ref<number>();
+const develop_result = ref<number>();
+const achievement_score_total = ref<number>();
+const behavior_score = ref<number>();
+const behavior_score_total = ref<number>();
+const behavior_percent = ref<number>();
+const behavior_result = ref<number>();
+const sum_score = ref<number>();
+const sum_percent = ref<number>();
+const reason = ref<string>();
+const pass_result = ref<number>();
+const evaluate_date = ref<Date>();
+const dev_options = reactive([
+  { value: 1, label: "พัฒนาครบ 3 ส่วน" },
+  { value: 2, label: "พัฒนาไม่ครบ 3 ส่วน" },
+]);
+const result_option = reactive([
+  { name: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ", value: 1 },
+  { name: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ", value: 2 },
+  { name: "เห็นควรให้ขยายระยะเวลาทดลองปฏิบัติหน้าที่ราชการต่อไปอีก", value: 3 },
+]);
+
+/** get คะแนน */
+async function getReportScore() {
+  await http.get(config.API.summaryReportDetail(id.value)).then((res) => {
+    const data = res.data.data;
+    develop_orientation_score.value = data.develop_orientation_score;
+    develop_self_learning_score.value = data.develop_self_learning_score;
+    develop_training_seminar_score.value = data.develop_training_seminar_score;
+    develop_other_training_score.value = data.develop_other_training_score;
+    develop_total_score.value = data.develop_total_score;
+    develop_orientation_percent.value = data.develop_orientation_percent;
+    develop_self_learning_percent.value = data.develop_self_learning_percent;
+    develop_training_seminar_percent.value =
+      data.develop_training_seminar_percent;
+    develop_other_training_percent.value = data.develop_other_training_percent;
+    develop_total_percent.value = data.develop_total_percent;
+    develop_result.value = data.develop_result == 0 ? 2 : data.develop_result;
+
+    achievement_score.value = data.achievement_score;
+    achievement_score_total.value = data.achievement_score_total;
+    achievement_percent.value = data.achievement_percent;
+    achievement_result.value = data.achievement_result;
+
+    behavior_score.value = data.behavior_score;
+    behavior_score_total.value = data.behavior_score_total;
+    behavior_percent.value = data.behavior_percent;
+    behavior_result.value = data.behavior_result;
+
+    sum_score.value = data.sum_score;
+    sum_percent.value = data.sum_percent;
+
+    reason.value = data.reason;
+    pass_result.value = data.pass_result;
+    evaluate_date.value = data.evaluate_date;
+  });
+}
+
+/** get ค่า เมื่อโหลดหน้า */
+onMounted(() => {
+  getReportScore();
+});
 </script>
 <template>
-    <div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
+  <div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
     <div class="toptitle text-white col-12 row items-center">
       <q-btn
         icon="mdi-arrow-left"
@@ -23,5 +109,491 @@ const mode = ref<any>($q.screen.gt.xs);
       <div>ผลการประเมินการ ฯ</div>
     </div>
   </div>
-  
+  <div :class="`${$q.screen.gt.xs ? '' : 'mobileClass'}`">
+    <div class="row q-col-gutter-sm">
+      <div class="col-12">
+        <span class="toptitle text-dark"
+          >ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ</span
+        >
+      </div>
+
+      <div class="col-12 text-dark text-weight-bold">
+        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+        ผลการประเมิน
+      </div>
+
+      <div v-if="$q.screen.gt.xs" class="col-12">
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <div class="row q-col-gutter-sm q-px-md items-center">
+              <div class="col-4">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1. คะแนนผลสัมฤทธิ์การทดลองปฏิบัติหน้าที่ราชการ
+              </div>
+              <div class="col-4">
+                <q-list>
+                  <q-item class="q-pa-none text-center">
+                    <q-item-section>
+                      <q-item-label class="text-weight-light"
+                        >คะแนน</q-item-label
+                      >
+                      <q-item-label
+                        class="text-weight-bold text-dark"
+                        caption
+                        >{{ achievement_score }}</q-item-label
+                      >
+                    </q-item-section>
+                    <q-item-section class="q-ma-none">
+                      <q-item-label class="text-weight-light"
+                        >ร้อยละ</q-item-label
+                      >
+                      <q-item-label
+                        class="text-weight-bold text-dark"
+                        caption
+                        >{{ achievement_percent }}</q-item-label
+                      ></q-item-section
+                    >
+                  </q-item>
+                </q-list>
+              </div>
+              <div class="col-4 text-weight-medium text-grey-7" align="end">
+                <span v-if="achievement_result == 1">
+                  ผ่าน (สูงกว่าร้อยละ 60)
+                </span>
+                <span v-else> ไม่ผ่าน (ต่ำกว่าร้อยละ 60) </span>
+              </div>
+            </div>
+          </div>
+          <div class="col-12">
+            <div class="row q-col-gutter-sm q-px-md items-center">
+              <div class="col-4">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                2. คะแนนพฤติกรรมการปฏิบัติราชการ
+              </div>
+              <div class="col-4">
+                <q-list>
+                  <q-item class="q-pa-none text-center">
+                    <q-item-section>
+                      <q-item-label class="text-weight-light"
+                        >คะแนน</q-item-label
+                      >
+                      <q-item-label
+                        class="text-weight-bold text-dark"
+                        caption
+                        >{{ behavior_score }}</q-item-label
+                      >
+                    </q-item-section>
+                    <q-item-section class="q-ma-none">
+                      <q-item-label class="text-weight-light"
+                        >ร้อยละ</q-item-label
+                      >
+                      <q-item-label
+                        class="text-weight-bold text-dark"
+                        caption
+                        >{{ behavior_percent }}</q-item-label
+                      ></q-item-section
+                    >
+                  </q-item>
+                </q-list>
+              </div>
+              <div class="col-4 text-weight-medium text-grey-7" align="end">
+                <span v-if="achievement_result == 1">
+                  ผ่าน (สูงกว่าร้อยละ 60)
+                </span>
+                <span v-else> ไม่ผ่าน (ต่ำกว่าร้อยละ 60) </span>
+              </div>
+            </div>
+          </div>
+          <div class="col-12">
+            <div class="row q-col-gutter-sm q-px-md items-center">
+              <div class="col-4">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                ผลคะแนนรวมการประเมินการทดลอง
+              </div>
+              <div class="col-4">
+                <q-list>
+                  <q-item class="q-pa-none text-center">
+                    <q-item-section>
+                      <q-item-label class="text-weight-light"
+                        >คะแนน</q-item-label
+                      >
+                      <q-item-label
+                        class="text-weight-bold text-dark"
+                        caption
+                        >{{ sum_score }}</q-item-label
+                      >
+                    </q-item-section>
+                    <q-item-section class="q-ma-none">
+                      <q-item-label class="text-weight-light"
+                        >ร้อยละ</q-item-label
+                      >
+                      <q-item-label
+                        class="text-weight-bold text-dark"
+                        caption
+                        >{{ sum_percent }}</q-item-label
+                      ></q-item-section
+                    >
+                  </q-item>
+                </q-list>
+              </div>
+              <div class="col-4 text-weight-medium text-grey-7" align="end">
+                <span v-if="pass_result == 1"> ผ่าน (สูงกว่าร้อยละ 60) </span>
+                <span v-else> ไม่ผ่าน (ต่ำกว่าร้อยละ 60) </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-else class="col-12">
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <q-card bordered>
+              <div class="bg-grey-1 q-pa-sm">
+                <span class="text-weight-medium"
+                  >1. คะแนนผลสัมฤทธิ์การทดลองปฏิบัติหน้าที่ราชการ</span
+                >
+              </div>
+              <q-separator />
+              <q-card-section class="q-pa-none">
+                <q-list>
+                  <q-item class="q-pa-none text-center">
+                    <q-item-section>
+                      <q-item-label>คะแนน</q-item-label>
+                      <q-item-label>{{ achievement_score }}</q-item-label>
+                    </q-item-section>
+                    <q-separator color="grey-3" vertical />
+                    <q-item-section class="q-ma-none">
+                      <q-item-label>ร้อยละ</q-item-label>
+                      <q-item-label>{{
+                        achievement_percent
+                      }}</q-item-label></q-item-section
+                    >
+                  </q-item>
+                  <q-separator />
+                  <q-item class="q-pa-none text-center">
+                    <q-item-section v-if="achievement_result == 1">
+                      ผ่าน (สูงกว่าร้อยละ 60)
+                    </q-item-section>
+                    <q-item-section v-else>
+                      ไม่ผ่าน (ต่ำกว่าร้อยละ 60)
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card-section>
+            </q-card>
+          </div>
+
+          <div class="col-12">
+            <q-card bordered>
+              <div class="bg-grey-1 q-pa-sm">
+                <span class="text-weight-medium"
+                  >2. คะแนนพฤติกรรมการปฏิบัติราชการ</span
+                >
+              </div>
+              <q-separator />
+              <q-card-section class="q-pa-none">
+                <q-list>
+                  <q-item class="q-pa-none text-center">
+                    <q-item-section>
+                      <q-item-label>คะแนน</q-item-label>
+                      <q-item-label>{{ behavior_score }}</q-item-label>
+                    </q-item-section>
+                    <q-separator color="grey-3" vertical />
+                    <q-item-section class="q-ma-none">
+                      <q-item-label>ร้อยละ</q-item-label>
+                      <q-item-label>{{
+                        behavior_percent
+                      }}</q-item-label></q-item-section
+                    >
+                  </q-item>
+                  <q-separator />
+                  <q-item class="q-pa-none text-center">
+                    <q-item-section v-if="behavior_result == 1">
+                      ผ่าน (สูงกว่าร้อยละ 60)
+                    </q-item-section>
+                    <q-item-section v-else>
+                      ไม่ผ่าน (ต่ำกว่าร้อยละ 60)
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card-section>
+            </q-card>
+          </div>
+
+          <div class="col-12">
+            <q-card bordered>
+              <div class="bg-grey-1 q-pa-sm">
+                <span class="text-weight-medium"
+                  >ผลคะแนนรวมการประเมินการทดลอง</span
+                >
+              </div>
+              <q-separator />
+              <q-card-section class="q-pa-none">
+                <q-list>
+                  <q-item class="q-pa-none text-center">
+                    <q-item-section>
+                      <q-item-label>คะแนน</q-item-label>
+                      <q-item-label>{{ sum_score }}</q-item-label>
+                    </q-item-section>
+                    <q-separator color="grey-3" vertical />
+                    <q-item-section class="q-ma-none">
+                      <q-item-label>ร้อยละ</q-item-label>
+                      <q-item-label>{{
+                        sum_percent
+                      }}</q-item-label></q-item-section
+                    >
+                  </q-item>
+                  <q-separator />
+                  <q-item class="q-pa-none text-center">
+                    <q-item-section v-if="pass_result == 1">
+                      ผ่าน (สูงกว่าร้อยละ 60)
+                    </q-item-section>
+                    <q-item-section v-else>
+                      ไม่ผ่าน (ต่ำกว่าร้อยละ 60)
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card-section>
+            </q-card>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-12 text-dark text-weight-bold">
+        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
+        การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+      </div>
+      <div class="col-12">
+        <q-card bordered class="bg-grey-1">
+          <div class="row q-pa-sm text-weight-medium">
+            <div class="col-8">หัวข้อ</div>
+            <div class="col-2">คะแนน</div>
+            <div class="col-2">ร้อยละ</div>
+          </div>
+          <q-separator />
+          <div
+            class="row q-pa-sm text-weight-medium items-center q-col-gutter-sm"
+          >
+            <div class="col-8">1. การปฐมนิเทศ</div>
+            <div class="col-2">
+              <q-input
+                bg-color="white"
+                outlined
+                dense
+                type="number"
+                :disable="!status"
+                v-model="develop_orientation_score"
+              />
+            </div>
+            <div class="col-2">
+              <q-input
+                bg-color="white"
+                outlined
+                dense
+                type="number"
+                :disable="!status"
+                v-model="develop_orientation_percent"
+              />
+            </div>
+          </div>
+          <q-separator />
+          <div
+            class="row q-pa-sm text-weight-medium items-center q-col-gutter-sm"
+          >
+            <div class="col-8">2. การเรียนรู้ด้วยตนเอง</div>
+            <div class="col-2">
+              <q-input
+                outlined
+                bg-color="white"
+                dense
+                type="number"
+                :disable="!status"
+                v-model="develop_self_learning_score"
+              />
+            </div>
+            <div class="col-2">
+              <q-input
+                bg-color="white"
+                outlined
+                dense
+                type="number"
+                :disable="!status"
+                v-model="develop_self_learning_percent"
+              />
+            </div>
+          </div>
+          <q-separator />
+          <div
+            class="row q-pa-sm text-weight-medium items-center q-col-gutter-sm"
+          >
+            <div class="col-8">3. การอบรมสัมนาร่วมกัน</div>
+            <div class="col-2">
+              <q-input
+                outlined
+                bg-color="white"
+                dense
+                type="number"
+                :disable="!status"
+                v-model="develop_training_seminar_score"
+              />
+            </div>
+            <div class="col-2">
+              <q-input
+                outlined
+                bg-color="white"
+                dense
+                type="number"
+                :disable="!status"
+                v-model="develop_training_seminar_percent"
+              />
+            </div>
+          </div>
+          <q-separator />
+          <div
+            class="row q-pa-sm text-weight-medium items-center q-col-gutter-sm"
+          >
+            <div class="col-8">
+              4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)
+            </div>
+            <div class="col-2">
+              <q-input
+                bg-color="white"
+                outlined
+                dense
+                type="number"
+                :disable="!status"
+                v-model="develop_other_training_score"
+              />
+            </div>
+            <div class="col-2">
+              <q-input
+                bg-color="white"
+                outlined
+                dense
+                type="number"
+                :disable="!status"
+                v-model="develop_other_training_percent"
+              />
+            </div>
+          </div>
+          <q-separator />
+          <div
+            class="row q-pa-sm text-weight-bold items-center q-col-gutter-sm"
+          >
+            <div class="col-8">
+              คะแนนผลการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ
+            </div>
+            <div class="col-2 text-center">
+              <span>{{ develop_total_score }}</span>
+            </div>
+            <div class="col-2 text-center">
+              <span>{{ develop_total_percent }}</span>
+            </div>
+          </div>
+        </q-card>
+      </div>
+
+      <div class="col-12 text-dark text-weight-bold">
+        ผลการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ
+      </div>
+      <div class="col-12 col-sm-6">
+        <q-select
+          dense
+          v-model="develop_result"
+          outlined
+          :options="dev_options"
+          option-label="label"
+          option-value="value"
+          map-options
+          emit-value
+          :disable="!status"
+        />
+      </div>
+      <div class="col-12 text-dark text-weight-bold">
+        เหตุผลอื่น ๆ ในการพิจารณา
+      </div>
+      <div class="col-12">
+        <q-input
+          type="textarea"
+          outlined
+          dense
+          v-model="reason"
+          lazy-rules
+          autogrow
+          hide-bottom-space
+          :row="3"
+          :disable="!status"
+        />
+      </div>
+      <div class="col-12 col-sm-6">
+        <div class="column q-gutter-y-sm">
+          <div class="text-dark text-weight-bold">
+            ผลการทดลองปฏิบัติหน้าที่ราชการ
+          </div>
+          <q-select
+            dense
+            v-model="pass_result"
+            outlined
+            :options="result_option"
+            option-label="name"
+            option-value="value"
+            map-options
+            emit-value
+            :disable="!status"
+          />
+        </div>
+      </div>
+      <div class="col-12 col-sm-6">
+        <div class="column q-gutter-y-sm">
+          <div class="text-dark text-weight-bold">วัน เดือน ปี ที่ประเมิน</div>
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="evaluate_date"
+            :locale="'th'"
+            autoApply
+            :readonly="!status"
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                :disable="!status"
+                class="full-width datepicker"
+                :model-value="
+                  evaluate_date != null ? date2Thai(evaluate_date) : null
+                "
+                :rules="[(val) => !!val || `${'วัน เดือน ปี ที่ประเมิน'}`]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
+<style scoped>
+.mobileClass {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 10px;
+}
+</style>