fix: 历史消息数据预览修改

src/pages/system/notifications/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
@@ -8,16 +12,16 @@ 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'
-
+import { formatDate } from './utils';
 
 const findMenuPath = (flatMenu, url) => {
   const [path, param = ''] = url.split('|');
-  let params = param.split('&').reduce((pre, item) => {
-    if(!item) return pre;
+  const params = param.split('&').reduce((pre, item) => {
+    if (!item) return pre;
     const [key, value] = item.split('=');
     pre[key] = value;
     return pre;
@@ -31,17 +35,13 @@ const CheckAllMessage = props => {
   const { flatMenu } = props;
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState([]);
-  const [sortType, setSortType] = useState(1); //排序类型
+  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('全部');
-  useEffect(() => {
-    loadMoreData();
-    getTypeList();
-  }, []);
   // 获取类型数据
   const getTypeList = () => {
     noticeService.getCurrentInfoType({ userID: window.globalConfig.userInfo.OID }).then(res => {
@@ -49,38 +49,40 @@ const CheckAllMessage = props => {
         res.data?.unshift('全部');
         res.data && setInfoTypeList(res.data);
       }
-    })
-  }
+    });
+  };
   // 加载数据
   const loadMoreData = () => {
     if (loading) {
       return;
     }
     setLoading(true);
-    let obj = {}
-    if (infoType.current == '全部') {
+    let obj = {};
+    if (infoType.current === '全部') {
       obj = {
         userID: window.globalConfig.userInfo.OID,
         pageIndex: pageIndex.current,
         pageSize: pageSize.current,
-        sort: sortType
-      }
+        sort: sortType,
+      };
     } else {
       obj = {
         type: infoType.current,
         userID: window.globalConfig.userInfo.OID,
         pageIndex: pageIndex.current,
         pageSize: pageSize.current,
-        sort: sortType
-      }
+        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);
@@ -89,27 +91,32 @@ const CheckAllMessage = props => {
       .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 = JSON.parse(item.infoContent);
         content = item.infoContent;
       } catch (error) {
         content = '{}';
       }
-      return { ...item,  infoContent: content}
-    })
-  }
+      return { ...item, infoContent: content };
+    });
+  };
   // 获取数据
-  const getData = (obj) => {
-
+  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));
@@ -118,66 +125,67 @@ const CheckAllMessage = props => {
       })
       .catch(() => {
         setLoading(false);
-      })
-
-  }
+      });
+  };
   // 监听选择类型
   const onChange = e => {
     infoType.current = e;
-    pageIndex.current = 1
-    let obj = {}
-    if (infoType.current == '全部') {
+    pageIndex.current = 1;
+    let obj = {};
+    if (infoType.current === '全部') {
       obj = {
         userID: window.globalConfig.userInfo.OID,
         pageIndex: pageIndex.current,
         pageSize: pageSize.current,
-        sort: sortType
-      }
+        sort: sortType,
+      };
     } else {
       obj = {
         type: infoType.current,
         userID: window.globalConfig.userInfo.OID,
         pageIndex: pageIndex.current,
         pageSize: pageSize.current,
-        sort: sortType
-      }
+        sort: sortType,
+      };
     }
     getData(obj);
   };
   // title 回显
-  const messageTitle = (themeName, info) => {
-    var messInfo = "";
-    switch (themeName) {
-      case "工单提醒":
+  const messageTitle = (item, info) => {
+    const { messType, title } = item;
+    let messInfo = '';
+    switch (messType) {
+      case '工单提醒':
         messInfo = `${info.caseType}`;
         break;
-      case "通用报警":
+      case '通用报警':
         messInfo = `${info.title}`;
         break;
-      case "系统通知":
+      case '系统通知':
         messInfo = `${info.noticeType}`;
         break;
       default:
-        messInfo = info.title;
+        messInfo = title || info.title;
         break;
     }
     return messInfo;
   };
   // content回显
-  const messageContent = (themeName, info) => {
-    var messInfo = "";
-    switch (themeName) {
-      case "工单提醒":
+  const messageContent = (item, info) => {
+    const { messType, defaultContent } = item;
+    let messInfo = '';
+    switch (messType) {
+      case '工单提醒':
         messInfo = `${info.flowName},${info.nodeName},承办意见：${info.content}`;
         break;
-      case "通用报警":
+      case '通用报警':
         messInfo = `${info.content},${info.deviceCode}`;
         break;
-      case "系统通知":
+      case '系统通知':
         messInfo = `${info.noticeTitle},${info.noticeContent}`;
         break;
       default:
-        messInfo = info.content;
+        messInfo = info.content || defaultContent;
         break;
     }
     return messInfo;
@@ -190,26 +198,28 @@ const CheckAllMessage = props => {
     const difSeconds = (currentTime.getTime() - createTime.getTime()) / 1000;
     let timeMsg = '';
     if (difSeconds < 60) {
-      timeMsg = '刚刚'
+      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 == '全部') {
+    if (infoType.current === '全部') {
       obj = {
         userID: window.globalConfig.userInfo.OID,
         pageIndex: pageIndex.current,
         pageSize: pageSize.current,
-        sort: value
+        sort: value,
       };
     } else {
       obj = {
@@ -217,34 +227,35 @@ const CheckAllMessage = props => {
         userID: window.globalConfig.userInfo.OID,
         pageIndex: pageIndex.current,
         pageSize: pageSize.current,
-        sort: value
+        sort: value,
       };
     }
     getData(obj);
-  }
+  };
   // 渲染头像
-  const renderImg = val => {
-    if (val == '通用报警') {
-      return require('/src/assets/images/system/notifications/icon2.png');
+  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 (val == '工单提醒') {
-      return require('/src/assets/images/system/notifications/icon4.png');
+    if (messType === '工单提醒') {
+      return require('../../../assets/images/system/notifications/icon4.png');
     }
-    if (val == '系统通知') {
-      return require('/src/assets/images/system/notifications/icon3.png');
+    if (messType === '系统通知') {
+      return require('../../../assets/images/system/notifications/icon3.png');
     }
-    if (val == '工时审批') {
-      return require('/src/assets/images/system/notifications/icon1.png')
+    if (messType === '工时审批') {
+      return require('../../../assets/images/system/notifications/icon1.png');
     }
-    if (val.indexOf('工时填报') != -1) {
-      return require('/src/assets/images/system/notifications/icon6.png')
+    if (messType.indexOf('工时填报') != -1) {
+      return require('../../../assets/images/system/notifications/icon6.png');
     }
-    if (val.indexOf('会议') != -1) {
-      return require('/src/assets/images/system/notifications/icon7.png')
-    }
-    return require('/src/assets/images/system/notifications/icon3.png');
-
+    if (messType.indexOf('会议') != -1) {
+      return require('../../../assets/images/system/notifications/icon7.png');
     }
+    return require('../../../assets/images/system/notifications/icon3.png');
+  };
   // 标记为已读
   const hasRead = () => {
     noticeService.postInformationStatus({ userID: window.globalConfig.userInfo.OID, isAll: 1 }).then(res => {
@@ -256,7 +267,7 @@ const CheckAllMessage = props => {
             userID: window.globalConfig.userInfo.OID,
             pageIndex: pageIndex.current,
             pageSize: pageSize.current,
-            sort: sortType
+            sort: sortType,
           };
         } else {
           obj = {
@@ -264,26 +275,27 @@ const CheckAllMessage = props => {
             userID: window.globalConfig.userInfo.OID,
             pageIndex: pageIndex.current,
             pageSize: pageSize.current,
-            sort: sortType
+            sort: sortType,
           };
         }
         getData(obj);
       }
-    })
-  }
+    });
+  };
   // 获取参数
-  const GetUrlParam = (url) => {
-    let arrObj = url.split("|");
-    let params = Object.create(null);
+  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("=");
+      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) {
@@ -297,7 +309,7 @@ const CheckAllMessage = props => {
       return;
     }
 
-    let targetMenuPath = findMenuPath(flatMenu, val.web_path);
+    const targetMenuPath = findMenuPath(flatMenu, val.web_path);
     if (targetMenuPath == '') {
       notification.error({ message: '提示', duration: 3, description: '你没有跳转菜单权限，请联系管理员添加权限' });
       return;
@@ -312,9 +324,9 @@ const CheckAllMessage = props => {
       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}>
@@ -322,17 +334,15 @@ const CheckAllMessage = props => {
         <div className={styles.headerContent}>
           {/* 选择类型 */}
           <div className={styles.selectForm}>
-            <div className={styles.lable}>
-              类型：
-            </div>
+            <div className={styles.lable}>类型：</div>
             <div className={styles.form}>
-              <Select
-                defaultValue="全部"
-                placeholder="请选择类型"
-                onChange={onChange}
-                style={{ width: '154px' }}
-              >
-                {infoTypeList.map(item => <Option value={item} key={item}>{item}</Option>)}
+              <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>
@@ -341,11 +351,20 @@ const CheckAllMessage = props => {
             <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
+                  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' }} />
@@ -353,40 +372,44 @@ const CheckAllMessage = props => {
           </div>
         </div>
 
-        <div
-          id="scrollableDiv"
-          className={styles.msgContent}
-        >
+        <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>) : ''}
+            endMessage={isRes ? <div className={styles.loaderTip}>没有更多内容了</div> : ''}
             scrollableTarget="scrollableDiv"
           >
-            {data.map((item, index) => (<div className={classnames(styles.msgItem, { [styles.msgHasRead]: item.id == 0 })} key={index} onClick={() => toLink(item)}>
+            {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.messType)} alt="" />
+                  <img src={renderImg(item)} alt="" />
                 </div>
                 <div className={styles.msgCenter}>
                   <div className={styles.msgBox}>
-                  <div className={styles.title}>{messageTitle(item.messType, JSON.parse(item.infoContent))}</div>
-                  <div className={styles.msgDesc} title={messageContent(item.messType, JSON.parse(item.infoContent))}>{messageContent(item.messType, JSON.parse(item.infoContent))}</div>
+                    <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.createTime || item.hisCreateTime)}</div>
-            </div>))}
-
+              </div>
+            ))}
           </InfiniteScroll>
         </div>
-      </div >
-
-    </div >
+      </div>
+    </div>
   );
 };
 const mapStateToProps = state => ({
-  flatMenu: state.getIn(['global', 'flatMenu'])
+  flatMenu: state.getIn(['global', 'flatMenu']),
 });
 export default connect(
   mapStateToProps,