370 lines
No EOL
10 KiB
Vue
370 lines
No EOL
10 KiB
Vue
<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> |