integrated_traffic_vue/src/views/mechanical_files/inspect_annually/view.vue

<template>
    <layout-card>
        <div id="printContainer">
            <el-divider content-position="left">车辆年检信息登记</el-divider>
            <el-descriptions :column="2" border>
                <el-descriptions-item label-class-name="width_200"  label="登记编号">
                    {{ info.NUM }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="车牌号">
                    {{ data.busInfo.PLATE_NUMBER }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="车架号">
                    {{ data.busInfo.VIN }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="车辆类型">
                    {{ data.busInfo.TRAILER_TYPE }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="车辆型号">
                    {{ data.busInfo.VEHICLE_MODEL }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="车辆品牌">
                    {{ data.busInfo.VEHICLE_BRAND }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="车主业户">
                    {{ data.busInfo.CAR_OWNERS }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="联系电话">
                    {{ data.busInfo.CAR_OWNERS_TEL }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="初登日期">
                    {{ data.busInfo.INITIAL_REGISTRATION_DATE }}
                </el-descriptions-item>
                <!--<el-descriptions-item label-class-name="width_200"  label="经营企业">-->
                    <!--{{ info.CAR_OWNERS }}-->
                <!--</el-descriptions-item>-->
            </el-descriptions>
            <el-divider content-position="left">年检信息</el-divider>
            <el-descriptions :column="2" border>
                <el-descriptions-item label-class-name="width_200"  label="办理日期">
                    {{ info.PROCESSING_DATE }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="年检周期">
                    {{ info.ANNUAL_INSPECTION_CYCLE_NAME }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="年检费用">
                    {{ info.INSPECTFEES }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="到期日期">
                    {{ info.DUE_DATE }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="年检地址">
                    {{ info.ADDRESS }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="登记人">
                    {{ info.REGISTRANT }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="年检资料" span="2">
                    <img
                            v-for="item in info.INSPECTINFO"
                            :key="item.FILEPATH"
                            v-viewer
                            :src="item.url"
                            width="100"
                            height="100"
                            alt=""
                            class="ml-10"
                    />
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="备注" span=2>
                    {{ info.NOTES }}
                </el-descriptions-item>
            </el-descriptions>

        </div>
        <div class="mt-10 tc">
            <el-button v-print="'#printContainer'" type="primary">打印</el-button>
        </div>
        <div v-html="PRINT_STYLE" />
    </layout-card>
</template>

<script setup>
    import { ref ,reactive} from "vue";
    import { getInspectAnnuallyView, getTrailerList} from "@/request/mechanical_files.js";
    import { useRoute } from "vue-router";
    import { addingPrefixToFile } from "@/assets/js/utils.js";
    const route = useRoute();
    const INSPECTANNUALLY_ID = route.query;
    const info = ref({});
    const data = reactive({
        busInfo:{
            NUM:'',
            PLATE_NUMBER:'',
            VIN:'',
            TRAILER_TYPE:'',
            VEHICLE_MODEL:'',
            VEHICLE_BRAND:'',
            CAR_OWNERS:'',
            CAR_OWNERS_TEL:'',
            INITIAL_REGISTRATION_DATE:'',
        }
    });
    const fnBusChange = async (event) => {
        const resData = await getTrailerList({ID:event})
        data.busInfo = resData.list[0]
        data.busInfo.DRIVING_LICENSE_IMG = addingPrefixToFile(
            resData.drivingLicenseImgs
        );
    };
    const fnGetData = async () => {
        if (!INSPECTANNUALLY_ID) return;
        const resData = await getInspectAnnuallyView(INSPECTANNUALLY_ID);
        info.value = resData.pd;
        fnBusChange(resData.pd.VEHICLE)
        info.value.INSPECTINFO = addingPrefixToFile(
            resData.inspectinfoImgs
        );
    };
    fnGetData();
</script>

<style lang="scss" scoped>
    .width_200{
        width: 200px;
    }
</style>