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,
} from "@/modules/02_organizationalNew/interface/response/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";
@ -61,8 +62,9 @@ function resetFilter() {
filterRef.value.focus();
}
function updateSelected(orgLevel: number) {
levelTree.value = orgLevel;
function updateSelected(data: DataTree) {
levelTree.value = data.orgLevel;
selectedTree.value = data.orgTreeId;
}
const isDisable = computed(() => {
@ -115,6 +117,10 @@ watch(
if (modal.value && props.type === "SINGER") {
const data = rows.value.filter((e: PosMaster2) => e.id === props.rowId);
selectedFilter.value = data;
selectedTree.value = "";
} else {
selectedFilter.value = [];
selectedTree.value = "";
}
}
);
@ -225,13 +231,16 @@ watch(
:filter="filterTree"
no-results-label="ไม่พบข้อมูลที่ค้นหา"
no-nodes-label="ไม่มีข้อมูล"
v-model:selected="selectedTree"
>
<template v-slot:default-header="prop">
<!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
<div
class="row items-center q-px-xs q-pt-xs q-gutter-sm"
@click="updateSelected(prop.node.orgLevel)"
<q-item
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 class="text-weight-medium">
@ -246,7 +255,7 @@ watch(
}}
</div>
</div>
</div>
</q-item>
</template>
</q-tree>
</q-card>
@ -271,4 +280,12 @@ watch(
</q-dialog>
</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) => {
const data = res.data.result;
nodeTree.value = data;
selected.value = "";
nodeId.value = "";
// selected.value = "";
// nodeId.value = "";
})
.catch((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) {
store.treeId = data.orgTreeId;
store.level = data.orgLevel;
if (data.orgTreeId === nodeId.value) {
nodeId.value = "";
} else {
nodeId.value = data.orgTreeId ? data.orgTreeId : "";
data.orgTreeId &&
props.fetchDataTable?.(data.orgTreeId, data.orgLevel, true);
store.getSumPosition({
totalPosition: data.totalPosition,
totalPositionCurrentUse: data.totalPositionCurrentUse,
totalPositionCurrentVacant: data.totalPositionCurrentVacant,
totalPositionNextUse: data.totalPositionNextUse,
totalPositionNextVacant: data.totalPositionNextVacant,
});
}
// if (data.orgTreeId === nodeId.value) {
// nodeId.value = "";
// } else {
nodeId.value = data.orgTreeId ? data.orgTreeId : "111";
data.orgTreeId && props.fetchDataTable?.(data.orgTreeId, data.orgLevel, true);
store.getSumPosition({
totalPosition: data.totalPosition,
totalPositionCurrentUse: data.totalPositionCurrentUse,
totalPositionCurrentVacant: data.totalPositionCurrentVacant,
totalPositionNextUse: data.totalPositionNextUse,
totalPositionNextVacant: data.totalPositionNextVacant,
});
// }
}
const breakLoop = ref<boolean>(false);
@ -349,6 +350,8 @@ watch(
nodes.value = nodeTEST.value;
}
);
const modaeMenu = ref<boolean>(false);
</script>
<template>
@ -389,7 +392,6 @@ watch(
class="q-pa-sm q-gutter-sm"
dense
default-expand-all
selected-color="primary"
:nodes="lazy"
node-key="orgTreeId"
label-key="orgTreeName"
@ -397,16 +399,15 @@ watch(
:no-results-label="notFound"
:no-nodes-label="noData"
v-model:expanded="expanded"
v-model:selected="selected"
>
<template v-slot:default-header="prop">
<!-- {{ prop.node.orgTreeName }} -->
<div
class="row items-center q-px-xs q-pt-xs q-gutter-sm"
@click="updateSelected(prop.node)"
<q-item
clickable
:active="nodeId == 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"
>
<!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
<div>
<div class="text-weight-medium">
{{ prop.node.orgTreeName }}
@ -420,132 +421,136 @@ watch(
}}
</div>
</div>
</div>
<!-- v-if="store.typeOrganizational === 'draft' && !store.isPublic" -->
<q-btn
v-if="store.typeOrganizational === 'draft'"
flat
dense
icon="mdi-dots-vertical"
class="q-ml-xs"
color="grey-13"
size="12px"
round
>
<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,
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-btn
v-if="store.typeOrganizational === 'draft'"
flat
dense
icon="mdi-dots-vertical"
class="q-ml-xs"
color="grey-13"
size="12px"
round
>
<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-section avatar style="min-width: 20px">
<q-icon
size="17px"
:color="item.color"
:name="item.icon"
/>
</q-item-section>
<div v-if="prop.node.orgLevel === 0">
<q-item-section
v-if="
item.type === 'EDIT' ||
item.type === 'DEL' ||
item.type === 'HISTORY' ||
item.type === 'SORT'
"
>
{{ item.label }}หน่วยงาน
<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-icon
size="17px"
:color="item.color"
:name="item.icon"
/>
</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-if="prop.node.orgLevel === 0">
<q-item-section
v-if="
item.type === 'EDIT' ||
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>
<q-item-section
v-if="
item.type === 'ADD' ||
item.type === 'EDIT' ||
item.type === 'DEL' ||
item.type === 'HISTORY' ||
item.type === 'SORT'
"
>{{ item.label }}ส่วนราชการ</q-item-section
>
<q-item-section v-else>{{ item.label }}</q-item-section>
</div>
</q-item>
</q-list>
</q-menu>
</q-btn>
<div v-else>
<q-item-section
v-if="
item.type === 'ADD' ||
item.type === 'EDIT' ||
item.type === 'DEL' ||
item.type === 'HISTORY' ||
item.type === 'SORT'
"
>{{ item.label }}ส่วนราชการ</q-item-section
>
<q-item-section v-else>{{ item.label }}</q-item-section>
</div>
</q-item>
</q-list>
</q-menu>
</q-btn>
<q-btn
v-else
flat
dense
icon="mdi-dots-vertical"
class="q-pa-none q-ml-xs"
color="grey-13"
size="12px"
round
>
<q-menu>
<q-list
dense
v-for="(item, index) in listAdd.slice(5, 6)"
:key="index"
style="min-width: 100px"
>
<q-item
clickable
v-close-popup
@click="
onClickDetail(prop.node.orgTreeId, prop.node.orgLevel)
"
<q-btn
v-else
flat
dense
icon="mdi-dots-vertical"
class="q-pa-none q-ml-xs"
color="grey-13"
size="12px"
round
>
<q-menu>
<q-list
dense
v-for="(item, index) in listAdd.slice(5, 6)"
:key="index"
style="min-width: 100px"
>
<q-item-section avatar style="min-width: 20px">
<q-icon
size="17px"
: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>
<q-item
clickable
v-close-popup
@click="
onClickDetail(prop.node.orgTreeId, prop.node.orgLevel)
"
>
<q-item-section avatar style="min-width: 20px">
<q-icon
size="17px"
: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>
</q-item>
</template>
</q-tree>
</div>
@ -590,4 +595,12 @@ watch(
border: 1px solid #e6e6e7;
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>