<template>
|
<div class="notice">
|
<el-dialog
|
v-model="dialogVisible"
|
:title="title+'成品入库'"
|
width="600px"
|
:before-close="handleClose"
|
:close-on-press-escape="false"
|
:close-on-click-modal="false"
|
>
|
<el-form :model="state.form" size="default" ref="busRef" :rules="state.formRules" label-width="150px" >
|
<el-form-item label="入库成品:" prop="basicName" >
|
<el-select
|
clearable
|
v-model="state.form.basicName"
|
filterable
|
remote
|
reserve-keyword
|
placeholder="请输入入库成品"
|
remote-show-suffix
|
:remote-method="getProBasic"
|
style="width: 100%"
|
@change="selectValue"
|
>
|
<el-option
|
v-for="item in state.proList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="仓库:" prop="warehouseName" >
|
<el-select
|
clearable
|
v-model="state.form.warehouseName"
|
filterable
|
remote
|
reserve-keyword
|
placeholder="请输入所入仓库"
|
remote-show-suffix
|
:remote-method="getWareHouseList"
|
style="width: 100%"
|
@change="selectWareValue"
|
>
|
<el-option
|
v-for="item in state.wareHouseList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="存储柜:" prop="cupboardId" >
|
<el-select
|
v-model="state.form.cupboardId"
|
placeholder="请选择存储柜"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="item in state.cupList"
|
:key="item.id"
|
:label="item.cupboardName"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="数量:" prop="num" >
|
<el-input v-model.trim="state.form.num" oninput="value=value.replace(/^\.+|[^\d]/g,'')" placeholder="请输入最小包装数量" @input="changeNum"></el-input>
|
</el-form-item>
|
<el-form-item label="批号:" prop="batchNo" >
|
<el-input v-model.trim="state.form.batchNo" placeholder="请输入批号"></el-input>
|
</el-form-item>
|
<el-form-item v-if="state.form.basicName && state.form.num" style="margin-left: -75px;margin-top: 30px">
|
<span style="font-size: 15px;font-weight: 600">{{state.message}}</span>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="handleClose" size="default">取 消</el-button>
|
<el-button type="primary" @click="onSubmit" size="default" v-preReClick>确认</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
<script setup>
|
import {reactive, ref, toRefs} from 'vue'
|
import {ElMessage} from "element-plus";
|
import {getCupById, getWarehouse} from "@/api/hazardousChemicals/warehouse";
|
import {addProductRecord, editProductRecord, getProductRecord} from "@/api/hazardousChemicals/productRecord";
|
import {getFinishBasicList} from "@/api/hazardousChemicals/finishedBasicInfo";
|
import moment from "moment";
|
|
const dialogVisible = ref(false);
|
const title = ref("");
|
const busRef = ref();
|
const length = ref()
|
const emit = defineEmits(["getList"]);
|
|
const validateNum = (rule, value, callback)=>{
|
if(value === ''){
|
callback(new Error('请输入最小包装数量'))
|
}else{
|
if(choosePro.value && value > choosePro.value.maxEntry ){
|
callback(new Error(`输入数量不能大于单次入库最大数量(${choosePro.value.maxEntry})`))
|
}else {
|
callback()
|
}
|
|
}
|
}
|
|
const state = reactive({
|
form: {
|
id: '',
|
basicId: null,
|
basicName:'',
|
warehouseName: '',
|
warehouseId: null,
|
num: null,
|
batchNo: '',
|
cupboardName: '',
|
cupboardId: null,
|
|
},
|
formRules:{
|
num: [{ required: true, trigger: "blur", validator: validateNum }],
|
warehouseName: [{ required: true, trigger: "blur", message: '请选择入库仓库' }],
|
basicName: [{ required: true, trigger: "blur", message: '请选择入库成品' }],
|
cupboardId: [{ required: true, trigger: "blur", message: '请选择存储柜' }]
|
// batchNo: [{ required: true, trigger: "blur", message: '请输入批号' }]
|
},
|
proList: [],
|
wareHouseList: [],
|
message: ''
|
})
|
|
|
const openDialog = async (type, value) => {
|
await getProBasic("")
|
await getWareHouseList("")
|
state.form.batchNo = moment(new Date()).format("YYYYMMDD")
|
title.value = type === 'add' ? '新增' : type ==='edit' ? '编辑':'' ;
|
if(type === 'edit' ) {
|
await getCupList(value.warehouseId)
|
state.form = JSON.parse(JSON.stringify(value));
|
state.form.cupboardId = state.form.cupboard && state.form.cupboard.id ?state.form.cupboard.id : null
|
state.form.basicName = value.productBasic.name + '—' + value.productBasic.productSn + ' (' + value.productBasic.metering +value.productBasic.unit+') '
|
state.form.warehouseName = value.warehouse.name;
|
choosePro.value = value.productBasic
|
choosePro.value.name = value.productBasic.name + '—' + value.productBasic.productSn + ' (' + value.productBasic.metering + value.productBasic.unit+') '
|
changeNum()
|
}
|
dialogVisible.value = true;
|
}
|
const getProBasic = async (val) => {
|
let param = {}
|
if(val != ""){
|
param = {
|
name: val
|
}
|
}else {
|
param = {
|
pageNum: 1,
|
pageSize: 10
|
}
|
}
|
const res = await getFinishBasicList(param)
|
if(res.code == 200){
|
state.proList = res.data.list.map(item => {
|
return{
|
...item,
|
name: item.name + '—' + item.productSn + ' (' + item.metering +item.unit+') '
|
|
}
|
})
|
}else{
|
ElMessage.warning(res.message)
|
}
|
}
|
const getWareHouseList = async (val) => {
|
let param = {}
|
if(val != ""){
|
param = {
|
name: val
|
}
|
}else {
|
param = {
|
pageNum: 1,
|
pageSize: 10
|
}
|
}
|
const res = await getWarehouse(param)
|
if(res.code == 200){
|
state.wareHouseList = res.data.list
|
}else{
|
ElMessage.warning(res.message)
|
}
|
}
|
|
const onSubmit = async () => {
|
const valid = await busRef.value.validate();
|
if(valid){
|
if(title.value === '新增'){
|
// if(state.form.batchNo == ''){
|
// state.form.batchNo = moment(new Date()).format("YYYY-MM-DD")
|
// }
|
const {id, ...data} = JSON.parse(JSON.stringify(state.form))
|
const res = await addProductRecord(data)
|
if(res.code === 200){
|
ElMessage({
|
type: 'success',
|
message: '新增成功'
|
});
|
}else{
|
ElMessage.warning(res.message)
|
}
|
emit("getList")
|
busRef.value.clearValidate();
|
reset();
|
dialogVisible.value = false;
|
}else if(title.value === '编辑'){
|
// if(state.form.batchNo == ''){
|
// state.form.batchNo = moment(new Date()).format("YYYY-MM-DD")
|
// }
|
const {...data} = JSON.parse(JSON.stringify(state.form))
|
const res = await editProductRecord(data)
|
if(res.code === 200){
|
ElMessage({
|
type: 'success',
|
message: '编辑成功'
|
});
|
}else{
|
ElMessage.warning(res.message)
|
}
|
emit("getList")
|
busRef.value.clearValidate();
|
reset();
|
dialogVisible.value = false;
|
}
|
}
|
}
|
const choosePro =ref()
|
const selectValue = (val) => {
|
state.proList.forEach(item => {
|
if(item.name === val){
|
state.form.basicId = item.id
|
console.log('item',item)
|
choosePro.value = item;
|
changeNum()
|
}
|
})
|
}
|
const changeNum = () => {
|
const minPackageType = choosePro.value.minPackage == 0 ? '瓶' :choosePro.value.minPackage == 1?'袋':choosePro.value.minPackage == 2?'桶 ':choosePro.value.minPackage == 3?'盒':choosePro.value.minPackage == 4?'箱':'其他'
|
state.message = `您将入库 { ${choosePro.value.name.substring(0,choosePro.value.name.lastIndexOf('—')) } }，编号：{ ${choosePro.value.productSn} }，最小包装${choosePro.value.metering}${choosePro.value.unit}，类别：${minPackageType}。 \n 共计：${state.form.num}${minPackageType}`
|
}
|
const selectWareValue = (val) => {
|
state.form.cupboardId = null
|
state.wareHouseList.forEach(item => {
|
if(item.name === val){
|
state.form.warehouseId = item.id
|
getCupList(item.id)
|
}
|
})
|
}
|
|
const getCupList = async (val) => {
|
const res = await getCupById(val)
|
if(res.code == 200) {
|
state.cupList = res.data
|
}else {
|
ElMessage.warning(res.message)
|
}
|
}
|
const handleClose = () => {
|
busRef.value.clearValidate();
|
reset();
|
dialogVisible.value = false;
|
emit("getList")
|
}
|
const reset = () => {
|
state.form = {
|
id: '',
|
basicId: null,
|
basicName:'',
|
warehouseName: '',
|
warehouseId: null,
|
num: null,
|
batchNo: '',
|
cupboardName: '',
|
cupboardId: null,
|
}
|
state.proList = [];
|
state.wareHouseList = [];
|
state.message = '';
|
}
|
defineExpose({
|
openDialog
|
});
|
|
</script>
|
|
<style scoped lang="scss">
|
.notice{
|
white-space: pre-line;
|
:deep(.el-form .el-form-item__label) {
|
font-size: 15px;
|
}
|
.file {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-start;
|
}
|
|
}
|
</style>
|
