BJ_ZTEITS-Developers / parking-cloud-yudao

Commit 8cdae12b34faab9088f6c15fc0818fd578d7837a

Authored by YunaiV
1 parent cb0da2db

站内信模块：vue3 消息

Inline Side-by-side
Showing 3 changed files with 200 additions and 0 deletions
yudao-ui-admin-vue3/src/api/system/notify/message/index.ts 0 → 100644
  View file @8cdae12
  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
  View file @8cdae12
  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
  View file @8cdae12
  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)
... ...