员工管理二级会话页面原版

/**
 * @文件描述  会话记录页面 - Tab会话记录
 * @创建人和时间 闫宵娜 - 2021-03-19
 * @更新人和时间 闫宵娜 - 2021-03-22
 * @param {object} list - 列表字段
 * @param {object} params - 获取id字段
 * 
 * */
import React, { PureComponent } from 'react';
// import { Map, Marker } from 'react-amap';
import { connect } from 'dva';
import { Form, Input, Row, Col, Card, Avatar, Button, Pagination, Select, DatePicker, Spin } from 'antd';
// import Logo from 'assets/image/logo.png';
// import ReactAudioPlayer from 'react-audio-player';
// import a from 'assets/audio/ceshi.mp3';
// import { Player } from 'video-react';
import "../../../../../node_modules/video-react/dist/video-react.css";
// import Amap from '../../Session/Right/amap.less';
// import typeData from '../../Session/Right/data';
import { renderContent, typeArr } from '../../Session/Right/data';

@connect(({ wechat, loading }) => ({
  wechat,
  loading: loading.effects['wechat/groupsTest'],
  saveLoading: loading.effects['wechat/groupsTest'] || loading.effects['wechat/groupsTest'],
}))

export default class SpeakCroup extends PureComponent {

  constructor(props) {
    super(props);
    this.formRef = React.createRef();
    this.state = {
      // list: [],
      // params: { id: props.id },
      // searchFormData: {},
      // inputVideoUrl: 'https://media.w3.org/2010/05/sintel/trailer_hd.mp4',
      // mexModle: {
      //   param: {},
      //   visible: false,
      // },
      // center: { longitude: 114, latitude: 31 },
      // data: [],
      // pagination: {},
      params: { id: props.id },
      //  searchFormData: {},
      dataList: [],
      page: {},
      limit: 15,
      msgType: '',
    }
  };

  // // 获取员工会话记录列表开始
  componentDidMount() {
    this.staffName()
  }
  // 获取员工会话记录列表结束

  // 点击群开始  --右侧
  staffName = (page, pageSize, param = {}) => {
    const { dispatch } = this.props;
    // console.log(id, '会话');
    const { params } = this.state;
    //  console.log(params, 2);
    dispatch({
      type: 'wechat/groupsTest',
      payload: { ...params, page, limit: pageSize, ...param },
      callback: res => {
        //  console.log('点击渲染右侧', res, 9);
        this.setState({
          dataList: res.list,
          page: res.pagination,
          limit: res.pagination.pageSize,
          msgType: param,
        })
      },
    })
  };

  // 类型  查询
  onGenderChange = (values) => {
    console.log(values, 45);
    this.staffName(1, 15,
      {
        ...values,
        msg_type: values.msg_type ? values.msg_type.join(',') : undefined,
        start_time: values.time[0] ? values.time[0].format("YYYY-MM-DD HH:mm:ss") : undefined,
        end_time: values.time[1] ? values.time[1].format("YYYY-MM-DD HH:mm:ss") : undefined,
        time: undefined,
        t_content: values.t_content,
      })
  }

  // 类型   重置
  resetType = () => {
    this.formRef.current.resetFields();
    this.staffName(1, 15)
  }

  // 分页
  onChange = (pageNumber, pageSize) => {

    // const { params } = this.state;
    // const { id } = this.props;
    console.log(pageNumber, pageSize, 89);
    this.staffName(pageNumber, pageSize)
  }

  render() {
    const { loading } = this.props;
    const { dataList, page, limit, msgType } = this.state;
    console.log(limit, page, msgType, 111);
    return (
      <div style={{ marginTop: 10, marginLeft: 10 }}>
        {/* 查询开始 */}
        <Form
          ref={this.formRef}
          onFinish={
            this.onGenderChange
          }
        >
          <Row gutter={24}>
            <Col span={6}>
              <Form.Item name="msg_type" label="类型">
                <Select
                  allowClear
                  showSearch
                  mode="tags"
                  optionFilterProp="children"
                  placeholder="请选择产品线"
                  style={{ width: '100%', verticalAlign: 'top' }}
                >
                  {
                    typeArr.map(item => (
                      <Select.Option key={item.type} value={item.type}>{item.name}</Select.Option>
                    ))
                  }
                </Select>
              </Form.Item>
            </Col>

            <Col span={6}>
              <Form.Item name="time" label="时间" style={{ paddingLeft: 5 }}>
                <DatePicker.RangePicker
                  style={{ width: '100%' }}
                  showTime
                  format="YYYY-MM-DD HH:mm:ss"
                  placeholder={['开始时间', '结束时间']}
                />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name="t_content" label="内容" style={{ paddingLeft: 7 }}>
                <Input placeholder="请选择" style={{ width: '100%' }} />
              </Form.Item>
            </Col>
            <Col span={5}>
              <Form.Item style={{ marginRight: 0 }}>
                <Button type="primary" htmlType="submit">
                  查询
                </Button>
                <Button style={{ marginLeft: 10 }} onClick={this.resetType}>
                  重置
                </Button>
              </Form.Item>
            </Col>
          </Row>

        </Form>
        {/* 查询结束 */}
        {/* 列表开始 */}
        <div style={{ overflow: 'hidden', backgroundColor: '#f5f5f5' }}>
          {
            dataList.map(item => {
              return (
                <Card
                  key={item.id}
                  loading={loading}
                  title={
                    <div>
                      <Avatar src={item.member.avatar} style={{ marginLeft: 5, marginRight: 5, width: 15, height: 15, marginBottom: 2 }} />
                      <span style={{ color: "#999999", fontSize: 14 }}>{item.member.name}&nbsp;--&nbsp;{item.from}</span>
                    </div>
                  }
                  hoverable
                  size="small"
                  style={{ marginBottom: 10, marginTop: 10, marginLeft: 10, marginRight: 10 }}
                  extra={
                    <div>
                      <span href="#" style={{ float: 'right', color: '#999999' }}>{item.msg_time}</span>
                    </div>}

                >
                  <div style={{ paddingLeft: 44 }}>
                    {renderContent(item)}

                  </div>

                </Card>
              )
            })
          }
          {loading && (
            <div className="demo-loading-container">
              <Spin />
            </div>
          )}
        </div>
        {/* 列表结束 */}

        {/* 右侧分页开始 */}
        <Pagination
          style={{ float: 'right', marginTop: 20 }}
          showSizeChanger
          showQuickJumper
          //  current={1}
          //  total={50}
          //  pageSize={15}
          current={page.current || 1}
          total={page.total || 0}
          pageSize={page.pageSize || 15}
          onChange={this.onChange}
        />
        {/* 右侧分页结束 */}

      </div>
    )
  }
}