perf(公告模块): 代码补充

1.系统公告管理pinia代码补充
2.个人公告管理pinia代码补充

src/api/bulletin-mgmt.ts

@@ -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`);
+}

src/api/bulletins.ts

@@ -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,
+  });
+}

src/store/modules/bulle-mgmt/index.ts

@@ -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;

src/store/modules/bulle-mgmt/type.ts

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

src/store/modules/bulletins/index.ts

@@ -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;

src/store/modules/bulletins/type.ts

@@ -0,0 +1,7 @@
+// export type bulletinsType = '' | '*' | 'admin' | 'user' | string[];
+export interface bulletinsStore {
+  title?: string;
+  state?: string[];
+  publishTimeBegin?: string;
+  publishTimeEnd?: string;
+}

src/views/system/bulletin/components/bulletin-edit.vue

@@ -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>

src/views/system/bulletin/components/detail.vue

@@ -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>
+
+

src/views/system/bulletin/index.vue

@@ -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-space>
+            <a-button type="primary" @click="publishBulletin(selectedIds)">
-          <a-button style="margin-left: 20px" @click="generateExcel">
+              <template #icon><icon-public /></template>
-            <template #icon>
+              发布
-              <icon-download size="18" />
-            </template>
-            导出
             </a-button>
+          </a-space>
         </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,19 +158,31 @@
         :bordered="false"
         :size="size"
         style="margin-bottom: 40px"
-        :filter-icon-align-left="alignLeft"
-        @change="handleSortChange"
         @page-change="onPageChange"
       >
-        <template #index="{ rowIndex }">
+        <template #id="{ record }">
-          {{ rowIndex + 1 + (pagination.current - 1) * pagination.size }}
+          <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 }">
@@ -196,27 +191,47 @@
           size="small"
           status="success"
           style="padding: 7px; margin-right: 10px"
+          @click="openDetail(record.id)"
         >
           <template #icon><icon-list /></template>
           详情
         </a-button>
-
+          <BulletinEdit
-          <NoticeEdit
             ref="editUserRef"
             :prem="record"
             :is-create="false"
             @refresh="fetchData"
           />
+          <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)"
+          >
+            <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 { computed, onMounted, ref, watch } from 'vue';
-  import { useI18n } from 'vue-i18n';
   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 { useBulletinStore } from '@/store';
-  import { Message } from '@arco-design/web-vue';
   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<BulletinRecord[]>([]);
-  const renderData = ref<UserRecord[]>([]);
   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: '序号',
+      title: '#',
-      dataIndex: 'index',
+      dataIndex: 'id',
-      slotName: 'index',
+      slotName: 'id',
       width: 60,
     },
     {
       title: '标题',
       dataIndex: 'title',
-      sortable: {
-        sortDirections: ['ascend', 'descend'],
-      },
     },
     {
-      title: t('时间'),
+      title: '时间',
       dataIndex: 'publishTimeBegin',
+      slotName: 'publishTime',
       sortable: {
         sortDirections: ['ascend', 'descend'],
       },
     },
     {
-      title: t('状态'),
+      title: '状态',
-      dataIndex: 'states',
+      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('已发布'),
+      label: '已发布',
-      value: 'true',
+      value: 'publish',
     },
     {
-      label: t('未发布'),
+      label: '编辑中',
-      value: 'false',
+      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) => {
+  const onSizeChange = (Size: number) => {
-    pagination.size = size;
+    pagination.size = Size;
     search();
   };
 
-  search();
 
   // 重置
   const reset = () => {
     formModel.value = generateFormModel();
   };
 
-  // 表格内部排序
+  // 是否置顶
-  const alignLeft = ref(false);
+  const handleSwitchChange = async (record: any) => {
-  const handleSortChange = (data: any, extra: any, currentDataSource: any) => {};
+    record.top = !record.top;
-
+    const res = await bulletinStore.toggleBulletin(record.id);
-  // 是否启用
-  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'),
+        content: '修改置顶成功',
         duration: 3 * 1000,
       });
     } else {
       Message.error({
-        content: t('modify.status.fail'),
+        content: '修改置顶失败',
         duration: 3 * 1000,
       });
     }
   };
 
-  // 删除
+  // 打开详情
-  // const handleDelete = async (record: UserRecord) => {
+  function openDetail(id:number): void{
-  //   const res = await userStore.removeUser(record.id);
+    const url = router.resolve({
-  //   if (res.status === 200) {
+      name: 'Detail',
-  //     Message.success({
+      params: {id}
-  //       content: '删除成功',
+    }).href;
-  //       duration: 5 * 1000,
+    router.push(url);
-  //     });
+  };
-  //     search();
-  //   }
-  // };
 
+  // 发布公告
+  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>
 

src/views/user/bulletins/components/detail.vue

@@ -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>
+
+

src/views/user/bulletins/index.vue

@@ -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"
+                  field="isRead"
-                  :label="$t('状态')"
+                  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 }">
+        <template #publishTime="{ record }">
-          {{ rowIndex + 1 + (pagination.current - 1) * pagination.size }}
+          {{ dayjs(record.publishTime).format('YYYY-MM-DD HH:mm') }}
         </template>
-        <template #enabled="{ record }">
+        <template #isRead="{ record }">
-          <a-switch
+          {{ record.isRead == true? '已读' : '未读' }}
-            :model-value="record.enabled"
-            :checked-value="true"
-            :unchecked-value="false"
-            @change="enabledStatus(record)"
-          />
         </template>
         <template #operations="{ record }">
           <a-button
             type="outline"
             size="small"
             status="success"
-            :prem="record"
             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 { useBulletinsStore } from '@/store';
-  import { Message } from '@arco-design/web-vue';
+  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<BulletinsRecord[]>([]);
-  const renderData = ref<UserRecord[]>([]);
   const formModel = ref(generateFormModel());
 
   const {
@@ -178,42 +154,30 @@
   } = useTableOption();
   const sizeof=useTableOption().size;
 
-  const userStore = useUserStore();
+  const bulletinsStore = useBulletinsStore();
 
-  const pagination: Pagination = {
+  const pagination: any = {
-    page: 1,
     size: 10,
-    current: 1,
+    current: 1
-    total: null,
   };
 
   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('时间'),
+      title: '状态',
-      dataIndex: 'publishTimeBegin',
+      dataIndex: 'isRead',
-      sortable: {
+      slotName: 'isRead',
-        sortDirections: ['ascend', 'descend'],
-      },
-    },
-    {
-      title: t('状态'),
-      dataIndex: 'states',
-      sortable: {
-        sortDirections: ['ascend', 'descend'],
-      },
     },
     {
       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) => {
+  const onSizeChange = (total: number) => {
-    pagination.size = size;
+    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,
-      });
-    }
-  };
-
-  // 删除
-  // 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 {
+  .highlight-class {
-    flex: 1;
+    background-color: yellow; /* 这里可以修改为你想要的高亮颜色 */
-    padding-left: 24px; /* 左侧内边距 */
+    font-weight: bold; /* 可以添加其他样式，如加粗等 */
-  }
-
-  .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;
   }
 </style>