朱兆平 / vue_cli · 提交

转到一个项目

作者 王勇
提交 e46e019a41675c69438c87ee04fc83224f8b6608 1 个父辈 915a1219

新增加了场站管理、卡口管理、仓库管理、三个界面

内嵌 并排对比
正在显示 5 个修改的文件 包含 1570 行增加 和 0 行删除
  1 +import http from './http.js'
  2 +
  3 +let baseUrl = 'station-manage'
  4 +
  5 +// 场站信息，分页查询
  6 +export const selectYardList = params =>{return http.get(`${baseUrl}/yard/page`, params);};
  7 +export const getYardList = params =>{return http.get(`${baseUrl}/yard/list`, params);};
  8 +// 场站信息，新增
  9 +export const insertYard = params =>{return http.post(`${baseUrl}/yard/insert`, params);};
  10 +// 场站信息，编辑
  11 +export const updateYard = params =>{return http.put(`${baseUrl}/yard/update`, params);};
  12 +// 场站信息，删除
  13 +export const deleteYard = params =>{return http.del(`${baseUrl}/yard/delete`, params);};
  14 +
  15 +// 卡口信息，分页查询
  16 +export const selectBayonetList = params =>{return http.get(`${baseUrl}/bayonet/page`, params);};
  17 +// 卡口信息，新增
  18 +export const insertBayonet = params =>{return http.post(`${baseUrl}/bayonet/insert`, params);};
  19 +// 卡口信息，编辑
  20 +export const updateBayonet = params =>{return http.put(`${baseUrl}/bayonet/update`, params);};
  21 +// 卡口信息，删除
  22 +export const deleteBayonet = params =>{return http.del(`${baseUrl}/bayonet/delete`, params);};
  23 +
  24 +
  25 +// 仓库信息，分页查询
  26 +export const selectWarehouseList = params =>{return http.get(`${baseUrl}/warehouse/page`, params);};
  27 +// 仓库信息，新增
  28 +export const insertWarehouse = params =>{return http.post(`${baseUrl}/warehouse/insert`, params);};
  29 +// 仓库信息，编辑
  30 +export const updateWarehouse = params =>{return http.put(`${baseUrl}/warehouse/update`, params);};
  31 +// 仓库信息，删除
  32 +export const deleteWarehouse = params =>{return http.del(`${baseUrl}/warehouse/delete`, params);};
  33 +
@@ -19,6 +19,11 @@ import Trailer from './views/vehicle_manage/Trailer.vue' @@ -19,6 +19,11 @@ import Trailer from './views/vehicle_manage/Trailer.vue'
19 import Corporation from './views/vehicle_manage/Corporation.vue' 19 import Corporation from './views/vehicle_manage/Corporation.vue'
20 import Driver from './views/vehicle_manage/Driver.vue' 20 import Driver from './views/vehicle_manage/Driver.vue'
21 21
  22 +// 场站管理
  23 +import Yard from './views/station_manage/Yard.vue'
  24 +import Bayonet from './views/station_manage/Bayonet.vue'
  25 +import Warehouse from './views/station_manage/Warehouse.vue'
  26 +
22 let routes = [ 27 let routes = [
23 { 28 {
24 path: '/login', 29 path: '/login',
@@ -71,6 +76,17 @@ let routes = [ @@ -71,6 +76,17 @@ let routes = [
71 ] 76 ]
72 }, 77 },
73 { 78 {
  79 + path: '/',
  80 + component: Home,
  81 + name: '场站管理',
  82 + iconCls: 'el-icon-setting',//图标样式class
  83 + children: [
  84 + {path: '/yard', component: Yard, name: '场站管理'},
  85 + {path: '/bayonet', component: Bayonet, name: '卡口管理'},
  86 + {path: '/warehouse', component: Warehouse, name: '仓库管理'},
  87 + ]
  88 + },
  89 + {
74 path: '*', 90 path: '*',
75 hidden: true, 91 hidden: true,
76 redirect: {path: '/404'} 92 redirect: {path: '/404'}
  1 +<template>
  2 + <div>
  3 + <el-card style="background-color: #F5F7FA">
  4 + <!-- 搜素区域 -->
  5 + <div>
  6 + <el-row :gutter="10">
  7 + <el-col :span="4">
  8 + <el-input v-model="bayonet_queryInfo.stationName" prefix-icon="el-icon-search" size="small"
  9 + placeholder="场站名称" clearable></el-input>
  10 + </el-col>
  11 + <el-col :span="4">
  12 + <el-input v-model="bayonet_queryInfo.name" prefix-icon="el-icon-search" size="small"
  13 + placeholder="卡口名称" clearable></el-input>
  14 + </el-col>
  15 + <el-col :span="4">
  16 + <el-input v-model="bayonet_queryInfo.channel" prefix-icon="el-icon-search" size="small"
  17 + placeholder="通道编号" clearable></el-input>
  18 + </el-col>
  19 + <el-col :span="8">
  20 + <el-button type="success" style="width:120px" size="small" @click="bayonet_getList">
  21 + 查询
  22 + </el-button>
  23 + <el-button type="primary" style="width:120px" size="small" @click="bayonet_toAddDialog">
  24 + 卡口添加
  25 + </el-button>
  26 + </el-col>
  27 + </el-row>
  28 + </div>
  29 +
  30 + <!-- 列表区域 -->
  31 + <div style="margin-top: 20px;">
  32 + <el-table :data="bayonet_page.bayonetList" border size="mini"
  33 + v-loading="bayonet_loading.listLoading" element-loading-text="获取卡口列表，拼命加载中">
  34 + <el-table-column type="index" align="center"></el-table-column>
  35 + <el-table-column label="场站名称" prop="yard.name" align="center" width="120"></el-table-column>
  36 + <el-table-column label="卡口名称" prop="name" align="center" width="200"></el-table-column>
  37 + <el-table-column label="通道编号" prop="channel" align="center" width="200"></el-table-column>
  38 + <el-table-column label="卡口类型" prop="type" align="center" width="200">
  39 + <template slot-scope="scope">
  40 + <span v-if="scope.row.type ==='1'">进</span>
  41 + <span v-if="scope.row.type ==='2'">出</span>
  42 + <span v-if="scope.row.type ==='3'">进出共用</span>
  43 + </template>
  44 + </el-table-column>
  45 + <el-table-column label="备注信息" prop="remarks" align="center" width="200"></el-table-column>
  46 + <el-table-column label="操作" width="140px" align="center">
  47 + <template slot-scope="scope">
  48 + <el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false">
  49 + <el-button type="text" icon="el-icon-edit" size="mini"
  50 + @click="bayonet_toEditDialog(scope.$index,scope.row)">编辑
  51 + </el-button>
  52 + </el-tooltip>
  53 + <el-tooltip effect="dark" content="删除" placement="top-start" :enterable="false">
  54 + <el-button type="text" icon="el-icon-delete" size="mini"
  55 + :loading="bayonet_loading.delLoading"
  56 + @click="bayonet_delete(scope.$index,scope.row)">删除
  57 + </el-button>
  58 + </el-tooltip>
  59 + </template>
  60 + </el-table-column>
  61 + </el-table>
  62 + </div>
  63 +
  64 + <!-- 分页区域 -->
  65 + <div style="margin-top: 10px">
  66 + <el-row :gutter="24">
  67 + <el-col :span="10" style="margin-top: 5px">
  68 + <el-pagination
  69 + @size-change="bayonet_handleSizeChange"
  70 + @current-change="bayonet_handleCurrentChange"
  71 + :current-page="bayonet_queryInfo.pageNum"
  72 + :page-sizes="[10,30,50,100]"
  73 + :page-size="bayonet_queryInfo.pageSize"
  74 + layout="total, sizes, prev, pager, next, jumper"
  75 + :total="bayonet_page.total">
  76 + </el-pagination>
  77 + </el-col>
  78 + </el-row>
  79 + </div>
  80 + </el-card>
  81 + <!-- 卡口添加 -->
  82 + <div>
  83 + <el-dialog title="卡口添加："
  84 + :visible.sync="bayonet_dialog.addDialog"
  85 + style="margin-top: -80px" text-align="center" width="60%"
  86 + @close="bayonet_addDialogClosed">
  87 + <el-form :inline="true" label-width="150px" status-icon style="margin-top: -10px;" align="center"
  88 + :model="bayonet_addForm" :rules="bayonet_addFormRules" ref="bayonet_addFormRef">
  89 + <el-form-item label="场站名称：" prop="yardId">
  90 + <el-select v-model="bayonet_addForm.yardId" style="width: 300px" clearable size="small"
  91 + placeholder="请选择场站名称">
  92 + <el-option
  93 + v-for="item in stationNameList"
  94 + :key="item.name"
  95 + :label="item.name"
  96 + :value="item.id">
  97 + </el-option>
  98 + </el-select>
  99 + </el-form-item>
  100 + <el-form-item label="卡口名称：" prop="name">
  101 + <el-input v-model="bayonet_addForm.name" style="width:300px" size="mini" clearable
  102 + placeholder="请输入卡口名称">
  103 + </el-input>
  104 + </el-form-item>
  105 + <el-form-item label="通道编号：" prop="channel">
  106 + <el-input v-model="bayonet_addForm.channel" style="width:300px" size="mini" clearable
  107 + placeholder="请输入通道编号">
  108 + </el-input>
  109 + </el-form-item>
  110 +
  111 + <el-form-item label="卡口类型：" prop="type">
  112 + <el-select v-model="bayonet_addForm.type" style="width: 300px" clearable size="small"
  113 + placeholder="请选择卡口类型">
  114 + <el-option
  115 + v-for="item in bayonetTypeList"
  116 + :key="item.label"
  117 + :label="item.label"
  118 + :value="item.value">
  119 + </el-option>
  120 + </el-select>
  121 + </el-form-item>
  122 +
  123 +
  124 + <el-form-item label="备注信息：" prop="remarks">
  125 + <el-input v-model="bayonet_addForm.remarks" style="width:300px" clearable size="mini"
  126 + type="textarea" :rows="5">
  127 + </el-input>
  128 + </el-form-item>
  129 + </el-form>
  130 + <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -30px">
  131 + <el-button type="info" @click="bayonet_dialog.addDialog = false" size="medium"
  132 + style="width: 100px">取消
  133 + </el-button>
  134 + <el-button type="primary" @click="bayonet_add" :loading="bayonet_loading.addLoading"
  135 + size="medium" style="width: 100px">保存
  136 + </el-button>
  137 + </div>
  138 + </el-dialog>
  139 + </div>
  140 + <!-- 卡口修改 -->
  141 + <div>
  142 + <el-dialog title="卡口修改："
  143 + :visible.sync="bayonet_dialog.editDialog"
  144 + style="margin-top: -80px" text-align="center" width="60%"
  145 + @close="bayonet_editDialogClosed">
  146 + <el-form :inline="true" label-width="150px" status-icon style="margin-top: -10px;" align="center"
  147 + :model="bayonet_editForm" :rules="bayonet_editFormRules" ref="bayonet_editFormRef">
  148 + <el-form-item label="场站名称：" prop="yardId">
  149 + <el-select v-model="bayonet_editForm.yardId" style="width: 300px" clearable size="small"
  150 + placeholder="请选择场站名称">
  151 + <el-option
  152 + v-for="item in stationNameList"
  153 + :key="item.name"
  154 + :label="item.name"
  155 + :value="item.id">
  156 + </el-option>
  157 + </el-select>
  158 + </el-form-item>
  159 + <el-form-item label="卡口名称：" prop="name">
  160 + <el-input v-model="bayonet_editForm.name" style="width:300px" size="mini" clearable
  161 + placeholder="请输入卡口名称">
  162 + </el-input>
  163 + </el-form-item>
  164 + <el-form-item label="通道编号：" prop="channel">
  165 + <el-input v-model="bayonet_editForm.channel" style="width:300px" size="mini" clearable
  166 + placeholder="请输入通道编号">
  167 + </el-input>
  168 + </el-form-item>
  169 + <el-form-item label="卡口类型：" prop="type">
  170 + <el-select v-model="bayonet_editForm.type" style="width: 300px" clearable size="small"
  171 + placeholder="请选择卡口类型">
  172 + <el-option
  173 + v-for="item in bayonetTypeList"
  174 + :key="item.label"
  175 + :label="item.label"
  176 + :value="item.value">
  177 + </el-option>
  178 + </el-select>
  179 + </el-form-item>
  180 +
  181 + <el-form-item label="备注信息：" prop="remarks">
  182 + <el-input v-model="bayonet_editForm.remarks" style="width:300px" clearable size="mini"
  183 + type="textarea" :rows="5">
  184 + </el-input>
  185 + </el-form-item>
  186 + </el-form>
  187 + <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -30px">
  188 + <el-button type="info" @click="bayonet_dialog.editDialog = false" size="medium"
  189 + style="width: 100px">取消
  190 + </el-button>
  191 + <el-button type="primary" @click="bayonet_edit" :loading="bayonet_loading.editLoading"
  192 + size="medium" style="width: 100px">保存
  193 + </el-button>
  194 + </div>
  195 + </el-dialog>
  196 + </div>
  197 + </div>
  198 +</template>
  199 +
  200 +<script>
  201 + import {selectBayonetList, getYardList, insertBayonet, updateBayonet, deleteBayonet} from "../../api/station_dispatch";
  202 +
  203 + export default {
  204 + name: "Bayonet",
  205 + data() {
  206 + return {
  207 + /**
  208 + * 搜索参数
  209 + */
  210 + bayonet_queryInfo: {
  211 + // 场站名称
  212 + stationName: '',
  213 + // 卡口名称
  214 + name: '',
  215 + // 通道编号
  216 + channel: '',
  217 + // 当前页数
  218 + pageNum: 1,
  219 + // 每页大小
  220 + pageSize: 10,
  221 + },
  222 +
  223 + /**
  224 + * 分页
  225 + */
  226 + bayonet_page: {
  227 + bayonetList: [],
  228 + total: 0,
  229 + selectList: [],
  230 + },
  231 +
  232 + /**
  233 + * 场站列表
  234 + */
  235 + stationNameList: [],
  236 +
  237 + /**
  238 + * 卡口类型列表
  239 + */
  240 + bayonetTypeList: [
  241 + {
  242 + value: '1',
  243 + label: '进'
  244 + },
  245 + {
  246 + value: '2',
  247 + label: '出'
  248 + },
  249 + {
  250 + value: '3',
  251 + label: '进出共用'
  252 + },
  253 + ],
  254 + /**
  255 + * 加载
  256 + */
  257 + bayonet_loading: {
  258 + listLoading: false,
  259 + addLoading: false,
  260 + editLoading: false,
  261 + delLoading: false,
  262 + batchDelLoading: false,
  263 + },
  264 +
  265 + /**
  266 + * 对话框
  267 + */
  268 + bayonet_dialog: {
  269 + addDialog: false,
  270 + editDialog: false,
  271 + },
  272 +
  273 + /**
  274 + * 备案添加，表单
  275 + */
  276 + bayonet_addForm: {
  277 + // 场站名称
  278 + stationName: '',
  279 + // 卡口名称
  280 + name: '',
  281 + // 通道编号
  282 + channel: '',
  283 + // 备注信息
  284 + remarks: '',
  285 + },
  286 +
  287 + /**
  288 + * 备案添加，表单验证规则
  289 + */
  290 + bayonet_addFormRules: {
  291 + // 场站名称
  292 + stationName: [
  293 + {required: true, message: '请输入场站名称', trigger: ['blur', 'change']},
  294 + ],
  295 + // 卡口名称
  296 + name: [
  297 + {required: true, message: '请输入卡口名称', trigger: ['blur', 'change']},
  298 + ],
  299 + // 通道编号
  300 + channel: [
  301 + {required: true, message: '请输入通道编号', trigger: ['blur', 'change']},
  302 + ],
  303 + type: [
  304 + {required: true, message: '请选择卡口类型', trigger: ['blur', 'change']},
  305 + ],
  306 + },
  307 +
  308 + /**
  309 + * 备案修改，表单
  310 + */
  311 + bayonet_editForm: {},
  312 +
  313 + /**
  314 + * 备案修改，表单验证规则
  315 + */
  316 + bayonet_editFormRules: {
  317 + // 场站名称
  318 + stationName: [
  319 + {required: true, message: '请输入场站名称', trigger: ['blur', 'change']},
  320 + ],
  321 + // 卡口名称
  322 + name: [
  323 + {required: true, message: '请输入卡口名称', trigger: ['blur', 'change']},
  324 + ],
  325 + // 通道编号
  326 + channel: [
  327 + {required: true, message: '请输入通道编号', trigger: ['blur', 'change']},
  328 + ],
  329 + type: [
  330 + {required: true, message: '请选择卡口类型', trigger: ['blur', 'change']},
  331 + ],
  332 + },
  333 + }
  334 + },
  335 + methods: {
  336 + /**
  337 + * 分页查询，监听 pageSize 改变的事件
  338 + * 刷新列表
  339 + */
  340 + bayonet_handleSizeChange(newSize) {
  341 + this.bayonet_queryInfo.pageSize = newSize;
  342 + this.bayonet_getList();
  343 + },
  344 + /**
  345 + * 分页查询，监听 pageNum 改变的事件
  346 + * 刷新列表
  347 + */
  348 + bayonet_handleCurrentChange(newPage) {
  349 + this.bayonet_queryInfo.pageNum = newPage;
  350 + this.bayonet_getList();
  351 + },
  352 +
  353 + /**
  354 + * 列表查询
  355 + */
  356 + bayonet_getList() {
  357 + this.bayonet_loading.listLoading = true;
  358 + selectBayonetList(this.bayonet_queryInfo).then((response) => {
  359 + let res = response.data;
  360 + if (res.code !== '200') {
  361 + this.bayonet_loading.listLoading = false;
  362 + return this.$message.error(res.msg);
  363 + }
  364 + this.bayonet_page.bayonetList = res.data.list;
  365 + this.bayonet_page.total = res.data.total;
  366 + this.bayonet_loading.listLoading = false;
  367 + }).catch(error => {
  368 + this.bayonet_loading.listLoading = false;
  369 + this.$message.error(error.toString());
  370 + });
  371 + },
  372 +
  373 + /**
  374 + * 对话框，备案添加，打开事件
  375 + */
  376 + bayonet_toAddDialog() {
  377 + this.getYards();
  378 + this.bayonet_dialog.addDialog = true;
  379 + },
  380 +
  381 + /**
  382 + * 对话框，备案添加，关闭事件
  383 + */
  384 + bayonet_addDialogClosed() {
  385 + this.$refs.bayonet_addFormRef.resetFields();
  386 + },
  387 +
  388 + /**
  389 + * 备案添加
  390 + */
  391 + bayonet_add() {
  392 + this.$refs.bayonet_addFormRef.validate(valid => {
  393 + // 未通过，表单预校验
  394 + if (!valid) return;
  395 +
  396 + this.bayonet_loading.addLoading = true;
  397 + insertBayonet(this.bayonet_addForm).then((response) => {
  398 + let res = response.data;
  399 + if (res.code !== '200') {
  400 + this.bayonet_loading.addLoading = false;
  401 + return this.$message.error(res.msg);
  402 + }
  403 + this.$message.success(res.msg);
  404 + this.bayonet_loading.addLoading = false;
  405 + this.bayonet_dialog.addDialog = false;
  406 + this.bayonet_getList();
  407 + }).catch(error => {
  408 + this.bayonet_loading.addLoading = false;
  409 + this.$message.error(error.toString());
  410 + });
  411 + })
  412 + },
  413 +
  414 + /**
  415 + * 备案修改，对话框，打开事件
  416 + */
  417 + bayonet_toEditDialog(index, row) {
  418 + this.getYards();
  419 + this.bayonet_editForm = Object.assign({}, row);
  420 + this.bayonet_dialog.editDialog = true;
  421 + },
  422 +
  423 + /**
  424 + * 备案修改，对话框，关闭事件
  425 + */
  426 + bayonet_editDialogClosed() {
  427 + this.$refs.bayonet_editFormRef.resetFields();
  428 + },
  429 + /**
  430 + * 备案修改
  431 + */
  432 + bayonet_edit() {
  433 + this.$refs.bayonet_editFormRef.validate(valid => {
  434 + // 未通过，表单预校验
  435 + if (!valid) return;
  436 +
  437 + this.bayonet_loading.editLoading = true;
  438 + updateBayonet(this.bayonet_editForm).then((response) => {
  439 + let res = response.data;
  440 + if (res.code !== '200') {
  441 + this.bayonet_loading.editLoading = false;
  442 + return this.$message.error(res.msg);
  443 + }
  444 + this.$message.success(res.msg);
  445 + this.bayonet_loading.editLoading = false;
  446 + this.bayonet_dialog.editDialog = false;
  447 + this.bayonet_getList();
  448 + }).catch(error => {
  449 + this.bayonet_loading.editLoading = false;
  450 + this.$message.error(error.toString());
  451 + });
  452 + })
  453 + },
  454 +
  455 + /**
  456 + * 删除功能
  457 + */
  458 + bayonet_delete(index, row) {
  459 + this.$confirm('此操作永久删除该卡口信息, 是否继续?', '警告', {
  460 + confirmButtonText: '确定删除',
  461 + cancelButtonText: '取消',
  462 + type: 'warning'
  463 + }
  464 + ).then(() => {
  465 + this.bayonet_loading.delLoading = true;
  466 + deleteBayonet(row).then((response) => {
  467 + let res = response.data;
  468 + if (res.code !== '200') {
  469 + this.bayonet_loading.delLoading = false;
  470 + return this.$message.error(res.msg);
  471 + }
  472 + this.bayonet_loading.delLoading = false;
  473 + this.$message.success(res.msg);
  474 + this.bayonet_getList();
  475 + }).catch(error => {
  476 + this.bayonet_loading.delLoading = false;
  477 + this.$message.error(error.toString());
  478 + });
  479 + }).catch(() => {
  480 + });
  481 + },
  482 +
  483 + /**
  484 + * 获取所有场站列表
  485 + */
  486 + getYards() {
  487 + getYardList().then((response) => {
  488 + let res = response.data;
  489 + if (res.code !== '200') {
  490 + return this.$message.error(res.msg);
  491 + }
  492 + this.stationNameList = res.data;
  493 + }).catch(error => {
  494 + this.$message.error(error.toString());
  495 + });
  496 + }
  497 + },
  498 + }
  499 +</script>
  500 +
  501 +<style scoped>
  502 +
  503 +</style>
  1 +<template>
  2 + <div>
  3 + <el-card style="background-color: #F5F7FA">
  4 + <!-- 搜素区域 -->
  5 + <div>
  6 + <el-row :gutter="10">
  7 + <el-col :span="4">
  8 + <el-input v-model="warehouse_queryInfo.stationName" prefix-icon="el-icon-search" size="small"
  9 + placeholder="场站名称" clearable></el-input>
  10 + </el-col>
  11 + <el-col :span="4">
  12 + <el-input v-model="warehouse_queryInfo.name" prefix-icon="el-icon-search" size="small"
  13 + placeholder="仓库名称" clearable></el-input>
  14 + </el-col>
  15 +
  16 + <el-col :span="8">
  17 + <el-button type="success" style="width:120px" size="small" @click="warehouse_getList">
  18 + 查询
  19 + </el-button>
  20 + <el-button type="primary" style="width:120px" size="small" @click="warehouse_toAddDialog">
  21 + 仓库添加
  22 + </el-button>
  23 + </el-col>
  24 + </el-row>
  25 + </div>
  26 +
  27 + <!-- 列表区域 -->
  28 + <div style="margin-top: 20px;">
  29 + <el-table :data="warehouse_page.warehouseList" border size="mini"
  30 + v-loading="warehouse_loading.listLoading" element-loading-text="获取仓库列表，拼命加载中">
  31 + <el-table-column type="index" align="center"></el-table-column>
  32 + <el-table-column label="场站名称" prop="yard.name" align="center" width="120"></el-table-column>
  33 + <el-table-column label="仓库名称" prop="name" align="center" width="130"></el-table-column>
  34 + <el-table-column label="仓库类型" prop="warehouseType" align="center" width="120">
  35 + <template slot-scope="scope">
  36 + <span v-if="scope.row.warehouseType ==='001'">进港仓库</span>
  37 + <span v-if="scope.row.warehouseType ==='002'">出港仓库</span>
  38 + <span v-if="scope.row.warehouseType ==='003'">查验仓库</span>
  39 + <span v-if="scope.row.warehouseType ==='004'">危险品仓库</span>
  40 + </template>
  41 + </el-table-column>
  42 + <el-table-column label="仓库长度（米）" prop="warehouseLength" align="center" width="120"></el-table-column>
  43 + <el-table-column label="仓库宽度（米）" prop="warehouseWidth" align="center" width="120"></el-table-column>
  44 + <el-table-column label="仓库高度（米）" prop="warehouseHeight" align="center" width="120"></el-table-column>
  45 + <el-table-column label="仓库面积（平方米）" prop="warehouseArea" align="center" width="140"></el-table-column>
  46 + <el-table-column label="仓库体积（立方米）" prop="warehouseVolume" align="center" width="140"></el-table-column>
  47 + <el-table-column label="备注信息" prop="remarks" align="center" width="200"></el-table-column>
  48 + <el-table-column label="操作" width="160px" align="center" fixed="right">
  49 + <template slot-scope="scope">
  50 + <el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false">
  51 + <el-button type="text" icon="el-icon-edit" size="mini"
  52 + @click="warehouse_toEditDialog(scope.$index,scope.row)">编辑
  53 + </el-button>
  54 + </el-tooltip>
  55 + <el-tooltip effect="dark" content="删除" placement="top-start" :enterable="false">
  56 + <el-button type="text" icon="el-icon-delete" size="mini"
  57 + :loading="warehouse_loading.delLoading"
  58 + @click="warehouse_delete(scope.$index,scope.row)">删除
  59 + </el-button>
  60 + </el-tooltip>
  61 + </template>
  62 + </el-table-column>
  63 + </el-table>
  64 + </div>
  65 +
  66 + <!-- 分页区域 -->
  67 + <div style="margin-top: 10px">
  68 + <el-row :gutter="24">
  69 + <el-col :span="10" style="margin-top: 5px">
  70 + <el-pagination
  71 + @size-change="warehouse_handleSizeChange"
  72 + @current-change="warehouse_handleCurrentChange"
  73 + :current-page="warehouse_queryInfo.pageNum"
  74 + :page-sizes="[10,30,50,100]"
  75 + :page-size="warehouse_queryInfo.pageSize"
  76 + layout="total, sizes, prev, pager, next, jumper"
  77 + :total="warehouse_page.total">
  78 + </el-pagination>
  79 + </el-col>
  80 + </el-row>
  81 + </div>
  82 + </el-card>
  83 + <!-- 仓库添加 -->
  84 + <div>
  85 + <el-dialog title="仓库添加："
  86 + :visible.sync="warehouse_dialog.addDialog"
  87 + style="margin-top: -100px" text-align="center" width="60%"
  88 + @close="warehouse_addDialogClosed">
  89 + <el-form :inline="true" label-width="165px" status-icon style="margin-top: -20px;" align="center"
  90 + :model="warehouse_addForm" :rules="warehouse_addFormRules" ref="warehouse_addFormRef">
  91 + <el-form-item label="场站名称：" prop="yardId">
  92 + <el-select v-model="warehouse_addForm.yardId" style="width: 300px" clearable size="mini"
  93 + placeholder="请选择场站名称">
  94 + <el-option
  95 + v-for="item in stationNameList"
  96 + :key="item.name"
  97 + :label="item.name"
  98 + :value="item.id">
  99 + </el-option>
  100 + </el-select>
  101 + </el-form-item>
  102 + <el-form-item label="仓库名称：" prop="name">
  103 + <el-input v-model="warehouse_addForm.name" style="width:300px" size="mini" clearable
  104 + placeholder="请输入仓库名称">
  105 + </el-input>
  106 + </el-form-item>
  107 + <el-form-item label="仓库类型：" prop="warehouseType">
  108 + <el-select v-model="warehouse_addForm.warehouseType" style="width: 300px" clearable size="mini"
  109 + placeholder="请选择仓库类型">
  110 + <el-option
  111 + v-for="item in warehouseTypeList"
  112 + :key="item.label"
  113 + :label="item.label"
  114 + :value="item.value">
  115 + </el-option>
  116 + </el-select>
  117 + </el-form-item>
  118 +
  119 + <el-form-item label="仓库长度（米）：" prop="warehouseLength">
  120 + <el-input-number :precision="2" :step="0.1" style="width:300px" clearable
  121 + @blur="calculationAreaAndVolume"
  122 + v-model="warehouse_addForm.warehouseLength" placeholder="请输入仓库长度">
  123 + </el-input-number>
  124 + </el-form-item>
  125 + <el-form-item label="仓库宽度（米）：" prop="warehouseWidth">
  126 + <el-input-number :precision="2" :step="0.1" style="width:300px" clearable
  127 + @blur="calculationAreaAndVolume"
  128 + v-model="warehouse_addForm.warehouseWidth" placeholder="请输入仓库宽度">
  129 + </el-input-number>
  130 + </el-form-item>
  131 + <el-form-item label="仓库高度（米）：" prop="warehouseHeight">
  132 + <el-input-number :precision="2" :step="0.1" style="width:300px" clearable
  133 + @blur="calculationAreaAndVolume"
  134 + v-model="warehouse_addForm.warehouseHeight" placeholder="请输入仓库宽度">
  135 + </el-input-number>
  136 + </el-form-item>
  137 + <el-form-item label="仓库面积（平方米）：" prop="warehouseArea">
  138 + <el-input-number :precision="2" :step="0.1" style="width:300px" clearable
  139 + :disabled="warehouse_addForm.warehouseLength === undefined || warehouse_addForm.warehouseWidth === undefined"
  140 + v-model="warehouse_addForm.warehouseArea" placeholder="请输入仓库面积">
  141 + </el-input-number>
  142 + </el-form-item>
  143 + <el-form-item label="仓库体积（立方米）：" prop="warehouseVolume">
  144 + <el-input-number :precision="2" :step="0.1" style="width:300px" clearable
  145 + :disabled="warehouse_addForm.warehouseLength === undefined || warehouse_addForm.warehouseWidth === undefined
  146 + || warehouse_addForm.warehouseHeight === undefined"
  147 + v-model="warehouse_addForm.warehouseVolume" placeholder="请输入仓库体积">
  148 + </el-input-number>
  149 + </el-form-item>
  150 +
  151 + <el-form-item label="备注信息：" prop="remarks">
  152 + <el-input v-model="warehouse_addForm.remarks" style="width:300px" clearable size="mini"
  153 + type="textarea" :rows="2">
  154 + </el-input>
  155 + </el-form-item>
  156 + </el-form>
  157 + <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -30px">
  158 + <el-button type="info" @click="warehouse_dialog.addDialog = false" size="medium"
  159 + style="width: 100px">取消
  160 + </el-button>
  161 + <el-button type="primary" @click="warehouse_add" :loading="warehouse_loading.addLoading"
  162 + size="medium" style="width: 100px">保存
  163 + </el-button>
  164 + </div>
  165 + </el-dialog>
  166 + </div>
  167 +
  168 + <!-- 仓库修改 -->
  169 + <div>
  170 + <el-dialog title="仓库修改："
  171 + :visible.sync="warehouse_dialog.editDialog"
  172 + style="margin-top: -100px" text-align="center" width="60%"
  173 + @close="warehouse_editDialogClosed">
  174 + <el-form :inline="true" label-width="165px" status-icon style="margin-top: -20px;" align="center"
  175 + :model="warehouse_editForm" :rules="warehouse_editFormRules" ref="warehouse_editFormRef">
  176 + <el-form-item label="场站名称：" prop="yardId">
  177 + <el-select v-model="warehouse_editForm.yardId" style="width: 300px" clearable size="small"
  178 + placeholder="请选择场站名称">
  179 + <el-option
  180 + v-for="item in stationNameList"
  181 + :key="item.name"
  182 + :label="item.name"
  183 + :value="item.id">
  184 + </el-option>
  185 + </el-select>
  186 + </el-form-item>
  187 + <el-form-item label="仓库名称：" prop="name">
  188 + <el-input v-model="warehouse_editForm.name" style="width:300px" size="mini" clearable
  189 + placeholder="请输入仓库名称">
  190 + </el-input>
  191 + </el-form-item>
  192 + <el-form-item label="仓库类型：" prop="warehouseType">
  193 + <el-select v-model="warehouse_editForm.warehouseType" style="width: 300px" clearable size="small"
  194 + placeholder="请选择仓库类型">
  195 + <el-option
  196 + v-for="item in warehouseTypeList"
  197 + :key="item.label"
  198 + :label="item.label"
  199 + :value="item.value">
  200 + </el-option>
  201 + </el-select>
  202 + </el-form-item>
  203 + <el-form-item label="仓库长度（米）：" prop="warehouseLength">
  204 + <el-input-number :precision="2" :step="0.1" style="width:300px" clearable
  205 + @blur="edit_calculationAreaAndVolume"
  206 + v-model="warehouse_editForm.warehouseLength" placeholder="请输入仓库长度">
  207 + </el-input-number>
  208 + </el-form-item>
  209 + <el-form-item label="仓库宽度（米）：" prop="warehouseWidth">
  210 + <el-input-number :precision="2" :step="0.1" style="width:300px" clearable
  211 + @blur="edit_calculationAreaAndVolume"
  212 + v-model="warehouse_editForm.warehouseWidth" placeholder="请输入仓库宽度">
  213 + </el-input-number>
  214 + </el-form-item>
  215 +
  216 + <el-form-item label="仓库高度（米）：" prop="warehouseHeight">
  217 + <el-input-number :precision="2" :step="0.1" style="width:300px" clearable
  218 + @blur="edit_calculationAreaAndVolume"
  219 + v-model="warehouse_editForm.warehouseHeight" placeholder="请输入仓库宽度">
  220 + </el-input-number>
  221 + </el-form-item>
  222 + <el-form-item label="仓库面积（平方米）：" prop="warehouseArea">
  223 + <el-input-number :precision="2" :step="0.1" style="width:300px" clearable
  224 + v-model="warehouse_editForm.warehouseArea" placeholder="请输入面积">
  225 + </el-input-number>
  226 + </el-form-item>
  227 + <el-form-item label="仓库体积（立方米）：" prop="warehouseVolume">
  228 + <el-input-number :precision="2" :step="0.1" style="width:300px" clearable
  229 + v-model="warehouse_editForm.warehouseVolume" placeholder="请输入体积">
  230 + </el-input-number>
  231 + </el-form-item>
  232 +
  233 + <el-form-item label="备注信息：" prop="remarks">
  234 + <el-input v-model="warehouse_editForm.remarks" style="width:300px" clearable size="mini"
  235 + type="textarea" :rows="2">
  236 + </el-input>
  237 + </el-form-item>
  238 + </el-form>
  239 + <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -30px">
  240 + <el-button type="info" @click="warehouse_dialog.editDialog = false" size="medium"
  241 + style="width: 100px">取消
  242 + </el-button>
  243 + <el-button type="primary" @click="warehouse_edit" :loading="warehouse_loading.editLoading"
  244 + size="medium" style="width: 100px">保存
  245 + </el-button>
  246 + </div>
  247 + </el-dialog>
  248 + </div>
  249 + </div>
  250 +</template>
  251 +
  252 +<script>
  253 + import {selectWarehouseList, insertWarehouse, updateWarehouse, deleteWarehouse, getYardList} from "../../api/station_dispatch";
  254 +
  255 + export default {
  256 + name: "Warehouse",
  257 + data() {
  258 + return {
  259 + /**
  260 + * 搜索参数
  261 + */
  262 + warehouse_queryInfo: {
  263 + // 当前页数
  264 + pageNum: 1,
  265 + // 每页大小
  266 + pageSize: 10,
  267 + },
  268 +
  269 + /**
  270 + * 分页
  271 + */
  272 + warehouse_page: {
  273 + yardList: [],
  274 + total: 0,
  275 + selectList: [],
  276 + },
  277 +
  278 + /**
  279 + * 加载
  280 + */
  281 + warehouse_loading: {
  282 + listLoading: false,
  283 + addLoading: false,
  284 + editLoading: false,
  285 + delLoading: false,
  286 + batchDelLoading: false,
  287 + },
  288 +
  289 + /**
  290 + * 对话框
  291 + */
  292 + warehouse_dialog: {
  293 + addDialog: false,
  294 + editDialog: false,
  295 + },
  296 +
  297 + /**
  298 + * 备案添加，表单
  299 + */
  300 + warehouse_addForm: {
  301 + // 对应场站的ID
  302 + yardId: '',
  303 + // 仓库名称
  304 + name: '',
  305 + // 仓库类型
  306 + warehouseType: '',
  307 + // 仓库长度
  308 + warehouseLength: undefined,
  309 + // 仓库宽度
  310 + warehouseWidth: undefined,
  311 + // 仓库高度
  312 + warehouseHeight: undefined,
  313 + // 仓库面积
  314 + warehouseArea: undefined,
  315 + // 仓库体积
  316 + warehouseVolume: undefined,
  317 + // 备注
  318 + remarks: '',
  319 + },
  320 +
  321 + /**
  322 + * 仓库类型
  323 + */
  324 + warehouseTypeList: [
  325 + {
  326 + value: '001',
  327 + label: '进港仓库'
  328 + },
  329 + {
  330 + value: '002',
  331 + label: '出港仓库'
  332 + },
  333 + {
  334 + value: '003',
  335 + label: '查验仓库'
  336 + },
  337 + {
  338 + value: '004',
  339 + label: '危险品仓库'
  340 + },
  341 + ],
  342 + /**
  343 + * 场站名称
  344 + */
  345 + stationNameList: [],
  346 +
  347 + /**
  348 + * 备案添加，表单验证规则
  349 + */
  350 + warehouse_addFormRules: {
  351 + yardId: [
  352 + {required: true, message: '请选择场站', trigger: ['blur', 'change']},
  353 + ],
  354 + // 仓库名称
  355 + name: [
  356 + {required: true, message: '请输入仓库名称', trigger: ['blur', 'change']},
  357 + ],
  358 + // 仓库类型
  359 + warehouseType: [
  360 + {required: true, message: '请选择仓库类型', trigger: ['blur', 'change']},
  361 + ],
  362 + // 仓库长度
  363 + warehouseLength: [
  364 + {required: true, message: '请输入仓库长度', trigger: ['blur', 'change']},
  365 + ],
  366 + // 仓库宽度
  367 + warehouseWidth: [
  368 + {required: true, message: '请输入仓库宽度', trigger: ['blur', 'change']},
  369 + ],
  370 + warehouseArea: [
  371 + {required: true, message: '请输入仓库面积', trigger: ['blur', 'change']},
  372 + ],
  373 + },
  374 +
  375 + /**
  376 + * 备案修改，表单
  377 + */
  378 + warehouse_editForm: {},
  379 +
  380 + /**
  381 + * 备案修改，表单验证规则
  382 + */
  383 + warehouse_editFormRules: {
  384 + yardId: [
  385 + {required: true, message: '请选择场站', trigger: ['blur', 'change']},
  386 + ],
  387 + // 仓库名称
  388 + name: [
  389 + {required: true, message: '请输入仓库名称', trigger: ['blur', 'change']},
  390 + ],
  391 + // 仓库类型
  392 + warehouseType: [
  393 + {required: true, message: '请选择仓库类型', trigger: ['blur', 'change']},
  394 + ],
  395 + // 仓库长度
  396 + warehouseLength: [
  397 + {required: true, message: '请输入仓库长度', trigger: ['blur', 'change']},
  398 + ],
  399 + // 仓库宽度
  400 + warehouseWidth: [
  401 + {required: true, message: '请输入仓库宽度', trigger: ['blur', 'change']},
  402 + ],
  403 + warehouseArea: [
  404 + {required: true, message: '请输入仓库面积', trigger: ['blur', 'change']},
  405 + ],
  406 + },
  407 + }
  408 + },
  409 + methods: {
  410 + /**
  411 + * 分页查询，监听 pageSize 改变的事件
  412 + * 刷新列表
  413 + */
  414 + warehouse_handleSizeChange(newSize) {
  415 + this.warehouse_queryInfo.pageSize = newSize;
  416 + this.warehouse_getList();
  417 + },
  418 + /**
  419 + * 分页查询，监听 pageNum 改变的事件
  420 + * 刷新列表
  421 + */
  422 + warehouse_handleCurrentChange(newPage) {
  423 + this.warehouse_queryInfo.pageNum = newPage;
  424 + this.warehouse_getList();
  425 + },
  426 +
  427 + /**
  428 + * 列表查询
  429 + */
  430 + warehouse_getList() {
  431 + this.warehouse_loading.listLoading = true;
  432 + selectWarehouseList(this.warehouse_queryInfo).then((response) => {
  433 + let res = response.data;
  434 + if (res.code !== '200') {
  435 + this.warehouse_loading.listLoading = false;
  436 + return this.$message.error(res.msg);
  437 + }
  438 + this.warehouse_page.warehouseList = res.data.list;
  439 + this.warehouse_page.total = res.data.total;
  440 + this.warehouse_loading.listLoading = false;
  441 + }).catch(error => {
  442 + this.warehouse_loading.listLoading = false;
  443 + this.$message.error(error.toString());
  444 + });
  445 + },
  446 +
  447 + /**
  448 + * 对话框，备案添加，打开事件
  449 + */
  450 + warehouse_toAddDialog() {
  451 + this.getYards();
  452 + this.warehouse_dialog.addDialog = true;
  453 + },
  454 +
  455 + /**
  456 + * 对话框，备案添加，关闭事件
  457 + */
  458 + warehouse_addDialogClosed() {
  459 + this.$refs.warehouse_addFormRef.resetFields();
  460 + },
  461 +
  462 + /**
  463 + * 添加表单，失去焦点时，计算面积和体积
  464 + */
  465 + calculationAreaAndVolume() {
  466 + this.warehouse_addForm.warehouseArea = this.warehouse_addForm.warehouseLength * this.warehouse_addForm.warehouseWidth;
  467 + this.warehouse_addForm.warehouseVolume =
  468 + this.warehouse_addForm.warehouseLength * this.warehouse_addForm.warehouseWidth * this.warehouse_addForm.warehouseHeight;
  469 + },
  470 + /**
  471 + * 备案添加
  472 + */
  473 + warehouse_add() {
  474 + this.$refs.warehouse_addFormRef.validate(valid => {
  475 + // 未通过，表单预校验
  476 + if (!valid) return;
  477 +
  478 + this.warehouse_loading.addLoading = true;
  479 + insertWarehouse(this.warehouse_addForm).then((response) => {
  480 + let res = response.data;
  481 + if (res.code !== '200') {
  482 + this.warehouse_loading.addLoading = false;
  483 + return this.$message.error(res.msg);
  484 + }
  485 + this.$message.success(res.msg);
  486 + this.warehouse_loading.addLoading = false;
  487 + this.warehouse_dialog.addDialog = false;
  488 + this.warehouse_getList();
  489 + }).catch(error => {
  490 + this.warehouse_loading.addLoading = false;
  491 + this.$message.error(error.toString());
  492 + });
  493 + })
  494 + },
  495 +
  496 + /**
  497 + * 备案修改，对话框，打开事件
  498 + */
  499 + warehouse_toEditDialog(index, row) {
  500 + this.getYards();
  501 + this.warehouse_editForm = Object.assign({}, row);
  502 + this.warehouse_dialog.editDialog = true;
  503 + },
  504 +
  505 + /**
  506 + * 备案修改，对话框，关闭事件
  507 + */
  508 + warehouse_editDialogClosed() {
  509 + this.$refs.warehouse_editFormRef.resetFields();
  510 + },
  511 + /**
  512 + * 添加表单，失去焦点时，计算面积和体积
  513 + */
  514 + edit_calculationAreaAndVolume() {
  515 + this.warehouse_editForm.warehouseArea = this.warehouse_editForm.warehouseLength * this.warehouse_editForm.warehouseWidth;
  516 + this.warehouse_editForm.warehouseVolume =
  517 + this.warehouse_editForm.warehouseLength * this.warehouse_editForm.warehouseWidth * this.warehouse_editForm.warehouseHeight;
  518 + },
  519 + /**
  520 + * 备案修改
  521 + */
  522 + warehouse_edit() {
  523 + this.$refs.warehouse_editFormRef.validate(valid => {
  524 + // 未通过，表单预校验
  525 + if (!valid) return;
  526 +
  527 + this.warehouse_loading.editLoading = true;
  528 + updateWarehouse(this.warehouse_editForm).then((response) => {
  529 + let res = response.data;
  530 + if (res.code !== '200') {
  531 + this.warehouse_loading.editLoading = false;
  532 + return this.$message.error(res.msg);
  533 + }
  534 + this.$message.success(res.msg);
  535 + this.warehouse_loading.editLoading = false;
  536 + this.warehouse_dialog.editDialog = false;
  537 + this.warehouse_getList();
  538 + }).catch(error => {
  539 + this.warehouse_loading.editLoading = false;
  540 + this.$message.error(error.toString());
  541 + });
  542 + })
  543 + },
  544 +
  545 + /**
  546 + * 删除功能
  547 + */
  548 + warehouse_delete(index, row) {
  549 + this.$confirm('此操作永久删除该仓库信息, 是否继续?', '警告', {
  550 + confirmButtonText: '确定删除',
  551 + cancelButtonText: '取消',
  552 + type: 'warning'
  553 + }
  554 + ).then(() => {
  555 + this.warehouse_loading.delLoading = true;
  556 + deleteWarehouse(row).then((response) => {
  557 + let res = response.data;
  558 + if (res.code !== '200') {
  559 + this.warehouse_loading.delLoading = false;
  560 + return this.$message.error(res.msg);
  561 + }
  562 + this.warehouse_loading.delLoading = false;
  563 + this.$message.success(res.msg);
  564 + this.warehouse_getList();
  565 + }).catch(error => {
  566 + this.warehouse_loading.delLoading = false;
  567 + this.$message.error(error.toString());
  568 + });
  569 + }).catch(() => {
  570 + });
  571 + },
  572 + /**
  573 + * 获取所有场站列表
  574 + */
  575 + getYards() {
  576 + getYardList().then((response) => {
  577 + let res = response.data;
  578 + if (res.code !== '200') {
  579 + return this.$message.error(res.msg);
  580 + }
  581 + this.stationNameList = res.data;
  582 + }).catch(error => {
  583 + this.$message.error(error.toString());
  584 + });
  585 + },
  586 + },
  587 + }
  588 +</script>
  589 +
  590 +<style scoped>
  591 +
  592 +</style>
  1 +<template>
  2 + <div>
  3 + <el-card style="background-color: #F5F7FA">
  4 + <!-- 搜素区域 -->
  5 + <div>
  6 + <el-row :gutter="10">
  7 + <el-col :span="4">
  8 + <el-input v-model="yard_queryInfo.name" prefix-icon="el-icon-search" size="small"
  9 + placeholder="场站名称" clearable></el-input>
  10 + </el-col>
  11 + <el-col :span="4">
  12 + <el-input v-model="yard_queryInfo.customsCode" prefix-icon="el-icon-search" size="small"
  13 + placeholder="关区代码" clearable></el-input>
  14 + </el-col>
  15 + <el-col :span="8">
  16 + <el-button type="success" style="width:120px" size="small" @click="yard_getList">
  17 + 查询
  18 + </el-button>
  19 + <el-button type="primary" style="width:120px" size="small" @click="yard_toAddDialog">
  20 + 场站添加
  21 + </el-button>
  22 + </el-col>
  23 + </el-row>
  24 + </div>
  25 +
  26 + <!-- 列表区域 -->
  27 + <div style="margin-top: 20px;">
  28 + <el-table :data="yard_page.yardList" border size="mini"
  29 + v-loading="yard_loading.listLoading" element-loading-text="获取场站列表，拼命加载中">
  30 + <el-table-column type="index" align="center"></el-table-column>
  31 + <el-table-column label="场站名称" prop="name" align="center" width="120"></el-table-column>
  32 + <el-table-column label="区域代码" prop="areaCode" align="center" width="120"></el-table-column>
  33 + <el-table-column label="场站ID" prop="stationId" align="center" width="120"></el-table-column>
  34 + <el-table-column label="关区代码" prop="customsCode" align="center" width="120"></el-table-column>
  35 + <el-table-column label="备注信息" prop="remarks" align="center" width="200"></el-table-column>
  36 + <el-table-column label="操作" width="140px" align="center">
  37 + <template slot-scope="scope">
  38 + <el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false">
  39 + <el-button type="text" icon="el-icon-edit" size="mini"
  40 + @click="yard_toEditDialog(scope.$index,scope.row)">编辑
  41 + </el-button>
  42 + </el-tooltip>
  43 + <el-tooltip effect="dark" content="删除" placement="top-start" :enterable="false">
  44 + <el-button type="text" icon="el-icon-delete" size="mini"
  45 + :loading="yard_loading.delLoading"
  46 + @click="yard_delete(scope.$index,scope.row)">删除
  47 + </el-button>
  48 + </el-tooltip>
  49 + </template>
  50 + </el-table-column>
  51 + </el-table>
  52 + </div>
  53 +
  54 + <!-- 分页区域 -->
  55 + <div style="margin-top: 10px">
  56 + <el-row :gutter="24">
  57 + <el-col :span="10" style="margin-top: 5px">
  58 + <el-pagination
  59 + @size-change="yard_handleSizeChange"
  60 + @current-change="yard_handleCurrentChange"
  61 + :current-page="yard_queryInfo.pageNum"
  62 + :page-sizes="[10,30,50,100]"
  63 + :page-size="yard_queryInfo.pageSize"
  64 + layout="total, sizes, prev, pager, next, jumper"
  65 + :total="yard_page.total">
  66 + </el-pagination>
  67 + </el-col>
  68 + </el-row>
  69 + </div>
  70 + </el-card>
  71 + <!-- 场站添加 -->
  72 + <div>
  73 + <el-dialog title="场站添加："
  74 + :visible.sync="yard_dialog.addDialog"
  75 + style="margin-top: -80px" text-align="center" width="60%"
  76 + @close="yard_addDialogClosed">
  77 + <el-form :inline="true" label-width="150px" status-icon style="margin-top: -10px;" align="center"
  78 + :model="yard_addForm" :rules="yard_addFormRules" ref="yard_addFormRef">
  79 + <el-form-item label="场站名称：" prop="name">
  80 + <el-input v-model="yard_addForm.name" style="width:300px" size="mini" clearable
  81 + placeholder="请输入场站名称">
  82 + </el-input>
  83 + </el-form-item>
  84 + <el-form-item label="区域代码：" prop="areaCode">
  85 + <el-input v-model="yard_addForm.areaCode" style="width:300px" size="mini" clearable
  86 + placeholder="请输入区域代码">
  87 + </el-input>
  88 + </el-form-item>
  89 + <el-form-item label="场站ID：" prop="stationId">
  90 + <el-input v-model="yard_addForm.stationId" style="width:300px" size="mini" clearable
  91 + placeholder="请输入场站ID">
  92 + </el-input>
  93 + </el-form-item>
  94 + <el-form-item label="关区代码：" prop="customsCode">
  95 + <el-select v-model="yard_addForm.customsCode" style="width: 300px" clearable size="small"
  96 + placeholder="请选择关区代码">
  97 + <el-option
  98 + v-for="item in customsCodeList"
  99 + :key="item.value"
  100 + :label="item.label"
  101 + :value="item.value">
  102 + </el-option>
  103 + </el-select>
  104 + </el-form-item>
  105 +
  106 + <el-form-item label="备注信息：" prop="remarks">
  107 + <el-input v-model="yard_addForm.remarks" style="width:300px" clearable size="mini"
  108 + type="textarea" :rows="5">
  109 + </el-input>
  110 + </el-form-item>
  111 + </el-form>
  112 + <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -30px">
  113 + <el-button type="info" @click="yard_dialog.addDialog = false" size="medium"
  114 + style="width: 100px">取消
  115 + </el-button>
  116 + <el-button type="primary" @click="yard_add" :loading="yard_loading.addLoading"
  117 + size="medium" style="width: 100px">保存
  118 + </el-button>
  119 + </div>
  120 + </el-dialog>
  121 + </div>
  122 +
  123 + <!-- 场站修改 -->
  124 + <div>
  125 + <el-dialog title="场站修改："
  126 + :visible.sync="yard_dialog.editDialog"
  127 + style="margin-top: -80px" text-align="center" width="60%"
  128 + @close="yard_editDialogClosed">
  129 + <el-form :inline="true" label-width="150px" status-icon style="margin-top: -10px;" align="center"
  130 + :model="yard_editForm" :rules="yard_editFormRules" ref="yard_editFormRef">
  131 + <el-form-item label="场站名称：" prop="name">
  132 + <el-input v-model="yard_editForm.name" style="width:300px" size="mini" clearable
  133 + placeholder="请输入场站名称">
  134 + </el-input>
  135 + </el-form-item>
  136 + <el-form-item label="区域代码：" prop="areaCode">
  137 + <el-input v-model="yard_editForm.areaCode" style="width:300px" size="mini" clearable
  138 + placeholder="请输入区域代码">
  139 + </el-input>
  140 + </el-form-item>
  141 + <el-form-item label="场站ID：" prop="stationId">
  142 + <el-input v-model="yard_editForm.stationId" style="width:300px" size="mini" clearable
  143 + placeholder="请输入场站ID">
  144 + </el-input>
  145 + </el-form-item>
  146 + <el-form-item label="关区代码：" prop="customsCode">
  147 + <el-select v-model="yard_editForm.customsCode" style="width: 300px" clearable size="small"
  148 + placeholder="请选择关区代码">
  149 + <el-option
  150 + v-for="item in customsCodeList"
  151 + :key="item.value"
  152 + :label="item.label"
  153 + :value="item.value">
  154 + </el-option>
  155 + </el-select>
  156 + </el-form-item>
  157 +
  158 + <el-form-item label="备注信息：" prop="remarks">
  159 + <el-input v-model="yard_editForm.remarks" style="width:300px" clearable size="mini"
  160 + type="textarea" :rows="5">
  161 + </el-input>
  162 + </el-form-item>
  163 + </el-form>
  164 + <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -30px">
  165 + <el-button type="info" @click="yard_dialog.editDialog = false" size="medium"
  166 + style="width: 100px">取消
  167 + </el-button>
  168 + <el-button type="primary" @click="yard_edit" :loading="yard_loading.editLoading"
  169 + size="medium" style="width: 100px">保存
  170 + </el-button>
  171 + </div>
  172 + </el-dialog>
  173 + </div>
  174 + </div>
  175 +</template>
  176 +
  177 +<script>
  178 + import {selectYardList, insertYard, updateYard, deleteYard} from "../../api/station_dispatch";
  179 +
  180 + export default {
  181 + name: "Yard",
  182 + data() {
  183 + return {
  184 + /**
  185 + * 搜索参数
  186 + */
  187 + yard_queryInfo: {
  188 + // 场站名称
  189 + name: '',
  190 + customsCode: undefined,
  191 + // 当前页数
  192 + pageNum: 1,
  193 + // 每页大小
  194 + pageSize: 10,
  195 + },
  196 +
  197 + /**
  198 + * yard，分页
  199 + */
  200 + yard_page: {
  201 + yardList: [],
  202 + total: 0,
  203 + selectList: [],
  204 + },
  205 +
  206 + /**
  207 + * 加载
  208 + */
  209 + yard_loading: {
  210 + listLoading: false,
  211 + addLoading: false,
  212 + editLoading: false,
  213 + delLoading: false,
  214 + batchDelLoading: false,
  215 + },
  216 +
  217 + /**
  218 + * 对话框
  219 + */
  220 + yard_dialog: {
  221 + addDialog: false,
  222 + editDialog: false,
  223 + },
  224 +
  225 + /**
  226 + * 备案添加，表单
  227 + */
  228 + yard_addForm: {
  229 + // 场站名称
  230 + name: '',
  231 + // 区域代码
  232 + areaCode: '',
  233 + // 场站ID
  234 + stationId: '',
  235 + // 关区代码
  236 + customsCode: undefined,
  237 + // 备注信息
  238 + remarks: '',
  239 + },
  240 +
  241 + customsCodeList: [
  242 + {
  243 + value: 4604,
  244 + label: '4604'
  245 + },
  246 + {
  247 + value: 4620,
  248 + label: '4620'
  249 + },
  250 + ],
  251 + /**
  252 + * 备案添加，表单验证规则
  253 + */
  254 + yard_addFormRules: {
  255 + name: [
  256 + {required: true, message: '请输入场站名称', trigger: ['blur', 'change']},
  257 + ],
  258 + },
  259 +
  260 + /**
  261 + * 备案修改，表单
  262 + */
  263 + yard_editForm: {},
  264 +
  265 + /**
  266 + * 备案修改，表单验证规则
  267 + */
  268 + yard_editFormRules: {
  269 + name: [
  270 + {required: true, message: '请输入场站名称', trigger: ['blur', 'change']},
  271 + ],
  272 + },
  273 + }
  274 + },
  275 + methods: {
  276 + /**
  277 + * 分页查询，监听 pageSize 改变的事件
  278 + * 刷新列表
  279 + */
  280 + yard_handleSizeChange(newSize) {
  281 + this.yard_queryInfo.pageSize = newSize;
  282 + this.yard_getList();
  283 + },
  284 + /**
  285 + * 分页查询，监听 pageNum 改变的事件
  286 + * 刷新列表
  287 + */
  288 + yard_handleCurrentChange(newPage) {
  289 + this.yard_queryInfo.pageNum = newPage;
  290 + this.yard_getList();
  291 + },
  292 +
  293 + /**
  294 + * 列表查询
  295 + */
  296 + yard_getList() {
  297 + this.yard_loading.listLoading = true;
  298 + selectYardList(this.yard_queryInfo).then((response) => {
  299 + let res = response.data;
  300 + if (res.code !== '200') {
  301 + this.yard_loading.listLoading = false;
  302 + return this.$message.error(res.msg);
  303 + }
  304 + this.yard_page.yardList = res.data.list;
  305 + this.yard_page.total = res.data.total;
  306 + this.yard_loading.listLoading = false;
  307 + }).catch(error => {
  308 + this.yard_loading.listLoading = false;
  309 + this.$message.error(error.toString());
  310 + });
  311 + },
  312 +
  313 + /**
  314 + * 对话框，备案添加，打开事件
  315 + */
  316 + yard_toAddDialog() {
  317 + this.yard_dialog.addDialog = true;
  318 + },
  319 +
  320 + /**
  321 + * 对话框，备案添加，关闭事件
  322 + */
  323 + yard_addDialogClosed() {
  324 + this.$refs.yard_addFormRef.resetFields();
  325 + },
  326 +
  327 + /**
  328 + * 备案添加
  329 + */
  330 + yard_add() {
  331 + this.$refs.yard_addFormRef.validate(valid => {
  332 + // 未通过，表单预校验
  333 + if (!valid) return;
  334 + // 通过，表单预检验
  335 + this.yard_loading.addLoading = true;
  336 + insertYard(this.yard_addForm).then((response) => {
  337 + let res = response.data;
  338 + if (res.code !== '200') {
  339 + this.yard_loading.addLoading = false;
  340 + return this.$message.error(res.msg);
  341 + }
  342 + this.$message.success(res.msg);
  343 + this.yard_loading.addLoading = false;
  344 + this.yard_dialog.addDialog = false;
  345 + this.yard_getList();
  346 + }).catch(error => {
  347 + this.yard_loading.addLoading = false;
  348 + this.$message.error(error.toString());
  349 + });
  350 + })
  351 + },
  352 +
  353 + /**
  354 + * 备案修改，对话框，打开事件
  355 + */
  356 + yard_toEditDialog(index, row) {
  357 + this.yard_editForm = Object.assign({}, row);
  358 + this.yard_dialog.editDialog = true;
  359 + },
  360 +
  361 + /**
  362 + * 备案修改，对话框，关闭事件
  363 + */
  364 + yard_editDialogClosed() {
  365 + this.$refs.yard_editFormRef.resetFields();
  366 + },
  367 + /**
  368 + * 备案修改
  369 + */
  370 + yard_edit() {
  371 + this.$refs.yard_editFormRef.validate(valid => {
  372 + // 未通过，表单预校验
  373 + if (!valid) return;
  374 +
  375 + this.yard_loading.editLoading = true;
  376 + updateYard(this.yard_editForm).then((response) => {
  377 + let res = response.data;
  378 + if (res.code !== '200') {
  379 + this.yard_loading.editLoading = false;
  380 + return this.$message.error(res.msg);
  381 + }
  382 + this.$message.success(res.msg);
  383 + this.yard_loading.editLoading = false;
  384 + this.yard_dialog.editDialog = false;
  385 + this.yard_getList();
  386 + }).catch(error => {
  387 + this.yard_loading.editLoading = false;
  388 + this.$message.error(error.toString());
  389 + });
  390 + })
  391 + },
  392 +
  393 + /**
  394 + * 删除功能
  395 + */
  396 + yard_delete(index, row) {
  397 + this.$confirm('此操作永久删除该场站信息, 是否继续?', '警告', {
  398 + confirmButtonText: '确定删除',
  399 + cancelButtonText: '取消',
  400 + type: 'warning'
  401 + }
  402 + ).then(() => {
  403 + this.yard_loading.delLoading = true;
  404 + deleteYard(row).then((response) => {
  405 + let res = response.data;
  406 + if (res.code !== '200') {
  407 + this.yard_loading.delLoading = false;
  408 + return this.$message.error(res.msg);
  409 + }
  410 + this.yard_loading.delLoading = false;
  411 + this.$message.success(res.msg);
  412 + this.yard_getList();
  413 + }).catch(error => {
  414 + this.yard_loading.delLoading = false;
  415 + this.$message.error(error.toString());
  416 + });
  417 + }).catch(() => {
  418 + });
  419 + },
  420 + },
  421 + }
  422 +</script>
  423 +
  424 +<style scoped>
  425 +
  426 +</style>