index.js

/* eslint-disable import/no-unresolved */
/* eslint-disable no-underscore-dangle */
/* eslint-disable global-require */
/* eslint-disable eqeqeq */
/*
 ** 功能名称
 ** create by tuwei on 2022/2/20
 ** 功能路径：src\pages\product\common\CheckAllMessage\CheckAllMessage.js
 * */
import React, { useState, useEffect, useRef } from 'react';
import { connect } from 'react-redux';
import { List, message, Avatar, Skeleton, Divider, Select, notification } from 'antd';
import { CheckOutlined } from '@ant-design/icons';
import InfiniteScroll from 'react-infinite-scroll-component';
// eslint-disable-next-line import/no-unresolved
import classnames from 'classnames';
import { noticeService } from '@/api';
import styles from './index.less';
import { formatDate } from './utils';

const findMenuPath = (flatMenu, url) => {
  const [path, param = ''] = url.split('|');
  const params = param.split('&').reduce((pre, item) => {
    if (!item) return pre;
    const [key, value] = item.split('=');
    pre[key] = value;
    return pre;
  }, {});
  const menu = flatMenu.find(item => item.params && item.params.widget === params.widget); // 根据widget匹配菜单
  // const menu = flatMenu.find(item => item.path.indexOf(path) > -1); // 根据路径匹配菜单
  return menu ? menu.path.replace(/^\//, '') : '';
};

const CheckAllMessage = props => {
  const { flatMenu } = props;
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);
  const [sortType, setSortType] = useState(1); // 排序类型
  const [infoTypeList, setInfoTypeList] = useState([]);
  const [isRes, setIsRes] = useState(false);
  const total = useRef(0);
  const pageIndex = useRef(1);
  const pageSize = useRef(20);
  const infoType = useRef('全部');
  // 获取类型数据
  const getTypeList = () => {
    noticeService.getCurrentInfoType({ userID: window.globalConfig.userInfo.OID }).then(res => {
      if (res.code === 0) {
        res.data?.unshift('全部');
        res.data && setInfoTypeList(res.data);
      }
    });
  };
  // 加载数据
  const loadMoreData = () => {
    if (loading) {
      return;
    }
    setLoading(true);
    let obj = {};
    if (infoType.current === '全部') {
      obj = {
        userID: window.globalConfig.userInfo.OID,
        pageIndex: pageIndex.current,
        pageSize: pageSize.current,
        sort: sortType,
      };
    } else {
      obj = {
        type: infoType.current,
        userID: window.globalConfig.userInfo.OID,
        pageIndex: pageIndex.current,
        pageSize: pageSize.current,
        sort: sortType,
      };
    }
    // userID: window.globalConfig.userInfo.OID,
    noticeService
      .getAllInformationInfo(obj)
      .then(res => {
        if (res.code === 0) {
          // eslint-disable-next-line no-plusplus
          pageIndex.current++;
          total.current = res.data.totalCount;
          // eslint-disable-next-line no-use-before-define
          res.data.list && setData([...data, ...deaflData(res.data.list)]);
          setIsRes(true);
          setLoading(false);
        }
      })
      .catch(() => {
        setIsRes(true);
        setLoading(false);
      });
  };
  useEffect(() => {
    loadMoreData();
    getTypeList();
  }, []);
  // eslint-disable-next-line no-shadow, arrow-body-style
  const deaflData = (data = []) => {
    return data.map(item => {
      let content = '';
      try {
        content = JSON.parse(item.infoContent);
        content = item.infoContent;
      } catch (error) {
        content = '{}';
      }
      return { ...item, infoContent: content };
    });
  };
  // 获取数据
  const getData = obj => {
    noticeService
      .getAllInformationInfo(obj)
      .then(res => {
        if (res.code === 0) {
          // eslint-disable-next-line no-plusplus
          pageIndex.current++;
          total.current = res.data.totalCount;
          res.data.list && setData(deaflData(res.data.list));
          setLoading(false);
        }
      })
      .catch(() => {
        setLoading(false);
      });
  };
  // 监听选择类型
  const onChange = e => {
    infoType.current = e;
    pageIndex.current = 1;
    let obj = {};
    if (infoType.current === '全部') {
      obj = {
        userID: window.globalConfig.userInfo.OID,
        pageIndex: pageIndex.current,
        pageSize: pageSize.current,
        sort: sortType,
      };
    } else {
      obj = {
        type: infoType.current,
        userID: window.globalConfig.userInfo.OID,
        pageIndex: pageIndex.current,
        pageSize: pageSize.current,
        sort: sortType,
      };
    }
    getData(obj);
  };
  // title 回显
  const messageTitle = (item, info) => {
    const { messType, title } = item;
    let messInfo = '';
    switch (messType) {
      case '工单提醒':
        messInfo = `${info.caseType}`;
        break;
      case '通用报警':
        messInfo = `${info.title}`;
        break;
      case '系统通知':
        messInfo = `${info.noticeType}`;
        break;
      default:
        messInfo = title || info.title;
        break;
    }
    return messInfo;
  };
  // content回显
  const messageContent = (item, info) => {
    const { messType, defaultContent } = item;
    let messInfo = '';
    switch (messType) {
      case '工单提醒':
        messInfo = `${info.flowName},${info.nodeName},承办意见：${info.content}`;
        break;
      case '通用报警':
        messInfo = `${info.content},${info.deviceCode}`;
        break;
      case '系统通知':
        messInfo = `${info.noticeTitle},${info.noticeContent}`;
        break;
      default:
        messInfo = info.content || defaultContent;
        break;
    }
    return messInfo;
  };
  // 渲染消息发送时间
  const renderTime = value => {
    if (!value) return '';
    const createTime = new Date(value);
    const currentTime = new Date();
    const difSeconds = (currentTime.getTime() - createTime.getTime()) / 1000;
    let timeMsg = '';
    if (difSeconds < 60) {
      timeMsg = '刚刚';
    } else if (difSeconds / 60 < 60) {
      // eslint-disable-next-line radix
      timeMsg = `${parseInt(difSeconds / 60)}分钟前`;
    } else if (difSeconds / 3600 < 24) {
      // eslint-disable-next-line radix
      timeMsg = `${parseInt(difSeconds / 3600)}小时前`;
    } else {
      timeMsg = formatDate(createTime, 'yyyy-MM-dd');
    }
    return timeMsg;
  };
  const sortChange = value => {
    setSortType(value);
    pageIndex.current = 1;
    let obj = {};
    if (infoType.current === '全部') {
      obj = {
        userID: window.globalConfig.userInfo.OID,
        pageIndex: pageIndex.current,
        pageSize: pageSize.current,
        sort: value,
      };
    } else {
      obj = {
        type: infoType.current,
        userID: window.globalConfig.userInfo.OID,
        pageIndex: pageIndex.current,
        pageSize: pageSize.current,
        sort: value,
      };
    }
    getData(obj);
  };
  // 渲染头像
  const renderImg = item => {
    const { messType, webIcon } = item;
    if (webIcon) return `${window.location.origin}/${webIcon}`;
    if (messType === '通用报警') {
      return require('../../../assets/images/system/notifications/icon2.png');
    }
    if (messType === '工单提醒') {
      return require('../../../assets/images/system/notifications/icon4.png');
    }
    if (messType === '系统通知') {
      return require('../../../assets/images/system/notifications/icon3.png');
    }
    if (messType === '工时审批') {
      return require('../../../assets/images/system/notifications/icon1.png');
    }
    if (messType.indexOf('工时填报') != -1) {
      return require('../../../assets/images/system/notifications/icon6.png');
    }
    if (messType.indexOf('会议') != -1) {
      return require('../../../assets/images/system/notifications/icon7.png');
    }
    return require('../../../layouts/AppLayout/notifier/images/types/other.png');
  };
  // 标记为已读
  const hasRead = () => {
    noticeService.postInformationStatus({ userID: window.globalConfig.userInfo.OID, isAll: 1 }).then(res => {
      if (res.code == 0) {
        pageIndex.current = 1;
        let obj = {};
        if (infoType.current == '全部') {
          obj = {
            userID: window.globalConfig.userInfo.OID,
            pageIndex: pageIndex.current,
            pageSize: pageSize.current,
            sort: sortType,
          };
        } else {
          obj = {
            type: infoType.current,
            userID: window.globalConfig.userInfo.OID,
            pageIndex: pageIndex.current,
            pageSize: pageSize.current,
            sort: sortType,
          };
        }
        getData(obj);
      }
    });
  };
  // 获取参数
  const GetUrlParam = url => {
    let arrObj = url.split('|');
    const params = Object.create(null);
    if (arrObj.length > 1) {
      arrObj = arrObj[1].split('&');
      arrObj.forEach(item => {
        item = item.split('=');
        // eslint-disable-next-line prefer-destructuring
        params[item[0]] = item[1];
      });
    }
    return params;
  };
  // 跳转链接
  const toLink = val => {
    if (!val.web_path) {
      notification.error({ message: '提示', duration: 3, description: '未配置跳转路径' });
      return;
    }

    if (/^((http|https):)?\/\/([\w.]+\/?)\S*/.test(val.web_path)) {
      if (val.id == 0) {
        window.open(val.web_path);
      } else {
        noticeService
          .postInformationStatus({ userID: window.globalConfig.userInfo.OID, hisID: val.hisID })
          .then(res => {
            sortChange(1);
            window.open(val.web_path);
          });
      }
      return;
    }

    const params = GetUrlParam(val.web_path);
    if (!params.widget) {
      notification.error({ message: '提示', duration: 3, description: '未配置跳转路径' });
      return;
    }

    const targetMenuPath = findMenuPath(flatMenu, val.web_path);
    if (targetMenuPath == '') {
      notification.error({ message: '提示', duration: 3, description: '你没有跳转菜单权限，请联系管理员添加权限' });
      return;
    }
    // 添加消息来源和目标标识，便于判断
    params._source = '消息通知';
    params._target = val.web_path;
    if (val.id == 0) {
      sessionStorage.setItem('routerParams', JSON.stringify(params));
      window.history.pushState(params, '', `/civbase/${targetMenuPath}`);
    } else {
      sessionStorage.setItem('routerParams', JSON.stringify(params));
      noticeService.postInformationStatus({ userID: window.globalConfig.userInfo.OID, hisID: val.hisID }).then(res => {
        window.history.pushState(params, '', `/civbase/${targetMenuPath}`);
      });
    }
  };
  return (
    <div className={styles.contentPage}>
      <div className={styles.messageBox}>
        <div className={styles.headerTop}>全部通知</div>
        <div className={styles.headerContent}>
          {/* 选择类型 */}
          <div className={styles.selectForm}>
            <div className={styles.lable}>类型：</div>
            <div className={styles.form}>
              <Select defaultValue="全部" placeholder="请选择类型" onChange={onChange} style={{ width: '154px' }}>
                {infoTypeList.map(item => (
                  // eslint-disable-next-line react/jsx-no-undef
                  <Option value={item} key={item}>
                    {item}
                  </Option>
                ))}
              </Select>
            </div>
          </div>
          {/* 排序 */}
          <div className={styles.sortForm}>
            <div className={styles.label}>排序：</div>
            <div className={styles.form}>
              <div className={styles.sortBox}>
                <div
                  className={classnames(styles.tab, { [styles.tabActive]: sortType === 1 })}
                  onClick={() => sortChange(1)}
                >
                  未读通知在前
                </div>
                <div
                  className={classnames(styles.tab, { [styles.tabActive]: sortType === 0 })}
                  onClick={() => sortChange(0)}
                >
                  默认时间排序
                </div>
              </div>
            </div>
          </div>
          <div className={styles.haveRead} onClick={hasRead}>
            <CheckOutlined style={{ verticalAlign: 'middle', marginRight: '3px', marginTop: '-2px' }} />
            全部标记为已读
          </div>
        </div>

        <div id="scrollableDiv" className={styles.msgContent}>
          <InfiniteScroll
            dataLength={data.length}
            next={loadMoreData}
            hasMore={data.length < total.current}
            loader={<div className={styles.loaderTip}>正在加载更多...</div>}
            endMessage={isRes ? <div className={styles.loaderTip}>没有更多内容了</div> : ''}
            scrollableTarget="scrollableDiv"
          >
            {data.map((item, index) => (
              <div
                className={classnames(styles.msgItem, { [styles.msgHasRead]: item.id == 0 })}
                // eslint-disable-next-line react/no-array-index-key
                key={index}
                onClick={() => toLink(item)}
              >
                <div className={styles.left}>
                  <img src={renderImg(item)} alt="" />
                </div>
                <div className={styles.msgCenter}>
                  <div className={styles.msgBox}>
                    <div className={styles.title}>{messageTitle(item, JSON.parse(item.infoContent))}</div>
                    <div className={styles.msgDesc} title={messageContent(item, JSON.parse(item.infoContent))}>
                      {messageContent(item, JSON.parse(item.infoContent))}
                    </div>
                  </div>
                </div>
                <div className={styles.right}>{renderTime(item.hisCreateTime || item.createTime)}</div>
              </div>
            ))}
          </InfiniteScroll>
        </div>
      </div>
    </div>
  );
};
const mapStateToProps = state => ({
  flatMenu: state.getIn(['global', 'flatMenu']),
});
export default connect(
  mapStateToProps,
  null,
)(CheckAllMessage);