clone code
This commit is contained in:
Kittapath
parent
c9597d1e38
commit
d57bcd1719
362 changed files with 104804 additions and 0 deletions
567
src/modules/04_registry/views/Main.vue
Normal file
567
src/modules/04_registry/views/Main.vue
Normal file
|
|
@ -0,0 +1,567 @@
|
|||
<!-- 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="columns"
|
||||
:filter="filter"
|
||||
:visible-columns="visibleColumns"
|
||||
v-model:inputfilter="filter"
|
||||
v-model:inputvisible="visibleColumns"
|
||||
:pagination="initialPagination"
|
||||
v-model:profileId="profileId"
|
||||
v-model:fullName="fullName"
|
||||
v-model:oldFullName="oldFullName"
|
||||
v-model:isShowRetire="isShowRetire"
|
||||
v-model:profileType="profileType"
|
||||
v-model:retireYear="retireYear"
|
||||
v-model:govAge="govAge"
|
||||
v-model:isProbation="isProbation"
|
||||
v-model:isTab="isDrawer"
|
||||
: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 == 'fullname'">
|
||||
<div class="row col-12 wrap items-center">
|
||||
<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"
|
||||
/>
|
||||
<div class="col-4">
|
||||
<div class="text-weight-medium">
|
||||
{{ props.row.fullname }}
|
||||
</div>
|
||||
<div class="text-weight-light">
|
||||
{{ props.row.citizenId }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="
|
||||
col.name == 'dateAppoint' ||
|
||||
col.name == 'dateStart' ||
|
||||
col.name == 'createdAt' ||
|
||||
col.name == 'salaryDate'
|
||||
"
|
||||
class="table_ellipsis"
|
||||
>
|
||||
{{ col.value == null ? "-" : date2Thai(col.value) }}
|
||||
</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 { useDataStore } from "@/stores/data";
|
||||
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 { jsontoexcel } from "vue-table-to-excel";
|
||||
|
||||
const $q = useQuasar();
|
||||
const store = useProfileDataStore();
|
||||
const { profileData, changeProfileColumns } = store;
|
||||
const dataStore = useDataStore();
|
||||
const { loaderPage } = dataStore;
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, messageError } = mixin;
|
||||
const router = useRouter();
|
||||
const isDrawer = ref<boolean>(true);
|
||||
const filter = ref<string>(""); //search data table
|
||||
const profileId = ref<string>("");
|
||||
const fullName = ref<string>("");
|
||||
const oldFullName = ref<string>("");
|
||||
const isShowRetire = ref<boolean>(false);
|
||||
const isProbation = ref<boolean>(false);
|
||||
const profileType = ref<string>("officer");
|
||||
const retireYear = ref<number>();
|
||||
const govAge = ref<number>();
|
||||
const initialPagination = ref<Pagination>({
|
||||
rowsPerPage: 0,
|
||||
});
|
||||
const expanded = ref<string[]>([]);
|
||||
const selected = ref<string>("");
|
||||
const nodesTree = ref<treeTab[]>([]);
|
||||
const visibleColumns = ref<String[]>([]);
|
||||
visibleColumns.value = [
|
||||
"no",
|
||||
"fullname",
|
||||
"position",
|
||||
"numberPosition",
|
||||
"positionLine",
|
||||
"positionType",
|
||||
"govAge",
|
||||
"positionLevel",
|
||||
"positionExecutive",
|
||||
"dateAppoint",
|
||||
"dateStart",
|
||||
"createdAt",
|
||||
"salaryDate",
|
||||
];
|
||||
// profileData.main.columns.length == 0
|
||||
// ? (visibleColumns.value = [
|
||||
// "no",
|
||||
// "fullname",
|
||||
// "position",
|
||||
// "numberPosition",
|
||||
// "positionLine",
|
||||
// "positionType",
|
||||
// "positionLevel",
|
||||
// "positionExecutive",
|
||||
// "dateAppoint",
|
||||
// "dateStart",
|
||||
// "createdAt",
|
||||
// "salaryDate",
|
||||
// ])
|
||||
// : (visibleColumns.value = profileData.main.columns);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
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: "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: "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: "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: "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: "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: "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: "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: "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" }),
|
||||
},
|
||||
]);
|
||||
const rows = ref<RequestItemsObject[]>([]);
|
||||
|
||||
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 = () => {
|
||||
dataStore.changeTreeRegister(expanded.value, selected.value);
|
||||
};
|
||||
|
||||
const nodeTree = async () => {
|
||||
loaderPage(true);
|
||||
await http
|
||||
.get(config.API.profileOrganizRoot)
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
nodesTree.value = data;
|
||||
if (data.length > 0) {
|
||||
selected.value =
|
||||
dataStore.selectedRegister == ""
|
||||
? data[0].id
|
||||
: dataStore.selectedRegister;
|
||||
expanded.value =
|
||||
dataStore.expandedRegister.length == 0
|
||||
? [data[0].id]
|
||||
: dataStore.expandedRegister;
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
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 (selected.value == null || selected.value == "") return;
|
||||
loaderPage(true);
|
||||
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,
|
||||
avatar: e.avatar,
|
||||
citizenId: e.citizenId,
|
||||
position: e.position,
|
||||
numberPosition: e.posNo,
|
||||
positionLine: e.positionLine,
|
||||
positionType: e.positionType,
|
||||
govAge: e.govAge,
|
||||
positionLevel: e.positionLevel,
|
||||
positionExecutive: e.positionExecutive,
|
||||
dateAppoint: e.dateAppoint == null ? null : new Date(e.dateAppoint),
|
||||
dateStart: e.dateStart == null ? null : new Date(e.dateStart),
|
||||
createdAt: e.createdAt == null ? null : new Date(e.createdAt),
|
||||
salaryDate: e.salaryDate == null ? null : new Date(e.salaryDate),
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
loaderPage(false);
|
||||
});
|
||||
};
|
||||
|
||||
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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue