smart_archives_web/src/views/filesTransfer/apply/detail-data.vue

<template>
    <div class="detail-container">
        <!-- 返回按钮 -->
        <div>
            <el-button type="danger" plain icon="el-icon-close" size="mini" @click="handleClose">返回</el-button>
        </div>

        <!-- 审核状态区域 -->
        <div class="status-section">
            <div class="status-icon">
                <i :class="statusIconClass"></i>
            </div>
            <div class="status-text">{{ statusText }}</div>
        </div>

        <!-- 移交内容区域 -->
        <div class="content-section">
            <div class="section-title">
                <div class="title-bar"></div>
                <span>移交内容</span>
            </div>
            <div class="content-info">
                <span class="project-name">{{ projectName }}</span>
                <span class="receiving-org">接收组织: {{ receivingOrg }}</span>
            </div>
        </div>

        <!-- 文件详情表格 -->
        <div class="table-section">
            <el-table :data="fileList" border style="width: 100%" class="detail-table">
                <el-table-column prop="index" label="序号" width="80" align="center" sortable>
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="projectName" label="项目名称" min-width="150">
                    <template slot-scope="scope">
                        {{ scope.row.projectName }}
                    </template>
                </el-table-column>
                <el-table-column prop="singleProjectName" label="单项工程名称" min-width="150">
                    <template slot-scope="scope">
                        {{ scope.row.singleProjectName || '--' }}
                    </template>
                </el-table-column>
                <el-table-column prop="applicant" label="申请人" min-width="100">
                    <template slot-scope="scope">
                        {{ scope.row.applicant || '' }}
                    </template>
                </el-table-column>
                <el-table-column prop="applicationTime" label="申请时间" min-width="120">
                    <template slot-scope="scope">
                        {{ scope.row.applicationTime || '' }}
                    </template>
                </el-table-column>
                <el-table-column prop="archiveName" label="档案名称" min-width="300">
                    <template slot-scope="scope">
                        <div class="archive-name-cell">{{ scope.row.archiveName }}</div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 移交审批区域 -->
        <div v-if="showApprovalActions" class="approval-section">
            <div class="section-title">
                <div class="title-bar"></div>
                <span>移交审批</span>
            </div>
            <div class="approval-form">
                <div class="form-item">
                    <label class="form-label">审批意见:</label>
                    <el-input v-model="approvalComment" type="textarea" :rows="4" placeholder="请输入审批意见"
                        class="comment-textarea" clearable show-word-limit maxlength="255">
                    </el-input>
                </div>
                <div class="approval-actions">
                    <el-button type="primary" @click="handleApprove">同意</el-button>
                    <el-button type="danger" @click="handleReject">驳回</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { decryptWithSM4 } from '@/utils/sm'

export default {
    name: 'DetailData',
    data() {
        return {
            id: decryptWithSM4(this.$route.query.id),
            status: 'approving', // approving, approved, rejected
            projectName: 'XXXXXXXXXXXXX工程',
            receivingOrg: '省公司办公室',
            approvalComment: '', // 审批意见
            fileList: [
                {
                    projectName: 'XXXXXXXXXXXXx工程',
                    singleProjectName: 'XXXXXXXXXXXXx工程',
                    applicant: '',
                    applicationTime: '',
                    archiveName: '前期管理/XXX工程项目前期及核准文件、里程碑计划、项目资金计划、开工前往来文件/xx关于xx工程核准的复函、请示/xxxxxxxxxx.pdf'
                },
                {
                    projectName: 'XXXXXXXXXXXXx工程',
                    singleProjectName: 'XXXXXXXXXXXXx工程',
                    applicant: '',
                    applicationTime: '',
                    archiveName: '前期管理/XXX工程项目前期及核准文件、里程碑计划、项目资金计划、开工前往来文件/xx关于xx工程核准的复函、请示/xxxxxxxxxx.pdf'
                },
                {
                    projectName: 'XXXXXXXXXXXXx工程',
                    singleProjectName: 'XXXXXXXXXXXXx工程',
                    applicant: '',
                    applicationTime: '',
                    archiveName: '前期管理/XXX工程项目前期及核准文件、里程碑计划、项目资金计划、开工前往来文件/xx关于xx工程核准的复函、请示/xxxxxxxxxx.pdf'
                },
                {
                    projectName: 'XXXXXXXXXXXXx工程',
                    singleProjectName: 'XXXXXXXXXXXXx工程',
                    applicant: '',
                    applicationTime: '',
                    archiveName: '前期管理/XXX工程项目前期及核准文件、里程碑计划、项目资金计划、开工前往来文件/xx关于xx工程核准的复函、请示/xxxxxxxxxx.pdf'
                },
                {
                    projectName: 'XXXXXXXXXXXXx工程',
                    singleProjectName: 'XXXXXXXXXXXXx工程',
                    applicant: '',
                    applicationTime: '',
                    archiveName: '前期管理/XXX工程项目前期及核准文件、里程碑计划、项目资金计划、开工前往来文件/xx关于xx工程核准的复函、请示/xxxxxxxxxx.pdf'
                },
                {
                    projectName: 'XXXXXXXXXXXXx工程',
                    singleProjectName: '--',
                    applicant: '',
                    applicationTime: '',
                    archiveName: '前期管理/XXX工程项目前期及核准文件、里程碑计划、项目资金计划、开工前往来文件/xx关于xx工程核准的复函、请示/xxxxxxxxxx.pdf'
                }
            ]
        }
    },
    computed: {
        statusIconClass() {
            const iconMap = {
                'approving': 'el-icon-time',
                'approved': 'el-icon-check',
                'rejected': 'el-icon-close'
            }
            return iconMap[this.status] || 'el-icon-time'
        },
        statusText() {
            const textMap = {
                'approving': '审批中',
                'approved': '已通过',
                'rejected': '已驳回'
            }
            return textMap[this.status] || '审批中'
        },
        showApprovalActions() {
            return this.status === 'approving'
        }
    },
    mounted() {
        // 禁用页面滚动
        document.body.style.overflow = 'hidden';
    },
    beforeDestroy() {
        // 恢复页面滚动
        document.body.style.overflow = 'auto';
    },
    methods: {
        handleClose() {
            const obj = { path: "/archivesManagement/filesTransfer/apply" }
            this.$tab.closeOpenPage(obj)
        },
        handleApprove() {
            if (!this.approvalComment.trim()) {
                this.$message.warning('请填写审批意见')
                return
            }

            this.$confirm('确认同意此申请？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'success'
            }).then(() => {
                this.status = 'approved'
                this.$message.success('审批通过')
                // 这里可以调用API提交审批结果
                console.log('审批意见:', this.approvalComment)
            }).catch(() => {
                // 取消操作
            })
        },
        handleReject() {
            if (!this.approvalComment.trim()) {
                this.$message.warning('请填写审批意见')
                return
            }

            this.$confirm('确认驳回此申请？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.status = 'rejected'
                this.$message.success('已驳回申请')
                // 这里可以调用API提交审批结果
                console.log('驳回原因:', this.approvalComment)
            }).catch(() => {
                // 取消操作
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.detail-container {
    padding: 20px;
    background: #fff;
    height: calc(100vh - 120px); /* 减去头部导航栏的高度 */
    overflow-y: auto;
    box-sizing: border-box;
    
    /* 自定义滚动条样式 */
    &::-webkit-scrollbar {
        width: 6px;
        background: #f5f5f5;
    }
    
    &::-webkit-scrollbar-track {
        background: #f5f5f5;
        border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb {
        background: #c0c4cc;
        border-radius: 3px;
        transition: background 0.3s;
    }
    
    &::-webkit-scrollbar-thumb:hover {
        background: #909399;
    }
}

.status-section {
    text-align: center;
    margin-bottom: 40px;

    .status-icon {
        margin-bottom: 15px;

        i {
            font-size: 80px;
            color: #409eff;
        }
    }

    .status-text {
        font-size: 24px;
        font-weight: bold;
        color: #333;
    }
}

.content-section {
    margin-bottom: 30px;

    .section-title {
        display: flex;
        align-items: center;
        margin-bottom: 15px;

        .title-bar {
            width: 4px;
            height: 20px;
            background: #409eff;
            margin-right: 10px;
        }

        span {
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }
    }

    .content-info {
        display: flex;
        align-items: center;
        gap: 30px;

        .project-name {
            font-size: 16px;
            color: #333;
        }

        .receiving-org {
            font-size: 14px;
            color: #666;
        }
    }
}

.table-section {
    margin-bottom: 30px;

    .detail-table {
        .archive-name-cell {
            white-space: normal;
            word-break: break-word;
            line-height: 1.4;
        }
    }
}

.approval-section {
    margin-top: 30px;

    .section-title {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        .title-bar {
            width: 4px;
            height: 20px;
            background: #409eff;
            margin-right: 10px;
        }

        span {
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }
    }

    .approval-form {
        .form-item {
            margin-bottom: 20px;

            .form-label {
                display: block;
                margin-bottom: 8px;
                font-size: 14px;
                font-weight: 500;
                color: #333;
            }

            .comment-textarea {
                width: 100%;

                ::v-deep .el-textarea__inner {
                    border: 1px solid #dcdfe6;
                    border-radius: 4px;
                    padding: 10px;
                    font-size: 14px;
                    line-height: 1.5;
                    resize: vertical;
                    min-height: 100px;

                    &:focus {
                        border-color: #409eff;
                        outline: none;
                    }
                }
            }
        }

        .approval-actions {
            text-align: center;
            padding: 20px 0;

            .el-button {
                margin: 0 10px;
                padding: 10px 30px;
                font-size: 14px;
            }
        }
    }
}

// 状态颜色变化
.status-section {
    .status-icon i {
        &.el-icon-time {
            color: #409eff; // 审批中 - 蓝色
        }

        &.el-icon-check {
            color: #67c23a; // 已通过 - 绿色
        }

        &.el-icon-close {
            color: #f56c6c; // 已驳回 - 红色
        }
    }

    .status-text {
        &.approving {
            color: #409eff;
        }

        &.approved {
            color: #67c23a;
        }

        &.rejected {
            color: #f56c6c;
        }
    }
}
</style>