updated kpi

src/modules/08_KPI/components/Tab/01_Assessment.vue

@@ -4,14 +4,13 @@ import { useQuasar, type QTableProps } from "quasar";
 import { useRoute } from "vue-router";
 
 import DialogListCriteria from "@/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue";
-import DialogDevelop from "@/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue";
-import DialogEvalutionDevelop from "@/modules/08_KPI/components/Tab/DialogEvaluate/03_DialogEvalutionDevelop.vue";
 
 import config from "@/app.config";
 import http from "@/plugins/http";
 
 import Work from "@/modules/08_KPI/components/Tab/Topic/01_Indicator.vue";
 import Competency from "@/modules/08_KPI/components/Tab/Topic/02_Competency.vue";
+import Develop from "@/modules/08_KPI/components/Tab/Topic/03_Develop.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
@@ -24,14 +23,9 @@ const indicatorWeightTotal = defineModel("indicatorWeightTotal", {
 });
 const dataListCriteria = ref<ListCriteria[]>([]);
 
-const rows = ref<any[]>([]);
-const modalEvaluate = ref<boolean>(false);
 const modalCriteria = ref<boolean>(false);
-const modalDevelop = ref<boolean>(false);
-const idEditDevelop = ref<string>("");
 const $q = useQuasar();
 const route = useRoute();
-const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
 const {
   hideLoader,
   messageError,
@@ -52,68 +46,6 @@ const totalResults1 = ref<number>(0);
 const totalResults2 = ref<number>(0);
 const totalResults3 = ref<number>(0);
 // const resultWork = ref<number>(0);
-const formData = reactive({
-  isDevelopment70: false,
-  isDevelopment20: false,
-  isDevelopment10: false,
-});
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อเรื่อง / เนื้อเรื่อง / หัวข้อการพัฒนา",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "develop",
-    align: "left",
-    label: "วิธีการพัฒนา",
-    sortable: true,
-    field: "develop",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "target",
-    align: "left",
-    label: "เป้าหมายการนำไปพัฒนางาน",
-    sortable: true,
-    field: "target",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "achievement",
-    align: "left",
-    label: "เกณฑ์การประเมินผลการพัฒนา",
-    sortable: true,
-    field: "achievement",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "summary",
-    align: "left",
-    label: "ผลการประเมิน",
-    sortable: true,
-    field: "summary",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
 
 const weightPlanned = ref<number>(0);
 const weightRole = ref<number>(0);
@@ -248,51 +180,11 @@ watch(
   }
 );
 
-function onAdd() {
-  modalDevelop.value = true;
-}
-
-function onEdit(id: string) {
-  modalDevelop.value = true;
-  idEditDevelop.value = id;
-}
-
-function getDevelop() {
-  http
-    .get(config.API.kpiAchievementDevelop + `?id=${evaluationId.value}`)
-    .then((res) => {
-      const data = res.data.result;
-      rows.value = data;
-    });
-}
-function onDelete(id: string) {
-  dialogRemove($q, () => {
-    showLoader();
-    http
-      .delete(config.API.kpiAchievementDevelop + `/${id}`)
-      .then((res) => {
-        success($q, "ลบข้อมูลสำเร็จ");
-        getAll();
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  });
-}
-
 async function getAll() {
   await getCriteria();
   await fetchListPlanned();
   await fetchListRole();
   await fetchAssigned();
-  await getDevelop();
-}
-
-function onEvaluate() {
-  modalEvaluate.value = true;
 }
 
 onMounted(() => {
@@ -300,7 +192,6 @@ onMounted(() => {
   fetchListPlanned();
   fetchListRole();
   fetchAssigned();
-  getDevelop();
   setTimeout(() => {
     hideLoader();
   }, 1000);
@@ -400,156 +291,7 @@ onMounted(() => {
 
       <Competency v-model:dataListCriteria="dataListCriteria" />
 
-      <q-card bordered style="border-radius: 5px" class="no-shadow">
-        <q-card-section class="bg-grey-2 q-py-sm">
-          <div class="row items-center">
-            <div class="col">
-              <span class="text-weight-medium">การพัฒนาตนเอง</span>
-              <q-btn
-                v-if="!isReadonly"
-                class="q-ml-xs"
-                flat
-                round
-                icon="mdi-plus"
-                color="primary"
-                size="12px"
-                dense
-                @click="onAdd()"
-              >
-                <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-              </q-btn>
-            </div>
-
-            <q-space />
-            <q-btn
-              v-if="!isReadonly"
-              flat
-              round
-              icon="mdi-clipboard-check-outline"
-              color="blue-5"
-              size="12px"
-              dense
-              @click="onEvaluate()"
-            >
-              <q-tooltip>ประเมิน</q-tooltip>
-            </q-btn>
-          </div>
-        </q-card-section>
-        <q-card-section class="q-pa-sm">
-          <q-table
-            ref="table"
-            :columns="columns"
-            :rows="rows"
-            row-key="id"
-            flat
-            bordered
-            :paging="true"
-            dense
-            hide-pagination
-            class="custom-table2"
-            no-data-label="ไม่มีข้อมูล"
-          >
-            <template v-slot:header="props">
-              <q-tr :props="props">
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                  <span class="text-weight-medium">{{ col.label }}</span>
-                </q-th>
-                <q-th auto-width v-if="!isReadonly" />
-              </q-tr>
-            </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td
-                  v-for="col in props.cols"
-                  :key="col.id"
-                  class="vertical-top"
-                >
-                  <div v-if="col.name == 'createDate'">
-                    {{ col.value ? date2Thai(col.value) : "-" }}
-                  </div>
-
-                  <div v-else-if="col.name == 'develop'">
-                    <div class="column">
-                      <q-checkbox
-                        size="xs"
-                        :model-value="props.row.isDevelopment70"
-                        label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
-                      />
-                      <q-checkbox
-                        size="xs"
-                        :model-value="props.row.isDevelopment20"
-                        label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
-                      />
-                      <q-checkbox
-                        size="xs"
-                        :model-value="props.row.isDevelopment10"
-                        label="10 การฝึกอบรมอื่นๆ"
-                      />
-                    </div>
-                  </div>
-                  <div v-else-if="col.name == 'achievement'">
-                    <q-btn-group outline>
-                      <q-btn
-                        outline
-                        color="grey-6"
-                        label="0"
-                        :class="props.row.summary == 0 && 'active'"
-                        ><q-tooltip>{{
-                          props.row.achievement0
-                        }}</q-tooltip></q-btn
-                      >
-                      <q-btn
-                        outline
-                        color="grey-6"
-                        label="5"
-                        :class="props.row.summary == 5 && 'active'"
-                        ><q-tooltip>{{
-                          props.row.achievement5
-                        }}</q-tooltip></q-btn
-                      >
-                      <q-btn
-                        outline
-                        color="grey-6"
-                        label="10"
-                        :class="props.row.summary == 10 && 'active'"
-                        ><q-tooltip>{{
-                          props.row.achievement10
-                        }}</q-tooltip></q-btn
-                      >
-                    </q-btn-group>
-                  </div>
-                  <div v-else-if="col.name === 'summary'">
-                    {{ props.row.summary ? props.row.summary : 0 }}
-                  </div>
-                  <div v-else>
-                    {{ col.value ? col.value : "-" }}
-                  </div>
-                </q-td>
-                <q-td v-if="!isReadonly">
-                  <q-btn
-                    flat
-                    round
-                    icon="edit"
-                    color="edit"
-                    @click.stop.pervent="onEdit(props.row.id)"
-                  >
-                    <q-tooltip>แก้ไข </q-tooltip>
-                  </q-btn>
-                  <q-btn
-                    flat
-                    round
-                    icon="delete"
-                    color="red"
-                    @click.stop.pervent="onDelete(props.row.id)"
-                  >
-                    <q-tooltip>ลบข้อมูล </q-tooltip>
-                  </q-btn>
-                </q-td>
-              </q-tr>
-            </template>
-          </q-table>
-        </q-card-section>
-      </q-card>
+      <Develop />
 
       <div class="row text-body2 text-weight-bold justify-center">
         <span
@@ -565,18 +307,6 @@ onMounted(() => {
     v-model:modal="modalCriteria"
     v-model:dataListCriteria="dataListCriteria"
   />
-
-  <DialogDevelop
-    v-model:modal="modalDevelop"
-    v-model:id="idEditDevelop"
-    :get-all="getAll"
-  />
-
-  <DialogEvalutionDevelop
-    v-model:modal="modalEvaluate"
-    v-model:data="rows"
-    :get-all="getAll"
-  />
 </template>
 
 <style scoped>

src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue

@@ -9,8 +9,8 @@ import config from "@/app.config";
 import { useRoute } from "vue-router";
 
 const props = defineProps({
-  getAll:Function
-})
+  getAll: Function,
+});
 const route = useRoute();
 const idKpi = ref<string>(route.params.id.toLocaleString());
 
@@ -54,7 +54,7 @@ function close() {
   formData.achievement5 =
     "มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน";
   formData.achievement0 = "ไม่ได้ดำเนินการพัฒนา";
-  props.getAll?.()
+  props.getAll?.();
 }
 
 function onSubmit() {
@@ -149,7 +149,7 @@ watch(
               </q-input>
             </div>
             <div class="col-12">
-              <span class="text-grey-6 text-weight-medium">วิธีการพัฒนา</span>
+              <span class="text-weight-medium">วิธีการพัฒนา</span>
             </div>
             <div class="column">
               <q-checkbox

src/modules/08_KPI/components/Tab/Topic/03_Develop.vue

@@ -0,0 +1,376 @@
+<script setup lang="ts">
+import { onMounted, ref, computed, watch, reactive } from "vue";
+import DialogDevelop from "@/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue";
+import DialogEvalutionDevelop from "@/modules/08_KPI/components/Tab/DialogEvaluate/03_DialogEvalutionDevelop.vue";
+
+import { useQuasar, type QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useKpiDataStore } from "@/modules/08_KPI/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRoute } from "vue-router";
+
+const store = useKpiDataStore();
+const route = useRoute();
+const evaluationId = ref<string>(route.params.id.toString());
+const modalEvaluate = ref<boolean>(false);
+
+const rows = ref<any[]>([]);
+const modalDevelop = ref<boolean>(false);
+const idEditDevelop = ref<string>("");
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogRemove,
+  success,
+} = mixin;
+
+const formData = reactive({
+  isDevelopment70: false,
+  isDevelopment20: false,
+  isDevelopment10: false,
+});
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อเรื่อง / เนื้อเรื่อง / หัวข้อการพัฒนา",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "develop",
+    align: "left",
+    label: "วิธีการพัฒนา",
+    sortable: true,
+    field: "develop",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "target",
+    align: "left",
+    label: "เป้าหมายการนำไปพัฒนางาน",
+    sortable: true,
+    field: "target",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "achievement",
+    align: "left",
+    label: "เกณฑ์การประเมินผลการพัฒนา",
+    sortable: true,
+    field: "achievement",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "summary",
+    align: "left",
+    label: "ผลการประเมิน",
+    sortable: true,
+    field: "summary",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const visibleColumns = ref<string[]>(
+  store.tabOpen === 3
+    ? ["name", "develop", "target", "achievement", "summary"]
+    : ["name", "develop", "target"]
+);
+
+function onAdd() {
+  modalDevelop.value = true;
+}
+
+function onEdit(id: string) {
+  modalDevelop.value = true;
+  idEditDevelop.value = id;
+}
+
+function getDevelop() {
+  http
+    .get(config.API.kpiAchievementDevelop + `?id=${evaluationId.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+    });
+}
+
+function onEvaluate() {
+  modalEvaluate.value = true;
+}
+
+function onDelete(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.kpiAchievementDevelop + `/${id}`)
+      .then((res) => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        getDevelop();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+onMounted(() => {
+  getDevelop();
+});
+</script>
+
+<template>
+  <q-card bordered style="border-radius: 5px" class="no-shadow">
+    <q-card-section class="bg-grey-2 q-py-sm">
+      <div class="row items-center">
+        <div class="col">
+          <span class="text-weight-medium">การพัฒนาตนเอง</span>
+          <q-btn
+            v-if="
+              store.dataEvaluation.evaluationStatus === 'NEW' &&
+              store.rolePerson === 'USER'
+            "
+            class="q-ml-xs"
+            flat
+            round
+            icon="mdi-plus"
+            color="primary"
+            size="12px"
+            dense
+            @click="onAdd()"
+          >
+            <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+          </q-btn>
+        </div>
+
+        <q-space />
+        <q-btn
+          v-if="
+            store.dataEvaluation.evaluationStatus === 'NEW' &&
+            store.rolePerson === 'USER'
+          "
+          flat
+          round
+          icon="mdi-clipboard-check-outline"
+          color="blue-5"
+          size="12px"
+          dense
+          @click="onEvaluate()"
+        >
+          <q-tooltip>ประเมิน</q-tooltip>
+        </q-btn>
+      </div>
+    </q-card-section>
+    <q-card-section class="q-pa-sm">
+      <q-table
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        row-key="id"
+        flat
+        bordered
+        :paging="true"
+        dense
+        hide-pagination
+        class="custom-table2"
+        no-data-label="ไม่มีข้อมูล"
+        :visible-columns="visibleColumns"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th
+              auto-width
+              v-if="
+                store.dataEvaluation.evaluationStatus === 'NEW' &&
+                store.rolePerson === 'USER'
+              "
+            />
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="col in props.cols" :key="col.id" class="vertical-top">
+              <div v-if="col.name == 'createDate'">
+                {{ col.value ? date2Thai(col.value) : "-" }}
+              </div>
+
+              <div v-else-if="col.name == 'develop'">
+                <div class="column">
+                  <q-checkbox
+                    size="xs"
+                    :model-value="props.row.isDevelopment70"
+                    label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
+                  />
+                  <q-checkbox
+                    size="xs"
+                    :model-value="props.row.isDevelopment20"
+                    label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
+                  />
+                  <q-checkbox
+                    size="xs"
+                    :model-value="props.row.isDevelopment10"
+                    label="10 การฝึกอบรมอื่นๆ"
+                  />
+                </div>
+              </div>
+              <div v-else-if="col.name == 'achievement'">
+                <q-btn-group outline>
+                  <q-btn
+                    outline
+                    color="grey-6"
+                    label="0"
+                    :class="props.row.summary == 0 && 'active'"
+                    ><q-tooltip>{{ props.row.achievement0 }}</q-tooltip></q-btn
+                  >
+                  <q-btn
+                    outline
+                    color="grey-6"
+                    label="5"
+                    :class="props.row.summary == 5 && 'active'"
+                    ><q-tooltip>{{ props.row.achievement5 }}</q-tooltip></q-btn
+                  >
+                  <q-btn
+                    outline
+                    color="grey-6"
+                    label="10"
+                    :class="props.row.summary == 10 && 'active'"
+                    ><q-tooltip>{{ props.row.achievement10 }}</q-tooltip></q-btn
+                  >
+                </q-btn-group>
+              </div>
+              <div v-else-if="col.name === 'summary'">
+                {{ props.row.summary ? props.row.summary : 0 }}
+              </div>
+              <div v-else>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+            <q-td
+              v-if="
+                store.dataEvaluation.evaluationStatus === 'NEW' &&
+                store.rolePerson === 'USER'
+              "
+            >
+              <q-btn
+                flat
+                round
+                icon="edit"
+                color="edit"
+                @click.stop.pervent="onEdit(props.row.id)"
+              >
+                <q-tooltip>แก้ไข </q-tooltip>
+              </q-btn>
+              <q-btn
+                flat
+                round
+                icon="delete"
+                color="red"
+                @click.stop.pervent="onDelete(props.row.id)"
+              >
+                <q-tooltip>ลบข้อมูล </q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </q-table>
+    </q-card-section>
+  </q-card>
+
+  <DialogDevelop
+    v-model:modal="modalDevelop"
+    v-model:id="idEditDevelop"
+    :get-all="getDevelop"
+  />
+
+  <DialogEvalutionDevelop
+    v-model:modal="modalEvaluate"
+    v-model:data="rows"
+    :get-all="getDevelop"
+  />
+</template>
+
+<style scoped>
+.custom-table2 {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+.q-btn-group--outline > .q-btn-item:not(:last-child):before {
+  border-right: 1px solid #c4c4c4;
+}
+.q-btn-group--outline > .q-btn-item.active {
+  color: #2196f3 !important;
+  background-color: #cde6fb !important;
+}
+.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
+  border-left: 1px solid #2196f3 !important;
+  background-color: #cde6fb;
+}
+.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
+  border: 1px solid #2196f3;
+  background-color: #cde6fb;
+}
+</style>