'123'
This commit is contained in:
parent
5839e71a4f
commit
b862802a59
|
|
@ -0,0 +1,37 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 获取库位信息
|
||||
export function listStorageLocation(query) {
|
||||
return request({
|
||||
url: '/storageLocation/storageLocation/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 录入库位信息
|
||||
export function addStorageLocation(data) {
|
||||
return request({
|
||||
url: '/storageLocation/storageLocation',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 校验库位是否已占用
|
||||
export function checkStorageLocation(data) {
|
||||
return request({
|
||||
url: '/storageLocation/storageLocation/checkStorageLocation',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 弹窗取消按钮 清除库位缓存
|
||||
export function cancelStorageLocation(data) {
|
||||
return request({
|
||||
url: '/storageLocation/storageLocation/cancelStorageLocation',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,388 @@
|
|||
<template>
|
||||
<div style="margin-top: 5px;">
|
||||
<div style="margin-left: 5px; margin-right: 5px;">
|
||||
<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>
|
||||
<template slot="label">
|
||||
库位
|
||||
</template>
|
||||
<span class="kw">{{item.materialBh}}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :contentStyle="{'text-align': 'center'}">
|
||||
<template slot="label">
|
||||
状态
|
||||
</template>
|
||||
<span v-if = "item.materialState=='0'">
|
||||
<el-tag size="mini" type="success" @click="openDialog(item)">空闲</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">
|
||||
<template slot="label">
|
||||
型号
|
||||
</template>
|
||||
{{item.materialXingh}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :span="2">
|
||||
<template slot="label">
|
||||
规格
|
||||
</template>
|
||||
{{item.materialGuig}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
电压等级
|
||||
</template>
|
||||
{{item.materialDiany}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<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>
|
||||
<template slot="label">
|
||||
库位
|
||||
</template>
|
||||
<span class="kw">{{item.materialBh}}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :contentStyle="{'text-align': 'center'}">
|
||||
<template slot="label">
|
||||
状态
|
||||
</template>
|
||||
<span v-if = "item.materialState=='0'">
|
||||
<el-tag size="mini" type="success" @click="openDialog(item)">空闲</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">
|
||||
<template slot="label">
|
||||
型号
|
||||
</template>
|
||||
{{item.materialXingh}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :span="2">
|
||||
<template slot="label">
|
||||
规格
|
||||
</template>
|
||||
{{item.materialGuig}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
电压等级
|
||||
</template>
|
||||
{{item.materialDiany}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<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>
|
||||
<template slot="label">
|
||||
库位
|
||||
</template>
|
||||
<span class="kw">{{item.materialBh}}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :contentStyle="{'text-align': 'center'}">
|
||||
<template slot="label">
|
||||
状态
|
||||
</template>
|
||||
<span v-if = "item.materialState=='0'">
|
||||
<el-tag size="mini" type="success" @click="openDialog(item)">空闲</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">
|
||||
<template slot="label">
|
||||
型号
|
||||
</template>
|
||||
{{item.materialXingh}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :span="2">
|
||||
<template slot="label">
|
||||
规格
|
||||
</template>
|
||||
{{item.materialGuig}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
电压等级
|
||||
</template>
|
||||
{{item.materialDiany}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
米数
|
||||
</template>
|
||||
{{item.materialMs}}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<!-- 添加或修改材料管理对话框 -->
|
||||
<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"/>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
/*库位号样式*/
|
||||
.kw{
|
||||
font-size: 15px;color: black;font-weight: bold
|
||||
}
|
||||
|
||||
/*卡片内容滚动条设置*/
|
||||
::-webkit-scrollbar {
|
||||
display: none; /* Chrome Safari */
|
||||
}
|
||||
.scrollable{
|
||||
overflow: auto; /* 自动开启滚动条 */
|
||||
max-height: 650px; /* 设置最大高度 */
|
||||
}
|
||||
|
||||
/*最上方三大块样式*/
|
||||
.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 {
|
||||
name: "locationConsuming",
|
||||
data() {
|
||||
return {
|
||||
queryParams: {
|
||||
materialBh: null,
|
||||
materialXingh: null,
|
||||
materialGuig: null,
|
||||
materialDiany: null,
|
||||
materialMs: null
|
||||
},
|
||||
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
//库位信息数据
|
||||
materialDetailA:[],
|
||||
materialDetailB:[],
|
||||
materialDetailC:[],
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
materialXingh: [
|
||||
{ required: true, message: "型号不能为空", trigger: "blur" }
|
||||
],
|
||||
materialGuig: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
materialDiany: [
|
||||
{ required: true, message: "电压等级不能为空", trigger: "blur" }
|
||||
],
|
||||
materialMs: [
|
||||
{ required: true, message: "米数不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
//线芯摆放库位信息
|
||||
/* materialDetailA: [{materialBh:'A-1', materialXingh: 'YJV', materialGuig: '1*10', materialDiany: '1kV', materialMs: '1.5', materialState:'0'},
|
||||
{materialBh:'A-2',materialXingh: 'YJV2', materialGuig: '2*10', materialDiany: '2kV', materialMs: '2.5', materialState:'0'},
|
||||
{materialBh:'A-3',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5', materialState:'1'},
|
||||
{materialBh:'A-4',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5', materialState:'0'},
|
||||
{materialBh:'A-5',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5', materialState:'1'},
|
||||
{materialBh:'A-6',materialXingh: 'YJV2', materialGuig: '2*10', materialDiany: '2kV', materialMs: '2.5', materialState:'0'},
|
||||
{materialBh:'A-7',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5', materialState:'1'},
|
||||
{materialBh:'A-8',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5', materialState:'0'}],
|
||||
|
||||
materialDetailB: [{materialBh:'B-1',materialXingh: 'YJV', materialGuig: '1*10', materialDiany: '1kV', materialMs: '1.5', materialState:'1'},
|
||||
{materialBh:'B-2',materialXingh: 'YJV2', materialGuig: '2*10', materialDiany: '2kV', materialMs: '2.5', materialState:'0'},
|
||||
{materialBh:'B-3',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5', materialState:'1'},
|
||||
{materialBh:'B-4',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5', materialState:'0'},
|
||||
{materialBh:'B-5',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5', materialState:'1'},
|
||||
{materialBh:'B-6',materialXingh: 'YJV2', materialGuig: '2*10', materialDiany: '2kV', materialMs: '2.5', materialState:'0'},
|
||||
{materialBh:'B-7',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5', materialState:'1'},
|
||||
{materialBh:'B-8',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5', materialState:'0'}],
|
||||
|
||||
materialDetailC: [{materialBh:'C-1',materialXingh: 'YJV', materialGuig: '1*10', materialDiany: '1kV', materialMs: '1.5', materialState:'0'},
|
||||
{materialBh:'C-2',materialXingh: 'YJV2', materialGuig: '2*10', materialDiany: '2kV', materialMs: '2.5', materialState:'1'},
|
||||
{materialBh:'C-3',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5', materialState:'0'},
|
||||
{materialBh:'C-4',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5', materialState:'1'},
|
||||
{materialBh:'C-5',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5', materialState:'0'},
|
||||
{materialBh:'C-6',materialXingh: 'YJV2', materialGuig: '2*10', materialDiany: '2kV', materialMs: '2.5', materialState:'1'},
|
||||
{materialBh:'C-7',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5', materialState:'0'},
|
||||
{materialBh:'C-8',materialXingh: 'YJV3', materialGuig: '3*10', materialDiany: '3kV', materialMs: '3.5', materialState:'1'}],*/
|
||||
}
|
||||
},
|
||||
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;
|
||||
});
|
||||
},
|
||||
|
||||
/** 打开录入弹窗 */
|
||||
openDialog(item) {
|
||||
//校验库位是否已占用
|
||||
this.form.materialBh = item.materialBh;
|
||||
checkStorageLocation(this.form).then(response => {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "录入信息";
|
||||
this.form.materialBh = item.materialBh;
|
||||
}).catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
addStorageLocation(this.form).then(response => {
|
||||
this.$modal.msgSuccess("录入成功");
|
||||
this.open = false;
|
||||
this.getStorageLocation();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
cancelStorageLocation(this.form).then(response => {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
}).catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
materialBh: null,
|
||||
materialXingh: null,
|
||||
materialGuig: null,
|
||||
materialDiany: null,
|
||||
materialMs: null
|
||||
};
|
||||
this.resetForm("form");
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -16,13 +16,13 @@
|
|||
<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>
|
||||
<el-descriptions-item :labelStyle='labelStyle'>
|
||||
<template slot="label">
|
||||
库位
|
||||
</template>
|
||||
<span class="kw">{{item.materialBh}}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :contentStyle="{'text-align': 'center'}">
|
||||
<el-descriptions-item :labelStyle='labelStyle' :contentStyle="{'text-align': 'center'}">
|
||||
<template slot="label">
|
||||
状态
|
||||
</template>
|
||||
|
|
@ -30,28 +30,28 @@
|
|||
<el-tag size="mini" type="success" @click="openDialog(item)">空闲</el-tag>
|
||||
</span>
|
||||
<span v-if = "item.materialState=='1'">
|
||||
<el-tag size="mini" type="danger">已用</el-tag>
|
||||
<el-tag size="mini" type="danger">占用</el-tag>
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :span="2">
|
||||
<el-descriptions-item :labelStyle='labelStyle'>
|
||||
<template slot="label">
|
||||
型号
|
||||
</template>
|
||||
{{item.materialXingh}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :span="2">
|
||||
<el-descriptions-item :labelStyle='labelStyle'>
|
||||
<template slot="label">
|
||||
规格
|
||||
</template>
|
||||
{{item.materialGuig}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<el-descriptions-item :labelStyle='labelStyle'>
|
||||
<template slot="label">
|
||||
电压等级
|
||||
</template>
|
||||
{{item.materialDiany}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<el-descriptions-item :labelStyle='labelStyle'>
|
||||
<template slot="label">
|
||||
米数
|
||||
</template>
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
<el-tag size="mini" type="success" @click="openDialog(item)">空闲</el-tag>
|
||||
</span>
|
||||
<span v-if = "item.materialState=='1'">
|
||||
<el-tag size="mini" type="danger">已用</el-tag>
|
||||
<el-tag size="mini" type="danger">占用</el-tag>
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :span="2">
|
||||
|
|
@ -124,7 +124,7 @@
|
|||
<el-tag size="mini" type="success" @click="openDialog(item)">空闲</el-tag>
|
||||
</span>
|
||||
<span v-if = "item.materialState=='1'">
|
||||
<el-tag size="mini" type="danger">已用</el-tag>
|
||||
<el-tag size="mini" type="danger">占用</el-tag>
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :span="2">
|
||||
|
|
@ -203,7 +203,6 @@
|
|||
.kw{
|
||||
font-size: 15px;color: black;font-weight: bold
|
||||
}
|
||||
|
||||
/*卡片内容滚动条设置*/
|
||||
::-webkit-scrollbar {
|
||||
display: none; /* Chrome Safari */
|
||||
|
|
@ -244,6 +243,10 @@
|
|||
name: "locationSet",
|
||||
data() {
|
||||
return {
|
||||
|
||||
//label样式
|
||||
labelStyle: { 'width': '100px' },
|
||||
|
||||
queryParams: {
|
||||
materialBh: null,
|
||||
materialXingh: null,
|
||||
|
|
|
|||
Loading…
Reference in New Issue