|
|
|
@ -1,106 +1,125 @@ |
|
|
|
<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> |
|
|
|
<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, |
|
|
|
</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.$forceUpdate() |
|
|
|
@ -167,62 +186,62 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</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> |
