kd-aiot-frontend-eom/src/views/transportManager/carBook/components/detailDialog.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="detailDialogFlag"
    :title="title"
    :close-on-click-modal="false"
    width="60%"
    :before-close="cancel"
    :maxable="true"
    :resizable="true"
  >
    <el-form ref="form" :model="form" class="el-form-box" label-width="120px">
      <headerTitle title="基本信息"></headerTitle>
      <el-row >
        <el-col :span="12">
          <el-form-item
            label="车牌号："
            prop="trakNumber"
            >
            <el-input v-model="form.trakNumber" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="车型："
            prop="type"
            >
            <el-input v-model="form.type" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row >
        <el-col :span="12">
          <el-form-item
            label="最大体积："
            prop="maxVolume"
            >
            <el-input v-model="form.maxVolume" disabled >
              <template slot="append">m³</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="载重："
            prop="loadWeight"
            >
            <el-input v-model="form.loadWeight" disabled >
              <template slot="append">KG</template>
            </el-input>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row >
        <el-col :span="12">
          <el-form-item
            label="载人数："
            prop="loadPersonNum"
            >
            <el-input v-model="form.loadPersonNum" disabled >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="空车重量："
            prop="freeWeight"
            >
            <el-input v-model="form.freeWeight" disabled >
              <template slot="append">KG</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row >
        <el-col :span="12">
          <el-form-item
            label="行驶证："
            prop="drivingLicenseFile"
            >
            <fileMain v-model="form.drivingLicenseFile" type="view"></fileMain>
<!--            <el-link-->
<!--              v-if="form.drivingLicenseFile.length"-->
<!--              v-for="item in form.drivingLicenseFile"-->
<!--              type="primary"-->
<!--              :underline="false"-->
<!--              @click="downloadFile(item)"-->
<!--            >-->
<!--              {{ item.name }}-->
<!--            </el-link>-->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="运输证："
            prop="transportLicenseFile"
            >
            <fileMain v-model="form.transportLicenseFile" type="view"></fileMain>
<!--            <el-link-->
<!--              v-if="form.transportLicenseFile.length"-->
<!--              v-for="item in form.transportLicenseFile"-->
<!--              type="primary"-->
<!--              :underline="false"-->
<!--              @click="downloadFile(item)"-->
<!--            >-->
<!--              {{ item.name }}-->
<!--            </el-link>-->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row >
        <el-col :span="12">
          <el-form-item
            label="默认司机："
            prop="defaultDriver"
            >
            <el-input v-model="form.defaultDriver" disabled >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="联系电话："
            prop="phone"
            >
            <el-input v-model="form.phone" disabled >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row >
        <el-col :span="12">
          <el-form-item
            label="运输证有效期："
            prop="transportLicenxeValidityDate"
            >
            <el-input :value="form.transportLicenxeValidityStart ? form.transportLicenxeValidityStart + '至' + form.transportLicenxeValidityEnd : ''" disabled ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="承保公司："
            prop="insuranceCompany"
            >
            <el-input v-model="form.insuranceCompany" disabled >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row >
        <el-col :span="12">
          <el-form-item
            label="交强险有效期："
            prop="trafficInsuranceValidityDate"
            >
            <el-input :value="form.trafficInsuranceValidityStart? form.trafficInsuranceValidityStart + '至' + form.trafficInsuranceValidityEnd :''" disabled ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="商业险有效期："
            prop="businessInsuranceValidityDate"
            >
            <el-input :value="form.trafficInsuranceValidityStart? form.businessInsuranceValidityStart + '至' + form.businessInsuranceValidityEnd:''" disabled ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row >
        <el-col :span="12">
          <el-form-item
            label="保养标准："
            prop="maintenanceStandards"
            >
            <el-input v-model="form.maintenanceStandards" disabled >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="区域："
            >
            <el-input :value="form.addressName?form.addressName +','+ form.addressDetail:''" disabled >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row >
        <el-col :span="12">
          <el-form-item
            label="gps："
            prop="gps"
            >
            <el-input v-model="form.gps" disabled >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="备注："
            prop="remark"
            >
            <el-input type="textarea" v-model="form.remark" disabled >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>


    </el-form>
    <div slot="footer" class="footer">
      <el-button @click="cancel">返回</el-button>
    </div>
  </ele-modal>
</template>

<script>
import {getFile} from '@/api/system/file';
import dictMixins from '@/mixins/dictMixins';
import fileUpload from "@/components/upload/fileUpload.vue";
import RegionsSelect from "@/components/RegionsSelect/index.vue";
import {carInfoAPI} from "@/api/transportManager/carBook";
// import fileMain from "@/components/addDoc/index.vue";

export default {
  mixins: [dictMixins],
  props: ['detailDialogFlag'],
  components: {
    // fileMain,
    RegionsSelect,
    fileUpload,
  },
  data() {
    return {
      title: '详情',
      dialogType: '',
      city: null,
      transportLicenxeValidityDate: [],
      trafficInsuranceValidityDate: [],
      businessInsuranceValidityDate: [],
      form: {},
    };
  },
  methods: {
    //初始化
    async init(row = {}, type) {
      this.title = '详情'
      this.dialogType = type
      await this.getInfo(row.id)
    },
    //获取详情
    async getInfo(id) {
      this.form = await carInfoAPI(id)
      this.city = this.form.addressId ? this.form.addressId.split(',') : null;
      this.transportLicenxeValidityDate = [this.form.transportLicenxeValidityStart, this.form.transportLicenxeValidityEnd]
      this.trafficInsuranceValidityDate = [this.form.trafficInsuranceValidityStart, this.form.trafficInsuranceValidityEnd]
      this.businessInsuranceValidityDate = [this.form.businessInsuranceValidityStart, this.form.businessInsuranceValidityEnd]
    },
    downloadFile(file) {
      getFile({objectName: file.storePath}, file.name);
    },
    cancel() {
      this.$emit('update:detailDialogFlag', false)
    }
  }
};
</script>

<style scoped lang="scss">
.ele-dialog-form {
  .el-form-item {
    margin-bottom: 10px;
  }
}

.headbox {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .amount {
    font-size: 14px;
    font-weight: bold;
    margin-right: 20px;
  }
}
</style>