feat(消息模块): 新增消息的展示及增删改查
1.新增消息的头部展示 2.新增消息管理的增删改查功能 3.新增用户消息的查看
This commit is contained in:
parent
4605b955b0
commit
6f08eda851
52
src/api/message-mgmt.ts
Normal file
52
src/api/message-mgmt.ts
Normal 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
82
src/api/messages.ts
Normal 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
601
src/components/dynamic-form/index.vue
Normal 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>
|
||||
@ -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)) {
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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
52
src/store/modules/message-mgmt/index.ts
Normal 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
8
src/store/modules/message-mgmt/type.ts
Normal 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
49
src/store/modules/messages/index.ts
Normal 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
35
src/store/modules/messages/type.ts
Normal 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
467
src/views/system/message/components/message-edit.vue
Normal 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']"-->
|
||||
<!-- >-->
|
||||
<!-- <!– v-if="isCreate"–>-->
|
||||
<!-- <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>-->
|
||||
<!--<!– <a-form-item–>-->
|
||||
<!--<!– field="attachmentIds"–>-->
|
||||
<!--<!– label='附件'–>-->
|
||||
<!--<!– >–>-->
|
||||
<!--<!– <!– v-if="isCreate"–>–>-->
|
||||
<!--<!– <a-input–>-->
|
||||
<!--<!– type="file"–>-->
|
||||
<!--<!– v-model="formData.attachmentIds"–>-->
|
||||
<!--<!– />–>-->
|
||||
<!--<!– </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>-->
|
||||
<!-- </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
360
src/views/system/message/index.vue
Normal 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
279
src/views/user/messages/index.vue
Normal 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>
|
||||
Loading…
Reference in New Issue
Block a user