bonus
/
smart_archives_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

移交申请详情

This commit is contained in:
cwchen 2025-09-19 13:42:48 +08:00
parent b943040b03
commit eb3c677d70
4 changed files with 478 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/filesTransfer/apply.js
View File

@ -53,3 +53,12 @@ export function getFileManageTreeApi(params) {
params:params,
})
}
// 获取移交档案文件
export function getTransferApplyFilesApi(params) {
return request({
url: '/smartArchives/transferApply/getTransferApplyFiles',
method: 'get',
params:params,
})
}

2
src/router/index.js
View File

@ -188,7 +188,7 @@ export const dynamicRoutes = [
path: 'index',
component: () => import('@/views/filesTransfer/apply/detail-data'),
name: 'DetailData',
meta: { title: '档案移交申请详情', activeMenu: '/filesTransfer/apply', noCache: true }
meta: { title: '档案移交申请详情', activeMenu: '/archivesManagement/filesTransfer/apply', noCache: true }
}
]
}

402
src/views/filesTransfer/apply/detail-data.vue
View File

@ -1,16 +1,418 @@
<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>

85
src/views/filesTransfer/apply/prop/applyForm.vue
View File

@ -5,14 +5,15 @@
<div>
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="110px">
<el-form-item label="项目" prop="proId">
<el-select class="form-item" v-model="form.proId" filterable clearable placeholder="请选择项目">
<el-select class="form-item" v-model="form.proId" filterable clearable placeholder="请选择项目" @change="handleProChange">
<el-option v-for="item in proList" :key="item.id" :label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="选择移交档案" prop="checkTreeData">
<div>
<el-button plain type="primary" size="mini" icon="el-icon-plus" @click="handleAddFile">选择</el-button>
<el-button plain type="primary" size="mini" icon="el-icon-plus"
@click="handleAddFile">选择</el-button>
<!-- 选中文件表格 -->
<div v-if="checkTreeData && checkTreeData.length > 0" style="margin-top: 10px;">
<el-table :data="checkTreeData" border size="mini" style="width: 100%">
@ -21,14 +22,14 @@
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="category" label="所属分类" min-width="200">
<el-table-column prop="parParentName" label="所属分类" min-width="200">
<template slot-scope="scope">
{{ scope.row.category || '' }}
{{ scope.row.parParentName || '' }}
</template>
</el-table-column>
<el-table-column prop="archiveVolume" label="所属案卷" min-width="100">
<el-table-column prop="parentName" label="所属案卷" min-width="100">
<template slot-scope="scope">
{{ scope.row.archiveVolume || '' }}
{{ scope.row.parentName || '' }}
</template>
</el-table-column>
<el-table-column prop="fileName" label="文件名称" min-width="100">
@ -38,11 +39,7 @@
</el-table-column>
<el-table-column label="操作" width="80" align="center">
<template slot-scope="scope">
<el-button
type="text"
icon="el-icon-delete"
size="mini"
style="color: #f56c6c;"
<el-button type="text" icon="el-icon-delete" size="mini" style="color: #f56c6c;"
@click="removeFile(scope.$index)">
</el-button>
</template>
@ -52,16 +49,9 @@
</div>
</el-form-item>
<el-form-item label="接收组织" prop="deptId">
<treeselect
v-model="form.deptId"
:options="treeDataList"
placeholder="请选择接收组织"
value-key="id"
:disable-branch-nodes="true"
noChildrenText="没有数据了"
noOptionsText="没有数据了"
noResultsText="没有搜索结果"
/>
<treeselect v-model="form.deptId" :options="treeDataList" placeholder="请选择接收组织" value-key="id"
:disable-branch-nodes="true" noChildrenText="没有数据了" noOptionsText="没有数据了"
noResultsText="没有搜索结果" />
</el-form-item>
</el-form>
</div>
@ -70,8 +60,8 @@
<el-button type="primary" class="search-btn" :disabled="disabled"
@click="submitForm('ruleForm')">确认</el-button>
</span>
<FileTree v-if="isflag" :isAdd="isAdd" :rowData="fileTreeRow" :title="fileTreeTitle"
@closeDialog="closeDialog" @getTreeData="getTreeData" :dataForm="fileTreeRow" :width="600" />
<FileTree v-if="isflag" :isAdd="isAdd" :rowData="fileTreeRow" :title="fileTreeTitle" @closeDialog="closeDialog"
@getTreeData="getTreeData" :dataForm="fileTreeRow" :width="600" />
</el-dialog>
</template>
<script>
@ -79,7 +69,8 @@ import _ from 'lodash'
import {
saveTransferApplyApi,
editTransferApplyApi,
getProSelectApi
getProSelectApi,
getTransferApplyFilesApi
} from '@/api/filesTransfer/apply'
import { getDeptSelectApi } from '@/api/select'
import Treeselect from "@riophae/vue-treeselect";
@ -155,6 +146,10 @@ export default {
};
}
},
handleProChange(value){
console.log(value);
this.checkTreeData = [];
},
// 选择移交档案
handleAddFile() {
if (!this.form.proId) {
@ -214,7 +209,15 @@ export default {
target: this.$el.querySelector('.el-dialog') || document.body
})
let params = _.cloneDeep(this.form);
params.checkTreeData = this.checkTreeData;
// 获取单项工程名称
let proObj = this.proList.find(item => item.id === params.proId);
params.singleProName = proObj.name;
// 获取接收组织名称
const obj = this.findNodeById(this.treeDataList, this.form.deptId);
params.deptName = obj?.label || '';
params.transferFileDtos = this.checkTreeData;
console.log(params);
if (this.isAdd === 'add') {
saveTransferApplyApi(params).then(res => {
this.loading.close();
@ -265,16 +268,42 @@ export default {
return node
})
},
findNodeById(nodes, id) {
for (const node of nodes) {
if (node.id === id) return node;
if (node.children) {
const found = this.findNodeById(node.children, id);
if (found) return found;
}
}
return null;
},
// 获取选中的节点
getTreeData(nodeId){
// 模拟添加文件数据到表格
async getTreeData(nodeId) {
this.checkTreeData = [];
const res = await getTransferApplyFilesApi({ parentId: nodeId,proId:this.form.proId,id:nodeId });
if (Array.isArray(res.data) && res.data.length > 0) {
res.data.map(item => {
const newFile = {
proFilesContentsId: item.id,
parParentName: item.parParentName,
parentName: item.parentName,
fileName: item.fileName,
proId: item.proId,
fileSourceId:item.fileId,
filePath:item.filePath
};
this.checkTreeData.push(newFile);
})
}
/* // 模拟添加文件数据到表格
const newFile = {
id: nodeId,
category: '分类' + (this.checkTreeData.length + 1),
archiveVolume: '案卷' + (this.checkTreeData.length + 1),
fileName: '文件' + (this.checkTreeData.length + 1) + '.pdf'
};
this.checkTreeData.push(newFile);
this.checkTreeData.push(newFile); */
// 触发表单验证
this.$nextTick(() => {
this.$refs.ruleForm.validateField('checkTreeData');