feat(editReportingData): 优化新增商品的校验逻辑
- 添加 lastItemValid 状态,用于记录上一次新增项是否通过校验 - 在添加新商品前,检查 lastItemValid 状态,若未通过校验则不允许新增 - 调用 RowDataEditForm 组件的 validate 方法进行校验,并更新 lastItemValid 状态 - 优化了用户体验,确保每次新增的商品信息都是完整的
Showing
2 changed files
with
51 additions
and
7 deletions
| ... | @@ -367,6 +367,17 @@ | ... | @@ -367,6 +367,17 @@ |
| 367 | this.tableRowformData = {} | 367 | this.tableRowformData = {} |
| 368 | this.$emit('cancelEditRowData',this.rowDatas.row.gnum-1) | 368 | this.$emit('cancelEditRowData',this.rowDatas.row.gnum-1) |
| 369 | }, | 369 | }, |
| 370 | + validate() { | ||
| 371 | + return this.$refs.editRowForm.validate((valid)=>{ | ||
| 372 | + if(valid){ | ||
| 373 | + console.log("tg2") | ||
| 374 | + this.$emit('updateLastItemValid', true); | ||
| 375 | + }else { | ||
| 376 | + console.log("wtg2") | ||
| 377 | + this.$emit('updateLastItemValid', false); // 通知父组件校验未通过 | ||
| 378 | + } | ||
| 379 | + }); | ||
| 380 | + }, | ||
| 370 | }, | 381 | }, |
| 371 | }; | 382 | }; |
| 372 | </script> | 383 | </script> | ... | ... |
| ... | @@ -501,6 +501,7 @@ | ... | @@ -501,6 +501,7 @@ |
| 501 | :rowDatas="props" | 501 | :rowDatas="props" |
| 502 | @cancelEditRowData="cancelEditRowData" | 502 | @cancelEditRowData="cancelEditRowData" |
| 503 | @rowFormDataSave="rowFormDataSave" | 503 | @rowFormDataSave="rowFormDataSave" |
| 504 | + @updateLastItemValid="handleUpdateLastItemValid" | ||
| 504 | /> | 505 | /> |
| 505 | </template> | 506 | </template> |
| 506 | <template v-slot:destinationCountryRegionCode="scope"> | 507 | <template v-slot:destinationCountryRegionCode="scope"> |
| ... | @@ -789,6 +790,7 @@ | ... | @@ -789,6 +790,7 @@ |
| 789 | originalDetailData: {}, | 790 | originalDetailData: {}, |
| 790 | // 当前编辑行的 gnum | 791 | // 当前编辑行的 gnum |
| 791 | currentRowKey: null, | 792 | currentRowKey: null, |
| 793 | + lastItemValid: true, // 默认值为 true,表示没有新增项或上一次新增项通过了校验 | ||
| 792 | }; | 794 | }; |
| 793 | }, | 795 | }, |
| 794 | created() { | 796 | created() { |
| ... | @@ -872,8 +874,32 @@ | ... | @@ -872,8 +874,32 @@ |
| 872 | back() { | 874 | back() { |
| 873 | this.$router.go(-1); | 875 | this.$router.go(-1); |
| 874 | }, | 876 | }, |
| 875 | - addNewItem() { | 877 | + |
| 876 | - let orderNum = this.detailData.at(-1) === undefined ? 1 : this.detailData.at(-1).gnum + 1 | 878 | + //添加新商品 |
| 879 | + async addNewItem() { | ||
| 880 | + // 如果上一次新增的 item 没有通过校验,则不允许新增 | ||
| 881 | + if (!this.lastItemValid) { | ||
| 882 | + this.$message.warning('请先完善新增的商品信息'); | ||
| 883 | + return; | ||
| 884 | + } | ||
| 885 | + // 获取最后一个 item 的引用 | ||
| 886 | + const lastItem = this.detailData[this.detailData.length - 1]; | ||
| 887 | + // 如果存在上一次新增的 item,则进行校验 | ||
| 888 | + if (lastItem) { | ||
| 889 | + // 获取 RowDataEditForm 组件的引用 | ||
| 890 | + const rowEditForm = this.$refs.rowEditForm; | ||
| 891 | + if (rowEditForm) { | ||
| 892 | + // 调用校验方法 | ||
| 893 | + const isValid = await rowEditForm.validate(); | ||
| 894 | + if (!isValid) { | ||
| 895 | + this.lastItemValid = false; // 标记上一次新增的 item 未通过校验 | ||
| 896 | + this.$message.warning('请先完善新增的商品信息'); | ||
| 897 | + return; | ||
| 898 | + } | ||
| 899 | + } | ||
| 900 | + } | ||
| 901 | + // 校验通过,允许新增 item | ||
| 902 | + let orderNum = this.detailData.at(-1) === undefined ? 1 : this.detailData.at(-1).gnum + 1; | ||
| 877 | this.detailData.push({ | 903 | this.detailData.push({ |
| 878 | "gnum":orderNum, | 904 | "gnum":orderNum, |
| 879 | "accountBookMaterialNumber": "", | 905 | "accountBookMaterialNumber": "", |
| ... | @@ -894,10 +920,13 @@ | ... | @@ -894,10 +920,13 @@ |
| 894 | "totalPrice": 0, | 920 | "totalPrice": 0, |
| 895 | "unit": "", | 921 | "unit": "", |
| 896 | "isNew": true // 添加 isNew 标志 | 922 | "isNew": true // 添加 isNew 标志 |
| 897 | - }) | 923 | + }); |
| 898 | - this.$nextTick(()=>{ | 924 | + |
| 899 | - this.expandRowKeys = [orderNum] | 925 | + this.$nextTick(() => { |
| 900 | - }) | 926 | + this.expandRowKeys = [orderNum]; |
| 927 | + console.log("next:",this.lastItemValid) | ||
| 928 | + this.lastItemValid = true; // 重置标志位 | ||
| 929 | + }); | ||
| 901 | }, | 930 | }, |
| 902 | updateRow(row){ | 931 | updateRow(row){ |
| 903 | if (this.expandRowKeys.length > 0) return | 932 | if (this.expandRowKeys.length > 0) return |
| ... | @@ -951,6 +980,7 @@ | ... | @@ -951,6 +980,7 @@ |
| 951 | }) | 980 | }) |
| 952 | }, | 981 | }, |
| 953 | cancelEditRowData(index) { | 982 | cancelEditRowData(index) { |
| 983 | + this.lastItemValid = true; // 重置标志位 | ||
| 954 | this.expandRowKeys = []; | 984 | this.expandRowKeys = []; |
| 955 | if (index !== undefined) { | 985 | if (index !== undefined) { |
| 956 | const gnum = this.detailData[index].gnum; | 986 | const gnum = this.detailData[index].gnum; |
| ... | @@ -966,7 +996,10 @@ | ... | @@ -966,7 +996,10 @@ |
| 966 | } | 996 | } |
| 967 | } | 997 | } |
| 968 | }, | 998 | }, |
| 969 | - | 999 | + // 更新 lastItemValid |
| 1000 | + handleUpdateLastItemValid(isValid) { | ||
| 1001 | + this.lastItemValid = isValid; | ||
| 1002 | + }, | ||
| 970 | //提交更新数据 | 1003 | //提交更新数据 |
| 971 | submitEditedReportDatas(){ | 1004 | submitEditedReportDatas(){ |
| 972 | this.$refs.editForm.validate((valid) => { | 1005 | this.$refs.editForm.validate((valid) => { | ... | ... |
-
Please register or login to post a comment