ยุทธศาสตร์ => tree

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-04-10 18:05:05 +07:00
parent 0c89a897a1
commit ef2351f2c8
3 changed files with 148 additions and 4 deletions

View file

@ -743,6 +743,12 @@ const menuList = readonly<any[]>([
path: "developmentScholarship",
role: "development",
},
{
key: 14.5,
label: "ยุทธศาสตร์",
path: "developmentStrategic",
role: "development",
},
],
},
// {

View file

@ -7,14 +7,20 @@ const employeeHistory = () =>
import("@/modules/15_development/views/EmployeeHistory.vue");
const Scholarship = () =>
import("@/modules/15_development/views/Scholarship.vue");
const historyAdd = () => import('@/modules/15_development/components/history/AddPage.vue')
const historyEdit = () => import('@/modules/15_development/components/history/AddPage.vue')
const historyEmployeeAdd = () => import('@/modules/15_development/components/historyEmployee/AddPage.vue')
const historyEmployeeEdit = () => import('@/modules/15_development/components/historyEmployee/AddPage.vue')
const historyAdd = () =>
import("@/modules/15_development/components/history/AddPage.vue");
const historyEdit = () =>
import("@/modules/15_development/components/history/AddPage.vue");
const historyEmployeeAdd = () =>
import("@/modules/15_development/components/historyEmployee/AddPage.vue");
const historyEmployeeEdit = () =>
import("@/modules/15_development/components/historyEmployee/AddPage.vue");
const ScholarshipDetail = () =>
import("@/modules/15_development/components/scholarship/DetailView.vue");
// const historyAdd = () =>
// import("@/modules/15_development/components/history/AddPage.vue");
const StrategicView = () =>
import("@/modules/15_development/views/Strategic.vue");
export default [
{
path: "/development",
@ -136,4 +142,15 @@ export default [
Role: "development",
},
},
{
path: "/development/strategic",
name: "developmentStrategic",
component: StrategicView,
meta: {
Auth: true,
Key: [1.6],
Role: "development",
},
},
];

View file

@ -0,0 +1,121 @@
<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>