From 81e14d1ba24a4798e4fcc9792c2899334a7f3457 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Mon, 12 Feb 2024 16:44:25 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=A3=E0=B8=AD=E0=B8=95=E0=B8=A3=E0=B8=A7=E0=B8=88?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=AD=E0=B8=9A=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../04_registry/views/registry-verify.vue     | 618 +++++++++++++++++-
 1 file changed, 615 insertions(+), 3 deletions(-)

diff --git a/src/modules/04_registry/views/registry-verify.vue b/src/modules/04_registry/views/registry-verify.vue
index 1b03c87f2..ef0806790 100644
--- a/src/modules/04_registry/views/registry-verify.vue
+++ b/src/modules/04_registry/views/registry-verify.vue
@@ -1,7 +1,619 @@
 <script setup lang="ts">
+import { ref, onMounted } from "vue";
+// import type { RequestItemsObject } from "@/modules/04_registry/interface/request/Main";
+import type { QTableProps } from "quasar";
+// import type { ResponseObject } from "@/modules/04_registry/interface/response/Main";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRouter } from "vue-router";
 
+interface RequestItemsObject {
+  id: string;
+  fullname: string;
+  fullnameOld: string;
+  avatar: string | null;
+  citizenId: string;
+  position: string;
+  positionPathSide: string | null;
+  numberPosition: string;
+  positionLine: string;
+  positionType: string;
+  govAge: number;
+  positionLevel: string;
+  positionExecutive: string | null;
+  positionExecutiveSide: string | null;
+  positionEmployeePosition: string | null;
+  positionEmployeePositionSide: string | null;
+  positionEmployeeLevel: string | null;
+  positionEmployeeGroup: string | null;
+  oc: string;
+  dateAppoint: string | null;
+  dateStart: string | null;
+  createdAt: string | null;
+  salaryDate: string | null;
+  leaveReason: string | null;
+  age: number;
+  amount: string;
+  insignia: string | null;
+  insigniaLast: string | null;
+  isLeave: string;
+  leaveDateOrder: string | null;
+  refSalary: string | null;
+  isVerified: boolean;
+}
+
+interface ResponseObject {
+  id: string;
+  fullname: string;
+  fullnameOld: string;
+  citizenId: string;
+  dateAppoint: string | null;
+  dateStart: string | null;
+  createdAt: string | null;
+  salaryDate: string | null;
+  refSalary: string | null;
+  amount: number | null;
+  insigniaLast: string | null;
+  insignia: string | null;
+  avatar: string | null;
+  position: string;
+  positionPathSide: string | null;
+  posNo: string;
+  positionLine: string;
+  positionType: string;
+  positionLevel: string;
+  positionExecutive: string | null;
+  positionExecutiveSide: string | null;
+  positionEmployeePosition: string | null;
+  positionEmployeePositionSide: string | null;
+  positionEmployeeLevel: string | null;
+  positionEmployeeGroup: string | null;
+  govAge: number;
+  age: number;
+  oc: string;
+  leaveReason: string | null;
+  isLeave: boolean;
+  leaveDateOrder: string | null;
+  isVerified: boolean;
+}
+
+const router = useRouter();
+const mixin = useCounterMixin();
+const { date2Thai, messageError, typeRetire, showLoader, hideLoader } = mixin;
+const rows = ref<RequestItemsObject[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "isVerified",
+    align: "center",
+    label: "",
+    sortable: true,
+    field: "isVerified",
+    headerStyle: "min-width: 50px",
+  },
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "numberPosition",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "numberPosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "positionPathSide",
+    align: "left",
+    label: "ด้าน/สาขา",
+    sortable: true,
+    field: "positionPathSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "positionLine",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionLine",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ประเภท",
+    sortable: true,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "positionExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "positionExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "positionExecutiveSide",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "เงินเดือน",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "insignia",
+    align: "left",
+    label: "เครื่องราชฯ",
+    sortable: true,
+    field: "insignia",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "insigniaLast",
+    align: "left",
+    label: "เครื่องราชฯ(เดิม)",
+    sortable: true,
+    field: "insigniaLast",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "govAge",
+    align: "left",
+    label: "อายุราชการ(ปี)",
+    sortable: true,
+    field: "govAge",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "dateAppoint",
+    align: "left",
+    label: "วันที่บรรจุ",
+    sortable: true,
+    field: "dateAppoint",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateStart",
+    align: "left",
+    label: "เริ่มปฎิบัติราชการ",
+    sortable: true,
+    field: "dateStart",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "salaryDate",
+    align: "left",
+    label: "วันที่เข้าสู่ตำแหน่ง",
+    sortable: true,
+    field: "salaryDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refSalary",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "refSalary",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "age",
+    align: "left",
+    label: "อายุ",
+    sortable: true,
+    field: "age",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "fullnameOld",
+    align: "left",
+    label: "ชื่อ-นามสกุล(เดิม)",
+    sortable: true,
+    field: "fullnameOld",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isLeave",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "isLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "leaveDateOrder",
+    align: "left",
+    label: "วันที่พ้นราชการ",
+    sortable: true,
+    field: "leaveDateOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const next = (id: string) => {
+  router.push(`/registry/${id}`);
+};
+
+onMounted(() => {
+  const data = [
+    {
+      id: "08dbc953-61ac-47eb-82d7-0e72df7669b5",
+      fullname: "นายณัฐพงศ์ ดิษยบุตร",
+      fullnameOld: "",
+      citizenId: "3100903812600",
+      dateAppoint: "1989-02-01T00:00:00",
+      dateStart: "1989-02-02T00:00:00",
+      createdAt: "2023-10-10T12:40:15.334501",
+      salaryDate: "2023-10-11T00:00:00",
+      refSalary:
+        "คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+      amount: 76800.0,
+      insigniaLast: null,
+      insignia: null,
+      avatar: null,
+      position: "คีตศิลปิน",
+      positionPathSide: null,
+      posNo: "กบห.2",
+      positionLine: "จัดการงานทั่วไป",
+      positionType: "ทั่วไป",
+      positionLevel: "ปฏิบัติงาน",
+      positionExecutive: "หัวหน้าสำนักงาน ",
+      positionExecutiveSide: null,
+      positionEmployeePosition: null,
+      positionEmployeePositionSide: null,
+      positionEmployeeLevel: null,
+      positionEmployeeGroup: null,
+      govAge: 35,
+      age: 35,
+      oc: "กลุ่มงานช่วยนักบริหาร",
+      leaveReason: null,
+      isLeave: false,
+      leaveDateOrder: null,
+      isVerified: false,
+    },
+    {
+      id: "08dbc953-6268-4e2c-80a3-aca65eedc6d0",
+      fullname: "นางสาวอรัญญา พรไชยะ",
+      fullnameOld: "",
+      citizenId: "3101502080439",
+      dateAppoint: "1990-08-16T00:00:00",
+      dateStart: "1990-08-16T00:00:00",
+      createdAt: "2023-10-10T12:40:16.746683",
+      salaryDate: "2023-10-10T00:00:00",
+      refSalary: "ปรับอัตราเงินเดือนครู บัญชีใหม่ {พ.ศ.}",
+      amount: 76800.0,
+      insigniaLast: null,
+      insignia: null,
+      avatar: null,
+      position: "นักบริหาร",
+      positionPathSide: null,
+      posNo: "สกก.2",
+      positionLine: "บริหาร",
+      positionType: "วิชาการ",
+      positionLevel: "ปฏิบัติการ",
+      positionExecutive: "ผู้ช่วยหัวหน้าสำนักงาน ",
+      positionExecutiveSide: null,
+      positionEmployeePosition: null,
+      positionEmployeePositionSide: null,
+      positionEmployeeLevel: null,
+      positionEmployeeGroup: null,
+      govAge: 34,
+      age: 34,
+      oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
+      leaveReason: null,
+      isLeave: false,
+      leaveDateOrder: null,
+      isVerified: true,
+    },
+  ];
+  rows.value = data.map((item: ResponseObject) => ({
+    id: item.id,
+    fullname: item.fullname,
+    fullnameOld: item.fullnameOld == '' ? '-':item.fullnameOld,
+    avatar: item.avatar,
+    citizenId: item.citizenId,
+    position: item.position,
+    positionPathSide: item.positionPathSide,
+    numberPosition: item.posNo,
+    positionLine: item.positionLine,
+    positionType: item.positionType,
+    govAge: item.govAge,
+    positionLevel: item.positionLevel,
+    positionExecutive:
+      item.positionExecutive == null ? "-" : item.positionExecutive,
+    positionExecutiveSide:
+      item.positionExecutiveSide == null ? "-" : item.positionExecutiveSide,
+    positionEmployeePosition:
+      item.positionEmployeePosition == null
+        ? "-"
+        : item.positionEmployeePosition,
+    positionEmployeePositionSide:
+      item.positionEmployeePositionSide == null
+        ? "-"
+        : item.positionEmployeePositionSide,
+    positionEmployeeLevel:
+      item.positionEmployeeLevel == null ? "-" : item.positionEmployeeLevel,
+    positionEmployeeGroup:
+      item.positionEmployeeGroup == null ? "-" : item.positionEmployeeGroup,
+    oc: item.oc,
+    dateAppoint:
+      item.dateAppoint == null ? null : date2Thai(new Date(item.dateAppoint)),
+    dateStart:
+      item.dateStart == null ? null : date2Thai(new Date(item.dateStart)),
+    createdAt:
+      item.createdAt == null ? null : date2Thai(new Date(item.createdAt)),
+    salaryDate:
+      item.salaryDate == null ? null : date2Thai(new Date(item.salaryDate)),
+    leaveReason: item.leaveReason,
+    age: item.age,
+    amount: item.amount == null ? "" : item.amount.toLocaleString(),
+    insignia: item.insignia,
+    insigniaLast: item.insigniaLast,
+    isLeave:
+      item.isLeave == false
+        ? "ครอง"
+        : `${typeRetire(item.leaveReason as string)}`,
+    leaveDateOrder:
+      item.leaveDateOrder == null
+        ? null
+        : date2Thai(new Date(item.leaveDateOrder)),
+    refSalary: item.refSalary,
+    isVerified: item.isVerified,
+  }));
+});
 </script>
-
 <template>
-    verify
-</template>
\ No newline at end of file
+  <div class="toptitle text-dark col-12 row items-center">รายการรอตรวจสอบ</div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+    <div class="col-12">
+      <d-table
+        :columns="columns"
+        :rows="rows"
+        row-key="id"
+        flat
+        bordered
+        dense
+        class="custom-header-table"
+        :rows-per-page-options="[10, 25, 50, 100]"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              style="color: #000000; font-weight: 500"
+            >
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr
+            :props="props"
+            @click="next(props.row.id)"
+            class="cursor-pointer"
+          >
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else-if="col.name == 'isVerified'">
+                <q-icon
+                  v-if="props.row.isVerified"
+                  name="verified"
+                  color="green"
+                  size="1.4rem"
+                />
+              </div>
+              <div v-else-if="col.name == 'fullname'">
+                <div class="row col-12 wrap items-center">
+                  <q-item>
+                    <q-item-section avatar>
+                      <img
+                        v-if="props.row.avatar == null"
+                        src="@/assets/avatar_user.jpg"
+                        class="col-4 img-info"
+                      />
+                      <img
+                        v-else
+                        :src="props.row.avatar"
+                        class="col-4 img-info"
+                      />
+                    </q-item-section>
+
+                    <q-item-section>
+                      <div class="text-weight-medium">
+                        {{ props.row.fullname }}
+                      </div>
+                      <div class="text-weight-light">
+                        {{ props.row.citizenId }}
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                </div>
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value ?? "-" }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+</template>
+<style scoped>
+.img-info {
+  width: 30px !important;
+  height: 30px !important;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-right: 10px;
+}
+</style>