站内信模块:vue3 消息

This commit is contained in:
YunaiV 2023-01-29 08:43:37 +08:00
parent cb0da2db6a
commit 8cdae12b34
3 changed files with 200 additions and 0 deletions

View File

@ -0,0 +1,33 @@
import request from '@/config/axios'
export interface NotifyMessageVO {
id: number
userId: number
userType: number
templateId: number
templateCode: string
templateNickname: string
templateContent: string
templateType: number
templateParams: string
readStatus: boolean
readTime: Date
}
export interface NotifyMessagePageReqVO extends PageParam {
userId?: number
userType?: number
templateCode?: string
templateType?: number
createTime?: Date[]
}
// 查询站内信消息列表
export const getNotifyMessagePageApi = async (params: NotifyMessagePageReqVO) => {
return await request.get({ url: '/system/notify-message/page', params })
}
// 查询站内信消息详情
export const getNotifyMessageApi = async (id: number) => {
return await request.get({ url: '/system/notify-message/get?id=' + id })
}

View File

@ -0,0 +1,66 @@
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<template #actionbtns_default="{ row }">
<!-- 操作详情 -->
<XTextButton
preIcon="ep:view"
:title="t('action.detail')"
v-hasPermi="['system:notify-message:query']"
@click="handleDetail(row.id)"
/>
</template>
</XTable>
</ContentWrap>
<!-- 弹窗 -->
<XModal id="messageModel" :loading="modelLoading" v-model="modelVisible" :title="modelTitle">
<!-- 表单详情 -->
<Descriptions
v-if="actionType === 'detail'"
:schema="allSchemas.detailSchema"
:data="detailData"
/>
<template #footer>
<!-- 按钮关闭 -->
<XButton :loading="actionLoading" :title="t('dialog.close')" @click="modelVisible = false" />
</template>
</XModal>
</template>
<script setup lang="ts" name="NotifyMessage">
// import
import { allSchemas } from './message.data'
import * as NotifyMessageApi from '@/api/system/notify/message'
const { t } = useI18n() //
//
const [registerTable] = useXTable({
allSchemas: allSchemas,
getListApi: NotifyMessageApi.getNotifyMessagePageApi
})
//
const modelVisible = ref(false) //
const modelTitle = ref('edit') //
const modelLoading = ref(false) // loading
const actionType = ref('') //
const actionLoading = ref(false) // Loading
const detailData = ref() // Ref
//
const setDialogTile = (type: string) => {
modelLoading.value = true
modelTitle.value = t('action.' + type)
actionType.value = type
modelVisible.value = true
}
//
const handleDetail = async (rowId: number) => {
setDialogTile('detail')
const res = await NotifyMessageApi.getNotifyMessageApi(rowId)
detailData.value = res
modelLoading.value = false
}
</script>

View File

@ -0,0 +1,101 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id', // 默认的主键ID
primaryTitle: '编号', // 默认显示的值
primaryType: 'seq', // 默认为seq序号模式
action: true,
actionWidth: '200', // 3个按钮默认200如有删减对应增减即可
columns: [
{
title: '用户编号',
field: 'userId',
isSearch: true
},
{
title: '用户类型',
field: 'userType',
dictType: DICT_TYPE.USER_TYPE,
dictClass: 'string',
isSearch: true,
table: {
width: 80
}
},
{
title: '模版编号',
field: 'templateId'
},
{
title: '模板编码',
field: 'templateCode',
isSearch: true,
table: {
width: 80
}
},
{
title: '发送人名称',
field: 'templateNickname',
table: {
width: 120
}
},
{
title: '模版内容',
field: 'templateContent',
table: {
width: 200
}
},
{
title: '模版类型',
field: 'templateType',
dictType: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
dictClass: 'number',
isSearch: true,
table: {
width: 80
}
},
{
title: '模版参数',
field: 'templateParams',
isTable: false
},
{
title: '是否已读',
field: 'readStatus',
dictType: DICT_TYPE.INFRA_BOOLEAN_STRING,
dictClass: 'boolean',
table: {
width: 80
}
},
{
title: '阅读时间',
field: 'readTime',
formatter: 'formatDate',
table: {
width: 180
}
},
{
title: '创建时间',
field: 'createTime',
isForm: false,
formatter: 'formatDate',
search: {
show: true,
itemRender: {
name: 'XDataTimePicker'
}
},
table: {
width: 180
}
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)