朱兆平 / vue_cli · 提交

转到一个项目

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

车辆调度管理3个界面

内嵌 并排对比
正在显示 3 个修改的文件 包含 2083 行增加 和 0 行删除
  1 +<template>
  2 + <el-container>
  3 + <el-main>
  4 + <el-card style="background-color: #F5F7FA">
  5 + <!-- 搜素区域 -->
  6 + <div>
  7 + <el-form :model="queryInfo" :rules="queryFormRules" ref="queryFormRef" status-icon>
  8 + <el-form-item>
  9 + <el-col :span="4">
  10 + <el-form-item prop="gmtCreate">
  11 + <el-date-picker v-model="queryInfo.gmtCreate" type="date" value-format="yyyy-MM-dd"
  12 + placeholder="选择创建调度时间"
  13 + style="width: 200px"></el-date-picker>
  14 + </el-form-item>
  15 + </el-col>
  16 + <el-col :span="4" style="margin-left: 50px">
  17 + <el-form-item prop="dispatchType">
  18 + <el-select v-model="queryInfo.dispatchType" placeholder="请选择业务类型"
  19 + style="width: 200px"
  20 + clearable>
  21 + <el-option
  22 + v-for="item in dispatchTypeList"
  23 + :key="item.value"
  24 + :label="item.label"
  25 + :value="item.value">
  26 + </el-option>
  27 + </el-select>
  28 + </el-form-item>
  29 + </el-col>
  30 + <el-col :span="4" style="margin-left: 50px">
  31 + <el-form-item prop="status">
  32 + <el-select v-model="queryInfo.status" placeholder="记录状态" clearable
  33 + style="width:200px;margin-left: 6px">
  34 + <el-option
  35 + v-for="item in statusList"
  36 + :key="item.value"
  37 + :label="item.label"
  38 + :value="item.value">
  39 + </el-option>
  40 + </el-select>
  41 + </el-form-item>
  42 + </el-col>
  43 + <el-button type="primary" style="margin-left: 60px"
  44 + @click="getDispatchNodeList">查询调度记录
  45 + </el-button>
  46 + <el-button type="success" style="margin-left: 15px" @click="dispatchFormVisible = true">
  47 + 我要调度车辆
  48 + </el-button>
  49 + </el-form-item>
  50 + </el-form>
  51 + <el-row style="margin-top: 20px;">
  52 + </el-row>
  53 + </div>
  54 + <!--调度记录列表区域-->
  55 + <div style="margin-top: 20px;">
  56 + <el-table :data="DispatchNoteList" border highlight-current-row v-loading="listLoading"
  57 + :row-class-name="rowStatus"
  58 + element-loading-text="拼命加载中">
  59 + <el-table-column type="index" align="center"></el-table-column>
  60 + <el-table-column label="用户名称" prop="userName" align="center" width="100"></el-table-column>
  61 + <el-table-column label="联系方式" prop="userMobile" align="center" width="120"></el-table-column>
  62 + <el-table-column label="状态" prop="status" align="center" width="120">
  63 + <template slot-scope="scope">
  64 + <span v-if="scope.row.status ==='1'">完成状态</span>
  65 + <span v-if="scope.row.status ==='2'">执行状态</span>
  66 + <span v-if="scope.row.status ==='3'">取消状态</span>
  67 + <span v-if="scope.row.status ==='4'">待执行状态</span>
  68 + </template>
  69 + </el-table-column>
  70 + <el-table-column label="业务类型" prop="dispatchType" align="center" width="120">
  71 + <template slot-scope="scope">
  72 + <span v-if="scope.row.dispatchType ==='1'">进站送货</span>
  73 + <span v-if="scope.row.dispatchType ==='2'">出站提货</span>
  74 + <span v-if="scope.row.dispatchType ==='3'">货物调拨</span>
  75 + <span v-if="scope.row.dispatchType ==='4'">货物流转</span>
  76 + </template>
  77 + </el-table-column>
  78 + <el-table-column label="车牌号码" prop="licensePlateNumber" align="center"
  79 + width="120"></el-table-column>
  80 + <el-table-column label="车辆类型" prop="vehicleType" align="center" width="120">
  81 + <template slot-scope="scope">
  82 + <span v-if="scope.row.vehicleType ==='1'">重型货车</span>
  83 + <span v-if="scope.row.vehicleType ==='2'">中型货车</span>
  84 + <span v-if="scope.row.vehicleType ==='3'">轻型货车</span>
  85 + <span v-if="scope.row.vehicleType ==='4'">微型货车</span>
  86 + <span v-if="scope.row.vehicleType ==='5'">拖车</span>
  87 + <span v-if="scope.row.vehicleType ==='6'">叉车</span>
  88 + </template>
  89 + </el-table-column>
  90 + <el-table-column label="场站位置" prop="station" align="center" width="120">
  91 + <template slot-scope="scope">
  92 + <span v-if="scope.row.station ==='1'">西货站</span>
  93 + <span v-if="scope.row.station ==='2'">综保区</span>
  94 + <span v-if="scope.row.station ==='3'">军投</span>
  95 + <span v-if="scope.row.station ==='4'">快邮</span>
  96 + </template>
  97 + </el-table-column>
  98 + <el-table-column label="创建时间" prop="gmtCreate" align="center" width="160"></el-table-column>
  99 + <el-table-column label="开始时间" prop="beginTime" align="center" width="160"></el-table-column>
  100 + <el-table-column label="完成时间" prop="endTime" align="center" width="160"></el-table-column>
  101 + <el-table-column label="操作" width="220px" fixed="right" align="center">
  102 + <template slot-scope="scope">
  103 + <!--查看按钮-->
  104 + <el-tooltip effect="dark" content="查看" placement="top-start" :enterable="false">
  105 + <el-button type="primary" icon="el-icon-edit" size="mini"
  106 + @click="showDialogVisible(scope.row)">查看
  107 + </el-button>
  108 + </el-tooltip>
  109 + <!--取消调度按钮-->
  110 + <el-tooltip effect="dark" content="取消调度" placement="top-start" :enterable="false">
  111 + <el-button type="danger" icon="el-icon-delete" size="mini"
  112 + :disabled="scope.row.endTime!==null && scope.row.endTime!==''"
  113 + @click="cancelDispatch(scope.row)" :loading="cancelLoading">取消调度
  114 + </el-button>
  115 + </el-tooltip>
  116 + </template>
  117 + </el-table-column>
  118 + </el-table>
  119 + <!--分页区域-->
  120 + <div style="margin-top: 10px">
  121 + <el-pagination
  122 + @size-change="handleSizeChange"
  123 + @current-change="handleCurrentChange"
  124 + :current-page="this.queryInfo.pageNum"
  125 + :page-sizes="[10,20,30,50]"
  126 + :page-size="this.queryInfo.pageSize"
  127 + layout="total, sizes, prev, pager, next, jumper"
  128 + :total="total">
  129 + </el-pagination>
  130 + </div>
  131 + </div>
  132 + </el-card>
  133 + <!-- 我要调度车辆，对话框 -->
  134 + <div>
  135 + <el-dialog
  136 + title="我要调度车辆"
  137 + :visible.sync="dispatchFormVisible"
  138 + width="50%" @close="dispatchDialogClosed">
  139 + <!-- :rules="dispatchFormRules" ref="dispatchFormRef"-->
  140 + <el-form :model="dispatchForm" label-width="100px" status-icon
  141 + :rules="dispatchFormRules" ref="dispatchFormRef"
  142 + style="margin-left:10%;margin-right:10%;background-color: #F5F7FA">
  143 + <br>
  144 + <el-form-item label="车辆类型：" prop="vehicleType">
  145 + <el-select v-model="dispatchForm.vehicleType" style="width: 300px" clearable
  146 + placeholder="请选择车辆类型">
  147 + <el-option
  148 + v-for="item in vehicleTypeList"
  149 + :key="item.value"
  150 + :label="item.label"
  151 + :value="item.value">
  152 + </el-option>
  153 + </el-select>
  154 + </el-form-item>
  155 + <el-form-item label="车辆数量：" prop="vehicleNumber">
  156 + <el-input-number style="width: 200px" v-model="dispatchForm.vehicleNumber"
  157 + :min="1" :max="100" controls-position="right">
  158 + </el-input-number>
  159 + <span style="margin-left:5px;font-size: 18px">辆</span>
  160 + </el-form-item>
  161 + <el-form-item label="场站位置：" prop="station">
  162 + <el-select v-model="dispatchForm.station" style="width: 300px" clearable
  163 + placeholder="请选择场站位置">
  164 + <el-option
  165 + v-for="item in stationList"
  166 + :key="item.value"
  167 + :label="item.label"
  168 + :value="item.value">
  169 + </el-option>
  170 + </el-select>
  171 + </el-form-item>
  172 + <el-form-item label="业务类型：" prop="dispatchType">
  173 + <el-select v-model="dispatchForm.dispatchType" style="width: 300px;" clearable
  174 + placeholder="请选择业务类型">
  175 + <el-option
  176 + v-for="item in dispatchTypeList"
  177 + :key="item.value"
  178 + :label="item.label"
  179 + :value="item.value">
  180 + </el-option>
  181 + </el-select>
  182 + </el-form-item>
  183 + <br>
  184 + </el-form>
  185 + <!--底部按钮区域-->
  186 + <span slot="footer" class="dialog-footer">
  187 + <el-button @click="dispatchFormVisible = false">取 消</el-button>
  188 + <el-button type="primary" @click="dispatchVehicle" :loading="dispatchLoading">确定调度车辆</el-button>
  189 + </span>
  190 + </el-dialog>
  191 + </div>
  192 + <!-- 查看调度记录，对话框 -->
  193 + <div>
  194 + <el-dialog
  195 + style="margin-top: -50px"
  196 + title="查看调度记录明细"
  197 + :visible.sync="viewDialogVisible"
  198 + text-align="center"
  199 + width="60%" @close="showDialogClosed">
  200 + <!-- 表单显示区域 :rules="dispatchFormRules" -->
  201 + <el-form :model="showForm" ref="showFormRef"
  202 + :inline="true" align="center"
  203 + style="background-color: #F5F7FA;margin-left: 5%;margin-right: 5%">
  204 + <div style="margin-top: -15px">
  205 + <br>
  206 + <el-form-item label="用户名称：" prop="userName">
  207 + <el-input v-model="showForm.userName" style="width: 200px;" size="small"
  208 + readonly></el-input>
  209 + </el-form-item>
  210 + <el-form-item label="联系方式：" prop="userMobile">
  211 + <el-input v-model="showForm.userMobile" style="width: 200px;" size="small"
  212 + readonly></el-input>
  213 + </el-form-item>
  214 + <el-form-item label="车辆类型：" prop="vehicleType">
  215 + <el-select v-model="showForm.vehicleType" style="width:200px" size="small" readonly
  216 + placeholder="请选择车辆类型">
  217 + <el-option
  218 + v-for="item in vehicleTypeList"
  219 + :key="item.value"
  220 + :label="item.label"
  221 + :value="item.value">
  222 + </el-option>
  223 + </el-select>
  224 + </el-form-item>
  225 + <el-form-item label="车牌号码：" prop="licensePlateNumber">
  226 + <el-input v-model="showForm.licensePlateNumber" style="width: 200px;" size="small"
  227 + readonly></el-input>
  228 + </el-form-item>
  229 + <el-form-item label="场站位置：" prop="station">
  230 + <el-select v-model="showForm.station" style="width:200px" readonly size="small"
  231 + placeholder="请选择场站位置">
  232 + <el-option
  233 + v-for="item in stationList"
  234 + :key="item.value"
  235 + :label="item.label"
  236 + :value="item.value">
  237 + </el-option>
  238 + </el-select>
  239 + </el-form-item>
  240 + <el-form-item label="业务类型：" prop="dispatchType">
  241 + <el-select v-model="showForm.dispatchType" style="width:200px" readonly size="small"
  242 + placeholder="请选择业务类型">
  243 + <el-option
  244 + v-for="item in dispatchTypeList"
  245 + :key="item.value"
  246 + :label="item.label"
  247 + :value="item.value">
  248 + </el-option>
  249 + </el-select>
  250 + </el-form-item>
  251 + <el-form-item label="创建时间：" prop="gmtCreate">
  252 + <el-input v-model="showForm.gmtCreate" style="width: 200px;" size="small"
  253 + readonly></el-input>
  254 + </el-form-item>
  255 + <el-form-item label="开始时间：" prop="beginTime">
  256 + <el-input v-model="showForm.beginTime" style="width: 200px;" size="small"
  257 + readonly></el-input>
  258 + </el-form-item>
  259 + <el-form-item label="结束时间：" prop="endTime">
  260 + <el-input v-model="showForm.endTime" style="width: 200px;" size="small"
  261 + readonly></el-input>
  262 + </el-form-item>
  263 + <el-form-item label="记录状态：" prop="status">
  264 + <el-select v-model="showForm.status" placeholder="记录状态" style="width:200px" size="small"
  265 + readonly>
  266 + <el-option
  267 + v-for="item in statusList"
  268 + :key="item.value"
  269 + :label="item.label"
  270 + :value="item.value">
  271 + </el-option>
  272 + </el-select>
  273 + </el-form-item>
  274 + <br>
  275 + </div>
  276 + </el-form>
  277 + <!--底部按钮区域-->
  278 + <span slot="footer" class="dialog-footer">
  279 + <el-button type="primary" @click="viewDialogVisible = false">结束查看</el-button>
  280 + </span>
  281 + </el-dialog>
  282 + </div>
  283 + </el-main>
  284 + </el-container>
  285 +</template>
  286 +
  287 +<script>
  288 + // import {selectDispatchNoteList, dispatch, cancel, getUser} from '../../api/dispatch_api'
  289 +
  290 + export default {
  291 + name: 'dispatch_api',
  292 + created() {
  293 +
  294 + },
  295 + data() {
  296 + /**
  297 + * 验证手机号的自定义规则
  298 + */
  299 + var userMobileValid = (rule, value, callback) => {
  300 + //验证手机号的正则表达式
  301 + const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
  302 + if (regMobile.test(value)) {
  303 + //合法的手机号
  304 + return callback();
  305 + }
  306 + callback(new Error('请输入合法的手机号'));
  307 + };
  308 + return {
  309 + /**
  310 + * 查询列表
  311 + */
  312 + queryInfo: {
  313 + //用户姓名
  314 + userName: '',
  315 + //用户联系方式
  316 + userMobile: '',
  317 + //记录状态
  318 + status: '',
  319 + //调度时间
  320 + gmtCreate: new Date(),
  321 + //业务类型
  322 + dispatchType: '',
  323 + //当前的页数
  324 + pageNum: 1,
  325 + //当前每页显示多少条数据
  326 + pageSize: 10
  327 + },
  328 + /**
  329 + * 记录列表，总条数
  330 + */
  331 + total: 0,
  332 + /**
  333 + * 所有,调度记录列表
  334 + */
  335 + DispatchNoteList: [],
  336 + /**
  337 + * 我要调度车辆，表单
  338 + */
  339 + dispatchForm: {
  340 + userName: '',
  341 + userMobile: '',
  342 + //车辆数量
  343 + vehicleNumber: 1,
  344 + //车辆类型
  345 + vehicleType: '2',
  346 + //场站位置
  347 + station: '1',
  348 + //调度业务类型
  349 + dispatchType: '1'
  350 + },
  351 +
  352 + /**
  353 + * 查看记录明细,表单
  354 + */
  355 + showForm: {},
  356 + /**
  357 + * 控制添加用户对话框的显示与隐藏
  358 + */
  359 + dispatchFormVisible: false,
  360 + /**
  361 + * 控制查看调度记录明细，对话框的显示与隐藏
  362 + */
  363 + viewDialogVisible: false,
  364 + /**
  365 + * loading加载
  366 + */
  367 + /* 获取列表时的加载 */
  368 + listLoading: false,
  369 + /* 调度车辆时的加载 */
  370 + dispatchLoading: false,
  371 + /* 取消调度时的加载 */
  372 + cancelLoading: false,
  373 + /**
  374 + * 业务类型,选项列表
  375 + */
  376 + dispatchTypeList: [
  377 + {
  378 + value: '1',
  379 + label: '进站送货'
  380 + },
  381 + {
  382 + value: '2',
  383 + label: '出站提货'
  384 + },
  385 + {
  386 + value: '3',
  387 + label: '货物流转'
  388 + },
  389 + {
  390 + value: '4',
  391 + label: '货物调拨'
  392 + }
  393 + ],
  394 + /**
  395 + * 车辆类型，选项列表
  396 + */
  397 + vehicleTypeList: [
  398 + {
  399 + value: '1',
  400 + label: '重型货车'
  401 + },
  402 + {
  403 + value: '2',
  404 + label: '中型货车'
  405 + },
  406 + {
  407 + value: '3',
  408 + label: '经济货车'
  409 + },
  410 + {
  411 + value: '4',
  412 + label: '微型货车'
  413 + },
  414 + {
  415 + value: '5',
  416 + label: '拖车'
  417 + },
  418 + {
  419 + value: '6',
  420 + label: '叉车'
  421 + }
  422 + ],
  423 + /**
  424 + * 记录状态，列表
  425 + */
  426 + statusList: [
  427 + {
  428 + value: '1',
  429 + label: '完成状态'
  430 + },
  431 + {
  432 + value: '2',
  433 + label: '执行状态'
  434 + },
  435 + {
  436 + value: '3',
  437 + label: '取消状态'
  438 + },
  439 + {
  440 + value: '4',
  441 + label: '待执行状态'
  442 + }
  443 + ],
  444 +
  445 + /**
  446 + * 场站位置，选项列表
  447 + */
  448 + stationList: [
  449 + {
  450 + value: '1',
  451 + label: '西货站'
  452 + },
  453 + {
  454 + value: '2',
  455 + label: '综保区'
  456 + },
  457 + {
  458 + value: '3',
  459 + label: '军投'
  460 + },
  461 + {
  462 + value: '4',
  463 + label: '快邮'
  464 + }
  465 + ],
  466 +
  467 + queryFormRules: {
  468 + userName: [
  469 + {required: true, message: '请输入姓名', trigger: ['blur', 'change']},
  470 + ],
  471 + userMobile: [
  472 + {required: true, message: '请输入联系方式', trigger: ['blur', 'change']},
  473 + {validator: userMobileValid, trigger: 'blur'}
  474 + ],
  475 + },
  476 + /**
  477 + * 调度车辆表单的验证规则对象
  478 + */
  479 + dispatchFormRules: {
  480 + status: [
  481 + {required: true, message: '请选择记录状态', trigger: ['blur', 'change']},
  482 + ],
  483 + gmtCreate: [
  484 + {required: true, message: '请选择创建时间', trigger: ['blur', 'change']},
  485 + ],
  486 + endTime: [
  487 + {required: true, message: '请选择结束时间', trigger: ['blur', 'change']},
  488 + ],
  489 + licensePlateNumber: [
  490 + {required: true, message: '请输入车牌号', trigger: ['blur', 'change']},
  491 + ],
  492 + userName: [
  493 + {required: true, message: '请输入姓名', trigger: ['blur', 'change']},
  494 + ],
  495 + userMobile: [
  496 + {required: true, message: '请输入联系方式', trigger: ['blur', 'change']},
  497 + {validator: userMobileValid, trigger: 'blur'}
  498 + ],
  499 + vehicleType: [
  500 + {required: true, message: '请选择车辆类型', trigger: ['blur', 'change']},
  501 +
  502 + ],
  503 + vehicleNumber: [
  504 + {required: true, message: '请选择车辆数量', trigger: ['blur', 'change']},
  505 + ],
  506 + station: [
  507 + {required: true, message: '请选择场站位置', trigger: ['blur', 'change']},
  508 + ],
  509 + dispatchType: [
  510 + {required: true, message: '请选择调度业务类型', trigger: ['blur', 'change']},
  511 + ],
  512 + },
  513 + }
  514 + },
  515 + methods: {
  516 + /**
  517 + * 监听，调度车辆对话框的关闭事件
  518 + */
  519 + dispatchDialogClosed() {
  520 + //重置对话框
  521 + this.$refs.dispatchFormRef.resetFields();
  522 + },
  523 +
  524 + /**
  525 + * 监听，查看调度记录对话框的关闭事件
  526 + */
  527 + showDialogClosed() {
  528 + //重置对话框
  529 + this.$refs.showFormRef.resetFields();
  530 + },
  531 +
  532 + /**
  533 + * 监听pageSize改变的事件
  534 + */
  535 + handleSizeChange(newSize) {
  536 + this.queryInfo.pageSize = newSize;
  537 + //刷新调度记录列表
  538 + this.getDispatchNodeList();
  539 + },
  540 + /**
  541 + * 监听当前页码值改变的事件
  542 + */
  543 + handleCurrentChange(newPage) {
  544 + this.queryInfo.pageNum = newPage;
  545 + //刷新调度记录列表
  546 + this.getDispatchNodeList();
  547 + },
  548 + /**
  549 + * 打开,查看调度记录明细,对话框
  550 + * @param row
  551 + */
  552 + showDialogVisible(row) {
  553 + this.showForm = row;
  554 + this.viewDialogVisible = true;
  555 + },
  556 + /**
  557 + * 用户端，获取车辆调度记录
  558 + */
  559 + getDispatchNodeList() {
  560 + this.listLoading = true;
  561 + selectDispatchNoteList(this.queryInfo).then((response) => {
  562 + let res = response.data;
  563 + if (res.code !== '200') {
  564 + this.listLoading = false;
  565 + return this.$message.error('获取车辆调度列表失败');
  566 + }
  567 + // 获取车辆调度列表数据
  568 + this.DispatchNoteList = res.data.list;
  569 + // 获取列表的总记录数
  570 + this.total = res.data.total;
  571 + this.listLoading = false;
  572 + this.$message.success('获取车辆调度列表,成功！');
  573 + }).catch(error => {
  574 + this.listLoading = false;
  575 + this.$message.error(error.toString());
  576 + });
  577 + },
  578 + /**
  579 + * 用户端，我要调度车辆，方法
  580 + */
  581 + dispatchVehicle() {
  582 + this.dispatchLoading = true;
  583 + dispatch(this.dispatchForm).then((response) => {
  584 + let res = response.data;
  585 + if (res.code !== '200') {
  586 + this.dispatchLoading = false;
  587 + return this.$message.error('车辆繁忙，请稍后重试');
  588 + }
  589 + //关闭加载
  590 + this.dispatchLoading = false;
  591 + this.$message.success('调度车辆成功！');
  592 + //调度成功，隐藏对话框
  593 + this.dispatchFormVisible = false;
  594 + /* 将调度车辆信息=>查询列表 */
  595 + // 用户名称
  596 + this.queryInfo.userName = this.dispatchForm.userName;
  597 + // 联系方式
  598 + this.queryInfo.userMobile = this.dispatchForm.userMobile;
  599 + // 调度业务类型
  600 + this.queryInfo.dispatchType = this.dispatchForm.dispatchType;
  601 + // 创建时间为当前时间（需留意）
  602 + this.queryInfo.gmtCreate = new Date();
  603 + //刷新车辆调度列表
  604 + this.getDispatchNodeList();
  605 + }).catch(error => {
  606 + this.dispatchLoading = false;
  607 + this.$message.error(error.toString());
  608 + });
  609 + },
  610 + /**
  611 + * 用户端，取消调度车辆，方法
  612 + */
  613 + cancelDispatch(row) {
  614 + //弹框询问是否取消车辆调度
  615 + this.$confirm('此操作将取消该车辆的调度, 是否继续?', '警告', {
  616 + confirmButtonText: '确定取消调度',
  617 + cancelButtonText: '取消',
  618 + type: 'warning'
  619 + }
  620 + ).then(() => {
  621 + //开启加载
  622 + this.cancelLoading = true;
  623 + cancel(row).then((response) => {
  624 + let res = response.data;
  625 + if (res.code !== '200') {
  626 + this.cancelLoading = false;
  627 + return this.$message.error('取消车辆调度，失败！请人工介入');
  628 + }
  629 + //关闭加载
  630 + this.cancelLoading = false;
  631 + this.$message.success('取消调度车辆，成功！');
  632 + //刷新车辆调度列表
  633 + this.getDispatchNodeList();
  634 + }).catch(error => {
  635 + //关闭加载
  636 + this.cancelLoading = false;
  637 + this.$message.error(error.toString());
  638 + });
  639 + }).catch(() => {
  640 + });
  641 + },
  642 + /**
  643 + * 获取用户信息
  644 + */
  645 + getUserInfo(param) {
  646 + getUser(param).then((response) => {
  647 + let res = response.data;
  648 + if (res.code !== '200') {
  649 + return this.$message.error('网络异常，请刷新界面！');
  650 + }
  651 + if (res.data.list.length === 0) {
  652 + return this.$message.error('网络异常，请刷新界面！');
  653 + }
  654 + if (res.data.list[0].mobilephone === null || res.data.list[0].mobilephone === '') {
  655 + return this.$message.error('请填写您的手机号码');
  656 + }
  657 + this.queryInfo.userMobile = res.data.list[0].mobilephone;
  658 + this.dispatchForm.userMobile = res.data.list[0].mobilephone;
  659 + this.$message.success('欢迎使用，车辆调度系统！');
  660 + }).catch((error) => {
  661 + this.$message.error(error.toString());
  662 + });
  663 + },
  664 + /**
  665 + * 根据状态的不同区分颜色
  666 + *
  667 + * @param row
  668 + * @param rowIndex
  669 + */
  670 + rowStatus({row, rowIndex}) {
  671 + if (row.status === '1') {
  672 + return 'success-row';
  673 + }
  674 + if (row.status === '2') {
  675 + return 'run-row';
  676 + }
  677 + if (row.status === '3') {
  678 + return 'cancel-row';
  679 + }
  680 + if (row.status === '4') {
  681 + return 'await-row';
  682 + }
  683 + }
  684 + },
  685 + mounted() {
  686 + var user = sessionStorage.getItem('user');
  687 + if (user) {
  688 + user = JSON.parse(user);
  689 + console.log(user);
  690 + this.queryInfo.userName = user.username;
  691 + this.dispatchForm.userName = user.username;
  692 + let param = {
  693 + userName: this.queryInfo.userName
  694 + };
  695 + this.getUserInfo(param);
  696 + }
  697 + /**
  698 + * 渲染完成之后，在获取调度记录列表
  699 + */
  700 + // this.getDispatchNodeList();
  701 + }
  702 + }
  703 +</script>
  704 +
  705 +<style>
  706 + /* 完成状态 */
  707 + .el-table .success-row {
  708 + background: rgba(64, 158, 255, 0.2);
  709 + }
  710 +
  711 + /* 执行状态 */
  712 + .el-table .run-row {
  713 + background: rgba(103, 194, 58, 0.2);
  714 + }
  715 +
  716 + /* 取消状态 */
  717 + .el-table .cancel-row {
  718 + background: rgba(144, 147, 153, 0.2);
  719 + }
  720 +
  721 + /* 待执行状态 */
  722 + .el-table .await-row {
  723 + background: rgba(230, 162, 60, 0.2);
  724 + }
  725 +</style>
  1 +<template>
  2 + <el-container>
  3 + <el-main>
  4 + <!--面包屑导航区域-->
  5 + <!-- <div>-->
  6 + <!-- <el-breadcrumb separator-class="el-icon-arrow-right">-->
  7 + <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>-->
  8 + <!-- <el-breadcrumb-item>车辆调度</el-breadcrumb-item>-->
  9 + <!-- <el-breadcrumb-item>驾驶员信息</el-breadcrumb-item>-->
  10 + <!-- </el-breadcrumb>-->
  11 + <!-- </div>-->
  12 + <el-card style="background-color: #F5F7FA">
  13 + <!--搜索区域-->
  14 + <div>
  15 + <el-row :gutter="24">
  16 + <el-col :span="5">
  17 + <el-input v-model="queryInfo.driverName" prefix-icon="el-icon-search" clearable
  18 + placeholder="请输入驾驶员姓名"></el-input>
  19 + </el-col>
  20 + <el-col :span="5">
  21 + <el-input v-model="queryInfo.driverMobile" prefix-icon="el-icon-search" clearable
  22 + placeholder="请输入联系方式"></el-input>
  23 + </el-col>
  24 + <el-col :span="5">
  25 + <el-input v-model="queryInfo.driverCompany" prefix-icon="el-icon-search" clearable
  26 + placeholder="请输入公司名称"></el-input>
  27 + </el-col>
  28 + <el-col :span="5">
  29 + <el-select v-model="queryInfo.driverStatus" clearable placeholder="请选择驾驶员状态">
  30 + <el-option
  31 + v-for="item in driverStatusList"
  32 + :key="item.value"
  33 + :label="item.label"
  34 + :value="item.value">
  35 + </el-option>
  36 + </el-select>
  37 + </el-col>
  38 + </el-row>
  39 + <el-row style="margin-top: 20px;">
  40 + <el-button type="primary" @click="getDriverInfoList">查询驾驶员信息</el-button>
  41 + <el-button type="success" @click="addDriverInfoFormVisible = true">增加驾驶员信息</el-button>
  42 + </el-row>
  43 + </div>
  44 + <!--驾驶员信息列表区域-->
  45 + <div style="margin-top: 20px;">
  46 + <el-table :data="driverInfoList" border stripe highlight-current-row v-loading="listLoading"
  47 + @selection-change="selsChange"
  48 + element-loading-text="拼命加载中">
  49 + <el-table-column type="selection" width="55" :selectable="isSelectable" align="center"></el-table-column>
  50 + <el-table-column type="index" align="center"></el-table-column>
  51 + <el-table-column label="姓名" prop="driverName" align="center" width="100"></el-table-column>
  52 + <el-table-column label="联系方式" prop="driverMobile" align="center" width="130"></el-table-column>
  53 + <el-table-column label="职位" prop="driverPosition" align="center" width="100">
  54 + <template slot-scope="scope">
  55 + <span v-if="scope.row.driverPosition ==='1'">队长</span>
  56 + <span v-if="scope.row.driverPosition ==='2'">班长</span>
  57 + <span v-if="scope.row.driverPosition ==='3'">副班长</span>
  58 + <span v-if="scope.row.driverPosition ==='4'">员工</span>
  59 + </template>
  60 + </el-table-column>
  61 + <el-table-column label="状态" prop="driverStatus" align="center" width="120">
  62 + <template slot-scope="scope">
  63 + <span v-if="scope.row.driverStatus ==='1'">空闲状态</span>
  64 + <span v-if="scope.row.driverStatus ==='2'">执行状态</span>
  65 + <span v-if="scope.row.driverStatus ==='3'">轮休状态</span>
  66 + <span v-if="scope.row.driverStatus ==='4'">请假状态</span>
  67 + </template>
  68 + </el-table-column>
  69 + <el-table-column label="驾驶证" prop="driverLicenseNumber" align="center"
  70 + width="200"></el-table-column>
  71 + <el-table-column label="工号" prop="jobNumber" align="center" width="150"></el-table-column>
  72 + <el-table-column label="公司" prop="driverCompany" align="center" width="160"></el-table-column>
  73 + <el-table-column label="操作" width="220px" align="center" fixed="right">
  74 + <template slot-scope="scope">
  75 + <!--查看按钮-->
  76 + <el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false">
  77 + <el-button type="primary" icon="el-icon-edit" size="mini"
  78 + @click="showEditDialogVisible(scope.$index,scope.row)">编辑
  79 + </el-button>
  80 + </el-tooltip>
  81 + <!--取消调度按钮-->
  82 + <el-tooltip effect="dark" content="删除" placement="top-start" :enterable="false">
  83 + <el-button type="danger" icon="el-icon-delete" size="mini"
  84 + :loading="delLoading"
  85 + :disabled="scope.row.driverStatus==='2'"
  86 + @click="removeDriverInfo(scope.$index,scope.row)">删除
  87 + </el-button>
  88 + </el-tooltip>
  89 + </template>
  90 + </el-table-column>
  91 + </el-table>
  92 + <!--分页区域-->
  93 + <div style="margin-top: 10px">
  94 + <el-row :gutter="24">
  95 + <el-col :span="5">
  96 + <el-button type="danger" icon="el-icon-delete" @click="batchRemove"
  97 + :disabled="this.sels.length===0">批量删除
  98 + </el-button>
  99 + </el-col>
  100 + <el-col :span="10" style="margin-top: 5px">
  101 + <el-pagination
  102 + @size-change="handleSizeChange"
  103 + @current-change="handleCurrentChange"
  104 + :current-page="queryInfo.pageNum"
  105 + :page-sizes="[10,20,30,50]"
  106 + :page-size="queryInfo.pageSize"
  107 + layout="total, sizes, prev, pager, next, jumper"
  108 + :total="total">
  109 + </el-pagination>
  110 + </el-col>
  111 + </el-row>
  112 + </div>
  113 + </div>
  114 + </el-card>
  115 + <!-- 增加驾驶员信息对话框 -->
  116 + <div>
  117 + <el-dialog
  118 + style="margin-top: -50px"
  119 + title="增加驾驶员信息"
  120 + text-align="center"
  121 + :visible.sync="addDriverInfoFormVisible"
  122 + width="50%" @close="addDriverInfoDialogClosed">
  123 + <el-form :model="addDriverInfoForm" label-width="100px" status-icon
  124 + :rules="addDriverInfoFormRules" ref="addDriverInfoFormRef"
  125 + size="medium" align="center" :inline="true"
  126 + style="background-color: #F5F7FA">
  127 + <div style="margin-top: -15px">
  128 + <br>
  129 + <el-form-item label="司机姓名：" prop="driverName">
  130 + <el-input v-model="addDriverInfoForm.driverName" style="width: 300px;" clearable
  131 + placeholder="请输入驾驶员姓名"></el-input>
  132 + </el-form-item>
  133 + <el-form-item label="联系方式：" prop="driverMobile">
  134 + <el-input v-model="addDriverInfoForm.driverMobile" style="width: 300px;" clearable
  135 + placeholder="请输入驾驶员联系方式"></el-input>
  136 + </el-form-item>
  137 +
  138 +
  139 + <el-form-item label="司机状态：" prop="driverStatus">
  140 + <el-select v-model="addDriverInfoForm.driverStatus" style="width: 300px" clearable
  141 + placeholder="请选择驾驶员类型">
  142 + <el-option
  143 + v-for="item in driverStatusList"
  144 + :key="item.value"
  145 + :label="item.label"
  146 + :value="item.value">
  147 + </el-option>
  148 + </el-select>
  149 + </el-form-item>
  150 + <el-form-item label="驾驶证号：" prop="driverLicenseNumber">
  151 + <el-input v-model="addDriverInfoForm.driverLicenseNumber" style="width: 300px;"
  152 + clearable
  153 + placeholder="请输入驾驶证号码"></el-input>
  154 + </el-form-item>
  155 + <el-form-item label="工作职位：" prop="driverPosition">
  156 + <el-select v-model="addDriverInfoForm.driverPosition" style="width: 300px" clearable
  157 + placeholder="请选择驾驶员类型">
  158 + <el-option
  159 + v-for="item in driverPositionList"
  160 + :key="item.value"
  161 + :label="item.label"
  162 + :value="item.value">
  163 + </el-option>
  164 + </el-select>
  165 + </el-form-item>
  166 +
  167 + <el-form-item label="员工号码：" prop="jobNumber">
  168 + <el-input v-model="addDriverInfoForm.jobNumber" style="width: 300px;" clearable
  169 + placeholder="请输入员工号码"></el-input>
  170 + </el-form-item>
  171 + <el-form-item label="司机公司：" prop="driverCompany">
  172 + <el-input v-model="addDriverInfoForm.driverCompany" style="width: 300px;" clearable
  173 + placeholder="请输入驾驶员所属公司"></el-input>
  174 + </el-form-item>
  175 + <br>
  176 + </div>
  177 + </el-form>
  178 + <!--底部按钮区域-->
  179 + <span slot="footer" class="dialog-footer">
  180 + <el-button @click="addDriverInfoFormVisible = false">取 消</el-button>
  181 + <el-button type="primary" :loading="addLoading" @click="addDriverInfo">增 加</el-button>
  182 + </span>
  183 + </el-dialog>
  184 + </div>
  185 + <!-- 编辑驾驶员信息，对话框 -->
  186 + <div>
  187 + <el-dialog
  188 + style="margin-top: -70px"
  189 + title="编辑驾驶员信息"
  190 + :visible.sync="editDialogVisible"
  191 + text-align="center"
  192 + width="50%" @close="editDriverInfoDialogClosed">
  193 + <el-form :model="editDriverInfoForm" label-width="100px" status-icon
  194 + :rules="editDriverInfoFormRules" ref="editDriverInfoFormRef"
  195 + :inline="true" size="medium" align="center"
  196 + style="background-color: #F5F7FA">
  197 + <div style="margin-top: -15px">
  198 + <br>
  199 + <el-form-item label="司机姓名：" prop="driverName">
  200 + <el-input v-model="editDriverInfoForm.driverName" style="width: 300px;" clearable
  201 + placeholder="请输入驾驶员姓名"></el-input>
  202 + </el-form-item>
  203 + <el-form-item label="联系方式：" prop="driverMobile">
  204 + <el-input v-model="editDriverInfoForm.driverMobile" style="width: 300px;" clearable
  205 + placeholder="请输入驾驶员联系方式"></el-input>
  206 + </el-form-item>
  207 +
  208 +
  209 + <el-form-item label="司机状态：" prop="driverStatus">
  210 + <el-select v-model="editDriverInfoForm.driverStatus" style="width: 300px" clearable
  211 + placeholder="请选择驾驶员类型">
  212 + <el-option
  213 + v-for="item in driverStatusList"
  214 + :key="item.value"
  215 + :label="item.label"
  216 + :value="item.value">
  217 + </el-option>
  218 + </el-select>
  219 + </el-form-item>
  220 + <el-form-item label="驾驶证号：" prop="driverLicenseNumber">
  221 + <el-input v-model="editDriverInfoForm.driverLicenseNumber" style="width: 300px;"
  222 + clearable
  223 + placeholder="请输入驾驶证号码"></el-input>
  224 + </el-form-item>
  225 + <el-form-item label="工作职位：" prop="driverPosition">
  226 + <el-select v-model="editDriverInfoForm.driverPosition" style="width: 300px" clearable
  227 + placeholder="请选择驾驶员类型">
  228 + <el-option
  229 + v-for="item in driverPositionList"
  230 + :key="item.value"
  231 + :label="item.label"
  232 + :value="item.value">
  233 + </el-option>
  234 + </el-select>
  235 + </el-form-item>
  236 +
  237 + <el-form-item label="员工号码：" prop="jobNumber">
  238 + <el-input v-model="editDriverInfoForm.jobNumber" style="width: 300px;" clearable
  239 + placeholder="请输入员工号码"></el-input>
  240 + </el-form-item>
  241 + <el-form-item label="司机公司：" prop="driverCompany">
  242 + <el-input v-model="editDriverInfoForm.driverCompany" style="width: 300px;" clearable
  243 + placeholder="请输入驾驶员所属公司"></el-input>
  244 + </el-form-item>
  245 + <br>
  246 + </div>
  247 + </el-form>
  248 + <!--底部按钮区域-->
  249 + <span slot="footer" class="dialog-footer">
  250 + <el-button @click="editDialogVisible = false">取 消</el-button>
  251 + <el-button type="primary" :loading="editLoading" @click="editDriverInfo">编 辑</el-button>
  252 + </span>
  253 + </el-dialog>
  254 + </div>
  255 + </el-main>
  256 + </el-container>
  257 +</template>
  258 +
  259 +<script>
  260 + // import {
  261 + // selectDriverInfoList,
  262 + // insertDriverInfo,
  263 + // updateDriverInfo,
  264 + // batchRemoveDriverInfo,
  265 + // deleteDriverInfo,
  266 + // } from "../../api/dispatch_api";
  267 +
  268 + export default {
  269 + name: "dispatch_api",
  270 + created() {
  271 + //刷新驾驶员信息列表
  272 + this.getDriverInfoList();
  273 + },
  274 + data() {
  275 + //验证手机号的自定义规则
  276 + var driverMobileValid = (rule, value, callback) => {
  277 + //验证手机号的正则表达式
  278 + const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
  279 + if (regMobile.test(value)) {
  280 + //合法的手机号
  281 + return callback();
  282 + }
  283 + callback(new Error('请输入合法的手机号'));
  284 + };
  285 + return {
  286 + /**
  287 + * 查询信息列表
  288 + */
  289 + queryInfo: {
  290 + //驾驶员姓名
  291 + driverName: '',
  292 + //驾驶员联系方式
  293 + driverMobile: '',
  294 + //驾驶员所属公司
  295 + driverCompany: '',
  296 + //驾驶员状态
  297 + driverStatus: '',
  298 + //当前的页数
  299 + pageNum: 1,
  300 + //当前每页显示多少条数据
  301 + pageSize: 10
  302 + },
  303 + /**
  304 + * 设置，总条数
  305 + */
  306 + total: 0,
  307 + /**
  308 + * 批量删除的选中列表
  309 + */
  310 + sels: [],
  311 + /**
  312 + * 驾驶员信息列表
  313 + */
  314 + driverInfoList: [],
  315 + /**
  316 + * 新增驾驶员信息表单
  317 + */
  318 + addDriverInfoForm: {
  319 + driverName: '',
  320 + driverLicenseNumber: '',
  321 + driverMobile: '',
  322 + jobNumber: '',
  323 + driverPosition: '1',
  324 + driverCompany: '',
  325 + driverStatus: '1',
  326 + },
  327 + /**
  328 + * 编辑驾驶员信息表单
  329 + */
  330 + editDriverInfoForm: {},
  331 + /**
  332 + * 控制,添加驾驶员信息对话框的显示与隐藏
  333 + */
  334 + addDriverInfoFormVisible: false,
  335 + /**
  336 + * 控制,编辑驾驶员信息对话框的显示与隐藏
  337 + */
  338 + editDialogVisible: false,
  339 + /* 列表加载 */
  340 + listLoading: false,
  341 + /* 添加加载 */
  342 + addLoading: false,
  343 + /* 编辑加载 */
  344 + editLoading: false,
  345 + /* 删除加载 */
  346 + delLoading: false,
  347 + /**
  348 + * 司机职位，列表
  349 + */
  350 + driverPositionList: [
  351 + {
  352 + value: '1',
  353 + label: '队长'
  354 + },
  355 + {
  356 + value: '2',
  357 + label: '班长'
  358 + },
  359 + {
  360 + value: '3',
  361 + label: '副班长'
  362 + },
  363 + {
  364 + value: '4',
  365 + label: '员工'
  366 + },
  367 + ],
  368 + /**
  369 + * 驾驶员状态，列表
  370 + */
  371 + driverStatusList: [
  372 + {
  373 + value: '1',
  374 + label: '空闲状态'
  375 + },
  376 + {
  377 + value: '2',
  378 + label: '执行状态'
  379 + },
  380 + {
  381 + value: '3',
  382 + label: '轮休状态'
  383 + },
  384 + {
  385 + value: '4',
  386 + label: '请假状态'
  387 + },
  388 + ],
  389 + /**
  390 + * 添加驾驶员信息，表单的验证规则对象
  391 + */
  392 + addDriverInfoFormRules: {
  393 + driverName: [
  394 + {required: true, message: '请选择驾驶员姓名', trigger: ['blur', 'change']},
  395 + ],
  396 + driverLicenseNumber: [
  397 + {required: true, message: '请输入驾驶证号码', trigger: ['blur', 'change']},
  398 + ],
  399 + driverMobile: [
  400 + {required: true, message: '请输入联系方式', trigger: ['blur', 'change']},
  401 + {validator: driverMobileValid, trigger: 'blur'}
  402 + ],
  403 + jobNumber: [
  404 + {required: true, message: '请输入员工号码', trigger: ['blur', 'change']},
  405 + ],
  406 + driverPosition: [
  407 + {required: true, message: '请选择工作职位', trigger: ['blur', 'change']},
  408 + ],
  409 + driverCompany: [
  410 + {required: true, message: '请输入驾驶员所属公司', trigger: ['blur', 'change']},
  411 + ],
  412 + driverStatus: [
  413 + {required: true, message: '请选择驾驶员状态', trigger: ['blur', 'change']},
  414 + ],
  415 + },
  416 + /**
  417 + * 编辑驾驶员信息，表单的验证规则对象
  418 + */
  419 + editDriverInfoFormRules: {
  420 + driverName: [
  421 + {required: true, message: '请选择驾驶员姓名', trigger: ['blur', 'change']},
  422 + ],
  423 + driverLicenseNumber: [
  424 + {required: true, message: '请输入驾驶证号码', trigger: ['blur', 'change']},
  425 + ],
  426 + driverMobile: [
  427 + {required: true, message: '请输入联系方式', trigger: ['blur', 'change']},
  428 + {validator: driverMobileValid, trigger: 'blur'}
  429 + ],
  430 + jobNumber: [
  431 + {required: true, message: '请输入员工号码', trigger: ['blur', 'change']},
  432 + ],
  433 + driverPosition: [
  434 + {required: true, message: '请选择工作职位', trigger: ['blur', 'change']},
  435 + ],
  436 + driverCompany: [
  437 + {required: true, message: '请输入驾驶员所属公司', trigger: ['blur', 'change']},
  438 + ],
  439 + driverStatus: [
  440 + {required: true, message: '请选择驾驶员状态', trigger: ['blur', 'change']},
  441 + ],
  442 + }
  443 + }
  444 + },
  445 + methods: {
  446 + /**
  447 + * 获取驾驶员信息列表
  448 + */
  449 + getDriverInfoList() {
  450 + //开启加载
  451 + this.listLoading = true;
  452 + selectDriverInfoList(this.queryInfo).then((response) => {
  453 + let res = response.data;
  454 + if (res.code !== '200'){
  455 + //关闭加载
  456 + this.listLoading = false;
  457 + return this.$message.error('获取驾驶员信息列表，失败');
  458 + }
  459 + // 获取驾驶员信息列表数据
  460 + this.driverInfoList = res.data.list;
  461 + // 获取列表的总记录数
  462 + this.total = res.data.total;
  463 + //关闭加载
  464 + this.listLoading = false;
  465 + this.$message.success('获取驾驶员信息列表，成功');
  466 + }).catch(error => {
  467 + this.listLoading = false;
  468 + this.$message.error(error.toString());
  469 + });
  470 +
  471 + },
  472 + /**
  473 + * 增加驾驶员信息
  474 + */
  475 + addDriverInfo() {
  476 + /*进行表单的预验证*/
  477 + this.$refs.addDriverInfoFormRef.validate(valid => {
  478 + // 未通过，表单预校验
  479 + if (!valid) return;
  480 + // 通过，表单预检验,开启加载
  481 + this.addLoading = true;
  482 + insertDriverInfo(this.addDriverInfoForm).then((response) => {
  483 + let res = response.data;
  484 + if (res.code !== '200'){
  485 + //关闭加载
  486 + this.addLoading = false;
  487 + return this.$message.error('添加驾驶员信息，失败');
  488 + }
  489 + //关闭加载
  490 + this.addLoading = false;
  491 + this.$message.success('添加驾驶员信息，成功');
  492 + //关闭对话框
  493 + this.addDriverInfoFormVisible = false;
  494 + //刷新驾驶员信息列表
  495 + this.getDriverInfoList();
  496 + }).catch(error => {
  497 + this.addLoading = false;
  498 + this.$message.error(error.toString());
  499 + });
  500 + })
  501 + },
  502 + /**
  503 + * 删除驾驶员信息
  504 + */
  505 + removeDriverInfo(index, row) {
  506 + //弹框询问是否删除驾驶员信息
  507 + this.$confirm('此操作永久删除该驾驶员信息, 是否继续?', '警告', {
  508 + confirmButtonText: '确定删除',
  509 + cancelButtonText: '取消',
  510 + type: 'warning'
  511 + }
  512 + ).then(() => {
  513 + //开启加载
  514 + this.delLoading = true;
  515 + deleteDriverInfo(row).then((response) => {
  516 + let res = response.data;
  517 + if (res.code !== '200') {
  518 + //关闭加载
  519 + this.delLoading = false;
  520 + return this.$message.error('删除驾驶员信息，失败');
  521 + }
  522 + //关闭加载
  523 + this.delLoading = false;
  524 + this.$message.success('删除驾驶员信息，成功！');
  525 + //刷新驾驶员信息列表
  526 + this.getDriverInfoList();
  527 + }).catch(error => {
  528 + this.delLoading = false;
  529 + this.$message.error(error.toString());
  530 + });
  531 + }).catch(() => {
  532 + });
  533 + },
  534 + /**
  535 + * 批量删除，之前的选中
  536 + */
  537 + selsChange: function (sels) {
  538 + this.sels = sels;
  539 + },
  540 + /**
  541 + * 驾驶员状态为执行状态的时候，无法被选中
  542 + */
  543 + isSelectable(row, index) {
  544 + if (row.driverStatus === '2') {
  545 + return false;
  546 + } else {
  547 + return true;
  548 + }
  549 + },
  550 + /**
  551 + * 批量删除功能
  552 + */
  553 + batchRemove() {
  554 + var ids = this.sels.map(item => item.id).toString();
  555 + console.log(ids);
  556 + //弹框询问是否批量删除选中的车辆调度记录
  557 + this.$confirm('此操作将永久删除，选中的驾驶员信息, 是否继续?', '警告', {
  558 + confirmButtonText: '确定删除',
  559 + cancelButtonText: '取消',
  560 + type: 'warning'
  561 + }
  562 + ).then(() => {
  563 + //开启加载
  564 + this.listLoading = true;
  565 + let params = {ids: ids};
  566 + batchRemoveDriverInfo(params).then(response => {
  567 + let res = response.data;
  568 + if (res.code !== '200') {
  569 + this.listLoading = false;
  570 + return this.$message.error('批量删除驾驶员信息，失败');
  571 + }
  572 + this.$message.success('批量删除驶员信息，成功！');
  573 + this.listLoading = false;
  574 + //刷新驾驶员信息列表
  575 + this.getDriverInfoList();
  576 + }).catch(error => {
  577 + this.delLoading = false;
  578 + this.$message.error(error.toString());
  579 + });
  580 + }).catch(() => {
  581 + });
  582 + },
  583 + /**
  584 + * 编辑驾驶员信息
  585 + */
  586 + editDriverInfo() {
  587 + /*进行表单的预验证*/
  588 + this.$refs.editDriverInfoFormRef.validate(valid => {
  589 + // 未通过，表单预校验
  590 + if (!valid) return;
  591 + // 通过，表单预检验,开启加载
  592 + this.editLoading = true;
  593 + updateDriverInfo(this.editDriverInfoForm).then((response) => {
  594 + let res = response.data;
  595 + if (res.code !== '200') {
  596 + //关闭加载
  597 + this.editLoading = false;
  598 + return this.$message.error('修改驾驶员信息，失败');
  599 + }
  600 + //关闭加载
  601 + this.editLoading = false;
  602 + this.$message.success('修改驾驶员信息，成功！');
  603 + // 关闭，编辑驾驶员信息对话框
  604 + this.editDialogVisible = false;
  605 + //刷新驾驶员信息列表
  606 + this.getDriverInfoList();
  607 + }).catch(error => {
  608 + this.editLoading = false;
  609 + this.$message.error(error.toString());
  610 + });
  611 + })
  612 + },
  613 + /**
  614 + * 添加驾驶员信息对话框，关闭时，重置对话框
  615 + */
  616 + addDriverInfoDialogClosed() {
  617 + this.$refs.addDriverInfoFormRef.resetFields();
  618 + },
  619 + /**
  620 + * 编辑驾驶员信息对话框，关闭时，重置对话框
  621 + */
  622 + editDriverInfoDialogClosed() {
  623 + this.$refs.editDriverInfoFormRef.resetFields();
  624 + },
  625 + /**
  626 + * 打开编辑驾驶员信息对话框
  627 + */
  628 + showEditDialogVisible(index, row) {
  629 + this.editDriverInfoForm = Object.assign({}, row);
  630 + this.editDialogVisible = true;
  631 + },
  632 + /**
  633 + * 监听pageSize改变的事件
  634 + */
  635 + handleSizeChange(newSize) {
  636 + this.queryInfo.pageSize = newSize;
  637 + //刷新驾驶员信息列表
  638 + this.getDriverInfoList();
  639 + },
  640 + /**
  641 + * 监听当前页码值改变的事件
  642 + */
  643 + handleCurrentChange(newPage) {
  644 + this.queryInfo.pageNum = newPage;
  645 + //刷新驾驶员信息列表
  646 + this.getDriverInfoList();
  647 + },
  648 + }
  649 + }
  650 +</script>
  651 +
  652 +<style scoped>
  653 +
  654 +</style>
  1 +<template>
  2 + <el-container>
  3 + <el-main>
  4 + <!--面包屑导航区域-->
  5 + <!-- <div>-->
  6 + <!-- <el-breadcrumb separator-class="el-icon-arrow-right">-->
  7 + <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>-->
  8 + <!-- <el-breadcrumb-item>车辆调度</el-breadcrumb-item>-->
  9 + <!-- <el-breadcrumb-item>车辆信息</el-breadcrumb-item>-->
  10 + <!-- </el-breadcrumb>-->
  11 + <!-- </div>-->
  12 + <el-card style="background-color: #F5F7FA">
  13 + <!--搜索区域-->
  14 + <div>
  15 + <el-row :gutter="24">
  16 + <el-col :span="5">
  17 + <el-input v-model="queryInfo.licensePlateNumber" clearable prefix-icon="el-icon-search"
  18 + placeholder="请输入车牌号码"></el-input>
  19 + </el-col>
  20 + <el-col :span="5">
  21 + <el-input v-model="queryInfo.vehicleCompany" clearable prefix-icon="el-icon-search"
  22 + placeholder="请输入车辆公司"></el-input>
  23 + </el-col>
  24 + <el-col :span="5">
  25 + <el-select v-model="queryInfo.vehicleStatus" clearable placeholder="请选择车辆状态">
  26 + <el-option
  27 + v-for="item in vehicleStatusList"
  28 + :key="item.value"
  29 + :label="item.label"
  30 + :value="item.value">
  31 + </el-option>
  32 + </el-select>
  33 + </el-col>
  34 + <el-col :span="5">
  35 + <el-select v-model="queryInfo.vehicleType" clearable placeholder="请选择车辆类型">
  36 + <el-option
  37 + v-for="item in vehicleTypeList"
  38 + :key="item.value"
  39 + :label="item.label"
  40 + :value="item.value">
  41 + </el-option>
  42 + </el-select>
  43 + </el-col>
  44 + </el-row>
  45 + <el-row style="margin-top: 20px;">
  46 + <el-button type="primary" @click="getVehicleInfoList">查询车辆信息</el-button>
  47 + <el-button type="success" @click="addVehicleInfoFormVisible = true">增加车辆信息</el-button>
  48 +
  49 + </el-row>
  50 + </div>
  51 + <!--车辆信息列表区域-->
  52 + <div style="margin-top: 20px;">
  53 + <el-table :data="vehicleInfoList" border stripe highlight-current-row v-loading="listLoading"
  54 + @selection-change="selsChange"
  55 + element-loading-text="拼命加载中">
  56 + <el-table-column type="selection" width="55" :selectable="isSelectable"
  57 + align="center"></el-table-column>
  58 + <el-table-column type="index" align="center"></el-table-column>
  59 + <el-table-column label="车辆类型" prop="vehicleType" align="center" width="120">
  60 + <template slot-scope="scope">
  61 + <span v-if="scope.row.vehicleType ==='1'">重型货车</span>
  62 + <span v-if="scope.row.vehicleType ==='2'">中型货车</span>
  63 + <span v-if="scope.row.vehicleType ==='3'">轻型货车</span>
  64 + <span v-if="scope.row.vehicleType ==='4'">微型货车</span>
  65 + <span v-if="scope.row.vehicleType ==='5'">拖车</span>
  66 + <span v-if="scope.row.vehicleType ==='6'">叉车</span>
  67 + </template>
  68 + </el-table-column>
  69 + <el-table-column label="车牌号码" prop="licensePlateNumber" align="center"
  70 + width="130"></el-table-column>
  71 + <el-table-column label="车辆状态" prop="vehicleStatus" align="center" width="100">
  72 + <template slot-scope="scope">
  73 + <span v-if="scope.row.vehicleStatus ==='1'">空闲状态</span>
  74 + <span v-if="scope.row.vehicleStatus ==='2'">执行状态</span>
  75 + <span v-if="scope.row.vehicleStatus ==='3'">在修状态</span>
  76 + <span v-if="scope.row.vehicleStatus ==='4'">损坏未修</span>
  77 + <span v-if="scope.row.vehicleStatus ==='5'">保养状态</span>
  78 + </template>
  79 + </el-table-column>
  80 + <el-table-column label="车辆载重/Kg" prop="vehicleLoad" align="center"
  81 + width="110"></el-table-column>
  82 + <el-table-column label="挂车与否" prop="isTrailer" align="center" width="110">
  83 + <template slot-scope="scope">
  84 + <span v-if="scope.row.isTrailer ==='1'">有挂车</span>
  85 + <span v-if="scope.row.isTrailer ==='2'">没有挂车</span>
  86 + </template>
  87 + </el-table-column>
  88 + <el-table-column label="开始空闲时间" prop="freetime" align="center" width="160"></el-table-column>
  89 +
  90 + <el-table-column label="车辆公司" prop="vehicleCompany" align="center"
  91 + width="200"></el-table-column>
  92 + <el-table-column label="行驶证号" prop="drivingLicenseNumber" align="center"
  93 + width="160"></el-table-column>
  94 + <el-table-column label="操作" width="200px" align="center" fixed="right">
  95 + <template slot-scope="scope">
  96 + <!--查看按钮-->
  97 + <el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false">
  98 + <el-button type="primary" icon="el-icon-edit" size="mini"
  99 + @click="showEditDialogVisible(scope.$index,scope.row)">编辑
  100 + </el-button>
  101 + </el-tooltip>
  102 + <!--取消调度按钮-->
  103 + <el-tooltip effect="dark" content="删除" placement="top-start" :enterable="false">
  104 + <el-button type="danger" icon="el-icon-delete" size="mini"
  105 + :loading="delLoading"
  106 + :disabled="scope.row.vehicleStatus==='2'"
  107 + @click="removeVehicleInfo(scope.$index,scope.row)">删除
  108 + </el-button>
  109 + </el-tooltip>
  110 + </template>
  111 + </el-table-column>
  112 + </el-table>
  113 + <!--分页区域-->
  114 + <div style="margin-top: 10px">
  115 + <el-row :gutter="24">
  116 + <el-col :span="5">
  117 + <el-button type="danger" icon="el-icon-delete" @click="batchRemove"
  118 + :disabled="this.sels.length===0">批量删除
  119 + </el-button>
  120 + </el-col>
  121 + <el-col :span="10" style="margin-top: 5px">
  122 + <el-pagination
  123 + @size-change="handleSizeChange"
  124 + @current-change="handleCurrentChange"
  125 + :current-page="queryInfo.pageNum"
  126 + :page-sizes="[10,20,30,50]"
  127 + :page-size="queryInfo.pageSize"
  128 + layout="total, sizes, prev, pager, next, jumper"
  129 + :total="total">
  130 + </el-pagination>
  131 + </el-col>
  132 + </el-row>
  133 + </div>
  134 + </div>
  135 + </el-card>
  136 + <!-- 增加车辆信息对话框 -->
  137 + <div>
  138 + <el-dialog
  139 + style="margin-top: -50px"
  140 + title="增加车辆信息"
  141 + :visible.sync="addVehicleInfoFormVisible"
  142 + width="50%" @close="addVehicleInfoDialogClosed">
  143 + <el-form :model="addVehicleInfoForm" label-width="100px" status-icon
  144 + :rules="addVehicleInfoFormRules" ref="addVehicleInfoFormRef"
  145 + style="margin-left:10%;margin-right:10%;background-color: #F5F7FA">
  146 + <div style="margin-left: 30px">
  147 + <br>
  148 + <el-form-item label="车牌号码：" prop="licensePlateNumber">
  149 + <el-input v-model="addVehicleInfoForm.licensePlateNumber" clearable
  150 + style="width: 300px;"
  151 + placeholder="请输入车牌号码"></el-input>
  152 + </el-form-item>
  153 + <el-form-item label="行驶证号：" prop="drivingLicenseNumber">
  154 + <el-input v-model="addVehicleInfoForm.drivingLicenseNumber" clearable
  155 + style="width: 300px;"
  156 + placeholder="请输入车辆行驶证号"></el-input>
  157 + </el-form-item>
  158 + <el-form-item label="车辆类型：" prop="vehicleType">
  159 + <el-select v-model="addVehicleInfoForm.vehicleType" style="width: 300px" clearable
  160 + placeholder="请选择车辆类型">
  161 + <el-option
  162 + v-for="item in vehicleTypeList"
  163 + :key="item.value"
  164 + :label="item.label"
  165 + :value="item.value">
  166 + </el-option>
  167 + </el-select>
  168 + </el-form-item>
  169 + <el-form-item label="车辆载重：" prop="vehicleLoad">
  170 + <el-input-number style="width: 200px" v-model="addVehicleInfoForm.vehicleLoad"
  171 + :min="10" :max="10000" controls-position="right">
  172 + </el-input-number>
  173 + <span style="margin-left:5px;font-size: 18px">Kg</span>
  174 + </el-form-item>
  175 + <el-form-item label="有无挂车：" prop="vehicleType">
  176 + <el-select v-model="addVehicleInfoForm.isTrailer" style="width: 300px" clearable
  177 + placeholder="请选择有无挂车">
  178 + <el-option
  179 + v-for="item in isTrailerList"
  180 + :key="item.value"
  181 + :label="item.label"
  182 + :value="item.value">
  183 + </el-option>
  184 + </el-select>
  185 + </el-form-item>
  186 + <el-form-item label="车辆公司：" prop="vehicleCompany">
  187 + <el-input v-model="addVehicleInfoForm.vehicleCompany" clearable style="width: 300px;"
  188 + placeholder="请输入车辆公司"></el-input>
  189 + </el-form-item>
  190 + <br>
  191 + </div>
  192 + </el-form>
  193 + <!--底部按钮区域-->
  194 + <span slot="footer" class="dialog-footer">
  195 + <el-button @click="addVehicleInfoFormVisible = false">取 消</el-button>
  196 + <el-button type="primary" :loading="addLoading" @click="addVehicleInfo">增 加</el-button>
  197 + </span>
  198 + </el-dialog>
  199 + </div>
  200 + <!-- 编辑车辆信息，对话框 -->
  201 + <div>
  202 + <el-dialog
  203 + title="编辑车辆信息"
  204 + text-align="center"
  205 + :visible.sync="editDialogVisible"
  206 + width="60%" @close="editVehicleInfoDialogClosed">
  207 + <el-form :model="editVehicleInfoForm" label-width="100px" status-icon
  208 + :rules="editVehicleInfoFormRules" ref="editVehicleInfoFormRef"
  209 + :inline="true" align="center"
  210 + style="background-color: #F5F7FA">
  211 + <div>
  212 + <br>
  213 + <el-form-item label="车牌号码：" prop="licensePlateNumber">
  214 + <el-input v-model="editVehicleInfoForm.licensePlateNumber" clearable readonly
  215 + style="width:250px"
  216 + placeholder="请输入车牌号码"></el-input>
  217 + </el-form-item>
  218 + <el-form-item label="行驶证号：" prop="drivingLicenseNumber">
  219 + <el-input v-model="editVehicleInfoForm.drivingLicenseNumber" clearable
  220 + style="width:250px"
  221 + placeholder="请输入车辆行驶证号"></el-input>
  222 + </el-form-item>
  223 + <el-form-item label="车辆类型：" prop="vehicleType">
  224 + <el-select v-model="editVehicleInfoForm.vehicleType" clearable
  225 + style="width:250px"
  226 + placeholder="请选择车辆类型">
  227 + <el-option
  228 + v-for="item in vehicleTypeList"
  229 + :key="item.value"
  230 + :label="item.label"
  231 + :value="item.value">
  232 + </el-option>
  233 + </el-select>
  234 + </el-form-item>
  235 + <el-form-item label="车辆载重：" prop="vehicleLoad">
  236 + <el-input-number v-model="editVehicleInfoForm.vehicleLoad"
  237 + clearable style="width:220px"
  238 + :min="10" :max="10000" controls-position="right">
  239 + </el-input-number>
  240 + <span style="margin-left:5px;font-size: 18px">Kg</span>
  241 + </el-form-item>
  242 + <el-form-item label="车辆状态：" prop="vehicleStatus">
  243 + <el-select v-model="editVehicleInfoForm.vehicleStatus" clearable
  244 + style="width:250px"
  245 + clearable placeholder="请选择车辆状态">
  246 + <el-option
  247 + v-for="item in vehicleStatusList"
  248 + :key="item.value"
  249 + :label="item.label"
  250 + :value="item.value">
  251 + </el-option>
  252 + </el-select>
  253 + </el-form-item>
  254 + <el-form-item label="有无挂车：" prop="vehicleType">
  255 + <el-select v-model="editVehicleInfoForm.isTrailer" clearable
  256 + style="width:250px" clearable
  257 + placeholder="请选择有无挂车">
  258 + <el-option
  259 + v-for="item in isTrailerList"
  260 + :key="item.value"
  261 + :label="item.label"
  262 + :value="item.value">
  263 + </el-option>
  264 + </el-select>
  265 + </el-form-item>
  266 + <el-form-item label="车辆公司：" prop="vehicleCompany">
  267 + <el-input v-model="editVehicleInfoForm.vehicleCompany" clearable
  268 + style="width:250px"
  269 + placeholder="请输入车辆公司"></el-input>
  270 + </el-form-item>
  271 + <el-form-item label="空闲时间：" prop="freetime">
  272 + <el-date-picker v-model="editVehicleInfoForm.freetime" type="datetime"
  273 + style="width:250px"
  274 + placeholder="选择调度时间"></el-date-picker>
  275 + </el-form-item>
  276 + <br>
  277 + </div>
  278 + </el-form>
  279 + <!--底部按钮区域-->
  280 + <span slot="footer" class="dialog-footer">
  281 + <el-button @click="editDialogVisible = false">取 消</el-button>
  282 + <el-button type="primary" :loading="editLoading" @click="editVehicleInfo">编 辑</el-button>
  283 + </span>
  284 + </el-dialog>
  285 + </div>
  286 + </el-main>
  287 + </el-container>
  288 +</template>
  289 +
  290 +<script>
  291 + // import {
  292 + // selectVehicleInfoList,
  293 + // insertVehicleInfo,
  294 + // updateVehicleInfo,
  295 + // batchRemoveVehicleInfo,
  296 + // deleteVehicleInfo, deleteDispatchNote
  297 + // } from "../../api/dispatch_api";
  298 +
  299 + export default {
  300 + name: "dispatch_api",
  301 + created() {
  302 + //获取车辆信息列表
  303 + this.getVehicleInfoList();
  304 + },
  305 + data() {
  306 + return {
  307 + /**
  308 + * 查询信息列表
  309 + */
  310 + queryInfo: {
  311 + //车牌号
  312 + licensePlateNumber: '',
  313 + //车辆所属公司
  314 + vehicleCompany: '',
  315 + //车辆状态
  316 + vehicleStatus: '',
  317 + //车辆类型
  318 + vehicleType: '',
  319 + //当前的页数
  320 + pageNum: 1,
  321 + //当前每页显示多少条数据
  322 + pageSize: 10
  323 + },
  324 + /**
  325 + * 设置，总条数
  326 + */
  327 + total: 0,
  328 + /**
  329 + * 批量删除,选中列表
  330 + */
  331 + sels: [],
  332 + /**
  333 + * 车辆信息列表
  334 + */
  335 + vehicleInfoList: [],
  336 + /**
  337 + * 新增车辆信息表单
  338 + */
  339 + addVehicleInfoForm: {
  340 + vehicleType: '2',
  341 + licensePlateNumber: '',
  342 + vehicleLoad: '',
  343 + isTrailer: '2',
  344 + vehicleCompany: '',
  345 + drivingLicenseNumber: '',
  346 + },
  347 + /**
  348 + * 编辑车辆信息表单
  349 + */
  350 + editVehicleInfoForm: {},
  351 + /**
  352 + * 控制,添加车辆信息对话框的显示与隐藏
  353 + */
  354 + addVehicleInfoFormVisible: false,
  355 + /**
  356 + * 控制,编辑车辆信息对话框的显示与隐藏
  357 + */
  358 + editDialogVisible: false,
  359 + /* 列表加载 */
  360 + listLoading: false,
  361 + /* 添加加载 */
  362 + addLoading: false,
  363 + /* 编辑加载 */
  364 + editLoading: false,
  365 + /* 删除加载 */
  366 + delLoading: false,
  367 + /**
  368 + * 车辆类型，选项列表
  369 + */
  370 + vehicleTypeList: [
  371 + {
  372 + value: '1',
  373 + label: '重型货车'
  374 + },
  375 + {
  376 + value: '2',
  377 + label: '中型货车'
  378 + },
  379 + {
  380 + value: '3',
  381 + label: '经济货车'
  382 + },
  383 + {
  384 + value: '4',
  385 + label: '微型货车'
  386 + },
  387 + {
  388 + value: '5',
  389 + label: '拖车'
  390 + },
  391 + {
  392 + value: '6',
  393 + label: '叉车'
  394 + }
  395 + ],
  396 + /**
  397 + * 挂车与否，列表
  398 + */
  399 + isTrailerList: [
  400 + {
  401 + value: '1',
  402 + label: '有挂车'
  403 + },
  404 + {
  405 + value: '2',
  406 + label: '没有挂车'
  407 + },
  408 + ],
  409 + /**
  410 + * 车辆状态列表
  411 + */
  412 + vehicleStatusList: [
  413 + {
  414 + value: '1',
  415 + label: '空闲状态'
  416 + },
  417 + {
  418 + value: '2',
  419 + label: '执行状态'
  420 + },
  421 + {
  422 + value: '3',
  423 + label: '在修状态'
  424 + },
  425 + {
  426 + value: '4',
  427 + label: '损坏未修状态'
  428 + },
  429 + {
  430 + value: '5',
  431 + label: '保养状态'
  432 + },
  433 + ],
  434 + /**
  435 + * 添加车辆信息表单的验证规则对象
  436 + */
  437 + addVehicleInfoFormRules: {
  438 + vehicleType: [
  439 + {required: true, message: '请选择车辆类型', trigger: ['blur', 'change']},
  440 + ],
  441 + licensePlateNumber: [
  442 + {required: true, message: '请输入车牌号', trigger: ['blur', 'change']},
  443 + ],
  444 + vehicleLoad: [
  445 + {required: true, message: '请输入车辆载重', trigger: ['blur', 'change']},
  446 + ],
  447 + isTrailer: [
  448 + {required: true, message: '请选择有无挂车', trigger: ['blur', 'change']},
  449 + ],
  450 + vehicleCompany: [
  451 + {required: true, message: '请输入车辆公司名称', trigger: ['blur', 'change']},
  452 + ],
  453 + drivingLicenseNumber: [
  454 + {required: true, message: '请输入车辆行驶证号', trigger: ['blur', 'change']},
  455 + ],
  456 + },
  457 + /**
  458 + * 编辑车辆信息表单的验证规则对象
  459 + */
  460 + editVehicleInfoFormRules: {
  461 + vehicleStatus: [
  462 + {required: true, message: '请选择车辆状态', trigger: ['blur', 'change']},
  463 + ],
  464 + freetime: [
  465 + {required: true, message: '请选择开始空闲时间', trigger: ['blur', 'change']},
  466 + ],
  467 + vehicleType: [
  468 + {required: true, message: '请选择车辆类型', trigger: ['blur', 'change']},
  469 + ],
  470 + licensePlateNumber: [
  471 + {required: true, message: '请输入车牌号', trigger: ['blur', 'change']},
  472 + ],
  473 + vehicleLoad: [
  474 + {required: true, message: '请输入车辆载重', trigger: ['blur', 'change']},
  475 + ],
  476 + isTrailer: [
  477 + {required: true, message: '请选择有无挂车', trigger: ['blur', 'change']},
  478 + ],
  479 + vehicleCompany: [
  480 + {required: true, message: '请输入车辆公司名称', trigger: ['blur', 'change']},
  481 + ],
  482 + drivingLicenseNumber: [
  483 + {required: true, message: '请输入车辆行驶证号', trigger: ['blur', 'change']},
  484 + ],
  485 + }
  486 + }
  487 + },
  488 + methods: {
  489 + /**
  490 + * 管理员端，获取车辆信息列表
  491 + */
  492 + getVehicleInfoList() {
  493 + //开启加载
  494 + this.listLoading = true;
  495 + selectVehicleInfoList(this.queryInfo).then((response) => {
  496 + let res = response.data;
  497 + if (res.code !== '200') {
  498 + //关闭加载
  499 + this.listLoading = false;
  500 + return this.$message.error('获取车辆信息列表失败');
  501 + }
  502 + // 获取车辆信息列表数据
  503 + this.vehicleInfoList = res.data.list;
  504 + // 获取列表的总记录数
  505 + this.total = res.data.total;
  506 + //关闭加载
  507 + this.listLoading = false;
  508 + this.$message.success('获取车辆信息列表，成功');
  509 + }).catch(error => {
  510 + this.listLoading = false;
  511 + this.$message.error(error.toString());
  512 + });
  513 + },
  514 + /**
  515 + * 管理员端，增加车辆信息
  516 + */
  517 + addVehicleInfo() {
  518 + /*进行表单的预验证*/
  519 + this.$refs.addVehicleInfoFormRef.validate(valid => {
  520 + // 未通过，表单预校验
  521 + if (!valid) return;
  522 + // 通过，表单预检验，发起添加车辆信息的网络请求,开启加载
  523 + this.addLoading = true;
  524 + insertVehicleInfo(this.addVehicleInfoForm).then((response) => {
  525 + let res = response.data;
  526 + //添加调度记录信息,失败
  527 + if (res.code !== '200') {
  528 + //关闭加载
  529 + this.addLoading = false;
  530 + if(res.code === '406'){
  531 + return this.$message.error('该车牌号已存在,请重新填写');
  532 + }
  533 + return this.$message.error('添加车辆信息，失败');
  534 + }
  535 + //关闭加载
  536 + this.addLoading = false;
  537 + this.$message.success('添加调度记录信息，成功');
  538 + //隐藏对话框
  539 + this.addVehicleInfoFormVisible = false;
  540 + //刷新车辆信息列表
  541 + this.getVehicleInfoList();
  542 + }).catch(error => {
  543 + this.addLoading = false;
  544 + this.$message.error(error.toString());
  545 + });
  546 +
  547 + })
  548 + },
  549 + /**
  550 + * 管理员端，删除车辆信息
  551 + */
  552 + removeVehicleInfo(index, row) {
  553 + //弹框询问是否删除车辆信息
  554 + this.$confirm('此操作永久删除该车辆信息, 是否继续?', '警告', {
  555 + confirmButtonText: '确定删除',
  556 + cancelButtonText: '取消',
  557 + type: 'warning'
  558 + }
  559 + ).then(() => {
  560 + //开启加载
  561 + this.delLoading = true;
  562 + deleteVehicleInfo(row).then((response) => {
  563 + let res = response.data;
  564 + if (res.code !== '200') {
  565 + //关闭加载
  566 + this.delLoading = false;
  567 + return this.$message.error('删除车辆信息，失败');
  568 + }
  569 + //关闭加载
  570 + this.delLoading = false;
  571 + this.$message.success('删除车辆信息，成功！');
  572 + //刷新车辆信息列表
  573 + this.getVehicleInfoList();
  574 + }).catch(error => {
  575 + this.delLoading = false;
  576 + this.$message.error(error.toString());
  577 + });
  578 + }).catch(() => {
  579 + });
  580 + },
  581 +
  582 + /**
  583 + * 批量删除，之前的选中
  584 + */
  585 + selsChange: function (sels) {
  586 + this.sels = sels;
  587 + },
  588 + /**
  589 + * 车辆状态为执行状态的时候，无法被选中
  590 + */
  591 + isSelectable(row, index) {
  592 + if (row.vehicleStatus === '2') {
  593 + return false;
  594 + } else {
  595 + return true;
  596 + }
  597 + },
  598 + /**
  599 + * 批量删除功能
  600 + */
  601 + batchRemove() {
  602 + var ids = this.sels.map(item => item.id).toString();
  603 + console.log(ids);
  604 + //弹框询问是否批量删除选中的车辆调度记录
  605 + this.$confirm('此操作永久删除选中的车辆信息, 是否继续?', '警告', {
  606 + confirmButtonText: '确定删除',
  607 + cancelButtonText: '取消',
  608 + type: 'warning'
  609 + }
  610 + ).then(() => {
  611 + //开启加载
  612 + this.listLoading = true;
  613 + let params = {ids: ids};
  614 + batchRemoveVehicleInfo(params).then(response => {
  615 + let res = response.data;
  616 + if (res.code !== '200') {
  617 + this.listLoading = false;
  618 + return this.$message.error('批量删除车辆信息，失败');
  619 + }
  620 + this.$message.success('批量删除车辆信息，成功！');
  621 + this.listLoading = false;
  622 + //刷新车辆信息列表
  623 + this.getVehicleInfoList();
  624 + }).catch(error => {
  625 + this.delLoading = false;
  626 + this.$message.error(error.toString());
  627 + });
  628 + }).catch(() => {
  629 + });
  630 + },
  631 + /**
  632 + * 管理员端，编辑车辆信息
  633 + */
  634 + editVehicleInfo() {
  635 + /*进行表单的预验证*/
  636 + this.$refs.editVehicleInfoFormRef.validate(valid => {
  637 + // 未通过，表单预校验
  638 + if (!valid) return;
  639 + // 通过，表单预校验,开启加载
  640 + this.editLoading = true;
  641 + updateVehicleInfo(this.editVehicleInfoForm).then((response) => {
  642 + let res = response.data;
  643 + if (res.code !== '200') {
  644 + //关闭加载
  645 + this.editLoading = false;
  646 + return this.$message.error('修改车辆信息，失败');
  647 + }
  648 + //关闭加载
  649 + this.editLoading = false;
  650 + this.$message.success('修改车辆信息，成功！');
  651 + //关闭编辑车辆信息对话框
  652 + this.editDialogVisible = false;
  653 + //刷新车辆信息列表
  654 + this.getVehicleInfoList();
  655 + }).catch(error => {
  656 + this.editLoading = false;
  657 + this.$message.error(error.toString());
  658 + });
  659 + })
  660 + },
  661 +
  662 + /**
  663 + * 添加车辆信息对话框，关闭时，重置对话框
  664 + */
  665 + addVehicleInfoDialogClosed() {
  666 + this.$refs.addVehicleInfoFormRef.resetFields();
  667 + },
  668 + /**
  669 + * 编辑车辆信息对话框，关闭时，重置对话框
  670 + */
  671 + editVehicleInfoDialogClosed() {
  672 + this.$refs.editVehicleInfoFormRef.resetFields();
  673 + },
  674 + /**
  675 + * 打开编辑车辆信息对话框
  676 + */
  677 + showEditDialogVisible(index, row) {
  678 + this.editVehicleInfoForm = Object.assign({}, row);
  679 + this.editDialogVisible = true;
  680 + },
  681 + /**
  682 + * 监听pageSize改变的事件
  683 + */
  684 + handleSizeChange(newSize) {
  685 + this.queryInfo.pageSize = newSize;
  686 + //刷新车辆信息列表
  687 + this.getVehicleInfoList();
  688 +
  689 + },
  690 + /**
  691 + * 监听当前页码值改变的事件
  692 + */
  693 + handleCurrentChange(newPage) {
  694 + this.queryInfo.pageNum = newPage;
  695 + //刷新车辆信息列表
  696 + this.getVehicleInfoList();
  697 + },
  698 + }
  699 + }
  700 +</script>
  701 +
  702 +<style scoped>
  703 +
  704 +</style>