From eb3c677d70395c02a20a287a8f78f78f988fae1b Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Fri, 19 Sep 2025 13:42:48 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E4=BA=A4=E7=94=B3=E8=AF=B7=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/filesTransfer/apply.js                |   9 +
 src/router/index.js                           |   2 +-
 src/views/filesTransfer/apply/detail-data.vue | 406 +++++++++++++++++-
 .../filesTransfer/apply/prop/applyForm.vue    |  99 +++--
 4 files changed, 478 insertions(+), 38 deletions(-)

diff --git a/src/api/filesTransfer/apply.js b/src/api/filesTransfer/apply.js
index 839675a..5d050fc 100644
--- a/src/api/filesTransfer/apply.js
+++ b/src/api/filesTransfer/apply.js
@@ -52,4 +52,13 @@ export function getFileManageTreeApi(params) {
         method: 'get',
         params:params,
     })
+}
+
+// 获取移交档案文件
+export function getTransferApplyFilesApi(params) {
+    return request({
+        url: '/smartArchives/transferApply/getTransferApplyFiles',
+        method: 'get',
+        params:params,
+    })
 }
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 5caa8f9..9959398 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -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 }
       }
     ]
   }
diff --git a/src/views/filesTransfer/apply/detail-data.vue b/src/views/filesTransfer/apply/detail-data.vue
index 3972f0e..f689b0b 100644
--- a/src/views/filesTransfer/apply/detail-data.vue
+++ b/src/views/filesTransfer/apply/detail-data.vue
@@ -1,16 +1,418 @@
 <template>
-    <div>
+    <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>
\ No newline at end of file
+</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>
\ No newline at end of file
diff --git a/src/views/filesTransfer/apply/prop/applyForm.vue b/src/views/filesTransfer/apply/prop/applyForm.vue
index 414a4a8..3337a42 100644
--- a/src/views/filesTransfer/apply/prop/applyForm.vue
+++ b/src/views/filesTransfer/apply/prop/applyForm.vue
@@ -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";
@@ -89,7 +80,7 @@ export default {
     name: "ApplyForm",
     props: ["width", "dataForm", "title", "disabled", "isAdd", "rowData"],
     dicts: ['data_class_type'],
-    components: { Treeselect ,FileTree},
+    components: { Treeselect, FileTree },
     data() {
         return {
             lDialog: this.width > 500 ? "w700" : "w500",
@@ -108,15 +99,15 @@ export default {
                     { required: true, message: '请选择项目', trigger: 'change' }
                 ],
                 checkTreeData: [
-                    { 
+                    {
                         validator: (rule, value, callback) => {
                             if (!this.checkTreeData || this.checkTreeData.length === 0) {
                                 callback(new Error('请选择移交档案'));
                             } else {
                                 callback();
                             }
-                        }, 
-                        trigger: 'change' 
+                        },
+                        trigger: 'change'
                     }
                 ],
                 deptId: [
@@ -155,14 +146,18 @@ export default {
                 };
             }
         },
+        handleProChange(value){
+            console.log(value);
+            this.checkTreeData = [];
+        },
         // 选择移交档案
-        handleAddFile(){
-            if(!this.form.proId){
+        handleAddFile() {
+            if (!this.form.proId) {
                 return this.$modal.msgError('请选择项目');
             }
             const proId = this.form.proId;
             this.fileTreeTitle = "选择";
-            this.fileTreeRow = {proId};
+            this.fileTreeRow = { proId };
             this.isflag = true;
         },
         closeDialog() {
@@ -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');