Web/admin-govern
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

提交更改

Browse Source
This commit is contained in:
zhujiyan
2024-07-12 16:55:10 +08:00
parent 85c76e078d
commit b7547be989
10 changed files with 1151 additions and 409 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
src/views/govern/device/planData/components/treeTransfers.vue Normal file
View File

@@ -0,0 +1,252 @@
<template>
<div class="transferTreeBox" v-if="leftData.length!=0||rightData.length!=0">
<!-- 左侧待选内容 -->
<div class="SelectBox">
<div class="boxTitle" @click="clickAllSelect">全选 &gt;</div>
<div class="boxCenter">
<el-tree
ref="leftTree"
default-expand-all
:data="leftData"
:props="defaultProps"
show-checkbox
node-key="id"
/>
</div>
</div>
<!-- 中间穿梭按钮 -->
<div class="transferBtn">
<div class="pickBtn" @click="towardsRight">&gt;&gt;</div>
<div class="pickBtn" @click="towardsLeft">&lt;&lt;</div>
</div>
<!-- 右侧已选内容 -->
<div class="SelectBox">
<div class="boxTitle" @click="clickCancelAllSelect">&lt; 取消全选</div>
<div class="boxCenter">
<el-tree
ref="rightTree"
default-expand-all
:data="rightData"
:props="defaultProps"
show-checkbox
node-key="id"
/>
</div>
</div>
</div>
</template>
<script>
// const mockTreeData = [
// {
// id: '1',
// label: '1',
// children: [
// {
// id: '1-1',
// label: '1-1',
// pid: '1'
// },
// {
// id: '1-2',
// label: '1-2',
// pid: '1'
// },
// {
// id: '1-3',
// label: '1-3',
// pid: '1'
// }
// ]
// },
// {
// id: '2',
// label: '2',
// children: [
// {
// id: '2-1',
// label: '2-1',
// pid: '2'
// },
// {
// id: '2-2',
// label: '2-2',
// pid: '2'
// },
// {
// id: '2-3',
// label: '2-3',
// pid: '2'
// }
// ]
// },
// {
// id: '3',
// label: '3',
// children: [
// {
// id: '3-1',
// label: '3-1',
// pid: '3'
// },
// {
// id: '3-2',
// label: '3-2',
// pid: '3'
// },
// {
// id: '3-3',
// label: '3-3',
// pid: '3'
// }
// ]
// }
// ]
export default {
layout: 'login',
props: ['fromData', 'toData'],
data() {
return {
defaultProps: {
children: 'children',
label: 'name'
},
leftData: [],
rightData: []
}
},
watch: {
fromData(val, oldVal) {
if (val) {
this.leftData = val
}
},
toData(val, oldVal) {
if (val) {
this.rightData = val
this.$emit('getData', this.rightData)
}
}
},
mounted() {
this.$forceUpdate()
this.$emit('getData', this.rightData)
},
methods: {
// 点击向右穿梭
towardsRight() {
// (leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，
// 1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false
this.$nextTick(() => {
const checkedNodes = this.$refs.leftTree.getCheckedNodes(false, true) // 包含半选
const checkedKeys = this.$refs.leftTree.getCheckedKeys(false)
const copyNodes = JSON.parse(JSON.stringify(checkedNodes))
copyNodes.forEach(x => {
x.children = []
if (!this.$refs.rightTree.getNode(x.id)) {
this.$refs.rightTree.append(x, x.pid)
}
})
checkedKeys.forEach(x => {
this.$refs.leftTree.remove(x)
})
this.afterToward()
this.$forceUpdate()
})
},
// 点击向左穿梭
towardsLeft() {
this.$nextTick(() => {
const checkedNodes = this.$refs.rightTree.getCheckedNodes(false, true) // 包含半选
const checkedKeys = this.$refs.rightTree.getCheckedKeys(false)
const copyNodes = JSON.parse(JSON.stringify(checkedNodes))
copyNodes.forEach(x => {
x.children = []
if (!this.$refs.leftTree.getNode(x.id)) {
this.$refs.leftTree.append(x, x.pid)
}
})
checkedKeys.forEach(x => {
this.$refs.rightTree.remove(x)
})
this.$forceUpdate()
this.afterToward()
})
console.log(this.leftData,"++++++++++176", this.$refs.rightTree);
},
// 点击全选
clickAllSelect() {
this.$refs.leftTree.setCheckedNodes(this.leftData)
this.towardsRight()
},
// 点击取消全选
clickCancelAllSelect() {
this.$refs.rightTree.setCheckedNodes(this.rightData)
this.towardsLeft()
},
// 数据穿梭后
afterToward() {
this.$refs.leftTree.setCheckedKeys([])
this.$refs.rightTree.setCheckedKeys([])
console.log(this.rightData, '00000000000000', this.leftData)
this.$emit('getData', this.rightData)
this.$forceUpdate()
}
}
}
</script>
<style lang="scss" scoped>
.transferTreeBox {
display: flex;
width: 100%;
justify-content: space-around;
.SelectBox {
border: 1px solid #ccc;
height: 500px;
width: 45%;
color: #fff;
position: relative;
.boxTitle {
background: var(--el-color-primary);
height: 30px;
line-height: 30px;
text-align: center;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
.boxCenter {
height: 100%;
width: 100%;
overflow-y: scroll;
background: #fff;
}
}
.transferBtn {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.pickBtn {
height: 30px;
width: 50px;
background: var(--el-color-primary);
color: #fff;
font-weight: 700;
font-size: 20px;
border-radius: 5px;
margin-top: 10px;
text-align: center;
line-height: 30px;
cursor: pointer;
}
}
}
</style>