เพิ่ม filter dateAppoint

src/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const isLeave = defineModel<boolean>("isLeave", {
+  required: true,
+});
+</script>
+
+<template>
+  <h5>ตำแหน่ง</h5>
+</template>
+
+<style scoped></style>

src/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue

@@ -8,7 +8,7 @@ import Leave from "@/modules/04_registryPerson/components/detail/GovernmentInfor
 import PerformSpecialWork from "@/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue"; //ปฏิบัติราชการพิเศษ
 import ActingPos from "@/modules/04_registryPerson/components/detail/GovernmentInformation/05_ActingPos.vue"; //รักษาการในตำแหน่ง
 import HelpGovernmentDetail from "@/modules/04_registryPerson/components/detail/GovernmentInformation/06_HelpGovernment.vue"; //ช่วยราชการ
-
+import Postion from "@/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue";
 import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
 
 const tab = ref<string>("1");
@@ -34,6 +34,7 @@ const storeRegistry = useRegistryNewDataStore();
     class="text-grey q-pl-sm"
   >
     <q-tab name="1" label="ข้อมูลราชการ" />
+    <q-tab name="7" label="ตำแหน่ง" />
     <q-tab name="2" label="วินัย" />
     <q-tab name="3" label="การลา" />
     <q-tab name="4" label="ปฏิบัติราชการพิเศษ" />
@@ -61,6 +62,9 @@ const storeRegistry = useRegistryNewDataStore();
     <q-tab-panel name="6">
       <HelpGovernmentDetail :is-leave="storeRegistry.isLeave" />
     </q-tab-panel>
+    <q-tab-panel name="7">
+      <Postion :is-leave="storeRegistry.isLeave" />
+    </q-tab-panel>
   </q-tab-panels>
 </template>
 

src/modules/04_registryPerson/interface/request/Main.ts

@@ -14,6 +14,7 @@ interface FormFilter {
   nodeId?: string | null;
   node?: string | null | number;
   retireType?: null | string;
+  dateAppoint?: string;
 }
 
 interface FormAddPerson {
@@ -56,6 +57,7 @@ interface QueryParams {
   nodeId?: string;
   isAll?: boolean;
   retireType?: string | null;
+  dateAppoint?: string;
 }
 
 interface FormChangeName {

src/modules/04_registryPerson/store.ts

@@ -20,7 +20,7 @@ export const useRegistryNewDataStore = defineStore("registryNew", () => {
     { id: "perm", name: "ลูกจ้างประจำ" },
     // { id: "temp", name: "ลูกจ้างชั่วคราว" },
   ]);
-  const citizenId = ref<string>('')
+  const citizenId = ref<string>("");
   const posTypeOps = ref<DataOption[]>([]);
   const posTypeMain = ref<DataType[]>([]);
   const posLevelOps = ref<DataOption[]>([]);
@@ -73,6 +73,7 @@ export const useRegistryNewDataStore = defineStore("registryNew", () => {
     node: null,
     searchType: "fullName",
     retireType: null,
+    dateAppoint: "",
   });
 
   const labelOption = reactive({
@@ -130,6 +131,11 @@ export const useRegistryNewDataStore = defineStore("registryNew", () => {
     { id: "RETIRE_RESIGN_EMP", name: "ให้ออกจากราชการ" },
   ]);
 
+  const displayOrderOps = ref<DataOption[]>([
+    { id: "ASC", name: "เรียงตามวันที่บรรจุแต่งตั้ง (ล่าสุด-เก่า)" },
+    { id: "DESC", name: "เรียงตามวันที่บรรจุแต่งตั้ง (เก่า-ล่าสุด)" },
+  ]);
+
   return {
     fetchType,
     fetchLevel,
@@ -148,6 +154,7 @@ export const useRegistryNewDataStore = defineStore("registryNew", () => {
     convertTypeRetired,
     retireTypeOps,
     retireTypeEmpOps,
-    citizenId
+    citizenId,
+    displayOrderOps,
   };
 });

src/modules/04_registryPerson/views/listView.vue

@@ -128,6 +128,10 @@ async function fetchDataPerson() {
     queryParams.isAll = store.formFilter.isAll;
   }
 
+  if (store.formFilter.dateAppoint) {
+    queryParams.dateAppoint = store.formFilter.dateAppoint;
+  }
+
   await http
     .get(
       config.API.registryNew(empType.value !== "officer" ? "-employee" : ""),
@@ -215,7 +219,6 @@ function selectType() {
     fetchOptionGroup();
   } else {
     store.formFilter.isProbation = false;
-
     fetchType();
   }
 
@@ -224,6 +227,7 @@ function selectType() {
     store.labelOption.posType = "ทั้งหมด";
     store.labelOption.posLevel = "ทั้งหมด";
     store.formFilter.type = empType.value;
+    store.formFilter.dateAppoint = "";
     store.labelOption.node =
       empType.value === "officer"
         ? "เลือกหน่วยงาน/ส่วนราชการ"
@@ -237,7 +241,8 @@ function selectType() {
       store.labelOption.posLevel != "ทั้งหมด" ||
       store.formFilter.isShowRetire ||
       store.formFilter.isProbation ||
-      store.formFilter.nodeId != null
+      store.formFilter.nodeId != null ||
+      store.formFilter.dateAppoint != ""
     ) {
       store.formFilter.page = 1;
       fetchDataPerson();
@@ -282,6 +287,12 @@ function selectRetireType(item: DataOption) {
   fetchDataPerson();
 }
 
+function selectDisplayOrderType(item: DataOption) {
+  store.formFilter.page = 1;
+  store.formFilter.dateAppoint = item.id;
+  fetchDataPerson();
+}
+
 /**
  * function เคลีย์ตัวเลือก
  * @param t ประเภทตัวเลือก
@@ -362,12 +373,12 @@ watch(selectNode, () => {
   isLoad.value && hideLoader();
 });
 
-/** hook เมื่อมีการเรียกใช้ Components*/
 function getSearch() {
   store.formFilter.page = 1;
   fetchDataPerson();
 }
 
+/** hook เมื่อมีการเรียกใช้ Components*/
 onMounted(async () => {
   await Promise.all([selectType(), fetchTree()]);
 });
@@ -582,7 +593,6 @@ onMounted(async () => {
               label="แสดงข้อมูลผู้พ้นจากราชการ"
               @update:model-value="getSearch"
             />
-
             <q-btn-dropdown
               v-if="store.formFilter.isShowRetire"
               rounded
@@ -622,6 +632,41 @@ onMounted(async () => {
                 </q-item>
               </q-list>
             </q-btn-dropdown>
+
+            <q-separator inset vertical class="lineFil" />
+            <q-btn-dropdown
+              rounded
+              flat
+              dense
+              label-color="white"
+              dropdown-icon="mdi-chevron-down"
+              class="q-px-sm"
+            >
+              <template v-slot:label>
+                {{
+                  `ลำดับการแสดผล ${
+                    store.formFilter.dateAppoint
+                      ? store.formFilter.dateAppoint === "ASC"
+                        ? "ล่าสุด-เก่า"
+                        : "เก่า-ล่าสุด"
+                      : ""
+                  }`
+                }}
+              </template>
+              <q-list>
+                <q-item
+                  v-for="(item, index) in store.displayOrderOps"
+                  :key="index"
+                  clickable
+                  v-close-popup
+                  @click="selectDisplayOrderType(item)"
+                >
+                  <q-item-section>
+                    <q-item-label>{{ item.name }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
           </div>
 
           <div
@@ -687,6 +732,41 @@ onMounted(async () => {
                 </q-item>
               </q-list>
             </q-btn-dropdown>
+
+            <q-separator inset vertical class="lineFil" />
+            <q-btn-dropdown
+              rounded
+              flat
+              dense
+              label-color="white"
+              dropdown-icon="mdi-chevron-down"
+              class="q-px-sm"
+            >
+              <template v-slot:label>
+                {{
+                  `ลำดับการแสดผล ${
+                    store.formFilter.dateAppoint
+                      ? store.formFilter.dateAppoint === "ASC"
+                        ? "ล่าสุด-เก่า"
+                        : "เก่า-ล่าสุด"
+                      : ""
+                  }`
+                }}
+              </template>
+              <q-list>
+                <q-item
+                  v-for="(item, index) in store.displayOrderOps"
+                  :key="index"
+                  clickable
+                  v-close-popup
+                  @click="selectDisplayOrderType(item)"
+                >
+                  <q-item-section>
+                    <q-item-label>{{ item.name }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
           </div>
         </div>
       </div>