feat: 通知中心编辑

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

@@ -0,0 +1,109 @@
+import React from 'react'
+import { Button, Form } from 'antd'
+import {
+  ModalForm,
+  ProFormDependency,
+  ProFormRadio,
+  ProFormSelect,
+  ProFormText
+} from '@ant-design/pro-form'
+import RighEditor from './RighEditor'
+import { Plus } from '@icon-park/react'
+
+export const msgTypeEnum = {
+  NotificationOne: 'notification',
+  Message: 'message'
+}
+export const mediaType = {
+  VersionUpdate: 1,
+  HolidayNotice: 2
+}
+
+const AddMessage = props => {
+  const { onConfirm } = props
+  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>
+      <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 onConfirm(nValues)
+            console.log(fsfsf)
+            message.success('添加成功')
+            return true
+          } catch (error) {
+            return false
+          }
+        }}>
+        <ProFormText
+          name="title"
+          label="标题"
+          placeholder="请输入标题"
+          rules={[{ required: true, message: '请输入标题' }]}
+        />
+        <Form.Item
+          label="内容"
+          name="content"
+          rules={[{ required: true, message: '请输入通知内容' }]}>
+          <RighEditor />
+        </Form.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>
+    </div>
+  )
+}
+
+export default AddMessage

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

@@ -1,6 +1,5 @@
 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'
 import 'react-markdown-editor-lite/lib/index.css'
 
@@ -14,14 +13,12 @@ const RighEditor = ({ value, onChange }) => {
     onChange(JSON.stringify(html))
   }
   return (
-    <ModalDragForm>
-      <MdEditor
-        style={{ height: '300px' }}
-        value={cValue}
-        renderHTML={text => mdParser.render(text)}
-        onChange={handleEditorChange}
-      />
-    </ModalDragForm>
+    <MdEditor
+      style={{ height: '300px' }}
+      value={cValue}
+      renderHTML={text => mdParser.render(text)}
+      onChange={handleEditorChange}
+    />
   )
 }
 

src/pages/Hr/Notification/index.jsx

@@ -1,30 +1,17 @@
 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 { List, Avatar, Tag, Skeleton, Divider } from 'antd'
 import InfiniteScroll from 'react-infinite-scroll-component'
 import { queryMessageList, sendMessage } from '@/services/staff'
+import AddMessage from './components/AddMessage'
 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 tRef = useRef(null)
+  const msgTypeEnum = {
+    message: '通知',
+    notification: '消息'
+  }
   const [state, setState] = useState({
     loading: false,
     message: [],
@@ -34,16 +21,6 @@ const Notification = () => {
     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 {
@@ -67,92 +44,23 @@ 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
+  const { run: trySendMessage } = useRequest(sendMessage, {
+    manual: true,
+    onSuccess: result => {
+      tRef.current?.reload()
+      sendMsg(cmdType.Notice, result)
+    },
+    onError: e => {
+      message.error(e.message)
     }
-    return newValues
-  }
+  })
+
   return (
     <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> */}
+        <AddMessage onConfirm={trySendMessage} />
       </div>
       <div id="scrollableDiv" style={{ height: 'calc(100vh - 125px - 3.5rem)', overflowY: 'auto' }}>
         <InfiniteScroll