From 3e17d3a25aa686b2b9087b209385fcdceefd02e9 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 26 Feb 2025 14:25:06 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4=20=3D=3D>=20=E0=B8=82=E0=B9=89=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=95=E0=B8=B3=E0=B9=81=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=99=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dialogs/PopupPersonalNew.vue   |  27 ++++-
 .../GovernmentInformation/07_Position.vue     |  38 ++++++
 .../21_report/components/CardPosition.vue     |  67 +++++++++++
 .../21_report/views/02_reportRegistry.vue     | 108 +++++++++++-------
 4 files changed, 198 insertions(+), 42 deletions(-)
 create mode 100644 src/modules/21_report/components/CardPosition.vue

diff --git a/src/components/Dialogs/PopupPersonalNew.vue b/src/components/Dialogs/PopupPersonalNew.vue
index 5bb0f24ac..4afdf0b48 100644
--- a/src/components/Dialogs/PopupPersonalNew.vue
+++ b/src/components/Dialogs/PopupPersonalNew.vue
@@ -14,6 +14,8 @@ import type { Avatar } from "@/components/information/interface/response/avatar"
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 
+import CardPosition from "@/modules/21_report/components/CardPosition.vue";
+
 /** use*/
 const route = useRoute();
 const mixin = useCounterMixin();
@@ -24,6 +26,7 @@ const { showLoader, hideLoader, messageError, date2Thai } = mixin;
 
 const isEmployee = defineModel("isEmployee", { type: String });
 const empType = ref<string>("officer");
+const checkRoute = ref<boolean>(route.name == "reportRegistry");
 /** props*/
 const props = defineProps({
   id: {
@@ -172,7 +175,9 @@ async function fetchProfileGov(id: string) {
 }
 
 function redirecToRegistry() {
-  router.push(`/registry-${props.type == 'employee' ? 'employee':'officer'}/${props.id}`);
+  router.push(
+    `/registry-${props.type == "employee" ? "employee" : "officer"}/${props.id}`
+  );
   modal.value = false;
 }
 
@@ -422,7 +427,11 @@ async function fetchProfile(id: string, avatarName: string) {
                         :model-value="
                           goverment.positionType ? goverment.positionType : '-'
                         "
-                        :label="props.type == 'employee' ? 'กลุ่มงาน':'ประเภทตำแหน่ง'"
+                        :label="
+                          props.type == 'employee'
+                            ? 'กลุ่มงาน'
+                            : 'ประเภทตำแหน่ง'
+                        "
                       />
                     </div>
                     <div class="col-xs-6 col-md-6">
@@ -434,7 +443,11 @@ async function fetchProfile(id: string, avatarName: string) {
                             ? goverment.positionLevel
                             : '-'
                         "
-                        :label="props.type == 'employee' ? 'ระดับชั้นงาน':'ระดับตำแหน่ง'"
+                        :label="
+                          props.type == 'employee'
+                            ? 'ระดับชั้นงาน'
+                            : 'ระดับตำแหน่ง'
+                        "
                       />
                     </div>
                     <div
@@ -470,6 +483,14 @@ async function fetchProfile(id: string, avatarName: string) {
                   </div>
                 </div>
               </q-card>
+
+              <q-card
+                bordered
+                style="border: 1px solid #d6dee1"
+                v-if="checkRoute"
+              >
+                <CardPosition :id="props.id" :type="props.type" />
+              </q-card>
             </div>
           </q-scroll-area>
         </div>
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue
index b37621bfb..e73da8886 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue
@@ -289,6 +289,27 @@ const posExecutiveOptionMain = ref<DataOption[]>([]);
 
 const docOption = ref<DataOption2[]>(store.optionTemplateDoc);
 
+const cardData = ref<any[]>([
+  {
+    label: "ระยะเวลาดำรงตำแหน่งในสายงาน",
+    data: [
+      { name: "ตำแหน่ง", time: "1 ปี" },
+      { name: "ตำแหน่ง", time: "1 ปี" },
+      { name: "ตำแหน่ง", time: "1 ปี" },
+      { name: "ตำแหน่ง", time: "1 ปี" },
+      { name: "ตำแหน่ง", time: "1 ปี" },
+    ],
+  },
+  {
+    label: "ระยะเวลาดำรงตำแหน่งตามระดับ",
+    data: [{ name: "ละดับ", time: "1 ปี" }],
+  },
+  {
+    label: "ระยะเวลาดำรงตำแหน่งทางการบริหาร",
+    data: [{ name: "ตำแหน่งทางการบริหาร", time: "1 ปี" }],
+  },
+]);
+
 /** function fetch รายการ ตำแหน่งเงินเดือน*/
 async function fetchListSalary() {
   showLoader();
@@ -715,7 +736,24 @@ onMounted(() => {
   fetchListSalary();
 });
 </script>
+
 <template>
+  <div class="row q-col-gutter-sm q-pb-sm">
+    <div class="col" v-for="(item, index) in cardData" :key="index">
+      <q-card bordered class="col-12" style="border: 1px solid #d6dee1">
+        <div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
+          {{ item.label }}
+        </div>
+        <div class="col-12"><q-separator /></div>
+        <q-card-section class="q-pt-none" style="min-height: 200px">
+          <li v-for="data in item.data" :key="data.id">
+            {{ data.name }} {{ data.time }}
+          </li>
+        </q-card-section>
+      </q-card>
+    </div>
+  </div>
+
   <div class="row items-center q-gutter-x-sm q-pb-sm">
     <q-btn
       v-if="!isLeave && checkPermission($route)?.attrIsUpdate"
diff --git a/src/modules/21_report/components/CardPosition.vue b/src/modules/21_report/components/CardPosition.vue
new file mode 100644
index 000000000..4d1b9a1e1
--- /dev/null
+++ b/src/modules/21_report/components/CardPosition.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+
+/** props*/
+const props = defineProps({
+  id: {
+    type: String,
+    requier: true,
+  },
+
+  type: { type: String, default: "" },
+});
+
+const cardData = ref<any[]>([
+  {
+    label: "ระยะเวลาดำรงตำแหน่งในสายงาน",
+    data: [
+      { name: "ตำแหน่ง", time: "1 ปี" },
+      { name: "ตำแหน่ง", time: "1 ปี" },
+      { name: "ตำแหน่ง", time: "1 ปี" },
+      { name: "ตำแหน่ง", time: "1 ปี" },
+      { name: "ตำแหน่ง", time: "1 ปี" },
+    ],
+  },
+  {
+    label: "ระยะเวลาดำรงตำแหน่งตามระดับ",
+    data: [{ name: "ละดับ", time: "1 ปี" }],
+  },
+  {
+    label: "ระยะเวลาดำรงตำแหน่งทางการบริหาร",
+    data: [{ name: "ตำแหน่งทางการบริหาร", time: "1 ปี" }],
+  },
+]);
+
+onMounted(() => {
+  console.log(props.id);
+  console.log(props.type);
+});
+</script>
+
+<template>
+  <div class="q-pa-md">
+    <div class="text-weight-bold row items-center">
+      <q-icon name="mdi-account-tie" color="grey-7" />
+      <span class="q-ml-md">ข้อมูลตำแหน่ง </span>
+    </div>
+    <div class="row q-pa-sm">
+      <q-list flat bordered class="col-12" style="border-radius: 5px;">
+        <q-card flat v-for="(item, index) in cardData" :key="index">
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-grey-6">{{ item.label }}</q-item-label>
+              <q-item-label
+                ><li v-for="data in item.data" :key="data.id">
+                  {{ data.name }} {{ data.time }}
+                </li>
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-separator spaced v-if="index !==  2"  />
+        </q-card>
+      </q-list>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/21_report/views/02_reportRegistry.vue b/src/modules/21_report/views/02_reportRegistry.vue
index cac6c4cff..50ec05646 100644
--- a/src/modules/21_report/views/02_reportRegistry.vue
+++ b/src/modules/21_report/views/02_reportRegistry.vue
@@ -301,7 +301,7 @@ const columns = computed<QTableProps["columns"]>(() => {
     {
       name: "lengthPosition",
       align: "left",
-      label: "ระยะเวลาดำรงตำแหน่งในเเต่ละระดับ",
+      label: "ระยะเวลาดำรงตำแหน่งในระดับปัจจุบัน",
       sortable: true,
       field: "lengthPosition",
       headerStyle: "font-size: 14px",
@@ -318,6 +318,12 @@ const visibleColumns = computed<string[]>(() => {
     : visibleColumnsBase.value.filter((e: string) => e !== "positionExecutive");
 });
 
+const typeTerm = ref<string>("");
+const rangeTerm = ref<RangeAge>({
+  min: 0,
+  max: 20,
+});
+
 function onOpenOrg() {
   modalOrg.value = true;
 }
@@ -616,6 +622,10 @@ function clearFilter() {
 
   expandedModal.value = false;
   filterTree.value = "";
+
+  typeTerm.value = "";
+  rangeTerm.value.min = 0;
+  rangeTerm.value.max = 20;
 }
 
 watch(
@@ -1421,48 +1431,68 @@ onMounted(async () => {
                       </q-select>
                     </div>
 
+                    <div class="col-12"><q-separator /></div>
                     <div class="col-12">
-                      <!--  <q-btn-dropdown
-                        :label="
-                          sortBy
-                            ? sortBy == 'DESC'
-                              ? `เรียงตามวันที่บรรจุเเต่งตั้ง
-                                (เก่า-ล่าสุด)`
-                              : `เรียงตามวันที่บรรจุเเต่งตั้ง
-                                (ล่าสุด-เก่า)`
-                            : 'ลำดับการเเสดงผล'
-                        "
-                        dropdown-icon="mdi-chevron-down"
-                        rounded
-                        text-color="primary"
-                        dense
-                        padding="xs md"
-                        label-color="white"
-                        outline
-                      >
-                        <q-list>
-                          <q-item clickable v-close-popup @click="sortBy = 'ASC'">
-                            <q-item-section>
-                              <q-item-label
-                                >เรียงตามวันที่บรรจุเเต่งตั้ง
-                                (ล่าสุด-เก่า)</q-item-label
-                              >
-                            </q-item-section>
-                          </q-item>
-
-                          <q-item clickable v-close-popup @click="sortBy = 'DESC'">
-                            <q-item-section>
-                              <q-item-label
-                                >เรียงตามวันที่บรรจุเเต่งตั้ง
-                                (เก่า-ล่าสุด)</q-item-label
-                              >
-                            </q-item-section>
-                          </q-item>
-                        </q-list>
-                      </q-btn-dropdown> -->
+                      <div class="">
+                        <q-radio
+                          v-model="typeTerm"
+                          val="position"
+                          label="ระยะเวลาดำรงตำแหน่งปัจจุบัน"
+                          size="xs"
+                          class="text-grey-8"
+                        />
+                        <q-radio
+                          v-model="typeTerm"
+                          val="level"
+                          label="ระยะเวลาดำรงตำแหน่งในระดับปัจจุบัน"
+                          size="xs"
+                          class="text-grey-8"
+                        />
+                      </div>
+                      <div class="q-pa-md" v-if="typeTerm">
+                        <q-range
+                          v-model="rangeTerm"
+                          :min="0"
+                          :max="20"
+                          label
+                          color="primary"
+                          track-size="4px"
+                          thumb-size="16px"
+                          switch-label-side
+                          dense
+                        >
+                        </q-range>
+                        <div
+                          class="col-12 justify-around items-center row no-wrap q-pt-sm"
+                        >
+                          <div>
+                            <q-input
+                              readonly
+                              type="number"
+                              style="max-width: 60px"
+                              v-model="rangeTerm.min"
+                              dense
+                              standout="bg-teal text-white"
+                            />
+                          </div>
+                          <div class="q-px-sm text-grey-8">-</div>
+                          <div>
+                            <q-input
+                              readonly
+                              type="number"
+                              style="max-width: 60px"
+                              v-model="rangeTerm.max"
+                              dense
+                              standout="bg-teal text-white"
+                            />
+                          </div>
+                        </div>
+                      </div>
                     </div>
                   </div>
+
                   <div class="col-12"><q-separator /></div>
+
                   <div class="col-12 row q-pa-sm">
                     <q-space />
                     <q-btn