รายการรอตรวจสอบ UI
This commit is contained in:
setthawutttty
parent
4f43384c08
commit
81e14d1ba2
1 changed files with 615 additions and 3 deletions
|
|
@ -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>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue