吉安感知网项目-前端
shuishen
2026-01-20 da48a901ca4c3c251927e3494ae655ef84828796
applications/task-work-order/src/views/orderView/orderDataManage/supplyAdd/ApplyViewDialog.vue
@@ -3,18 +3,17 @@
      <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>
                     <div class="step-person">{{ step.person }}</div>
                     <div class="step-time">{{ step.time }}</div>
                  </template>
               </el-step>
            </el-steps>
            <AuditRecord :demand-id="demandId" />
         </div>
         <!-- 右侧表单数据 -->
         <div class="detail-right">
            <!--            拒绝申请-->
            <div class="reject-reason-container" v-if="detailDemandStatus === '3'">
               <div class="label">拒绝原因</div>
               <div class="reject-reason">
                  {{reasonForRejection}}
               </div>
            </div>
            <div>
               <div class="label">需求详情</div>
               <div class="requirementsDetailsBox">
@@ -82,7 +81,8 @@
                  </div>
               </div>
            </div>
            <div>
            <!--            申请中-->
            <div v-if="detailDemandStatus === '1'">
               <div class="label">数据上传</div>
               <div class="upload-container">
                  <el-upload
@@ -118,11 +118,31 @@
                  </div>
               </div>
            </div>
            <div v-if="detailDemandStatus === '2'">
               <div class="label">数据详情</div>
               <el-table :data="tableData" border style="width: 100%">
                  <el-table-column prop="fileOriginalName" label="文件名称" />
                  <el-table-column prop="fileSize" label="文件大小" />
                  <el-table-column fixed="right" label="操作" min-width="100">
                     <template #default="scope">
                        <el-button link type="text" @click="downloadFileFromTable(scope.row)">下载</el-button>
                     </template>
                  </el-table-column>
               </el-table>
            </div>
         </div>
      </div>
      <template #footer>
         <el-button class="save-btn" color="#4C34FF" @click="rejectTheApplication">拒绝申请</el-button>
         <el-button color="#F2F3F5" @click="approvedByTheReview">审核通过</el-button>
         <template v-if="detailDemandStatus === '1'">
            <el-button class="save-btn" color="#4C34FF" @click="rejectTheApplication">拒绝申请</el-button>
            <el-button color="#F2F3F5" @click="approvedByTheReview">审核通过</el-button>
         </template>
         <template v-if="detailDemandStatus === '2'">
            <el-button class="save-btn" color="#4C34FF" @click="downloadAllFiles">全部下载</el-button>
         </template>
         <template v-if="detailDemandStatus === '3'">
            <el-button class="save-btn" color="#4C34FF" @click="visible =false">关闭</el-button>
         </template>
      </template>
   </el-dialog>
@@ -141,13 +161,17 @@
   putFileAttachApi,
   gdSupplyDemandAuditPassApi,
   gdSupplyDemandAuditRejectApi,
   gdSupplyDemandAuditListApi
   gdSupplyDemandAuditAttachmentListApi,
} from '@/views/orderView/orderDataManage/supplyAdd/supplyAddApi'
import { ElMessage } from 'element-plus'
import reasonForRejectionDialog from './reasonForRejectionDialog.vue'
import reasonForRejectionDialog from '@/views/orderView/orderDataManage/supplyAdd/reasonForRejectionDialog.vue'
import AuditRecord from '@/views/orderView/orderDataManage/supplyAdd/auditRecord.vue' // 导入新组件
const emit = defineEmits(['success'])
const dictObj = inject('dictObj')
const deptTree = inject('deptTree')
const detailDemandStatus = inject('detailDemandStatus')
const reasonForRejection = inject('reasonForRejection')
const demandId = ref('')
const visible = defineModel() // 弹框显隐
const formData = ref({}) // 表单数据
@@ -159,14 +183,7 @@
const responseData = ref([])
// 拒绝申请弹框控制
const rejectionDialogVisible = ref(false) // 拒绝申请弹框显隐
// 步骤条数据
const steps = ref([
   { title: '需求申请', person: '', time: '' },
   { title: '审核通过', person: '', time: '' }
])
// 当前激活步骤
const activeStep = ref(0)
const tableData = ref([]) // 附件表格数据
// 文件选择变化
const handleFileChange = (file, fileList) => {
   if (fileList.length > 0) {
@@ -278,6 +295,52 @@
   }
}
// 从表格下载文件
const downloadFileFromTable = file => {
   if (file.fileUrl) {
      // 创建一个隐藏的a标签来触发下载
      const a = document.createElement('a')
      a.href = file.fileUrl
      a.download = file.name || 'attachment'
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
   } else {
      ElMessage.warning('文件链接无效')
   }
}
// 下载所有文件
const downloadAllFiles = () => {
   if (!tableData.value || tableData.value.length === 0) {
      ElMessage.warning('没有可下载的文件')
      return
   }
   // 统计有效文件数量
   const validFiles = tableData.value.filter(file => file.fileUrl)
   if (validFiles.length === 0) {
      ElMessage.warning('所有文件链接均无效')
      return
   }
   ElMessage.success(`开始下载${validFiles.length}个文件`)
   // 依次下载每个文件(添加延迟以避免浏览器限制)
   validFiles.forEach((file, index) => {
      setTimeout(() => {
         if (file.fileUrl) {
            const a = document.createElement('a')
            a.href = file.fileUrl
            a.download = file.name || `attachment_${index + 1}`
            document.body.appendChild(a)
            a.click()
            document.body.removeChild(a)
         }
      }, index * 300) // 300ms delay between downloads
   })
}
// 根据部门ID获取部门名称
function getDeptNameById(deptId, deptList) {
   // 处理类型转换,确保比较的是相同类型
@@ -309,7 +372,6 @@
   if (row?.id) {
      await loadDetail(row.id)
      demandId.value = row.id
      console.log('row.id', demandId.value)
   }
   visible.value = true
}
@@ -323,95 +385,30 @@
      data.responsibleDeptName = getDeptNameById(data.responsibleDeptId, deptTree.value)
   }
   formData.value = data
   // 加载审核记录
   await loadAuditRecords(id)
   // 加载附件数据
   await loadAttachments(id)
}
// 加载审核记录
async function loadAuditRecords(demandId) {
// 加载附件数据
async function loadAttachments(demandId) {
   try {
      const res = await gdSupplyDemandAuditListApi({ demandId })
      const auditRecords = res?.data?.data ?? []
      // 处理审核记录为步骤格式
      processAuditRecords(auditRecords)
      const res = await gdSupplyDemandAuditAttachmentListApi({ demandId: demandId })
      const attachments = res?.data?.data ?? []
      // 格式化附件数据以匹配表格结构
      tableData.value = attachments.map(attachment => ({
         fileOriginalName: attachment.fileOriginalName ,
         fileSize: attachment.fileSize ? `${attachment.fileSize}M` : '',
         fileUrl: attachment.fileUrl,
         id: attachment.id,
      }))
   } catch (error) {
      console.error('加载审核记录失败:', error)
      ElMessage.error('加载审核记录失败,请重试')
      // 保持默认步骤,不做清空
      activeStep.value = 0
      console.error('加载附件数据失败:', error)
      ElMessage.error('加载附件数据失败,请重试')
      tableData.value = []
   }
}
// 处理审核记录为步骤格式
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 = () => {
@@ -425,8 +422,6 @@
// 处理拒绝申请确认
const handleRejectionConfirm = reason => {
   const id = [responseData.value.attachId]
   console.log('demandId.value', demandId.value)
   gdSupplyDemandAuditRejectApi({ attachIds: id, auditOpinion: reason, demandId: demandId.value })
      .then(() => {
         ElMessage.success('拒绝申请成功')
@@ -473,8 +468,15 @@
/* 右侧表单 */
.detail-right {
   width: 75%;
   .reject-reason {
      margin-bottom: 20px;
      background: #f2f3f5;
      border-radius: 2px 2px 2px 2px;
      padding: 15px;
      height: 100px;
   }
   .requirementsDetailsBox {
      background: #F2F3F5;
      background: #f2f3f5;
      border-radius: 2px 2px 2px 2px;
   }
@@ -517,57 +519,23 @@
   }
}
/* 步骤条样式 */
:deep(.el-steps) {
   align-items: flex-start;
}
:deep(.el-step) {
   margin-bottom: 90px;
}
:deep(.el-step__title) {
   font-size: 14px;
   font-weight: 500;
   margin-bottom: 8px;
}
/* 步骤描述 */
.step-person {
   font-size: 13px;
   color: #333;
   margin-bottom: 4px;
}
.step-time {
   font-size: 12px;
   color: #909399;
}
/* 表单样式 */
.label {
   font-weight: 500;
   margin-bottom: 8px;
   color: #333;
}
/* 上传容器样式 */
.upload-container {
   padding: 15px;
   background: #F2F3F5;
   background: #f2f3f5;
   border-radius: 2px 2px 2px 2px;
}
.uploaded-files {
   margin-top: 15px;
   h4 {
      margin-bottom: 10px;
      font-size: 14px;
      color: #333333;
      font-weight: 500;
   }
   .file-item {
      display: flex;
      align-items: center;
@@ -575,7 +543,7 @@
      background: white;
      border-radius: 4px;
      margin-bottom: 5px;
      span {
         flex: 1;
         color: #333;
@@ -600,4 +568,4 @@
:deep(.el-upload-list) {
   margin-top: 10px;
}
</style>
</style>