<template>
<div>
<el-card style="background-color: #F5F7FA">
<!-- 搜素区域 -->
<div>
<el-row :gutter="10">
<el-col :span="5">
<el-input v-model="warehouse_queryInfo.stationName" prefix-icon="el-icon-search" size="small"
placeholder="场站名称" clearable></el-input>
</el-col>
<el-col :span="5">
<el-input v-model="warehouse_queryInfo.name" prefix-icon="el-icon-search" size="small"
placeholder="仓库名称" clearable></el-input>
</el-col>
<el-col :span="5">
<el-button type="success" style="width:120px" size="small" @click="warehouse_getList">
查询
</el-button>
</el-col>
<el-col :span="5">
<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
style="border-radius: 10px 10px 0px 0px;line-height: 25px;"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
tooltip-effect="dark"
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="操作" 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 style="margin-left: 1190px"></div>
</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>