inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
commit | author | age
9bcb19 1 <template>
I 2   <div slot="overlay" class="ant-dropdown-menu s-tool-column ant-dropdown-content">
3     <div class="s-tool-column-header s-tool-column-item">
4       <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
5         列展示
6       </a-checkbox>
7       <a @click="reset">重置</a>
8     </div>
9     <a-divider />
10     <div class="ant-checkbox-group">
11       <div>
12         <draggable v-model="columnsSetting" animation="300" @end="emitColumnChange">
13           <div class="s-tool-column-item" v-for="item in columnsSetting" :key="item.title">
14             <div class="s-tool-column-handle" >
15               <a-icon type="more"/>
16               <a-icon type="more"/>
17             </div>
18             <a-checkbox v-model="item.checked" @change="onChange">{{ item.title }}</a-checkbox>
19           </div>
20         </draggable>
21       </div>
22     </div>
23   </div>
24 </template>
25
26 <script>
27   import draggable from 'vuedraggable'
28
29   export default {
30     props: {
31       columns: {
32         type: Array,
33         default: () => ([])
34       }
35     },
36     components: {
37       draggable
38     },
39     data() {
40       return {
41         indeterminate: false,
42         checkAll: true,
43         columnsSetting: [],
44         originColumns: []
45       }
46     },
47     methods: {
48       reset() {
49         this.columnsSetting = JSON.parse(JSON.stringify(this.originColumns))
50         this.indeterminate = false
51         this.checkAll = true
52         this.emitColumnChange()
53       },
54       onChange() {
55         const checkedList = this.columnsSetting.filter(value => value.checked)
56         this.indeterminate = !!checkedList.length && checkedList.length < this.columnsSetting.length
57         this.checkAll = checkedList.length === this.columnsSetting.length
58         this.emitColumnChange()
59       },
60       onCheckAllChange(e) {
61         const val = e.target.checked
62         Object.assign(this, {
63           indeterminate: false,
64           checkAll: val,
65           columnsSetting: this.columns.map(value => ({ ...value, checked: val }))
66         })
67         this.emitColumnChange()
68       },
69       emitColumnChange() {
70         this.$emit('columnChange', this.columnsSetting)
71       }
72     },
73     mounted() {
74       this.columnsSetting = this.columns.map(value => ({ ...value, checked: true }))
75       this.originColumns = JSON.parse(JSON.stringify(this.columnsSetting))
76     }
77   }
78 </script>
79
80 <style lang="less" scoped>
81
82 </style>