ยุทธศาสตร์ => เพิ่ม scroll
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
21e569efb4
commit
fa663dd442
1 changed files with 95 additions and 84 deletions
|
|
@ -209,94 +209,100 @@ onMounted(() => {
|
||||||
</q-input>
|
</q-input>
|
||||||
</q-toolbar>
|
</q-toolbar>
|
||||||
</div>
|
</div>
|
||||||
<q-tree
|
<div class="bg-white tree-container q-pa-xs">
|
||||||
class="q-pa-sm q-gutter-sm"
|
<q-tree
|
||||||
dense
|
class="q-pa-sm q-gutter-sm"
|
||||||
:nodes="nodes"
|
dense
|
||||||
node-key="id"
|
:nodes="nodes"
|
||||||
label-key="id"
|
node-key="id"
|
||||||
:filter="filter"
|
label-key="id"
|
||||||
no-results-label="ไม่พบข้อมูลที่ค้นหา"
|
:filter="filter"
|
||||||
no-nodes-label="ไม่มีข้อมูล"
|
no-results-label="ไม่พบข้อมูลที่ค้นหา"
|
||||||
v-model:expanded="expanded"
|
no-nodes-label="ไม่มีข้อมูล"
|
||||||
>
|
v-model:expanded="expanded"
|
||||||
<template v-slot:default-header="prop">
|
>
|
||||||
<q-item
|
<template v-slot:default-header="prop">
|
||||||
clickable
|
<q-item
|
||||||
@click.stop
|
clickable
|
||||||
:active="nodeId == prop.node.name"
|
@click.stop
|
||||||
active-class="my-list-link text-primary text-weight-medium"
|
:active="nodeId == prop.node.name"
|
||||||
class="row col-12 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 col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
|
||||||
<div>
|
|
||||||
<div class="text-weight-medium">
|
|
||||||
{{ prop.node.name }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<q-btn
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
icon="mdi-dots-vertical"
|
|
||||||
class="q-ml-xs"
|
|
||||||
color="grey-13"
|
|
||||||
size="12px"
|
|
||||||
round
|
|
||||||
>
|
>
|
||||||
<q-menu>
|
<div>
|
||||||
<q-list
|
<div class="text-weight-medium">
|
||||||
dense
|
{{ prop.node.name }}
|
||||||
v-for="(item, index) in prop.node.level !== 4
|
</div>
|
||||||
? ListMenu
|
</div>
|
||||||
: ListMenu.slice(1, 4)"
|
<q-btn
|
||||||
:key="index"
|
flat
|
||||||
style="min-width: 100px"
|
dense
|
||||||
>
|
icon="mdi-dots-vertical"
|
||||||
<q-item
|
class="q-ml-xs"
|
||||||
clickable
|
color="grey-13"
|
||||||
v-close-popup
|
size="12px"
|
||||||
@click.stop="onClickAction(item.value, prop.node)"
|
round
|
||||||
|
>
|
||||||
|
<q-menu>
|
||||||
|
<q-list
|
||||||
|
dense
|
||||||
|
v-for="(item, index) in prop.node.level !== 4
|
||||||
|
? ListMenu
|
||||||
|
: ListMenu.slice(1, 4)"
|
||||||
|
:key="index"
|
||||||
|
style="min-width: 100px"
|
||||||
>
|
>
|
||||||
<q-item-section avatar style="min-width: 20px">
|
<q-item
|
||||||
<q-icon size="17px" :color="item.color" :name="item.icon" />
|
clickable
|
||||||
</q-item-section>
|
v-close-popup
|
||||||
|
@click.stop="onClickAction(item.value, prop.node)"
|
||||||
|
>
|
||||||
|
<q-item-section avatar style="min-width: 20px">
|
||||||
|
<q-icon
|
||||||
|
size="17px"
|
||||||
|
:color="item.color"
|
||||||
|
:name="item.icon"
|
||||||
|
/>
|
||||||
|
</q-item-section>
|
||||||
|
|
||||||
<div v-if="item.value === 'ADD'">
|
<div v-if="item.value === 'ADD'">
|
||||||
<q-item-section v-if="prop.node.level === 1">
|
<q-item-section v-if="prop.node.level === 1">
|
||||||
{{ `${item.label}ยุทธศาสตร์ที่` }}
|
{{ `${item.label}ยุทธศาสตร์ที่ 1` }}
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
<q-item-section v-if="prop.node.level === 2">
|
<q-item-section v-if="prop.node.level === 2">
|
||||||
{{ `${item.label}ยุทธศาสตร์ย่อย` }}
|
{{ `${item.label}ยุทธศาสตร์ย่อย` }}
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
<q-item-section v-if="prop.node.level === 3">
|
<q-item-section v-if="prop.node.level === 3">
|
||||||
{{ `${item.label}กลยุทธ์ที่/เป้าประสงค์` }}
|
{{ `${item.label}กลยุทธ์ที่/เป้าประสงค์` }}
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else-if="item.value === 'EDIT'">
|
<div v-else-if="item.value === 'EDIT'">
|
||||||
<q-item-section v-if="prop.node.level === 1">
|
<q-item-section v-if="prop.node.level === 1">
|
||||||
{{ `${item.label}ยุทธศาสตร์/แผน` }}
|
{{ `${item.label}ยุทธศาสตร์/แผน` }}
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
<q-item-section v-if="prop.node.level === 2">
|
<q-item-section v-if="prop.node.level === 2">
|
||||||
{{ `${item.label}ยุทธศาสตร์ที่` }}
|
{{ `${item.label}ยุทธศาสตร์ที่` }}
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
<q-item-section v-if="prop.node.level === 3">
|
<q-item-section v-if="prop.node.level === 3">
|
||||||
{{ `${item.label}ยุทธศาสตร์ย่อย` }}
|
{{ `${item.label}ยุทธศาสตร์ย่อย` }}
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
<q-item-section v-if="prop.node.level === 4">
|
<q-item-section v-if="prop.node.level === 4">
|
||||||
{{ `${item.label}กลยุทธ์ที่/เป้าประสงค์` }}
|
{{ `${item.label}กลยุทธ์ที่/เป้าประสงค์` }}
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<q-item-section>{{ item.label }}</q-item-section>
|
<q-item-section>{{ item.label }}</q-item-section>
|
||||||
</div>
|
</div>
|
||||||
</q-item>
|
</q-item>
|
||||||
</q-list>
|
</q-list>
|
||||||
</q-menu>
|
</q-menu>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
</q-item>
|
</q-item>
|
||||||
</template>
|
</template>
|
||||||
</q-tree>
|
</q-tree>
|
||||||
|
</div>
|
||||||
</q-card>
|
</q-card>
|
||||||
|
|
||||||
<q-dialog v-model="modalDialog" persistent>
|
<q-dialog v-model="modalDialog" persistent>
|
||||||
|
|
@ -349,4 +355,9 @@ onMounted(() => {
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style lang="scss" scoped>
|
||||||
|
.tree-container {
|
||||||
|
overflow: auto;
|
||||||
|
height: 75vh;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue