配置中心绑定指标添加模糊搜索

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,9 +126,9 @@ const fromData = ref<treeData[]>([])
 const fromDataValue = ref<string[]>([])
 const toData = ref<treeData[]>([])
 const toDataValue = ref<string[]>([])
-
+const init = (val: any) => {
-const init = () => {
     queryStatistical(pid.value).then(res => {
+        if (val == 0) {
             fromData.value = []
             fromDataValue.value = []
             toData.value = []
@@ -150,8 +175,108 @@ const init = () => {
                 })
                 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 = []