<template>
|
<div class="dndList">
|
<div :style="{width:'100%'}" class="dndList-list">
|
<div style="display: flex;justify-content: space-between;">
|
<el-checkbox v-model="checkedAll" @change="checkedAllChange">列展示</el-checkbox>
|
<div style="cursor: pointer" :style="{color:$store.state.settings.theme}" @click="resetColumn">重置</div>
|
</div>
|
<el-checkbox-group v-model="checkedList" @change="checkedListChange">
|
<draggable :set-data="setData" :list="list1" class="dragArea" animation="300" @end="draggableEnded">
|
<div v-for="item in list1" :key="item.id" class="list-complete-item">
|
<div style="display: flex">
|
<div style="width: 20px;height: 20px;margin-right: 4px;cursor:move;"><i
|
style="font-weight: bolder"
|
class="el-icon-rank"
|
/></div>
|
<el-checkbox :label="item.label" class="list-complete-item-handle" />
|
</div>
|
<div>
|
<el-tooltip class="item" effect="dark" content="固定到左侧" placement="bottom">
|
<i
|
style="transform:rotate(90deg);cursor:pointer;font-weight: bolder"
|
class="el-icon-download"
|
:style="{color:item.fixed==='left'?$store.state.settings.theme:''}"
|
@click="fixedToLeft(item.label)"
|
/>
|
</el-tooltip>
|
<el-divider direction="vertical" />
|
<el-tooltip class="item" effect="dark" content="固定到右侧" placement="bottom">
|
<i
|
style="transform:rotate(-90deg);cursor:pointer;font-weight: bolder"
|
class="el-icon-download"
|
:style="{color:item.fixed==='right'?$store.state.settings.theme:''}"
|
@click="fixedToRight(item.label)"
|
/>
|
</el-tooltip>
|
</div>
|
</div>
|
</draggable>
|
</el-checkbox-group>
|
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import draggable from 'vuedraggable'
|
|
export default {
|
name: 'DndList',
|
components: { draggable },
|
props: {
|
list1: {
|
type: Array,
|
default() {
|
return []
|
}
|
}
|
|
},
|
data() {
|
return {
|
checkedList: this.list1.map(i => i.show ? i.label : '').filter(i => i !== ''), // 列展示值
|
checkedListDefaultLabel: this.list1.map(i => i.show ? i.label : '').filter(i => i !== ''), // 重置默认值label
|
checkedListDefaultFixed: this.list1.map(i => i.fixed), // 重置默认值fixed
|
checkedAll: true
|
}
|
},
|
created() {
|
},
|
mounted() {
|
},
|
methods: {
|
setData(dataTransfer) {
|
// to avoid Firefox bug
|
// Detail see : https://github.com/RubaXa/Sortable/issues/1012
|
dataTransfer.setData('Text', '')
|
},
|
// 重置
|
resetColumn() {
|
this.checkedList = this.checkedListDefaultLabel
|
this.list1.sort((a, b) => a.id - b.id)// 排序
|
this.list1.forEach((i, j) => {
|
i.show = !!this.checkedListDefaultLabel.includes(i.label)
|
})
|
this.checkedListDefaultFixed.forEach((i, j) => {
|
this.list1[j].fixed = i
|
})
|
this.$emit('tableColumnUpdate', this.checkedListDefaultLabel)
|
},
|
// 列展示
|
checkedAllChange() {
|
this.list1.forEach(i => {
|
if (this.checkedAll) {
|
i.show = true
|
this.checkedList = this.list1.map(j => j.label)
|
} else {
|
i.show = false
|
this.checkedList = []
|
}
|
})
|
this.$emit('tableColumnUpdate', this.checkedList)
|
},
|
// 固定到左侧
|
fixedToLeft(val) {
|
if (this.list1.find(i => i.label === val).show) {
|
this.list1.find(i => i.label === val).fixed = this.list1.find(i => i.label === val).fixed !== 'left' ? 'left' : false
|
}
|
this.$emit('tableColumnUpdate', this.checkedList)
|
},
|
// 固定到右侧
|
fixedToRight(val) {
|
if (this.list1.find(i => i.label === val).show) {
|
this.list1.find(i => i.label === val).fixed = this.list1.find(i => i.label === val).fixed !== 'right' ? 'right' : false
|
}
|
this.$emit('tableColumnUpdate', this.checkedList)
|
},
|
// 拖动结束事件
|
draggableEnded({ to, from, item, clone, oldIndex, newIndex }) {
|
// console.log(to, from, item, clone, oldIndex, newIndex)
|
this.$emit('tableColumnUpdate', this.list1, true)// 传给爷爷 isCopyTrue:复值给爷爷
|
},
|
// 多选框值改变事件
|
checkedListChange(val) {
|
this.checkedAll = val.length !== 0
|
this.list1.forEach((i, j) => {
|
i.show = !!val.includes(i.label)
|
})
|
this.$emit('tableColumnUpdate', val)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.dndList {
|
background: #fff;
|
//padding-bottom: 40px;
|
|
&:after {
|
content: "";
|
display: table;
|
clear: both;
|
}
|
|
.dndList-list {
|
float: left;
|
//padding-bottom: 30px;
|
|
&:first-of-type {
|
margin-right: 2%;
|
}
|
|
.dragArea {
|
margin-top: 15px;
|
min-height: 50px;
|
//padding-bottom: 30px;
|
}
|
}
|
}
|
|
.list-complete-item {
|
cursor: pointer;
|
position: relative;
|
font-size: 14px;
|
padding: 5px 5px;
|
margin-top: 4px;
|
//border: 1px solid #bfcbd9;
|
transition: all 1s;
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.list-complete-item-handle {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
margin-right: 50px;
|
}
|
|
.list-complete-item.sortable-chosen {
|
background: #b0e2f6;
|
}
|
|
.list-complete-item.sortable-ghost {
|
background: #e6f7ff;
|
}
|
|
.list-complete-enter,
|
.list-complete-leave-active {
|
opacity: 0;
|
}
|
</style>
|
