491 lines
15 KiB
Vue
491 lines
15 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, watch } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
|
|
import type { ListMenu } from "@/modules/02_organizationalNew/interface/index/Main";
|
|
|
|
/** importComponents*/
|
|
import DialogAgency from "@/modules/02_organizationalNew/components/DialogFormAgency.vue";
|
|
import DialogStructureDetail from "@/modules/02_organizationalNew/components/StructureDetail.vue";
|
|
|
|
/** importStore*/
|
|
import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
|
|
const store = useOrganizational();
|
|
const { dialogRemove, showLoader, hideLoader, messageError, success } =
|
|
useCounterMixin();
|
|
const $q = useQuasar();
|
|
|
|
const props = defineProps({
|
|
fetchDataTree: {
|
|
type: Function,
|
|
require: true,
|
|
},
|
|
});
|
|
|
|
const listAdd = ref<ListMenu[]>([
|
|
{
|
|
label: "เพิ่ม",
|
|
icon: "add",
|
|
type: "ADD",
|
|
color: "primary",
|
|
},
|
|
{
|
|
label: "แก้ไข",
|
|
icon: "edit",
|
|
type: "EDIT",
|
|
color: "info",
|
|
},
|
|
{
|
|
label: "ลบ",
|
|
icon: "mdi-trash-can-outline",
|
|
type: "DEL",
|
|
color: "red",
|
|
},
|
|
// {
|
|
// label: "สำเนาหน่วยงาน",
|
|
// icon: "content_copy",
|
|
// type: "COPY",
|
|
// color: "blue",
|
|
// },
|
|
{
|
|
label: "ดูประวัติหน่วยงาน",
|
|
icon: "history",
|
|
type: "HISTORY",
|
|
color: "purple",
|
|
},
|
|
{
|
|
label: "จัดลำดับ",
|
|
icon: "filter_list",
|
|
type: "SORT",
|
|
color: "green-7",
|
|
},
|
|
// {
|
|
// label: "แก้ไขสถานะ",
|
|
// icon: "rule",
|
|
// type: "STATUS",
|
|
// color: "yellow-9",
|
|
// },
|
|
{
|
|
label: "ดูรายละเอียด",
|
|
icon: "mdi-eye",
|
|
type: "DETAIL",
|
|
color: "blue-9",
|
|
},
|
|
]);
|
|
|
|
const nodeTEST = defineModel<any>("nodeTree", { required: true });
|
|
const filter = ref<string>("");
|
|
const nodes = ref<Array<any>>([]);
|
|
const lazy = ref(nodes);
|
|
const expanded = ref<Array<any>>([]);
|
|
const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
|
|
const noData = ref<string>("ไม่มีข้อมูล");
|
|
const selected = ref("");
|
|
const orgLevel = ref<number>(0);
|
|
|
|
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;
|
|
};
|
|
|
|
const updateSelected = (target: any) => {
|
|
console.log("updateSelected===>", target);
|
|
};
|
|
|
|
const onLazyLoad = (details: { node: any; key: any; done: any; fail: any }) => {
|
|
// console.log(details.node);
|
|
// details.node = nodes.value.filter((e:any) => e.orgRootId === )
|
|
// if (details.node.orgRootId == "00000000-0000-0000-0000-000000000000") {
|
|
// details.done([
|
|
// {
|
|
// organizationName: "กองบริหารทั่วไป",
|
|
// organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx11",
|
|
// organizationLevel: 1,
|
|
// organizationNo: "00011",
|
|
// },
|
|
// {
|
|
// organizationName: "กองสรรหาบุคคล",
|
|
// organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx12",
|
|
// organizationLevel: 1,
|
|
// organizationNo: "00011",
|
|
// },
|
|
// {
|
|
// organizationName: "สถาบันพัฒนาทรัพยากรบุคคลกรุงเทพมหานคร",
|
|
// organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx13",
|
|
// organizationLevel: 1,
|
|
// organizationNo: "00011",
|
|
// children: [
|
|
// {
|
|
// organizationName: "ฝ่ายบริหารงานทั่วไป",
|
|
// organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx131",
|
|
// organizationLevel: 2,
|
|
// organizationNo: "00011",
|
|
// 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 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 dialogAgency = ref<boolean>(false);
|
|
const actionType = ref<string>("");
|
|
const dataNode = ref<any>();
|
|
const treeId = ref<string>("");
|
|
|
|
function onClickAgency(level: number, node: any) {
|
|
dialogAgency.value = !dialogAgency.value;
|
|
orgLevel.value = level;
|
|
dataNode.value = node;
|
|
actionType.value = "ADD";
|
|
}
|
|
|
|
const dialogDetail = ref<boolean>(false);
|
|
function onClickDetail(id: string, level: number) {
|
|
treeId.value = id;
|
|
dialogDetail.value = !dialogDetail.value;
|
|
orgLevel.value = level;
|
|
}
|
|
|
|
async function onClickEdit(node: any) {
|
|
dialogAgency.value = !dialogAgency.value;
|
|
actionType.value = "EDIT";
|
|
orgLevel.value = node.orgLevel;
|
|
dataNode.value = node;
|
|
}
|
|
|
|
async function onClickDel(type: number, id: string) {
|
|
const level = store.checkLevel(type);
|
|
dialogRemove($q, async () => {
|
|
showLoader();
|
|
await http
|
|
.delete(config.API.orgLevelByid(level.toLocaleLowerCase(), id))
|
|
.then(() => {
|
|
success($q, "ลบข้อมูลสำเร็จ");
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(async () => {
|
|
await props.fetchDataTree?.();
|
|
await hideLoader();
|
|
});
|
|
});
|
|
}
|
|
|
|
watch(
|
|
() => nodeTEST.value,
|
|
() => {
|
|
nodes.value = nodeTEST.value;
|
|
}
|
|
);
|
|
|
|
onMounted(async () => {
|
|
// setTimeout(() => {
|
|
// console.log(nodessd.value);
|
|
// }, 200);
|
|
// 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>
|
|
|
|
<template>
|
|
<div class="col-12 q-py-md q-px-lg">
|
|
<div class="q-gutter-md">
|
|
<div class="row q-col-gutter-sm">
|
|
<div class="col-2" v-if="store.typeOrganizational === 'draft'">
|
|
<q-btn
|
|
dense
|
|
flat
|
|
round
|
|
color="primary"
|
|
icon="add"
|
|
@click="onClickAgency(0, {})"
|
|
>
|
|
<q-tooltip>เพิ่มหน่วยงาน</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
|
|
<div
|
|
:class="store.typeOrganizational === 'draft' ? 'col-10' : 'col-12'"
|
|
>
|
|
<q-input dense outlined v-model="filter" label="ค้นหา">
|
|
<template v-slot:append>
|
|
<q-icon
|
|
v-if="filter !== ''"
|
|
name="clear"
|
|
class="cursor-pointer"
|
|
@click="filter = ''"
|
|
/>
|
|
</template>
|
|
</q-input>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="bg-white"
|
|
style="
|
|
height: 60vh;
|
|
border: 1px solid rgb(210, 210, 210);
|
|
border-radius: 10px;
|
|
"
|
|
>
|
|
<q-tree
|
|
class="q-pa-md q-gutter-sm"
|
|
dense
|
|
default-expand-all
|
|
selected-color="primary"
|
|
:nodes="lazy"
|
|
node-key="orgTreeId"
|
|
label-key="orgTreeId"
|
|
:filter="filter"
|
|
:no-results-label="notFound"
|
|
:no-nodes-label="noData"
|
|
:filter-method="filterData"
|
|
v-model:expanded="expanded"
|
|
v-model:selected="selected"
|
|
@update:selected="updateSelected"
|
|
>
|
|
<template v-slot:default-header="prop">
|
|
{{ prop.node.orgTreeName }}
|
|
|
|
<q-btn
|
|
v-if="store.typeOrganizational === 'draft'"
|
|
flat
|
|
dense
|
|
icon="mdi-dots-vertical"
|
|
class="q-pa-none q-ml-xs"
|
|
color="grey-13"
|
|
>
|
|
<q-menu>
|
|
<q-list
|
|
dense
|
|
v-for="(item, index) in prop.node.orgLevel === 4
|
|
? listAdd.slice(1, 6)
|
|
: listAdd"
|
|
:key="index"
|
|
style="min-width: 100px"
|
|
>
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
@click="
|
|
item.type === 'EDIT'
|
|
? onClickEdit(prop.node)
|
|
: item.type === 'ADD'
|
|
? onClickAgency(prop.node.orgLevel + 1, prop.node)
|
|
: item.type === 'DETAIL'
|
|
? onClickDetail(prop.node.orgTreeId, prop.node.orgLevel)
|
|
: item.type === 'DEL'
|
|
? onClickDel(prop.node.orgLevel, prop.node.orgTreeId)
|
|
: null
|
|
"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon :color="item.color" :name="item.icon" />
|
|
</q-item-section>
|
|
<div v-if="prop.node.orgLevel === 0">
|
|
<q-item-section
|
|
v-if="
|
|
item.type === 'ADD' ||
|
|
item.type === 'EDIT' ||
|
|
item.type === 'DEL'
|
|
"
|
|
>{{ item.label }}หน่วยงาน</q-item-section
|
|
>
|
|
<q-item-section v-else>{{ item.label }}</q-item-section>
|
|
</div>
|
|
|
|
<div v-else>
|
|
<q-item-section
|
|
v-if="
|
|
item.type === 'ADD' ||
|
|
item.type === 'EDIT' ||
|
|
item.type === 'DEL'
|
|
"
|
|
>{{ item.label }}ส่วนราชการ</q-item-section
|
|
>
|
|
<q-item-section v-else>{{ item.label }}</q-item-section>
|
|
</div>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-btn>
|
|
</template>
|
|
|
|
<template v-slot:default-body="prop">
|
|
<div v-if="prop.node.orgCode">
|
|
<span class="text-grey-13">{{ prop.node.orgCode }}</span>
|
|
</div>
|
|
</template>
|
|
</q-tree>
|
|
|
|
<!-- <div class="q-pa-md q-gutter-sm">
|
|
<q-tree :nodes="nodes" node-key="orgRootName" default-expand-all>
|
|
<template v-slot:default-header="prop">
|
|
<div class="row">
|
|
<div class="text-weight-bold text-primary">
|
|
{{ prop.node.orgRootName }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-slot:default-body="prop">
|
|
|
|
</template>
|
|
</q-tree>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- เพิ่มหน่วยงาน -->
|
|
<DialogAgency
|
|
:modal="dialogAgency"
|
|
:close="onClickAgency"
|
|
v-model:orgLevel="orgLevel"
|
|
:fetchDataTree="props.fetchDataTree"
|
|
v-model:actionType="actionType"
|
|
:dataNode="dataNode"
|
|
/>
|
|
|
|
<!-- รายละเอียดโครงสร้าง -->
|
|
<DialogStructureDetail
|
|
v-model:structure-detail="dialogDetail"
|
|
v-model:treeId="treeId"
|
|
v-model:orgLevel="orgLevel"
|
|
/>
|
|
</template>
|
|
|
|
<style scoped></style>
|