root/ludu-admin-vue3
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Vue3 重构：REVIEW 站内信

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/api/system/notify/message/index.ts
View File

@ -15,31 +15,13 @@ export interface NotifyMessageVO {
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 })
}
// 查询站内信消息详情
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 })
}

2
src/views/bpm/definition/index.vue
View File

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

2
src/views/bpm/form/index.vue
View File

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

2
src/views/bpm/group/index.vue
View File

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

2
src/views/bpm/model/index.vue
View File

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

2
src/views/bpm/taskAssignRule/index.vue
View File

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

2
src/views/infra/apiErrorLog/index.vue
View File

@ -182,7 +182,7 @@ const queryParams = reactive({
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
/** 查询参数列表 */
/** 查询列表 */
const getList = async () => {
loading.value = true
try {

2
src/views/infra/config/index.vue
View File

@ -153,7 +153,7 @@ const queryParams = reactive({
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
/** 查询参数列表 */
/** 查询列表 */
const getList = async () => {
loading.value = true
try {

2
src/views/infra/dataSourceConfig/index.vue
View File

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

2
src/views/infra/file/index.vue
View File

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

2
src/views/infra/fileConfig/index.vue
View File

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

2
src/views/mp/message/index.vue
View File

@ -210,7 +210,7 @@ const open = ref(false) // 是否显示弹出层
const userId = ref(0) // 操作的用户编号
const accountList = ref<MpAccountApi.AccountVO[]>([]) // 公众号账号列表
/** 查询参数列表 */
/** 查询列表 */
const getList = async () => {
// 如果没有选中公众号账号，则进行提示。
if (!queryParams.accountId) {

2
src/views/mp/tag/index.vue
View File

@ -106,7 +106,7 @@ const queryParams = reactive({
const queryFormRef = ref() // 搜索的表单
const accountList = ref<MpAccountApi.AccountVO[]>([]) // 公众号账号列表
/** 查询参数列表 */
/** 查询列表 */
const getList = async () => {
// 如果没有选中公众号账号，则进行提示。
if (!queryParams.accountId) {

2
src/views/system/dict/data.vue
View File

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

2
src/views/system/loginlog/index.vue
View File

@ -123,7 +123,7 @@ const queryParams = reactive({
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
/** 查询参数列表 */
/** 查询列表 */
const getList = async () => {
loading.value = true
try {

2
src/views/system/menu/index.vue
View File

@ -126,7 +126,7 @@ const queryFormRef = ref() // 搜索的表单
const isExpandAll = ref(false) // 是否展开，默认全部折叠
const refreshTable = ref(true) // 重新渲染表格状态
/** 查询参数列表 */
/** 查询列表 */
const getList = async () => {
loading.value = true
try {

10
src/views/system/notify/message/detail.vue → src/views/system/notify/message/NotifyMessageDetail.vue
View File

@ -1,5 +1,5 @@
<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-item label="编号" min-width="120">
{{ detailData.id }}
@ -32,10 +32,10 @@
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="detailData.readStatus" />
</el-descriptions-item>
<el-descriptions-item label="阅读时间">
{{ formatDate(detailData.readTime, 'YYYY-MM-DD HH:mm:ss') }}
{{ formatDate(detailData.readTime) }}
</el-descriptions-item>
<el-descriptions-item label="创建时间">
{{ formatDate(detailData.createTime, 'YYYY-MM-DD HH:mm:ss') }}
{{ formatDate(detailData.createTime) }}
</el-descriptions-item>
</el-descriptions>
</Dialog>
@ -50,7 +50,7 @@ const detailLoading = ref(false) // 表单的加载中
const detailData = ref() // 详情数据
/** 打开弹窗 */
const openModal = async (data: NotifyMessageApi.NotifyMessageVO) => {
const open = async (data: NotifyMessageApi.NotifyMessageVO) => {
modelVisible.value = true
// 设置数据
detailLoading.value = true
@ -60,5 +60,5 @@ const openModal = async (data: NotifyMessageApi.NotifyMessageVO) => {
detailLoading.value = false
}
}
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>

43
src/views/system/notify/message/index.vue
View File

@ -25,10 +25,10 @@
class="!w-240px"
>
<el-option
v-for="dict in getDictOptions(DICT_TYPE.USER_TYPE)"
:key="parseInt(dict.value)"
v-for="dict in getIntDictOptions(DICT_TYPE.USER_TYPE)"
:key="dict.value"
:label="dict.label"
:value="parseInt(dict.value)"
:value="dict.value"
/>
</el-select>
</el-form-item>
@ -49,10 +49,10 @@
class="!w-240px"
>
<el-option
v-for="dict in getDictOptions(DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE)"
:key="parseInt(dict.value)"
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE)"
:key="dict.value"
:label="dict.label"
:value="parseInt(dict.value)"
:value="dict.value"
/>
</el-select>
</el-form-item>
@ -76,7 +76,7 @@
<!-- 列表 -->
<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="userType">
<template #default="scope">
@ -84,7 +84,6 @@
</template>
</el-table-column>
<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="templateNickname" width="180" />
<el-table-column
@ -127,12 +126,12 @@
width="180"
:formatter="dateFormatter"
/>
<el-table-column label="操作" align="center">
<el-table-column label="操作" align="center" fixed="right">
<template #default="scope">
<el-button
link
type="primary"
@click="openModal(scope.row)"
@click="openDetail(scope.row)"
v-hasPermi="['system:notify-message:query']"
>
详情
@ -150,13 +149,13 @@
</content-wrap>
<!-- 表单弹窗：详情 -->
<notify-message-detail ref="modalRef" />
<NotifyMessageDetail ref="detailRef" />
</template>
<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 * as NotifyMessageApi from '@/api/system/notify/message'
import NotifyMessageDetail from './detail.vue'
import NotifyMessageDetail from './NotifyMessageDetail.vue'
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
@ -171,14 +170,12 @@ const queryParams = reactive({
createTime: []
})
const queryFormRef = ref() // 搜索的表单
const tableRef = ref()
const tableHeight = ref() // table高度
/** 查询参数列表 */
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await NotifyMessageApi.getNotifyMessagePageApi(queryParams)
const data = await NotifyMessageApi.getNotifyMessagePage(queryParams)
list.value = data.list
total.value = data.total
} finally {
@ -199,19 +196,13 @@ const resetQuery = () => {
}
/** 详情操作 */
const modalRef = ref()
const openModal = (data: NotifyMessageApi.NotifyMessageVO) => {
modalRef.value.openModal(data)
const detailRef = ref()
const openDetail = (data: NotifyMessageApi.NotifyMessageVO) => {
detailRef.value.open(data)
}
/** 初始化 **/
onMounted(() => {
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>

6
src/views/system/notify/my/detail.vue → src/views/system/notify/my/MyNotifyMessageDetail.vue
View File

@ -1,5 +1,5 @@
<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-item label="发送人">
{{ detailData.templateNickname }}
@ -32,7 +32,7 @@ const detailLoading = ref(false) // 表单的加载中
const detailData = ref() // 详情数据
/** 打开弹窗 */
const openModal = async (data: NotifyMessageApi.NotifyMessageVO) => {
const open = async (data: NotifyMessageApi.NotifyMessageVO) => {
modelVisible.value = true
// 设置数据
detailLoading.value = true
@ -42,5 +42,5 @@ const openModal = async (data: NotifyMessageApi.NotifyMessageVO) => {
detailLoading.value = false
}
}
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>

157
src/views/system/notify/my/index.vue
View File

@ -16,7 +16,7 @@
class="!w-240px"
>
<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"
:label="dict.label"
:value="dict.value"
@ -37,40 +37,26 @@
<el-form-item>
<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="handleUpdateList"
><Icon icon="ep:reading" class="mr-5px" /> 标记已读</el-button
>
<el-button @click="handleUpdateAll"
><Icon icon="ep:reading" class="mr-5px" /> 全部已读</el-button
>
<el-button @click="handleUpdateList">
<Icon icon="ep:reading" class="mr-5px" /> 标记已读
</el-button>
<el-button @click="handleUpdateAll">
<Icon icon="ep:reading" class="mr-5px" /> 全部已读
</el-button>
</el-form-item>
</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>
<!-- 列表 -->
<el-table
ref="tableRef"
v-loading="loading"
:data="list"
:height="tableHeight"
:row-key="getRowKeys"
ref="tableRef"
row-key="id"
@selection-change="handleSelectionChange"
>
<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="发送时间"
@ -107,9 +93,9 @@
<el-button
link
:type="scope.row.readStatus ? 'primary' : 'warning'"
@click="openModal(scope.row)"
@click="openDetail(scope.row)"
>
{{ scope.row.readStatus ? '详情' : '查阅' }}
{{ scope.row.readStatus ? '详情' : '已读' }}
</el-button>
</template>
</el-table-column>
@ -124,15 +110,14 @@
</content-wrap>
<!-- 表单弹窗：详情 -->
<my-notify-message-detail ref="modalRef" />
<MyNotifyMessageDetail ref="detailRef" />
</template>
<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 * as NotifyMessageApi from '@/api/system/notify/message'
import MyNotifyMessageDetail from './detail.vue'
import MyNotifyMessageDetail from './MyNotifyMessageDetail.vue'
const message = useMessage() // 消息
const loading = ref(true) // 列表的加载中
@ -145,13 +130,10 @@ const queryParams = reactive({
createTime: []
})
const queryFormRef = ref() // 搜索的表单
const tableRef = ref()
const tableHeight = ref() // table高度
const selectedNum = ref(0) //表格select选中的条数
const selectedIds = ref([] as any[]) //表格select复选框选中的id
const multipleSelection = ref([])
const tableRef = ref() // 表格的 Ref
const selectedIds = ref<number[]>([]) // 表格的选中 ID 数组
/** 查询参数列表 */
/** 查询列表 */
const getList = async () => {
loading.value = true
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 = () => {
queryParams.pageNo = 1
@ -210,41 +158,56 @@ const resetQuery = () => {
handleQuery()
}
/** 初始化 **/
onMounted(() => {
getList()
// TODO 感觉表格自适应高度体验好些，目前简单实现 需要进一步优化
tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 85 - 155
// 监听浏览器高度变化
window.onresize = () => {
tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 85 - 155
/** 详情操作 */
const detailRef = ref()
const openDetail = (data: NotifyMessageApi.NotifyMessageVO) => {
if (!data.readStatus) {
handleReadOne(data.id)
}
})
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) => {
return !row.readStatus
}
//选中的list
const getRowKeys = (row) => {
return row.id
}
//当表格选择项发生变化时会触发该事件
const handleSelectionChange = (val) => {
// 解决来回切换页面，也无法清除上次选中情况
multipleSelection.value = val
selectedNum.value = multipleSelection.value.length
/** 当表格选择项发生变化时会触发该事件 */
const handleSelectionChange = (array: NotifyMessageApi.NotifyMessageVO[]) => {
selectedIds.value = []
if (val) {
undefined
val.forEach((row) => {
undefined
if (row) {
undefined
selectedIds.value.push(row.id)
}
})
if (!array) {
return
}
array.forEach((row) => selectedIds.value.push(row.id))
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>

2
src/views/system/oauth2/token/index.vue
View File

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

2
src/views/system/operatelog/index.vue
View File

@ -156,7 +156,7 @@ const queryParams = reactive({
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
/** 查询参数列表 */
/** 查询列表 */
const getList = async () => {
loading.value = true
try {

2
src/views/system/sensitiveWord/index.vue
View File

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

2
src/views/system/sms/channel/index.vue
View File

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

2
src/views/system/tenant/index.vue
View File

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