maintenance_system/src/views/materialManagement/planDetails.vue

<template>
    <div class="plan-details">
        <el-row>
            <el-col>
                <el-card>
                    <div class="header">
                        <span class="back-arrow" @click="handleBack">
                            <el-icon>
                                <ArrowLeft />
                            </el-icon>
                        </span>
                        <h2>{{ Info.jihuaName }}</h2>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="18">
                <el-card>
                    <detailInfo :detail-info="Info" />
                </el-card>
            </el-col>
            <el-col :span="6" style="flex-grow: 1;">
                <el-card style="height: 100%;">
                    <DetailsProcess />
                </el-card>
            </el-col>
        </el-row>

    </div>
</template>
<style scoped lang="scss">
.plan-details {
    padding: 20px;
    background-color: #F1F7FB;
}

.header {
    display: flex;
    align-items: center;
}

.back-arrow {
    font-size: 20px;
    margin-right: 10px;
    cursor: pointer;
}
</style>
<script setup lang="ts">

import detailInfo from './components/detailInfo.vue';
import DetailsProcess from './components/DetailsProcess.vue';
import { ref, onMounted, getCurrentInstance, toRefs, watch } from 'vue';
import { useRoute } from 'vue-router';
import type { ComponentInternalInstance } from 'vue';
const route = useRoute();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

import { caigouPlanDetail } from '@/api/wuziguanli/caigouPlan';
import { CaigouPlanVO, CaigouPlanQuery, CaigouPlanForm } from '@/api/wuziguanli/caigouPlan/types';


// 存储计划详情数据
const Info = ref<CaigouPlanVO>({} as CaigouPlanVO);

// 存储计划编号
const id = ref('');

// 获取详细信息
const getDetailInfo = async () => {
    const res = await caigouPlanDetail(id.value);
    if (res.code === 200) {
        Info.value = res.data;
        console.log(Info.value);

    }
}
onMounted(() => {
    // 接收路由参数
    id.value = route.query.id as string || '';
    console.log('组件挂载时路由参数id:', id.value);
    // 确保id不为空时才调用接口
    if (id.value) {
        getDetailInfo();
    } else {
        proxy.$modal.msgError('未获取到详细信息')
        setTimeout(() => {
            router.back();
        }, 800);
    }
});

// 监听路由参数变化
watch(
    () => route.query.id,
    (newId) => {
        id.value = newId as string || ''; 
        if (id.value) {
            getDetailInfo();
        } 
    },
    { immediate: true }
);
const router = useRouter();
const handleBack = () => {
    router.back();
}



</script>