From 18c1bd787fd464827b1cd3e31d1dd1ddeacb391f Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Wed, 8 May 2024 17:11:16 +0700
Subject: [PATCH] =?UTF-8?q?UI=20User=20=E0=B8=9F=E0=B8=AD=E0=B8=A3?=
 =?UTF-8?q?=E0=B9=8C=E0=B8=A1=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=99=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=AA=E0=B9=88=E0=B8=A7=E0=B8=99=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=9E=E0=B8=B1=E0=B8=92=E0=B8=99=E0=B8=B2=E0=B8=95?=
 =?UTF-8?q?=E0=B8=99=E0=B9=80=E0=B8=AD=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../08_KPI/components/Tab/01_Assessment.vue   | 225 +++++++++++++++++-
 .../components/Tab/Dialog/DialogDevelop.vue   | 145 +++++++++++
 2 files changed, 368 insertions(+), 2 deletions(-)
 create mode 100644 src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue

diff --git a/src/modules/08_KPI/components/Tab/01_Assessment.vue b/src/modules/08_KPI/components/Tab/01_Assessment.vue
index 4dd7451..77115fb 100644
--- a/src/modules/08_KPI/components/Tab/01_Assessment.vue
+++ b/src/modules/08_KPI/components/Tab/01_Assessment.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { ref, onMounted, computed, watch } from "vue";
-import { useQuasar } from "quasar";
+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 config from "@/app.config";
 import http from "@/plugins/http";
@@ -16,6 +18,7 @@ import { useKpiDataStore } from "@/modules/08_KPI/store";
 
 import type { ListCriteria } from "@/modules/08_KPI/interface/request/index";
 
+
 const indicatorScore = defineModel("indicatorScore", {
   type: Number,
   default: 0,
@@ -26,10 +29,14 @@ const competencyScore = defineModel("competencyScore", {
 });
 const dataListCriteria = ref<ListCriteria[]>([]);
 
+const rows = ref<any[]>([]);
 const modalCriteria = ref<boolean>(false);
+const modalDevelop = ref<boolean>(false);
+const editDevelop = ref<boolean>(false);
 const $q = useQuasar();
 const route = useRoute();
-const { hideLoader, messageError } = useCounterMixin();
+const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
+const { hideLoader, messageError, date2Thai } = useCounterMixin();
 const store = useKpiDataStore();
 
 const evaluationId = ref<string>(route.params.id.toString());
@@ -43,6 +50,64 @@ const totalResults2 = ref<number>(0);
 const totalResults3 = ref<number>(0);
 // const resultWork = ref<number>(0);
 
+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" }),
+  },
+]);
+
 function fetchListPlanned() {
   http
     .get(config.API.kpiAchievement("planned") + `?id=${evaluationId.value}`)
@@ -183,6 +248,17 @@ watch(
   }
 );
 
+function onAdd() {
+  modalDevelop.value = true
+  editDevelop.value = false
+}
+
+function onEdit(id: string) {
+  modalDevelop.value = true
+  editDevelop.value = true
+}
+
+function onDelete(id: string) {}
 onMounted(() => {
   getCriteria();
   fetchListPlanned();
@@ -270,6 +346,107 @@ onMounted(() => {
         v-model:competencyScore="competencyScore"
       />
 
+      <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(item.id)"
+          >
+            <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">
+                  <div v-if="col.name == 'createDate'">
+                    {{ col.value ? date2Thai(col.value) : "-" }}
+                  </div>
+
+                  <div v-else-if="col.name == 'summary'">
+                    {{
+                      props.row.point !== 0
+                        ? (props.row.point / 5) * props.row.weight
+                        : "-"
+                    }}
+                  </div>
+                  <div v-else>
+                    {{ 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>
+
       <div class="row text-body2 text-weight-bold justify-center">
         <span
           >สรุปผลการประเมินสมรรถนะ (คะแนนเต็ม
@@ -284,10 +461,54 @@ onMounted(() => {
     v-model:modal="modalCriteria"
     v-model:dataListCriteria="dataListCriteria"
   />
+
+  <DialogDevelop v-model:modal="modalDevelop" v-model:isEdit="editDevelop"/>
+
 </template>
 
 <style scoped>
 .txt-under {
   text-decoration: underline;
 }
+
+.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;
+  }
+}
 </style>
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
new file mode 100644
index 0000000..668cc2b
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import DialogHeader from "@/components/DialogHeader.vue";
+import { ref, reactive } from "vue";
+
+const modal = defineModel<boolean>("modal", { required: true });
+const isEdit = defineModel<boolean>("isEdit", { required: true });
+
+const formData = reactive({
+  name: "",
+  group: [],
+  target: "",
+  isDevelopment70: false,
+  isDevelopment20: false,
+  isDevelopment10: false,
+  achievement10: "มีผลการพัฒนาและมีการดำเนินการตามเป้าหมายการนำไปพัฒนางาน",
+  achievement5: "มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน",
+  achievement0: "ไม่ได้ดำเนินการพัฒนา",
+});
+function close() {
+  modal.value = false;
+  isEdit.value = false;
+
+  formData.name =  ""
+  formData.group =  []
+  formData.target =  ""
+  formData.isDevelopment70 =  false
+  formData.isDevelopment20 =  false
+  formData.isDevelopment10 =  false
+  formData.achievement10 =  "มีผลการพัฒนาและมีการดำเนินการตามเป้าหมายการนำไปพัฒนางาน"
+  formData.achievement5 =  "มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน"
+  formData.achievement0 =  "ไม่ได้ดำเนินการพัฒนา"
+}
+</script>
+<template>
+  <q-dialog persistent v-model="modal">
+    <q-card style="width: 80%">
+      <DialogHeader
+        :tittle="`${isEdit ? 'แก้ไข' : 'เพิ่ม'}การพัฒนาตนเอง`"
+        :close="close"
+      />
+      <q-separator />
+      <q-card-section>
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <q-input
+              v-model="formData.name"
+              outlined
+              dense
+              class="inputgreen"
+              label="ชื่อเรื่อง / เนื้อเรื่อง / หัวข้อการพัฒนา"
+            >
+            </q-input>
+          </div>
+          <div class="column">
+            <q-checkbox
+              v-model="formData.isDevelopment70"
+              label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
+            />
+            <q-checkbox
+              v-model="formData.isDevelopment20"
+              label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
+            />
+            <q-checkbox
+              v-model="formData.isDevelopment10"
+              label="10 การฝึกอบรมอื่นๆ"
+            />
+          </div>
+          <div class="col-12">
+            <q-input
+              label="เป้าหมายการนำไปพัฒนางาน"
+              v-model="formData.target"
+              outlined
+              type="textarea"
+              dense
+              class="inputgreen"
+            ></q-input>
+          </div>
+          <div class="col-12">
+            <q-card bordered>
+              <div class="bg-grey-2 row q-py-sm text-weight-bold col-12">
+                <div class="col-4 text-center">
+                  <span>ระดับคะแนน</span>
+                </div>
+                <div class="col-8 text-start">
+                  <span>เกณฑ์การประเมิน</span>
+                </div>
+              </div>
+              <div class="row q-pa-sm">
+                <div class="col-4 text-center self-start text-body1">
+                  <span>10</span>
+                </div>
+                <div class="col-8">
+                  <q-input
+                    class="inputgreen"
+                    v-model="formData.achievement10"
+                    outlined
+                    dense
+                    label="เกณฑ์การประเมิน"
+                  ></q-input>
+                </div>
+              </div>
+              <q-separator />
+              <div class="row q-pa-sm bg-grey-2">
+                <div class="col-4 text-center self-start text-body1">
+                  <span>5</span>
+                </div>
+                <div class="col-8">
+                  <q-input
+                    class="inputgreen"
+                    v-model="formData.achievement5"
+                    outlined
+                    dense
+                    label="เกณฑ์การประเมิน"
+                  ></q-input>
+                </div>
+              </div>
+              <q-separator />
+              <div class="row q-pa-sm">
+                <div class="col-4 text-center self-start text-body1">
+                  <span>0</span>
+                </div>
+                <div class="col-8">
+                  <q-input
+                    class="inputgreen"
+                    v-model="formData.achievement0"
+                    outlined
+                    dense
+                    label="เกณฑ์การประเมิน"
+                  ></q-input>
+                </div>
+              </div>
+            </q-card>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="บันทึก" color="secondary" type="submit"
+          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+        >
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>