kara-module-forward/src/forward.js

kara module forward

/* eslint-disable */
import React, {Component} from 'react'
import debounce from 'lodash/debounce';
import style from './index.scss'
import SearchResultItems from './searchResults';
import SelectedListItems from './selectedList';
import tost,{errorTost} from "kara-module-tost";
import 'kara-module-tost/lib/index.css'

const imgStaffDefault = require('./default.png');
const pageNo = 1;

class Forward extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showSearchResults: true, // 搜索关键字为空时，添加选项时 = false, onFocus&onChange = true
      selectedList: new Map(),
      showRecent: false, // 显示最近联系人
      first: true,
      recentContacts: [], // 默认联系人
      searchResults: [], // 搜索结果
    }
  }

  componentWillMount() {
    const { httpAgent } = this.props
    httpAgent.get('/webapi/forward/channelRecords').then(res=>{
      if(res && res.resultCode && res.resultCode === '000000' && res.infos) {
        this.setState({recentContacts:res.infos})
      }
    })
  }
  componentWillReceiveProps = (nextProps) => {
    const { searchResults } = nextProps;
    if (searchResults && searchResults.length > 0) {
      this.setState({ showSearchResults: true });
    }
  }
  getAllStaffChannel = (keywords) => {
    const { httpAgent } = this.props
    const body = {
      flag: 'staff',
      keywords,
      channelId: 'channel',
      pageInfo: {
        pageNo: 1,
        pageSize: 100,
      },
    }
    const backParams = {keywords}
    httpAgent.post('/search/transpond/membersAndChannels',body,backParams).then(res=>{
      if(res && res.resultCode && res.resultCode === '000000' && res.pageInfo) {
        this.setState({searchResults:res.pageInfo.result})
      }
    })
  }
  selectItem = (id, item) => {
    const selectedList = this.state.selectedList;
    if (!selectedList.has(id)) {
      selectedList.set(id, item);
    }
    this.setState({ selectedList });
    this.hideSearchResults();
  }
  removeItem = (id, item) => {
    const selectedList = this.state.selectedList;
    if (selectedList.has(id)) {
      selectedList.delete(id, item);
    }
    this.setState({ selectedList });
  }
  // 转发输入框捕获onChange事件
  handleOnChange = debounce(() => {
    const val = this.input.value;
    const { channelId } = this.props;
    if (val && val.trim() && val.trim() !== '') {
      this.getAllStaffChannel(val)
      this.setState({ showRecent: false });
    } else {
      // this.props.dispatch(clearSearchResults());
      this.setState({ showRecent: true });
    }
  }, 200);
  // 转发输入框捕获焦点事件
  handleOnFocus = (evt) => {
    const val = evt.target.value;
    if (this.state.first === true) this.setState({ first: false });
    this.setState({ showSearchResults: true });
    if (this.state.searchResults && (val && val.trim() && val.trim() !== '')) {
      this.getAllStaffChannel(val);
      this.setState({ showRecent: false });
    } else {
      this.setState({ showRecent: true });
    }
  }
  handelOnBlur = () => {
    const that = this;
    const { timer } = this;
    if (timer) clearTimeout(timer);
    this.timer = setTimeout(() => {
      that.setState({ showRecent: false });
    }, 200);
  }
  clearSearchText = () => {
    this.input.value = '';
    this.setState({ searchResults: [] });
  }
  hideSearchResults = () => {
    this.setState({ showSearchResults: false });
  }
  // popup 弹出框确认动作：添加成员、确认转发、发起群聊等
  save = () => {
    const { type } = this.props
    if(!type) {
      //消息转发
      this.saveDefault()
    }else{
      if(type === 'cms') {
        // 分享资讯
        this.shareUrl()
      }else if (type === 'quan'){
        //同事圈话题
        this.shareQuan()
      }
    }
  }
  saveDefault = () => {
    const selectedList = Array.from(this.state.selectedList.values());
    // eslint-disable-next-line
    let staffList = [], channelList = [];
    selectedList.forEach((item) => {
      if (item.type === 'staff') {
        staffList.push(item.id);
      } else if (item.type === 'channel') {
        channelList.push(item.id);
      }
    });
    if (staffList.length > 0 || channelList.length > 0) {
      const { httpAgent, messageId } = this.props
      const body = {
        messageId,
        channelIdList:channelList,
        accountIdList:staffList,
      }
      httpAgent.post('/webapi/message/forward',body).then(res=>{
        if(res.resultCode === '000000') {
          this.props.modalHidden()
          tost({type:'success',msg:'转发成功',time:4}) 
        }else {
          tost({type:'error',msg:'转发失败',time:4}) 
        }
      })
    }
  }
  shareUrl = () => {
    const selectedList = Array.from(this.state.selectedList.values());
    // eslint-disable-next-line
    let staffList = [], channelList = [];
    selectedList.forEach((item) => {
      if (item.type === 'staff') {
        staffList.push(item.id);
      } else if (item.type === 'channel') {
        channelList.push(item.id);
      }
    });
    if (staffList.length > 0 || channelList.length > 0) {
      const { httpAgent, shareUrl } = this.props
      const body = {
        channelId: channelList,
        accountId: staffList,
        linkUrl: shareUrl
      }
      httpAgent.post('/webapi/message/outerMessageShare',body).then(res=>{
        if(res.resultCode === '000000') {
          this.props.modalHidden()
          tost({type:'success',msg:'转发成功',time:4}) 
        }else {
          tost({type:'error',msg:'转发失败',time:4}) 
        }
      })
    }
  }
  shareQuan = () => {
    const selectedList = Array.from(this.state.selectedList.values());
    // eslint-disable-next-line
    let staffList = [], channelList = [];
    selectedList.forEach((item) => {
      if (item.type === 'staff') {
        staffList.push(item.id);
      } else if (item.type === 'channel') {
        channelList.push(item.id);
      }
    });
    if (staffList.length > 0 || channelList.length > 0) {
      const { httpAgent, shareParams } = this.props
      const body = {
        msgType: 3,
        scene: 1,
        channelIds: channelList,
        accountIds: staffList,
        content: shareParams
      }
      httpAgent.post('/webapi/share/quan/aitribe',body).then(res=>{
        if(res.resultCode === '000000') {
          this.props.modalHidden()
          tost({type:'success',msg:'转发成功',time:4}) 
        }else {
          tost({type:'error',msg:'转发失败',time:4}) 
        }
      })
    }
  }
  useDefaultPic = (evt) => {
    // 这里需要判断默认头像是否会报错，避免死循环
    // eslint-disable-next-line
    evt.target.src = imgStaffDefault;
  }

  render() {
    const { showSearchResults, showRecent, first, recentContacts=[], searchResults=[], } = this.state;
    const selectedList = Array.from(this.state.selectedList.values());
    const showNoResult = (showSearchResults && searchResults.length === 0 && (this.input === undefined || this.input.value !== ''));
    const closeCls = (this.input && this.input.value !== '') ? style['search-clear'] : `${style['search-clear']} ${style.hide}`;
    return (
      <div className={style['m-add-member']}>
        <i className={`i-f i-close middle ${style.card}`} onClick={() => { this.props.modalHidden(); }} />
        <div className={style['m-add-group']}>
          <h1 className={style['add-title']}>转发</h1>
          <div className={style.ginit}>
            <div className={style['m-search']}>
              <i className={`i-f i-search ${style['forward-search']}`} />
              <input
                className={style['search-input']}
                type="text"
                ref={(e) => { this.input = e; }}
                placeholder="查找人员或群组"
                onChange={this.handleOnChange}
                onFocus={this.handleOnFocus}
                onBlur={this.handelOnBlur}
              />
              <i
                onClick={this.clearSearchText}
                className={`i-f i-close ${closeCls}`}
              />
            </div>

            <SearchResultItems
              searchResults={searchResults} show={showSearchResults} showNoResult={showNoResult}
              selectItem={this.selectItem} selectedList={selectedList}
              accountType={this.props.accountType}
              recentContacts={recentContacts}
              showRecent={showRecent}
              first={first}
              clearSearchText={this.clearSearchText}
            />
            <SelectedListItems
              selectedList={selectedList}
              removeItem={this.removeItem}
              save={this.save}
            />
          </div>
        </div>
      </div>
    );
  }

}

export default Forward;