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

"react": "^16.14.0",

弹窗

打开弹窗数据发生变化

cpp 复制代码

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

  componentDidMount() {
    this.getStockLogList()
  }

cpp 复制代码

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

cpp 复制代码

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.props
    this.state.params.id = this.props.id
    const 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.state
    return (
      // <Modal
      //   title={'变更记录'}
      //   visible={changeHistoryVisible}
      //   onCancel={() => this.changeHistoryCancel()}
      //   footer={false}
      //   width={800}
      // >
      <div className="contentModel">
        <Table
          rowKey="barCode"
          columns={this.columns}
          dataSource={stockLogList.rows ? stockLogList.rows : []}
          bordered
          loading={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>

    )
  }
}