1 changed files with 218 additions and 218 deletions
@ -1,233 +1,233 @@ |
|||
<template> |
|||
<el-popover |
|||
placement="top" |
|||
v-model="visible" |
|||
class="rowDropContain rowDropNotHideItem" |
|||
width="270" |
|||
> |
|||
<div class="test_wrapper" @dragover="dragover($event)"> |
|||
<div class="text" >字段设置</div> |
|||
<el-divider></el-divider> |
|||
<transition-group class="transition-wrapper" name="sort"> |
|||
<div |
|||
v-for="(item,index) in dataList" |
|||
:key='index+item.label' |
|||
class="sort-item" |
|||
:draggable="true" |
|||
@dragstart="dragstart(item)" |
|||
@dragenter="dragenter(item,$event)" |
|||
@dragend="dragend(item,$event)" |
|||
@dragover="dragover($event)" |
|||
> |
|||
<svg-icon |
|||
class="checkbox-svg" |
|||
:class="{'show': dataList[index].isture}" |
|||
@click="rediochange(index)" |
|||
:icon-class="dataList[index].isture ? 'show' : 'hide'" |
|||
/> |
|||
<!-- <svg-icon v-if="!dataList[index].isture" @change="rediochange" icon-class="hide" /> --> |
|||
<!-- <el-checkbox |
|||
v-model="dataList[index].isture" |
|||
@change="rediochange" |
|||
:data="checked" |
|||
></el-checkbox> --> |
|||
<div class="lable">{{ item.label }}</div> |
|||
</div> |
|||
</transition-group> |
|||
</div> |
|||
<div class="buttonsBox"> |
|||
<el-button size="mini" @click="reset">重置</el-button> |
|||
<el-button size="mini" @click="close">关闭</el-button> |
|||
<!-- <el-button type="primary" size="mini" @click="save">保存</el-button> --> |
|||
</div> |
|||
</el-popover> |
|||
|
|||
</template> |
|||
<script> |
|||
import draggable from "vuedraggable"; |
|||
import Sortable from "sortablejs"; |
|||
export default { |
|||
components: { |
|||
draggable, |
|||
Sortable, |
|||
<el-popover |
|||
placement="top" |
|||
v-model="visible" |
|||
class="rowDropContain rowDropNotHideItem" |
|||
width="270" |
|||
> |
|||
<div class="test_wrapper" @dragover="dragover($event)"> |
|||
<div class="text" >字段设置</div> |
|||
<el-divider></el-divider> |
|||
<transition-group class="transition-wrapper" name="sort"> |
|||
<div |
|||
v-for="(item,index) in dataList" |
|||
:key='index+item.label' |
|||
class="sort-item" |
|||
:draggable="true" |
|||
@dragstart="dragstart(item)" |
|||
@dragenter="dragenter(item,$event)" |
|||
@dragend="dragend(item,$event)" |
|||
@dragover="dragover($event)" |
|||
> |
|||
<svg-icon |
|||
class="checkbox-svg" |
|||
:class="{'show': dataList[index].isture}" |
|||
@click="rediochange(index)" |
|||
:icon-class="dataList[index].isture ? 'show' : 'hide'" |
|||
/> |
|||
<!-- <svg-icon v-if="!dataList[index].isture" @change="rediochange" icon-class="hide" /> --> |
|||
<!-- <el-checkbox |
|||
v-model="dataList[index].isture" |
|||
@change="rediochange" |
|||
:data="checked" |
|||
></el-checkbox> --> |
|||
<div class="lable">{{ item.label }}</div> |
|||
</div> |
|||
</transition-group> |
|||
</div> |
|||
<div class="buttonsBox"> |
|||
<el-button size="mini" @click="reset">重置</el-button> |
|||
<el-button size="mini" @click="close">关闭</el-button> |
|||
<!-- <el-button type="primary" size="mini" @click="save">保存</el-button> --> |
|||
</div> |
|||
</el-popover> |
|||
|
|||
</template> |
|||
<script> |
|||
import draggable from "vuedraggable"; |
|||
import Sortable from "sortablejs"; |
|||
export default { |
|||
components: { |
|||
draggable, |
|||
Sortable, |
|||
}, |
|||
data() { |
|||
return { |
|||
visibleclose:true, |
|||
visibleon:false, |
|||
name: null, |
|||
oldData: null, |
|||
newData: null, |
|||
// checked: false, |
|||
dataList: [], |
|||
} |
|||
}, |
|||
props: { |
|||
visible: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return false |
|||
} |
|||
}, |
|||
tableColumns: { |
|||
type: Array, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.formatData(this.tableColumns) |
|||
}, |
|||
methods: { |
|||
reset() { |
|||
this.$confirm('重置后，字段设置将恢复初始设置，是否继续?', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning', |
|||
cancelButtonClass:'rowDropNotHideItem' |
|||
}).then(() => { |
|||
localStorage.removeItem(this.$store.getters.name.userName + '_' + this.$route.name) |
|||
let _resetCol = this.$isTableColumns[this.$route.name] |
|||
_resetCol.forEach(item => { |
|||
item.isture = true |
|||
}) |
|||
this.dataList = _resetCol |
|||
this.$emit('radio',_resetCol) |
|||
this.close() |
|||
}).catch(() => { |
|||
|
|||
}); |
|||
}, |
|||
data() { |
|||
return { |
|||
visibleclose:true, |
|||
visibleon:false, |
|||
name: null, |
|||
oldData: null, |
|||
newData: null, |
|||
// checked: false, |
|||
dataList: [], |
|||
} |
|||
close() { |
|||
this.$emit('closeRowDrop') |
|||
}, |
|||
props: { |
|||
visible: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return false |
|||
// save () { |
|||
// this.$emit('closeRowDrop') |
|||
// this.$emit('radio',this.dataList) |
|||
// // 本地缓存 当前用户名 + 路由名称 |
|||
// localStorage.setItem(this.$store.getters.name.userName + '_' + this.$route.name, JSON.stringify(this.dataList)) |
|||
// }, |
|||
// 格式化表头数据 |
|||
formatData (val) { |
|||
this.dataList = JSON.parse(JSON.stringify(val)) |
|||
this.dataList.forEach(item => { |
|||
if (item.isture == undefined) { |
|||
item.isture = true |
|||
} |
|||
}, |
|||
tableColumns: { |
|||
type: Array, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.formatData(this.tableColumns) |
|||
}, |
|||
methods: { |
|||
reset() { |
|||
this.$confirm('重置后，字段设置将恢复初始设置，是否继续?', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning', |
|||
cancelButtonClass:'rowDropNotHideItem' |
|||
}).then(() => { |
|||
localStorage.removeItem(this.$store.getters.name.userName + '_' + this.$route.name) |
|||
let _resetCol = this.$isTableColumns[this.$route.name] |
|||
_resetCol.forEach(item => { |
|||
item.isture = true |
|||
}) |
|||
this.dataList = _resetCol |
|||
this.$emit('radio',_resetCol) |
|||
this.close() |
|||
}).catch(() => { |
|||
|
|||
}); |
|||
}) |
|||
}, |
|||
close() { |
|||
this.$emit('closeRowDrop') |
|||
// 拖拽事件 |
|||
handleEdit(index, row) { |
|||
console.log(index, row); |
|||
}, |
|||
// save () { |
|||
// this.$emit('closeRowDrop') |
|||
// this.$emit('radio',this.dataList) |
|||
// // 本地缓存 当前用户名 + 路由名称 |
|||
// localStorage.setItem(this.$store.getters.name.userName + '_' + this.$route.name, JSON.stringify(this.dataList)) |
|||
// }, |
|||
// 格式化表头数据 |
|||
formatData (val) { |
|||
this.dataList = JSON.parse(JSON.stringify(val)) |
|||
this.dataList.forEach(item => { |
|||
if (item.isture == undefined) { |
|||
item.isture = true |
|||
} |
|||
}) |
|||
}, |
|||
// 拖拽事件 |
|||
handleEdit(index, row) { |
|||
console.log(index, row); |
|||
}, |
|||
handleDelete(index, row) { |
|||
console.log(index, row); |
|||
}, |
|||
dragstart(value) { |
|||
this.oldData = value |
|||
}, |
|||
// 记录移动过程中信息 |
|||
dragenter(value, e) { |
|||
this.newData = value |
|||
e.preventDefault() |
|||
}, |
|||
// 拖拽最终操作 |
|||
dragend(value, e) { |
|||
if (this.oldData !== this.newData) { |
|||
let oldIndex = this.dataList.indexOf(this.oldData) |
|||
let newIndex = this.dataList.indexOf(this.newData) |
|||
let newItems = [...this.dataList] |
|||
// 删除老的节点 |
|||
newItems.splice(oldIndex, 1) |
|||
// 在列表中目标位置增加新的节点 |
|||
newItems.splice(newIndex, 0, this.oldData) |
|||
this.dataList = [...newItems] |
|||
this.$emit('radio',this.dataList) |
|||
} |
|||
}, |
|||
// 拖动事件（主要是为了拖动时鼠标光标不变为禁止） |
|||
dragover(e) { |
|||
e.preventDefault() |
|||
}, |
|||
// 拖拽事件结束 |
|||
// 点击展开拖拽框 |
|||
visclose(){ |
|||
this.visibleclose = false |
|||
this.visibleon = true |
|||
}, |
|||
// 点击关闭拖拽框 |
|||
vison(){ |
|||
this.visibleclose = true |
|||
this.visibleon = false |
|||
}, |
|||
rediochange(index){ |
|||
this.dataList[index].isture = !this.dataList[index].isture |
|||
this.$forceUpdate() |
|||
// this.checked = !this.checked |
|||
this.$emit('radio',this.dataList) |
|||
// 本地缓存 当前用户名 + 路由名称 |
|||
localStorage.setItem(this.$store.getters.name.userName + '_' + this.$route.name, JSON.stringify(this.dataList)) |
|||
|
|||
} |
|||
} |
|||
handleDelete(index, row) { |
|||
console.log(index, row); |
|||
}, |
|||
dragstart(value) { |
|||
this.oldData = value |
|||
}, |
|||
// 记录移动过程中信息 |
|||
dragenter(value, e) { |
|||
this.newData = value |
|||
e.preventDefault() |
|||
}, |
|||
// 拖拽最终操作 |
|||
dragend(value, e) { |
|||
if (this.oldData !== this.newData) { |
|||
let oldIndex = this.dataList.indexOf(this.oldData) |
|||
let newIndex = this.dataList.indexOf(this.newData) |
|||
let newItems = [...this.dataList] |
|||
// 删除老的节点 |
|||
newItems.splice(oldIndex, 1) |
|||
// 在列表中目标位置增加新的节点 |
|||
newItems.splice(newIndex, 0, this.oldData) |
|||
this.dataList = [...newItems] |
|||
this.$emit('radio',this.dataList) |
|||
} |
|||
}, |
|||
// 拖动事件（主要是为了拖动时鼠标光标不变为禁止） |
|||
dragover(e) { |
|||
e.preventDefault() |
|||
}, |
|||
// 拖拽事件结束 |
|||
// 点击展开拖拽框 |
|||
visclose(){ |
|||
this.visibleclose = false |
|||
this.visibleon = true |
|||
}, |
|||
// 点击关闭拖拽框 |
|||
vison(){ |
|||
this.visibleclose = true |
|||
this.visibleon = false |
|||
}, |
|||
rediochange(index){ |
|||
this.dataList[index].isture = !this.dataList[index].isture |
|||
this.$forceUpdate() |
|||
// this.checked = !this.checked |
|||
this.$emit('radio',this.dataList) |
|||
// 本地缓存 当前用户名 + 路由名称 |
|||
localStorage.setItem(this.$store.getters.name.userName + '_' + this.$route.name, JSON.stringify(this.dataList)) |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
$paddingSize:20px; |
|||
.rowDropContain{ |
|||
.el-popover{ |
|||
position: fixed; |
|||
right: 30px; |
|||
padding: 0; |
|||
} |
|||
.transition-wrapper { |
|||
display: block; |
|||
max-height: calc(90vh - 280px); |
|||
overflow: auto; |
|||
padding: 0 0 $paddingSize $paddingSize; |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
$paddingSize:20px; |
|||
.rowDropContain{ |
|||
.el-popover{ |
|||
position: fixed; |
|||
right: 30px; |
|||
padding: 0; |
|||
} |
|||
.transition-wrapper { |
|||
display: block; |
|||
max-height: calc(90vh - 280px); |
|||
overflow: auto; |
|||
padding: 0 0 $paddingSize $paddingSize; |
|||
|
|||
.sort-item{ |
|||
margin-bottom: 6px; |
|||
display: flex; |
|||
cursor: grab; |
|||
align-items: center; |
|||
.sort-item{ |
|||
margin-bottom: 6px; |
|||
display: flex; |
|||
cursor: grab; |
|||
align-items: center; |
|||
|
|||
&:last-child{ |
|||
margin-bottom: 0; |
|||
} |
|||
&:last-child{ |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.lable{ |
|||
padding: 0 15px 0 10px; |
|||
} |
|||
.lable{ |
|||
padding: 0 15px 0 10px; |
|||
} |
|||
} |
|||
.el-divider--horizontal { |
|||
margin: $paddingSize; |
|||
width: calc(100% - 40px); |
|||
} |
|||
.text { |
|||
color: #333; |
|||
font-weight: bold; |
|||
padding: $paddingSize 0 0 $paddingSize; |
|||
} |
|||
.buttonsBox{ |
|||
text-align: center; |
|||
margin: 0; |
|||
padding: 15px; |
|||
border-top: #eee solid 1px; |
|||
} |
|||
.checkbox-svg{ |
|||
width: 20px; |
|||
flex-shrink: 0; |
|||
fill:currentColor; |
|||
color:#999; |
|||
font-size: 18px; |
|||
cursor: pointer; |
|||
} |
|||
.el-divider--horizontal { |
|||
margin: $paddingSize; |
|||
width: calc(100% - 40px); |
|||
} |
|||
.text { |
|||
color: #333; |
|||
font-weight: bold; |
|||
padding: $paddingSize 0 0 $paddingSize; |
|||
} |
|||
.buttonsBox{ |
|||
text-align: center; |
|||
margin: 0; |
|||
padding: 15px; |
|||
border-top: #eee solid 1px; |
|||
} |
|||
.checkbox-svg{ |
|||
width: 20px; |
|||
flex-shrink: 0; |
|||
fill:currentColor; |
|||
color:#999; |
|||
font-size: 18px; |
|||
cursor: pointer; |
|||
|
|||
&.show{ |
|||
color: #409EFF; |
|||
} |
|||
&.show{ |
|||
color: #409EFF; |
|||
} |
|||
} |
|||
</style> |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue