From fac9d8410a0cc322df0359b5be58d9f206069e7a Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Mon, 8 Sep 2025 11:19:56 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=B1=87=E9=9B=86=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=A1=B5=E9=9D=A2=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/data-collect/data-set-manage.js       |  19 +++
 .../data-set-manage/components/left-tree.vue  | 113 ++++++++++++++++
 .../components/right-table.vue                | 126 ++++++++++++++++++
 .../data-collect/data-set-manage/index.vue    |  30 ++++-
 4 files changed, 287 insertions(+), 1 deletion(-)
 create mode 100644 src/api/data-collect/data-set-manage.js
 create mode 100644 src/views/data-collect/data-set-manage/components/left-tree.vue
 create mode 100644 src/views/data-collect/data-set-manage/components/right-table.vue

diff --git a/src/api/data-collect/data-set-manage.js b/src/api/data-collect/data-set-manage.js
new file mode 100644
index 0000000..adc4f74
--- /dev/null
+++ b/src/api/data-collect/data-set-manage.js
@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+// 获取左侧树列表接口
+export function getLeftTreeListAPI(data) {
+    return request({
+        url: '/smartArchives/***',
+        method: 'POST',
+        data: data,
+    })
+}
+
+// 获取数据列表接口
+export function getListDataSetAPI(data) {
+    return request({
+        url: '/smartArchives/***',
+        method: 'GET',
+        params: data,
+    })
+}
diff --git a/src/views/data-collect/data-set-manage/components/left-tree.vue b/src/views/data-collect/data-set-manage/components/left-tree.vue
new file mode 100644
index 0000000..2a193f8
--- /dev/null
+++ b/src/views/data-collect/data-set-manage/components/left-tree.vue
@@ -0,0 +1,113 @@
+<template>
+    <!-- 左侧树 -->
+    <div>
+        <el-card style="min-height: calc(100vh - 125px)">
+            <el-row :gutter="20" style="display: flex; align-items: center">
+                <el-col :span="16">
+                    <el-input
+                        v-model="filterText"
+                        placeholder="输入关键字"
+                        @keyup.enter.native="onHandleSearch"
+                    >
+                    </el-input>
+                </el-col>
+                <el-col :span="8">
+                    <el-button
+                        type="primary"
+                        size="small"
+                        @click="onHandleSearch"
+                    >
+                        搜索
+                    </el-button>
+                </el-col>
+            </el-row>
+
+            <el-tree
+                ref="leftTreeRef"
+                :data="treeDataList"
+                default-expand-all
+                class="left-tree-list"
+                @node-click="onHandleNodeClick"
+            >
+            </el-tree>
+        </el-card>
+    </div>
+</template>
+
+<script>
+import { getLeftTreeListAPI } from '@/api/data-collect/data-set-manage'
+export default {
+    name: 'LeftTree',
+    data() {
+        return {
+            treeDataList: [
+                {
+                    label: '数据汇集管理',
+                    id: 1,
+                    children: [
+                        {
+                            label: '数据汇集1',
+                            id: 11,
+                        },
+                        {
+                            label: '数据汇集2',
+                            id: 12,
+                        },
+                        {
+                            label: '数据汇集3',
+                            id: 13,
+                        },
+                        {
+                            label: '数据汇集4',
+                            id: 14,
+                        },
+                        {
+                            label: '数据汇集5',
+                            id: 15,
+                        },
+                        {
+                            label: '数据汇集6',
+                            id: 16,
+                        },
+                        {
+                            label: '数据汇集7',
+                            id: 17,
+                        },
+                        {
+                            label: '数据汇集8',
+                            id: 18,
+                        },
+                    ],
+                },
+            ],
+        }
+    },
+    methods: {
+        // 节点点击事件
+        onHandleNodeClick(data) {
+            console.log(data)
+
+            this.$emit('handleNodeClick', data)
+        },
+        // 获取左侧树列表
+        async getLeftTreeList() {
+            const res = await getLeftTreeListAPI()
+            // this.treeDataList = res.data
+        },
+        // 搜索
+        onHandleSearch() {
+            // console.log(this.filterText)
+            // this.getLeftTreeList()
+        },
+    },
+    created() {
+        // this.getLeftTreeList()
+    },
+}
+</script>
+
+<style scoped>
+.left-tree-list {
+    margin-top: 10px;
+}
+</style>
diff --git a/src/views/data-collect/data-set-manage/components/right-table.vue b/src/views/data-collect/data-set-manage/components/right-table.vue
new file mode 100644
index 0000000..ebf2b2f
--- /dev/null
+++ b/src/views/data-collect/data-set-manage/components/right-table.vue
@@ -0,0 +1,126 @@
+<template>
+    <!-- 右侧表格 -->
+    <div>
+        <el-card style="min-height: calc(100vh - 125px)">
+            <!-- 查询 -->
+            <el-form
+                size="small"
+                ref="queryForm"
+                :inline="true"
+                :model="queryParams"
+            >
+                <el-form-item prop="dataTypeName">
+                    <el-input
+                        clearable
+                        placeholder="数据类型名称"
+                        v-model="queryParams.dataTypeName"
+                        @keyup.enter.native="onHandleQuery"
+                    />
+                </el-form-item>
+
+                <el-form-item>
+                    <el-button
+                        size="mini"
+                        type="primary"
+                        icon="el-icon-search"
+                        @click="onHandleQuery"
+                    >
+                        查询
+                    </el-button>
+                    <el-button
+                        size="mini"
+                        icon="el-icon-refresh"
+                        @click="onResetQuery"
+                    >
+                        重置
+                    </el-button>
+                </el-form-item>
+            </el-form>
+
+            <!-- 表格 -->
+            <el-table :data="tableData" border>
+                <el-table-column
+                    align="center"
+                    :key="column.prop"
+                    :prop="column.prop"
+                    :label="column.label"
+                    v-for="column in columns"
+                />
+            </el-table>
+        </el-card>
+    </div>
+</template>
+
+<script>
+import { getListDataSetClassAPI } from '@/api/data-collect/data-set-manage'
+export default {
+    name: 'RightTable',
+    props: {
+        selectedNodeId: {
+            type: [Number, String],
+            default: null,
+        },
+    },
+    data() {
+        return {
+            queryParams: {
+                dataTypeName: undefined,
+            },
+            tableData: [],
+            columns: [],
+        }
+    },
+    methods: {
+        // 查询
+        onHandleQuery() {
+            console.log(this.queryParams)
+        },
+
+        // 重置
+        onResetQuery() {
+            this.queryParams = {}
+        },
+
+        // 获取数据列表
+        async getListDataSetClassFun(id) {
+            // const res = await getListDataSetClassAPI({
+            //     id,
+            //     ...this.queryParams,
+            // })
+            // this.tableData = res.rows
+            // this.total = res.total
+
+            // 动态添加表格列和数据源
+
+            const num = Math.floor(Math.random() * 6) + 1
+            const num2 = Math.floor(Math.random() * 6) + 1
+            for (let i = 0; i < num; i++) {
+                this.columns.push({
+                    label: `字段${i + 1}`,
+                    prop: `dataTypeName${i}`,
+                })
+            }
+
+            for (let i = 0; i < num2; i++) {
+                const obj = {}
+                for (let j = 0; j < num; j++) {
+                    obj[this.columns[j].prop] = `字段${j + 1}的值`
+                }
+                this.tableData.push(obj)
+            }
+        },
+    },
+
+    // 监听选中的节点ID
+    watch: {
+        selectedNodeId: {
+            handler(newVal) {
+                this.columns = []
+                this.tableData = []
+                this.getListDataSetClassFun(newVal.id)
+            },
+            immediate: true,
+        },
+    },
+}
+</script>
diff --git a/src/views/data-collect/data-set-manage/index.vue b/src/views/data-collect/data-set-manage/index.vue
index b592633..072f1f6 100644
--- a/src/views/data-collect/data-set-manage/index.vue
+++ b/src/views/data-collect/data-set-manage/index.vue
@@ -1,11 +1,39 @@
 <template>
     <!-- 数据汇集管理 -->
-    <div class="app-container"> 数据分类管理 </div>
+    <div class="app-container">
+        <el-row :gutter="24">
+            <el-col :span="8">
+                <LeftTree @handleNodeClick="handleNodeClick" />
+            </el-col>
+            <el-col :span="16">
+                <RightTable :selectedNodeId="selectedNodeId" />
+            </el-col>
+        </el-row>
+    </div>
 </template>
 
 <script>
+import LeftTree from './components/left-tree.vue'
+import RightTable from './components/right-table.vue'
 export default {
     name: 'DataSetManage',
+    components: {
+        LeftTree,
+        RightTable,
+    },
+    data() {
+        return {
+            // 选中的节点ID
+            selectedNodeId: null,
+        }
+    },
+    methods: {
+        // 节点点击事件
+        handleNodeClick(data) {
+            console.log(data)
+            this.selectedNodeId = data.id
+        },
+    },
 }
 </script>