<template>
|
<div v-loading="loading" element-loading-text="加载中...">
|
<div class="form flex a-center j-between mt--23">
|
<div class="form-left ml--30">
|
<el-form :inline="true" :model="searchForm">
|
<el-form-item label="派单时间:" prop="orderDeliveryTime" style="margin-right: 100px;">
|
<el-date-picker style="width: 400px;" v-model="searchForm.orderDeliveryTime"
|
type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="订单编号:" prop="code" style="margin-right: 100px;">
|
<el-input v-model="searchForm.code" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="车辆号牌:" prop="vehicleNumber" style="margin-right: 100px;">
|
<el-input v-model="searchForm.vehicleNumber" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="驾驶员姓名:" prop="driverName" style="margin-right: 100px;">
|
<el-input v-model="searchForm.driverName" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="公司名称:" prop="enterpriseName" style="margin-right: 100px;">
|
<el-input class="companyName" v-model="searchForm.enterpriseName" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="上车地点:" prop="boardingPoint" style="margin-right: 100px;">
|
<el-input v-model="searchForm.boardingPoint" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="下车地点:" prop="dropOffPoint" style="margin-right: 100px;">
|
<el-input v-model="searchForm.dropOffPoint" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="里程范围:" style="margin-right: 100px;">
|
<div class="flex a-center j-between">
|
<el-input class="range" v-model="searchForm.passengerMileageStart"
|
placeholder="请输入"></el-input>
|
<div class="mx--20">-</div>
|
<el-input class="range" v-model="searchForm.passengerMileageEnd"
|
placeholder="请输入"></el-input>
|
</div>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="form-right mr--24 mb--22 shrink0">
|
<el-button class="search-button h--40 w--90 fs--14" icon="el-icon-search" type="primary" size="small"
|
@click="search">查询</el-button>
|
<el-button @click="reset" icon="el-icon-refresh-right" class="reset-button h--40 w--90 fs--14"
|
size="small">重置</el-button>
|
</div>
|
</div>
|
<div class="mt--23 ml--30">
|
<el-button class="search-button h--40 w--90 fs--14" icon="el-icon-top" type="primary" size="small"
|
@click="exportExcell" v-permission="8">导出</el-button>
|
</div>
|
<div class="table-box ml--30 mt--23 mr--30">
|
<el-table :data="tableData" border stripe style="width: 100%" :element-loading-text="'正在加载...'">
|
<el-table-column type="index" width="55" label="序号" />
|
<el-table-column prop="code" label="订单编号" />
|
<el-table-column prop="vehicleNumber" label="车牌号" />
|
<el-table-column prop="licensePlateColor" label="车牌颜色" />
|
<el-table-column prop="enterpriseName" label="车辆所属公司" />
|
<el-table-column prop="orderPlace" label="上车地点" />
|
<el-table-column prop="dropOffPoint" label="下车地点" />
|
<el-table-column prop="passengerMileage" label="载客里程" />
|
<el-table-column prop="driverName" label="驾驶员名称" />
|
<el-table-column prop="driverPhone" label="驾驶员电话" />
|
<el-table-column prop="orderDeliveryTime" label="派单时间" />
|
<el-table-column prop="orderAmount" label="订单金额">
|
<template #default="{ row }">
|
￥{{ row.orderAmount }}
|
</template>
|
</el-table-column>
|
<el-table-column label="操作">
|
<template #default="{ row }">
|
<el-button v-permission="34" @click="showDetail(row)">详情</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="relative mt--23 flex j-end">
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
:current-page="searchForm.page" background layout="total,sizes,prev, pager, next,jumper"
|
:total="searchForm.total">
|
</el-pagination>
|
</div>
|
</div>
|
<DetailModal ref="detailModal" />
|
</div>
|
</template>
|
|
<script>
|
import DetailModal from "./component/detailModal"
|
import { exportExcell } from '@/utils/utils'
|
import { getOrderList, getOrderInfo, getOrderMonitoring, getOrderTravel, } from './service'
|
import moment from "moment/moment";
|
|
export default {
|
components: {
|
DetailModal
|
},
|
data() {
|
return {
|
searchForm: {
|
total: 0,
|
page: 1,
|
pageSize: 10
|
},
|
tableData: [],
|
loading: false,
|
};
|
},
|
computed: {
|
height() {
|
return this.$baseTableHeight()
|
},
|
},
|
created() {
|
this.$checkPermission(7)
|
this.getTableList()
|
},
|
methods: {
|
reset() {
|
this.searchForm = {
|
total: 0,
|
page: 1,
|
pageSize: 10
|
}
|
this.getTableList()
|
},
|
search() {
|
this.getTableList()
|
},
|
exportExcell() {
|
let obj = { ...this.searchForm }
|
delete obj.total
|
if (obj.orderDeliveryTime) {
|
obj.orderDeliveryTimeStart = moment(obj.orderDeliveryTime[0]).format('YYYY-MM-DD HH-mm-ss')
|
obj.orderDeliveryTimeEnd = moment(obj.orderDeliveryTime[1]).format('YYYY-MM-DD HH-mm-ss')
|
delete obj.orderDeliveryTime
|
}
|
exportExcell('订单记录导出', obj, '/system/order/exportOrderList')
|
},
|
handleSizeChange(e) {
|
this.searchForm.pageSize = e
|
this.getTableList()
|
},
|
handleCurrentChange(e) {
|
this.searchForm.page = e
|
this.getTableList()
|
},
|
getTableList() {
|
let obj = { ...this.searchForm }
|
delete obj.total
|
if (obj.orderDeliveryTime) {
|
obj.orderDeliveryTimeStart = moment(obj.orderDeliveryTime[0]).format('YYYY-MM-DD HH-mm-ss')
|
obj.orderDeliveryTimeEnd = moment(obj.orderDeliveryTime[1]).format('YYYY-MM-DD HH-mm-ss')
|
delete obj.orderDeliveryTime
|
}
|
getOrderList(obj).then(res => {
|
this.tableData = res.records
|
this.searchForm.total = res.total
|
})
|
},
|
showDetail(row) {
|
this.loading = true
|
Promise.all([getOrderInfo(row.id), getOrderTravel({ id: row.id })]).then(res => {
|
// getOrderMonitoring({ id: row.id }).then(resp => {
|
// this.$refs.detailModal.initData(res[0], resp, res[1])
|
// this.loading = false
|
// }).catch(err => {
|
this.$refs.detailModal.initData(res[0], {}, res[1])
|
this.loading = false
|
// })
|
}).catch(err => {
|
this.loading = false
|
})
|
},
|
}
|
}
|
</script>
|
<style scoped lang="less">
|
.search-button {
|
height: 40px !important;
|
}
|
|
::v-deep .el-form-item .el-input__inner {
|
width: 240px;
|
}
|
|
::v-deep .companyName {
|
.el-input__inner {
|
width: 400px !important;
|
}
|
}
|
|
::v-deep .range {
|
.el-input__inner {
|
width: 100% !important;
|
}
|
}
|
|
::v-deep .el-loading-mask {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.el-loading-spinner {
|
width: unset;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
}
|
</style>
|
