Skip to content

C
cloud-platform-ui
Commit 32d524ab authored by denghr's avatar denghr
Browse files
Options

车辆排班作为首页

parent 6b228177
Hide whitespace changes
Inline Side-by-side
Showing with 2353 additions and 22 deletions
src/api/vehicle/dispatchApply/index.js 0 → 100644
View file @ 32d524ab
import fetch from 'utils/fetch';
export function getDispatchList(query) {
return fetch({
url: '/vehicle/dispatch/page',
method: 'get',
params: query
});
}
\ No newline at end of file
src/router/index.js
View file @ 32d524ab
......@@ -77,29 +77,29 @@ export const constantRouterMap = [{
component: _import('error/401'),
hidden: true
},
{
path: '/',
component: Layout,
redirect: '/dashboard',
name: '首页',
hidden: true,
children: [{
path: 'dashboard',
component: _import('dashboard/index')
}]
},
// {
// path: '/',
// component: Layout,
// redirect: '/dashboard',
// name: '首页',
// hidden: true,
// children: [{
// path: 'dashboard',
// component: _import('dashboard/index')
// }]
// },
// {
// path: '/',
// component: Layout,
// redirect: '/baseManager/userManager',
// name: '首页',
// hidden: true,
// children: [{
// path: 'userManager',
// component: _import('admin/user/index')
// }]
// },
{
path: '/',
component: Layout,
redirect: '/index',
name: '首页',
hidden: true,
children: [{
path: 'index',
component: _import('index/index')
}]
},
{
path: '/introduction',
component: Layout,
......
src/views/index/disableModal.vue 0 → 100644
View file @ 32d524ab
<!--车辆排班 保养弹框-->
<template>
<el-dialog :title="currentItem.title" :visible.sync="jinyong" width="10%">
<el-form :model="currentItem" ref="currentItem" label-width="120px">
<el-form-item label="车牌号:">
<span>{{currentItem.item.numberPlate}}</span>
</el-form-item>
<el-form-item label="当前停靠公司:">
<span>{{currentItem.item.parkCompanyName}}</span>
</el-form-item>
<el-form-item label="还车公司:">
<span>{{currentItem.ii.vehicleBookRecord.retCompanyName}}</span>
</el-form-item>
<el-form-item label="申请人:">
<span>{{currentItem.ii.vehicleBookRecord.bookUserName}}</span>
</el-form-item>
<el-form-item label="禁用时间:">
<span>{{currentItem.ii.vehicleBookRecord.bookStartDate}}~{{currentItem.ii.vehicleBookRecord.bookEndDate}}</span>
</el-form-item>
<el-form-item label="禁用说明:">
<span>{{currentItem.ii.vehicleBookRecord.remark}}</span>
</el-form-item>
</el-form>
<!-- <div slot="footer" class="dialog-footer">
<el-button @click="cancel()">取消禁用</el-button>
</div> -->
</el-dialog>
</template>
<script>
import {mapGetters} from 'vuex';
import ElRow from "element-ui/packages/row/src/row";
import ElCol from "element-ui/packages/col/src/col";
import ElFormItem from "../../../node_modules/element-ui/packages/form/src/form-item.vue";
import {
agreeBook,
cancleBook,
rejectBook
} from 'api/vehicle/vehicleSchedulManage';
export default {
components: {
ElFormItem,
ElCol,
ElRow},
props: ["currentItem"],
name: 'disableModal',
data() {
return {
jinyong:false,
}
},
created() {
},
watch: {
jinyong(newValue, oldValue){
if(!newValue){
this.$emit("jinyongDialogEvent", false);
}
},
},
mounted() {
this.jinyong = true;
},
methods: {
/**
* 弹框-取消
* */
cancel() {
console.log("取消禁用");
cancleBook(this.currentItem.ii.vehicleBookRecord.id).then(response => {this.$emit("jinyongDialogEvent", true);});
}
}
}
</script>
src/views/index/index.vue 0 → 100644
View file @ 32d524ab
<template>
<div class="app-container calendar-list-container" v-loading.body="showLoadingBody">
<div >
<div class="filter-container" ref="filter-container">
<el-form ref="queryForm" :inline="inline" :model="listQuery" label-width="100px">
<el-row>
<el-col :span="8">
<el-form-item label="车辆状态">
<el-select class="filter-item" v-model="listQuery.status" placeholder="请选择车辆状态">
<el-option :key="undefined" label="无" :value="undefined"></el-option>
<el-option v-for="(val, key, index) in getAllVehicleStatus() " :key="val.code" :label="val.val"
:value="val.code"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="车牌">
<el-input v-model="listQuery.numberPlate" placeholder="请输入车牌"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="所属地区" prop="zoneId">
<el-select class="filter-item" v-model="listQuery.zoneId" placeholder="请选择" @change="getProvinceRegions">
<el-option :key="undefined" label="无" :value="undefined"></el-option>
<el-option v-for="val in getAllZoneList" :key="val.id" :label="val.name" :value="val.id"> </el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="所属分公司" prop="subordinateBranch">
<el-select class="filter-item" v-model="listQuery.subordinateBranch" placeholder="请选择" @change="getAllBranchCompanyChange">
<el-option :key="undefined" label="无" :value="undefined"></el-option>
<el-option v-for="val in allBranchCompany" :key="val.id" :label="val.name" :value="val.id"> </el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="时间">
<el-date-picker
v-model="listQuery.startTime"
type="date"
:editable="true"
format="yyyy-MM-dd"
placeholder="选择日期"
></el-date-picker>~
<el-date-picker
v-model="listQuery.endTime"
type="date"
:editable="true"
format="yyyy-MM-dd"
placeholder="选择日期"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="当前停放公司" prop="parkBranchCompanyId">
<el-autocomplete
class="inline-input"
v-model="listQuery.parkBranchCompanyName"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
@select="handleSelectPark"
></el-autocomplete>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
</div>
<el-form label-width="100px" v-if="countTJ">
<el-row :gutter="20">
<el-col :span="2"><el-form-item label="车辆概况"></el-form-item></el-col>
<el-col :span="5" v-for="(item, index) in countTJ" :key="item.id">
<div class="grid-content bg-purple" v-if="item.travelStatus == 0 || item.travelStatus == 1 || item.travelStatus == 4 || item.travelStatus == 2">
<div class="text" style="color: #171413;">{{item.total}}</div>
<div class="text" v-if="item.travelStatus == 0">车辆总额（辆）</div>
<div class="text" v-if="item.travelStatus == 4">出行中车辆（辆）</div>
<div class="text" v-if="item.travelStatus == 1">空闲车辆（辆）</div>
<div class="text" v-if="item.travelStatus == 2">维修中车辆（辆）</div>
</div>
</el-col>
</el-row>
</el-form>
<!--车辆预警-->
<div class="marquee_box" v-if="marqueeList.length>0" @mouseenter="handelOver" @mouseleave="handelOut">
<ul class="marquee_list" :class="{marquee_top:animate}">
<li v-for="(item,index) in marqueeList" :class="item.color">{{item.msg}} >>立即处理</li>
</ul>
</div>
<!--车辆排班-->
<!--bookType 1-租车、2-分公司使用、3-维修、4、展览、5、旅游、6、保养、7、预约中、8、禁用-->
<div style="display: flex;">
<span class="tip-co bg-1"></span><span>租房车</span>
<span class="tip-co bg-5"></span><span>房车游</span>
<span class="tip-co bg-4"></span><span>展览</span>
<span class="tip-co bg-6"></span><span>保养</span>
<span class="tip-co bg-7"></span><span>预约中</span>
<span class="tip-co bg-8"></span><span>禁用</span>
</div>
<div style="position: relative;padding: 10px;padding-left: 0;width: 100%;overflow-x:auto;" v-if="currentMonth">
<div style="display: flex;">
<div class="day-title" style="min-width: 200px;max-width:200px;background: #eef1f6;">日期（{{currentMonth}}~{{nextMonth}}月）</div>
<div class="day-title" style="background: #eef1f6;" v-for="item in tempDayList" :key="item.day" ><span>{{item.day}}</span></div>
</div>
<div v-for="item in list" :key="item.id" style="display: flex;">
<div class="v-list" style="display: inline-block;">
<div style="color: #bfcbd9;font-size: 14px;">
现在位置：{{item.parkCompanyName}}
</div>
<div>{{item.numberPlate}}<img src="../../assets/images/detail.png" style="width: 15px;margin-left: 10px;"/></div>
<div style="color: #bfcbd9;font-size: 14px;">{{item.vehicleModel?item.vehicleModel.name:''}}</div>
</div>
<div class="day-title flex-jca-fdc" style="padding: 0;" v-for="iitem in item.temp" :key="iitem.day" >
<!--@click="ii.bg?toShowDialog(item, iitem, ii):''"-->
<div v-for="ii in iitem.children" :key="ii.time" class="ii-day" :class="ii.bg" @click="toShowDialog(item, iitem, ii)">
<span v-if="ii.timeEtr=='00'" style="position: absolute;color: rgb(255, 255, 255);left: -18px;top: 60px;">{{ii.timeEtr}}</span>
<span v-else style="position: absolute;color: #fff;top: -17px;right: 0;">{{ii.timeEtr}}</span>
<span style="position: absolute;color: #fff;z-index: 11;">{{ii.timeStr}}</span>
</div>
</div>
</div>
</div>
<div v-show="!listLoading" class="pagination-container">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
: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>
</div>
</div>
<!--保养弹框-->
<vehicleMaintenanceModal v-if="baoyang" :currentItem="currentItem" v-on:baoyangDialogEvent = "baoyangDialogEvent"></vehicleMaintenanceModal>
<!--展览、预定用车弹框-->
<vehicleExhibitionModal v-if="zhanlan" :currentItem="currentItem" v-on:zhanlanDialogEvent = "zhanlanDialogEvent"></vehicleExhibitionModal>
<!--安排用车弹框-->
<vehiclePlanModal v-if="anpai" :currentItem="currentItem" v-on:anpaiDialogEvent = "anpaiDialogEvent"></vehiclePlanModal>
<!--租车详情弹框-->
<!--rentOrder-->
<rentOrderDetailModal :form="rentOrderInfo" :rentCostDetail="rentCostDetail" v-if="rentOrder" v-on:rentOrderDetailDialogEvent="rentOrderDetailDialogEvent"></rentOrderDetailModal>
<!--旅游订单详情-->
<tourOrderDetailModal :tourRow="tourRow" v-if="tourDialogVisible" v-on:tourOrderDetailDialogEvent="tourOrderDetailDialogEvent"></tourOrderDetailModal>
<!--禁用弹框-->
<disableModal v-if="jinyong" :currentItem="currentItem" v-on:jinyongDialogEvent = "jinyongDialogEvent"></disableModal>
</div>
</template>
<style>
.flex-jca-fdc{
display: flex !important;
flex-direction: column;
justify-content: space-around;
}
.tip-co{
padding: 10px;
margin-right: 10px;
margin-left: 20px;
}
.tip-co:first-child{
margin-left: 0;
}
/*1-租车、2-分公司使用、3-维修、4、展览、5、旅游、6、保养、7、预约中、8、禁用*/
.bg-1{
background: #20a0ff;
}
.bg-5{
background: #6633cc;
}
.bg-4{
background: #00cc66;
}
.bg-6{
background: #ff6633;
}
.bg-7{
background: #cff1f6;
}
.bg-8{
background: #d7d7d7;
}
.ii-day{
height: 4.16%;
position: relative;
}
.day-title{
border-right:1px solid #bfcbd9;
border-bottom:1px solid #bfcbd9;
padding: 10px;
min-width: 45px;
max-width: 45px;
display: inline-block;
cursor: pointer;
}
.v-list{
padding: 10px;
min-width: 200px;
max-width: 200px;
border-bottom:1px solid #bfcbd9;
border-right:1px solid #bfcbd9;
}
.zzui-broadcast-window{
height: 180px !important;
background: #ccc;
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #eef1f6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.grid-content .text{
text-align: center;
line-height: 35px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
.marquee {
width: 100%;
height: 50px;
align-items: center;
color: #3a3a3a;
background-color: white;
display: flex;
box-sizing: border-box;
overflow: hidden;
}
.marquee_title {
padding: 0 20px;
height: 21px;
font-size: 14px;
border-right: 1px solid #d8d8d8;
align-items: center;
}
.marquee_box {
display: block;
position: relative;
width: 100%;
height: 145px;
overflow: hidden;
margin: 10px 0;
background: #eef1f6;
}
.marquee_list {
display: block;
position: absolute;
top: 0;
left: 0;
}
.marquee_top {
transition: all 0.5s;
}
.marquee_list li {
height: 30px;
line-height: 30px;
font-size: 14px;
list-style-type:none;
}
.marquee_list li span {
padding: 0 2px;
}
.warn-1{
color: red;
}
.warn-2{
color: #20a0ff;
}
.warn-3{
color: #ff9900;
}
</style>
<script>
import 'static/css/uploadImg.css';// 引入图片上传组件对话框
import vehicleMaintenanceModal from './vehicleMaintenanceModal';//车辆保养弹框
import vehicleExhibitionModal from './vehicleExhibitionModal';//车辆展览弹框
import vehiclePlanModal from './vehiclePlanModal';//安排用车
import rentOrderDetailModal from "../order/modal/rentOrderDetailModal";//租车订单详情
import tourOrderDetailModal from "../order/modal/tourOrderDetailModal";//房车游订单详情
import disableModal from "./disableModal";//禁用弹框
import {
getSysRegionByIds
} from 'api/vehicle/vehicleInfo/';
import {
getAllZone
} from 'api/base_info/constant/';
import {
getAllCompany,
getAll
} from 'api/base_info/branch_company/';
import {
getAllBranchCompanyByZoneId
} from 'api/order/rentVehicle';
import {
formatDate
} from 'utils/dateFormattor';
import {
toEast8Date,
deepCopyDate,
newEast8Date,
convertDate2Str,
timestamp2Date,
getTimeByDay,
getCurrentMonth,
getMonth,
getymdTimeByDay,
getCurrentYearMonth
} from 'utils/dateUtils';
import rsCode from '../../utils/rsCode';
import {mapGetters} from 'vuex';
import {
getToken
} from 'utils/auth';
import {
getVehiclePlanList,
getVehicleOrderDetail
} from 'api/vehicle/vehicleSchedulManage';
import Element1 from "../admin/menu/components/element";
import ElRow from "element-ui/packages/row/src/row";
import ElCol from "element-ui/packages/col/src/col";
export default {
name: 'vehicleSchedulManage',
components: {
ElCol,
ElRow,
Element1,
vehicleExhibitionModal,
vehicleMaintenanceModal,
vehiclePlanModal,
rentOrderDetailModal,
tourOrderDetailModal,
disableModal
},
data() {
return {
animate: false,
marqueeList: [],
modalTitle: "创建",
BASE_API: process.env.BASE_API,
oneCampsiteDialogVisible: false,//添加、编辑弹框
showLoadingBody: false,
countTJ: undefined,//车辆概况
form: {
tagNames:"",//标签
name: undefined,//旅游名称
saleCount: undefined,//销量
stock: undefined,//总数量
status: undefined,
},
list: null,
total: null,
listLoading: true,
listQuery: {
page: 1,
limit: 10,
parkBranchCompanyId: undefined,//停靠分公司id
parkBranchCompanyName: undefined,//停靠分公司名称
subordinateBranch: undefined,//所属分公司
subordinateBranchName: undefined,//所属分公司名称
zoneId: undefined,//所属片区
startTime: undefined,
endTime:undefined,
status: undefined,//车辆状态
},
inline: true,
mar: null,//滚屏
textMap: {
update: '编辑',
create: '创建'
},
tableKey: 0,
tempDayList: [],//日期
currentMonth: undefined,//当前月份
nextMonth: undefined,//下月
allBranchCompany: [],//所有分公司列表
baoyang: false,//保养弹框,
zhanlan: false,//展览弹框
rentOrder: false,//租车订单详情
anpai: false,//安排用车弹框
jinyong: false,//禁用弹框
currentItem: {},//待操作数据
rentOrderInfo: {},//租车订单详情
rentCostDetail: {},//租车订单费用明细
tourDialogVisible: false,//旅游订单弹框
tourRow: {},//旅游订单详情-当前行
}
},
created() {
this.getList();
let currentMonth = getCurrentMonth();
this.currentMonth = parseInt(currentMonth);
if(this.currentMonth < 12){
this.nextMonth = this.currentMonth + 1;
} else {
this.nextMonth = 1;
}
this.getTempDayList();
this.mar = setInterval(this.showMarquee, 2000);
getAll()
.then(response => {
this.allCompaniesArr = response.data;
})
getAllCompany(codeAndBranchCompany => {
this.allCompanies = codeAndBranchCompany;
});
},
computed: {
...mapGetters([
'elements',
'vehicleStatus'
]),
//获取大区列表
getAllZoneList(){
this.allZoneArr = getAllZone();
return getAllZone();
},
},
methods: {
/**
* 旅游订单详情弹框关闭
* */
tourOrderDetailDialogEvent(e){
this.tourDialogVisible = false;
},
/**
* 点击事件
* */
toShowDialog(item, iitem, ii){
// <!--bookType 1-租车、2-分公司使用、3-维修、4、展览、5、旅游、6、保养、7、预约中、8、禁用-->
if(!ii.bg){
//空白-可安排用车
// this.anpai = true;
// let arr = item.vehicleModel.keyword.split(",");
// item.vehicleModel.keyword = arr.join(" | ");
// this.currentItem = {item: item, iitem: iitem, ii: ii};
} else {
if(ii.bookType == 6){
//保养
this.baoyang = true;
this.currentItem = {item: item, iitem: iitem, ii: ii};
} else if(ii.bookType == 4){
//展览
this.zhanlan = true;
this.currentItem = {item: item, iitem: iitem, ii: ii, title: "展览用车"};
} else if(ii.bookType == 7){
this.zhanlan = true;
this.currentItem = {item: item, iitem: iitem, ii: ii, title: "预定用车"};
} else if(ii.bookType == 1){
this.getOneVechi(ii.vehicleBookRecord.orderNo);
// this.rentOrder = true;
// this.rentOrderInfo = {};
this.currentItem = {item: item, iitem: iitem, ii: ii, title: "租车订单"};
} else if(ii.bookType == 5) {
//房车游订单详情
this.tourRow = {no: ii.vehicleBookRecord.orderNo};
this.tourDialogVisible = true
} else if(ii.bookType == 8) {
//禁用
this.jinyong = true;
this.currentItem = {item: item, iitem: iitem, ii: ii, title: "禁用"};
}
}
},
/**
* 根据订单号获取订单详情
* */
getOneVechi: function(orderNo) {
let params = {
orderNo: orderNo
};
getVehicleOrderDetail(params).then(res => {
if (res.status == 200) {
let a = res.data;
let vehicleUserLicenses = {};
// if (a.status == 5) {
// vehicleUserLicenses = {
// name: a.orderVehicleCrosstownDto.licenseName,
// phone: a.orderVehicleCrosstownDto.licensePhone,
// idCard: a.orderVehicleCrosstownDto.licenseIdCard
// };
// } else {
// if (a.vehicleUserLicenses.length > 0) {
// vehicleUserLicenses = a.vehicleUserLicenses[0];
// }
// }
a.orderRentVehicleDetail.startTime = timestamp2Date(a.orderRentVehicleDetail.startTime);
a.orderRentVehicleDetail.endTime = timestamp2Date(a.orderRentVehicleDetail.endTime);
let arr = a.picture ? a.picture.split(",") : [];
a.picture = arr.length > 0 ? arr[0] : "";
a.payTime = timestamp2Date(a.payTime);
this.rentOrderInfo = a;
this.costDetail = JSON.parse(this.rentOrderInfo.orderRentVehicleDetail.costDetail);
var cost = '';
this.costDetail.children.map(function(a) {
cost += a.key + ":" +a.detail+" ";
});
this.rentCostDetail = cost;
if(this.rentOrderInfo.orderRentVehicleDetail.driverType==1) {
this.serviceCost = this.rentOrderInfo.orderRentVehicleDetail.dayNum * 600
}
this.rentOrder = true;
} else {
this.$notify({
title: '失败',
message: '操作失败！',
type: 'error',
duration: 2000
});
}
});
},
/**
* 关闭保养弹框后逻辑处理
* */
baoyangDialogEvent(e){
this.baoyang = false;
if(e){//关闭编辑
//编辑成功-重新加载列表
this.getList();
}
},
/**
* 关闭展览弹框后逻辑处理
* */
zhanlanDialogEvent(e){
this.zhanlan = false;
if(e){//关闭编辑
//编辑成功-重新加载列表
this.getList();
}
},
/**
* 禁用弹框关闭后逻辑处理
* */
jinyongDialogEvent(e){
this.jinyong = false;
if(e){//关闭编辑
//编辑成功-重新加载列表
this.getList();
}
},
/**
* 安排用车弹框关闭逻辑处理
* */
anpaiDialogEvent(e){
this.anpai = false;
if(e){//关闭编辑
//编辑成功-重新加载列表
this.getList();
}
},
/**
* 租车订单详情弹框关闭
* */
rentOrderDetailDialogEvent(e){
this.rentOrder = false;
},
/**
* 根据片区id获取分公司列表
* */
getProvinceRegions(item) {
this.listQuery.zoneId = item;
this.listQuery.subordinateBranch = undefined;
getAllBranchCompanyByZoneId({zoneId: item})
.then(response => {
this.allBranchCompany = response.data;
})
},
/**
* 选择分公司
* */
getAllBranchCompanyChange(item) {
this.listQuery.subordinateBranch = item
},
/**
* 鼠标移入
* */
handelOver(){
clearInterval(this.mar);
},
/**
* 鼠标移出
* */
handelOut(){
this.mar = setInterval(this.showMarquee, 2000);
},
/**
* 立即处理
* */
toVehicleWarningMsg(){
this.$router.push({path: '/vehicle/vehicleWarningMsg'});
},
showMarquee: function() {
this.animate = true;
setTimeout(() => {
this.marqueeList.push(this.marqueeList[0]);
this.marqueeList.shift();
this.animate = false;
}, 1000);
},
getAllVehicleStatus: function () {
return this.vehicleStatus;
},
/**
* 所属分公司
* */
handleSelectSubordinate(item){
if(item.value == "无"){
this.listQuery.subordinateBranch = undefined;
this.listQuery.subordinateBranchName = "无";
} else {
this.listQuery.subordinateBranch = item.id;
this.listQuery.subordinateBranchName = item.name;
}
},
/**
* 停靠分公司
* */
handleSelectPark(item){
if(item.value == "无"){
this.listQuery.parkBranchCompanyId = undefined;
this.listQuery.parkBranchCompanyName = "无";
} else {
this.listQuery.parkBranchCompanyId = item.id;
this.listQuery.parkBranchCompanyName = item.name;
}
},
querySearch(queryString, cb) {
let selectArry = [];
let iitem = {
value: "无",
name: "无"
};
selectArry.push(iitem);
this.allCompaniesArr.map(function(item){
item.value = item.name;
selectArry.push(item);
});
this.selectArry = selectArry;
var results = queryString ? selectArry.filter(this.createFilter(queryString)) : selectArry;
// 调用 callback 返回建议列表的数据
cb(results);
},
createFilter(queryString) {
return (restaurant) => {
return (restaurant.name.indexOf(queryString.toLowerCase()) != -1);
};
},
/**
* 获取列表
* */
getList() {
let _this = this;
this.listLoading = true;
if(this.listQuery.startTime && (typeof this.listQuery.startTime == "object")){
this.listQuery.startTime = this.listQuery.startTime.getTime();
}
if(this.listQuery.endTime && (typeof this.listQuery.endTime == "object")){
this.listQuery.endTime = this.listQuery.endTime.getTime();
}
getVehiclePlanList(this.listQuery).then(response => {
this.countTJ = response.data.vehicleCountVos;
let totalCountRs = undefined;
let listRs = undefined;
if (!this.$utils.isEmpty(response.data.vehicleAndModelInfoVo) && this.$utils.isInteger(response.data.vehicleAndModelInfoVo.totalCount)) {
listRs = response.data.vehicleAndModelInfoVo.data;
totalCountRs = response.data.vehicleAndModelInfoVo.totalCount;
listRs.map(function(item){
item.visible2 = false;
item.crtTimeStr = timestamp2Date(item.crtTime);
if(item.storeTypeName){
item.storeTypeName = item.storeTypeName.join("|");
}
// 解析开始时间-结束时间
// item.vehicleBookRecord.map(function (iitem) {
// let bookStartDate = iitem.bookStartDate.substring(0,10);
// let bookEndDate = iitem.bookEndDate.substring(0,10);
// iitem.startHourList = ["0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0"];
// if(iitem.startHour){
// for(let i = 0; i < iitem.startHour.length;i++){
// iitem.startHourList[i] = iitem.startHour[i]
// }
// }
// iitem.startHourList = iitem.startHourList?iitem.startHourList.reverse(): ["0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0"];
// let flag = false;//开始时间标识，查找第一个1
// let flagE = false;//结束时间标识，查找第一个0
// let sStart = "00";//开始时间
// let sEnd= "00";//结束时间
// iitem.startHourList.map(function(ic, index){
// let c = index +1;
// if(ic == 1 && !flag){
// if(c<10){
// sStart = "0"+c;
// } else {
// sStart = c
// }
// flag = true;
// }
// });
// if(iitem.endHour){
// if(iitem.endHour.length>=10){
// sEnd = iitem.endHour.length;
// } else {
// sEnd = "0" + iitem.endHour.length;
// }
// }
// iitem.bookStartDate = iitem.bookStartDate.substring(0,10) + " " +sStart + ":00:00";
// iitem.bookEndDate = iitem.bookEndDate.substring(0,10) + " " +sEnd + ":00:00";
// });
// item.temp = _this.getDayList(item);//获取车辆30天排期
item.temp = _this.getMonthDayList(item);//获取车辆30天排期
});
}
if (!this.$utils.isEmpty(response.data.vehicleWarningMsgs)) {
response.data.vehicleWarningMsgs.map(function(ii){
ii.color = "warn-" + ii.colorType;
});
this.marqueeList = response.data.vehicleWarningMsgs;
}
this.listLoading = false;
this.list = listRs;
//渲染颜色
this.setColor();
this.total = totalCountRs;
})
},
handleFilter() {
this.listQuery.page = 1;
this.$refs.queryForm.validate(valid => {
if (valid) {
this.getList();
} else {
return false;
}
});
},
handleSizeChange(val) {
this.listQuery.limit = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.page = val;
this.getList();
},
/**
* 获取未来30天日历表
* */
getMonthDayList(item){
let temp = [];
let list = this.list;
for(let i = 0; i < 30; i++){
let t = [];
let tymd = getymdTimeByDay(i);
temp.push({day: getTimeByDay(i), month: getMonth(i), time: tymd});
}
return temp;
},
/**
* 渲染颜色
* */
getDayList(item){
let temp = [];
let list = this.list;
for(let i = 0; i < 30; i++){
let t = [];
let tymd = getymdTimeByDay(i);
let children = [];
let tt = "";//yyyy-MM-dd hh:mm:ss
let h = "";
let bookType = undefined;//当前车辆状态
let vehicleBookRecord = {};//车辆排班信息
for(let ii = 0; ii < 24; ii ++) {
if (ii < 10) {
h = "0" + ii;
tt = tymd + " 0" + ii + ":00:00";
} else {
tt = tymd + " " + ii + ":00:00";
h = ii;
}
let bg = "";//背景色
let pp = {};
pp.time = tt;
pp.h = h;
item.vehicleBookRecord.map(function (iitem) {
if (iitem.bookStartDate <= tt && iitem.bookEndDate >=tt) {
// <!--bookType 2-分公司使用、1-租车、3-维修、4、展览、5、旅游、6、保养、7、预约中、8、禁用-->
if(iitem.bookStartDate == tt && (iitem.bookType == 1 || iitem.bookType == 5 || iitem.bookType == 4)){//租车、旅游、展览显示起止时间
pp.timeStr = h;
}
pp.bg = "bg-"+ iitem.bookType;
pp.vehicleBookRecord = iitem;
pp.bookType = iitem.bookType;
if(iitem.bookEndDate == tt){
if (iitem.bookType == 1 || iitem.bookType == 5 || iitem.bookType == 4){
pp.timeEtr = h;
}
pp.bg = "";
}
}
});
children.push(pp);
}
temp.push({day: getTimeByDay(i), month: getMonth(i), children: children});
}
return temp;
},
/**
* 获取日期数组
* */
setColor(){
let temp = [];
this.list.map(function(item){
item.temp.map(function(ttemp){
let children = [];
let tt = "";//yyyy-MM-dd hh:mm:ss
let h = "";
let bookType = undefined;//当前车辆状态
let vehicleBookRecord = {};//车辆排班信息
for(let ii = 0; ii < 24; ii ++) {
if (ii < 10) {
h = "0" + ii;
tt = ttemp.time + " 0" + ii + ":00:00";
} else {
tt = ttemp.time + " " + ii + ":00:00";
h = ii;
}
let bg = "";//背景色
let pp = {};
pp.time =tt;
pp.h = h;
item.vehicleBookRecord.map(function (iitem) {
if (iitem.bookStartDate <= tt && iitem.bookEndDate >=tt) {
// <!--bookType 2-分公司使用、1-租车、3-维修、4、展览、5、旅游、6、保养、7、预约中、8、禁用-->
if(iitem.bookStartDate == tt && (iitem.bookType == 1 || iitem.bookType == 5 || iitem.bookType == 4)){//租车、旅游、展览显示起止时间
pp.timeStr = h;
}
pp.bg = "bg-"+ iitem.bookType;
pp.vehicleBookRecord = iitem;
pp.bookType = iitem.bookType;
if(iitem.bookEndDate == tt){
if (iitem.bookType == 1 || iitem.bookType == 5 || iitem.bookType == 4){
pp.timeEtr = h;
}
pp.bg = "";
}
}
});
children.push(pp);
}
ttemp.children = children
});
});
},
/**
* tempDayList
**/
getTempDayList(){
let temp = [];
let list = this.list;
let currentMonth = getCurrentMonth();
for(let i = 0; i < 30; i++){
let t = [];
let tymd = getymdTimeByDay(i);
let children = [];
let tt = "";//yyyy-MM-dd hh:mm:ss
let h = "";
let bg = "";
for(let ii = 0; ii < 24; ii ++) {
if (ii < 10) {
h = "0" + ii;
tt = tymd + " 0" + ii + ":00:00";
} else {
tt = tymd + " " + ii + ":00:00";
h = ii;
}
children.push({time: tt, h: h, bg: bg});
}
temp.push({day: getTimeByDay(i), month: getMonth(i), children: children});
}
this.tempDayList = temp;
},
/**
* 排版记录
*/
toVehicleRecords(item){
let selectedMonth = getCurrentYearMonth();
this.$router.push({path: '/vehicle/vehicleRecords?selectedMonth='+selectedMonth+"&numberPlate="+item.numberPlate});
}
}
}
</script>
src/views/index/vehicleExhibitionModal.vue 0 → 100644
View file @ 32d524ab
<!--车辆排班 保养弹框-->
<template>
<el-dialog :title="currentItem.title" :visible.sync="zhanlan" width="10%">
<el-form :model="currentItem" ref="currentItem" label-width="120px">
<el-form-item label="车牌号:">
<span>{{currentItem.item.numberPlate}}</span>
</el-form-item>
<el-form-item label="所属公司:">
<span>{{currentItem.item.subordinateBranchName}}</span>
</el-form-item>
<el-form-item label="申请人:">
<span>{{currentItem.ii.vehicleBookRecord.bookUserName}}</span>
</el-form-item>
<el-form-item label="当前停靠公司:">
<span>{{currentItem.item.parkCompanyName}}</span>
</el-form-item>
<el-form-item label="还车公司:">
<span>{{currentItem.ii.vehicleBookRecord.retCompanyName}}</span>
</el-form-item>
<el-form-item label="预定时间:">
<span>{{currentItem.ii.vehicleBookRecord.bookStartDate}}~{{currentItem.ii.vehicleBookRecord.bookEndDate}}</span>
</el-form-item>
<el-form-item label="用途:">
<span>{{currentItem.title == "展览用车"?"展览": currentItem.title == "预定用车"?"预定":""}}</span>
</el-form-item>
<el-form-item label="申请说明:">
<span>{{currentItem.ii.vehicleBookRecord.remark}}</span>
</el-form-item>
</el-form>
<!-- <div slot="footer" v-if='currentItem.title == "展览用车" && currentItem.ii.vehicleBookRecord.status==2' class="dialog-footer">
<el-button @click="cancel()">取消用车</el-button>
</div>
<div slot="footer" v-if='currentItem.title == "预定用车" && currentItem.ii.vehicleBookRecord.status==1' class="dialog-footer">
<el-button type="primary" @click="agree()">同 意</el-button>
<el-button @click="notAgree()">不同意</el-button>
</div> -->
</el-dialog>
</template>
<script>
import {mapGetters} from 'vuex';
import ElRow from "element-ui/packages/row/src/row";
import ElCol from "element-ui/packages/col/src/col";
import ElFormItem from "../../../node_modules/element-ui/packages/form/src/form-item.vue";
import {
agreeBook,
cancleBook,
rejectBook
} from 'api/vehicle/vehicleSchedulManage';
export default {
components: {
ElFormItem,
ElCol,
ElRow},
props: ["currentItem"],
name: 'vehicleExhibitionModal',
data() {
return {
zhanlan:false,
}
},
created() {
console.log(this.currentItem);
},
watch: {
zhanlan(newValue, oldValue){
if(!newValue){
this.$emit("zhanlanDialogEvent", false);
}
},
},
mounted() {
this.zhanlan = true;
},
methods: {
/**
* 弹框-取消
* */
cancel() {
console.log("展览取消用车");
cancleBook(this.currentItem.ii.vehicleBookRecord.id).then(response => {this.$emit("zhanlanDialogEvent", true);});
},
/**
* 确定用车
* */
handelOk(){
console.log("展览确定用车");
agreeBook(this.currentItem.ii.vehicleBookRecord.id).then(response => {this.$emit("zhanlanDialogEvent", true);});
},
/**
* 同意
*/
agree(){
console.log("同意");
agreeBook(this.currentItem.ii.vehicleBookRecord.id).then(response => {this.$emit("zhanlanDialogEvent", true);});
},
/**
* 不同意
*/
notAgree(){
console.log("不同意");
rejectBook(this.currentItem.ii.vehicleBookRecord.id).then(response => {this.$emit("zhanlanDialogEvent", true);});
},
}
}
</script>
src/views/index/vehicleMaintenanceModal.vue 0 → 100644
View file @ 32d524ab
<!--车辆排班 保养弹框-->
<template>
<el-dialog title="保养用车" :visible.sync="baoyang" width="10%">
<el-form :model="currentItem" ref="currentItem" label-width="120px">
<el-form-item label="车牌号:">
<span>{{currentItem.item.numberPlate}}</span>
</el-form-item>
<el-form-item label="所属公司:">
<span>{{currentItem.item.subordinateBranchName}}</span>
</el-form-item>
<el-form-item label="当前停靠公司:">
<span>{{currentItem.item.parkCompanyName}}</span>
</el-form-item>
<el-form-item label="还车公司:">
<span>{{currentItem.ii.vehicleBookRecord.retCompanyName}}</span>
</el-form-item>
<el-form-item label="保养人:">
<span>{{currentItem.ii.vehicleBookRecord.bookUserName}}</span>
</el-form-item>
<el-form-item label="预定时间:">
<span>{{currentItem.ii.vehicleBookRecord.bookStartDate}}~{{currentItem.ii.vehicleBookRecord.bookEndDate}}</span>
</el-form-item>
<el-form-item label="用途:">
<span>保养</span>
</el-form-item>
<el-form-item label="保养项目:">
<span></span>
</el-form-item>
</el-form>
<!-- <div slot="footer" class="dialog-footer" v-if="currentItem.ii.vehicleBookRecord.status==2">
<el-button @click="cancel()">取消用车</el-button>
</div>
<div slot="footer" v-if='currentItem.ii.vehicleBookRecord.status==1' class="dialog-footer">
<el-button type="primary" @click="agree()">同 意</el-button>
<el-button @click="notAgree()">不同意</el-button>
</div> -->
</el-dialog>
</template>
<script>
import {mapGetters} from 'vuex';
import ElRow from "element-ui/packages/row/src/row";
import ElCol from "element-ui/packages/col/src/col";
import ElFormItem from "../../../node_modules/element-ui/packages/form/src/form-item.vue";
import {
agreeBook,
cancleBook,
rejectBook
} from 'api/vehicle/vehicleSchedulManage';
export default {
components: {
ElFormItem,
ElCol,
ElRow},
props: ["currentItem"],
name: 'vehicleMaintenanceModal',
data() {
return {
baoyang:false,
}
},
created() {
console.log(this.currentItem);
},
watch: {
baoyang(newValue, oldValue){
if(!newValue){
this.$emit("baoyangDialogEvent", false);
}
},
},
mounted() {
this.baoyang = true;
},
methods: {
/**
* 保养-弹框-取消
* */
cancel() {
cancleBook(this.currentItem.ii.vehicleBookRecord.id).then(response => {this.$emit("zhanlanDialogEvent", true);});
this.$emit("baoyangDialogEvent", true);
},
/**
* 同意
*/
agree(){
console.log("同意");
agreeBook(this.currentItem.ii.vehicleBookRecord.id).then(response => {this.$emit("zhanlanDialogEvent", true);});
},
/**
* 不同意
*/
notAgree(){
console.log("不同意");
rejectBook(this.currentItem.ii.vehicleBookRecord.id).then(response => {this.$emit("zhanlanDialogEvent", true);});
},
}
}
</script>
src/views/index/vehiclePlanModal.vue 0 → 100644
View file @ 32d524ab
<!--车辆排班 保养弹框-->
<template>
<el-dialog title="安排用车" :visible.sync="anpai" class="user-car">
<el-form :model="form" ref="form" :rules="rules" label-width="140px">
<el-form-item label="车牌号">
<span>{{currentItem.item.numberPlate}}</span>
</el-form-item>
<el-form-item label="车型名称">
<span>{{currentItem.item.vehicleModel.name}}</span>
</el-form-item>
<el-row>
<el-col :span="8">
<el-form-item label="当前停靠公司:">
<span>{{currentItem.item.parkCompanyName}}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="所属公司">
<span>{{currentItem.item.subordinateBranchName}}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="公里数">
<span>{{currentItem.item.maintenanceMileage}}km</span>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="房车配置">
<span>{{currentItem.item.vehicleModel.keyword}}</span>
</el-form-item>
<el-form-item label="选择时间" prop="times">
<el-date-picker
v-model="form.times"
type="datetimerange"
:picker-options="pickerOptions0"
placeholder="选择时间范围">
</el-date-picker>
</el-form-item>
<el-form-item label="还车分公司" prop="arrivalBranchCompanyName">
<el-autocomplete
class="inline-input"
v-model="form.arrivalBranchCompanyName"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
@select="handleSelectArrivalCompanyName"
></el-autocomplete>
</el-form-item>
<el-form-item label="用途" prop="bookType">
<!--bookType 2-租车、1-分公司使用、3-维修、4、展览、5、旅游、6、保养、7、预约中、8、禁用-->
<el-select class="filter-item" v-model="form.bookType" placeholder="请选择用途">
<el-option label="展览" value="4"></el-option>
<el-option label="房车游" value="5"></el-option>
<el-option label="保养" value="6"></el-option>
<el-option label="禁用" value="8"></el-option>
<!--<el-option v-for="item in getAllUseType() " :key="item.code" :label="item.val"-->
<!--:value="item.code"></el-option>-->
</el-select>
</el-form-item>
<el-form-item label="使用人" prop="vehicleUsername">
<el-input v-model="form.vehicleUsername" placeholder="请输入使用人"></el-input>
</el-form-item>
<el-form-item label="使用人联系方式" prop="vehicleUserPhone">
<el-input v-model="form.vehicleUserPhone" placeholder="请输入使用人联系方式"></el-input>
</el-form-item>
<el-form-item label="说明">
<el-input v-model="form.remark" :rows="3" placeholder="请输入说明"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel()">取消</el-button>
<el-button type="primary" @click="handelOk('form')">确 定</el-button>
</div>
</el-dialog>
</template>
<style>
.user-car .el-row{
margin-bottom: 0;
}
</style>
<script>
import {mapGetters} from 'vuex';
import {
VEHICLE_CONSTANT_VEHICLE_BRAND,
VEHICLE_CONSTANT_VEHICLE_USE,
VEHICLE_CONSTANT_BRAND_CODE_UNKOWN,
BELONG_TO_TYPE_OWN,
VEHICLE_CONSTANT_USE_TYPE_UNKOWN,
VEHICLE_CONSTANT_STATUS_NORMAL
} from '../../store/modules/baseInfo';
import {
getConstantByTypeAndCode,
getConstantListByType,
getAllInsuranceCompany,
getInsuranceCompany
} from 'api/base_info/constant/';
import {
getAllCompany,
getAll
} from 'api/base_info/branch_company/';
import {
bookPlan
} from 'api/vehicle/vehicleSchedulManage';
import ElRow from "element-ui/packages/row/src/row";
import ElCol from "element-ui/packages/col/src/col";
import ElFormItem from "../../../node_modules/element-ui/packages/form/src/form-item.vue";
import {
formatDate
} from 'utils/dateFormattor';
export default {
components: {
ElFormItem,
ElCol,
ElRow},
props: ["currentItem"],
name: 'vehiclePlanModal',
data() {
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}
},
anpai:false,
allCompaniesArr:[],
form:{
remark: "",
vehicleUsername: "",
arrivalBranchCompanyId: undefined,//还车分公司id
arrivalBranchCompanyName: "",//还车分公司名称
vehicleUserPhone:"",//使用人联系电话
bookType: undefined,//用途
times: [],
},
rules: {
vehicleUsername: [
{
type: 'string',
required: true,
message: '请输入使用人姓名',
trigger: 'blur'
},
{
min: 0,
max: 20,
message: '长度小于 20 个字符',
trigger: 'blur'
}
],
arrivalBranchCompanyName:{
type: 'string',
required: true,
message: '请选择还车公司',
trigger: 'change'
},
vehicleUserPhone:{
type: 'string',
required: true,
message: '请输入使用人联系方式',
trigger: 'blur'
},
bookType:{
type: 'string',
required: true,
message: '请选择用途',
trigger: 'change'
},
times: {
required: true,
message: '请选择时间',
}
}
}
},
created() {
console.log(this.currentItem);
getAll()
.then(response => {
this.allCompaniesArr = response.data;
})
getAllCompany(codeAndBranchCompany => {
this.allCompanies = codeAndBranchCompany;
});
},
watch: {
anpai(newValue, oldValue){
if(!newValue){
this.$emit("anpaiDialogEvent", false);
}
},
},
mounted() {
this.anpai = true;
},
methods: {
/**
* 还车分公司
*/
handleSelectArrivalCompanyName(item){
this.form.arrivalBranchCompanyId = item.id;
this.form.arrivalBranchCompanyName = item.name;
console.log(item);
},
querySearch(queryString, cb) {
let selectArry = [];
this.allCompaniesArr.map(function(item){
item.value = item.name;
selectArry.push(item);
});
this.selectArry = selectArry;
var results = queryString ? selectArry.filter(this.createFilter(queryString)) : selectArry;
// 调用 callback 返回建议列表的数据
cb(results);
},
createFilter(queryString) {
return (restaurant) => {
return (restaurant.name.indexOf(queryString.toLowerCase()) != -1);
};
},
/**
* 弹框-取消
* */
cancel() {
this.$emit("anpaiDialogEvent", false);
},
/**
* 确定用车
* */
handelOk(formName){
const set = this.$refs;
console.log(this.form.times);
set[formName].validate(valid => {
if (valid) {
let params = {
vehicleId:this.currentItem.item.id,
bookStartDate: formatDate(this.form.times[0], "yyyy-MM-dd hh")+":00:00",//预定开始时间
bookEndDate: formatDate(this.form.times[1], "yyyy-MM-dd hh")+":00:00",//预定结束时间
retCompany: this.form.arrivalBranchCompanyId,//还车分公司
bookType: this.form.bookType,//预定车辆用途类型
vehicleUsername: this.form.vehicleUsername,//使用人姓名
vehicleUserPhone: this.form.vehicleUserPhone,//使用人电话
remark: this.form.remark//说明
};
bookPlan(params).then(response => {
if (response.status === 200) {
this.$emit("anpaiDialogEvent", true);
} else {
this.$notify({
title: '失败',
message: '操作失败！',
type: 'error',
duration: 2000
});
}
})
}
})
},
}
}
</script>
src/views/index/vehicleRecords.vue 0 → 100644
View file @ 32d524ab
<!--车辆排班记录-->
<template>
<div class="app-container calendar-list-container">
<div class="filter-container">
<el-input style="width: 200px;" placeholder="车牌号"
v-model="listQuery.numberPlate"></el-input>
<el-date-picker
v-model="listQuery.selectedMonth"
type="month"
format = "yyyy-MM"
placeholder="选择月">
</el-date-picker>
<el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
</div>
<el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row
style="width: 100%">
<el-table-column align="center" label="日期" width="200">
<template scope="scope">
<div>起：{{scope.row.bookStartDate}}</div>
<div>止：{{scope.row.bookEndDate}}</div>
</template>
</el-table-column>
<el-table-column width="150" align="center" label="用途">
<template scope="scope">
<!--/*1-租车、2-分公司使用、3-维修、4、展览、5、旅游、6、保养、7、预约中、8、禁用*/-->
<span>{{scope.row.bookType==1?"租房车":scope.row.bookType==4?"展览":scope.row.bookType==5?"房车游":scope.row.bookType==6?"保养":scope.row.bookType==7?"预约中":scope.row.bookType==8?"禁用":scope.row.bookType==2?"分公司使用":'未知用途'}}</span>
</template>
</el-table-column>
<el-table-column width="200" align="center" label="订单号">
<template scope="scope">
<span>{{scope.row.orderNo}}</span>
</template>
</el-table-column>
<el-table-column width="200" align="center" label="出车分公司">
<template scope="scope">
<span>{{scope.row.mileage}}</span>
</template>
</el-table-column>
<el-table-column width="200" align="center" label="还车分公司">
<template scope="scope">
<span>{{scope.row.retCompanyName}}</span>
</template>
</el-table-column>
<el-table-column width="150" align="center" label="使用人">
<template scope="scope">
<span>{{scope.row.vehicleUsername}}</span>
</template>
</el-table-column>
<el-table-column width="150" align="center" label="使用人联系方式">
<template scope="scope">
<span>{{scope.row.vehicleUserPhone}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="操作" width="300">
<template scope="scope">
<el-button size="small" type="success" @click="toShowDialog(scope.row)" v-if="scope.row.bookType !=2 && scope.row.bookType !=3">详情</el-button>
<el-button size="small" type="success" @click="getLogInfo(scope.row)">重新安排</el-button>
</template>
</el-table-column>
</el-table>
<div v-show="!listLoading" class="pagination-container">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
: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>
</div>
<!--保养弹框-->
<vehicleMaintenanceModal v-if="baoyang" :currentItem="currentItem" v-on:baoyangDialogEvent = "baoyangDialogEvent"></vehicleMaintenanceModal>
<!--展览、预定用车弹框-->
<vehicleExhibitionModal v-if="zhanlan" :currentItem="currentItem" v-on:zhanlanDialogEvent = "zhanlanDialogEvent"></vehicleExhibitionModal>
<!--安排用车弹框-->
<vehiclePlanModal v-if="anpai" :currentItem="currentItem" v-on:anpaiDialogEvent = "anpaiDialogEvent"></vehiclePlanModal>
<!--租车详情弹框-->
<!--rentOrder-->
<rentOrderDetailModal :form="rentOrderInfo" :rentCostDetail="rentCostDetail" v-if="rentOrder" v-on:rentOrderDetailDialogEvent="rentOrderDetailDialogEvent"></rentOrderDetailModal>
<!--旅游订单详情-->
<tourOrderDetailModal :tourRow="tourRow" v-if="tourDialogVisible" v-on:tourOrderDetailDialogEvent="tourOrderDetailDialogEvent"></tourOrderDetailModal>
<!--禁用弹框-->
<disableModal v-if="jinyong" :currentItem="currentItem" v-on:jinyongDialogEvent = "jinyongDialogEvent"></disableModal>
</div>
</template>
<script>
import vehicleMaintenanceModal from './vehicleMaintenanceModal';//车辆保养弹框
import vehicleExhibitionModal from './vehicleExhibitionModal';//车辆展览弹框
import vehiclePlanModal from './vehiclePlanModal';//安排用车
import rentOrderDetailModal from "../order/modal/rentOrderDetailModal";//租车订单详情
import tourOrderDetailModal from "../order/modal/tourOrderDetailModal";//房车游订单详情
import disableModal from "./disableModal";//禁用弹框
import {
getVehicleOrderDetail
} from 'api/vehicle/vehicleSchedulManage';
import {
getBookRecord
} from 'api/vehicle/vehicleSchedulManage';
import rsCode from '../../utils/rsCode';
import {
formatDate
} from 'utils/dateFormattor';
import {
toEast8Date,
deepCopyDate,
newEast8Date,
convertDate2Str,
timestamp2Date,
getTimeByDay,
getCurrentMonth,
getMonth,
getymdTimeByDay,
getCurrentYearMonth
} from 'utils/dateUtils';
export default {
name: 'vehicleRecords',
components: {
vehicleExhibitionModal,
vehicleMaintenanceModal,
vehiclePlanModal,
rentOrderDetailModal,
tourOrderDetailModal,
disableModal
},
data() {
return {
currentItem: {},//当前操作表单
dialogVisible: false,//记录详情
form: {
vehicleId: null,
numberPlate: null,
operator: null,
date: null,
mileage: null,
amount: null,
approvers: null,
branchCompanyId: null,
branchCompanyName: null,
upkeepItems: []
},
list: null,
total: null,
listLoading: true,
listQuery: {
page: 1,
limit: 20,
selectedMonth: "",
numberPlate: undefined
},
tableKey: 0,
dialogFormVisible: false,
baoyang: false,//保养弹框,
zhanlan: false,//展览弹框
rentOrder: false,//租车订单详情
anpai: false,//安排用车弹框
jinyong: false,//禁用弹框
currentItem: {},//待操作数据
rentOrderInfo: {},//租车订单详情
rentCostDetail: {},//租车订单费用明细
tourDialogVisible: false,//旅游订单弹框
tourRow: {},//旅游订单详情-当前行
}
},
created() {
},
mounted() {
this.listQuery.selectedMonth = this.$route.query.selectedMonth;
this.listQuery.numberPlate = this.$route.query.numberPlate;
this.getList();
},
methods: {
handleFilter() {
this.getList();
},
/**
* 点击事件
* */
toShowDialog( cc, iitem){
let item = {};
let ii = {
vehicleBookRecord: cc
};
// <!--bookType 1-租车、2-分公司使用、3-维修、4、展览、5、旅游、6、保养、7、预约中、8、禁用-->
item.numberPlate = this.listQuery.numberPlate;//车牌号
item.parkCompanyName = cc.parkCompanyName;//当前停靠公司
item.subordinateBranchName = cc.subordinateBranchName;//所属公司
if(cc.bookType == 6){
//保养
this.baoyang = true;
this.currentItem = {item: item, iitem: iitem, ii: ii};
} else if(cc.bookType == 4){
//展览
this.zhanlan = true;
this.currentItem = {item: item, ii: ii, title: "展览用车"};
} else if(cc.bookType == 7){
this.zhanlan = true;
this.currentItem = {item: item, ii: ii, title: "预定用车"};
} else if(cc.bookType == 1){
this.getOneVechi(cc.orderNo);
this.currentItem = {item: item, iitem: iitem, ii: ii, title: "租车订单"};
} else if(cc.bookType == 5) {
//房车游订单详情
this.tourRow = {no: cc.vehicleBookRecord.orderNo};
this.tourDialogVisible = true
} else if(cc.bookType == 8) {
//禁用
this.jinyong = true;
this.currentItem = {item: item, iitem: iitem, ii: ii, title: "禁用"};
}
},
/**
* 根据订单号获取订单详情
* */
getOneVechi: function(orderNo) {
let params = {
orderNo: orderNo
};
getVehicleOrderDetail(params).then(res => {
if (res.status == 200) {
let a = res.data;
a.orderRentVehicleDetail.startTime = timestamp2Date(a.orderRentVehicleDetail.startTime);
a.orderRentVehicleDetail.endTime = timestamp2Date(a.orderRentVehicleDetail.endTime);
let arr = a.picture ? a.picture.split(",") : [];
a.picture = arr.length > 0 ? arr[0] : "";
a.payTime = timestamp2Date(a.payTime);
this.rentOrderInfo = a;
this.costDetail = JSON.parse(this.rentOrderInfo.orderRentVehicleDetail.costDetail);
var cost = '';
this.costDetail.children.map(function(a) {
cost += a.key + ":" +a.detail+" ";
});
this.rentCostDetail = cost;
if(this.rentOrderInfo.orderRentVehicleDetail.driverType==1) {
this.serviceCost = this.rentOrderInfo.orderRentVehicleDetail.dayNum * 600
}
this.rentOrder = true;
} else {
this.$notify({
title: '失败',
message: '操作失败！',
type: 'error',
duration: 2000
});
}
});
},
/**
* 获取排班记录列表数据
*/
getList() {
this.listLoading = true;
if(this.listQuery.selectedMonth && (typeof this.listQuery.selectedMonth == "object")){
this.listQuery.selectedMonth = formatDate(this.listQuery.selectedMonth, "yyyy-MM");//预定开始时间;
}
getBookRecord(this.listQuery).then(response => {
this.list = response.data.data;
this.total = response.data.totalCount;
this.listLoading = false;
});
},
handleSizeChange(val) {
this.listQuery.limit = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.page = val;
this.getList();
},
/**
* 关闭保养弹框后逻辑处理
* */
baoyangDialogEvent(e){
this.baoyang = false;
if(e){//关闭编辑
//编辑成功-重新加载列表
this.getList();
}
},
/**
* 关闭展览弹框后逻辑处理
* */
zhanlanDialogEvent(e){
this.zhanlan = false;
if(e){//关闭编辑
//编辑成功-重新加载列表
this.getList();
}
},
/**
* 禁用弹框关闭后逻辑处理
* */
jinyongDialogEvent(e){
this.jinyong = false;
if(e){//关闭编辑
//编辑成功-重新加载列表
this.getList();
}
},
/**
* 安排用车弹框关闭逻辑处理
* */
anpaiDialogEvent(e){
this.anpai = false;
if(e){//关闭编辑
//编辑成功-重新加载列表
this.getList();
}
},
/**
* 租车订单详情弹框关闭
* */
rentOrderDetailDialogEvent(e){
this.rentOrder = false;
},
}
}
</script>
src/views/vehicle/dispatchApply/index.vue 0 → 100644
View file @ 32d524ab
<template>
<div class="app-container calendar-list-container" v-loading.body="showLoadingBody">
<div>
<div class="filter-container" ref="filter-container">
<el-form ref="queryForm" :inline="inline" :model="listQuery" label-width="80px">
<el-form-item label="申请状态">
<el-select class="filter-item" v-model="listQuery.status" placeholder="申请状态">
<el-option v-for="(item,index) in statusList" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="所属大区">
<el-select class="filter-item" v-model="listQuery.zoneId" placeholder="请选择" @change="getProvinceRegions">
<el-option :key="undefined" label="无" :value="undefined"></el-option>
<el-option v-for="val in getAllZoneList" :key="val.id" :label="val.name" :value="val.id"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="申请公司">
<el-select class="filter-item" v-model="listQuery.companyList" placeholder="请选择" @change="getAllBranchCompanyChange">
<el-option :key="undefined" label="无" :value="undefined"></el-option>
<el-option v-for="val in allBranchCompany" :key="val.id" :label="val.name" :value="val.id"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="预订月份" prop="selectedMonth4Query">
<el-date-picker
v-model="selectedMonth4Query"
type="month"
:editable="true"
format="yyyy-MM"
placeholder="请选择预订月份">
</el-date-picker>
</el-form-item>
<el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
</el-form>
</div>
<el-table :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">
<el-table-column type="index" align="center" label="申请账号" width="200">
<template scope="scope">
<span>{{scope.row.accountName}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="申请公司" width="200">
<template scope="scope">
<span>{{scope.row.companyName}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="申请状态" width="100">
<template scope="scope">
<span v-if="scope.row.status==0">申请中</span>
<span v-if="scope.row.status==1">已通过</span>
<span v-if="scope.row.status==2">拒绝</span>
</template>
</el-table-column>
<el-table-column align="center" label="出车用途" width="300">
<template scope="scope">
<span>{{scope.row.bookRemark}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="使用人/联系方式" width="250">
<template scope="scope">
<span>{{scope.row.user}} {{scope.row.userTel}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="用车时间" width="250">
<template scope="scope">
<span>{{scope.row.startTimeStr}} 至 {{scope.row.endTimeStr}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="期望还车公司" width="200">
<template scope="scope">
<span>{{scope.row.wishRetCompanyName}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="详情" width="100">
<template scope="scope">
<span style="color: #13CE66;cursor: pointer;" @click="handleDetail(scope.row)">订单详情</span>
</template>
</el-table-column>
<el-table-column align="center" label="操作" width="300">
<template scope="scope">
<el-button size="small" type="success" @click="arrangementCars(scope.row)">安排用车</el-button>
<el-button size="small" type="success" @click="pass(scope.row)">通过</el-button>
<el-button size="small" type="danger" @click="reject(scope.row)">驳回</el-button>
<el-button size="small" type="success" @click="rulesRecoed(scope.row)">违章记录</el-button>
</template>
</el-table-column>
</el-table>
<div v-show="!listLoading" class="pagination-container">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="listQuery.page"
:page-sizes="[10,20,30,40,50]"
:page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
</div>
</div>
<!-- 查看详情 -->
<el-dialog title="调度详情" :visible.sync="dialogDetailVisible" class="order-details">
<el-form label-width="100px">
<h3>调度详情</h3>
<el-row>
<el-col :span="24">
<el-form-item label="申请状态">
<span v-if="detailItem.status==0">申请中</span>
<span v-if="detailItem.status==1">已通过</span>
<span v-if="detailItem.status==2">拒绝</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="申请账号">
<span>{{detailItem.reviewerNameApply}}</span>
<span style="margin-left:10px"></span>
</el-form-item>
</el-col>
</el-row>
<hr>
<el-row>
<el-col :span="24">
<el-form-item label="使用人">
<span v-if="detailItem.vehicleDepartureLogVo">{{detailItem.vehicleDepartureLogVo.user}}</span>
<span style="margin-left:10px" v-if="detailItem.vehicleDepartureLogVo">{{detailItem.vehicleDepartureLogVo.userTel}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="预定时间">
<span>{{detailItem.startTimeStr}}</span> 至 <span>{{detailItem.endTimeStr}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="期望还车分公司">
<span>{{detailItem.wishRetCompanyName}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="出车用途">
<span>{{detailItem.bookRemark}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注">
<span>{{detailItem.remark}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="随车物品">
<span></span>
</el-form-item>
</el-col>
</el-row>
<hr>
<h3>用车安排</h3>
<el-row>
<el-col :span="5">
<el-form-item label="车牌号">
<span>{{detailItem.numberPlate}}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="车辆编号">
<span>{{detailItem.vehicleId}}</span>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="当前停靠公司">
<span>{{detailItem.liftCompanyName}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="提车分公司">
<span>{{detailItem.liftCompanyName}}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="操作人">
<span>{{detailItem.liftCompanyLeader}}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="操作时间">
<span>{{detailItem.actualStartDate}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="还车分公司">
<span>{{detailItem.retCompanyName}}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="操作人">
<span>{{detailItem.retCompanyLeader}}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="操作时间">
<span>{{detailItem.actualEndDate}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="提车公里数">
<span v-if="detailItem.vehicleDepartureLogVo">{{detailItem.vehicleDepartureLogVo.mileageStart}}KM</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="还车公里数">
<span v-if="detailItem.vehicleDepartureLogVo">{{detailItem.vehicleDepartureLogVo.mileageEnd}}KM</span>
</el-form-item>
</el-col>
</el-row>
<hr>
<el-row>
<el-col :span="8">
<el-form-item label="审核人操作">
<span>{{detailItem.reviewerNameApply}}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="通过操作">
<span></span>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button v-if="detailItem.status!=1" type="primary" @click="cancel">关闭</el-button>
<el-button v-if="detailItem.status==1" type="primary" @click="arrangementCars()">安排车辆</el-button>
<el-button v-if="detailItem.status==1" @click="handleReject(detailItem)">驳回</el-button>
</div>
</el-dialog>
<el-dialog title="安排用车" :visible.sync="arrangementCarsDialogVisible">
<el-form :model="formdata" :rules="rules" ref="form" label-width="110px">
<h3>苏D 88888</h3>
<el-row>
<el-col :span="24">
<el-form-item label="安排车辆" prop="phone">
<el-input v-model="formdata.phone" placeholder="请输入车牌号"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="预定时间" label-width="130px" style="padding-left:8px" required>
<el-col :span="11">
<el-form-item prop="starTimeStr">
<el-date-picker v-model="formdata.starTimeStr" type = "datetime" placeholder = "请选择提车时间" value-format=" yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2"><span>-</span></el-col>
<el-col :span="11">
<el-form-item prop="endTimeStr">
<el-date-picker v-model="formdata.endTimeStr" type = "datetime" placeholder = "请选择还车时间" value-format=" yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" :picker-options="pickerOptionsEnd"></el-date-picker>
</el-form-item>
</el-col>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="提车分公司" label-width="130px" required>
<el-select class="filter-item" v-model="formdata" placeholder="请选择提车分公司">
<el-option v-for="val in allBranchCompany" :key="val.id" :label="val.name" :value="val.id"> </el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="还车分公司" label-width="130px" required>
<el-select class="filter-item" v-model="formdata" placeholder="请选择还车分公司">
<el-option v-for="val in allBranchCompany" :key="val.id" :label="val.name" :value="val.id"> </el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="用途" label-width="130px" required>
<el-select class="filter-item" v-model="formdata" placeholder="请选择用途">
<el-option v-for="val in allBranchCompany" :key="val.id" :label="val.name" :value="val.id"> </el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注" label-width="130px" required>
<el-input v-model="formdata.phone" placeholder="请输入车牌号"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button>取消</el-button>
<el-button type="primary">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { formatDate } from "utils/dateFormattor";
import {
toEast8Date,
deepCopyDate,
newEast8Date,
convertDate2Str,
timestamp2Date
} from "utils/dateUtils";
import { mapGetters } from "vuex";
import { getToken } from "utils/auth";
import {getDispatchList} from "api/vehicle/dispatchApply";
import {getAllBranchCompanyByZoneId} from 'api/order/rentVehicle';
import {getAllZone} from 'api/base_info/constant/';
import Element1 from "../../admin/menu/components/element";
import ElRow from "element-ui/packages/row/src/row";
import ElCol from "element-ui/packages/col/src/col";
export default {
name: "conponList",
components: {
ElCol,
ElRow,
Element1
},
data() {
return {
dialogDetailVisible:false,
detailItem:{},
rules: {
phone: [
{
type: "string",
required: true,
message: "请输入手机号",
trigger: "blur"
},
{ pattern: /^1[3456789]\d{9}$/, message: "手机号码错误" }
],
couponNum: {
type: "string",
required: true,
message: "请输入添加张数",
trigger: "blur"
},
couponId: {
required: true,
message: "请选择优惠券"
}
},
arrangementCarsDialogVisible: false,
BASE_API: process.env.BASE_API,
showLoadingBody: false,
list: null,
total: null,
listLoading: true,
listQuery: {
page: 1,
limit: 20,
zoneId:'',
companyList:[],
status:'',
dispatchMonth:undefined,
},
statusList:[
{
id:'',
name:'全部'
},{
id:0,
name:'申请中'
},{
id:1,
name:'已通过'
},{
id:2,
name:'拒绝'
}
],
inline: true,
tableKey: 0,
formdata: {
phone: "",
couponNum: "",
couponId: ""
},
baranchQuery: {
zoneId:null
},
pickerOptionsEnd: {
disabledDate: time => {
const beginDateVal = new Date(this.formdata.starTimeStr).getTime()
if (beginDateVal) {
return time.getTime() < beginDateVal - 8.64e7
}
}
},
allBranchCompany:[],
};
},
created() {
this.getList();
this.get_title();
},
computed: {
...mapGetters(["elements"]),
selectedMonth4Query: {
get: function () {
if (this.$utils.isString(this.listQuery.dispatchMonth) && this.listQuery.dispatchMonth !== '') {
return toEast8Date(this.listQuery.dispatchMonth);
}
return undefined;
},
set: function (date) {
if (this.$utils.isDate(date)) {
this.listQuery.dispatchMonth = formatDate(date, 'yyyy-MM');
} else {
this.listQuery.dispatchMonth = undefined;
}
}
},
//获取大区列表
getAllZoneList(){
return getAllZone();
},
},
methods: {
cancel() {
this.dialogDetailVisible = false;
},
handleDetail(row){
this.detailItem = row;
this.dialogDetailVisible = true;
},
//监听change事件
getProvinceRegions(item) {
this.listQuery.zoneId = item
this.baranchQuery.zoneId = item
this.listQuery.liftCompany = undefined;
getAllBranchCompanyByZoneId(this.baranchQuery).then(response => {
this.allBranchCompany = response.data;
})
},
getAllBranchCompanyChange(item) {
this.listQuery.liftCompany = item
},
get_title() {
getTitle().then(response => {
this.titleList = response.data;
});
},
/**
* 获取列表
* */
getList() {
this.listLoading = true;
getDispatchList(this.listQuery).then(response => {
let totalCountRs = undefined;
let listRs = undefined;
if (!this.$utils.isEmpty(response.data.data) &&this.$utils.isInteger(response.data.totalCount)) {
listRs = response.data.data;
totalCountRs = response.data.totalCount;
listRs.map(function(item) {
item.startTimeStr = timestamp2Date(item.startTime);
item.endTimeStr = timestamp2Date(item.endTime);
});
}
this.listLoading = false;
this.list = listRs;
this.total = totalCountRs;
});
},
handleFilter() {
this.listQuery.page = 1;
this.$refs.queryForm.validate(valid => {
if (valid) {
this.getList();
} else {
return false;
}
});
},
handleSizeChange(val) {
this.listQuery.limit = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.page = val;
this.getList();
},
arrangementCars() {
this.dialogDetailVisible = false;
this.arrangementCarsDialogVisible = true;
}
}
};
</script>
<style>
.order-details .el-form-item{
margin-bottom: 0px !important;
}
.order-details hr {
height: 1px;
background-color: #ccc;
border: none;
}
</style>
\ No newline at end of file
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