Compare commits
2 Commits
master
...
feature/bu
| Author | SHA1 | Date | |
|---|---|---|---|
| 4605b955b0 | |||
| 8a228763c7 |
105
src/api/bulletin-mgmt.ts
Normal file
105
src/api/bulletin-mgmt.ts
Normal file
@ -0,0 +1,105 @@
|
||||
import axios from 'axios';
|
||||
|
||||
export interface BulletinCreateRecord {
|
||||
title: string;
|
||||
top: boolean;
|
||||
content: string;
|
||||
remark: string;
|
||||
attachmentIds?: string[];
|
||||
}
|
||||
|
||||
|
||||
export interface BulletinRecord extends BulletinCreateRecord {
|
||||
id: number;
|
||||
state: string;
|
||||
publishTime: string;
|
||||
createTime: string;
|
||||
|
||||
}
|
||||
|
||||
export interface BulletinsRecord {
|
||||
title?: string;
|
||||
state?: string[];
|
||||
publishTimeBegin?: string[];
|
||||
publishTimeEnd?: string[];
|
||||
total?: number;
|
||||
current: number;
|
||||
pages: number;
|
||||
}
|
||||
|
||||
export interface AttachmentRecord {
|
||||
type: string;
|
||||
file: any;
|
||||
}
|
||||
|
||||
|
||||
// 查看详情
|
||||
export function queryBulletinListAll(id: number) {
|
||||
return axios.get(`/api/rest/bulletin/${id}`);
|
||||
}
|
||||
|
||||
// 分页查询
|
||||
export function queryBulletinList(data: BulletinsRecord) {
|
||||
return axios({
|
||||
url: '/api/rest/bulletin',
|
||||
method: 'get',
|
||||
params: data,
|
||||
});
|
||||
}
|
||||
|
||||
// 添加公告
|
||||
export function create(data: BulletinCreateRecord) {
|
||||
return axios.post(`/api/rest/bulletin`, data);
|
||||
}
|
||||
|
||||
// 更新公告
|
||||
export function update(data: BulletinRecord) {
|
||||
return axios.patch(`/api/rest/bulletin/${data.id}`, data);
|
||||
}
|
||||
|
||||
// 置顶状态
|
||||
export function toggle(id: number) {
|
||||
return axios.patch(`/api/rest/bulletin/${id}/toggle-top`);
|
||||
}
|
||||
|
||||
// 发布编辑
|
||||
export function publish(data: number[]) {
|
||||
return axios.patch(`/api/rest/bulletin/publish`, data);
|
||||
}
|
||||
|
||||
// 关闭公告
|
||||
export function close(id: number) {
|
||||
return axios.patch(`/api/rest/bulletin/${id}/toggleClose`);
|
||||
}
|
||||
|
||||
// 删除公告
|
||||
export function remove(id: number) {
|
||||
return axios.delete(`/api/rest/bulletin/${id}`);
|
||||
}
|
||||
|
||||
// 添加附件
|
||||
export function addAttachments(data: any) {
|
||||
return axios({
|
||||
method: 'post',
|
||||
url: '/api/rest/attachment',
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
// 获取附件信息
|
||||
export function addAttachment(id: string) {
|
||||
return axios.get(`/api/rest/attachment/find/${id}`);
|
||||
}
|
||||
|
||||
// 删除附件
|
||||
export function deleteAttachment(id: string) {
|
||||
return axios.delete(`/api/rest/attachment/delete/${id}`);
|
||||
}
|
||||
|
||||
// 获取部门树
|
||||
export function queryDeptTreeList() {
|
||||
return axios.get(`/api/deptTree`);
|
||||
}
|
||||
26
src/api/bulletins.ts
Normal file
26
src/api/bulletins.ts
Normal file
@ -0,0 +1,26 @@
|
||||
import axios from 'axios';
|
||||
|
||||
export interface BulletinsRecord {
|
||||
title?: string;
|
||||
state?: number[];
|
||||
top?: boolean;
|
||||
publishTimeBegin?: string[];
|
||||
publishTimeEnd?: string[];
|
||||
total?: number;
|
||||
size: number;
|
||||
isRead?: boolean;
|
||||
current: number;
|
||||
}
|
||||
|
||||
// 查看详情
|
||||
export function queryBulletinsListAll(id: number) {
|
||||
return axios.get(`/api/rest/bulletin/self/${id}`);
|
||||
}
|
||||
// 分页查询
|
||||
export function queryBulletinsList(data: BulletinsRecord) {
|
||||
return axios({
|
||||
url: '/api/rest/bulletin/self',
|
||||
method: 'get',
|
||||
params: data,
|
||||
});
|
||||
}
|
||||
88
src/store/modules/bulle-mgmt/index.ts
Normal file
88
src/store/modules/bulle-mgmt/index.ts
Normal file
@ -0,0 +1,88 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import {
|
||||
BulletinCreateRecord,
|
||||
BulletinRecord,
|
||||
BulletinsRecord,
|
||||
create,
|
||||
update,
|
||||
toggle,
|
||||
publish,
|
||||
close,
|
||||
remove,
|
||||
queryBulletinListAll,
|
||||
queryBulletinList,
|
||||
addAttachments,
|
||||
queryDeptTreeList,
|
||||
addAttachment,
|
||||
deleteAttachment
|
||||
} from '@/api/bulletin-mgmt';
|
||||
import { bulletinsStore } from '@/store/modules/bulle-mgmt/type';
|
||||
|
||||
const useBulletinStore = defineStore('dept', {
|
||||
state: ():bulletinsStore => ({
|
||||
remark: undefined,
|
||||
title: undefined,
|
||||
top: undefined,
|
||||
content: undefined,
|
||||
attachmentIds: undefined,
|
||||
}),
|
||||
|
||||
getters: {
|
||||
DeptInfo(state: bulletinsStore): bulletinsStore {
|
||||
return { ...state };
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
async queryBulletinListAll(id: number) {
|
||||
return queryBulletinListAll(id);
|
||||
},
|
||||
|
||||
async queryBulletinList(params: BulletinsRecord) {
|
||||
return queryBulletinList(params);
|
||||
},
|
||||
|
||||
async removeBulletin(id: number) {
|
||||
return remove(id);
|
||||
},
|
||||
|
||||
async createBulletin(params: BulletinCreateRecord) {
|
||||
return create(params);
|
||||
},
|
||||
|
||||
async updateBulletin(params: BulletinRecord) {
|
||||
return update(params);
|
||||
},
|
||||
|
||||
async toggleBulletin(id: number) {
|
||||
return toggle(id);
|
||||
},
|
||||
|
||||
async publishBulletin(data: number[]) {
|
||||
return publish(data);
|
||||
},
|
||||
|
||||
async closeBulletin(id: number) {
|
||||
return close(id);
|
||||
},
|
||||
|
||||
async addAttachments(data: any) {
|
||||
return addAttachments(data);
|
||||
},
|
||||
|
||||
// 获取部门树
|
||||
async queryDeptTreeList() {
|
||||
return queryDeptTreeList();
|
||||
},
|
||||
|
||||
// 获取附件信息
|
||||
async queryAttachmentInfo(id: string) {
|
||||
return addAttachment(id);
|
||||
},
|
||||
|
||||
// 删除附件
|
||||
async deleteAttachment(id: string) {
|
||||
return deleteAttachment(id);
|
||||
}
|
||||
},
|
||||
});
|
||||
export default useBulletinStore;
|
||||
8
src/store/modules/bulle-mgmt/type.ts
Normal file
8
src/store/modules/bulle-mgmt/type.ts
Normal file
@ -0,0 +1,8 @@
|
||||
// export type bulletinsType = '' | '*' | 'admin' | 'user' | string[];
|
||||
export interface bulletinsStore {
|
||||
title?: string;
|
||||
top?: string[];
|
||||
content?: string;
|
||||
remark?: string;
|
||||
attachmentIds?: string[];
|
||||
}
|
||||
33
src/store/modules/bulletins/index.ts
Normal file
33
src/store/modules/bulletins/index.ts
Normal file
@ -0,0 +1,33 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import {
|
||||
queryBulletinsListAll,
|
||||
queryBulletinsList,
|
||||
BulletinsRecord
|
||||
} from '@/api/bulletins';
|
||||
import { bulletinsStore } from './type';
|
||||
|
||||
const useBulletinsStore = defineStore('auth', {
|
||||
state: (): bulletinsStore => ({
|
||||
title: undefined,
|
||||
state: undefined,
|
||||
publishTimeBegin: undefined,
|
||||
publishTimeEnd: undefined,
|
||||
}),
|
||||
|
||||
getters: {
|
||||
AuthInfo(state: bulletinsStore): bulletinsStore {
|
||||
return { ...state };
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
async getBulletinsList(data: BulletinsRecord) {
|
||||
return queryBulletinsList(data);
|
||||
},
|
||||
|
||||
async getBulletinsListAll(data: number) {
|
||||
return queryBulletinsListAll(data);
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
export default useBulletinsStore;
|
||||
7
src/store/modules/bulletins/type.ts
Normal file
7
src/store/modules/bulletins/type.ts
Normal file
@ -0,0 +1,7 @@
|
||||
// export type bulletinsType = '' | '*' | 'admin' | 'user' | string[];
|
||||
export interface bulletinsStore {
|
||||
title?: string;
|
||||
state?: string[];
|
||||
publishTimeBegin?: string;
|
||||
publishTimeEnd?: string;
|
||||
}
|
||||
254
src/views/system/bulletin/components/bulletin-edit.vue
Normal file
254
src/views/system/bulletin/components/bulletin-edit.vue
Normal file
@ -0,0 +1,254 @@
|
||||
<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>
|
||||
<a-form ref="CreateRef" :model="formData" :style="{ width: '650px' }">
|
||||
<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="top"
|
||||
label='置顶'
|
||||
:validate-trigger="['change', 'input']"
|
||||
>
|
||||
<a-switch
|
||||
v-model="formData.top"
|
||||
:checked-value="true"
|
||||
:unchecked-value="false"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
field="remark"
|
||||
label='备注'
|
||||
:validate-trigger="['change', 'input']"
|
||||
>
|
||||
<!-- v-if="isCreate"-->
|
||||
<a-input
|
||||
v-model="formData.remark"
|
||||
placeholder='请输入备注'
|
||||
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label='附件'
|
||||
>
|
||||
<!-- v-if="isCreate"-->
|
||||
<a-upload
|
||||
v-model="formData.attachmentIds"
|
||||
show-file-list
|
||||
:custom-request="customRequest"
|
||||
@before-remove="beforeRemove"
|
||||
>
|
||||
<template #upload-item="{ file }">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<img :src="file.url" alt="上传文件" style="width: 50px; height: 50px; margin-right: 10px;" />
|
||||
<span>{{ file.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</a-upload>
|
||||
</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"
|
||||
@on-created="handleCreated"
|
||||
:class="{'fullscreen-editor': isFullScreen}"
|
||||
/>
|
||||
</div>
|
||||
<!-- <a-textarea v-model="formData.content" placeholder="请输入公告内容" style="height: 100px" />-->
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<template #footer>
|
||||
<a-button @click="handleCancel" style="position: static">取消</a-button>
|
||||
<a-button @click="handleSubmit" style="position: static" type="primary">确定</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import useVisible from '@/hooks/visible';
|
||||
import { computed, defineEmits, PropType, ref, shallowRef,onBeforeUnmount } from 'vue';
|
||||
import { BulletinCreateRecord } from '@/api/bulletin-mgmt';
|
||||
import { FormInstance } from '@arco-design/web-vue/es/form';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import { useBulletinStore } 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<BulletinCreateRecord>,
|
||||
},
|
||||
isCreate: Boolean,
|
||||
});
|
||||
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,
|
||||
attachmentIds: [],
|
||||
});
|
||||
const bulletinStore = useBulletinStore();
|
||||
const editorRef = shallowRef()
|
||||
const isFullScreen = ref(false);
|
||||
const mode = 'default';
|
||||
const toolbarConfig = { excludeKeys: ['uploadVideo', 'insertImage','insertVideo']}
|
||||
const handleCreated = (editor: any) => {
|
||||
editorRef.value = editor; // 记录 editor 实例，重要！
|
||||
// 监听全屏事件
|
||||
editor.on('fullScreen', () => {
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 组件被点击
|
||||
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 bulletinStore.createBulletin(formData.value);
|
||||
if (res.status === 200) {
|
||||
Message.success({
|
||||
content: '新建成功',
|
||||
duration: 5 * 1000,
|
||||
});
|
||||
emit('refresh');
|
||||
setVisible(false);
|
||||
}
|
||||
CreateRef.value?.resetFields();
|
||||
} else {
|
||||
// 编辑
|
||||
const res = await bulletinStore.updateBulletin(formData.value);
|
||||
if (res.status === 200) {
|
||||
Message.success({
|
||||
content: '修改成功',
|
||||
duration: 5 * 1000,
|
||||
});
|
||||
emit('refresh');
|
||||
setVisible(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 自定义文件上传
|
||||
const customRequest = async (option: any) => {
|
||||
const { fileItem,onSuccess,onError } = option
|
||||
const formDataFile = new FormData();
|
||||
formDataFile.append('file', fileItem.file);
|
||||
formDataFile.append('type', '其他');
|
||||
const res = await bulletinStore.addAttachments(formDataFile);
|
||||
if (res.status === 200) {
|
||||
onSuccess(res.data);
|
||||
console.log(formData.value);
|
||||
formData.value.attachmentIds.push(res.data.id);
|
||||
console.log(formData.value);
|
||||
} else {
|
||||
onError(res.data);
|
||||
}
|
||||
}
|
||||
|
||||
// 删除附件
|
||||
const beforeRemove = async (file: any) => {
|
||||
const res = await bulletinStore.deleteAttachment(file.response.id);
|
||||
return res.status === 200;
|
||||
}
|
||||
|
||||
// 组件销毁时，也及时销毁编辑器
|
||||
onBeforeUnmount(() => {
|
||||
const editor = editorRef.value
|
||||
if (editor == null) return
|
||||
editor.destroy()
|
||||
})
|
||||
|
||||
// 关闭
|
||||
const handleCancel = async () => {
|
||||
checkKeys.value = [];
|
||||
setVisible(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;
|
||||
}
|
||||
</style>
|
||||
148
src/views/system/bulletin/components/detail.vue
Normal file
148
src/views/system/bulletin/components/detail.vue
Normal file
@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<Breadcrumb :items="['系统管理', '公告设置','公告详情']" />
|
||||
<a-card class="general-card" title=" ">
|
||||
<div class="announcement-detail">
|
||||
<div class="header">
|
||||
<h1>{{ renderData.title }}</h1>
|
||||
<div class="meta">
|
||||
<span>作者: {{ renderData.createBy }}</span>
|
||||
<span
|
||||
>时间: {{ dayjs(renderData.publishTime).format('YYYY-MM-DD') }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider style="margin-top: 0" />
|
||||
<div v-html="renderData.content" class="content"></div>
|
||||
<div>
|
||||
<ul class="attachments">
|
||||
<li v-for="(item, index) in renderData.attachments" :key="index">
|
||||
<a
|
||||
:href="item.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<icon-download />
|
||||
{{ item.fileName }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import dayjs from 'dayjs';
|
||||
import { useBulletinStore } from '@/store';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const bulletinStore = useBulletinStore();
|
||||
const route = useRoute();
|
||||
const id = Number(route.params.id);
|
||||
const renderData = ref<any>([]);
|
||||
// const attachmentList = ref<any>([]);
|
||||
const fetchData = async (Id: number) => {
|
||||
const res = await bulletinStore.queryBulletinListAll(Id);
|
||||
// attachmentList.value = await bulletinStore.queryAttachmentInfo(
|
||||
// '28452d83420650425d45110c6417bf693b966b29'
|
||||
// );
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
renderData.value = res.data;
|
||||
};
|
||||
onMounted(() => {
|
||||
fetchData(id);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
padding: 0 20px 20px 20px;
|
||||
}
|
||||
|
||||
.announcement-detail {
|
||||
min-width: 800px;
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #ddd;
|
||||
background-color: #fff; /* 白色背景，与淡蓝色背景区分开来 */
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.meta {
|
||||
margin-bottom: 20px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.meta span {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.content {
|
||||
line-height: 1.6;
|
||||
}
|
||||
.attachments li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.attachments a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #1890ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.attachments a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.attachments .arco-icon {
|
||||
margin-right: 8px;
|
||||
color: #1890ff;
|
||||
}
|
||||
.layout-demo :deep(.arco-layout-header),
|
||||
.layout-demo :deep(.arco-layout-footer),
|
||||
.layout-demo :deep(.arco-layout-sider-children),
|
||||
.layout-demo :deep(.arco-layout-content) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: var(--color-white);
|
||||
font-size: 16px;
|
||||
font-stretch: condensed;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.layout-demo :deep(.arco-layout-header),
|
||||
.layout-demo :deep(.arco-layout-footer) {
|
||||
height: 64px;
|
||||
background-color: var(--color-primary-light-4);
|
||||
}
|
||||
|
||||
.layout-demo :deep(.arco-layout-sider) {
|
||||
width: 206px;
|
||||
background-color: var(--color-primary-light-3);
|
||||
}
|
||||
|
||||
.layout-demo :deep(.arco-layout-content) {
|
||||
background-color: rgb(var(--arcoblue-6));
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -14,55 +14,40 @@
|
||||
<a-col :span="9">
|
||||
<a-form-item
|
||||
field="title"
|
||||
:label="$t('标题')"
|
||||
label='标题'
|
||||
>
|
||||
<a-input
|
||||
v-model="formModel.title"
|
||||
style="width: 360px"
|
||||
:placeholder="$t('请输入标题')"
|
||||
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="enable"
|
||||
:label="$t('状态')"
|
||||
label='状态'
|
||||
>
|
||||
<a-select
|
||||
v-model="formModel.states"
|
||||
v-model="formModel.state"
|
||||
style="width: 360px"
|
||||
:placeholder="$t('请选择状态')"
|
||||
placeholder='请选择状态'
|
||||
:options="statusOptions"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="9">
|
||||
<a-form-item field="publishTimeBegin" :label="$t('开始时间')">
|
||||
<a-date-picker
|
||||
v-model="formModel.publishTimeBegin"
|
||||
style="width: 360px"
|
||||
show-time
|
||||
:time-picker-props="{ defaultValue: '09:09:06' }"
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
:allow-clear="false"
|
||||
@select="onSelect"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="9">
|
||||
<a-form-item field="publishTimeEnd" :label="$t('结束时间')">
|
||||
<a-date-picker
|
||||
v-model="formModel.publishTimeEnd"
|
||||
style="width: 360px"
|
||||
show-time
|
||||
:time-picker-props="{ defaultValue: '09:09:06' }"
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
:allow-clear="false"
|
||||
@select="onSelect"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-col>
|
||||
@ -89,14 +74,12 @@
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-space>
|
||||
<NoticeEdit ref="createUserRef" :is-create="true" @refresh="search" />
|
||||
<BulletinEdit ref="createUserRef" :is-create="true" @refresh="search" />
|
||||
<a-button type="primary" @click="publishBulletin(selectedIds)">
|
||||
<template #icon><icon-public /></template>
|
||||
发布
|
||||
</a-button>
|
||||
</a-space>
|
||||
<a-button style="margin-left: 20px" @click="generateExcel">
|
||||
<template #icon>
|
||||
<icon-download size="18" />
|
||||
</template>
|
||||
导出
|
||||
</a-button>
|
||||
</a-col>
|
||||
<a-col
|
||||
:span="12"
|
||||
@ -107,14 +90,14 @@
|
||||
padding-bottom: 20px;
|
||||
"
|
||||
>
|
||||
<a-tooltip :content="$t('刷新')">
|
||||
<a-tooltip content='刷新'>
|
||||
<div class="action-icon" @click="search">
|
||||
<icon-refresh size="18" />
|
||||
</div>
|
||||
</a-tooltip>
|
||||
|
||||
<a-dropdown @select="handleSelectDensity">
|
||||
<a-tooltip :content="$t('密度')">
|
||||
<a-tooltip content='密度'>
|
||||
<div class="action-icon"><icon-line-height size="18" /></div>
|
||||
</a-tooltip>
|
||||
<template #content>
|
||||
@ -122,14 +105,14 @@
|
||||
v-for="item in densityList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:class="{ active: item.value === sizeof }"
|
||||
:class="{ active: item.value === size }"
|
||||
>
|
||||
<span>{{ item.name }}</span>
|
||||
</a-doption>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
|
||||
<a-tooltip :content="$t('列设置')">
|
||||
<a-tooltip content='列设置'>
|
||||
<a-popover
|
||||
trigger="click"
|
||||
position="bl"
|
||||
@ -175,48 +158,80 @@
|
||||
:bordered="false"
|
||||
:size="size"
|
||||
style="margin-bottom: 40px"
|
||||
:filter-icon-align-left="alignLeft"
|
||||
@change="handleSortChange"
|
||||
@page-change="onPageChange"
|
||||
>
|
||||
<template #index="{ rowIndex }">
|
||||
{{ rowIndex + 1 + (pagination.current - 1) * pagination.size }}
|
||||
<template #id="{ record }">
|
||||
<a-checkbox v-model="selectedIds" :value="record.id" style="margin-left: -5px"> </a-checkbox>
|
||||
</template>
|
||||
<template #enabled="{ record }">
|
||||
<template #publishTime="{ record }">
|
||||
{{ dayjs(record.publishTime).format('YYYY-MM-DD HH:mm') }}
|
||||
</template>
|
||||
<template #state="{ record }">
|
||||
<span v-if="record.state === 'publish'">已发布</span>
|
||||
<span v-else-if="record.state === 'edit'">编辑中</span>
|
||||
<span v-else-if="record.state === 'close'">已关闭</span>
|
||||
<!-- <a-switch-->
|
||||
<!-- :model-value="record.state"-->
|
||||
<!-- :checked-value="record.state ? 'publish' || 'edit' : 'close' "-->
|
||||
<!-- :unchecked-value="record.state ? 'close' : 'publish' || 'edit' "-->
|
||||
<!-- @change="handleClose(record.id)"-->
|
||||
<!-- />-->
|
||||
</template>
|
||||
<template #top="{ record }">
|
||||
<a-switch
|
||||
:model-value="record.enabled"
|
||||
:model-value="record.top"
|
||||
:checked-value="true"
|
||||
:unchecked-value="false"
|
||||
@change="enabledStatus(record)"
|
||||
@change="handleSwitchChange(record)"
|
||||
/>
|
||||
</template>
|
||||
<template #operations="{ record }">
|
||||
<a-button
|
||||
type="outline"
|
||||
size="small"
|
||||
status="success"
|
||||
style="padding: 7px;margin-right: 10px"
|
||||
>
|
||||
<template #icon><icon-list /></template>
|
||||
详情
|
||||
</a-button>
|
||||
|
||||
<NoticeEdit
|
||||
type="outline"
|
||||
size="small"
|
||||
status="success"
|
||||
style="padding: 7px; margin-right: 10px"
|
||||
@click="openDetail(record.id)"
|
||||
>
|
||||
<template #icon><icon-list /></template>
|
||||
详情
|
||||
</a-button>
|
||||
<BulletinEdit
|
||||
ref="editUserRef"
|
||||
:prem="record"
|
||||
:is-create="false"
|
||||
@refresh="fetchData"
|
||||
/>
|
||||
<a-button
|
||||
<a-popconfirm
|
||||
content='确认删除此公告？'
|
||||
type="error"
|
||||
@ok="handleDelete(record.id)"
|
||||
>
|
||||
<a-button
|
||||
type="outline"
|
||||
size="small"
|
||||
status="danger"
|
||||
style="padding: 7px"
|
||||
style="padding: 7px;margin-right: 10px"
|
||||
>
|
||||
<template #icon><icon-delete /></template>
|
||||
删除
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
<a-popconfirm
|
||||
:content="record.state === 'publish'? '确认关闭此公告？' : '确认编辑此公告?'"
|
||||
type="error"
|
||||
@ok="handleClose(record.id)"
|
||||
>
|
||||
<template #icon><icon-delete /></template>
|
||||
删除
|
||||
</a-button>
|
||||
|
||||
<a-button
|
||||
type="outline"
|
||||
size="small"
|
||||
status="warning"
|
||||
style="padding: 7px;margin-right: 10px"
|
||||
>
|
||||
<template #icon><icon-poweroff /></template>
|
||||
切换状态
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-pagination
|
||||
@ -234,76 +249,84 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import { UserRecord, UserParams } from '@/api/user';
|
||||
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 { useUserStore } from '@/store';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import { useBulletinStore } from '@/store';
|
||||
import useTableOption from '@/hooks/table-option';
|
||||
import NoticeEdit from './components/notice-edit.vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { BulletinRecord, BulletinsRecord } from '@/api/bulletin-mgmt';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import BulletinEdit from './components/bulletin-edit.vue';
|
||||
|
||||
const generateFormModel = () => {
|
||||
return {
|
||||
title: '',
|
||||
states: '',
|
||||
state: '',
|
||||
publishTimeBegin: '',
|
||||
publishTimeEnd: '',
|
||||
};
|
||||
};
|
||||
|
||||
const { loading, setLoading } = useLoading(true);
|
||||
const { t } = useI18n();
|
||||
const renderData = ref<UserRecord[]>([]);
|
||||
const renderData = ref<BulletinRecord[]>([]);
|
||||
const formModel = ref(generateFormModel());
|
||||
|
||||
const router = useRouter();
|
||||
const selectedIds= ref<number[]>([]);
|
||||
const {
|
||||
cloneColumns,
|
||||
showColumns,
|
||||
densityList,
|
||||
size,
|
||||
handleSelectDensity,
|
||||
handleChange,
|
||||
popupVisibleChange,
|
||||
deepClone,
|
||||
} = useTableOption();
|
||||
const sizeof=useTableOption().size;
|
||||
|
||||
const userStore = useUserStore();
|
||||
const bulletinStore = useBulletinStore();
|
||||
|
||||
const pagination: Pagination = {
|
||||
page: 1,
|
||||
size: 10,
|
||||
current: 1,
|
||||
total: null,
|
||||
total: 0,
|
||||
};
|
||||
|
||||
const columns = computed<TableColumnData[]>(() => [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'index',
|
||||
slotName: 'index',
|
||||
title: '#',
|
||||
dataIndex: 'id',
|
||||
slotName: 'id',
|
||||
width: 60,
|
||||
},
|
||||
{
|
||||
title: '标题',
|
||||
dataIndex: 'title',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('时间'),
|
||||
title: '时间',
|
||||
dataIndex: 'publishTimeBegin',
|
||||
slotName: 'publishTime',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('状态'),
|
||||
dataIndex: 'states',
|
||||
title: '状态',
|
||||
dataIndex: 'state',
|
||||
slotName: 'state',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '置顶',
|
||||
dataIndex: 'top',
|
||||
slotName:'top',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
@ -316,22 +339,26 @@
|
||||
]);
|
||||
const statusOptions = computed<SelectOptionData[]>(() => [
|
||||
{
|
||||
label: t('已发布'),
|
||||
value: 'true',
|
||||
label: '已发布',
|
||||
value: 'publish',
|
||||
},
|
||||
{
|
||||
label: t('未发布'),
|
||||
value: 'false',
|
||||
label: '编辑中',
|
||||
value: 'edit',
|
||||
},
|
||||
{
|
||||
label: '已关闭',
|
||||
value: 'close',
|
||||
},
|
||||
]);
|
||||
|
||||
// 获取公告列表
|
||||
const fetchData = async (
|
||||
params: UserParams = { page: 1, size: 10, current: 1 }
|
||||
params = { size: 10, current: 1 }
|
||||
) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await userStore.getUserList(params);
|
||||
const res: any = await bulletinStore.queryBulletinList(params);
|
||||
renderData.value = res.data.records;
|
||||
pagination.page = res.data.page;
|
||||
pagination.current = res.data.current;
|
||||
@ -349,7 +376,8 @@
|
||||
fetchData({
|
||||
...pagination,
|
||||
...formModel.value,
|
||||
} as unknown as UserParams);
|
||||
} as unknown as BulletinsRecord);
|
||||
selectedIds.value = [];
|
||||
};
|
||||
|
||||
// 分页发生改变
|
||||
@ -358,53 +386,90 @@
|
||||
pagination.current = current;
|
||||
search();
|
||||
};
|
||||
// 时间范围
|
||||
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 onSizeChange = (size: number) => {
|
||||
pagination.size = size;
|
||||
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) => {};
|
||||
|
||||
// 是否启用
|
||||
const enabledStatus = async (record: string) => {
|
||||
record.enabled = !record.enabled;
|
||||
const res = await userStore.enabledUser(record.id);
|
||||
// 是否置顶
|
||||
const handleSwitchChange = async (record: any) => {
|
||||
record.top = !record.top;
|
||||
const res = await bulletinStore.toggleBulletin(record.id);
|
||||
if (res.status === 200) {
|
||||
Message.success({
|
||||
content: t('modify.status.sucess'),
|
||||
content: '修改置顶成功',
|
||||
duration: 3 * 1000,
|
||||
});
|
||||
} else {
|
||||
Message.error({
|
||||
content: t('modify.status.fail'),
|
||||
content: '修改置顶失败',
|
||||
duration: 3 * 1000,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 删除
|
||||
// const handleDelete = async (record: UserRecord) => {
|
||||
// const res = await userStore.removeUser(record.id);
|
||||
// if (res.status === 200) {
|
||||
// Message.success({
|
||||
// content: '删除成功',
|
||||
// duration: 5 * 1000,
|
||||
// });
|
||||
// search();
|
||||
// }
|
||||
// };
|
||||
// 打开详情
|
||||
function openDetail(id:number): void{
|
||||
const url = router.resolve({
|
||||
name: 'Detail',
|
||||
params: {id}
|
||||
}).href;
|
||||
router.push(url);
|
||||
};
|
||||
|
||||
// 发布公告
|
||||
const publishBulletin = async (data:number[]) => {
|
||||
const res = await bulletinStore.publishBulletin(data);
|
||||
if (res.status === 200) {
|
||||
Message.success({
|
||||
content: '发布成功',
|
||||
duration: 5 * 1000,
|
||||
});
|
||||
}
|
||||
search();
|
||||
};
|
||||
|
||||
// 关闭公告
|
||||
const handleClose = async (id: number) => {
|
||||
const res = await bulletinStore.closeBulletin(id);
|
||||
if (res.status === 200) {
|
||||
Message.success({
|
||||
content: '切换成功',
|
||||
duration: 5 * 1000,
|
||||
});
|
||||
}
|
||||
search();
|
||||
};
|
||||
|
||||
// 删除
|
||||
const handleDelete = async (id: number) => {
|
||||
const res = await bulletinStore.removeBulletin(id);
|
||||
if (res.status === 200) {
|
||||
Message.success({
|
||||
content: '删除成功',
|
||||
duration: 5 * 1000,
|
||||
});
|
||||
search();
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
search();
|
||||
});
|
||||
watch(() => columns.value, deepClone, { deep: true, immediate: true });
|
||||
</script>
|
||||
|
||||
148
src/views/user/bulletins/components/detail.vue
Normal file
148
src/views/user/bulletins/components/detail.vue
Normal file
@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<Breadcrumb :items="['个人中心', '公告通知','公告详情']" />
|
||||
<a-card class="general-card" title=" ">
|
||||
<div class="announcement-detail">
|
||||
<div class="header">
|
||||
<h1>{{ renderData.title }}</h1>
|
||||
<div class="meta">
|
||||
<span>作者: {{ renderData.createBy }}</span>
|
||||
<span
|
||||
>时间: {{ dayjs(renderData.publishTime).format('YYYY-MM-DD') }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider style="margin-top: 0" />
|
||||
<div v-html="renderData.content" class="content"></div>
|
||||
<div>
|
||||
<ul class="attachments">
|
||||
<li v-for="(item, index) in renderData.attachments" :key="index">
|
||||
<a
|
||||
:href="item.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<icon-download />
|
||||
{{ item.fileName }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import dayjs from 'dayjs';
|
||||
import { useBulletinStore } from '@/store';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const bulletinStore = useBulletinStore();
|
||||
const route = useRoute();
|
||||
const id = Number(route.params.id);
|
||||
const renderData = ref<any>([]);
|
||||
// const attachmentList = ref<any>([]);
|
||||
const fetchData = async (Id: number) => {
|
||||
const res = await bulletinStore.queryBulletinListAll(Id);
|
||||
// attachmentList.value = await bulletinStore.queryAttachmentInfo(
|
||||
// '28452d83420650425d45110c6417bf693b966b29'
|
||||
// );
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
renderData.value = res.data;
|
||||
};
|
||||
onMounted(() => {
|
||||
fetchData(id);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
padding: 0 20px 20px 20px;
|
||||
}
|
||||
|
||||
.announcement-detail {
|
||||
min-width: 800px;
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #ddd;
|
||||
background-color: #fff; /* 白色背景，与淡蓝色背景区分开来 */
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.meta {
|
||||
margin-bottom: 20px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.meta span {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.content {
|
||||
line-height: 1.6;
|
||||
}
|
||||
.attachments li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.attachments a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #1890ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.attachments a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.attachments .arco-icon {
|
||||
margin-right: 8px;
|
||||
color: #1890ff;
|
||||
}
|
||||
.layout-demo :deep(.arco-layout-header),
|
||||
.layout-demo :deep(.arco-layout-footer),
|
||||
.layout-demo :deep(.arco-layout-sider-children),
|
||||
.layout-demo :deep(.arco-layout-content) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: var(--color-white);
|
||||
font-size: 16px;
|
||||
font-stretch: condensed;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.layout-demo :deep(.arco-layout-header),
|
||||
.layout-demo :deep(.arco-layout-footer) {
|
||||
height: 64px;
|
||||
background-color: var(--color-primary-light-4);
|
||||
}
|
||||
|
||||
.layout-demo :deep(.arco-layout-sider) {
|
||||
width: 206px;
|
||||
background-color: var(--color-primary-light-3);
|
||||
}
|
||||
|
||||
.layout-demo :deep(.arco-layout-content) {
|
||||
background-color: rgb(var(--arcoblue-6));
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<Breadcrumb :items="['通知管理', '公告通知']" />
|
||||
<Breadcrumb :items="['个人中心', '公告通知']" />
|
||||
<a-card class="general-card" title=" ">
|
||||
<a-row>
|
||||
<a-col :flex="1">
|
||||
@ -14,55 +14,37 @@
|
||||
<a-col :span="9">
|
||||
<a-form-item
|
||||
field="title"
|
||||
:label="$t('标题')"
|
||||
label='标题'
|
||||
>
|
||||
<a-input
|
||||
v-model="formModel.title"
|
||||
style="width: 360px"
|
||||
:placeholder="$t('请输入标题')"
|
||||
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="enable"
|
||||
:label="$t('状态')"
|
||||
field="isRead"
|
||||
label='状态'
|
||||
>
|
||||
<a-select
|
||||
v-model="formModel.states"
|
||||
v-model="formModel.isRead"
|
||||
style="width: 360px"
|
||||
:placeholder="$t('请选择状态')"
|
||||
placeholder='请选择状态'
|
||||
:options="statusOptions"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="9">
|
||||
<a-form-item field="publishTimeBegin" :label="$t('开始时间')">
|
||||
<a-date-picker
|
||||
v-model="formModel.publishTimeBegin"
|
||||
style="width: 360px"
|
||||
show-time
|
||||
:time-picker-props="{ defaultValue: '09:09:06' }"
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
:allow-clear="false"
|
||||
@select="onSelect"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="9">
|
||||
<a-form-item field="publishTimeEnd" :label="$t('结束时间')">
|
||||
<a-date-picker
|
||||
v-model="formModel.publishTimeEnd"
|
||||
style="width: 360px"
|
||||
show-time
|
||||
:time-picker-props="{ defaultValue: '09:09:06' }"
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
:allow-clear="false"
|
||||
@select="onSelect"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-col>
|
||||
@ -93,30 +75,26 @@
|
||||
:columns="(cloneColumns as TableColumnData[])"
|
||||
:data="renderData"
|
||||
:bordered="false"
|
||||
:size="size"
|
||||
:size="sizeof"
|
||||
:style="highlightRow"
|
||||
style="margin-bottom: 40px"
|
||||
:filter-icon-align-left="alignLeft"
|
||||
@change="handleSortChange"
|
||||
@page-change="onPageChange"
|
||||
>
|
||||
<template #index="{ rowIndex }">
|
||||
{{ rowIndex + 1 + (pagination.current - 1) * pagination.size }}
|
||||
<template #publishTime="{ record }">
|
||||
{{ dayjs(record.publishTime).format('YYYY-MM-DD HH:mm') }}
|
||||
</template>
|
||||
<template #enabled="{ record }">
|
||||
<a-switch
|
||||
:model-value="record.enabled"
|
||||
:checked-value="true"
|
||||
:unchecked-value="false"
|
||||
@change="enabledStatus(record)"
|
||||
/>
|
||||
<template #isRead="{ record }">
|
||||
{{ record.isRead == true? '已读' : '未读' }}
|
||||
</template>
|
||||
<template #operations="{ record }">
|
||||
<a-button
|
||||
type="outline"
|
||||
size="small"
|
||||
status="success"
|
||||
:prem="record"
|
||||
style="padding: 7px;margin-right: 10px"
|
||||
style="padding: 7px; margin-right: 10px"
|
||||
@click="handleRead(record)"
|
||||
>
|
||||
<template #icon><icon-list /></template>
|
||||
详情
|
||||
@ -127,7 +105,7 @@
|
||||
<a-pagination
|
||||
style="float: right; position: relative; right: 1px; bottom: 25px"
|
||||
:total="pagination.total"
|
||||
:size="size"
|
||||
:size="sizeof"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
@ -142,29 +120,27 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import { UserRecord, UserParams } from '@/api/user';
|
||||
import dayjs from 'dayjs';
|
||||
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 { useUserStore } from '@/store';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import { useBulletinsStore } from '@/store';
|
||||
import router from '@/router';
|
||||
import useTableOption from '@/hooks/table-option';
|
||||
import NoticeEdit from '@/views/notification/noticeSet/components/notice-edit.vue';
|
||||
import { BulletinsRecord } from '@/api/bulletins';
|
||||
|
||||
const generateFormModel = () => {
|
||||
return {
|
||||
title: '',
|
||||
states: '',
|
||||
state: '',
|
||||
publishTimeBegin: '',
|
||||
publishTimeEnd: '',
|
||||
};
|
||||
};
|
||||
|
||||
const { loading, setLoading } = useLoading(true);
|
||||
const { t } = useI18n();
|
||||
const renderData = ref<UserRecord[]>([]);
|
||||
const renderData = ref<BulletinsRecord[]>([]);
|
||||
const formModel = ref(generateFormModel());
|
||||
|
||||
const {
|
||||
@ -178,42 +154,30 @@
|
||||
} = useTableOption();
|
||||
const sizeof=useTableOption().size;
|
||||
|
||||
const userStore = useUserStore();
|
||||
const bulletinsStore = useBulletinsStore();
|
||||
|
||||
const pagination: Pagination = {
|
||||
page: 1,
|
||||
const pagination: any = {
|
||||
size: 10,
|
||||
current: 1,
|
||||
total: null,
|
||||
current: 1
|
||||
};
|
||||
|
||||
const columns = computed<TableColumnData[]>(() => [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'index',
|
||||
slotName: 'index',
|
||||
width: 60,
|
||||
},
|
||||
{
|
||||
title: '标题',
|
||||
dataIndex: 'title',
|
||||
},
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'publishTime',
|
||||
slotName: 'publishTime',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('时间'),
|
||||
dataIndex: 'publishTimeBegin',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('状态'),
|
||||
dataIndex: 'states',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
title: '状态',
|
||||
dataIndex: 'isRead',
|
||||
slotName: 'isRead',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
@ -223,27 +187,26 @@
|
||||
]);
|
||||
const statusOptions = computed<SelectOptionData[]>(() => [
|
||||
{
|
||||
label: t('已发布'),
|
||||
label: '已读',
|
||||
value: 'true',
|
||||
},
|
||||
{
|
||||
label: t('未发布'),
|
||||
label: '未读',
|
||||
value: 'false',
|
||||
},
|
||||
]);
|
||||
|
||||
// 获取公告列表
|
||||
const fetchData = async (
|
||||
params: UserParams = { page: 1, size: 10, current: 1 }
|
||||
params: BulletinsRecord = { size: 10, current: 1 }
|
||||
) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await userStore.getUserList(params);
|
||||
const res = await bulletinsStore.getBulletinsList(params);
|
||||
renderData.value = res.data.records;
|
||||
pagination.page = res.data.page;
|
||||
pagination.current = res.data.current;
|
||||
pagination.total = res.data.total;
|
||||
pagination.size = res.data.size;
|
||||
} catch (err) {
|
||||
// you can report use errorHandler or other
|
||||
} finally {
|
||||
@ -251,12 +214,35 @@
|
||||
}
|
||||
};
|
||||
|
||||
// 高亮行
|
||||
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 UserParams);
|
||||
} as unknown as BulletinsRecord);
|
||||
};
|
||||
|
||||
// 分页发生改变
|
||||
@ -267,8 +253,8 @@
|
||||
};
|
||||
|
||||
// 数据条数改变
|
||||
const onSizeChange = (size: number) => {
|
||||
pagination.size = size;
|
||||
const onSizeChange = (total: number) => {
|
||||
pagination.total = total;
|
||||
search();
|
||||
};
|
||||
|
||||
@ -283,36 +269,8 @@
|
||||
const alignLeft = ref(false);
|
||||
const handleSortChange = (data: any, extra: any, currentDataSource: any) => {};
|
||||
|
||||
// 是否启用
|
||||
const enabledStatus = async (record: string) => {
|
||||
record.enabled = !record.enabled;
|
||||
const res = await userStore.enabledUser(record.id);
|
||||
if (res.status === 200) {
|
||||
Message.success({
|
||||
content: t('modify.status.sucess'),
|
||||
duration: 3 * 1000,
|
||||
});
|
||||
} else {
|
||||
Message.error({
|
||||
content: t('modify.status.fail'),
|
||||
duration: 3 * 1000,
|
||||
});
|
||||
}
|
||||
};
|
||||
watch(() => columns.value, deepClone, { deep: true, immediate: true });
|
||||
|
||||
// 删除
|
||||
// const handleDelete = async (record: UserRecord) => {
|
||||
// const res = await userStore.removeUser(record.id);
|
||||
// if (res.status === 200) {
|
||||
// Message.success({
|
||||
// content: '删除成功',
|
||||
// duration: 5 * 1000,
|
||||
// });
|
||||
// search();
|
||||
// }
|
||||
// };
|
||||
|
||||
watch(() => columns.value, deepClone, { deep: true, immediate: true });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -320,40 +278,8 @@
|
||||
padding: 0 20px 20px 20px;
|
||||
}
|
||||
|
||||
.content-col {
|
||||
flex: 1;
|
||||
padding-left: 24px; /* 左侧内边距 */
|
||||
}
|
||||
|
||||
.message-item {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
|
||||
margin-bottom: 16px; /* 卡片之间的间距 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.scroll-wrapper {
|
||||
height: calc(62vh); /* 调整高度以适应页面布局 */
|
||||
overflow-y: auto; /* 当内容超出时显示滚动条 */
|
||||
border: 1px solid #d9d9d9; /* 边框颜色调淡 */
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.load-trigger {
|
||||
height: 1px; /* 设置高度为1px，使其不占据太多空间 */
|
||||
opacity: 0; /* 使其不可见 */
|
||||
}
|
||||
|
||||
.loading, .no-more {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
color: #999;
|
||||
.highlight-class {
|
||||
background-color: yellow; /* 这里可以修改为你想要的高亮颜色 */
|
||||
font-weight: bold; /* 可以添加其他样式，如加粗等 */
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user