ประวัติถือครองตำแหน่ง

src/modules/04_registryNew/components/DialogHistory.vue

@@ -5,23 +5,43 @@ import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-/** importType*/
+/**
-import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
+ * importType*
+ */
+import type { QTableProps } from "quasar";
 import type { QForm } from "quasar";
+import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
+import type {
+  HistoryPos,
+  Position,
+} from "@/modules/04_registryNew/interface/response/History";
 
-/** importStore*/
+/**
+ * import components
+ */
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/**
+ * importStore
+ */
 import { useCounterMixin } from "@/stores/mixin";
 
-/** use*/
+/**
+ *  use
+ */
 const myForm = ref<QForm>();
 const router = useRouter();
 const $q = useQuasar();
-const { showLoader, hideLoader, messageError, date2Thai, dialogMessageNotify } =
+const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
-  useCounterMixin();
 
-/**props*/
+/**
+ * props
+ */
 const modal = defineModel<boolean>("modal", { required: true });
 
+/**
+ * ตัวแปร
+ */
 const employeeClass = ref<string>("");
 const typeKeyword = ref<string>("");
 const Keyword = ref<string>("");
@@ -35,7 +55,12 @@ const typeKeywordOps = ref<DataOption[]>([
   { id: "position", name: "ตำแหน่ง" },
 ]);
 const positionOps = ref<DataOption[]>([]);
-const columns = ref<any["columns"]>([
+const options = ref<DataOption[]>([]);
+
+/**
+ * Table
+ */
+const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
     label: "ลำดับ",
@@ -81,18 +106,26 @@ const columns = ref<any["columns"]>([
     align: "left",
     label: "วันที่ถือครอง",
     field: "date",
+    format: (val, row) => `${date2Thai(val)}`,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
-const rows = ref<any>([]);
+const rows = ref<HistoryPos[]>([]);
 
+/**
+ * function fetch ข้อมูลตำแหน่ง ข้าราชการ
+ */
 function fecthPositionOfficer() {
   http
     .get(config.API.listPositionPathHistory)
     .then((res) => {
       let data = res.data.result.items;
-      positionOps.value = data.map((e: any) => ({ id: e.id, name: e.name }));
+
+      positionOps.value = data.map((e: Position) => ({
+        id: e.id,
+        name: e.name,
+      }));
       options.value = positionOps.value;
     })
     .catch((err) => {
@@ -100,12 +133,20 @@ function fecthPositionOfficer() {
     });
 }
 
+/**
+ * function fetch ข้อมูลตำแหน่ง ลูกจ้างประจำ
+ */
 function fetchPositionPerm() {
   http
     .get(config.API.listPositionEmployeePositionHistory)
     .then((res) => {
       let data = res.data.result.items;
-      positionOps.value = data.map((e: any) => ({ id: e.id, name: e.name }));
+      console.log(data);
+
+      positionOps.value = data.map((e: Position) => ({
+        id: e.id,
+        name: e.name,
+      }));
       options.value = positionOps.value;
     })
     .catch((err) => {
@@ -113,12 +154,20 @@ function fetchPositionPerm() {
     });
 }
 
+/**
+ * function เปลี่ยนประเภท
+ */
 function changeEmployeeClass() {
   typeKeyword.value = "";
   Keyword.value = "";
   positionKeyword.value = "";
   rows.value = [];
 }
+
+/**
+ * function เลือกฟิลด์ที่จะค้นหา
+ * @param typeKeyword  ประเภทฟิลด์
+ */
 function selectTypeKeyword(typeKeyword: string) {
   positionOps.value = [];
   positionKeyword.value = "";
@@ -131,6 +180,10 @@ function selectTypeKeyword(typeKeyword: string) {
   }
 }
 
+/**
+ * function ค้นหาประวัติถือครองตำแหน่ง
+ * @param type ประเภทข่าราชการ
+ */
 function clickSearch(type: string) {
   myForm.value!.validate().then((result: boolean) => {
     if (result) {
@@ -151,16 +204,15 @@ function clickSearch(type: string) {
         .then((res) => {
           let data = res.data.result;
           if (data.length !== 0) {
-            rows.value = data.map((e: any) => ({
+            rows.value = data.map((e: HistoryPos) => ({
               id: e.id,
               citizenId: e.citizenId,
               name: e.fullName,
               posNo: e.posNo,
               position: e.position,
-              date: date2Thai(e.date),
+              date: e.date,
             }));
           } else {
-            dialogMessageNotify($q, "ไม่มีข้อมูลที่ต้องการค้นหา");
             rows.value = [];
           }
         })
@@ -174,8 +226,13 @@ function clickSearch(type: string) {
     }
   });
 }
-const options = ref<any>([]);
+
-function filterFn(val: string, update: any) {
+/**
+ * function ค้นหาข่อมูล Optiion
+ * @param val คำค้นหา
+ * @param update function
+ */
+function filterFn(val: string, update: Function) {
   if (val === "") {
     update(() => {
       options.value = positionOps.value;
@@ -189,6 +246,11 @@ function filterFn(val: string, update: any) {
     });
   }
 }
+
+/**
+ * function redirect ไปทะเบียนประวัติ
+ * @param id
+ */
 function clickRedirect(id: string) {
   const url =
     employeeClass.value === "officer"
@@ -197,42 +259,32 @@ function clickRedirect(id: string) {
   router.push(`${url}/${id}`);
 }
 
-const paging = ref<boolean>(true);
+/**
-const pagination = ref({
+ * function ปิด popup
-  sortBy: "order",
+ */
-  descending: false,
+function closeDialog() {
-  page: 1,
+  modal.value = false;
-  rowsPerPage: 10,
+  employeeClass.value = "";
-});
+  typeKeyword.value = "";
-const paginationLabel = (start: number, end: number, total: number) => {
+  Keyword.value = "";
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  positionKeyword.value = "";
-  else return start + "-" + end + " ใน " + total;
+  rows.value = [];
-};
+}
 </script>
 
 <template>
   <q-dialog v-model="modal">
     <q-card style="width: 850px; max-width: 80vw">
-      <q-toolbar>
+      <DialogHeader :tittle="'ประวัติถือครองตำแหน่ง'" :close="closeDialog" />
-        <q-toolbar-title class="text-subtitle2 text-bold"
+
-          >ประวัติถือครองตำแหน่ง</q-toolbar-title
-        >
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          v-close-popup
-          style="color: #ff8080; background-color: #ffdede"
-        />
-      </q-toolbar>
       <q-separator />
 
-      <div class="dialog-card-contain">
+      <q-card-section class="q-pa-sm">
-        <q-card-section class="q-pa-sm">
+        <q-form ref="myForm">
-          <q-form ref="myForm">
+          <div class="col-12 bg-grey-2 q-pa-sm">
-            <div class="col-12 bg-grey-2 q-pa-sm">
+            <div class="col-12 row q-pb-sm q-col-gutter-sm items-center"></div>
-              <div class="q-col-gutter-xs row no-wrap">
+            <div class="q-col-gutter-xs row no-wrap">
+              <div class="col-4">
                 <q-select
                   hide-bottom-space
                   :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภท'}`]"
@@ -250,6 +302,8 @@ const paginationLabel = (start: number, end: number, total: number) => {
                   input-debounce="0"
                   @update:model-value="changeEmployeeClass"
                 />
+              </div>
+              <div class="col-3">
                 <q-select
                   hide-bottom-space
                   :rules="[(val:string) => !!val || `${'กรุณาเลือก ฟิลด์ที่จะค้น'}`]"
@@ -267,8 +321,10 @@ const paginationLabel = (start: number, end: number, total: number) => {
                   input-debounce="0"
                   @update:model-value="selectTypeKeyword(typeKeyword)"
                 />
+              </div>
+
+              <div class="col" v-if="typeKeyword === 'no'">
                 <q-input
-                  v-if="typeKeyword === 'no'"
                   borderless
                   outlined
                   dense
@@ -278,8 +334,10 @@ const paginationLabel = (start: number, end: number, total: number) => {
                   :rules="[(val:string) => !!val || `${'กรุณากรอก ตำแหน่งเลขที่'}`]"
                   hide-bottom-space
                 />
+              </div>
+
+              <div class="col" v-if="typeKeyword === 'position'">
                 <q-select
-                  v-if="typeKeyword === 'position'"
                   hide-bottom-space
                   :rules="[(val:string) => !!val || `${'กรุณาเลือก ตำแหน่ง'}`]"
                   outlined
@@ -304,119 +362,78 @@ const paginationLabel = (start: number, end: number, total: number) => {
                     </q-item>
                   </template></q-select
                 >
-                <q-space />
-                <div class="col-2 row">
-                  <q-btn
-                    dense
-                    color="primary"
-                    icon="mdi-magnify"
-                    label="ค้นหา"
-                    class="col-12"
-                    @click="clickSearch(employeeClass)"
-                  />
-                </div>
               </div>
+
+              <q-space />
+
+              <q-btn
+                color="primary"
+                icon="mdi-magnify"
+                label="ค้นหา"
+                @click="clickSearch(employeeClass)"
+              />
             </div>
-          </q-form>
+          </div>
-        </q-card-section>
-      </div>
 
-      <div class="col-12 q-px-sm q-pb-sm">
+          <div class="col-12 q-mt-sm">
-        <q-table
+            <d-table
-          flat
+              flat
-          dense
+              dense
-          bordered
+              bordered
-          :rows="rows"
+              :rows="rows"
-          :columns="columns"
+              :columns="columns"
-          row-key="order"
+              row-key="order"
-          class="custom-header-table"
+              no-data-label="ไม่มีข้อมูล"
-          no-data-label="ไม่มีข้อมูล"
+            >
-          :pagination-label="paginationLabel"
+              <template v-slot:header="props">
-          v-model:pagination="pagination"
+                <q-tr :props="props">
-        >
+                  <q-th
-          <template v-slot:header="props">
+                    v-for="col in props.cols"
-            <q-tr :props="props">
+                    :key="col.name"
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                    :props="props"
-                <div class="text-grey-7 text-weight-medium">
+                  >
-                  <span class="row">{{ col.label }}</span>
+                    <div class="text-grey-7 text-weight-medium">
-                </div>
+                      <span class="row">{{ col.label }}</span>
-              </q-th>
+                    </div>
-            </q-tr>
+                  </q-th>
-          </template>
+                </q-tr>
-          <template v-slot:body="props">
+              </template>
-            <q-tr :props="props" class="cursor-pointer">
+              <template v-slot:body="props">
-              <q-td key="no" :props="props"> {{ props.rowIndex + 1 }}</q-td>
+                <q-tr :props="props" class="cursor-pointer">
-              <q-td key="order" :props="props">{{ props.row.order }} </q-td>
+                  <q-td
-              <q-td
+                    v-for="col in props.cols"
-                key="citizenId"
+                    :key="col.name"
-                class="text-primary"
+                    :props="props"
-                @click="clickRedirect(props.row.id)"
+                  >
-                :props="props"
+                    <div v-if="col.name === 'no'">
-                >{{ props.row.citizenId }}</q-td
+                      {{ props.rowIndex + 1 }}
-              >
+                    </div>
-              <q-td
+                    <div
-                key="name"
+                      v-else-if="col.name === 'citizenId'"
-                class="text-primary"
+                      class="text-primary"
-                @click="clickRedirect(props.row.id)"
+                      @click="clickRedirect(props.row.id)"
-                :props="props"
+                    >
-                >{{ props.row.name }}</q-td
+                      {{ props.row.citizenId ?? "-" }}
-              >
+                    </div>
-
+                    <div
-              <q-td key="posNo" :props="props">{{ props.row.posNo }}</q-td>
+                      v-else-if="col.name === 'name'"
-              <q-td key="position" :props="props">{{
+                      class="text-primary"
-                props.row.position
+                      @click="clickRedirect(props.row.id)"
-              }}</q-td>
+                    >
-              <q-td key="date" :props="props">{{ props.row.date }}</q-td>
+                      {{ props.row.name ?? "-" }}
-            </q-tr>
+                    </div>
-          </template>
+                    <div v-else class="table_ellipsis2">
-          <template v-slot:pagination="scope">
+                      {{ col.value ? col.value : "-" }}
-            <q-pagination
+                    </div>
-              v-model="pagination.page"
+                  </q-td>
-              color="primary"
+                </q-tr>
-              :max="scope.pagesNumber"
+              </template>
-              :max-pages="5"
+            </d-table>
-              size="sm"
+          </div>
-              boundary-links
+        </q-form>
-              direction-links
+      </q-card-section>
-            ></q-pagination>
-          </template>
-        </q-table>
-      </div>
-
-      <!-- <q-card-actions align="right">
-        <q-btn flat label="OK" color="primary" v-close-popup />
-      </q-card-actions> -->
     </q-card>
   </q-dialog>
 </template>
 
-<style scoped>
+<style scoped></style>
-.custom-header-table {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-
-  .q-table thead tr:last-child th {
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>

src/modules/04_registryNew/interface/response/History.ts

@@ -0,0 +1,23 @@
+interface HistoryPos {
+  citizenId: string;
+  date: string | Date;
+  fullName: string;
+  id: string;
+  posNo: string;
+  position: string;
+}
+
+interface Position {
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: string;
+  id: string;
+  isActive: boolean;
+  lastUpdateFullName: string;
+  lastUpdateUserId: "";
+  lastUpdatedAt: string;
+  name: string;
+  note: string;
+}
+
+export type { HistoryPos, Position };