From 086b2da5c33134f9a0239a29bbba87a854d36597 Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Fri, 19 Sep 2025 10:04:16 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E4=BA=A4=E7=94=B3=E8=AF=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/filesTransfer/apply.js                |   9 +
 .../archCatalogue/components/leftTree.vue     |   4 +-
 .../fileManager/components/leftTree.vue       |   7 +-
 src/views/common/fileTree.vue                 | 355 +++++++++++++-----
 .../filesTransfer/apply/prop/applyForm.vue    |   6 +-
 5 files changed, 287 insertions(+), 94 deletions(-)

diff --git a/src/api/filesTransfer/apply.js b/src/api/filesTransfer/apply.js
index 8bc5ccf..839675a 100644
--- a/src/api/filesTransfer/apply.js
+++ b/src/api/filesTransfer/apply.js
@@ -43,4 +43,13 @@ export async function getProSelectApi(data) {
         method: 'GET',
         data
     })
+}
+
+// 获取档案目录树
+export function getFileManageTreeApi(params) {
+    return request({
+        url: '/smartArchives/fileManage/getFileManageTree',
+        method: 'get',
+        params:params,
+    })
 }
\ No newline at end of file
diff --git a/src/views/archivesManagement/archClass/archCatalogue/components/leftTree.vue b/src/views/archivesManagement/archClass/archCatalogue/components/leftTree.vue
index 9f97e72..76a2588 100644
--- a/src/views/archivesManagement/archClass/archCatalogue/components/leftTree.vue
+++ b/src/views/archivesManagement/archClass/archCatalogue/components/leftTree.vue
@@ -1,7 +1,7 @@
 <template>
     <!-- 左侧树 -->
     <div>
-        <el-card style="min-height: calc(100vh - 125px)">
+        <el-card style="height: calc(100vh - 125px)">
             <el-row :gutter="20" style="display: flex; align-items: center">
                 <el-col :span="16">
                     <el-input v-model="filterText" placeholder="输入关键字" @keyup.enter.native="onHandleSearch">
@@ -241,7 +241,7 @@ export default {
 <style scoped>
 .tree-container {
     margin-top: 10px;
-    max-height: calc(100vh - 230px);
+    max-height: calc(100vh - 220px);
     overflow-x: hidden;
     overflow-y: auto;
 }
diff --git a/src/views/archivesManagement/fileManager/components/leftTree.vue b/src/views/archivesManagement/fileManager/components/leftTree.vue
index 7960fba..e9164c1 100644
--- a/src/views/archivesManagement/fileManager/components/leftTree.vue
+++ b/src/views/archivesManagement/fileManager/components/leftTree.vue
@@ -1,7 +1,7 @@
 <template>
     <!-- 左侧树 -->
     <div>
-        <el-card style="min-height: calc(100vh - 190px)">
+        <el-card style="height: calc(100vh - 190px)">
             <el-row :gutter="24" style="display: flex; align-items: center">
                 <el-col :span="16">
                     <el-input v-model="filterText" placeholder="输入关键字" @keyup.enter.native="onHandleSearch">
@@ -31,7 +31,7 @@
                             <span class="node-label">{{ node.label }}</span>
                         </template>
                         <span class="btn-box">
-                            <el-button type="text" icon="el-icon-plus" v-if="(data.level > 1 && data.level !==4 && Number(data.isUnique) === 1) || (data.level === 1 && Number(data.isUnique) === 0) && fileStatus === '0'"
+                            <el-button type="text" icon="el-icon-plus" v-if="((data.level > 1 && data.level !==4 && Number(data.isUnique) === 1) || (data.level === 1 && Number(data.isUnique) === 0)) && fileStatus === '0'"
                                 @click.stop="() => addTree(data)" v-hasPermi="['file:manage:add']">
                             </el-button>
                             <el-button type="text" v-if="data.level > 1 && Number(data.isUnique) === 1 && fileStatus === '0'" icon="el-icon-edit-outline"
@@ -246,7 +246,8 @@ export default {
 <style scoped>
 .tree-container {
     margin-top: 10px;
-    max-height: calc(100vh - 230px);
+    margin-bottom: 10px;
+    max-height: calc(100vh - 270px);
     overflow-x: hidden;
     overflow-y: auto;
 }
diff --git a/src/views/common/fileTree.vue b/src/views/common/fileTree.vue
index 4c9cd8b..f3d42ef 100644
--- a/src/views/common/fileTree.vue
+++ b/src/views/common/fileTree.vue
@@ -2,64 +2,153 @@
     <!-- 小型弹窗，用于完成，删除，保存等操作 -->
     <el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
         :closeOnClickModal="false" @close="handleClose" :append-to-body="true">
-        <div>
+        <el-row :gutter="24" style="display: flex; align-items: center">
+                <el-col :span="16">
+                    <el-input v-model="filterText" placeholder="输入关键字" @keyup.enter.native="onHandleSearch">
+                    </el-input>
+                </el-col>
+                <el-col :span="8">
+                    <el-button type="primary" size="small" @click="onHandleSearch">
+                        查询
+                    </el-button>
+                </el-col>
+            </el-row>
+        <div class="tree-container" style="max-height: calc(80vh - 190px); overflow-y: auto;">
             
+
+            <el-tree ref="leftTreeRef" :data="treeDataList" default-expand-all class="left-tree-list"
+                @node-click="onHandleNodeClick" :filter-node-method="filterNode" highlight-current node-key="id">
+                <span class="custom-tree-node" slot-scope="{ node }">
+                    <span class="node-label">{{ node.label }}</span>
+                </span>
+            </el-tree>
         </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-button class="clear-btn" @click="handleClose">取消</el-button>
+            <el-button type="primary" class="search-btn" @click="submitForm('ruleForm')">确认</el-button>
         </span>
     </el-dialog>
-    
+
 </template>
 <script>
 import _ from 'lodash'
 import {
-    saveTransferApplyApi,
-    editTransferApplyApi,
-    getProSelectApi
+    getFileManageTreeApi
 } from '@/api/filesTransfer/apply'
-import { getDeptSelectApi } from '@/api/select'
-import Treeselect from "@riophae/vue-treeselect";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 export default {
     name: "FileTree",
-    props: ["width", "dataForm", "title", "disabled", "rowData"],
-    dicts: ['data_class_type'],
-    components: { Treeselect},
+    props: ["width", "title", "rowData"],
     data() {
         return {
             lDialog: this.width > 500 ? "w700" : "w500",
             dialogVisible: true,
             isDisabled: true,
+            treeDataList: [],
+            filterText: '',
+            originalTreeData: [], // 保存原始数据,
+            selectedNodeId: null, // 保存当前选中的节点ID
         };
     },
     created() {
-        // this.initFormData();
+        this.getLeftTreeList();
+    },
+    computed: {
+        // 过滤后的树数据
+        filteredTreeData() {
+            if (!this.filterText) {
+                return this.treeDataList
+            }
+            return this.filterTreeData(this.treeDataList)
+        }
     },
     methods: {
-        /** 初始化表单数据 */
-        async initFormData() {
-            
-            if (this.isAdd === 'edit' && this.rowData) {
-                // 编辑模式：填充表单数据
-                this.form = {
-                    id: this.rowData.id,
-                    proId: this.rowData.proId || undefined,
-                    deptId: this.rowData.deptId || undefined,
-                };
-            } else {
-                // 新增模式：重置表单
-                this.form = {
-                    proId: undefined,
-                    deptId: undefined,
-                };
-            }
+        // 获取树列表
+        async getLeftTreeList() {
+            const proId = this.rowData.proId;
+            const res = await getFileManageTreeApi({ proId })
+            const transformedData = this.convertToVueTree(res.data)
+            this.treeDataList = transformedData;
+            // 保存原始数据
+            this.originalTreeData = JSON.parse(JSON.stringify(this.treeDataList))
         },
-        // 选择移交档案
-        handleAddFile(){
-            this.fileTreeVisible = true;
+        /* 刷新树节点 */
+        async handleQuery() {
+            // 保存当前选中的节点ID
+            const currentNode = this.$refs.leftTreeRef.getCurrentNode();
+            if (currentNode) {
+                this.selectedNodeId = currentNode.id;
+            }
+
+            // 重新获取树数据
+            await this.getLeftTreeList();
+
+            // 恢复选中状态
+            this.$nextTick(() => {
+                if (this.selectedNodeId) {
+                    this.$refs.leftTreeRef.setCurrentKey(this.selectedNodeId);
+                }
+            });
+        },
+        // 树数据过滤 - 支持无限层级转换
+        convertToVueTree(data) {
+            if (!data || !Array.isArray(data)) {
+                return [];
+            }
+
+            return data.map(item => {
+
+                const node = {
+                    id: item.id,
+                    label: item.contentName,
+                    level: item.level,
+                    parentId: item.parentId
+                };
+
+                // 递归处理子节点
+                if (item.children && Array.isArray(item.children) && item.children.length > 0) {
+                    const children = this.convertToVueTree(item.children);
+                    // 只有当子节点不为空时才添加 children 属性
+                    if (children.length > 0) {
+                        node.children = children;
+                    }
+                }
+
+                return node;
+            });
+        },
+        // 节点点击事件
+        onHandleNodeClick(data) {
+            // 保存选中的节点ID
+            this.selectedNodeId = data.id;
+        },
+        // 搜索
+        onHandleSearch() {
+            this.$refs.leftTreeRef.filter(this.filterText)
+        },
+        // 树节点过滤方法
+        filterNode(value, data) {
+            if (!value) return true
+            return data.label.indexOf(value) !== -1
+        },
+        // 递归过滤树数据
+        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
         },
         /*关闭弹窗 */
         handleClose() {
@@ -77,67 +166,15 @@ export default {
                 this.dialogVisible = true;
             });
         },
-        /**重置表单*/
-        reset() {
-            this.form = {
-                id: null,
-                pid: null,
-                dataTypeName: '',
-                remark: '',
-            };
-            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') {
-                        saveTransferApplyApi(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('提交失败，请重试');
-                        });
-                    } else {
-
-                        editTransferApplyApi(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('提交失败，请重试');
-                        });
-                    }
-                }
-            });
-        }
     }
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .w700 .el-dialog {
     width: 700px;
 }
@@ -171,4 +208,146 @@ export default {
     display: flex;
     justify-content: space-between;
 }
+
+.tree-container {
+    margin-top: 10px;
+    overflow-x: hidden;
+}
+
+/* 自定义滚动条样式 */
+.tree-container::-webkit-scrollbar {
+    width: 6px;
+    background: #f5f5f5;
+}
+
+.tree-container::-webkit-scrollbar-track {
+    background: #f5f5f5;
+    border-radius: 3px;
+}
+
+.tree-container::-webkit-scrollbar-thumb {
+    background: #c0c4cc;
+    border-radius: 3px;
+    transition: background 0.3s;
+}
+
+.tree-container::-webkit-scrollbar-thumb:hover {
+    background: #909399;
+}
+
+.left-tree-list {
+    width: 100%;
+}
+
+/* 自定义节点行：左右布局，支持多行文本 */
+.custom-tree-node {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 20px;
+    padding: 1px 0;
+}
+
+.node-label {
+    flex: 1;
+    min-width: 0;
+    overflow: visible;
+    text-overflow: initial;
+    white-space: normal;
+    word-break: break-word;
+    word-wrap: break-word;
+    line-height: 1.2;
+    padding-right: 4px;
+}
+
+/* 使行容器自适应高度，单行文本居中对齐，多行文本顶部对齐 */
+.left-tree-list .el-tree-node__content {
+    display: flex;
+    align-items: center;
+    height: auto;
+    min-height: 20px;
+    padding: 1px 4px;
+    line-height: 1.2;
+}
+
+/* 多行文本时改为顶部对齐 */
+.left-tree-list .el-tree-node__content:has(.node-label[style*="height"]) {
+    align-items: flex-start;
+}
+
+/* 高亮选中状态同样自适应高度 */
+.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+    height: auto !important;
+    align-items: center;
+    line-height: 1.2;
+}
+
+/* 选中节点的背景色 */
+.left-tree-list .el-tree-node.is-current>.el-tree-node__content {
+    background-color: #b3d9ff;
+    color: #006e6a !important;
+}
+
+/* 确保选中节点的文字颜色正确应用 */
+.left-tree-list .el-tree-node.is-current>.el-tree-node__content .el-tree-node__label {
+    color: #006e6a !important;
+}
+
+/* 确保自定义树节点中的文字颜色正确应用 */
+.left-tree-list .el-tree-node.is-current>.el-tree-node__content .custom-tree-node {
+    color: #006e6a !important;
+}
+
+/* 悬停效果 */
+.left-tree-list .el-tree-node__content:hover {
+    background-color: #f5f5f5;
+}
+
+.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+    height: auto;
+}
+
+/* 选中节点的悬停效果 */
+.left-tree-list .el-tree-node.is-current>.el-tree-node__content:hover {
+    background-color: #8cc8ff;
+}
+
+
+.btn-box {
+    margin-left: 4px;
+    opacity: 0;
+    transition: opacity 0.15s ease-in-out;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 1px;
+}
+
+/* 悬浮到整行时显示操作按钮 */
+.left-tree-list .el-tree-node__content:hover .btn-box {
+    opacity: 1;
+}
+
+/* 确保树节点内容正确显示 */
+::v-deep .el-tree-node__content {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    height: auto;
+    min-height: 38px;
+    padding: 1px 4px;
+}
+
+/* 树节点展开/收起图标 */
+::v-deep .el-tree-node__expand-icon {
+    padding: 1px;
+    margin-right: 1px;
+    flex-shrink: 0;
+}
+
+/* 树节点图标容器 */
+::v-deep .el-tree-node__content>.el-tree-node__expand-icon {
+    flex-shrink: 0;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/filesTransfer/apply/prop/applyForm.vue b/src/views/filesTransfer/apply/prop/applyForm.vue
index 47fe6b9..f436bc5 100644
--- a/src/views/filesTransfer/apply/prop/applyForm.vue
+++ b/src/views/filesTransfer/apply/prop/applyForm.vue
@@ -109,8 +109,12 @@ export default {
         },
         // 选择移交档案
         handleAddFile(){
+            if(!this.form.proId){
+                return this.$modal.msgError('请选择项目');
+            }
+            const proId = this.form.proId;
             this.fileTreeTitle = "选择";
-            this.fileTreeRow = {};
+            this.fileTreeRow = {proId};
             this.isflag = true;
         },
         closeDialog() {