企业微信会话点击每一个item，渲染聊天内容_渲染企微聊天记录的demoui

首先父组件要获取聊天接口，通过id获取(先在servers/api/wechat.js组件中获取接口)

import request from 'utils/request';
import {
    stringify } from 'qs';
import {
    wechatV1 as v1, checkCode } from '../config';

// -------------------会话页面--------------------------------------------------------会话

// 获取--客户----   --右侧
export async function customersTest(id,params) {
   
  const response = request(`${
     v1}/wechat/customers/${
     id}/contents?${
     stringify(params)}`);
  return checkCode(response)
}

// 获取--员工----  --右侧
export async function staffsTest(id,params) {
   
  const response = request(`${
     v1}/wechat/staffs/${
     id}/contents?${
     stringify(params)}`);
  return checkCode(response)
}

// 获取--群-----客户群-- && -- 内部群 --右侧
export async function groupsTest(id,params) {
   
  const response = request(`${
     v1}/wechat/groups/${
     id}/contents?${
     stringify(params)}`);
  return checkCode(response)
}


// 获取群会话列表  --客户群--左侧 
export async function groupsLeftOutTest(params) {
   
  const response = request(`${
     v1}/wechat/groups?type=0${
     stringify(params)}`);
  return checkCode(response);
}
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

然后在models/wechat.js组件中去请求id和其他元素（这个组件是dev相当于一个模块）

import {
    message } from 'antd';
import * as API from '../services/api';

export default {
   
  namespace: 'wechat',

  state: {
   },

  effects: {
   
    // --------------------会话页面-----------------------------------------会话

    // 获取--客户----   --右侧
    *customersTest({
    payload: {
    id, ...rest }, callback }, {
    call }) {
   
      const response = yield call(API.customersTest,  id, {
    ...rest });
      if (response.code === 0) {
   
        if (callback) callback(response.data);
      }
    },

    // 获取--员工----  --右侧
    *staffsTest({
    payload: {
    id, ...rest }, callback }, {
    call }) {
   
      const response = yield call(API.staffsTest, id, {
    ...rest });
      if (response.code === 0) {
   
        if (callback) callback(response.data);
      }
    },

    // 获取--群-----客户群-- && -- 内部群 --右侧
    *groupsTest({
    payload: {
    id, ...rest }, callback }, {
    call }) {
   
      const response = yield call(API.groupsTest, id, {
    ...rest });
      if (response.code === 0) {
   
        if (callback) callback(response.data);
      }
    },

    // 获取群会话列表  --客户群--左侧 
    *groupsLeftOutTest({
    payload, callback }, {
    call }) {
   
      const response = yield call(API.groupsLeftOutTest, payload);
      if (response.code === 0) {
   
        if (callback) callback(response.data);
      }
    },

    // // 获取群会话列表  --内部群--左侧 
    *groupsLeftMinTest({
    payload, callback }, {
    call }) {
   
      const response = yield call(API.groupsLeftMinTest, payload);
      if (response.code === 0) {
   
        if (callback) callback(response.data);
      }
    },
    
},
reducers: {
   },
  }

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

还有就是员工和客户接口请求是一样的类型，都是为了在左侧渲染，就不放这里啦！

接下来：我们就开始做最主要的渲染页面啦！！！（关键）

首先呢，这是我们的主页面（就是父组件，接下来的所有都是子组件，要通过这个组件来传值的）

/**
 * @param {object} data - 读取数据
 * @param {String} btnVal - 在value中做比较，判断是否选中
 * @param {boolean} loading - 是否加载
 * @param {Function} handleInfiniteOnLoad - 配置加载的限制
 *  @param {Function} clickCode - 点击客户显示数据
 *  @param {Function} clickMen - 点击客户群显示数据
 *  @param {Function} clickMin - 点击内部群显示数据
 * 
 * */

import React, {
    PureComponent, Fragment } from 'react';

import {
    connect } from 'dva';
import PageHeaderLayout from 'layouts/PageHeaderLayout';

import StyleTab from 'assets/less/but.less';
import {
    Radio, Form, Input, Row, Col, Pagination, Button, List, message, Avatar, Spin, Card } from 'antd';
// import Logo from 'assets/image/logo.png';
import './index.less';
import Right from './Right';





@connect(({
    wechat, loading }) => ({
   
  wechat,
  loading: loading.effects['wechat/staffsList'],
  staffLoading: loading.effects['wechat/staffSyncList'],
}))

export default class Left extends PureComponent {
   

  constructor(props) {
   
    super(props);
    this.state = {
   
      btnVal: '1',
      data: [],
      loading: false,
      dataList: [],
      // param: {},
      page: {
   },
    }
  }

  componentDidMount() {
   

    // 初始化页面展示员工列表
    this.staffSpeak()

    // this.clickCode()
  };


  // 配置加载的限制
  handleInfiniteOnLoad = () => {
   
    let {
    data } = this.state;
    this.setState({
   
      loading: true,
    });
    if (data.length > 14) {
   
      message.warning('Infinite List loaded all');
      this.setState({
   
        loading: false,
      });
      return;
    };
    this.fetchData(res => {
   
      data = data.concat(res.results);
      this.setState({
   
        data,
        loading: false,
      });
    });
  };

  // 在value中做比较，判断是否选中
  handleBtnChange = e => {
   
    this.setState({
    btnVal: e.target.value });
  };

  // 点击   --员工  --左侧
  staffSpeak = () => {
   
    const {
    dispatch } = this.props;
    dispatch({
   
      type: 'wechat/staffsList',
      payload: {
   },
      callback: res => {
   
        this.setState({
    data: res.list })
      },
    })
  }

  // 客户 --左侧
  customersSpeak = () => {
   
    const {
    dispatch } = this.props;
    dispatch({
   
      type: 'wechat/customersList',
      payload: {
   },
      callback: res => {
   
        // console.log("客户",res);
        this.setState({
    data: res.list })
      },
    })
  };

  // 客户群 --左侧
  groupsLeftSpeak = () => {
   
    // this.setState({
   
    //   data: [
    //     { name: '北京儿童医院对接群', department: '成员数：10人' },
    //     { name: '天津人民医院消化科群', department: '成员数：10人' },
    //   ],
    // })
    const {
    dispatch } = this.props;
    dispatch({
   
      type: 'wechat/groupsLeftOutTest',
      payload: {
   },
      callback: res => {
   
        // console.log(res, "客户群555");
        this.setState({
    data: res.list })
      },
    })
  };

  // 内部群  --左侧
  groupsLeftMinSpeak = () => {
   
    // this.setState({
   
    //   data: [
    //     { name: '信息中心', department: '人数：8人' },
    //     { name: '销售部-LIMS系统问题反馈群', department: '人数：112人' },
    //   ],
    // })
    const {
    dispatch } = this.props;
    dispatch({
   
      type: 'wechat/groupsLeftMinTest',
      payload: {
   },
      callback: res => {
   
        // console.log(res, "客户内部群左侧");
        this.setState({
    data: res.list })
      },
    })
  };
  // 点击跳转结束

  // 点击员工姓名开始  --右侧
  staffName = (item, page) => {
   
    const {
    dispatch } = this.props;
    // console.log(item, 129);
    dispatch({
   
      type: 'wechat/staffsTest',
      payload: {
    id: item.id, page },
      callback: res => {
   
        // console.log('点击渲染右侧', res, 9);
        this.setState({
   
          dataList: res.list,
          page: res.pagination,
          id: item.id,
        })
      },
    })

  };
  // 点击员工姓名结束

  // 客户item开始  --右侧
  customersName = (item, page) => {
   
    const {
    dispatch } = this.props;
    dispatch({
   
      type: "wechat/customersTest",
      payload: {
    id: item.id, page },
      callback: res => {
   
        // console.log(res, "客户会话");
        this.setState({
   
          dataList: res.list,
          page: res.pagination,
          id: item.id,
        })
      },
    })
  };
  // 客户item结束

  // 客户群---右侧   --内部群
  groupsCusName = (item, page) => {
   
    const {
    dispatch } = this.props;
    dispatch({
   
      type: "wechat/groupsTest",
      payload: {
    id: item.id, page },
      callback: res => {
   
        // console.log(res, "群会话");
        this.setState({
   
          dataList: res.list,
          page: res.pagination,
          id: item.id,
        })
      },
    })
  }
  // 客户群---右侧结束 --内部群



  render() {
   
    // const { id } = this.props;
    const {
    btnVal, loading, data, dataList, page, id } = this.state;
    // console.log(param, 700);
    // console.log(page, 55555);
    // console.log(dataList, btnVal, 100);
    return (
      <Fragment>
        <PageHeaderLayout breadcrumbExtraContent={
   
          <Button type="primary" style={
   {
    backgroundColor: '#169BD5', width: 82, height: 25, border: 'none', fontSize: 14, paddingTop: 2, marginTop: 5 }} className={
   StyleTab.hovered}>
            同步会话
          </Button>
        }
        >
          <Card bordered={
   false}>
            <Row>
              <Col
                span={
   8}
                style={
   {
    marginTop: -24, borderRight: '1px solid #d9d9d9', paddingRight: 24 }}
              >
                <div style={
   {
    paddingTop: 24 }}>
                  {
   /* button开始 */}
                  <Radio.Group style={
   {
    textAlign: 'center', width: '100%', marginBottom: 13 }} value={
   btnVal} onChange={
   this.handleBtnChange}>
                    <Radio.Button style={
   {
    width: '25%' }} value="1" onClick={
   () => this.staffSpeak()}>员工</Radio.Button>
                    <Radio.Button style={
   {
    width: '25%' }} value="2" onClick={
   () => this.customersSpeak()}>客户</Radio.Button>
                    <Radio.Button style={
   {
    width: '25%' }} value="3" onClick={
   () => this.groupsLeftSpeak()}>客户群</Radio.Button>
                    <Radio.Button style={
   {
    width: '25%' }} value="4" onClick={
   () => this.groupsLeftMinSpeak()}>内部群</Radio.Button>
                  </Radio.Group>
                  {
   /* button结束 */}

                  {
   /* 查询开始 */}
                  <Form style={
   {
    marginTop: 12 }}>
                    <Row>
                      <Col span={
   14}>
                        <Form.Item name="name" label="姓名">
                          <Input placeholder="请输入" />
                        </Form.Item
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337