完成 WhatsApp 会话功能

src/charts/WhatsApp_session.js

@@ -1,39 +1,98 @@
-import React, {useContext, useEffect} from 'react';
-import {Row, Col, Button, Divider, Table, Space, Radio, Tooltip} from 'antd';
-import {
-    ContainerOutlined,
-    SearchOutlined,
-} from '@ant-design/icons';
+import React, {Component} from 'react';
+import {Row, Col, List, Avatar, DatePicker, Pagination} from 'antd';
 import {stores_Context} from '../config'
-import {Line} from "@ant-design/charts";
 import {observer} from 'mobx-react';
-import DatePickerCharts from '../charts/DatePickerCharts'
-import {NavLink, useParams} from "react-router-dom";
-import * as comm from "../utils/commons";
-import * as config from "../config";
-import SiteSelect from "../charts/SiteSelect";
-import GroupSelect from "../charts/GroupSelect";
-import {utils, writeFileXLSX} from "xlsx";
+import 'moment/locale/zh-cn';
 
-const WhatsApp_session = () => {
+class WhatsApp_session extends Component {
 
-    const {orders_store, date_picker_store, customer_store} = useContext(stores_Context);
-    const inchina_data = customer_store.inchina_data;
+    static contextType = stores_Context;
+    constructor(props) {
+        super(props);
+    }
 
-    useEffect(() => {
-
-    }, [])
+    componentDidMount() {
+        console.info('Wechat_session.componentDidMount');
+        const {whatsAppStore} = this.context;
+        whatsAppStore.fetchWechatUserList();
+    }
 
+    handleUserClick(user) {
+        const {whatsAppStore} = this.context;
+        whatsAppStore.fetchContactList(user);
+    }
+    handleContactClick(contact) {
+        const {whatsAppStore} = this.context;
+        whatsAppStore.fetchChatMsgList(contact, 0, 20);
+    }
+    handlePageChanged(page, pageSize) {
+        const {whatsAppStore} = this.context;
+        whatsAppStore.fetchChatMsgList(whatsAppStore.selectedContact, page, pageSize);
+    }
+    render() {
+        const {whatsAppStore} = this.context;
+        const userList = whatsAppStore.userList;
+        const contactList = whatsAppStore.contactList;
+        const chatMsgList = whatsAppStore.chatMsgList;
+        const chatMsgPage = whatsAppStore.chatMsgPage;
 
     return (
-        <div>
+        <>
             <Row>
-                <Col span={8}>
-                    <h2>WhatsAPP会话</h2>
+                <Col span={6}>
+                    <List
+                        itemLayout="horizontal"
+                        dataSource={userList}
+                        renderItem={(user) => (
+                            <List.Item onClick={() => {this.handleUserClick(user)}}>
+                                <List.Item.Meta
+                                    avatar={<Avatar src={user.avatar} />}
+                                    title={user.username}
+                                />
+                            </List.Item>
+                        )}
+                    />
+                </Col>
+                <Col span={6}>
+                    <List
+                        itemLayout="horizontal"
+                        dataSource={contactList}
+                        renderItem={(contact) => (
+                            <List.Item onClick={() => {this.handleContactClick(contact)}}>
+                                <List.Item.Meta
+                                    avatar={<Avatar src={contact.avatar} />}
+                                    title={contact.username}
+                                />
+                            </List.Item>
+                        )}
+                    />
                 </Col>
+                <Col span={12}>
+                    <List
+                        itemLayout="horizontal"
+                        dataSource={chatMsgList}
+                        renderItem={(chatMsg) => (
+                            <List.Item>
+                                <List.Item.Meta
+                                    avatar={<Avatar src={chatMsg.from_avatar} />}
+                                    title={chatMsg.from_name}
+                                    description={chatMsg.msgtime}
+                                />
+                                {chatMsg.content.text}
+                            </List.Item>
+                        )}
+                    />
+                    <Pagination 
+                        current={chatMsgPage.currpage} 
+                        pageSize={20} 
+                        total={chatMsgPage.totalpage*20}
+                        onChange={(page, pageSize) => { this.handlePageChanged(page, pageSize)}} />
+                </Col>
+
             </Row>
-        </div>
+        </>
     );
+    }
 
 }
 export default observer(WhatsApp_session);

src/stores/Index.js

@@ -7,6 +7,7 @@ import AuthStore from "./AuthStore";
 import ChatSessionStore from "./ChatSessionStore";
 import FinancialStore from "./FinancialStore";
 import WechatStore from "./Wechat";
+import WhatsAppStore from "./WhatsApp";
 
 
 class Index {
@@ -19,6 +20,7 @@ class Index {
         this.chat_session_store = new ChatSessionStore(this);
         this.financial_store = new FinancialStore(this);
         this.wechatStore = new WechatStore(this);
+        this.whatsAppStore = new WhatsAppStore(this);
         makeAutoObservable(this);
     }
 

src/stores/WhatsApp.js

@@ -0,0 +1,63 @@
+import {makeAutoObservable, runInAction} from "mobx"
+import * as config from "../config";
+import * as req from '../utils/request';
+
+class WhatsApp {
+
+    constructor(rootStore) {
+        this.rootStore = rootStore;
+        makeAutoObservable(this);
+    }
+
+    fetchWechatUserList() {
+        
+        req.fetchJSON(config.HT_HOST + '/weixin/wxwork/get_permit_user_list')
+            .then(json => {
+                if (json.errcode === 0) {
+                    runInAction(() => {
+                        this.userList = json.Result.filter(user => {
+                            return user.SMPlatform === 'whatsapp';
+                        });
+                    });
+                }
+            });
+    }
+
+    fetchContactList(user) {
+        
+        req.fetchJSON(config.HT_HOST + '/weixin/wxwork/get_externalcontact_list?userid='+user.userid)
+            .then(json => {
+                if (json.errcode === 0) {
+                    runInAction(() => {
+                        this.contactList = json.Result.filter(user => {
+                            return user.SMPlatform === 'whatsapp';
+                        });
+                    });
+                }
+            });
+    }
+    
+    fetchChatMsgList(contact, page, pageSize) {
+        runInAction(() => {
+            this.selectedContact = contact;
+        });
+        req.fetchJSON(config.HT_HOST + '/weixin/wxwork/GetChatmsg?external_userid='+this.selectedContact.userid+'&Page_count='+pageSize+'&curr_page='+page)
+            .then(json => {
+                if (json.errcode === 0) {
+                    runInAction(() => {
+                        this.chatMsgList = json.chatmsg;
+                        this.chatMsgPage = json.chatpage;
+                    });
+                }
+            });
+    }
+
+    userList = [{username: '---', avatar: 'https://joeschmoe.io/api/v1/random'}];
+    contactList = [{username: '---', avatar: 'https://joeschmoe.io/api/v1/random'}];
+    chatMsgList = [{from_name: '---', from_avatar: 'https://joeschmoe.io/api/v1/random', content: {text: '---'}}];
+    chatMsgPage = {currpage: 1, totalpage: 1};
+    selectedContact = this.contactList[0];
+
+}
+
+export default WhatsApp;