diff --git a/src/components/Template/HandleFormItem.vue b/src/components/Template/HandleFormItem.vue index d9e5065..8c338a8 100644 --- a/src/components/Template/HandleFormItem.vue +++ b/src/components/Template/HandleFormItem.vue @@ -870,33 +870,39 @@ export default { .el-select, .clickable, .el-date-editor { - border-color: #f56c6c; + border-color: #ff5d5d; + box-shadow: 0 0 6px #ffc3c3!important; &:focus { - border-color: #f56c6c; + border-color: #ff5d5d; + box-shadow: 0 0 6px #ffc3c3!important; } &:hover { - border-color: #f56c6c; + border-color: #ff5d5d; + box-shadow: 0 0 6px #ffc3c3!important; } } // 为 el-select 和 el-date-picker 添加错误边框样式 .el-select .el-input__inner, .el-date-editor .el-input__inner .el-checkbox__inner { - border-color: #f56c6c; + border-color: #ff5d5d; + box-shadow: 0 0 6px #ffc3c3!important; } // 处理 DecimalInput 组件的错误边框样式 :deep(.el-input-number) { .el-input__inner { - border-color: #f56c6c; + border-color: #ff5d5d; + box-shadow: 0 0 6px #ffc3c3!important; } } // 为点击式表单项添加错误边框样式 .clickable { - border-color: #f56c6c; + border-color: #ff5d5d; + box-shadow: 0 0 6px #ffc3c3!important; } } @@ -989,7 +995,8 @@ export default { } &.error-border { - border-color: #f56c6c !important; + border-color: #ff5d5d !important; + box-shadow: 0 0 6px #ffc3c3!important; } } diff --git a/src/components/Template/StepComponents/ZLSubPackage.vue b/src/components/Template/StepComponents/ZLSubPackage.vue index 4318524..f633709 100644 --- a/src/components/Template/StepComponents/ZLSubPackage.vue +++ b/src/components/Template/StepComponents/ZLSubPackage.vue @@ -26,10 +26,12 @@
{{ formData.mybh }}-set{{ item.subCode }}
- - + + acc + Number(cur.num), 0); - const compareResult = compareVolume(totalVolume,dw,maxVolume, maxVolumeUnit); - console.log(compareResult,totalVolume,dw,maxVolume, maxVolumeUnit,"比较结果"); - if(compareResult > 0||!maxVolume){//没有填写实际溶液体积的也需要提示错误信息 - 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('dialogSubPackageSubmit', {...this.formData, fzList: this.fzList,uuid:this.uuid}); - setTimeout(() => { - this.close(); - }, 500); - }, validateFormData() { let isValid = true; @@ -226,18 +178,24 @@ export default { // 验证分装列表中的数值 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; - } + if (isValueEmpty(this.fzList[i].prenum)) { + this.fzListErrors.push({ + rowIndex: i, + field: "prenum", + error: "请输入预填分装数量", + }) + isValid = false; + } + if (isValueEmpty(this.fzList[i].actnum)) { + this.fzListErrors.push({ + rowIndex: i, + field: "actnum", + error: "请输入实际分装数量", + }) isValid = false; } } } - return isValid; }, resetErrors() { @@ -248,7 +206,7 @@ export default { // 重置分装列表错误状态 this.fzListErrors.forEach((_, index) => { - this.$set(this.fzListErrors, index, false); + this.fzListErrors = [] }); }, // 分装数量失去焦点时，根据数量生成分装列表 @@ -275,24 +233,10 @@ export default { actnum: "", subCode: codes[i], }); - // 同步初始化错误状态数组 - 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; - }, onGetValue(item) { item.actnum = 123; console.log(item,"获取值") @@ -303,13 +247,28 @@ export default { this.formErrors[field] = false; } }, - onBlurFzNum(index) { - if (this.fzList[index] && this.fzList[index].num) { - if (this.fzListErrors[index] !== undefined) { + onBlurFzNum(index, field) { + if (this.fzList[index]) { + // 确保fzListErrors数组有足够的元素 + if (this.fzListErrors.length <= index) { + this.$set(this.fzListErrors, index, false); + } + + if (this.fzList[index][field]) { + // 有值的话就清空对应的错误信息 this.$set(this.fzListErrors, index, false); + } else { + // 没有值的话就边框标红 + this.$set(this.fzListErrors, index, true); } } }, + hasError(index, field) { + const o = this.fzListErrors.find((item)=>{ + return item.rowIndex === index && item.field === field; + }) + return o !== undefined; + }, // 数据变化处理方法 onDataChange() { // 触发自定义事件，将数据变化传递给父组件 diff --git a/src/components/Template/StepFormPackage.vue b/src/components/Template/StepFormPackage.vue index 4a4f0e9..34b5799 100644 --- a/src/components/Template/StepFormPackage.vue +++ b/src/components/Template/StepFormPackage.vue @@ -48,7 +48,7 @@ {{ formFields[key] }}
@@ -124,6 +124,30 @@ export default { onSubPackageUpdate(data,key){ this.formFields[key] = data; }, + // 重写子组件校验钩子方法，检查ZLSubPackage的表单验证 + async validateSubComponents() { + const refs = []; + // 遍历formConfig，找到所有type为zlfz的项 + for (const item of this.formConfig) { + if (item.config) { + for (const key in item.config) { + const sItem = item.config[key]; + if (sItem.type === 'zlfz') { + // 根据key构建ref名称 + const refName = `zlSubPackageRef_${key}`; + const zlSubPackageRef = this.$refs[refName]; + // 检查ZLSubPackage组件的表单验证 + if (zlSubPackageRef) { + refs.push(zlSubPackageRef); + + } + } + } + } + } + const result = await Promise.all(refs.map(ref => ref[0].validateFormData())); + return result[0] + }, getSjResource(){ const {allFieldsConfig,formFields} = this; const sjResource = [],yqResource = []; diff --git a/src/components/Template/mixins/formPackageMixins.js b/src/components/Template/mixins/formPackageMixins.js index fd99c0c..4a88533 100644 --- a/src/components/Template/mixins/formPackageMixins.js +++ b/src/components/Template/mixins/formPackageMixins.js @@ -409,17 +409,28 @@ export default { return false; }, getFormData() { - // 数据校验 + // 同时执行数据校验和子组件校验 const validateResult = this.validateFormData(); + const subComponentValidateResult = this.validateSubComponents(); + console.log(subComponentValidateResult,"subComponentValidateResult") return new Promise((resolve, reject) => { - if (validateResult.valid) { + if (validateResult.valid && subComponentValidateResult.valid) { resolve(this.formFields); - } else { + } else if (!validateResult.valid) { // this.$message.error("表单内容未填完,请填写后再提交"); reject(validateResult.errors[0].error); + } else { + reject(subComponentValidateResult.error); } }); }, + // 子组件校验钩子方法，子组件可以重写此方法来添加额外的校验逻辑 + validateSubComponents() { + return { + valid: true, + error: '' + }; + }, //直接获取表单数据，不做校验 getFilledFormData() { return this.formFields; diff --git a/src/views/business/comps/template/dialog/SubPackageDialog.vue b/src/views/business/comps/template/dialog/SubPackageDialog.vue index fd0c25f..f2ff882 100644 --- a/src/views/business/comps/template/dialog/SubPackageDialog.vue +++ b/src/views/business/comps/template/dialog/SubPackageDialog.vue @@ -232,6 +232,7 @@ export default { this.fzList.push({ num: "", subCode: codes[i], + preCode:`-set${codes[i]}` }); // 同步初始化错误状态数组 this.fzListErrors.push(false);