Skip to content

C
cloud-platform-ui
Commit 2da5bd5f authored by lixy's avatar lixy
Browse files
Options

租车订单详情

parent 9ab92a54
Hide whitespace changes
Inline Side-by-side
Showing with 199 additions and 90 deletions
src/views/order/modal/rentOrderDetailModal.vue 0 → 100644
View file @ 2da5bd5f
<template>
<el-dialog title="订单详情" :visible.sync="dialogVisible" class="order-details">
<el-form :model="form" ref="form" label-width="90px">
<el-row>
<el-col :span="8">
<el-form-item label="订单号:">
<span>{{form.no}}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="支付时间:">
<span>{{form.crtTime}}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="订单状态:">
<span>{{form.ststusName}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="姓名:">
<span>{{form.username}}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="手机号:">
<span>{{form.telephone}}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="配车:">
<span style="margin-right: 10px;">{{form.vehicleNumberPlat}}</span><el-button size="small" type="primary" icon="edit" v-if="form.status==4">重新配车</el-button>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="取车:">
<span>{{form.orderRentVehicleDetail.startTime}}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="">
<span>{{form.orderRentVehicleDetail.startAddr}}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="交车公司:">
<span>{{form.startCompanyName}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="还车:">
<span>{{form.orderRentVehicleDetail.endTime}}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="">
<span>{{form.orderRentVehicleDetail.endAddr}}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="交车公司:">
<span>{{form.endCompanyName}}</span>
</el-form-item>
</el-col>
</el-row>
<table class="orderDetail">
<tr><th>房车</th><th>租借天数</th><th>费用明细</th>
</tr>
<tr>
<td>{{form.name}}{{rentCostDetail}}</td>
<td>{{form.orderRentVehicleDetail.dayNum}}天</td>
<td>{{rentCostDetail}}</td>
</tr>
<tr>
<td ></td>
<td ></td>
<td >共计:￥{{form.realAmount}}</td>
</tr>
</table>
<div v-if="form.orderVehicleCrosstownDto" style="margin: 20px 0;"><span style="font-size: 18px;font-weight: bold;">驾驶人信息</span></div>
<table class="orderDetail" v-if="form.orderVehicleCrosstownDto">
<tr><th>姓名</th><th>手机号</th><th>身份证号</th><th>驾照</th></tr>
<tr>
<td>{{form.orderVehicleCrosstownDto.licenseName}}</td>
<td>{{form.orderVehicleCrosstownDto.licensePhone}}</td>
<td>{{form.orderVehicleCrosstownDto.licenseIdCard}}</td>
<td><img style="width: 140px;height: 140px;" :src="form.orderVehicleCrosstownDto?form.orderVehicleCrosstownDto.licenseImg:'https://xxtest.upyuns.com/image/app/default_%20avatar.png'"></td>
</tr>
</table>
</el-form>
</el-dialog>
</template>
<script>
import ElRow from "element-ui/packages/row/src/row";
import ElInput from "../../../../node_modules/element-ui/packages/input/src/input.vue";
import ElCol from "element-ui/packages/col/src/col";
import ElFormItem from "../../../../node_modules/element-ui/packages/form/src/form-item.vue";
import ElForm from "../../../../node_modules/element-ui/packages/form/src/form.vue";
export default {
props: ["form", "rentCostDetail"],
name: 'rentOrderDetailModal',
components: {
ElFormItem,
ElCol,
ElInput,
ElRow
},
data() {
return {
dialogVisible: false
}
},
watch: {
dialogVisible(newValue, oldValue){
if(!newValue){
this.$emit("rentOrderDetailDialogEvent", false);
}
},
},
mounted() {
this.dialogVisible = true;
},
methods: {
}
}
</script>
src/views/order/rentVehicleInfo/index.vue
View file @ 2da5bd5f
...@@ -99,14 +99,14 @@ ...@@ -99,14 +99,14 @@
<span v-if="scope.row.status == '6'">已完成</span> <span v-if="scope.row.status == '6'">已完成</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="110" align="center" label="订单详情"> <el-table-column width="110" align="center" label="订单详情">
<template scope="scope"> <template scope="scope">
<span style="color: #13CE66;cursor: pointer;" @click="handleOrderDetail(scope.row)">订单详情</span> <span style="color: #13CE66;cursor: pointer;" @click="handleOrderDetail(scope.row)">订单详情</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="操作" width="400"> <el-table-column align="center" label="操作" width="400">
<template scope="scope"> <template scope="scope">
<el-button size="small" v-if="scope.row.status >=4" type="success" @click="handleHandoverOrderVehicle(scope.row)">交车记录</el-button> <el-button size="small" v-if="scope.row.status >=4" type="success" @click="handleHandoverOrderVehicle(scope.row)">交车记录</el-button>
<el-button size="small" v-if="scope.row.status == 6" type="success" @click="handleReturnOrderVehicle(scope.row)">还车记录</el-button> <el-button size="small" v-if="scope.row.status == 6" type="success" @click="handleReturnOrderVehicle(scope.row)">还车记录</el-button>
<el-button size="small" v-if="scope.row.status > 3" type="success" @click="handleRefundVehicle(scope.row)">押金记录</el-button> <el-button size="small" v-if="scope.row.status > 3" type="success" @click="handleRefundVehicle(scope.row)">押金记录</el-button>
...@@ -125,57 +125,10 @@ ...@@ -125,57 +125,10 @@
:current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination> layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
</div> </div>
<!-- 订单详情 --> <!-- 订单详情 -->
<el-dialog :title="modalTitle" :visible.sync="bannerDialogVisible"> <rentOrderDetailModal :form="form" :rentCostDetail="tourCostDetail" v-if="rentDialogVisible" v-on:rentOrderDetailDialogEvent="rentOrderDetailDialogEvent"></rentOrderDetailModal>
<el-form :model="form" :rules="rules" ref="form" label-width="90px">
<div class="label-title">
<span >订单号:</span><span class="label-text">{{form.no}}</span>
<span >支付时间:</span><span class="label-text">{{form.crtTime}}</span>
</div>
<div class="label-title">
<span >订单状态:</span><span class="label-text">{{form.ststusName}}</span>
</div>
<div class="label-title">
<span >姓名/手机号:</span> <span class="label-text"><span >{{form.username}}</span>/<span>{{form.telephone}}</span></span>
</div>
<div class="label-title">
<span >配车:</span> <span class="label-text"><span >{{form.vehicleNumberPlat}}</span><a class="label-text" style="color: #1478F0;">重新配车></a></span>
</div>
<div class="label-title">
<span >取车:</span> <span class="label-text">{{form.orderRentVehicleDetail.startTime}}</span><span class="label-text">{{form.orderRentVehicleDetail.startAddr}}</span> <span class="label-text">交车公司:</span><span>{{form.startCompanyName}}</span>
</div>
<div class="label-title">
<span >还车:</span> <span class="label-text">{{form.orderRentVehicleDetail.endTime}}</span><span class="label-text">{{form.orderRentVehicleDetail.endAddr}}</span> <span class="label-text">交车公司:</span><span>{{form.endCompanyName}}</span>
</div>
<table class="orderDetail">
<tr>
<td>房车</td>
<td>租借天数</td>
<td>费用明细</td>
</tr>
<tr>
<td>{{form.name}}{{tourCostDetail}}</td>
<td>{{form.orderRentVehicleDetail.dayNum}}天</td>
<td>{{tourCostDetail}}</td>
</tr>
<tr>
<td ></td>
<td ></td>
<td >共计:{{form.realAmount}}</td>
</tr>
</table>
<div style="margin-top: 20px;">
<div><span style="font-size: 20px;font-weight: bold;">驾驶人信息</span></div>
<div style="margin-top: 10px;"><span>{{this.form.orderVehicleCrosstownDto?this.form.orderVehicleCrosstownDto.licenseName:''}}</span><span class="label-text">{{this.form.orderVehicleCrosstownDto?this.form.orderVehicleCrosstownDto.licensePhone:''}}</span><span class="label-text">{{this.form.orderVehicleCrosstownDto?this.form.orderVehicleCrosstownDto.licenseIdCard:''}}</span></div><br/>
<div v-if="this.form.orderVehicleCrosstownDto?true:false"><img class="label-text " id = "license-img" :src="this.form.orderVehicleCrosstownDto?this.form.orderVehicleCrosstownDto.licenseImg:''"></div>
</div>
</el-form>
</el-dialog>
<el-dialog :title="modalTitle" :visible.sync="orderVehicleCrosstownVisible"> <el-dialog :title="modalTitle" :visible.sync="orderVehicleCrosstownVisible">
<el-form :model="form" :rules="rules" ref="form" label-width="90px"> <el-form :model="form" :rules="rules" ref="form" label-width="90px">
<div class="label-title"> <div class="label-title">
...@@ -203,7 +156,7 @@ ...@@ -203,7 +156,7 @@
<span style="margin-left:110px;">身份证号:</span> <span class="label-text">{{orderReturnVehicleCrosstown.licenseIdCard}}</span><br /> <span style="margin-left:110px;">身份证号:</span> <span class="label-text">{{orderReturnVehicleCrosstown.licenseIdCard}}</span><br />
<img :src="orderReturnVehicleCrosstown.licenseImg" style="width: 100px; height: 100px;margin-left:110px;"/> <img :src="orderReturnVehicleCrosstown.licenseImg" style="width: 100px; height: 100px;margin-left:110px;"/>
</div> </div>
<div> <div>
<span class="label-text">拍照取证*:</span><br/> <span class="label-text">拍照取证*:</span><br/>
<img v-for="item in otherImg" :src="item" style="width: 100px; height: 100px;margin-left:110px;"/> <img v-for="item in otherImg" :src="item" style="width: 100px; height: 100px;margin-left:110px;"/>
...@@ -221,31 +174,33 @@ ...@@ -221,31 +174,33 @@
</div> </div>
<div v-if="returnVehicle"> <div v-if="returnVehicle">
<span class="label-text">押金扣除项*:</span><span>{{orderReturnVehicleCrosstown.deduction?'有扣除项':'没有扣除项'}}</span><br/> <span class="label-text">押金扣除项*:</span><span>{{orderReturnVehicleCrosstown.deduction?'有扣除项':'没有扣除项'}}</span><br/>
</div> </div>
<div> <div>
<span class="label-text">备注:</span></span><span class="label-text">{{orderReturnVehicleCrosstown.remak}}</span> <span class="label-text">备注:</span></span><span class="label-text">{{orderReturnVehicleCrosstown.remak}}</span>
</div> </div>
<div> <div>
</div> </div>
</div> </div>
<!--押金记录--> <!--押金记录-->
<div v-if="refundshow"> <div v-if="refundshow">
</div> </div>
</el-form> </el-form>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import Illegal from "./illegalModal";//违章查询 import Illegal from "./illegalModal";//违章查询
import Detail from "./detail";//违章查询 import Detail from "./detail";//违章查询
import rentOrderDetailModal from "../modal/rentOrderDetailModal";//租车订单详情
import { import {
formatDate formatDate
} from '../../../utils/dateFormattor'; } from '../../../utils/dateFormattor';
...@@ -266,11 +221,18 @@ ...@@ -266,11 +221,18 @@
import { import {
getAllZone getAllZone
} from 'api/base_info/constant/'; } from 'api/base_info/constant/';
import ElRow from "element-ui/packages/row/src/row";
import ElCol from "element-ui/packages/col/src/col";
import ElButton from "../../../../node_modules/element-ui/packages/button/src/button.vue";
export default { export default {
name: 'branchCompanyStock', name: 'branchCompanyStock',
components: { components: {
ElButton,
ElCol,
ElRow,
Illegal, Illegal,
Detail, Detail,
rentOrderDetailModal
}, },
data() { data() {
return { return {
...@@ -341,7 +303,7 @@ ...@@ -341,7 +303,7 @@
version: undefined version: undefined
}, },
orderVehicleCrosstownVisible:false, orderVehicleCrosstownVisible:false,
bannerDialogVisible: false,//添加、编辑弹框 rentDialogVisible: false,//租车详情弹框
modalTitle: '订单详情', modalTitle: '订单详情',
illegalVisible: false,//违章查询弹框 illegalVisible: false,//违章查询弹框
detailVisible:false, detailVisible:false,
...@@ -468,8 +430,14 @@ ...@@ -468,8 +430,14 @@
if(this.form.orderRentVehicleDetail.driverType==1) { if(this.form.orderRentVehicleDetail.driverType==1) {
this.serviceCost = this.form.orderRentVehicleDetail.dayNum * 600 this.serviceCost = this.form.orderRentVehicleDetail.dayNum * 600
} }
this.bannerDialogVisible = true; this.rentDialogVisible = true;
}, },
/**
* 租车订单详情弹框关闭
* */
rentOrderDetailDialogEvent(e){
this.rentDialogVisible = false;
},
/** /**
* 操作-违章查询按钮，显示违章弹框 * 操作-违章查询按钮，显示违章弹框
*/ */
...@@ -538,7 +506,7 @@ ...@@ -538,7 +506,7 @@
this.handover = true this.handover = true
this.returnVehicle = false this.returnVehicle = false
this.vehicleDetail=true this.vehicleDetail=true
}, },
getAllOrderVehicleCrosstown() { getAllOrderVehicleCrosstown() {
getOrderVehicleCrosstown(this.orderVehicleQuery) getOrderVehicleCrosstown(this.orderVehicleQuery)
...@@ -554,10 +522,10 @@ ...@@ -554,10 +522,10 @@
} }
} }
}) })
}, },
handleReturnOrderVehicle(row) { handleReturnOrderVehicle(row) {
console.log(row) console.log(row)
this.modalTitle = "还车记录" this.modalTitle = "还车记录"
...@@ -615,7 +583,7 @@ ...@@ -615,7 +583,7 @@
this.form.ststusName = '已完成'; this.form.ststusName = '已完成';
} }
this.form.orderRentVehicleDetail.startTime = timestamp2Date(this.form.orderRentVehicleDetail.startTime) this.form.orderRentVehicleDetail.startTime = timestamp2Date(this.form.orderRentVehicleDetail.startTime)
this.form.orderRentVehicleDetail.endTime = timestamp2Date(this.form.orderRentVehicleDetail.endTime) this.form.orderRentVehicleDetail.endTime = timestamp2Date(this.form.orderRentVehicleDetail.endTime)
this.orderVehicleCrosstownVisible = true this.orderVehicleCrosstownVisible = true
this.vehicleDetail=false this.vehicleDetail=false
}, },
...@@ -650,7 +618,7 @@ ...@@ -650,7 +618,7 @@
}); });
}); });
}, },
handleDelete(row) { handleDelete(row) {
this.$confirm('此操作将永久删除, 是否继续?', '提示', { this.$confirm('此操作将永久删除, 是否继续?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
...@@ -731,26 +699,33 @@ ...@@ -731,26 +699,33 @@
</script> </script>
<style> <style>
.label-text{ .label-text{
margin-left: 10px; margin-left: 10px;
margin-right: 20px; margin-right: 20px;
} }
.label-title{ .label-title{
margin-top: 10px; margin-top: 10px;
} }
.orderDetail tr td{ .orderDetail tr th{
width: 500px; background: #eef1f6;
text-align: center; }
border: 0.0625rem solid; .orderDetail tr td, .orderDetail tr th{
margin-left: 100px; width: 500px;
margin-right: 100px; text-align: center;
} border: 1px solid #dfe6ec;
.label-value{ margin-left: 100px;
margin-left: 80px; margin-right: 100px;
margin-right: 100px; padding: 10px;
} }
#license-img{ .label-value{
width: 50px; margin-left: 80px;
height: 50px; margin-right: 100px;
} }
</style> #license-img{
\ No newline at end of file width: 50px;
height: 50px;
}
.order-details .el-form-item{
margin-bottom: 10px !important;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment