fix(pinia模块，并将消息模块加入版本管理): 修复之前的页面请求失效问题
BUG出现在pinia的defineStore方法上，第一个参数是写唯一标识，此前错误的将所有都写成了dept，故导致出现请求失效BUG
This commit is contained in:
parent
a5859ba7b3
commit
8421ce2836
@ -18,7 +18,7 @@ import {
|
|||||||
} from '@/api/bulletin-mgmt';
|
} from '@/api/bulletin-mgmt';
|
||||||
import { bulletinsStore } from '@/store/modules/bulle-mgmt/type';
|
import { bulletinsStore } from '@/store/modules/bulle-mgmt/type';
|
||||||
|
|
||||||
const useBulletinStore = defineStore('dept', {
|
const useBulletinStore = defineStore('bulletin-mgmt', {
|
||||||
state: ():bulletinsStore => ({
|
state: ():bulletinsStore => ({
|
||||||
remark: undefined,
|
remark: undefined,
|
||||||
title: undefined,
|
title: undefined,
|
||||||
|
|||||||
@ -6,7 +6,7 @@ import {
|
|||||||
} from '@/api/bulletins';
|
} from '@/api/bulletins';
|
||||||
import { bulletinsStore } from './type';
|
import { bulletinsStore } from './type';
|
||||||
|
|
||||||
const useBulletinsStore = defineStore('auth', {
|
const useBulletinsStore = defineStore('bulletin', {
|
||||||
state: (): bulletinsStore => ({
|
state: (): bulletinsStore => ({
|
||||||
title: undefined,
|
title: undefined,
|
||||||
state: undefined,
|
state: undefined,
|
||||||
|
|||||||
@ -10,7 +10,7 @@ import {
|
|||||||
} from '@/api/message-mgmt';
|
} from '@/api/message-mgmt';
|
||||||
import { messageStore } from '@/store/modules/message-mgmt/type';
|
import { messageStore } from '@/store/modules/message-mgmt/type';
|
||||||
|
|
||||||
const useMessageStore = defineStore('dept', {
|
const useMessageStore = defineStore('message-mgmt', {
|
||||||
state: ():messageStore => ({
|
state: ():messageStore => ({
|
||||||
remark: undefined,
|
remark: undefined,
|
||||||
title: undefined,
|
title: undefined,
|
||||||
|
|||||||
@ -10,7 +10,7 @@ import {
|
|||||||
} from '@/api/messages';
|
} from '@/api/messages';
|
||||||
import { messagesStore } from '@/store/modules/messages/type';
|
import { messagesStore } from '@/store/modules/messages/type';
|
||||||
|
|
||||||
const useMessagesStore = defineStore('dept', {
|
const useMessagesStore = defineStore('message', {
|
||||||
state: ():messagesStore => ({
|
state: ():messagesStore => ({
|
||||||
remark: undefined,
|
remark: undefined,
|
||||||
title: undefined,
|
title: undefined,
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<Breadcrumb :items="['消息管理', '公告设置']" />
|
<Breadcrumb :items="['通知管理', '公告设置']" />
|
||||||
<a-card class="general-card" title=" ">
|
<a-card class="general-card" title=" ">
|
||||||
<a-row>
|
<a-row>
|
||||||
<a-col :flex="1">
|
<a-col :flex="1">
|
||||||
@ -28,7 +28,7 @@
|
|||||||
<a-range-picker
|
<a-range-picker
|
||||||
show-time
|
show-time
|
||||||
format="YYYY-MM-DD HH:mm"
|
format="YYYY-MM-DD HH:mm"
|
||||||
@ok="timeRangs"
|
@ok="timeRang"
|
||||||
/>
|
/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-col>
|
</a-col>
|
||||||
@ -148,7 +148,6 @@
|
|||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
|
|
||||||
<a-table
|
<a-table
|
||||||
row-key="id"
|
row-key="id"
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
@ -170,12 +169,12 @@
|
|||||||
<span v-if="record.state === 'publish'">已发布</span>
|
<span v-if="record.state === 'publish'">已发布</span>
|
||||||
<span v-else-if="record.state === 'edit'">编辑中</span>
|
<span v-else-if="record.state === 'edit'">编辑中</span>
|
||||||
<span v-else-if="record.state === 'close'">已关闭</span>
|
<span v-else-if="record.state === 'close'">已关闭</span>
|
||||||
<!-- <a-switch-->
|
<!-- <a-switch-->
|
||||||
<!-- :model-value="record.state"-->
|
<!-- :model-value="record.state"-->
|
||||||
<!-- :checked-value="record.state ? 'publish' || 'edit' : 'close' "-->
|
<!-- :checked-value="record.state ? 'publish' || 'edit' : 'close' "-->
|
||||||
<!-- :unchecked-value="record.state ? 'close' : 'publish' || 'edit' "-->
|
<!-- :unchecked-value="record.state ? 'close' : 'publish' || 'edit' "-->
|
||||||
<!-- @change="handleClose(record.id)"-->
|
<!-- @change="handleClose(record.id)"-->
|
||||||
<!-- />-->
|
<!-- />-->
|
||||||
</template>
|
</template>
|
||||||
<template #top="{ record }">
|
<template #top="{ record }">
|
||||||
<a-switch
|
<a-switch
|
||||||
@ -187,15 +186,15 @@
|
|||||||
</template>
|
</template>
|
||||||
<template #operations="{ record }">
|
<template #operations="{ record }">
|
||||||
<a-button
|
<a-button
|
||||||
type="outline"
|
type="outline"
|
||||||
size="small"
|
size="small"
|
||||||
status="success"
|
status="success"
|
||||||
style="padding: 7px; margin-right: 10px"
|
style="padding: 7px; margin-right: 10px"
|
||||||
@click="openDetail(record.id)"
|
@click="openDetail(record.id)"
|
||||||
>
|
>
|
||||||
<template #icon><icon-list /></template>
|
<template #icon><icon-list /></template>
|
||||||
详情
|
详情
|
||||||
</a-button>
|
</a-button>
|
||||||
<BulletinEdit
|
<BulletinEdit
|
||||||
ref="editUserRef"
|
ref="editUserRef"
|
||||||
:prem="record"
|
:prem="record"
|
||||||
@ -379,7 +378,7 @@
|
|||||||
search();
|
search();
|
||||||
};
|
};
|
||||||
// 时间范围
|
// 时间范围
|
||||||
const timeRangs = (dateString: string[]) => {
|
const timeRang = (dateString: string[]) => {
|
||||||
// eslint-disable-next-line prefer-destructuring
|
// eslint-disable-next-line prefer-destructuring
|
||||||
formModel.value.publishTimeBegin = dateString[0];
|
formModel.value.publishTimeBegin = dateString[0];
|
||||||
// eslint-disable-next-line prefer-destructuring
|
// eslint-disable-next-line prefer-destructuring
|
||||||
|
|||||||
475
src/views/notification/notice/components/message-edit.vue
Normal file
475
src/views/notification/notice/components/message-edit.vue
Normal file
@ -0,0 +1,475 @@
|
|||||||
|
<template>
|
||||||
|
<a-button v-permission="['message:notice:create']" v-if="props.isCreate" type="primary" @click="handleClick">
|
||||||
|
<template #icon><icon-plus /></template>
|
||||||
|
新建
|
||||||
|
</a-button>
|
||||||
|
<a-button
|
||||||
|
v-permission="['message:notice:update']"
|
||||||
|
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
|
||||||
|
field="userId"
|
||||||
|
label="用户"
|
||||||
|
:validate-trigger="['change', 'input']"
|
||||||
|
:rules="[
|
||||||
|
{ message: '请输入用戶' },
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<a-input-tag
|
||||||
|
v-model="formData.userIds"
|
||||||
|
placeholder='请选择用戶'
|
||||||
|
:value=formData.userIds
|
||||||
|
@click="queryDeptTree"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item
|
||||||
|
field="title"
|
||||||
|
label="标题"
|
||||||
|
:validate-trigger="['change', 'input']"
|
||||||
|
:rules="[
|
||||||
|
{ required: true, message: '请输入标题' },
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<a-input
|
||||||
|
v-model="formData.title"
|
||||||
|
placeholder='请输入消息标题'
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item
|
||||||
|
field="remark"
|
||||||
|
label="备注"
|
||||||
|
:validate-trigger="['change', 'input']"
|
||||||
|
>
|
||||||
|
<!-- v-if="isCreate"-->
|
||||||
|
<a-input
|
||||||
|
v-model="formData.attachment"
|
||||||
|
placeholder='请输入备注'
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<div style="display: flex;margin-left: 75px">
|
||||||
|
<a-form-item
|
||||||
|
field="sms"
|
||||||
|
label="短信"
|
||||||
|
:validate-trigger="['change', 'input']"
|
||||||
|
>
|
||||||
|
<a-switch
|
||||||
|
v-model="formData.sms"
|
||||||
|
:checked-value="true"
|
||||||
|
:unchecked-value="false"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item
|
||||||
|
field="email"
|
||||||
|
label="邮件"
|
||||||
|
:validate-trigger="['change', 'input']"
|
||||||
|
>
|
||||||
|
<a-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 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;height: 520px">
|
||||||
|
<a-card style="margin-right: 10px;width: 30%">
|
||||||
|
<a-tree
|
||||||
|
:data="deptTreeData"
|
||||||
|
:field-names="{ title: 'name', key: 'id', children: 'children' }"
|
||||||
|
style="margin-bottom: 8px; max-width: 240px"
|
||||||
|
@select="handleClickTree"
|
||||||
|
@check="handleCheckTree"
|
||||||
|
>
|
||||||
|
</a-tree>
|
||||||
|
</a-card>
|
||||||
|
<a-card style="flex: 1">
|
||||||
|
<a-button type="primary" style="margin-bottom: 10px" @click="handleCheckAllUsers">全选</a-button>
|
||||||
|
<a-table
|
||||||
|
:data="selectedDepartmentMembers"
|
||||||
|
:columns="columns"
|
||||||
|
style="height: 520px">
|
||||||
|
<template #id="{ record }">
|
||||||
|
<a-checkbox v-model="selectedIds" :value="record.userId"> </a-checkbox>
|
||||||
|
</template>
|
||||||
|
<template #username="{ record }">
|
||||||
|
{{ record.username }}
|
||||||
|
</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, onMounted } 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'
|
||||||
|
import { getAllDeptTree } from '@/api/dept';
|
||||||
|
import configArcoStyleImportPlugin from '../../../../../config/plugin/arcoStyleImport';
|
||||||
|
|
||||||
|
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 editorRef = shallowRef()
|
||||||
|
const handleCreated = (editor: any) => {
|
||||||
|
editorRef.value = editor; // 记录 editor 实例，重要！
|
||||||
|
}
|
||||||
|
const CreateRef = ref<FormInstance>();
|
||||||
|
const formData = ref<any>({
|
||||||
|
...props.prem,
|
||||||
|
});
|
||||||
|
const messageStore = useMessageStore();
|
||||||
|
const isFullScreen = ref(false);
|
||||||
|
const mode = 'default';
|
||||||
|
const selectedIds= ref<number[]>([]);
|
||||||
|
const toolbarConfig = { excludeKeys: ['uploadVideo', 'insertImage','insertVideo']}
|
||||||
|
const columns = computed<any[]>(()=>[
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'id',
|
||||||
|
slotName: 'id',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '用户',
|
||||||
|
dataIndex: 'username',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
// 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 deptTreeData = ref([
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
name: '总部门',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
name: '部门1',
|
||||||
|
members: [
|
||||||
|
{ id: '101', username: '成员1' },
|
||||||
|
{ id: '102', username: '成员2' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3',
|
||||||
|
name: '部门2',
|
||||||
|
members: [
|
||||||
|
{ id: '201', username: '成员3' },
|
||||||
|
{ id: '202', username: '成员4' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '4',
|
||||||
|
name: '部门3',
|
||||||
|
members: [
|
||||||
|
{ id: '203', username: '成员5' },
|
||||||
|
{ id: '204', username: '成员6' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
const selectedDepartmentMembers: any = ref([]);
|
||||||
|
const renderData = ref<any[]>([]);
|
||||||
|
// 获取部门树
|
||||||
|
const getDeptTree = async () => {
|
||||||
|
const res = await getAllDeptTree(1);
|
||||||
|
if (res.status === 200) {
|
||||||
|
deptTreeData.value = res.data;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 部门树查询
|
||||||
|
const queryDeptTree= async ()=>{
|
||||||
|
deptVisible.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 广度优先遍历树，获取选中的成员
|
||||||
|
const getSelectedMembers = (treeData: any[], selectedKeys: number[]) => {
|
||||||
|
const queue:any = [...treeData];
|
||||||
|
const selectedMembers: any[] = [];
|
||||||
|
while (queue.length > 0) {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||||
|
const node = queue.shift()!;
|
||||||
|
if (selectedKeys.includes(node.id)) {
|
||||||
|
if (node.members) {
|
||||||
|
selectedMembers.push(...node.members);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (node.children) {
|
||||||
|
queue.push(...node.children);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return selectedMembers;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 部门树被点击
|
||||||
|
const handleClickTree = (id: number[]) => {
|
||||||
|
// 假设 '1' 是总部门的键
|
||||||
|
if (id[0] === 1 && id.length === 1) {
|
||||||
|
// 广度优先遍历树，获取所有成员
|
||||||
|
const allMembers: any[] = [];
|
||||||
|
const queue:any = [...deptTreeData.value];
|
||||||
|
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.value, id);
|
||||||
|
selectedDepartmentMembers.value = Members;
|
||||||
|
}
|
||||||
|
// 部门树被选中
|
||||||
|
const handleCheckTree = (id: number[]) => {
|
||||||
|
if (id[0] === 1 ) { // 假设 '1' 是总部门的键
|
||||||
|
const allKeys: number[] = [];
|
||||||
|
const traverseTree = (node: any) => {
|
||||||
|
if (node.members) {
|
||||||
|
node.members.forEach((member: any) => {
|
||||||
|
allKeys.push(member.userId);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (node.children) {
|
||||||
|
node.children.forEach((child: any) => {
|
||||||
|
traverseTree(child);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
deptTreeData.value.forEach((node: any) => {
|
||||||
|
traverseTree(node);
|
||||||
|
});
|
||||||
|
selectedIds.value = allKeys;
|
||||||
|
|
||||||
|
} else {
|
||||||
|
const selectedKeys = getSelectedMembers(deptTreeData.value, id);
|
||||||
|
selectedIds.value = selectedKeys.map(item => item.userId);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 组件被点击
|
||||||
|
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;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 选择所有用户
|
||||||
|
const handleCheckAllUsers = () => {
|
||||||
|
if(selectedIds.value.length ===0 ) {
|
||||||
|
handleCheckTree([1]);
|
||||||
|
} else {
|
||||||
|
selectedIds.value = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// 部门树模态框
|
||||||
|
const deptTreeCancel = () => {
|
||||||
|
deptVisible.value = false;
|
||||||
|
};
|
||||||
|
onMounted(async () => {
|
||||||
|
await getDeptTree();
|
||||||
|
});
|
||||||
|
</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>
|
||||||
352
src/views/notification/notice/index.vue
Normal file
352
src/views/notification/notice/index.vue
Normal file
@ -0,0 +1,352 @@
|
|||||||
|
<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 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 } from '@/api/message-mgmt';
|
||||||
|
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 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();
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
search();
|
||||||
|
});
|
||||||
|
watch(() => columns.value, deepClone, { deep: true, immediate: true });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
name: 'Notice',
|
||||||
|
};
|
||||||
|
</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>
|
||||||
Loading…
Reference in New Issue
Block a user