hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Merge branch 'develop' into devTee

Browse source
This commit is contained in:
setthawutttty 2024-01-30 14:20:54 +07:00
commit db968d9dd5
9 changed files with 382 additions and 301 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/api/02_organizational/api.organization.ts
View file

@ -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}`,

5
src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue
View file

@ -17,7 +17,6 @@ const router = useRouter();
const route = useRoute();
const $q = useQuasar();
const store = useInsigniaDataStore();
const row = ref<DetailRow[]>();
const mixin = useCounterMixin();
const { date2Thai, messageError, hideLoader, showLoader } = mixin;
const id = ref<string>(route.params.id.toString());
@ -40,7 +39,7 @@ async function fetchData(id: string) {
}
onMounted(async () => {
fetchData(id.value);
await fetchData(id.value);
});
</script>
@ -60,7 +59,7 @@ onMounted(async () => {
</div>
<q-card flat bordered>
<InsigniaList :data="row" />
<InsigniaList :fetchData="fetchData"/>
</q-card>
</template>

67
src/modules/01_metadataNew/components/insignia/InsigniaList.vue
View file

@ -12,6 +12,13 @@ import config from "@/app.config";
const store = useInsigniaDataStore();
const router = useRouter();
const mixin = useCounterMixin();
const props = defineProps({
fetchData: {
type: Function,
default: ()=>"",
}
})
const {
date2Thai,
dialogRemove,
@ -23,17 +30,14 @@ const {
const $q = useQuasar();
const columns = ref<QTableProps["columns"]>([
{
name: "level",
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "level",
sortable: false,
field: "no",
headerStyle: "font-size: 14px; width:0px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "name",
align: "left",
@ -144,7 +148,7 @@ const shortNameRef = ref<any>(null);
const dialogStatus = ref<string>("");
const editId = ref<string>("");
const visibleColumns = ref<string[]>([
"level",
"no",
"name",
"shortName",
"insigniaType",
@ -165,24 +169,24 @@ function validateForm() {
onSubmit();
}
async function fetchData(id: string) {
showLoader();
await http
.get(config.API.insigniaTypeNewId(id))
.then(async (res) => {
insigniaTypeId.value = res.data.result.name;
store.fetchData(res.data.result.insignias, res.data.result.name);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
onMounted(async () => {
fetchData(id.value);
});
// async function fetchData(id: string) {
// showLoader();
// await http
// .get(config.API.insigniaTypeNewId(id))
// .then(async (res) => {
// insigniaTypeId.value = res.data.result.name;
// store.fetchData(res.data.result.insignias, res.data.result.name);
// })
// .catch((err) => {
// messageError($q, err);
// })
// .finally(() => {
// hideLoader();
// });
// }
// onMounted(async () => {
// fetchData(id.value);
// });
async function onSubmit() {
if (name.value.length > 0 && shortName.value.length > 0) {
@ -210,7 +214,7 @@ async function addData() {
note: note.value == "" ? "-" : note.value,
insigniaTypeId: id.value,
});
fetchData(id.value);
props.fetchData(id.value);
}
async function editData(idData: string) {
@ -221,12 +225,12 @@ async function editData(idData: string) {
note: note.value == "" ? "-" : note.value,
insigniaTypeId: id.value,
});
fetchData(id.value);
props.fetchData(id.value);
}
async function deleteData(idData: string) {
await http.delete(config.API.insigniaNewId(idData));
fetchData(id.value);
props.fetchData(id.value);
}
import { defineEmits } from "vue";
@ -305,8 +309,11 @@ const dialogOrder = ref<boolean>(false);
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.id">
<div v-if="col.name == 'isActive'">
<q-td v-for="(col, index) in props.cols" :key="col.id">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'isActive'">
<q-icon
v-if="col.value == false"
name="mdi-close"

2
src/modules/01_metadataNew/components/insignia/TableDraggable.vue
View file

@ -58,6 +58,7 @@ async function save() {
});
console.log("post data===>", dataPost);
modal.value = false
// showLoader();
// await http
// .put(config.API.insigniaTypeNewId(id), dataPost)
@ -68,6 +69,7 @@ async function save() {
// })
// .finally(() => {
// hideLoader();
store.row = rows.value
// });
}

6
src/modules/01_metadataNew/stores/InsigniaStore.ts
View file

@ -11,9 +11,9 @@ const { date2Thai } = useCounterMixin();
export const useInsigniaDataStore = defineStore("insigniaData", () => {
const row = ref<DataRow[]>([]);
function fetchData(data: DataResponse[], insigniaType?: string) {
data.forEach((row, index) => {
row.level = index + 1;
});
// data.forEach((row, index) => {
// row.level = index + 1;
// });
const list = data.map((e) => ({
...e,
insigniaType: insigniaType,

147
src/modules/02_organizationalNew/components/DialogFormAgency.vue
View file

@ -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

180
src/modules/02_organizationalNew/components/listView.vue
View file

@ -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" />

259
src/modules/02_organizationalNew/components/mainTree.vue
View file

@ -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"
/>
<!-- รายละเอียดโครงสร้าง -->

16
src/modules/02_organizationalNew/store/organizational.ts
View file

@ -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,
};