朱兆平 / vue_cli · 提交

转到一个项目

作者 小范
提交 25baa635d9eec8ac891a60366598c88ff7f612d6 1 个父辈 71b34bea

车辆调度管理3个界面

内嵌 并排对比
正在显示 3 个修改的文件 包含 2083 行增加 和 0 行删除
<template>
<el-container>
<el-main>
<el-card style="background-color: #F5F7FA">
<!-- 搜素区域 -->
<div>
<el-form :model="queryInfo" :rules="queryFormRules" ref="queryFormRef" status-icon>
<el-form-item>
<el-col :span="4">
<el-form-item prop="gmtCreate">
<el-date-picker v-model="queryInfo.gmtCreate" type="date" value-format="yyyy-MM-dd"
placeholder="选择创建调度时间"
style="width: 200px"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="4" style="margin-left: 50px">
<el-form-item prop="dispatchType">
<el-select v-model="queryInfo.dispatchType" placeholder="请选择业务类型"
style="width: 200px"
clearable>
<el-option
v-for="item in dispatchTypeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4" style="margin-left: 50px">
<el-form-item prop="status">
<el-select v-model="queryInfo.status" placeholder="记录状态" clearable
style="width:200px;margin-left: 6px">
<el-option
v-for="item in statusList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-button type="primary" style="margin-left: 60px"
@click="getDispatchNodeList">查询调度记录
</el-button>
<el-button type="success" style="margin-left: 15px" @click="dispatchFormVisible = true">
我要调度车辆
</el-button>
</el-form-item>
</el-form>
<el-row style="margin-top: 20px;">
</el-row>
</div>
<!--调度记录列表区域-->
<div style="margin-top: 20px;">
<el-table :data="DispatchNoteList" border highlight-current-row v-loading="listLoading"
:row-class-name="rowStatus"
element-loading-text="拼命加载中">
<el-table-column type="index" align="center"></el-table-column>
<el-table-column label="用户名称" prop="userName" align="center" width="100"></el-table-column>
<el-table-column label="联系方式" prop="userMobile" align="center" width="120"></el-table-column>
<el-table-column label="状态" prop="status" align="center" width="120">
<template slot-scope="scope">
<span v-if="scope.row.status ==='1'">完成状态</span>
<span v-if="scope.row.status ==='2'">执行状态</span>
<span v-if="scope.row.status ==='3'">取消状态</span>
<span v-if="scope.row.status ==='4'">待执行状态</span>
</template>
</el-table-column>
<el-table-column label="业务类型" prop="dispatchType" align="center" width="120">
<template slot-scope="scope">
<span v-if="scope.row.dispatchType ==='1'">进站送货</span>
<span v-if="scope.row.dispatchType ==='2'">出站提货</span>
<span v-if="scope.row.dispatchType ==='3'">货物调拨</span>
<span v-if="scope.row.dispatchType ==='4'">货物流转</span>
</template>
</el-table-column>
<el-table-column label="车牌号码" prop="licensePlateNumber" align="center"
width="120"></el-table-column>
<el-table-column label="车辆类型" prop="vehicleType" align="center" width="120">
<template slot-scope="scope">
<span v-if="scope.row.vehicleType ==='1'">重型货车</span>
<span v-if="scope.row.vehicleType ==='2'">中型货车</span>
<span v-if="scope.row.vehicleType ==='3'">轻型货车</span>
<span v-if="scope.row.vehicleType ==='4'">微型货车</span>
<span v-if="scope.row.vehicleType ==='5'">拖车</span>
<span v-if="scope.row.vehicleType ==='6'">叉车</span>
</template>
</el-table-column>
<el-table-column label="场站位置" prop="station" align="center" width="120">
<template slot-scope="scope">
<span v-if="scope.row.station ==='1'">西货站</span>
<span v-if="scope.row.station ==='2'">综保区</span>
<span v-if="scope.row.station ==='3'">军投</span>
<span v-if="scope.row.station ==='4'">快邮</span>
</template>
</el-table-column>
<el-table-column label="创建时间" prop="gmtCreate" align="center" width="160"></el-table-column>
<el-table-column label="开始时间" prop="beginTime" align="center" width="160"></el-table-column>
<el-table-column label="完成时间" prop="endTime" align="center" width="160"></el-table-column>
<el-table-column label="操作" width="220px" fixed="right" align="center">
<template slot-scope="scope">
<!--查看按钮-->
<el-tooltip effect="dark" content="查看" placement="top-start" :enterable="false">
<el-button type="primary" icon="el-icon-edit" size="mini"
@click="showDialogVisible(scope.row)">查看
</el-button>
</el-tooltip>
<!--取消调度按钮-->
<el-tooltip effect="dark" content="取消调度" placement="top-start" :enterable="false">
<el-button type="danger" icon="el-icon-delete" size="mini"
:disabled="scope.row.endTime!==null && scope.row.endTime!==''"
@click="cancelDispatch(scope.row)" :loading="cancelLoading">取消调度
</el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<!--分页区域-->
<div style="margin-top: 10px">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="this.queryInfo.pageNum"
:page-sizes="[10,20,30,50]"
:page-size="this.queryInfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
</el-card>
<!-- 我要调度车辆，对话框 -->
<div>
<el-dialog
title="我要调度车辆"
:visible.sync="dispatchFormVisible"
width="50%" @close="dispatchDialogClosed">
<!-- :rules="dispatchFormRules" ref="dispatchFormRef"-->
<el-form :model="dispatchForm" label-width="100px" status-icon
:rules="dispatchFormRules" ref="dispatchFormRef"
style="margin-left:10%;margin-right:10%;background-color: #F5F7FA">
<br>
<el-form-item label="车辆类型：" prop="vehicleType">
<el-select v-model="dispatchForm.vehicleType" style="width: 300px" clearable
placeholder="请选择车辆类型">
<el-option
v-for="item in vehicleTypeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="车辆数量：" prop="vehicleNumber">
<el-input-number style="width: 200px" v-model="dispatchForm.vehicleNumber"
:min="1" :max="100" controls-position="right">
</el-input-number>
<span style="margin-left:5px;font-size: 18px">辆</span>
</el-form-item>
<el-form-item label="场站位置：" prop="station">
<el-select v-model="dispatchForm.station" style="width: 300px" clearable
placeholder="请选择场站位置">
<el-option
v-for="item in stationList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="业务类型：" prop="dispatchType">
<el-select v-model="dispatchForm.dispatchType" style="width: 300px;" clearable
placeholder="请选择业务类型">
<el-option
v-for="item in dispatchTypeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<br>
</el-form>
<!--底部按钮区域-->
<span slot="footer" class="dialog-footer">
<el-button @click="dispatchFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dispatchVehicle" :loading="dispatchLoading">确定调度车辆</el-button>
</span>
</el-dialog>
</div>
<!-- 查看调度记录，对话框 -->
<div>
<el-dialog
style="margin-top: -50px"
title="查看调度记录明细"
:visible.sync="viewDialogVisible"
text-align="center"
width="60%" @close="showDialogClosed">
<!-- 表单显示区域 :rules="dispatchFormRules" -->
<el-form :model="showForm" ref="showFormRef"
:inline="true" align="center"
style="background-color: #F5F7FA;margin-left: 5%;margin-right: 5%">
<div style="margin-top: -15px">
<br>
<el-form-item label="用户名称：" prop="userName">
<el-input v-model="showForm.userName" style="width: 200px;" size="small"
readonly></el-input>
</el-form-item>
<el-form-item label="联系方式：" prop="userMobile">
<el-input v-model="showForm.userMobile" style="width: 200px;" size="small"
readonly></el-input>
</el-form-item>
<el-form-item label="车辆类型：" prop="vehicleType">
<el-select v-model="showForm.vehicleType" style="width:200px" size="small" readonly
placeholder="请选择车辆类型">
<el-option
v-for="item in vehicleTypeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="车牌号码：" prop="licensePlateNumber">
<el-input v-model="showForm.licensePlateNumber" style="width: 200px;" size="small"
readonly></el-input>
</el-form-item>
<el-form-item label="场站位置：" prop="station">
<el-select v-model="showForm.station" style="width:200px" readonly size="small"
placeholder="请选择场站位置">
<el-option
v-for="item in stationList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="业务类型：" prop="dispatchType">
<el-select v-model="showForm.dispatchType" style="width:200px" readonly size="small"
placeholder="请选择业务类型">
<el-option
v-for="item in dispatchTypeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="创建时间：" prop="gmtCreate">
<el-input v-model="showForm.gmtCreate" style="width: 200px;" size="small"
readonly></el-input>
</el-form-item>
<el-form-item label="开始时间：" prop="beginTime">
<el-input v-model="showForm.beginTime" style="width: 200px;" size="small"
readonly></el-input>
</el-form-item>
<el-form-item label="结束时间：" prop="endTime">
<el-input v-model="showForm.endTime" style="width: 200px;" size="small"
readonly></el-input>
</el-form-item>
<el-form-item label="记录状态：" prop="status">
<el-select v-model="showForm.status" placeholder="记录状态" style="width:200px" size="small"
readonly>
<el-option
v-for="item in statusList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<br>
</div>
</el-form>
<!--底部按钮区域-->
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="viewDialogVisible = false">结束查看</el-button>
</span>
</el-dialog>
</div>
</el-main>
</el-container>
</template>
<script>
// import {selectDispatchNoteList, dispatch, cancel, getUser} from '../../api/dispatch_api'
export default {
name: 'dispatch_api',
created() {
},
data() {
/**
* 验证手机号的自定义规则
*/
var userMobileValid = (rule, value, callback) => {
//验证手机号的正则表达式
const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
if (regMobile.test(value)) {
//合法的手机号
return callback();
}
callback(new Error('请输入合法的手机号'));
};
return {
/**
* 查询列表
*/
queryInfo: {
//用户姓名
userName: '',
//用户联系方式
userMobile: '',
//记录状态
status: '',
//调度时间
gmtCreate: new Date(),
//业务类型
dispatchType: '',
//当前的页数
pageNum: 1,
//当前每页显示多少条数据
pageSize: 10
},
/**
* 记录列表，总条数
*/
total: 0,
/**
* 所有,调度记录列表
*/
DispatchNoteList: [],
/**
* 我要调度车辆，表单
*/
dispatchForm: {
userName: '',
userMobile: '',
//车辆数量
vehicleNumber: 1,
//车辆类型
vehicleType: '2',
//场站位置
station: '1',
//调度业务类型
dispatchType: '1'
},
/**
* 查看记录明细,表单
*/
showForm: {},
/**
* 控制添加用户对话框的显示与隐藏
*/
dispatchFormVisible: false,
/**
* 控制查看调度记录明细，对话框的显示与隐藏
*/
viewDialogVisible: false,
/**
* loading加载
*/
/* 获取列表时的加载 */
listLoading: false,
/* 调度车辆时的加载 */
dispatchLoading: false,
/* 取消调度时的加载 */
cancelLoading: false,
/**
* 业务类型,选项列表
*/
dispatchTypeList: [
{
value: '1',
label: '进站送货'
},
{
value: '2',
label: '出站提货'
},
{
value: '3',
label: '货物流转'
},
{
value: '4',
label: '货物调拨'
}
],
/**
* 车辆类型，选项列表
*/
vehicleTypeList: [
{
value: '1',
label: '重型货车'
},
{
value: '2',
label: '中型货车'
},
{
value: '3',
label: '经济货车'
},
{
value: '4',
label: '微型货车'
},
{
value: '5',
label: '拖车'
},
{
value: '6',
label: '叉车'
}
],
/**
* 记录状态，列表
*/
statusList: [
{
value: '1',
label: '完成状态'
},
{
value: '2',
label: '执行状态'
},
{
value: '3',
label: '取消状态'
},
{
value: '4',
label: '待执行状态'
}
],
/**
* 场站位置，选项列表
*/
stationList: [
{
value: '1',
label: '西货站'
},
{
value: '2',
label: '综保区'
},
{
value: '3',
label: '军投'
},
{
value: '4',
label: '快邮'
}
],
queryFormRules: {
userName: [
{required: true, message: '请输入姓名', trigger: ['blur', 'change']},
],
userMobile: [
{required: true, message: '请输入联系方式', trigger: ['blur', 'change']},
{validator: userMobileValid, trigger: 'blur'}
],
},
/**
* 调度车辆表单的验证规则对象
*/
dispatchFormRules: {
status: [
{required: true, message: '请选择记录状态', trigger: ['blur', 'change']},
],
gmtCreate: [
{required: true, message: '请选择创建时间', trigger: ['blur', 'change']},
],
endTime: [
{required: true, message: '请选择结束时间', trigger: ['blur', 'change']},
],
licensePlateNumber: [
{required: true, message: '请输入车牌号', trigger: ['blur', 'change']},
],
userName: [
{required: true, message: '请输入姓名', trigger: ['blur', 'change']},
],
userMobile: [
{required: true, message: '请输入联系方式', trigger: ['blur', 'change']},
{validator: userMobileValid, trigger: 'blur'}
],
vehicleType: [
{required: true, message: '请选择车辆类型', trigger: ['blur', 'change']},
],
vehicleNumber: [
{required: true, message: '请选择车辆数量', trigger: ['blur', 'change']},
],
station: [
{required: true, message: '请选择场站位置', trigger: ['blur', 'change']},
],
dispatchType: [
{required: true, message: '请选择调度业务类型', trigger: ['blur', 'change']},
],
},
}
},
methods: {
/**
* 监听，调度车辆对话框的关闭事件
*/
dispatchDialogClosed() {
//重置对话框
this.$refs.dispatchFormRef.resetFields();
},
/**
* 监听，查看调度记录对话框的关闭事件
*/
showDialogClosed() {
//重置对话框
this.$refs.showFormRef.resetFields();
},
/**
* 监听pageSize改变的事件
*/
handleSizeChange(newSize) {
this.queryInfo.pageSize = newSize;
//刷新调度记录列表
this.getDispatchNodeList();
},
/**
* 监听当前页码值改变的事件
*/
handleCurrentChange(newPage) {
this.queryInfo.pageNum = newPage;
//刷新调度记录列表
this.getDispatchNodeList();
},
/**
* 打开,查看调度记录明细,对话框
* @param row
*/
showDialogVisible(row) {
this.showForm = row;
this.viewDialogVisible = true;
},
/**
* 用户端，获取车辆调度记录
*/
getDispatchNodeList() {
this.listLoading = true;
selectDispatchNoteList(this.queryInfo).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.listLoading = false;
return this.$message.error('获取车辆调度列表失败');
}
// 获取车辆调度列表数据
this.DispatchNoteList = res.data.list;
// 获取列表的总记录数
this.total = res.data.total;
this.listLoading = false;
this.$message.success('获取车辆调度列表,成功！');
}).catch(error => {
this.listLoading = false;
this.$message.error(error.toString());
});
},
/**
* 用户端，我要调度车辆，方法
*/
dispatchVehicle() {
this.dispatchLoading = true;
dispatch(this.dispatchForm).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.dispatchLoading = false;
return this.$message.error('车辆繁忙，请稍后重试');
}
//关闭加载
this.dispatchLoading = false;
this.$message.success('调度车辆成功！');
//调度成功，隐藏对话框
this.dispatchFormVisible = false;
/* 将调度车辆信息=>查询列表 */
// 用户名称
this.queryInfo.userName = this.dispatchForm.userName;
// 联系方式
this.queryInfo.userMobile = this.dispatchForm.userMobile;
// 调度业务类型
this.queryInfo.dispatchType = this.dispatchForm.dispatchType;
// 创建时间为当前时间（需留意）
this.queryInfo.gmtCreate = new Date();
//刷新车辆调度列表
this.getDispatchNodeList();
}).catch(error => {
this.dispatchLoading = false;
this.$message.error(error.toString());
});
},
/**
* 用户端，取消调度车辆，方法
*/
cancelDispatch(row) {
//弹框询问是否取消车辆调度
this.$confirm('此操作将取消该车辆的调度, 是否继续?', '警告', {
confirmButtonText: '确定取消调度',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
//开启加载
this.cancelLoading = true;
cancel(row).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.cancelLoading = false;
return this.$message.error('取消车辆调度，失败！请人工介入');
}
//关闭加载
this.cancelLoading = false;
this.$message.success('取消调度车辆，成功！');
//刷新车辆调度列表
this.getDispatchNodeList();
}).catch(error => {
//关闭加载
this.cancelLoading = false;
this.$message.error(error.toString());
});
}).catch(() => {
});
},
/**
* 获取用户信息
*/
getUserInfo(param) {
getUser(param).then((response) => {
let res = response.data;
if (res.code !== '200') {
return this.$message.error('网络异常，请刷新界面！');
}
if (res.data.list.length === 0) {
return this.$message.error('网络异常，请刷新界面！');
}
if (res.data.list[0].mobilephone === null || res.data.list[0].mobilephone === '') {
return this.$message.error('请填写您的手机号码');
}
this.queryInfo.userMobile = res.data.list[0].mobilephone;
this.dispatchForm.userMobile = res.data.list[0].mobilephone;
this.$message.success('欢迎使用，车辆调度系统！');
}).catch((error) => {
this.$message.error(error.toString());
});
},
/**
* 根据状态的不同区分颜色
*
* @param row
* @param rowIndex
*/
rowStatus({row, rowIndex}) {
if (row.status === '1') {
return 'success-row';
}
if (row.status === '2') {
return 'run-row';
}
if (row.status === '3') {
return 'cancel-row';
}
if (row.status === '4') {
return 'await-row';
}
}
},
mounted() {
var user = sessionStorage.getItem('user');
if (user) {
user = JSON.parse(user);
console.log(user);
this.queryInfo.userName = user.username;
this.dispatchForm.userName = user.username;
let param = {
userName: this.queryInfo.userName
};
this.getUserInfo(param);
}
/**
* 渲染完成之后，在获取调度记录列表
*/
// this.getDispatchNodeList();
}
}
</script>
<style>
/* 完成状态 */
.el-table .success-row {
background: rgba(64, 158, 255, 0.2);
}
/* 执行状态 */
.el-table .run-row {
background: rgba(103, 194, 58, 0.2);
}
/* 取消状态 */
.el-table .cancel-row {
background: rgba(144, 147, 153, 0.2);
}
/* 待执行状态 */
.el-table .await-row {
background: rgba(230, 162, 60, 0.2);
}
</style>
... ...
<template>
<el-container>
<el-main>
<!--面包屑导航区域-->
<!-- <div>-->
<!-- <el-breadcrumb separator-class="el-icon-arrow-right">-->
<!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>-->
<!-- <el-breadcrumb-item>车辆调度</el-breadcrumb-item>-->
<!-- <el-breadcrumb-item>驾驶员信息</el-breadcrumb-item>-->
<!-- </el-breadcrumb>-->
<!-- </div>-->
<el-card style="background-color: #F5F7FA">
<!--搜索区域-->
<div>
<el-row :gutter="24">
<el-col :span="5">
<el-input v-model="queryInfo.driverName" prefix-icon="el-icon-search" clearable
placeholder="请输入驾驶员姓名"></el-input>
</el-col>
<el-col :span="5">
<el-input v-model="queryInfo.driverMobile" prefix-icon="el-icon-search" clearable
placeholder="请输入联系方式"></el-input>
</el-col>
<el-col :span="5">
<el-input v-model="queryInfo.driverCompany" prefix-icon="el-icon-search" clearable
placeholder="请输入公司名称"></el-input>
</el-col>
<el-col :span="5">
<el-select v-model="queryInfo.driverStatus" clearable placeholder="请选择驾驶员状态">
<el-option
v-for="item in driverStatusList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-col>
</el-row>
<el-row style="margin-top: 20px;">
<el-button type="primary" @click="getDriverInfoList">查询驾驶员信息</el-button>
<el-button type="success" @click="addDriverInfoFormVisible = true">增加驾驶员信息</el-button>
</el-row>
</div>
<!--驾驶员信息列表区域-->
<div style="margin-top: 20px;">
<el-table :data="driverInfoList" border stripe highlight-current-row v-loading="listLoading"
@selection-change="selsChange"
element-loading-text="拼命加载中">
<el-table-column type="selection" width="55" :selectable="isSelectable" align="center"></el-table-column>
<el-table-column type="index" align="center"></el-table-column>
<el-table-column label="姓名" prop="driverName" align="center" width="100"></el-table-column>
<el-table-column label="联系方式" prop="driverMobile" align="center" width="130"></el-table-column>
<el-table-column label="职位" prop="driverPosition" align="center" width="100">
<template slot-scope="scope">
<span v-if="scope.row.driverPosition ==='1'">队长</span>
<span v-if="scope.row.driverPosition ==='2'">班长</span>
<span v-if="scope.row.driverPosition ==='3'">副班长</span>
<span v-if="scope.row.driverPosition ==='4'">员工</span>
</template>
</el-table-column>
<el-table-column label="状态" prop="driverStatus" align="center" width="120">
<template slot-scope="scope">
<span v-if="scope.row.driverStatus ==='1'">空闲状态</span>
<span v-if="scope.row.driverStatus ==='2'">执行状态</span>
<span v-if="scope.row.driverStatus ==='3'">轮休状态</span>
<span v-if="scope.row.driverStatus ==='4'">请假状态</span>
</template>
</el-table-column>
<el-table-column label="驾驶证" prop="driverLicenseNumber" align="center"
width="200"></el-table-column>
<el-table-column label="工号" prop="jobNumber" align="center" width="150"></el-table-column>
<el-table-column label="公司" prop="driverCompany" align="center" width="160"></el-table-column>
<el-table-column label="操作" width="220px" align="center" fixed="right">
<template slot-scope="scope">
<!--查看按钮-->
<el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false">
<el-button type="primary" icon="el-icon-edit" size="mini"
@click="showEditDialogVisible(scope.$index,scope.row)">编辑
</el-button>
</el-tooltip>
<!--取消调度按钮-->
<el-tooltip effect="dark" content="删除" placement="top-start" :enterable="false">
<el-button type="danger" icon="el-icon-delete" size="mini"
:loading="delLoading"
:disabled="scope.row.driverStatus==='2'"
@click="removeDriverInfo(scope.$index,scope.row)">删除
</el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<!--分页区域-->
<div style="margin-top: 10px">
<el-row :gutter="24">
<el-col :span="5">
<el-button type="danger" icon="el-icon-delete" @click="batchRemove"
:disabled="this.sels.length===0">批量删除
</el-button>
</el-col>
<el-col :span="10" style="margin-top: 5px">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pageNum"
:page-sizes="[10,20,30,50]"
:page-size="queryInfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</el-col>
</el-row>
</div>
</div>
</el-card>
<!-- 增加驾驶员信息对话框 -->
<div>
<el-dialog
style="margin-top: -50px"
title="增加驾驶员信息"
text-align="center"
:visible.sync="addDriverInfoFormVisible"
width="50%" @close="addDriverInfoDialogClosed">
<el-form :model="addDriverInfoForm" label-width="100px" status-icon
:rules="addDriverInfoFormRules" ref="addDriverInfoFormRef"
size="medium" align="center" :inline="true"
style="background-color: #F5F7FA">
<div style="margin-top: -15px">
<br>
<el-form-item label="司机姓名：" prop="driverName">
<el-input v-model="addDriverInfoForm.driverName" style="width: 300px;" clearable
placeholder="请输入驾驶员姓名"></el-input>
</el-form-item>
<el-form-item label="联系方式：" prop="driverMobile">
<el-input v-model="addDriverInfoForm.driverMobile" style="width: 300px;" clearable
placeholder="请输入驾驶员联系方式"></el-input>
</el-form-item>
<el-form-item label="司机状态：" prop="driverStatus">
<el-select v-model="addDriverInfoForm.driverStatus" style="width: 300px" clearable
placeholder="请选择驾驶员类型">
<el-option
v-for="item in driverStatusList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="驾驶证号：" prop="driverLicenseNumber">
<el-input v-model="addDriverInfoForm.driverLicenseNumber" style="width: 300px;"
clearable
placeholder="请输入驾驶证号码"></el-input>
</el-form-item>
<el-form-item label="工作职位：" prop="driverPosition">
<el-select v-model="addDriverInfoForm.driverPosition" style="width: 300px" clearable
placeholder="请选择驾驶员类型">
<el-option
v-for="item in driverPositionList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="员工号码：" prop="jobNumber">
<el-input v-model="addDriverInfoForm.jobNumber" style="width: 300px;" clearable
placeholder="请输入员工号码"></el-input>
</el-form-item>
<el-form-item label="司机公司：" prop="driverCompany">
<el-input v-model="addDriverInfoForm.driverCompany" style="width: 300px;" clearable
placeholder="请输入驾驶员所属公司"></el-input>
</el-form-item>
<br>
</div>
</el-form>
<!--底部按钮区域-->
<span slot="footer" class="dialog-footer">
<el-button @click="addDriverInfoFormVisible = false">取 消</el-button>
<el-button type="primary" :loading="addLoading" @click="addDriverInfo">增 加</el-button>
</span>
</el-dialog>
</div>
<!-- 编辑驾驶员信息，对话框 -->
<div>
<el-dialog
style="margin-top: -70px"
title="编辑驾驶员信息"
:visible.sync="editDialogVisible"
text-align="center"
width="50%" @close="editDriverInfoDialogClosed">
<el-form :model="editDriverInfoForm" label-width="100px" status-icon
:rules="editDriverInfoFormRules" ref="editDriverInfoFormRef"
:inline="true" size="medium" align="center"
style="background-color: #F5F7FA">
<div style="margin-top: -15px">
<br>
<el-form-item label="司机姓名：" prop="driverName">
<el-input v-model="editDriverInfoForm.driverName" style="width: 300px;" clearable
placeholder="请输入驾驶员姓名"></el-input>
</el-form-item>
<el-form-item label="联系方式：" prop="driverMobile">
<el-input v-model="editDriverInfoForm.driverMobile" style="width: 300px;" clearable
placeholder="请输入驾驶员联系方式"></el-input>
</el-form-item>
<el-form-item label="司机状态：" prop="driverStatus">
<el-select v-model="editDriverInfoForm.driverStatus" style="width: 300px" clearable
placeholder="请选择驾驶员类型">
<el-option
v-for="item in driverStatusList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="驾驶证号：" prop="driverLicenseNumber">
<el-input v-model="editDriverInfoForm.driverLicenseNumber" style="width: 300px;"
clearable
placeholder="请输入驾驶证号码"></el-input>
</el-form-item>
<el-form-item label="工作职位：" prop="driverPosition">
<el-select v-model="editDriverInfoForm.driverPosition" style="width: 300px" clearable
placeholder="请选择驾驶员类型">
<el-option
v-for="item in driverPositionList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="员工号码：" prop="jobNumber">
<el-input v-model="editDriverInfoForm.jobNumber" style="width: 300px;" clearable
placeholder="请输入员工号码"></el-input>
</el-form-item>
<el-form-item label="司机公司：" prop="driverCompany">
<el-input v-model="editDriverInfoForm.driverCompany" style="width: 300px;" clearable
placeholder="请输入驾驶员所属公司"></el-input>
</el-form-item>
<br>
</div>
</el-form>
<!--底部按钮区域-->
<span slot="footer" class="dialog-footer">
<el-button @click="editDialogVisible = false">取 消</el-button>
<el-button type="primary" :loading="editLoading" @click="editDriverInfo">编 辑</el-button>
</span>
</el-dialog>
</div>
</el-main>
</el-container>
</template>
<script>
// import {
// selectDriverInfoList,
// insertDriverInfo,
// updateDriverInfo,
// batchRemoveDriverInfo,
// deleteDriverInfo,
// } from "../../api/dispatch_api";
export default {
name: "dispatch_api",
created() {
//刷新驾驶员信息列表
this.getDriverInfoList();
},
data() {
//验证手机号的自定义规则
var driverMobileValid = (rule, value, callback) => {
//验证手机号的正则表达式
const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
if (regMobile.test(value)) {
//合法的手机号
return callback();
}
callback(new Error('请输入合法的手机号'));
};
return {
/**
* 查询信息列表
*/
queryInfo: {
//驾驶员姓名
driverName: '',
//驾驶员联系方式
driverMobile: '',
//驾驶员所属公司
driverCompany: '',
//驾驶员状态
driverStatus: '',
//当前的页数
pageNum: 1,
//当前每页显示多少条数据
pageSize: 10
},
/**
* 设置，总条数
*/
total: 0,
/**
* 批量删除的选中列表
*/
sels: [],
/**
* 驾驶员信息列表
*/
driverInfoList: [],
/**
* 新增驾驶员信息表单
*/
addDriverInfoForm: {
driverName: '',
driverLicenseNumber: '',
driverMobile: '',
jobNumber: '',
driverPosition: '1',
driverCompany: '',
driverStatus: '1',
},
/**
* 编辑驾驶员信息表单
*/
editDriverInfoForm: {},
/**
* 控制,添加驾驶员信息对话框的显示与隐藏
*/
addDriverInfoFormVisible: false,
/**
* 控制,编辑驾驶员信息对话框的显示与隐藏
*/
editDialogVisible: false,
/* 列表加载 */
listLoading: false,
/* 添加加载 */
addLoading: false,
/* 编辑加载 */
editLoading: false,
/* 删除加载 */
delLoading: false,
/**
* 司机职位，列表
*/
driverPositionList: [
{
value: '1',
label: '队长'
},
{
value: '2',
label: '班长'
},
{
value: '3',
label: '副班长'
},
{
value: '4',
label: '员工'
},
],
/**
* 驾驶员状态，列表
*/
driverStatusList: [
{
value: '1',
label: '空闲状态'
},
{
value: '2',
label: '执行状态'
},
{
value: '3',
label: '轮休状态'
},
{
value: '4',
label: '请假状态'
},
],
/**
* 添加驾驶员信息，表单的验证规则对象
*/
addDriverInfoFormRules: {
driverName: [
{required: true, message: '请选择驾驶员姓名', trigger: ['blur', 'change']},
],
driverLicenseNumber: [
{required: true, message: '请输入驾驶证号码', trigger: ['blur', 'change']},
],
driverMobile: [
{required: true, message: '请输入联系方式', trigger: ['blur', 'change']},
{validator: driverMobileValid, trigger: 'blur'}
],
jobNumber: [
{required: true, message: '请输入员工号码', trigger: ['blur', 'change']},
],
driverPosition: [
{required: true, message: '请选择工作职位', trigger: ['blur', 'change']},
],
driverCompany: [
{required: true, message: '请输入驾驶员所属公司', trigger: ['blur', 'change']},
],
driverStatus: [
{required: true, message: '请选择驾驶员状态', trigger: ['blur', 'change']},
],
},
/**
* 编辑驾驶员信息，表单的验证规则对象
*/
editDriverInfoFormRules: {
driverName: [
{required: true, message: '请选择驾驶员姓名', trigger: ['blur', 'change']},
],
driverLicenseNumber: [
{required: true, message: '请输入驾驶证号码', trigger: ['blur', 'change']},
],
driverMobile: [
{required: true, message: '请输入联系方式', trigger: ['blur', 'change']},
{validator: driverMobileValid, trigger: 'blur'}
],
jobNumber: [
{required: true, message: '请输入员工号码', trigger: ['blur', 'change']},
],
driverPosition: [
{required: true, message: '请选择工作职位', trigger: ['blur', 'change']},
],
driverCompany: [
{required: true, message: '请输入驾驶员所属公司', trigger: ['blur', 'change']},
],
driverStatus: [
{required: true, message: '请选择驾驶员状态', trigger: ['blur', 'change']},
],
}
}
},
methods: {
/**
* 获取驾驶员信息列表
*/
getDriverInfoList() {
//开启加载
this.listLoading = true;
selectDriverInfoList(this.queryInfo).then((response) => {
let res = response.data;
if (res.code !== '200'){
//关闭加载
this.listLoading = false;
return this.$message.error('获取驾驶员信息列表，失败');
}
// 获取驾驶员信息列表数据
this.driverInfoList = res.data.list;
// 获取列表的总记录数
this.total = res.data.total;
//关闭加载
this.listLoading = false;
this.$message.success('获取驾驶员信息列表，成功');
}).catch(error => {
this.listLoading = false;
this.$message.error(error.toString());
});
},
/**
* 增加驾驶员信息
*/
addDriverInfo() {
/*进行表单的预验证*/
this.$refs.addDriverInfoFormRef.validate(valid => {
// 未通过，表单预校验
if (!valid) return;
// 通过，表单预检验,开启加载
this.addLoading = true;
insertDriverInfo(this.addDriverInfoForm).then((response) => {
let res = response.data;
if (res.code !== '200'){
//关闭加载
this.addLoading = false;
return this.$message.error('添加驾驶员信息，失败');
}
//关闭加载
this.addLoading = false;
this.$message.success('添加驾驶员信息，成功');
//关闭对话框
this.addDriverInfoFormVisible = false;
//刷新驾驶员信息列表
this.getDriverInfoList();
}).catch(error => {
this.addLoading = false;
this.$message.error(error.toString());
});
})
},
/**
* 删除驾驶员信息
*/
removeDriverInfo(index, row) {
//弹框询问是否删除驾驶员信息
this.$confirm('此操作永久删除该驾驶员信息, 是否继续?', '警告', {
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
//开启加载
this.delLoading = true;
deleteDriverInfo(row).then((response) => {
let res = response.data;
if (res.code !== '200') {
//关闭加载
this.delLoading = false;
return this.$message.error('删除驾驶员信息，失败');
}
//关闭加载
this.delLoading = false;
this.$message.success('删除驾驶员信息，成功！');
//刷新驾驶员信息列表
this.getDriverInfoList();
}).catch(error => {
this.delLoading = false;
this.$message.error(error.toString());
});
}).catch(() => {
});
},
/**
* 批量删除，之前的选中
*/
selsChange: function (sels) {
this.sels = sels;
},
/**
* 驾驶员状态为执行状态的时候，无法被选中
*/
isSelectable(row, index) {
if (row.driverStatus === '2') {
return false;
} else {
return true;
}
},
/**
* 批量删除功能
*/
batchRemove() {
var ids = this.sels.map(item => item.id).toString();
console.log(ids);
//弹框询问是否批量删除选中的车辆调度记录
this.$confirm('此操作将永久删除，选中的驾驶员信息, 是否继续?', '警告', {
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
//开启加载
this.listLoading = true;
let params = {ids: ids};
batchRemoveDriverInfo(params).then(response => {
let res = response.data;
if (res.code !== '200') {
this.listLoading = false;
return this.$message.error('批量删除驾驶员信息，失败');
}
this.$message.success('批量删除驶员信息，成功！');
this.listLoading = false;
//刷新驾驶员信息列表
this.getDriverInfoList();
}).catch(error => {
this.delLoading = false;
this.$message.error(error.toString());
});
}).catch(() => {
});
},
/**
* 编辑驾驶员信息
*/
editDriverInfo() {
/*进行表单的预验证*/
this.$refs.editDriverInfoFormRef.validate(valid => {
// 未通过，表单预校验
if (!valid) return;
// 通过，表单预检验,开启加载
this.editLoading = true;
updateDriverInfo(this.editDriverInfoForm).then((response) => {
let res = response.data;
if (res.code !== '200') {
//关闭加载
this.editLoading = false;
return this.$message.error('修改驾驶员信息，失败');
}
//关闭加载
this.editLoading = false;
this.$message.success('修改驾驶员信息，成功！');
// 关闭，编辑驾驶员信息对话框
this.editDialogVisible = false;
//刷新驾驶员信息列表
this.getDriverInfoList();
}).catch(error => {
this.editLoading = false;
this.$message.error(error.toString());
});
})
},
/**
* 添加驾驶员信息对话框，关闭时，重置对话框
*/
addDriverInfoDialogClosed() {
this.$refs.addDriverInfoFormRef.resetFields();
},
/**
* 编辑驾驶员信息对话框，关闭时，重置对话框
*/
editDriverInfoDialogClosed() {
this.$refs.editDriverInfoFormRef.resetFields();
},
/**
* 打开编辑驾驶员信息对话框
*/
showEditDialogVisible(index, row) {
this.editDriverInfoForm = Object.assign({}, row);
this.editDialogVisible = true;
},
/**
* 监听pageSize改变的事件
*/
handleSizeChange(newSize) {
this.queryInfo.pageSize = newSize;
//刷新驾驶员信息列表
this.getDriverInfoList();
},
/**
* 监听当前页码值改变的事件
*/
handleCurrentChange(newPage) {
this.queryInfo.pageNum = newPage;
//刷新驾驶员信息列表
this.getDriverInfoList();
},
}
}
</script>
<style scoped>
</style>
... ...
<template>
<el-container>
<el-main>
<!--面包屑导航区域-->
<!-- <div>-->
<!-- <el-breadcrumb separator-class="el-icon-arrow-right">-->
<!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>-->
<!-- <el-breadcrumb-item>车辆调度</el-breadcrumb-item>-->
<!-- <el-breadcrumb-item>车辆信息</el-breadcrumb-item>-->
<!-- </el-breadcrumb>-->
<!-- </div>-->
<el-card style="background-color: #F5F7FA">
<!--搜索区域-->
<div>
<el-row :gutter="24">
<el-col :span="5">
<el-input v-model="queryInfo.licensePlateNumber" clearable prefix-icon="el-icon-search"
placeholder="请输入车牌号码"></el-input>
</el-col>
<el-col :span="5">
<el-input v-model="queryInfo.vehicleCompany" clearable prefix-icon="el-icon-search"
placeholder="请输入车辆公司"></el-input>
</el-col>
<el-col :span="5">
<el-select v-model="queryInfo.vehicleStatus" clearable placeholder="请选择车辆状态">
<el-option
v-for="item in vehicleStatusList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-col>
<el-col :span="5">
<el-select v-model="queryInfo.vehicleType" clearable placeholder="请选择车辆类型">
<el-option
v-for="item in vehicleTypeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-col>
</el-row>
<el-row style="margin-top: 20px;">
<el-button type="primary" @click="getVehicleInfoList">查询车辆信息</el-button>
<el-button type="success" @click="addVehicleInfoFormVisible = true">增加车辆信息</el-button>
</el-row>
</div>
<!--车辆信息列表区域-->
<div style="margin-top: 20px;">
<el-table :data="vehicleInfoList" border stripe highlight-current-row v-loading="listLoading"
@selection-change="selsChange"
element-loading-text="拼命加载中">
<el-table-column type="selection" width="55" :selectable="isSelectable"
align="center"></el-table-column>
<el-table-column type="index" align="center"></el-table-column>
<el-table-column label="车辆类型" prop="vehicleType" align="center" width="120">
<template slot-scope="scope">
<span v-if="scope.row.vehicleType ==='1'">重型货车</span>
<span v-if="scope.row.vehicleType ==='2'">中型货车</span>
<span v-if="scope.row.vehicleType ==='3'">轻型货车</span>
<span v-if="scope.row.vehicleType ==='4'">微型货车</span>
<span v-if="scope.row.vehicleType ==='5'">拖车</span>
<span v-if="scope.row.vehicleType ==='6'">叉车</span>
</template>
</el-table-column>
<el-table-column label="车牌号码" prop="licensePlateNumber" align="center"
width="130"></el-table-column>
<el-table-column label="车辆状态" prop="vehicleStatus" align="center" width="100">
<template slot-scope="scope">
<span v-if="scope.row.vehicleStatus ==='1'">空闲状态</span>
<span v-if="scope.row.vehicleStatus ==='2'">执行状态</span>
<span v-if="scope.row.vehicleStatus ==='3'">在修状态</span>
<span v-if="scope.row.vehicleStatus ==='4'">损坏未修</span>
<span v-if="scope.row.vehicleStatus ==='5'">保养状态</span>
</template>
</el-table-column>
<el-table-column label="车辆载重/Kg" prop="vehicleLoad" align="center"
width="110"></el-table-column>
<el-table-column label="挂车与否" prop="isTrailer" align="center" width="110">
<template slot-scope="scope">
<span v-if="scope.row.isTrailer ==='1'">有挂车</span>
<span v-if="scope.row.isTrailer ==='2'">没有挂车</span>
</template>
</el-table-column>
<el-table-column label="开始空闲时间" prop="freetime" align="center" width="160"></el-table-column>
<el-table-column label="车辆公司" prop="vehicleCompany" align="center"
width="200"></el-table-column>
<el-table-column label="行驶证号" prop="drivingLicenseNumber" align="center"
width="160"></el-table-column>
<el-table-column label="操作" width="200px" align="center" fixed="right">
<template slot-scope="scope">
<!--查看按钮-->
<el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false">
<el-button type="primary" icon="el-icon-edit" size="mini"
@click="showEditDialogVisible(scope.$index,scope.row)">编辑
</el-button>
</el-tooltip>
<!--取消调度按钮-->
<el-tooltip effect="dark" content="删除" placement="top-start" :enterable="false">
<el-button type="danger" icon="el-icon-delete" size="mini"
:loading="delLoading"
:disabled="scope.row.vehicleStatus==='2'"
@click="removeVehicleInfo(scope.$index,scope.row)">删除
</el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<!--分页区域-->
<div style="margin-top: 10px">
<el-row :gutter="24">
<el-col :span="5">
<el-button type="danger" icon="el-icon-delete" @click="batchRemove"
:disabled="this.sels.length===0">批量删除
</el-button>
</el-col>
<el-col :span="10" style="margin-top: 5px">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pageNum"
:page-sizes="[10,20,30,50]"
:page-size="queryInfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</el-col>
</el-row>
</div>
</div>
</el-card>
<!-- 增加车辆信息对话框 -->
<div>
<el-dialog
style="margin-top: -50px"
title="增加车辆信息"
:visible.sync="addVehicleInfoFormVisible"
width="50%" @close="addVehicleInfoDialogClosed">
<el-form :model="addVehicleInfoForm" label-width="100px" status-icon
:rules="addVehicleInfoFormRules" ref="addVehicleInfoFormRef"
style="margin-left:10%;margin-right:10%;background-color: #F5F7FA">
<div style="margin-left: 30px">
<br>
<el-form-item label="车牌号码：" prop="licensePlateNumber">
<el-input v-model="addVehicleInfoForm.licensePlateNumber" clearable
style="width: 300px;"
placeholder="请输入车牌号码"></el-input>
</el-form-item>
<el-form-item label="行驶证号：" prop="drivingLicenseNumber">
<el-input v-model="addVehicleInfoForm.drivingLicenseNumber" clearable
style="width: 300px;"
placeholder="请输入车辆行驶证号"></el-input>
</el-form-item>
<el-form-item label="车辆类型：" prop="vehicleType">
<el-select v-model="addVehicleInfoForm.vehicleType" style="width: 300px" clearable
placeholder="请选择车辆类型">
<el-option
v-for="item in vehicleTypeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="车辆载重：" prop="vehicleLoad">
<el-input-number style="width: 200px" v-model="addVehicleInfoForm.vehicleLoad"
:min="10" :max="10000" controls-position="right">
</el-input-number>
<span style="margin-left:5px;font-size: 18px">Kg</span>
</el-form-item>
<el-form-item label="有无挂车：" prop="vehicleType">
<el-select v-model="addVehicleInfoForm.isTrailer" style="width: 300px" clearable
placeholder="请选择有无挂车">
<el-option
v-for="item in isTrailerList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="车辆公司：" prop="vehicleCompany">
<el-input v-model="addVehicleInfoForm.vehicleCompany" clearable style="width: 300px;"
placeholder="请输入车辆公司"></el-input>
</el-form-item>
<br>
</div>
</el-form>
<!--底部按钮区域-->
<span slot="footer" class="dialog-footer">
<el-button @click="addVehicleInfoFormVisible = false">取 消</el-button>
<el-button type="primary" :loading="addLoading" @click="addVehicleInfo">增 加</el-button>
</span>
</el-dialog>
</div>
<!-- 编辑车辆信息，对话框 -->
<div>
<el-dialog
title="编辑车辆信息"
text-align="center"
:visible.sync="editDialogVisible"
width="60%" @close="editVehicleInfoDialogClosed">
<el-form :model="editVehicleInfoForm" label-width="100px" status-icon
:rules="editVehicleInfoFormRules" ref="editVehicleInfoFormRef"
:inline="true" align="center"
style="background-color: #F5F7FA">
<div>
<br>
<el-form-item label="车牌号码：" prop="licensePlateNumber">
<el-input v-model="editVehicleInfoForm.licensePlateNumber" clearable readonly
style="width:250px"
placeholder="请输入车牌号码"></el-input>
</el-form-item>
<el-form-item label="行驶证号：" prop="drivingLicenseNumber">
<el-input v-model="editVehicleInfoForm.drivingLicenseNumber" clearable
style="width:250px"
placeholder="请输入车辆行驶证号"></el-input>
</el-form-item>
<el-form-item label="车辆类型：" prop="vehicleType">
<el-select v-model="editVehicleInfoForm.vehicleType" clearable
style="width:250px"
placeholder="请选择车辆类型">
<el-option
v-for="item in vehicleTypeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="车辆载重：" prop="vehicleLoad">
<el-input-number v-model="editVehicleInfoForm.vehicleLoad"
clearable style="width:220px"
:min="10" :max="10000" controls-position="right">
</el-input-number>
<span style="margin-left:5px;font-size: 18px">Kg</span>
</el-form-item>
<el-form-item label="车辆状态：" prop="vehicleStatus">
<el-select v-model="editVehicleInfoForm.vehicleStatus" clearable
style="width:250px"
clearable placeholder="请选择车辆状态">
<el-option
v-for="item in vehicleStatusList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="有无挂车：" prop="vehicleType">
<el-select v-model="editVehicleInfoForm.isTrailer" clearable
style="width:250px" clearable
placeholder="请选择有无挂车">
<el-option
v-for="item in isTrailerList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="车辆公司：" prop="vehicleCompany">
<el-input v-model="editVehicleInfoForm.vehicleCompany" clearable
style="width:250px"
placeholder="请输入车辆公司"></el-input>
</el-form-item>
<el-form-item label="空闲时间：" prop="freetime">
<el-date-picker v-model="editVehicleInfoForm.freetime" type="datetime"
style="width:250px"
placeholder="选择调度时间"></el-date-picker>
</el-form-item>
<br>
</div>
</el-form>
<!--底部按钮区域-->
<span slot="footer" class="dialog-footer">
<el-button @click="editDialogVisible = false">取 消</el-button>
<el-button type="primary" :loading="editLoading" @click="editVehicleInfo">编 辑</el-button>
</span>
</el-dialog>
</div>
</el-main>
</el-container>
</template>
<script>
// import {
// selectVehicleInfoList,
// insertVehicleInfo,
// updateVehicleInfo,
// batchRemoveVehicleInfo,
// deleteVehicleInfo, deleteDispatchNote
// } from "../../api/dispatch_api";
export default {
name: "dispatch_api",
created() {
//获取车辆信息列表
this.getVehicleInfoList();
},
data() {
return {
/**
* 查询信息列表
*/
queryInfo: {
//车牌号
licensePlateNumber: '',
//车辆所属公司
vehicleCompany: '',
//车辆状态
vehicleStatus: '',
//车辆类型
vehicleType: '',
//当前的页数
pageNum: 1,
//当前每页显示多少条数据
pageSize: 10
},
/**
* 设置，总条数
*/
total: 0,
/**
* 批量删除,选中列表
*/
sels: [],
/**
* 车辆信息列表
*/
vehicleInfoList: [],
/**
* 新增车辆信息表单
*/
addVehicleInfoForm: {
vehicleType: '2',
licensePlateNumber: '',
vehicleLoad: '',
isTrailer: '2',
vehicleCompany: '',
drivingLicenseNumber: '',
},
/**
* 编辑车辆信息表单
*/
editVehicleInfoForm: {},
/**
* 控制,添加车辆信息对话框的显示与隐藏
*/
addVehicleInfoFormVisible: false,
/**
* 控制,编辑车辆信息对话框的显示与隐藏
*/
editDialogVisible: false,
/* 列表加载 */
listLoading: false,
/* 添加加载 */
addLoading: false,
/* 编辑加载 */
editLoading: false,
/* 删除加载 */
delLoading: false,
/**
* 车辆类型，选项列表
*/
vehicleTypeList: [
{
value: '1',
label: '重型货车'
},
{
value: '2',
label: '中型货车'
},
{
value: '3',
label: '经济货车'
},
{
value: '4',
label: '微型货车'
},
{
value: '5',
label: '拖车'
},
{
value: '6',
label: '叉车'
}
],
/**
* 挂车与否，列表
*/
isTrailerList: [
{
value: '1',
label: '有挂车'
},
{
value: '2',
label: '没有挂车'
},
],
/**
* 车辆状态列表
*/
vehicleStatusList: [
{
value: '1',
label: '空闲状态'
},
{
value: '2',
label: '执行状态'
},
{
value: '3',
label: '在修状态'
},
{
value: '4',
label: '损坏未修状态'
},
{
value: '5',
label: '保养状态'
},
],
/**
* 添加车辆信息表单的验证规则对象
*/
addVehicleInfoFormRules: {
vehicleType: [
{required: true, message: '请选择车辆类型', trigger: ['blur', 'change']},
],
licensePlateNumber: [
{required: true, message: '请输入车牌号', trigger: ['blur', 'change']},
],
vehicleLoad: [
{required: true, message: '请输入车辆载重', trigger: ['blur', 'change']},
],
isTrailer: [
{required: true, message: '请选择有无挂车', trigger: ['blur', 'change']},
],
vehicleCompany: [
{required: true, message: '请输入车辆公司名称', trigger: ['blur', 'change']},
],
drivingLicenseNumber: [
{required: true, message: '请输入车辆行驶证号', trigger: ['blur', 'change']},
],
},
/**
* 编辑车辆信息表单的验证规则对象
*/
editVehicleInfoFormRules: {
vehicleStatus: [
{required: true, message: '请选择车辆状态', trigger: ['blur', 'change']},
],
freetime: [
{required: true, message: '请选择开始空闲时间', trigger: ['blur', 'change']},
],
vehicleType: [
{required: true, message: '请选择车辆类型', trigger: ['blur', 'change']},
],
licensePlateNumber: [
{required: true, message: '请输入车牌号', trigger: ['blur', 'change']},
],
vehicleLoad: [
{required: true, message: '请输入车辆载重', trigger: ['blur', 'change']},
],
isTrailer: [
{required: true, message: '请选择有无挂车', trigger: ['blur', 'change']},
],
vehicleCompany: [
{required: true, message: '请输入车辆公司名称', trigger: ['blur', 'change']},
],
drivingLicenseNumber: [
{required: true, message: '请输入车辆行驶证号', trigger: ['blur', 'change']},
],
}
}
},
methods: {
/**
* 管理员端，获取车辆信息列表
*/
getVehicleInfoList() {
//开启加载
this.listLoading = true;
selectVehicleInfoList(this.queryInfo).then((response) => {
let res = response.data;
if (res.code !== '200') {
//关闭加载
this.listLoading = false;
return this.$message.error('获取车辆信息列表失败');
}
// 获取车辆信息列表数据
this.vehicleInfoList = res.data.list;
// 获取列表的总记录数
this.total = res.data.total;
//关闭加载
this.listLoading = false;
this.$message.success('获取车辆信息列表，成功');
}).catch(error => {
this.listLoading = false;
this.$message.error(error.toString());
});
},
/**
* 管理员端，增加车辆信息
*/
addVehicleInfo() {
/*进行表单的预验证*/
this.$refs.addVehicleInfoFormRef.validate(valid => {
// 未通过，表单预校验
if (!valid) return;
// 通过，表单预检验，发起添加车辆信息的网络请求,开启加载
this.addLoading = true;
insertVehicleInfo(this.addVehicleInfoForm).then((response) => {
let res = response.data;
//添加调度记录信息,失败
if (res.code !== '200') {
//关闭加载
this.addLoading = false;
if(res.code === '406'){
return this.$message.error('该车牌号已存在,请重新填写');
}
return this.$message.error('添加车辆信息，失败');
}
//关闭加载
this.addLoading = false;
this.$message.success('添加调度记录信息，成功');
//隐藏对话框
this.addVehicleInfoFormVisible = false;
//刷新车辆信息列表
this.getVehicleInfoList();
}).catch(error => {
this.addLoading = false;
this.$message.error(error.toString());
});
})
},
/**
* 管理员端，删除车辆信息
*/
removeVehicleInfo(index, row) {
//弹框询问是否删除车辆信息
this.$confirm('此操作永久删除该车辆信息, 是否继续?', '警告', {
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
//开启加载
this.delLoading = true;
deleteVehicleInfo(row).then((response) => {
let res = response.data;
if (res.code !== '200') {
//关闭加载
this.delLoading = false;
return this.$message.error('删除车辆信息，失败');
}
//关闭加载
this.delLoading = false;
this.$message.success('删除车辆信息，成功！');
//刷新车辆信息列表
this.getVehicleInfoList();
}).catch(error => {
this.delLoading = false;
this.$message.error(error.toString());
});
}).catch(() => {
});
},
/**
* 批量删除，之前的选中
*/
selsChange: function (sels) {
this.sels = sels;
},
/**
* 车辆状态为执行状态的时候，无法被选中
*/
isSelectable(row, index) {
if (row.vehicleStatus === '2') {
return false;
} else {
return true;
}
},
/**
* 批量删除功能
*/
batchRemove() {
var ids = this.sels.map(item => item.id).toString();
console.log(ids);
//弹框询问是否批量删除选中的车辆调度记录
this.$confirm('此操作永久删除选中的车辆信息, 是否继续?', '警告', {
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
//开启加载
this.listLoading = true;
let params = {ids: ids};
batchRemoveVehicleInfo(params).then(response => {
let res = response.data;
if (res.code !== '200') {
this.listLoading = false;
return this.$message.error('批量删除车辆信息，失败');
}
this.$message.success('批量删除车辆信息，成功！');
this.listLoading = false;
//刷新车辆信息列表
this.getVehicleInfoList();
}).catch(error => {
this.delLoading = false;
this.$message.error(error.toString());
});
}).catch(() => {
});
},
/**
* 管理员端，编辑车辆信息
*/
editVehicleInfo() {
/*进行表单的预验证*/
this.$refs.editVehicleInfoFormRef.validate(valid => {
// 未通过，表单预校验
if (!valid) return;
// 通过，表单预校验,开启加载
this.editLoading = true;
updateVehicleInfo(this.editVehicleInfoForm).then((response) => {
let res = response.data;
if (res.code !== '200') {
//关闭加载
this.editLoading = false;
return this.$message.error('修改车辆信息，失败');
}
//关闭加载
this.editLoading = false;
this.$message.success('修改车辆信息，成功！');
//关闭编辑车辆信息对话框
this.editDialogVisible = false;
//刷新车辆信息列表
this.getVehicleInfoList();
}).catch(error => {
this.editLoading = false;
this.$message.error(error.toString());
});
})
},
/**
* 添加车辆信息对话框，关闭时，重置对话框
*/
addVehicleInfoDialogClosed() {
this.$refs.addVehicleInfoFormRef.resetFields();
},
/**
* 编辑车辆信息对话框，关闭时，重置对话框
*/
editVehicleInfoDialogClosed() {
this.$refs.editVehicleInfoFormRef.resetFields();
},
/**
* 打开编辑车辆信息对话框
*/
showEditDialogVisible(index, row) {
this.editVehicleInfoForm = Object.assign({}, row);
this.editDialogVisible = true;
},
/**
* 监听pageSize改变的事件
*/
handleSizeChange(newSize) {
this.queryInfo.pageSize = newSize;
//刷新车辆信息列表
this.getVehicleInfoList();
},
/**
* 监听当前页码值改变的事件
*/
handleCurrentChange(newPage) {
this.queryInfo.pageNum = newPage;
//刷新车辆信息列表
this.getVehicleInfoList();
},
}
}
</script>
<style scoped>
</style>
... ...