vertoryao/iot-gateway_fontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(消息模块): 新增消息的展示及增删改查

Browse Source 
1.新增消息的头部展示
2.新增消息管理的增删改查功能
3.新增用户消息的查看
This commit is contained in:
Kven 2024-12-26 10:36:24 +08:00
parent 4605b955b0
commit 6f08eda851
14 changed files with 2065 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/api/message-mgmt.ts Normal file
View File

@ -0,0 +1,52 @@
import axios from 'axios';
export interface MessageRecord {
userId?: string;
title?: string;
type?: string;
name?: string;
system?: boolean;
isRead?: boolean;
createAtBegin?: string;
createAtEnd?: string;
current: number;
size: number;
}
export interface MessageCreateRecord {
userId: string[];
type: string;
email: string;
sms: string;
html: string;
title: string;
content: string;
attachmentIds?: string[];
}
// 查看详情
export function queryMessage(userId: number, messageId: number) {
return axios.get(`/api/rest/message/${userId}/${messageId}`);
}
// 分页查询
export function queryMessageList(data: MessageRecord) {
return axios({
url: '/api/rest/message',
method: 'get',
params: data,
});
}
// 创建消息
export function createMessage(data: MessageCreateRecord) {
return axios.post('/api/rest/message', data);
}
// 获取消息推送方式
export function getMessageTypes() {
return axios.get('/api/rest/message/setting');
}
// 设置消息推送方式
export function setMessageTypes(data: string[]) {
return axios.patch('/api/rest/message/setting', data);
}

82
src/api/messages.ts Normal file
View File

@ -0,0 +1,82 @@
import axios from 'axios';
export interface Attachment {
id: string;
fileName: string;
mimeType: string;
uploadTime: string;
url: string;
}
export interface MessagesList {
id?: number;
userId?: number | null;
user?: string | null;
messageId?: number | null;
message?: string | null;
isRead?: boolean | null;
readTime?: string | null;
username?: string | null;
name?: string | null;
avatar?: string | null;
address?: string | null;
type?: string;
system?: boolean;
email?: boolean;
sms?: boolean;
html?: boolean;
title?: string;
content?: string;
remark?: string;
createTime?: string;
createBy?: string;
updateTime?: string;
updateBy?: string;
attachments?: Attachment[];
}
export interface MessagesRecord {
userId?: string;
title?: string;
type?: string;
name?: string;
system?: number[];
isRead?: boolean;
createAtBegin?: string;
createAtEnd?: string;
current: number;
size: number;
}
export interface MessageStatus {
ids: string[];
}
export type MessageListType = MessagesList[];
// 查看详情
export function queryMessage(id: number) {
return axios.get(`/api/rest/message/self/${id}`);
}
// 分页查询
export function queryMessagesList(data: MessagesRecord) {
return axios({
url: '/api/rest/message/self',
method: 'get',
params: data,
});
}
// 未读消息数量
export function queryMessagesCount() {
return axios.get('/api/rest/message/count-unread');
}
// 已读消息数量
export function queryMessagesReadCount() {
return axios.get('/api/rest/message/acknowledge');
}
// 批量设置消息已读
export function setMessageStatus(data: MessageStatus) {
return axios.patch<MessageListType>('/api/rest/message/read', data);
}

601
src/components/dynamic-form/index.vue Normal file
View File

@ -0,0 +1,601 @@
<template>
<a-form ref="CreateRef" :model="formData" :style="{ width: '650px' }">
<!-- 用户 -->
<a-form-item
v-if="userId"
field="userId"
:label="userId.label"
:validate-trigger="['change', 'input']"
:rules="[
{ message: '请输入用戶' },
]"
>
<a-input
v-if="userId.component==='input'"
v-model="formData.userIds"
:type="userId.type"
placeholder='请选择用戶'
:value=formData.userIds
@click="queryDeptTree"
/>
</a-form-item>
<!-- 用户2 -->
<a-form-item
v-if="username"
field="username"
:label="username.label"
:validate-trigger="['change', 'input']"
:rules="[
{ required: true, message:'用户名不能为空' },
{
match: /^[a-zA-Z0-9\u4e00-\u9fa5]{1,20}$/,
message: '请输入正确格式的用户名',
},
]"
>
<a-input
v-if="username.component==='input'"
v-model="formData.username"
placeholder='请输入用户名'
/>
<div v-else>{{ formData.username }}</div>
</a-form-item>
<!-- 邮箱 -->
<a-form-item
v-if="email"
field="email"
:label=email.label
:rules="[
{
required: true,
type: 'email',
message: '请输入正确格式的邮箱'
},
]"
:validate-trigger="['change', 'input']"
>
<a-input
v-if="email.component==='input'"
:type="email.type"
v-model="formData.email"
placeholder="请输入邮箱"
/>
</a-form-item>
<!-- 名称 -->
<a-form-item
v-if="name"
field="name"
:label="name.label"
:validate-trigger="['change', 'input']"
:rules="[{ required: true }]"
>
<a-input
v-if="name.component==='input'"
v-model="formData.name"
:placeholder="`请输入${name.label}`"
/>
</a-form-item>
<!-- 标题 -->
<a-form-item
v-if="title"
field="title"
:label="title.label"
:validate-trigger="['change', 'input']"
:rules="[
{ required: true },
]"
>
<a-input
v-if="title.component==='input'"
:type="title.type"
placeholder="请输入标题"
/>
</a-form-item>
<!-- 备注 -->
<a-form-item
v-if="remark"
field="remark"
:label="remark.label"
:validate-trigger="['change', 'input']"
>
<!-- v-if="isCreate"-->
<a-input
v-if="remark.component==='input'"
:type="remark.type"
placeholder="请输入备注"
/>
<a-textarea
v-if="remark.component==='textarea'"
v-model="formData.remark"
:show-word-limit="true"
placeholder="请输入备注"
style="height: 100px"
/>
</a-form-item>
<!-- 手机号 -->
<a-form-item
v-if="phone"
field="phone"
:label="phone.label"
:rules="[
{ required: true },
{ match: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' },
]"
:validate-trigger="['change', 'input']"
>
<a-input
v-if="phone.component==='input'"
v-model="formData.phone"
:type="phone.type"
placeholder="请输入手机号"
/>
</a-form-item>
<!-- 密码 -->
<a-form-item
v-if="password"
field="password"
:label="password.label"
:validate-trigger="['change', 'input']"
:rules="[{ required: true, message: '密码不能为空' }]"
>
<a-input
v-if="password.component==='input'"
v-model="formData.password"
:type="password.type"
placeholder="请输入密码"
/>
</a-form-item>
<!-- 昵称 -->
<a-form-item v-if="nickName" field="nickName" :label="nickName.label">
<a-input
v-if="nickName.component==='input'"
v-model="formData.nickName"
:type="nickName.type"
:placeholder="$t('user.info.nickName.placeholder')"
/>
</a-form-item>
<!-- 地址 -->
<a-form-item v-if="address" field="address" :label="nickName.label">
<a-input
v-if="address.component==='input'"
v-model="formData.address"
:type="address.type"
:placeholder="$t('user.info.address.placeholder')"
/>
</a-form-item>
<!-- 部门 -->
<a-form-item
v-if="deptId"
field="deptId"
:label="deptId.label"
:rules="[{ required: true, message: '部门不能为空' }]"
:validate-trigger="['change']"
>
<a-tree-select
v-if="deptId.component==='treeSelect'"
v-model="formData.deptId"
:field-names="{
key: 'id',
title: 'name',
children: 'children',
}"
:data="deptOptions"
allow-clear
placeholder="请选择部门"
/>
</a-form-item>
<!-- 角色 -->
<a-form-item
v-if="roleId"
field="roleId"
:label="roleId.label"
:rules="[{ required: true, message: '角色不能为空' }]"
:validate-trigger="['change']"
>
<a-select
v-if="roleId.component==='select'"
v-model="formData.roleId"
:options="roleOptions"
:field-names="{
value: 'id',
label: 'name',
}"
placeholder="请选择角色"
/>
</a-form-item>
<div style="display: flex;margin-left: 75px">
<!-- 短信 -->
<a-form-item
v-if="sms"
field="sms"
:label="sms.label"
:validate-trigger="['change', 'input']"
>
<a-switch
v-if="sms.component==='switch'"
v-model="formData.sms"
:checked-value="true"
:unchecked-value="false"
/>
</a-form-item>
<!-- 邮件 -->
<a-form-item
v-if="email"
field="email"
:label="email.label"
:validate-trigger="['change', 'input']"
>
<a-switch
v-if="email.component==='switch'"
v-model="formData.email"
:checked-value="true"
:unchecked-value="false"
/>
</a-form-item>
<!-- 置顶 -->
<a-form-item
v-if="top"
field="top"
:label="top.label"
:validate-trigger="['change', 'input']"
>
<a-switch
v-if="top.component==='switch'"
v-model="formData.top"
:checked-value="true"
:unchecked-value="false"
/>
</a-form-item>
</div>
<!-- 附件 -->
<a-form-item
v-if="attachmentIds"
label='附件'
>
<!-- v-if="isCreate"-->
<a-upload
:custom-request="customRequest"
@before-remove="beforeRemove"
/>
</a-form-item>
<!-- 内容 -->
<a-form-item v-if="richEditor" field="content" label='内容' :rules="[{ required: true}]">
<div style="border: 1px solid #ccc;min-width: 700px">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editorRef"
:default-config="toolbarConfig"
:mode="mode"
:class="{'fullscreen-toolbar': isFullScreen}"
/>
<Editor
v-model="formData.content"
style="overflow-y: hidden;height: 200px;"
:default-config="editorConfig"
:mode="mode"
:class="{'fullscreen-editor': isFullScreen}"
@on-created="handleCreated"
/>
</div>
<!-- <a-textarea v-model="formData.content" placeholder="请输入公告内容" style="height: 100px" />-->
</a-form-item>
<!-- 产品id -->
<a-form-item
v-if="formSystem.productId"
field="productId"
:label="formSystem.productId.label"
:rules="[{ required: true, message: '产品id不能为空' }]"
:validate-trigger="['change']"
>
<a-input
v-if="formSystem.productId.component==='input'"
v-model="formData.productId"
placeholder='请输入产品id'
/>
</a-form-item>
<!-- 设备名称 -->
<a-form-item
v-if="formSystem.name"
field="name"
:label="formSystem.name.label"
:rules="[{ required: true, message: '设备名称不能为空' }]"
:validate-trigger="['change']"
>
<a-input
v-if="formSystem.name.component==='input'"
v-model="formData.name"
placeholder='请输入设备名称'
/>
</a-form-item>
<!-- 硬件版本 -->
<a-form-item
v-if="formSystem.hardwareVersion"
field="hardwareVersion"
:label="formSystem.hardwareVersion.label"
:rules="[{ required: true, message: '硬件版本不能为空' }]"
:validate-trigger="['change']"
>
<a-input
v-if="formSystem.hardwareVersion.component==='input'"
v-model="formData.hardwareVersion"
placeholder='请输入硬件版本'
/>
</a-form-item>
<!-- 固件版本 -->
<a-form-item
v-if="formSystem.firmwareVersion"
field="firmwareVersion"
:label="formSystem.firmwareVersion.label"
:rules="[{ required: true, message: '固件版本不能为空' }]"
:validate-trigger="['change']"
>
<a-input
v-if="formSystem.firmwareVersion.component==='input'"
v-model="formData.firmwareVersion"
placeholder='请输入固件版本'
/>
</a-form-item>
<!-- 扩展属性 -->
<a-form-item
v-if="formSystem.extendParams"
field="extendParams"
:label="formSystem.extendParams.label"
:rules="[{ required: true, message: '扩展属性不能为空' }]"
:validate-trigger="['change']"
>
<a-input
v-if="formSystem.extendParams.component==='input'"
v-model="formData.extendParams"
placeholder='请输入扩展属性'
/>
</a-form-item>
<!-- 设备物模型属性 -->
<a-form-item
v-if="formSystem.properties"
field="properties"
:label="formSystem.properties.label"
:rules="[{ required: true, message: '设备物模型属性不能为空' }]"
:validate-trigger="['change']"
>
<a-input
v-if="formSystem.properties.component==='input'"
v-model="formData.properties"
placeholder='请输入设备物模型属性'
/>
</a-form-item>
</a-form>
</template>
<script lang="ts" setup>
import useVisible from '@/hooks/visible';
import { computed, defineEmits, PropType, ref, shallowRef, onBeforeUnmount, reactive } from 'vue';
import { CreateRecord } from '@/api/user';
import { FormInstance } from '@arco-design/web-vue/es/form';
import { Message } from '@arco-design/web-vue';
import { useMessageStore } from '@/store';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { IEditorConfig } from '@wangeditor/editor'
import '@wangeditor/editor/dist/css/style.css'
const props = defineProps({
prem: {
type: Object as PropType<CreateRecord>,
},
formData: {
type: Object as PropType<CreateRecord>,
},
isCreate: Boolean,
});
// 部门树模态框状态
const deptVisible=ref(false);
const emit = defineEmits(['refresh']);
const { visible, setVisible } = useVisible(false);
const checkKeys = ref<number[]>([]);
const CreateRef = ref<FormInstance>();
const formData = ref<any>({
...props.formData,
});
const messageStore = useMessageStore();
const editorRef = shallowRef()
const isFullScreen = ref(false);
const mode = 'default';
const selectedIds= ref<string[]>([]);
const toolbarConfig = { excludeKeys: ['uploadVideo', 'insertImage','insertVideo']}
// const handleCreated = (editor: any) => {
// editorRef.value = editor; // 记录 editor 实例，重要！
// // 监听全屏事件
// editor.on('fullScreen', () => {
// })
// }
const columns = computed<any[]>(()=>[
{
title: '操作',
dataIndex: 'key',
slotName: 'key',
},
{
title: '用户',
dataIndex: 'title',
},
])
const formSystem = ref(props.prem);
const { userId, title, remark, sms, email, richEditor, attachmentIds ,name
,username, phone, password, nickName, address, deptId, roleId } = formSystem.value;
// 部门树数据
const deptTreeData = reactive([
{
key: '1',
title: '总部门',
children: [
{
key: '2',
title: '部门1',
members: [
{ key: '101', title: '成员1' },
{ key: '102', title: '成员2' }
]
},
{
key: '3',
title: '部门2',
members: [
{ key: '201', title: '成员3' },
{ key: '202', title: '成员4' }
]
},
{
key: '4',
title: '部门3',
members: [
{ key: '203', title: '成员5' },
{ key: '204', title: '成员6' }
]
}
]
}
]);
const selectedDepartmentMembers: any = ref([]);
const renderData = ref<any[]>([]);
// 部门树查询
const queryDeptTree= async ()=>{
deptVisible.value = true;
}
// 广度优先遍历树，获取选中的成员
const getSelectedMembers = (treeData: any[], selectedKeys: string[]) => {
const queue = [...treeData];
const selectedMembers: any[] = [];
while (queue.length > 0) {
const node = queue.shift()!;
if (selectedKeys.includes(node.key)) {
if (node.members) {
selectedMembers.push(...node.members);
}
}
if (node.children) {
queue.push(...node.children);
}
}
return selectedMembers;
}
// 部门树被点击
const handleClickTree = (key: string[]) => {
// 假设 '1' 是总部门的键
if (key[0] === '1' || key.length === 0) {
// 广度优先遍历树，获取所有成员
const allMembers: any[] = [];
const queue = [...deptTreeData];
while (queue.length > 0) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const node = queue.shift()!;
if (node.members) {
allMembers.push(...node.members);
}
if (node.children) {
queue.push(...node.children);
}
}
selectedDepartmentMembers.value = allMembers;
renderData.value = selectedDepartmentMembers.value;
return;
}
const Members = getSelectedMembers(deptTreeData, key);
selectedDepartmentMembers.value = Members;
}
// 部门树被选中
const handleCheckTree = (key: string[]) => {
if (key[0] === '1' ) { // 假设 '1' 是总部门的键
const allKeys: string[] = [];
const traverseTree = (node: any) => {
if (node.members) {
node.members.forEach((member: any) => {
allKeys.push(member.key);
});
}
if (node.children) {
node.children.forEach((child: any) => {
traverseTree(child);
});
}
};
deptTreeData.forEach((node: any) => {
traverseTree(node);
});
selectedIds.value = allKeys;
} else {
const selectedKeys = getSelectedMembers(deptTreeData, key);
selectedIds.value = selectedKeys.map(item => item.key);
}
};
// 组件被点击
const handleClick = () => {
setVisible(true);
};
// 编辑器配置
const editorConfig: Partial<IEditorConfig> = { placeholder: '请输入内容...',MENU_CONF:{
// 隐藏菜单
hide: ['code', 'table', 'emoticon', 'uploadImage', 'video', 'todo', 'specialChar'],
// 配置上传图片
uploadImage: {
base64LimitSize: 1024 * 1024,
// server: '/api/rest/bulletin/1/add',
}
}
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
const editor = editorRef.value
if (editor == null) return
editor.destroy()
})
// 关闭
const handleCancel = async () => {
checkKeys.value = [];
setVisible(false);
};
// 部门树模态框提交
const deptTreeSubmit = () => {
deptVisible.value = false;
formData.value.userIds = selectedIds.value;
console.log(formData.value.userIds);
};
// 部门树模态框
const deptTreeCancel = () => {
deptVisible.value = false;
};
</script>
<style scoped>
.fullscreen-toolbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px; /* 根据需要调整高度 */
z-index: 999;
background-color: white;
}
.fullscreen-editor {
position: fixed;
top: 50px; /* 根据 toolbar 的高度调整 */
left: 0;
width: 100%;
height: calc(100% - 50px); /* 减去 toolbar 的高度 */
z-index: 999;
background-color: white;
}
.editor-button{
position: static
}
</style>

29
src/components/menu/index.vue
View File

@ -39,7 +39,7 @@
}
// Eliminate external link side effects
const { hideInMenu, activeMenu } = item.meta as RouteMeta;
if (route.name === item.name && !hideInMenu && !activeMenu) {
if (route.name === item.name &&!hideInMenu &&!activeMenu) {
selectedKey.value = [item.name as string];
return;
}
@ -48,6 +48,7 @@
name: item.name,
});
};
const findMenuOpenKeys = (target: string) => {
const result: string[] = [];
let isFind = false;
@ -69,6 +70,7 @@
});
return result;
};
listenerRouteChange((newRoute) => {
const { requiresAuth, activeMenu, hideInMenu } = newRoute.meta;
if (requiresAuth && (!hideInMenu || activeMenu)) {
@ -76,7 +78,7 @@
(activeMenu || newRoute.name) as string
);
const keySet = new Set([...menuOpenKeys, ...openKeys.value]);
const keySet = new Set([...menuOpenKeys,...openKeys.value]);
openKeys.value = [...keySet];
selectedKey.value = [
@ -84,6 +86,7 @@
];
}
}, true);
const setCollapse = (val: boolean) => {
if (appStore.device === 'desktop')
appStore.updateSettings({ menuCollapse: val });
@ -106,7 +109,7 @@
title: () => h(compile(t(element?.meta?.locale || ''))),
}}
>
{travel(element?.children)}
{travel(element?.children, [])}
</a-sub-menu>
) : (
<a-menu-item
@ -114,14 +117,18 @@
v-slots={{ icon }}
onClick={() => goto(element)}
>
{t(element?.meta?.locale || '')}
{element?.meta?.title}
</a-menu-item>
);
const meta = element.meta as RouteMeta;
if (meta.showInMenu!== false) {
nodes.push(node as never);
}
});
}
return nodes;
}
return travel(menuTree.value);
};
@ -144,17 +151,3 @@
},
});
</script>
<style lang="less" scoped>
:deep(.arco-menu-inner) {
.arco-menu-inline-header {
display: flex;
align-items: center;
}
.arco-icon {
&:not(.arco-icon-down) {
font-size: 18px;
}
}
}
</style>

67
src/components/message-box/index.vue
View File

@ -15,8 +15,11 @@
/>
</a-tab-pane>
<template #extra>
<a-button type="text" @click="emptyList">
{{ $t('messageBox.tab.button') }}
<a-button type="text" @click="handleItemClick()">
全部已读
</a-button>
<a-button type="text" @click="$router.push({ name: 'Messages' })">
查看更多
</a-button>
</template>
</a-tabs>
@ -25,14 +28,10 @@
<script lang="ts" setup>
import { ref, reactive, toRefs, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import {
queryMessageList,
setMessageStatus,
MessageRecord,
MessageListType,
} from '@/api/message';
import { MessagesRecord,MessageListType,MessagesList } from '@/api/messages';
import { useMessagesStore } from '@/store'
import useLoading from '@/hooks/loading';
// import { setMessageStatus } from '@/api/message';
import List from './list.vue';
interface TabItem {
@ -40,12 +39,12 @@
title: string;
avatar?: string;
}
const useMessageStore = useMessagesStore();
const { loading, setLoading } = useLoading(true);
const messageType = ref('message');
const { t } = useI18n();
const messageType = ref('other');
const messageData = reactive<{
renderList: MessageRecord[];
messageList: MessageRecord[];
renderList: MessagesList[];
messageList: MessagesList[];
}>({
renderList: [],
messageList: [],
@ -53,58 +52,64 @@
toRefs(messageData);
const tabList: TabItem[] = [
{
key: 'message',
title: t('messageBox.tab.title.message'),
key: 'other',
title: '消息',
},
{
key: 'notifications',
title: t('messageBox.tab.title.notice'),
},
{
key: 'todo',
title: t('messageBox.tab.title.todo'),
key: 'resetThePassword',
title: '通知',
},
];
// 获取消息列表
async function fetchSourceData() {
setLoading(true);
try {
const { data } = await queryMessageList();
messageData.messageList = data;
const params: MessagesRecord = { size: 7, current: 1, isRead: false };
const { data } = await useMessageStore.queryMessagesList(params);
if (data) {
messageData.messageList = data.records;
}
} catch (err) {
// you can report use errorHandler or other
} finally {
setLoading(false);
}
}
// 修改消息状态
async function readMessage(data: MessageListType) {
const ids = data.map((item) => item.id);
await setMessageStatus({ ids });
fetchSourceData();
const ids = data.map((item) => item.messageId);
await useMessageStore.setMessageStatus(ids);
// fetchSourceData();
}
// 格式化消息列表
const renderList = computed(() => {
return messageData.messageList.filter(
(item) => messageType.value === item.type
);
});
// 未读消息长度
const unreadCount = computed(() => {
return renderList.value.filter((item) => !item.status).length;
return renderList.value.filter((item) => !item.isRead).length;
});
// 获取未读消息列表
const getUnreadList = (type: string) => {
const list = messageData.messageList.filter(
(item) => item.type === type && !item.status
(item) => item.type === type
);
return list;
};
// 格式化未读消息长度
const formatUnreadLength = (type: string) => {
const list = getUnreadList(type);
return list.length ? `(${list.length})` : ``;
};
// 修改已读状态
const handleItemClick = (items: MessageListType) => {
if (renderList.value.length) readMessage([...items]);
};
const emptyList = () => {
messageData.messageList = [];
};
fetchSourceData();
</script>

44
src/components/message-box/list.vue
View File

@ -25,9 +25,9 @@
<template #title>
<a-space :size="4">
<span>{{ item.title }}</span>
<a-typography-text type="secondary">
{{ item.subTitle }}
</a-typography-text>
<!-- <a-typography-text type="secondary">-->
<!-- {{ item.subTitle }}-->
<!-- </a-typography-text>-->
</a-space>
</template>
<template #description>
@ -39,30 +39,29 @@
>{{ item.content }}</a-typography-paragraph
>
<a-typography-text
v-if="item.type === 'message'"
class="time-text"
>
{{ item.time }}
{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm') }}
</a-typography-text>
</div>
</template>
</a-list-item-meta>
</div>
</a-list-item>
<template #footer>
<a-space
fill
:size="0"
:class="{ 'add-border-top': renderList.length < showMax }"
>
<div class="footer-wrap">
<a-link @click="allRead">{{ $t('messageBox.allRead') }}</a-link>
</div>
<div class="footer-wrap">
<a-link>{{ $t('messageBox.viewMore') }}</a-link>
</div>
</a-space>
</template>
<!-- <template #footer>-->
<!-- <a-space-->
<!-- fill-->
<!-- :size="0"-->
<!-- :class="{ 'add-border-top': renderList.length < showMax }"-->
<!-- >-->
<!-- <div class="footer-wrap">-->
<!-- <a-link @click="allRead">{{ $t('messageBox.allRead') }}</a-link>-->
<!-- </div>-->
<!-- <div class="footer-wrap">-->
<!-- <a-link>查看更多</a-link>-->
<!-- </div>-->
<!-- </a-space>-->
<!-- </template>-->
<div
v-if="renderList.length && renderList.length < 3"
:style="{ height: (showMax - renderList.length) * 86 + 'px' }"
@ -73,6 +72,7 @@
<script lang="ts" setup>
import { PropType } from 'vue';
import { MessageRecord, MessageListType } from '@/api/message';
import dayjs from 'dayjs';
const props = defineProps({
renderList: {
@ -85,9 +85,9 @@
},
});
const emit = defineEmits(['itemClick']);
const allRead = () => {
emit('itemClick', [...props.renderList]);
};
// const allRead = () => {
// emit('itemClick', [...props.renderList]);
// };
const onItemClick = (item: MessageRecord) => {
if (!item.status) {

12
src/store/index.ts
View File

@ -5,8 +5,11 @@ import useUserStore from './modules/user';
import useTabBarStore from './modules/tab-bar';
import useRoleStore from './modules/role';
import useDeptStore from './modules/dept';
import useTicketStore from './modules/ticket';
import useAuthStore from './modules/auth';
import useBulletinsStore from './modules/bulletins';
import useBulletinStore from './modules/bulle-mgmt';
import useMessagesStore from './modules/messages';
import useMessageStore from './modules/message-mgmt';
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
@ -15,9 +18,12 @@ export {
useAppStore,
useUserStore,
useTabBarStore,
useDeptStore,
useRoleStore,
useTicketStore,
useDeptStore,
useAuthStore,
useBulletinsStore,
useBulletinStore,
useMessagesStore,
useMessageStore,
};
export default pinia;

52
src/store/modules/message-mgmt/index.ts Normal file
View File

@ -0,0 +1,52 @@
import { defineStore } from 'pinia';
import {
MessageRecord,
MessageCreateRecord,
queryMessage,
queryMessageList,
createMessage,
getMessageTypes,
setMessageTypes,
} from '@/api/message-mgmt';
import { messageStore } from '@/store/modules/message-mgmt/type';
const useMessageStore = defineStore('dept', {
state: ():messageStore => ({
remark: undefined,
title: undefined,
top: undefined,
content: undefined,
attachmentIds: undefined,
}),
getters: {
MessageInfo(state: messageStore): messageStore {
return { ...state };
},
},
actions: {
async queryMessage(userId: number, messageId: number) {
return queryMessage(userId, messageId);
},
async queryMessageList(params: MessageRecord) {
return queryMessageList(params);
},
async createMessage(params: MessageCreateRecord) {
return createMessage(params);
},
async getMessageTypes() {
return getMessageTypes();
},
async setMessageTypes(params: string[]) {
return setMessageTypes(params);
},
},
});
export default useMessageStore;

8
src/store/modules/message-mgmt/type.ts Normal file
View File

@ -0,0 +1,8 @@
// export type bulletinsType = '' | '*' | 'admin' | 'user' | string[];
export interface messageStore {
title?: string;
top?: string[];
content?: string;
remark?: string;
attachmentIds?: string[];
}

49
src/store/modules/messages/index.ts Normal file
View File

@ -0,0 +1,49 @@
import { defineStore } from 'pinia';
import {
MessagesRecord,
MessageStatus,
queryMessage,
queryMessagesList,
queryMessagesCount,
queryMessagesReadCount,
setMessageStatus,
} from '@/api/messages';
import { messagesStore } from '@/store/modules/messages/type';
const useMessagesStore = defineStore('dept', {
state: ():messagesStore => ({
remark: undefined,
title: undefined,
content: undefined,
attachments: undefined,
}),
getters: {
MessagesInfo(state: messagesStore): messagesStore {
return { ...state };
},
},
actions: {
async queryMessage(id: number){
return queryMessage(id);
},
async queryMessagesList(data: MessagesRecord) {
return queryMessagesList(data);
},
async queryMessagesCount() {
return queryMessagesCount();
},
async queryMessagesReadCount() {
return queryMessagesReadCount();
},
async setMessageStatus(data: MessageStatus) {
return setMessageStatus(data);
},
},
});
export default useMessagesStore;

35
src/store/modules/messages/type.ts Normal file
View File

@ -0,0 +1,35 @@
// export type bulletinsType = '' | '*' | 'admin' | 'user' | string[];
export interface Attachment {
id: string;
fileName: string;
mimeType: string;
uploadTime: string;
url: string;
}
export interface messagesStore {
id?: number;
userId?: number | null;
user?: string | null;
messageId?: number | null;
message?: string | null;
isRead?: boolean | null;
readTime?: string | null;
username?: string | null;
name?: string | null;
avatar?: string | null;
address?: string | null;
type?: string;
system?: boolean;
email?: boolean;
sms?: boolean;
html?: boolean;
title?: string;
content?: string;
remark?: string;
createTime?: string;
createBy?: string;
updateTime?: string;
updateBy?: string;
attachments?: Attachment[];
}

467
src/views/system/message/components/message-edit.vue Normal file
View File

@ -0,0 +1,467 @@
<template>
<a-button v-if="props.isCreate" type="primary" @click="handleClick">
<template #icon><icon-plus /></template>
新建
</a-button>
<a-button
v-if="!props.isCreate"
type="outline"
size="small"
:style="{ marginRight: '10px', padding: '7px' }"
@click="handleClick"
>
<template #icon><icon-edit /></template>
修改
</a-button>
<a-modal
width="900px"
:visible="visible"
@cancel="handleCancel"
>
<template #title>{{ modalTitle }}</template>
<DynamicForm :prem="fieIds" />
<!-- <a-form ref="CreateRef" :model="formData" :style="{ width: '650px' }">-->
<!-- <a-form-item-->
<!-- v-if="userId"-->
<!-- field="userId"-->
<!-- :label="userId.label"-->
<!-- :validate-trigger="['change', 'input']"-->
<!-- :rules="[-->
<!-- { message: '请输入用戶' },-->
<!-- ]"-->
<!-- >-->
<!-- <a-input-->
<!-- v-if="userId.component==='input'"-->
<!-- v-model="formData.userIds"-->
<!-- :type="userId.type"-->
<!-- placeholder='请选择用戶'-->
<!-- :value=formData.userIds-->
<!-- @click="queryDeptTree"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- <a-form-item-->
<!-- v-if="title"-->
<!-- field="title"-->
<!-- :label="title.label"-->
<!-- :validate-trigger="['change', 'input']"-->
<!-- :rules="[-->
<!-- { required: true, message: '请输入标题' },-->
<!-- ]"-->
<!-- >-->
<!-- <a-input-->
<!-- v-if="title.component==='input'"-->
<!-- v-model="formData.title"-->
<!-- :type="title.type"-->
<!-- placeholder='请输入消息标题'-->
<!-- />-->
<!-- </a-form-item>-->
<!-- <a-form-item-->
<!-- v-if="remark"-->
<!-- field="remark"-->
<!-- :label="remark.label"-->
<!-- :validate-trigger="['change', 'input']"-->
<!-- >-->
<!-- &lt;!&ndash; v-if="isCreate"&ndash;&gt;-->
<!-- <a-input-->
<!-- v-if="remark.component==='input'"-->
<!-- v-model="formData.attachment"-->
<!-- :type="remark.type"-->
<!-- placeholder='请输入备注'-->
<!-- />-->
<!-- </a-form-item>-->
<!-- <div style="display: flex;margin-left: 75px">-->
<!-- <a-form-item-->
<!-- v-if="sms"-->
<!-- field="sms"-->
<!-- :label="sms.label"-->
<!-- :validate-trigger="['change', 'input']"-->
<!-- >-->
<!-- <a-switch-->
<!-- v-if="sms.component==='switch'"-->
<!-- v-model="formData.sms"-->
<!-- :checked-value="true"-->
<!-- :unchecked-value="false"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- <a-form-item-->
<!-- v-if="email"-->
<!-- field="email"-->
<!-- :label="email.label"-->
<!-- :validate-trigger="['change', 'input']"-->
<!-- >-->
<!-- <a-switch-->
<!-- v-if="email.component==='switch'"-->
<!-- v-model="formData.email"-->
<!-- :checked-value="true"-->
<!-- :unchecked-value="false"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- </div>-->
<!--&lt;!&ndash; <a-form-item&ndash;&gt;-->
<!--&lt;!&ndash; field="attachmentIds"&ndash;&gt;-->
<!--&lt;!&ndash; label='附件'&ndash;&gt;-->
<!--&lt;!&ndash; >&ndash;&gt;-->
<!--&lt;!&ndash; &lt;!&ndash; v-if="isCreate"&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash; <a-input&ndash;&gt;-->
<!--&lt;!&ndash; type="file"&ndash;&gt;-->
<!--&lt;!&ndash; v-model="formData.attachmentIds"&ndash;&gt;-->
<!--&lt;!&ndash; />&ndash;&gt;-->
<!--&lt;!&ndash; </a-form-item>&ndash;&gt;-->
<!-- <a-form-item v-if="richEditor" field="content" label='内容' :rules="[{ required: true}]">-->
<!-- <div style="border: 1px solid #ccc;min-width: 700px">-->
<!-- <Toolbar-->
<!-- style="border-bottom: 1px solid #ccc"-->
<!-- :editor="editorRef"-->
<!-- :default-config="toolbarConfig"-->
<!-- :mode="mode"-->
<!-- :class="{'fullscreen-toolbar': isFullScreen}"-->
<!-- />-->
<!-- <Editor-->
<!-- v-model="formData.content"-->
<!-- style="overflow-y: hidden;height: 200px;"-->
<!-- :default-config="editorConfig"-->
<!-- :mode="mode"-->
<!-- :class="{'fullscreen-editor': isFullScreen}"-->
<!-- @on-created="handleCreated"-->
<!-- />-->
<!-- </div>-->
<!-- &lt;!&ndash; <a-textarea v-model="formData.content" placeholder="请输入公告内容" style="height: 100px" />&ndash;&gt;-->
<!-- </a-form-item>-->
<!-- </a-form>-->
<template #footer>
<a-button class="editor-button" @click="handleCancel">取消</a-button>
<a-button class="editor-button" type="primary" @click="handleSubmit">确定</a-button>
</template>
</a-modal>
<!-- 部门树模态框-->
<a-modal
width="900px"
:visible="deptVisible"
@cancel="deptTreeCancel"
>
<template #title>发送用户</template>
<div style="display: flex">
<a-card style="margin-right: 10px;width: 30%">
<a-tree
:data="deptTreeData"
checkable="true"
style="margin-bottom: 8px; max-width: 240px"
@select="handleClickTree"
@check="handleCheckTree"
/>
</a-card>
<a-card style="flex: 1">
<a-table
:data="selectedDepartmentMembers"
:columns="columns"
style="height: 520px">
<template #key="{ record }">
<a-checkbox v-model="selectedIds" :value="record.key"> </a-checkbox>
</template>
<template #title="{ record }">
{{ record.title }}
</template>
</a-table>
</a-card>
</div>
<template #footer>
<a-button class="editor-button" @click="deptTreeCancel" >取消</a-button>
<a-button class="editor-button" type="primary" @click="deptTreeSubmit" >确定</a-button>
</template>
</a-modal>
</template>
<script lang="ts" setup>
import useVisible from '@/hooks/visible';
import { computed, defineEmits, PropType, ref, shallowRef, onBeforeUnmount, reactive } from 'vue';
import { CreateRecord } from '@/api/user';
import { FormInstance } from '@arco-design/web-vue/es/form';
import { Message } from '@arco-design/web-vue';
import { useMessageStore } from '@/store';
import DynamicForm from '@/components/dynamic-form/index.vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { IEditorConfig } from '@wangeditor/editor'
import '@wangeditor/editor/dist/css/style.css'
const props = defineProps({
prem: {
type: Object as PropType<CreateRecord>,
},
isCreate: Boolean,
});
// 部门树模态框状态
const deptVisible=ref(false);
const emit = defineEmits(['refresh']);
const modalTitle = computed(() => {
return props.isCreate ? '创建消息' : '编辑消息';
});
const { visible, setVisible } = useVisible(false);
const checkKeys = ref<number[]>([]);
const CreateRef = ref<FormInstance>();
const formData = ref<any>({
...props.prem,
});
const messageStore = useMessageStore();
const editorRef = shallowRef()
const isFullScreen = ref(false);
const mode = 'default';
const selectedIds= ref<string[]>([]);
const toolbarConfig = { excludeKeys: ['uploadVideo', 'insertImage','insertVideo']}
// const handleCreated = (editor: any) => {
// editorRef.value = editor; // 记录 editor 实例，重要！
// // 监听全屏事件
// editor.on('fullScreen', () => {
// })
// }
const columns = computed<any[]>(()=>[
{
title: '操作',
dataIndex: 'key',
slotName: 'key',
},
{
title: '用户',
dataIndex: 'title',
},
])
const fieIds = ref(
{
userId:{
label: '用戶',
component: 'input',
type:'text'
},
title:{
label: '标题',
component: 'input',
type:'text'
},
remark:{
label: '备注',
component: 'input',
type:'text'
},
sms:{
label: '短信',
component: 'switch',
type:'switch'
},
email:{
label: '邮件',
component:'switch',
type:'switch'
},
attachmentIds:{
label: '附件',
component: 'input',
type:'text'
},
richEditor:{
label: '内容',
component: 'input',
type:'text'
},
},
);
const { userId, title, remark, sms, email, richEditor } = fieIds.value;
const deptTreeData = reactive([
{
key: '1',
title: '总部门',
children: [
{
key: '2',
title: '部门1',
members: [
{ key: '101', title: '成员1' },
{ key: '102', title: '成员2' }
]
},
{
key: '3',
title: '部门2',
members: [
{ key: '201', title: '成员3' },
{ key: '202', title: '成员4' }
]
},
{
key: '4',
title: '部门3',
members: [
{ key: '203', title: '成员5' },
{ key: '204', title: '成员6' }
]
}
]
}
]);
const selectedDepartmentMembers: any = ref([]);
const renderData = ref<any[]>([]);
// 部门树查询
const queryDeptTree= async ()=>{
deptVisible.value = true;
}
// 广度优先遍历树，获取选中的成员
const getSelectedMembers = (treeData: any[], selectedKeys: string[]) => {
const queue = [...treeData];
const selectedMembers: any[] = [];
while (queue.length > 0) {
const node = queue.shift()!;
if (selectedKeys.includes(node.key)) {
if (node.members) {
selectedMembers.push(...node.members);
}
}
if (node.children) {
queue.push(...node.children);
}
}
return selectedMembers;
}
// 部门树被点击
const handleClickTree = (key: string[]) => {
// 假设 '1' 是总部门的键
if (key[0] === '1' || key.length === 0) {
// 广度优先遍历树，获取所有成员
const allMembers: any[] = [];
const queue = [...deptTreeData];
while (queue.length > 0) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const node = queue.shift()!;
if (node.members) {
allMembers.push(...node.members);
}
if (node.children) {
queue.push(...node.children);
}
}
selectedDepartmentMembers.value = allMembers;
renderData.value = selectedDepartmentMembers.value;
return;
}
const Members = getSelectedMembers(deptTreeData, key);
selectedDepartmentMembers.value = Members;
}
// 部门树被选中
const handleCheckTree = (key: string[]) => {
if (key[0] === '1' ) { // 假设 '1' 是总部门的键
const allKeys: string[] = [];
const traverseTree = (node: any) => {
if (node.members) {
node.members.forEach((member: any) => {
allKeys.push(member.key);
});
}
if (node.children) {
node.children.forEach((child: any) => {
traverseTree(child);
});
}
};
deptTreeData.forEach((node: any) => {
traverseTree(node);
});
selectedIds.value = allKeys;
} else {
const selectedKeys = getSelectedMembers(deptTreeData, key);
selectedIds.value = selectedKeys.map(item => item.key);
}
};
// 组件被点击
const handleClick = () => {
setVisible(true);
};
const editorConfig: Partial<IEditorConfig> = { placeholder: '请输入内容...',MENU_CONF:{
// 隐藏菜单
hide: ['code', 'table', 'emoticon', 'uploadImage', 'video', 'todo', 'specialChar'],
// 配置上传图片
uploadImage: {
base64LimitSize: 1024 * 1024,
// server: '/api/rest/bulletin/1/add',
}
}
}
// 提交
const handleSubmit = async () => {
const valid = await CreateRef.value?.validate();
if (!valid) {
formData.value.permissionIds = checkKeys.value;
// 新增
if (props.isCreate) {
// formData.value.username = formData.value.email;
const res = await messageStore.createMessage(formData.value);
if (res.status === 200) {
Message.success({
content: '新建成功',
duration: 5 * 1000,
});
emit('refresh');
setVisible(false);
}
CreateRef.value?.resetFields();
}
}
};
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
const editor = editorRef.value
if (editor == null) return
editor.destroy()
})
// 关闭
const handleCancel = async () => {
checkKeys.value = [];
setVisible(false);
};
// 部门树模态框提交
const deptTreeSubmit = () => {
deptVisible.value = false;
formData.value.userIds = selectedIds.value;
console.log(formData.value.userIds);
};
// 部门树模态框
const deptTreeCancel = () => {
deptVisible.value = false;
};
</script>
<style scoped>
.fullscreen-toolbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px; /* 根据需要调整高度 */
z-index: 999;
background-color: white;
}
.fullscreen-editor {
position: fixed;
top: 50px; /* 根据 toolbar 的高度调整 */
left: 0;
width: 100%;
height: calc(100% - 50px); /* 减去 toolbar 的高度 */
z-index: 999;
background-color: white;
}
.editor-button{
position: static
}
</style>

360
src/views/system/message/index.vue Normal file
View File

@ -0,0 +1,360 @@
<template>
<div class="container">
<Breadcrumb :items="['系统管理', '消息设置']" />
<a-card class="general-card" title=" ">
<a-row>
<a-col :flex="1">
<a-form
:model="formModel"
:label-col-props="{ span: 6 }"
:wrapper-col-props="{ span: 18 }"
label-align="right"
>
<a-row :gutter="18">
<a-col :span="9">
<a-form-item
field="title"
label='标题'
>
<a-input
v-model="formModel.title"
style="width: 360px"
placeholder='请输入标题'
/>
</a-form-item>
</a-col>
<a-col :span="10">
<a-form-item field="Time" label='时间'>
<a-range-picker
show-time
format="YYYY-MM-DD HH:mm"
@ok="timeRangs"
/>
</a-form-item>
</a-col>
<a-col :span="9">
<a-form-item
field="name"
label='名称'
>
<a-input
v-model="formModel.name"
style="width: 360px"
placeholder='请输入名称'
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-col>
<a-divider style="height: 84px" direction="vertical" />
<a-col :flex="'86px'" style="text-align: right">
<a-space direction="vertical" :size="18">
<a-button type="primary" @click="search">
<template #icon>
<icon-search />
</template>
查询
</a-button>
<a-button @click="reset">
<template #icon>
<icon-refresh />
</template>
重置
</a-button>
</a-space>
</a-col>
</a-row>
<a-divider style="margin-top: 0" />
<a-row>
<a-col :span="12">
<a-space>
<MessageEdit ref="createUserRef" :is-create="true" @refresh="search" />
</a-space>
</a-col>
<a-col
:span="12"
style="
display: flex;
align-items: center;
justify-content: end;
padding-bottom: 20px;
"
>
<a-tooltip content='刷新'>
<div class="action-icon" @click="search">
<icon-refresh size="18" />
</div>
</a-tooltip>
<a-dropdown @select="handleSelectDensity">
<a-tooltip content='密度'>
<div class="action-icon"><icon-line-height size="18" /></div>
</a-tooltip>
<template #content>
<a-doption
v-for="item in densityList"
:key="item.value"
:value="item.value"
:class="{ active: item.value === size }"
>
<span>{{ item.name }}</span>
</a-doption>
</template>
</a-dropdown>
<a-tooltip content='列设置'>
<a-popover
trigger="click"
position="bl"
@popup-visible-change="popupVisibleChange"
>
<div class="action-icon"><icon-settings size="18" /></div>
<template #content>
<div id="tableSetting">
<div
v-for="(item, index) in showColumns"
:key="item.dataIndex"
class="setting"
>
<div style="margin-right: 4px; cursor: move">
<icon-drag-arrow />
</div>
<div>
<a-checkbox
v-model="item.checked"
@change="
handleChange($event, item as TableColumnData, index)
"
>
</a-checkbox>
</div>
<div class="title">
{{ item.title === '#' ? '序列号' : item.title }}
</div>
</div>
</div>
</template>
</a-popover>
</a-tooltip>
</a-col>
</a-row>
<a-table
row-key="id"
:loading="loading"
:pagination="false"
:columns="(cloneColumns as TableColumnData[])"
:data="renderData"
:bordered="false"
:size="size"
style="margin-bottom: 40px"
@page-change="onPageChange"
>
<template #id="{ record }">
<a-checkbox v-model="selectedIds" :value="record.id" style="margin-left: -5px"> </a-checkbox>
</template>
<template #createTime="{ record }">
{{ dayjs(record.createTime).format('YYYY-MM-DD HH:mm') }}
</template>
<template #isRead="{ record }">
{{ record.isRead == true? '已读' : '未读' }}
</template>
</a-table>
<a-pagination
style="float: right; position: relative; right: 1px; bottom: 25px"
:total="pagination.total"
:size="size"
show-total
show-jumper
show-page-size
@page-size-change="onSizeChange"
@change="onPageChange"
/>
</a-card>
</div>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue';
import useLoading from '@/hooks/loading';
import { Pagination } from '@/types/global';
import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
import { useMessageStore } from '@/store';
import useTableOption from '@/hooks/table-option';
import usePagination from '@/hooks/pagination';
import dayjs from 'dayjs';
import { MessageRecord, MessageCreateRecord } from '@/api/message-mgmt';
import { useRouter } from 'vue-router';
import MessageEdit from './components/message-edit.vue';
const generateFormModel = () => {
return {
userId: '',
title: '',
type: '',
name: '',
system: '',
isRead: '',
createAtBegin: '',
createAtEnd: '',
};
};
const { loading, setLoading } = useLoading(true);
const renderData = ref<MessageRecord[]>([]);
const formModel = ref(generateFormModel());
const router = useRouter();
const selectedIds= ref<number[]>([]);
const {
cloneColumns,
showColumns,
densityList,
size,
handleSelectDensity,
handleChange,
popupVisibleChange,
deepClone,
} = useTableOption();
const messageStore = useMessageStore();
const { pagination,setPagination } = usePagination();
const columns = computed<TableColumnData[]>(() => [
// {
// title: '用户编号',
// dataIndex: 'userId',
// },
{
title: '标题',
dataIndex: 'title',
},
{
title:'时间',
dataIndex: 'createTime',
slotName: 'createTime',
},
// {
// title: '用户名称',
// dataIndex: 'username',
// },
{
title: '状态',
dataIndex: 'isRead',
slotName: 'isRead',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
]);
// 获取消息列表
const fetchData = async (
params = { size: 10, current: 1 }
) => {
setLoading(true);
try {
const res: any = await messageStore.queryMessageList(params);
renderData.value = res.data.records;
setPagination(res.data);
} catch (err) {
// you can report use errorHandler or other
} finally {
setLoading(false);
}
};
// 查询
const search = () => {
fetchData({
...pagination,
...formModel.value,
} as unknown as MessageRecord);
selectedIds.value = [];
};
// 分页发生改变
const onPageChange = (current: number) => {
pagination.pages = current;
pagination.current = current;
search();
};
// 时间范围
const timeRangs = (dateString: string[]) => {
// eslint-disable-next-line prefer-destructuring
formModel.value.createAtBegin = dateString[0];
// eslint-disable-next-line prefer-destructuring
formModel.value.createAtEnd = dateString[1];
};
// 数据条数改变
const onSizeChange = (Size: number) => {
pagination.size = Size;
search();
};
// 重置
const reset = () => {
formModel.value = generateFormModel();
};
// 打开详情
function openDetail(id:number): void{
const url = router.resolve({
name: 'Detail',
params: {id}
}).href;
router.push(url);
};
onMounted(() => {
search();
});
watch(() => columns.value, deepClone, { deep: true, immediate: true });
</script>
<style scoped lang="less">
.container {
padding: 0 20px 20px 20px;
}
:deep(.arco-table-th) {
&:last-child {
.arco-table-th-item-title {
margin-left: 16px;
}
}
}
.action-icon {
margin-left: 12px;
cursor: pointer;
}
.active {
color: #0960bd;
background-color: #e3f4fc;
}
.setting {
display: flex;
align-items: center;
width: 200px;
.title {
margin-left: 12px;
cursor: pointer;
}
}
</style>

279
src/views/user/messages/index.vue Normal file
View File

@ -0,0 +1,279 @@
<template>
<div class="container">
<Breadcrumb :items="['个人中心', '消息通知']" />
<a-card class="general-card" title=" ">
<a-row>
<a-col :flex="1">
<a-form
:model="formModel"
:label-col-props="{ span: 6 }"
:wrapper-col-props="{ span: 18 }"
label-align="right"
>
<a-row :gutter="18">
<a-col :span="9">
<a-form-item
field="title"
label='标题'
>
<a-input
v-model="formModel.title"
style="width: 360px"
placeholder='请输入标题'
/>
</a-form-item>
</a-col>
<a-col :span="10">
<a-form-item field="Time" label='时间'>
<a-range-picker
show-time
format="YYYY-MM-DD HH:mm"
@ok="timeRangs"
/>
</a-form-item>
</a-col>
<a-col :span="9">
<a-form-item
field="isRead"
label='状态'
>
<a-select
v-model="formModel.isRead"
style="width: 360px"
placeholder='请选择状态'
:options="statusOptions"
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-col>
<a-divider style="height: 84px" direction="vertical" />
<a-col :flex="'46px'" style="text-align: right">
<a-space direction="vertical" :size="18">
<a-button type="primary" @click="search">
<template #icon>
<icon-search />
</template>
查询
</a-button>
<a-button @click="reset">
<template #icon>
<icon-refresh />
</template>
重置
</a-button>
</a-space>
</a-col>
</a-row>
<a-divider style="margin-top: 0" />
<a-table
row-key="id"
:loading="loading"
:pagination="false"
:columns="(cloneColumns as TableColumnData[])"
:data="renderData"
:bordered="false"
:size="sizeof"
:style="highlightRow"
style="margin-bottom: 40px"
:filter-icon-align-left="alignLeft"
@change="handleSortChange"
@page-change="onPageChange"
>
<template #publishTime="{ record }">
{{ dayjs(record.publishTime).format('YYYY-MM-DD HH:mm') }}
</template>
<template #isRead="{ record }">
{{ record.isRead == true? '已读' : '未读' }}
</template>
<!-- <template #operations="{ record }">-->
<!-- <a-button-->
<!-- type="outline"-->
<!-- size="small"-->
<!-- status="success"-->
<!-- style="padding: 7px; margin-right: 10px"-->
<!-- @click="handleRead(record)"-->
<!-- >-->
<!-- <template #icon><icon-list /></template>-->
<!-- 详情-->
<!-- </a-button>-->
<!-- </template>-->
</a-table>
<a-pagination
style="float: right; position: relative; right: 1px; bottom: 25px"
:total="pagination.total"
:size="sizeof"
show-total
show-jumper
show-page-size
@page-size-change="onSizeChange"
@change="onPageChange"
/>
</a-card>
</div>
</template>
<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
import useLoading from '@/hooks/loading';
import dayjs from 'dayjs';
import { Pagination } from '@/types/global';
import usePagination from '@/hooks/pagination';
import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
import { useMessagesStore } from '@/store';
import router from '@/router';
import useTableOption from '@/hooks/table-option';
import { BulletinsRecord } from '@/api/bulletins';
const generateFormModel = () => {
return {
title: '',
state: '',
publishTimeBegin: '',
publishTimeEnd: '',
};
};
const { loading, setLoading } = useLoading(true);
const renderData = ref<BulletinsRecord[]>([]);
const formModel = ref(generateFormModel());
const { pagination,setPagination } = usePagination();
const {
cloneColumns,
showColumns,
densityList,
handleSelectDensity,
handleChange,
popupVisibleChange,
deepClone,
} = useTableOption();
const sizeof=useTableOption().size;
const messagesStore = useMessagesStore();
const columns = computed<TableColumnData[]>(() => [
{
title: '标题',
dataIndex: 'title',
},
{
title: '时间',
dataIndex: 'publishTime',
slotName: 'publishTime',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '状态',
dataIndex: 'isRead',
slotName: 'isRead',
},
// {
// title: '操作',
// dataIndex: 'operations',
// slotName: 'operations',
// },
]);
const statusOptions = computed<SelectOptionData[]>(() => [
{
label: '已读',
value: 'true',
},
{
label: '未读',
value: 'false',
},
]);
// 获取公告列表
const fetchData = async (
params: BulletinsRecord = { size: 10, current: 1 }
) => {
setLoading(true);
try {
const res = await messagesStore.queryMessagesList(params);
renderData.value = res.data.records;
setPagination(res.data);
} catch (err) {
// you can report use errorHandler or other
} finally {
setLoading(false);
}
};
// 高亮行
const highlightRow = (record: BulletinsRecord) => {
if (record.top === true) {
console.log('record', record);
return 'background-color: yellow;';
}
return '';
};
// 时间范围
const timeRangs = (dateString: string[]) => {
// eslint-disable-next-line prefer-destructuring
formModel.value.publishTimeBegin = dateString[0];
// eslint-disable-next-line prefer-destructuring
formModel.value.publishTimeEnd = dateString[1];
};
// 详情
const handleRead = async (record: BulletinsRecord) => {
// await bulletinsStore.readBulletins({ id: record.id });
await router.push({ name: 'Details', params: { id: record.id } });
};
// 查询
const search = () => {
fetchData({
...pagination,
...formModel.value,
} as unknown as BulletinsRecord);
};
// 分页发生改变
const onPageChange = (current: number) => {
pagination.pages = current;
pagination.current = current;
search();
};
// 数据条数改变
const onSizeChange = (Size: number) => {
pagination.size = Size;
search();
};
search();
// 重置
const reset = () => {
formModel.value = generateFormModel();
};
// 表格内部排序
const alignLeft = ref(false);
const handleSortChange = (data: any, extra: any, currentDataSource: any) => {};
watch(() => columns.value, deepClone, { deep: true, immediate: true });
</script>
<style scoped>
.container {
padding: 0 20px 20px 20px;
}
.highlight-class {
background-color: yellow; /* 这里可以修改为你想要的高亮颜色 */
font-weight: bold; /* 可以添加其他样式，如加粗等 */
}
</style>