Merge branch 'develop' into devTee
This commit is contained in:
setthawutttty
commit
24a93f0024
8 changed files with 447 additions and 18 deletions
|
|
@ -9,6 +9,8 @@ export default {
|
|||
logRecord: () => `${leave}/log-record`,
|
||||
timeRecord: () => `${leave}/time-record`,
|
||||
recordById: (id: string, type: string) => `${leave}/${type}/${id}`,
|
||||
leaveEditCheckin: (id: string) => `${leave}/admin/edit/checkin/${id}`,
|
||||
|
||||
/** เปลี่ยนแปลงลงเวลา*/
|
||||
leaveSearch: () => `${leave}/search`,
|
||||
leaveRound: () => `${leave}/round`,
|
||||
|
|
|
|||
|
|
@ -177,12 +177,28 @@ watch(modal, (newValue) => {
|
|||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" position="right">
|
||||
<q-card style="width: 420px">
|
||||
<q-card-section>
|
||||
<div class="text-h6 text-center">รายละเอียดแบบย่อย</div>
|
||||
</q-card-section>
|
||||
<q-dialog v-model="modal" position="right" :maximized="true">
|
||||
<q-card style="width: 420px; overflow: visible;">
|
||||
<q-toolbar>
|
||||
<q-toolbar-title class="text-subtitle1 text-bold"
|
||||
>ทะเบียนประวัติ</q-toolbar-title
|
||||
>
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
@click="emit('update:modal', false)"
|
||||
style="color: red; background-color: #ffdede"
|
||||
/>
|
||||
</q-toolbar>
|
||||
<!-- <q-card-section>
|
||||
<div class="text-bold text-h6 text-center">ข้อมูลทะเบียนประวัติ</div>
|
||||
<q-space />
|
||||
|
||||
</q-card-section> -->
|
||||
|
||||
<q-card-section class="col q-pt-none bg-grey-12">
|
||||
<div class="q-gutter-md">
|
||||
|
|
@ -204,12 +220,15 @@ watch(modal, (newValue) => {
|
|||
</q-avatar>
|
||||
</div>
|
||||
<div
|
||||
class="q-mt-md text-weight-bolder text-center"
|
||||
class="q-mt-md text-subtitle2 text-bold"
|
||||
style="font-size: 18px"
|
||||
>
|
||||
{{ avatar.fullname }}
|
||||
</div>
|
||||
<div class="q-mb-xs text-center text-grey">
|
||||
<div
|
||||
v-if="avatar.position != '-'"
|
||||
class="q-mb-xs text-center text-grey"
|
||||
>
|
||||
{{ avatar.position }}
|
||||
</div>
|
||||
<div class="q-mt-md">
|
||||
|
|
@ -224,7 +243,7 @@ watch(modal, (newValue) => {
|
|||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-scroll-area style="height: 500px; max-width: 100%">
|
||||
<q-scroll-area style="height: 65vh; max-width: 100%">
|
||||
<div class="q-gutter-md q-pa-sm">
|
||||
<q-card bordered style="border: 1px solid #d6dee1">
|
||||
<div class="q-pa-md">
|
||||
|
|
|
|||
|
|
@ -21,6 +21,9 @@ const ManageReport2Add = () =>
|
|||
const ManageReport2History = () =>
|
||||
import("@/modules/02_organizational/views/ManageReport2History.vue");
|
||||
|
||||
const TreeTestPage = () =>
|
||||
import("@/modules/02_organizational/views/TreeTest.vue");
|
||||
|
||||
export default [
|
||||
{
|
||||
path: "/organizational/mapping",
|
||||
|
|
@ -122,4 +125,14 @@ export default [
|
|||
Role: "organization",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/tree-test",
|
||||
name: "treeTest",
|
||||
component: TreeTestPage,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [14],
|
||||
Role: "organization",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
|
|||
370
src/modules/02_organizational/views/TreeTest.vue
Normal file
370
src/modules/02_organizational/views/TreeTest.vue
Normal file
|
|
@ -0,0 +1,370 @@
|
|||
<template>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-4 q-gutter-sm">
|
||||
<q-input ref="filterRef" filled v-model="filter" label="Filter">
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="filter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<!-- <div class="row col-12">expanded = {{ expanded }}</div> -->
|
||||
<!--
|
||||
@after-show="afterShow"
|
||||
@after-hide="afterHide" -->
|
||||
<q-tree
|
||||
dense
|
||||
default-expand-all
|
||||
selected-color="blue-6"
|
||||
:nodes="lazy"
|
||||
node-key="organizationId"
|
||||
label-key="organizationName"
|
||||
:filter="filter"
|
||||
:no-results-label="notFound"
|
||||
:no-nodes-label="noData"
|
||||
:filter-method="filterData"
|
||||
v-model:expanded="expanded"
|
||||
v-model:selected="selected"
|
||||
@update:selected="updateSelected"
|
||||
@lazy-load="onLazyLoad"
|
||||
>
|
||||
<template v-slot:default-header="prop">
|
||||
{{ prop.node.organizationName }}
|
||||
|
||||
<q-btn flat icon="mdi-dots-vertical" class="q-pa-none q-ml-xs">
|
||||
<q-menu anchor="top right">
|
||||
<q-list style="min-width: 80px">
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="edit(prop.node.organizationId)"
|
||||
>
|
||||
<q-item-section> แก้ไข </q-item-section>
|
||||
</q-item>
|
||||
<q-separator />
|
||||
<q-item clickable v-close-popup>
|
||||
<q-item-section>ลบ</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</template>
|
||||
</q-tree>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-8 q-pt-none q-pl-sm">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<q-table
|
||||
flat
|
||||
bordered
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
row-key="name"
|
||||
class="custom-header-table"
|
||||
no-data-label="ไม่มีข้อมูล"
|
||||
/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { QTableColumn } from "quasar";
|
||||
import { onMounted, ref } from "vue";
|
||||
|
||||
const expanded = ref<Array<any>>([]);
|
||||
const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
|
||||
const noData = ref<string>("ไม่มีข้อมูล");
|
||||
|
||||
const nodes = ref<Array<any>>([]);
|
||||
const lazy = ref(nodes);
|
||||
|
||||
const onLazyLoad = (details: { node: any; key: any; done: any; fail: any }) => {
|
||||
// call fail() if any error occurs
|
||||
|
||||
// setTimeout(() => {
|
||||
// simulate loading and setting an empty node
|
||||
// if (details.key.indexOf("data empty") > -1) {
|
||||
// details.done([]);
|
||||
// return;
|
||||
// }
|
||||
|
||||
if (details.node.organizationId == "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx01") {
|
||||
details.done([
|
||||
{
|
||||
organizationName: "กองบริหารทั่วไป",
|
||||
organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx11",
|
||||
organizationLevel: 1,
|
||||
},
|
||||
{
|
||||
organizationName: "กองสรรหาบุคคล",
|
||||
organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx12",
|
||||
organizationLevel: 1,
|
||||
},
|
||||
{
|
||||
organizationName: "สถาบันพัฒนาทรัพยากรบุคคลกรุงเทพมหานคร",
|
||||
organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx13",
|
||||
organizationLevel: 1,
|
||||
children: [
|
||||
{
|
||||
organizationName: "ฝ่ายบริหารงานทั่วไป",
|
||||
organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx131",
|
||||
organizationLevel: 2,
|
||||
children: [
|
||||
{
|
||||
organizationName: "กลุ่มงานวิเคราะห์การพัฒนาทรัพยากรบุคคล",
|
||||
organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx1311",
|
||||
organizationLevel: 3,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
organizationName: "ส่วนส่งเสริมการพัฒนาทรัพยากรบุคคล",
|
||||
organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx14",
|
||||
organizationLevel: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
} else if (
|
||||
details.node.organizationId == "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx02"
|
||||
) {
|
||||
details.done([
|
||||
{
|
||||
organizationName: "สำนักงานการเจ้าหน้าที่",
|
||||
organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx21",
|
||||
organizationLevel: 1,
|
||||
},
|
||||
]);
|
||||
}
|
||||
// }, 500);
|
||||
};
|
||||
|
||||
const selected = ref("");
|
||||
const updateSelected = (target: any) => {
|
||||
console.log("updateSelected===>", target);
|
||||
};
|
||||
|
||||
// const afterShow = () => {
|
||||
// console.log("afterShow");
|
||||
// };
|
||||
|
||||
// const afterHide = () => {
|
||||
// console.log("@after-hide");
|
||||
// };
|
||||
|
||||
/** filter */
|
||||
const filter = ref<string>("");
|
||||
const filterRef = ref();
|
||||
const filterData = (node: any, filter: string) => {
|
||||
// ให้ทาง API ค้นหาให้
|
||||
nodes.value = [
|
||||
{
|
||||
organizationName: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
|
||||
organizationId: "3b86d275-8259-427c-8da7-12813fe482eb",
|
||||
organizationLevel: 0,
|
||||
lazy: true,
|
||||
children: [
|
||||
{
|
||||
organizationName: "กองบริหารทั่วไป",
|
||||
organizationId: "3486d275-8159-427c-8da7-12813fe482eb",
|
||||
organizationLevel: 1,
|
||||
},
|
||||
{
|
||||
organizationName: "กองสรรหาบุคคล",
|
||||
organizationId: "3486d275-8259-427c-8da7-12813fe400eb",
|
||||
organizationLevel: 1,
|
||||
},
|
||||
{
|
||||
organizationName: "สถาบันพัฒนาทรัพยากรบุคคลกรุงเทพมหานคร",
|
||||
organizationId: "3486d275-8259-437c-8da7-12813fe482eb",
|
||||
organizationLevel: 1,
|
||||
children: [
|
||||
{
|
||||
organizationName: "ฝ่ายบริหารงานทั่วไป",
|
||||
organizationId: "3486d275-8259-427c-8da7-12813ff482eb",
|
||||
organizationLevel: 2,
|
||||
},
|
||||
{
|
||||
organizationName: "ส่วนส่งเสริมการพัฒนาทรัพยากรบุคคล",
|
||||
organizationId: "3486d275-8259-427c-8da7-12833fe482eb",
|
||||
organizationLevel: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
organizationName: "สำนักปลัดกรุงเทพมหานคร",
|
||||
organizationId: "3b86d275-8259-427c-8da7-12813fe482ec",
|
||||
organizationLevel: 0,
|
||||
},
|
||||
];
|
||||
|
||||
// expanded จาก id ได้
|
||||
expanded.value = [
|
||||
"3b86d275-8259-427c-8da7-12813fe482eb",
|
||||
"3486d275-8259-437c-8da7-12813fe482eb",
|
||||
];
|
||||
|
||||
return node.organizationName && node.organizationName.indexOf(filter) > -1;
|
||||
};
|
||||
|
||||
function resetFilter() {
|
||||
filter.value = "";
|
||||
filterRef.value.focus();
|
||||
}
|
||||
|
||||
const breakLoop = ref<boolean>(false);
|
||||
async function edit(selected: string) {
|
||||
console.log("edit node tree id: " + selected);
|
||||
breakLoop.value = false;
|
||||
|
||||
// Usage
|
||||
const targetNodeId = selected;
|
||||
const replacementNode = {
|
||||
organizationName: `ชื่อใหม่ ${selected}`,
|
||||
organizationId: selected,
|
||||
};
|
||||
|
||||
for (let index = 0; index < nodes.value.length; index++) {
|
||||
const element = nodes.value[index];
|
||||
searchAndReplace(element, targetNodeId, replacementNode);
|
||||
console.log("index===>", index);
|
||||
console.log("breakLoop===>", breakLoop.value);
|
||||
if (breakLoop.value) break;
|
||||
}
|
||||
}
|
||||
|
||||
function searchAndReplace(
|
||||
treeNode: any,
|
||||
organizationId: any,
|
||||
replacementObject: any
|
||||
) {
|
||||
if (treeNode.organizationId === organizationId) {
|
||||
Object.assign(treeNode, replacementObject);
|
||||
breakLoop.value = true;
|
||||
} else if (treeNode.children) {
|
||||
for (const child of treeNode.children) {
|
||||
searchAndReplace(child, organizationId, replacementObject);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const columns = ref<QTableColumn[]>([
|
||||
{
|
||||
name: "no",
|
||||
required: true,
|
||||
label: "ลำดับ",
|
||||
align: "left",
|
||||
field: "no",
|
||||
// field: (row) => row.no,
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
name: "position",
|
||||
align: "left",
|
||||
label: "ตำแหน่ง",
|
||||
field: "position",
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: "positionNo",
|
||||
align: "left",
|
||||
label: "เลขที่ตำแหน่ง",
|
||||
field: "positionNo",
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: "positionLine",
|
||||
align: "left",
|
||||
label: "สายงาน",
|
||||
field: "positionLine",
|
||||
sortable: true,
|
||||
},
|
||||
]);
|
||||
|
||||
const rows = [
|
||||
{
|
||||
no: 1,
|
||||
position: "ผู้อำนวยการ",
|
||||
positionNo: "กบห01",
|
||||
positionLine: "ประเภทอำนวยการ",
|
||||
},
|
||||
{
|
||||
no: 2,
|
||||
position: "นักจัดการงานทั่วไป",
|
||||
positionNo: "กบห01",
|
||||
positionLine: "ประเภทวิชาการ",
|
||||
},
|
||||
{
|
||||
no: 3,
|
||||
position: "นักวิชาการเงินและบัญชี",
|
||||
positionNo: "กบห02",
|
||||
positionLine: "ประเภทวิชาการ",
|
||||
},
|
||||
];
|
||||
|
||||
onMounted(async () => {
|
||||
nodes.value = [
|
||||
{
|
||||
organizationName: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
|
||||
organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx01",
|
||||
organizationLevel: 0,
|
||||
lazy: true,
|
||||
},
|
||||
{
|
||||
organizationName: "สำนักปลัดกรุงเทพมหานคร",
|
||||
organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx02",
|
||||
organizationLevel: 0,
|
||||
lazy: true,
|
||||
},
|
||||
// {
|
||||
// organizationName: "data empty",
|
||||
// lazy: true,
|
||||
// },
|
||||
// {
|
||||
// organizationName: "Node is not expandable",
|
||||
// expandable: false,
|
||||
// children: [{ organizationName: "Some node" }],
|
||||
// },
|
||||
];
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scope>
|
||||
.custom-header-table {
|
||||
max-height: 64vh;
|
||||
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.q-table thead tr {
|
||||
background: #ecebeb;
|
||||
}
|
||||
|
||||
.q-table thead tr th {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.q-table thead tr:last-child th {
|
||||
top: 48px;
|
||||
}
|
||||
|
||||
.q-table thead tr:first-child th {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -12,7 +12,7 @@ import { useCounterMixin } from "@/stores/mixin";
|
|||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogConfirm, success } = mixin;
|
||||
const { dialogConfirm, success, showLoader, hideLoader, messageError } = mixin;
|
||||
|
||||
const props = defineProps({
|
||||
modal: {
|
||||
|
|
@ -27,6 +27,10 @@ const props = defineProps({
|
|||
type: Function,
|
||||
require: true,
|
||||
},
|
||||
fetchData: {
|
||||
type: Function,
|
||||
require: true,
|
||||
},
|
||||
});
|
||||
|
||||
const morningStatus = ref<string>("");
|
||||
|
|
@ -48,15 +52,26 @@ async function onClickSave() {
|
|||
afternoonStatusRef.value?.validate();
|
||||
if (!morningStatusRef.value.hasError && !afternoonStatusRef.value.hasError) {
|
||||
const body = {
|
||||
morningStatus: morningStatus.value,
|
||||
afternoonStatus: afternoonStatus.value,
|
||||
checkInStatus: morningStatus.value,
|
||||
checkOutStatus: afternoonStatus.value,
|
||||
reason: reason.value,
|
||||
};
|
||||
dialogConfirm($q, async () => {
|
||||
console.log(body);
|
||||
|
||||
success($q, "บันทึกข้อมูสำเร็จ");
|
||||
props.close?.();
|
||||
dialogConfirm($q, async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.put(config.API.leaveEditCheckin(props.detail?.id), body)
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
props.fetchData?.();
|
||||
props.close?.();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -81,7 +96,7 @@ watch(
|
|||
</script>
|
||||
<template>
|
||||
<q-dialog v-model="props.modal">
|
||||
<q-card class="column" style="width: 300px">
|
||||
<q-card class="column" style="width: 320px">
|
||||
<HeaderDialog :tittle="'แก้ไขสถานะการเข้า-ออกงาน'" :close="props.close" />
|
||||
|
||||
<q-separator />
|
||||
|
|
|
|||
|
|
@ -206,6 +206,7 @@ onMounted(async () => {
|
|||
:maxPage="maxPage"
|
||||
@update:pagination="updatePaging"
|
||||
:tab="'time-record'"
|
||||
:fetchData="fetchListTimeRecord"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -39,6 +39,10 @@ const props = defineProps({
|
|||
type: String,
|
||||
require: true,
|
||||
},
|
||||
fetchData: {
|
||||
type: Function,
|
||||
require: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:pagination"]);
|
||||
|
|
@ -203,6 +207,11 @@ onMounted(() => {
|
|||
:close="closeDetail"
|
||||
/>
|
||||
|
||||
<DialogEdit :modal="modalEdit" :detail="dataDetail" :close="onClickEdit" />
|
||||
<DialogEdit
|
||||
:modal="modalEdit"
|
||||
:detail="dataDetail"
|
||||
:close="onClickEdit"
|
||||
:fetchData="props.fetchData"
|
||||
/>
|
||||
</template>
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ function save() {
|
|||
dialogConfirm($q, async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveWorkByid(detailByid.value.profileId), {
|
||||
.put(config.API.leaveWorkByid(detailByid.value.profileId), {
|
||||
work: dateWork.value,
|
||||
})
|
||||
.then(() => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue