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

绑定数据使用穿梭框树组件&穿梭框树修改样式

Browse Source
This commit is contained in:
zhujiyan
2024-07-15 13:48:35 +08:00
parent b19cbb51db
commit 33a41b9d7a
2 changed files with 123 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
src/views/govern/device/planData/components/popup.vue
View File

@@ -168,52 +168,7 @@
</el-form>
</el-tab-pane>
<el-tab-pane label="数据绑定" :name="2">
<!-- <TreeTransfer
style="margin-top: 20px"
ref="treeTransferRef"
node-key="id"
:fromData="unBindList"
:toData="bindList"
:defaultProps="{ label: 'name', value: 'id' }"
:title="['未绑定', '已绑定']"
/> -->
<TreeTransfers :fromData="unBindList" :toData="bindList" @getData="getData" />
<div class="device_info" v-show="false">
<div class="left_device">
<p>未绑定</p>
<deviceInfoTree1
:showCheckbox="true"
:default-checked-keys="defaultCheckedKeys"
@checkChange="checkChange1"
ref="deviceInfoTreeRef1"
style="height: 320px; width: 390px; border: 0"
></deviceInfoTree1>
</div>
<div class="center_bind">
<el-button
type="primary"
@click="handleUnBind"
:disabled="selectedBindList.length == 0"
:icon="ArrowLeft"
>
解绑
</el-button>
<el-button type="primary" @click="handleBind" :disabled="selectedUnBindList.length == 0">
绑定
<el-icon><ArrowRight /></el-icon>
</el-button>
</div>
<div class="right_device">
<p>已绑定</p>
<deviceInfoTree2
:showCheckbox="true"
:default-checked-keys="defaultCheckedKeys"
@checkChange="checkChange2"
ref="deviceInfoTreeRef2"
style="height: 320px; width: 390px; border: 0"
></deviceInfoTree2>
</div>
</div>
</el-tab-pane>
</el-tabs>
<template #footer="">
@@ -228,14 +183,6 @@ import { ElMessage } from 'element-plus'
import { Plus, Minus, Message, ArrowRight, ArrowLeft } from '@element-plus/icons-vue'
import { addPlan, addRecord, updateRecord, getDeviceList, addDevice, delDevice } from '@/api/cs-device-boot/planData'
import { useDictData } from '@/stores/dictData'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import deviceInfoTree1 from '@/components/tree/govern/deviceInfoTree.vue'
import deviceInfoTree2 from '@/components/tree/govern/deviceInfoTree.vue'
import { mainHeight } from '@/utils/layout'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import TreeTransfer from './treeTransfer.vue'
import TreeTransfers from './treeTransfers.vue'
const dictData = useDictData()
const dialogVisible = ref(false)
@@ -490,13 +437,6 @@ const open = async (val: any, id: any) => {
deviceInfoTreeRef2.value.getTreeList(res.data)
bindList.value = res.data
})
//查绑定测试项列表
// getSelectedTable(id)
nextTick(() => {
console.log(unBindList.value, bindList.value, '000000')
// treeTransferRef.value.initData(unBindList.value, bindList.value)
})
activeName.value = 0
}
}
@@ -514,124 +454,6 @@ const getData = (rightData: any) => {
})
}
checkedIdList.value = [...new Set(checkedIdList.value)]
console.log(checkedIdList.value, '++++++++++++++处理好的id')
}
//未绑定数据变化时处理
const unBindListChange = () => {
//判断未绑定是否跟绑定的数据有重复的，如果有，则删除绑定的数据
unBindList.value.map((item: any) => {
bindList.value.map((vv: any, vvIndex: any) => {
if (vv == item) {
bindList.value.splice(vvIndex, 1)
}
// if(vv.children&&vv.children.length!=0&&item.children&&item.children.length!=0){
// if(vv.children==item.children){
// bindList.value.splice(vvIndex,1);
// }
// vv.children.map((vv1:any)=>{
// })
// }
})
})
}
//已绑定数据变化时处理
const bindListChange = () => {
//判断未绑定是否跟绑定的数据有重复的，如果有，则删除绑定的数据
bindList.value.map((item: any) => {
unBindList.value.map((vv: any, vvIndex: any) => {
if (vv == item) {
unBindList.value.splice(vvIndex, 1)
}
// if(vv.children&&vv.children.length!=0&&item.children&&item.children.length!=0){
// if(vv.children==item.children){
// bindList.value.splice(vvIndex,1);
// }
// vv.children.map((vv1:any)=>{
// })
// }
})
})
}
//解绑---选择已绑定的数据添加到未绑定的数组里面，已绑定的数组删除选择的数据
const handleUnBind = () => {
console.log(unBindList.value, '000000000000解绑')
selectedBindList.value.map((sel: any) => {
unBindList.value.map((item: any) => {
//如果选择的已绑定的id跟现有未绑定的数据id相等
if (sel.id && item.id && sel.id == item.id) {
if (item.children && sel.children) {
item.children = [...sel.children, ...item.children]
item.children = [...new Set(item.children)]
}
}
//如果选择的已绑定的id和现有未绑定的数据id不相等
if (sel.pid && item.id && !sel.children) {
//从已绑定的数组里面查找到这条数据
bindList.value.map((b: any, b_index: any) => {
if (b.children && b.children.length != 0) {
b.children.map((b_c: any, b_c_index: any) => {
if (b_c.children && b_c.children.length != 0) {
b_c.children.map((b_c_c: any, b_c_c_index: any) => {
if (b_c_c.pid == sel.pid && b_c_c.id == sel.id) {
let obj = JSON.parse(JSON.stringify(b))
unBindList.value.push(b)
unBindList.value = [...new Set(unBindList.value)]
// b.children.splice(b_c_index, 1)
// b.c.children.splice(b_c_c_index, 1)
unBindListChange()
} else {
return
}
})
}
})
}
})
}
})
})
}
//绑定---选择未绑定的数据添加到已绑定的数组里面，未绑定的数组删除选择的数据
const handleBind = () => {
console.log(bindList.value, '000000000000绑定')
selectedUnBindList.value.map((sel: any) => {
console.log(sel, '绑定')
bindList.value.map((item: any) => {
//如果选择的已绑定的id跟现有未绑定的数据id相等
if (sel.id && item.id && sel.id == item.id) {
if (item.children && sel.children) {
item.children = [...sel.children, ...item.children]
item.children = [...new Set(item.children)]
}
}
//如果选择的已绑定的id和现有未绑定的数据id不相等
if (sel.pid && item.id && !sel.children) {
//从未绑定的数组里面查找到这条数据
unBindList.value.map((b: any, b_index: any) => {
if (b.children && b.children.length != 0) {
b.children.map((b_c: any, b_c_index: any) => {
if (b_c.children && b_c.children.length != 0) {
b_c.children.map((b_c_c: any, b_c_c_index: any) => {
if (b_c_c.pid == sel.pid && b_c_c.id == sel.id) {
let obj = JSON.parse(JSON.stringify(b))
bindList.value.push(b)
bindList.value = [...new Set(bindList.value)]
// b.children.splice(b_c_index, 1)
// b.c.children.splice(b_c_c_index, 1)
bindListChange()
} else {
return
}
})
}
})
}
})
}
})
})
}
const loading = ref(false)
const defaultCheckedKeys: any = ref([])
@@ -646,46 +468,6 @@ const pids: any = ref([])
const selectedBindList: any = ref([])
//未绑定选择的数据
const selectedUnBindList: any = ref([])
//未绑定树节点变化时处理数据
const checkChange1 = (data: any) => {
selectedUnBindList.value = data.data
}
//已绑定树节点变化时处理数据
const checkChange2 = (data: any) => {
selectedBindList.value = data.data
}
//树节点选择变化的时候处理树节点选中数据
const checkChange = async (data: any) => {
return
treeIds.value = []
pids.value = []
// if (data.checked) {
// defaultCheckedKeys.value.push(data.data.id)
// data.data.children?.map((item: any) => {
// treeIds.value.push(item.id)
// pids.value.push(item.pid)
// })
// } else {
// defaultCheckedKeys.value.splice(defaultCheckedKeys.value.indexOf(data.data.id), 1)
// data.data.children?.map((item: any) => {
// treeIds.value.splice(defaultCheckedKeys.value.indexOf(item.id), 1)
// })
// }
if (data.data && data.data.length != 0) {
data.data?.map((item: any) => {
if (item.pid) {
treeIds.value.push(item.id)
pids.value.push(item.pid)
}
})
} else {
treeIds.value = []
pids.value.push = []
}
treeIds.value = [...new Set(treeIds.value)]
pids.value = [...new Set(pids.value)]
// await tableStore.index()
}
const deviceInfoTreeRef1 = ref()
const deviceInfoTreeRef2 = ref()
//判断是否显示新增页面 false显示详情页面和删除按钮隐藏确定按钮 true显示新增页面与确定按钮隐藏删除按钮

210
src/views/govern/device/planData/components/treeTransfers.vue
View File

@@ -1,9 +1,16 @@
<template>
<div class="transferTreeBox" v-if="leftData.length!=0||rightData.length!=0">
<div class="transferTreeBox" v-if="fromData.length != 0 || toData.length != 0">
<!-- 左侧待选内容 -->
<div class="SelectBox">
<div class="boxTitle" @click="clickAllSelect">全选 &gt;</div>
<div class="boxTitle" @click="clickAllSelect">未绑定数据</div>
<div class="boxCenter">
<el-input
v-model="filterText"
:suffix-icon="Search"
style="width: 100%"
placeholder="请输入搜索内容"
clearable
></el-input>
<el-tree
ref="leftTree"
default-expand-all
@@ -11,18 +18,45 @@
:props="defaultProps"
show-checkbox
node-key="id"
/>
:filter-node-method="filterNode"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<Icon
:name="data.icon"
style="font-size: 16px"
:style="{ color: data.color }"
v-if="data.icon"
/>
<span style="margin-left: 4px">{{ node.label }}</span>
</span>
</template>
</el-tree>
</div>
</div>
<!-- 中间穿梭按钮 -->
<div class="transferBtn">
<div class="pickBtn" @click="towardsRight">&gt;&gt;</div>
<div class="pickBtn" @click="towardsLeft">&lt;&lt;</div>
<!-- <div class="pickBtn">&gt;&gt;</div>
<div class="pickBtn">&lt;&lt;</div> -->
<el-button type="primary" @click="towardsRight">
绑定
<el-icon><ArrowRight /></el-icon>
</el-button>
<el-button type="primary" @click="towardsLeft">
<el-icon><ArrowLeft /></el-icon>
解绑</el-button>
</div>
<!-- 右侧已选内容 -->
<div class="SelectBox">
<div class="boxTitle" @click="clickCancelAllSelect">&lt; 取消全选</div>
<div class="boxTitle" @click="clickCancelAllSelect">已绑定数据</div>
<div class="boxCenter">
<el-input
v-model="filterText1"
:suffix-icon="Search"
style="width: 100%"
placeholder="请输入搜索内容"
clearable
></el-input>
<el-tree
ref="rightTree"
default-expand-all
@@ -30,78 +64,29 @@
:props="defaultProps"
show-checkbox
node-key="id"
/>
:filter-node-method="filterNode"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<Icon
:name="data.icon"
style="font-size: 16px"
:style="{ color: data.color }"
v-if="data.icon"
/>
<span style="margin-left: 4px">{{ node.label }}</span>
</span>
</template>
</el-tree>
</div>
</div>
</div>
</template>
<script setup>
import { Search, ArrowRight, ArrowLeft } from '@element-plus/icons-vue'
</script>
<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'
// }
// ]
// }
// ]
import { useConfig } from '@/stores/config'
export default {
layout: 'login',
props: ['fromData', 'toData'],
@@ -112,20 +97,60 @@ export default {
label: 'name'
},
leftData: [],
rightData: []
rightData: [],
filterText: '',
filterText1: ''
}
},
watch: {
fromData(val, oldVal) {
if (val) {
this.leftData = val
const config = useConfig()
this.leftData.forEach(item => {
item.icon = 'el-icon-HomeFilled'
item.color = config.getColorVal('elementUiPrimary')
item.children.forEach(item2 => {
item2.icon = 'el-icon-List'
item2.color = config.getColorVal('elementUiPrimary')
item2.children.forEach(item3 => {
item3.icon = 'el-icon-Platform'
item3.color = config.getColorVal('elementUiPrimary')
if (item3.comFlag === 1) {
item3.color = '#e26257 !important'
}
})
})
})
}
},
toData(val, oldVal) {
if (val) {
this.rightData = val
const config = useConfig()
this.$emit('getData', this.rightData)
this.rightData.forEach(item => {
item.icon = 'el-icon-HomeFilled'
item.color = config.getColorVal('elementUiPrimary')
item.children.forEach(item2 => {
item2.icon = 'el-icon-List'
item2.color = config.getColorVal('elementUiPrimary')
item2.children.forEach(item3 => {
item3.icon = 'el-icon-Platform'
item3.color = config.getColorVal('elementUiPrimary')
if (item3.comFlag === 1) {
item3.color = '#e26257 !important'
}
})
})
})
}
},
filterText(val) {
this.$refs.leftTree.filter(val)
},
filterText1(val) {
this.$refs.rightTree.filter(val)
}
},
mounted() {
@@ -173,15 +198,16 @@ export default {
this.$forceUpdate()
this.afterToward()
})
console.log(this.leftData,"++++++++++176", this.$refs.rightTree);
},
// 点击全选
clickAllSelect() {
return;
this.$refs.leftTree.setCheckedNodes(this.leftData)
this.towardsRight()
},
// 点击取消全选
clickCancelAllSelect() {
return;
this.$refs.rightTree.setCheckedNodes(this.rightData)
this.towardsLeft()
},
@@ -189,9 +215,13 @@ export default {
afterToward() {
this.$refs.leftTree.setCheckedKeys([])
this.$refs.rightTree.setCheckedKeys([])
console.log(this.rightData, '00000000000000', this.leftData)
this.$emit('getData', this.rightData)
this.$forceUpdate()
},
//组件搜索
filterNode(value, data) {
if (!value) return true
return data.name.indexOf(value) !== -1
}
}
}
@@ -201,42 +231,48 @@ export default {
display: flex;
width: 100%;
justify-content: space-around;
padding: 10px 10px 50px 10px;
.SelectBox {
border: 1px solid #ccc;
height: 500px;
width: 45%;
height: 400px;
width: 40%;
color: #fff;
position: relative;
.boxTitle {
background: var(--el-color-primary);
height: 30px;
line-height: 30px;
height: 40px;
line-height: 40px;
text-align: center;
border-bottom: 1px solid #ccc;
border-bottom: 2px solid #eee;
cursor: pointer;
border: 2px solid var(--el-color-primary);
}
.boxCenter {
height: 100%;
width: 100%;
overflow-y: scroll;
background: #fff;
padding: 0 10px;
border: 1px solid #eee;
.el-input {
margin: 10px 0;
}
}
}
.transferBtn {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100px;
flex:1;
.pickBtn {
height: 30px;
width: 50px;
height: 40px;
width: 40px;
background: var(--el-color-primary);
color: #fff;
font-weight: 700;
@@ -244,7 +280,7 @@ export default {
border-radius: 5px;
margin-top: 10px;
text-align: center;
line-height: 30px;
line-height: 40px;
cursor: pointer;
}
}