feat: 消息中心编辑弹窗

package.json

@@ -62,6 +62,7 @@
     "dayjs": "^1.10.4",
     "install": "^0.13.0",
     "lodash-es": "^4.17.21",
+    "markdown-it": "^12.2.0",
     "omit.js": "^2.0.2",
     "qs": "^6.9.4",
     "react": "17.0.2",
@@ -69,6 +70,7 @@
     "react-dom": "17.0.2",
     "react-helmet-async": "^1.0.4",
     "react-infinite-scroll-component": "^6.1.0",
+    "react-markdown-editor-lite": "^1.3.1",
     "umi": "3.5.4"
   },
   "devDependencies": {

src/pages/Hr/Notification/components/RighEditor.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import MarkdownIt from 'markdown-it'
 import ModalDragForm from '@/components/Modal/src/components/ModalDragForm'
 import MdEditor from 'react-markdown-editor-lite'

src/pages/Hr/Notification/index.jsx

@@ -1,29 +1,55 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { List, Avatar, Tag, Skeleton, Divider, Button } from 'antd'
 import { Plus } from '@icon-park/react'
+import {
+  ModalForm,
+  ProFormDependency,
+  ProFormRadio,
+  ProFormSelect,
+  ProFormText
+} from '@ant-design/pro-form'
 import InfiniteScroll from 'react-infinite-scroll-component'
-import { queryMessage } from '@/services/staff'
+import { queryMessageList, sendMessage } from '@/services/staff'
 import consts from '@/consts'
+import { useRequest } from 'umi'
+import RighEditor from './components/RighEditor'
+
+export const msgTypeEnum = {
+  NotificationOne: 'notification',
+  Message: 'message'
+}
+export const mediaType = {
+  VersionUpdate: 1,
+  HolidayNotice: 2
+}
 
 const Notification = () => {
-  const msgTypeEnum = {
-    message: '通知',
-    notification: '消息'
-  }
+  const tRef = useRef(null)
   const [state, setState] = useState({
     loading: false,
     message: [],
     hasMore: false,
     current: 1,
     pageSize: 15,
-    total: 0
+    total: 0,
+    msgType: 'notification'
+  })
+  const { run: trySendMessage } = useRequest(sendMessage, {
+    manual: true,
+    onSuccess: result => {
+      tRef.current?.reload()
+      sendMsg(cmdType.Notice, result)
+    },
+    onError: e => {
+      message.error(e.message)
+    }
   })
   const initData = async params => {
     setState({ ...state, loading: true })
     const {
       data: { message = [], total },
       code = -1
-    } = await queryMessage({ ...params, pageSize: state.pageSize })
+    } = await queryMessageList({ ...params, pageSize: state.pageSize })
     if (code === consts.RET_CODE.SUCCESS) {
       setState({
         ...state,
@@ -41,14 +67,92 @@ const Notification = () => {
   const loadMoreData = () => {
     initData({ current: state.current + 1 })
   }
+  const handleFormValues = values => {
+    const newValues = { ...values }
+    switch (values.msgType) {
+      case msgTypeEnum.NotificationOne:
+        switch (values.media) {
+          case mediaType.VersionUpdate:
+            newValues.avatar = 'https://zhcld.com/resource/notice_email.png'
+            break
+          case mediaType.HolidayNotice:
+            newValues.avatar = 'https://zhcld.com/resource/notice_airplane.png'
+            break
+          default:
+            break
+        }
+        break
+
+      default:
+        break
+    }
+    return newValues
+  }
   return (
-    <div className="bg-hex-ffffff rounded-md px-6 pb-6 relative">
-      <h4 className="py-4 text-xl">通知中心</h4>
-      <div className="absolute top-4 right-6">
-        <Button type="primary">
+    <div className="bg-hex-ffffff rounded-md px-6 pb-6">
+      <div className="flex justify-between items-center">
+        <h4 className="py-4 text-xl">通知中心</h4>
+        <ModalForm
+          isKeyPressSubmit={false}
+          key="modalForm"
+          trigger={
+            <Button type="primary">
+              <Plus className="mr-1" />
+              新建通知
+            </Button>
+          }
+          initialValues={{ msgType: 'notification', refresh: 0 }}
+          onFinish={async values => {
+            try {
+              const nValues = handleFormValues(values)
+              await trySendMessage(nValues)
+              message.success('添加成功')
+              return true
+            } catch (error) {
+              return false
+            }
+          }}>
+          <ProFormText
+            name="title"
+            label="标题"
+            placeholder="请输入标题"
+            rules={[{ required: true, message: '请输入标题' }]}
+          />
+          <ProForm.Item
+            label="内容"
+            name="content"
+            rules={[{ required: true, message: '请输入通知内容' }]}>
+            <RighEditor />
+          </ProForm.Item>
+          <ProFormRadio.Group
+            label="类型"
+            name="msgType"
+            required
+            options={[
+              { label: '通知', value: msgTypeEnum.NotificationOne },
+              { label: '消息', value: msgTypeEnum.Message }
+            ]}
+          />
+          <ProFormDependency name={['msgType']}>
+            {({ msgType }) =>
+              msgType === msgTypeEnum.NotificationOne ? (
+                <ProFormSelect
+                  name="media"
+                  label="通知类型"
+                  rules={[{ required: true, message: '请选择类型' }]}
+                  options={[
+                    { label: '版本更新', value: mediaType.VersionUpdate },
+                    { label: '节假通知', value: mediaType.HolidayNotice }
+                  ]}
+                />
+              ) : null
+            }
+          </ProFormDependency>
+        </ModalForm>
+        {/* <Button type="primary" className="mr-1">
           <Plus className="mr-1" />
           新建通知
-        </Button>
+        </Button> */}
       </div>
       <div id="scrollableDiv" style={{ height: 'calc(100vh - 125px - 3.5rem)', overflowY: 'auto' }}>
         <InfiniteScroll

src/services/staff.js

@@ -29,7 +29,7 @@ export async function apiChangeSupervisor(postUrl, payload) {
 }
 
 /** 信息中心列表 */
-export async function queryMessage(payload) {
+export async function queryMessageList(payload) {
   const data = await request.get('/message/all', {
     params: { ...payload }
   })