auth/auth-web
auth
/
auth-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

optimize: ♻️ 消息发送显示和其它消息页面优化

This commit is contained in:
bunny 2024-11-04 01:11:28 +08:00
parent f8dbd402e8
commit 328fae2866
17 changed files with 141 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/v1/message/messageReceived.ts
View File

@ -7,8 +7,8 @@ export const fetchGetMessageReceivedList = (data: any) => {
};
/** 管理员操作用户消息---将用户消息标为已读 */
export const fetchMarkMessageReceivedAsRead = (data: any) => {
return http.request<BaseResult<object>>('put', 'messageReceived/markMessageReceivedAsRead', { data });
export const fetchUpdateMarkMessageReceived = (data: any) => {
return http.request<BaseResult<object>>('put', 'messageReceived/updateMarkMessageReceived', { data });
};
/** 管理员操作用户消息---管理删除用户消息 */

11
src/api/v1/message/messageSend.ts
View File

@ -8,25 +8,20 @@ export const fetchGetMessageList = (data: any) => {
/** 系统消息---根据消息id获取接收人信息 */
export const fetchGetReceivedUserinfoByMessageId = (data: any) => {
return http.request<BaseResult<any>>('get', `messageReceived/noManage/getReceivedUserinfoByMessageId`, { params: data });
return http.request<BaseResult<any>>('get', `message/noManage/getReceivedUserinfoByMessageId`, { params: data });
};
/** 系统消息---添加系统消息 */
export const fetchAddMessage = (data: any) => {
return http.request<BaseResult<object>>('post', 'messageReceived/addMessage', { data });
return http.request<BaseResult<object>>('post', 'message/addMessage', { data });
};
/** 系统消息---更新系统消息 */
export const fetchUpdateMessage = (data: any) => {
return http.request<BaseResult<object>>('put', 'messageReceived/updateMessage', { data });
return http.request<BaseResult<object>>('put', 'message/updateMessage', { data });
};
/** 系统消息---删除系统消息 */
export const fetchDeleteMessage = (data: any) => {
return http.request<BaseResult<object>>('delete', 'message/deleteMessage', { data });
};
/** 用户系统消息---根据消息id查询消息详情 */
export const fetchGetMessageDetailById = (data: any) => {
return http.request<BaseResult<any>>('get', `message/noManage/getMessageDetailById`, { params: data });
};

11
src/api/v1/message/messageUser.ts
View File

@ -3,15 +3,20 @@ import type { BaseResult, ResultTable } from '@/api/service/types';
/** 用户系统消息---用户获取系统消息列表 */
export const fetchGetUserMessageList = (data: any) => {
return http.request<BaseResult<ResultTable>>('get', `message/noManage/getUserMessageList/${data.currentPage}/${data.pageSize}`, { params: data });
return http.request<BaseResult<ResultTable>>('get', `messageReceived/noManage/getUserMessageList/${data.currentPage}/${data.pageSize}`, { params: data });
};
/** 用户系统消息---根据消息id查询消息详情 */
export const fetchGetMessageDetailById = (data: any) => {
return http.request<BaseResult<any>>('get', `message/noManage/getMessageDetailById`, { params: data });
};
/** 系统消息---用户将消息标为已读 */
export const fetchUpdateUserMarkAsRead = (data: any) => {
return http.request<BaseResult<object>>('put', 'messageReceived/noManage/updateUserMarkAsRead', { data });
return http.request<BaseResult<object>>('put', 'messageReceived/noManage/userMarkAsRead', { data });
};
/** 系统消息---用户删除系统消息 */
export const fetchDeleteUserMessageByIds = (data: any) => {
return http.request<BaseResult<object>>('delete', 'message/noManage/deleteUserMessageByIds', { data });
return http.request<BaseResult<object>>('delete', 'messageReceived/noManage/deleteUserMessageByIds', { data });
};

12
src/store/message/messageReceived.ts
View File

@ -1,5 +1,5 @@
import { defineStore } from 'pinia';
import { fetchDeleteMessageReceivedByIds, fetchGetMessageReceivedList, fetchMarkMessageReceivedAsRead } from '@/api/v1/message/messageReceived';
import { fetchDeleteMessageReceivedByIds, fetchGetMessageReceivedList, fetchUpdateMarkMessageReceived } from '@/api/v1/message/messageReceived';
import { pageSizes } from '@/enums/baseConstant';
import { storeMessage } from '@/utils/message';
import { storePagination } from '@/store/useStorePagination';
@ -16,16 +16,10 @@ export const useMessageReceivedStore = defineStore('messageReceivedStore', {
form: {
// 消息标题
title: undefined,
// 接收人用户ID
receivedUserIds: undefined,
// 发送人用户ID
sendUserId: undefined,
// 发送人昵称
sendNickname: undefined,
// 消息类型
messageType: undefined,
// 消息内容
content: undefined,
// 编辑器类型
editorType: undefined,
// 消息等级
@ -65,8 +59,8 @@ export const useMessageReceivedStore = defineStore('messageReceivedStore', {
},
/** 管理员操作用户消息---将用户消息标为已读 */
async markMessageReceivedAsRead(data: any) {
const result = await fetchMarkMessageReceivedAsRead(data);
async updateMarkMessageReceived(data: any) {
const result = await fetchUpdateMarkMessageReceived(data);
return storeMessage(result);
},

18
src/store/message/messageSend.ts
View File

@ -1,6 +1,6 @@
import { defineStore } from 'pinia';
import { pageSizes } from '@/enums/baseConstant';
import { fetchAddMessage, fetchDeleteMessage, fetchGetMessageList, fetchUpdateMessage } from '@/api/v1/message/messageSend';
import { fetchAddMessage, fetchDeleteMessage, fetchGetMessageList, fetchGetReceivedUserinfoByMessageId, fetchUpdateMessage } from '@/api/v1/message/messageSend';
import { storePagination } from '@/store/useStorePagination';
import { storeMessage } from '@/utils/message';
@ -9,20 +9,16 @@ export const useMessageSendStore = defineStore('messageSendStore', {
return {
// 系统消息列表
datalist: [],
// 消息接受用戶信息列表
receivedUserinfoList: [],
// 查询表单
form: {
// 消息标题
title: undefined,
// 接收人用户ID
receivedUserIds: undefined,
// 发送人用户ID
sendUserId: undefined,
// 发送人昵称
sendNickname: undefined,
// 消息类型
messageType: undefined,
// 消息内容
content: undefined,
// 编辑器类型
editorType: undefined,
// 消息等级
@ -61,6 +57,14 @@ export const useMessageSendStore = defineStore('messageSendStore', {
return pagination(result);
},
/** 根据消息id获取接收人信息 */
async getReceivedUserinfoByMessageId(data: any) {
const result = await fetchGetReceivedUserinfoByMessageId(data);
if (result.code === 200) {
this.receivedUserinfoList = result.data;
}
},
/** 添加系统消息 */
async addMessage(data: any) {
const result = await fetchAddMessage(data);

17
src/store/message/messageUser.ts
View File

@ -1,8 +1,9 @@
import { defineStore } from 'pinia';
import { fetchDeleteUserMessageByIds, fetchGetUserMessageList, fetchUpdateUserMarkAsRead } from '@/api/v1/message/messageUser';
import { fetchDeleteUserMessageByIds, fetchGetMessageDetailById, fetchGetUserMessageList, fetchUpdateUserMarkAsRead } from '@/api/v1/message/messageUser';
import { pageSizes } from '@/enums/baseConstant';
import { storePagination } from '@/store/useStorePagination';
import { storeMessage } from '@/utils/message';
import { decode } from 'js-base64';
/**
* 系统消息 Store
@ -12,6 +13,8 @@ export const useMessageUserStore = defineStore('messageUserStore', {
return {
// 系统消息列表
datalist: [],
// 消息详情
messageDetail: {},
// 查询表单
form: {
// 消息标题
@ -50,6 +53,18 @@ export const useMessageUserStore = defineStore('messageUserStore', {
return pagination(result);
},
/** 根据消息id获取消息详情 */
async getMessageDetailById(id: string) {
const result = await fetchGetMessageDetailById({ id });
if (result.code === 200) {
this.messageDetail = result.data;
// 解码消息内容
this.messageDetail.content = decode(this.messageDetail?.content);
}
},
/** 用户将消息标为已读 */
async updateUserMarkAsRead(data: any) {
const result = await fetchUpdateUserMarkAsRead(data);

30
src/views/message-management/message-detail/detail-message-id.vue
View File

@ -1,13 +1,12 @@
<script lang="ts" setup>
import { useRoute } from 'vue-router';
import { onMounted, ref } from 'vue';
import { onMounted } from 'vue';
import 'plus-pro-components/es/components/check-card-group/style/css';
import MarkdownPreview from '@/components/Editor/MarkdownPreview.vue';
import { fetchGetMessageDetailById } from '@/api/v1/message/messageReceived';
import { decode } from 'js-base64';
import { useMessageUserStore } from '@/store/message/messageUser';
const route = useRoute();
const messageDetail = ref<any>({});
const messageUserStore = useMessageUserStore();
/** 获取消息详情 */
const getMessageDetail = async () => {
@ -15,14 +14,7 @@ const getMessageDetail = async () => {
const messageId = route.params.messageId;
// 获取消息详情
const result = await fetchGetMessageDetailById({ id: messageId });
if (result.code !== 200) return;
// 将消息详情赋值
messageDetail.value = result.data;
// 解码消息内容
messageDetail.value.content = decode(messageDetail.value.content);
await messageUserStore.getMessageDetailById(messageId);
};
onMounted(() => {
@ -33,21 +25,21 @@ onMounted(() => {
<template>
<div class="flex flex-col">
<header class="flex items-center h-[80px]">
<el-avatar :src="messageDetail.cover" size="large" />
<el-avatar :src="messageUserStore.messageDetail?.cover" size="large" />
<div class="content ms-3">
<h3>{{ messageDetail.title }}</h3>
<h3>{{ messageUserStore.messageDetail?.title }}</h3>
<p>{{ messageDetail.summary }}</p>
<p>{{ messageUserStore.messageDetail?.summary }}</p>
</div>
</header>
<main>
<span>
<el-text>{{ messageDetail.updateTime }}</el-text>
<el-text type="primary">&nbsp;&nbsp; By：{{ messageDetail.sendNickname }}</el-text>
<el-text>{{ messageUserStore.messageDetail?.updateTime }}</el-text>
<el-text type="primary">&nbsp;&nbsp; By：{{ messageUserStore.messageDetail?.sendNickname }}</el-text>
</span>
<markdown-preview v-if="messageDetail.editorType === 'markdown'" id="message-detail-markdown" :text="messageDetail.content" />
<div v-else v-html="messageDetail.content" />
<markdown-preview v-if="messageUserStore.messageDetail?.editorType === 'markdown'" id="message-detail-markdown" :text="messageUserStore.messageDetail?.content" />
<div v-else v-html="messageUserStore.messageDetail?.content" />
</main>
</div>
</template>

8
src/views/message-management/message-detail/detail-type.vue
View File

@ -3,7 +3,7 @@ import { onMounted, ref } from 'vue';
import { columns } from '@/views/message-management/message-detail/utils/columns';
import PureTableBar from '@/components/TableBar/src/bar';
import PureTable from '@pureadmin/table';
import { markAsAllRead, markAsRead, onDelete, onSearch, selectids } from '@/views/message-management/message-detail/utils/hooks';
import { markAsAllRead, markAsRead, onDelete, onSearch, selectIds } from '@/views/message-management/message-detail/utils/hooks';
import Delete from '@iconify-icons/ep/delete';
import { $t } from '@/plugins/i18n';
import { Message } from '@element-plus/icons-vue';
@ -40,7 +40,7 @@ const onPageSizeChange = (value: number) => {
* @param rows
*/
const onSelectionChange = (rows: Array<any>) => {
selectids.value = rows.map((row: any) => row.messageReceivedId);
selectIds.value = rows.map((row: any) => row.messageReceivedId);
};
onMounted(() => {
@ -57,12 +57,12 @@ onMounted(() => {
<template #buttons>
<!-- 删除按钮 -->
<el-button :disabled="!(selectids.length > 0)" :icon="useRenderIcon(Delete)" type="danger" @click="onDelete">
<el-button :disabled="!(selectIds.length > 0)" :icon="useRenderIcon(Delete)" type="danger" @click="onDelete">
{{ $t('delete') }}
</el-button>
<!-- 标为已读 -->
<el-button :disabled="!(selectids.length > 0)" :icon="useRenderIcon('octicon:read-24')" type="primary" @click="markAsRead">
<el-button :disabled="!(selectIds.length > 0)" :icon="useRenderIcon('octicon:read-24')" type="primary" @click="markAsRead">
{{ $t('markAsRead') }}
</el-button>

6
src/views/message-management/message-detail/utils/hooks.ts
View File

@ -4,7 +4,7 @@ import { $t } from '@/plugins/i18n';
import { useMessageUserStore } from '@/store/message/messageUser';
// 删除ids
export const selectids = ref([]);
export const selectIds = ref([]);
const messageUserStore = useMessageUserStore();
/** 搜索初始化系统消息 */
@ -19,7 +19,7 @@ export const onSearch = async (messageType?: string) => {
/** 删除系统消息 */
export const onDelete = async () => {
const ids = selectids.value;
const ids = selectIds.value;
// 是否确认删除
const result = await messageBox({
@ -37,7 +37,7 @@ export const onDelete = async () => {
/** 标为已读 */
export const markAsRead = async () => {
const ids = selectids.value;
const ids = selectIds.value;
// 是否确认标为已读
const result = await messageBox({

40
src/views/message-management/message-received/index.vue
View File

@ -3,7 +3,7 @@ import { onMounted, ref } from 'vue';
import { columns } from '@/views/message-management/message-received/utils/columns';
import PureTableBar from '@/components/TableBar/src/bar';
import PureTable from '@pureadmin/table';
import { markMessageReceivedAsRead, onDeleteBatch, onSearch, selectIds } from '@/views/message-management/message-received/utils/hooks';
import { onDeleteBatch, onSearch, selectIds, updateMarkMessageReceived } from '@/views/message-management/message-received/utils/hooks';
import Delete from '@iconify-icons/ep/delete';
import Refresh from '@iconify-icons/ep/refresh';
import { selectUserinfo } from '@/components/Table/Userinfo/columns';
@ -13,10 +13,13 @@ import { FormInstance } from 'element-plus';
import { messageLevel } from '@/views/message-management/message-editing/utils/columns';
import { isReadStatus } from '@/enums/baseConstant';
import { useMessageReceivedStore } from '@/store/message/messageReceived';
import { useMessageTypeStore } from '@/store/message/messageType';
import { Message } from '@element-plus/icons-vue';
const tableRef = ref();
const formRef = ref();
const messageReceivedStore = useMessageReceivedStore();
const messageTypeStore = useMessageTypeStore();
/** 当前页改变时 */
const onCurrentPageChange = async (value: number) => {
@ -64,9 +67,23 @@ onMounted(() => {
<el-input v-model="messageReceivedStore.form.title" :placeholder="`${$t('input')}${$t('title')}`" class="!w-[180px]" clearable />
</el-form-item>
<!-- 发送人昵称 -->
<el-form-item :label="$t('sendNickname')" prop="sendNickname">
<el-input v-model="messageReceivedStore.form.sendNickname" :placeholder="`${$t('input')}${$t('sendNickname')}`" class="!w-[180px]" clearable />
</el-form-item>
<!-- 消息类型 -->
<el-form-item :label="$t('messageType')" prop="messageType">
<el-input v-model="messageReceivedStore.form.messageType" :placeholder="`${$t('input')}${$t('messageType')}`" class="!w-[180px]" clearable />
<el-select v-model="messageReceivedStore.form.messageType" :placeholder="`${$t('select')}${$t('messageType')}`" class="!w-[180px]" clearable filterable>
<el-option v-for="(item, index) in messageTypeStore.allMessageTypeList" :key="index" :label="item.messageName" :navigationBar="false" :value="item.messageType" />
</el-select>
</el-form-item>
<!-- 编辑器类型 -->
<el-form-item :label="$t('editorType')" prop="editorType">
<el-select v-model="messageReceivedStore.form.editorType" :placeholder="`${$t('select')}${$t('editorType')}`" class="!w-[180px]" clearable filterable>
<el-option v-for="(item, index) in ['rich', 'markdown']" :key="index" :label="item" :navigationBar="false" :value="item" />
</el-select>
</el-form-item>
<!-- 消息等级 -->
@ -97,10 +114,15 @@ onMounted(() => {
<PureTableBar :columns="columns" title="系统消息" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
<template #buttons>
<!-- 标为已读 -->
<el-button :disabled="!(selectIds.length > 0)" :icon="useRenderIcon('octicon:read-24')" type="primary" @click="markMessageReceivedAsRead">
<el-button :disabled="!(selectIds.length > 0)" :icon="useRenderIcon('octicon:read-24')" type="primary" @click="updateMarkMessageReceived(true)">
{{ $t('markAsRead') }}
</el-button>
<!-- 标为未读 -->
<el-button :disabled="!(selectIds.length > 0)" :icon="Message" type="primary" @click="updateMarkMessageReceived(false)">
{{ $t('markAsUnread') }}
</el-button>
<!-- 批量删除按钮 -->
<el-button :disabled="!(selectIds.length > 0)" :icon="useRenderIcon(Delete)" type="danger" @click="onDeleteBatch">
{{ $t('delete_batches') }}
@ -128,6 +150,18 @@ onMounted(() => {
@selection-change="onSelectionChange"
@page-current-change="onCurrentPageChange"
>
<template #sendNickname="{ row }">
<el-button link type="primary" @click="selectUserinfo(row.sendUserId)">
{{ row.sendNickname }}
</el-button>
</template>
<template #receivedUserNickname="{ row }">
<el-button link type="primary" @click="selectUserinfo(row.receivedUserId)">
{{ row.receivedUserNickname }}
</el-button>
</template>
<template #cover="{ row }">
<el-image :initial-index="0" :preview-src-list="[row.cover]" :src="row.cover" class="w-[50px] h-[50px]" fit="cover" loading="lazy" preview-teleported />
</template>

4
src/views/message-management/message-received/utils/columns.tsx
View File

@ -10,9 +10,9 @@ export const columns: TableColumnList = [
// 消息简介
{ label: $t('summary'), prop: 'summary' },
// 发送人昵称
{ label: $t('sendNickname'), prop: 'sendNickname' },
{ label: $t('sendNickname'), prop: 'sendNickname', slot: 'sendNickname' },
// 接受人昵称
{ label: $t('receivedUserNickname'), prop: 'receivedUserNickname' },
{ label: $t('receivedUserNickname'), prop: 'receivedUserNickname', slot: 'receivedUserNickname' },
// 消息类型
{ label: $t('messageType'), prop: 'messageType', slot: 'messageType' },
// 编辑器类型

6
src/views/message-management/message-received/utils/hooks.ts
View File

@ -17,17 +17,17 @@ export async function onSearch() {
}
/** 管理员操作用户消息---将用户消息标为已读 */
export const markMessageReceivedAsRead = async () => {
export const updateMarkMessageReceived = async (status: boolean) => {
// 是否确认标为已读
let result = await messageBox({
title: $t('markAsRead'),
title: $t('confirm_update_status'),
showMessage: false,
confirmMessage: undefined,
cancelMessage: $t('cancel'),
});
if (!result) return;
result = await messageReceivedStore.markMessageReceivedAsRead(selectIds.value);
result = await messageReceivedStore.updateMarkMessageReceived({ ids: selectIds.value, status });
if (!result) return;
await onSearch();
};

42
src/views/message-management/message-send/index.vue
View File

@ -14,9 +14,11 @@ import { FormInstance } from 'element-plus';
import { messageLevel } from '@/views/message-management/message-editing/utils/columns';
import { isReadStatus } from '@/enums/baseConstant';
import { useMessageSendStore } from '@/store/message/messageSend';
import { useMessageTypeStore } from '@/store/message/messageType';
const tableRef = ref();
const formRef = ref();
const messageTypeStore = useMessageTypeStore();
const messageSendStore = useMessageSendStore();
/** 当前页改变时 */
@ -59,38 +61,52 @@ onMounted(() => {
<template>
<div class="main">
<el-form ref="formRef" :inline="true" :model="messageStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
<el-form ref="formRef" :inline="true" :model="messageSendStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
<!-- 消息标题 -->
<el-form-item :label="$t('title')" prop="title">
<el-input v-model="messageStore.form.title" :placeholder="`${$t('input')}${$t('title')}`" class="!w-[180px]" clearable />
<el-input v-model="messageSendStore.form.title" :placeholder="`${$t('input')}${$t('title')}`" class="!w-[180px]" clearable />
</el-form-item>
<!-- 发送人昵称 -->
<el-form-item :label="$t('sendNickname')" prop="sendNickname">
<el-input v-model="messageSendStore.form.sendNickname" :placeholder="`${$t('input')}${$t('sendNickname')}`" class="!w-[180px]" clearable />
</el-form-item>
<!-- 消息类型 -->
<el-form-item :label="$t('messageType')" prop="messageType">
<el-input v-model="messageStore.form.messageType" :placeholder="`${$t('input')}${$t('messageType')}`" class="!w-[180px]" clearable />
<el-select v-model="messageSendStore.form.messageType" :placeholder="`${$t('select')}${$t('messageType')}`" class="!w-[180px]" clearable filterable>
<el-option v-for="(item, index) in messageTypeStore.allMessageTypeList" :key="index" :label="item.messageName" :navigationBar="false" :value="item.messageType" />
</el-select>
</el-form-item>
<!-- 编辑器类型 -->
<el-form-item :label="$t('editorType')" prop="editorType">
<el-select v-model="messageSendStore.form.editorType" :placeholder="`${$t('select')}${$t('editorType')}`" class="!w-[180px]" clearable filterable>
<el-option v-for="(item, index) in ['rich', 'markdown']" :key="index" :label="item" :navigationBar="false" :value="item" />
</el-select>
</el-form-item>
<!-- 消息等级 -->
<el-form-item :label="$t('level')" prop="level">
<el-select v-model="messageStore.form.level" :placeholder="$t('level')" class="!w-[180px]" clearable filterable remote remote-show-suffix>
<el-select v-model="messageSendStore.form.level" :placeholder="$t('level')" class="!w-[180px]" clearable filterable remote remote-show-suffix>
<el-option v-for="item in messageLevel" :key="item" :label="$t(item)" :value="item" />
</el-select>
</el-form-item>
<!-- 消息等级简介 -->
<el-form-item :label="$t('extra')" prop="extra">
<el-input v-model="messageStore.form.extra" class="!w-[180px]" maxlength="20" minlength="10" show-word-limit type="text" />
<el-input v-model="messageSendStore.form.extra" class="!w-[180px]" maxlength="20" minlength="10" show-word-limit type="text" />
</el-form-item>
<!-- 0:未读 1:已读 -->
<el-form-item :label="$t('status')" prop="status">
<el-select v-model="messageStore.form.status" :placeholder="$t('status')" class="!w-[180px]" clearable filterable remote remote-show-suffix>
<el-select v-model="messageSendStore.form.status" :placeholder="$t('status')" class="!w-[180px]" clearable filterable remote remote-show-suffix>
<el-option v-for="(item, index) in isReadStatus" :key="index" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-button :icon="useRenderIcon('ri:search-line')" :loading="messageStore.loading" type="primary" @click="onSearch"> {{ $t('search') }} </el-button>
<el-button :icon="useRenderIcon('ri:search-line')" :loading="messageSendStore.loading" type="primary" @click="onSearch"> {{ $t('search') }} </el-button>
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)"> {{ $t('buttons.reset') }}</el-button>
</el-form-item>
</el-form>
@ -108,10 +124,10 @@ onMounted(() => {
ref="tableRef"
:adaptiveConfig="{ offsetBottom: 96 }"
:columns="dynamicColumns"
:data="messageStore.datalist"
:data="messageSendStore.datalist"
:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
:loading="messageStore.loading"
:pagination="messageStore.pagination"
:loading="messageSendStore.loading"
:pagination="messageSendStore.pagination"
:size="size"
adaptive
align-whole="center"
@ -124,6 +140,12 @@ onMounted(() => {
@selection-change="onSelectionChange"
@page-current-change="onCurrentPageChange"
>
<template #sendNickname="{ row }">
<el-button link type="primary" @click="selectUserinfo(row.sendUserId)">
{{ row.sendNickname }}
</el-button>
</template>
<template #cover="{ row }">
<el-image :initial-index="0" :preview-src-list="[row.cover]" :src="row.cover" class="w-[50px] h-[50px]" fit="cover" loading="lazy" preview-teleported />
</template>

5
src/views/message-management/message-send/message-dialog.vue
View File

@ -80,11 +80,6 @@ defineExpose({ formRef });
</el-radio-group>
</el-form-item>
<!-- 是否已读 -->
<el-form-item :label="$t('isRead')" prop="status">
<el-switch v-model="updateMessage.status" :active-text="$t('readAlready')" :active-value="true" :inactive-text="$t('unread')" :inactive-value="false" :style="switchStyle" inline-prompt />
</el-form-item>
<!-- 封面内容 -->
<el-form-item :label="$t('cover')" prop="cover">
<el-upload :auto-upload="true" :before-upload="beforeUpload" :http-request="onUpload" :show-file-list="false" accept="image/*" drag>

4
src/views/message-management/message-send/rich-editor.vue
View File

@ -25,10 +25,6 @@ editorConfig.MENU_CONF['uploadImage'] = {
customInsert(res: any, insertFn) {
// res.data.url是后端返回的图片地址，根据实际业务改写
if (res.data.url) {
// const form = new FormData();
// form.append('file', file);
// form.append('type', 'message');
// await fetchUploadFile(form)
setTimeout(() => {
// insertFn插入图片进编辑器
insertFn(res.data.url);

19
src/views/message-management/message-send/utils/columns.tsx
View File

@ -11,7 +11,7 @@ export const columns: TableColumnList = [
// 消息简介
{ label: $t('summary'), prop: 'summary' },
// 发送人昵称
{ label: $t('sendNickname'), prop: 'sendNickname' },
{ label: $t('sendNickname'), prop: 'sendNickname', slot: 'sendNickname' },
// 接受人昵称
{ label: $t('receivedUserNickname'), prop: 'receivedUserNickname' },
// 消息类型
@ -35,23 +35,6 @@ export const columns: TableColumnList = [
},
// 消息等级详情
{ label: $t('extra'), prop: 'extra', slot: 'extra' },
// 0:未读 1:已读
{
label: $t('status'),
prop: 'status',
formatter({ status }) {
return status ? (
<ElTag type={'info'} effect={'plain'}>
{$t('readAlready')}
</ElTag>
) : (
<ElTag type={'danger'} effect={'plain'}>
{$t('unread')}
</ElTag>
);
},
width: 80,
},
{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 },
{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 130 },

8
src/views/message-management/message-send/utils/hooks.ts
View File

@ -24,6 +24,8 @@ export const updateMessage = reactive({
title: undefined,
// 封面
cover: undefined,
// 消息接受人ids
receivedUserIds: undefined,
// 发送人用户ID
sendUserId: undefined,
// 发送人昵称
@ -74,13 +76,13 @@ export async function onUpdate(row: any) {
updateMessage.content = decode(updateMessage.content);
// 获取当前消息内容和接收者信息
const result = messageSendStore.updateMessage({ messageId: row.id });
userDataList.value = result.data.map((item: any) => ({
await messageSendStore.getReceivedUserinfoByMessageId({ messageId: row.id });
userDataList.value = messageSendStore.receivedUserinfoList.map((item: any) => ({
id: item.receivedUserId,
nickname: item.nickname,
username: item.username,
}));
updateMessage.receivedUserIds = result.data.map((item: any) => item.receivedUserId);
updateMessage.receivedUserIds = messageSendStore.receivedUserinfoList.map((item: any) => item.receivedUserId);
// 设置封面图片
coverUrl.value = row.cover;