From 33a41b9d7ac00886cd8a8f4f1645c73f1ed8e433 Mon Sep 17 00:00:00 2001
From: zhujiyan <17812234322@163.com>
Date: Mon, 15 Jul 2024 13:48:35 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=91=E5=AE=9A=E6=95=B0=E6=8D=AE=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=E7=A9=BF=E6=A2=AD=E6=A1=86=E6=A0=91=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?&=E7=A9=BF=E6=A2=AD=E6=A1=86=E6=A0=91=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../device/planData/components/popup.vue      | 218 ------------------
 .../planData/components/treeTransfers.vue     | 210 ++++++++++-------
 2 files changed, 123 insertions(+), 305 deletions(-)

diff --git a/src/views/govern/device/planData/components/popup.vue b/src/views/govern/device/planData/components/popup.vue
index cd74896..7915083 100644
--- a/src/views/govern/device/planData/components/popup.vue
+++ b/src/views/govern/device/planData/components/popup.vue
@@ -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显示新增页面与确定按钮隐藏删除按钮
diff --git a/src/views/govern/device/planData/components/treeTransfers.vue b/src/views/govern/device/planData/components/treeTransfers.vue
index c501a42..2a1b09d 100644
--- a/src/views/govern/device/planData/components/treeTransfers.vue
+++ b/src/views/govern/device/planData/components/treeTransfers.vue
@@ -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;
         }
     }