418 lines
13 KiB
Vue
418 lines
13 KiB
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> |