1497 lines
40 KiB
Vue
1497 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"
|
|
:rowsPerPage="rowsPerPage"
|
|
:page="page"
|
|
:maxPage="maxPage"
|
|
@update:pagination="updatePagingProp"
|
|
:rows-per-page-options="[20, 50, 100, 200]"
|
|
>
|
|
<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">
|
|
{{ (page - 1) * Number(rowsPerPage) + 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 || props.row.avatar == ''
|
|
"
|
|
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 maxPage = ref<number>(1);
|
|
const rowsPerPage = ref<number>(20);
|
|
const page = ref<number>(1);
|
|
|
|
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>({
|
|
page: 1,
|
|
rowsPerPage: 10,
|
|
});
|
|
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) => {
|
|
rowsPerPage.value = 20;
|
|
page.value = 1;
|
|
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.listProfileNew(selected.value, page.value, rowsPerPage.value),
|
|
{
|
|
criterias: cirteria,
|
|
}
|
|
)
|
|
.then((res) => {
|
|
let data = res.data.result.data;
|
|
maxPage.value = Math.ceil(res.data.result.totalRows / rowsPerPage.value);
|
|
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}`);
|
|
};
|
|
|
|
function updatePagingProp(rowPerpage: number, pageCurrent: number) {
|
|
rowsPerPage.value = rowPerpage;
|
|
page.value = pageCurrent;
|
|
doSearch();
|
|
}
|
|
</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>
|