From 8d2a569bcbba1908ffd8774be4802c62d5a54c88 Mon Sep 17 00:00:00 2001
From: "liang.chao" <1360241448@qq.com>
Date: Thu, 23 Oct 2025 19:20:08 +0800
Subject: [PATCH] =?UTF-8?q?=E6=BC=8F=E6=B4=9E=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/data-collect/file-share-manage.js     |  19 +
 .../archClass/archClassification/index.vue    |  16 +-
 .../prop/fileDimensionForm.vue                | 428 ++++++++++--------
 .../archCustomClassification/index.vue        |  13 +-
 .../prop/customizeForm.vue                    | 367 ++++++++-------
 .../components/left-tree.vue                  | 146 ++++++
 .../components/right-table.vue                | 298 ++++++++++++
 .../file-share-manage/components/share.vue    | 201 ++++++++
 .../data-collect/file-share-manage/index.vue  |  41 ++
 src/views/filesTransfer/encryption/index.vue  |  13 +-
 .../encryption/prop/encryptionForm.vue        | 406 +++++++++--------
 11 files changed, 1414 insertions(+), 534 deletions(-)
 create mode 100644 src/api/data-collect/file-share-manage.js
 create mode 100644 src/views/data-collect/file-share-manage/components/left-tree.vue
 create mode 100644 src/views/data-collect/file-share-manage/components/right-table.vue
 create mode 100644 src/views/data-collect/file-share-manage/components/share.vue
 create mode 100644 src/views/data-collect/file-share-manage/index.vue

diff --git a/src/api/data-collect/file-share-manage.js b/src/api/data-collect/file-share-manage.js
new file mode 100644
index 0000000..0567d67
--- /dev/null
+++ b/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,
+    })
+}
diff --git a/src/views/archivesManagement/archClass/archClassification/index.vue b/src/views/archivesManagement/archClass/archClassification/index.vue
index 0672087..6229bbe 100644
--- a/src/views/archivesManagement/archClass/archClassification/index.vue
+++ b/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;
         },
diff --git a/src/views/archivesManagement/archClass/archClassification/prop/fileDimensionForm.vue b/src/views/archivesManagement/archClass/archClassification/prop/fileDimensionForm.vue
index 9dc8f10..9b05411 100644
--- a/src/views/archivesManagement/archClass/archClassification/prop/fileDimensionForm.vue
+++ b/src/views/archivesManagement/archClass/archClassification/prop/fileDimensionForm.vue
@@ -1,226 +1,270 @@
 <template>
-    <!-- 小型弹窗，用于完成，删除，保存等操作 -->
-    <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-item label="档案相关类型" prop="fileRelated">
-                    <el-select class="form-item" v-model="form.fileRelated" filterable clearable
-                        placeholder="请选择档案相关类型">
-                        <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>
-                </el-form-item>
-                <el-form-item label="维度" prop="dimension">
-                    <el-select class="form-item" v-model="form.dimension" filterable clearable
-                        placeholder="请选择维度">
-                        <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>
-                </el-form-item>
-            </el-form>
-        </div>
-        <span slot="footer" class="dialog-footer">
-            <el-button class="clear-btn" @click="handleClose" :disabled="disabled">取消</el-button>
-            <el-button type="primary" class="search-btn" :disabled="disabled"
-                @click="submitForm('ruleForm')">确认</el-button>
+  <!-- 小型弹窗，用于完成，删除，保存等操作 -->
+  <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" :disabled="disabled">
+        <el-form-item label="档案相关类型" prop="fileRelated">
+          <el-select class="form-item" v-model="form.fileRelated" filterable clearable
+                     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" :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="请选择维度" :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" :disabled="disabled"></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <span slot="footer" class="dialog-footer" v-if="!disabled">
+            <el-button class="clear-btn" @click="handleClose">取消</el-button>
+            <el-button type="primary" class="search-btn"
+                       @click="submitForm('ruleForm')">确认</el-button>
         </span>
-    </el-dialog>
+  </el-dialog>
 </template>
 <script>
 import _ from 'lodash'
 import {
-    addKyFilesMultiClassifyAPI,
-    updateKyFilesMultiClassifyAPI,
+  addKyFilesMultiClassifyAPI,
+  updateKyFilesMultiClassifyAPI,
 } from '@/api/archivesManagement/archClassification'
 export default {
-    name: "FileDimensionForm",
-    props: ["width", "dataForm", "title", "disabled", "isAdd", "rowData"],
-    dicts: ['dimension','file_related_type'],
-    data() {
-        return {
-            lDialog: this.width > 500 ? "w700" : "w500",
-            dialogVisible: true,
-            isDisabled: true,
-            form: {
-                fileRelated:null,
-                classifyName: null,
-                dimension: null,
-                classifyDesc: null,
-            },
-            loading: null,
-            rules: {
-                fileRelated: [
-                    { required: true, message: '请选择档案相关类型', trigger: 'change' }
-                ],
-                classifyName: [
-                    { required: true, message: '分类名称不能为空', trigger: 'blur' }
-                ],
-                dimension: [
-                    { required: true, message: '请选择维度', trigger: 'change' }
-                ],
-            },
-            errorObj: {
-                classifyName: '分类名称',
-                classifyDesc: '分类描述',
-            },
-        };
-    },
-    created() {
-        this.initFormData();
-    },
-    methods: {
-        /** 初始化表单数据 */
-        initFormData() {
-            if (this.isAdd === 'edit' && this.rowData) {
-                // console.log(this.rowData);
-                // 编辑模式：填充表单数据
-                this.form = {
-                    id: this.rowData.id,
-                    classifyName: this.rowData.classifyName || null,
-                    dimension: this.rowData.dimension || null,
-                    classifyDesc: this.rowData.classifyDesc || null,
-                    fileRelated: this.rowData.fileRelatedId || null,
-                };
-            } else {
-                // 新增模式：重置表单
-                this.form = {
-                    classifyName: null,
-                    dimension: null,
-                    classifyDesc: null,
-                    fileRelated:null
-                };
-            }
-        },
-        /*关闭弹窗 */
-        handleClose() {
-            this.dialogVisible = false;
-            this.$emit("closeDialog");
-            /* setTimeout(() => {
-                this.dialogVisible = true;
-            }); */
-        },
-        /**确认弹窗 */
-        sureBtnClick() {
-            this.dialogVisible = false;
-            this.$emit("closeDialog");
-            /* setTimeout(() => {
-                this.dialogVisible = true;
-            }); */
-        },
-        /**重置表单*/
-        reset() {
-            this.form = {
-                classifyName: null,
-                dimension: null,
-                classifyDesc: null,
-                fileRelated: null,
-            };
-            this.resetForm("ruleForm");
-        },
-        handleReuslt(res) {
-            this.$modal.msgSuccess(res.msg);
-            this.reset();
-            this.$emit('handleQuery');
-            this.handleClose();
-        },
-        /**验证 */
-        submitForm(formName) {
-            this.$refs[formName].validate(valid => {
-                if (valid) {
-                    // 显示遮罩层
-                    this.loading = this.$loading({
-                        lock: true,
-                        text: "数据提交中，请稍候...",
-                        background: 'rgba(0,0,0,0.5)',
-                        target: this.$el.querySelector('.el-dialog') || document.body
-                    })
-                    let params = _.cloneDeep(this.form);
-                    
-                    if (this.isAdd === 'add') {
-                        addKyFilesMultiClassifyAPI(params).then(res => {
-                            this.loading.close();
-                            if (res.code === 200) {
-                                this.handleReuslt(res);
-                            } else {
-                                this.$modal.msgError(res.msg);
-                            }
-                        }).catch(error => {
-                            this.loading.close();
-                            this.$modal.msgError(this.errorMsg(error));
-                        });
-                    } else {
-                        updateKyFilesMultiClassifyAPI(params).then(res => {
-                            this.loading.close();
-                            if (res.code === 200) {
-                                this.handleReuslt(res);
-                            } else {
-                                this.$modal.msgError(res.msg);
-                            }
-                        })
-                        .catch(error => {
-                            this.loading.close();
-                            this.$modal.msgError(this.errorMsg(error));
-                        });
-                    }
-                }
-            });
-        },
-
-        errorMsg(error) {
-            const errorMessage = error.message;
-            const errorArr = errorMessage.split('：');
-            const errorObjData = errorArr.length > 1 ? JSON.parse(errorArr[1]) : '';
-            if(errorObjData){
-                return this.errorObj[errorObjData.paramName] + errorArr[0] + ':' + errorObjData.originalValue;
-            }else{
-                return errorMessage;
-            }
-            
+  name: "FileDimensionForm",
+  props: ["width", "dataForm", "title", "disabled", "isAdd", "rowData"],
+  dicts: ['dimension','file_related_type'],
+  data() {
+    return {
+      lDialog: this.width > 500 ? "w700" : "w500",
+      dialogVisible: true,
+      isDisabled: true,
+      form: {
+        fileRelated:null,
+        classifyName: null,
+        dimension: null,
+        classifyDesc: null,
+      },
+      loading: null,
+      rules: {
+        fileRelated: [
+          { required: true, message: '请选择档案相关类型', trigger: 'change' }
+        ],
+        classifyName: [
+          { required: true, message: '分类名称不能为空', trigger: 'blur' }
+        ],
+        dimension: [
+          { required: true, message: '请选择维度', trigger: 'change' }
+        ],
+      },
+      errorObj: {
+        classifyName: '分类名称',
+        classifyDesc: '分类描述',
+      },
+    };
+  },
+  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.isAdd === 'detail') && this.rowData) {
+        // 编辑模式或详情模式：填充表单数据
+        this.form = {
+          id: this.rowData.id,
+          classifyName: this.rowData.classifyName || null,
+          dimension: this.rowData.dimension || null,
+          classifyDesc: this.rowData.classifyDesc || null,
+          fileRelated: this.rowData.fileRelatedId || null,
+        };
+      } else {
+        // 新增模式：重置表单
+        this.form = {
+          classifyName: null,
+          dimension: null,
+          classifyDesc: null,
+          fileRelated:null
+        };
+      }
+    },
+    /*关闭弹窗 */
+    handleClose() {
+      this.dialogVisible = false;
+      this.$emit("closeDialog");
+    },
+    /**确认弹窗 */
+    sureBtnClick() {
+      this.dialogVisible = false;
+      this.$emit("closeDialog");
+    },
+    /**重置表单*/
+    reset() {
+      this.form = {
+        classifyName: null,
+        dimension: null,
+        classifyDesc: null,
+        fileRelated: null,
+      };
+      this.resetForm("ruleForm");
+    },
+    handleReuslt(res) {
+      this.$modal.msgSuccess(res.msg);
+      this.reset();
+      this.$emit('handleQuery');
+      this.handleClose();
+    },
+    /**验证 */
+    submitForm(formName) {
+      // 在详情模式下不执行提交操作
+      if (this.disabled) {
+        this.handleClose();
+        return;
+      }
+
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          // 显示遮罩层
+          this.loading = this.$loading({
+            lock: true,
+            text: "数据提交中，请稍候...",
+            background: 'rgba(0,0,0,0.5)',
+            target: this.$el.querySelector('.el-dialog') || document.body
+          })
+          let params = _.cloneDeep(this.form);
+
+          if (this.isAdd === 'add') {
+            addKyFilesMultiClassifyAPI(params).then(res => {
+              this.loading.close();
+              if (res.code === 200) {
+                this.handleReuslt(res);
+              } else {
+                this.$modal.msgError(res.msg);
+              }
+            }).catch(error => {
+              this.loading.close();
+              this.$modal.msgError(this.errorMsg(error));
+            });
+          } else {
+            updateKyFilesMultiClassifyAPI(params).then(res => {
+              this.loading.close();
+              if (res.code === 200) {
+                this.handleReuslt(res);
+              } else {
+                this.$modal.msgError(res.msg);
+              }
+            })
+              .catch(error => {
+                this.loading.close();
+                this.$modal.msgError(this.errorMsg(error));
+              });
+          }
+        }
+      });
+    },
+
+    errorMsg(error) {
+      const errorMessage = error.message;
+      const errorArr = errorMessage.split('：');
+      const errorObjData = errorArr.length > 1 ? JSON.parse(errorArr[1]) : '';
+      if(errorObjData){
+        return this.errorObj[errorObjData.paramName] + errorArr[0] + ':' + errorObjData.originalValue;
+      }else{
+        return errorMessage;
+      }
+    }
+  }
 };
 </script>
 <style lang="scss" scoped>
 .w700 ::v-deep .el-dialog {
-    width: 700px;
+  width: 700px;
 }
 
 .w500 ::v-deep .el-dialog {
-    width: 500px;
+  width: 500px;
 }
 
 .w500 ::v-deep .el-dialog__header,
 .w700 ::v-deep .el-dialog__header {
-    // background: #eeeeee;
-
-    .el-dialog__title {
-        font-size: 16px;
-    }
+  .el-dialog__title {
+    font-size: 16px;
+  }
 }
 
 .yxq .el-range-separator {
-    margin-right: 7px !important;
+  margin-right: 7px !important;
 }
 
 .el-date-editor--daterange.el-input__inner {
-    width: 260px;
+  width: 260px;
 }
 
 .form-item {
-    width: 100%;
+  width: 100%;
 }
 
 .select-style {
-    display: flex;
-    justify-content: space-between;
+  display: flex;
+  justify-content: space-between;
 }
-</style>
\ No newline at end of file
+
+/* 详情模式下的样式 */
+::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>
diff --git a/src/views/archivesManagement/archClass/archCustomClassification/index.vue b/src/views/archivesManagement/archClass/archCustomClassification/index.vue
index 9980375..b0eaac4 100644
--- a/src/views/archivesManagement/archClass/archCustomClassification/index.vue
+++ b/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 = "修改";
diff --git a/src/views/archivesManagement/archClass/archCustomClassification/prop/customizeForm.vue b/src/views/archivesManagement/archClass/archCustomClassification/prop/customizeForm.vue
index 30364a2..07817f1 100644
--- a/src/views/archivesManagement/archClass/archCustomClassification/prop/customizeForm.vue
+++ b/src/views/archivesManagement/archClass/archCustomClassification/prop/customizeForm.vue
@@ -1,195 +1,240 @@
 <template>
-    <!-- 小型弹窗，用于完成，删除，保存等操作 -->
-    <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-item label="自定义分类名称" prop="customizeClassifyName">
-                    <el-input class="form-item" v-model="form.customizeClassifyName" clearable show-word-limit
-                        placeholder="请输入自定义分类名称" maxlength="64"></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>
-                </el-form-item>
-            </el-form>
-        </div>
-        <span slot="footer" class="dialog-footer">
-            <el-button class="clear-btn" @click="handleClose" :disabled="disabled">取消</el-button>
-            <el-button type="primary" class="search-btn" :disabled="disabled"
-                @click="submitForm('ruleForm')">确认</el-button>
+  <!-- 小型弹窗，用于完成，删除，保存等操作 -->
+  <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" :disabled="disabled">
+        <el-form-item label="自定义分类名称" prop="customizeClassifyName">
+          <el-input class="form-item" v-model="form.customizeClassifyName" clearable show-word-limit
+                    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" :disabled="disabled"></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <span slot="footer" class="dialog-footer" v-if="!disabled">
+            <el-button class="clear-btn" @click="handleClose">取消</el-button>
+            <el-button type="primary" class="search-btn"
+                       @click="submitForm('ruleForm')">确认</el-button>
         </span>
-    </el-dialog>
+  </el-dialog>
 </template>
 <script>
 import _ from 'lodash'
 import {
-    addKyFilesCustomizeClassifyAPI,
-    updateKyFilesCustomizeClassifyAPI,
+  addKyFilesCustomizeClassifyAPI,
+  updateKyFilesCustomizeClassifyAPI,
 } from '@/api/archivesManagement/archCustomClassification'
 export default {
-    name: "CustomizeForm",
-    props: ["width", "dataForm", "title", "disabled", "isAdd", "rowData"],
-    dicts: ['dimension'],
-    data() {
-        return {
-            lDialog: this.width > 500 ? "w700" : "w500",
-            dialogVisible: true,
-            isDisabled: true,
-            form: {
-                customizeClassifyName: null,
-                classifyDesc: null,
-            },
-            loading: null,
-            rules: {
-                customizeClassifyName: [
-                    { required: true, message: '自定义分类名称不能为空', trigger: 'blur' }
-                ],
-            },
-            errorObj: {
-                customizeClassifyName: '自定义分类名称',
-                classifyDesc: '分类描述',
-            },
-        };
-    },
-    created() {
-        this.initFormData();
-    },
-    methods: {
-        /** 初始化表单数据 */
-        initFormData() {
-            if (this.isAdd === 'edit' && this.rowData) {
-                // 编辑模式：填充表单数据
-                this.form = {
-                    customizeClassifyName: this.rowData.customizeClassifyName || '',
-                    classifyDesc: this.rowData.classifyDesc || '',
-                    id: this.rowData.id || null,
-                };
-            } else {
-                // 新增模式：重置表单
-                this.form = {
-                    customizeClassifyName: null,
-                    classifyDesc: null,
-                };
-            }
-        },
-        /*关闭弹窗 */
-        handleClose() {
-            this.dialogVisible = false;
-            this.$emit("closeDialog");
-            /* setTimeout(() => {
-                this.dialogVisible = true;
-            }); */
-        },
-        /**确认弹窗 */
-        sureBtnClick() {
-            this.dialogVisible = false;
-            this.$emit("closeDialog");
-            /* setTimeout(() => {
-                this.dialogVisible = true;
-            }); */
-        },
-        /**重置表单*/
-        reset() {
-            this.form = {
-                customizeClassifyName: null,
-                classifyDesc: null,
-                id:null
-            };
-            this.resetForm("ruleForm");
-        },
-        handleReuslt(res) {
-            this.$modal.msgSuccess(res.msg);
-            this.reset();
-            this.$emit('handleQuery');
-            this.handleClose();
-        },
-        /**验证 */
-        submitForm(formName) {
-            this.$refs[formName].validate(valid => {
-                if (valid) {
-                    // 显示遮罩层
-                    this.loading = this.$loading({
-                        lock: true,
-                        text: "数据提交中，请稍候...",
-                        background: 'rgba(0,0,0,0.5)',
-                        target: this.$el.querySelector('.el-dialog') || document.body
-                    })
-                    let params = _.cloneDeep(this.form);
-                    if (this.isAdd === 'add') {
-                        addKyFilesCustomizeClassifyAPI(params).then(res => {
-                            this.loading.close();
-                            if (res.code === 200) {
-                                this.handleReuslt(res);
-                            } else {
-                                this.$modal.msgError(res.msg);
-                            }
-                        }).catch(error => {
-                            this.loading.close();
-                            this.$modal.msgError(this.errorMsg(error));
-                        });
-                    } else {
-                        updateKyFilesCustomizeClassifyAPI(params).then(res => {
-                            this.loading.close();
-                            if (res.code === 200) {
-                                this.handleReuslt(res);
-                            } else {
-                                this.$modal.msgError(res.msg);
-                            }
-                        }).catch(error => {
-                            this.loading.close();
-                            this.$modal.msgError(this.errorMsg(error));
-                        });
-                    }
-                }
-            });
-        },
-        errorMsg(error) {
-            const errorMessage = error.message;
-            const errorArr = errorMessage.split('：');
-            const errorObjData = errorArr.length > 1 ? JSON.parse(errorArr[1]) : '';
-            if(errorObjData){
-                return this.errorObj[errorObjData.paramName] + errorArr[0] + ':' + errorObjData.originalValue;
-            }else{
-                return errorMessage;
-            }
-            
+  name: "CustomizeForm",
+  props: ["width", "dataForm", "title", "disabled", "isAdd", "rowData"],
+  dicts: ['dimension'],
+  data() {
+    return {
+      lDialog: this.width > 500 ? "w700" : "w500",
+      dialogVisible: true,
+      isDisabled: true,
+      form: {
+        customizeClassifyName: null,
+        classifyDesc: null,
+      },
+      loading: null,
+      rules: {
+        customizeClassifyName: [
+          { required: true, message: '自定义分类名称不能为空', trigger: 'blur' }
+        ],
+      },
+      errorObj: {
+        customizeClassifyName: '自定义分类名称',
+        classifyDesc: '分类描述',
+      },
+    };
+  },
+  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.isAdd === 'detail') && this.rowData) {
+        // 编辑模式或详情模式：填充表单数据
+        this.form = {
+          customizeClassifyName: this.rowData.customizeClassifyName || '',
+          classifyDesc: this.rowData.classifyDesc || '',
+          id: this.rowData.id || null,
+        };
+      } else {
+        // 新增模式：重置表单
+        this.form = {
+          customizeClassifyName: null,
+          classifyDesc: null,
+        };
+      }
+    },
+    /*关闭弹窗 */
+    handleClose() {
+      this.dialogVisible = false;
+      this.$emit("closeDialog");
+    },
+    /**确认弹窗 */
+    sureBtnClick() {
+      this.dialogVisible = false;
+      this.$emit("closeDialog");
+    },
+    /**重置表单*/
+    reset() {
+      this.form = {
+        customizeClassifyName: null,
+        classifyDesc: null,
+        id:null
+      };
+      this.resetForm("ruleForm");
+    },
+    handleReuslt(res) {
+      this.$modal.msgSuccess(res.msg);
+      this.reset();
+      this.$emit('handleQuery');
+      this.handleClose();
+    },
+    /**验证 */
+    submitForm(formName) {
+      // 在详情模式下不执行提交操作，直接关闭弹窗
+      if (this.disabled) {
+        this.handleClose();
+        return;
+      }
+
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          // 显示遮罩层
+          this.loading = this.$loading({
+            lock: true,
+            text: "数据提交中，请稍候...",
+            background: 'rgba(0,0,0,0.5)',
+            target: this.$el.querySelector('.el-dialog') || document.body
+          })
+          let params = _.cloneDeep(this.form);
+          if (this.isAdd === 'add') {
+            addKyFilesCustomizeClassifyAPI(params).then(res => {
+              this.loading.close();
+              if (res.code === 200) {
+                this.handleReuslt(res);
+              } else {
+                this.$modal.msgError(res.msg);
+              }
+            }).catch(error => {
+              this.loading.close();
+              this.$modal.msgError(this.errorMsg(error));
+            });
+          } else {
+            updateKyFilesCustomizeClassifyAPI(params).then(res => {
+              this.loading.close();
+              if (res.code === 200) {
+                this.handleReuslt(res);
+              } else {
+                this.$modal.msgError(res.msg);
+              }
+            }).catch(error => {
+              this.loading.close();
+              this.$modal.msgError(this.errorMsg(error));
+            });
+          }
+        }
+      });
+    },
+    errorMsg(error) {
+      const errorMessage = error.message;
+      const errorArr = errorMessage.split('：');
+      const errorObjData = errorArr.length > 1 ? JSON.parse(errorArr[1]) : '';
+      if(errorObjData){
+        return this.errorObj[errorObjData.paramName] + errorArr[0] + ':' + errorObjData.originalValue;
+      }else{
+        return errorMessage;
+      }
+    }
+  }
 };
 </script>
 <style lang="scss" scoped>
 .w700 ::v-deep .el-dialog {
-    width: 700px;
+  width: 700px;
 }
 
 .w500 ::v-deep .el-dialog {
-    width: 500px;
+  width: 500px;
 }
 
 .w500 ::v-deep .el-dialog__header,
 .w700 ::v-deep .el-dialog__header {
-    // background: #eeeeee;
-
-    .el-dialog__title {
-        font-size: 16px;
-    }
+  .el-dialog__title {
+    font-size: 16px;
+  }
 }
 
 .yxq .el-range-separator {
-    margin-right: 7px !important;
+  margin-right: 7px !important;
 }
 
 .el-date-editor--daterange.el-input__inner {
-    width: 260px;
+  width: 260px;
 }
 
 .form-item {
-    width: 100%;
+  width: 100%;
 }
 
 .select-style {
-    display: flex;
-    justify-content: space-between;
+  display: flex;
+  justify-content: space-between;
 }
-</style>
\ No newline at end of file
+
+/* 详情模式下的样式 */
+::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>
diff --git a/src/views/data-collect/file-share-manage/components/left-tree.vue b/src/views/data-collect/file-share-manage/components/left-tree.vue
new file mode 100644
index 0000000..0928159
--- /dev/null
+++ b/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>
diff --git a/src/views/data-collect/file-share-manage/components/right-table.vue b/src/views/data-collect/file-share-manage/components/right-table.vue
new file mode 100644
index 0000000..2a09cb4
--- /dev/null
+++ b/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>
diff --git a/src/views/data-collect/file-share-manage/components/share.vue b/src/views/data-collect/file-share-manage/components/share.vue
new file mode 100644
index 0000000..ec1f902
--- /dev/null
+++ b/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>
diff --git a/src/views/data-collect/file-share-manage/index.vue b/src/views/data-collect/file-share-manage/index.vue
new file mode 100644
index 0000000..0dccdc5
--- /dev/null
+++ b/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>
diff --git a/src/views/filesTransfer/encryption/index.vue b/src/views/filesTransfer/encryption/index.vue
index 5832673..af81bf6 100644
--- a/src/views/filesTransfer/encryption/index.vue
+++ b/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 = "新增";
diff --git a/src/views/filesTransfer/encryption/prop/encryptionForm.vue b/src/views/filesTransfer/encryption/prop/encryptionForm.vue
index 78f127c..e089dcb 100644
--- a/src/views/filesTransfer/encryption/prop/encryptionForm.vue
+++ b/src/views/filesTransfer/encryption/prop/encryptionForm.vue
@@ -1,211 +1,263 @@
 <template>
-    <!-- 小型弹窗，用于完成，删除，保存等操作 -->
-    <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-item label="档案加密名称" prop="encryptName">
-                    <el-input class="form-item" v-model="form.encryptName" clearable show-word-limit
-                        placeholder="请输入档案加密名称" maxlength="20"></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="请选择档案加密类型">
-                        <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>
-                </el-form-item>
-            </el-form>
-        </div>
-        <span slot="footer" class="dialog-footer">
-            <el-button class="clear-btn" @click="handleClose" :disabled="disabled">取消</el-button>
-            <el-button type="primary" class="search-btn" :disabled="disabled"
-                @click="submitForm('ruleForm')">确认</el-button>
+  <!-- 小型弹窗，用于完成，删除，保存等操作 -->
+  <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" :disabled="disabled">
+        <el-form-item label="档案加密名称" prop="encryptName">
+          <el-input class="form-item" v-model="form.encryptName" clearable show-word-limit
+                    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="请选择档案加密类型" :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" :disabled="disabled"></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <span slot="footer" class="dialog-footer" v-if="!disabled">
+            <el-button class="clear-btn" @click="handleClose">取消</el-button>
+            <el-button type="primary" class="search-btn"
+                       @click="submitForm('ruleForm')">确认</el-button>
         </span>
-    </el-dialog>
+  </el-dialog>
 </template>
 <script>
 import _ from 'lodash'
 import {
-    addEncryTypeAPI,
-    updateEncryTypeAPI,
+  addEncryTypeAPI,
+  updateEncryTypeAPI,
 } from '@/api/filesTransfer/encryption'
+
 export default {
-    name: "EncryptionForm",
-    dicts: ['file_encryption_type'],
-    props: ["width", "dataForm", "title", "disabled", "isAdd", "rowData"],
-    data() {
-        return {
-            lDialog: this.width > 500 ? "w700" : "w500",
-            dialogVisible: true,
-            isDisabled: true,
-            form: {
-                encryptName: '',
-                encryptType: null,
-                encryptParams: '',
-            },
-            loading: null,
-            rules: {
-                encryptName: [
-                    { required: true, message: '档案加密名称不能为空', trigger: 'blur' }
-                ],
-                encryptType: [
-                    { required: true, message: '档案加密类型不能为空', trigger: 'change' }
-                ],
-                encryptParams: [
-                    { required: true, message: '档案加密参数不能为空', trigger: 'blur' }
-                ],
-            },
-            errorObj: {
-                encryptName: '档案加密名称',
-                encryptParams: '档案加密参数',
-            },
-        };
-    },
-    created() {
-        this.initFormData();
-    },
-    methods: {
-        /** 初始化表单数据 */
-        initFormData() {
-            if (this.isAdd === 'edit' && this.rowData) {
-                // 编辑模式：填充表单数据
-                this.form = {
-                    id: this.rowData.id,
-                    encryptName: this.rowData.encryptName || '',
-                    encryptType: this.rowData.encryptType || null,
-                    encryptParams: this.rowData.encryptParams || '',
-                };
-            } else {
-                // 新增模式：重置表单
-                this.form = {
-                    encryptName: '',
-                    encryptType: null,
-                    encryptParams: '',
-                };
-            }
-        },
-        /*关闭弹窗 */
-        handleClose() {
-            this.dialogVisible = false;
-            this.$emit("closeDialog");
-            /* setTimeout(() => {
-                this.dialogVisible = true;
-            }); */
-        },
-        /**确认弹窗 */
-        sureBtnClick() {
-            this.dialogVisible = false;
-            this.$emit("closeDialog");
-            /* setTimeout(() => {
-                this.dialogVisible = true;
-            }); */
-        },
-        /**重置表单*/
-        reset() {
-            this.form = {
-                encryptName: '',
-                encryptType: null,
-                encryptParams: '',
-            };
-            this.resetForm("ruleForm");
-        },
-        handleReuslt(res) {
-            this.$modal.msgSuccess(res.msg);
-            this.reset();
-            this.$emit('handleQuery');
-            this.handleClose();
-        },
-        /**验证 */
-        submitForm(formName) {
-            this.$refs[formName].validate(valid => {
-                if (valid) {
-                    // 显示遮罩层
-                    this.loading = this.$loading({
-                        lock: true,
-                        text: "数据提交中，请稍候...",
-                        background: 'rgba(0,0,0,0.5)',
-                        target: this.$el.querySelector('.el-dialog') || document.body
-                    })
-                    let params = _.cloneDeep(this.form);
-                    if (this.isAdd === 'add') {
-                        addEncryTypeAPI(params).then(res => {
-                            this.loading.close();
-                            if (res.code === 200) {
-                                this.handleReuslt(res);
-                            } else {
-                                this.$modal.msgError(res.msg);
-                            }
-                        }).catch(error => {
-                            this.loading.close();
-                            this.$modal.msgError(this.errorMsg(error));
-                        });
-                    } else {
-                        updateEncryTypeAPI(params).then(res => {
-                            this.loading.close();
-                            if (res.code === 200) {
-                                this.handleReuslt(res);
-                            } else {
-                                this.$modal.msgError(res.msg);
-                            }
-                        }).catch(error => {
-                            this.loading.close();
-                            this.$modal.msgError(this.errorMsg(error));
-                        });
-                    }
-                }
-            });
-        },
-        errorMsg(error) {
-            const errorMessage = error.message;
-            const errorArr = errorMessage.split('：');
-            const errorObjData = errorArr.length > 1 ? JSON.parse(errorArr[1]) : '';
-            if(errorObjData){
-                return this.errorObj[errorObjData.paramName] + errorArr[0] + ':' + errorObjData.originalValue;
-            }else{
-                return errorMessage;
-            }
-            
+  name: "EncryptionForm",
+  dicts: ['file_encryption_type'],
+  props: ["width", "dataForm", "title", "disabled", "isAdd", "rowData"],
+  data() {
+    return {
+      lDialog: this.width > 500 ? "w700" : "w500",
+      dialogVisible: true,
+      isDisabled: true,
+      form: {
+        encryptName: '',
+        encryptType: null,
+        encryptParams: '',
+      },
+      loading: null,
+      rules: {
+        encryptName: [
+          {required: true, message: '档案加密名称不能为空', trigger: 'blur'}
+        ],
+        encryptType: [
+          {required: true, message: '档案加密类型不能为空', trigger: 'change'}
+        ],
+        encryptParams: [
+          {required: true, message: '档案加密参数不能为空', trigger: 'blur'}
+        ],
+      },
+      errorObj: {
+        encryptName: '档案加密名称',
+        encryptParams: '档案加密参数',
+      },
+    };
+  },
+  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.isAdd === 'detail') && this.rowData) {
+        // 编辑模式或详情模式：填充表单数据
+        this.form = {
+          id: this.rowData.id,
+          encryptName: this.rowData.encryptName || '',
+          encryptType: this.rowData.encryptType || null,
+          encryptParams: this.rowData.encryptParams || '',
+        };
+      } else {
+        // 新增模式：重置表单
+        this.form = {
+          encryptName: '',
+          encryptType: null,
+          encryptParams: '',
+        };
+      }
+    },
+    /*关闭弹窗 */
+    handleClose() {
+      this.dialogVisible = false;
+      this.$emit("closeDialog");
+    },
+    /**确认弹窗 */
+    sureBtnClick() {
+      this.dialogVisible = false;
+      this.$emit("closeDialog");
+    },
+    /**重置表单*/
+    reset() {
+      this.form = {
+        encryptName: '',
+        encryptType: null,
+        encryptParams: '',
+      };
+      this.resetForm("ruleForm");
+    },
+    handleReuslt(res) {
+      this.$modal.msgSuccess(res.msg);
+      this.reset();
+      this.$emit('handleQuery');
+      this.handleClose();
+    },
+    /**验证 */
+    submitForm(formName) {
+      // 在详情模式下不执行提交操作，直接关闭弹窗
+      if (this.disabled) {
+        this.handleClose();
+        return;
+      }
+
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          // 显示遮罩层
+          this.loading = this.$loading({
+            lock: true,
+            text: "数据提交中，请稍候...",
+            background: 'rgba(0,0,0,0.5)',
+            target: this.$el.querySelector('.el-dialog') || document.body
+          })
+          let params = _.cloneDeep(this.form);
+          if (this.isAdd === 'add') {
+            addEncryTypeAPI(params).then(res => {
+              this.loading.close();
+              if (res.code === 200) {
+                this.handleReuslt(res);
+              } else {
+                this.$modal.msgError(res.msg);
+              }
+            }).catch(error => {
+              this.loading.close();
+              this.$modal.msgError(this.errorMsg(error));
+            });
+          } else {
+            updateEncryTypeAPI(params).then(res => {
+              this.loading.close();
+              if (res.code === 200) {
+                this.handleReuslt(res);
+              } else {
+                this.$modal.msgError(res.msg);
+              }
+            }).catch(error => {
+              this.loading.close();
+              this.$modal.msgError(this.errorMsg(error));
+            });
+          }
+        }
+      });
+    },
+    errorMsg(error) {
+      const errorMessage = error.message;
+      const errorArr = errorMessage.split('：');
+      const errorObjData = errorArr.length > 1 ? JSON.parse(errorArr[1]) : '';
+      if (errorObjData) {
+        return this.errorObj[errorObjData.paramName] + errorArr[0] + ':' + errorObjData.originalValue;
+      } else {
+        return errorMessage;
+      }
+    }
+  }
 };
 </script>
 <style lang="scss" scoped>
 .w700 ::v-deep .el-dialog {
-    width: 700px;
+  width: 700px;
 }
 
 .w500 ::v-deep .el-dialog {
-    width: 500px;
+  width: 500px;
 }
 
 .w500 ::v-deep .el-dialog__header,
 .w700 ::v-deep .el-dialog__header {
-    // background: #eeeeee;
-
-    .el-dialog__title {
-        font-size: 16px;
-    }
+  .el-dialog__title {
+    font-size: 16px;
+  }
 }
 
 .yxq .el-range-separator {
-    margin-right: 7px !important;
+  margin-right: 7px !important;
 }
 
 .el-date-editor--daterange.el-input__inner {
-    width: 260px;
+  width: 260px;
 }
 
 .form-item {
-    width: 100%;
+  width: 100%;
 }
 
 .select-style {
-    display: flex;
-    justify-content: space-between;
+  display: flex;
+  justify-content: space-between;
 }
-</style>
\ No newline at end of file
+
+/* 详情模式下的样式 */
+::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>