smart_archives_web/src/views/archivesManagement/fileManager/file-data.vue

<template>
    <div class="app-container">
        <el-card class="toolbar-card">
            <div class="toolbar">
                <div class="toolbar-left">
                    <el-button type="warning" plain icon="el-icon-bottom" size="mini" @click="handleClose">档案抽取</el-button>
                    <el-button type="success" plain icon="el-icon-finished" size="mini" @click="handleClose">移交清单确认</el-button>
                    <el-button type="danger" plain icon="el-icon-close" size="mini" @click="handleClose">返回</el-button>
                </div>
            
            </div>
        </el-card>
        <el-row :gutter="24" class="content-row">
            <el-col :span="8" class="pane-left">
                <LeftTree @handleNodeClick="handleNodeClick" :projectId="projectId" />
            </el-col>
            <el-col :span="16" class="pane-right">
                <RightTable :selectedNode = "selectedNode" :projectId="projectId"/>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import LeftTree from './components/leftTree.vue'
import RightTable from './components/rightTable.vue'
export default {
    name: 'FileData',
    components: {
        LeftTree,
        RightTable,
    },
    data() {
        return {
            projectId: null,
            // 选中的节点
            selectedNode: null,
        }
    },
    created() {
        // 获取传递的项目ID
        this.projectId = this.$route.query.id
        console.log('接收到的项目ID:', this.projectId)
    },
    methods: {
        handleClose() {
            const obj = { path: "/archivesManagement/fileManager" }
            this.$tab.closeOpenPage(obj)
        },
        // 节点点击事件
        handleNodeClick(data) {
            this.selectedNode = data;
        },
    }
}
</script>

<style scoped>
.app-container {
    padding: 12px;
}

.toolbar-card {
    margin-bottom: 12px;
}

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.toolbar-left :deep(.el-button) + :deep(.el-button) {
    margin-left: 8px;
}

.toolbar-right :deep(.el-tag) {
    border-color: #dcdfe6;
}

.content-row {
    min-height: calc(100vh - 200px);
}

.pane-left, .pane-right {
    background: #fff;
    border-radius: 6px;
    height: 100%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.pane-left {
    overflow: auto;
}

.pane-right {
    overflow: hidden;
}
</style>