Skip to content

Commit 27ad8a4

Browse files
2ByungJun2ByungJun
committed
menu tree 진행중
1 parent 7bcca7e commit 27ad8a4

File tree

9 files changed

+267
-82
lines changed

9 files changed

+267
-82
lines changed

‎src/components/menu/Test.vue renamed to ‎src/components/Test.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<template>
22
<div>
3-
<!-- <input type="checkbox" v-model="checkedValues" value="1">
3+
<input type="checkbox" v-model="checkedValues" value="1">
44
<input type="checkbox" v-model="checkedValues" value="2">
55
<input type="checkbox" v-model="checkedValues" value="3">
66
<input type="checkbox" v-model="checkedValues" value="4">
7-
{{checkedValues}} -->
7+
{{checkedValues}}
88

9-
<!-- <input type="radio" v-model="radioValues" value="1R">
9+
<input type="radio" v-model="radioValues" value="1R">
1010
<input type="radio" v-model="radioValues" value="2R">
1111
<input type="radio" v-model="radioValues" value="3R">
1212
<input type="radio" v-model="radioValues" value="4R">
13-
{{radioValues}} -->
13+
{{radioValues}}
1414

1515
<select v-model="selected" multiple>
1616
<option :value="{name: 'LEE'}">LEE</option>

‎src/store/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Vue from 'vue'
22
import Vuex from 'vuex'
3-
import page from './page'
4-
import menu from './menu'
3+
import page from './modules/page'
4+
import menu from './modules/menu'
55

66
Vue.use(Vuex)
77

‎src/store/menu.js

-16
This file was deleted.

‎src/store/modules/menu.js

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
export default {
2+
namespaced: true,
3+
state: () => ({
4+
// id : 번호
5+
// isLeaf : false(폴더)/ true(파일)
6+
// name : 폴더 및 파일명
7+
// pid : 부모 id
8+
// children : [] 자식
9+
menus: [{
10+
"id": 0,
11+
"isLeaf": false,
12+
"name": "root",
13+
"children": [
14+
{
15+
"id": 1610673642530,
16+
"isLeaf": false,
17+
"name": "new node",
18+
"pid": 0
19+
},
20+
{
21+
"id": 1610673642658,
22+
"isLeaf": false,
23+
"name": "new node",
24+
"pid": 0,
25+
"children": [
26+
{
27+
"id": 1610673644810,
28+
"isLeaf": false,
29+
"name": "new folder",
30+
"pid": 1610673642658,
31+
"children": [
32+
{
33+
"id": 1610673648274,
34+
"isLeaf": true,
35+
"name": "new file",
36+
"pid": 1610673644810
37+
}
38+
]
39+
},
40+
{
41+
"id": 1610673646738,
42+
"isLeaf": true,
43+
"name": "new file",
44+
"pid": 1610673642658
45+
}
46+
]
47+
}
48+
]
49+
}],
50+
}),
51+
mutations: {
52+
updateState(state, payload){
53+
state.menus = payload
54+
},
55+
},
56+
actions: {
57+
async selectMenus({commit}){
58+
await commit('updateState', menusData)
59+
}
60+
},
61+
getters: {
62+
}
63+
};
64+
65+
66+
// dragDisabled: true,
67+
// addTreeNodeDisabled: true,
68+
// addLeafNodeDisabled: true,
69+
// editNodeDisabled: true,
70+
// delNodeDisabled: true,
71+
// disabled: true
72+
const menusData = [{
73+
name: 'Node 1',
74+
id: 1,
75+
pid: 0,
76+
children: [
77+
{
78+
name: 'Node 1-2',
79+
id: 2,
80+
isLeaf: true,
81+
pid: 1
82+
}
83+
]
84+
},
85+
{
86+
name: 'Node 2',
87+
id: 3,
88+
pid: 0,
89+
},
90+
{
91+
name: 'Node 3',
92+
id: 4,
93+
pid: 0
94+
}
95+
]

‎src/store/page.js renamed to ‎src/store/modules/page.js

File renamed without changes.

‎src/views/Menu.vue

+15-6
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,28 @@
11
<template>
22
<div>
3-
<br>
4-
<MenuTree />
5-
<Test />
3+
<b-row>
4+
<b-col>
5+
<b-card title="메뉴">
6+
<MenuTree />
7+
</b-card>
8+
</b-col>
9+
<b-col>
10+
<b-card title="메뉴 정보">
11+
<MenuUpdate />
12+
</b-card>
13+
</b-col>
14+
</b-row>
615
</div>
716
</template>
817

918
<script>
10-
import MenuTree from '../components/menu/MenuTree.vue'
11-
import Test from '../components/menu/Test.vue'
19+
import MenuTree from '@/views/menu/MenuTree.vue'
20+
import MenuUpdate from '@/views/menu/MenuUpdate.vue'
1221
1322
export default {
1423
components:{
1524
MenuTree,
16-
Test,
25+
MenuUpdate,
1726
}
1827
}
1928
</script>

‎src/components/menu/MenuTree.vue renamed to ‎src/views/menu/MenuTree.vue

+33-52
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,30 @@
11
<template>
22
<div>
33
<button @click="addNode">Add Node</button>
4+
<br><br>
5+
<!-- default-expanded : true(펼쳐있는 상태)/false(접힌 상태) -->
46
<vue-tree-list
57
@click="onClick"
68
@change-name="onChangeName"
79
@delete-node="onDel"
810
@add-node="onAddNode"
911
:model="data"
10-
default-tree-node-name="new node"
11-
default-leaf-node-name="new leaf"
12-
v-bind:default-expanded="false"
13-
>
12+
default-tree-node-name="new folder"
13+
default-leaf-node-name="new file"
14+
v-bind:default-expanded="false"
15+
>
1416
<template v-slot:leafNameDisplay="slotProps">
15-
<span>
16-
{{ slotProps.model.name }} <span class="muted">#{{ slotProps.model.id }}</span>
17-
</span>
17+
<span>{{ slotProps.model.name }}</span>
1818
</template>
1919
<span class="icon" slot="addTreeNodeIcon">📂</span>
20-
<span class="icon" slot="addLeafNodeIcon">＋</span>
21-
<span class="icon" slot="editNodeIcon">📃</span>
22-
<span class="icon" slot="delNodeIcon">✂️</span>
23-
<span class="icon" slot="leafNodeIcon">🍃</span>
24-
<span class="icon" slot="treeNodeIcon">🌲</span>
20+
<span class="icon" slot="addLeafNodeIcon">📄</span>
21+
<span class="icon" slot="editNodeIcon">📝</span>
22+
<span class="icon" slot="delNodeIcon">❌</span>
23+
<span class="icon" slot="leafNodeIcon">📄</span>
24+
<span class="icon" slot="treeNodeIcon">📂</span>
2525
</vue-tree-list>
26+
<br><br>
27+
2628
<button @click="getNewTree">Get new tree</button>
2729
<pre>
2830
{{newTree}}
@@ -32,71 +34,50 @@
3234

3335
<script>
3436
import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'
37+
import { mapActions } from 'vuex'
38+
3539
export default {
3640
components: {
3741
VueTreeList
3842
},
3943
data() {
4044
return {
4145
newTree: {},
42-
data: new Tree([
43-
{
44-
name: 'Node 1',
45-
id: 1,
46-
pid: 0,
47-
dragDisabled: true,
48-
addTreeNodeDisabled: true,
49-
addLeafNodeDisabled: true,
50-
editNodeDisabled: true,
51-
delNodeDisabled: true,
52-
children: [
53-
{
54-
name: 'Node 1-2',
55-
id: 2,
56-
isLeaf: true,
57-
pid: 1
58-
}
59-
]
60-
},
61-
{
62-
name: 'Node 2',
63-
id: 3,
64-
pid: 0,
65-
disabled: true
66-
},
67-
{
68-
name: 'Node 3',
69-
id: 4,
70-
pid: 0
71-
}
72-
])
46+
data: new Tree(this.$store.state.menu.menus)
7347
}
7448
},
49+
mounted(){
50+
this.selectMenus()
51+
},
7552
methods: {
53+
...mapActions('menu' ,[
54+
'selectMenus'
55+
]),
56+
onClick(params) {
57+
console.log('---onClick---')
58+
console.log(params)
59+
},
7660
onDel(node) {
61+
console.log('---onDel---')
7762
console.log(node)
7863
node.remove()
7964
},
80-
8165
onChangeName(params) {
66+
console.log('---onChangeName---')
8267
console.log(params)
8368
},
84-
8569
onAddNode(params) {
70+
console.log('---onAddNode---')
8671
console.log(params)
8772
},
88-
89-
onClick(params) {
90-
console.log(params)
91-
},
92-
9373
addNode() {
74+
console.log('---addNode---')
9475
var node = new TreeNode({ name: 'new node', isLeaf: false })
9576
if (!this.data.children) this.data.children = []
9677
this.data.addChildren(node)
9778
},
98-
9979
getNewTree() {
80+
console.log('---getNewTree---')
10081
var vm = this
10182
function _dfs(oldNode) {
10283
var newNode = {}
@@ -120,4 +101,4 @@ export default {
120101
}
121102
}
122103
}
123-
</script>
104+
</script>

0 commit comments

Comments
 (0)