From 2b67885210b330d3e32cf752b9ebfabe477b8c56 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Thu, 8 Aug 2024 11:42:31 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=A2=E0=B9=89=E0=B8=B2=E0=B8=A2=20sammary?=
 =?UTF-8?q?=20=E0=B8=AA=E0=B8=A1=E0=B8=A3=E0=B8=96=E0=B8=99=E0=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../competency/01ListCompetency.vue           |   7 +
 .../competency/02ListLinkPosition.vue         |   7 +-
 .../components/competency/03ListLinkGroup.vue |   6 +
 .../components/competency/04ListCriteria.vue  | 134 +++++++++---------
 .../components/competency/05ListDetail.vue    |   9 +-
 .../components/competency/Summary.vue         |  93 ++++++++++++
 .../01_masterdata/views/competency.vue        |  86 +----------
 7 files changed, 189 insertions(+), 153 deletions(-)
 create mode 100644 src/modules/01_masterdata/components/competency/Summary.vue

diff --git a/src/modules/01_masterdata/components/competency/01ListCompetency.vue b/src/modules/01_masterdata/components/competency/01ListCompetency.vue
index 7aa47311a..3a30c98ef 100644
--- a/src/modules/01_masterdata/components/competency/01ListCompetency.vue
+++ b/src/modules/01_masterdata/components/competency/01ListCompetency.vue
@@ -17,6 +17,8 @@ import type { ResDataCapacity } from "@/modules/01_masterdata/interface/response
 import { useKPIDataStore } from "@/modules/01_masterdata/stores/KPIStore";
 import { checkPermission } from "@/utils/permissions";
 
+import CompetencyTotal from "@/modules/01_masterdata/components/competency/Summary.vue";
+
 const total = ref<number>();
 const store = useKPIDataStore();
 const router = useRouter();
@@ -149,6 +151,11 @@ onMounted(() => {
 </script>
 
 <template>
+  <div class="row">
+    <div class="col-12">
+      <CompetencyTotal />
+    </div>
+  </div>
   <q-toolbar style="padding: 0">
     <q-select
       v-model="store.competencyTypeVal"
diff --git a/src/modules/01_masterdata/components/competency/02ListLinkPosition.vue b/src/modules/01_masterdata/components/competency/02ListLinkPosition.vue
index 8a0d86403..72eafd9ca 100644
--- a/src/modules/01_masterdata/components/competency/02ListLinkPosition.vue
+++ b/src/modules/01_masterdata/components/competency/02ListLinkPosition.vue
@@ -15,7 +15,7 @@ import config from "@/app.config";
 
 import { checkPermission } from "@/utils/permissions";
 import { useRoute } from "vue-router";
-
+import CompetencyTotal from "@/modules/01_masterdata/components/competency/Summary.vue";
 const total = ref<number>();
 const modal = ref<boolean>(false);
 const rows = ref<any[]>([]);
@@ -207,6 +207,11 @@ onMounted(async () => {
 </script>
 
 <template>
+    <div class="row">
+    <div class="col-12">
+      <CompetencyTotal />
+    </div>
+  </div>
   <q-toolbar style="padding: 0">
     <q-btn
       v-if="checkPermission($route)?.attrIsCreate"
diff --git a/src/modules/01_masterdata/components/competency/03ListLinkGroup.vue b/src/modules/01_masterdata/components/competency/03ListLinkGroup.vue
index ce0988a64..889f7c7e6 100644
--- a/src/modules/01_masterdata/components/competency/03ListLinkGroup.vue
+++ b/src/modules/01_masterdata/components/competency/03ListLinkGroup.vue
@@ -15,6 +15,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import { checkPermission } from "@/utils/permissions";
+import CompetencyTotal from "@/modules/01_masterdata/components/competency/Summary.vue";
 
 const total = ref<number>();
 const id = ref<string>("");
@@ -345,6 +346,11 @@ onMounted(async () => {
 </script>
 
 <template>
+    <div class="row">
+    <div class="col-12">
+      <CompetencyTotal />
+    </div>
+  </div>
   <q-toolbar style="padding: 0">
     <q-btn
       v-if="checkPermission($route)?.attrIsCreate"
diff --git a/src/modules/01_masterdata/components/competency/04ListCriteria.vue b/src/modules/01_masterdata/components/competency/04ListCriteria.vue
index 15bc13d1c..7516c2841 100644
--- a/src/modules/01_masterdata/components/competency/04ListCriteria.vue
+++ b/src/modules/01_masterdata/components/competency/04ListCriteria.vue
@@ -8,6 +8,7 @@ import { useQuasar } from "quasar";
 
 import { checkPermission } from "@/utils/permissions";
 import { useRoute } from "vue-router";
+import CompetencyTotal from "@/modules/01_masterdata/components/competency/Summary.vue";
 
 const $q = useQuasar();
 const dataLevel = ref<any>();
@@ -71,64 +72,66 @@ onMounted(() => {
 </script>
 
 <template>
-  <q-card>
+  <div class="row q-mb-sm">
+    <div class="col-12">
+      <CompetencyTotal />
+    </div>
+  </div>
+  <q-card flat bordered>
     <q-form greedy @submit.prevent @validation-success="onSubmit">
       <q-card-section>
-        <q-card flat bordered>
-          <q-card-section class="bg-grey-3">
-            <div class="row text-dark text-body2 text-weight-medium">
-              <div class="text-center col-8">เกณฑ์การประเมิน</div>
-              <div class="text-center col-4">ระดับคะแนน</div>
-            </div>
-          </q-card-section>
-          <q-card-section class="q-pa-none">
-            <div v-for="(field, index) in dataLevel" :key="field.id">
-              <div class="row q-pa-sm">
-                <div class="col-8 text-left">
-                  <q-field
-                    class="q_field_p_none"
-                    ref="fieldRef"
-                    v-model="field.description"
-                    label-slot
-                    borderless
-                    :rules="[(val) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
-                    hide-bottom-space
-                  >
-                    <template #control>
-                      <q-editor
-                        :readonly="
-                          checkPermission($route)?.attrIsUpdate == false
-                        "
-                        class="full-width"
-                        v-model="field.description"
-                        :dense="$q.screen.lt.md"
-                        min-height="5rem"
-                        :toolbar="[
-                          [
-                            'bold',
-                            'italic',
-                            'strike',
-                            'underline',
-                            'subscript',
-                            'superscript',
-                          ],
+        <q-card-section class="bg-grey-3">
+          <div class="row text-dark text-body2 text-weight-medium">
+            <div class="text-center col-8">เกณฑ์การประเมิน</div>
+            <div class="text-center col-4">ระดับคะแนน</div>
+          </div>
+        </q-card-section>
+        <q-card-section class="q-pa-none">
+          <div v-for="(field, index) in dataLevel" :key="field.id">
+            <div class="row q-pa-sm">
+              <div class="col-8 text-left">
+                <q-field
+                  class="q_field_p_none"
+                  ref="fieldRef"
+                  v-model="field.description"
+                  label-slot
+                  borderless
+                  :rules="[(val) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
+                  hide-bottom-space
+                >
+                  <template #control>
+                    <q-editor
+                      :readonly="checkPermission($route)?.attrIsUpdate == false"
+                      class="full-width"
+                      v-model="field.description"
+                      :dense="$q.screen.lt.md"
+                      min-height="5rem"
+                      :toolbar="[
+                        [
+                          'bold',
+                          'italic',
+                          'strike',
+                          'underline',
+                          'subscript',
+                          'superscript',
+                        ],
 
-                          ['unordered', 'ordered'],
-                        ]"
-                        :fonts="{
-                          arial: 'Arial',
-                          arial_black: 'Arial Black',
-                          comic_sans: 'Comic Sans MS',
-                          courier_new: 'Courier New',
-                          impact: 'Impact',
-                          lucida_grande: 'Lucida Grande',
-                          times_new_roman: 'Times New Roman',
-                          verdana: 'Verdana',
-                        }"
-                      />
-                    </template>
-                  </q-field>
-                  <!-- <q-input
+                        ['unordered', 'ordered'],
+                      ]"
+                      :fonts="{
+                        arial: 'Arial',
+                        arial_black: 'Arial Black',
+                        comic_sans: 'Comic Sans MS',
+                        courier_new: 'Courier New',
+                        impact: 'Impact',
+                        lucida_grande: 'Lucida Grande',
+                        times_new_roman: 'Times New Roman',
+                        verdana: 'Verdana',
+                      }"
+                    />
+                  </template>
+                </q-field>
+                <!-- <q-input
                   v-model="formScore[field]"
                   dense
                   outlined
@@ -137,22 +140,21 @@ onMounted(() => {
                   :rules="[(val:string) => !!val || `${'กรุณากรอกข้อความเพื่อไว้ใช้อ้างอิงเท่านั้น'}`,]"
                   hide-bottom-space
                 /> -->
-                </div>
-                <div
-                  class="col-4 text-center text-body1 text-weight-bold self-center"
-                >
-                  {{ field.level }}
-                </div>
               </div>
               <div
-                class="col-12"
-                v-if="index !== Object.keys(fieldLabels).length - 1"
+                class="col-4 text-center text-body1 text-weight-bold self-center"
               >
-                <q-separator />
+                {{ field.level }}
               </div>
             </div>
-          </q-card-section>
-        </q-card>
+            <div
+              class="col-12"
+              v-if="index !== Object.keys(fieldLabels).length - 1"
+            >
+              <q-separator />
+            </div>
+          </div>
+        </q-card-section>
       </q-card-section>
 
       <q-separator />
diff --git a/src/modules/01_masterdata/components/competency/05ListDetail.vue b/src/modules/01_masterdata/components/competency/05ListDetail.vue
index 5252f11aa..9d2a2075c 100644
--- a/src/modules/01_masterdata/components/competency/05ListDetail.vue
+++ b/src/modules/01_masterdata/components/competency/05ListDetail.vue
@@ -1,6 +1,13 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import CompetencyTotal from "@/modules/01_masterdata/components/competency/Summary.vue";
+</script>
 
 <template>
+  <div class="row q-mb-sm">
+    <div class="col-12">
+      <CompetencyTotal />
+    </div>
+  </div>
   <div class="display-table">
     <q-card flat bordered class="q-mb-lg">
       <q-card-section>
diff --git a/src/modules/01_masterdata/components/competency/Summary.vue b/src/modules/01_masterdata/components/competency/Summary.vue
new file mode 100644
index 000000000..490cb81a4
--- /dev/null
+++ b/src/modules/01_masterdata/components/competency/Summary.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, dialogRemove, success, messageError } =
+  useCounterMixin();
+
+const competencyTotal = ref<any[]>([
+  {
+    value: "HEAD",
+    label: "สมรรถนะหลัก",
+    color: "edit",
+  },
+  {
+    value: "GROUP",
+    label: "สมรรถนะประจำกลุ่มงาน",
+    color: "primary",
+  },
+  {
+    value: "EXECUTIVE",
+    label: "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร",
+    color: "blue",
+  },
+  {
+    value: "total",
+    label: "ทั้งหมด",
+    color: "red",
+  },
+  {
+    value: "DIRECTOR",
+    label:
+      "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต",
+    color: "deep-purple",
+  },
+  {
+    value: "INSPECTOR",
+    label: "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ",
+    color: "orange",
+  },
+]);
+
+function getTotal() {
+  http
+    .get(config.API.capacitySummary)
+    .then((res) => {
+      const data = res.data.result;
+      competencyTotal.value.forEach((i) => {
+        const map = data.find((item: any) => item.type === i.value);
+        if (map) i.total = map.total;
+      });
+      const totalSum = data.reduce((i: any, j: any) => i + +j.total, 0);
+      competencyTotal.value.find((i) => i.value === "total").total =
+        totalSum.toString();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+
+onMounted(() => {
+  getTotal();
+});
+</script>
+<template>
+  <q-card class="bg-grey-1">
+    <div class="row q-col-gutter-xs">
+      <div
+        v-for="(i, index) in competencyTotal"
+        :class="
+          index > 3
+            ? 'col-12 col-sm-12 col-md-6 col-lg-6'
+            : 'col-12 col-sm-12 col-md-6 col-lg-3'
+        "
+      >
+        <div
+          class="bg-white rounded-borders q-pa-sm"
+          style="border: 1px solid #ededed"
+        >
+          <div class="row items-center no-wrap">
+            {{ i.label }}
+            <q-space />
+            <q-badge :color="i.color" text-color="white" :label="i.total" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+</template>
diff --git a/src/modules/01_masterdata/views/competency.vue b/src/modules/01_masterdata/views/competency.vue
index 8534ab629..602511dbc 100644
--- a/src/modules/01_masterdata/views/competency.vue
+++ b/src/modules/01_masterdata/views/competency.vue
@@ -19,60 +19,7 @@ const { showLoader, hideLoader, dialogRemove, success, messageError } =
 const currentTab = ref<string>("list_competency");
 const tabs = ref<Array<any>>([]);
 
-const indicatorTotal = ref<any[]>([
-  {
-    value: "HEAD",
-    label: "สมรรถนะหลัก",
-    color: "edit",
-  },
-  {
-    value: "GROUP",
-    label: "สมรรถนะประจำกลุ่มงาน",
-    color: "primary",
-  },
-  {
-    value: "EXECUTIVE",
-    label: "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร",
-    color: "blue",
-  },
-  {
-    value: "total",
-    label: "ทั้งหมด",
-    color: "red",
-  },
-  {
-    value: "DIRECTOR",
-    label:
-      "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต",
-    color: "deep-purple",
-  },
-  {
-    value: "INSPECTOR",
-    label: "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ",
-    color: "orange",
-  },
-]);
-
-function getTotal() {
-  http
-    .get(config.API.capacitySummary)
-    .then((res) => {
-      const data = res.data.result;
-      indicatorTotal.value.forEach((i) => {
-        const map = data.find((item: any) => item.type === i.value);
-        if (map) i.total = map.total;
-      });
-      const totalSum = data.reduce((i:any, j:any) => i + +j.total, 0);
-      indicatorTotal.value.find((i) => i.value === "total").total =
-        totalSum.toString();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    });
-}
-
 onMounted(() => {
-  getTotal();
   const tab = [
     { label: "รายการสมรรถนะ", value: "list_competency" },
     { label: "กลุ่มงาน", value: "list_linkPosition" },
@@ -87,38 +34,7 @@ onMounted(() => {
 <template>
   <div class="toptitle text-dark col-12 row items-center">สมรรถนะ</div>
   <q-card flat bordered>
-    <div class="row">
-      <div class="col-12">
-        <q-card class="q-pa-xs bg-grey-1">
-          <div class="row q-col-gutter-xs">
-            <div
-              v-for="(i, index) in indicatorTotal"
-              :class="
-                index > 3
-                  ? 'col-12 col-sm-12 col-md-6 col-lg-6'
-                  : 'col-12 col-sm-12 col-md-6 col-lg-3'
-              "
-            >
-              <div
-                class="bg-white rounded-borders q-pa-sm"
-                style="border: 1px solid #ededed"
-              >
-                <div class="row items-center no-wrap">
-                  {{ i.label }}
-                  <q-space />
-                  <q-badge
-                    :color="i.color"
-                    text-color="white"
-                    :label="i.total"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </q-card>
-      </div>
-    </div>
-    <q-separator />
+
     <div class="text-subtitle1 text-grey-9">
       <q-tabs
         dense