API สร้างโครงสร้าง
This commit is contained in:
parent
cf69df74ac
commit
f236159522
5 changed files with 338 additions and 265 deletions
|
|
@ -5,6 +5,7 @@ const organization = `${env.API_URI}/org`;
|
|||
export default {
|
||||
/** โครงสร้างอัตรากำลัง*/
|
||||
activeOrganization: `${organization}/active`,
|
||||
orgByid: (id: string) => `${organization}/${id}`,
|
||||
createOrganization: `${organization}/draft`,
|
||||
createOrgLevel: (type: string) => `${organization}/${type}`,
|
||||
orgLevelByid: (type: string, id: string) => `${organization}/${type}/${id}`,
|
||||
|
|
|
|||
|
|
@ -15,16 +15,31 @@ import DialogHeader from "@/components/DialogHeader.vue";
|
|||
import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const level = defineModel<string>("orgLevel", { required: true });
|
||||
const level = defineModel<number>("orgLevel", { required: true });
|
||||
const actionType = defineModel<string>("actionType", { required: true });
|
||||
const props = defineProps({
|
||||
modal: Boolean,
|
||||
close: Function,
|
||||
modal: {
|
||||
type: Boolean,
|
||||
require: true,
|
||||
},
|
||||
close: {
|
||||
type: Function,
|
||||
require: true,
|
||||
},
|
||||
fetchDataTree: {
|
||||
type: Function,
|
||||
require: true,
|
||||
},
|
||||
dataNode: {
|
||||
type: Object,
|
||||
require: true,
|
||||
},
|
||||
});
|
||||
|
||||
const $q = useQuasar();
|
||||
const store = useOrganizational();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogConfirm, showLoader, hideLoader } = mixin;
|
||||
const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
|
||||
|
||||
const orgLevelOptionMain = ref<DataOption[]>([
|
||||
{ name: "ระดับสำนัก", id: "DEPARTMENT" },
|
||||
|
|
@ -87,29 +102,28 @@ function validateForm() {
|
|||
|
||||
/** ฟังชั่น บันทึก */
|
||||
function onSubmit() {
|
||||
console.log(level.value);
|
||||
dialogConfirm($q, async () => {
|
||||
showLoader();
|
||||
const type =
|
||||
level.value === "DEPARTMENT"
|
||||
? "Root"
|
||||
: level.value === "OFFICE"
|
||||
? "Child1"
|
||||
: level.value === "DIVISION"
|
||||
? "Child2"
|
||||
: level.value === "SECTION"
|
||||
? "Child3"
|
||||
: "child4";
|
||||
|
||||
// showLoader();
|
||||
const type = store.checkLevel(level.value);
|
||||
const nameId =
|
||||
level.value === "DEPARTMENT"
|
||||
level.value === 0
|
||||
? "orgRevisionId"
|
||||
: level.value === "OFFICE"
|
||||
: level.value === 1
|
||||
? "orgRootId"
|
||||
: level.value === "DIVISION"
|
||||
: level.value === 2
|
||||
? "orgChild1Id"
|
||||
: level.value === "SECTION"
|
||||
: level.value === 3
|
||||
? "orgChild2Id"
|
||||
: "orgChild3Id";
|
||||
|
||||
let rootId: string = "";
|
||||
if (actionType.value === "ADD") {
|
||||
rootId = level.value === 0 ? store.draftId : props.dataNode?.orgTreeId;
|
||||
} else {
|
||||
rootId = level.value === 0 ? store.draftId : props.dataNode?.orgRootId;
|
||||
}
|
||||
|
||||
const body = {
|
||||
["org" + type + "Name"]: formData.orgName,
|
||||
["org" + type + "ShortName"]: formData.orgShortName,
|
||||
|
|
@ -118,34 +132,87 @@ function onSubmit() {
|
|||
["org" + type + "PhoneIn"]: formData.orgPhoneIn,
|
||||
["org" + type + "Fax"]: formData.orgFax,
|
||||
["org" + type + "Rank"]: formData.orgLevel,
|
||||
[nameId]: store.draftId,
|
||||
[nameId]: rootId,
|
||||
};
|
||||
console.log(body);
|
||||
await http
|
||||
.post(config.API.createOrgLevel(type.toLocaleLowerCase()), body)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
})
|
||||
.finally(() => {
|
||||
close();
|
||||
hideLoader();
|
||||
});
|
||||
|
||||
if (actionType.value === "ADD") {
|
||||
await http
|
||||
.post(config.API.createOrgLevel(type.toLocaleLowerCase()), body)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(async () => {
|
||||
await props.fetchDataTree?.();
|
||||
await closeClear();
|
||||
await hideLoader();
|
||||
});
|
||||
} else {
|
||||
props.dataNode &&
|
||||
(await http
|
||||
.put(
|
||||
config.API.orgLevelByid(
|
||||
type.toLocaleLowerCase(),
|
||||
props.dataNode.orgTreeId
|
||||
),
|
||||
body
|
||||
)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(async () => {
|
||||
await props.fetchDataTree?.();
|
||||
await closeClear();
|
||||
await hideLoader();
|
||||
}));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function closeClear() {
|
||||
formData.orgName = "";
|
||||
formData.orgShortName = "";
|
||||
formData.orgCode = "";
|
||||
formData.orgPhoneEx = "";
|
||||
formData.orgPhoneIn = "";
|
||||
formData.orgFax = "";
|
||||
formData.orgLevel = "";
|
||||
props.close?.();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.modal,
|
||||
() => {
|
||||
if (props.modal === true) {
|
||||
if (level.value === "DEPARTMENT") {
|
||||
formData.orgLevel = level.value;
|
||||
orgLevelOption.value = orgLevelOptionMain.value;
|
||||
if (actionType.value === "ADD") {
|
||||
if (level.value === 0) {
|
||||
formData.orgLevel = "DEPARTMENT";
|
||||
orgLevelOption.value = orgLevelOptionMain.value;
|
||||
} else {
|
||||
orgLevelOption.value = orgLevelOptionMain.value.slice(1, 4);
|
||||
formData.orgLevel = "";
|
||||
}
|
||||
} else {
|
||||
orgLevelOption.value = orgLevelOptionMain.value.slice(1, 4);
|
||||
formData.orgLevel = "";
|
||||
if (props.dataNode) {
|
||||
formData.orgName = props.dataNode.orgTreeName;
|
||||
formData.orgShortName = props.dataNode.orgTreeShortName;
|
||||
formData.orgCode = props.dataNode.orgTreeCode;
|
||||
formData.orgPhoneEx = props.dataNode.orgTreePhoneEx;
|
||||
formData.orgPhoneIn = props.dataNode.orgTreePhoneIn;
|
||||
formData.orgFax = props.dataNode.orgTreeFax;
|
||||
formData.orgLevel = props.dataNode.orgTreeRank;
|
||||
orgLevelOption.value = orgLevelOptionMain.value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -156,7 +223,7 @@ watch(
|
|||
<q-dialog v-model="props.modal" persistent>
|
||||
<q-card style="min-width: 50vw">
|
||||
<form @submit.prevent="validateForm">
|
||||
<DialogHeader :tittle="`เพิ่มหน่วยงาน`" :close="props.close" />
|
||||
<DialogHeader :tittle="`เพิ่มหน่วยงาน`" :close="closeClear" />
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<div class="row q-col-gutter-sm">
|
||||
|
|
@ -198,7 +265,7 @@ watch(
|
|||
</div>
|
||||
<div class="col-4">
|
||||
<q-select
|
||||
:readonly="level === 'DEPARTMENT'"
|
||||
:readonly="level === 0 || formData.orgLevel === 'DEPARTMENT'"
|
||||
for="#ocLevel"
|
||||
ref="orgLevelRef"
|
||||
dense
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** importType*/
|
||||
import type { DataActive } from "@/modules/02_organizationalNew/interface/response/organizational";
|
||||
|
|
@ -7,158 +10,59 @@ import type { DataActive } from "@/modules/02_organizationalNew/interface/respon
|
|||
import TreeView from "@/modules/02_organizationalNew/components/mainTree.vue";
|
||||
import TableView from "@/modules/02_organizationalNew/components/tableTree.vue";
|
||||
|
||||
import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const store = useOrganizational();
|
||||
const $q = useQuasar();
|
||||
const { showLoader, hideLoader, messageError } = useCounterMixin();
|
||||
|
||||
const showData = ref<boolean>(false);
|
||||
const nodeTree = ref<any>();
|
||||
|
||||
// defineProps<{ dataActive: DataActive }>();
|
||||
|
||||
async function fetchDataTree() {
|
||||
const data = [
|
||||
{
|
||||
organizationName: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
|
||||
organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx01",
|
||||
organizationLevel: 0,
|
||||
lazy: true,
|
||||
},
|
||||
{
|
||||
organizationName: "สำนักปลัดกรุงเทพมหานคร",
|
||||
organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx02",
|
||||
organizationLevel: 0,
|
||||
lazy: true,
|
||||
},
|
||||
];
|
||||
|
||||
// const data = [
|
||||
// {
|
||||
// orgRootId: "00000000-0000-0000-0000-000000000000",
|
||||
// orgLevel: 0,
|
||||
// orgRootName: "ปลัดกรุงเทพ",
|
||||
// orgRootShortName: "ก.น.",
|
||||
// orgRootCode: "04",
|
||||
// orgCode: "0400",
|
||||
// orgRootOrder: 1,
|
||||
// orgRootPhoneEx: "0849562355",
|
||||
// orgRootPhoneIn: "0845124512",
|
||||
// orgRootFax: "021576452",
|
||||
// orgRevisionId: "00000000-0000-0000-0000-000000000000",
|
||||
// orgChild1: [
|
||||
// {
|
||||
// orgChild1Id: "00000000-0000-0000-0000-000000000000",
|
||||
// orgLevel: 1,
|
||||
// orgChild1Name: "ปลัดกรุงเทพ",
|
||||
// orgChild1ShortName: "ก.น.",
|
||||
// orgChild1Code: "01",
|
||||
// orgCode: "0401",
|
||||
// orgChild1Order: 1,
|
||||
// orgRootCode: "04",
|
||||
// orgChild1PhoneEx: "0849562355",
|
||||
// orgChild1PhoneIn: "0845124512",
|
||||
// orgChild1Fax: "021576452",
|
||||
// orgRevisionId: "00000000-0000-0000-0000-000000000000",
|
||||
// orgChild2: [
|
||||
// {
|
||||
// orgChild2Id: "00000000-0000-0000-0000-000000000000",
|
||||
// orgLevel: 2,
|
||||
// orgChild2Name: "ปลัดกรุงเทพ",
|
||||
// orgChild2ShortName: "ก.น.",
|
||||
// orgChild2Code: "01",
|
||||
// orgCode: "0401",
|
||||
// orgChild2Order: 1,
|
||||
// orgRootCode: "04",
|
||||
// orgChild2PhoneEx: "0849562355",
|
||||
// orgChild2PhoneIn: "0845124512",
|
||||
// orgChild2Fax: "021576452",
|
||||
// orgRevisionId: "00000000-0000-0000-0000-000000000000",
|
||||
// orgChild3: [
|
||||
// {
|
||||
// orgChild3Id: "00000000-0000-0000-0000-000000000000",
|
||||
// orgLevel: 3,
|
||||
// orgChild3Name: "ปลัดกรุงเทพ",
|
||||
// orgChild3ShortName: "ก.น.",
|
||||
// orgChild3Code: "01",
|
||||
// orgCode: "0401",
|
||||
// orgChild3Order: 1,
|
||||
// orgRootCode: "04",
|
||||
// orgChild3PhoneEx: "0849562355",
|
||||
// orgChild3PhoneIn: "0845124512",
|
||||
// orgChild3Fax: "021576452",
|
||||
// orgRevisionId: "00000000-0000-0000-0000-000000000000",
|
||||
// lazy: true,
|
||||
// orgChild4: [
|
||||
// {
|
||||
// orgChild4Id: "00000000-0000-0000-0000-000000000000",
|
||||
// orgLevel: 4,
|
||||
// orgChild4Name: "ปลัดกรุงเทพ",
|
||||
// orgChild4ShortName: "ก.น.",
|
||||
// orgChild4Code: "01",
|
||||
// orgCode: "0401",
|
||||
// orgChild4Order: 1,
|
||||
// orgChild4PhoneEx: "0849562355",
|
||||
// orgChild4PhoneIn: "0845124512",
|
||||
// orgChild4Fax: "021576452",
|
||||
// orgRevisionId: "00000000-0000-0000-0000-000000000000",
|
||||
// lazy: true,
|
||||
// orgRootCode: "04",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
|
||||
// {
|
||||
// orgRootId: "00000000-0000-0000-0000-000000000001",
|
||||
// orgLevel: 0,
|
||||
// orgRootName: "ปลัดกรุงเทพ2",
|
||||
// orgRootShortName: "ก.น.",
|
||||
// orgRootCode: "04",
|
||||
// orgCode: "0400",
|
||||
// orgRootOrder: 1,
|
||||
// orgRootPhoneEx: "0849562355",
|
||||
// orgRootPhoneIn: "0845124512",
|
||||
// orgRootFax: "021576452",
|
||||
// orgRevisionId: "00000000-0000-0000-0000-000000000000",
|
||||
// orgChild1: [
|
||||
// {
|
||||
// orgChild1Id: "00000000-0000-0000-0000-000000000000",
|
||||
// orgLevel: 1,
|
||||
// orgChild1Name: "ปลัดกรุงเทพ2",
|
||||
// orgChild1ShortName: "ก.น.",
|
||||
// orgChild1Code: "01",
|
||||
// orgCode: "0401",
|
||||
// orgChild1Order: 1,
|
||||
// orgRootCode: "04",
|
||||
// orgChild1PhoneEx: "0849562355",
|
||||
// orgChild1PhoneIn: "0845124512",
|
||||
// orgChild1Fax: "021576452",
|
||||
// orgRevisionId: "00000000-0000-0000-0000-000000000000",
|
||||
// orgChild2: [],
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// ];
|
||||
|
||||
|
||||
|
||||
nodeTree.value = data;
|
||||
console.log(nodeTree.value);
|
||||
showLoader();
|
||||
const id =
|
||||
store.typeOrganizational === "current" ? store.activeId : store.draftId;
|
||||
id &&
|
||||
(await http
|
||||
.get(config.API.orgByid(id.toString()))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
nodeTree.value = data;
|
||||
console.log(res);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
}));
|
||||
// console.log(nodeTree.value);
|
||||
}
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
fetchDataTree();
|
||||
onMounted(async () => {
|
||||
await fetchDataTree();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => store.typeOrganizational,
|
||||
() => {
|
||||
fetchDataTree();
|
||||
}
|
||||
);
|
||||
</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 v-model:nodeTree="nodeTree" />
|
||||
<TreeView
|
||||
v-model:nodeTree="nodeTree"
|
||||
:fetchDataTree="fetchDataTree"
|
||||
/>
|
||||
|
||||
<div class="col-12 row">
|
||||
<q-separator :vertical="!$q.screen.lt.md" />
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<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";
|
||||
|
||||
|
|
@ -10,35 +12,45 @@ import DialogStructureDetail from "@/modules/02_organizationalNew/components/Str
|
|||
|
||||
/** importStore*/
|
||||
import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const stroe = useOrganizational();
|
||||
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: "เพิ่มส่วนราชการ",
|
||||
label: "เพิ่ม",
|
||||
icon: "add",
|
||||
type: "ADD",
|
||||
color: "primary",
|
||||
},
|
||||
{
|
||||
label: "แก้ไขหน่วยงาน",
|
||||
label: "แก้ไข",
|
||||
icon: "edit",
|
||||
type: "EDIT",
|
||||
color: "info",
|
||||
},
|
||||
{
|
||||
label: "ลบหน่วยงาน",
|
||||
label: "ลบ",
|
||||
icon: "mdi-trash-can-outline",
|
||||
type: "DEL",
|
||||
color: "red",
|
||||
},
|
||||
{
|
||||
label: "สำเนาหน่วยงาน",
|
||||
icon: "content_copy",
|
||||
type: "COPY",
|
||||
color: "blue",
|
||||
},
|
||||
// {
|
||||
// label: "สำเนาหน่วยงาน",
|
||||
// icon: "content_copy",
|
||||
// type: "COPY",
|
||||
// color: "blue",
|
||||
// },
|
||||
{
|
||||
label: "ดูประวัติหน่วยงาน",
|
||||
icon: "history",
|
||||
|
|
@ -51,12 +63,12 @@ const listAdd = ref<ListMenu[]>([
|
|||
type: "SORT",
|
||||
color: "green-7",
|
||||
},
|
||||
{
|
||||
label: "แก้ไขสถานะ",
|
||||
icon: "rule",
|
||||
type: "STATUS",
|
||||
color: "yellow-9",
|
||||
},
|
||||
// {
|
||||
// label: "แก้ไขสถานะ",
|
||||
// icon: "rule",
|
||||
// type: "STATUS",
|
||||
// color: "yellow-9",
|
||||
// },
|
||||
{
|
||||
label: "ดูรายละเอียด",
|
||||
icon: "mdi-eye",
|
||||
|
|
@ -73,7 +85,7 @@ const expanded = ref<Array<any>>([]);
|
|||
const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
|
||||
const noData = ref<string>("ไม่มีข้อมูล");
|
||||
const selected = ref("");
|
||||
const orgLevel = ref<string>("");
|
||||
const orgLevel = ref<number>(0);
|
||||
|
||||
const filterData = (node: any, filter: string) => {
|
||||
// ให้ทาง API ค้นหาให้
|
||||
|
|
@ -134,60 +146,60 @@ const updateSelected = (target: any) => {
|
|||
};
|
||||
|
||||
const onLazyLoad = (details: { node: any; key: any; done: any; fail: any }) => {
|
||||
console.log(details.node.organizationName);
|
||||
|
||||
if (details.node.organizationId == "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx01") {
|
||||
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,
|
||||
},
|
||||
]);
|
||||
}
|
||||
// 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);
|
||||
};
|
||||
|
||||
|
|
@ -228,18 +240,47 @@ function searchAndReplace(
|
|||
}
|
||||
|
||||
const dialogAgency = ref<boolean>(false);
|
||||
function onClickAgency(level: string) {
|
||||
const actionType = ref<string>("");
|
||||
const dataNode = ref<any>();
|
||||
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() {
|
||||
console.log(dialogDetail.value);
|
||||
|
||||
dialogDetail.value = !dialogDetail.value;
|
||||
}
|
||||
|
||||
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,
|
||||
() => {
|
||||
|
|
@ -281,21 +322,21 @@ onMounted(async () => {
|
|||
<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'">
|
||||
<div class="col-2" v-if="store.typeOrganizational === 'draft'">
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="add"
|
||||
@click="onClickAgency('DEPARTMENT')"
|
||||
@click="onClickAgency(0, {})"
|
||||
>
|
||||
<q-tooltip>เพิ่มหน่วยงาน</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div
|
||||
:class="stroe.typeOrganizational === 'draft' ? 'col-10' : 'col-12'"
|
||||
:class="store.typeOrganizational === 'draft' ? 'col-10' : 'col-12'"
|
||||
>
|
||||
<q-input dense outlined v-model="filter" label="ค้นหา">
|
||||
<template v-slot:append>
|
||||
|
|
@ -323,8 +364,8 @@ onMounted(async () => {
|
|||
default-expand-all
|
||||
selected-color="primary"
|
||||
:nodes="lazy"
|
||||
node-key="organizationId"
|
||||
label-key="organizationName"
|
||||
node-key="orgTreeId"
|
||||
label-key="orgTreeId"
|
||||
:filter="filter"
|
||||
:no-results-label="notFound"
|
||||
:no-nodes-label="noData"
|
||||
|
|
@ -332,23 +373,24 @@ onMounted(async () => {
|
|||
v-model:expanded="expanded"
|
||||
v-model:selected="selected"
|
||||
@update:selected="updateSelected"
|
||||
@lazy-load="onLazyLoad"
|
||||
>
|
||||
<template v-slot:default-header="prop">
|
||||
{{ prop.node.organizationName }}
|
||||
{{ prop.node.orgTreeName }}
|
||||
|
||||
<q-btn
|
||||
v-if="store.typeOrganizational === 'draft'"
|
||||
flat
|
||||
dense
|
||||
icon="mdi-dots-vertical"
|
||||
class="q-pa-none q-ml-xs"
|
||||
v-if="stroe.typeOrganizational === 'draft'"
|
||||
color="grey-13"
|
||||
>
|
||||
<q-menu>
|
||||
<q-list
|
||||
dense
|
||||
v-for="(item, index) in listAdd"
|
||||
v-for="(item, index) in prop.node.orgLevel === 4
|
||||
? listAdd.slice(1, 6)
|
||||
: listAdd"
|
||||
:key="index"
|
||||
style="min-width: 100px"
|
||||
>
|
||||
|
|
@ -357,18 +399,42 @@ onMounted(async () => {
|
|||
v-close-popup
|
||||
@click="
|
||||
item.type === 'EDIT'
|
||||
? edit(prop.node.organizationId)
|
||||
? onClickEdit(prop.node)
|
||||
: item.type === 'ADD'
|
||||
? onClickAgency('TEST')
|
||||
? onClickAgency(prop.node.orgLevel + 1, prop.node)
|
||||
: item.type === 'DETAIL'
|
||||
? onClickDetail()
|
||||
: 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>
|
||||
<q-item-section>{{ item.label }}</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>
|
||||
|
|
@ -376,11 +442,27 @@ onMounted(async () => {
|
|||
</template>
|
||||
|
||||
<template v-slot:default-body="prop">
|
||||
<div v-if="prop.node.organizationNo">
|
||||
<span class="text-grey-13">{{ prop.node.organizationNo }}</span>
|
||||
<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>
|
||||
|
|
@ -390,6 +472,9 @@ onMounted(async () => {
|
|||
:modal="dialogAgency"
|
||||
:close="onClickAgency"
|
||||
v-model:orgLevel="orgLevel"
|
||||
:fetchDataTree="props.fetchDataTree"
|
||||
v-model:actionType="actionType"
|
||||
:dataNode="dataNode"
|
||||
/>
|
||||
|
||||
<!-- รายละเอียดโครงสร้าง -->
|
||||
|
|
|
|||
|
|
@ -17,12 +17,28 @@ export const useOrganizational = defineStore("organizationalStore", () => {
|
|||
dataActive.value = data;
|
||||
}
|
||||
|
||||
function checkLevel(type: number) {
|
||||
switch (type) {
|
||||
case 0:
|
||||
return "Root";
|
||||
case 1:
|
||||
return "Child1";
|
||||
case 2:
|
||||
return "Child2";
|
||||
case 3:
|
||||
return "Child3";
|
||||
default:
|
||||
return "Child4";
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
typeOrganizational,
|
||||
statusView,
|
||||
|
||||
//
|
||||
fetchDataActive,
|
||||
checkLevel,
|
||||
draftId,
|
||||
activeId,
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue