Commit 855ef303 by huangqy

222

parent 4b4a3b8b
......@@ -388,11 +388,11 @@
<el-dialog :append-to-body="true"
:title="title"
:visible.sync="dialogVisible"
width="700px"
width="650px"
:close-on-click-modal="false"
@close="addClose()"
>
<el-form :model="setFormData" :rules="setFormDataRules" ref="setFromRef" size="medium" label-position="right" label-width="90px">
<el-form :model="setFormData" :rules="setFormDataRules" ref="setFromRef" size="medium" label-width="90px">
<el-form-item label="状态 :" prop="rackStatus">
<el-select
......
......@@ -3,53 +3,36 @@
<div class="body" :style="'height:' + height + 'px'">
<div style="border: 2px solid #43A747;">
<el-card :style="'height:' + (height - 60) + 'px;overflow-y: auto;position:relative;'">
<el-radio-group v-model="layer" size="small">
<el-radio-group v-model="layer" size="small" @change="changeLayer">
<el-radio-button v-for="item in layerList" :key="item.vlayer" :label="'第' + item.vlayer + '层'"></el-radio-button>
</el-radio-group>
<el-row>
<el-col :span="18">
<el-card style="height: 620px; overflow: auto;">
<!-- <grid-layout
:layout.sync="layout"
:col-num="this.maxRank"
:row-height="20"
:is-draggable="false"
:is-resizable="false"
:is-mirrored="false"
:vertical-compact="true"
:margin="[10, 10]"
:use-css-transforms="true"
>
<grid-item v-for="item in layout"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
:key="item.i">
{{item.i}}
</grid-item>
</grid-layout> -->
<ul :style="'grid-template-columns: repeat('+ (this.maxRank + 1) +', 3%);margin-right: 20px;'">
<li id="box" v-for="item in this.maxRank * (this.maxRow + 1)" :key="item"><span v-if="item-1 !==0">{{ item - 1 < 53 ? (item - 1) : ((item - 1) % 52) }}</span></li>
<div v-for="(item,index) in this.ArrayListX" :key="index">
<ul :style="'grid-template-columns: repeat('+ item.length +', 4%);'" >
<li v-for="(items,k) in item" :key="k+''+index" @click="onClick(items)" :class="items.x === 0 || items.y === 0 ? 'box' : items.status === 'E' ? 'boxE' : items.status === 'P' ? 'boxP': items.status === 'F' ? 'boxF' : items.status === 'A' ? 'boxA' : items.status === 'W' ? 'boxW' : items.status === 'C' ? 'boxC' : '' ">
{{ items.x === 0 ? items.y : items.y ===0 ? items.x : ''}}
</li>
</ul>
</div>
</el-card>
</el-col>
<el-col :push="1" :span="5">
<el-card>
<el-descriptions title="库位使用率" :column="1" border>
<el-descriptions-item label="使用率">48.48%</el-descriptions-item>
<el-descriptions-item label="空闲库位">1082</el-descriptions-item>
<el-descriptions-item label="已用库位">1018</el-descriptions-item>
<el-descriptions-item label="使用率">{{rightForm.percentage}}</el-descriptions-item>
<el-descriptions-item label="空闲库位">{{rightForm.unUseCount}}</el-descriptions-item>
<el-descriptions-item label="已用库位">{{rightForm.useCount}}</el-descriptions-item>
</el-descriptions>
<el-descriptions title="库存信息" :column="1" border style="margin-top:1px;">
<el-descriptions-item label="库位编号">011111</el-descriptions-item>
<el-descriptions-item label="物料名称">0</el-descriptions-item>
<el-descriptions-item label="物料编号">0</el-descriptions-item>
<el-descriptions-item label="托盘号">0</el-descriptions-item>
<el-descriptions-item label="数量">0</el-descriptions-item>
<el-descriptions-item label="单位">0</el-descriptions-item>
<el-descriptions-item label="库位编号">{{rightForm.positionCode}}</el-descriptions-item>
<el-descriptions-item label="物资名称">{{rightForm.goodsName}}</el-descriptions-item>
<el-descriptions-item label="物资编码">{{rightForm.goodsCode}}</el-descriptions-item>
<el-descriptions-item label="规格">{{rightForm.modelName}}</el-descriptions-item>
<el-descriptions-item label="托盘号">{{rightForm.palletId}}</el-descriptions-item>
<el-descriptions-item label="数量">{{rightForm.qty}}</el-descriptions-item>
<el-descriptions-item label="单位">{{rightForm.fwOrgName}}</el-descriptions-item>
</el-descriptions>
</el-card>
</el-col>
......@@ -61,50 +44,19 @@
</template>
<script>
import VueGridLayout from 'vue-grid-layout';
var testLayout = [
{"x":0,"y":0,"w":1,"h":1,"i":"0"},
{"x":2,"y":0,"w":1,"h":1,"i":"1"},
{"x":4,"y":0,"w":1,"h":1,"i":"2"},
{"x":6,"y":0,"w":1,"h":1,"i":"3"},
{"x":8,"y":0,"w":1,"h":1,"i":"4"},
{"x":10,"y":0,"w":1,"h":1,"i":"5"},
{"x":0,"y":5,"w":1,"h":1,"i":"6"},
{"x":2,"y":5,"w":1,"h":1,"i":"7"},
{"x":4,"y":5,"w":1,"h":1,"i":"8"},
{"x":6,"y":3,"w":1,"h":1,"i":"9"},
{"x":8,"y":4,"w":1,"h":1,"i":"10"},
{"x":10,"y":4,"w":1,"h":1,"i":"11"},
{"x":0,"y":10,"w":1,"h":1,"i":"12"},
{"x":2,"y":10,"w":1,"h":1,"i":"13"},
{"x":4,"y":8,"w":1,"h":1,"i":"14"},
{"x":6,"y":8,"w":1,"h":1,"i":"15"},
{"x":8,"y":10,"w":1,"h":1,"i":"16"},
{"x":10,"y":4,"w":1,"h":1,"i":"17"},
{"x":0,"y":9,"w":1,"h":1,"i":"18"},
{"x":2,"y":6,"w":1,"h":1,"i":"19"}
];
export default {
data () {
return {
height: document.documentElement.clientHeight - 176,
layer: '',
layerList: [],
maxRow: '',
maxRank: '',
// 布局位置数据
layout: testLayout,
// 布局二维数组地图
layoutMap: [],
// 布局列数
layoutColNum: 50
xyData: [],
maxXy: {},
ArrayListX:[],
ArrayListY:[],
rightForm: {}
}
},
components: {
GridLayout: VueGridLayout.GridLayout,
GridItem: VueGridLayout.GridItem
},
created () {
this.getStoreLayer()
},
......@@ -122,8 +74,55 @@ export default {
if (res.code !== 99200) return this.$message.error(res.message)
this.layerList = res.data
this.layer = '第' + res.data[0].vlayer + '层'
this.maxRank = res.data[0].maxRank
this.maxRow = res.data[0].maxRow
await this.getRackByLayer()
for(var i=0;i<=res.data[0].maxRow;i++){
this.ArrayListY = [];
for(var j=0;j<=res.data[0].maxRank;j++){
this.ArrayListY.push({x: j, y: i, status: this.findStatus(j, i), positionCode: this.findPositionCode(j, i) });
}
this.ArrayListX.push(this.ArrayListY);
}
},
async getRackByLayer() {
const {data: res} = await this.$axios.get('/summary/getRackByLayer?VLayer=' + this.layer.substring(1,2))
if (res.code !== 99200) return this.$message.error(res.message)
this.xyData = res.data.map(i => {
return {vrank: i.vrank,vrow: i.vrow,status: i.status, positionCode: i.positionCode}
})
},
findStatus(x, y) {
var resA = this.xyData.filter(i => i.vrank === x)
if (resA) {
if (resA.find(j => j.vrow === y)) {
return resA.find(j => j.vrow === y).status
}
}
return '';
},
findPositionCode(x, y) {
var resA = this.xyData.filter(i => i.vrank === x)
if (resA) {
if (resA.find(j => j.vrow === y)) {
return resA.find(j => j.vrow === y).positionCode
}
}
return '';
},
async changeLayer() {
await this.getRackByLayer()
this.ArrayListX = []
for(var i=0;i<=this.layerList[this.layer.substring(1,2) - 1].maxRow;i++){
this.ArrayListY = [];
for(var j=0;j<=this.layerList[this.layer.substring(1,2) -1].maxRank;j++){
this.ArrayListY.push({x: j, y: i, status: this.findStatus(j, i), positionCode: this.findPositionCode(j, i)});
}
this.ArrayListX.push(this.ArrayListY);
}
},
async onClick(items) {
const {data: res} = await this.$axios.get('/summary/getRackDetail?VLayer=' + this.layer.substring(1,2) + '&positionCode=' + items.positionCode+ '&storeCode=' + JSON.parse(sessionStorage.getItem('storeList')))
if (res.code !== 99200) return this.$message.error(res.message)
this.rightForm = res.data
}
}
......@@ -137,38 +136,52 @@ export default {
align-items: center;
margin-bottom: 1px;
border: 1px solid rgb(235,238,245);
height: 55px;
}
ul {
list-style: none;
display: grid;
grid-row-gap: 5px;
grid-column-gap: 5px;
margin-bottom: 5px;
grid-row-gap: 10px;
grid-column-gap: 10px;
margin-bottom: 10px;
}
li{
font-size: 1em;
text-align: center;
border: 1px solid #e5e4e9;
}
#box {
li {
font-size: 1em;
line-height: 40px;
text-align: center;
cursor:pointer
}
#box1 {
background-color: #d0e4a9;
.box {
border: 2px solid #e5e4e9;
}
#box2 {
.boxE {
background-color: #d0e4a9;
border: 2px solid #e5e4e9;
}
.boxP {
background-color: #0376c2;
border: 2px solid #e5e4e9;
}
#box3 {
background-color: #8cacea;
.boxF {
background-color: #8cacea;
border: 2px solid #e5e4e9;
}
.vue-grid-item.cssTransforms {
border: 1px solid #0376c2;
.boxA {
background-color: greenyellow;
border: 2px solid #e5e4e9;
}
.boxW {
background-color: red;
border: 2px solid #e5e4e9;
}
.boxC {
background-color: #FF8833;
border: 2px solid #e5e4e9;
}
</style>
......@@ -81,13 +81,18 @@
<el-dialog :append-to-body="true" :title="title" :visible.sync="addFlag" width="20%" @close="addClose()" :close-on-click-modal="false">
<!-- 表单区域 -->
<el-form :model="formData" :rules="setFormDataRules" ref="setFromRef" label-width="100px">
<el-form-item label="巷道 :" prop="vAisle">
<!-- <el-form-item label="巷道 :" prop="vAisle">
<el-input
clearable
style="width: 60%"
placeholder="请输入巷道"
v-model="formData.vAisle"
/>
</el-form-item> -->
<el-form-item label="区 :" prop="areaCode">
<el-select v-model="formData.areaCode" placeholder="请选择区域" style="width: 60%">
<el-option v-for="area in areaList" :key="area" :label="area" :value="area"></el-option>
</el-select>
</el-form-item>
<el-form-item label="层 :" prop="vLayer">
<el-input
......@@ -97,6 +102,14 @@
v-model="formData.vLayer"
/>
</el-form-item>
<el-form-item label="列 :" prop="vRank">
<el-input
clearable
style="width: 60%"
placeholder="请输入列"
v-model="formData.vRank"
/>
</el-form-item>
</el-form>
<!-- 按钮区域 -->
<span slot="footer" class="dialog-footer">
......@@ -118,17 +131,23 @@ export default {
rodaData: [],
// 表单验证规则
setFormDataRules: {
vAisle: [
areaCode: [
{ required: true, message: '此项为必填项', trigger: 'blur' }
],
vRank: [
{ required: true, message: '此项为必填项', trigger: 'blur' },
],
vLayer: [
{ required: true, message: '此项为必填项', trigger: 'blur' },
],
},
formData: {},
formData: {
vAisle: 1
},
title: '',
// 操作区域-添加弹框
addFlag: false,
areaList: [],
// 筛选数据
searchData: {
......@@ -155,32 +174,36 @@ export default {
methods: {
//查询条件添加回车键
onEnterPress() {
this.getWorkData()
},
this.getWorkData()
},
// 抽检
takeCheck () {
this.title = '巷道抽检'
this.addFlag = true
this.getAllAreaCode()
},
async getAllAreaCode() {
const { data: res } = await this.$axios.get('/storeInv/getAllAreaCode')
if (res.code !== 99200) return this.$message(res.message)
this.areaList = res.data
},
// 取消弹窗事件
addClose () {
this.$refs.setFromRef.resetFields()
this.formData = {
vAisle: 1
}
},
// 确认提交
addClick () {
// 添加
this.$confirm('此操作将抽检, 是否抽检'+ this.formData.vAisle + '巷道' + this.formData.vLayer + '层', '提示', {
this.$confirm('此操作将抽检, 是否抽检'+ this.formData.vLayer + '层', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
const { data: res } = await this.$axios.get('/storeInv/aisleOutStore', {
params: {
vAisle: this.formData.vAisle,
vLayer: this.formData.vLayer
}
})
const { data: res } = await this.$axios.get('/storeInv/aisleOutStore', {params: this.formData})
if (res.code !== 99200) return this.$message.error(res.message)
this.$message.success(res.message)
// 创建成功关闭弹出框
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论