数据汇集管理

src/views/data-collect/data-set-manage/components/left-tree.vue

@@ -52,17 +52,23 @@ export default {
     methods: {
         // 节点点击事件
         onHandleNodeClick(data) {
-            console.log(data)
-
             this.$emit('handleNodeClick', data)
         },
+        convertToVueTree(data) {
+            return data.map(item => ({
+                id: item.code,
+                label: item.name,
+                children: item.kyDataClassifyList ? item.kyDataClassifyList.map(child => ({
+                    id: child.id,
+                    label: child.dataTypeName,
+                    children: []
+                })) : []
+            }));
+        },
         // 获取左侧树列表
         async getLeftTreeList() {
             const res = await getLeftTreeListAPI()
-            const transformedData = res.rows.map(item => ({
+            const transformedData = this.convertToVueTree(res.rows)
-                id: item.id,
-                label: item.dataTypeName
-            }));
             this.treeDataList[0].children = transformedData
             // 保存原始数据
             this.originalTreeData = JSON.parse(JSON.stringify(this.treeDataList))

src/views/data-collect/data-set-manage/components/right-table.vue

@@ -20,27 +20,46 @@
             </el-form>
 
             <!-- 表格 -->
-            <el-table :data="filteredTableData" border :height="tableHeight" style="width: 100%">
+            <el-table :data="filteredTableData" border :height="tableHeight" style="width: 100%" header-align="center">
                 <el-table-column v-if="tableData && tableData.length" type="index" label="序号" width="60" align="center" />
                 <el-table-column align="center" :key="column.prop" :prop="column.prop" :label="column.label"
                     v-for="column in columns" />
+                <el-table-column v-if="tableData && tableData.length" label="操作" width="100" align="center" fixed="right" class-name="action-col" label-class-name="action-col-header">
+                    <template slot-scope="{ row }">
+                        <el-button plain type="primary" size="mini" class="action-btn" icon="el-icon-share" @click="handleShare(row)">分享</el-button>
+                    </template>
+                </el-table-column>
             </el-table>
+            <Share v-if="isflag" :rowData="row" :title="title"
+            @closeDialog="closeDialog" @showColose="showColose" :dataForm="row" :disabled="loading" :width="600" />
         </el-card>
     </div>
 </template>
 
 <script>
 import { getListDataSetAPI } from '@/api/data-collect/data-set-manage'
+import Share from './share.vue'
 export default {
     name: 'RightTable',
+    components: {
+        Share
+    },
     props: {
         selectedNodeId: {
             type: [Number, String],
             default: 0,
         },
+        selectedNodeName: {
+            type: [String],
+            default: '',
+        },
     },
     data() {
         return {
+            isflag: false,
+            loading: false,
+            row: {},
+            title: '分享',
             queryParams: {
                 dataTypeName: undefined,
             },
@@ -59,6 +78,21 @@ export default {
         },
     },
     methods: {
+        // 分享
+        handleShare(row) {
+            this.isflag = true;
+            row.selectedNodeName = this.selectedNodeName;
+            row.selectedNodeId = this.selectedNodeId;
+            console.log(row);
+            
+            this.row = row;
+        },
+        closeDialog() {
+            this.isflag = false;
+        },
+        showColose() {
+            this.isflag = false;
+        },
         // 查询：按第一列字段做模糊匹配
         onHandleQuery() {
             if (!Array.isArray(this.columns) || this.columns.length < 1) return
@@ -164,6 +198,12 @@ export default {
             },
             immediate: true, // 表示立即执行
         },
+        selectedNodeName: {
+            handler(newVal2) {
+                this.selectedNodeName = newVal2
+            },
+            immediate: true, // 表示立即执行
+        },
     },
 
     mounted() {
@@ -201,4 +241,23 @@ export default {
 ::v-deep .el-table__fixed-body-wrapper::-webkit-scrollbar-thumb:hover {
   background: #a6a6a6;
 }
+
+/* 操作列样式统一，避免按钮受表格行样式影响抖动或换行 */
+/* 操作列单元格与其它列统一高度与内边距，避免不对齐 */
+::v-deep .action-col .cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px !important;
+  height: 100%;
+}
+
+::v-deep .action-col-header .cell {
+  font-weight: 600;
+}
+
+.action-btn {
+  padding: 3px 8px;
+  line-height: 1;
+}
 </style>

src/views/data-collect/data-set-manage/components/share.vue

@@ -0,0 +1,195 @@
+<template>
+    <!-- 小型弹窗 -->
+    <el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
+        :closeOnClickModal="false" @close="handleClose" :append-to-body="true">
+        <div>
+            <!-- 文档式表格 -->
+            <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>smartArchives/data/Collect/list?id={{ rowData.id }}</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" v-text="resultJson"></pre>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        <span slot="footer" class="dialog-footer">
+            <el-button class="clear-btn" @click="handleClose" :disabled="disabled">取消</el-button>
+        </span>
+    </el-dialog>
+</template>
+<script>
+export default {
+    name: "Share",
+    props: ["width", "dataForm", "title", "disabled", "rowData"],
+    data() {
+        return {
+            lDialog: this.width > 500 ? "w700" : "w500",
+            dialogVisible: true,
+            isDisabled: true,
+            resultJson: '',
+        };
+    },
+    created() {
+        this.initFormData();
+    },
+    methods: {
+        /** 初始化表单数据 */
+        initFormData() {
+            if (this.rowData) {
+                // 将 rowData 的 data 字段（对象或数组）美化成 JSON 文本展示
+                let payload = this.rowData && this.rowData.data
+                if (payload === undefined) {
+                    // 兼容没有 data 字段时，直接把 rowData 作为展示对象
+                    payload = this.rowData
+                }
+                try {
+                    this.resultJson = JSON.stringify(payload, null, 2)
+                } catch (e) {
+                    this.resultJson = String(payload)
+                }
+            }
+        },
+        /*关闭弹窗 */
+        handleClose() {
+            this.dialogVisible = false;
+            this.$emit("closeDialog");
+            setTimeout(() => {
+                this.dialogVisible = true;
+            });
+        },
+        /**确认弹窗 */
+        sureBtnClick() {
+            this.dialogVisible = false;
+            this.$emit("closeDialog");
+            setTimeout(() => {
+                this.dialogVisible = true;
+            });
+        },
+    },
+};
+</script>
+<style lang="scss">
+.w700 .el-dialog {
+    width: 700px;
+}
+
+.w500 .el-dialog {
+    width: 500px;
+}
+
+.w500 .el-dialog__header,
+.w700 .el-dialog__header {
+    // background: #eeeeee;
+
+    .el-dialog__title {
+        font-size: 16px;
+    }
+}
+
+.yxq .el-range-separator {
+    margin-right: 7px !important;
+}
+
+.el-date-editor--daterange.el-input__inner {
+    width: 260px;
+}
+
+.form-item {
+    width: 100%;
+}
+
+.select-style {
+    display: flex;
+    justify-content: space-between;
+}
+
+.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;
+}
+</style>

src/views/data-collect/data-set-manage/index.vue

@@ -6,7 +6,7 @@
                 <LeftTree @handleNodeClick="handleNodeClick" />
             </el-col>
             <el-col :span="16">
-                <RightTable :selectedNodeId="selectedNodeId" />
+                <RightTable :selectedNodeId="selectedNodeId" :selectedNodeName="selectedNodeName" />
             </el-col>
         </el-row>
     </div>
@@ -25,12 +25,14 @@ export default {
         return {
             // 选中的节点ID
             selectedNodeId: 0,
+            selectedNodeName: '',
         }
     },
     methods: {
         // 节点点击事件
         handleNodeClick(data) {
             this.selectedNodeId = data.id
+            this.selectedNodeName = data.label
         },
     },
 }