hrms-mgt/src/modules/04_registry/views/Main.vue

1474 lines
40 KiB
Vue

<!-- page:main page ทะเบยนประว -->
<template>
<div class="toptitle text-dark col-12 row items-center">ทะเบยนประว</div>
<div>
<q-card flat bordered class="col-12 q-mt-sm">
<q-layout
view="hHh Lpr lff"
container
class="shadow-2 rounded-borders page-relative"
style="height: 80vh"
>
<q-drawer
v-model="isDrawer"
class="bg-grey-1"
:width="220"
:breakpoint="400"
bordered
>
<q-btn
size="13px"
class="btn-absolute btnShadow"
color="white"
dense
round
unelevated
@click="isDrawer = false"
v-if="isDrawer"
>
<q-tooltip>ปิด</q-tooltip>
<q-icon name="chevron_left" size="20px" color="grey-7" />
</q-btn>
<q-scroll-area class="fit">
<div class="row col-12 text-dark q-pt-sm">
<div class="col-12 q-pa-sm">
<q-tree
:nodes="nodesTree"
dense
class="text-subtitle2 text-weight-regular tree-node"
node-key="id"
v-model:selected="selected"
v-model:expanded="expanded"
no-selection-unset
selected-color="primary"
@update:selected="onSelected"
@update:expanded="clickTree"
/>
</div>
</div>
</q-scroll-area>
</q-drawer>
<q-page-container class="q-ma-sm">
<ProfileTable
style="height: 77vh"
:rows="rows"
:columns="
profileType == 'employee' || profileType == 'all'
? profileEmployeeType == 'temp'
? columnsEmployeeTemp
: columnsEmployee
: columns
"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:pagination="initialPagination"
v-model:profileId="profileId"
v-model:employeeClass="employeeClass"
v-model:fullName="fullName"
v-model:oldFullName="oldFullName"
v-model:isShowRetire="isShowRetire"
v-model:retireYear="retireYear"
v-model:govAge="govAge"
v-model:isProbation="isProbation"
v-model:isTab="isDrawer"
v-model:positionPath="positionPath"
v-model:positionLevel="positionLevel"
v-model:positionExecutive="positionExecutive"
v-model:employeePosition="employeePosition"
v-model:employeeLevel="employeeLevel"
v-model:posNo="posNo"
:doSearch="doSearch"
:onExport="onExport"
:onTab="changeTab"
>
<template #columns="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'" class="table_ellipsis">
{{ 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>
</ProfileTable>
</q-page-container>
</q-layout>
</q-card>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { useProfileDataStore } from "@/modules/04_registry/store";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type { RequestItemsObject } from "@/modules/04_registry/interface/request/Main";
import type { ResponseObject } from "@/modules/04_registry/interface/response/Main";
import type {
Pagination,
treeTab,
} from "@/modules/04_registry/interface/index/Main";
import ProfileTable from "@/modules/04_registry/components/TableProfile.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar";
import { useDataStore } from "@/stores/data";
const dataStore = useDataStore();
const $q = useQuasar();
const store = useProfileDataStore();
const { profileData, changeProfileColumns } = store;
const { changeTreeRegister, selectedRegister, expandedRegister } = dataStore;
const mixin = useCounterMixin();
const { date2Thai, messageError, typeRetire, showLoader, hideLoader } = mixin;
const router = useRouter();
const isDrawer = ref<boolean>(true);
const filter = ref<string>(""); //search data table
const profileId = ref<string>("");
const employeeClass = ref<string>("officer");
const fullName = ref<string>("");
const oldFullName = ref<string>("");
const isShowRetire = ref<boolean>(false);
const isProbation = ref<boolean>(false);
const profileType = ref<string>("officer");
const profileEmployeeType = ref<string>("temp");
const retireYear = ref<number>();
const govAge = ref<number>();
const positionPath = ref<string>("");
const positionLevel = ref<string>("");
const positionExecutive = ref<string>("");
const employeePosition = ref<string>("");
const employeeLevel = ref<string>("");
const posNo = ref<string>("");
const initialPagination = ref<Pagination>({
rowsPerPage: 0,
});
const expanded = ref<string[]>([]);
const selected = ref<string>("");
const nodesTree = ref<treeTab[]>([]);
const visibleColumns = ref<String[]>([]);
visibleColumns.value = [
"isVerified",
"no",
"fullname",
"fullnameOld",
"oc",
"position",
"positionPathSide",
"numberPosition",
"positionLine",
"positionType",
"govAge",
"positionLevel",
"positionExecutive",
"positionExecutiveSide",
"dateAppoint",
"refSalary",
"dateStart",
"createdAt",
"salaryDate",
"age",
"amount",
"insignia",
"insigniaLast",
"isLeave",
"leaveDateOrder",
];
const visibleColumnsOfficer = ref<String[]>([]);
visibleColumnsOfficer.value = [
"isVerified",
"no",
"fullname",
"fullnameOld",
"oc",
"position",
"positionPathSide",
"numberPosition",
"positionLine",
"positionType",
"govAge",
"positionLevel",
"positionExecutive",
"positionExecutiveSide",
"dateAppoint",
"refSalary",
"dateStart",
"createdAt",
"salaryDate",
"age",
"amount",
"insignia",
"insigniaLast",
"isLeave",
"leaveDateOrder",
];
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 rows = ref<RequestItemsObject[]>([]);
const visibleColumnsEmployee = ref<String[]>([]);
visibleColumnsEmployee.value = [
"isVerified",
"no",
"fullname",
"fullnameOld",
"oc",
"positionEmployeePosition",
"positionEmployeePositionSide",
"numberPosition",
"positionLine",
// "positionType",
"govAge",
"positionEmployeeLevel",
"positionEmployeeGroup",
"dateAppoint",
"refSalary",
"dateStart",
"createdAt",
"salaryDate",
"age",
"amount",
"insignia",
"insigniaLast",
"isLeave",
"leaveDateOrder",
];
const columnsEmployee = 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: "positionEmployeePosition",
align: "left",
label: "ตำแหน่ง",
sortable: true,
field: "positionEmployeePosition",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
name: "positionEmployeePositionSide",
align: "left",
label: "ด้านของตำแหน่ง",
sortable: true,
field: "positionEmployeePositionSide",
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: "positionEmployeeLevel",
align: "left",
label: "ระดับ",
sortable: true,
field: "positionEmployeeLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
name: "positionEmployeeGroup",
align: "left",
label: "กลุ่มงาน",
sortable: true,
field: "positionEmployeeGroup",
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 visibleColumnsEmployeeTemp = ref<String[]>([]);
visibleColumnsEmployeeTemp.value = [
"isVerified",
"no",
"fullname",
"fullnameOld",
"oc",
"positionEmployeePosition",
"positionEmployeePositionSide",
// "numberPosition",
"positionLine",
// "positionType",
"govAge",
// "positionEmployeeLevel",
"positionEmployeeGroup",
"dateAppoint",
"refSalary",
"dateStart",
"createdAt",
"salaryDate",
"age",
"amount",
// "insignia",
// "insigniaLast",
"isLeave",
"leaveDateOrder",
];
const columnsEmployeeTemp = 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: "positionEmployeePosition",
align: "left",
label: "ตำแหน่ง",
sortable: true,
field: "positionEmployeePosition",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
name: "positionEmployeePositionSide",
align: "left",
label: "ด้านของตำแหน่ง",
sortable: true,
field: "positionEmployeePositionSide",
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: "positionEmployeeLevel",
// align: "left",
// label: "ระดับ",
// sortable: true,
// field: "positionEmployeeLevel",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, {
// numeric: true,
// sensitivity: "base",
// }),
// },
{
name: "positionEmployeeGroup",
align: "left",
label: "กลุ่มงาน",
sortable: true,
field: "positionEmployeeGroup",
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" }),
},
]);
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
await changeProfileColumns("main", count);
});
onMounted(async () => {
await nodeTree();
});
const changeTab = () => {
isDrawer.value = !isDrawer.value;
};
const onSelected = async (id: string) => {
await clickTree();
await doSearch();
};
const clickTree = () => {
changeTreeRegister(expanded.value, selected.value);
};
const nodeTree = async () => {
showLoader();
await http
.get(config.API.profileOrganizRoot)
.then((res: any) => {
const data = res.data.result;
nodesTree.value = data;
if (data.length > 0) {
selected.value = selectedRegister == "" ? data[0].id : selectedRegister;
expanded.value =
expandedRegister.length == 0 ? [data[0].id] : expandedRegister;
}
})
.catch((e: any) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
await doSearch();
});
};
const doSearch = async () => {
let cirteria = [];
if (profileId.value !== null && profileId.value !== "") {
cirteria.push({
criteriaType: "profile_id",
criteriaValue: profileId.value,
});
}
if (fullName.value !== null && fullName.value !== "") {
cirteria.push({
criteriaType: "fullname",
criteriaValue: fullName.value,
});
}
if (oldFullName.value !== null && oldFullName.value !== "") {
cirteria.push({
criteriaType: "old_fullname",
criteriaValue: oldFullName.value,
});
}
if (isShowRetire.value !== null) {
cirteria.push({
criteriaType: "is_retire",
criteriaValue: isShowRetire.value.toString(),
});
}
if (isProbation.value !== null) {
cirteria.push({
criteriaType: "is_probation",
criteriaValue: isProbation.value.toString(),
});
}
if (retireYear.value !== null && retireYear.value !== undefined) {
cirteria.push({
criteriaType: "retire_year",
criteriaValue: retireYear.value,
});
}
if (govAge.value !== null && govAge.value !== undefined) {
cirteria.push({
criteriaType: "gov_age",
criteriaValue: govAge.value,
});
}
if (employeeClass.value == "officer" || employeeClass.value == "employee") {
profileType.value = employeeClass.value;
if (employeeClass.value == "employee") {
visibleColumns.value = visibleColumnsEmployee.value;
}
if (employeeClass.value == "officer") {
visibleColumns.value = visibleColumnsOfficer.value;
}
}
if (employeeClass.value == "perm" || employeeClass.value == "temp") {
profileType.value = "all";
cirteria.push({
criteriaType: "employee_class",
criteriaValue: employeeClass.value,
});
if (employeeClass.value == "perm") {
profileEmployeeType.value = "perm";
visibleColumns.value = visibleColumnsEmployee.value;
} else {
profileEmployeeType.value = "temp";
visibleColumns.value = visibleColumnsEmployeeTemp.value;
}
}
if (positionPath.value !== null && positionPath.value !== "") {
cirteria.push({
criteriaType: "position_path",
criteriaValue: positionPath.value,
});
}
if (positionLevel.value !== null && positionLevel.value !== "") {
cirteria.push({
criteriaType: "position_level",
criteriaValue: positionLevel.value,
});
}
if (positionExecutive.value !== null && positionExecutive.value !== "") {
cirteria.push({
criteriaType: "position_executive",
criteriaValue: positionExecutive.value,
});
}
if (employeePosition.value !== null && employeePosition.value !== "") {
cirteria.push({
criteriaType: "employee_position",
criteriaValue: employeePosition.value,
});
}
if (employeeLevel.value !== null && employeeLevel.value !== "") {
cirteria.push({
criteriaType: "employee_level",
criteriaValue: employeeLevel.value,
});
}
if (posNo.value !== null && posNo.value !== "") {
cirteria.push({
criteriaType: "pos_no",
criteriaValue: posNo.value,
});
}
if (selected.value == null || selected.value == "") return;
showLoader();
await http
.post(config.API.searchProfileByOcId(selected.value, profileType.value), {
criterias: cirteria,
})
.then((res) => {
let data = res.data.result;
rows.value = [];
data.map((e: ResponseObject) => {
rows.value.push({
id: e.id,
fullname: e.fullname,
fullnameOld: e.fullnameOld,
avatar: e.avatar,
citizenId: e.citizenId,
position: e.position,
positionPathSide: e.positionPathSide,
numberPosition:
profileType.value == "officer" ? e.posNo : e.posNoEmployee,
positionLine: e.positionLine,
positionType: e.positionType,
govAge: e.govAge,
positionLevel: e.positionLevel,
positionExecutive: e.positionExecutive,
positionExecutiveSide: e.positionExecutiveSide,
positionEmployeePosition: e.positionEmployeePosition,
positionEmployeePositionSide: e.positionEmployeePositionSide,
positionEmployeeLevel: e.positionEmployeeLevel,
positionEmployeeGroup: e.positionEmployeeGroup,
oc: e.oc,
dateAppoint:
e.dateAppoint == null ? null : date2Thai(new Date(e.dateAppoint)),
dateStart:
e.dateStart == null ? null : date2Thai(new Date(e.dateStart)),
createdAt:
e.createdAt == null ? null : date2Thai(new Date(e.createdAt)),
salaryDate:
e.salaryDate == null ? null : date2Thai(new Date(e.salaryDate)),
leaveReason: e.leaveReason,
age: e.age,
amount: e.amount == null ? "" : e.amount.toLocaleString(),
insignia: e.insignia,
insigniaLast: e.insigniaLast,
isLeave: e.isLeave == false ? "ครอง" : `${typeRetire(e.leaveReason)}`,
leaveDateOrder:
e.leaveDateOrder == null
? null
: date2Thai(new Date(e.leaveDateOrder)),
refSalary: e.refSalary,
isVerified: e.isVerified,
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const onExport = () => {
const head = [
"ลำดับ",
"ชื่อ-นามสกุล",
"ตำแหน่ง",
"สายงาน",
"ตำแหน่งในสายงาน",
"ระดับ",
"ตำแหน่งทางการบริหาร",
"ตำแหน่งการบริหาร",
"ตำแหน่งเลขที่",
"หน่วยงาน/ส่วนราชการ",
];
const data = rows.value.map((val, index) => ({
no: index + 1,
// id: val.id ? val.id : "",
fullname: val.fullname ? val.fullname : "",
// avatar: val.avatar ? val.avatar : "",
// citizenId: val.citizenId ? val.citizenId : "",
position: val.position ? val.position : "",
// line: val.line ? val.line : "",
// linePosition: val.linePosition ? val.linePosition : "",
// level: val.level ? val.level : "",
// positionFormalManage: val.positionFormalManage
// ? val.positionFormalManage
// : "",
// positionManage: val.positionManage ? val.positionManage : "",
// numberPosition: val.numberPosition ? val.numberPosition : "",
// government: val.government ? val.government : "",
}));
// jsontoexcel.getXlsx(data, head, "ข้อมูลทะเบียนประวัติ.csv");
};
const next = (id: string) => {
router.push(`/registry/${id}`);
};
</script>
<style lang="scss" scope>
.btn-absolute {
z-index: 50;
position: absolute;
left: 200px;
top: 12px;
}
.btnShadow {
box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 3px 3px 7px 1px rgba(95, 95, 95, 0.15) !important;
}
.img-info {
width: 30px !important;
height: 30px !important;
border-radius: 50%;
object-fit: cover;
margin-right: 10px;
}
.tree-node .q-tree__node-header-content {
padding: 1px 5px;
color: #4a4a4a;
}
</style>