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

<template>
  <layout-card>
    <div id="printContainer">
    <el-divider content-position="left">基本信息</el-divider>
    <el-descriptions border>
      <el-descriptions-item label="登记编号">
        {{ info.RECORD_NUMBER }}
      </el-descriptions-item>
      <el-descriptions-item label="办理日期">
        {{ info.TRANSACTION_DATE }}
      </el-descriptions-item>
      <el-descriptions-item label="登记人">
        {{ info.REGISTRANT }}
      </el-descriptions-item>
      <el-descriptions-item label="过户类型">
        {{ info.ASSIGNED_TYPE }}
      </el-descriptions-item>
      <el-descriptions-item label="车辆类型">
        {{ info.VEHICLE_TYPE }}
      </el-descriptions-item>
      <el-descriptions-item label="车架号">
        {{ info.FRAMES_NUMBER }}
      </el-descriptions-item>
      <el-descriptions-item label="车辆类型">
        {{ info.VEHICLE_TYPE }}
      </el-descriptions-item>
      <el-descriptions-item label="车辆品牌">
        {{ info.VEHICLE_BRAND }}
      </el-descriptions-item>
      <el-descriptions-item label="车辆型号">
        {{ info.VEHICLE_MODEL }}
      </el-descriptions-item>
      <el-descriptions-item label="发动机号">
        {{ info.ENGINE_NUMBER }}
      </el-descriptions-item>
      <el-descriptions-item label="动力类型">
        {{ info.POWER_TYPE }}
      </el-descriptions-item>
      <el-descriptions-item label="排放标准">
        {{ info.EMISSION_STANDARD }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider content-position="left">过户信息</el-divider>
    <el-descriptions border>
      <el-descriptions-item label="原车牌号">
        {{ info.RAW_PLATE_NUMBER }}
      </el-descriptions-item>
      <el-descriptions-item label="原车主业主">
        {{ info.RAW_OWNERS }}
      </el-descriptions-item>
      <el-descriptions-item label="原联系电话">
        {{ info.RAW_CONTACT_NUMBER }}
      </el-descriptions-item>
      <el-descriptions-item label="现车牌号">
        {{ info.NOW_PLATE_NUMBER }}
      </el-descriptions-item>
      <el-descriptions-item label="现车主业主">
        {{ info.NOW_OWNERS }}
      </el-descriptions-item>
      <el-descriptions-item label="现联系电话">
        {{ info.NOW_CONTACT_NUMBER }}
      </el-descriptions-item>
      <el-descriptions-item label="原营运证号">
        {{ info.RAW_OPERATION_CERTIFICATE }}
      </el-descriptions-item>
      <el-descriptions-item label="现营运证号">
        {{ info.NOW_OPERATION_CERTIFICATE }}
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions border>
      <el-descriptions-item label="现营运证照片">
        <img
          v-for="item in info.NOW_VEHICLE_OPERATION_CERTIFICATE"
          :key="item.FILEPATH"
          v-viewer
          :src="item.url"
          width="100"
          height="100"
          alt=""
          class="ml-10"
        />
      </el-descriptions-item>
      <el-descriptions-item label="现行驶证照片">
        <img
          v-for="item in info.NOW_DRIVINGLICENSE_IMG"
          :key="item.FILEPATH"
          v-viewer
          :src="item.url"
          width="100"
          height="100"
          alt=""
          class="ml-10"
        />
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="1" border>
      <el-descriptions-item label="过户资料">
        {{ info.ASSIGNED_MATERIAL }}
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="1" border>
      <el-descriptions-item label="备注">
        {{ info.REMARK }}
      </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 { findByIdAssignedManageInfo } from "@/request/assigned_manage.js";
import { useRoute } from "vue-router";
import { ref } from "vue";
import { addingPrefixToFile } from "@/assets/js/utils.js";
import { PRINT_STYLE } from "@/assets/js/constant.js";

const route = useRoute();
const { ASSIGNED_ID } = route.query;
const info = ref({});
const getData = async () => {
  const resData = await findByIdAssignedManageInfo({ ASSIGNED_ID });
  info.value = resData.pd;
  info.value.NOW_VEHICLE_OPERATION_CERTIFICATE = addingPrefixToFile(
    resData.nowVehicleOperationCertificateImgs
  );
  info.value.NOW_DRIVINGLICENSE_IMG = addingPrefixToFile(
    resData.nowDrivinglicenseImg
  );
};
getData();
</script>

<style scoped></style>