|
|
|
@ -0,0 +1,314 @@ |
|
|
|
<template> |
|
|
|
<el-dialog title="分装(分装后的编号可用于下一步关联选择)" append-to-body :visible.sync="visible" @close="close" width="1100px"> |
|
|
|
<div class="dialog-content"> |
|
|
|
<div class="header-container"> |
|
|
|
<div class="header-item"> |
|
|
|
<div class="header-title">母液编号</div> |
|
|
|
<HandleFormItem :isFieldsRecord="false" :item="inputItem" :error="formErrors.mybh" |
|
|
|
v-model="formData.mybh" /> |
|
|
|
</div> |
|
|
|
<div class="header-item"> |
|
|
|
<div class="header-title">分装数量</div> |
|
|
|
<HandleFormItem :isFieldsRecord="false" @blur="onBlurFzsl" :item="integerInputNumberItem" |
|
|
|
:error="formErrors.fzsl" v-model="formData.fzsl" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="content-container"> |
|
|
|
<div class="content-item"> |
|
|
|
<span>分装编号</span> |
|
|
|
<span class="ml-20">单位:</span> |
|
|
|
<div class="unit-select"> |
|
|
|
<HandleFormItem :isFieldsRecord="false" :item="unitItem" type="select" :error="formErrors.dw" |
|
|
|
@blur="(e) => onCommonBlur(e, 'dw')" v-model="formData.dw" /> |
|
|
|
</div> |
|
|
|
<span class="ml-20">每份包装量:</span> |
|
|
|
<div class="unit-select"> |
|
|
|
<HandleFormItem :isFieldsRecord="false" :item="inputNumberItem" v-model="formData.mfbzl" /> |
|
|
|
</div> |
|
|
|
<el-button type="primary" plain @click="onAverage">平均分配</el-button> |
|
|
|
<el-button type="primary" plain @click="onReset">重置</el-button> |
|
|
|
</div> |
|
|
|
<div class="header-container"> |
|
|
|
<div v-for="(item, index) in fzList" class="list-item" :key="index"> |
|
|
|
<div class="list-label">{{ formData.mybh }}-set01</div> |
|
|
|
<HandleFormItem :isFieldsRecord="false" :item="inputNumberItem" :error="fzListErrors[index]" |
|
|
|
@blur="onBlurFzNum(index)" v-model="item.num" /> |
|
|
|
<el-button type="primary" plain @click="onPrint">打印</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<template slot="footer" class="dialog-footer"> |
|
|
|
<el-button @click="close">{{ $t('form.cancel') }}</el-button> |
|
|
|
<el-button type="primary" @click="onSubmit">{{ $t('form.saveConfirm') }}</el-button> |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import HandleFormItem from '@/components/Template/HandleFormItem.vue'; |
|
|
|
import { compareVolume } from '@/utils/volumeTools.js'; |
|
|
|
import { EventBus } from '@/utils/eventBus' |
|
|
|
export default { |
|
|
|
dicts: [ |
|
|
|
'business_tjdw', |
|
|
|
], |
|
|
|
components: { |
|
|
|
HandleFormItem, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
visible: false, |
|
|
|
inputItem: { |
|
|
|
type: "input", |
|
|
|
fillType: "actFill", |
|
|
|
disabled: true, |
|
|
|
}, |
|
|
|
integerInputNumberItem: { |
|
|
|
type: "inputNumber", |
|
|
|
fillType: "actFill", |
|
|
|
precision: 0, |
|
|
|
maxlength: 3 |
|
|
|
}, |
|
|
|
inputNumberItem: { |
|
|
|
type: "inputNumber", |
|
|
|
fillType: "actFill", |
|
|
|
}, |
|
|
|
formData: { |
|
|
|
mybh: "",//母液编号 |
|
|
|
fzsl: "",//分装数量 |
|
|
|
dw: "",//单位 |
|
|
|
mfbzl: "",//每份包装量 |
|
|
|
}, |
|
|
|
fzList: [],//分装列表 |
|
|
|
// 错误状态字段 |
|
|
|
formErrors: { |
|
|
|
mybh: false, |
|
|
|
fzsl: false, |
|
|
|
dw: false, |
|
|
|
}, |
|
|
|
fzListErrors: [] // 分装列表错误状态 |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
unitItem() { |
|
|
|
return { |
|
|
|
type: "select", |
|
|
|
fillType: "actFill", |
|
|
|
options: this.dict.type.business_tjdw |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
close() { |
|
|
|
this.visible = false; |
|
|
|
this.resetErrors(); |
|
|
|
}, |
|
|
|
show(data) { |
|
|
|
if (data.fzList) { |
|
|
|
this.fzList = data.fzList; |
|
|
|
// 初始化分装列表错误状态 |
|
|
|
this.fzListErrors = new Array(this.fzList.length).fill(false); |
|
|
|
} |
|
|
|
this.formData = data; |
|
|
|
// 重置错误状态 |
|
|
|
this.resetErrors(); |
|
|
|
this.visible = true; |
|
|
|
}, |
|
|
|
onSubmit() { |
|
|
|
// 验证表单数据 |
|
|
|
if (!this.validateFormData()) { |
|
|
|
this.$message.error('表单内容未填完,请填写后再提交') |
|
|
|
return; |
|
|
|
} else { |
|
|
|
const errMsg = "分装后小份容量之和大于母液容量,是否确认分装?" |
|
|
|
const {maxVolume,volumeUnit,dw} = this.formData; |
|
|
|
const totalVolume = this.fzList.reduce((acc, cur) => acc + Number(cur.num), 0); |
|
|
|
const compareResult = compareVolume(totalVolume,dw,maxVolume, volumeUnit); |
|
|
|
if(compareResult > 0){ |
|
|
|
this.$modal.confirm(errMsg, '提示', { |
|
|
|
confirmButtonText: this.$t('form.saveConfirm'), |
|
|
|
cancelButtonText: this.$t('form.cancel'), |
|
|
|
type: 'warning' |
|
|
|
}).then(() => { |
|
|
|
this.submitEmit(); |
|
|
|
}).catch(() => { |
|
|
|
// 取消操作,不执行任何操作 |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
this.submitEmit(); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
submitEmit(){ |
|
|
|
EventBus.$emit('subPackageSubmit', {...this.formData, fzList: this.fzList}); |
|
|
|
this.fzList = []; |
|
|
|
this.formData = {}; |
|
|
|
this.close(); |
|
|
|
}, |
|
|
|
validateFormData() { |
|
|
|
let isValid = true; |
|
|
|
|
|
|
|
// 验证母液编号 |
|
|
|
if (!this.formData.mybh) { |
|
|
|
this.formErrors.mybh = true; |
|
|
|
isValid = false; |
|
|
|
} |
|
|
|
|
|
|
|
// 验证分装数量 |
|
|
|
if (!this.formData.fzsl) { |
|
|
|
this.formErrors.fzsl = true; |
|
|
|
isValid = false; |
|
|
|
} |
|
|
|
|
|
|
|
// 验证单位 |
|
|
|
if (!this.formData.dw) { |
|
|
|
this.formErrors.dw = true; |
|
|
|
isValid = false; |
|
|
|
} |
|
|
|
|
|
|
|
// 验证分装列表中的数值 |
|
|
|
if (this.fzList && this.fzList.length > 0) { |
|
|
|
for (let i = 0; i < this.fzList.length; i++) { |
|
|
|
if (!this.fzList[i].num) { |
|
|
|
// 确保fzListErrors数组有足够的元素 |
|
|
|
if (this.fzListErrors.length <= i) { |
|
|
|
this.$set(this.fzListErrors, i, true); |
|
|
|
} else { |
|
|
|
this.fzListErrors[i] = true; |
|
|
|
} |
|
|
|
isValid = false; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
return isValid; |
|
|
|
}, |
|
|
|
resetErrors() { |
|
|
|
// 重置表单错误状态 |
|
|
|
Object.keys(this.formErrors).forEach(key => { |
|
|
|
this.formErrors[key] = false; |
|
|
|
}); |
|
|
|
|
|
|
|
// 重置分装列表错误状态 |
|
|
|
this.fzListErrors.forEach((_, index) => { |
|
|
|
this.$set(this.fzListErrors, index, false); |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 分装数量失去焦点时,根据数量生成分装列表 |
|
|
|
onBlurFzsl(e) { |
|
|
|
// 清除当前字段的错误状态 |
|
|
|
if (e) { |
|
|
|
this.formErrors.fzsl = false; |
|
|
|
} |
|
|
|
// 清空现有列表 |
|
|
|
this.fzList = []; |
|
|
|
this.fzListErrors = []; |
|
|
|
|
|
|
|
// 根据输入的数量生成新列表 |
|
|
|
for (let i = 0; i < e; i++) { |
|
|
|
this.fzList.push({ |
|
|
|
num: "", |
|
|
|
}); |
|
|
|
// 同步初始化错误状态数组 |
|
|
|
this.fzListErrors.push(false); |
|
|
|
} |
|
|
|
}, |
|
|
|
onAverage() { |
|
|
|
const { mfbzl } = this.formData; |
|
|
|
this.fzList.forEach((item, index) => { |
|
|
|
item.num = mfbzl; |
|
|
|
// 同时更新错误状态 |
|
|
|
if (this.fzListErrors[index] !== undefined) { |
|
|
|
this.$set(this.fzListErrors, index, false); |
|
|
|
} |
|
|
|
}) |
|
|
|
// 清除相关字段的错误状态 |
|
|
|
this.formErrors.mfbzl = false; |
|
|
|
}, |
|
|
|
onReset() { |
|
|
|
this.fzList.forEach((item, index) => { |
|
|
|
item.num = ""; |
|
|
|
// 同时更新错误状态 |
|
|
|
if (this.fzListErrors[index] !== undefined) { |
|
|
|
this.$set(this.fzListErrors, index, false); |
|
|
|
} |
|
|
|
}) |
|
|
|
// 清除相关字段的错误状态 |
|
|
|
this.formErrors.mfbzl = false; |
|
|
|
}, |
|
|
|
onPrint() { }, |
|
|
|
onCommonBlur(e, field) { |
|
|
|
if (this.formData[field]) { |
|
|
|
this.formErrors[field] = false; |
|
|
|
} |
|
|
|
}, |
|
|
|
onBlurFzNum(index) { |
|
|
|
if (this.fzList[index] && this.fzList[index].num) { |
|
|
|
if (this.fzListErrors[index] !== undefined) { |
|
|
|
this.$set(this.fzListErrors, index, false); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.dialog-content { |
|
|
|
padding: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.unit-select { |
|
|
|
width: 100px; |
|
|
|
} |
|
|
|
|
|
|
|
.content-item { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.header-container { |
|
|
|
display: grid; |
|
|
|
grid-template-columns: 1fr 1fr 1fr; |
|
|
|
grid-gap: 20px; |
|
|
|
margin-top: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.header-item { |
|
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
|
|
|
background: #fff; |
|
|
|
border-radius: 4px; |
|
|
|
padding: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.header-title { |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.content-container { |
|
|
|
margin-top: 20px; |
|
|
|
padding: 20px; |
|
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
|
|
|
max-height: 50vh; |
|
|
|
overflow: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.ml-20 { |
|
|
|
margin-left: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.list-item { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
// margin-top: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.list-label { |
|
|
|
margin-right: 5px; |
|
|
|
// width: 200px; |
|
|
|
} |
|
|
|
</style> |