移交申请详情

This commit is contained in:
cwchen 2025-09-19 18:12:53 +08:00
parent 3dfcbda029
commit 362ea8f89b
6 changed files with 692 additions and 6 deletions

View File

@ -0,0 +1,10 @@
import request from '@/utils/request'
// 档案移交审核列表
export function getTransferAuditListApi(params) {
return request({
url: '/smartArchives/transferApply/getTransferAuditList',
method: 'GET',
params: params,
})
}

View File

@ -179,16 +179,31 @@ export const dynamicRoutes = [
},
/* 档案移交申请详情 */
{
path: '/archivesManagement/filesTransfer/apply/detail-data',
path: '/archivesManagement/filesTransfer/apply/apply-detail-data',
component: Layout,
hidden: true,
permissions: ['transfer:apply:query'],
children: [
{
path: 'index',
component: () => import('@/views/filesTransfer/apply/detail-data'),
component: () => import('@/views/filesTransfer/detail-data'),
name: 'DetailData',
meta: { title: '档案移交申请详情', activeMenu: '/archivesManagement/filesTransfer/apply', noCache: true }
meta: { title: '申请详情', activeMenu: '/archivesManagement/filesTransfer/apply', noCache: true }
}
]
},
/* 档案移交审核详情 */
{
path: '/archivesManagement/filesTransfer/audit/audit-detail-data',
component: Layout,
hidden: true,
permissions: ['transfer:apply:query'],
children: [
{
path: 'index2',
component: () => import('@/views/filesTransfer/detail-data'),
name: 'DetailData2',
meta: { title: '审核详情', activeMenu: '/archivesManagement/filesTransfer/audit', noCache: true }
}
]
}

View File

@ -75,8 +75,30 @@
</el-input>
</div>
<div class="approval-actions">
<el-button type="primary" @click="handleApprove">同意</el-button>
<el-button type="danger" @click="handleReject">驳回</el-button>
<el-button type="primary" @click="handleApprove" v-hasPermi="['transfer:apply:audit']">同意</el-button>
<el-button type="danger" @click="handleReject" v-hasPermi="['transfer:apply:audit']">驳回</el-button>
</div>
</div>
</div>
<div v-if="showApprovalActions2" class="approval-section">
<div class="section-title">
<div class="title-bar"></div>
<span>审批意见</span>
</div>
<div class="approval-form">
<div class="audit-info">
<div class="audit-row">
<span class="audit-label">审核人</span>
<span class="audit-value">{{ auditUserName || '--' }}</span>
</div>
<div class="audit-row">
<span class="audit-label">审核日期</span>
<span class="audit-value">{{ auditDate || '--' }}</span>
</div>
<div class="audit-row">
<span class="audit-label">审核意见</span>
<span class="audit-value">{{ auditOpinion || '--' }}</span>
</div>
</div>
</div>
</div>
@ -99,7 +121,11 @@ export default {
projectName: '',
receivingOrg: '',
approvalComment: '', //
fileList: []
fileList: [],
//
auditUserName: '',
auditDate: '',
auditOpinion: ''
}
},
computed: {
@ -121,6 +147,9 @@ export default {
},
showApprovalActions() {
return this.status === 'approving'
},
showApprovalActions2() {
return this.status === 'approved' || this.status === 'rejected'
}
},
mounted() {
@ -147,6 +176,10 @@ export default {
const res2 = await getTransferApplyApi({ id: this.id });
this.projectName = res2?.data?.proName || '/';
this.receivingOrg = res2?.data?.deptName || '/';
//
this.auditUserName = res2?.data?.auditUserName || '--';
this.auditDate = res2?.data?.transfertTime || '--';
this.auditOpinion = res2?.data?.auditOpinion || '--';
if (Array.isArray(res.data) && res.data.length > 0) {
res.data.map(item => {
const newFile = {
@ -327,6 +360,22 @@ export default {
}
.approval-form {
.audit-info {
padding: 4px 0 0 6px;
}
.audit-row {
margin-bottom: 10px;
font-size: 14px;
color: #333;
}
.audit-label {
display: inline-block;
min-width: 80px;
color: #666;
}
.audit-value {
color: #333;
}
.form-item {
margin-bottom: 20px;

View File

@ -0,0 +1,33 @@
export const formLabel = [
{
isShow: false, // 是否展示label
f_type: 'ipt',
f_label: '单项工程名称',
f_model: 'proName',
f_max: 32,
},
{
isShow: false, // 是否展示label
f_type: 'sel',
f_label: '项目类型',
f_model: 'proType',
f_selList: [],
f_dict: 'pro_type',
},
{
isShow: false, // 是否展示label
f_type: 'sel',
f_label: '电压等级',
f_model: 'voltageLevel',
f_selList: [],
f_dict: 'voltage_level',
},
]
export const columnsList = [
{ t_props: 'proName', t_label: '项目名称' },
{ t_props: 'singleProName', t_label: '单项工程名称' },
{ t_props: 'createUserName', t_label: '申请人' },
{ t_props: 'createTime', t_label: '申请时间' },
{ t_slot: 'auditStatus', t_label: '审批状态' },
]

View File

@ -0,0 +1,119 @@
<template>
<!-- 档案移交申请审核 -->
<div class="app-container">
<TableModel :formLabel="formLabel" :showOperation="true" :showRightTools="true" ref="auditTableRef"
:columnsList="columnsList" :request-api="getTransferAuditListApi">
<template slot="auditStatus" slot-scope="{ data }">
<el-tag size="mini" :type="getStatusType(data.auditStatus)">
{{ getStatusText(data.auditStatus) }}
</el-tag>
</template>
<template slot="handle" slot-scope="{ data }">
<el-button plain size="mini" type="success" icon="el-icon-warning-outline" v-hasPermi="['transfer:apply:query']"
@click="handleDetail(data)">
详情
</el-button>
</template>
</TableModel>
</div>
</template>
<script>
import TableModel from '@/components/TableModel'
import { columnsList, formLabel } from './config'
import {
getTransferAuditListApi,
} from '@/api/filesTransfer/audit.js'
import { encryptWithSM4 } from '@/utils/sm'
export default {
name: 'Audit',
dicts: ['pro_type', 'voltage_level'],
components: {
TableModel,
},
data() {
return {
formLabel,
columnsList,
getTransferAuditListApi,
title: "",
isflag: false,
isAdd: '',
row: {},
loading: false,
}
},
created() {
//
if (Array.isArray(this.formLabel)) {
this.formLabel.forEach((item) => {
if (item.f_dict && this.dict && this.dict.type && this.dict.type[item.f_dict]) {
this.$set(item, 'f_selList', this.dict.type[item.f_dict])
}
})
}
},
methods: {
//
handleDetail(row) {
this.$router.push({
name: 'DetailData2',
query: {
id: encryptWithSM4(row.id ?? '0'),
viewStatus: encryptWithSM4('audit'),
auditStatus: encryptWithSM4(this.getStatusText2(row.auditStatus)),
}
})
},
/* 搜索操作 */
handleQuery() {
this.$refs.auditTableRef.getTableList()
},
//
getStatusText(status) {
switch (status) {
case '0':
return '待审批'
case '1':
return '审批通过'
case '2':
return '审批驳回'
default:
return '未知状态'
}
},
//
getStatusType(status) {
switch (status) {
case '0':
return 'danger'
case '1':
return 'warning'
case '2':
return 'success'
default:
return 'info'
}
},
getStatusText2(status) {
switch (status) {
case '0':
return 'approving'
case '1':
return 'approved'
case '2':
return 'rejected'
default:
return 'approving'
}
},
},
}
</script>

View File

@ -0,0 +1,460 @@
<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="proName" label="项目名称" min-width="150">
<template slot-scope="scope">
{{ scope.row.proName || '--'}}
</template>
</el-table-column>
<el-table-column prop="singleProName" label="单项工程名称" min-width="150">
<template slot-scope="scope">
{{ scope.row.singleProName || '--' }}
</template>
</el-table-column>
<el-table-column prop="createUserName" label="申请人" min-width="100">
<template slot-scope="scope">
{{ scope.row.createUserName || '--' }}
</template>
</el-table-column>
<el-table-column prop="createTime" label="申请时间" min-width="120">
<template slot-scope="scope">
{{ scope.row.createTime || '--' }}
</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 && viewStatus !== 'detail'" 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" v-hasPermi="['transfer:apply:audit']">同意</el-button>
<el-button type="danger" @click="handleReject" v-hasPermi="['transfer:apply:audit']">驳回</el-button>
</div>
</div>
</div>
<div v-if="showApprovalActions2" class="approval-section">
<div class="section-title">
<div class="title-bar"></div>
<span>审批意见</span>
</div>
<div class="approval-form">
<div class="audit-info">
<div class="audit-row">
<span class="audit-label">审核人</span>
<span class="audit-value">{{ auditUserName || '--' }}</span>
</div>
<div class="audit-row">
<span class="audit-label">审核日期</span>
<span class="audit-value">{{ auditDate || '--' }}</span>
</div>
<div class="audit-row">
<span class="audit-label">审核意见</span>
<span class="audit-value">{{ auditOpinion || '--' }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { decryptWithSM4 } from '@/utils/sm'
import {
getTransferApplyFilesByApplyIdApi,
getTransferApplyApi
} from '@/api/filesTransfer/apply'
export default {
name: 'DetailData',
data() {
return {
id: decryptWithSM4(this.$route.query.id),
viewStatus: decryptWithSM4(this.$route.query.viewStatus),
status: decryptWithSM4(this.$route.query.auditStatus), // approving, approved, rejected
projectName: '',
receivingOrg: '',
approvalComment: '', //
fileList: [],
//
auditUserName: '',
auditDate: '',
auditOpinion: ''
}
},
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'
},
showApprovalActions2() {
return this.status === 'approved' || this.status === 'rejected'
}
},
mounted() {
//
document.body.style.overflow = 'hidden';
},
beforeDestroy() {
//
document.body.style.overflow = 'auto';
},
created(){
this.initData();
},
methods: {
handleClose() {
// const obj = { path: "/archivesManagement/filesTransfer/apply" }
// this.$tab.closeOpenPage(obj)
if(this.viewStatus === 'audit'){
const obj = { path: "/archivesManagement/filesTransfer/audit" }
this.$tab.closeOpenPage(obj)
}else{
const obj = { path: "/archivesManagement/filesTransfer/apply" }
this.$tab.closeOpenPage(obj)
}
},
async initData() {
this.fileList = [];
const res = await getTransferApplyFilesByApplyIdApi({ id: this.id });
console.log(res);
const res2 = await getTransferApplyApi({ id: this.id });
this.projectName = res2?.data?.proName || '/';
this.receivingOrg = res2?.data?.deptName || '/';
//
this.auditUserName = res2?.data?.auditUserName || '--';
this.auditDate = res2?.data?.transfertTime || '--';
this.auditOpinion = res2?.data?.auditOpinion || '--';
if (Array.isArray(res.data) && res.data.length > 0) {
res.data.map(item => {
const newFile = {
proName: item.proName,
singleProName: item.singleProName,
createUserName: item.createUserName,
createTime: item.createTime,
archiveName: item?.parParentName + '/' + item?.parentName + '/' + item?.fileName,
}
this.fileList.push(newFile);
})
}
},
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 {
.audit-info {
padding: 4px 0 0 6px;
}
.audit-row {
margin-bottom: 10px;
font-size: 14px;
color: #333;
}
.audit-label {
display: inline-block;
min-width: 80px;
color: #666;
}
.audit-value {
color: #333;
}
.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>