288 lines
7.3 KiB
Vue
288 lines
7.3 KiB
Vue
<template>
|
||
<GiTable
|
||
v-model:selected-keys="selectedKeys"
|
||
row-key="id"
|
||
:data="dataList"
|
||
:columns="columns"
|
||
:loading="loading"
|
||
:scroll="{ x: '100%', y: '100%', minWidth: 800 }"
|
||
:pagination="pagination"
|
||
:disabled-tools="['size', 'setting', 'fullscreen']"
|
||
:row-selection="{ type: 'checkbox', showCheckedAll: true }"
|
||
@select="select"
|
||
@select-all="selectAll"
|
||
@refresh="search"
|
||
>
|
||
<template #toolbar-left>
|
||
<a-input-search v-model="queryForm.title" placeholder="搜索标题" allow-clear @search="search" />
|
||
<a-select
|
||
v-model="queryForm.type"
|
||
placeholder="请选择类型"
|
||
allow-clear
|
||
style="width: 150px"
|
||
:options="message_type_enum"
|
||
@change="search"
|
||
>
|
||
</a-select>
|
||
<a-select
|
||
v-model="queryForm.isRead"
|
||
placeholder="请选择状态"
|
||
allow-clear
|
||
style="width: 150px"
|
||
@change="search"
|
||
>
|
||
<a-option :value="false">未读</a-option>
|
||
<a-option :value="true">已读</a-option>
|
||
</a-select>
|
||
<a-button @click="reset">
|
||
<template #icon><icon-refresh /></template>
|
||
<template #default>重置</template>
|
||
</a-button>
|
||
</template>
|
||
<template #toolbar-right>
|
||
<a-button type="primary" status="danger" :disabled="!selectedKeys.length" :title="!selectedKeys.length ? '请选择' : ''" @click="onDelete">
|
||
<template #icon><icon-delete /></template>
|
||
删除
|
||
</a-button>
|
||
<a-button type="primary" :disabled="!selectedKeys.length" :title="!selectedKeys.length ? '请选择' : ''" @click="onRead">
|
||
标记已读
|
||
</a-button>
|
||
<a-button type="primary" :disabled="selectedKeys.length > 0" :title="!selectedKeys.length ? '请选择' : ''" @click="onReadAll">
|
||
全部已读
|
||
</a-button>
|
||
</template>
|
||
<template #title="{ record }">
|
||
<a-link @click="showMessageDetail(record)">
|
||
<a-typography-paragraph
|
||
class="link-text"
|
||
:ellipsis="{
|
||
rows: 1,
|
||
showTooltip: true,
|
||
css: true,
|
||
}"
|
||
>
|
||
{{ record.title }}
|
||
</a-typography-paragraph>
|
||
</a-link>
|
||
</template>
|
||
<template #type="{ record }">
|
||
<GiCellTag :value="record.type" :dict="message_type_enum" />
|
||
</template>
|
||
<template #isRead="{ record }">
|
||
<a-tag :color="record.isRead ? '' : 'arcoblue'">
|
||
{{ record.isRead ? '已读' : '未读' }}
|
||
</a-tag>
|
||
</template>
|
||
</GiTable>
|
||
|
||
<!-- 消息详情弹窗 -->
|
||
<a-modal
|
||
v-model:visible="messageDetailVisible"
|
||
:width="width >= 500 ? 500 : '100%'"
|
||
:footer="false"
|
||
:mask-closable="true"
|
||
class="message-detail-modal"
|
||
>
|
||
<template #title>{{ currentMessage?.title }}</template>
|
||
<div class="message-detail-content">
|
||
<div class="message-content">{{ currentMessage?.content }}</div>
|
||
<div class="message-footer">
|
||
<div class="time-info">
|
||
<icon-clock-circle class="time-icon" />
|
||
<span class="time-label">发送时间：</span>
|
||
<span class="time-value">{{ currentMessage?.createTime }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import type { TableInstance } from '@arco-design/web-vue'
|
||
import { Message, Modal } from '@arco-design/web-vue'
|
||
import { useWindowSize } from '@vueuse/core'
|
||
import {
|
||
type MessageQuery,
|
||
type MessageResp,
|
||
listMessage,
|
||
deleteMessage,
|
||
readMessage,
|
||
readAllMessage,
|
||
getUserMessage,
|
||
} from '@/apis'
|
||
import { useTable } from '@/hooks'
|
||
import { useDict } from '@/hooks/app'
|
||
import mittBus from '@/utils/mitt'
|
||
|
||
defineOptions({ name: 'UserMyMessage' })
|
||
|
||
const { width } = useWindowSize()
|
||
const { message_type_enum } = useDict('message_type_enum')
|
||
|
||
const queryForm = reactive<MessageQuery>({
|
||
sort: ['createTime,desc'],
|
||
})
|
||
// 表格更新回调
|
||
const onSuccess = () => {
|
||
mittBus.emit('count-refresh')
|
||
}
|
||
const {
|
||
tableData: dataList,
|
||
loading,
|
||
pagination,
|
||
selectedKeys,
|
||
select,
|
||
selectAll,
|
||
search,
|
||
handleDelete,
|
||
} = useTable((page) => listMessage({ ...queryForm, ...page }), { immediate: true, onSuccess })
|
||
|
||
const columns: TableInstance['columns'] = [
|
||
{
|
||
title: '序号',
|
||
width: 66,
|
||
align: 'center',
|
||
render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
|
||
},
|
||
{ title: '标题', dataIndex: 'title', slotName: 'title', minWidth: 100, ellipsis: true, tooltip: true },
|
||
{ title: '类型', dataIndex: 'type', slotName: 'type', width: 180, ellipsis: true, tooltip: true },
|
||
{ title: '状态', dataIndex: 'isRead', slotName: 'isRead', minWidth: 100, align: 'center' },
|
||
{ title: '时间', dataIndex: 'createTime', width: 180 },
|
||
]
|
||
|
||
// 重置
|
||
const reset = () => {
|
||
queryForm.title = undefined
|
||
queryForm.type = undefined
|
||
queryForm.isRead = undefined
|
||
search()
|
||
}
|
||
|
||
// 删除
|
||
const onDelete = () => {
|
||
if (!selectedKeys.value.length) {
|
||
return Message.warning('请选择数据')
|
||
}
|
||
return handleDelete(() => deleteMessage(selectedKeys.value), { showModal: true, content: `是否确定删除所选的${selectedKeys.value.length}条消息？`, multiple: true })
|
||
}
|
||
|
||
// 标记为已读
|
||
const onRead = async () => {
|
||
if (!selectedKeys.value.length) {
|
||
return Message.warning('请选择数据')
|
||
}
|
||
await readMessage(selectedKeys.value)
|
||
Message.success('操作成功')
|
||
search()
|
||
}
|
||
|
||
// 全部已读
|
||
const onReadAll = async () => {
|
||
Modal.warning({
|
||
title: '全部已读',
|
||
content: '确定要标记全部消息为已读吗？',
|
||
hideCancel: false,
|
||
maskClosable: false,
|
||
onOk: async () => {
|
||
await readAllMessage()
|
||
Message.success('操作成功')
|
||
search()
|
||
},
|
||
})
|
||
}
|
||
|
||
const messageDetailVisible = ref(false)
|
||
const currentMessage = ref<MessageResp>()
|
||
// 显示消息详情
|
||
const showMessageDetail = async (record: any) => {
|
||
messageDetailVisible.value = true
|
||
const { data } = await getUserMessage(record.id)
|
||
currentMessage.value = data
|
||
record.isRead = currentMessage.value?.isRead
|
||
onSuccess()
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.link-text {
|
||
margin-bottom: 0;
|
||
font-weight: 500;
|
||
|
||
:deep(.arco-typography) {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
:deep(.message-detail-modal) {
|
||
.arco-modal-header {
|
||
border-bottom: 1px solid var(--color-border-2);
|
||
padding: 20px 24px 16px;
|
||
|
||
.arco-modal-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: var(--color-text-1);
|
||
}
|
||
}
|
||
|
||
.arco-modal-body {
|
||
padding: 24px;
|
||
}
|
||
}
|
||
|
||
.message-detail-content {
|
||
.message-content {
|
||
margin-bottom: 24px;
|
||
line-height: 1.6;
|
||
color: var(--color-text-1);
|
||
font-size: 14px;
|
||
min-height: 80px;
|
||
word-wrap: break-word;
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
.message-footer {
|
||
.time-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
|
||
.time-icon {
|
||
font-size: 14px;
|
||
color: var(--color-text-3);
|
||
}
|
||
|
||
.time-label {
|
||
font-size: 13px;
|
||
color: var(--color-text-3);
|
||
}
|
||
|
||
.time-value {
|
||
font-size: 13px;
|
||
color: var(--color-text-2);
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.modal-footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 12px;
|
||
padding: 16px 24px;
|
||
border-top: 1px solid var(--color-border-2);
|
||
background-color: var(--color-bg-1);
|
||
|
||
.arco-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
|
||
.btn-icon {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|