数据迁移

src/views/pqs/harmonicMonitoring/embed/onlinerate/components/table.vue

@@ -1,6 +1,9 @@
 <template>
     <TableHeader area datePicker ref="TableHeaderRef">
         <template #select>
+            <el-form-item label="筛选">
+                <el-input v-model="tableStore.table.params.filterName" @keyup="searchEvent" placeholder="输入关键字筛选" />
+            </el-form-item>
             <el-form-item label="统计类型:">
                 <el-select v-model="tableStore.table.params.statisticalType" value-key="id" placeholder="请选择统计类型">
                     <el-option v-for="item in classificationData" :key="item.id" :label="item.name"
@@ -31,7 +34,8 @@
             </el-form-item>
         </template>
     </TableHeader>
-    <Table ref="tableRef" :tree-config="{ transform: true, parentField: 'uPid',rowField:'uId' }" :scroll-y="{ enabled: true }" />
+    <Table ref="tableRef" :tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
+        :scroll-y="{ enabled: true }"  :key="num" />
 </template>
 <script setup lang="ts">
 import { ref, onMounted, provide, nextTick } from 'vue'
@@ -39,14 +43,18 @@ import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
 import { useDictData } from '@/stores/dictData'
+import { debounce } from 'lodash-es'
+import XEUtils from 'xe-utils'
 const dictData = useDictData()
 const tableRef = ref()
+const num = ref(0)
 
 const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
 const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
 const terminaloption = dictData.getBasicData('Dev_Manufacturers')
 const interfereoption = dictData.getBasicData('Interference_Source')
-
+const treeDataCopy: any = ref([])
+const treeData: any = ref([])
 const TableHeaderRef = ref()
 const tableStore = new TableStore({
     url: '/device-boot/terminalOnlineRateData/getOnlineRateData',
@@ -129,31 +137,19 @@ const tableStore = new TableStore({
     beforeSearchFun: () => {
         tableStore.options.column[0].title = tableStore.table.params.statisticalType.name
     },
+
     loadCallback: () => {
-        let treeData = []
-        // tableStore.table.data.forEach((item: any, index: number) => {
-        //     item.id = Math.floor(Math.random() * 1000)
-        //     item.pid = index
-        //     if (item.children.length > 0) {
-        //         item.children.forEach((k: any) => {
-        //             k.id = Math.floor(Math.random() * 1000)
-        //             k.pid = item.id
-        //             // if (k.children.length > 0) {
-        //             //     k.children.forEach((v: any) => {
-        //             //         v.id = Math.floor(Math.random() * 1000)
-        //             //         v.pid = k.id
-        //             //     })
-        //             // }
-        //         })
-        //     }
-        // })
-        treeData = tree2List(tableStore.table.data, Math.random() * 1000)
-
-        tableStore.table.data = JSON.parse(JSON.stringify(treeData))
-
+   
         setTimeout(() => {
             tableRef.value.getRef().setAllTreeExpand(true)
-        }, 0)
+        }, 1000)
+      
+        treeData.value = tree2List(tableStore.table.data, Math.random() * 1000)
+        treeDataCopy.value = JSON.parse(JSON.stringify(treeData.value))
+        tableStore.table.data = treeData.value
+        tableStore.table.params.filterName=''
+        searchEvent()
+
     }
 })
 
@@ -186,6 +182,34 @@ const tree2List = (list: any, id: any) => {
     // 返回结果数组
     return arr
 }
+// 表格过滤
+const searchEvent = debounce(() => {
+    const filterVal = XEUtils.toValueString(tableStore.table.params.filterName).trim().toLowerCase()
+
+    if (filterVal) {
+        const options = { children: 'children' }
+        const searchProps = ['name']
+
+        const rest = XEUtils.searchTree(
+            treeDataCopy.value,
+            (item: any) => searchProps.some(key => String(item[key]).toLowerCase().indexOf(filterVal) > -1),
+            options
+        )
+        console.log("🚀 ~ searchEvent ~ rest:", rest)
+
+        tableStore.table.data = rest
+
+        // 搜索之后默认展开所有子节点
+    } else {
+        tableStore.table.data = treeDataCopy.value
+    }
+    nextTick(() => {
+        const $table = tableRef.value.getRef()
+        if ($table) {
+            $table.setAllTreeExpand(true)
+        }
+    })
+}, 500)
 onMounted(() => {
     tableStore.index()
 })