From 3744b3e0d8715d75fc3d0f9ebfa8c09cbae9d000 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Mon, 15 Jul 2024 15:29:15 +0700
Subject: [PATCH] =?UTF-8?q?KPI=20=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B2=E0=B8=A1=20user?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Tab/Dialog/DialogGovernment.vue           |  11 +
 src/modules/14_KPI/router.ts                  |  13 +
 src/modules/14_KPI/views/detailView.vue       | 339 +++++++++----
 src/modules/14_KPI/views/mainDetail.vue       | 451 ++++++++++++++++++
 4 files changed, 724 insertions(+), 90 deletions(-)
 create mode 100644 src/modules/14_KPI/views/mainDetail.vue

diff --git a/src/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue b/src/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue
index 032e5c1e7..f9a23e82f 100644
--- a/src/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue
+++ b/src/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue
@@ -153,6 +153,16 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
     format: (val) => statusText(val),
   },
+  {
+    name: "commandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "commandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => statusText(val),
+  },
 ]);
 const visibleColumns = ref<string[]>([
   "no",
@@ -166,6 +176,7 @@ const visibleColumns = ref<string[]>([
   "dateEnd",
   "createdAt",
   "status",
+  "commandNo",
 ]);
 
 const statusText = (val: string) => {
diff --git a/src/modules/14_KPI/router.ts b/src/modules/14_KPI/router.ts
index be79872b2..5d9f8bd43 100644
--- a/src/modules/14_KPI/router.ts
+++ b/src/modules/14_KPI/router.ts
@@ -1,4 +1,7 @@
 const roundPage = () => import("@/modules/14_KPI/views/round.vue");
+const probationDetail = () => import("@/modules/14_KPI/views/mainDetail.vue");
+
+
 // const IndicatorByPlan = () =>
 //   import("@/modules/14_KPI/views/indicatorByPlan.vue");
 // const IndicatorByPlanDetail = () =>
@@ -80,4 +83,14 @@ export default [
       Role: "evaluateKPI",
     },
   },
+  {
+    path: "/probation-detail/:id",
+    name: "probationMainDetail",
+    component: probationDetail,
+    meta: {
+      Auth: true,
+      Key: [1.1],
+      Role: "evaluateKPI",
+    },
+  },
 ];
diff --git a/src/modules/14_KPI/views/detailView.vue b/src/modules/14_KPI/views/detailView.vue
index db8f5f5d1..68257f34d 100644
--- a/src/modules/14_KPI/views/detailView.vue
+++ b/src/modules/14_KPI/views/detailView.vue
@@ -62,7 +62,7 @@ const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
 const store = useKpiDataStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, dialogConfirm, success } = mixin;
+const { showLoader, hideLoader, messageError, dialogConfirm, success ,findOrgName} = mixin;
 
 const evaluatorIdOp = ref<DataOption[]>([]);
 const commanderIdOp = ref<DataOption[]>([]);
@@ -403,7 +403,8 @@ function openGovernment() {
   modalGovernment.value = true;
 }
 function openStatus() {
-  modalStatus.value = true;
+  router.push(`/probation-detail/${store.dataEvaluation.profileId}`);
+  // modalStatus.value = true;
 }
 
 function sendToEvauator() {
@@ -451,6 +452,49 @@ function goToSummary() {
   );
 }
 
+const modalEvaluatorDetail = ref<boolean>(false);
+const topic = ref<string>("");
+function viewEvaluatorDetail(profileId: string, type: string) {
+  modalEvaluatorDetail.value = true;
+  topic.value =
+    type == "evaluator"
+      ? "ข้อมูลของผู้ประเมิน"
+      : type == "commander"
+      ? "ข้อมูลของผู้บังคับบัญชาเหนือขึ้นไป"
+      : "ข้อมูลของผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง";
+  fetchProfileEvaluator(profileId);
+}
+
+const evaluator = ref<any>({
+  fullName: "",
+  position: "",
+  avartar: "",
+  posTypeName: "",
+  posLevelName: "",
+  org: "",
+});
+async function fetchProfileEvaluator(id: string) {
+  showLoader();
+  http
+    .get(config.API.profilePosition + `/${id}`)
+    .then((res) => {
+      console.log(res.data.result);
+      const data = res.data.result;
+      evaluator.value.fullName =
+        data.prefix + data.firstName + " " + data.lastName;
+      evaluator.value.position = data.position;
+      evaluator.value.posTypeName = data.posTypeName;
+      evaluator.value.posLevelName = data.posLevelName;
+      evaluator.value.org = findOrgName(data);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 onMounted(async () => {
 
   store.isUpdate = await false;
@@ -883,103 +927,155 @@ onMounted(async () => {
         <q-separator />
         <q-card-section>
           <div class="column q-gutter-sm">
-            <q-select
-              :readonly="
-                !(
-                  store.dataEvaluation.evaluationStatus === 'NEW' &&
-                  store.rolePerson === 'USER'
-                )
-              "
-              v-model="evaluatorId"
-              outlined
-              label="ผู้ประเมิน"
-              dense
-              option-label="name"
-              option-value="id"
-              :options="evaluatorIdOp"
-              class="inputgreen"
-              map-options
-              hide-bottom-space
-              lazy-rules
-              :rules="[ (val:string) => !!val ||
+            <div class="row">
+              <div class="col-10">
+                <q-select
+                  :readonly="
+                    !(
+                      store.dataEvaluation.evaluationStatus === 'NEW' &&
+                      store.rolePerson === 'USER'
+                    )
+                  "
+                  v-model="evaluatorId"
+                  outlined
+                  label="ผู้ประเมิน"
+                  dense
+                  option-label="name"
+                  option-value="id"
+                  :options="evaluatorIdOp"
+                  class="inputgreen"
+                  map-options
+                  hide-bottom-space
+                  lazy-rules
+                  :rules="[ (val:string) => !!val ||
             `${'กรุณาเลือกผู้ประเมิน'}`, ]"
-              use-input
-              @filter="(inputValue:any,
+                  use-input
+                  @filter="(inputValue:any,
             doneFn:Function) => filterOption(inputValue, doneFn,'evaluatorIdOp'
             ) "
-            />
-            <q-select
-              :readonly="
-                !(
-                  store.dataEvaluation.evaluationStatus === 'NEW' &&
-                  store.rolePerson === 'USER'
-                )
-              "
-              v-model="commanderId"
-              outlined
-              label="ผู้บังคับบัญชาเหนือขึ้นไป"
-              dense
-              option-label="name"
-              option-value="id"
-              :options="commanderIdOp"
-              map-options
-              class="inputgreen"
-              use-input
-              @filter="(inputValue:any,
+                />
+              </div>
+              <div class="col-2 q-pa-sm text-right">
+                <q-icon
+                  v-if="evaluatorId"
+                  name="mdi-eye"
+                  size="sm"
+                  color="info"
+                  class="cursor-pointer"
+                  @click="viewEvaluatorDetail(evaluatorId.id, 'evaluator')"
+                >
+                  <q-tooltip>ดูข้อมูลผู้ประเมิน</q-tooltip>
+                </q-icon>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-10">
+                <q-select
+                  :readonly="
+                    !(
+                      store.dataEvaluation.evaluationStatus === 'NEW' &&
+                      store.rolePerson === 'USER'
+                    )
+                  "
+                  v-model="commanderId"
+                  outlined
+                  label="ผู้บังคับบัญชาเหนือขึ้นไป"
+                  dense
+                  option-label="name"
+                  option-value="id"
+                  :options="commanderIdOp"
+                  map-options
+                  class="inputgreen"
+                  use-input
+                  @filter="(inputValue:any,
                     doneFn:Function) => filterOption(inputValue, doneFn,'commanderIdOp'
                     ) "
-            >
-              <template
-                v-if="
-                  store.dataEvaluation.evaluationStatus === 'NEW' &&
-                  store.rolePerson === 'USER' &&
-                  commanderId
-                "
-                v-slot:append
-              >
+                >
+                  <template
+                    v-if="
+                      store.dataEvaluation.evaluationStatus === 'NEW' &&
+                      store.rolePerson === 'USER' &&
+                      commanderId
+                    "
+                    v-slot:append
+                  >
+                    <q-icon
+                      name="cancel"
+                      @click.stop.prevent="commanderId = null"
+                      class="cursor-pointer"
+                    />
+                  </template>
+                </q-select>
+              </div>
+              <div class="col-2 q-pa-sm text-right">
                 <q-icon
-                  name="cancel"
-                  @click.stop.prevent="commanderId = null"
+                  v-if="commanderId"
+                  name="mdi-eye"
+                  size="sm"
+                  color="info"
                   class="cursor-pointer"
-                />
-              </template>
-            </q-select>
-            <q-select
-              :readonly="
-                !(
-                  store.dataEvaluation.evaluationStatus === 'NEW' &&
-                  store.rolePerson === 'USER'
-                )
-              "
-              v-model="commanderHighId"
-              outlined
-              label="ผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง"
-              dense
-              option-label="name"
-              option-value="id"
-              :options="commanderHighOp"
-              map-options
-              use-input
-              class="inputgreen"
-              @filter="(inputValue:any,
+                  @click="viewEvaluatorDetail(commanderId.id, 'commander')"
+                >
+                  <q-tooltip>ดูข้อมูลผู้บังคับบัญชาเหนือขึ้นไป</q-tooltip>
+                </q-icon>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-10">
+                <q-select
+                  :readonly="
+                    !(
+                      store.dataEvaluation.evaluationStatus === 'NEW' &&
+                      store.rolePerson === 'USER'
+                    )
+                  "
+                  v-model="commanderHighId"
+                  outlined
+                  label="ผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง"
+                  dense
+                  option-label="name"
+                  option-value="id"
+                  :options="commanderHighOp"
+                  map-options
+                  use-input
+                  class="inputgreen"
+                  @filter="(inputValue:any,
                     doneFn:Function) => filterOption(inputValue, doneFn,'commanderHighOp'
                     ) "
-            >
-              <template
-                v-if="
-                  store.dataEvaluation.evaluationStatus === 'NEW' &&
-                  store.rolePerson === 'USER' &&
-                  commanderHighId
-                "
-                v-slot:append
-              >
+                >
+                  <template
+                    v-if="
+                      store.dataEvaluation.evaluationStatus === 'NEW' &&
+                      store.rolePerson === 'USER' &&
+                      commanderHighId
+                    "
+                    v-slot:append
+                  >
+                    <q-icon
+                      name="cancel"
+                      @click.stop.prevent="commanderHighId = null"
+                      class="cursor-pointer"
+                    />
+                  </template>
+                </q-select>
+              </div>
+              <div class="col-2 q-pa-sm text-right">
                 <q-icon
-                  name="cancel"
-                  @click.stop.prevent="commanderHighId = null"
+                  v-if="commanderHighId"
+                  name="mdi-eye"
+                  size="sm"
+                  color="info"
                   class="cursor-pointer"
-                />
-              </template>
-            </q-select>
+                  @click="
+                    viewEvaluatorDetail(commanderHighId.id, 'commanderHigh')
+                  "
+                >
+                  <q-tooltip
+                    >ดูข้อมูลผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง</q-tooltip
+                  >
+                </q-icon>
+              </div>
+            </div>
           </div>
         </q-card-section>
         <q-separator />
@@ -999,6 +1095,67 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
+  <q-dialog v-model="modalEvaluatorDetail" persistent>
+    <q-card style="width: 700px; max-width: 80vw; min-height: 40vh">
+      <DialogHeader
+        :tittle="topic"
+        :close="() => (modalEvaluatorDetail = false)"
+      />
+      <q-separator />
+
+      <q-card>
+        <div class="q-pa-md">
+          <span class="text-teal text-weight-bold text-body2">{{
+            evaluator.fullName
+          }}</span>
+        </div>
+
+        <q-card-section class="q-pa-md">
+          <div class="row">
+            <div class="col-12 column justify-center no-wrap">
+              <div class="row text-grey-6">
+                <div class="col-3">ตำแหน่งในสายงาน</div>
+                <div class="col-3">ตำแหน่งประเภท</div>
+                <div class="col-3">ตำแหน่งทางการบริหาร</div>
+                <div class="col-3">สังกัด</div>
+              </div>
+              <div class="row">
+                <div class="col-3">
+                  {{ evaluator.position ? evaluator.position : "-" }}
+                </div>
+                <div class="col-3">
+                  {{ evaluator.posTypeName ? evaluator.posTypeName : "-" }}
+                  {{
+                    evaluator.posLevelName
+                      ? ` (${evaluator.posLevelName})`
+                      : "-"
+                  }}
+                </div>
+                <div class="col-3">
+                  {{
+                    evaluator.posExecutiveName
+                      ? evaluator.posExecutiveName
+                      : "-"
+                  }}
+                </div>
+                <div class="col-3">
+                  {{ evaluator.org ? evaluator.org : "-" }}
+                </div>
+              </div>
+
+              <div class="row q-mt-md text-grey-6">
+                <div class="col-12">รักษาการในตำแหน่ง/การรักษาราชการแทน</div>
+              </div>
+              <div class="row">
+                <div class="col-12">-</div>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+      </q-card>
+    </q-card>
+  </q-dialog>
+
   <!-- <q-dialog v-model="modalScore" persistent>
     <q-card bordered style="width: 50vh">
       <q-form greedy @submit.prevent @validation-success="onSubmitScore">
@@ -1076,10 +1233,12 @@ onMounted(async () => {
     </q-card>
   </q-dialog> -->
   <DialogGovernment v-model:modal="modalGovernment" />
-  <DialogStatus
+
+
+  <!-- <DialogStatus
     v-model:modal="modalStatus"
     v-model:is-probation="store.dataProfile.isProbation"
-  />
+  /> -->
 </template>
 <style>
 .bg-toolbar {
diff --git a/src/modules/14_KPI/views/mainDetail.vue b/src/modules/14_KPI/views/mainDetail.vue
new file mode 100644
index 000000000..c2a422e26
--- /dev/null
+++ b/src/modules/14_KPI/views/mainDetail.vue
@@ -0,0 +1,451 @@
+<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";
+
+interface ListMain {
+  id: string
+  round_no: number;
+  date_start: string
+  date_finish: string
+  mentors: string
+  commander: string
+  chairman: string
+}
+
+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.profilePosition+`/${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.probationGetAssignList(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="toptitle 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>
+
+
+</template>
+<style scoped>
+.absolute_button {
+  position: absolute;
+  right: 5px;
+  top: -20px;
+}
+
+.fix_top {
+  justify-content: start !important;
+}
+</style>