zhibinlv
/
WZC2
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

更新视图处理

集成Redis
安虹睿 2 years ago
parent
ca7bbe0603
commit
6e4137e80e
1 changed files with 218 additions and 218 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 436
      fe/PC/src/components/rowDrop/index.vue

436
fe/PC/src/components/rowDrop/index.vue
View File

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