移交申请详情

src/api/filesTransfer/audit.js

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

src/router/index.js

@@ -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 }
       }
     ]
   }

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

@@ -75,8 +75,30 @@
                     </el-input>
                 </div>
                 <div class="approval-actions">
-                    <el-button type="primary" @click="handleApprove">同意</el-button>
+                    <el-button type="primary" @click="handleApprove" v-hasPermi="['transfer:apply:audit']">同意</el-button>
-                    <el-button type="danger" @click="handleReject">驳回</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;
 

src/views/filesTransfer/audit/config.js

@@ -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: '审批状态' },
+]

src/views/filesTransfer/audit/index.vue

@@ -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>

src/views/filesTransfer/detail-data.vue

@@ -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>