当前位置：首页 > news >正文

“react“: “^16.14.0“,打开弹窗数据发生变化

news 2025/8/25 8:20:36

“react”: “^16.14.0”,

弹窗

打开弹窗数据发生变化

// 这里对比changeHistoryVisible是否发生改变调用后端方法改变数据componentDidUpdate(prevProps) {if (prevProps.changeHistoryVisible !== this.props.changeHistoryVisible && this.props.changeHistoryVisible) {this.getStockLogList()}}componentDidMount() {this.getStockLogList()}

<Modaltitle={'变更记录'}visible={changeHistoryVisible}onCancel={() => this.changeHistoryCancel()}footer={false}width={800}><ModelCom changeHistoryVisible={changeHistoryVisible} ref={this.ModelCom} id={id} type={type}></ModelCom></Modal>

import React, { Component, useEffect } from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import { Button, Card, Form, Table, message, Modal } from 'antd';
import moment from 'moment';
import { enterStockTypeStatus, orderTypeNewRetail } from '@/utils/enumType'@connect((RetailGoodsInBound) => ({...RetailGoodsInBound,
}))
// 变更记录弹窗
export default class ModelCom extends Component {static propTypes = {dispatch: PropTypes.func,match: PropTypes.shape,}static defaultProps = {dispatch: PropTypes.dispatch,match: PropTypes.match,}state = {// changeHistoryVisible: false,loadingLog: false,currentObj: {},params: {currentPage: 1,pageSize: 10,id: ''}}columns = [{title: '变更用户',dataIndex: 'operatorName',key: 'operatorName',},{title: '变更时间',dataIndex: 'gmtCreate',key: 'gmtCreate',render: (text) => <>{text ? moment(text).format('YYYY-MM-DD') : ''}</>},{title: '条码',dataIndex: 'oldData',key: 'oldData',},{title: '操作',dataIndex: 'orderType',key: 'orderType',render: (text, record) => <><span>{`${orderTypeNewRetail(record.orderType)}${enterStockTypeStatus(record.type)}`}</span></>},]componentDidUpdate(prevProps) {if (prevProps.changeHistoryVisible !== this.props.changeHistoryVisible && this.props.changeHistoryVisible) {this.getStockLogList()}}componentDidMount() {this.getStockLogList()}columnsFilter() { }getStockLogList = () => {const { dispatch } = this.propsthis.state.params.id = this.props.idconst currentObj = {type: this.props.type,id: this.props.id,}this.setState({currentObj})this.setState({loadingLog: true})dispatch({type: 'RetailGoodsInBound/getGoodsUpdateLog',payload: { ...this.state.params },}).then(res => {if (res.code === 20000) {this.setState({loadingLog: false})}})}// 改变每页条数&下一页 上一页pageChange = (current, pageSize) => {this.state.params.currentPage = current;this.state.params.pageSize = pageSize;this.getStockLogList();};render() {const { RetailGoodsInBound: { stockLogList } } = this.props;const { changeHistoryVisible, loadingLog } = this.statereturn (// <Modal//   title={'变更记录'}//   visible={changeHistoryVisible}//   onCancel={() => this.changeHistoryCancel()}//   footer={false}//   width={800}// ><div className="contentModel"><TablerowKey="barCode"columns={this.columns}dataSource={stockLogList.rows ? stockLogList.rows : []}borderedloading={loadingLog}scroll={{ y: 400 }}pagination={{showSizeChanger: true,showQuickJumper: true,current: stockLogList.currentPage, // 当前页pageSize: stockLogList.pageSize, // 每页几条total: stockLogList.totalCount, // 总共条数onShowSizeChange: (current, pageSize) => {this.pageChange(current, pageSize);},onChange: (current, pageSize) => {this.pageChange(current, pageSize);},showTotal: (total) => `共 ${total} 条记录    第${stockLogList.currentPage ? stockLogList.currentPage : 1}/${stockLogList.totalPage ? stockLogList.totalPage : 1}页`}}/></div>// </Modal>)}
}