From 85c76e078d5ef933b02606cea59ca95c17dc4080 Mon Sep 17 00:00:00 2001
From: zhujiyan <17812234322@163.com>
Date: Thu, 11 Jul 2024 10:45:22 +0800
Subject: [PATCH] =?UTF-8?q?=E9=85=8D=E7=BD=AE=E4=B8=AD=E5=BF=83=E7=BB=91?=
 =?UTF-8?q?=E5=AE=9A=E6=8C=87=E6=A0=87=E6=B7=BB=E5=8A=A0=E6=A8=A1=E7=B3=8A?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../setting/statisticalType/binding.vue       | 222 ++++++++++++++----
 1 file changed, 173 insertions(+), 49 deletions(-)

diff --git a/src/views/govern/setting/statisticalType/binding.vue b/src/views/govern/setting/statisticalType/binding.vue
index 069dcb0..867063e 100644
--- a/src/views/govern/setting/statisticalType/binding.vue
+++ b/src/views/govern/setting/statisticalType/binding.vue
@@ -1,8 +1,21 @@
 <template>
-    <el-dialog class="cn-operate-dialog statistical-type-binding" v-model="dialogVisible" title="绑定指标" style="width: 1040px;">
+    <el-dialog
+        class="cn-operate-dialog statistical-type-binding"
+        v-model="dialogVisible"
+        title="绑定指标"
+        style="width: 1040px"
+    >
         <el-scrollbar style="padding-right: 0">
             <div class="box">
                 <div class="box-left">
+                    <el-input
+                        v-model="searchKey"
+                        size="small"
+                        placeholder="请输入搜索内容"
+                        :suffix-icon="Search"
+                        @input="filterTree"
+                        style="margin-bottom: 10px"
+                    ></el-input>
                     <el-cascader-panel
                         v-model="fromDataValue"
                         :props="{
@@ -48,10 +61,20 @@
                     </el-button>
                 </div>
                 <div class="box-right">
+                    <el-input
+                        v-model="searchKey1"
+                        size="small"
+                        placeholder="请输入搜索内容"
+                        :suffix-icon="Search"
+                        @input="filterTree1"
+                        style="margin-bottom: 10px"
+                    ></el-input>
                     <el-cascader-panel
                         v-model="toDataValue"
                         :props="{
-                            multiple: true
+                            multiple: true,
+                            checkStrictly: true,
+                            expandTrigger: 'click'
                         }"
                         :options="toData"
                     >
@@ -81,7 +104,7 @@
             </span>
         </template>
     </el-dialog>
-    <PopupAdd ref="addRef" @over="init"></PopupAdd>
+    <PopupAdd ref="addRef" @over="init(0)"></PopupAdd>
 </template>
 <script lang="ts" setup>
 import { ref, inject } from 'vue'
@@ -89,6 +112,8 @@ import { CascaderValue, ElMessage } from 'element-plus'
 import { addStatistical, queryStatistical } from '@/api/system-boot/csstatisticalset'
 import PopupAdd from './add.vue'
 import { dicDelete } from '@/api/system-boot/dic'
+import List from '@/views/pms/comptroller/list.vue'
+import { Search } from '@element-plus/icons-vue'
 defineOptions({
     name: 'govern/setting/statisticalType/binding'
 })
@@ -101,57 +126,157 @@ const fromData = ref<treeData[]>([])
 const fromDataValue = ref<string[]>([])
 const toData = ref<treeData[]>([])
 const toDataValue = ref<string[]>([])
-
-const init = () => {
+const init = (val: any) => {
     queryStatistical(pid.value).then(res => {
-        fromData.value = []
-        fromDataValue.value = []
-        toData.value = []
-        toDataValue.value = []
-        res.data.unSelectedList.forEach((item: any) => {
-            const obj = {
-                id: item.dataType,
-                value: item.dataType,
-                pid: 0,
-                label: item.dataTypeName,
-                children: [] as any[]
-            }
-            item.eleEpdPqdVOS.forEach((item2: any) => {
-                const obj2 = {
-                    id: item2.id,
-                    pid: item.dataType,
-                    value: item2.id,
-                    label: item2.phase === 'M' ? item2.showName : item2.phase + '相' + item2.showName
-                }
-                if (item2.showName) {
-                    obj.children.push(obj2)
+        if (val == 0) {
+            fromData.value = []
+            fromDataValue.value = []
+            toData.value = []
+            toDataValue.value = []
+            res.data.unSelectedList.forEach((item: any) => {
+                const obj = {
+                    id: item.dataType,
+                    value: item.dataType,
+                    pid: 0,
+                    label: item.dataTypeName,
+                    children: [] as any[]
                 }
+                item.eleEpdPqdVOS.forEach((item2: any) => {
+                    const obj2 = {
+                        id: item2.id,
+                        pid: item.dataType,
+                        value: item2.id,
+                        label: item2.phase === 'M' ? item2.showName : item2.phase + '相' + item2.showName
+                    }
+                    if (item2.showName) {
+                        obj.children.push(obj2)
+                    }
+                })
+                fromData.value.push(obj)
             })
-            fromData.value.push(obj)
-        })
-        res.data.selectedList.forEach((item: any) => {
-            const obj = {
-                id: item.dataType,
-                value: item.dataType,
-                pid: 0,
-                label: item.dataTypeName,
-                children: [] as any[]
-            }
-            item.eleEpdPqdVOS.forEach((item2: any) => {
-                const obj2 = {
-                    id: item2.id,
-                    pid: item2.dataType,
-                    value: item2.id,
-                    label: item2.phase === 'M' ? item2.showName : item2.phase + '相' + item2.showName
-                }
-                if (item2.showName) {
-                    obj.children.push(obj2)
+            res.data.selectedList.forEach((item: any) => {
+                const obj = {
+                    id: item.dataType,
+                    value: item.dataType,
+                    pid: 0,
+                    label: item.dataTypeName,
+                    children: [] as any[]
                 }
+                item.eleEpdPqdVOS.forEach((item2: any) => {
+                    const obj2 = {
+                        id: item2.id,
+                        pid: item2.dataType,
+                        value: item2.id,
+                        label: item2.phase === 'M' ? item2.showName : item2.phase + '相' + item2.showName
+                    }
+                    if (item2.showName) {
+                        obj.children.push(obj2)
+                    }
+                })
+                toData.value.push(obj)
             })
-            toData.value.push(obj)
-        })
+        } else if (val == 1) {
+            fromData.value = []
+            fromDataValue.value = []
+            res.data.unSelectedList.forEach((item: any) => {
+                const obj = {
+                    id: item.dataType,
+                    value: item.dataType,
+                    pid: 0,
+                    label: item.dataTypeName,
+                    children: [] as any[]
+                }
+                item.eleEpdPqdVOS.forEach((item2: any) => {
+                    const obj2 = {
+                        id: item2.id,
+                        pid: item.dataType,
+                        value: item2.id,
+                        label: item2.phase === 'M' ? item2.showName : item2.phase + '相' + item2.showName
+                    }
+                    if (item2.showName) {
+                        obj.children.push(obj2)
+                    }
+                })
+                fromData.value.push(obj)
+            })
+        } else if (val == 2) {
+            toData.value = []
+            toDataValue.value = []
+            res.data.selectedList.forEach((item: any) => {
+                const obj = {
+                    id: item.dataType,
+                    value: item.dataType,
+                    pid: 0,
+                    label: item.dataTypeName,
+                    children: [] as any[]
+                }
+                item.eleEpdPqdVOS.forEach((item2: any) => {
+                    const obj2 = {
+                        id: item2.id,
+                        pid: item2.dataType,
+                        value: item2.id,
+                        label: item2.phase === 'M' ? item2.showName : item2.phase + '相' + item2.showName
+                    }
+                    if (item2.showName) {
+                        obj.children.push(obj2)
+                    }
+                })
+                toData.value.push(obj)
+            })
+        }
     })
 }
+
+const searchVisible = ref(false)
+const searchKey = ref('')
+//查左边
+const filteredTree = ref([])
+const filterTree = () => {
+    filteredTree.value = filterNodes(fromData.value, searchKey.value)
+}
+//查右边
+const searchKey1 = ref('')
+const filteredTree1 = ref([])
+const filterTree1 = () => {
+    filteredTree1.value = filterNodes1(toData.value, searchKey1.value)
+}
+
+const filterNodes = (node: any, query: any) => {
+    if (searchKey.value) {
+        const result: any = []
+        node.forEach((node: any) => {
+            let newNode = { ...node }
+            if (node.children) {
+                newNode.children = filterNodes(node.children, query)
+            }
+            if (newNode.label.includes(query) || (newNode.children && newNode.children.length)) {
+                result.push(newNode)
+            }
+        })
+        return (fromData.value = result)
+    } else {
+        init(1)
+    }
+}
+
+const filterNodes1 = (node: any, query: any) => {
+    if (searchKey1.value) {
+        const result: any = []
+        node.forEach((node: any) => {
+            let newNode = { ...node }
+            if (node.children) {
+                newNode.children = filterNodes1(node.children, query)
+            }
+            if (newNode.label.includes(query) || (newNode.children && newNode.children.length)) {
+                result.push(newNode)
+            }
+        })
+        return (toData.value = result)
+    } else {
+        init(2)
+    }
+}
+
 // 左侧源数据选中事件
 const leftCheckChange = (e: any) => {
     if (fromDataValue.value.length === 0) {
@@ -186,7 +311,6 @@ const leftCheckChange = (e: any) => {
 }
 // 右侧目标数据选中事件
 const rightCheckChange = () => {
-    console.log(toDataValue.value)
     if (toDataValue.value.length === 0) {
         return ElMessage.warning('请先选择数据')
     }
@@ -249,7 +373,7 @@ const newGroup = () => {
 const open = (id: string) => {
     dialogVisible.value = true
     pid.value = id
-    init()
+    init(0)
 }
 const submit = async () => {
     let ids = []