inleft
2022-08-02 70097d968795fcc872095c42f7b7bba618baaaf9
commit | author | age
9bcb19 1 import PropTypes from 'ant-design-vue/es/_util/vue-types'
I 2 import Option from './TagSelectOption.jsx'
3 import { filterEmpty } from '@/components/_util/util'
4
5 export default {
6   Option,
7   name: 'TagSelect',
8   model: {
9     prop: 'checked',
10     event: 'change'
11   },
12   props: {
13     prefixCls: {
14       type: String,
15       default: 'ant-pro-tag-select'
16     },
17     defaultValue: {
18       type: PropTypes.array,
19       default: null
20     },
21     value: {
22       type: PropTypes.array,
23       default: null
24     },
25     expandable: {
26       type: Boolean,
27       default: false
28     },
29     hideCheckAll: {
30       type: Boolean,
31       default: false
32     }
33   },
34   data () {
35     return {
36       expand: false,
37       localCheckAll: false,
38       items: this.getItemsKey(filterEmpty(this.$slots.default)),
39       val: this.value || this.defaultValue || []
40     }
41   },
42   methods: {
43     onChange (checked) {
44       const key = Object.keys(this.items).filter(key => key === checked.value)
45       this.items[key] = checked.checked
46       const bool = Object.values(this.items).lastIndexOf(false)
47       if (bool === -1) {
48         this.localCheckAll = true
49       } else {
50         this.localCheckAll = false
51       }
52     },
53     onCheckAll (checked) {
54       Object.keys(this.items).forEach(v => {
55         this.items[v] = checked.checked
56       })
57       this.localCheckAll = checked.checked
58     },
59     getItemsKey (items) {
60       const totalItem = {}
61       items.forEach(item => {
62         totalItem[item.componentOptions.propsData && item.componentOptions.propsData.value] = false
63       })
64       return totalItem
65     },
66     // CheckAll Button
67     renderCheckAll () {
68       const props = {
69         on: {
70           change: (checked) => {
71             this.onCheckAll(checked)
72             checked.value = 'total'
73             this.$emit('change', checked)
74           }
75         }
76       }
77       const checkAllElement = <Option key={'total'} checked={this.localCheckAll} {...props}>All</Option>
78       return !this.hideCheckAll && checkAllElement || null
79     },
80     // expandable
81     renderExpandable () {
82
83     },
84     // render option
85     renderTags (items) {
86       const listeners = {
87         change: (checked) => {
88           this.onChange(checked)
89           this.$emit('change', checked)
90         }
91       }
92
93       return items.map(vnode => {
94         const options = vnode.componentOptions
95         options.listeners = listeners
96         return vnode
97       })
98     }
99   },
100   render () {
101     const { $props: { prefixCls } } = this
102     const classString = {
103       [`${prefixCls}`]: true
104     }
105     const tagItems = filterEmpty(this.$slots.default)
106     return (
107       <div class={classString}>
108         {this.renderCheckAll()}
109         {this.renderTags(tagItems)}
110       </div>
111     )
112   }
113 }