maintenance_system/src/views/materialManagement/components/detailInfo.vue

<template>
    <div class="approval-form">
        <!-- 基础信息 -->
        <el-card class="card" shadow="hover">
            <template #header>
                <h3>基础信息</h3>
            </template>
            <el-form :model="detailInfo" label-width="120px">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="采购单号">
                            <el-input v-model="detailInfo.id" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="创建时间">
                            <el-input v-model="detailInfo.createTime" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="经办人">
                            <el-input v-model="detailInfo.jingbanrenName" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="所属部门">
                            <el-select v-model="detailInfo.caigouDanweiName" placeholder="请选择">
                                <el-option label="运维部" value="运维部" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="采购类型">
                            <el-select v-model="detailInfo.caigouType" placeholder="请选择">
                                <el-option label="项目业务" value="项目业务" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="申请原因">
                    <el-input v-model="basicInfo.applyReason" type="textarea" :rows="2" placeholder="请输入申请原因" />
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 供应商信息 -->
        <el-card class="card" shadow="hover" style="margin-top: 20px">
            <template #header>
                <h3>供应商信息</h3>
            </template>
            <el-form :model="detailInfo" label-width="120px">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="供应商单位">
                            <el-select v-model="detailInfo.gonyingshangId" placeholder="请选择">
                                <el-option label="AAAA精密仪器制造有限公司" value="AAAA精密仪器制造有限公司" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="出货时间">
                            <el-select v-model="detailInfo.chouhuoTime" placeholder="请选择">
                                <el-option label="2年零4个月" value="2年零4个月" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>

        <!-- 产品信息 -->
        <el-card class="card" shadow="hover" style="margin-top: 20px">
            <template #header>
                <h3>产品信息</h3>
            </template>
            <el-table :data="detailInfo.opsCaigouPlanChanpinVos" border style="width: 100%">
                <el-table-column prop="chanpinName" label="产品名称" />
                <el-table-column prop="chanpinType" label="产品型号" />
                <el-table-column prop="chanpinMonovalent" label="产品单价" align="center" :cell-style="{ background: 'pink' }" />
                <el-table-column prop="goumaiNumber" label="购买数量" align="center" :cell-style="{ background: 'pink' }" />
                <el-table-column prop="yontu" label="用途" />
                <el-table-column prop="totalPrice" label="合计" />
            </el-table>
        </el-card>

        <!-- 合同条款 -->
        <el-card class="card" shadow="hover" style="margin-top: 20px">
            <template #header>
                <h3>合同条款</h3>
            </template>
            <el-form :model="contractInfo" label-width="120px">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="付款条件">
                            <el-select v-model="detailInfo.fukuantiaojian" placeholder="请选择">
                                <el-option label="银行卡" value="银行卡" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="发票开具方式">
                            <el-select v-model="detailInfo.fapiaoKjfs" placeholder="请选择">
                                <el-option label="请选择" value="请选择" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>

        <!-- 附件 -->
        <el-card class="card" shadow="hover" style="margin-top: 20px">
            <template #header>
                <h3>附件</h3>
            </template>
            <el-upload class="upload-demo" action="#" :file-list="fileList" :auto-upload="false"
                :on-preview="handlePreview">
                <el-table :data="fileList" border style="width: 100%">
                    <el-table-column prop="name" label="文件名" width="300" />
                    <el-table-column prop="size" label="大小" width="100" />
                    <el-table-column label="操作" width="100">
                        <template #default="scope">
                            <!-- <el-link type="primary" @click="handlePreview(scope.row)"> -->
                            <el-link type="primary">
                                预览
                            </el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </el-upload>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, getCurrentInstance, toRefs } from 'vue';
import { useRoute } from 'vue-router';
import type { ComponentInternalInstance } from 'vue';
const route = useRoute();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { wz_invoicing_way, wz_payment_terms, wz_purchase_type, wz_contract_type, wz_caigou_examine } = toRefs<any>(proxy?.useDict('wz_invoicing_way', 'wz_payment_terms', 'wz_purchase_type', 'wz_contract_type', 'wz_caigou_examine'));

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

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

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

const getDetailInfo = async () => {
    const res = await caigouPlanDetail(id.value);
    if (res.code === 200) {
       detailInfo.value = res.data;
       console.log(detailInfo.value);
       
    }
}
onMounted(() => {
    // 接收路由参数
    id.value = route.query.id as string;
    getDetailInfo();



});
// 基础信息数据
const basicInfo = ref({
    orderNo: '0035455',
    createTime: '2023-11-02 16:32',
    handler: '李四',
    dept: '运维部',
    purchaseType: '项目业务',
    applyReason:
        '随着业务拓展，光伏电站业务负责增加，现有设备已运行5年，部分出现效率下降情况。为保证电站正常运行，计划采购一批新的逆变器替换老旧设备，并补充备件库存。',
});

// 供应商信息数据
const supplierInfo = ref({
    supplierName: 'AAAA精密仪器制造有限公司',
    deliveryTime: '2年零4个月',
    remark: '',
});

// 产品信息数据
const productInfo = ref({
    tableData: [
        {
            productName: 'AAABBBCCC',
            productModel: '15-42',
            productPrice: 500,
            buyQuantity: 10,
            usage: '组件',
            total: 5000,
        },
    ],
    remark: '',
});

// 合同条款数据
const contractInfo = ref({
    paymentCondition: '银行卡',
    invoiceWay: '请选择',
    remark: '',
});

// 附件数据
const fileList = ref([
    {
        name: 'MWwwwww.jpg',
        size: '30kb',
        url: '',
    },
    {
        name: '231234124w.zip',
        size: '50kb',
        url: '',
    },
    {
        name: '12451asdas.doc',
        size: '80kb',
        url: '',
    },
    {
        name: '21seasda.xls',
        size: '29kb',
        url: '',
    },
    {
        name: '12kjaklskw.png',
        size: '16kb',
        url: '',
    },
]);

// 预览文件
const handlePreview = (file) => {
    console.log('预览文件：', file);
    // 实际场景可在这里处理文件预览逻辑，如打开新窗口等
};
</script>

<style scoped>
.approval-form {
    padding: 20px;
}

.card {
    border-radius: 8px;
}

.error-tip {
    color: red;
    font-size: 12px;
    margin-top: 5px;
}

::v-deep(.el-input__inner) {
    color: red;
}
</style>