1.企业公告发布的内容。需要窗口弹出。即登录进去弹出公告内容，内容强制查看，确认已查看，未确认不能关闭，

Min
1 parent fd564a27
Showing 1 changed file with 353 additions and 4 deletions
src/components/Common/PersonCenter/PersonCenter.js
@@ -15,9 +15,12 @@ import {
 } from '@ant-design/icons';
 import { Form } from '@ant-design/compatible';
-// import '@ant-design/compatible/assets/index.css';
+import '@ant-design/compatible/assets/index.css';
-import { Button, Input, Modal, Menu, Badge, message, Dropdown, Space, notification, Popover, Tabs } from 'antd-v4';
+import BraftEditor from 'braft-editor';
+import 'braft-editor/dist/index.css';
+
+import { Button, Input, Modal, Menu, Badge, message, Dropdown, Space, notification, Popover, Tabs, Checkbox } from 'antd';
 import styles from '@/routes/indexPage.less';
 import config from '@/utils/config';
 import * as commonUtils from '@/utils/utils';
@@ -54,6 +57,8 @@ class PersonCenter extends Component {
       addFaceVisible: false,
       sUserName: props.app.userinfo.sUserName,
       menuSearchPopoverVisible: false,
+      noticeVisible: false, // 新增：公告弹窗显示状态
+      noticeChecked: false, // 新增：复选框选中状态
     };
   }
   componentWillMount() {
@@ -67,6 +72,8 @@ class PersonCenter extends Component {
       message.warn(changePwd, 10);
     }
+    // 检查是否有公告数据需要显示
+    this.checkNoticeData();
   }
   componentWillReceiveProps(nextProps) {
@@ -77,6 +84,8 @@ class PersonCenter extends Component {
         audio.play();
       }
     }
+    // 检查是否有新的公告数据
+    this.checkNoticeData(nextProps);
   }
   shouldComponentUpdate(nextProps) {
     const { pwdVisible } = this.state;
@@ -188,6 +197,116 @@ class PersonCenter extends Component {
     dispatch({ type: 'app/addPane', payload: { pane } });
   };
+
+  // 检查公告数据
+  checkNoticeData = async (nextProps = null) => {
+    const props = nextProps || this.props;
+    const { noticeVisible = false } = this.state;
+    const msg = props.app.unRead;
+    const { sModelsId, formSrcRoute = '' } = props;
+    const msgObj = commonUtils.isJSON(msg) ? JSON.parse(msg) : {};
+    const msgData = msgObj.data; /* 推送信息 */
+
+    // 如果有公告数据且尚未显示过，则显示公告弹窗
+    if (commonUtils.isNotEmptyObject(msgData) && commonUtils.isNotEmptyObject(msgData.COPYTO) &&
+      msgData.COPYTO.sMsgId && !noticeVisible) {
+      /* 根据sMsgId, sSlaveId 获取接口 */
+      // eslint-disable-next-line prefer-destructuring
+      const sMsgId = msgData.COPYTO.sMsgId;
+      const sMsgSlaveId = msgData.COPYTO.sSlaveId;
+      // 1. 在调用接口前先检查是否已经显示过该公告
+      const noticeKey = `${sMsgId}_${sMsgSlaveId}`;
+
+      const shownNotices = JSON.parse(localStorage.getItem('shownNotices') || '[]');
+
+      // 如果已经显示过，直接返回，不调用接口
+      if (shownNotices.includes(noticeKey)) {
+        console.log('公告已显示过，跳过接口调用:', noticeKey);
+        return;
+      }
+
+      const dataUrl = `${commonConfig.server_host}notice/getNoticeDetail?sModelsId=${sModelsId}&sName=${formSrcRoute}`;
+      const condition = {
+        sMsgId,
+        sSlaveId: sMsgSlaveId,
+      };
+      const configReturn = (await commonServices.postValueService(props.app?.token, condition, dataUrl)).data;
+      if (configReturn?.code === 1) {
+        const dataReturn = configReturn.dataset.rows;
+
+        if (commonUtils.isNotEmptyArr(dataReturn) && commonUtils.isNotEmptyObject(dataReturn[0])) {
+          const noticeData = dataReturn[0];
+
+          // 3. 再次确认是否已显示（防止并发请求）
+          const currentShownNotices = JSON.parse(localStorage.getItem('shownNotices') || '[]');
+          console.log('currentShownNotices1', currentShownNotices);
+          if (!currentShownNotices.includes(noticeKey)) {
+            this.setState({
+              noticeVisible: true,
+              noticeData,
+              noticeTitle: noticeData?.msgData?.sTitle,
+              noticeChecked: false,
+              sMsgId,
+              sMsgSlaveId,
+            });
+          }
+        }
+      }
+    }
+  }
+
+  // 处理公告弹窗确定按钮点击
+  handleNoticeConfirm = async () => {
+    if (this.state.noticeChecked) {
+      /* 调用接口把数据更新为已读 */
+      const { app } = this.props;
+      const { sMsgId, sMsgSlaveId } = this.state;
+
+      const { token } = app;
+      const configUrl = `${config.server_host}notice/updateNotice?sModelsId=${100}`;
+      const condition = {
+        sMsgId,
+        sSlaveId: sMsgSlaveId,
+      };
+      const configReturn = (await commonServices.postValueService(token, condition, configUrl)).data;
+      if (configReturn?.code === 1) {
+        message.success('公告已阅读');
+        // 在用户确认阅读后，才将公告记录存储到shownNotices中
+        const noticeKey = `${sMsgId}_${sMsgSlaveId}`;
+        const currentShownNotices = JSON.parse(localStorage.getItem('shownNotices') || '[]');
+
+        if (!currentShownNotices.includes(noticeKey)) {
+          currentShownNotices.push(noticeKey);
+          // 限制存储最近100条记录，防止localStorage过大
+          if (currentShownNotices.length > 100) {
+            currentShownNotices.shift();
+          }
+          localStorage.setItem('shownNotices', JSON.stringify(currentShownNotices));
+        }
+      } else {
+        message.error(configReturn?.msg);
+      }
+      this.setState({
+        noticeVisible: false,
+      });
+    }
+  }
+
+  // 处理公告弹窗取消按钮点击
+  handleNoticeCancel = () => {
+    this.setState({
+      noticeVisible: false,
+    });
+  }
+
+  // 处理复选框变化
+  handleNoticeCheckChange = (e) => {
+    this.setState({
+      noticeChecked: e.target.checked,
+    });
+  }
+
+
   handleSubmitPwd = (e) => {
     /* 阻止表单提交动作 */
     e.preventDefault();
@@ -618,6 +737,14 @@ class PersonCenter extends Component {
             handleCancel={this.handleCancel}
           />
         }
+        {/* 新增公告弹窗组件 */}
+        <PersonCenterNotice
+          {...props}
+          {...state}
+          handleNoticeConfirm={this.handleNoticeConfirm}
+          handleNoticeCancel={this.handleNoticeCancel}
+          handleNoticeCheckChange={this.handleNoticeCheckChange}
+        />
       </div>
     );
   }
@@ -894,13 +1021,13 @@ const PersonCenterOnlineUser = Form.create({
     const gdsconfigformslaveNew = gdsconfigformslave.map(column => {
     const { sLanguage } = userinfo || {};
     let showName = column.sChinese; // 默认中文
-    
+
     if (sLanguage === 'sEnglish' && column.sEnglishName) {
       showName = column.sEnglishName;
     } else if (sLanguage === 'sBig5' && column.sBig5Name) {
       showName = column.sBig5Name;
     }
-    
+
     return {
       ...column,
       showName
@@ -975,4 +1102,226 @@ const PersonCenterOnlineUser = Form.create({
   );
 });
+// 新增公告弹窗组件
+const PersonCenterNotice = Form.create({
+  mapPropsToFields(props) {
+  },
+})((props) => {
+  const {
+    handleNoticeConfirm,
+    handleNoticeCancel,
+    handleNoticeCheckChange,
+    noticeVisible,
+    noticeData = {},
+    noticeChecked,
+    app,
+  } = props;
+
+  const noticeMsgData = noticeData?.msgData ;
+
+
+  const noticeFileData = noticeData?.fileData || [] ;
+
+
+  const NoticeTitle = noticeMsgData?.sTitle;
+  const NoticeContent = noticeMsgData?.sAbstractfullmemo || '暂无内容';
+
+  const Confirm = commonUtils.isNotEmptyObject(commonFunc.showMessage(app.commonConst, 'Confirm'))
+    ? commonFunc.showMessage(app.commonConst, 'Confirm')
+    : '确定';
+  const Cancel = commonUtils.isNotEmptyObject(commonFunc.showMessage(app.commonConst, 'Cancel'))
+    ? commonFunc.showMessage(app.commonConst, 'Cancel')
+    : '取消';
+  const NoticeAgree = commonUtils.isNotEmptyObject(commonFunc.showMessage(app.commonConst, 'NoticeAgree'))
+    ? commonFunc.showMessage(app.commonConst, 'NoticeAgree')
+    : '我已阅读并同意';
+
+  return (
+    <div>
+      {
+        noticeVisible ?
+          <AntdDraggableModal
+            title={NoticeTitle}
+            width={1200}
+            visible={noticeVisible}
+            onCancel={handleNoticeCancel}
+            closable={false}
+            footer={[
+              // 外层容器控制整体边距和左对齐
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  width: '100%',
+                  justifyContent: 'flex-start',
+                  padding: '0px 24px 16px 16px',
+                  margin: '0', // 清除外部默认边距
+                }}
+              >
+                <Checkbox
+                  key="agree"
+                  checked={noticeChecked}
+                  onChange={handleNoticeCheckChange}
+                  style={{
+                    marginRight: 16,
+                    fontSize: 14,
+                    color: '#333',
+                    // 确保复选框与按钮垂直居中对齐
+                    marginTop: -2
+                  }}
+                >
+                  {NoticeAgree}
+                </Checkbox>
+                <Button
+                  key="confirm"
+                  type="primary"
+                  onClick={handleNoticeConfirm}
+                  disabled={!noticeChecked}
+                  style={{
+                    padding: '0px 20px', // 增加按钮内边距让文字居中更明显
+                    fontSize: 14,
+                    borderRadius: 4,
+                    transition: 'all 0.2s',
+                    opacity: noticeChecked ? 1 : 0.6,
+                    cursor: noticeChecked ? 'pointer' : 'not-allowed',
+                    // 确保按钮文字垂直居中
+                    height: 30,
+                    lineHeight: '30px'
+                  }}
+                >
+                  {Confirm}
+                </Button>
+              </div>
+            ]}
+          >
+            <div style={{
+              maxHeight: '800px',
+              overflowY: 'auto',
+              padding: '20px',
+              border: '1px solid #f0f0f0',
+              borderRadius: '8px',
+              backgroundColor: '#f5f7fa',
+              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)'
+            }}>
+              {/* 富文本内容区域 */}
+              {NoticeContent ? (
+                <div style={{
+                  backgroundColor: '#fff',
+                  borderRadius: '8px',
+                  padding: '20px',
+                  minHeight: '200px',
+                  border: '1px solid #e8e8e8',
+                  transition: 'border-color 0.3s'
+                }}>
+                  <BraftEditor
+                    value={BraftEditor.createEditorState(noticeMsgData?.sAbstractfullmemo)}
+                    readOnly
+                    controls={[]}
+                    contentStyle={{
+                      height: 'auto',
+                      minHeight: '400px',
+                      maxHeight: '600px',
+                      lineHeight: '1.8',
+                      fontSize: '15px'
+                    }}
+                    style={{
+                      border: 'none',
+                      borderRadius: '4px'
+                    }}
+                  />
+                </div>
+              ) : (
+                <div style={{
+                  lineHeight: '1.8',
+                  fontSize: '15px',
+                  whiteSpace: 'pre-wrap',
+                  wordBreak: 'break-word',
+                  padding: '20px',
+                  backgroundColor: '#fff',
+                  border: '1px solid #e8e8e8',
+                  borderRadius: '8px',
+                  minHeight: '200px',
+                  color: '#666',
+                  textAlign: 'center'
+                }}>
+                  暂无公告内容
+                </div>
+              )}
+
+              {/* 附件区域 - 与富文本区域明显分隔 */}
+              {commonUtils.isNotEmptyArr(noticeFileData) && (
+                <div style={{
+                  marginTop: '20px',
+                  padding: '15px 20px',
+                  backgroundColor: '#fff',
+                  borderRadius: '8px',
+                  border: '1px solid #e8e8e8',
+                }}>
+                  <div style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    flexWrap: 'wrap'
+                  }}>
+                    {/* 左侧"附件"文字 */}
+                    <div style={{
+                      fontSize: '14px',
+                      color: '#333',
+                      fontWeight: 500,
+                      marginRight: '15px',
+                      padding: '3px 0',
+                      minWidth: '50px'
+                    }}>
+                      附件：
+                    </div>
+
+                    {/* 右侧附件链接区域 */}
+                    <div style={{
+                      display: 'flex',
+                      gap: '16px',
+                      flexWrap: 'wrap',
+                      flexGrow: 1
+                    }}>
+                      {noticeFileData.map(item => {
+                        const {sId: uid, sFileName: name, sPicturePath} = item;
+                        const fileUrl = `${commonConfig.server_host}file/download?savePathStr=${sPicturePath}&sModelsId=100`;
+
+                        return (
+                          <a
+                            key={uid}
+                            href={fileUrl}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            style={{
+                              display: 'inline-flex',
+                              alignItems: 'center',
+                              color: '#1890ff',
+                              fontSize: '14px',
+                              textDecoration: 'none',
+                              padding: '3px 0',
+                              transition: 'color 0.2s',
+                              whiteSpace: 'nowrap'
+                            }}
+                            onMouseOver={(e) => e.currentTarget.style.textDecoration = 'underline'}
+                            onMouseOut={(e) => e.currentTarget.style.textDecoration = 'none'}
+                          >
+                <span style={{marginRight: '5px'}}>
+                  <i className="fa fa-file-o" aria-hidden="true"></i>
+                </span>
+                            {name}
+                          </a>
+                        );
+                      })}
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+
+          </AntdDraggableModal>
+          : ''
+      }
+    </div>
+  );
+});
+
 export default PersonCenter;