吉安感知网项目-前端
blame | history | patch | commit | commitdiff | ignore whitespace
shuishen
7 days ago 6e88705bd5b443a259b24c17c8a299765d059d96 
 applications/task-work-order/src/views/orderView/orderDataManage/supplyAdd/ApplyViewDialog.vue


@@ -1,5 +1,5 @@


<template>


   <el-dialog class="gd-dialog" v-model="visible" :title="'查看申请'" @closed="visible = false" destroy-on-close>


   <el-dialog width="80%" class="gd-dialog" :close-on-click-modal="false" v-model="visible" :title="'查看'" @closed="visible = false" destroy-on-close>


      <div class="detail-container">


         <!-- 左侧审批记录 -->


         <div class="detail-left">


@@ -9,85 +9,70 @@


         <div class="detail-right">


            <!--            拒绝申请-->


            <div class="reject-reason-container" v-if="detailDemandStatus === '3'">


               <div class="label">拒绝原因</div>


               <div class="detail-title">拒绝原因</div>


               <div class="reject-reason">


                  {{reasonForRejection}}


               </div>


            </div>


            <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-title">需求详情</div>


            <el-row class="detail-row-view">


                     <el-col :span="12">


                        <div class="label">需求名称</div>


                        <div class="val">{{ formData.demandName }}</div>


                     </el-col>


                     <el-col :span="12">


                        <div class="label">需求类型</div>


                        <div class="val">{{ getDictLabel(formData.demandType, dictObj.requirementType) }}</div>


                     </el-col>


                     <el-col :span="12">


                        <div class="label">需求联系人</div>


                        <div class="val">{{ formData.contactPerson }}</div>


                     </el-col>


                     <el-col :span="12">


                        <div class="label" >需求联系人电话</div>


                        <div class="val">{{ formData.contactPhone }}</div>


                     </el-col>


                     <el-col :span="12">


                        <div class="label">需求邮箱</div>


                        <div class="val">{{ formData.contactEmail }}</div>


                     </el-col>


                     <el-col :span="12">


                        <div class="label">更新周期</div>


                        <div class="val">{{ formData.updateCycle }}</div>


                     </el-col>


                     <el-col :span="12">


                        <div class="label">申请依据</div>


                        <div class="val">{{ formData.applyBasis }}</div>


                     </el-col>


                     <el-col :span="12">


                        <div class="label">共享类型</div>


                        <div class="val">{{ getDictLabel(formData.shareType, dictObj.sharedType) }}</div>


                     </el-col>


                     <el-col :span="12">


                        <div class="label">应用场景类型</div>


                        <div class="val">{{ getDictLabel(formData.applicationScene, dictObj.appSceneType) }}</div>


                     </el-col>


                     <el-col :span="12">


                        <div class="label">责任部门</div>


                        <div class="val">{{ formData.responsibleDeptName }}</div>


                     </el-col>


                     <el-col :span="12">


                        <div class="label">数据来源依据</div>


                        <div class="val">{{ formData.dataSource }}</div>


                     </el-col>


                     <el-col :span="12">


                        <div class="label">需求信息项</div>


                        <div class="val">{{ formData.demandInfo }}</div>


                     </el-col>


                  </el-row>


            </div>


            <!--            申请中-->


            <div v-if="detailDemandStatus === '1'">


               <div class="label">数据上传</div>


            <div v-if="detailDemandStatus === '1' && (permissionList.approvedBtn || permissionList.rejectBtn)">


               <div class="detail-title" :style="{ marginTop:pxToRem(10)}">数据上传</div>


               <div class="upload-container">


                  <el-upload


                  :http-request="handleHttpRequest"


                  :limit="3"


                  :on-success="handleUploadSuccess"


                  :on-error="handleUploadError"


                  :on-remove="handleFileRemove"


@@ -100,29 +85,19 @@


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




                  <!-- 已上传文件列表 -->


<!--                  <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 v-if="detailDemandStatus === '2'">


               <div class="label">数据详情</div>


               <el-table :data="tableData" border style="width: 100%">


               <div class="detail-title" :style="{ marginTop:pxToRem(20)}">数据详情</div>


               <el-table :data="tableData"  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>


                        <el-link  type="primary"  @click="downloadFileFromTable(scope.row)">下载</el-link>


                     </template>


                  </el-table-column>


               </el-table>


@@ -130,16 +105,16 @@


         </div>


      </div>


      <template #footer>


         <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 v-if="detailDemandStatus === '1' ">


            <el-button v-if="permissionList.rejectBtn" color="#F2F3F5" :loading="submitting || uploading" :disabled="submitting || uploading" @click="rejectTheApplication">拒绝申请</el-button>


            <el-button v-if="permissionList.approvedBtn" class="" color="#4C34FF" :loading="submitting || uploading" :disabled="submitting || uploading" @click="approvedByTheReview">审核通过</el-button>


         </template>


         <template v-if="detailDemandStatus === '2'">


            <el-button class="save-btn" color="#4C34FF" @click="downloadAllFiles">全部下载</el-button>


            <el-button class="" 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 v-if="detailDemandStatus === '3'">-->


<!--            <el-button class="" color="#4C34FF" @click="visible =false">关闭</el-button>-->


<!--         </template>-->


      </template>


   </el-dialog>




@@ -152,6 +127,7 @@


</template>




<script setup>


import { pxToRem } from '@/utils/rem'


import { getDictLabel } from '@ztzf/utils'


import {


   gdSupplyDemandDetailApi,


@@ -163,7 +139,9 @@


import { ElMessage } from 'element-plus'


import reasonForRejectionDialog from '@/views/orderView/orderDataManage/supplyAdd/reasonForRejectionDialog.vue'


import AuditRecord from '@/views/orderView/orderDataManage/supplyAdd/auditRecord.vue' // 导入新组件




import { useStore } from 'vuex'


const store = useStore()


const permission = computed(() => store.state.user.permission);


const emit = defineEmits(['success'])


const dictObj = inject('dictObj')


const deptTree = inject('deptTree')


@@ -175,8 +153,21 @@


const fileList = ref([]) // 上传文件列表


const uploadedFiles = ref([]) // 已上传文件列表


const responseData = ref(null)


const submitting = ref(false) // 提交中状态


const uploading = ref(false) // 文件上传中状态


function validData(value, defaultValue) {


   return value !== undefined ? value : defaultValue


}


const permissionList = computed(() => {


   return {


      addBtn: validData(permission.value.orderData_addDemand, false),


      rejectBtn: validData(permission.value.orderData_rejectApplication, false),


      approvedBtn: validData(permission.value.orderData_approved, false),


   }


})


// 自定义上传请求函数


const handleHttpRequest = async (options) => {


   uploading.value = true


   try {


      // 创建FormData对象


      const formData = new FormData()


@@ -184,7 +175,6 @@




      // 调用导入的API函数


      const response = await putFileAttachApi(formData)


      console.log('response',response)


      if (response.data && response.data.success) {


         // 调用上传成功的回调


         options.onSuccess(response)


@@ -196,6 +186,8 @@


      // 调用上传失败的回调


      options.onError(error)


      console.error('文件上传失败:', error)


   } finally {


      uploading.value = false


   }


}


// 拒绝申请弹框控制


@@ -203,10 +195,7 @@


const tableData = ref([]) // 附件表格数据


// 文件移除


const handleFileRemove = (file, fileList) => {


   // 从已上传文件列表中移除对应文件


   if (file.response && file.response.attachId) {


      uploadedFiles.value = uploadedFiles.value.filter(item => item.attachId !== file.response.attachId)


   }


uploadedFiles.value = fileList


   // 清空响应数据


   if (responseData.value && responseData.value.attachId === file.response?.attachId) {


      responseData.value = null


@@ -224,11 +213,11 @@


   }




   // 文件大小限制，这里限制为100MB


   const maxSize = 100 * 1024 * 1024 // 100MB


   if (file.size > maxSize) {


      ElMessage.error('文件大小不能超过100MB')


      return false


   }


   // const maxSize = 100 * 1024 * 1024 // 100MB


   // if (file.size > maxSize) {


   //    ElMessage.error('文件大小不能超过100MB')


   //    return false


   // }




   return true


}


@@ -238,7 +227,6 @@


   // 添加更严格的检查，确保response不是undefined


   if (response && response?.data && response?.data?.success) {


      const fileData = response.data.data


      console.log('成功数据', fileData)


      responseData.value = fileData


      // 添加到已上传文件列表


      uploadedFiles.value.push({


@@ -249,7 +237,7 @@


      })




      ElMessage.success('文件上传成功！')


   } 


   }


}




// 上传失败处理函数


@@ -257,47 +245,52 @@


   ElMessage.error(error?.message || '文件上传失败，请重试')


}




// 查看文件


const viewFile = file => {


   if (file.link) {


      window.open(file.link, '_blank')


   } else {


      ElMessage.warning('文件链接无效')


   }


}


// 从表格下载文件 - 使用 fetch API


const downloadFileFromTable = async (file) => {


  if (!file.fileUrl) {


    ElMessage.warning('文件链接无效')


    return


  }




// 下载文件


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 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('文件链接无效')


   }


  try { 


    const response = await fetch(file.fileUrl)


    const blob = await response.blob()


    const url = window.URL.createObjectURL(blob)


    const a = document.createElement('a')


    a.href = url


    


    // 获取原始文件名，处理中文和特殊字符


    const originalName = file.fileOriginalName || 'download-file.zip'


    // 确保文件名有正确的扩展名


    let fileName = originalName


    if (!fileName.includes('.')) {


      // 从 Content-Type 推断扩展名


      const contentType = response.headers.get('content-type')


      if (contentType === 'application/zip') {


        fileName += '.zip'


      } else if (contentType === 'application/x-rar-compressed') {


        fileName += '.rar'


      }


    }


    


    a.download = fileName


    a.style.display = 'none'


    document.body.appendChild(a)


    a.click()


    


    // 清理


    setTimeout(() => {


      window.URL.revokeObjectURL(url)


      document.body.removeChild(a)


    }, 100)


    


  } catch (error) {


    console.error('下载失败:', error)


  }


}




// 下载所有文件


const downloadAllFiles = () => {


const downloadAllFiles =async () => {


   if (!tableData.value || tableData.value.length === 0) {


      ElMessage.warning('没有可下载的文件')


      return


@@ -309,22 +302,56 @@


      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


   })


  // 顺序下载每个文件


  for (let i = 0; i < validFiles.length; i++) {


    const file = validFiles[i]


    


    try {


      const response = await fetch(file.fileUrl)


      const blob = await response.blob()


      const url = window.URL.createObjectURL(blob)


      const a = document.createElement('a')


      a.href = url


      


      // 设置文件名，优先使用原始文件名


      let fileName = file.fileOriginalName || `附件_${i + 1}`


      


      // 确保文件名有扩展名


      if (!fileName.includes('.')) {


        const contentType = response.headers.get('content-type')


        if (contentType === 'application/zip') {


          fileName += '.zip'


        } else if (contentType === 'application/x-rar-compressed') {


          fileName += '.rar'


        } else if (contentType === 'application/x-7z-compressed') {


          fileName += '.7z'


        } else {


          fileName += '.zip'


        }


      }


      


      a.download = fileName


      a.style.display = 'none'


      document.body.appendChild(a)


      a.click()


      


      // 清理资源


      setTimeout(() => {


        window.URL.revokeObjectURL(url)


        document.body.removeChild(a)


      }, 100)


      


      // 文件间添加延迟（除了最后一个文件）


      if (i < validFiles.length - 1) {


        await new Promise(resolve => setTimeout(resolve, 500))


      }


      


    } catch (error) {


      console.error(`文件下载失败: ${file.fileOriginalName || '未知文件'}`, error)


      // 继续下载下一个文件


    }


  }


  


}




// 根据部门ID获取部门名称


@@ -398,16 +425,16 @@




// 拒绝申请


const rejectTheApplication = () => {


   if (!responseData.value) {


      return ElMessage.warning('请上传数据')


   }


   // 打开拒绝申请弹框


   rejectionDialogVisible.value = true


}




// 处理拒绝申请确认


const handleRejectionConfirm = reason => {


   const id = [responseData.value.attachId]


   // 从 uploadedFiles.value 中提取所有 attachId


   const id = uploadedFiles.value.map(file => file.attachId)




   submitting.value = true


   gdSupplyDemandAuditRejectApi({ attachIds: id, auditOpinion: reason, demandId: demandId.value })


      .then(() => {


         ElMessage.success('拒绝申请成功')


@@ -419,41 +446,43 @@


         ElMessage.error('拒绝申请失败，请重试')


         emit('success')


      })


      .finally(() => {


         submitting.value = false


      })


}


// 审核通过


const approvedByTheReview = () => {


   if (!responseData.value) {


   if (uploadedFiles.value.length === 0) {


      return ElMessage.warning('请上传数据')


   }


   const id = [responseData.value.attachId]


   gdSupplyDemandAuditPassApi({ attachIds: id, demandId: demandId.value }).then(() => {


      ElMessage.success('审核通过成功')


      visible.value = false


      emit('success')


   })


   }	


   // 从 uploadedFiles.value 中提取所有 attachId


   const id = uploadedFiles.value.map(file => file.attachId)


   submitting.value = true


   gdSupplyDemandAuditPassApi({ attachIds: id, demandId: demandId.value })


      .then(() => {


         ElMessage.success('审核通过成功')


         visible.value = false


         emit('success')


      })


      .finally(() => {


         submitting.value = false


      })


}




defineExpose({ open })


</script>




<style scoped lang="scss">


.detail-container {


   padding: 20px;


   display: flex;


   align-items: flex-start;


   gap: 30px;


}




/* 左侧步骤条 */


.detail-left {


   width: 25%;


   width: 35%;


   padding-right: 20px;


   border-right: 1px solid #e8e8e8;


}




/* 右侧表单 */


.detail-right {


   width: 75%;


   width: 65%;


   .reject-reason {


      margin-bottom: 20px;


      background: #f2f3f5;


@@ -461,48 +490,8 @@


      padding: 15px;


      height: 100px;


   }


   .requirementsDetailsBox {


      background: #f2f3f5;


      border-radius: 2px 2px 2px 2px;


   }




   /* 详情表格样式 */


   .detail-table {


      width: 100%;


   }




   .detail-row {


      display: flex;


      &:last-child {


         margin-bottom: 0;


      }


   }




   .detail-cell {


      flex: 1;


      display: flex;


      justify-content: space-between;


      padding: 5px 12px;


      margin-right: 8px;


      &:last-child {


         margin-right: 0;


      }


   }




   .cell-label {


      font-weight: 500;


      color: #333333;


      margin-right: 8px;


      text-align: right;


      min-width: 100px;


      flex-shrink: 0;


   }




   .cell-value {


      color: #666666;


      flex: 1;


      text-align: left;


   }


   .label {


   width: 130px !important;}


}




/* 上传容器样式 */


@@ -537,14 +526,11 @@


   }


}




.val {


   padding: 8px;


   background-color: #f5f7fa;


   border-radius: 4px;


   min-height: 32px;


   word-break: break-all;


   margin-bottom: 16px;


.el-upload__tip {


   display: inline;


}








/* 上传按钮样式 */


:deep(.el-upload) {


@@ -554,4 +540,5 @@


:deep(.el-upload-list) {


   margin-top: 10px;


}




</style>