feat 消息通知相关, 添加wangEditor组件

src/layouts/default/header/components/notify/NoticeReader.vue

@@ -22,16 +22,23 @@
 <script lang="ts" setup>
   import BasicModal from '/@/components/Modal/src/BasicModal.vue'
   import { $ref } from 'vue/macros'
+  import { SiteMessage } from '/@/views/modules/notice/site/SiteMessage.api'
+  import { findById } from './SiteMessage.api'
 
   const modalWidth = $ref('60%')
   let visible = $ref(false)
   let confirmLoading = $ref(false)
-  let message = $ref({})
+  let message = $ref<SiteMessage>({})
 
   // 初始化 显示信息内容
   function init(messageInfo) {
     visible = true
+    confirmLoading = true
     message = messageInfo
+    findById(messageInfo.id).then(({ data }) => {
+      message = data
+      confirmLoading = false
+    })
   }
 
   function handleCancel() {

src/layouts/default/header/components/notify/SiteMessage.api.ts

@@ -1,6 +1,6 @@
 import { defHttp } from '/@/utils/http/axios'
-import { BaseEntity } from '/#/web'
 import { PageResult, Result } from '/#/axios'
+import { SiteMessage } from '/@/views/modules/notice/site/SiteMessage.api'
 
 /**
  * 未读消息数量
@@ -15,8 +15,18 @@ export function countByReceiveNotRead() {
  * 接收站内信消息分页查询
  */
 export function pageByReceive(params) {
-  return defHttp.get<Result<PageResult>>({
+  return defHttp.get<Result<PageResult<SiteMessage>>>({
     url: '/site/message/pageByReceive',
     params: params,
   })
 }
+
+/**
+ * 查看消息
+ */
+export function findById(id) {
+  return defHttp.get<Result<SiteMessage>>({
+    url: '/site/message/findById',
+    params: { id },
+  })
+}

src/layouts/default/header/components/notify/index.vue

@@ -31,7 +31,7 @@
         </a-spin>
       </template>
     </a-popover>
-    <notice-icon-reader ref="noticeIconReader" />
+    <notice-reader ref="noticeIconReader" />
   </div>
 </template>
 <script lang="ts" setup>
@@ -43,7 +43,7 @@
   import { countByReceiveNotRead, pageByReceive } from '/@/layouts/default/header/components/notify/SiteMessage.api'
   import { router } from '/@/router'
   import { PageEnum } from '/@/enums/pageEnum'
-  import NoticeIconReader from '/@/layouts/default/header/components/notify/NoticeIconReader.vue'
+  import NoticeReader from '/@/layouts/default/header/components/notify/NoticeReader.vue'
 
   const { prefixCls } = useDesign('header-notify')
   const { createMessage } = useMessage()

src/views/modules/notice/site/SiteMessage.api.ts

@@ -1,11 +1,21 @@
 import { defHttp } from '/@/utils/http/axios'
-import { PageResult, Result } from '/#/axios'
 import { BaseEntity } from '/#/web'
+import { PageResult, Result } from '/#/axios'
+
+/**
+ * 接收站内信消息分页查询
+ */
+export function pageByReceive(params) {
+  return defHttp.get<Result<PageResult<SiteMessage>>>({
+    url: '/site/message/pageByReceive',
+    params: params,
+  })
+}
 
 /**
  * 分页
  */
-export const page = (params) => {
+export const pageBySender = (params) => {
   return defHttp.get<Result<PageResult<SiteMessage>>>({
     url: '/site/message/pageBySender',
     params,
@@ -23,21 +33,11 @@ export const get = (id) => {
 }
 
 /**
- * 添加
+ * 添加或更新
  */
-export const add = (obj: SiteMessage) => {
+export const saveOrUpdate = (obj: SiteMessage) => {
   return defHttp.post({
-    url: '/site/message/add',
-    data: obj,
-  })
-}
-
-/**
- * 更新
- */
-export const update = (obj: SiteMessage) => {
-  return defHttp.post({
-    url: '/site/message/update',
+    url: '/site/message/saveOrUpdate',
     data: obj,
   })
 }
@@ -86,21 +86,21 @@ export function send(id) {
  */
 export interface SiteMessage extends BaseEntity {
   // 消息标题
-  title: string
+  title?: string
   // 消息内容
-  content: string
+  content?: string
   // 发送者id
-  senderId: number
+  senderId?: string
   // 发送者姓名
-  senderName: string
+  senderName?: string
   // 发送时间
-  senderTime: string
+  senderTime?: string
   // 消息类型
-  receiveType: string
+  receiveType?: string
   // 发布状态
-  sendState: string
+  sendState?: string
   // 截至有效期
-  efficientTime: string
+  efficientTime?: string | null
   // 撤回时间
-  cancelTime: string
+  cancelTime?: string
 }

src/views/modules/notice/site/receive/SiteMessageList.vue

@@ -1,10 +1,95 @@
-<template> </template>
+<template>
+  <div>
+    <div class="m-3 p-3 pt-5 bg-white">
+      <b-query :query-params="model.queryParam" :fields="fields" @query="queryPage" @reset="resetQueryParams" />
+    </div>
+    <div class="m-3 p-3 bg-white">
+      <vxe-toolbar ref="xToolbar" custom zoom :refresh="{ query: queryPage }" />
+      <vxe-table ref="xTable" row-id="id" :loading="loading" :data="pagination.records">
+        <vxe-column type="seq" title="序号" width="60" />
+        <vxe-column field="title" title="标题">
+          <template #default="{ row }">
+            <a href="javascript:" @click="show(row)">{{ row.title }}</a>
+          </template>
+        </vxe-column>
+        <vxe-column field="senderTime" title="发送时间" />
+        <vxe-column field="haveRead" title="是否已读">
+          <template #default="{ row }">
+            <a-tag color="green" v-if="row.haveRead">已读</a-tag>
+            <a-tag v-else color="red">未读</a-tag>
+          </template>
+        </vxe-column>
+        <vxe-column fixed="right" width="70" :showOverflow="false" title="操作">
+          <template #default="{ row }">
+            <span>
+              <a href="javascript:" @click="show(row)">查看</a>
+            </span>
+          </template>
+        </vxe-column>
+      </vxe-table>
+    </div>
+    <vxe-pager
+      border
+      size="medium"
+      :loading="loading"
+      :current-page="pagination.current"
+      :page-size="pagination.size"
+      :total="pagination.total"
+      @page-change="handleTableChange"
+    />
+    <notice-reader ref="noticeReader" />
+  </div>
+</template>
 
-<script lang="ts" setup></script>
-<script>
-  export default {
-    name: 'SiteMessageListReceive',
+<script lang="ts" setup>
+  import NoticeReader from '/@/layouts/default/header/components/notify/NoticeReader.vue'
+  import BQuery from '/@/components/Bootx/Query/BQuery.vue'
+  import useTablePage from '/@/hooks/bootx/useTablePage'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { QueryField, STRING } from '/@/components/Bootx/Query/Query'
+  import { $ref } from 'vue/macros'
+  import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
+  import { onMounted } from 'vue'
+  import { pageByReceive } from '/@/views/modules/notice/site/SiteMessage.api'
+
+  const { handleTableChange, resetQueryParams, pageQueryResHandel, pagination, pages, model, loading } = useTablePage(queryPage)
+  const { createMessage, createConfirm } = useMessage()
+
+  const noticeReader = $ref<InstanceType<typeof NoticeReader>>(null)
+  // 查询条件
+  const fields = [
+    { field: 'code', type: STRING, name: '流程编号', placeholder: '请输入流程编号' },
+    { field: 'code', type: STRING, name: '流程名称', placeholder: '请输入流程名称' },
+  ] as QueryField[]
+  let xTable = $ref<VxeTableInstance>()
+  let xToolbar = $ref<VxeToolbarInstance>()
+  onMounted(() => {
+    vxeBind()
+    queryPage()
+  })
+  function vxeBind() {
+    xTable.connect(xToolbar)
   }
+
+  function queryPage() {
+    loading.value = true
+    pageByReceive({
+      ...model.queryParam,
+      ...pages,
+    }).then(({ data }) => {
+      pageQueryResHandel(data)
+    })
+  }
+  function show(record) {
+    noticeReader.init(record)
+  }
+</script>
+<script lang="ts">
+  import { defineComponent } from 'vue'
+
+  export default defineComponent({
+    name: 'SiteMessageListReceive',
+  })
 </script>
 
 <style scoped></style>

src/views/modules/notice/site/sender/SiteMessageEdit.vue

@@ -1,51 +1,33 @@
 <template>
   <basic-modal
     v-bind="$attrs"
+    width="60%"
+    title="发布系统通知消息"
     :loading="confirmLoading"
-    :width="modalWidth"
-    :title="title"
     :visible="visible"
     :mask-closable="showable"
     @cancel="handleCancel"
   >
-    <a-form
-      class="small-from-item"
-      ref="formRef"
-      :validate-trigger="['blur', 'change']"
-      :model="form"
-      :rules="rules"
-      :label-col="labelCol"
-      :wrapper-col="wrapperCol"
-    >
-      <a-form-item label="主键" :hidden="true">
-        <a-input v-model:value="form.id" :disabled="showable" />
+    <a-form layout="vertical" ref="formRef" :validate-trigger="['blur', 'change']" :model="form" :rules="rules">
+      <a-form-item label="标题" name="title">
+        <a-input v-model:value="form.title" placeholder="请输入标题" />
       </a-form-item>
-      <a-form-item label="消息标题" name="title">
-        <a-input v-model:value="form.title" :disabled="showable" placeholder="请输入消息标题" />
+      <a-form-item ref="content" label="内容" name="content">
+        <div style="border: 1px solid #ccc">
+          <a-form-item-rest>
+            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="{}" mode="simple" />
+          </a-form-item-rest>
+          <Editor
+            style="height: 300px; max-height: 650px"
+            v-model="form.content"
+            :defaultConfig="{ placeholder: '请输入内容...' }"
+            mode="simple"
+            @onCreated="handleCreated"
+          />
+        </div>
       </a-form-item>
-      <a-form-item label="消息内容" name="content">
-        <a-input v-model:value="form.content" :disabled="showable" placeholder="请输入消息内容" />
-      </a-form-item>
-      <a-form-item label="发送者id" name="senderId">
-        <a-input v-model:value="form.senderId" :disabled="showable" placeholder="请输入发送者id" />
-      </a-form-item>
-      <a-form-item label="发送者姓名" name="senderName">
-        <a-input v-model:value="form.senderName" :disabled="showable" placeholder="请输入发送者姓名" />
-      </a-form-item>
-      <a-form-item label="发送时间" name="senderTime">
-        <a-input v-model:value="form.senderTime" :disabled="showable" placeholder="请输入发送时间" />
-      </a-form-item>
-      <a-form-item label="消息类型" name="receiveType">
-        <a-input v-model:value="form.receiveType" :disabled="showable" placeholder="请输入消息类型" />
-      </a-form-item>
-      <a-form-item label="发布状态" name="sendState">
-        <a-input v-model:value="form.sendState" :disabled="showable" placeholder="请输入发布状态" />
-      </a-form-item>
-      <a-form-item label="截至有效期" name="efficientTime">
-        <a-input v-model:value="form.efficientTime" :disabled="showable" placeholder="请输入截至有效期" />
-      </a-form-item>
-      <a-form-item label="撤回时间" name="cancelTime">
-        <a-input v-model:value="form.cancelTime" :disabled="showable" placeholder="请输入撤回时间" />
+      <a-form-item label="截止有效期" name="efficientTime">
+        <a-date-picker style="width: 100%" placeholder="请选择消息截止有效期" valueFormat="YYYY-MM-DD" v-model:value="form.efficientTime" />
       </a-form-item>
     </a-form>
     <template #footer>
@@ -58,13 +40,17 @@
 </template>
 
 <script lang="ts" setup>
-  import { nextTick, reactive } from 'vue'
+  import '@wangeditor/editor/dist/css/style.css' // 引入 css
+  import { nextTick, onBeforeUnmount, reactive, shallowRef } from 'vue'
   import { $ref } from 'vue/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
-  import { add, get, update, SiteMessage } from './SiteMessage.api'
+  import { saveOrUpdate, get } from '../SiteMessage.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
   import { FormEditType } from '/@/enums/formTypeEnum'
   import { BasicModal } from '/@/components/Modal'
+  import { SiteMessage } from '/@/views/modules/notice/site/SiteMessage.api'
+  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+  import XEUtils from 'xe-utils'
 
   const {
     initFormEditType,
@@ -80,24 +66,31 @@
     showable,
     formEditType,
   } = useFormEdit()
+
+  // 编辑器实例，必须用 shallowRef
+  const editorRef = shallowRef()
   // 表单
   const formRef = $ref<FormInstance>()
-  let form = $ref({
-    id: null,
-    title: null,
-    content: null,
-    senderId: null,
-    senderName: null,
-    senderTime: null,
-    receiveType: null,
-    sendState: null,
+  let form = $ref<SiteMessage>({
+    title: '',
+    content: '',
     efficientTime: null,
-    cancelTime: null,
-  } as SiteMessage)
+    receiveType: 'all',
+  })
   // 校验
-  const rules = reactive({} as Record<string, Rule[]>)
+  const rules = reactive({
+    title: [{ required: true, message: '标题不可为空!' }],
+    content: [{ required: true, message: '内容不可为空!' }],
+    efficientTime: [{ required: true, message: '截止有效期不可为空!' }],
+  } as Record<string, Rule[]>)
   // 事件
   const emits = defineEmits(['ok'])
+
+  // 记录 editor 实例，重要！
+  const handleCreated = (editor) => {
+    editorRef.value = editor
+  }
+
   // 入口
   function init(id, editType: FormEditType) {
     initFormEditType(editType)
@@ -114,17 +107,14 @@
       })
     } else {
       confirmLoading.value = false
+      form.efficientTime = XEUtils.toDateString(new Date(), 'yyyy-MM-dd')
     }
   }
   // 保存
   function handleOk() {
     formRef.validate().then(async () => {
       confirmLoading.value = true
-      if (formEditType.value === FormEditType.Add) {
-        await add(form)
-      } else if (formEditType.value === FormEditType.Edit) {
-        await update(form)
-      }
+      await saveOrUpdate(form)
       confirmLoading.value = false
       handleCancel()
       emits('ok')
@@ -137,6 +127,12 @@
       formRef.resetFields()
     })
   }
+  // 组件销毁时，也及时销毁编辑器
+  onBeforeUnmount(() => {
+    const editor = editorRef.value
+    if (editor == null) return
+    editor.destroy()
+  })
   defineExpose({
     init,
   })

src/views/modules/notice/site/sender/SiteMessageList.vue

@@ -30,7 +30,7 @@
         </vxe-column>
         <vxe-column field="senderTime" title="发送时间" />
         <vxe-column field="createTime" title="创建时间" />
-        <vxe-column fixed="right" width="150" :showOverflow="false" title="操作">
+        <vxe-column fixed="right" width="200" :showOverflow="false" title="操作">
           <template #default="{ row }">
             <span>
               <a href="javascript:" @click="show(row)">查看</a>
@@ -69,6 +69,7 @@
         @page-change="handleTableChange"
       />
       <site-message-edit ref="siteMessageEdit" @ok="queryPage" />
+      <notice-reader ref="noticeReader" />
     </div>
   </div>
 </template>
@@ -76,7 +77,7 @@
 <script lang="ts" setup>
   import { onMounted, ref } from 'vue'
   import { $ref } from 'vue/macros'
-  import { cancel, del, page, send } from './SiteMessage.api'
+  import { cancel, del, pageBySender, send } from '../SiteMessage.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import SiteMessageEdit from './SiteMessageEdit.vue'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
@@ -85,6 +86,7 @@
   import { useMessage } from '/@/hooks/web/useMessage'
   import { QueryField } from '/@/components/Bootx/Query/Query'
   import { useDict } from '/@/hooks/bootx/useDict'
+  import NoticeReader from '/@/layouts/default/header/components/notify/NoticeReader.vue'
 
   // 使用hooks
   const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTablePage(queryPage)
@@ -93,6 +95,7 @@
   // 查询条件
   const fields = [] as QueryField[]
 
+  const noticeReader = $ref<any>()
   const xTable = $ref<VxeTableInstance>()
   const xToolbar = $ref<VxeToolbarInstance>()
   const siteMessageEdit = $ref<any>()
@@ -108,7 +111,7 @@
   // 分页查询
   function queryPage() {
     loading.value = true
-    page({
+    pageBySender({
       ...model.queryParam,
       ...pages,
     }).then(({ data }) => {
@@ -125,7 +128,7 @@
   }
   // 查看
   function show(record) {
-    siteMessageEdit.init(record.id, FormEditType.Show)
+    noticeReader.init(record)
   }
 
   // 删除