feat:拆分

张含笑

2026-01-20 a330d5945393217b88be20d551276f4e69dd3a84

feat:拆分

 applications/task-work-order/src/views/orderView/orderDataManage/supplyAdd/ApplyViewDialog.vue

@@ -3,15 +3,7 @@
        <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">
@@ -140,11 +132,12 @@
    gdSupplyDemandDetailApi,
    putFileAttachApi,
    gdSupplyDemandAuditPassApi,
    gdSupplyDemandAuditRejectApi,
    gdSupplyDemandAuditListApi
    gdSupplyDemandAuditRejectApi
} 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')
@@ -159,13 +152,6 @@
const responseData = ref([])
// 拒绝申请弹框控制
const rejectionDialogVisible = ref(false) // 拒绝申请弹框显隐
// 步骤条数据
const steps = ref([
    { title: '需求申请', person: '', time: '' },
    { title: '审核通过', person: '', time: '' }
])
// 当前激活步骤
const activeStep = ref(0)

// 文件选择变化
const handleFileChange = (file, fileList) => {
@@ -309,7 +295,6 @@
    if (row?.id) {
        await loadDetail(row.id)
        demandId.value = row.id
        console.log('row.id', demandId.value)
    }
    visible.value = true
}
@@ -323,95 +308,7 @@
        data.responsibleDeptName = getDeptNameById(data.responsibleDeptId, deptTree.value)
    }
    formData.value = data
	
    // 加载审核记录
    await loadAuditRecords(id)
}

// 加载审核记录
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 = () => {
@@ -425,8 +322,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('拒绝申请成功')
@@ -515,40 +410,6 @@
        flex: 1;
        text-align: left;
    }
}

/* 步骤条样式 */
: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;
}

/* 上传容器样式 */

 applications/task-work-order/src/views/orderView/orderDataManage/supplyAdd/auditRecord.vue

New file
@@ -0,0 +1,165 @@
<template>
  <div class="audit-record-container">
    <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>
</template>

<script setup>
import { ref, watch } from 'vue'
import { gdSupplyDemandAuditListApi } from '@/views/orderView/orderDataManage/supplyAdd/supplyAddApi'

const props = defineProps({
  demandId: {
    type: [String, Number],
    required: true
  }
})

// 步骤条数据
const steps = ref([
  { title: '需求申请', person: '', time: '' },
  { title: '审核通过', person: '', time: '' }
])

// 当前激活步骤
const activeStep = ref(0)

// 监听 demandId 变化
watch(() => props.demandId, (newVal) => {
  if (newVal) {
    loadAuditRecords(newVal)
  }
}, { immediate: true })

// 加载审核记录
async function loadAuditRecords(demandId) {
  try {
    const res = await gdSupplyDemandAuditListApi({ demandId })
    const auditRecords = res?.data?.data ?? []
    
    // 处理审核记录为步骤格式
    processAuditRecords(auditRecords)
  } catch (error) {
    console.error('加载审核记录失败:', 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
    }
  }
}

defineExpose({
  loadAuditRecords
})
</script>

<style scoped lang="scss">
.audit-record-container {
  .label {
    font-weight: 500;
    margin-bottom: 8px;
    color: #333;
  }
}

/* 步骤条样式 */
: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;
}
</style>