Commit 8cdae12b34faab9088f6c15fc0818fd578d7837a
1 parent
cb0da2db
站内信模块：vue3 消息
Showing
3 changed files
with
200 additions
and
0 deletions
yudao-ui-admin-vue3/src/api/system/notify/message/index.ts
0 → 100644
| 1 | +import request from '@/config/axios' | ||
| 2 | + | ||
| 3 | +export interface NotifyMessageVO { | ||
| 4 | + id: number | ||
| 5 | + userId: number | ||
| 6 | + userType: number | ||
| 7 | + templateId: number | ||
| 8 | + templateCode: string | ||
| 9 | + templateNickname: string | ||
| 10 | + templateContent: string | ||
| 11 | + templateType: number | ||
| 12 | + templateParams: string | ||
| 13 | + readStatus: boolean | ||
| 14 | + readTime: Date | ||
| 15 | +} | ||
| 16 | + | ||
| 17 | +export interface NotifyMessagePageReqVO extends PageParam { | ||
| 18 | + userId?: number | ||
| 19 | + userType?: number | ||
| 20 | + templateCode?: string | ||
| 21 | + templateType?: number | ||
| 22 | + createTime?: Date[] | ||
| 23 | +} | ||
| 24 | + | ||
| 25 | +// 查询站内信消息列表 | ||
| 26 | +export const getNotifyMessagePageApi = async (params: NotifyMessagePageReqVO) => { | ||
| 27 | + return await request.get({ url: '/system/notify-message/page', params }) | ||
| 28 | +} | ||
| 29 | + | ||
| 30 | +// 查询站内信消息详情 | ||
| 31 | +export const getNotifyMessageApi = async (id: number) => { | ||
| 32 | + return await request.get({ url: '/system/notify-message/get?id=' + id }) | ||
| 33 | +} |
yudao-ui-admin-vue3/src/views/system/notify/message/index.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <ContentWrap> | ||
| 3 | + <!-- 列表 --> | ||
| 4 | + <XTable @register="registerTable"> | ||
| 5 | + <template #actionbtns_default="{ row }"> | ||
| 6 | + <!-- 操作：详情 --> | ||
| 7 | + <XTextButton | ||
| 8 | + preIcon="ep:view" | ||
| 9 | + :title="t('action.detail')" | ||
| 10 | + v-hasPermi="['system:notify-message:query']" | ||
| 11 | + @click="handleDetail(row.id)" | ||
| 12 | + /> | ||
| 13 | + </template> | ||
| 14 | + </XTable> | ||
| 15 | + </ContentWrap> | ||
| 16 | + <!-- 弹窗 --> | ||
| 17 | + <XModal id="messageModel" :loading="modelLoading" v-model="modelVisible" :title="modelTitle"> | ||
| 18 | + <!-- 表单：详情 --> | ||
| 19 | + <Descriptions | ||
| 20 | + v-if="actionType === 'detail'" | ||
| 21 | + :schema="allSchemas.detailSchema" | ||
| 22 | + :data="detailData" | ||
| 23 | + /> | ||
| 24 | + <template #footer> | ||
| 25 | + <!-- 按钮：关闭 --> | ||
| 26 | + <XButton :loading="actionLoading" :title="t('dialog.close')" @click="modelVisible = false" /> | ||
| 27 | + </template> | ||
| 28 | + </XModal> | ||
| 29 | +</template> | ||
| 30 | +<script setup lang="ts" name="NotifyMessage"> | ||
| 31 | +// 业务相关的 import | ||
| 32 | +import { allSchemas } from './message.data' | ||
| 33 | +import * as NotifyMessageApi from '@/api/system/notify/message' | ||
| 34 | + | ||
| 35 | +const { t } = useI18n() // 国际化 | ||
| 36 | + | ||
| 37 | +// 列表相关的变量 | ||
| 38 | +const [registerTable] = useXTable({ | ||
| 39 | + allSchemas: allSchemas, | ||
| 40 | + getListApi: NotifyMessageApi.getNotifyMessagePageApi | ||
| 41 | +}) | ||
| 42 | + | ||
| 43 | +// 弹窗相关的变量 | ||
| 44 | +const modelVisible = ref(false) // 是否显示弹出层 | ||
| 45 | +const modelTitle = ref('edit') // 弹出层标题 | ||
| 46 | +const modelLoading = ref(false) // 弹出层loading | ||
| 47 | +const actionType = ref('') // 操作按钮的类型 | ||
| 48 | +const actionLoading = ref(false) // 按钮 Loading | ||
| 49 | +const detailData = ref() // 详情 Ref | ||
| 50 | + | ||
| 51 | +// 设置标题 | ||
| 52 | +const setDialogTile = (type: string) => { | ||
| 53 | + modelLoading.value = true | ||
| 54 | + modelTitle.value = t('action.' + type) | ||
| 55 | + actionType.value = type | ||
| 56 | + modelVisible.value = true | ||
| 57 | +} | ||
| 58 | + | ||
| 59 | +// 详情操作 | ||
| 60 | +const handleDetail = async (rowId: number) => { | ||
| 61 | + setDialogTile('detail') | ||
| 62 | + const res = await NotifyMessageApi.getNotifyMessageApi(rowId) | ||
| 63 | + detailData.value = res | ||
| 64 | + modelLoading.value = false | ||
| 65 | +} | ||
| 66 | +</script> |
yudao-ui-admin-vue3/src/views/system/notify/message/message.data.ts
0 → 100644
| 1 | +import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas' | ||
| 2 | + | ||
| 3 | +// CrudSchema | ||
| 4 | +const crudSchemas = reactive<VxeCrudSchema>({ | ||
| 5 | + primaryKey: 'id', // 默认的主键ID | ||
| 6 | + primaryTitle: '编号', // 默认显示的值 | ||
| 7 | + primaryType: 'seq', // 默认为seq，序号模式 | ||
| 8 | + action: true, | ||
| 9 | + actionWidth: '200', // 3个按钮默认200，如有删减对应增减即可 | ||
| 10 | + columns: [ | ||
| 11 | + { | ||
| 12 | + title: '用户编号', | ||
| 13 | + field: 'userId', | ||
| 14 | + isSearch: true | ||
| 15 | + }, | ||
| 16 | + { | ||
| 17 | + title: '用户类型', | ||
| 18 | + field: 'userType', | ||
| 19 | + dictType: DICT_TYPE.USER_TYPE, | ||
| 20 | + dictClass: 'string', | ||
| 21 | + isSearch: true, | ||
| 22 | + table: { | ||
| 23 | + width: 80 | ||
| 24 | + } | ||
| 25 | + }, | ||
| 26 | + { | ||
| 27 | + title: '模版编号', | ||
| 28 | + field: 'templateId' | ||
| 29 | + }, | ||
| 30 | + { | ||
| 31 | + title: '模板编码', | ||
| 32 | + field: 'templateCode', | ||
| 33 | + isSearch: true, | ||
| 34 | + table: { | ||
| 35 | + width: 80 | ||
| 36 | + } | ||
| 37 | + }, | ||
| 38 | + { | ||
| 39 | + title: '发送人名称', | ||
| 40 | + field: 'templateNickname', | ||
| 41 | + table: { | ||
| 42 | + width: 120 | ||
| 43 | + } | ||
| 44 | + }, | ||
| 45 | + { | ||
| 46 | + title: '模版内容', | ||
| 47 | + field: 'templateContent', | ||
| 48 | + table: { | ||
| 49 | + width: 200 | ||
| 50 | + } | ||
| 51 | + }, | ||
| 52 | + { | ||
| 53 | + title: '模版类型', | ||
| 54 | + field: 'templateType', | ||
| 55 | + dictType: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE, | ||
| 56 | + dictClass: 'number', | ||
| 57 | + isSearch: true, | ||
| 58 | + table: { | ||
| 59 | + width: 80 | ||
| 60 | + } | ||
| 61 | + }, | ||
| 62 | + { | ||
| 63 | + title: '模版参数', | ||
| 64 | + field: 'templateParams', | ||
| 65 | + isTable: false | ||
| 66 | + }, | ||
| 67 | + { | ||
| 68 | + title: '是否已读', | ||
| 69 | + field: 'readStatus', | ||
| 70 | + dictType: DICT_TYPE.INFRA_BOOLEAN_STRING, | ||
| 71 | + dictClass: 'boolean', | ||
| 72 | + table: { | ||
| 73 | + width: 80 | ||
| 74 | + } | ||
| 75 | + }, | ||
| 76 | + { | ||
| 77 | + title: '阅读时间', | ||
| 78 | + field: 'readTime', | ||
| 79 | + formatter: 'formatDate', | ||
| 80 | + table: { | ||
| 81 | + width: 180 | ||
| 82 | + } | ||
| 83 | + }, | ||
| 84 | + { | ||
| 85 | + title: '创建时间', | ||
| 86 | + field: 'createTime', | ||
| 87 | + isForm: false, | ||
| 88 | + formatter: 'formatDate', | ||
| 89 | + search: { | ||
| 90 | + show: true, | ||
| 91 | + itemRender: { | ||
| 92 | + name: 'XDataTimePicker' | ||
| 93 | + } | ||
| 94 | + }, | ||
| 95 | + table: { | ||
| 96 | + width: 180 | ||
| 97 | + } | ||
| 98 | + } | ||
| 99 | + ] | ||
| 100 | +}) | ||
| 101 | +export const { allSchemas } = useVxeCrudSchemas(crudSchemas) |