Skip to content

Commit 256a18d

Browse files
sendyasendya
committed
feat: TreeList
1 parent f3eacb8 commit 256a18d

File tree

3 files changed

+149
-77
lines changed

3 files changed

+149
-77
lines changed

‎src/api/manage.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const api = {
66
service: '/service',
77
permission: '/permission',
88
permissionNoPager: '/permission/no-pager',
9+
orgTree: '/org/tree'
910
}
1011

1112
export default api
@@ -42,6 +43,14 @@ export function getPermissions(parameter) {
4243
})
4344
}
4445

46+
export function getOrgTree(parameter) {
47+
return axios({
48+
url: api.orgTree,
49+
method: 'get',
50+
params: parameter
51+
})
52+
}
53+
4554
// id == 0 add post
4655
// id != 0 update put
4756
export function saveService(parameter) {

‎src/components/Tree/Tree.jsx‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import { Menu, Icon, Input } from 'ant-design-vue'
2+
3+
const { Item, ItemGroup, SubMenu } = Menu
4+
const { Search } = Input
5+
6+
export default {
7+
name: 'Tree',
8+
props: {
9+
dataSource: {
10+
type: Array,
11+
required: true
12+
},
13+
search: {
14+
type: Boolean,
15+
default: false
16+
}
17+
},
18+
data () {
19+
return {
20+
openKeys: []
21+
}
22+
},
23+
methods: {
24+
handlePlus (...args) {
25+
this.$emit('onAdd', { args })
26+
},
27+
handleTitleClick (...args) {
28+
this.$emit('titleClick', { args })
29+
},
30+
31+
renderSearch () {
32+
return (
33+
<Search
34+
placeholder="input search text"
35+
style="width: 100%; margin-bottom: 1rem"
36+
/>
37+
)
38+
},
39+
renderIcon (icon) {
40+
return icon && (<Icon type={icon} />) || null
41+
},
42+
renderMenuItem (item) {
43+
return (
44+
<Item key={item.key}>
45+
{ this.renderIcon(item.icon) }
46+
{ item.title }
47+
<a class="btn"><a-icon type="plus" onClick={() => this.handlePlus(item)} /></a>
48+
</Item>
49+
)
50+
},
51+
renderItem (item) {
52+
return item.children ? this.renderSubItem(item, item.key) : this.renderMenuItem(item, item.key)
53+
},
54+
renderItemGroup (item) {
55+
const childrenItems = item.children.map(o => {
56+
return this.renderItem(o, o.key)
57+
})
58+
59+
return (
60+
<ItemGroup key={item.key}>
61+
<template slot="title">
62+
<span>{ item.title }</span>
63+
<a-dropdown>
64+
<a class="btn"><a-icon type="ellipsis" /></a>
65+
<a-menu slot="overlay">
66+
<a-menu-item key="1">新增</a-menu-item>
67+
<a-menu-item key="2">合并</a-menu-item>
68+
<a-menu-item key="3">移除</a-menu-item>
69+
</a-menu>
70+
</a-dropdown>
71+
</template>
72+
{ childrenItems }
73+
</ItemGroup>
74+
)
75+
},
76+
renderSubItem (item, key) {
77+
const childrenItems = item.children && item.children.map(o => {
78+
return this.renderItem(o, o.key)
79+
})
80+
81+
const title = (
82+
<span slot="title">
83+
{ this.renderIcon(item.icon) }
84+
<span>{ item.title }</span>
85+
</span>
86+
)
87+
88+
if (item.group) {
89+
return this.renderItemGroup(item)
90+
}
91+
// titleClick={this.handleTitleClick(item)}
92+
return (
93+
<SubMenu key={key}>
94+
{ title }
95+
{ childrenItems }
96+
</SubMenu>
97+
)
98+
}
99+
},
100+
render () {
101+
const { dataSource, search } = this.$props
102+
103+
const list = dataSource.map(item => {
104+
return this.renderItem(item)
105+
})
106+
107+
return (
108+
<div class="tree-wrapper">
109+
{ search ? this.renderSearch() : null }
110+
<Menu mode="inline" class="custom-tree" {...{ on: { click: item => this.$emit('click', item) } }}>
111+
{ list }
112+
</Menu>
113+
</div>
114+
)
115+
}
116+
}

‎src/views/list/TreeList.vue‎

Lines changed: 24 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,10 @@
11
<template>
22
<a-card :bordered="false">
33
<a-row :gutter="8">
4-
<a-col :span="6">
5-
<a-menu
6-
class="custom-tree"
7-
@click="handleClick"
8-
style="width: 200px"
9-
:defaultSelectedKeys="['1']"
10-
:openKeys.sync="openKeys"
11-
mode="inline"
12-
>
13-
<a-sub-menu key="sub1" @titleClick="titleClick">
14-
<span slot="title"><a-icon type="mail" /><span>研发中心</span></span>
15-
<a-menu-item-group key="g1">
16-
<template slot="title">
17-
<span>后端组</span>
18-
<a-dropdown>
19-
<a class="btn"><a-icon type="ellipsis" /></a>
20-
<a-menu slot="overlay">
21-
<a-menu-item key="1">新增</a-menu-item>
22-
<a-menu-item key="2">合并</a-menu-item>
23-
<a-menu-item key="3">移除</a-menu-item>
24-
</a-menu>
25-
</a-dropdown>
26-
</template>
27-
<a-menu-item key="1">
28-
爪哇组
29-
<a class="btn"><a-icon type="plus" /></a>
30-
</a-menu-item>
31-
<a-menu-item key="2">
32-
拍黄片组
33-
<a class="btn"><a-icon type="plus" /></a>
34-
</a-menu-item>
35-
</a-menu-item-group>
36-
<a-menu-item-group key="g2">
37-
<template slot="title">
38-
<span>前端组</span>
39-
<a class="btn"><a-icon type="ellipsis" /></a>
40-
</template>
41-
<a-menu-item key="2-1">
42-
React
43-
<a class="btn"><a-icon type="plus" /></a>
44-
</a-menu-item>
45-
<a-menu-item key="2-2">
46-
Vue
47-
<a class="btn"><a-icon type="plus" /></a>
48-
</a-menu-item>
49-
<a-menu-item key="2-3">
50-
Angular
51-
<a class="btn"><a-icon type="plus" /></a>
52-
</a-menu-item>
53-
</a-menu-item-group>
54-
</a-sub-menu>
55-
<a-sub-menu key="sub2" @titleClick="titleClick">
56-
<span slot="title"><a-icon type="appstore" /><span>财务部</span></span>
57-
<a-menu-item key="3-1">会计核算</a-menu-item>
58-
<a-menu-item key="3-2">成本控制</a-menu-item>
59-
<a-sub-menu key="sub3" title="内部控制">
60-
<a-menu-item key="3-3-1">财务制度建设</a-menu-item>
61-
<a-menu-item key="3-3-2">会计核算</a-menu-item>
62-
</a-sub-menu>
63-
</a-sub-menu>
64-
<a-sub-menu key="sub4">
65-
<span slot="title"><a-icon type="setting" /><span>Navigation Three</span></span>
66-
<a-menu-item key="9">Option 9</a-menu-item>
67-
<a-menu-item key="10">Option 10</a-menu-item>
68-
<a-menu-item key="11">Option 11</a-menu-item>
69-
<a-menu-item key="12">Option 12</a-menu-item>
70-
</a-sub-menu>
71-
</a-menu>
4+
<a-col :span="5">
5+
<s-tree :dataSource="orgTree" :search="true" @click="handleClick"></s-tree>
726
</a-col>
73-
<a-col :span="18">
7+
<a-col :span="19">
748
<s-table
759
ref="table"
7610
size="default"
@@ -108,13 +42,15 @@
10842
</template>
10943

11044
<script>
45+
import STree from '@/components/Tree/Tree'
11146
import STable from '@/components/table/'
112-
import { getServiceList } from '@/api/manage'
47+
import { getOrgTree, getServiceList } from '@/api/manage'
11348
11449
export default {
11550
name: 'TreeList',
11651
components: {
117-
STable
52+
STable,
53+
STree
11854
},
11955
data () {
12056
return {
@@ -125,15 +61,15 @@ export default {
12561
// 表头
12662
columns: [
12763
{
128-
title: '规则编号',
64+
title: '#',
12965
dataIndex: 'no'
13066
},
13167
{
132-
title: '描述',
68+
title: '成员名称',
13369
dataIndex: 'description'
13470
},
13571
{
136-
title: '服务调用次数',
72+
title: '登陆次数',
13773
dataIndex: 'callNo',
13874
sorter: true,
13975
needTotal: true,
@@ -162,15 +98,25 @@ export default {
16298
.then(res => {
16399
return res.result
164100
})
101+
165102
},
166-
103+
orgTree: [],
167104
selectedRowKeys: [],
168105
selectedRows: []
169106
}
170107
},
108+
created () {
109+
getOrgTree().then(res => {
110+
this.orgTree = res.result
111+
})
112+
},
171113
methods: {
172114
handleClick (e) {
173-
console.log('click', e)
115+
console.log('handleClick', e)
116+
this.queryParam = {
117+
key: e.key
118+
}
119+
this.$refs.table.refresh(true)
174120
},
175121
titleClick (e) {
176122
console.log('titleClick', e)
@@ -184,7 +130,7 @@ export default {
184130
}
185131
</script>
186132

187-
<style lang="less" scoped>
133+
<style lang="less">
188134
.custom-tree {
189135
190136
/deep/ .ant-menu-item-group-title {
@@ -212,6 +158,7 @@ export default {
212158
width: 20px;
213159
height: 40px;
214160
line-height: 40px;
161+
z-index: 1050;
215162
216163
&:hover {
217164
transform: scale(1.2);

0 commit comments

Comments
 (0)