JNBusiness/ruoyi-ui/src/views/storageLocation/locationConsuming.vue

630 lines
26 KiB
Vue

<template>
<div>
<el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: 15px; margin-right: 15px;">
<el-tab-pane label="库位查看" name="locationShow">
<el-row :gutter="10" style="letter-spacing: 5px;">
<el-col :span="8">
<div class="grid-content bg-purpleA" @click="refresh()">黄色线芯A区(可用{{countA}})</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purpleB" @click="refresh()">绿色线芯B区(可用{{countB}})</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purpleC" @click="refresh()">红色线芯C区(可用{{countC}})</div>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="8">
<el-card class="box-card lyScrollable" :style="{'overflow': 'auto','max-height': lyScrollableHeight}">
<el-descriptions border :column="2" size="small" :style="index==0?'': 'margin-top :15px'" v-for="(item,index) in materialDetailA" :key="item.materialBh">
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
库位
</template>
<el-link class="kw" :underline="false" type="primary" @click="operlogdialog(item.materialBh)">{{item.materialBh}}</el-link>
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
状态
</template>
<span v-if = "item.materialState=='0'">
<el-tag size="mini" type="success">空闲</el-tag>
</span>
<span v-if = "item.materialState=='1'">
<el-tag size="mini" type="danger" @click="selectLocation(item)">可用</el-tag>
</span>
</el-descriptions-item>
<el-descriptions-item :span="2" :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
指令号
</template>
{{item.materialZlh}}
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
型号
</template>
{{item.materialXingh}}
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
规格
</template>
{{item.materialGuig}}
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
电压
</template>
{{item.materialDiany}}
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
米数
</template>
{{item.materialMs}}
</el-descriptions-item>
</el-descriptions>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="box-card lyScrollable" :style="{'overflow': 'auto','max-height': lyScrollableHeight}">
<el-descriptions border :column="2" size="small" :style="index==0?'': 'margin-top :12px'" v-for="(item,index) in materialDetailB" :key="item.materialBh">
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
库位
</template>
<el-link class="kw" :underline="false" type="primary" @click="operlogdialog(item.materialBh)">{{item.materialBh}}</el-link>
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
状态
</template>
<span v-if = "item.materialState=='0'">
<el-tag size="mini" type="success">空闲</el-tag>
</span>
<span v-if = "item.materialState=='1'">
<el-tag size="mini" type="danger" @click="selectLocation(item)">可用</el-tag>
</span>
</el-descriptions-item>
<el-descriptions-item :span="2" :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
指令号
</template>
{{item.materialZlh}}
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
型号
</template>
{{item.materialXingh}}
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
规格
</template>
{{item.materialGuig}}
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
电压
</template>
{{item.materialDiany}}
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
米数
</template>
{{item.materialMs}}
</el-descriptions-item>
</el-descriptions>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="box-card lyScrollable" :style="{'overflow': 'auto','max-height': lyScrollableHeight}">
<el-descriptions border :column="2" size="small" :style="index==0?'': 'margin-top :12px'" v-for="(item,index) in materialDetailC" :key="item.materialBh">
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
库位
</template>
<el-link class="kw" :underline="false" type="primary" @click="operlogdialog(item.materialBh)">{{item.materialBh}}</el-link>
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
状态
</template>
<span v-if = "item.materialState=='0'">
<el-tag size="mini" type="success">空闲</el-tag>
</span>
<span v-if = "item.materialState=='1'">
<el-tag size="mini" type="danger" @click="selectLocation(item)">可用</el-tag>
</span>
</el-descriptions-item>
<el-descriptions-item :span="2" :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
指令号
</template>
{{item.materialZlh}}
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
型号
</template>
{{item.materialXingh}}
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
规格
</template>
{{item.materialGuig}}
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
电压
</template>
{{item.materialDiany}}
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
米数
</template>
{{item.materialMs}}
</el-descriptions-item>
</el-descriptions>
</el-card>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="已选库位" name="locationSelected">
<el-row :gutter="10" style="letter-spacing: 5px;">
<el-col :span="8">
<div class="grid-content bg-purpleA">黄色线芯A区(已选{{countSelA}})</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purpleB">绿色线芯B区(已选{{countSelB}})</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purpleC">红色线芯C区(已选{{countSelC}})</div>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="8">
<el-card class="box-card selScrollable" :style="{'overflow': 'auto','max-height': selScrollableHeight}">
<el-descriptions border :column="2" size="small" :style="index==0?'': 'margin-top :15px'" v-for="(item,index) in selMaterialDetailA" :key="item.materialBh">
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
库位
</template>
<el-link class="kw" :underline="false" type="primary">{{item.materialBh}}</el-link>
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
操作
</template>
<el-button type="danger" icon="el-icon-delete" size="mini" circle @click="del(item)"></el-button>
</el-descriptions-item>
<el-descriptions-item :span="2" :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
指令号
</template>
{{item.materialZlh}}
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
型号
</template>
{{item.materialXingh}}
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
规格
</template>
{{item.materialGuig}}
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
电压等级
</template>
{{item.materialDiany}}
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
米数
</template>
{{item.materialMs}}
</el-descriptions-item>
</el-descriptions>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="box-card selScrollable" :style="{'overflow': 'auto','max-height': selScrollableHeight}">
<el-descriptions border :column="2" size="small" :style="index==0?'': 'margin-top :12px'" v-for="(item,index) in selMaterialDetailB" :key="item.materialBh">
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
库位
</template>
<span class="kw">{{item.materialBh}}</span>
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
操作
</template>
<el-button type="danger" icon="el-icon-delete" size="mini" circle @click="del(item)"></el-button>
</el-descriptions-item>
<el-descriptions-item :span="2" :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
指令号
</template>
{{item.materialZlh}}
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
型号
</template>
{{item.materialXingh}}
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
规格
</template>
{{item.materialGuig}}
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
电压等级
</template>
{{item.materialDiany}}
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
米数
</template>
{{item.materialMs}}
</el-descriptions-item>
</el-descriptions>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="box-card selScrollable" :style="{'overflow': 'auto','max-height': selScrollableHeight}">
<el-descriptions border :column="2" size="small" :style="index==0?'': 'margin-top :12px'" v-for="(item,index) in selMaterialDetailC" :key="item.materialBh">
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
库位
</template>
<span class="kw">{{item.materialBh}}</span>
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
操作
</template>
<el-button type="danger" icon="el-icon-delete" size="mini" circle @click="del(item)"></el-button>
</el-descriptions-item>
<el-descriptions-item :span="2" :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
指令号
</template>
{{item.materialZlh}}
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
型号
</template>
{{item.materialXingh}}
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
规格
</template>
{{item.materialGuig}}
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
电压等级
</template>
{{item.materialDiany}}
</el-descriptions-item>
<el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
<template slot="label">
米数
</template>
{{item.materialMs}}
</el-descriptions-item>
</el-descriptions>
</el-card>
</el-col>
</el-row>
<el-footer style="margin:0 auto;">
<el-row type="flex" justify="center">
<el-col :span="6">
<div class="grid-content mt20">
<el-button type="primary" @click="confirm()">确认</el-button>
</div>
</el-col>
</el-row>
</el-footer>
</el-tab-pane>
</el-tabs>
<!-- 操作详情对话框 -->
<el-dialog :title="operlogTitle" :visible.sync="operlogOpen" width="1200px" append-to-body>
<operlog :materialBhProp="materialBhProp"></operlog>
</el-dialog>
</div>
</template>
<style>
/*库位号样式*/
.kw{
font-size: 15px;color: black;font-weight: bold
}
/* 修改标签本身的样式 */
.el-tag:hover {
cursor: pointer; /* 将鼠标形状改为指针形状 */
}
/*卡片内容滚动条设置*/
.lyScrollable::-webkit-scrollbar {
display: none; /* 对于Webkit浏览器 */
}
.selScrollable::-webkit-scrollbar {
display: none; /* 对于Webkit浏览器 */
}
/*最上方三大块样式*/
.grid-content {
border-radius: 4px;
min-height: 36px;
display: flex; /* 设置为 Flexbox */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
cursor: pointer; /* 将鼠标形状改为指针形状 */
}
.bg-purpleA {
background: #e6a700;
color: white;
font-weight: bold
}
.bg-purpleB {
background: green;
color: white;
font-weight: bold
}
.bg-purpleC {
background: red;
color: white;
font-weight: bold
}
</style>
<script>
import { listStorageLocation, checkStorageLocation,clearLocationLyCacheKey, confirmStorageLocation } from "@/api/storageLocation/storageConsuming";
import operlog from "@/views/storageLocation/operlog.vue";
export default {
name: "locationConsuming.vue",
components: {operlog},
data() {
return {
//选项卡默认
activeName: 'locationShow',
//内容高度
lyScrollableHeight: null,
selScrollableHeight: null,
//内容样式
contentStyle: {
'text-align': 'center',
'width': '150px',
'color': '#82848a',
'font-size':'12px'
},
//label样式
labelStyle: { 'width': '80px','color':'#606266','font-size':'12px' },
queryParams: {
materialBh: null,
materialZlh: null,
materialXingh: null,
materialGuig: null,
materialDiany: null,
materialMs: null
},
//库位信息数据
materialDetailA:[],
materialDetailB:[],
materialDetailC:[],
//已选库位信息数据
selMaterialDetailA:[],
selMaterialDetailB:[],
selMaterialDetailC:[],
// 操作记录弹出层标题
operlogTitle: "",
// 操作记录是否显示弹出层
operlogOpen: false,
materialBhProp: "",
// 表单参数
form: {}
}
},
created() {
/*获取库位信息*/
this.getStorageLocation();
},
mounted(){
/*设置内容高度*/
this.lyScrollableHeight = (window.innerHeight - 200) + 'px';
this.selScrollableHeight = (window.innerHeight - 250) + 'px';
},
computed:{
countA(){
// 使用 find 方法找到第一个符合条件的对象
return this.materialDetailA.filter(task => task.materialState === '1').length;
},
countB(){
// 使用 find 方法找到第一个符合条件的对象
return this.materialDetailB.filter(task => task.materialState === '1').length;
},
countC(){
// 使用 find 方法找到第一个符合条件的对象
return this.materialDetailC.filter(task => task.materialState === '1').length;
},
countSelA(){
return this.selMaterialDetailA.length;
},
countSelB(){
return this.selMaterialDetailB.length;
},
countSelC(){
return this.selMaterialDetailC.length;
}
},
methods: {
/*刷新库位信息*/
refresh(){
this.getStorageLocation();
},
/*获取库位信息*/
getStorageLocation(){
listStorageLocation(this.queryParams).then(response => {
this.materialDetailA = response.materialDetailA;
this.materialDetailB = response.materialDetailB;
this.materialDetailC = response.materialDetailC;
//已选库位数据
this.selMaterialDetailA = response.selMaterialDetailA;
this.selMaterialDetailB = response.selMaterialDetailB;
this.selMaterialDetailC = response.selMaterialDetailC;
});
},
/*===============================================领用操作==========================================*/
// Tag标签页点击事件
handleClick(tab, event) {
this.getStorageLocation();
console.log(tab, event);
},
//选择领用库位
selectLocation(item){
this.$confirm("是否选择该 "+item.materialBh+" 库位?","提示",{
iconClass: "el-icon-question",//自定义图标样式
confirmButtonText: "确认",//确认按钮文字更换
cancelButtonText: "取消",//取消按钮文字更换
showClose: false,//是否显示右上角关闭按钮
type: "warning",//提示类型 success/info/warning/error
}).then(()=>{
var materialBh = item.materialBh;
this.form.materialBh = materialBh;
//校验是否已选
var index = "";
if(materialBh.indexOf('A-')==0){
index = this.selMaterialDetailA.findIndex(item => item.materialBh === materialBh);
}
if(materialBh.indexOf('B-')==0){
index = this.selMaterialDetailB.findIndex(item => item.materialBh === materialBh);
}
if(materialBh.indexOf('C-')==0){
index = this.selMaterialDetailC.findIndex(item => item.materialBh === materialBh);
}
if (index !== -1) {
this.$message({
message: '该库位 '+ materialBh +' 已选,请勿重复选!',
type: 'error'
});
return;
}
//校验库位是否被领用
checkStorageLocation(this.form).then(response => {
/*if(materialBh.indexOf('A-')==0){
this.selMaterialDetailA.push(item)
}
if(materialBh.indexOf('B-')==0){
this.selMaterialDetailB.push(item)
}
if(materialBh.indexOf('C-')==0){
this.selMaterialDetailC.push(item)
}*/
this.$message({
message: '已成功选择库位 '+ materialBh,
type: 'success'
});
}).catch((error) => {
console.error(error);
});
}).catch(() => {
//取消操作
});
},
//删除已选库位
del(item){
var materialBh = item.materialBh;
this.form.materialBh = materialBh;
if(materialBh.indexOf('A-')==0){
const index = this.selMaterialDetailA.findIndex(item => item.materialBh === materialBh);
if (index !== -1) {
this.selMaterialDetailA.splice(index, 1);
}
}
if(materialBh.indexOf('B-')==0){
debugger
const index = this.selMaterialDetailB.findIndex(item => item.materialBh === materialBh);
if (index !== -1) {
this.selMaterialDetailB.splice(index, 1);
}
}
if(materialBh.indexOf('C-')==0){
const index = this.selMaterialDetailC.findIndex(item => item.materialBh === materialBh);
if (index !== -1) {
this.selMaterialDetailC.splice(index, 1);
}
}
//清除库位领用缓存
clearLocationLyCacheKey(this.form).then(response => {
}).catch((error) => {
console.error(error);
});
},
//确认完成认领
confirm(){
var materialBhArr = [];
this.selMaterialDetailA.forEach(function(item,index,array) {
materialBhArr.push(item.materialBh)
})
this.selMaterialDetailB.forEach(function(item,index,array) {
materialBhArr.push(item.materialBh)
})
this.selMaterialDetailC.forEach(function(item,index,array) {
materialBhArr.push(item.materialBh)
})
if(materialBhArr.length==0){
this.$message({
message: '没有选择库位领用,无法继续操作!',
type: 'error'
});
return;
}
confirmStorageLocation(materialBhArr).then(response => {
this.$modal.msgSuccess("领用成功");
this.activeName = 'locationShow';
this.getStorageLocation();
});
},
//操作详情
operlogdialog(materialBh){
this.operlogTitle = "操作记录";
this.operlogOpen = true;
this.materialBhProp = materialBh;
}
}
}
</script>