wms-njlm/src/views/asrs/warehouseStorehouseStorage/add-or-updata.vue
2024-02-22 15:41:26 +08:00

435 lines
9.8 KiB
Vue

<template>
<el-drawer
:visible.sync="visible"
:show-close="false"
:destroy-on-close="true"
:wrapper-closable="false"
class="drawer"
size="60%">
<small-title slot="title" :no-padding="true">仓库信息</small-title>
<div class="content">
<div class="visual-part">
<el-form
ref="dataForm"
:model="dataForm"
:rules="dataRule"
label-width="100px"
label-position="top"
@keyup.enter.native="dataFormSubmit">
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="库位编码" prop="warehouseStorehouseCode">
<el-input
v-model="dataForm.warehouseStorehouseCode"
disabled
placeholder="请输入库位编码" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="库位名" prop="warehouseStorehouseName">
<el-input
v-model="dataForm.warehouseStorehouseName"
disabled
placeholder="请输入库位名" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="托盘编码" prop="trayCode">
<el-input
v-model="dataForm.trayCode"
@input="$forceUpdate()"
placeholder="请输入托盘编码" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="选择起点位置" prop="startInfo">
<el-select
v-model="dataForm.startInfo"
style="width: 100%"
@change="$forceUpdate()"
placeholder="请选择起点位置">
<el-option
v-for="item in potArr"
:key="item.id"
:label="item.lineEdgeLibraryCode"
:value="
item.lineEdgeLibraryCode + '-' + item.agvGroundCode
" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="工序" prop="process">
<el-select
v-model="dataForm.process"
style="width: 100%"
@change="$forceUpdate()"
placeholder="请选择工序">
<el-option
v-for="item in processArr"
:key="item.id"
:label="item.name"
:value="item.id" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<small-title
style="margin: 16px 0; padding-left: 8px"
:no-padding="true">
产品信息
<el-alert
title="产品信息新增和修改后,需点击最下方保存按钮确定修改"
type="warning"
show-icon></el-alert>
</small-title>
<div class="attr-list">
<base-table
:table-props="tableProps"
:page="listQuery.pageNo"
:limit="listQuery.pageSize"
:add-button-show="addButtonShow"
@emitButtonClick="addNew"
@emitFun="inputChange"
:height="400"
:table-data="productAttributeList">
<method-btn
slot="handleBtn"
:width="60"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick" />
</base-table>
</div>
</div>
</div>
<div style="position: absolute; bottom: 24px; right: 24px">
<el-button style="margin-right: 10px" @click="goback()">返回</el-button>
<span>
<el-button
type="primary"
@click="dataFormSubmit()"
:loading="isloading">
保存
</el-button>
</span>
</div>
<product-attr-add
v-if="addOrUpdateVisible"
ref="addOrUpdate"
:warehouse-id="dataForm.warehouseId"
@refreshDataList="addList" />
</el-drawer>
</template>
<script>
import { getWarehouseStorehouseGoodsSpecificationPage } from '@/api/asrs/warehouseStorehouseGoodsSpecification';
import {
getLineList,
inWarehouseStorehouse,
} from '@/api/asrs/warehouseStorehouse';
import productAttrAdd from './attr-add';
import inputArea from '../mixins/inputArea';
import selectQuality from '../mixins/selectQuality';
import { parseTime } from '../mixins/code-filter';
import codeFilter from '../mixins/code-filter';
import SmallTitle from './SmallTitle';
const tableBtn = [
{
type: 'delete',
btnName: '删除',
},
];
const tableProps = [
{
prop: 'goodSpecificationName',
label: '产品名',
},
{
prop: 'goodSpecificationCode',
label: '产品编码',
},
{
prop: 'specification',
label: '产品规格',
filter: codeFilter('specification'),
width: 80,
},
{
prop: 'rollCode',
label: '膜卷编码',
subcomponent: inputArea,
width: 100,
},
{
prop: 'number',
label: '数量',
width: 55,
},
{
prop: 'quality',
label: '品质',
filter: codeFilter('quality'),
width: 55,
},
{
prop: 'cureTime',
label: '需要熟化时间(小时)',
width: 140,
},
];
const processArr = [
{
name: '开始',
id: 0,
},
{
name: '一次分切后',
id: 1,
},
{
name: '一次分拣后',
id: 2,
},
{
name: '二次分切后',
id: 3,
},
{
name: '二次分拣后',
id: 4,
},
];
export default {
components: { productAttrAdd, SmallTitle },
data() {
return {
visible: false,
addOrUpdateVisible: false,
tableBtn,
tableProps,
productAttributeList: [],
addButtonShow: '新增',
processArr,
potArr: [],
dataForm: {
id: null,
warehouseStorehouseName: '',
warehouseStorehouseCode: '',
process: '',
trayCode: '',
startInfo: '',
},
isloading: false,
updata: {},
listQuery: {
pageSize: 10,
pageNo: 1,
total: 0,
},
dataRule: {
trayCode: [
{
required: true,
message: '托盘编码不能为空',
trigger: 'blur',
},
],
startInfo: [
{
required: true,
message: '起点位置不能为空',
trigger: 'change',
},
],
},
};
},
methods: {
initData() {
this.productAttributeList.splice(0);
},
init(val) {
this.isloading = false;
this.updata = val;
this.dataForm.id = val.id;
this.dataForm.warehouseStorehouseName = val.warehouseStorehouseName;
this.dataForm.warehouseStorehouseCode = val.warehouseStorehouseCode;
this.dataForm.process = val.process;
this.dataForm.trayCode = val.trayCode;
this.dataForm.startInfo = '';
this.initData();
this.visible = true;
getLineList().then((response) => {
this.potArr = response.data;
});
this.$nextTick(() => {
this.$refs['dataForm'].resetFields();
if (this.dataForm.id) {
// 获取产品详情
// 获取产品的属性列表
this.getList();
}
});
},
getList() {
// 获取产品的属性列表
const params = {
pageSize: 100,
pageNo: 1,
warehouseStorehouseId: this.dataForm.id,
};
getWarehouseStorehouseGoodsSpecificationPage(params).then((response) => {
this.productAttributeList = response.data.list;
this.listQuery.total = response.data.total;
});
},
inputChange(data) {
switch (data.sType) {
case 1:
this.productAttributeList[data._pageIndex - 1][data.prop] =
data[data.prop];
break;
case 2:
this.productAttributeList[data._pageIndex - 1][data.prop] =
data.string ? data.string.split('+')[0] : '';
this.productAttributeList[data._pageIndex - 1][data.prop + 'Name'] =
data.string ? data.string.split('+')[1] : '';
break;
default:
console.log(val);
}
},
handleClick(raw) {
if (raw.type === 'delete') {
this.$confirm(
`确定对${
raw.data.name
? '[名称=' + raw.data.name + ']'
: '[序号=' + raw.data._pageIndex + ']'
}进行删除操作?`,
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(() => {
this.productAttributeList.splice(raw.data._pageIndex - 1, 1);
})
.catch(() => {});
} else {
this.addNew(raw.data._pageIndex);
}
},
// 表单提交
dataFormSubmit() {
let tableValid = false;
this.productAttributeList.forEach((item) => {
item.id = '';
item.warehouseStorehouseId = this.dataForm.id;
item.warehouseId = '';
if (!item.number) {
tableValid = true;
}
});
if (!tableValid) {
this.updata.process = this.dataForm.process;
this.updata.trayCode = this.dataForm.trayCode;
this.updata.lineEdgeLibraryCode = this.dataForm.startInfo.split('-')[0];
this.updata.agvGroundCode = this.dataForm.startInfo.split('-')[1];
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.isloading = true;
// 修改的提交
this.updata.list = this.productAttributeList;
if (this.dataForm.id) {
inWarehouseStorehouse(this.updata).then((response) => {
this.$modal.msgSuccess('修改成功');
this.visible = false;
this.isloading = false;
this.$emit('refreshDataList');
});
return;
}
}
});
} else {
this.$modal.msgWarning('产品信息的数量为必填数据!');
}
},
// 新增 / 修改
addNew(index) {
this.addOrUpdateVisible = true;
this.$nextTick(() => {
this.$refs.addOrUpdate.init(index);
});
},
addList(data) {
data.productInfo.number = 1;
data.productInfo.quality = data.quality;
for (let i = 0; i < data.number; i++) {
this.productAttributeList.push(JSON.parse(JSON.stringify(data.productInfo)));
}
},
goback() {
this.$emit('refreshDataList');
this.visible = false;
this.initData();
},
},
};
</script>
<style scoped>
.drawer >>> .el-drawer {
border-radius: 8px 0 0 8px;
}
.drawer >>> .el-form-item__label {
padding: 0;
}
.drawer >>> .el-form-item {
margin: 0;
}
.drawer >>> .el-drawer__header {
margin: 0;
padding: 32px 32px 24px;
border-bottom: 1px solid #dcdfe6;
margin-bottom: 10px;
}
.drawer >>> .content {
padding: 0 24px 30px;
display: flex;
flex-direction: column;
height: 100%;
}
.drawer >>> .visual-part {
flex: 1 auto;
max-height: 76vh;
overflow: hidden;
overflow-y: scroll;
padding-right: 10px; /* 调整滚动条样式 */
}
.drawer >>> .el-form,
.drawer >>> .attr-list {
padding: 0 16px;
}
</style>