|
@@ -1,21 +1,70 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
- <div>
|
|
|
+ <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
+ <el-form-item label="仓库" prop="warehouseId">
|
|
|
+ <el-select v-model="queryParams.warehouseId" placeholder="请选择所属仓库" clearable size="small" style="width: 100%">
|
|
|
+ <el-option
|
|
|
+ v-for="dict in this.warehouseCombo"
|
|
|
+ :key="dict.warehouseId"
|
|
|
+ :label="dict.warehouseName"
|
|
|
+ :value="dict.warehouseId"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="区域" prop="zoneId">
|
|
|
+ <el-select v-model="queryParams.zoneId" placeholder="请选择库区" clearable size="small" style="width: 100%">
|
|
|
+ <el-option
|
|
|
+ v-for="dict in this.locationZoneCombo"
|
|
|
+ :key="dict.zoneId"
|
|
|
+ :label="dict.zoneName"
|
|
|
+ :value="dict.zoneId"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-row>
|
|
|
+ <right-toolbar :showSearch.sync="showSearch" @queryTable="init"></right-toolbar>
|
|
|
+ </el-row>
|
|
|
+ <div style="overflow-scrolling: auto">
|
|
|
<ul class="wall-row"
|
|
|
- :style="{'width':(this.tableAttr.cols * 39)+'px', 'height':(this.tableAttr.rows * 40) + 'px'}">
|
|
|
+ :style="{'width':(this.tableAttr.cols * 130)+'px', 'height':(this.tableAttr.rows * 80) + 'px'}">
|
|
|
<li
|
|
|
v-for="(item, index) in divList"
|
|
|
:key="index"
|
|
|
- @click="selected"
|
|
|
- >{{item.locationNo}}
|
|
|
+ @click="selected">
|
|
|
+ <div v-if="!item.locationNo" style="background-color: #fff;"><!--空格没有的库位--></div>
|
|
|
+ <div class="div" v-else-if="item.stockStatus === '10'" style="background-color: yellow">
|
|
|
+ <div style="text-align: center;font-weight: bold;">{{item.locationNo}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="div" v-else style="background-color: #ebf0f4">
|
|
|
+ <div style="text-align: center;font-weight: bold;">{{item.locationNo}}</div>
|
|
|
+ <div v-if="item.sku">物料:{{item.sku}}</div>
|
|
|
+ <div v-if="item.sku">数量:{{item.qty}}</div>
|
|
|
+ </div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
+ <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
|
|
+ <el-form>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="lockLoc()">锁定/解锁</el-button>
|
|
|
+ <el-button type="primary" @click="occupyLoc()">占用</el-button>
|
|
|
+ <el-button type="primary" @click="clearLoc()">清空</el-button>
|
|
|
+ <!--<el-button type="primary" @click="submitForm">初始化一个空托盘</el-button>-->
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {locationView} from "@/api/ams/locationView";
|
|
|
+ import { locationView, lockLoc, occupyLoc, clearLoc} from "@/api/ams/locationView";
|
|
|
+ import { queryLocationZoneDict } from "@/api/base/locationZone";
|
|
|
+ import { queryWarehouseDict } from "@/api/base/warehouse";
|
|
|
|
|
|
export default {
|
|
|
name: "LocationView",
|
|
@@ -24,6 +73,8 @@
|
|
|
divList: [],
|
|
|
// 遮罩层
|
|
|
loading: true,
|
|
|
+ showSearch: true,
|
|
|
+ open: false,
|
|
|
// 查询参数
|
|
|
queryParams: {
|
|
|
zoneId: 2,
|
|
@@ -36,45 +87,58 @@
|
|
|
tableAttr: {
|
|
|
rows: 3,
|
|
|
cols: 3
|
|
|
- }
|
|
|
+ },
|
|
|
+ currentSelect: null,
|
|
|
+ locationZoneCombo: [],
|
|
|
+ warehouseCombo: []
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
this.init();
|
|
|
+ this.search();
|
|
|
},
|
|
|
methods: {
|
|
|
init() {
|
|
|
+ queryWarehouseDict().then(response => {
|
|
|
+ this.warehouseCombo = response.data
|
|
|
+ });
|
|
|
+ queryLocationZoneDict().then(response => {
|
|
|
+ this.locationZoneCombo = response.data
|
|
|
+ });
|
|
|
+ },
|
|
|
+ search() {
|
|
|
locationView(this.queryParams).then(response => {
|
|
|
let data = response.data
|
|
|
this.tableAttr.rows = data.rows
|
|
|
this.tableAttr.cols = data.cols
|
|
|
this.divList = data.locationViewInfoVOList
|
|
|
})
|
|
|
+ },
|
|
|
+ selected(item) {
|
|
|
+ this.currentSelect = item.id
|
|
|
+ this.open = true;
|
|
|
+ },
|
|
|
+ handleQuery() {
|
|
|
+ this.search()
|
|
|
+ },
|
|
|
+ resetQuery() {
|
|
|
+ this.resetForm("queryForm");
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ lockLoc() {
|
|
|
+
|
|
|
+ },
|
|
|
+ occupyLoc() {
|
|
|
+
|
|
|
+ },
|
|
|
+ clearLoc() {
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="css">
|
|
|
- .custom-style {
|
|
|
- position: absolute;
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- height: 440px;
|
|
|
- width: 400px;
|
|
|
- left: 50%;
|
|
|
- top: 50%;
|
|
|
- margin-left: -200px;
|
|
|
- margin-top: -210px;
|
|
|
- }
|
|
|
-
|
|
|
- .word {
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
- height: 20px;
|
|
|
- font-size: 13px;
|
|
|
- background-color: #e2eef6;
|
|
|
- }
|
|
|
|
|
|
.word span {
|
|
|
line-height: 20px;
|
|
@@ -82,8 +146,6 @@
|
|
|
}
|
|
|
|
|
|
.wall-row {
|
|
|
- width: 400px;
|
|
|
- height: 400px;
|
|
|
padding: 0;
|
|
|
margin: 0;
|
|
|
display: block;
|
|
@@ -92,23 +154,16 @@
|
|
|
|
|
|
.wall-row li {
|
|
|
list-style: none;
|
|
|
- width: 39px;
|
|
|
- height: 40px;
|
|
|
+ width: 130px;
|
|
|
+ height: 80px;
|
|
|
border: 0.5px solid #fff;
|
|
|
float: left;
|
|
|
- background-color: #ebf0f4;
|
|
|
- }
|
|
|
-
|
|
|
- .wall-row .bgColor {
|
|
|
- background-color: #00b4ff;
|
|
|
}
|
|
|
|
|
|
- .word-cancel {
|
|
|
- width: 100%;
|
|
|
- height: 20px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
+ .div {
|
|
|
+ width:130px;
|
|
|
+ height:80px;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
|
|
|
</style>
|