js实现数据关联查找更新。数据求和验证

在这里插入图片描述
为了实现这个功能我们和后端定义了数据结构

data:{id：‘’，formInfo:'',formInfo2:'',formInfo3:'',formInfo4:'', ......deailData:[ // 明细数据  // saleData 查询带出的对应明细序列号数据{	id:'',	ocopyId:'',	copyId:'',	odoId:'',	......,  saleData:[ {	id:'',	ocopyId:'', odoId:'',	......,} ] }，{	id:'',	ocopyId:'',	copyId:'',	odoId:'',	......,  saleData:[ {	id:'',	ocopyId:'', odoId:'',	......,} ] }，{	id:'',	ocopyId:'',	copyId:'',	odoId:'',	......,  saleData:[ {	id:'',	ocopyId:'', odoId:'',	......,} ] }]
}

代码入下

/*** 编辑页面*/
import React from 'react';
import { TForm, ELImport_3, ElNotification, ElRowContainer, TCollapse } from '@/cloudt/component';
import { TEditTable } from '@/cloudt/pro-component';import {getDetailColumns,getSerialButtons,getDetailButtons,getTopButtons,getBasicForm,getControlForm,getReceivingForm,getSerialEdittabColumns,
} from './config';
import dayjs from 'dayjs';
import { asserts } from '@/utils';
import { save, getDetailById, getFileCode } from './service';
import { FileUpload } from '@/cloudt/component/ItemComponent';
import { maths } from '@/utils';
import { Spin } from 'antd';
import { closeCurrentToPath, frameHistoryPush } from '@/cloudt/frame-history';
interface Props {match: any;
}interface State {loading: boolean;pageType: string;id: string | number;bascicFormData: any;OrderInfoData: Array<any>;recvCountryCode: any;fileList: Array<any>;preSelectedRow: Record<string, any> | null; //记录上次选中的明细行importRequestParams: Record<string, any>;
}class SaleOrderEdit extends React.Component<Props, State> {basicFormRef: any; //基础信息表单refcontrolFormRef: any; //制单信息receiveFormRef: any; //客户收货信息表单refdeatilTableRef: any; //明细信息可编辑表格refserialTableRef: any; // 序列号refimportModalRef: any; //导入组件refconstructor(props) {super(props);this.state = {fileList: [],id: this.props.match?.params?.id, //单据idpageType: this.props.match.path.includes('/edit/') ? 'edit' : 'view', // 编辑或详情页面loading: false, // 页面级loadingbascicFormData: {}, //基本信息OrderInfoData: [], //明细数据recvCountryCode: '', // 国家preSelectedRow: null,importRequestParams: {},};}async componentDidMount() {await this.getDetail(this.state.id);}getDetail = async (id) => {this.setState({loading: true,});const res = await getDetailById(id);if (res && res.success) {const bascicFormData = await this.handleBasicFormData(res?.data);const newSalSoDSaveVOList = this.handleDetailEditData(res?.data?.odoDList);// 查询附件const fileCode = res.data?.fileCode;if (fileCode) {await this.handleFilesData(res.data?.fileCode.split(','));}this.setState({bascicFormData,OrderInfoData: newSalSoDSaveVOList,});} else {ElNotification({type: 'error',message: res.msg || '查询失败',});}this.setState({loading: false,});};handleBasicFormData = async (data) => {const basicData = {...data,recvArea: [data?.recvProvince, data?.recvCity, data?.recvCounty],whId: {whId: data?.whId,whCode: data?.whCode,whName: data?.whName,// deter2: data?.deter2,// deter2Name: data?.deter2Name,},};this.setState({recvCountryCode: data?.recvCountry,});return basicData;};handleFilesData = async (fileCode) => {const res = await getFileCode(fileCode);if (res && res.success) {this.setState({fileList: res.data,});}};/*** 查详情明细行数据处理 -- 明细行原始数据*/handleDetailEditData = (odoDSaveVOList) => {const newSalSoDSaveVOList =odoDSaveVOList &&Array.isArray(odoDSaveVOList) &&odoDSaveVOList.map((item) => {return {...item,// createTime: asserts.isExist(item?.createTime) ? dayjs(item?.createTime).format('YYYY-MM-DD') : null,// modifyTime: asserts.isExist(item?.modifyTime) ? dayjs(item?.modifyTime).format('YYYY-MM-DD') : null,serialRespVOs: item.serialRespVOs ? item.serialRespVOs : [],lotNo: item?.lotNo,};});return newSalSoDSaveVOList;};// 明细信息行选择事件 更新下边的序号编辑handleOrderInfoSelect = async (selectedRowKeys, selectedRows) => {await this.deatilTableRef.quitEditState(); // 明细行退出编辑状态await this.serialTableRef.quitEditState(); // 序列号退出编辑状态const TableValues = await this.serialTableRef.getRows(); // 获取序列号数据const detailSelectedRow = selectedRows[0];if (this.state.preSelectedRow) {this.deatilTableRef.updateRows({ serialRespVOs: TableValues }, [this.state.preSelectedRow.id]);}const nowSerialData = detailSelectedRow.serialRespVOs;await this.serialTableRef?.clearRows(); //清除可编辑表格的数据this.serialTableRef?.addRows(nowSerialData); //重新添加查询的数据this.setState({preSelectedRow: detailSelectedRow,});};// 明细行复制handleCopy = async (selectedRowKeys, selectedRows) => {const selectedRow = selectedRows[0];const isCopyedRow = selectedRow.ocopyId;if (isCopyedRow) {return ElNotification({type: 'warning',message: '不能复制已经复制的信息，请重新选择',});}await this.deatilTableRef.quitEditState();const dataSouce = await this.deatilTableRef.getRows();const index = dataSouce?.findLastIndex((v) => selectedRow?.relateDocLineno === v.relateDocLineno);const copyRow = {...selectedRow,odoId: this.state.id, // 单头idocopyId: selectedRow.id, // 复制行时把id给ocopyId,id: maths.genFakeId(-1),demandQty: null,qty: 0,serialRespVOs: [],};dataSouce.splice(index + 1, 0, copyRow);await this.deatilTableRef.clearRows();await this.deatilTableRef.addRows(dataSouce);};// 明细信息行删除事件handleDelClick = async (selectedRowKeys, selectedRows) => {const selectedRow = selectedRows[0];const isCopyedRow = selectedRow.ocopyId;if (!isCopyedRow) {return ElNotification({type: 'warning',message: '只能删除复制行，请重新选择',});}this.deatilTableRef.removeRowsByKeys(selectedRowKeys, 'rowKey'); // 删除明细信息await this.serialTableRef.quitEditState(); // 序列号退出编辑状态await this.serialTableRef?.clearRows(); //清除可编辑表格的数据};// 序列号信息添加handleAddDataRow = async () => {const selectionData = await this.deatilTableRef?.getSelectionData();if (selectionData.selectedRows.length !== 1) {return ElNotification({type: 'warning',message: '请选中一行明细',});}const detailSelectedRow = selectionData.selectedRows[0];const newRow = {id: maths.genFakeId(-1),odoId: this.state.id, // 关联单idodoDid: detailSelectedRow.id, // 序列号新增时，赋值选中的明细行id};this.serialTableRef?.addRow(newRow); //重新添加查询的数据};// 序列号信息删除handleDistributionDelete = async (selectedRowKeys) => {await this.serialTableRef.quitEditState();this.serialTableRef.removeRowsByKeys(selectedRowKeys, 'rowKey');};// 序列号导入handleImport = async () => {const selectionData = await this.deatilTableRef?.getSelectionData();if (selectionData.selectedRows.length !== 1) {return ElNotification({type: 'warning',message: '请选中一行明细',});}this.setState({importRequestParams: { odoDid: selectionData.selectedRows[0].id, odoId: this.state.id },});this.importModalRef.openModal();};// 导入方法回调importCallBack = async (res) => {if (res && res.success) {const importSuccessData = res.data.map((x) => {return {...x,id: maths.genFakeId(-1),};});this.serialTableRef?.addRows(importSuccessData);ElNotification({type: 'success',message: '操作成功！',});} else if (res && !res.success) {ElNotification({type: 'error',message: res?.msg || '操作失败',});}};/*** 返回*/onBack = () => {closeCurrentToPath('/inventory/outboundDelivery/searchOrder');};// 保存saveParams = async () => {//保存之前先把序列号信息退出编辑状态，同步到明细数据中const selectionData = await this.deatilTableRef?.getSelectionData();const detailSelectedRow = selectionData?.selectedRows[0];await this.serialTableRef.quitEditState(); // 序列号退出编辑状态const serialEditTableValues = await this.serialTableRef.validateTableRows();if (!serialEditTableValues?.msg?.success) {ElNotification({type: 'warning',message: '请添加序列号必填信息！',});return;}const TableValues = await this.serialTableRef.getRows(); // 获取序列号数据if (this.state.preSelectedRow) {this.deatilTableRef.updateRows({ serialRespVOs: TableValues }, [detailSelectedRow.id]);}const data = await this.processData();if (data?.odoDSaveVOList?.length === 0) {ElNotification({type: 'warning',message: '明细信息不允许为空',});return;}if (data) {this.setState({ loading: true });const res = await save(data);this.setState({ loading: false });if (res.success) {ElNotification({type: 'success',message: res.msg || '操作成功',});this.onBack();} else {ElNotification({type: 'error',message: res.msg || res.data || '操作失败！',});}}};/*入参基本信息处理baseFormDataRes 基本信息custFormDataRes 客户信息*/paramsBasicFormData = (baseFormDataRes, custFormDataRes) => {baseFormDataRes.whId = baseFormDataRes.whId?.whId;baseFormDataRes.whCode = baseFormDataRes.whId?.whCode;baseFormDataRes.whName = baseFormDataRes.whId?.whName;custFormDataRes.recvArea = undefined;};/*  delSameObjValue 数组对象相同值相加去重arr 需要处理的数组   -- editTableValues?.dataresultNum 最终计算结果的键名 -- sumConfirmQtykeyName  用于计算判断的键名 这里是以数组的方式传过来的可以这支持接收多个参数判断】 -- relateDocLinenokeyValue 用于计算结果的键名 这里是以数组的方式传过来的可以这支持接收多个参数判断】 对应的键值为number类型 -- qty*/delSameObjValue = (arr, resultNum, keyName, keyValue) => {const warp = new Map();arr.forEach((i) => {const str = keyName.map((v) => i[v]).join('_');i[resultNum] = keyValue.reduce((p, c) => (p += i[c]), 0);warp.has(str) ? (warp.get(str)[resultNum] += i[resultNum]) : warp.set(str, i);});return Array.from(warp).map(([, v]) => v);};// 校验表单信息processData = async () => {// 基本信息const baseFormDataRes = await this.basicFormRef?.validateFields().catch(() => {ElNotification({type: 'warning',message: '请检查【基本信息】必填信息',});return Promise.reject();});// 客户信息const custFormDataRes = await this.receiveFormRef?.getFieldsValue();// 制单信息const otherFormDataRes = await this.controlFormRef?.getFieldsValue();this.paramsBasicFormData(baseFormDataRes, custFormDataRes);// 附件信息const { fileList } = this.state;const fileCodes =Array.isArray(fileList) &&fileList?.map((x) => {return x.fileCode;});const fileCode = fileCodes.toString();// 商品明细信息await this.deatilTableRef.quitEditState(); //保存退出明细行编辑状态const editTableValues = await this.deatilTableRef.validateTableRows();const sum = this.delSameObjValue(editTableValues?.data, 'sumConfirmQty', ['relateDocLineno'], ['qty']);const flag = sum.some((val) => val.sumConfirmQty !== val.demandQty);if (flag) {return ElNotification({type: 'warning',message: '相同【来源单据行号】的数据信息【实发数量】必须等于【要求发货数量】！',});}if (!editTableValues?.msg?.success) {return ElNotification({type: 'warning',message: '请添加明细必填信息！',});}const ruleLotFlagAddlotNo = editTableValues?.data.some((item) => item.lotFlag && (item.lotNo === null || item.lotNo === ''),);if (ruleLotFlagAddlotNo) {return ElNotification({type: 'warning',message: '明细商品中包含【启用批次】，请检查并完善【批次】',});}const itemDataSource = editTableValues?.data?.map((item) => {return {...item,odoId: this.state.id,lotNo: item?.lotNo?.lotNo,olotNo: item?.orlotNo,odoSerialSaveVOs: item.serialRespVOs ? item.serialRespVOs : [],sumConfirmQty: undefined, // 提示汇总字段不要serialRespVOs: undefined, // 返回的数组字段不要orlotNo: undefined,};});// 根据公司查询组织return {...this.state.bascicFormData,id: this.state.bascicFormData?.id, //复制按钮时，入参需要处理...baseFormDataRes, //基础信息...custFormDataRes, //客户信息...otherFormDataRes, // 制单信息odoDSaveVOList: itemDataSource, // 明细fileCode, // 附件odoDList: undefined,};};render() {const {pageType: type,bascicFormData: bascicFormDate,loading,OrderInfoData,fileList,importRequestParams,} = this.state;return (<Spin spinning={loading}><div className="inner-content"><ElRowContaineronBack={this.onBack}blocks={getTopButtons(this.saveParams, this.state.pageType)}position="top"/><TCollapse className="formAlignment" title="基本信息" levelOne><TFormdata={bascicFormDate}onRef={(ref) => {this.basicFormRef = ref;}}formProps={getBasicForm(type)}/><TCollapse title="收货信息" defaultOpen={false} className="formAlignment"><TFormdata={bascicFormDate}onRef={(ref) => {this.receiveFormRef = ref;}}formProps={getReceivingForm(this.state.recvCountryCode)}/></TCollapse><TCollapse title="制单信息" defaultOpen={false} className="formAlignment"><TFormdata={bascicFormDate}onRef={(ref) => {this.controlFormRef = ref;}}formProps={getControlForm('create')}/></TCollapse></TCollapse><TCollapse title="明细信息"><TEditTabletableId="middleGround_inventoryCenter_supply_saleorder_orderDetail"borderedrowKey="id"scroll={{ y: 20000 }}onRef={(ref) => (this.deatilTableRef = ref)}dataSource={OrderInfoData} //actionButtons={getDetailButtons({type,handleCopy: this.handleCopy,handleDelete: this.handleDelClick,})}needToolBar={true}columns={getDetailColumns(this)}rowSelectionConfig={{type: 'radio',fixed: true,disabledRowIds: [],onChange: ({ selectedRowKeys, selectedRows }) => {this.handleOrderInfoSelect(selectedRowKeys, selectedRows);},}}defaultTableConfig={{onBottomPressEnter: 'trigger',onTableIntoEdit: 'dbclick',}}/></TCollapse><TCollapse title="序列号信息"><TEditTabletableId="middleGround_inventoryCenter_supply_saleorder_distributionInformation"rowKey="id"borderedscroll={{ y: 'calc(100vh - 430px)' }}dataSource={[]}actionButtons={getSerialButtons(type,this.handleAddDataRow,this.handleDistributionDelete,this.handleImport,)}onRef={(ref) => (this.serialTableRef = ref)}columns={getSerialEdittabColumns()}/></TCollapse><TCollapse title="相关附件" levelOne={true}><FileUploaduseType="outTable"fileListLen={999}uploadInfo="支持所有类型文件，文件不能超过10M"value={fileList}onUploadErr={(err) => {ElNotification({type: 'error',message: err?.msg || '上传失败',});}}onRemoveErr={(err) => {ElNotification({type: 'error',message: err?.msg || '删除失败',});}}onChange={(value) => {this.setState({fileList: value,});}}multiple={true}fileList={fileList}prefix="/cloudt/system"/></TCollapse><ELImport_3push={frameHistoryPush}prefix="/yst/inv"templateCode="INV_ODO_SERIAL_IMPORT"downTemplateConfig={{mode: 'templateCode',fileName: '序列号导入模版',}}importConfig={{mode: 'request',url: '/yst/inv/inv/odod/serial/importOdoSerial',maxSize: 1,sizeUnit: 'MB',note: '仅支持xlsx文件，不能大于20mb',accept: 'xlsx|xls|xlsx',onSuccess: this.importCallBack,}}requestParams={importRequestParams}onRef={(ref) => (this.importModalRef = ref)}/></div></Spin>);}
}export default SaleOrderEdit;

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/83537.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Python——列表(list)推导式

Python——列表(list)推导式

本文基于python3。 目录 1、Python推导式2、列表(list)推导式2.1、定义2.2、实际操作2.2.1、一个表达式&#xff0c;后面为一个 for 子句2.2.2、一个表达式&#xff0c;后面为一个 for 子句&#xff0c;然后&#xff0c;跟着if 子句。2.2.3、一个表达式&#xff0c;后面为一个…
阅读更多...
Pygame编程（1）初始化和退出模块

Pygame编程（1）初始化和退出模块

初始化和退出模块 pygame使用基础流程 初始化模块设置主屏窗口程序主循环&#xff08;处理键盘、鼠标、游戏杆、触摸屏等事件&#xff09;退出模块终止程序 import sys import pygame from pygame.locals import *# 1.初始化模块 pygame.init()# 2.设置主屏窗口 display pyg…
阅读更多...
C语言练习3（巩固提升）

C语言练习3（巩固提升）

C语言练习3 选择题 选择题 前言 奋斗是曲折的&#xff0c;“为有牺牲多壮志&#xff0c;敢教日月换新天”&#xff0c;要奋斗就会有牺牲&#xff0c;我们要始终发扬大无畏精神和无私奉献精神。奋斗者是精神最为富足的人&#xff0c;也是最懂得幸福、最享受幸福的人。正如马克思…
阅读更多...
视频汇聚/云存储/安防监控AI视频智能分析平台——明厨亮灶解决方案

视频汇聚/云存储/安防监控AI视频智能分析平台——明厨亮灶解决方案

人工智能技术已经越来越多地融入到视频监控领域中&#xff0c;近期我们也发布了基于AI智能视频云存储/安防监控视频AI智能分析平台的众多新功能&#xff0c;该平台内置多种AI算法&#xff0c;可对实时视频中的人脸、人体、物体等进行检测、跟踪与抓拍&#xff0c;支持人脸检测、…
阅读更多...
原生小案例：如何使用HTML5 Canvas构建画板应用程序

原生小案例：如何使用HTML5 Canvas构建画板应用程序

使用HTML5 Canvas构建绘图应用是在Web浏览器中创建交互式和动态绘图体验的绝佳方式。HTML5 Canvas元素提供了一个绘图表面&#xff0c;允许您操作像素并以编程方式创建各种形状和图形。本文将为您提供使用HTML5 Canvas创建绘图应用的概述和指导。此外&#xff0c;它还将通过解释…
阅读更多...
【JSDocvscode】使用JSDoc、在vscode中开启node调试、使用vscode编写运行Python程序

【JSDocvscode】使用JSDoc、在vscode中开启node调试、使用vscode编写运行Python程序

JSDoc JSDoc是JavaScript的一种注释语法&#xff0c;同时通过JSDoc注释也可以规避js弱类型中不进行代码提示的问题 图形展示JSDoc的效果&#xff1a; 上述没有进行JSDoc&#xff0c;然后我们a点什么 是没有任何提示的 上述就是加上 JSDoc的效果 常用的 vscode 其实内置了 js…
阅读更多...
飞天使-k8s基础组件分析-控制器

飞天使-k8s基础组件分析-控制器

文章目录 控制器含义解释pod的标签与注释ReplicaControllerReplicaSetDeploymentsDaemonSetJobCronjob参考文档 控制器含义解释 空调遥控器知道吧ReplicationController: ReplicationController确保在任何时候都运行指定数量的pod副本。换句话说&#xff0c;一个ReplicationCo…
阅读更多...
05.Image Captioning with Semantic Attention

05.Image Captioning with Semantic Attention

目录 前言泛读摘要Introduction创新/贡献点Related Work 精读输入的注意力模型输出的注意力模型模型学习视觉属性/概念预测实验MS-COCO的性能实验分析 Conclusion 代码略 前言 本课程来自深度之眼《多模态》训练营&#xff0c;部分截图来自课程视频。 文章标题&#xff1a;Ima…
阅读更多...
【java】【项目实战】[外卖四]分类管理业务开发

【java】【项目实战】[外卖四]分类管理业务开发

前言&#xff1a;公共字段自动填充实现&#xff0c;删除业务逻辑实现 一、公共字段自动填充 1.1 问题分析 1.2 代码实现 1.2.1 修改实体类Employee package com.runa.reggie.entity;import com.baomidou.mybatisplus.annotation.FieldFill; import com.baomidou.mybatisplus.…
阅读更多...
SpringCloud 教程 | 第一篇： 服务的注册与发现（Eureka）

SpringCloud 教程 | 第一篇： 服务的注册与发现（Eureka）

一、spring cloud简介 spring cloud 为开发人员提供了快速构建分布式系统的一些工具&#xff0c;包括配置管理、服务发现、断路器、路由、微代理、事件总线、全局锁、决策竞选、分布式会话等等。它运行环境简单&#xff0c;可以在开发人员的电脑上跑。另外说明spring cloud是基…
阅读更多...
使用动态IP是否会影响网络

使用动态IP是否会影响网络

今天我们要谈论的话题是关于动态IP和网络的关系。也许有些小伙伴对这个概念还比较陌生&#xff0c;但别担心&#xff0c;我会简单明了的给你理清楚。让我们一起看看动态IP到底能否影响到网络。 首先&#xff0c;我们先来搞明白什么是动态IP。在互联网世界中&#xff0c;每一个连…
阅读更多...
wordpress搭建博客教程总结_01主题配置

wordpress搭建博客教程总结_01主题配置

目前搭建效果站 薪火相传 (yuetan.wang) 日间 月间 爱心 页面、 爱心冲击波! (yuetan.wang) 好看的主题分享 个人博客主题分享(WordPress) – Echo小窝 博客主要效果 1. Argon
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023