From 79a64bd5e9a6ccb69aeccd54fb207380a02f575d Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Mon, 15 Jul 2024 11:20:03 +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/modules/08_KPI/views/form.vue             |   3 +-
 src/modules/11_probation/router.ts            |  10 +
 src/modules/11_probation/views/mainDetail.vue | 446 ++++++++++++++++++
 3 files changed, 458 insertions(+), 1 deletion(-)
 create mode 100644 src/modules/11_probation/views/mainDetail.vue

diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index 76bf07e..bc532ac 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -390,7 +390,8 @@ function openGovernment() {
 }
 function openStatus() {
   // router.push(`/probation/${store.dataEvaluation.profileId}`);
-  router.push(`/probation`);
+  // router.push(`/probation`);
+  router.push(`/probation-detail/${store.dataEvaluation.profileId}`);
   // modalStatus.value = true;
 }
 
diff --git a/src/modules/11_probation/router.ts b/src/modules/11_probation/router.ts
index f88c5d1..3e0a5a6 100644
--- a/src/modules/11_probation/router.ts
+++ b/src/modules/11_probation/router.ts
@@ -1,5 +1,6 @@
 // registry
 const probationPage = () => import("@/modules/11_probation/views/main.vue");
+const probationDetail = () => import("@/modules/11_probation/views/mainDetail.vue");
 
 const probationAdd = () => import("@/modules/11_probation/pages/addPage.vue");
 const probationDetailPage = () => import("@/modules/11_probation/pages/detailPage.vue");
@@ -28,6 +29,15 @@ export default [
       Key: [11],
     },
   },
+  {
+    path: "/probation-detail/:id",
+    name: "probationMainDetail",
+    component: probationDetail,
+    meta: {
+      Auth: true,
+      Key: [11],
+    },
+  },
   {
     path: "/probation/add/:profileId",
     name: "probationAdd",
diff --git a/src/modules/11_probation/views/mainDetail.vue b/src/modules/11_probation/views/mainDetail.vue
new file mode 100644
index 0000000..7b8c5aa
--- /dev/null
+++ b/src/modules/11_probation/views/mainDetail.vue
@@ -0,0 +1,446 @@
+<script setup lang="ts">
+import avatar from "@/assets/avatar_user.jpg";
+import { ref, reactive, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import keycloak from "@/plugins/keycloak";
+
+import { useRoute, useRouter } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar, type QTableProps } from "quasar";
+
+import type { ListMain } from "@/modules/11_probation/interface/index/main";
+
+const profileId = ref<string>("");
+const rows = ref<ListMain[]>([]);
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  messageError,
+  dialogConfirm,
+  findOrgName,
+  showLoader,
+  hideLoader,
+  date2Thai,
+} = mixin;
+
+const filter = ref<string>("");
+const mode = ref<any>($q.screen.gt.xs);
+const profileImg = ref<string>("");
+const router = useRouter();
+const route = useRoute();
+const idEva = ref<string>(route.params.id as string)
+const formData = reactive<any>({
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  position: "",
+  posExecutiveName: "",
+  posTypeName: "",
+  posLevelName: "",
+  org: "",
+});
+const sizeImg = ref<string>("");
+
+/** ข้อมูลที่เเสดงในตาราง */
+const visibleColumns = ref<string[]>([
+  "no",
+  "date_start",
+  "date_finish",
+  "mentors",
+  "commander",
+]);
+
+/** หัวตาราง */
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "date_start",
+    align: "left",
+    label: "ตั้งแต่วันที่",
+    sortable: true,
+    field: "date_start",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+  },
+  {
+    name: "date_finish",
+    align: "left",
+    label: "ถึงวันที่",
+    sortable: true,
+    field: "date_finish",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+  },
+  {
+    name: "mentors",
+    align: "left",
+    label: "ผู้ดูแล",
+    sortable: true,
+    field: "mentors",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "commander",
+    align: "left",
+    label: "ผู้บังคับบัญชา",
+    sortable: true,
+    field: "commander",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+function onResize(size: any) {
+  const width = size.width > 100 ? 100 : size.width;
+  sizeImg.value = `${width}px`;
+}
+
+function onMobile(type: string) {
+  router.push(`/registry/${type}`);
+}
+
+function getMain() {
+  showLoader();
+  http
+    .get(config.API.orgPosition+`/${idEva.value}`)
+    .then(async (res) => {
+      const data = res.data.result;
+      formData.prefix = data.prefix;
+      formData.firstName = data.firstName;
+      formData.lastName = data.lastName;
+      formData.position = data.position;
+
+      formData.posTypeName = data.posTypeName;
+      formData.posExecutiveName = data.posExecutiveName;
+      formData.posLevelName = data.posLevelName;
+      formData.org = findOrgName(data);
+      profileId.value = data.profileId;
+      if (data.avatarName) {
+        getImg(data.profileId, data.avatarName);
+      } else {
+        profileImg.value = avatar;
+      }
+      await getList(data.profileId);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function getList(id: string) {
+  http
+    .get(config.API.probationMain(id))
+    .then((res) => {
+      const data = res.data.data;
+      rows.value = data;
+    })
+    .catch((e) => {})
+    .finally(() => {});
+}
+function getImg(id: string, pathName: string) {
+  http
+    .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, pathName))
+    .then((res) => {
+      profileImg.value = res.data.downloadUrl;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+
+function onDetail(id: string) {
+  router.push(`/probation/detail/${profileId.value}/${id}`);
+}
+
+onMounted(async () => {
+  await getMain();
+});
+</script>
+<template>
+  <div class="row justify-center">
+    <div 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"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.go(-1)
+          "
+        />
+        รายละเอียดงานที่ได้รับมอบหมาย
+      </div>
+      <div class="row q-col-gutter-md">
+        <div v-if="$q.screen.gt.xs" class="col-12">
+          <q-card>
+            <div class="bg-grey-1 row q-pa-sm items-center">
+              <span class="text-teal text-weight-bold text-body2">{{
+                formData.firstName
+                  ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
+                  : "-"
+              }}</span>
+            </div>
+            <q-resize-observer @resize="onResize" />
+            <q-card-section class="q-pa-md">
+              <div class="row">
+                <div class="col-2 text-center self-center">
+                  <q-avatar :size="sizeImg" rounded>
+                    <img
+                      :src="profileImg"
+                      style="border-radius: 10px; object-fit: cover"
+                    />
+                  </q-avatar>
+                </div>
+                <div class="col-10 column justify-center no-wrap">
+                  <div class="row text-grey-6">
+                    <div class="col-4">ตำแหน่งในสายงาน</div>
+                    <div class="col-4">ระดับ</div>
+                    <div class="col-4">สังกัด</div>
+                  </div>
+                  <div class="row">
+                    <div class="col-4">
+                      {{ formData.position ? formData.position : "-" }}
+                    </div>
+                    <div class="col-4">
+                      {{ formData.posLevelName ? formData.posLevelName : "-" }}
+                    </div>
+                    <div class="col-4">
+                      {{ formData.org ? formData.org : "-" }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </q-card-section>
+          </q-card>
+        </div>
+        <div v-else class="col-12">
+          <q-card bordered>
+            <div class="bg-grey-1 row q-pa-sm items-center">
+              <span class="text-teal text-weight-bold text-body2">{{
+                formData.firstName
+                  ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
+                  : "-"
+              }}</span>
+            </div>
+            <q-resize-observer @resize="onResize" />
+            <q-card-section>
+              <div class="text-center q-mt-md">
+                <q-avatar :size="sizeImg" rounded>
+                  <img
+                    :src="profileImg"
+                    style="border-radius: 10px; object-fit: cover"
+                  />
+                </q-avatar>
+              </div>
+            </q-card-section>
+
+            <q-list class="q-mt-md">
+              <q-item>
+                <q-item-section>
+                  <q-item-label class="text-grey-6"
+                    >ตำแหน่งในสายงาน</q-item-label
+                  >
+                  <q-item-label>{{
+                    formData.position ? formData.position : "-"
+                  }}</q-item-label>
+                </q-item-section>
+              </q-item>
+              <q-item>
+                <q-item-section>
+                  <q-item-label class="text-grey-6">ระดับ</q-item-label>
+                  <q-item-label>{{
+                    formData.posLevelName ? formData.posLevelName : "-"
+                  }}</q-item-label>
+                </q-item-section>
+              </q-item>
+              <q-item>
+                <q-item-section>
+                  <q-item-label class="text-grey-6">สังกัด</q-item-label>
+                  <q-item-label>{{
+                    formData.org ? formData.org : "-"
+                  }}</q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+        <div class="col-12 row">
+          <q-card bordered class="col-12 q-pa-md">
+            <div class="row">
+              <!-- <q-btn
+                @click="router.push(`/probation/add/${profileId}`)"
+                size="12px"
+                flat
+                round
+                color="add"
+                icon="mdi-plus"
+              >
+                <q-tooltip>เพิ่มงานที่ได้รับมอบหมาย</q-tooltip>
+              </q-btn> -->
+              <q-space />
+              <q-input
+                class="inputgreen"
+                outlined
+                dense
+                v-model="filter"
+                label="ค้นหา"
+                :style="mode ? `max-width: 200px` : `max-width: 150px`"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    v-if="filter !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="filter = ''"
+                  />
+                  <q-icon
+                    v-else
+                    name="search"
+                    class="cursor-pointer"
+                    @click="filter = ''"
+                  />
+                </template>
+              </q-input>
+              <q-select
+                v-if="$q.screen.gt.xs"
+                class="q-ml-sm"
+                dense
+                multiple
+                outlined
+                emit-value
+                map-options
+                options-cover
+                options-dense
+                option-value="name"
+                style="min-width: 150px"
+                v-model="visibleColumns"
+                :options="columns"
+                :display-value="$q.lang.table.columns"
+              />
+            </div>
+            <div class="q-mt-sm">
+              <d-table
+                flat
+                dense
+                bordered
+                ref="table"
+                virtual-scroll
+                :rows="rows"
+                :columns="columns"
+                :grid="!$q.screen.gt.xs"
+                :filter="filter"
+                :rows-per-page-options="[10, 25, 50, 100]"
+                :visible-columns="visibleColumns"
+                :virtual-scroll-sticky-size-start="48"
+              >
+                <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-if="$q.screen.gt.xs" v-slot:body="props">
+                  <q-tr :props="props" class="cursor-pointer">
+                    <q-td
+                      v-for="(col, index) in props.cols"
+                      :key="col.name"
+                      @click="onDetail(props.row.id)"
+                    >
+                      <div v-if="col.name == 'no'">
+                        {{ props.rowIndex + 1 }}
+                      </div>
+                      <div v-else-if="col.name == 'status'">
+                        {{ props.row.status ? props.row.status : "-" }}
+                      </div>
+                      <div v-else>
+                        {{ col.value ? col.value : "-" }}
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+                <template v-else v-slot:item="props">
+                  <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+                    <q-card bordered flat>
+                      <q-list dense class="q-mt-lg relative-position">
+                        <q-btn
+                          icon="info"
+                          color="info"
+                          flat
+                          dense
+                          round
+                          size="14px"
+                          class="absolute_button"
+                          @click="onDetail(props.row.id)"
+                        >
+                          <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
+                        </q-btn>
+                        <q-item v-for="col in props.cols" :key="col.name">
+                          <q-item-section class="fix_top">
+                            <q-item-label
+                              class="text-grey-6 text-weight-medium"
+                              >{{ col.label }}</q-item-label
+                            >
+                          </q-item-section>
+                          <q-item-section class="fix_top">
+                            <q-item-label
+                              class="text-dark text-weight-medium"
+                              >{{ col.value ? col.value : "-" }}</q-item-label
+                            >
+                          </q-item-section>
+                        </q-item>
+                      </q-list>
+                    </q-card>
+                  </div>
+                </template>
+                <template v-slot:no-data>
+                  <div
+                    class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
+                  >
+                    <span> ไม่พบข้อมูล </span>
+                  </div>
+                </template>
+              </d-table>
+            </div>
+          </q-card>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.absolute_button {
+  position: absolute;
+  right: 5px;
+  top: -20px;
+}
+
+.fix_top {
+  justify-content: start !important;
+}
+</style>