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

<template>
  <layout-card>
    <div id="printContainer">
      <el-divider content-position="left"
        >{{ data.busInfo.PLATE_NUMBER }}车辆档案</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.CONTACT }}
        </el-descriptions-item>
        <el-descriptions-item label-class-name="width_200" label="联系电话">
          {{ data.busInfo.CONTACT_NUMBER }}
        </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.REGISTRANT }}
        </el-descriptions-item>
        <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.CYCLE_NAME }}
        </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.REMINDER_DAYS }}
        </el-descriptions-item>
        <el-descriptions-item label-class-name="width_200" label="提醒日期">
          {{ info.REMINDER_DATE }}
        </el-descriptions-item>
        <el-descriptions-item label-class-name="width_200" label="提醒状态">
          {{ info.REMINDER_STATUS === "1" ? "开启" : "关闭" }}
        </el-descriptions-item>
        <el-descriptions-item
          label-class-name="width_200"
          label="运营证资料"
          span="2"
        >
          <img
            v-for="item in info.OPERATIONSINFO"
            :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 {
  getOperationsView,
  getTrailerList,
} from "@/request/mechanical_files.js";
import { useRoute } from "vue-router";
import { addingPrefixToFile } from "@/assets/js/utils.js";
const route = useRoute();
const OPERATIONS_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: "",
    OPERATION_CERTIFICATE_IMG: [],
  },
});
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 (!OPERATIONS_ID) return;
  const resData = await getOperationsView(OPERATIONS_ID);
  info.value = resData.pd;
  info.value.OPERATIONSINFO = [];
  fnBusChange(resData.pd.VEHICLE);
  info.value.OPERATIONSINFO = addingPrefixToFile(resData.operationsinfoImgs);
};
fnGetData();
</script>

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