朱兆平 / vue_cli · 提交

转到一个项目

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

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

内嵌 并排对比
正在显示 5 个修改的文件 包含 1570 行增加 和 0 行删除
import http from './http.js'
let baseUrl = 'station-manage'
// 场站信息，分页查询
export const selectYardList = params =>{return http.get(`${baseUrl}/yard/page`, params);};
export const getYardList = params =>{return http.get(`${baseUrl}/yard/list`, params);};
// 场站信息，新增
export const insertYard = params =>{return http.post(`${baseUrl}/yard/insert`, params);};
// 场站信息，编辑
export const updateYard = params =>{return http.put(`${baseUrl}/yard/update`, params);};
// 场站信息，删除
export const deleteYard = params =>{return http.del(`${baseUrl}/yard/delete`, params);};
// 卡口信息，分页查询
export const selectBayonetList = params =>{return http.get(`${baseUrl}/bayonet/page`, params);};
// 卡口信息，新增
export const insertBayonet = params =>{return http.post(`${baseUrl}/bayonet/insert`, params);};
// 卡口信息，编辑
export const updateBayonet = params =>{return http.put(`${baseUrl}/bayonet/update`, params);};
// 卡口信息，删除
export const deleteBayonet = params =>{return http.del(`${baseUrl}/bayonet/delete`, params);};
// 仓库信息，分页查询
export const selectWarehouseList = params =>{return http.get(`${baseUrl}/warehouse/page`, params);};
// 仓库信息，新增
export const insertWarehouse = params =>{return http.post(`${baseUrl}/warehouse/insert`, params);};
// 仓库信息，编辑
export const updateWarehouse = params =>{return http.put(`${baseUrl}/warehouse/update`, params);};
// 仓库信息，删除
export const deleteWarehouse = params =>{return http.del(`${baseUrl}/warehouse/delete`, params);};
... ...
... ... @@ -19,6 +19,11 @@ import Trailer from './views/vehicle_manage/Trailer.vue'
import Corporation from './views/vehicle_manage/Corporation.vue'
import Driver from './views/vehicle_manage/Driver.vue'
// 场站管理
import Yard from './views/station_manage/Yard.vue'
import Bayonet from './views/station_manage/Bayonet.vue'
import Warehouse from './views/station_manage/Warehouse.vue'
let routes = [
{
path: '/login',
... ... @@ -71,6 +76,17 @@ let routes = [
]
},
{
path: '/',
component: Home,
name: '场站管理',
iconCls: 'el-icon-setting',//图标样式class
children: [
{path: '/yard', component: Yard, name: '场站管理'},
{path: '/bayonet', component: Bayonet, name: '卡口管理'},
{path: '/warehouse', component: Warehouse, name: '仓库管理'},
]
},
{
path: '*',
hidden: true,
redirect: {path: '/404'}
... ...
<template>
<div>
<el-card style="background-color: #F5F7FA">
<!-- 搜素区域 -->
<div>
<el-row :gutter="10">
<el-col :span="4">
<el-input v-model="bayonet_queryInfo.stationName" prefix-icon="el-icon-search" size="small"
placeholder="场站名称" clearable></el-input>
</el-col>
<el-col :span="4">
<el-input v-model="bayonet_queryInfo.name" prefix-icon="el-icon-search" size="small"
placeholder="卡口名称" clearable></el-input>
</el-col>
<el-col :span="4">
<el-input v-model="bayonet_queryInfo.channel" prefix-icon="el-icon-search" size="small"
placeholder="通道编号" clearable></el-input>
</el-col>
<el-col :span="8">
<el-button type="success" style="width:120px" size="small" @click="bayonet_getList">
查询
</el-button>
<el-button type="primary" style="width:120px" size="small" @click="bayonet_toAddDialog">
卡口添加
</el-button>
</el-col>
</el-row>
</div>
<!-- 列表区域 -->
<div style="margin-top: 20px;">
<el-table :data="bayonet_page.bayonetList" border size="mini"
v-loading="bayonet_loading.listLoading" element-loading-text="获取卡口列表，拼命加载中">
<el-table-column type="index" align="center"></el-table-column>
<el-table-column label="场站名称" prop="yard.name" align="center" width="120"></el-table-column>
<el-table-column label="卡口名称" prop="name" align="center" width="200"></el-table-column>
<el-table-column label="通道编号" prop="channel" align="center" width="200"></el-table-column>
<el-table-column label="卡口类型" prop="type" align="center" width="200">
<template slot-scope="scope">
<span v-if="scope.row.type ==='1'">进</span>
<span v-if="scope.row.type ==='2'">出</span>
<span v-if="scope.row.type ==='3'">进出共用</span>
</template>
</el-table-column>
<el-table-column label="备注信息" prop="remarks" align="center" width="200"></el-table-column>
<el-table-column label="操作" width="140px" align="center">
<template slot-scope="scope">
<el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false">
<el-button type="text" icon="el-icon-edit" size="mini"
@click="bayonet_toEditDialog(scope.$index,scope.row)">编辑
</el-button>
</el-tooltip>
<el-tooltip effect="dark" content="删除" placement="top-start" :enterable="false">
<el-button type="text" icon="el-icon-delete" size="mini"
:loading="bayonet_loading.delLoading"
@click="bayonet_delete(scope.$index,scope.row)">删除
</el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页区域 -->
<div style="margin-top: 10px">
<el-row :gutter="24">
<el-col :span="10" style="margin-top: 5px">
<el-pagination
@size-change="bayonet_handleSizeChange"
@current-change="bayonet_handleCurrentChange"
:current-page="bayonet_queryInfo.pageNum"
:page-sizes="[10,30,50,100]"
:page-size="bayonet_queryInfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="bayonet_page.total">
</el-pagination>
</el-col>
</el-row>
</div>
</el-card>
<!-- 卡口添加 -->
<div>
<el-dialog title="卡口添加："
:visible.sync="bayonet_dialog.addDialog"
style="margin-top: -80px" text-align="center" width="60%"
@close="bayonet_addDialogClosed">
<el-form :inline="true" label-width="150px" status-icon style="margin-top: -10px;" align="center"
:model="bayonet_addForm" :rules="bayonet_addFormRules" ref="bayonet_addFormRef">
<el-form-item label="场站名称：" prop="yardId">
<el-select v-model="bayonet_addForm.yardId" style="width: 300px" clearable size="small"
placeholder="请选择场站名称">
<el-option
v-for="item in stationNameList"
:key="item.name"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="卡口名称：" prop="name">
<el-input v-model="bayonet_addForm.name" style="width:300px" size="mini" clearable
placeholder="请输入卡口名称">
</el-input>
</el-form-item>
<el-form-item label="通道编号：" prop="channel">
<el-input v-model="bayonet_addForm.channel" style="width:300px" size="mini" clearable
placeholder="请输入通道编号">
</el-input>
</el-form-item>
<el-form-item label="卡口类型：" prop="type">
<el-select v-model="bayonet_addForm.type" style="width: 300px" clearable size="small"
placeholder="请选择卡口类型">
<el-option
v-for="item in bayonetTypeList"
:key="item.label"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="备注信息：" prop="remarks">
<el-input v-model="bayonet_addForm.remarks" style="width:300px" clearable size="mini"
type="textarea" :rows="5">
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -30px">
<el-button type="info" @click="bayonet_dialog.addDialog = false" size="medium"
style="width: 100px">取消
</el-button>
<el-button type="primary" @click="bayonet_add" :loading="bayonet_loading.addLoading"
size="medium" style="width: 100px">保存
</el-button>
</div>
</el-dialog>
</div>
<!-- 卡口修改 -->
<div>
<el-dialog title="卡口修改："
:visible.sync="bayonet_dialog.editDialog"
style="margin-top: -80px" text-align="center" width="60%"
@close="bayonet_editDialogClosed">
<el-form :inline="true" label-width="150px" status-icon style="margin-top: -10px;" align="center"
:model="bayonet_editForm" :rules="bayonet_editFormRules" ref="bayonet_editFormRef">
<el-form-item label="场站名称：" prop="yardId">
<el-select v-model="bayonet_editForm.yardId" style="width: 300px" clearable size="small"
placeholder="请选择场站名称">
<el-option
v-for="item in stationNameList"
:key="item.name"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="卡口名称：" prop="name">
<el-input v-model="bayonet_editForm.name" style="width:300px" size="mini" clearable
placeholder="请输入卡口名称">
</el-input>
</el-form-item>
<el-form-item label="通道编号：" prop="channel">
<el-input v-model="bayonet_editForm.channel" style="width:300px" size="mini" clearable
placeholder="请输入通道编号">
</el-input>
</el-form-item>
<el-form-item label="卡口类型：" prop="type">
<el-select v-model="bayonet_editForm.type" style="width: 300px" clearable size="small"
placeholder="请选择卡口类型">
<el-option
v-for="item in bayonetTypeList"
:key="item.label"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="备注信息：" prop="remarks">
<el-input v-model="bayonet_editForm.remarks" style="width:300px" clearable size="mini"
type="textarea" :rows="5">
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -30px">
<el-button type="info" @click="bayonet_dialog.editDialog = false" size="medium"
style="width: 100px">取消
</el-button>
<el-button type="primary" @click="bayonet_edit" :loading="bayonet_loading.editLoading"
size="medium" style="width: 100px">保存
</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import {selectBayonetList, getYardList, insertBayonet, updateBayonet, deleteBayonet} from "../../api/station_dispatch";
export default {
name: "Bayonet",
data() {
return {
/**
* 搜索参数
*/
bayonet_queryInfo: {
// 场站名称
stationName: '',
// 卡口名称
name: '',
// 通道编号
channel: '',
// 当前页数
pageNum: 1,
// 每页大小
pageSize: 10,
},
/**
* 分页
*/
bayonet_page: {
bayonetList: [],
total: 0,
selectList: [],
},
/**
* 场站列表
*/
stationNameList: [],
/**
* 卡口类型列表
*/
bayonetTypeList: [
{
value: '1',
label: '进'
},
{
value: '2',
label: '出'
},
{
value: '3',
label: '进出共用'
},
],
/**
* 加载
*/
bayonet_loading: {
listLoading: false,
addLoading: false,
editLoading: false,
delLoading: false,
batchDelLoading: false,
},
/**
* 对话框
*/
bayonet_dialog: {
addDialog: false,
editDialog: false,
},
/**
* 备案添加，表单
*/
bayonet_addForm: {
// 场站名称
stationName: '',
// 卡口名称
name: '',
// 通道编号
channel: '',
// 备注信息
remarks: '',
},
/**
* 备案添加，表单验证规则
*/
bayonet_addFormRules: {
// 场站名称
stationName: [
{required: true, message: '请输入场站名称', trigger: ['blur', 'change']},
],
// 卡口名称
name: [
{required: true, message: '请输入卡口名称', trigger: ['blur', 'change']},
],
// 通道编号
channel: [
{required: true, message: '请输入通道编号', trigger: ['blur', 'change']},
],
type: [
{required: true, message: '请选择卡口类型', trigger: ['blur', 'change']},
],
},
/**
* 备案修改，表单
*/
bayonet_editForm: {},
/**
* 备案修改，表单验证规则
*/
bayonet_editFormRules: {
// 场站名称
stationName: [
{required: true, message: '请输入场站名称', trigger: ['blur', 'change']},
],
// 卡口名称
name: [
{required: true, message: '请输入卡口名称', trigger: ['blur', 'change']},
],
// 通道编号
channel: [
{required: true, message: '请输入通道编号', trigger: ['blur', 'change']},
],
type: [
{required: true, message: '请选择卡口类型', trigger: ['blur', 'change']},
],
},
}
},
methods: {
/**
* 分页查询，监听 pageSize 改变的事件
* 刷新列表
*/
bayonet_handleSizeChange(newSize) {
this.bayonet_queryInfo.pageSize = newSize;
this.bayonet_getList();
},
/**
* 分页查询，监听 pageNum 改变的事件
* 刷新列表
*/
bayonet_handleCurrentChange(newPage) {
this.bayonet_queryInfo.pageNum = newPage;
this.bayonet_getList();
},
/**
* 列表查询
*/
bayonet_getList() {
this.bayonet_loading.listLoading = true;
selectBayonetList(this.bayonet_queryInfo).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.bayonet_loading.listLoading = false;
return this.$message.error(res.msg);
}
this.bayonet_page.bayonetList = res.data.list;
this.bayonet_page.total = res.data.total;
this.bayonet_loading.listLoading = false;
}).catch(error => {
this.bayonet_loading.listLoading = false;
this.$message.error(error.toString());
});
},
/**
* 对话框，备案添加，打开事件
*/
bayonet_toAddDialog() {
this.getYards();
this.bayonet_dialog.addDialog = true;
},
/**
* 对话框，备案添加，关闭事件
*/
bayonet_addDialogClosed() {
this.$refs.bayonet_addFormRef.resetFields();
},
/**
* 备案添加
*/
bayonet_add() {
this.$refs.bayonet_addFormRef.validate(valid => {
// 未通过，表单预校验
if (!valid) return;
this.bayonet_loading.addLoading = true;
insertBayonet(this.bayonet_addForm).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.bayonet_loading.addLoading = false;
return this.$message.error(res.msg);
}
this.$message.success(res.msg);
this.bayonet_loading.addLoading = false;
this.bayonet_dialog.addDialog = false;
this.bayonet_getList();
}).catch(error => {
this.bayonet_loading.addLoading = false;
this.$message.error(error.toString());
});
})
},
/**
* 备案修改，对话框，打开事件
*/
bayonet_toEditDialog(index, row) {
this.getYards();
this.bayonet_editForm = Object.assign({}, row);
this.bayonet_dialog.editDialog = true;
},
/**
* 备案修改，对话框，关闭事件
*/
bayonet_editDialogClosed() {
this.$refs.bayonet_editFormRef.resetFields();
},
/**
* 备案修改
*/
bayonet_edit() {
this.$refs.bayonet_editFormRef.validate(valid => {
// 未通过，表单预校验
if (!valid) return;
this.bayonet_loading.editLoading = true;
updateBayonet(this.bayonet_editForm).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.bayonet_loading.editLoading = false;
return this.$message.error(res.msg);
}
this.$message.success(res.msg);
this.bayonet_loading.editLoading = false;
this.bayonet_dialog.editDialog = false;
this.bayonet_getList();
}).catch(error => {
this.bayonet_loading.editLoading = false;
this.$message.error(error.toString());
});
})
},
/**
* 删除功能
*/
bayonet_delete(index, row) {
this.$confirm('此操作永久删除该卡口信息, 是否继续?', '警告', {
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
this.bayonet_loading.delLoading = true;
deleteBayonet(row).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.bayonet_loading.delLoading = false;
return this.$message.error(res.msg);
}
this.bayonet_loading.delLoading = false;
this.$message.success(res.msg);
this.bayonet_getList();
}).catch(error => {
this.bayonet_loading.delLoading = false;
this.$message.error(error.toString());
});
}).catch(() => {
});
},
/**
* 获取所有场站列表
*/
getYards() {
getYardList().then((response) => {
let res = response.data;
if (res.code !== '200') {
return this.$message.error(res.msg);
}
this.stationNameList = res.data;
}).catch(error => {
this.$message.error(error.toString());
});
}
},
}
</script>
<style scoped>
</style>
\ No newline at end of file
... ...
<template>
<div>
<el-card style="background-color: #F5F7FA">
<!-- 搜素区域 -->
<div>
<el-row :gutter="10">
<el-col :span="4">
<el-input v-model="warehouse_queryInfo.stationName" prefix-icon="el-icon-search" size="small"
placeholder="场站名称" clearable></el-input>
</el-col>
<el-col :span="4">
<el-input v-model="warehouse_queryInfo.name" prefix-icon="el-icon-search" size="small"
placeholder="仓库名称" clearable></el-input>
</el-col>
<el-col :span="8">
<el-button type="success" style="width:120px" size="small" @click="warehouse_getList">
查询
</el-button>
<el-button type="primary" style="width:120px" size="small" @click="warehouse_toAddDialog">
仓库添加
</el-button>
</el-col>
</el-row>
</div>
<!-- 列表区域 -->
<div style="margin-top: 20px;">
<el-table :data="warehouse_page.warehouseList" border size="mini"
v-loading="warehouse_loading.listLoading" element-loading-text="获取仓库列表，拼命加载中">
<el-table-column type="index" align="center"></el-table-column>
<el-table-column label="场站名称" prop="yard.name" align="center" width="120"></el-table-column>
<el-table-column label="仓库名称" prop="name" align="center" width="130"></el-table-column>
<el-table-column label="仓库类型" prop="warehouseType" align="center" width="120">
<template slot-scope="scope">
<span v-if="scope.row.warehouseType ==='001'">进港仓库</span>
<span v-if="scope.row.warehouseType ==='002'">出港仓库</span>
<span v-if="scope.row.warehouseType ==='003'">查验仓库</span>
<span v-if="scope.row.warehouseType ==='004'">危险品仓库</span>
</template>
</el-table-column>
<el-table-column label="仓库长度（米）" prop="warehouseLength" align="center" width="120"></el-table-column>
<el-table-column label="仓库宽度（米）" prop="warehouseWidth" align="center" width="120"></el-table-column>
<el-table-column label="仓库高度（米）" prop="warehouseHeight" align="center" width="120"></el-table-column>
<el-table-column label="仓库面积（平方米）" prop="warehouseArea" align="center" width="140"></el-table-column>
<el-table-column label="仓库体积（立方米）" prop="warehouseVolume" align="center" width="140"></el-table-column>
<el-table-column label="备注信息" prop="remarks" align="center" width="200"></el-table-column>
<el-table-column label="操作" width="160px" align="center" fixed="right">
<template slot-scope="scope">
<el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false">
<el-button type="text" icon="el-icon-edit" size="mini"
@click="warehouse_toEditDialog(scope.$index,scope.row)">编辑
</el-button>
</el-tooltip>
<el-tooltip effect="dark" content="删除" placement="top-start" :enterable="false">
<el-button type="text" icon="el-icon-delete" size="mini"
:loading="warehouse_loading.delLoading"
@click="warehouse_delete(scope.$index,scope.row)">删除
</el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页区域 -->
<div style="margin-top: 10px">
<el-row :gutter="24">
<el-col :span="10" style="margin-top: 5px">
<el-pagination
@size-change="warehouse_handleSizeChange"
@current-change="warehouse_handleCurrentChange"
:current-page="warehouse_queryInfo.pageNum"
:page-sizes="[10,30,50,100]"
:page-size="warehouse_queryInfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="warehouse_page.total">
</el-pagination>
</el-col>
</el-row>
</div>
</el-card>
<!-- 仓库添加 -->
<div>
<el-dialog title="仓库添加："
:visible.sync="warehouse_dialog.addDialog"
style="margin-top: -100px" text-align="center" width="60%"
@close="warehouse_addDialogClosed">
<el-form :inline="true" label-width="165px" status-icon style="margin-top: -20px;" align="center"
:model="warehouse_addForm" :rules="warehouse_addFormRules" ref="warehouse_addFormRef">
<el-form-item label="场站名称：" prop="yardId">
<el-select v-model="warehouse_addForm.yardId" style="width: 300px" clearable size="mini"
placeholder="请选择场站名称">
<el-option
v-for="item in stationNameList"
:key="item.name"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="仓库名称：" prop="name">
<el-input v-model="warehouse_addForm.name" style="width:300px" size="mini" clearable
placeholder="请输入仓库名称">
</el-input>
</el-form-item>
<el-form-item label="仓库类型：" prop="warehouseType">
<el-select v-model="warehouse_addForm.warehouseType" style="width: 300px" clearable size="mini"
placeholder="请选择仓库类型">
<el-option
v-for="item in warehouseTypeList"
:key="item.label"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="仓库长度（米）：" prop="warehouseLength">
<el-input-number :precision="2" :step="0.1" style="width:300px" clearable
@blur="calculationAreaAndVolume"
v-model="warehouse_addForm.warehouseLength" placeholder="请输入仓库长度">
</el-input-number>
</el-form-item>
<el-form-item label="仓库宽度（米）：" prop="warehouseWidth">
<el-input-number :precision="2" :step="0.1" style="width:300px" clearable
@blur="calculationAreaAndVolume"
v-model="warehouse_addForm.warehouseWidth" placeholder="请输入仓库宽度">
</el-input-number>
</el-form-item>
<el-form-item label="仓库高度（米）：" prop="warehouseHeight">
<el-input-number :precision="2" :step="0.1" style="width:300px" clearable
@blur="calculationAreaAndVolume"
v-model="warehouse_addForm.warehouseHeight" placeholder="请输入仓库宽度">
</el-input-number>
</el-form-item>
<el-form-item label="仓库面积（平方米）：" prop="warehouseArea">
<el-input-number :precision="2" :step="0.1" style="width:300px" clearable
:disabled="warehouse_addForm.warehouseLength === undefined || warehouse_addForm.warehouseWidth === undefined"
v-model="warehouse_addForm.warehouseArea" placeholder="请输入仓库面积">
</el-input-number>
</el-form-item>
<el-form-item label="仓库体积（立方米）：" prop="warehouseVolume">
<el-input-number :precision="2" :step="0.1" style="width:300px" clearable
:disabled="warehouse_addForm.warehouseLength === undefined || warehouse_addForm.warehouseWidth === undefined
|| warehouse_addForm.warehouseHeight === undefined"
v-model="warehouse_addForm.warehouseVolume" placeholder="请输入仓库体积">
</el-input-number>
</el-form-item>
<el-form-item label="备注信息：" prop="remarks">
<el-input v-model="warehouse_addForm.remarks" style="width:300px" clearable size="mini"
type="textarea" :rows="2">
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -30px">
<el-button type="info" @click="warehouse_dialog.addDialog = false" size="medium"
style="width: 100px">取消
</el-button>
<el-button type="primary" @click="warehouse_add" :loading="warehouse_loading.addLoading"
size="medium" style="width: 100px">保存
</el-button>
</div>
</el-dialog>
</div>
<!-- 仓库修改 -->
<div>
<el-dialog title="仓库修改："
:visible.sync="warehouse_dialog.editDialog"
style="margin-top: -100px" text-align="center" width="60%"
@close="warehouse_editDialogClosed">
<el-form :inline="true" label-width="165px" status-icon style="margin-top: -20px;" align="center"
:model="warehouse_editForm" :rules="warehouse_editFormRules" ref="warehouse_editFormRef">
<el-form-item label="场站名称：" prop="yardId">
<el-select v-model="warehouse_editForm.yardId" style="width: 300px" clearable size="small"
placeholder="请选择场站名称">
<el-option
v-for="item in stationNameList"
:key="item.name"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="仓库名称：" prop="name">
<el-input v-model="warehouse_editForm.name" style="width:300px" size="mini" clearable
placeholder="请输入仓库名称">
</el-input>
</el-form-item>
<el-form-item label="仓库类型：" prop="warehouseType">
<el-select v-model="warehouse_editForm.warehouseType" style="width: 300px" clearable size="small"
placeholder="请选择仓库类型">
<el-option
v-for="item in warehouseTypeList"
:key="item.label"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="仓库长度（米）：" prop="warehouseLength">
<el-input-number :precision="2" :step="0.1" style="width:300px" clearable
@blur="edit_calculationAreaAndVolume"
v-model="warehouse_editForm.warehouseLength" placeholder="请输入仓库长度">
</el-input-number>
</el-form-item>
<el-form-item label="仓库宽度（米）：" prop="warehouseWidth">
<el-input-number :precision="2" :step="0.1" style="width:300px" clearable
@blur="edit_calculationAreaAndVolume"
v-model="warehouse_editForm.warehouseWidth" placeholder="请输入仓库宽度">
</el-input-number>
</el-form-item>
<el-form-item label="仓库高度（米）：" prop="warehouseHeight">
<el-input-number :precision="2" :step="0.1" style="width:300px" clearable
@blur="edit_calculationAreaAndVolume"
v-model="warehouse_editForm.warehouseHeight" placeholder="请输入仓库宽度">
</el-input-number>
</el-form-item>
<el-form-item label="仓库面积（平方米）：" prop="warehouseArea">
<el-input-number :precision="2" :step="0.1" style="width:300px" clearable
v-model="warehouse_editForm.warehouseArea" placeholder="请输入面积">
</el-input-number>
</el-form-item>
<el-form-item label="仓库体积（立方米）：" prop="warehouseVolume">
<el-input-number :precision="2" :step="0.1" style="width:300px" clearable
v-model="warehouse_editForm.warehouseVolume" placeholder="请输入体积">
</el-input-number>
</el-form-item>
<el-form-item label="备注信息：" prop="remarks">
<el-input v-model="warehouse_editForm.remarks" style="width:300px" clearable size="mini"
type="textarea" :rows="2">
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -30px">
<el-button type="info" @click="warehouse_dialog.editDialog = false" size="medium"
style="width: 100px">取消
</el-button>
<el-button type="primary" @click="warehouse_edit" :loading="warehouse_loading.editLoading"
size="medium" style="width: 100px">保存
</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import {selectWarehouseList, insertWarehouse, updateWarehouse, deleteWarehouse, getYardList} from "../../api/station_dispatch";
export default {
name: "Warehouse",
data() {
return {
/**
* 搜索参数
*/
warehouse_queryInfo: {
// 当前页数
pageNum: 1,
// 每页大小
pageSize: 10,
},
/**
* 分页
*/
warehouse_page: {
yardList: [],
total: 0,
selectList: [],
},
/**
* 加载
*/
warehouse_loading: {
listLoading: false,
addLoading: false,
editLoading: false,
delLoading: false,
batchDelLoading: false,
},
/**
* 对话框
*/
warehouse_dialog: {
addDialog: false,
editDialog: false,
},
/**
* 备案添加，表单
*/
warehouse_addForm: {
// 对应场站的ID
yardId: '',
// 仓库名称
name: '',
// 仓库类型
warehouseType: '',
// 仓库长度
warehouseLength: undefined,
// 仓库宽度
warehouseWidth: undefined,
// 仓库高度
warehouseHeight: undefined,
// 仓库面积
warehouseArea: undefined,
// 仓库体积
warehouseVolume: undefined,
// 备注
remarks: '',
},
/**
* 仓库类型
*/
warehouseTypeList: [
{
value: '001',
label: '进港仓库'
},
{
value: '002',
label: '出港仓库'
},
{
value: '003',
label: '查验仓库'
},
{
value: '004',
label: '危险品仓库'
},
],
/**
* 场站名称
*/
stationNameList: [],
/**
* 备案添加，表单验证规则
*/
warehouse_addFormRules: {
yardId: [
{required: true, message: '请选择场站', trigger: ['blur', 'change']},
],
// 仓库名称
name: [
{required: true, message: '请输入仓库名称', trigger: ['blur', 'change']},
],
// 仓库类型
warehouseType: [
{required: true, message: '请选择仓库类型', trigger: ['blur', 'change']},
],
// 仓库长度
warehouseLength: [
{required: true, message: '请输入仓库长度', trigger: ['blur', 'change']},
],
// 仓库宽度
warehouseWidth: [
{required: true, message: '请输入仓库宽度', trigger: ['blur', 'change']},
],
warehouseArea: [
{required: true, message: '请输入仓库面积', trigger: ['blur', 'change']},
],
},
/**
* 备案修改，表单
*/
warehouse_editForm: {},
/**
* 备案修改，表单验证规则
*/
warehouse_editFormRules: {
yardId: [
{required: true, message: '请选择场站', trigger: ['blur', 'change']},
],
// 仓库名称
name: [
{required: true, message: '请输入仓库名称', trigger: ['blur', 'change']},
],
// 仓库类型
warehouseType: [
{required: true, message: '请选择仓库类型', trigger: ['blur', 'change']},
],
// 仓库长度
warehouseLength: [
{required: true, message: '请输入仓库长度', trigger: ['blur', 'change']},
],
// 仓库宽度
warehouseWidth: [
{required: true, message: '请输入仓库宽度', trigger: ['blur', 'change']},
],
warehouseArea: [
{required: true, message: '请输入仓库面积', trigger: ['blur', 'change']},
],
},
}
},
methods: {
/**
* 分页查询，监听 pageSize 改变的事件
* 刷新列表
*/
warehouse_handleSizeChange(newSize) {
this.warehouse_queryInfo.pageSize = newSize;
this.warehouse_getList();
},
/**
* 分页查询，监听 pageNum 改变的事件
* 刷新列表
*/
warehouse_handleCurrentChange(newPage) {
this.warehouse_queryInfo.pageNum = newPage;
this.warehouse_getList();
},
/**
* 列表查询
*/
warehouse_getList() {
this.warehouse_loading.listLoading = true;
selectWarehouseList(this.warehouse_queryInfo).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.warehouse_loading.listLoading = false;
return this.$message.error(res.msg);
}
this.warehouse_page.warehouseList = res.data.list;
this.warehouse_page.total = res.data.total;
this.warehouse_loading.listLoading = false;
}).catch(error => {
this.warehouse_loading.listLoading = false;
this.$message.error(error.toString());
});
},
/**
* 对话框，备案添加，打开事件
*/
warehouse_toAddDialog() {
this.getYards();
this.warehouse_dialog.addDialog = true;
},
/**
* 对话框，备案添加，关闭事件
*/
warehouse_addDialogClosed() {
this.$refs.warehouse_addFormRef.resetFields();
},
/**
* 添加表单，失去焦点时，计算面积和体积
*/
calculationAreaAndVolume() {
this.warehouse_addForm.warehouseArea = this.warehouse_addForm.warehouseLength * this.warehouse_addForm.warehouseWidth;
this.warehouse_addForm.warehouseVolume =
this.warehouse_addForm.warehouseLength * this.warehouse_addForm.warehouseWidth * this.warehouse_addForm.warehouseHeight;
},
/**
* 备案添加
*/
warehouse_add() {
this.$refs.warehouse_addFormRef.validate(valid => {
// 未通过，表单预校验
if (!valid) return;
this.warehouse_loading.addLoading = true;
insertWarehouse(this.warehouse_addForm).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.warehouse_loading.addLoading = false;
return this.$message.error(res.msg);
}
this.$message.success(res.msg);
this.warehouse_loading.addLoading = false;
this.warehouse_dialog.addDialog = false;
this.warehouse_getList();
}).catch(error => {
this.warehouse_loading.addLoading = false;
this.$message.error(error.toString());
});
})
},
/**
* 备案修改，对话框，打开事件
*/
warehouse_toEditDialog(index, row) {
this.getYards();
this.warehouse_editForm = Object.assign({}, row);
this.warehouse_dialog.editDialog = true;
},
/**
* 备案修改，对话框，关闭事件
*/
warehouse_editDialogClosed() {
this.$refs.warehouse_editFormRef.resetFields();
},
/**
* 添加表单，失去焦点时，计算面积和体积
*/
edit_calculationAreaAndVolume() {
this.warehouse_editForm.warehouseArea = this.warehouse_editForm.warehouseLength * this.warehouse_editForm.warehouseWidth;
this.warehouse_editForm.warehouseVolume =
this.warehouse_editForm.warehouseLength * this.warehouse_editForm.warehouseWidth * this.warehouse_editForm.warehouseHeight;
},
/**
* 备案修改
*/
warehouse_edit() {
this.$refs.warehouse_editFormRef.validate(valid => {
// 未通过，表单预校验
if (!valid) return;
this.warehouse_loading.editLoading = true;
updateWarehouse(this.warehouse_editForm).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.warehouse_loading.editLoading = false;
return this.$message.error(res.msg);
}
this.$message.success(res.msg);
this.warehouse_loading.editLoading = false;
this.warehouse_dialog.editDialog = false;
this.warehouse_getList();
}).catch(error => {
this.warehouse_loading.editLoading = false;
this.$message.error(error.toString());
});
})
},
/**
* 删除功能
*/
warehouse_delete(index, row) {
this.$confirm('此操作永久删除该仓库信息, 是否继续?', '警告', {
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
this.warehouse_loading.delLoading = true;
deleteWarehouse(row).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.warehouse_loading.delLoading = false;
return this.$message.error(res.msg);
}
this.warehouse_loading.delLoading = false;
this.$message.success(res.msg);
this.warehouse_getList();
}).catch(error => {
this.warehouse_loading.delLoading = false;
this.$message.error(error.toString());
});
}).catch(() => {
});
},
/**
* 获取所有场站列表
*/
getYards() {
getYardList().then((response) => {
let res = response.data;
if (res.code !== '200') {
return this.$message.error(res.msg);
}
this.stationNameList = res.data;
}).catch(error => {
this.$message.error(error.toString());
});
},
},
}
</script>
<style scoped>
</style>
\ No newline at end of file
... ...
<template>
<div>
<el-card style="background-color: #F5F7FA">
<!-- 搜素区域 -->
<div>
<el-row :gutter="10">
<el-col :span="4">
<el-input v-model="yard_queryInfo.name" prefix-icon="el-icon-search" size="small"
placeholder="场站名称" clearable></el-input>
</el-col>
<el-col :span="4">
<el-input v-model="yard_queryInfo.customsCode" prefix-icon="el-icon-search" size="small"
placeholder="关区代码" clearable></el-input>
</el-col>
<el-col :span="8">
<el-button type="success" style="width:120px" size="small" @click="yard_getList">
查询
</el-button>
<el-button type="primary" style="width:120px" size="small" @click="yard_toAddDialog">
场站添加
</el-button>
</el-col>
</el-row>
</div>
<!-- 列表区域 -->
<div style="margin-top: 20px;">
<el-table :data="yard_page.yardList" border size="mini"
v-loading="yard_loading.listLoading" element-loading-text="获取场站列表，拼命加载中">
<el-table-column type="index" align="center"></el-table-column>
<el-table-column label="场站名称" prop="name" align="center" width="120"></el-table-column>
<el-table-column label="区域代码" prop="areaCode" align="center" width="120"></el-table-column>
<el-table-column label="场站ID" prop="stationId" align="center" width="120"></el-table-column>
<el-table-column label="关区代码" prop="customsCode" align="center" width="120"></el-table-column>
<el-table-column label="备注信息" prop="remarks" align="center" width="200"></el-table-column>
<el-table-column label="操作" width="140px" align="center">
<template slot-scope="scope">
<el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false">
<el-button type="text" icon="el-icon-edit" size="mini"
@click="yard_toEditDialog(scope.$index,scope.row)">编辑
</el-button>
</el-tooltip>
<el-tooltip effect="dark" content="删除" placement="top-start" :enterable="false">
<el-button type="text" icon="el-icon-delete" size="mini"
:loading="yard_loading.delLoading"
@click="yard_delete(scope.$index,scope.row)">删除
</el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页区域 -->
<div style="margin-top: 10px">
<el-row :gutter="24">
<el-col :span="10" style="margin-top: 5px">
<el-pagination
@size-change="yard_handleSizeChange"
@current-change="yard_handleCurrentChange"
:current-page="yard_queryInfo.pageNum"
:page-sizes="[10,30,50,100]"
:page-size="yard_queryInfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="yard_page.total">
</el-pagination>
</el-col>
</el-row>
</div>
</el-card>
<!-- 场站添加 -->
<div>
<el-dialog title="场站添加："
:visible.sync="yard_dialog.addDialog"
style="margin-top: -80px" text-align="center" width="60%"
@close="yard_addDialogClosed">
<el-form :inline="true" label-width="150px" status-icon style="margin-top: -10px;" align="center"
:model="yard_addForm" :rules="yard_addFormRules" ref="yard_addFormRef">
<el-form-item label="场站名称：" prop="name">
<el-input v-model="yard_addForm.name" style="width:300px" size="mini" clearable
placeholder="请输入场站名称">
</el-input>
</el-form-item>
<el-form-item label="区域代码：" prop="areaCode">
<el-input v-model="yard_addForm.areaCode" style="width:300px" size="mini" clearable
placeholder="请输入区域代码">
</el-input>
</el-form-item>
<el-form-item label="场站ID：" prop="stationId">
<el-input v-model="yard_addForm.stationId" style="width:300px" size="mini" clearable
placeholder="请输入场站ID">
</el-input>
</el-form-item>
<el-form-item label="关区代码：" prop="customsCode">
<el-select v-model="yard_addForm.customsCode" style="width: 300px" clearable size="small"
placeholder="请选择关区代码">
<el-option
v-for="item in customsCodeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="备注信息：" prop="remarks">
<el-input v-model="yard_addForm.remarks" style="width:300px" clearable size="mini"
type="textarea" :rows="5">
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -30px">
<el-button type="info" @click="yard_dialog.addDialog = false" size="medium"
style="width: 100px">取消
</el-button>
<el-button type="primary" @click="yard_add" :loading="yard_loading.addLoading"
size="medium" style="width: 100px">保存
</el-button>
</div>
</el-dialog>
</div>
<!-- 场站修改 -->
<div>
<el-dialog title="场站修改："
:visible.sync="yard_dialog.editDialog"
style="margin-top: -80px" text-align="center" width="60%"
@close="yard_editDialogClosed">
<el-form :inline="true" label-width="150px" status-icon style="margin-top: -10px;" align="center"
:model="yard_editForm" :rules="yard_editFormRules" ref="yard_editFormRef">
<el-form-item label="场站名称：" prop="name">
<el-input v-model="yard_editForm.name" style="width:300px" size="mini" clearable
placeholder="请输入场站名称">
</el-input>
</el-form-item>
<el-form-item label="区域代码：" prop="areaCode">
<el-input v-model="yard_editForm.areaCode" style="width:300px" size="mini" clearable
placeholder="请输入区域代码">
</el-input>
</el-form-item>
<el-form-item label="场站ID：" prop="stationId">
<el-input v-model="yard_editForm.stationId" style="width:300px" size="mini" clearable
placeholder="请输入场站ID">
</el-input>
</el-form-item>
<el-form-item label="关区代码：" prop="customsCode">
<el-select v-model="yard_editForm.customsCode" style="width: 300px" clearable size="small"
placeholder="请选择关区代码">
<el-option
v-for="item in customsCodeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="备注信息：" prop="remarks">
<el-input v-model="yard_editForm.remarks" style="width:300px" clearable size="mini"
type="textarea" :rows="5">
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -30px">
<el-button type="info" @click="yard_dialog.editDialog = false" size="medium"
style="width: 100px">取消
</el-button>
<el-button type="primary" @click="yard_edit" :loading="yard_loading.editLoading"
size="medium" style="width: 100px">保存
</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import {selectYardList, insertYard, updateYard, deleteYard} from "../../api/station_dispatch";
export default {
name: "Yard",
data() {
return {
/**
* 搜索参数
*/
yard_queryInfo: {
// 场站名称
name: '',
customsCode: undefined,
// 当前页数
pageNum: 1,
// 每页大小
pageSize: 10,
},
/**
* yard，分页
*/
yard_page: {
yardList: [],
total: 0,
selectList: [],
},
/**
* 加载
*/
yard_loading: {
listLoading: false,
addLoading: false,
editLoading: false,
delLoading: false,
batchDelLoading: false,
},
/**
* 对话框
*/
yard_dialog: {
addDialog: false,
editDialog: false,
},
/**
* 备案添加，表单
*/
yard_addForm: {
// 场站名称
name: '',
// 区域代码
areaCode: '',
// 场站ID
stationId: '',
// 关区代码
customsCode: undefined,
// 备注信息
remarks: '',
},
customsCodeList: [
{
value: 4604,
label: '4604'
},
{
value: 4620,
label: '4620'
},
],
/**
* 备案添加，表单验证规则
*/
yard_addFormRules: {
name: [
{required: true, message: '请输入场站名称', trigger: ['blur', 'change']},
],
},
/**
* 备案修改，表单
*/
yard_editForm: {},
/**
* 备案修改，表单验证规则
*/
yard_editFormRules: {
name: [
{required: true, message: '请输入场站名称', trigger: ['blur', 'change']},
],
},
}
},
methods: {
/**
* 分页查询，监听 pageSize 改变的事件
* 刷新列表
*/
yard_handleSizeChange(newSize) {
this.yard_queryInfo.pageSize = newSize;
this.yard_getList();
},
/**
* 分页查询，监听 pageNum 改变的事件
* 刷新列表
*/
yard_handleCurrentChange(newPage) {
this.yard_queryInfo.pageNum = newPage;
this.yard_getList();
},
/**
* 列表查询
*/
yard_getList() {
this.yard_loading.listLoading = true;
selectYardList(this.yard_queryInfo).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.yard_loading.listLoading = false;
return this.$message.error(res.msg);
}
this.yard_page.yardList = res.data.list;
this.yard_page.total = res.data.total;
this.yard_loading.listLoading = false;
}).catch(error => {
this.yard_loading.listLoading = false;
this.$message.error(error.toString());
});
},
/**
* 对话框，备案添加，打开事件
*/
yard_toAddDialog() {
this.yard_dialog.addDialog = true;
},
/**
* 对话框，备案添加，关闭事件
*/
yard_addDialogClosed() {
this.$refs.yard_addFormRef.resetFields();
},
/**
* 备案添加
*/
yard_add() {
this.$refs.yard_addFormRef.validate(valid => {
// 未通过，表单预校验
if (!valid) return;
// 通过，表单预检验
this.yard_loading.addLoading = true;
insertYard(this.yard_addForm).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.yard_loading.addLoading = false;
return this.$message.error(res.msg);
}
this.$message.success(res.msg);
this.yard_loading.addLoading = false;
this.yard_dialog.addDialog = false;
this.yard_getList();
}).catch(error => {
this.yard_loading.addLoading = false;
this.$message.error(error.toString());
});
})
},
/**
* 备案修改，对话框，打开事件
*/
yard_toEditDialog(index, row) {
this.yard_editForm = Object.assign({}, row);
this.yard_dialog.editDialog = true;
},
/**
* 备案修改，对话框，关闭事件
*/
yard_editDialogClosed() {
this.$refs.yard_editFormRef.resetFields();
},
/**
* 备案修改
*/
yard_edit() {
this.$refs.yard_editFormRef.validate(valid => {
// 未通过，表单预校验
if (!valid) return;
this.yard_loading.editLoading = true;
updateYard(this.yard_editForm).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.yard_loading.editLoading = false;
return this.$message.error(res.msg);
}
this.$message.success(res.msg);
this.yard_loading.editLoading = false;
this.yard_dialog.editDialog = false;
this.yard_getList();
}).catch(error => {
this.yard_loading.editLoading = false;
this.$message.error(error.toString());
});
})
},
/**
* 删除功能
*/
yard_delete(index, row) {
this.$confirm('此操作永久删除该场站信息, 是否继续?', '警告', {
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
this.yard_loading.delLoading = true;
deleteYard(row).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.yard_loading.delLoading = false;
return this.$message.error(res.msg);
}
this.yard_loading.delLoading = false;
this.$message.success(res.msg);
this.yard_getList();
}).catch(error => {
this.yard_loading.delLoading = false;
this.$message.error(error.toString());
});
}).catch(() => {
});
},
},
}
</script>
<style scoped>
</style>
\ No newline at end of file
... ...