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

441 lines
16 KiB
Vue
Raw Normal View History

2024-03-15 09:24:35 +08:00
<template>
2024-03-15 11:00:31 +08:00
<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">黄色线芯A区({{countA}})</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purpleB">绿色线芯B区({{countB}})</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purpleC">红色线芯C区({{countC}})</div>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="8">
<el-card class="box-card scrollable">
<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>
<span class="kw">{{item.materialBh}}</span>
</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 scrollable">
<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>
<span class="kw">{{item.materialBh}}</span>
</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">占用</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 scrollable">
<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>
<span class="kw">{{item.materialBh}}</span>
</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">占用</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-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="库位" prop="materialBh">
<el-input v-model="form.materialBh" :disabled="true"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="指令号" prop="materialZlh">
<el-input v-model="form.materialZlh"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="型号" prop="materialXingh">
<el-input v-model="form.materialXingh" placeholder="请输入型号"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="规格" prop="materialGuig">
<el-input v-model="form.materialGuig" placeholder="请输入规格"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="电压等级" prop="materialDiany">
<el-input v-model="form.materialDiany" placeholder="请输入电压等级" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="米数" prop="materialMs">
<el-input v-model="form.materialMs" placeholder="请输入米数" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</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区({{countA}})</div>
2024-03-15 09:24:35 +08:00
</el-col>
2024-03-15 11:00:31 +08:00
<el-col :span="8">
<div class="grid-content bg-purpleB">绿色线芯B区({{countB}})</div>
2024-03-15 09:24:35 +08:00
</el-col>
2024-03-15 11:00:31 +08:00
<el-col :span="8">
<div class="grid-content bg-purpleC">红色线芯C区({{countC}})</div>
2024-03-15 09:24:35 +08:00
</el-col>
</el-row>
2024-03-15 11:00:31 +08:00
</el-tab-pane>
</el-tabs>
2024-03-15 09:24:35 +08:00
</template>
<style>
/*库位号样式*/
.kw{
font-size: 15px;color: black;font-weight: bold
}
2024-03-15 11:00:31 +08:00
/* 修改标签本身的样式 */
.el-tag:hover {
cursor: pointer; /* 将鼠标形状改为指针形状 */
}
2024-03-15 09:24:35 +08:00
/*卡片内容滚动条设置*/
::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.scrollable{
overflow: auto; /* 自动开启滚动条 */
2024-03-15 11:00:31 +08:00
max-height: 580px; /* 设置最大高度 */
2024-03-15 09:24:35 +08:00
}
/*最上方三大块样式*/
.grid-content {
border-radius: 4px;
min-height: 36px;
display: flex; /* 设置为 Flexbox */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.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, addStorageLocation, checkStorageLocation,cancelStorageLocation } from "@/api/storageLocation/storageLocation";
export default {
2024-03-15 11:00:31 +08:00
name: "locationConsuming.vue",
data() {
return {
activeName: 'locationShow',
2024-03-15 09:24:35 +08:00
2024-03-15 11:00:31 +08:00
//内容样式
contentStyle: {
'text-align': 'center',
'width': '150px'
2024-03-15 09:24:35 +08:00
},
2024-03-15 11:00:31 +08:00
//label样式
labelStyle: { 'width': '80px' },
queryParams: {
materialBh: null,
materialZlh: null,
materialXingh: null,
materialGuig: null,
materialDiany: null,
materialMs: null
2024-03-15 09:24:35 +08:00
},
2024-03-15 11:00:31 +08:00
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
//库位信息数据
materialDetailA:[],
materialDetailB:[],
materialDetailC:[],
// 表单参数
form: {},
// 表单校验
rules: {
materialZlh: [
{ required: true, message: "指令号不能为空", trigger: "blur" }
],
materialXingh: [
{ required: true, message: "型号不能为空", trigger: "blur" }
],
materialGuig: [
{ required: true, message: "规格不能为空", trigger: "blur" }
],
materialDiany: [
{ required: true, message: "电压等级不能为空", trigger: "blur" }
],
materialMs: [
{ required: true, message: "米数不能为空", trigger: "blur" }
],
2024-03-15 09:24:35 +08:00
}
2024-03-15 11:00:31 +08:00
}
},
created() {
/*获取库位信息*/
this.getStorageLocation();
},
computed:{
countA(){
// 使用 find 方法找到第一个符合条件的对象
return this.materialDetailA.filter(task => task.materialState === '0').length;
},
countB(){
// 使用 find 方法找到第一个符合条件的对象
return this.materialDetailB.filter(task => task.materialState === '0').length;
},
countC(){
// 使用 find 方法找到第一个符合条件的对象
return this.materialDetailC.filter(task => task.materialState === '0').length;
}
},
methods: {
/*获取库位信息*/
getStorageLocation(){
listStorageLocation(this.queryParams).then(response => {
this.materialDetailA = response.materialDetailA;
this.materialDetailB = response.materialDetailB;
this.materialDetailC = response.materialDetailC;
});
2024-03-15 09:24:35 +08:00
},
2024-03-15 11:00:31 +08:00
/** 打开录入弹窗 */
openDialog(item) {
//校验库位是否已占用
this.form.materialBh = item.materialBh;
checkStorageLocation(this.form).then(response => {
this.reset();
this.open = true;
this.title = "录入信息";
2024-03-15 09:24:35 +08:00
this.form.materialBh = item.materialBh;
2024-03-15 11:00:31 +08:00
}).catch((error) => {
console.error(error);
});
},
2024-03-15 09:24:35 +08:00
2024-03-15 11:00:31 +08:00
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
addStorageLocation(this.form).then(response => {
this.$modal.msgSuccess("录入成功");
this.open = false;
this.getStorageLocation();
});
}
});
},
2024-03-15 09:24:35 +08:00
2024-03-15 11:00:31 +08:00
// 取消按钮
cancel() {
cancelStorageLocation(this.form).then(response => {
this.open = false;
this.reset();
}).catch((error) => {
console.error(error);
});
2024-03-15 09:24:35 +08:00
2024-03-15 11:00:31 +08:00
},
2024-03-15 09:24:35 +08:00
2024-03-15 11:00:31 +08:00
// 表单重置
reset() {
this.form = {
materialBh: null,
materialZlh: null,
materialXingh: null,
materialGuig: null,
materialDiany: null,
materialMs: null
};
this.resetForm("form");
},
/*===============================================领用操作==========================================*/
// Tag标签页点击事件
handleClick(tab, event) {
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(()=>{
//校验库位是否被其他人领用
}).catch(() => {
//取消操作
});
2024-03-15 09:24:35 +08:00
}
}
2024-03-15 11:00:31 +08:00
}
2024-03-15 09:24:35 +08:00
</script>