作者 小范

新增仓库场站管理界面

  1 +import axios from 'axios'
  2 +import http from "../http";
  3 +
  4 +
  5 +let baseUrl = 'wms-server-warehouse/wms/station/'
  6 +
  7 +export const selectStations = params => { return axios.get(`${baseUrl}/selectStations`, { params: params }); };
  8 +
  9 +export const delStation = params => { return axios.get(`${baseUrl}/delStation`, { params: params }); };
  10 +
  11 +export const addStation = params => { return http.post(`${baseUrl}/addStation`,params)};
  12 +
  13 +export const ediStation = params => { return http.post(`${baseUrl}/ediStation`,params)};
@@ -107,6 +107,8 @@ import example from './views/technological/example.vue' @@ -107,6 +107,8 @@ import example from './views/technological/example.vue'
107 import task from './views/technological/task.vue' 107 import task from './views/technological/task.vue'
108 import definition from './views/technological/definition.vue' 108 import definition from './views/technological/definition.vue'
109 109
  110 +//部署管理
  111 +import station from './views/deploy/station.vue'
110 112
111 113
112 114
@@ -513,6 +515,17 @@ let routes = [ @@ -513,6 +515,17 @@ let routes = [
513 ] 515 ]
514 }, 516 },
515 { 517 {
  518 + path: '/out',
  519 + component: HomeNew,
  520 + name: '仓库场站管理',
  521 + iconCls:'el-icon-goods',
  522 + children:[
  523 + {path:'/station',component:station,name:'仓库管理'},
  524 +
  525 +
  526 + ]
  527 + },
  528 + {
516 path: '/at', 529 path: '/at',
517 component: HomeNew, 530 component: HomeNew,
518 name: '在港动态', 531 name: '在港动态',
  1 +<template>
  2 + <el-row>
  3 + <el-card style="background-color: #F5F7FA">
  4 + <!-- 搜索区域-->
  5 + <el-row :gutter="10" class="toolbar">
  6 + <el-col :span="7">
  7 + <el-input v-model="queryInfo.stationno" prefix-icon="el-icon-search" size="small" style="width: 280px"
  8 + placeholder="场站编号" clearable>
  9 + <template slot="prepend">场站编号</template>
  10 +
  11 + </el-input>
  12 + </el-col>
  13 + <el-col :span="6">
  14 + <el-button type="primary" icon="el-icon-search" size="small" @click="getList()">
  15 + 查询
  16 + </el-button>
  17 + <el-button type="success" icon="el-icon-edit" size="small" @click="applyAdd()">新增</el-button>
  18 + </el-col>
  19 + </el-row>
  20 + <!-- 列表区域-->
  21 + <el-row>
  22 + <template>
  23 + <el-table
  24 + :data="tableData"
  25 + border
  26 + :cell-style="{textAlign:'center'}"
  27 + style="border-radius: 10px 10px 0px 0px;line-height: 25px"
  28 + :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
  29 + >
  30 + <el-table-column
  31 + fixed
  32 + prop="stationno"
  33 + label="场站编号"
  34 + width="160">
  35 + </el-table-column>
  36 + <el-table-column
  37 + prop="stationname"
  38 + label="场站名称"
  39 + width="160">
  40 + </el-table-column>
  41 + <el-table-column
  42 + prop="stationadr"
  43 + label="场站地址"
  44 + width="240">
  45 + </el-table-column>
  46 + <el-table-column
  47 + prop="stationuser"
  48 + label="场站负责人名称"
  49 + width="120">
  50 + </el-table-column>
  51 + <el-table-column
  52 + prop="area"
  53 + label="区域代码"
  54 + width="160">
  55 + </el-table-column>
  56 + <el-table-column
  57 + prop="customs"
  58 + label="关区"
  59 + width="80">
  60 + </el-table-column>
  61 + <el-table-column
  62 + fixed="right"
  63 + label="操作">
  64 + <template slot-scope="scope">
  65 + <el-button type="success" size="mini" @click="applyEdit(scope.row)">编辑</el-button>
  66 + <el-button type="danger" size="mini" @click="applyDel(scope.$index,scope.row)">删除</el-button>
  67 + </template>
  68 + </el-table-column>
  69 + </el-table>
  70 + </template>
  71 + </el-row>
  72 + <el-row style="margin-top: 10px" class="toolbar">
  73 + <el-pagination
  74 + @size-change="handleSizeChange"
  75 + @current-change="handleCurrentChange"
  76 + :current-page="queryInfo.pageNum"
  77 + :page-size="queryInfo.pageSize"
  78 + :page-sizes="[10, 50, 100, 500]"
  79 + layout="total, sizes, prev, pager, next, jumper"
  80 + :total="total">
  81 + </el-pagination>
  82 + </el-row>
  83 + <el-row>
  84 + <el-dialog :title="dialogMap[dialogApply]" :visible.sync="apply_dialog.addDialog" width="80%" >
  85 + <el-form :model="addForm" :rules="rules" ref="addForm" style="margin-top: 40px">
  86 + <el-row>
  87 + <el-col :span="9">
  88 + <el-form-item label="场站编号" :label-width="formLabelWidth" prop="stationno">
  89 + <el-input v-model="addForm.stationno" autocomplete="off" size="small" style="width: 190px"></el-input>
  90 + </el-form-item>
  91 + </el-col>
  92 + <el-col :span="9">
  93 + <el-form-item label="场站名称" :label-width="formLabelWidth" prop="stationname">
  94 + <el-input v-model="addForm.stationname" autocomplete="off" size="small" style="width: 190px"></el-input>
  95 + </el-form-item>
  96 + </el-col>
  97 + </el-row>
  98 + <el-row>
  99 + <el-col :span="9">
  100 + <el-form-item label="场站地址" :label-width="formLabelWidth" prop="stationadr">
  101 + <el-input v-model="addForm.stationadr" autocomplete="off" size="small" style="width: 190px"></el-input>
  102 + </el-form-item>
  103 + </el-col>
  104 + <el-col :span="12">
  105 + <el-form-item label="场站负责人名称" :label-width="formLabelWidth" prop="stationuser">
  106 + <el-input v-model="addForm.stationuser" autocomplete="off" size="small" style="width: 190px"></el-input>
  107 + </el-form-item>
  108 + </el-col>
  109 + </el-row>
  110 + <el-row>
  111 + <el-col :span="9">
  112 + <el-form-item label="区域代码" :label-width="formLabelWidth" prop="area">
  113 + <el-input v-model="addForm.area" autocomplete="off" size="small" style="width: 190px"></el-input>
  114 + </el-form-item>
  115 + </el-col>
  116 + <el-col :span="12">
  117 + <el-form-item label="关区" :label-width="formLabelWidth" prop="customs">
  118 + <el-input v-model="addForm.customs" autocomplete="off" size="small" style="width: 190px"></el-input>
  119 + </el-form-item>
  120 + </el-col>
  121 + </el-row>
  122 + </el-form>
  123 + <div slot="footer" class="dialog-footer">
  124 + <el-button @click="apply_dialog.addDialog = false" size="small">取 消</el-button>
  125 + <el-button type="primary" @click="dialogApply==='create'?add():edit()" size="small">提 交</el-button>
  126 + </div>
  127 + </el-dialog>
  128 + </el-row>
  129 + </el-card>
  130 + </el-row>
  131 +</template>
  132 +
  133 +<script>
  134 + import {selectStations,delStation,addStation,ediStation} from '../../api/consigner/station';
  135 +
  136 + export default {
  137 + name: "warehouse",
  138 + data() {
  139 + return {
  140 + queryInfo: {
  141 + stationno:'',
  142 + // 当前页数
  143 + pageNum: 1,
  144 + // 每页大小
  145 + pageSize: 10,
  146 + },
  147 + total: 0,
  148 + tableData:[],
  149 + dialogMap: {
  150 + update: '编辑',
  151 + create: '新增'
  152 + },
  153 + dialogApply: 'create',
  154 + apply_dialog: {
  155 + // 添加对话框
  156 + addDialog: false,
  157 + // 编辑对话框
  158 + editDialog: false
  159 + },
  160 + addForm: {
  161 + stationno: '',
  162 + stationname: '',
  163 + stationadr: '',
  164 + stationuser: '',
  165 + area: '',
  166 + customs: '',
  167 + remark:'',
  168 + remark1:'',
  169 + remark2:'',
  170 + remark3:''
  171 + },
  172 + formLabelWidth: '220px',
  173 + rules: {
  174 + userName: [
  175 + // { required: true, message: '请输入申请人', trigger: 'blur' },
  176 + // // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
  177 + // ],
  178 + // applyTime: [
  179 + // { required: true, message: '请选择时间', trigger: 'change' }
  180 + // ],
  181 + // needCount: [
  182 + // { required: true, message: '请输入需要车辆数量', trigger: 'blur' },
  183 + // ],
  184 + // orginStation: [
  185 + // { required: true, message: '请输入起始场站', trigger: 'blur' },
  186 + // ],
  187 + // endStation: [
  188 + // { required: true, message: '请输入目的场站', trigger: 'blur' },
  189 + // ],
  190 + // status: [
  191 + // { required: true, message: '请选择申请状态', trigger: 'change' }
  192 + ],
  193 + },
  194 + }
  195 + },
  196 + methods: {
  197 + handleSizeChange(val) {
  198 + this.queryInfo.pageSize = val
  199 + this.getList()
  200 + },
  201 + handleCurrentChange(val) {
  202 + this.queryInfo.pageNum = val
  203 + this.getList()
  204 + },
  205 + getList() {
  206 + const _this = this
  207 + selectStations(this.queryInfo).then((response) => {
  208 + const res = response.data
  209 + console.log(response.data)
  210 + if (res.code !== '200') {
  211 + return _this.$message.error('获取消息收发记录,失败!')
  212 + }
  213 + // 获取列表数据
  214 + _this.tableData = res.data.list
  215 + // 获取列表的总记录数
  216 + _this.total = res.data.total
  217 + _this.$message.success('获取消息收发记录,成功!')
  218 + }).catch(error => {
  219 + // 关闭加载
  220 + _this.$message.error(error.toString())
  221 + })
  222 + },
  223 + // 添加对话框,打开事件
  224 + applyAdd() {
  225 + this.addForm = {
  226 + stationno: '',
  227 + stationname: '',
  228 + stationadr: '',
  229 + stationuser: '',
  230 + area: '',
  231 + customs: '',
  232 + remark:'',
  233 + remark1:'',
  234 + remark2:'',
  235 + remark3:''
  236 + };
  237 + this.dialogApply= 'create';
  238 + this.apply_dialog.addDialog = true;
  239 + },
  240 + // 添加功能
  241 + add() {
  242 + this.$refs.addForm.validate(valid => {
  243 + // 未通过,表单预校验
  244 + if (!valid) return;
  245 + addStation(this.addForm).then((response) => {
  246 + let res = response.data;
  247 + // 添加失败
  248 + if (res.code !== '200') {
  249 + return this.$message.error(res.msg);
  250 + }
  251 + // 添加,成功
  252 + this.$message.success(res.msg);
  253 + // 隐藏对话框
  254 + this.apply_dialog.addDialog = false;
  255 + // 刷新列表
  256 + this.getList();
  257 + }).catch(error => {
  258 + this.$message.error(error.toString());
  259 + });
  260 + })
  261 + },
  262 +// 打开编辑
  263 + applyEdit(row) {
  264 + this.apply_dialog.addDialog = true;
  265 + this.dialogApply = 'update';
  266 + this.addForm=row;
  267 + },
  268 + // 编辑功能
  269 + edit() {
  270 + // 进行表单的预验证
  271 + this.$refs.addForm.validate(valid => {
  272 + // 未通过,表单预校验
  273 + if (!valid) return
  274 + ediStation(this.addForm).then((response) => {
  275 + // console.log(row)
  276 + const res = response.data
  277 + if (res.code != '200') {
  278 + return this.$message.error(res.msg)
  279 + }
  280 + this.$message.success(res.msg)
  281 + // 隐藏对话框
  282 + this.apply_dialog.addDialog = false
  283 + // 刷新列表
  284 + this.getList()
  285 + }).catch(error => {
  286 + this.$message.error(error.toString())
  287 + })
  288 + })
  289 + },
  290 + // 删除
  291 + applyDel(index, row) {
  292 + // 弹框询问是否删除?
  293 + this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', {
  294 + confirmButtonText: '确定删除',
  295 + cancelButtonText: '取消',
  296 + type: 'warning'
  297 + }
  298 + ).then(() => {
  299 + // console.log(row);
  300 + delStation({stationno:row.stationno}).then((response) => {
  301 + // console.log(row)
  302 + const res = response.data
  303 + this.$message.success(res.msg)
  304 + this.getList()
  305 + }).catch(error => {
  306 + this.$message.error(res.msg)
  307 + })
  308 + }).catch(() => {
  309 + })
  310 + },
  311 + },
  312 + mounted() {
  313 + this.getList();
  314 + // this.getYardList();
  315 +
  316 + }
  317 +
  318 + }
  319 +</script>
  320 +
  321 +<style scoped>
  322 + .toolbar{
  323 + height: 60px;
  324 + background-color: white;
  325 + /*line-height: 60px;*/
  326 + vertical-align: middle;
  327 + border-radius: 5px 5px 5px 5px;
  328 + padding: 15px 0 0 20px;
  329 + box-shadow: 0px 5px 5px #e5e8eb;
  330 + }
  331 +</style>