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

ปรับ Tree

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-02-06 16:53:53 +07:00
parent cda9e56239
commit fdda661a3f
3 changed files with 182 additions and 152 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/modules/02_organizationalNew/components/DialogMovePos.vue
View file

@ -10,6 +10,7 @@ import type {
PosMaster2, PosMaster2,
} from "@/modules/02_organizationalNew/interface/response/organizational"; } from "@/modules/02_organizationalNew/interface/response/organizational";
import type { MovePos } from "@/modules/02_organizationalNew/interface/request/organizational"; import type { MovePos } from "@/modules/02_organizationalNew/interface/request/organizational";
import type { DataTree } from "@/modules/02_organizationalNew/interface/index/organizational";
import HeaderDialog from "@/components/DialogHeader.vue"; import HeaderDialog from "@/components/DialogHeader.vue";
@ -61,8 +62,9 @@ function resetFilter() {
filterRef.value.focus(); filterRef.value.focus();
} }
function updateSelected(orgLevel: number) { function updateSelected(data: DataTree) {
levelTree.value = orgLevel; levelTree.value = data.orgLevel;
selectedTree.value = data.orgTreeId;
} }
const isDisable = computed(() => { const isDisable = computed(() => {
@ -115,6 +117,10 @@ watch(
if (modal.value && props.type === "SINGER") { if (modal.value && props.type === "SINGER") {
const data = rows.value.filter((e: PosMaster2) => e.id === props.rowId); const data = rows.value.filter((e: PosMaster2) => e.id === props.rowId);
selectedFilter.value = data; selectedFilter.value = data;
selectedTree.value = "";
} else {
selectedFilter.value = [];
selectedTree.value = "";
} }
} }
); );
@ -225,13 +231,16 @@ watch(
:filter="filterTree" :filter="filterTree"
no-results-label="ไม่พบข้อมูลที่ค้นหา" no-results-label="ไม่พบข้อมูลที่ค้นหา"
no-nodes-label="ไม่มีข้อมูล" no-nodes-label="ไม่มีข้อมูล"
v-model:selected="selectedTree"
> >
<template v-slot:default-header="prop"> <template v-slot:default-header="prop">
<!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree--> <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
<div
class="row items-center q-px-xs q-pt-xs q-gutter-sm" <q-item
@click="updateSelected(prop.node.orgLevel)" clickable
:active="selectedTree == prop.node.orgTreeId"
@click.stop="updateSelected(prop.node)"
active-class="my-list-link text-primary text-weight-medium"
class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
> >
<div> <div>
<div class="text-weight-medium"> <div class="text-weight-medium">
@ -246,7 +255,7 @@ watch(
}} }}
</div> </div>
</div> </div>
</div> </q-item>
</template> </template>
</q-tree> </q-tree>
</q-card> </q-card>
@ -271,4 +280,12 @@ watch(
</q-dialog> </q-dialog>
</template> </template>
<style scoped></style> <style scoped>
.my-list-link {
color: rgb(118, 168, 222);
border-radius: 5px;
background: #a3d3fb48 !important;
font-weight: 600;
border: 1px solid rgba(175, 185, 196, 0.217);
}
</style>

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

@ -59,8 +59,8 @@ async function fetchDataTree(id: string) {
.then((res) => { .then((res) => {
const data = res.data.result; const data = res.data.result;
nodeTree.value = data; nodeTree.value = data;
selected.value = ""; // selected.value = "";
nodeId.value = ""; // nodeId.value = "";
}) })
.catch((err) => { .catch((err) => {
messageError($q, err); messageError($q, err);

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

@ -99,20 +99,21 @@ const orgId = ref<string>("");
function updateSelected(data: DataTree) { function updateSelected(data: DataTree) {
store.treeId = data.orgTreeId; store.treeId = data.orgTreeId;
store.level = data.orgLevel; store.level = data.orgLevel;
if (data.orgTreeId === nodeId.value) { // if (data.orgTreeId === nodeId.value) {
nodeId.value = ""; // nodeId.value = "";
} else { // } else {
nodeId.value = data.orgTreeId ? data.orgTreeId : ""; nodeId.value = data.orgTreeId ? data.orgTreeId : "111";
data.orgTreeId &&
props.fetchDataTable?.(data.orgTreeId, data.orgLevel, true); data.orgTreeId && props.fetchDataTable?.(data.orgTreeId, data.orgLevel, true);
store.getSumPosition({ store.getSumPosition({
totalPosition: data.totalPosition, totalPosition: data.totalPosition,
totalPositionCurrentUse: data.totalPositionCurrentUse, totalPositionCurrentUse: data.totalPositionCurrentUse,
totalPositionCurrentVacant: data.totalPositionCurrentVacant, totalPositionCurrentVacant: data.totalPositionCurrentVacant,
totalPositionNextUse: data.totalPositionNextUse, totalPositionNextUse: data.totalPositionNextUse,
totalPositionNextVacant: data.totalPositionNextVacant, totalPositionNextVacant: data.totalPositionNextVacant,
}); });
}
// }
} }
const breakLoop = ref<boolean>(false); const breakLoop = ref<boolean>(false);
@ -349,6 +350,8 @@ watch(
nodes.value = nodeTEST.value; nodes.value = nodeTEST.value;
} }
); );
const modaeMenu = ref<boolean>(false);
</script> </script>
<template> <template>
@ -389,7 +392,6 @@ watch(
class="q-pa-sm q-gutter-sm" class="q-pa-sm q-gutter-sm"
dense dense
default-expand-all default-expand-all
selected-color="primary"
:nodes="lazy" :nodes="lazy"
node-key="orgTreeId" node-key="orgTreeId"
label-key="orgTreeName" label-key="orgTreeName"
@ -397,16 +399,15 @@ watch(
:no-results-label="notFound" :no-results-label="notFound"
:no-nodes-label="noData" :no-nodes-label="noData"
v-model:expanded="expanded" v-model:expanded="expanded"
v-model:selected="selected"
> >
<template v-slot:default-header="prop"> <template v-slot:default-header="prop">
<!-- {{ prop.node.orgTreeName }} --> <q-item
clickable
<div :active="nodeId == prop.node.orgTreeId"
class="row items-center q-px-xs q-pt-xs q-gutter-sm" @click.stop="updateSelected(prop.node)"
@click="updateSelected(prop.node)" active-class="my-list-link text-primary text-weight-medium"
class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
> >
<!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
<div> <div>
<div class="text-weight-medium"> <div class="text-weight-medium">
{{ prop.node.orgTreeName }} {{ prop.node.orgTreeName }}
@ -420,132 +421,136 @@ watch(
}} }}
</div> </div>
</div> </div>
</div>
<!-- v-if="store.typeOrganizational === 'draft' && !store.isPublic" --> <q-btn
<q-btn v-if="store.typeOrganizational === 'draft'"
v-if="store.typeOrganizational === 'draft'" flat
flat dense
dense icon="mdi-dots-vertical"
icon="mdi-dots-vertical" class="q-ml-xs"
class="q-ml-xs" color="grey-13"
color="grey-13" size="12px"
size="12px" round
round >
> <q-menu>
<q-menu> <q-list
<q-list dense
dense v-for="(item, index) in prop.node.orgLevel === 4
v-for="(item, index) in prop.node.orgLevel === 4 ? listAdd.slice(1, 6)
? listAdd.slice(1, 6) : listAdd"
: listAdd" :key="index"
:key="index" style="min-width: 100px"
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,
prop.node.orgRootId
)
: item.type === 'SORT'
? onClickSort(prop.node.orgRootId, prop.node.orgLevel)
: item.type === 'HISTORY'
? onClickHistory(
prop.node.orgLevel,
prop.node.orgTreeId
)
: null
"
> >
<q-item-section avatar style="min-width: 20px"> <q-item
<q-icon clickable
size="17px" v-close-popup
:color="item.color" @click="
:name="item.icon" item.type === 'EDIT'
/> ? onClickEdit(prop.node)
</q-item-section> : item.type === 'ADD'
<div v-if="prop.node.orgLevel === 0"> ? onClickAgency(prop.node.orgLevel + 1, prop.node)
<q-item-section : item.type === 'DETAIL'
v-if=" ? onClickDetail(
item.type === 'EDIT' || prop.node.orgTreeId,
item.type === 'DEL' || prop.node.orgLevel
item.type === 'HISTORY' || )
item.type === 'SORT' : item.type === 'DEL'
" ? onClickDel(
> prop.node.orgLevel,
{{ item.label }}หน่วยงาน prop.node.orgTreeId,
prop.node.orgRootId
)
: item.type === 'SORT'
? onClickSort(prop.node.orgRootId, prop.node.orgLevel)
: item.type === 'HISTORY'
? onClickHistory(
prop.node.orgLevel,
prop.node.orgTreeId
)
: null
"
>
<q-item-section avatar style="min-width: 20px">
<q-icon
size="17px"
:color="item.color"
:name="item.icon"
/>
</q-item-section> </q-item-section>
<q-item-section v-else-if="item.type === 'ADD'"> <div v-if="prop.node.orgLevel === 0">
{{ item.label }}ส่วนราชการ <q-item-section
</q-item-section> v-if="
<q-item-section v-else> {{ item.label }} </q-item-section> item.type === 'EDIT' ||
</div> item.type === 'DEL' ||
item.type === 'HISTORY' ||
item.type === 'SORT'
"
>
{{ item.label }}หน่วยงาน
</q-item-section>
<q-item-section v-else-if="item.type === 'ADD'">
{{ item.label }}ส่วนราชการ
</q-item-section>
<q-item-section v-else>
{{ item.label }}
</q-item-section>
</div>
<div v-else> <div v-else>
<q-item-section <q-item-section
v-if=" v-if="
item.type === 'ADD' || item.type === 'ADD' ||
item.type === 'EDIT' || item.type === 'EDIT' ||
item.type === 'DEL' || item.type === 'DEL' ||
item.type === 'HISTORY' || item.type === 'HISTORY' ||
item.type === 'SORT' item.type === 'SORT'
" "
>{{ item.label }}ส่วนราชการ</q-item-section >{{ item.label }}ส่วนราชการ</q-item-section
> >
<q-item-section v-else>{{ item.label }}</q-item-section> <q-item-section v-else>{{ item.label }}</q-item-section>
</div> </div>
</q-item> </q-item>
</q-list> </q-list>
</q-menu> </q-menu>
</q-btn> </q-btn>
<q-btn <q-btn
v-else v-else
flat flat
dense dense
icon="mdi-dots-vertical" icon="mdi-dots-vertical"
class="q-pa-none q-ml-xs" class="q-pa-none q-ml-xs"
color="grey-13" color="grey-13"
size="12px" size="12px"
round round
> >
<q-menu> <q-menu>
<q-list <q-list
dense dense
v-for="(item, index) in listAdd.slice(5, 6)" v-for="(item, index) in listAdd.slice(5, 6)"
:key="index" :key="index"
style="min-width: 100px" style="min-width: 100px"
>
<q-item
clickable
v-close-popup
@click="
onClickDetail(prop.node.orgTreeId, prop.node.orgLevel)
"
> >
<q-item-section avatar style="min-width: 20px"> <q-item
<q-icon clickable
size="17px" v-close-popup
:color="item.color" @click="
:name="item.icon" onClickDetail(prop.node.orgTreeId, prop.node.orgLevel)
/> "
</q-item-section> >
<q-item-section>{{ item.label }}</q-item-section> <q-item-section avatar style="min-width: 20px">
</q-item> <q-icon
</q-list> size="17px"
</q-menu> :color="item.color"
</q-btn> :name="item.icon"
/>
</q-item-section>
<q-item-section>{{ item.label }}</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-item>
</template> </template>
</q-tree> </q-tree>
</div> </div>
@ -590,4 +595,12 @@ watch(
border: 1px solid #e6e6e7; border: 1px solid #e6e6e7;
border-radius: 10px; border-radius: 10px;
} }
.my-list-link {
color: rgb(118, 168, 222);
border-radius: 5px;
background: #a3d3fb48 !important;
font-weight: 600;
border: 1px solid rgba(175, 185, 196, 0.217);
}
</style> </style>