inleft
2022-08-02 70097d968795fcc872095c42f7b7bba618baaaf9
commit | author | age
9bcb19 1 import { Menu, Icon, Input } from 'ant-design-vue'
I 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     openKeys: {
14       type: Array,
15       default: () => []
16     },
17     search: {
18       type: Boolean,
19       default: false
20     }
21   },
22   created () {
23     this.localOpenKeys = this.openKeys.slice(0)
24   },
25   data () {
26     return {
27       localOpenKeys: []
28     }
29   },
30   methods: {
31     handlePlus (item) {
32       this.$emit('add', item)
33     },
34     handleTitleClick (...args) {
35       this.$emit('titleClick', { args })
36     },
37
38     renderSearch () {
39       return (
40         <Search
41           placeholder="input search text"
42           style="width: 100%; margin-bottom: 1rem"
43         />
44       )
45     },
46     renderIcon (icon) {
47       return icon && (<Icon type={icon} />) || null
48     },
49     renderMenuItem (item) {
50       return (
51         <Item key={item.key}>
52           { this.renderIcon(item.icon) }
53           { item.title }
54           <a class="btn" style="width: 20px;z-index:1300" {...{ on: { click: () => this.handlePlus(item) } }}><a-icon type="plus"/></a>
55         </Item>
56       )
57     },
58     renderItem (item) {
59       return item.children ? this.renderSubItem(item, item.key) : this.renderMenuItem(item, item.key)
60     },
61     renderItemGroup (item) {
62       const childrenItems = item.children.map(o => {
63         return this.renderItem(o, o.key)
64       })
65
66       return (
67         <ItemGroup key={item.key}>
68           <template slot="title">
69             <span>{ item.title }</span>
70             <a-dropdown>
71               <a class="btn"><a-icon type="ellipsis" /></a>
72               <a-menu slot="overlay">
73                 <a-menu-item key="1">新增</a-menu-item>
74                 <a-menu-item key="2">合并</a-menu-item>
75                 <a-menu-item key="3">移除</a-menu-item>
76               </a-menu>
77             </a-dropdown>
78           </template>
79           { childrenItems }
80         </ItemGroup>
81       )
82     },
83     renderSubItem (item, key) {
84       const childrenItems = item.children && item.children.map(o => {
85         return this.renderItem(o, o.key)
86       })
87
88       const title = (
89         <span slot="title">
90           { this.renderIcon(item.icon) }
91           <span>{ item.title }</span>
92         </span>
93       )
94
95       if (item.group) {
96         return this.renderItemGroup(item)
97       }
98       // titleClick={this.handleTitleClick(item)}
99       return (
100         <SubMenu key={key}>
101           { title }
102           { childrenItems }
103         </SubMenu>
104       )
105     }
106   },
107   render () {
108     const { dataSource, search } = this.$props
109
110     // this.localOpenKeys = openKeys.slice(0)
111     const list = dataSource.map(item => {
112       return this.renderItem(item)
113     })
114
115     return (
116       <div class="tree-wrapper">
117         { search ? this.renderSearch() : null }
118         <Menu mode="inline" class="custom-tree" {...{ on: { click: item => this.$emit('click', item), 'update:openKeys': val => { this.localOpenKeys = val } } }} openKeys={this.localOpenKeys}>
119           { list }
120         </Menu>
121       </div>
122     )
123   }
124 }