From 13f9bd6af7bc695f3aa744e7e01bd3aa1fab39ee Mon Sep 17 00:00:00 2001
From: lSun <15893999301@qq.com>
Date: Wed, 26 Nov 2025 18:02:40 +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=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/data-collect/data-set-manage.js    |  25 ++
 src/views/data-collect/data-set-manage.vue | 266 +++++++++++++++++++++
 src/views/data-collect/share.vue           | 230 ++++++++++++++++++
 3 files changed, 521 insertions(+)
 create mode 100644 src/api/data-collect/data-set-manage.js
 create mode 100644 src/views/data-collect/data-set-manage.vue
 create mode 100644 src/views/data-collect/share.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 00000000..62dce6a1
--- /dev/null
+++ b/src/api/data-collect/data-set-manage.js
@@ -0,0 +1,25 @@
+import request from '@/axios';
+
+// 获取左侧树列表接口
+export function getLeftTreeListAPI(id) {
+    let data = {
+        id: id
+    };
+    return request({
+        url: '/blade-system/data/classify/listAll',
+        method: 'POST',
+        data: data,
+    })
+}
+
+// 获取数据列表接口
+export function getListDataSetAPI(id) {
+    let data = {
+        dataClassifyId: id,
+    };
+    return request({
+        url: '/blade-system/data/Collect/list',
+        method: 'POST',
+        data: data,
+    })
+}
diff --git a/src/views/data-collect/data-set-manage.vue b/src/views/data-collect/data-set-manage.vue
new file mode 100644
index 00000000..8c3dc1bc
--- /dev/null
+++ b/src/views/data-collect/data-set-manage.vue
@@ -0,0 +1,266 @@
+<template>
+  <el-row class="full-height">
+    <!-- 左侧树 -->
+    <el-col :span="5" class="left-panel">
+      <div class="box">
+        <el-scrollbar>
+          <basic-container>
+            <avue-tree
+              :option="treeOption"
+              :data="treeData"
+              @node-click="nodeClick"
+            />
+          </basic-container>
+        </el-scrollbar>
+      </div>
+    </el-col>
+
+    <!-- 右侧表格 -->
+    <el-col :span="19" class="right-panel">
+      <basic-container class="right-basic">
+        <avue-crud
+          :option="option"
+          v-model="form"
+          :search.sync="search"
+          :data="data"
+          :table-loading="loading"
+          ref="crud"
+          @search-change="searchChange"
+          @search-reset="searchReset"
+          @refresh-change="refreshChange"
+        >
+          <!-- 自定义操作列 -->
+          <template #operate="{ row }">
+            <el-button type="primary" size="mini" plain @click="shareRow(row)">
+              <i class="el-icon-share"></i>分享
+            </el-button>
+          </template>
+        </avue-crud>
+      </basic-container>
+    </el-col>
+  </el-row>
+
+  <Share
+    v-if="shareDialogVisible"
+    :rowData="shareRowData"
+    title="分享接口"
+    :width="1000"
+    :height="1000"
+    @closeDialog="shareDialogVisible = false"
+  />
+</template>
+
+<script>
+import Share from "./share.vue";
+import { getLeftTreeListAPI, getListDataSetAPI } from "@/api/data-collect/data-set-manage";
+
+export default {
+  name: "DataSetManage",
+  components: {
+    Share
+  },
+  data() {
+    return {
+      loading: false,
+      form: {},
+      search: { keyword: "" },
+      data: [],
+      rawData: [],
+      option: {
+        height: "calc(100vh - 280px)",
+        border: true,
+        index: true,
+        tip: false,
+        searchShow: true,
+        addBtn: false,
+        editBtn: false,
+        delBtn: false,
+        viewBtn: false,
+        selection: false,
+        columnBtn: true, // ✅ 禁止 Avue 自动生成操作列
+        menu: false, // ✅ 禁止 Avue 自动生成菜单列
+        searchMenuSpan: 6, // 搜索表单每项占据的栅格数
+        column: [
+          {
+            label: "请输入名称",
+            prop: "keyword",
+            search: true,
+            type: "input",
+            placeholder: "请输入名称",
+            hide: true,
+            searchLabelWidth: 100, // 设置标签固定宽度
+          }
+        ]
+      },
+
+      treeDeptId: "0",
+      treeData: [],
+      treeOption: {
+        nodeKey: "id",
+        menu: false,
+        addBtn: false,
+        props: { label: "title", children: "children" }
+      },
+
+      shareDialogVisible: false,
+      shareRowData: null,
+    };
+  },
+
+  mounted() {
+    this.loadFullTree();
+    this.loadDatasetNoPaging();
+  },
+
+  methods: {
+    // 加载左侧树
+    loadFullTree() {
+      getLeftTreeListAPI(0)
+        .then(res => {
+          const rows = res.data.rows || [];
+          const formatted = rows.map(item => ({
+            id: item.code,
+            title: item.name,
+            children: (item.kyDataClassifyList || []).map(c => ({
+              id: c.id.toString(),
+              title: c.dataTypeName
+            }))
+          }));
+          this.treeData = [
+            { id: "-1", title: "数据汇集管理", children: formatted }
+          ];
+        })
+        .catch(err => {
+          console.error("加载左树失败", err);
+          this.treeData = [];
+        });
+    },
+
+    nodeClick(node) {
+      this.treeDeptId = node.id;
+      this.loadDatasetNoPaging();
+    },
+
+    // 加载右侧表格数据
+    async loadDatasetNoPaging() {
+      this.loading = true;
+      try {
+        const res = await getListDataSetAPI(this.treeDeptId);
+        const row = res.data?.rows?.[0];
+        let arr = [];
+
+        if (!row || !row.dataJson) {
+          this.setColumnsEmpty();
+          this.rawData = [];
+          this.data = [];
+          return;
+        }
+
+        try {
+          arr = JSON.parse(row.dataJson);
+        } catch {
+          arr = JSON.parse(row.dataJson.replace(/\r\n/g, "").replace(/\n/g, ""));
+        }
+
+        if (!Array.isArray(arr) || arr.length < 1) {
+          this.setColumnsEmpty();
+          this.rawData = [];
+          this.data = [];
+          return;
+        }
+
+        const header = arr[0];
+        const content = arr.slice(1);
+
+        const columns = Object.keys(header)
+          .filter(k => k !== "id")
+          .map(k => ({
+            label: header[k],
+            prop: k,
+            minWidth: 140,
+            showOverflowTooltip: true,
+            overHidden: true
+          }));
+
+        // ✅ 最终列配置：搜索列 + 数据列 + 自定义操作列
+        this.option.column = [
+          this.option.column[0], // 搜索列
+          ...columns,
+          {
+            label: "操作",
+            prop: "operate",
+            width: 100,
+            fixed: "right",
+            type: "slot"
+          }
+        ];
+
+        this.rawData = content;
+        this.data = [...content];
+      } catch (err) {
+        console.error("加载数据失败", err);
+        this.setColumnsEmpty();
+        this.rawData = [];
+        this.data = [];
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    // 没有数据时列配置：搜索列 + 自定义操作列
+    setColumnsEmpty() {
+      this.option.column = [
+        this.option.column[0],
+        {
+          label: "操作",
+          prop: "operate",
+          width: 100,
+          fixed: "right",
+          type: "slot"
+        }
+      ];
+    },
+
+    searchChange(params, done) {
+      const keyword = (params.keyword || "").toString().trim().toLowerCase();
+      if (!keyword) {
+        this.data = [...this.rawData];
+        done && done();
+        return;
+      }
+      this.data = this.rawData.filter(row =>
+        Object.keys(row).some(k => k !== "id" && String(row[k] || "").toLowerCase().includes(keyword))
+      );
+      done && done();
+    },
+
+    searchReset() {
+      this.search.keyword = "";
+      this.data = [...this.rawData];
+    },
+
+    refreshChange() {
+      this.data = [...this.rawData];
+    },
+
+    shareRow(row) {
+      this.shareRowData = row;
+      this.shareDialogVisible = true; // 打开弹窗
+    }
+  }
+};
+</script>
+
+<style>
+.box {
+  height: 800px;
+}
+
+.el-scrollbar {
+  height: 100%;
+}
+
+.box .el-scrollbar__wrap {
+  overflow: scroll;
+}
+</style>
diff --git a/src/views/data-collect/share.vue b/src/views/data-collect/share.vue
new file mode 100644
index 00000000..7b11f95f
--- /dev/null
+++ b/src/views/data-collect/share.vue
@@ -0,0 +1,230 @@
+<template>
+  <!-- 小型弹窗 -->
+  <el-dialog
+    class="l-dialog"
+    :class="lDialog"
+    :title="title"
+    v-model="dialogVisible"
+    :show-close="true"
+    :close-on-click-modal="false"
+    @close="handleClose"
+    :append-to-body="true"
+    :width="computedWidth"
+  >
+    <div>
+      <!-- 文档式表格 -->
+      <div class="dialog-content">
+        <div class="doc-wrap">
+          <table class="doc-table">
+            <tbody>
+            <tr>
+              <th>名称</th>
+              <td>获取{{ rowData?.selectedNodeName }}接口</td>
+            </tr>
+            <tr>
+              <th>描述</th>
+              <td>依据ID获取{{ rowData?.selectedNodeName }}相关信息</td>
+            </tr>
+            <tr>
+              <th>URL</th>
+              <td>
+                smart-archiving-api/smartArchives/data/Collect/queryById?id={{
+                  rowData?.selectedNodeId
+                }}&jsonId={{ rowData?.jsonId }}
+              </td>
+            </tr>
+            <tr>
+              <th>HTTP请求方式</th>
+              <td>GET</td>
+            </tr>
+            <tr>
+              <th>请求参数</th>
+              <td>
+                <table class="inner-table">
+                  <thead>
+                  <tr>
+                    <th>参数名称</th>
+                    <th>必选</th>
+                    <th>类型及范围</th>
+                    <th>说明</th>
+                  </tr>
+                  </thead>
+                  <tbody>
+                  <tr>
+                    <td>id</td>
+                    <td>true</td>
+                    <td>字符串</td>
+                    <td>/</td>
+                  </tr>
+                  </tbody>
+                </table>
+              </td>
+            </tr>
+
+            <tr>
+              <th>返回结果</th>
+              <td>
+                <pre class="code">{{ resultJson }}</pre> <!-- v-text → 插值更安全 -->
+              </td>
+            </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button class="clear-btn" @click="handleClose" :disabled="disabled">
+          取消
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+// Vue 3 Options API 写法（兼容）
+export default {
+  name: 'Share',
+  // ⚠️ 声明 emits（推荐）
+  emits: ['closeDialog'],
+  // ⚠️ props 推荐对象形式
+  props: {
+    width: {
+      type: [Number, String],
+      default: 500
+    },
+    title: {
+      type: String,
+      default: '分享接口'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    rowData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      dialogVisible: true,
+      resultJson: ''
+    };
+  },
+  computed: {
+    // 动态计算 class（可选，也可直接用 width 控制）
+    lDialog() {
+      return this.width > 500 ? 'w700' : 'w500';
+    },
+    // 直接用于 el-dialog 的 width（更标准）
+    computedWidth() {
+      return typeof this.width === 'number' ? `${this.width}px` : this.width;
+    }
+  },
+  created() {
+    this.initFormData();
+  },
+  methods: {
+    initFormData() {
+      if (this.rowData) {
+        let payload = this.rowData.data ?? this.rowData;
+        try {
+          this.resultJson = JSON.stringify(
+            payload,
+            (key, value) => {
+              if (
+                key === 'selectedNodeName' ||
+                key === 'selectedNodeId' ||
+                key === 'jsonId'
+              ) {
+                return undefined;
+              }
+              return value;
+            },
+            2
+          );
+        } catch (e) {
+          this.resultJson = String(payload);
+        }
+      }
+    },
+    handleClose() {
+      this.dialogVisible = false;
+      this.$emit('closeDialog');
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* 使用 :deep() 替代 ::v-deep（Vue 3 推荐） */
+.w700 :deep(.el-dialog) {
+  width: 700px;
+}
+
+.w500 :deep(.el-dialog) {
+  width: 500px;
+}
+
+/* 其他样式保持不变 */
+.w500 :deep(.el-dialog__header),
+.w700 :deep(.el-dialog__header) {
+
+.el-dialog__title {
+  font-size: 16px;
+}
+
+}
+
+.doc-wrap {
+  margin-top: 8px;
+}
+
+.doc-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.doc-table th,
+.doc-table td {
+  border: 1px solid #dcdfe6;
+  padding: 8px 10px;
+  vertical-align: top;
+}
+
+.doc-table th {
+  width: 120px;
+  background: #f5f7fa;
+  color: #303133;
+  text-align: right;
+}
+
+.doc-table .inner-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.doc-table .inner-table th,
+.doc-table .inner-table td {
+  border: 1px solid #e4e7ed;
+  padding: 6px 8px;
+  text-align: left;
+}
+
+.code {
+  background: #f8f8f8;
+  border: 1px solid #ebeef5;
+  padding: 8px;
+  border-radius: 4px;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.dialog-content {
+  max-height: calc(80vh - 100px); /* 预留标题和 footer 空间 */
+  overflow-y: auto;
+}
+</style>