expanded tree
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
ad26c94921
commit
701355ed57
2 changed files with 173 additions and 157 deletions
|
|
@ -58,6 +58,7 @@ const fetchPublishFile = async () => {
|
||||||
// โหลดข้อมูลโครงสร้างจาก json
|
// โหลดข้อมูลโครงสร้างจาก json
|
||||||
const treeData = ref<Array<any>>([]);
|
const treeData = ref<Array<any>>([]);
|
||||||
const loadTreeData = async () => {
|
const loadTreeData = async () => {
|
||||||
|
expanded.value = [];
|
||||||
await http
|
await http
|
||||||
.get(`${config.s3ClusterUrl}${selectedFile.value}`)
|
.get(`${config.s3ClusterUrl}${selectedFile.value}`)
|
||||||
.then((res: any) => {
|
.then((res: any) => {
|
||||||
|
|
@ -126,20 +127,20 @@ const myFilterMethod = (node: any, filter: string) => {
|
||||||
// ((node.name && node.name == null) || !node.name) &&
|
// ((node.name && node.name == null) || !node.name) &&
|
||||||
(node.name && node.name.indexOf(filt) > -1) ||
|
(node.name && node.name.indexOf(filt) > -1) ||
|
||||||
(node.organizationName && node.organizationName.indexOf(filt) > -1) ||
|
(node.organizationName && node.organizationName.indexOf(filt) > -1) ||
|
||||||
(node.positionNum && node.positionNum.indexOf(filt) > -1) ||
|
(node.positionNum && node.positionNum.indexOf(filt) > -1) ||
|
||||||
(node.positionName && node.positionName.indexOf(filt) > -1) ||
|
(node.positionName && node.positionName.indexOf(filt) > -1) ||
|
||||||
(node.governmentCode &&
|
(node.governmentCode &&
|
||||||
node.governmentCode.toString().indexOf(filt) > -1) ||
|
node.governmentCode.toString().indexOf(filt) > -1) ||
|
||||||
(node.agency && node.agency.indexOf(filt) > -1) ||
|
(node.agency && node.agency.indexOf(filt) > -1) ||
|
||||||
(node.government && node.government.indexOf(filt) > -1) ||
|
(node.government && node.government.indexOf(filt) > -1) ||
|
||||||
(node.department && node.department.indexOf(filt) > -1) ||
|
(node.department && node.department.indexOf(filt) > -1) ||
|
||||||
(node.pile && node.pile.indexOf(filt) > -1) ||
|
(node.pile && node.pile.indexOf(filt) > -1) ||
|
||||||
(node.organizationShortName &&
|
(node.organizationShortName &&
|
||||||
node.organizationShortName.indexOf(filt) > -1) ||
|
node.organizationShortName.indexOf(filt) > -1) ||
|
||||||
(node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
|
(node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
|
||||||
(node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
|
(node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
|
||||||
(node.executivePositionSide &&
|
(node.executivePositionSide &&
|
||||||
node.executivePositionSide.indexOf(filt) > -1) ||
|
node.executivePositionSide.indexOf(filt) > -1) ||
|
||||||
(node.positionLevel && node.positionLevel.indexOf(filt) > -1)
|
(node.positionLevel && node.positionLevel.indexOf(filt) > -1)
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
@ -361,8 +362,10 @@ const checkPosition = (val: string) => {
|
||||||
return num;
|
return num;
|
||||||
};
|
};
|
||||||
const personal = ref<any>();
|
const personal = ref<any>();
|
||||||
|
const expanded = ref<string[]>([]);
|
||||||
|
|
||||||
watch(props, () => {
|
watch(props, () => {
|
||||||
|
expanded.value = [];
|
||||||
const dataPersonal = props.personal;
|
const dataPersonal = props.personal;
|
||||||
if (dataPersonal) {
|
if (dataPersonal) {
|
||||||
dataPersonal.map((data: any) => {
|
dataPersonal.map((data: any) => {
|
||||||
|
|
@ -373,26 +376,37 @@ watch(props, () => {
|
||||||
|
|
||||||
// console.log("draft===>", personal.value.draft);
|
// console.log("draft===>", personal.value.draft);
|
||||||
|
|
||||||
if (personal.value.draft === true) {
|
if (personal.value.draft === false) {
|
||||||
// const findData = dataRespone.value.find(findByPerson);
|
// const findData = dataRespone.value.find(findByPerson);
|
||||||
let findData: any = null;
|
let findData: any = null;
|
||||||
|
console.log(dataRespone.value);
|
||||||
|
|
||||||
dataRespone.value.map((x: any) => {
|
dataRespone.value.map((x: any) => {
|
||||||
findData = findByPerson(x);
|
findData = findByPerson(x);
|
||||||
if (findData != null) {
|
if (findData != null) {
|
||||||
console.log("findData===>", findData);
|
console.log("findData===>", findData);
|
||||||
selectedPosition(findData)
|
selectedPosition(findData);
|
||||||
|
for (let i = 3; i <= findData.keyId.length; i += 2) {
|
||||||
|
expanded.value.push(findData.keyId.slice(0, i));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
// loadTreeData();
|
// loadTreeData();
|
||||||
// selectedPosition(findData.children.children.children)
|
// selectedPosition(findData.children.children.children)
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
function findByPerson(element: any) {
|
function findByPerson(element: any): any {
|
||||||
// console.log("searchTree element===>", element)
|
// console.log("searchTree element===>", element)
|
||||||
if (element.positionNumId && element.positionLineId === personal.value.positionLineId &&
|
if (
|
||||||
|
element.positionNumId &&
|
||||||
|
element.positionLineId === personal.value.positionLineId &&
|
||||||
element.positionTypeId === personal.value.positionTypeId &&
|
element.positionTypeId === personal.value.positionTypeId &&
|
||||||
element.positionNumId === personal.value.posNoId
|
element.positionNumId === personal.value.posNoId &&
|
||||||
|
(element.positionLevelObj === null ||
|
||||||
|
element.positionLevelObj[0].Id === personal.value.positionLevelId) &&
|
||||||
|
(element.positionSideNameObj === null ||
|
||||||
|
element.positionSideNameObj[0].Id === personal.value.positionPathSideId)
|
||||||
) {
|
) {
|
||||||
return element;
|
return element;
|
||||||
} else if (element.children) {
|
} else if (element.children) {
|
||||||
|
|
@ -408,153 +422,156 @@ function findByPerson(element: any) {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<q-dialog v-model="props.modal" persistent>
|
<q-dialog v-model="props.modal" persistent>
|
||||||
<q-card style="width: 900px; max-width: 80vw">
|
<q-card style="width: 900px; max-width: 80vw">
|
||||||
<q-form ref="myFormPosition">
|
<q-form ref="myFormPosition">
|
||||||
<DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="closeModal" />
|
<DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="closeModal" />
|
||||||
<q-separator />
|
<q-separator />
|
||||||
<q-card-section class="q-pa-sm bg-grey-1">
|
<q-card-section class="q-pa-sm bg-grey-1">
|
||||||
<div class="row col-12 q-col-gutter-sm">
|
<div class="row col-12 q-col-gutter-sm">
|
||||||
<div class="col-xs-12 col-sm-7 row">
|
<div class="col-xs-12 col-sm-7 row">
|
||||||
<q-card flat bordered class="fit q-pa-sm">
|
<q-card flat bordered class="fit q-pa-sm">
|
||||||
<q-scroll-area visible style="height: 70vh">
|
<q-scroll-area visible style="height: 70vh">
|
||||||
<q-input
|
<q-input
|
||||||
outlined
|
outlined
|
||||||
dense
|
dense
|
||||||
ref="filterRef"
|
ref="filterRef"
|
||||||
v-model="search"
|
v-model="search"
|
||||||
placeholder="ค้นหา"
|
placeholder="ค้นหา"
|
||||||
class="q-mb-sm"
|
class="q-mb-sm"
|
||||||
>
|
>
|
||||||
<template v-slot:append>
|
<template v-slot:append>
|
||||||
<q-icon name="mdi-magnify" />
|
<q-icon name="mdi-magnify" />
|
||||||
</template>
|
</template>
|
||||||
</q-input>
|
</q-input>
|
||||||
<div class="q-pa-sm q-gutter-sm">
|
<div class="q-pa-sm q-gutter-sm">
|
||||||
<q-tree
|
<q-tree
|
||||||
no-transition
|
no-transition
|
||||||
dense
|
dense
|
||||||
:nodes="treeData"
|
:nodes="treeData"
|
||||||
node-key="keyId"
|
node-key="keyId"
|
||||||
:filter="search"
|
:filter="search"
|
||||||
:no-results-label="notFound"
|
:no-results-label="notFound"
|
||||||
:no-nodes-label="noData"
|
:no-nodes-label="noData"
|
||||||
:filter-method="myFilterMethod"
|
:filter-method="myFilterMethod"
|
||||||
>
|
v-model:expanded="expanded"
|
||||||
<template v-slot:header-organization="prop">
|
>
|
||||||
<div class="col">
|
<template v-slot:header-organization="prop">
|
||||||
<div
|
<div class="col">
|
||||||
class="row items-center q-px-xs q-pt-xs q-gutter-sm"
|
<div
|
||||||
>
|
class="row items-center q-px-xs q-pt-xs q-gutter-sm"
|
||||||
<!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
|
>
|
||||||
<div class="text-weight-medium">
|
<!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
|
||||||
{{ prop.node.organizationName }}
|
<div class="text-weight-medium">
|
||||||
</div>
|
{{ prop.node.organizationName }}
|
||||||
|
</div>
|
||||||
|
|
||||||
<!--แสดง Total Count PositionNum-->
|
<!--แสดง Total Count PositionNum-->
|
||||||
<!-- <q-badge rounded color="grey-2" text-color="dark"
|
<!-- <q-badge rounded color="grey-2" text-color="dark"
|
||||||
:label="prop.node.totalPositionCount" /> -->
|
:label="prop.node.totalPositionCount" /> -->
|
||||||
<q-badge
|
<q-badge
|
||||||
v-if="prop.node.totalPositionVacant > 0"
|
v-if="prop.node.totalPositionVacant > 0"
|
||||||
rounded
|
rounded
|
||||||
color="red"
|
color="red"
|
||||||
outline
|
outline
|
||||||
:label="prop.node.totalPositionVacant"
|
:label="prop.node.totalPositionVacant"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<q-space />
|
<q-space />
|
||||||
</div>
|
</div>
|
||||||
<div class="col items-center q-px-xs q-pt-xs">
|
<div class="col items-center q-px-xs q-pt-xs">
|
||||||
<div class="text-weight-medium text-grey-7">
|
<div class="text-weight-medium text-grey-7">
|
||||||
{{ prop.node.governmentCode }}
|
{{ prop.node.governmentCode }}
|
||||||
{{ prop.node.organizationShortName }}
|
{{ prop.node.organizationShortName }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:header-person="prop">
|
<template v-slot:header-person="prop">
|
||||||
<q-item
|
<q-item
|
||||||
clickable
|
clickable
|
||||||
:active="selected == prop.node.keyId"
|
:active="selected == prop.node.keyId"
|
||||||
@click="selectedPosition(prop.node)"
|
@click="selectedPosition(prop.node)"
|
||||||
:disable="prop.node.name != null ||
|
:disable="
|
||||||
checkPosition(prop.node.positionNumId) != -1
|
prop.node.name != null ||
|
||||||
"
|
checkPosition(prop.node.positionNumId) != -1
|
||||||
active-class="my-list-link text-primary text-weight-medium"
|
"
|
||||||
class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
|
active-class="my-list-link text-primary text-weight-medium"
|
||||||
>
|
class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
|
||||||
<img
|
>
|
||||||
v-if="prop.node.avatar == '' ||
|
<img
|
||||||
prop.node.avatar ==
|
v-if="
|
||||||
'https://cdn.quasar.dev/img/boy-avatar.png'
|
prop.node.avatar == '' ||
|
||||||
"
|
prop.node.avatar ==
|
||||||
src="@/assets/avatar_user.jpg"
|
'https://cdn.quasar.dev/img/boy-avatar.png'
|
||||||
class="col-xs-1 col-sm-2"
|
"
|
||||||
style="
|
src="@/assets/avatar_user.jpg"
|
||||||
|
class="col-xs-1 col-sm-2"
|
||||||
|
style="
|
||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
<img
|
<img
|
||||||
v-else
|
v-else
|
||||||
:src="prop.node.avatar"
|
:src="prop.node.avatar"
|
||||||
class="col-xs-1 col-sm-2"
|
class="col-xs-1 col-sm-2"
|
||||||
style="
|
style="
|
||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
<!--=====ตำแหน่งว่าง สีแดง=====-->
|
<!--=====ตำแหน่งว่าง สีแดง=====-->
|
||||||
<div
|
<div
|
||||||
v-if="prop.node.name == null"
|
v-if="prop.node.name == null"
|
||||||
class="q-px-sm text-weight-medium text-red"
|
class="q-px-sm text-weight-medium text-red"
|
||||||
>
|
>
|
||||||
ว่าง
|
ว่าง
|
||||||
</div>
|
</div>
|
||||||
<!--=====หัวหน้า สีเขียว=====-->
|
<!--=====หัวหน้า สีเขียว=====-->
|
||||||
<div v-else-if="prop.node.positionLeaderFlag">
|
<div v-else-if="prop.node.positionLeaderFlag">
|
||||||
<div
|
<div
|
||||||
class="q-px-sm text-weight-medium text-primary"
|
class="q-px-sm text-weight-medium text-primary"
|
||||||
>
|
>
|
||||||
{{ prop.node.name }}
|
{{ prop.node.name }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--=====ลูกน้อง สีปกติ=====-->
|
<!--=====ลูกน้อง สีปกติ=====-->
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<div class="q-px-sm text-weight-medium">
|
<div class="q-px-sm text-weight-medium">
|
||||||
{{ prop.node.name }}
|
{{ prop.node.name }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--ต่อท้ายชื่อคน แสดงสีปกติ-->
|
<!--ต่อท้ายชื่อคน แสดงสีปกติ-->
|
||||||
<div class="q-pr-sm">
|
<div class="q-pr-sm">
|
||||||
{{ prop.node.positionName }}
|
{{ prop.node.positionName }}
|
||||||
</div>
|
</div>
|
||||||
<div class="q-pr-sm">
|
<div class="q-pr-sm">
|
||||||
{{ prop.node.positionNum }}
|
{{ prop.node.positionNum }}
|
||||||
</div>
|
</div>
|
||||||
<div class="q-pr-sm">
|
<div class="q-pr-sm">
|
||||||
{{ prop.node.positionLevel }}
|
{{ prop.node.positionLevel }}
|
||||||
</div>
|
</div>
|
||||||
<q-icon
|
<q-icon
|
||||||
v-if="prop.node.positionLeaderFlag"
|
v-if="prop.node.positionLeaderFlag"
|
||||||
class="q-mr-sm"
|
class="q-mr-sm"
|
||||||
size="15px"
|
size="15px"
|
||||||
color="primary"
|
color="primary"
|
||||||
name="mdi-bookmark"
|
name="mdi-bookmark"
|
||||||
></q-icon>
|
></q-icon>
|
||||||
|
|
||||||
<q-space />
|
<q-space />
|
||||||
</q-item>
|
</q-item>
|
||||||
</template>
|
</template>
|
||||||
</q-tree>
|
</q-tree>
|
||||||
</div>
|
</div>
|
||||||
</q-scroll-area>
|
</q-scroll-area>
|
||||||
</q-card>
|
</q-card>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-12 col-sm-5">
|
<div class="col-xs-12 col-sm-5">
|
||||||
<q-card flat bordered class="fit q-pa-sm">
|
<q-card flat bordered class="fit q-pa-sm">
|
||||||
<q-scroll-area visible style="height: 70vh">
|
<q-scroll-area visible style="height: 70vh">
|
||||||
<div class="row col-12 q-col-gutter-xs">
|
<div class="row col-12 q-col-gutter-xs">
|
||||||
|
|
|
||||||
|
|
@ -195,9 +195,9 @@ const convertContainStatus = (val: string) => {
|
||||||
};
|
};
|
||||||
const convertDraft = (val: boolean) => {
|
const convertDraft = (val: boolean) => {
|
||||||
switch (val) {
|
switch (val) {
|
||||||
case true:
|
|
||||||
return "รอส่งตัว";
|
|
||||||
case false:
|
case false:
|
||||||
|
return "รอส่งตัว";
|
||||||
|
case true:
|
||||||
return "ส่งตัวแล้ว";
|
return "ส่งตัวแล้ว";
|
||||||
default:
|
default:
|
||||||
return "-";
|
return "-";
|
||||||
|
|
@ -893,7 +893,6 @@ const paginationLabel = (start: number, end: number, total: number) => {
|
||||||
<q-dialog v-model="modaladdlist">
|
<q-dialog v-model="modaladdlist">
|
||||||
<q-card style="width: 900px; max-width: 80vw">
|
<q-card style="width: 900px; max-width: 80vw">
|
||||||
<q-card-section>
|
<q-card-section>
|
||||||
|
|
||||||
<q-toolbar class="q-py-md">
|
<q-toolbar class="q-py-md">
|
||||||
<q-toolbar-title class="header-text text-weight-bolder"
|
<q-toolbar-title class="header-text text-weight-bolder"
|
||||||
>ส่งรายชื่อไปยังหน่วยงาน
|
>ส่งรายชื่อไปยังหน่วยงาน
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue