350 lines
11 KiB
Vue
350 lines
11 KiB
Vue
<template>
|
|
<div class="detail">
|
|
<div class="detail-container">
|
|
<a-descriptions
|
|
size="small"
|
|
title="车辆信息"
|
|
layout="vertical"
|
|
:column="4"
|
|
bordered
|
|
>
|
|
<a-descriptions-item label="车次单号" >
|
|
{{ data.code }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="车辆名称" >
|
|
{{ data.truck_name }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="司机" >
|
|
{{ data.driver_name }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="司机名称" >
|
|
{{ data.driver_salary }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="出车日期">
|
|
{{ data.outbound_date | formatDate}}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="回车日期">
|
|
{{ data.return_date | formatDate}}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="当前公里数">
|
|
{{ data.current_distance }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="结束公里数">
|
|
{{ data.end_mileage }}
|
|
</a-descriptions-item>
|
|
<!-- <a-descriptions-item label="维修次数">
|
|
{{ data.repair_count }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="更换轮胎次数">
|
|
{{ data.change_tyre_count }}
|
|
</a-descriptions-item> -->
|
|
<!-- <a-descriptions-item label="加油次数">
|
|
{{ data.add_oil_count }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="加油总升数">
|
|
{{ data.add_oil_litre }}
|
|
</a-descriptions-item> -->
|
|
<a-descriptions-item label="车辆备注">
|
|
{{ data.remark || '无' }}
|
|
</a-descriptions-item>
|
|
</a-descriptions>
|
|
</div>
|
|
<div class="detail-container">
|
|
<a-descriptions
|
|
size="small"
|
|
title="基本信息"
|
|
layout="vertical"
|
|
:column="6"
|
|
bordered
|
|
>
|
|
<a-descriptions-item label="客户" span="1.5">
|
|
{{ data.custom_name }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="供应商" span="1.5">
|
|
{{ data.supplier_name }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="运输物品" span="3">
|
|
{{ data.soil_quality_material }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="供应商出库吨位" >
|
|
{{ data.supplier_outbound_tonnage }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="购入单价" >
|
|
{{ data.buy_unit_price }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="购入总价" >
|
|
{{ data.buy_total_price }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="客户入库吨位" >
|
|
{{ data.customer_warehousing_tonnage }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="单价" >
|
|
{{ data.unit_price }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="总价" >
|
|
{{ data.total_price }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="运费" >
|
|
{{ data.freight }}
|
|
</a-descriptions-item>
|
|
</a-descriptions>
|
|
</div>
|
|
<div class="detail-container">
|
|
<a-descriptions
|
|
size="small"
|
|
title="司机工资补贴"
|
|
layout="vertical"
|
|
:column="3"
|
|
bordered
|
|
>
|
|
<a-descriptions-item label="司机工资" >
|
|
{{ data.driver_salary }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="补贴" >
|
|
{{ data.driver_subsidy }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="补贴备注" >
|
|
{{ data.driver_subsidy_remark }}
|
|
</a-descriptions-item>
|
|
</a-descriptions>
|
|
</div>
|
|
<div class="detail-container" v-if="data.oil_consumption">
|
|
<a-descriptions
|
|
size="small"
|
|
title="加油信息"
|
|
layout="vertical"
|
|
:column="3"
|
|
bordered
|
|
>
|
|
<a-descriptions-item label="油耗数量" >
|
|
{{ data.oil_consumption.oil_consumption_number}}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="油耗单价" >
|
|
{{ data.oil_consumption.oil_consumption_price }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="油耗总价" >
|
|
{{ data.oil_consumption.oil_consumption_total_price }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="加油日期" >
|
|
{{ data.oil_consumption.oil_consumption_date | formatDate }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="加油备注" >
|
|
{{ data.oil_consumption.oil_consumption_number }}
|
|
</a-descriptions-item>
|
|
</a-descriptions>
|
|
</div>
|
|
<div class="detail-container">
|
|
<a-tabs default-active-key="1" size="large">
|
|
<a-tab-pane key="1" tab="维修信息" force-render>
|
|
<vxe-table :data="maintenance">
|
|
<vxe-column v-for="item in columns" :key="item.field" :field="item.field" :title="item.title" :formatter="item.formatter" :sortable="true"></vxe-column>
|
|
</vxe-table>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="2" tab="轮胎更换信息" force-render>
|
|
<vxe-table :data="tire">
|
|
<vxe-column v-for="item in columns2" :key="item.field" :field="item.field" :title="item.title" :formatter="item.formatter" :sortable="true"></vxe-column>
|
|
</vxe-table>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="3" tab="其他费用" force-render>
|
|
<vxe-table :data="other_expenses_log">
|
|
<vxe-column v-for="item in columns3" :key="item.field" :field="item.field" :title="item.title" :formatter="item.formatter" :sortable="true"></vxe-column>
|
|
</vxe-table>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import BASE_URL from '@/services/Middle/transport/TrainNumber/api.js';
|
|
import XEUtils from 'xe-utils' // 加载xe-utils
|
|
export default {
|
|
name: 'Detail',
|
|
data() {
|
|
return {
|
|
actions: {
|
|
// =============================== 接口地址 自动生成 Start ===============================
|
|
TrainNumberList: `${BASE_URL.BASE_URL}/TrainNumber/v1/train/number/list`, // 车次列表
|
|
TrainNumberSearch: `${BASE_URL.BASE_URL}/TrainNumber/v1/train/number/search`, // 车次搜索
|
|
TrainNumberDetail: `${BASE_URL.BASE_URL}/TrainNumber/v1/train/number/detail`, // 车次详情
|
|
TrainNumberCreate: `${BASE_URL.BASE_URL}/TrainNumber/v1/train/number/create`, // 创建车次
|
|
TrainNumberUpdate: `${BASE_URL.BASE_URL}/TrainNumber/v1/train/number/update`, // 更新车次
|
|
TrainNumberDelete: `${BASE_URL.BASE_URL}/TrainNumber/v1/train/number/detele`, // 删除车次
|
|
TrainNumberBatchDelete: `${BASE_URL.BASE_URL}/TrainNumber/v1/train/number/batchDelete`, // 批量删除车次
|
|
|
|
// =============================== 接口地址 自动生成 End ===============================
|
|
},
|
|
FieldName:'train_number',
|
|
// 车辆信息
|
|
data: {},
|
|
maintenance:[],
|
|
tire:[],
|
|
other_expenses_log:[],
|
|
columns:[
|
|
{
|
|
title: '日期',
|
|
field: 'maintenance_date',
|
|
key:'maintenance_date',
|
|
formatter: 'formatDate',
|
|
},
|
|
{
|
|
title: '维修项目',
|
|
field: 'maintenance_name',
|
|
key:'maintenance_name',
|
|
},
|
|
{
|
|
title: '维修金额',
|
|
field: 'maintenance_price',
|
|
key:'maintenance_price',
|
|
},
|
|
{
|
|
title: '维修内容',
|
|
field: 'maintenance_description',
|
|
key:'maintenance_description',
|
|
},
|
|
],
|
|
columns2:[
|
|
{
|
|
title: '轮胎更换日期',
|
|
field: 'tire_date',
|
|
key: 'tire_date',
|
|
formatter: 'formatDate',
|
|
},
|
|
{
|
|
title: '轮胎更换类型',
|
|
field: 'tire_type',
|
|
key: 'tire_type',
|
|
},
|
|
{
|
|
title: '旧轮胎胎号',
|
|
field: 'old_tire_number',
|
|
key: 'old_tire_number',
|
|
},
|
|
{
|
|
title: '新轮胎胎号',
|
|
field: 'tire_number',
|
|
key: 'tire_number',
|
|
},
|
|
{
|
|
title: '轮胎品牌',
|
|
field: 'tire_brand',
|
|
key: 'tire_brand',
|
|
},
|
|
{
|
|
title: '轮胎更换费用金额',
|
|
field: 'tire_price',
|
|
key: 'tire_price',
|
|
},
|
|
{
|
|
title: '备注',
|
|
field: 'tire_remark',
|
|
key: 'tire_remark',
|
|
},
|
|
],
|
|
columns3:[
|
|
{
|
|
title: '日期',
|
|
field: 'other_expenses_date',
|
|
key: 'other_expenses_date',
|
|
formatter: 'formatDate',
|
|
},
|
|
{
|
|
title: '费用项目名称',
|
|
field: 'other_expenses_name',
|
|
key: 'other_expenses_name',
|
|
},
|
|
{
|
|
title: '费用金额',
|
|
field: 'other_expenses_amount',
|
|
key: 'other_expenses_amount',
|
|
},
|
|
{
|
|
title: '备注',
|
|
field: 'other_expenses_remark',
|
|
key: 'other_expenses_remark',
|
|
},
|
|
]
|
|
}
|
|
},
|
|
created() {
|
|
// 获取路由的id参数
|
|
let dataId = this.getDataId();
|
|
this.initDetailData(dataId)
|
|
},
|
|
filters: {
|
|
formatDate: function (value) {
|
|
if (!value) {
|
|
return '';
|
|
}
|
|
if (typeof (value) == "number") {
|
|
value = new Date(value * 1000);
|
|
}
|
|
return XEUtils.toDateString(value, 'yyyy-MM-dd')
|
|
},
|
|
// 格式化状态
|
|
formatStatus: function (value) {
|
|
if (value === 1) {
|
|
return "正常";
|
|
|
|
// return "success";
|
|
} else if (value === 0) {
|
|
return "停用";
|
|
// return "error";
|
|
} else {
|
|
return "未知";
|
|
// return "warning";
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
// 获取路由的id参数
|
|
getDataId() {
|
|
let dataId = this.dataId;
|
|
if (this.$route.params.id) {
|
|
dataId = this.$route.params.id;
|
|
}
|
|
if (!dataId) {
|
|
dataId = 0;
|
|
}
|
|
return dataId;
|
|
},
|
|
// 获取车辆信息
|
|
initDetailData(ID) {
|
|
// this.dataId 转换为bigint
|
|
let dataId = this.$mk.toBigInt(ID);
|
|
this.$zk.post({
|
|
url: this.actions.TrainNumberDetail,
|
|
data: {
|
|
id: dataId
|
|
},
|
|
loading: "加载中...",
|
|
useBigInt: true,
|
|
config: {
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
}
|
|
}).then(a => {
|
|
this.data = a.data[this.FieldName];
|
|
this.maintenance = a.data[this.FieldName].maintenance? a.data[this.FieldName].maintenance : [];
|
|
this.tire = a.data[this.FieldName].tire? a.data[this.FieldName].tire : [];
|
|
this.other_expenses_log = a.data[this.FieldName].other_expenses_log? a.data[this.FieldName].other_expenses_log : [];
|
|
}).catch((a) => {
|
|
this.$mk.error(a.msg, "aaa");
|
|
});
|
|
},
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<style scoped>
|
|
.detail-container {
|
|
padding: 20px;
|
|
background: #fff;
|
|
color: #000;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
|
|
|
|
</style> |