โครงสร้าอัตรากำลัง
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
18b7a3b4e6
commit
433707964a
8 changed files with 583 additions and 5 deletions
|
|
@ -523,7 +523,7 @@ const dayThaiRange = (val: [Date, Date]) => {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scope>
|
||||
.custom-header-table {
|
||||
max-height: 64vh;
|
||||
|
||||
|
|
|
|||
|
|
@ -552,7 +552,7 @@ const dateThaiRange = (val: [Date, Date] | []) => {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
.my-menu-link {
|
||||
color: black;
|
||||
background: #d0d0d0;
|
||||
|
|
|
|||
25
src/modules/02_organizationalNew/components/listView.vue
Normal file
25
src/modules/02_organizationalNew/components/listView.vue
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<script setup lang="ts">
|
||||
import TreeView from "@/modules/02_organizationalNew/components/mainTree.vue";
|
||||
import TableView from "@/modules/02_organizationalNew/components/tableTree.vue";
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-12">
|
||||
<q-card bordered class="col-12 row caedNone">
|
||||
<div class="col-xs-12 col-sm-3 row">
|
||||
<div class="col-12 row no-wrap bg-grey-1">
|
||||
<TreeView />
|
||||
|
||||
<div class="col-12 row">
|
||||
<q-separator :vertical="!$q.screen.lt.md" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-9 q-pa-md">
|
||||
<div class="col-12 row items-center"><TableView /></div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
344
src/modules/02_organizationalNew/components/mainTree.vue
Normal file
344
src/modules/02_organizationalNew/components/mainTree.vue
Normal file
|
|
@ -0,0 +1,344 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
/** importStore*/
|
||||
import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
|
||||
|
||||
const stroe = useOrganizational();
|
||||
const $q = useQuasar();
|
||||
|
||||
const showData = ref<boolean>(false);
|
||||
const listAdd = ref<any>([
|
||||
{
|
||||
label: "เพิ่มส่วนราชการ",
|
||||
icon: "add",
|
||||
val: "ADD",
|
||||
color: "primary",
|
||||
},
|
||||
{
|
||||
label: "แก้ไขหน่วยงาน",
|
||||
icon: "edit",
|
||||
val: "EDIT",
|
||||
color: "info",
|
||||
},
|
||||
{
|
||||
label: "ลบหน่วยงาน",
|
||||
icon: "mdi-trash-can-outline",
|
||||
val: "DEL",
|
||||
color: "red",
|
||||
},
|
||||
{
|
||||
label: "สำเนาหน่วยงาน",
|
||||
icon: "content_copy",
|
||||
val: "COPY",
|
||||
color: "blue",
|
||||
},
|
||||
{
|
||||
label: "ดูประวัติหน่วยงาน",
|
||||
icon: "history",
|
||||
val: "HISTORY",
|
||||
color: "purple",
|
||||
},
|
||||
{
|
||||
label: "จัดลำดับ",
|
||||
icon: "filter_list",
|
||||
val: "SORT",
|
||||
color: "green-7",
|
||||
},
|
||||
{
|
||||
label: "แก้ไขสถานะ",
|
||||
icon: "checklist_rtl",
|
||||
val: "STATUS",
|
||||
color: "yellow-9",
|
||||
},
|
||||
]);
|
||||
|
||||
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 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 }) => {
|
||||
// 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 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
<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="stroe.typeOrganizational === 'draft'">
|
||||
<q-btn dense flat round color="primary" icon="add">
|
||||
<q-tooltip>เพิ่ม</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div
|
||||
:class="stroe.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-sm"
|
||||
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"
|
||||
v-if="stroe.typeOrganizational === 'draft'"
|
||||
>
|
||||
<q-menu>
|
||||
<q-list
|
||||
style="min-width: 100px"
|
||||
v-for="(item, index) in listAdd"
|
||||
:key="index"
|
||||
>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="
|
||||
item.val === 'EDIT'
|
||||
? edit(prop.node.organizationId)
|
||||
: null
|
||||
"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon :color="item.color" :name="item.icon" />
|
||||
</q-item-section>
|
||||
<q-item-section>{{ item.label }}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</template>
|
||||
</q-tree>
|
||||
</div>
|
||||
<div>
|
||||
<q-checkbox
|
||||
keep-color
|
||||
v-model="showData"
|
||||
label="แสดงโครงสร้างทั้งหมด"
|
||||
color="primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<script setup lang="ts"></script>
|
||||
<template>
|
||||
<div>Structure View</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
54
src/modules/02_organizationalNew/components/tableTree.vue
Normal file
54
src/modules/02_organizationalNew/components/tableTree.vue
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
|
||||
|
||||
const stroe = useOrganizational();
|
||||
const filter = ref<string>("");
|
||||
const document = ref<any>([
|
||||
{
|
||||
name: "บัญชี 1",
|
||||
val: "1",
|
||||
},
|
||||
{
|
||||
name: "บัญชี 2",
|
||||
val: "2",
|
||||
},
|
||||
{
|
||||
name: "บัญชี 3",
|
||||
val: "3",
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
<template>
|
||||
<q-toolbar class="text" style="padding: 0">
|
||||
<div v-if="stroe.typeOrganizational === 'draft'">
|
||||
<q-btn flat round dense color="primary" icon="add">
|
||||
<q-tooltip>เพิ่ม</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn flat round dense color="blue" icon="filter_list">
|
||||
<q-tooltip>ค้นหา</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<q-btn flat round dense color="blue-10" icon="save_alt">
|
||||
<q-menu>
|
||||
<q-list
|
||||
style="min-width: 100px"
|
||||
v-for="(item, index) in document"
|
||||
:key="index"
|
||||
>
|
||||
<q-item clickable v-close-popup>
|
||||
<q-item-section>{{ item.name }}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
<q-tooltip>ดาวน์โหลด</q-tooltip>
|
||||
</q-btn>
|
||||
<q-space />
|
||||
<q-input outlined dense v-model="filter" label="ค้นหา" />
|
||||
</q-toolbar>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
12
src/modules/02_organizationalNew/store/organizational.ts
Normal file
12
src/modules/02_organizationalNew/store/organizational.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import { defineStore } from "pinia";
|
||||
import { ref } from "vue";
|
||||
|
||||
export const useOrganizational = defineStore("organizationalStore", () => {
|
||||
const typeOrganizational = ref<string>("current");
|
||||
const statusView = ref<string>("list");
|
||||
|
||||
return {
|
||||
typeOrganizational,
|
||||
statusView,
|
||||
};
|
||||
});
|
||||
|
|
@ -1,7 +1,144 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
/** importComponents*/
|
||||
import ListView from "@/modules/02_organizationalNew/components/listView.vue";
|
||||
import StructureView from "@/modules/02_organizationalNew/components/structureView.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
|
||||
|
||||
const stroe = useOrganizational();
|
||||
|
||||
const isStatusData = ref<boolean>(true);
|
||||
|
||||
const itemStructure = ref<any>([
|
||||
{
|
||||
val: "NEW",
|
||||
name: "สร้างใหม่",
|
||||
},
|
||||
{
|
||||
val: "STRUCTURE",
|
||||
name: "ทำสำเนาเฉพาะโครงสร้าง",
|
||||
},
|
||||
{
|
||||
val: "STRUCTUREANDPOSITION",
|
||||
name: "ทำสำเนาโครงสร้างและตำแหน่ง",
|
||||
},
|
||||
{
|
||||
val: "STRUCTUREANDPOSITION",
|
||||
name: "ทำสำเนาโครงสร้าง ตำแหน่งและคนครอง",
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
<template>
|
||||
โครงสร้างอัตรากำลัง (ใหม่)
|
||||
<div class="row">
|
||||
<div class="toptitle text-dark row items-center">โครงสร้างอัตรากำลัง</div>
|
||||
<q-space />
|
||||
<div class="toptitle row" v-if="stroe.typeOrganizational === 'draft'">
|
||||
<q-btn color="indigo-9" icon="alarm" label="ตั้งเวลาเผยแพร่"> </q-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-card flat bordered>
|
||||
<div class="q-pa-xl" v-if="!isStatusData">
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
style="
|
||||
height: 70vh;
|
||||
border: 1px solid rgb(210, 210, 210);
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="text-center row"
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
"
|
||||
>
|
||||
<div>
|
||||
<q-btn
|
||||
flat
|
||||
style="background-color: #d8f5f2"
|
||||
round
|
||||
color="primary"
|
||||
size="lg"
|
||||
icon="add"
|
||||
@click="isStatusData = true"
|
||||
>
|
||||
<q-tooltip>เพิ่มโครงสร้าง </q-tooltip>
|
||||
</q-btn>
|
||||
<div class="q-mt-sm">เพิ่มโครงสร้าง</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div v-else>
|
||||
<q-card class="my-card">
|
||||
<q-card-section>
|
||||
<q-toolbar class="q-gutter-md" style="padding: 0px">
|
||||
<q-btn-group outline>
|
||||
<q-btn
|
||||
:outline="stroe.typeOrganizational === 'current' ? false : true"
|
||||
color="blue"
|
||||
label="ปัจจุบัน"
|
||||
@click="stroe.typeOrganizational = 'current'"
|
||||
/>
|
||||
<q-btn
|
||||
:outline="stroe.typeOrganizational === 'draft' ? false : true"
|
||||
color="blue"
|
||||
label="แบบร่าง"
|
||||
@click="stroe.typeOrganizational = 'draft'"
|
||||
/>
|
||||
</q-btn-group>
|
||||
|
||||
<q-btn-dropdown color="green" label="ปรับโครงสร้าง">
|
||||
<q-list>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
v-for="(item, index) in itemStructure"
|
||||
:key="index"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ item.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
|
||||
<q-btn flat round color="primary" icon="history">
|
||||
<q-tooltip>ประวัติโครงสร้าง</q-tooltip>
|
||||
</q-btn>
|
||||
<q-space />
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
:color="stroe.statusView === 'list' ? 'grey-7' : 'grey-4'"
|
||||
icon="list"
|
||||
@click="stroe.statusView = 'list'"
|
||||
/>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
icon="account_tree"
|
||||
:color="stroe.statusView === 'tree' ? 'grey-7' : 'grey-4'"
|
||||
@click="stroe.statusView = 'tree'"
|
||||
/>
|
||||
</q-toolbar>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section style="padding: 0px">
|
||||
<ListView v-if="stroe.statusView === 'list'" />
|
||||
<StructureView v-if="stroe.statusView === 'tree'" />
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue