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

Merge branch 'dev_web' of http://dev.ccwin-in.com:3000/BoXu.Zheng/WZC2 into dev_web

集成Redis
陈薪名 2 years ago
parent
e67b7c05f1 4a71011fdc
commit
c16685a1a3
1 changed files with 168 additions and 149 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. 317
      fe/PC/src/components/rowDrop/index.vue

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

@ -1,106 +1,125 @@
<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 () { save () {
this.$forceUpdate() this.$forceUpdate()
@ -167,62 +186,62 @@
} }
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
$paddingSize:20px; $paddingSize:20px;
.rowDropContain{ .rowDropContain{
.el-popover{ .el-popover{
position: fixed; position: fixed;
right: 30px; right: 30px;
padding: 0; padding: 0;
} }
.transition-wrapper { .transition-wrapper {
display: block; display: block;
max-height: calc(90vh - 280px); max-height: calc(90vh - 280px);
overflow: auto; overflow: auto;
padding: 0 0 $paddingSize $paddingSize; 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