yudao-admin-yiqun/yudao-ui-admin-vue3/src/views/pressure2/boilertaskorder/view.vue

<template>
  <div v-if="loading" class="loading-container">
    <el-loading :visible="loading" element-loading-text="加载中..." />
  </div>
  <TaskOrderDetailDialog
    v-else-if="taskOrderDetail"
    :task-order="taskOrderDetail"
    :in-page-mode="true"
    :type="type"
    @refresh="handleRefresh"
  />
  <div v-else class="loading-container">
    <p>无法加载任务详情，或任务单不存在。</p>
    <el-button @click="goBack" type="primary" class="mt-4">关闭</el-button>
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: 'BoilerTaskOrderView' })
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import TaskOrderDetailDialog from './components/TaskOrderDetailDialog.vue'
import { BoilerTaskOrderApi } from '@/api/pressure2/boilertaskorder'
import { ElMessage, ElLoading } from 'element-plus'
import { useTagsViewStore } from '@/store/modules/tagsView'

const route = useRoute()
const tagsViewStore = useTagsViewStore()

const taskOrderDetail = ref<Record<string, any> | undefined>(undefined)
const loading = ref(true)

const taskId = computed(() => {
  return route.query.id as string
})

const type = computed(() => {
  return route.query.type as string
})

const fetchTaskDetail = async () => {
  if (!taskId.value) {
    ElMessage.error('任务ID无效！')
    loading.value = false
    taskOrderDetail.value = undefined // 确保在ID无效时清除旧数据
    return
  }
  loading.value = true
  try {
    const response = await BoilerTaskOrderApi.getTaskOrder(taskId.value)
    if (response) {
      taskOrderDetail.value = response
    } else {
      ElMessage.error('加载任务详情失败或数据为空！')
      taskOrderDetail.value = undefined
    }
  } catch (error) {
    console.error("Failed to fetch task detail:", error)
    ElMessage.error('加载任务详情异常！')
    taskOrderDetail.value = undefined
  } finally {
    loading.value = false
  }
}

const goBack = () => {
  tagsViewStore.closeSelectedTag(route)
}

// 处理子组件刷新事件
const handleRefresh = async () => {
  await fetchTaskDetail()
}

// 组件挂载时获取数据
onMounted(() => {
  fetchTaskDetail()
})

// 监听路由参数变化，如果ID变化则重新获取数据 (适用于同一个组件实例在不同ID间切换的情况)
watch(() => route.query.id, (newId, oldId) => {
  if (newId && newId !== oldId) {
    fetchTaskDetail()
  }
})

</script>

<style lang="scss" scoped>
.loading-container {
  display: flex;
  flex-direction: column; /* 使按钮在文本下方 */
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 150px); /* 调整高度以适应您的布局 */
  text-align: center;
}
</style>