漏洞修复

src/api/data-collect/file-share-manage.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+// 获取左侧树列表接口
+export function getLeftTreeListAPI(data) {
+    return request({
+        url: '/smartArchives/file/share/listAll',
+        method: 'GET',
+        data: data,
+    })
+}
+
+// 获取数据列表接口
+export function getListDataSetAPI(query) {
+    return request({
+        url: '/smartArchives/file/share/list',
+        method: 'GET',
+        params: query,
+    })
+}

src/views/archivesManagement/archClass/archClassification/index.vue

@@ -11,6 +11,10 @@
             </template>
 
             <template slot="handle" slot-scope="{ data }">
+                <el-button plain size="mini" type="primary" icon="el-icon-view" v-hasPermi="['files:multi:list']"
+                           @click="handleDetail(data)">
+                  详情
+                </el-button>
                 <el-button plain size="mini" type="primary" icon="el-icon-edit" v-hasPermi="['files:multi:update']"
                     @click="handleUpdate(data)">
                     修改
@@ -19,11 +23,11 @@
                     @click="handleDelete(data)">
                     删除
                 </el-button>
-            </template>
+            </template>1
         </TableModel>
         <!-- 新增/编辑 -->
         <FileDimensionForm v-if="isflag" :isAdd="isAdd" :rowData="row" @handleQuery="handleQuery" :title="title"
-            @closeDialog="closeDialog" @showColose="showColose" :dataForm="row" :disabled="loading" :width="600" />
+            @closeDialog="closeDialog" @showColose="showColose" :dataForm="row" :disabled="isAdd === 'detail'" :width="600" />
     </div>
 </template>
 
@@ -67,6 +71,14 @@ export default {
             this.isAdd = 'add';
             this.isflag = true;
         },
+
+        /** 查看详情按钮操作 */
+        handleDetail(row) {
+          this.title = "详情";
+          this.isAdd = 'detail'; // 标记为详情模式
+          this.row = row;
+          this.isflag = true;
+        },
         closeDialog() {
             this.isflag = false;
         },

src/views/archivesManagement/archClass/archClassification/prop/fileDimensionForm.vue

@@ -3,34 +3,34 @@
   <el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
              :closeOnClickModal="false" @close="handleClose" :append-to-body="true">
     <div>
-            <el-form :model="form" :rules="rules" ref="ruleForm" label-width="110px">
+      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="110px" :disabled="disabled">
         <el-form-item label="档案相关类型" prop="fileRelated">
           <el-select class="form-item" v-model="form.fileRelated" filterable clearable
-                        placeholder="请选择档案相关类型">
+                     placeholder="请选择档案相关类型" :disabled="disabled">
             <el-option v-for="item in dict.type.file_related_type" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="分类名称" prop="classifyName">
           <el-input class="form-item" v-model="form.classifyName" clearable show-word-limit
-                        placeholder="请输入分类名称" maxlength="64"></el-input>
+                    placeholder="请输入分类名称" maxlength="64" :disabled="disabled"></el-input>
         </el-form-item>
         <el-form-item label="维度" prop="dimension">
           <el-select class="form-item" v-model="form.dimension" filterable clearable
-                        placeholder="请选择维度">
+                     placeholder="请选择维度" :disabled="disabled">
             <el-option v-for="item in dict.type.dimension" :key="item.value" :label="item.label"
                        :value="item.label"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="分类描述" prop="classifyDesc">
           <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" class="form-item"
-                        v-model="form.classifyDesc" clearable show-word-limit placeholder="请输入分类描述" maxlength="255"></el-input>
+                    v-model="form.classifyDesc" clearable show-word-limit placeholder="请输入分类描述" maxlength="255" :disabled="disabled"></el-input>
         </el-form-item>
       </el-form>
     </div>
-        <span slot="footer" class="dialog-footer">
+    <span slot="footer" class="dialog-footer" v-if="!disabled">
-            <el-button class="clear-btn" @click="handleClose" :disabled="disabled">取消</el-button>
+            <el-button class="clear-btn" @click="handleClose">取消</el-button>
-            <el-button type="primary" class="search-btn" :disabled="disabled"
+            <el-button type="primary" class="search-btn"
                        @click="submitForm('ruleForm')">确认</el-button>
         </span>
   </el-dialog>
@@ -74,15 +74,36 @@ export default {
       },
     };
   },
+  watch: {
+    // 监听 rowData 变化，确保数据正确回显
+    rowData: {
+      handler(newVal) {
+        if (newVal) {
+          this.initFormData();
+        }
+      },
+      immediate: true,
+      deep: true
+    },
+    // 监听 disabled 变化，确保详情模式正确禁用
+    disabled: {
+      handler(newVal) {
+        if (newVal) {
+          // 在详情模式下，确保表单验证规则不会干扰显示
+          this.rules = {};
+        }
+      },
+      immediate: true
+    }
+  },
   created() {
     this.initFormData();
   },
   methods: {
     /** 初始化表单数据 */
     initFormData() {
-            if (this.isAdd === 'edit' && this.rowData) {
+      if ((this.isAdd === 'edit' || this.isAdd === 'detail') && this.rowData) {
-                // console.log(this.rowData);
+        // 编辑模式或详情模式：填充表单数据
-                // 编辑模式：填充表单数据
         this.form = {
           id: this.rowData.id,
           classifyName: this.rowData.classifyName || null,
@@ -104,17 +125,11 @@ export default {
     handleClose() {
       this.dialogVisible = false;
       this.$emit("closeDialog");
-            /* setTimeout(() => {
-                this.dialogVisible = true;
-            }); */
     },
     /**确认弹窗 */
     sureBtnClick() {
       this.dialogVisible = false;
       this.$emit("closeDialog");
-            /* setTimeout(() => {
-                this.dialogVisible = true;
-            }); */
     },
     /**重置表单*/
     reset() {
@@ -134,6 +149,12 @@ export default {
     },
     /**验证 */
     submitForm(formName) {
+      // 在详情模式下不执行提交操作
+      if (this.disabled) {
+        this.handleClose();
+        return;
+      }
+
       this.$refs[formName].validate(valid => {
         if (valid) {
           // 显示遮罩层
@@ -184,7 +205,6 @@ export default {
       }else{
         return errorMessage;
       }
-            
     }
   }
 };
@@ -200,8 +220,6 @@ export default {
 
 .w500 ::v-deep .el-dialog__header,
 .w700 ::v-deep .el-dialog__header {
-    // background: #eeeeee;
-
   .el-dialog__title {
     font-size: 16px;
   }
@@ -223,4 +241,30 @@ export default {
   display: flex;
   justify-content: space-between;
 }
+
+/* 详情模式下的样式 */
+::v-deep .el-form-item.is-disabled .el-form-item__label {
+  color: #606266;
+}
+
+::v-deep .el-input.is-disabled .el-input__inner {
+  background-color: #f5f7fa;
+  border-color: #e4e7ed;
+  color: #606266;
+  cursor: not-allowed;
+}
+
+::v-deep .el-textarea.is-disabled .el-textarea__inner {
+  background-color: #f5f7fa;
+  border-color: #e4e7ed;
+  color: #606266;
+  cursor: not-allowed;
+}
+
+::v-deep .el-select.is-disabled .el-input__inner {
+  background-color: #f5f7fa;
+  border-color: #e4e7ed;
+  color: #606266;
+  cursor: not-allowed;
+}
 </style>

src/views/archivesManagement/archClass/archCustomClassification/index.vue

@@ -11,6 +11,10 @@
             </template>
 
             <template slot="handle" slot-scope="{ data }">
+                <el-button plain size="mini" type="primary" icon="el-icon-edit" v-hasPermi="['files:customize:list']"
+                           @click="handleDetail(data)">
+                  详情
+                </el-button>
                 <el-button plain size="mini" type="primary" icon="el-icon-edit" v-hasPermi="['files:customize:update']"
                     @click="handleUpdate(data)">
                     修改
@@ -23,7 +27,7 @@
         </TableModel>
         <!-- 新增/编辑 -->
         <CustomizeForm v-if="isflag" :isAdd="isAdd" :rowData="row" @handleQuery="handleQuery" :title="title"
-            @closeDialog="closeDialog" @showColose="showColose" :dataForm="row" :disabled="loading" :width="600" />
+            @closeDialog="closeDialog" @showColose="showColose" :dataForm="row" :disabled="isAdd === 'detail'" :width="600" />
     </div>
 </template>
 
@@ -73,6 +77,13 @@ export default {
         showColose() {
             this.isflag = false;
         },
+      /** 详情操作 */
+      handleDetail(row) {
+        this.title = "详情";
+        this.isAdd = 'detail'; // 标记为详情模式
+        this.row = row;
+        this.isflag = true;
+      },
         /** 修改操作 */
         handleUpdate(row) {
             this.title = "修改";

src/views/archivesManagement/archClass/archCustomClassification/prop/customizeForm.vue

@@ -3,20 +3,20 @@
   <el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
              :closeOnClickModal="false" @close="handleClose" :append-to-body="true">
     <div>
-            <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px">
+      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" :disabled="disabled">
         <el-form-item label="自定义分类名称" prop="customizeClassifyName">
           <el-input class="form-item" v-model="form.customizeClassifyName" clearable show-word-limit
-                        placeholder="请输入自定义分类名称" maxlength="64"></el-input>
+                    placeholder="请输入自定义分类名称" maxlength="64" :disabled="disabled"></el-input>
         </el-form-item>
         <el-form-item label="分类描述" prop="classifyDesc">
           <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" class="form-item"
-                        v-model="form.classifyDesc" clearable show-word-limit placeholder="请输入分类描述" maxlength="255"></el-input>
+                    v-model="form.classifyDesc" clearable show-word-limit placeholder="请输入分类描述" maxlength="255" :disabled="disabled"></el-input>
         </el-form-item>
       </el-form>
     </div>
-        <span slot="footer" class="dialog-footer">
+    <span slot="footer" class="dialog-footer" v-if="!disabled">
-            <el-button class="clear-btn" @click="handleClose" :disabled="disabled">取消</el-button>
+            <el-button class="clear-btn" @click="handleClose">取消</el-button>
-            <el-button type="primary" class="search-btn" :disabled="disabled"
+            <el-button type="primary" class="search-btn"
                        @click="submitForm('ruleForm')">确认</el-button>
         </span>
   </el-dialog>
@@ -52,14 +52,43 @@ export default {
       },
     };
   },
+  watch: {
+    // 监听 rowData 变化，确保数据正确回显
+    rowData: {
+      handler(newVal) {
+        if (newVal) {
+          this.initFormData();
+        }
+      },
+      immediate: true,
+      deep: true
+    },
+    // 监听 disabled 变化，确保详情模式正确禁用
+    disabled: {
+      handler(newVal) {
+        if (newVal) {
+          // 在详情模式下，清空验证规则避免干扰显示
+          this.rules = {};
+        } else {
+          // 非详情模式恢复验证规则
+          this.rules = {
+            customizeClassifyName: [
+              { required: true, message: '自定义分类名称不能为空', trigger: 'blur' }
+            ],
+          };
+        }
+      },
+      immediate: true
+    }
+  },
   created() {
     this.initFormData();
   },
   methods: {
     /** 初始化表单数据 */
     initFormData() {
-            if (this.isAdd === 'edit' && this.rowData) {
+      if ((this.isAdd === 'edit' || this.isAdd === 'detail') && this.rowData) {
-                // 编辑模式：填充表单数据
+        // 编辑模式或详情模式：填充表单数据
         this.form = {
           customizeClassifyName: this.rowData.customizeClassifyName || '',
           classifyDesc: this.rowData.classifyDesc || '',
@@ -77,17 +106,11 @@ export default {
     handleClose() {
       this.dialogVisible = false;
       this.$emit("closeDialog");
-            /* setTimeout(() => {
-                this.dialogVisible = true;
-            }); */
     },
     /**确认弹窗 */
     sureBtnClick() {
       this.dialogVisible = false;
       this.$emit("closeDialog");
-            /* setTimeout(() => {
-                this.dialogVisible = true;
-            }); */
     },
     /**重置表单*/
     reset() {
@@ -106,6 +129,12 @@ export default {
     },
     /**验证 */
     submitForm(formName) {
+      // 在详情模式下不执行提交操作，直接关闭弹窗
+      if (this.disabled) {
+        this.handleClose();
+        return;
+      }
+
       this.$refs[formName].validate(valid => {
         if (valid) {
           // 显示遮罩层
@@ -153,7 +182,6 @@ export default {
       }else{
         return errorMessage;
       }
-            
     }
   }
 };
@@ -169,8 +197,6 @@ export default {
 
 .w500 ::v-deep .el-dialog__header,
 .w700 ::v-deep .el-dialog__header {
-    // background: #eeeeee;
-
   .el-dialog__title {
     font-size: 16px;
   }
@@ -192,4 +218,23 @@ export default {
   display: flex;
   justify-content: space-between;
 }
+
+/* 详情模式下的样式 */
+::v-deep .el-form-item.is-disabled .el-form-item__label {
+  color: #606266;
+}
+
+::v-deep .el-input.is-disabled .el-input__inner {
+  background-color: #f5f7fa;
+  border-color: #e4e7ed;
+  color: #606266;
+  cursor: not-allowed;
+}
+
+::v-deep .el-textarea.is-disabled .el-textarea__inner {
+  background-color: #f5f7fa;
+  border-color: #e4e7ed;
+  color: #606266;
+  cursor: not-allowed;
+}
 </style>

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

@@ -0,0 +1,146 @@
+<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="输入关键字">
+                    </el-input>
+                </el-col>
+                <el-col :span="8">
+                    <el-button type="primary" size="small" @click="onHandleSearch">
+                        查询
+                    </el-button>
+                </el-col>
+            </el-row>
+
+            <div class="tree-container">
+                <el-tree ref="leftTreeRef" :data="displayedTreeData" default-expand-all class="left-tree-list"
+                    @node-click="onHandleNodeClick">
+                </el-tree>
+            </div>
+        </el-card>
+    </div>
+</template>
+
+<script>
+import { getLeftTreeListAPI } from '@/api/data-collect/file-share-manage'
+import { validSecurity } from '@/utils/validate'
+export default {
+    name: 'LeftTree',
+    data() {
+        return {
+            treeDataList: [
+                {
+                    label: '档案分享管理',
+                    id: 0,
+                    children: [],
+                },
+            ],
+            displayedTreeData: [],
+            filterText: '',
+            originalTreeData: [], // 保存原始数据
+        }
+    },
+    computed: {
+    },
+    methods: {
+        // 节点点击事件
+        onHandleNodeClick(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 = this.convertToVueTree(res.rows)
+            this.treeDataList[0].children = transformedData
+            // 保存原始数据
+            this.originalTreeData = JSON.parse(JSON.stringify(this.treeDataList))
+            // 初始化显示数据
+            this.displayedTreeData = JSON.parse(JSON.stringify(this.treeDataList))
+        },
+        // 点击查询触发过滤
+        onHandleSearch() {
+            if (!this.filterText) {
+                this.displayedTreeData = JSON.parse(JSON.stringify(this.treeDataList))
+                return
+            }
+
+            // 安全校验
+            if (!validSecurity(this.filterText)) {
+                this.$message.error('输入内容包含非法字符，请重新输入')
+                return
+            }
+
+            this.displayedTreeData = this.filterTreeData(this.treeDataList)
+        },
+        // 递归过滤树数据
+        filterTreeData(treeData) {
+            const result = []
+            for (const node of treeData) {
+                const newNode = { ...node }
+                if (node.children && node.children.length > 0) {
+                    const filteredChildren = this.filterTreeData(node.children)
+                    if (filteredChildren.length > 0) {
+                        newNode.children = filteredChildren
+                        result.push(newNode)
+                    } else if (node.label.indexOf(this.filterText) !== -1) {
+                        // 如果父节点匹配，保留所有子节点
+                        result.push(node)
+                    }
+                } else if (node.label.indexOf(this.filterText) !== -1) {
+                    result.push(newNode)
+                }
+            }
+            return result
+        },
+    },
+    created() {
+        this.getLeftTreeList()
+    },
+}
+</script>
+
+<style scoped>
+.tree-container {
+    margin-top: 10px;
+    max-height: calc(100vh - 230px);
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.left-tree-list {
+    width: 100%;
+}
+
+/* 自定义滚动条样式 */
+.tree-container::-webkit-scrollbar {
+    width: 6px;
+}
+
+.tree-container::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 3px;
+}
+
+.tree-container::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+}
+
+.tree-container::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+}
+</style>

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

@@ -0,0 +1,298 @@
+<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="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" 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)" v-hasPermi="['file:Collect:share']">分享</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/file-share-manage'
+import Share from './share.vue'
+import { validSecurity } from '@/utils/validate'
+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,
+            },
+            tableData: [],
+            columns: [],
+            tableHeight: 400,
+            filteredManual: null,
+        }
+    },
+    computed: {
+        // 按第二个字段进行本地过滤
+        filteredTableData() {
+            // 仅在点击“查询”后使用过滤结果；输入变化不自动过滤
+            if (Array.isArray(this.filteredManual)) return this.filteredManual
+            return this.tableData
+        },
+    },
+    methods: {
+        // 分享
+        handleShare(row) {
+            // console.log(row);
+
+            this.isflag = true;
+            row.selectedNodeName = this.selectedNodeName;
+            row.selectedNodeId = this.selectedNodeId;
+            row.jsonId = row.id;
+
+            this.row = row;
+        },
+        closeDialog() {
+            this.isflag = false;
+        },
+        showColose() {
+            this.isflag = false;
+        },
+
+        // 查询：按第一列字段做模糊匹配
+        onHandleQuery() {
+            if (!Array.isArray(this.columns) || this.columns.length < 1) return
+            const targetProp = this.columns[0] && this.columns[0].prop
+            if (!targetProp) return
+            const keyword = String(this.queryParams.dataTypeName || '').trim()
+            if (!keyword) {
+                // 空关键字还原
+                this.filteredManual = null
+                return
+            }
+
+            // 安全校验
+            if (!validSecurity(keyword)) {
+                this.$message.error('搜索内容包含非法字符，请重新输入')
+                return
+            }
+
+            // 执行一次性本地过滤
+            const source = Array.isArray(this.tableData) ? this.tableData : []
+            const kw = keyword.toLowerCase()
+            this.filteredManual = source.filter(row => {
+                const val = row && targetProp in row ? row[targetProp] : ''
+                return String(val ?? '').toLowerCase().includes(kw)
+            })
+            // 触发一次高度计算，避免数据量变化造成滚动体验不佳
+            this.computeTableHeight()
+        },
+
+        // 重置
+        onResetQuery() {
+            this.queryParams = { dataTypeName: undefined }
+            this.filteredManual = null
+            this.computeTableHeight()
+        },
+
+        // 获取数据列表
+      async getListDataSetClassFun(node) {
+        const params = {
+          dataClassifyId: node,
+        }
+        const res = await getListDataSetAPI(params)
+
+        // 安全解析与渲染
+        this.columns = []
+        this.tableData = []
+        if (!res || !Array.isArray(res.rows) || res.rows.length === 0) {
+          this.forceTableLayout()
+          return
+        }
+
+        const firstRow = res.rows[0]
+        if (!firstRow || !firstRow.dataJson) {
+          this.forceTableLayout()
+          return
+        }
+
+        let dataList = []
+        try {
+          dataList = JSON.parse(firstRow.dataJson)
+        } catch (e) {
+          console.warn('数据集 dataJson 解析失败:', e)
+          this.forceTableLayout()
+          return
+        }
+
+        if (!Array.isArray(dataList) || dataList.length === 0) {
+          this.forceTableLayout()
+          return
+        }
+
+        const [header, ...rows] = dataList
+        if (header && typeof header === 'object') {
+          this.columns = Object.entries(header)
+            .filter(([prop]) => String(prop).toLowerCase() !== 'id')
+            .map(([prop, label], index) => ({
+              label: String(label),
+              prop: String(prop),
+              width: index === 0 ? '120' : undefined,
+              align: index === 0 ? 'left' : 'center',
+            }))
+        }
+
+        const propOrder = this.columns.map(c => c.prop)
+        this.tableData = rows.map(row => {
+          if (Array.isArray(row)) {
+            const obj = {}
+            for (let i = 0; i < propOrder.length; i++) {
+              obj[propOrder[i]] = row[i]
+            }
+            return obj
+          }
+          return row || {}
+        })
+
+        this.forceTableLayout()
+      },
+
+// 强制表格重新布局
+      forceTableLayout() {
+        this.$nextTick(() => {
+          setTimeout(() => {
+            // 获取表格实例并调用 doLayout
+            const table = this.$el.querySelector('.el-table')
+            if (table && table.__vue__) {
+              table.__vue__.doLayout()
+            }
+            this.computeTableHeight()
+          }, 100)
+        })
+      },
+        // 计算表格高度（使用固定 height，滚动更顺滑）
+        computeTableHeight() {
+            this.$nextTick(() => {
+                const topOffset = this.$el ? this.$el.getBoundingClientRect().top : 0
+                const formHeight = this.$refs.queryForm && this.$refs.queryForm.$el
+                    ? this.$refs.queryForm.$el.offsetHeight
+                    : 0
+                // 额外预留：卡片内边距、表格头部等
+                const extra = 100
+                const available = window.innerHeight - topOffset - formHeight - extra
+                this.tableHeight = Math.max(260, available)
+            })
+        },
+    },
+
+    // 监听选中的节点ID
+    watch: {
+        selectedNodeId: {
+            handler(newVal) {
+                this.columns = []
+                this.tableData = []
+                this.getListDataSetClassFun(newVal)
+            },
+            immediate: true, // 表示立即执行
+        },
+        selectedNodeName: {
+            handler(newVal2) {
+                this.selectedNodeName = newVal2
+            },
+            immediate: true, // 表示立即执行
+        },
+    },
+
+    mounted() {
+        const onResize = () => this.computeTableHeight()
+        this.computeTableHeight()
+        window.addEventListener('resize', onResize)
+        this.$once('hook:beforeDestroy', () => {
+            window.removeEventListener('resize', onResize)
+        })
+    },
+}
+</script>
+
+<style scoped>
+/* 加粗表格滚动条 */
+::v-deep .el-table__body-wrapper::-webkit-scrollbar,
+::v-deep .el-table__fixed-body-wrapper::-webkit-scrollbar {
+  width: 10px;  /* 垂直滚动条宽度 */
+  height: 10px; /* 水平滚动条高度 */
+}
+
+::v-deep .el-table__body-wrapper::-webkit-scrollbar-track,
+::v-deep .el-table__fixed-body-wrapper::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 6px;
+}
+
+::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb,
+::v-deep .el-table__fixed-body-wrapper::-webkit-scrollbar-thumb {
+  background: #bfbfbf;
+  border-radius: 6px;
+}
+
+::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb:hover,
+::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/file-share-manage/components/share.vue

@@ -0,0 +1,201 @@
+<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>smart-archiving-api/smartArchives/file/share/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" 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, function(key, value) {
+                    // 过滤掉指定的字段
+                    if (key === 'selectedNodeName' || key === 'selectedNodeId' || key === 'jsonId') {
+                      return undefined; // 返回 undefined 会忽略该属性
+                    }
+                    return value;
+                  }, 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 ::v-deep .el-dialog {
+    width: 700px;
+}
+
+.w500 ::v-deep .el-dialog {
+    width: 500px;
+}
+
+.w500 ::v-deep .el-dialog__header,
+.w700 ::v-deep .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/file-share-manage/index.vue

@@ -0,0 +1,41 @@
+<template>
+    <!-- 数据汇集管理 -->
+    <div class="app-container">
+        <el-row :gutter="24">
+            <el-col :span="6">
+                <LeftTree @handleNodeClick="handleNodeClick" />
+            </el-col>
+            <el-col :span="18">
+                <RightTable :selectedNodeId="selectedNodeId" :selectedNodeName="selectedNodeName" />
+            </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: 0,
+            selectedNodeName: '',
+        }
+    },
+    methods: {
+        // 节点点击事件
+        handleNodeClick(data) {
+            this.selectedNodeId = data.id
+            this.selectedNodeName = data.label
+        },
+    },
+}
+</script>
+
+<style></style>

src/views/filesTransfer/encryption/index.vue

@@ -11,6 +11,10 @@
             </template>
 
             <template slot="handle" slot-scope="{ data }">
+              <el-button plain size="mini" type="primary" icon="el-icon-edit" v-hasPermi="['encry:type:list']"
+                         @click="handleDetail(data)">
+                详情
+              </el-button>
                 <el-button plain size="mini" type="primary" icon="el-icon-edit" v-hasPermi="['encry:type:edit']"
                     @click="handleUpdate(data)">
                     修改
@@ -23,7 +27,7 @@
         </TableModel>
         <!-- 新增/编辑 -->
         <EncryptionForm v-if="isflag" :isAdd="isAdd" :rowData="row" @handleQuery="handleQuery" :title="title"
-            @closeDialog="closeDialog" @showColose="showColose" :dataForm="row" :disabled="loading" :width="600" />
+            @closeDialog="closeDialog" @showColose="showColose" :dataForm="row" :disabled="isAdd === 'detail'" :width="600" />
     </div>
 </template>
 
@@ -61,6 +65,13 @@ export default {
     },
 
     methods: {
+      /** 详情操作 */
+      handleDetail(row) {
+        this.title = "详情";
+        this.isAdd = 'detail'; // 标记为详情模式
+        this.row = row;
+        this.isflag = true;
+      },
         /** 新增按钮操作 */
         handleAdd() {
             this.title = "新增";

src/views/filesTransfer/encryption/prop/encryptionForm.vue

@@ -3,27 +3,27 @@
   <el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
              :closeOnClickModal="false" @close="handleClose" :append-to-body="true">
     <div>
-            <el-form :model="form" :rules="rules" ref="ruleForm" label-width="110px">
+      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="110px" :disabled="disabled">
         <el-form-item label="档案加密名称" prop="encryptName">
           <el-input class="form-item" v-model="form.encryptName" clearable show-word-limit
-                        placeholder="请输入档案加密名称" maxlength="20"></el-input>
+                    placeholder="请输入档案加密名称" maxlength="20" :disabled="disabled"></el-input>
         </el-form-item>
         <el-form-item label="档案加密类型" prop="encryptType" style="width: 100%;">
           <el-select class="form-item" v-model="form.encryptType" filterable clearable
-                        placeholder="请选择档案加密类型">
+                     placeholder="请选择档案加密类型" :disabled="disabled">
             <el-option v-for="item in dict.type.file_encryption_type" :key="item.value" :label="item.label"
                        :value="item.label"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="档案加密参数" prop="encryptParams">
           <el-input class="form-item" v-model="form.encryptParams" clearable show-word-limit
-                        placeholder="请输入档案加密参数" maxlength="32"></el-input>
+                    placeholder="请输入档案加密参数" maxlength="32" :disabled="disabled"></el-input>
         </el-form-item>
       </el-form>
     </div>
-        <span slot="footer" class="dialog-footer">
+    <span slot="footer" class="dialog-footer" v-if="!disabled">
-            <el-button class="clear-btn" @click="handleClose" :disabled="disabled">取消</el-button>
+            <el-button class="clear-btn" @click="handleClose">取消</el-button>
-            <el-button type="primary" class="search-btn" :disabled="disabled"
+            <el-button type="primary" class="search-btn"
                        @click="submitForm('ruleForm')">确认</el-button>
         </span>
   </el-dialog>
@@ -34,6 +34,7 @@ import {
   addEncryTypeAPI,
   updateEncryTypeAPI,
 } from '@/api/filesTransfer/encryption'
+
 export default {
   name: "EncryptionForm",
   dicts: ['file_encryption_type'],
@@ -51,13 +52,13 @@ export default {
       loading: null,
       rules: {
         encryptName: [
-                    { required: true, message: '档案加密名称不能为空', trigger: 'blur' }
+          {required: true, message: '档案加密名称不能为空', trigger: 'blur'}
         ],
         encryptType: [
-                    { required: true, message: '档案加密类型不能为空', trigger: 'change' }
+          {required: true, message: '档案加密类型不能为空', trigger: 'change'}
         ],
         encryptParams: [
-                    { required: true, message: '档案加密参数不能为空', trigger: 'blur' }
+          {required: true, message: '档案加密参数不能为空', trigger: 'blur'}
         ],
       },
       errorObj: {
@@ -66,14 +67,49 @@ export default {
       },
     };
   },
+  watch: {
+    // 监听 rowData 变化，确保数据正确回显
+    rowData: {
+      handler(newVal) {
+        if (newVal) {
+          this.initFormData();
+        }
+      },
+      immediate: true,
+      deep: true
+    },
+    // 监听 disabled 变化，确保详情模式正确禁用
+    disabled: {
+      handler(newVal) {
+        if (newVal) {
+          // 在详情模式下，清空验证规则避免干扰显示
+          this.rules = {};
+        } else {
+          // 非详情模式恢复验证规则
+          this.rules = {
+            encryptName: [
+              {required: true, message: '档案加密名称不能为空', trigger: 'blur'}
+            ],
+            encryptType: [
+              {required: true, message: '档案加密类型不能为空', trigger: 'change'}
+            ],
+            encryptParams: [
+              {required: true, message: '档案加密参数不能为空', trigger: 'blur'}
+            ],
+          };
+        }
+      },
+      immediate: true
+    }
+  },
   created() {
     this.initFormData();
   },
   methods: {
     /** 初始化表单数据 */
     initFormData() {
-            if (this.isAdd === 'edit' && this.rowData) {
+      if ((this.isAdd === 'edit' || this.isAdd === 'detail') && this.rowData) {
-                // 编辑模式：填充表单数据
+        // 编辑模式或详情模式：填充表单数据
         this.form = {
           id: this.rowData.id,
           encryptName: this.rowData.encryptName || '',
@@ -93,17 +129,11 @@ export default {
     handleClose() {
       this.dialogVisible = false;
       this.$emit("closeDialog");
-            /* setTimeout(() => {
-                this.dialogVisible = true;
-            }); */
     },
     /**确认弹窗 */
     sureBtnClick() {
       this.dialogVisible = false;
       this.$emit("closeDialog");
-            /* setTimeout(() => {
-                this.dialogVisible = true;
-            }); */
     },
     /**重置表单*/
     reset() {
@@ -122,6 +152,12 @@ export default {
     },
     /**验证 */
     submitForm(formName) {
+      // 在详情模式下不执行提交操作，直接关闭弹窗
+      if (this.disabled) {
+        this.handleClose();
+        return;
+      }
+
       this.$refs[formName].validate(valid => {
         if (valid) {
           // 显示遮罩层
@@ -164,12 +200,11 @@ export default {
       const errorMessage = error.message;
       const errorArr = errorMessage.split('：');
       const errorObjData = errorArr.length > 1 ? JSON.parse(errorArr[1]) : '';
-            if(errorObjData){
+      if (errorObjData) {
         return this.errorObj[errorObjData.paramName] + errorArr[0] + ':' + errorObjData.originalValue;
-            }else{
+      } else {
         return errorMessage;
       }
-            
     }
   }
 };
@@ -185,8 +220,6 @@ export default {
 
 .w500 ::v-deep .el-dialog__header,
 .w700 ::v-deep .el-dialog__header {
-    // background: #eeeeee;
-
   .el-dialog__title {
     font-size: 16px;
   }
@@ -208,4 +241,23 @@ export default {
   display: flex;
   justify-content: space-between;
 }
+
+/* 详情模式下的样式 */
+::v-deep .el-form-item.is-disabled .el-form-item__label {
+  color: #606266;
+}
+
+::v-deep .el-input.is-disabled .el-input__inner {
+  background-color: #f5f7fa;
+  border-color: #e4e7ed;
+  color: #606266;
+  cursor: not-allowed;
+}
+
+::v-deep .el-select.is-disabled .el-input__inner {
+  background-color: #f5f7fa;
+  border-color: #e4e7ed;
+  color: #606266;
+  cursor: not-allowed;
+}
 </style>