吉安感知网项目-前端
罗广辉
2026-01-20 bcbcc546577c7c6643e7f0d4ac366f8a013bd306
applications/task-work-order/src/views/orderView/orderDataManage/supplyAdd/ApplyViewDialog.vue
@@ -1,14 +1,9 @@
<template>
   <el-dialog
      class="gd-dialog"
      v-model="visible"
      :title="'查看申请'"
      @closed="visible = false"
      destroy-on-close
   >
   <el-dialog class="gd-dialog" v-model="visible" :title="'查看申请'" @closed="visible = false" destroy-on-close>
   <div class="detail-container">
      <!-- 左侧步骤条 -->
         <!-- 左侧审批记录 -->
      <div class="detail-left">
            <div class="label">审批记录</div>
         <el-steps :active="activeStep" direction="vertical" align-center>
            <el-step v-for="(step, index) in steps" :key="index" :title="step.title">
               <template #description>
@@ -105,17 +100,10 @@
                 <el-button type="primary">选择文件</el-button>
               </template>
               <template #tip>
                 <div class="el-upload__tip">
                  请上传压缩文件 (.zip/.rar/.7z/.tar/.gz)
                 </div>
                        <div class="el-upload__tip">请上传压缩文件 (.zip/.rar/.7z/.tar/.gz)</div>
               </template>
              </el-upload>
              <el-button
               type="success"
               :disabled="!selectedFile"
               @click="handleUpload"
               style="margin-top: 10px;"
              >
                  <el-button type="success" :disabled="!selectedFile" @click="handleUpload" style="margin-top: 10px">
               上传文件
              </el-button>
              
@@ -124,41 +112,43 @@
               <h4>已上传文件:</h4>
               <div v-for="(file, index) in uploadedFiles" :key="index" class="file-item">
                 <span>{{ file.originalName }}</span>
                 <el-button type="text" @click="viewFile(file)" style="margin-left: 10px;">查看</el-button>
                 <el-button type="text" @click="downloadFile(file)" style="margin-left: 5px;">下载</el-button>
                        <el-button type="text" @click="viewFile(file)" style="margin-left: 10px">查看</el-button>
                        <el-button type="text" @click="downloadFile(file)" style="margin-left: 5px">下载</el-button>
               </div>
              </div>
            </div>
         </div>
      </div>
   </div>
      <template #footer>
         <el-button
            class="save-btn"
            color="#4C34FF"
            @click="rejectTheApplication"
         >
            拒绝申请
         </el-button>
         <el-button class="save-btn" color="#4C34FF" @click="rejectTheApplication">拒绝申请</el-button>
         <el-button color="#F2F3F5"  @click="approvedByTheReview">审核通过</el-button>
      </template>
   </el-dialog>
   <!-- 拒绝申请弹框 -->
   <reasonForRejectionDialog
      v-if="rejectionDialogVisible"
      v-model="rejectionDialogVisible"
      @confirm="handleRejectionConfirm"
   />
</template>
<script setup>
import { ref, inject } from 'vue'
import { getDictLabel } from '@ztzf/utils'
import { gdSupplyDemandDetailApi, putFileAttachApi,gdSupplyDemandAuditPassApi,gdSupplyDemandAuditRejectApi } from '@/views/orderView/orderDataManage/supplyAdd/supplyAddApi'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
   gdSupplyDemandDetailApi,
   putFileAttachApi,
   gdSupplyDemandAuditPassApi,
   gdSupplyDemandAuditRejectApi,
   gdSupplyDemandAuditListApi
} from '@/views/orderView/orderDataManage/supplyAdd/supplyAddApi'
import { ElMessage } from 'element-plus'
import reasonForRejectionDialog from './reasonForRejectionDialog.vue'
const emit = defineEmits(['success'])
const dictObj = inject('dictObj')
const deptTree = inject('deptTree')
const demandId = ref('')
const visible = defineModel() // 弹框显隐
const formData = ref({}) // 表单数据
const uploadRef = ref() // 上传组件引用
@@ -167,10 +157,12 @@
const uploadedFiles = ref([]) // 已上传文件列表
const uploadLoading = ref(false) // 上传加载状态
const responseData = ref([])
// 拒绝申请弹框控制
const rejectionDialogVisible = ref(false) // 拒绝申请弹框显隐
// 步骤条数据
const steps = ref([
   { title: '需求申请', person: '张三', time: '2025-03-31 12:23:30' },
   { title: '审核通过', person: '', time: '' },
   { title: '需求申请', person: '', time: '' },
   { title: '审核通过', person: '', time: '' }
])
// 当前激活步骤
const activeStep = ref(0) 
@@ -190,7 +182,7 @@
}
// 上传前验证
const beforeFileUpload = (file) => {
const beforeFileUpload = file => {
  const allowedExtensions = ['.zip', '.rar', '.7z', '.tar', '.gz']
  const fileExtension = '.' + file.name.split('.').pop().toLowerCase()
  
@@ -233,14 +225,14 @@
    
    if (response.data && response.data.success) {
      const fileData = response.data.data
      console.log('成功数据',fileData);
         console.log('成功数据', fileData)
     responseData.value = fileData
      // 添加到已上传文件列表
      uploadedFiles.value.push({
        name: fileData.name,
        originalName: fileData.originalName,
        link: fileData.link,
        attachId: fileData.attachId
            attachId: fileData.attachId,
      })
      
      ElMessage.success('文件上传成功!')
@@ -251,7 +243,6 @@
      
      // 这里可以将附件ID保存到表单数据中,供后续提交使用
      // formData.value.attachmentId = fileData.attachId
    } else {
      ElMessage.error(response.data?.msg || '文件上传失败')
    }
@@ -264,7 +255,7 @@
}
// 查看文件
const viewFile = (file) => {
const viewFile = file => {
  if (file.link) {
    window.open(file.link, '_blank')
  } else {
@@ -273,7 +264,7 @@
}
// 下载文件
const downloadFile = (file) => {
const downloadFile = file => {
  if (file.link) {
    // 创建一个隐藏的a标签来触发下载
    const a = document.createElement('a')
@@ -317,8 +308,8 @@
async function open({ row }) {
   if (row?.id) {
      await loadDetail(row.id)
      // 可以在这里加载已上传的文件列表
      // loadUploadedFiles(row.id)
      demandId.value = row.id
      console.log('row.id', demandId.value)
   }
   visible.value = true
}
@@ -332,36 +323,132 @@
      data.responsibleDeptName = getDeptNameById(data.responsibleDeptId, deptTree.value)
   }
   formData.value = data
   // 加载审核记录
   await loadAuditRecords(id)
}
// 如果需要加载已上传的文件列表
const loadUploadedFiles = async (id) => {
// 加载审核记录
async function loadAuditRecords(demandId) {
  try {
    // 这里根据实际情况调用接口获取已上传的文件列表
    // const response = await getFileListApi({ id })
    // if (response.data?.success) {
    //   uploadedFiles.value = response.data.data || []
    // }
      const res = await gdSupplyDemandAuditListApi({ demandId })
      const auditRecords = res?.data?.data ?? []
      // 处理审核记录为步骤格式
      processAuditRecords(auditRecords)
  } catch (error) {
    console.error('加载已上传文件失败:', error)
      console.error('加载审核记录失败:', error)
      ElMessage.error('加载审核记录失败,请重试')
      // 保持默认步骤,不做清空
      activeStep.value = 0
  }
}
// 处理审核记录为步骤格式
function processAuditRecords(records) {
   // 重置为默认步骤结构
   steps.value = [
      { title: '需求申请', person: '', time: '' },
      { title: '审核通过', person: '', time: '' }
   ]
   if (!records || records.length === 0) {
      // 没有审核记录,保持默认步骤
      activeStep.value = 0
      return
   }
   // 按创建时间排序(最新的在最后)
   const sortedRecords = [...records].sort((a, b) => new Date(a.createTime) - new Date(b.createTime))
   // 处理需求申请步骤(第一个步骤)
   const demandRecord = sortedRecords.find(record => record.auditStatus === '0') || sortedRecords[0]
   if (demandRecord) {
      steps.value[0] = {
         title: '需求申请',
         person: demandRecord.createUser ? `${demandRecord.createUser}` : '',
         time: demandRecord.createTime ? demandRecord.createTime : ''
      }
   }
   // 处理审核步骤(第二个步骤)
   const latestRecord = sortedRecords[sortedRecords.length - 1]
   if (latestRecord) {
      // 根据最新审核结果设置标题
      let auditTitle = '审核通过'
      if (latestRecord.auditStatus === '2') {
         auditTitle = '审核驳回'
         // 更新第二个步骤的标题为审核驳回
         steps.value[1].title = auditTitle
      }
      // 添加审核意见(如果有)
      if (latestRecord.auditOpinion) {
         steps.value[1].title += ` - ${latestRecord.auditOpinion}`
      }
      // 更新审核步骤的信息
      steps.value[1].person = latestRecord.createUser ? `${latestRecord.createUser}` : ''
      steps.value[1].time = latestRecord.createTime ? latestRecord.createTime : ''
      // 根据最新审核结果设置activeStep
      switch (latestRecord.auditStatus) {
         case '0':
            // 审核中,高亮第一个步骤
            activeStep.value = 0
            break
         case '1':
            // 审核通过,高亮第二个步骤
            activeStep.value = 1
            break
         case '2':
            // 审核驳回,高亮第二个步骤
            activeStep.value = 1
            break
         default:
            // 默认高亮第一个步骤
            activeStep.value = 0
      }
   }
}
// 拒绝申请
const rejectTheApplication = () => {
   // const id = ['2013182736046530562']
   if (responseData.value.length === 0) {
      return ElMessage.warning('请上传数据')
   }
   // 打开拒绝申请弹框
   rejectionDialogVisible.value = true
}
// 处理拒绝申请确认
const handleRejectionConfirm = reason => {
   const id = [responseData.value.attachId]
   console.log('responseData.value',responseData.value)
   gdSupplyDemandAuditRejectApi({ attachIds:id }).then(() => {
   console.log('demandId.value', demandId.value)
   gdSupplyDemandAuditRejectApi({ attachIds: id, auditOpinion: reason, demandId: demandId.value })
      .then(() => {
      ElMessage.success('拒绝申请成功')
      visible.value = false
         emit('success')
      })
      .catch(error => {
         console.error('拒绝申请失败:', error)
         ElMessage.error('拒绝申请失败,请重试')
         emit('success')
   })
}
// 审核通过
const approvedByTheReview = () => {
   if (responseData.value.length === 0) {
      return ElMessage.warning('请上传数据')
   }
   const id = [responseData.value.attachId]
   gdSupplyDemandAuditPassApi({ id }).then(() => {
   gdSupplyDemandAuditPassApi({ attachIds: id, demandId: demandId.value }).then(() => {
      ElMessage.success('审核通过成功')
      visible.value = false
      emit('success')
   })
}
@@ -436,7 +523,7 @@
}
:deep(.el-step) {
   margin-bottom: 20px;
   margin-bottom: 90px;
}
:deep(.el-step__title) {