feat:调整加载

张含笑

2026-01-27 dd57e0e9a989e7ee8b3e3473a7ee6a1dff06a4ae

 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 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,81 +9,67 @@
         <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' && !requesterProvider">
               <div class="detail-title">数据上传</div>
               <div class="upload-container">
                  <el-upload
                  :http-request="handleHttpRequest"
@@ -106,8 +92,8 @@
               </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">
@@ -120,15 +106,15 @@
         </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' && !requesterProvider">
            <el-button color="#F2F3F5" :loading="submitting" :disabled="submitting" @click="rejectTheApplication">拒绝申请</el-button>
            <el-button class="" color="#4C34FF" :loading="submitting" :disabled="submitting" @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>
            <el-button class="" color="#4C34FF" @click="visible =false">关闭</el-button>
         </template>
      </template>
   </el-dialog>
@@ -142,6 +128,7 @@
</template>

<script setup>
import { pxToRem } from '@/utils/rem'
import { getDictLabel } from '@ztzf/utils'
import {
   gdSupplyDemandDetailApi,
@@ -153,7 +140,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 requesterProvider = computed(() => store.state.user.userInfo?.role_id === '2014158512610869250')
const emit = defineEmits(['success'])
const dictObj = inject('dictObj')
const deptTree = inject('deptTree')
@@ -165,6 +154,7 @@
const fileList = ref([]) // 上传文件列表
const uploadedFiles = ref([]) // 已上传文件列表
const responseData = ref(null)
const submitting = ref(false) // 提交中状态
// 自定义上传请求函数
const handleHttpRequest = async (options) => {
   try {
@@ -400,6 +390,7 @@
   // 从 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('拒绝申请成功')
@@ -411,6 +402,9 @@
         ElMessage.error('拒绝申请失败，请重试')
         emit('success')
      })
      .finally(() => {
         submitting.value = false
      })
}
// 审核通过
const approvedByTheReview = () => {
@@ -419,34 +413,32 @@
   }
   // 从 uploadedFiles.value 中提取所有 attachId
   const id = uploadedFiles.value.map(file => file.attachId)
   gdSupplyDemandAuditPassApi({ attachIds: id, demandId: demandId.value }).then(() => {
      ElMessage.success('审核通过成功')
      visible.value = false
      emit('success')
   })
   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;
@@ -454,48 +446,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;}
}

/* 上传容器样式 */
@@ -530,14 +482,7 @@
   }
}

.val {
   padding: 8px;
   background-color: #f5f7fa;
   border-radius: 4px;
   min-height: 32px;
   word-break: break-all;
   margin-bottom: 16px;
}


/* 上传按钮样式 */
:deep(.el-upload) {