ยุทธศาสตร์ => tree
This commit is contained in:
parent
0c89a897a1
commit
ef2351f2c8
3 changed files with 148 additions and 4 deletions
|
|
@ -743,6 +743,12 @@ const menuList = readonly<any[]>([
|
|||
path: "developmentScholarship",
|
||||
role: "development",
|
||||
},
|
||||
{
|
||||
key: 14.5,
|
||||
label: "ยุทธศาสตร์",
|
||||
path: "developmentStrategic",
|
||||
role: "development",
|
||||
},
|
||||
],
|
||||
},
|
||||
// {
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
|
|||
121
src/modules/15_development/views/Strategic.vue
Normal file
121
src/modules/15_development/views/Strategic.vue
Normal 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue