feat(editReportingData): 优化新增商品的校验逻辑
- 添加 lastItemValid 状态,用于记录上一次新增项是否通过校验 - 在添加新商品前,检查 lastItemValid 状态,若未通过校验则不允许新增 - 调用 RowDataEditForm 组件的 validate 方法进行校验,并更新 lastItemValid 状态 - 优化了用户体验,确保每次新增的商品信息都是完整的
Showing
2 changed files
with
71 additions
and
27 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,32 +874,59 @@ | ... | @@ -872,32 +874,59 @@ |
| 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 | + //添加新商品 |
| 877 | - this.detailData.push({ | 879 | + async addNewItem() { |
| 878 | - "gnum":orderNum, | 880 | + // 如果上一次新增的 item 没有通过校验,则不允许新增 |
| 879 | - "accountBookMaterialNumber": "", | 881 | + if (!this.lastItemValid) { |
| 880 | - "barCode": "", | 882 | + this.$message.warning('请先完善新增的商品信息'); |
| 881 | - "currency": "", | 883 | + return; |
| 882 | - "destinationCountryRegionCode": "", | 884 | + } |
| 883 | - "enterpriseProductCode": "", | 885 | + // 获取最后一个 item 的引用 |
| 884 | - "enterpriseProductDescribe": "", | 886 | + const lastItem = this.detailData[this.detailData.length - 1]; |
| 885 | - "enterpriseProductName": "", | 887 | + // 如果存在上一次新增的 item,则进行校验 |
| 886 | - "legalQty": 0, | 888 | + if (lastItem) { |
| 887 | - "model": "", | 889 | + // 获取 RowDataEditForm 组件的引用 |
| 888 | - "netWeight": 0, | 890 | + const rowEditForm = this.$refs.rowEditForm; |
| 889 | - "price": 0, | 891 | + if (rowEditForm) { |
| 890 | - "productCode": "", | 892 | + // 调用校验方法 |
| 891 | - "productName": "", | 893 | + const isValid = await rowEditForm.validate(); |
| 892 | - "qty": 0, | 894 | + if (!isValid) { |
| 893 | - "remark": "", | 895 | + this.lastItemValid = false; // 标记上一次新增的 item 未通过校验 |
| 894 | - "totalPrice": 0, | 896 | + this.$message.warning('请先完善新增的商品信息'); |
| 895 | - "unit": "", | 897 | + return; |
| 896 | - "isNew": true // 添加 isNew 标志 | 898 | + } |
| 897 | - }) | 899 | + } |
| 898 | - this.$nextTick(()=>{ | 900 | + } |
| 899 | - this.expandRowKeys = [orderNum] | 901 | + // 校验通过,允许新增 item |
| 900 | - }) | 902 | + let orderNum = this.detailData.at(-1) === undefined ? 1 : this.detailData.at(-1).gnum + 1; |
| 903 | + this.detailData.push({ | ||
| 904 | + "gnum":orderNum, | ||
| 905 | + "accountBookMaterialNumber": "", | ||
| 906 | + "barCode": "", | ||
| 907 | + "currency": "", | ||
| 908 | + "destinationCountryRegionCode": "", | ||
| 909 | + "enterpriseProductCode": "", | ||
| 910 | + "enterpriseProductDescribe": "", | ||
| 911 | + "enterpriseProductName": "", | ||
| 912 | + "legalQty": 0, | ||
| 913 | + "model": "", | ||
| 914 | + "netWeight": 0, | ||
| 915 | + "price": 0, | ||
| 916 | + "productCode": "", | ||
| 917 | + "productName": "", | ||
| 918 | + "qty": 0, | ||
| 919 | + "remark": "", | ||
| 920 | + "totalPrice": 0, | ||
| 921 | + "unit": "", | ||
| 922 | + "isNew": true // 添加 isNew 标志 | ||
| 923 | + }); | ||
| 924 | + | ||
| 925 | + this.$nextTick(() => { | ||
| 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