|
|
|
<template>
|
|
|
|
<el-container>
|
|
|
|
<el-main>
|
|
|
|
<!--面包屑导航区域-->
|
|
|
|
<!-- <el-breadcrumb separator-class="el-icon-arrow-right">-->
|
|
|
|
<!-- <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>-->
|
|
|
|
<!-- <el-breadcrumb-item>车辆调度</el-breadcrumb-item>-->
|
|
|
|
<!-- <el-breadcrumb-item>调度记录</el-breadcrumb-item>-->
|
|
|
|
<!-- </el-breadcrumb>-->
|
|
|
|
|
|
|
|
<el-card style="background-color: #F5F7FA">
|
|
|
|
<!-- 搜素区域 -->
|
|
|
|
<div>
|
|
|
|
<el-row :gutter="24">
|
|
|
|
<el-col :span="5">
|
|
|
|
<el-input v-model="queryInfo.userName" prefix-icon="el-icon-search"
|
|
|
|
placeholder="请输入用户名称" clearable size="small" style="width:180px"></el-input>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="5">
|
|
|
|
<el-input v-model="queryInfo.userMobile" prefix-icon="el-icon-search"
|
|
|
|
placeholder="请输入联系方式" clearable size="small" style="width:180px"></el-input>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="5">
|
|
|
|
<el-date-picker v-model="queryInfo.gmtCreate" type="date" value-format="yyyy-MM-dd"
|
|
|
|
placeholder="调度创建时间" size="small" style="width:180px"></el-date-picker>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="5">
|
|
|
|
<el-date-picker v-model="queryInfo.endTime" type="date" value-format="yyyy-MM-dd"
|
|
|
|
placeholder="调度完成时间" size="small" style="width:180px"></el-date-picker>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
<el-row style="margin-top: 8px;">
|
|
|
|
<el-col :span="5">
|
|
|
|
<el-select v-model="queryInfo.dispatchType" placeholder="请选择业务类型" size="small" clearable
|
|
|
|
style="width:180px">
|
|
|
|
<el-option
|
|
|
|
v-for="item in dispatchTypeList"
|
|
|
|
:key="item.value"
|
|
|
|
:label="item.label"
|
|
|
|
:value="item.value">
|
|
|
|
</el-option>
|
|
|
|
</el-select>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="5">
|
|
|
|
<el-select v-model="queryInfo.status" placeholder="记录状态" size="small" clearable
|
|
|
|
style="width:180px;margin-left: 6px">
|
|
|
|
<el-option
|
|
|
|
v-for="item in statusList"
|
|
|
|
:key="item.value"
|
|
|
|
:label="item.label"
|
|
|
|
:value="item.value">
|
|
|
|
</el-option>
|
|
|
|
</el-select>
|
|
|
|
</el-col>
|
|
|
|
<el-button type="primary" @click="getDispatchNodeList" size="small" style="margin-left:10px;">
|
|
|
|
查询调度记录
|
|
|
|
</el-button>
|
|
|
|
<el-button type="success" @click="addDispatchNodeFormVisible = true" size="small">添加车辆调度记录
|
|
|
|
</el-button>
|
|
|
|
</el-row>
|
|
|
|
</div>
|
|
|
|
<!--调度记录列表区域-->
|
|
|
|
<div style="margin-top: 20px;">
|
|
|
|
<el-table :data="DispatchNoteList" border v-loading="listLoading"
|
|
|
|
:row-class-name="rowStatus"
|
|
|
|
@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="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="业务类型" align="center" prop="dispatchType" 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="场站位置" align="center" prop="station" 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="车辆类型" align="center" prop="vehicleType" 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="120"></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="230px" align="center" fixed="right">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
<!--编辑按钮-->
|
|
|
|
<el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false"
|
|
|
|
style="margin-left: 1px;">
|
|
|
|
<el-button type="success" icon="el-icon-check" size="mini" style="width:97px"
|
|
|
|
@click="showDialogVisible(scope.$index,scope.row)">编辑
|
|
|
|
</el-button>
|
|
|
|
</el-tooltip>
|
|
|
|
<!--取消调度按钮-->
|
|
|
|
<el-tooltip effect="dark" content="删除" placement="top-start" :enterable="false"
|
|
|
|
style="margin-left: 1px;">
|
|
|
|
<el-button type="danger" icon="el-icon-delete" size="mini" style="width:97px"
|
|
|
|
:loading="delLoading"
|
|
|
|
:disabled="scope.row.status==='2'"
|
|
|
|
@click.native.prevent="removeDispatchNode(scope.$index,scope.row)">删除
|
|
|
|
</el-button>
|
|
|
|
</el-tooltip>
|
|
|
|
<!--开始任务-->
|
|
|
|
<el-tooltip effect="dark" content="开始任务" placement="top-start" :enterable="false"
|
|
|
|
style="margin-left: 1px;">
|
|
|
|
<el-button type="warning" icon="el-icon-star-off" size="mini"
|
|
|
|
style="margin-top: 3px;"
|
|
|
|
:disabled="scope.row.status!=='4' || scope.row.beginTime !==null"
|
|
|
|
:loading="beginLoading"
|
|
|
|
@click="startDispatch(scope.$index,scope.row)">开始任务
|
|
|
|
</el-button>
|
|
|
|
</el-tooltip>
|
|
|
|
<!-- 结束任务-->
|
|
|
|
<el-tooltip effect="dark" content="结束任务" placement="top-start" :enterable="false"
|
|
|
|
style="margin-left: 1px;">
|
|
|
|
<el-button type="info" icon="el-icon-message" size="mini"
|
|
|
|
:disabled="scope.row.endTime !==null && scope.row.endTime !==''"
|
|
|
|
:loading="endLoading"
|
|
|
|
@click="completeDispatch(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,15,20,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 title="添加车辆调度记录"
|
|
|
|
:visible.sync="addDispatchNodeFormVisible"
|
|
|
|
style="margin-top: -50px"
|
|
|
|
width="60%" text-align="center" @close="dispatchDialogClosed">
|
|
|
|
<el-form :inline="true" :model="addDispatchNodeForm" label-width="120px" status-icon
|
|
|
|
:rules="addDispatchNodeFormRules" ref="addDispatchNodeFormRef"
|
|
|
|
style="background-color: #F5F7FA" align="center">
|
|
|
|
<br>
|
|
|
|
<el-form-item label="用户名称：" prop="userName">
|
|
|
|
<el-input v-model="addDispatchNodeForm.userName" style="width:200px" size="small" clearable
|
|
|
|
placeholder="请输入您的用户名称"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="联系方式：" prop="userMobile">
|
|
|
|
<el-input v-model="addDispatchNodeForm.userMobile" style="width:200px" clearable
|
|
|
|
size="small"
|
|
|
|
placeholder="请输入您的联系方式"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="车辆类型：" prop="vehicleType">
|
|
|
|
<el-select v-model="addDispatchNodeForm.vehicleType" clearable style="width:200px"
|
|
|
|
size="small"
|
|
|
|
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="addDispatchNodeForm.licensePlateNumber" clearable
|
|
|
|
style="width:200px;margin-left:0px"
|
|
|
|
size="small"
|
|
|
|
placeholder="请输入车牌号"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="场站位置：" prop="station">
|
|
|
|
<el-select v-model="addDispatchNodeForm.station" clearable style="width:200px" 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="addDispatchNodeForm.dispatchType" clearable style="width:200px"
|
|
|
|
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-date-picker v-model="addDispatchNodeForm.gmtCreate" clearable type="datetime"
|
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
|
placeholder="选择日期" size="small" style="width:200px"></el-date-picker>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="开始时间：" prop="beginTime">
|
|
|
|
<el-date-picker v-model="addDispatchNodeForm.beginTime" clearable type="datetime"
|
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
|
placeholder="选择日期" size="small" style="width:200px"></el-date-picker>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="结束时间：" prop="endTime">
|
|
|
|
<el-date-picker v-model="addDispatchNodeForm.endTime" type="datetime"
|
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
|
placeholder="选择日期" size="small" style="width:200px"></el-date-picker>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="记录状态：" prop="status">
|
|
|
|
<el-select v-model="addDispatchNodeForm.status" clearable placeholder="记录状态"
|
|
|
|
style="width:200px"
|
|
|
|
size="small">
|
|
|
|
<el-option
|
|
|
|
v-for="item in statusList"
|
|
|
|
:key="item.value"
|
|
|
|
:label="item.label"
|
|
|
|
:value="item.value">
|
|
|
|
</el-option>
|
|
|
|
</el-select>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="驾驶人姓名：" prop="driverName">
|
|
|
|
<el-input v-model="addDispatchNodeForm.driverName" clearable style="width:200px"
|
|
|
|
size="small"
|
|
|
|
placeholder=""></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="驾驶人电话：" prop="driverMobile">
|
|
|
|
<el-input v-model="addDispatchNodeForm.driverMobile" clearable style="width:200px"
|
|
|
|
size="small"
|
|
|
|
placeholder=""></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
<div slot="footer" class="dialog-footer" style="text-align: center">
|
|
|
|
<el-button @click="addDispatchNodeFormVisible = false" size="medium" style="width: 100px">取消
|
|
|
|
</el-button>
|
|
|
|
<el-button type="primary" @click="addDispatchNote" :loading="addLoading" size="medium"
|
|
|
|
style="width: 100px">
|
|
|
|
添加
|
|
|
|
</el-button>
|
|
|
|
</div>
|
|
|
|
</el-dialog>
|
|
|
|
</div>
|
|
|
|
<!-- 编辑调度记录，对话框 -->
|
|
|
|
<div>
|
|
|
|
<el-dialog
|
|
|
|
style="margin-top: -50px"
|
|
|
|
title="编辑调度记录明细"
|
|
|
|
:visible.sync="viewDialogVisible"
|
|
|
|
text-align="center"
|
|
|
|
width="60%"
|
|
|
|
@close="editDialogClosed">
|
|
|
|
|
|
|
|
<el-form :model="editForm" label-width="120px" status-icon
|
|
|
|
:inline="true"
|
|
|
|
style="background-color: #F5F7FA;"
|
|
|
|
:rules="editFormRules" ref="editFormRef">
|
|
|
|
<div style="margin-left: 40px">
|
|
|
|
<br>
|
|
|
|
<el-form-item label="用户名称：" prop="userName">
|
|
|
|
<el-input v-model="editForm.userName" style="width:200px" clearable size="small"
|
|
|
|
placeholder="请输入用户名称"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="联系方式：" prop="userMobile">
|
|
|
|
<el-input v-model="editForm.userMobile" style="width:200px" clearable size="small"
|
|
|
|
placeholder="请输入您的联系方式"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="车辆类型：" prop="vehicleType">
|
|
|
|
<el-select v-model="editForm.vehicleType" style="width:200px" clearable size="small"
|
|
|
|
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="editForm.licensePlateNumber"
|
|
|
|
style="width:200px;margin-left:0px" clearable
|
|
|
|
size="small"
|
|
|
|
placeholder="请输入车牌号"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="场站位置：" prop="station">
|
|
|
|
<el-select v-model="editForm.station" clearable style="width:200px" 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="editForm.dispatchType" clearable style="width:200px" 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-date-picker v-model="editForm.gmtCreate" type="datetime"
|
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
|
placeholder="选择日期" size="small" style="width:200px"></el-date-picker>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="开始时间：" prop="beginTime">
|
|
|
|
<el-date-picker v-model="editForm.beginTime" type="datetime"
|
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
|
placeholder="选择日期" size="small" style="width:200px"></el-date-picker>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="结束时间：" prop="endTime">
|
|
|
|
<el-date-picker v-model="editForm.endTime" type="datetime"
|
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
|
placeholder="选择日期" size="small" style="width:200px"></el-date-picker>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="记录状态：" prop="status">
|
|
|
|
<el-select v-model="editForm.status" placeholder="记录状态" clearable style="width:200px"
|
|
|
|
size="small">
|
|
|
|
<el-option
|
|
|
|
v-for="item in statusList"
|
|
|
|
:key="item.value"
|
|
|
|
:label="item.label"
|
|
|
|
:value="item.value">
|
|
|
|
</el-option>
|
|
|
|
</el-select>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="驾驶人姓名：" prop="driverName">
|
|
|
|
<el-input v-model="editForm.driverName" style="width:200px" clearable size="small"
|
|
|
|
placeholder=""></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="驾驶人电话：" prop="driverMobile">
|
|
|
|
<el-input v-model="editForm.driverMobile" style="width:200px" clearable size="small"
|
|
|
|
placeholder=""></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<br>
|
|
|
|
</div>
|
|
|
|
</el-form>
|
|
|
|
<!--底部按钮区域-->
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
<el-button style="width: 100px" @click="viewDialogVisible = false">取消</el-button>
|
|
|
|
<el-button type="primary" size="medium" style="width: 100px"
|
|
|
|
:loading="editLoading"
|
|
|
|
@click="editDispatchNote">编辑</el-button>
|
|
|
|
</span>
|
|
|
|
</el-dialog>
|
|
|
|
</div>
|
|
|
|
</el-main>
|
|
|
|
</el-container>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import {
|
|
|
|
selectDispatchNoteList,
|
|
|
|
insertDispatchNote,
|
|
|
|
updateDispatchNote,
|
|
|
|
deleteDispatchNote,
|
|
|
|
batchRemoveDispatchNode,
|
|
|
|
startTask,
|
|
|
|
completeTask
|
|
|
|
} from "../../api/dispatch_api";
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: "dispatch_api",
|
|
|
|
created() {
|
|
|
|
this.getDispatchNodeList();
|
|
|
|
},
|
|
|
|
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: '',
|
|
|
|
//调度时间
|
|
|
|
gmtCreate: undefined,
|
|
|
|
//完成时间
|
|
|
|
endTime: undefined,
|
|
|
|
//业务类型
|
|
|
|
dispatchType: '',
|
|
|
|
//状态
|
|
|
|
status: '',
|
|
|
|
//当前的页数
|
|
|
|
pageNum: 1,
|
|
|
|
//当前每页显示多少条数据
|
|
|
|
pageSize: 10
|
|
|
|
},
|
|
|
|
//所有的调度记录列表
|
|
|
|
DispatchNoteList: [],
|
|
|
|
//添加调度记录，表单
|
|
|
|
addDispatchNodeForm: {
|
|
|
|
userName: '',
|
|
|
|
userMobile: '',
|
|
|
|
//车辆类型
|
|
|
|
vehicleType: '2',
|
|
|
|
//车牌号
|
|
|
|
licensePlateNumber: '',
|
|
|
|
//场站位置
|
|
|
|
station: '1',
|
|
|
|
//调度业务类型
|
|
|
|
dispatchType: '1',
|
|
|
|
//记录状态
|
|
|
|
status: '2',
|
|
|
|
//驾驶人姓名
|
|
|
|
driverName: '',
|
|
|
|
//驾驶人联系方式
|
|
|
|
driverMobile: '',
|
|
|
|
//开始时间
|
|
|
|
gmtCreate: '',
|
|
|
|
//结束时间
|
|
|
|
endTime: '',
|
|
|
|
},
|
|
|
|
//编辑记录的表单
|
|
|
|
editForm: {},
|
|
|
|
//添加调度记录，表单的验证规则对象
|
|
|
|
addDispatchNodeFormRules: {
|
|
|
|
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']},
|
|
|
|
],
|
|
|
|
licensePlateNumber: [
|
|
|
|
{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']},
|
|
|
|
],
|
|
|
|
gmtCreate: [
|
|
|
|
{required: true, message: '请选择开始时间', trigger: ['blur', 'change']},
|
|
|
|
],
|
|
|
|
// endTime: [
|
|
|
|
// {required: true, message: '请选择结束时间', trigger: 'blur'},
|
|
|
|
// ],
|
|
|
|
status: [
|
|
|
|
{required: true, message: '请选择记录状态', trigger: ['blur', 'change']},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
//编辑调度记录，表单的验证规则对象
|
|
|
|
editFormRules: {
|
|
|
|
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']},
|
|
|
|
],
|
|
|
|
licensePlateNumber: [
|
|
|
|
{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']},
|
|
|
|
],
|
|
|
|
// gmtCreate: [
|
|
|
|
// {required: true, message: '请选择开始时间', trigger: ['blur', 'change']},
|
|
|
|
// ],
|
|
|
|
// endTime: [
|
|
|
|
// {required: true, message: '请选择结束时间', trigger: ['blur', 'change']},
|
|
|
|
// ],
|
|
|
|
status: [
|
|
|
|
{required: true, message: '请选择记录状态', trigger: ['blur', 'change']},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
//控制添加用户对话框的显示与隐藏
|
|
|
|
addDispatchNodeFormVisible: false,
|
|
|
|
//控制编辑调度记录明细，对话框的显示与隐藏
|
|
|
|
viewDialogVisible: false,
|
|
|
|
//记录的总条数
|
|
|
|
total: 0,
|
|
|
|
/* 批量删除的选中列表 */
|
|
|
|
sels: [],
|
|
|
|
/* 列表加载 */
|
|
|
|
listLoading: false,
|
|
|
|
/* 添加加载 */
|
|
|
|
addLoading: false,
|
|
|
|
/* 编辑加载 */
|
|
|
|
editLoading: false,
|
|
|
|
/* 删除加载 */
|
|
|
|
delLoading: false,
|
|
|
|
/* 开始调度加载 */
|
|
|
|
beginLoading: false,
|
|
|
|
/* 结束调度加载 */
|
|
|
|
endLoading: 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: '叉车'
|
|
|
|
}
|
|
|
|
],
|
|
|
|
/**
|
|
|
|
* 场站位置，选项列表
|
|
|
|
*/
|
|
|
|
stationList: [
|
|
|
|
{
|
|
|
|
value: '1',
|
|
|
|
label: '西货站'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
value: '2',
|
|
|
|
label: '综保区'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
value: '3',
|
|
|
|
label: '军投'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
value: '4',
|
|
|
|
label: '快邮'
|
|
|
|
}
|
|
|
|
],
|
|
|
|
//记录状态 选项列表
|
|
|
|
statusList: [
|
|
|
|
{
|
|
|
|
value: '1',
|
|
|
|
label: '完成状态'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
value: '2',
|
|
|
|
label: '执行状态'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
value: '3',
|
|
|
|
label: '取消状态'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
value: '4',
|
|
|
|
label: "待执行状态"
|
|
|
|
}
|
|
|
|
],
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
/**
|
|
|
|
* 管理员端，获取车辆调度记录列表
|
|
|
|
*/
|
|
|
|
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());
|
|
|
|
});
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 管理员端，添加车辆调度记录
|
|
|
|
*/
|
|
|
|
addDispatchNote() {
|
|
|
|
/*进行表单的预验证*/
|
|
|
|
this.$refs.addDispatchNodeFormRef.validate(valid => {
|
|
|
|
// 未通过，表单预校验
|
|
|
|
if (!valid) return;
|
|
|
|
// 通过，表单预检验，发起添加车辆调度记录的网络请求
|
|
|
|
this.addLoading = true;
|
|
|
|
insertDispatchNote(this.addDispatchNodeForm).then((response) => {
|
|
|
|
let res = response.data;
|
|
|
|
//添加调度记录信息,失败
|
|
|
|
if (res.code !== '200'){
|
|
|
|
//关闭加载
|
|
|
|
this.addLoading = false;
|
|
|
|
return this.$message.error('添加调度记录信息，失败');
|
|
|
|
}
|
|
|
|
//添加调度记录信息，成功
|
|
|
|
this.$message.success('添加调度记录信息，成功');
|
|
|
|
//关闭加载
|
|
|
|
this.addLoading = false;
|
|
|
|
//隐藏对话框
|
|
|
|
this.addDispatchNodeFormVisible = false;
|
|
|
|
//刷新车辆调度记录列表
|
|
|
|
this.getDispatchNodeList();
|
|
|
|
}).catch(error => {
|
|
|
|
this.addLoading = false;
|
|
|
|
this.$message.error(error.toString());
|
|
|
|
});
|
|
|
|
})
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 管理员端，删除车辆调度记录
|
|
|
|
*/
|
|
|
|
removeDispatchNode(index, row) {
|
|
|
|
//弹框询问是否删除车辆调度记录
|
|
|
|
this.$confirm('此操作永久删除该车辆调度记录, 是否继续?', '警告', {
|
|
|
|
confirmButtonText: '确定删除',
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
type: 'warning'
|
|
|
|
}
|
|
|
|
).then(() => {
|
|
|
|
//开启加载
|
|
|
|
this.delLoading = true;
|
|
|
|
deleteDispatchNote(row).then((response) => {
|
|
|
|
let res = response.data;
|
|
|
|
if (res.code !== '200') {
|
|
|
|
this.delLoading = false;
|
|
|
|
return this.$message.error('删除车辆调度记录，失败');
|
|
|
|
}
|
|
|
|
this.$message.success('删除车辆调度记录，成功！');
|
|
|
|
this.delLoading = false;
|
|
|
|
//刷新车辆调度记录列表
|
|
|
|
this.getDispatchNodeList();
|
|
|
|
}).catch(error => {
|
|
|
|
this.delLoading = false;
|
|
|
|
this.$message.error(error.toString());
|
|
|
|
});
|
|
|
|
}).catch(() => {
|
|
|
|
});
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 管理员端，编辑车辆调度记录
|
|
|
|
*/
|
|
|
|
editDispatchNote() {
|
|
|
|
/*进行表单的预验证*/
|
|
|
|
this.$refs.editFormRef.validate(valid => {
|
|
|
|
// 未通过，表单预校验
|
|
|
|
if (!valid) return;
|
|
|
|
// 通过，表单预检验,开启加载
|
|
|
|
this.editLoading = true;
|
|
|
|
updateDispatchNote(this.editForm).then((response) => {
|
|
|
|
let res = response.data;
|
|
|
|
if (res.code !== '200') {
|
|
|
|
//关闭加载
|
|
|
|
this.editLoading = false;
|
|
|
|
return this.$message.error('修改车辆调度记录信息，失败');
|
|
|
|
}
|
|
|
|
this.$message.success('修改车辆调度记录信息，成功！');
|
|
|
|
//关闭加载
|
|
|
|
this.editLoading = false;
|
|
|
|
//关闭编辑车辆调度记录对话框
|
|
|
|
this.viewDialogVisible = false;
|
|
|
|
//刷新车辆调度列表
|
|
|
|
this.getDispatchNodeList();
|
|
|
|
}).catch(error => {
|
|
|
|
this.editLoading = false;
|
|
|
|
this.$message.error(error.toString());
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 管理员端，手动，开始调度任务
|
|
|
|
*/
|
|
|
|
startDispatch(index, row) {
|
|
|
|
//开启加载
|
|
|
|
this.beginLoading = true;
|
|
|
|
startTask(row).then((response) => {
|
|
|
|
let res = response.data;
|
|
|
|
if (res.code !== '200') {
|
|
|
|
//关闭加载
|
|
|
|
this.beginLoading = false;
|
|
|
|
return this.$message.error('手动开始调度任务，失败');
|
|
|
|
}
|
|
|
|
//关闭加载
|
|
|
|
this.beginLoading = false;
|
|
|
|
this.$message.success('手动开始调度任务，成功！');
|
|
|
|
//刷新车辆调度列表
|
|
|
|
this.getDispatchNodeList();
|
|
|
|
}).catch(error => {
|
|
|
|
this.beginLoading = false;
|
|
|
|
this.$message.error(error.toString());
|
|
|
|
});
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 管理员端，手动，完成调度任务
|
|
|
|
*/
|
|
|
|
completeDispatch(index, row) {
|
|
|
|
//开启加载
|
|
|
|
this.endLoading = true;
|
|
|
|
completeTask(row).then((response) => {
|
|
|
|
let res = response.data;
|
|
|
|
if (res.code !== '200') {
|
|
|
|
//关闭加载
|
|
|
|
this.endLoading = false;
|
|
|
|
return this.$message.error('手动完成调度任务，失败');
|
|
|
|
}
|
|
|
|
//关闭加载
|
|
|
|
this.endLoading = false;
|
|
|
|
this.$message.success('手动完成调度任务，成功！');
|
|
|
|
//刷新车辆调度列表
|
|
|
|
this.getDispatchNodeList();
|
|
|
|
}).catch(error => {
|
|
|
|
this.endLoading = false;
|
|
|
|
this.$message.error(error.toString());
|
|
|
|
});
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 批量删除，之前的选中
|
|
|
|
*/
|
|
|
|
selsChange: function (sels) {
|
|
|
|
this.sels = sels;
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 车辆状态为执行状态的时候，无法被选中
|
|
|
|
*/
|
|
|
|
isSelectable(row, index) {
|
|
|
|
if (row.status === '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};
|
|
|
|
batchRemoveDispatchNode(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.getDispatchNodeList();
|
|
|
|
}).catch(error => {
|
|
|
|
this.delLoading = false;
|
|
|
|
this.$message.error(error.toString());
|
|
|
|
});
|
|
|
|
}).catch(() => {
|
|
|
|
});
|
|
|
|
},
|
|
|
|
//监听，我要调度车辆，对话框的关闭事件
|
|
|
|
dispatchDialogClosed() {
|
|
|
|
//重置对话框
|
|
|
|
this.$refs.addDispatchNodeFormRef.resetFields();
|
|
|
|
},
|
|
|
|
//监听，编辑调度记录，对话框的关闭事件
|
|
|
|
editDialogClosed() {
|
|
|
|
//重置对话框
|
|
|
|
this.$refs.editFormRef.resetFields();
|
|
|
|
},
|
|
|
|
//监听pageSize改变的事件
|
|
|
|
handleSizeChange(newSize) {
|
|
|
|
this.queryInfo.pageSize = newSize;
|
|
|
|
//刷新车辆调度记录列表
|
|
|
|
this.getDispatchNodeList();
|
|
|
|
},
|
|
|
|
//监听当前页码值改变的事件
|
|
|
|
handleCurrentChange(newPage) {
|
|
|
|
this.queryInfo.pageNum = newPage;
|
|
|
|
//刷新车辆调度记录列表
|
|
|
|
this.getDispatchNodeList();
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 打开编辑调度记录，对话框
|
|
|
|
* @param index
|
|
|
|
* @param row：该行的数据对象
|
|
|
|
*/
|
|
|
|
showDialogVisible(index, row) {
|
|
|
|
this.editForm = Object.assign({}, row);
|
|
|
|
this.viewDialogVisible = true;
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 根据状态的不同区分颜色
|
|
|
|
*
|
|
|
|
* @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';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</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> |
...
|
...
|
|
