index.tsx 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. import React, { useRef } from 'react'
  2. import { Button, message, Form } from 'antd'
  3. import { ModalForm, ProFormDependency, ProFormRadio, ProFormSelect, ProFormText } from '@ant-design/pro-form'
  4. import type { ProFormColumnsType } from '@ant-design/pro-form'
  5. import ProTable from '@ant-design/pro-table'
  6. import type { ActionType } from '@ant-design/pro-table'
  7. import ShowTitleMenu from '../Attendance/components/ShowTitleMenu'
  8. import { useRequest } from '@umijs/max'
  9. import { queryNoticeList, sendNotice } from '@/services/user/api'
  10. import consts from '@/utils/consts'
  11. import { PlusOutlined } from '@ant-design/icons'
  12. import useWebSocketFn, { cmdType } from '@/hooks/core/useWebSocketFn'
  13. import RighEditor from './components/RighEditor'
  14. import { PageContainer } from '@ant-design/pro-layout'
  15. export enum msgTypeEnum {
  16. Notification = 'notification',
  17. Message = 'message'
  18. }
  19. export enum mediaType {
  20. VersionUpdate = 1,
  21. HolidayNotice = 2
  22. }
  23. const Notification: React.FC = () => {
  24. const tRef = useRef<ActionType>(null)
  25. const { sendMsg } = useWebSocketFn()
  26. const columns: ProFormColumnsType<API.NoticeItem>[] = [
  27. {
  28. title: '标题',
  29. dataIndex: 'title',
  30. width: '30%'
  31. },
  32. {
  33. title: '内容',
  34. dataIndex: 'content',
  35. width: '50%'
  36. },
  37. {
  38. title: '推送时间',
  39. dataIndex: 'createTime',
  40. valueType: 'dateTime'
  41. }
  42. ]
  43. const { run: trySendNotice } = useRequest(sendNotice, {
  44. manual: true,
  45. onSuccess: result => {
  46. tRef.current?.reload()
  47. sendMsg(cmdType.Notice, result)
  48. },
  49. onError: e => {
  50. message.error(e.message)
  51. }
  52. })
  53. const handleFormValues = values => {
  54. const newValues = { ...values }
  55. switch (values.msgType) {
  56. case msgTypeEnum.Notification:
  57. switch (values.media) {
  58. case mediaType.VersionUpdate:
  59. newValues.avatar = 'https://zhcld.com/resource/notice_email.png'
  60. break
  61. case mediaType.HolidayNotice:
  62. newValues.avatar = 'https://zhcld.com/resource/notice_airplane.png'
  63. break
  64. default:
  65. break
  66. }
  67. break
  68. default:
  69. break
  70. }
  71. return newValues
  72. }
  73. return (
  74. <PageContainer title={false} breadcrumb={false}>
  75. <div className="h-full w-full flex flex-row">
  76. <ShowTitleMenu options={[{ label: '通知', value: 1 }]} defaultValue={1} />
  77. <div className="w-max-3/4">
  78. <div className="ml-8 bg-white shadow-md shadow-hex-3e2c5a relative">
  79. {/* <div className="pb-3 border-b border-b-black border-opacity-8 mb-3 flex items-center justify-between">
  80. <div>通知推送</div>
  81. </div> */}
  82. <ProTable
  83. isKeyPressSubmit
  84. actionRef={tRef}
  85. columns={columns}
  86. params={{ msgType: 'notification' }}
  87. search={false}
  88. toolbar={{
  89. title: '通知推送',
  90. actions: [
  91. <ModalForm
  92. isKeyPressSubmit={false}
  93. key="modalForm"
  94. trigger={
  95. <Button type="primary">
  96. <PlusOutlined />
  97. 新建通知
  98. </Button>
  99. }
  100. initialValues={{ msgType: 'notification', refresh: 0 }}
  101. onFinish={async values => {
  102. try {
  103. const nValues = handleFormValues(values)
  104. await trySendNotice(nValues)
  105. message.success('添加成功')
  106. return true
  107. } catch (error) {
  108. return false
  109. }
  110. }}>
  111. <ProFormText
  112. label="标题"
  113. name="title"
  114. rules={[{ required: true, message: '请输入标题' }]}
  115. />
  116. {/* <ProFormTextArea label="内容" name="content" required /> */}
  117. <Form.Item
  118. label="内容"
  119. name="content"
  120. rules={[{ required: true, message: '请输入通知内容' }]}>
  121. <RighEditor />
  122. </Form.Item>
  123. <ProFormRadio.Group
  124. label="类型"
  125. name="msgType"
  126. required
  127. options={[
  128. { label: '通知', value: msgTypeEnum.Notification },
  129. { label: '消息', value: msgTypeEnum.Message }
  130. ]}
  131. />
  132. <ProFormDependency name={['msgType']}>
  133. {({ msgType }) =>
  134. msgType === msgTypeEnum.Notification ? (
  135. <ProFormSelect
  136. name="media"
  137. label="通知类型"
  138. rules={[{ required: true, message: '请选择类型' }]}
  139. options={[
  140. { label: '版本更新', value: mediaType.VersionUpdate },
  141. { label: '节假通知', value: mediaType.HolidayNotice }
  142. ]}
  143. />
  144. ) : null
  145. }
  146. </ProFormDependency>
  147. <ProFormDependency name={['msgType', 'media']}>
  148. {({ msgType, media }) =>
  149. msgType === msgTypeEnum.Notification && media === mediaType.VersionUpdate ? (
  150. <ProFormRadio.Group
  151. name="refresh"
  152. rules={[{ required: true, message: '请选择刷新机制' }]}
  153. options={[
  154. { label: '手动刷新', value: 0 },
  155. { label: '强制刷新', value: 1 }
  156. ]}
  157. />
  158. ) : null
  159. }
  160. </ProFormDependency>
  161. </ModalForm>
  162. ]
  163. }}
  164. request={async (params, sort, filter) => {
  165. const { code = -1, data = {} } = await queryNoticeList({
  166. ...params,
  167. ...sort,
  168. ...filter
  169. })
  170. const { message: notices = [], total = 0 } = data
  171. return {
  172. data: notices,
  173. success: code === consts.RET_CODE.SUCCESS,
  174. total
  175. }
  176. }}
  177. bordered
  178. pagination={{ defaultPageSize: 10 }}
  179. rowKey={row => row.id}
  180. />
  181. </div>
  182. </div>
  183. </div>
  184. </PageContainer>
  185. )
  186. }
  187. export default Notification