站内信模块:vue3 消息
This commit is contained in:
parent
cb0da2db6a
commit
8cdae12b34
|
@ -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 })
|
||||
}
|
|
@ -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>
|
|
@ -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)
|
Loading…
Reference in New Issue