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

字段设置全选

集成Redis
安虹睿 2 years ago
parent
4a71011fdc
commit
9adcc3c8e0
1 changed files with 106 additions and 107 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. 213
      fe/PC/src/components/rowDrop/index.vue

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

@ -8,6 +8,13 @@
<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>
<!-- 全选 -->
<div class="allSelectContent" @click="redioAllChange()">
<i class="el-icon-success icon" v-if="allSeletType == 'allSelect'"></i>
<i class="el-icon-remove icon" v-if="allSeletType == 'hasSelect'"></i>
<i class="el-icon-success icon" v-if="allSeletType == 'NoSelect'" style="color:#999" ></i>
全选
</div>
<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"
@ -25,12 +32,6 @@
@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" /> -->
<!-- <el-checkbox
v-model="dataList[index].isture"
@change="rediochange"
:data="checked"
></el-checkbox> -->
<div class="lable">{{ item.label }}</div> <div class="lable">{{ item.label }}</div>
</div> </div>
</transition-group> </transition-group>
@ -53,13 +54,12 @@ export default {
}, },
data() { data() {
return { return {
visibleclose:true,
visibleon:false,
name: null, name: null,
oldData: null, oldData: null,
newData: null, newData: null,
// checked: false,
dataList: [], dataList: [],
// 全选 allSelect hasSelect NoSelect
allSeletType:'NoSelect',
} }
}, },
props: { props: {
@ -78,114 +78,102 @@ export default {
}, },
mounted() { mounted() {
this.formatData(this.tableColumns) this.formatData(this.tableColumns)
this.initSelectSta()
}, },
methods: { methods: {
reset() { reset() {
this.$confirm('重置后，字段设置将恢复初始设置，是否继续?', '提示', { this.$confirm('重置后，字段设置将恢复初始设置，是否继续?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
cancelButtonClass:'rowDropNotHideItem' cancelButtonClass:'rowDropNotHideItem'
}).then(() => { }).then(() => {
localStorage.removeItem(this.$store.getters.name.userName + '_' + this.$route.name) localStorage.removeItem(this.$store.getters.name.userName + '_' + this.$route.name)
let _resetCol = this.$isTableColumns[this.$route.name] let _resetCol = this.$isTableColumns[this.$route.name]
_resetCol.forEach(item => { _resetCol.forEach(item => {
item.isture = true item.isture = true
}) })
this.dataList = _resetCol this.dataList = _resetCol
this.$emit('radio',_resetCol) this.initSelectSta()
this.close() this.$emit('radio',_resetCol)
}).catch(() => { this.close()
}).catch(() => {
}); });
}, },
close() { close() {
this.$emit('closeRowDrop') this.$emit('closeRowDrop')
}, },
// save () { // 格式化表头数据
// this.$emit('closeRowDrop') formatData (val) {
// this.$emit('radio',this.dataList) this.dataList = JSON.parse(JSON.stringify(val))
// // 本地缓存 当前用户名 + 路由名称 this.dataList.forEach(item => {
// localStorage.setItem(this.$store.getters.name.userName + '_' + this.$route.name, JSON.stringify(this.dataList)) if (item.isture == undefined) {
// }, item.isture = true
// 格式化表头数据 }
formatData (val) { })
this.dataList = JSON.parse(JSON.stringify(val)) },
this.dataList.forEach(item => { save () {
if (item.isture == undefined) { this.$forceUpdate()
item.isture = true this.$emit('radio',this.dataList)
} // 本地缓存 当前用户名 + 路由名称
}) localStorage.setItem(this.$store.getters.name.userName + '_' + this.$route.name, JSON.stringify(this.dataList))
}, },
// 拖拽事件 dragstart(value) {
handleEdit(index, row) { this.oldData = value
console.log(index, row); },
}, // 记录移动过程中信息
save () { dragenter(value, e) {
this.$forceUpdate() this.newData = value
this.$emit('radio',this.dataList) e.preventDefault()
// 本地缓存 当前用户名 + 路由名称 },
localStorage.setItem(this.$store.getters.name.userName + '_' + this.$route.name, JSON.stringify(this.dataList)) // 拖拽最终操作
}, dragend(value, e) {
// 格式化表头数据 if (this.oldData !== this.newData) {
formatData (val) { let oldIndex = this.dataList.indexOf(this.oldData)
this.dataList = JSON.parse(JSON.stringify(val)) let newIndex = this.dataList.indexOf(this.newData)
this.dataList.forEach(item => { let newItems = [...this.dataList]
if (item.isture == undefined) { // 删除老的节点
item.isture = true newItems.splice(oldIndex, 1)
} // 在列表中目标位置增加新的节点
}) newItems.splice(newIndex, 0, this.oldData)
}, this.dataList = [...newItems]
// 拖拽事件 this.save()
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.save()
}
},
// 拖动事件（主要是为了拖动时鼠标光标不变为禁止）
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.save()
} }
} },
// 拖动事件（主要是为了拖动时鼠标光标不变为禁止）
dragover(e) {
e.preventDefault()
},
// item元素点击眼睛事件
rediochange(index){
this.dataList[index].isture = !this.dataList[index].isture
this.initSelectSta()
this.save()
},
// 初始化当前全选状态
initSelectSta(){
let _num = 0
this.dataList.forEach(item=>{
if(item.isture){
_num ++
}
})
if(_num == 0){this.allSeletType = 'NoSelect'}
if(_num == this.dataList.length){this.allSeletType = 'allSelect'}
if(_num > 0 && _num != this.dataList.length){this.allSeletType = 'hasSelect'}
},
// 全选点击事件
redioAllChange(){
let isSelectAll = !(this.allSeletType == 'allSelect')
this.allSeletType = isSelectAll ? 'allSelect' : 'NoSelect';
this.dataList.forEach(item=>{
return item.isture = isSelectAll
})
this.save()
},
} }
}
</script> </script>
<style lang="scss"> <style lang="scss">
$paddingSize:20px; $paddingSize:20px;
@ -225,6 +213,17 @@ $paddingSize:20px;
font-weight: bold; font-weight: bold;
padding: $paddingSize 0 0 $paddingSize; padding: $paddingSize 0 0 $paddingSize;
} }
.allSelectContent{
user-select: none;
cursor: pointer;
padding:0 0 10px $paddingSize;
.icon{
font-size:18px;
vertical-align: middle;
color: #409EFF;
margin-right: 5px;
}
}
.buttonsBox{ .buttonsBox{
text-align: center; text-align: center;
margin: 0; margin: 0;

Write Preview
Loading…
Cancel
Save