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

“react”: “^16.14.0”,

弹窗

打开弹窗数据发生变化

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

  componentDidMount() {
    this.getStockLogList()
  }
1
2
3
4
5
6
7
8
9
10

<Modal
                        title={'变更记录'}
                        visible={changeHistoryVisible}
                        onCancel={() => this.changeHistoryCancel()}
                        footer={false}
                        width={800}
                    >
                        <ModelCom changeHistoryVisible={changeHistoryVisible} ref={this.ModelCom} id={id} type={type}></ModelCom>
                    </Modal>
1
2
3
4
5
6
7
8
9

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 (
      // 
      //   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>
      // 

    )
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140