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]);// this.deatilTableRef.updateRows({ serialRespVOs: TableValues }, [this.state.preSelectedRow.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,bascicFormData: bascicFormDate,loading,OrderInfoData,fileList,importRequestParams,} = this.state;return (<Spin spinning={loading}><div className="inner-content"><ElRowContainer onBack={this.onBack} blocks={getTopButtons(this.saveParams, pageType)} position="top" /><TCollapse className="formAlignment" title="基本信息" levelOne><TFormdata={bascicFormDate}onRef={(ref) => {this.basicFormRef = ref;}}formProps={getBasicForm(pageType)}/><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()}/></TCollapse></TCollapse><TCollapse title="明细信息"><TEditTabletableId="middleGround_inventoryCenter_supply_saleorder_orderDetail"borderedrowKey="id"scroll={{ y: 20000 }}onRef={(ref) => (this.deatilTableRef = ref)}dataSource={OrderInfoData}actionButtons={getDetailButtons(pageType, this.handleCopy, this.handleDelClick)}needToolBar={true}columns={getDetailColumns(pageType, 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(pageType,this.handleAddDataRow,this.handleDistributionDelete,this.handleImport,)}onRef={(ref) => (this.serialTableRef = ref)}columns={getSerialEdittabColumns(pageType)}/></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"disabled={pageType === 'view'}/></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.mzph.cn/news/54186.shtml

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

相关文章

stm32之4.时钟体系

3.时钟体系(给单片机提供一个非常稳定的频率信号) ①可以使用三种不同的时钟源来驱动系统时钟&#xff08;SYSCLK&#xff09;&#xff0c;CPU运行的频率为168MHZ&#xff1b; HSI(RC振荡器时钟&#xff0c;也就是高速内部时钟&#xff0c;一般来说很少用&#xff0c;因为精度…

二叉树的层序遍历及完全二叉树的判断

文章目录 1.二叉树层序遍历 2.完全二叉树的判断 文章内容 1.二叉树层序遍历 二叉树的层序遍历需要一个队列来帮助实现。 我们在队列中存储的是节点的地址&#xff0c;所以我们要对队列结构体的数据域重定义&#xff0c; 以上代码 从逻辑上来讲就是1入队&#xff0c;1出队&am…

字节跳动 从需求到上线全流程 软件工程流程 需求评估 MVP

走进后端开发流程 整个课程会带大家先从理论出发&#xff0c;思考为什么有流程 大家以后工作的团队可能不一样&#xff0c;那么不同的团队也会有不同的流程&#xff0c;这背后的逻辑是什么 然后会带大家按照走一遍从需求到上线的全流程&#xff0c;告诉大家在流程的每个阶段&am…

视频集中存储/直播点播平台EasyDSS内核无法启动是什么原因?

视频推拉流EasyDSS视频直播点播平台&#xff0c;集视频直播、点播、转码、管理、录像、检索、时移回看等功能于一体&#xff0c;可提供音视频采集、视频推拉流、播放H.265编码视频、存储、分发等视频能力服务。 有用户反馈&#xff0c;下载了视频直播点播平台EasyDSS最新版本&a…

桃子叶片病害识别(Python代码,pyTorch框架,深度卷积网络模型,很容易替换为其它模型,带有GUI识别界面)

1.分为三类 健康的桃子叶片 &#xff0c;251张 桃疮痂病一般&#xff0c;857张 桃疮痂病严重&#xff0c;770 张 2. GUI界面识别效果和predict.py识别效果如视频所示桃子叶片病害识别&#xff08;Python代码&#xff0c;pyTorch框架&#xff0c;深度卷积网络模型&#xff0…

【数据结构】如何用栈实现队列?图文解析(LeetCode)

LeetCode链接&#xff1a;232. 用栈实现队列 - 力扣&#xff08;LeetCode&#xff09; 注&#xff1a;本文默认读者已掌握栈与队列的基本操作 可以看这篇文章熟悉知识点&#xff1a;【数据结构】栈与队列_字节连结的博客-CSDN博客 目录 做题思路 代码实现 1. MyQueue 2. …

基于配置类方式管理 Bean

目录 一、完全注解开发理解 二、配置类和扫描注解 三、Bean定义组件 四、Bean注解细节 五、import 扩展 一、完全注解开发理解 Spring 完全注解配置&#xff08;Fully Annotation-based Configuration&#xff09;是指通过 Java配置类 代码来配置 Spring 应用程序&#…

【OCR识别】tess4j图片识别文字

什么是OCR? OCR &#xff08;Optical Character Recognition&#xff0c;光学字符识别&#xff09;是指电子设备&#xff08;例如扫描仪或数码相机&#xff09;检查纸上打印的字符&#xff0c;通过检测暗、亮的模式确定其形状&#xff0c;然后用字符识别方法将形状翻译成计算机…

MongoDB入门

简介 MongoDB是一个开源、高性能、支持海量数据存储的文档型数据库 是NoSQL数据库产品中的一种&#xff0c;是最像关系型数据库&#xff08;MySQL&#xff09;的非关系型数据库 内部采用BSON(二进制JSON)格式来存储数据,并支持水平扩展。 MongoDB本身并不是完全免费的,它对…

《C和指针》笔记10:作用域

结合上面的例子讲解C语言的作用域。 1. 代码块作用域 (block scope) 位于一对花括号之间的所有语句称为一个代码块。任何在代码块的开始位置声明的标识符都具有代码块作用域 (block scope)&#xff0c;表示它们可以被这个代码块中的所有语句访问。上图中标识为6、7、9、10的变…

Ubuntu释放VMware虚拟磁盘未使用空间

By: Ailson Jack Date: 2023.08.26 个人博客&#xff1a;http://www.only2fire.com/ 本文在我博客的地址是&#xff1a;http://www.only2fire.com/archives/152.html&#xff0c;排版更好&#xff0c;便于学习&#xff0c;也可以去我博客逛逛&#xff0c;兴许有你想要的内容呢。…

echarts 甘特图一组显示多组数据

<template><el-button type"primary" click"addlin">添加线</el-button><el-button type"success" click"addArea">添加区域</el-button><div ref"echart" id"echart" class&qu…

VB.NET调用VB6 Activex EXE实现PowerBasic和FreeBasic的标准DLL调用

VB6写的ActiveX EXE公共对象是外置进程&#xff0c;因此&#xff0c;尽管它是x86 32位的进程&#xff0c;但可以集成到 VB.NET的x64和x32程序中使用。 VS2022的VB.NET程序&#xff0c;调用ActiveX DLL对象我在上篇笔记中写了 VB.NET通过VB6 ActiveX DLL调用PowerBasic及FreeB…

TMS FlexCel Studio for VCL and FireMonkey Crack

TMS FlexCel Studio for VCL and FireMonkey Crack FlexCel for VCL/FireMonkey是一套允许操作Excel文件的Delphi组件。它包括一个广泛的API&#xff0c;允许本机读取/写入Excel文件。如果您需要在没有安装Excel的Windows或macOS机器上阅读或创建复杂的电子表格&#xff0c;Fle…

YOLOv5算法改进(5)— 添加ECA注意力机制

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。ECA注意力机制是一种用于图像处理中的注意力机制&#xff0c;是在通道注意力机制的基础上做了进一步的改进。通道注意力机制主要是通过提取权重&#xff0c;作用在原特征图的通道维度上&#xff0c;而ECA注意力机制则使用了…

网络基础入门

认识协议 协议其实是一种约定 网络协议初识&#xff1a; 1.内核上以结构体形式呈现 2.操作系统要进行协议管理--先描述&#xff0c;在管理 3.协议的本质是软件&#xff0c;软件是可以分层的&#xff0c;&#xff08;联系C继承多态的知识 &#xff09; 可以参考 &#xff1…

wireshark 流量抓包例题重现

目录 要求 黑客攻击的第一个受害主机的网卡IP地址黑客对URL的哪一个参数实施了SQL注入第一个受害主机网站数据库的表前缀 第一个受害主机网站数据库的名字 要求 &#xff08;1&#xff09;黑客攻击的第一个受害主机的IP地址 &#xff08;2&#xff09;黑客对URL的某一参数实…

Scikit-learn强化学习代码批注及相关练习

一、游戏介绍 木棒每保持平衡1个时间步&#xff0c;就得到1分。每一场游戏的最高得分为200分每一场游戏的结束条件为木棒倾斜角度大于41.8或者已经达到200分。最终获胜条件为最近100场游戏的平均得分高于195。代码中env.step&#xff08;&#xff09;&#xff0c;的返回值就分…

0825|C++day5 运算符重载+静态成员+类的基础【Xmind+实例】

一、运算符重载 实例&#xff1a;&#xff08;赋值运算符、自增自减运算符、插入提取运算符&#xff09; #include <iostream>using namespace std;class Person {friend Person & operator(Person &L,const Person &R);friend Person & operator(Perso…

Jira vs Trello:项目管理的深层巅峰对决

引言 项目管理在现代企业运作中起着至关重要的作用。从跨国公司的巨大项目&#xff0c;到创业公司的快速反应&#xff0c;再到个人的日常任务管理&#xff0c;一个好的项目管理工具可以有效地跟踪进度&#xff0c;优化资源分配&#xff0c;确保项目在预定时间内完成。今天&…