Vue3 重构:REVIEW 站内信

This commit is contained in:
YunaiV 2023-03-28 23:18:10 +08:00
parent 969c83a8dc
commit a4dea6c254
25 changed files with 107 additions and 171 deletions

View File

@ -15,31 +15,13 @@ export interface NotifyMessageVO {
readTime: Date readTime: Date
} }
export interface NotifyMessagePageReqVO extends PageParam {
userId?: number
userType?: number
templateCode?: string
templateType?: number
createTime?: Date[]
}
export interface NotifyMessageMyPageReqVO extends PageParam {
readStatus?: boolean
createTime?: Date[]
}
// 查询站内信消息列表 // 查询站内信消息列表
export const getNotifyMessagePageApi = async (params: NotifyMessagePageReqVO) => { export const getNotifyMessagePage = async (params: PageParam) => {
return await request.get({ url: '/system/notify-message/page', params }) 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 })
}
// 获得我的站内信分页 // 获得我的站内信分页
export const getMyNotifyMessagePage = async (params: NotifyMessageMyPageReqVO) => { export const getMyNotifyMessagePage = async (params: PageParam) => {
return await request.get({ url: '/system/notify-message/my-page', params }) return await request.get({ url: '/system/notify-message/my-page', params })
} }

View File

@ -110,7 +110,7 @@ const queryParams = reactive({
key: query.key key: query.key
}) })
/** 查询参数列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {

View File

@ -103,7 +103,7 @@ const queryParams = reactive({
}) })
const queryFormRef = ref() // const queryFormRef = ref() //
/** 查询参数列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {

View File

@ -132,7 +132,7 @@ const queryParams = reactive({
const queryFormRef = ref() // const queryFormRef = ref() //
const userList = ref([]) // const userList = ref([]) //
/** 查询参数列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {

View File

@ -248,7 +248,7 @@ const queryParams = reactive({
}) })
const queryFormRef = ref() // const queryFormRef = ref() //
/** 查询参数列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {

View File

@ -56,7 +56,7 @@ const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) //
const taskAssignScriptDictDatas = getIntDictOptions(DICT_TYPE.BPM_TASK_ASSIGN_SCRIPT) const taskAssignScriptDictDatas = getIntDictOptions(DICT_TYPE.BPM_TASK_ASSIGN_SCRIPT)
/** 查询参数列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {

View File

@ -182,7 +182,7 @@ const queryParams = reactive({
const queryFormRef = ref() // const queryFormRef = ref() //
const exportLoading = ref(false) // const exportLoading = ref(false) //
/** 查询参数列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {

View File

@ -153,7 +153,7 @@ const queryParams = reactive({
const queryFormRef = ref() // const queryFormRef = ref() //
const exportLoading = ref(false) // const exportLoading = ref(false) //
/** 查询参数列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {

View File

@ -66,7 +66,7 @@ const { t } = useI18n() // 国际化
const loading = ref(true) // const loading = ref(true) //
const list = ref([]) // const list = ref([]) //
/** 查询参数列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {

View File

@ -104,7 +104,7 @@ const queryParams = reactive({
}) })
const queryFormRef = ref() // const queryFormRef = ref() //
/** 查询参数列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {

View File

@ -130,7 +130,7 @@ const queryParams = reactive({
}) })
const queryFormRef = ref() // const queryFormRef = ref() //
/** 查询参数列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {

View File

@ -210,7 +210,7 @@ const open = ref(false) // 是否显示弹出层
const userId = ref(0) // const userId = ref(0) //
const accountList = ref<MpAccountApi.AccountVO[]>([]) // const accountList = ref<MpAccountApi.AccountVO[]>([]) //
/** 查询参数列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
// //
if (!queryParams.accountId) { if (!queryParams.accountId) {

View File

@ -106,7 +106,7 @@ const queryParams = reactive({
const queryFormRef = ref() // const queryFormRef = ref() //
const accountList = ref<MpAccountApi.AccountVO[]>([]) // const accountList = ref<MpAccountApi.AccountVO[]>([]) //
/** 查询参数列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
// //
if (!queryParams.accountId) { if (!queryParams.accountId) {

View File

@ -130,7 +130,7 @@ const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // const exportLoading = ref(false) //
const dicts = ref<DictTypeApi.DictTypeVO[]>() // const dicts = ref<DictTypeApi.DictTypeVO[]>() //
/** 查询参数列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {

View File

@ -123,7 +123,7 @@ const queryParams = reactive({
const queryFormRef = ref() // const queryFormRef = ref() //
const exportLoading = ref(false) // const exportLoading = ref(false) //
/** 查询参数列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {

View File

@ -126,7 +126,7 @@ const queryFormRef = ref() // 搜索的表单
const isExpandAll = ref(false) // const isExpandAll = ref(false) //
const refreshTable = ref(true) // const refreshTable = ref(true) //
/** 查询参数列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {

View File

@ -1,5 +1,5 @@
<template> <template>
<Dialog title="详情" v-model="modelVisible" :scroll="true" :max-height="500" width="800"> <Dialog title="详情" v-model="modelVisible" :scroll="true" :max-height="500">
<el-descriptions border :column="1"> <el-descriptions border :column="1">
<el-descriptions-item label="编号" min-width="120"> <el-descriptions-item label="编号" min-width="120">
{{ detailData.id }} {{ detailData.id }}
@ -32,10 +32,10 @@
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="detailData.readStatus" /> <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="detailData.readStatus" />
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="阅读时间"> <el-descriptions-item label="阅读时间">
{{ formatDate(detailData.readTime, 'YYYY-MM-DD HH:mm:ss') }} {{ formatDate(detailData.readTime) }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="创建时间"> <el-descriptions-item label="创建时间">
{{ formatDate(detailData.createTime, 'YYYY-MM-DD HH:mm:ss') }} {{ formatDate(detailData.createTime) }}
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
</Dialog> </Dialog>
@ -50,7 +50,7 @@ const detailLoading = ref(false) // 表单的加载中
const detailData = ref() // const detailData = ref() //
/** 打开弹窗 */ /** 打开弹窗 */
const openModal = async (data: NotifyMessageApi.NotifyMessageVO) => { const open = async (data: NotifyMessageApi.NotifyMessageVO) => {
modelVisible.value = true modelVisible.value = true
// //
detailLoading.value = true detailLoading.value = true
@ -60,5 +60,5 @@ const openModal = async (data: NotifyMessageApi.NotifyMessageVO) => {
detailLoading.value = false detailLoading.value = false
} }
} }
defineExpose({ openModal }) // openModal defineExpose({ open }) // open
</script> </script>

View File

@ -25,10 +25,10 @@
class="!w-240px" class="!w-240px"
> >
<el-option <el-option
v-for="dict in getDictOptions(DICT_TYPE.USER_TYPE)" v-for="dict in getIntDictOptions(DICT_TYPE.USER_TYPE)"
:key="parseInt(dict.value)" :key="dict.value"
:label="dict.label" :label="dict.label"
:value="parseInt(dict.value)" :value="dict.value"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -49,10 +49,10 @@
class="!w-240px" class="!w-240px"
> >
<el-option <el-option
v-for="dict in getDictOptions(DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE)" v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE)"
:key="parseInt(dict.value)" :key="dict.value"
:label="dict.label" :label="dict.label"
:value="parseInt(dict.value)" :value="dict.value"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -76,7 +76,7 @@
<!-- 列表 --> <!-- 列表 -->
<content-wrap> <content-wrap>
<el-table ref="tableRef" v-loading="loading" :data="list" :height="tableHeight"> <el-table v-loading="loading" :data="list">
<el-table-column label="编号" align="center" prop="id" /> <el-table-column label="编号" align="center" prop="id" />
<el-table-column label="用户类型" align="center" prop="userType"> <el-table-column label="用户类型" align="center" prop="userType">
<template #default="scope"> <template #default="scope">
@ -84,7 +84,6 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="用户编号" align="center" prop="userId" width="80" /> <el-table-column label="用户编号" align="center" prop="userId" width="80" />
<el-table-column label="模版编号" align="center" prop="templateId" width="80" />
<el-table-column label="模板编码" align="center" prop="templateCode" width="80" /> <el-table-column label="模板编码" align="center" prop="templateCode" width="80" />
<el-table-column label="发送人名称" align="center" prop="templateNickname" width="180" /> <el-table-column label="发送人名称" align="center" prop="templateNickname" width="180" />
<el-table-column <el-table-column
@ -127,12 +126,12 @@
width="180" width="180"
:formatter="dateFormatter" :formatter="dateFormatter"
/> />
<el-table-column label="操作" align="center"> <el-table-column label="操作" align="center" fixed="right">
<template #default="scope"> <template #default="scope">
<el-button <el-button
link link
type="primary" type="primary"
@click="openModal(scope.row)" @click="openDetail(scope.row)"
v-hasPermi="['system:notify-message:query']" v-hasPermi="['system:notify-message:query']"
> >
详情 详情
@ -150,13 +149,13 @@
</content-wrap> </content-wrap>
<!-- 表单弹窗详情 --> <!-- 表单弹窗详情 -->
<notify-message-detail ref="modalRef" /> <NotifyMessageDetail ref="detailRef" />
</template> </template>
<script setup lang="ts" name="NotifyMessage"> <script setup lang="ts" name="NotifyMessage">
import { DICT_TYPE, getDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import * as NotifyMessageApi from '@/api/system/notify/message' import * as NotifyMessageApi from '@/api/system/notify/message'
import NotifyMessageDetail from './detail.vue' import NotifyMessageDetail from './NotifyMessageDetail.vue'
const loading = ref(true) // const loading = ref(true) //
const total = ref(0) // const total = ref(0) //
@ -171,14 +170,12 @@ const queryParams = reactive({
createTime: [] createTime: []
}) })
const queryFormRef = ref() // const queryFormRef = ref() //
const tableRef = ref()
const tableHeight = ref() // table
/** 查询参数列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {
const data = await NotifyMessageApi.getNotifyMessagePageApi(queryParams) const data = await NotifyMessageApi.getNotifyMessagePage(queryParams)
list.value = data.list list.value = data.list
total.value = data.total total.value = data.total
} finally { } finally {
@ -199,19 +196,13 @@ const resetQuery = () => {
} }
/** 详情操作 */ /** 详情操作 */
const modalRef = ref() const detailRef = ref()
const openModal = (data: NotifyMessageApi.NotifyMessageVO) => { const openDetail = (data: NotifyMessageApi.NotifyMessageVO) => {
modalRef.value.openModal(data) detailRef.value.open(data)
} }
/** 初始化 **/ /** 初始化 **/
onMounted(() => { onMounted(() => {
getList() getList()
// TODO ,
tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 85 - 155
//
window.onresize = () => {
tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 85 - 155
}
}) })
</script> </script>

View File

@ -1,5 +1,5 @@
<template> <template>
<Dialog title="消息详情" v-model="modelVisible" :scroll="true" :max-height="500" width="800"> <Dialog title="消息详情" v-model="modelVisible" :scroll="true" :max-height="500">
<el-descriptions border :column="1"> <el-descriptions border :column="1">
<el-descriptions-item label="发送人"> <el-descriptions-item label="发送人">
{{ detailData.templateNickname }} {{ detailData.templateNickname }}
@ -32,7 +32,7 @@ const detailLoading = ref(false) // 表单的加载中
const detailData = ref() // const detailData = ref() //
/** 打开弹窗 */ /** 打开弹窗 */
const openModal = async (data: NotifyMessageApi.NotifyMessageVO) => { const open = async (data: NotifyMessageApi.NotifyMessageVO) => {
modelVisible.value = true modelVisible.value = true
// //
detailLoading.value = true detailLoading.value = true
@ -42,5 +42,5 @@ const openModal = async (data: NotifyMessageApi.NotifyMessageVO) => {
detailLoading.value = false detailLoading.value = false
} }
} }
defineExpose({ openModal }) // openModal defineExpose({ open }) // open
</script> </script>

View File

@ -16,7 +16,7 @@
class="!w-240px" class="!w-240px"
> >
<el-option <el-option
v-for="dict in getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)" v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
:key="dict.value" :key="dict.value"
:label="dict.label" :label="dict.label"
:value="dict.value" :value="dict.value"
@ -37,40 +37,26 @@
<el-form-item> <el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button @click="handleUpdateList" <el-button @click="handleUpdateList">
><Icon icon="ep:reading" class="mr-5px" /> 标记已读</el-button <Icon icon="ep:reading" class="mr-5px" /> 标记已读
> </el-button>
<el-button @click="handleUpdateAll" <el-button @click="handleUpdateAll">
><Icon icon="ep:reading" class="mr-5px" /> 全部已读</el-button <Icon icon="ep:reading" class="mr-5px" /> 全部已读
> </el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- <el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button @click="handleUpdateList"
><Icon icon="ep:refresh" class="mr-5px" /> 标记已读</el-button
>
</el-col>
<el-col :span="1.5">
<el-button @click="handleUpdateAll"
><Icon icon="ep:refresh" class="mr-5px" /> 全部已读</el-button
>
</el-col>
</el-row> -->
</content-wrap> </content-wrap>
<content-wrap> <content-wrap>
<!-- 列表 --> <!-- 列表 -->
<el-table <el-table
ref="tableRef"
v-loading="loading" v-loading="loading"
:data="list" :data="list"
:height="tableHeight" ref="tableRef"
:row-key="getRowKeys" row-key="id"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<el-table-column type="selection" :selectable="selectable" :reserve-selection="true" /> <el-table-column type="selection" :selectable="selectable" :reserve-selection="true" />
<!-- <el-table-column label="编号" align="center" prop="id" /> -->
<el-table-column label="发送人" align="center" prop="templateNickname" width="180" /> <el-table-column label="发送人" align="center" prop="templateNickname" width="180" />
<el-table-column <el-table-column
label="发送时间" label="发送时间"
@ -107,9 +93,9 @@
<el-button <el-button
link link
:type="scope.row.readStatus ? 'primary' : 'warning'" :type="scope.row.readStatus ? 'primary' : 'warning'"
@click="openModal(scope.row)" @click="openDetail(scope.row)"
> >
{{ scope.row.readStatus ? '详情' : '查阅' }} {{ scope.row.readStatus ? '详情' : '已读' }}
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
@ -124,15 +110,14 @@
</content-wrap> </content-wrap>
<!-- 表单弹窗详情 --> <!-- 表单弹窗详情 -->
<my-notify-message-detail ref="modalRef" /> <MyNotifyMessageDetail ref="detailRef" />
</template> </template>
<script setup lang="ts" name="MyNotifyMessage"> <script setup lang="ts" name="MyNotifyMessage">
import { DICT_TYPE, getDictOptions } from '@/utils/dict' import { DICT_TYPE, getBoolDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import * as NotifyMessageApi from '@/api/system/notify/message' import * as NotifyMessageApi from '@/api/system/notify/message'
import MyNotifyMessageDetail from './detail.vue' import MyNotifyMessageDetail from './MyNotifyMessageDetail.vue'
const message = useMessage() // const message = useMessage() //
const loading = ref(true) // const loading = ref(true) //
@ -145,13 +130,10 @@ const queryParams = reactive({
createTime: [] createTime: []
}) })
const queryFormRef = ref() // const queryFormRef = ref() //
const tableRef = ref() const tableRef = ref() // Ref
const tableHeight = ref() // table const selectedIds = ref<number[]>([]) // ID
const selectedNum = ref(0) //select
const selectedIds = ref([] as any[]) //selectid
const multipleSelection = ref([])
/** 查询参数列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {
@ -163,40 +145,6 @@ const getList = async () => {
} }
} }
/** 详情操作 */
const modalRef = ref()
const openModal = (data: NotifyMessageApi.NotifyMessageVO) => {
if (!data.readStatus) {
handleUpdate(data.id)
}
modalRef.value.openModal(data)
}
// id
const handleUpdate = async (ids) => {
await NotifyMessageApi.updateNotifyMessageRead(ids)
//message.success('')
handleQuery()
}
//
const handleUpdateAll = async () => {
await NotifyMessageApi.updateAllNotifyMessageRead()
message.success('全部已读成功!')
handleQuery()
}
// ids
const handleUpdateList = async () => {
if (selectedIds.value.length === 0) {
return
}
await NotifyMessageApi.updateNotifyMessageRead(selectedIds.value)
message.success('批量已读成功!')
tableRef.value.clearSelection()
handleQuery()
}
/** 搜索按钮操作 */ /** 搜索按钮操作 */
const handleQuery = () => { const handleQuery = () => {
queryParams.pageNo = 1 queryParams.pageNo = 1
@ -210,41 +158,56 @@ const resetQuery = () => {
handleQuery() handleQuery()
} }
/** 初始化 **/ /** 详情操作 */
onMounted(() => { const detailRef = ref()
getList() const openDetail = (data: NotifyMessageApi.NotifyMessageVO) => {
// TODO if (!data.readStatus) {
tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 85 - 155 handleReadOne(data.id)
//
window.onresize = () => {
tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 85 - 155
} }
}) detailRef.value.open(data)
}
// /** 标记一条站内信已读 */
const handleReadOne = async (id) => {
await NotifyMessageApi.updateNotifyMessageRead(id)
await getList()
}
/** 标记全部站内信已读 **/
const handleUpdateAll = async () => {
await NotifyMessageApi.updateAllNotifyMessageRead()
message.success('全部已读成功!')
tableRef.value.clearSelection()
await getList()
}
/** 标记一些站内信已读 **/
const handleUpdateList = async () => {
if (selectedIds.value.length === 0) {
return
}
await NotifyMessageApi.updateNotifyMessageRead(selectedIds.value)
message.success('批量已读成功!')
tableRef.value.clearSelection()
await getList()
}
/** 某一行,是否允许选中 */
const selectable = (row) => { const selectable = (row) => {
return !row.readStatus return !row.readStatus
} }
//list /** 当表格选择项发生变化时会触发该事件 */
const getRowKeys = (row) => { const handleSelectionChange = (array: NotifyMessageApi.NotifyMessageVO[]) => {
return row.id
}
//
const handleSelectionChange = (val) => {
//
multipleSelection.value = val
selectedNum.value = multipleSelection.value.length
selectedIds.value = [] selectedIds.value = []
if (val) { if (!array) {
undefined return
val.forEach((row) => {
undefined
if (row) {
undefined
selectedIds.value.push(row.id)
}
})
} }
array.forEach((row) => selectedIds.value.push(row.id))
} }
/** 初始化 **/
onMounted(() => {
getList()
})
</script> </script>

View File

@ -115,7 +115,7 @@ const queryParams = reactive({
}) })
const queryFormRef = ref() // const queryFormRef = ref() //
/** 查询参数列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {

View File

@ -156,7 +156,7 @@ const queryParams = reactive({
const queryFormRef = ref() // const queryFormRef = ref() //
const exportLoading = ref(false) // const exportLoading = ref(false) //
/** 查询参数列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {

View File

@ -168,7 +168,7 @@ const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // const exportLoading = ref(false) //
const tagList = ref([]) // const tagList = ref([]) //
/** 查询参数列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {

View File

@ -146,7 +146,7 @@ const queryParams = reactive({
createTime: [] createTime: []
}) })
/** 查询参数列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {

View File

@ -191,7 +191,7 @@ const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // const exportLoading = ref(false) //
const packageList = ref([]) // const packageList = ref([]) //
/** 查询参数列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {