吉安感知网项目-前端
罗广辉
2026-01-20 bcbcc546577c7c6643e7f0d4ac366f8a013bd306
applications/task-work-order/src/views/orderView/orderDataManage/supplyAdd/ApplyViewDialog.vue
@@ -1,164 +1,154 @@
<template>
   <el-dialog
      class="gd-dialog"
      v-model="visible"
      :title="'查看申请'"
      @closed="visible = false"
      destroy-on-close
   >
   <div class="detail-container">
      <!-- 左侧步骤条 -->
      <div class="detail-left">
         <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>
      </div>
      <!-- 右侧表单数据 -->
      <div class="detail-right">
      <div>
         <div class="label">需求详情</div>
         <div class="requirementsDetailsBox">
            <div class="detail-table">
               <div class="detail-row">
                  <div class="detail-cell">
                     <span class="cell-label">需求名称</span>
                     <span class="cell-value">{{ formData.demandName }}</span>
                  </div>
                  <div class="detail-cell">
                     <span class="cell-label">需求类型</span>
                     <span class="cell-value">{{ getDictLabel(formData.demandType, dictObj.requirementType) }}</span>
   <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>
                     <div class="step-person">{{ step.person }}</div>
                     <div class="step-time">{{ step.time }}</div>
                  </template>
               </el-step>
            </el-steps>
         </div>
         <!-- 右侧表单数据 -->
         <div class="detail-right">
            <div>
               <div class="label">需求详情</div>
               <div class="requirementsDetailsBox">
                  <div class="detail-table">
                     <div class="detail-row">
                        <div class="detail-cell">
                           <span class="cell-label">需求名称</span>
                           <span class="cell-value">{{ formData.demandName }}</span>
                        </div>
                        <div class="detail-cell">
                           <span class="cell-label">需求类型</span>
                           <span class="cell-value">{{ getDictLabel(formData.demandType, dictObj.requirementType) }}</span>
                        </div>
                     </div>
                     <div class="detail-row">
                        <div class="detail-cell">
                           <span class="cell-label">需求联系人</span>
                           <span class="cell-value">{{ formData.contactPerson }}</span>
                        </div>
                        <div class="detail-cell">
                           <span class="cell-label">需求联系人电话</span>
                           <span class="cell-value">{{ formData.contactPhone }}</span>
                        </div>
                     </div>
                     <div class="detail-row">
                        <div class="detail-cell">
                           <span class="cell-label">需求邮箱</span>
                           <span class="cell-value">{{ formData.contactEmail }}</span>
                        </div>
                        <div class="detail-cell">
                           <span class="cell-label">更新周期</span>
                           <span class="cell-value">{{ formData.updateCycle }}</span>
                        </div>
                     </div>
                     <div class="detail-row">
                        <div class="detail-cell">
                           <span class="cell-label">申请依据</span>
                           <span class="cell-value">{{ formData.applyBasis }}</span>
                        </div>
                        <div class="detail-cell">
                           <span class="cell-label">共享类型</span>
                           <span class="cell-value">{{ getDictLabel(formData.shareType, dictObj.sharedType) }}</span>
                        </div>
                     </div>
                     <div class="detail-row">
                        <div class="detail-cell">
                           <span class="cell-label">应用场景类型</span>
                           <span class="cell-value">{{ getDictLabel(formData.applicationScene, dictObj.appSceneType) }}</span>
                        </div>
                        <div class="detail-cell">
                           <span class="cell-label">责任部门</span>
                           <span class="cell-value">{{ formData.responsibleDeptName }}</span>
                        </div>
                     </div>
                     <div class="detail-row">
                        <div class="detail-cell">
                           <span class="cell-label">数据来源依据</span>
                           <span class="cell-value">{{ formData.dataSource }}</span>
                        </div>
                        <div class="detail-cell">
                           <span class="cell-label">需求信息项</span>
                           <span class="cell-value">{{ formData.demandInfo }}</span>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="detail-row">
                  <div class="detail-cell">
                     <span class="cell-label">需求联系人</span>
                     <span class="cell-value">{{ formData.contactPerson }}</span>
                  </div>
                  <div class="detail-cell">
                     <span class="cell-label">需求联系人电话</span>
                     <span class="cell-value">{{ formData.contactPhone }}</span>
                  </div>
               </div>
               <div class="detail-row">
                  <div class="detail-cell">
                     <span class="cell-label">需求邮箱</span>
                     <span class="cell-value">{{ formData.contactEmail }}</span>
                  </div>
                  <div class="detail-cell">
                     <span class="cell-label">更新周期</span>
                     <span class="cell-value">{{ formData.updateCycle }}</span>
                  </div>
               </div>
               <div class="detail-row">
                  <div class="detail-cell">
                     <span class="cell-label">申请依据</span>
                     <span class="cell-value">{{ formData.applyBasis }}</span>
                  </div>
                  <div class="detail-cell">
                     <span class="cell-label">共享类型</span>
                     <span class="cell-value">{{ getDictLabel(formData.shareType, dictObj.sharedType) }}</span>
                  </div>
               </div>
               <div class="detail-row">
                  <div class="detail-cell">
                     <span class="cell-label">应用场景类型</span>
                     <span class="cell-value">{{ getDictLabel(formData.applicationScene, dictObj.appSceneType) }}</span>
                  </div>
                  <div class="detail-cell">
                     <span class="cell-label">责任部门</span>
                     <span class="cell-value">{{ formData.responsibleDeptName }}</span>
                  </div>
               </div>
               <div class="detail-row">
                  <div class="detail-cell">
                     <span class="cell-label">数据来源依据</span>
                     <span class="cell-value">{{ formData.dataSource }}</span>
                  </div>
                  <div class="detail-cell">
                     <span class="cell-label">需求信息项</span>
                     <span class="cell-value">{{ formData.demandInfo }}</span>
            </div>
            <div>
               <div class="label">数据上传</div>
               <div class="upload-container">
                  <el-upload
                     ref="uploadRef"
                     :auto-upload="false"
                     :limit="1"
                     :on-change="handleFileChange"
                     :on-remove="handleFileRemove"
                     :before-upload="beforeFileUpload"
                     :file-list="fileList"
                     accept=".zip,.rar,.7z,.tar,.gz"
                     class="upload-demo"
                  >
                     <template #trigger>
                        <el-button type="primary">选择文件</el-button>
                     </template>
                     <template #tip>
                        <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>
                  <!-- 已上传文件列表 -->
                  <div v-if="uploadedFiles.length > 0" class="uploaded-files">
                     <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>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
         <div>
            <div class="label">数据上传</div>
            <div class="upload-container">
               <el-upload
               ref="uploadRef"
               :auto-upload="false"
               :limit="1"
               :on-change="handleFileChange"
               :on-remove="handleFileRemove"
               :before-upload="beforeFileUpload"
               :file-list="fileList"
               accept=".zip,.rar,.7z,.tar,.gz"
               class="upload-demo"
              >
               <template #trigger>
                 <el-button type="primary">选择文件</el-button>
               </template>
               <template #tip>
                 <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>
              <!-- 已上传文件列表 -->
              <div v-if="uploadedFiles.length > 0" class="uploaded-files">
               <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>
               </div>
              </div>
            </div>
         </div>
      </div>
   </div>
      <template #footer>
         <el-button
            class="save-btn"
            color="#4C34FF"
            @click="rejectTheApplication"
         >
            拒绝申请
         </el-button>
         <el-button color="#F2F3F5"  @click="approvedByTheReview">审核通过</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,131 +157,132 @@
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)
const activeStep = ref(0)
// 文件选择变化
const handleFileChange = (file, fileList) => {
  if (fileList.length > 0) {
    selectedFile.value = file.raw
  } else {
    selectedFile.value = null
  }
   if (fileList.length > 0) {
      selectedFile.value = file.raw
   } else {
      selectedFile.value = null
   }
}
// 文件移除
const handleFileRemove = () => {
  selectedFile.value = null
   selectedFile.value = null
}
// 上传前验证
const beforeFileUpload = (file) => {
  const allowedExtensions = ['.zip', '.rar', '.7z', '.tar', '.gz']
  const fileExtension = '.' + file.name.split('.').pop().toLowerCase()
  if (!allowedExtensions.includes(fileExtension)) {
    ElMessage.error('只能上传压缩文件格式:.zip/.rar/.7z/.tar/.gz')
    return false
  }
  // 文件大小限制,这里限制为100MB
  const maxSize = 100 * 1024 * 1024 // 100MB
  if (file.size > maxSize) {
    ElMessage.error('文件大小不能超过100MB')
    return false
  }
  return true
const beforeFileUpload = file => {
   const allowedExtensions = ['.zip', '.rar', '.7z', '.tar', '.gz']
   const fileExtension = '.' + file.name.split('.').pop().toLowerCase()
   if (!allowedExtensions.includes(fileExtension)) {
      ElMessage.error('只能上传压缩文件格式:.zip/.rar/.7z/.tar/.gz')
      return false
   }
   // 文件大小限制,这里限制为100MB
   const maxSize = 100 * 1024 * 1024 // 100MB
   if (file.size > maxSize) {
      ElMessage.error('文件大小不能超过100MB')
      return false
   }
   return true
}
// 处理文件上传
const handleUpload = async () => {
  if (!selectedFile.value) {
    ElMessage.warning('请先选择文件')
    return
  }
   if (!selectedFile.value) {
      ElMessage.warning('请先选择文件')
      return
   }
  // 再次验证文件类型
  if (!beforeFileUpload(selectedFile.value)) {
    return
  }
   // 再次验证文件类型
   if (!beforeFileUpload(selectedFile.value)) {
      return
   }
  try {
    uploadLoading.value = true
    // 创建FormData对象
    const formData = new FormData()
    formData.append('file', selectedFile.value)
    // 调用上传接口
    const response = await putFileAttachApi(formData)
    if (response.data && response.data.success) {
      const fileData = response.data.data
      console.log('成功数据',fileData);
     responseData.value = fileData
      // 添加到已上传文件列表
      uploadedFiles.value.push({
        name: fileData.name,
        originalName: fileData.originalName,
        link: fileData.link,
        attachId: fileData.attachId
      })
      ElMessage.success('文件上传成功!')
      // 清空上传列表
      uploadRef.value.clearFiles()
      selectedFile.value = null
      // 这里可以将附件ID保存到表单数据中,供后续提交使用
      // formData.value.attachmentId = fileData.attachId
    } else {
      ElMessage.error(response.data?.msg || '文件上传失败')
    }
  } catch (error) {
    console.error('文件上传失败:', error)
    ElMessage.error('文件上传失败,请重试')
  } finally {
    uploadLoading.value = false
  }
   try {
      uploadLoading.value = true
      // 创建FormData对象
      const formData = new FormData()
      formData.append('file', selectedFile.value)
      // 调用上传接口
      const response = await putFileAttachApi(formData)
      if (response.data && response.data.success) {
         const fileData = response.data.data
         console.log('成功数据', fileData)
         responseData.value = fileData
         // 添加到已上传文件列表
         uploadedFiles.value.push({
            name: fileData.name,
            originalName: fileData.originalName,
            link: fileData.link,
            attachId: fileData.attachId,
         })
         ElMessage.success('文件上传成功!')
         // 清空上传列表
         uploadRef.value.clearFiles()
         selectedFile.value = null
         // 这里可以将附件ID保存到表单数据中,供后续提交使用
         // formData.value.attachmentId = fileData.attachId
      } else {
         ElMessage.error(response.data?.msg || '文件上传失败')
      }
   } catch (error) {
      console.error('文件上传失败:', error)
      ElMessage.error('文件上传失败,请重试')
   } finally {
      uploadLoading.value = false
   }
}
// 查看文件
const viewFile = (file) => {
  if (file.link) {
    window.open(file.link, '_blank')
  } else {
    ElMessage.warning('文件链接无效')
  }
const viewFile = file => {
   if (file.link) {
      window.open(file.link, '_blank')
   } else {
      ElMessage.warning('文件链接无效')
   }
}
// 下载文件
const downloadFile = (file) => {
  if (file.link) {
    // 创建一个隐藏的a标签来触发下载
    const a = document.createElement('a')
    a.href = file.link
    a.download = file.originalName || file.name
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
  } else {
    ElMessage.warning('文件链接无效')
  }
const downloadFile = file => {
   if (file.link) {
      // 创建一个隐藏的a标签来触发下载
      const a = document.createElement('a')
      a.href = file.link
      a.download = file.originalName || file.name
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
   } else {
      ElMessage.warning('文件链接无效')
   }
}
// 根据部门ID获取部门名称
function getDeptNameById(deptId, deptList) {
   // 处理类型转换,确保比较的是相同类型
   const targetId = String(deptId)
   // 递归遍历部门树
   function findDept(deptList) {
      for (const dept of deptList) {
@@ -305,11 +296,11 @@
      }
      return ''
   }
   if (!targetId || !Array.isArray(deptList) || deptList.length === 0) {
      return ''
   }
   return findDept(deptList)
}
@@ -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) => {
  try {
    // 这里根据实际情况调用接口获取已上传的文件列表
    // const response = await getFileListApi({ id })
    // if (response.data?.success) {
    //   uploadedFiles.value = response.data.data || []
    // }
  } catch (error) {
    console.error('加载已上传文件失败:', error)
  }
// 加载审核记录
async function loadAuditRecords(demandId) {
   try {
      const res = await gdSupplyDemandAuditListApi({ demandId })
      const auditRecords = res?.data?.data ?? []
      // 处理审核记录为步骤格式
      processAuditRecords(auditRecords)
   } catch (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(() => {
      ElMessage.success('拒绝申请成功')
      visible.value = false
   })
   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) {