122 lines
3.7 KiB
Vue
122 lines
3.7 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { ref, watch } from "vue";
|
||
|
|
|
||
|
|
const nodes = ref<any>([
|
||
|
|
{
|
||
|
|
orgTreeName: " แผนพัฒนากรุงเทพมหานคร ระยะ 20 ปี ระยะที่ 3",
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
orgTreeName: "ยุทธศาสตร์ที่ 1",
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
orgTreeName: "ยุทธศาสตร์ที่ 2",
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
orgTreeName: "ยุทธศาสตร์ที่ 3",
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
orgTreeName: "ยุทธศาสตร์ที่ 4",
|
||
|
|
children: [{ orgTreeName: "ยุทธศาสตร์ที่ 2" }],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
orgTreeName: "ยุทธศาสตร์ที่ 1",
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
orgTreeName: "ยุทธศาสตร์ที่ 2",
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
orgTreeName: "ยุทธศาสตร์ที่ 3",
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
orgTreeName: "ยุทธศาสตร์ที่ 4",
|
||
|
|
children: [{ orgTreeName: "ยุทธศาสตร์ที่ 2" }],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
orgTreeName: " แผนพัฒนากรุงเทพมหานคร ระยะ 20 ปี ระยะที่ 2",
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
orgTreeName: "ยุทธศาสตร์ที่ 1",
|
||
|
|
children: [{ orgTreeName: "ยุทธศาสตร์ที่ 2" }],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
const filter = ref<string>("");
|
||
|
|
const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
|
||
|
|
const noData = ref<string>("ไม่มีข้อมูล");
|
||
|
|
const expanded = ref<Array<any>>([]);
|
||
|
|
const nodeId = ref<string>("");
|
||
|
|
|
||
|
|
function updateSelected(data: any) {
|
||
|
|
console.log(data);
|
||
|
|
nodeId.value = data.orgTreeName;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<div class="toptitle text-dark col-12 row items-center">ยุทธศาสตร์</div>
|
||
|
|
<q-card flat bordered class="q-pa-md">
|
||
|
|
<div class="row q-col-gutter-sm q-pl-sm">
|
||
|
|
<q-toolbar class="text-primary">
|
||
|
|
<q-btn dense flat round color="primary" icon="add">
|
||
|
|
<q-tooltip>เพิ่มยุทธศาสตร์</q-tooltip>
|
||
|
|
</q-btn>
|
||
|
|
|
||
|
|
<q-input dense outlined v-model="filter" label="ค้นหา">
|
||
|
|
<template v-slot:append>
|
||
|
|
<q-icon
|
||
|
|
v-if="filter !== ''"
|
||
|
|
name="clear"
|
||
|
|
class="cursor-pointer"
|
||
|
|
@click="filter = ''"
|
||
|
|
/>
|
||
|
|
<q-icon v-else name="search" color="grey-5" />
|
||
|
|
</template>
|
||
|
|
</q-input>
|
||
|
|
</q-toolbar>
|
||
|
|
</div>
|
||
|
|
<q-tree
|
||
|
|
class="q-pa-sm q-gutter-sm"
|
||
|
|
dense
|
||
|
|
:nodes="nodes"
|
||
|
|
node-key="orgTreeName"
|
||
|
|
label-key="orgTreeName"
|
||
|
|
:filter="filter"
|
||
|
|
:no-results-label="notFound"
|
||
|
|
:no-nodes-label="noData"
|
||
|
|
v-model:expanded="expanded"
|
||
|
|
>
|
||
|
|
<template v-slot:default-header="prop">
|
||
|
|
<q-item
|
||
|
|
clickable
|
||
|
|
:active="nodeId == prop.node.orgTreeName"
|
||
|
|
@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">
|
||
|
|
{{ prop.node.orgTreeName }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</q-item>
|
||
|
|
</template>
|
||
|
|
</q-tree>
|
||
|
|
</q-card>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped></style>
|