From 7041a9e05082da9c0498413180836917441d4364 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 17 Jun 2024 16:17:26 +0700
Subject: [PATCH] KPI

---
 src/api/14_KPI/api.KPI.ts                     |   2 +
 .../Tab/Dialog/DialogGovernment.vue           | 276 ++++++++++++++++++
 .../components/Tab/Dialog/DialogStatus.vue    |  64 ++++
 src/modules/14_KPI/views/detailView.vue       |  19 ++
 4 files changed, 361 insertions(+)
 create mode 100644 src/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue
 create mode 100644 src/modules/14_KPI/components/Tab/Dialog/DialogStatus.vue

diff --git a/src/api/14_KPI/api.KPI.ts b/src/api/14_KPI/api.KPI.ts
index 57a521266..990f035a2 100644
--- a/src/api/14_KPI/api.KPI.ts
+++ b/src/api/14_KPI/api.KPI.ts
@@ -20,6 +20,7 @@ const urlFile = `${env.API_URI}/salary`;
 
 const kpiGroup = `${env.API_URI}/kpi/group`;
 const kpiLink = `${env.API_URI}/kpi/link`;
+const placementKeycloak = `${env.API_URI}/placement/officer/profileId`;
 
 export default {
   KPI,
@@ -69,6 +70,7 @@ export default {
   kpiLink,
 
   profilePosition: () => `${env.API_URI}/org/profile/profileid/position`,
+  placementKeycloak,
 
   /** Report*/
   kpiReport: () => `${KPI}/report/announcement`,
diff --git a/src/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue b/src/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue
new file mode 100644
index 000000000..1ddd1bc9b
--- /dev/null
+++ b/src/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue
@@ -0,0 +1,276 @@
+<script setup lang="ts">
+import DialogHeader from "@/components/DialogHeader.vue";
+import type { QTableProps } from "quasar";
+import { ref,watch } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  dialogConfirm,
+  success,
+  showLoader,
+  hideLoader,
+  messageError,
+  findPosMasterNoOld,
+  findOrgNameOld,
+  date2Thai,
+} = mixin;
+
+const route = useRoute();
+const router = useRouter();
+const id = ref<string>(route.params.id as string)
+const modal = defineModel<boolean>("modal", { required: true });
+const filterKeyword = ref<string>("");
+const rows = ref<any[]>([]);
+
+//หัวตาราง
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
+  },
+  {
+    name: "posMasterNoOld",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posMasterNoOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return findPosMasterNoOld(row);
+    },
+  },
+  {
+    name: "positionOld",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "positionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      let name = "";
+      if (row.posTypeNameOld && row.posLevelNameOld) {
+        name = `${row.posTypeNameOld} (${row.posLevelNameOld})`;
+      } else if (row.posTypeNameOld) {
+        name = `${row.posTypeNameOld}`;
+      } else if (row.posLevelNameOld) {
+        name = `(${row.posLevelNameOld})`;
+      } else name = "-";
+      return name;
+    },
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val, row) => findOrgNameOld(row),
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "หน่วยงานที่ให้ช่วยราชการ",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "dateStart",
+    align: "left",
+    label: "วันเริ่มช่วยราชการ",
+    sortable: true,
+    field: "dateStart",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => date2Thai(val),
+  },
+  {
+    name: "dateEnd",
+    align: "left",
+    label: "วันสิ้นสุดการช่วยราชการ",
+    sortable: true,
+    field: "dateEnd",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => date2Thai(val),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => date2Thai(val),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => statusText(val),
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "name",
+  "posMasterNoOld",
+  "positionOld",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "dateStart",
+  "dateEnd",
+  "createdAt",
+  "status",
+]);
+
+const statusText = (val: string) => {
+  switch (val) {
+    case "WAITTING":
+      return "รอดำเนินการ";
+    case "PENDING":
+      return "เลือกตำแหน่งแล้ว";
+    case "APPROVE":
+      return "อนุมัติ";
+    case "REJECT":
+      return "ไม่อนุมัติ";
+    case "REPORT":
+      return "ส่งรายชื่อไปออกคำสั่ง";
+    case "DONE":
+      return "ออกคำสั่งเสร็จแล้ว";
+
+    default:
+      return "-";
+  }
+};
+
+function close() {
+  modal.value = false;
+}
+
+function getData(){
+    showLoader()
+    http
+    .get(config.API.placementKeycloak+`/${id.value}`)
+    .then((res)=>{
+        const data = res.data.result
+        rows.value = data
+    }).catch((e)=>{
+        messageError($q,e)
+    }).finally(()=>{
+        hideLoader()
+    })
+}
+watch(()=>modal.value,(n)=>{
+    if(n == true){
+        getData()
+    }
+})
+</script>
+<template>
+  <q-dialog persistent v-model="modal">
+    <q-card bordered style="min-width: 80vw">
+      <DialogHeader tittle="ข้อมูลการช่วยราชการ" :close="close" />
+      <q-separator />
+      <q-card-section>
+        <div class="row">
+          <div class="col-12">
+            <d-table
+              ref="table"
+              :columns="columns"
+              :rows="rows"
+              :filter="filterKeyword"
+              row-key="id"
+              flat
+              bordered
+              :paging="true"
+              dense
+              :rows-per-page-options="[10, 25, 50, 100]"
+              :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-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 === 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+              <!-- <template v-slot:pagination="scope">
+                ทั้งหมด {{ total }} รายการ
+                <q-pagination
+                  v-model="formQuery.page"
+                  active-color="primary"
+                  color="dark"
+                  :max="Number(totalList)"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                  :max-pages="5"
+                  @update:model-value="fetchList"
+                ></q-pagination>
+              </template> -->
+            </d-table>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/14_KPI/components/Tab/Dialog/DialogStatus.vue b/src/modules/14_KPI/components/Tab/Dialog/DialogStatus.vue
new file mode 100644
index 000000000..1ad994b67
--- /dev/null
+++ b/src/modules/14_KPI/components/Tab/Dialog/DialogStatus.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { ref, watch } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+const route = useRoute();
+
+const work = ref<boolean>(false);
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError } = mixin;
+
+const modal = defineModel<boolean>("modal", { required: true });
+const profileId = defineModel<string>("profileId", { required: true });
+
+function close() {
+  modal.value = false;
+}
+
+function getData() {
+  showLoader();
+  http
+    .get(config.API.profilePosition() + `/${profileId.value}`)
+    .then((res) => {
+      const data = res.data.result.isProbation;
+      work.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+watch(
+  () => modal.value,
+  (n) => {
+    if (n == true) {
+      getData();
+    }
+  }
+);
+</script>
+<template>
+  <q-dialog persistent v-model="modal">
+    <q-card bordered style="min-width: 20vw">
+      <DialogHeader tittle="สถานะการทดลองงาน" :close="close" />
+      <q-separator />
+      <q-card-section class="q-pa-sm">
+        <div class="row">
+          <div class="col-12 text-center bg-grey-1 q-pa-md rounded-borders">
+            <span class="text-weight-bold text-teal">{{
+              work ? `อยู่ระหว่างทดลองงาน` : "พ้นจากการทดลองงาน"
+            }}</span>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/14_KPI/views/detailView.vue b/src/modules/14_KPI/views/detailView.vue
index fc7e36080..4dd286777 100644
--- a/src/modules/14_KPI/views/detailView.vue
+++ b/src/modules/14_KPI/views/detailView.vue
@@ -9,6 +9,8 @@ import Avatar from "@/assets/!avatar_user.jpg";
 import DialogHeader from "@/components/DialogHeader.vue";
 import Assessment from "@/modules/14_KPI/components/Tab/01_Assessment.vue";
 import File from "@/modules/14_KPI/components/Tab/05_File.vue";
+import DialogGovernment from "@/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue";
+import DialogStatus from "@/modules/14_KPI/components/Tab/Dialog/DialogStatus.vue";
 
 import type {
   DataOption,
@@ -27,6 +29,7 @@ const { showLoader, hideLoader, messageError, dialogConfirm, success } =
   useCounterMixin();
 
 const kpiId = ref<string>(route.params.id as string);
+const profileId = ref<string>("");
 
 /** Header*/
 const dataEvaluation = ref<ResUserEvaluation>();
@@ -39,6 +42,7 @@ function fetchEvaluation() {
       const data = res.data.result;
       store.dataEvaluation = data;
       dataEvaluation.value = data;
+      profileId.value = data.profileId;
       fetchProfile(data.profileId);
       fetchProfilePosition(data.profileId);
     })
@@ -249,6 +253,16 @@ function filterOption(val: any, update: Function, refData: string) {
   }
 }
 
+const modalGovernment = ref<boolean>(false);
+function openGovernment() {
+  modalGovernment.value = true;
+}
+
+const modalStatus = ref<boolean>(false);
+function openStatus() {
+  modalStatus.value = true;
+}
+
 /** ์ Body*/
 const splitterModel = ref<number>(15);
 const itemsTab = ref<ItemsTab[]>([
@@ -406,6 +420,7 @@ onMounted(() => {
                   color="grey-2"
                   text-color="primary"
                   size="md"
+                  @click="openGovernment"
                 >
                   <q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip>
                 </q-btn>
@@ -416,6 +431,7 @@ onMounted(() => {
                   text-color="blue-5"
                   icon="mdi-file-eye-outline"
                   size="md"
+                  @click="openStatus"
                 >
                   <q-tooltip>ดูข้อมูลการทดลองงาน</q-tooltip>
                 </q-btn>
@@ -685,6 +701,9 @@ onMounted(() => {
       </q-form>
     </q-card>
   </q-dialog>
+
+  <DialogGovernment v-model:modal="modalGovernment" />
+  <DialogStatus v-model:modal="modalStatus" :profileId="profileId" />
 </template>
 
 <style scoped>