From 8421ce283636a1b255c099e511fb002b7d073cdd Mon Sep 17 00:00:00 2001
From: Kven <2955163637@qq.com>
Date: Mon, 13 Jan 2025 12:14:12 +0800
Subject: [PATCH] =?UTF-8?q?fix(pinia=E6=A8=A1=E5=9D=97=EF=BC=8C=E5=B9=B6?=
 =?UTF-8?q?=E5=B0=86=E6=B6=88=E6=81=AF=E6=A8=A1=E5=9D=97=E5=8A=A0=E5=85=A5?=
 =?UTF-8?q?=E7=89=88=E6=9C=AC=E7=AE=A1=E7=90=86):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E4=B9=8B=E5=89=8D=E7=9A=84=E9=A1=B5=E9=9D=A2=E8=AF=B7=E6=B1=82?=
 =?UTF-8?q?=E5=A4=B1=E6=95=88=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

BUG出现在pinia的defineStore方法上，第一个参数是写唯一标识，此前错误的将所有都写成了dept，故导致出现请求失效BUG
---
 src/store/modules/bulle-mgmt/index.ts         |   2 +-
 src/store/modules/bulletins/index.ts          |   2 +-
 src/store/modules/message-mgmt/index.ts       |   2 +-
 src/store/modules/messages/index.ts           |   2 +-
 src/views/notification/bulletin/index.vue     |  37 +-
 .../notice/components/message-edit.vue        | 475 ++++++++++++++++++
 src/views/notification/notice/index.vue       | 352 +++++++++++++
 7 files changed, 849 insertions(+), 23 deletions(-)
 create mode 100644 src/views/notification/notice/components/message-edit.vue
 create mode 100644 src/views/notification/notice/index.vue

diff --git a/src/store/modules/bulle-mgmt/index.ts b/src/store/modules/bulle-mgmt/index.ts
index 6ee0642..a0c7886 100644
--- a/src/store/modules/bulle-mgmt/index.ts
+++ b/src/store/modules/bulle-mgmt/index.ts
@@ -18,7 +18,7 @@ import {
 } from '@/api/bulletin-mgmt';
 import { bulletinsStore } from '@/store/modules/bulle-mgmt/type';
 
-const useBulletinStore = defineStore('dept', {
+const useBulletinStore = defineStore('bulletin-mgmt', {
   state: ():bulletinsStore  => ({
     remark: undefined,
     title: undefined,
diff --git a/src/store/modules/bulletins/index.ts b/src/store/modules/bulletins/index.ts
index e2655e6..3923caa 100644
--- a/src/store/modules/bulletins/index.ts
+++ b/src/store/modules/bulletins/index.ts
@@ -6,7 +6,7 @@ import {
 } from '@/api/bulletins';
 import { bulletinsStore } from './type';
 
-const useBulletinsStore = defineStore('auth', {
+const useBulletinsStore = defineStore('bulletin', {
   state: (): bulletinsStore => ({
     title: undefined,
     state: undefined,
diff --git a/src/store/modules/message-mgmt/index.ts b/src/store/modules/message-mgmt/index.ts
index 845ec1b..d157fdd 100644
--- a/src/store/modules/message-mgmt/index.ts
+++ b/src/store/modules/message-mgmt/index.ts
@@ -10,7 +10,7 @@ import {
 } from '@/api/message-mgmt';
 import { messageStore } from '@/store/modules/message-mgmt/type';
 
-const useMessageStore = defineStore('dept', {
+const useMessageStore = defineStore('message-mgmt', {
   state: ():messageStore  => ({
     remark: undefined,
     title: undefined,
diff --git a/src/store/modules/messages/index.ts b/src/store/modules/messages/index.ts
index fe8bd11..4740340 100644
--- a/src/store/modules/messages/index.ts
+++ b/src/store/modules/messages/index.ts
@@ -10,7 +10,7 @@ import {
 } from '@/api/messages';
 import { messagesStore } from '@/store/modules/messages/type';
 
-const useMessagesStore = defineStore('dept', {
+const useMessagesStore = defineStore('message', {
   state: ():messagesStore  => ({
     remark: undefined,
     title: undefined,
diff --git a/src/views/notification/bulletin/index.vue b/src/views/notification/bulletin/index.vue
index eff4c35..24c3acf 100644
--- a/src/views/notification/bulletin/index.vue
+++ b/src/views/notification/bulletin/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">
@@ -28,7 +28,7 @@
                   <a-range-picker
                     show-time
                     format="YYYY-MM-DD HH:mm"
-                    @ok="timeRangs"
+                    @ok="timeRang"
                   />
                 </a-form-item>
               </a-col>
@@ -148,7 +148,6 @@
           </a-tooltip>
         </a-col>
       </a-row>
-
       <a-table
         row-key="id"
         :loading="loading"
@@ -170,12 +169,12 @@
           <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)"-->
-<!--          />-->
+          <!--          <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
@@ -187,15 +186,15 @@
         </template>
         <template #operations="{ record }">
           <a-button
-          type="outline"
-          size="small"
-          status="success"
-          style="padding: 7px; margin-right: 10px"
-          @click="openDetail(record.id)"
-        >
-          <template #icon><icon-list /></template>
-          详情
-        </a-button>
+            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"
@@ -379,7 +378,7 @@
     search();
   };
   // 时间范围
-  const timeRangs = (dateString: string[]) => {
+  const timeRang = (dateString: string[]) => {
     // eslint-disable-next-line prefer-destructuring
     formModel.value.publishTimeBegin = dateString[0];
     // eslint-disable-next-line prefer-destructuring
diff --git a/src/views/notification/notice/components/message-edit.vue b/src/views/notification/notice/components/message-edit.vue
new file mode 100644
index 0000000..7343887
--- /dev/null
+++ b/src/views/notification/notice/components/message-edit.vue
@@ -0,0 +1,475 @@
+<template>
+  <a-button v-permission="['message:notice:create']" v-if="props.isCreate" type="primary" @click="handleClick">
+    <template #icon><icon-plus /></template>
+    新建
+  </a-button>
+  <a-button
+    v-permission="['message:notice:update']"
+    v-if="!props.isCreate"
+    type="outline"
+    size="small"
+    :style="{ marginRight: '10px', padding: '7px' }"
+    @click="handleClick"
+  >
+    <template #icon><icon-edit /></template>
+    修改
+  </a-button>
+
+  <a-modal
+    width="900px"
+    :visible="visible"
+    @cancel="handleCancel"
+  >
+    <template #title>{{ modalTitle }}</template>
+<!--      <DynamicForm :prem="fieIds" />-->
+    <a-form ref="CreateRef" :model="formData" :style="{ width: '650px' }">
+      <a-form-item
+        field="userId"
+        label="用户"
+        :validate-trigger="['change', 'input']"
+        :rules="[
+          { message: '请输入用戶' },
+        ]"
+      >
+        <a-input-tag
+          v-model="formData.userIds"
+          placeholder='请选择用戶'
+          :value=formData.userIds
+          @click="queryDeptTree"
+        />
+      </a-form-item>
+      <a-form-item
+        field="title"
+        label="标题"
+        :validate-trigger="['change', 'input']"
+        :rules="[
+          { required: true, message: '请输入标题' },
+        ]"
+      >
+        <a-input
+          v-model="formData.title"
+          placeholder='请输入消息标题'
+        />
+      </a-form-item>
+      <a-form-item
+        field="remark"
+        label="备注"
+        :validate-trigger="['change', 'input']"
+      >
+        <!--        v-if="isCreate"-->
+        <a-input
+          v-model="formData.attachment"
+          placeholder='请输入备注'
+        />
+      </a-form-item>
+      <div style="display: flex;margin-left: 75px">
+        <a-form-item
+          field="sms"
+          label="短信"
+          :validate-trigger="['change', 'input']"
+        >
+          <a-switch
+            v-model="formData.sms"
+            :checked-value="true"
+            :unchecked-value="false"
+          />
+        </a-form-item>
+        <a-form-item
+          field="email"
+          label="邮件"
+          :validate-trigger="['change', 'input']"
+        >
+          <a-switch
+            v-model="formData.email"
+            :checked-value="true"
+            :unchecked-value="false"
+          />
+        </a-form-item>
+
+      </div>
+<!--      <a-form-item-->
+<!--        field="attachmentIds"-->
+<!--        label='附件'-->
+<!--      >-->
+<!--        &lt;!&ndash;        v-if="isCreate"&ndash;&gt;-->
+<!--        <a-input-->
+<!--          type="file"-->
+<!--          v-model="formData.attachmentIds"-->
+<!--        />-->
+<!--      </a-form-item>-->
+      <a-form-item field="content" label='内容' :rules="[{ required: true}]">
+        <div style="border: 1px solid #ccc;min-width: 700px">
+          <Toolbar
+            style="border-bottom: 1px solid #ccc"
+            :editor="editorRef"
+            :default-config="toolbarConfig"
+            :mode="mode"
+            :class="{'fullscreen-toolbar': isFullScreen}"
+          />
+          <Editor
+            v-model="formData.content"
+            style="overflow-y: hidden;height: 200px;"
+            :default-config="editorConfig"
+            :mode="mode"
+            :class="{'fullscreen-editor': isFullScreen}"
+            @on-created="handleCreated"
+          />
+        </div>
+        <!--        <a-textarea v-model="formData.content" placeholder="请输入公告内容" style="height: 100px" />-->
+      </a-form-item>
+    </a-form>
+    <template #footer>
+      <a-button class="editor-button"  @click="handleCancel">取消</a-button>
+      <a-button class="editor-button"  type="primary" @click="handleSubmit">确定</a-button>
+    </template>
+  </a-modal>
+
+<!--  部门树模态框-->
+  <a-modal
+    width="900px"
+    :visible="deptVisible"
+    @cancel="deptTreeCancel"
+  >
+    <template #title>发送用户</template>
+    <div style="display: flex;height: 520px">
+      <a-card style="margin-right: 10px;width: 30%">
+        <a-tree
+          :data="deptTreeData"
+          :field-names="{ title: 'name', key: 'id', children: 'children' }"
+          style="margin-bottom: 8px; max-width: 240px"
+          @select="handleClickTree"
+          @check="handleCheckTree"
+        >
+        </a-tree>
+      </a-card>
+      <a-card style="flex: 1">
+        <a-button type="primary" style="margin-bottom: 10px" @click="handleCheckAllUsers">全选</a-button>
+        <a-table
+          :data="selectedDepartmentMembers"
+          :columns="columns"
+          style="height: 520px">
+          <template #id="{ record }">
+            <a-checkbox v-model="selectedIds" :value="record.userId"> </a-checkbox>
+          </template>
+          <template #username="{ record }">
+            {{ record.username }}
+          </template>
+        </a-table>
+      </a-card>
+    </div>
+    <template #footer>
+      <a-button class="editor-button" @click="deptTreeCancel" >取消</a-button>
+      <a-button class="editor-button" type="primary" @click="deptTreeSubmit" >确定</a-button>
+    </template>
+  </a-modal>
+
+</template>
+
+<script lang="ts" setup>
+  import useVisible from '@/hooks/visible';
+  import { computed, defineEmits, PropType, ref, shallowRef, onBeforeUnmount, reactive, onMounted } from 'vue';
+  import { CreateRecord } from '@/api/user';
+  import { FormInstance } from '@arco-design/web-vue/es/form';
+  import { Message } from '@arco-design/web-vue';
+  import { useMessageStore } from '@/store';
+  import DynamicForm from '@/components/dynamic-form/index.vue';
+  import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
+  import { IEditorConfig } from '@wangeditor/editor'
+  import '@wangeditor/editor/dist/css/style.css'
+  import { getAllDeptTree } from '@/api/dept';
+  import configArcoStyleImportPlugin from '../../../../../config/plugin/arcoStyleImport';
+
+  const props = defineProps({
+    prem: {
+      type: Object as PropType<CreateRecord>,
+    },
+    isCreate: Boolean,
+  });
+  // 部门树模态框状态
+  const deptVisible=ref(false);
+  const emit = defineEmits(['refresh']);
+  const modalTitle = computed(() => {
+    return props.isCreate ? '创建消息' : '编辑消息';
+  });
+  const { visible, setVisible } = useVisible(false);
+  const checkKeys = ref<number[]>([]);
+  const editorRef = shallowRef()
+  const handleCreated = (editor: any) => {
+    editorRef.value = editor; // 记录 editor 实例，重要！
+  }
+  const CreateRef = ref<FormInstance>();
+  const formData = ref<any>({
+    ...props.prem,
+  });
+  const messageStore = useMessageStore();
+  const isFullScreen = ref(false);
+  const mode = 'default';
+  const selectedIds= ref<number[]>([]);
+  const toolbarConfig = { excludeKeys: ['uploadVideo', 'insertImage','insertVideo']}
+  const columns = computed<any[]>(()=>[
+    {
+      title: '操作',
+      dataIndex: 'id',
+      slotName: 'id',
+    },
+    {
+      title: '用户',
+      dataIndex: 'username',
+    },
+  ])
+
+  // const fieIds = ref(
+  //   {
+  //     userId:{
+  //       label: '用戶',
+  //       component: 'input',
+  //       type:'text'
+  //     },
+  //     title:{
+  //       label: '标题',
+  //       component: 'input',
+  //       type:'text'
+  //     },
+  //     remark:{
+  //       label: '备注',
+  //       component: 'input',
+  //       type:'text'
+  //     },
+  //     sms:{
+  //       label: '短信',
+  //       component: 'switch',
+  //       type:'switch'
+  //     },
+  //     email:{
+  //       label: '邮件',
+  //       component:'switch',
+  //       type:'switch'
+  //     },
+  //     attachmentIds:{
+  //       label: '附件',
+  //       component: 'input',
+  //       type:'text'
+  //     },
+  //     richEditor:{
+  //       label: '内容',
+  //       component: 'input',
+  //       type:'text'
+  //     },
+  //   },
+  // );
+  const deptTreeData = ref([
+    {
+      id: '1',
+      name: '总部门',
+      children: [
+        {
+          id: '2',
+          name: '部门1',
+          members: [
+            { id: '101', username: '成员1' },
+            { id: '102', username: '成员2' }
+          ]
+        },
+        {
+          id: '3',
+          name: '部门2',
+          members: [
+            { id: '201', username: '成员3' },
+            { id: '202', username: '成员4' }
+          ]
+        },
+        {
+          id: '4',
+          name: '部门3',
+          members: [
+            { id: '203', username: '成员5' },
+            { id: '204', username: '成员6' }
+          ]
+        }
+      ]
+    }
+  ]);
+  const selectedDepartmentMembers: any = ref([]);
+  const renderData = ref<any[]>([]);
+  // 获取部门树
+  const getDeptTree = async () => {
+    const res = await getAllDeptTree(1);
+    if (res.status === 200) {
+      deptTreeData.value = res.data;
+    }
+  }
+  // 部门树查询
+  const queryDeptTree= async ()=>{
+    deptVisible.value = true;
+  }
+
+  // 广度优先遍历树，获取选中的成员
+  const getSelectedMembers = (treeData: any[], selectedKeys: number[]) => {
+    const queue:any = [...treeData];
+    const selectedMembers: any[] = [];
+    while (queue.length > 0) {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const node = queue.shift()!;
+      if (selectedKeys.includes(node.id)) {
+        if (node.members) {
+          selectedMembers.push(...node.members);
+        }
+      }
+      if (node.children) {
+        queue.push(...node.children);
+      }
+    }
+    return selectedMembers;
+  }
+
+
+  // 部门树被点击
+  const handleClickTree = (id: number[]) => {
+    // 假设 '1' 是总部门的键
+    if (id[0] === 1 && id.length === 1) {
+      // 广度优先遍历树，获取所有成员
+      const allMembers: any[] = [];
+      const queue:any = [...deptTreeData.value];
+      while (queue.length > 0) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const node = queue.shift()!;
+        if (node.members) {
+          allMembers.push(...node.members);
+        }
+        if (node.children) {
+          queue.push(...node.children);
+        }
+      }
+      selectedDepartmentMembers.value = allMembers;
+      renderData.value = selectedDepartmentMembers.value;
+      return;
+    }
+    const Members = getSelectedMembers(deptTreeData.value, id);
+    selectedDepartmentMembers.value = Members;
+  }
+  // 部门树被选中
+  const handleCheckTree = (id: number[]) => {
+    if (id[0] === 1 ) { // 假设 '1' 是总部门的键
+      const allKeys: number[] = [];
+      const traverseTree = (node: any) => {
+        if (node.members) {
+          node.members.forEach((member: any) => {
+            allKeys.push(member.userId);
+          });
+        }
+        if (node.children) {
+          node.children.forEach((child: any) => {
+            traverseTree(child);
+          });
+        }
+      };
+      deptTreeData.value.forEach((node: any) => {
+        traverseTree(node);
+      });
+      selectedIds.value = allKeys;
+
+    } else {
+      const selectedKeys = getSelectedMembers(deptTreeData.value, id);
+      selectedIds.value = selectedKeys.map(item => item.userId);
+    }
+  };
+
+  // 组件被点击
+  const handleClick = () => {
+    setVisible(true);
+  };
+
+  const editorConfig: Partial<IEditorConfig> = { placeholder: '请输入内容...',MENU_CONF:{
+      // 隐藏菜单
+      hide: ['code', 'table', 'emoticon', 'uploadImage', 'video', 'todo', 'specialChar'],
+      // 配置上传图片
+      uploadImage: {
+        base64LimitSize: 1024 * 1024,
+        // server: '/api/rest/bulletin/1/add',
+      }
+    }
+  }
+  // 提交
+  const handleSubmit = async () => {
+    const valid = await CreateRef.value?.validate();
+    if (!valid) {
+      formData.value.permissionIds = checkKeys.value;
+      // 新增
+      if (props.isCreate) {
+        // formData.value.username = formData.value.email;
+        const res = await messageStore.createMessage(formData.value);
+        if (res.status === 200) {
+          Message.success({
+            content: '新建成功',
+            duration: 5 * 1000,
+          });
+          emit('refresh');
+          setVisible(false);
+        }
+        CreateRef.value?.resetFields();
+      }
+    }
+  };
+
+  // 组件销毁时，也及时销毁编辑器
+  onBeforeUnmount(() => {
+    const editor = editorRef.value
+    if (editor == null) return
+    editor.destroy()
+  })
+
+  // 关闭
+  const handleCancel = async () => {
+    checkKeys.value = [];
+    setVisible(false);
+  };
+
+  // 部门树模态框提交
+  const deptTreeSubmit = () => {
+    deptVisible.value = false;
+    formData.value.userIds = selectedIds.value;
+  };
+
+  // 选择所有用户
+  const handleCheckAllUsers = () => {
+    if(selectedIds.value.length ===0 ) {
+      handleCheckTree([1]);
+    } else {
+      selectedIds.value = [];
+    }
+
+  };
+
+
+  // 部门树模态框
+  const deptTreeCancel = () => {
+    deptVisible.value = false;
+  };
+  onMounted(async () => {
+    await getDeptTree();
+  });
+</script>
+
+<style scoped>
+  .fullscreen-toolbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 50px; /* 根据需要调整高度 */
+    z-index: 999;
+    background-color: white;
+  }
+  .fullscreen-editor {
+    position: fixed;
+    top: 50px; /* 根据 toolbar 的高度调整 */
+    left: 0;
+    width: 100%;
+    height: calc(100% - 50px); /* 减去 toolbar 的高度 */
+    z-index: 999;
+    background-color: white;
+  }
+  .editor-button{
+    position: static
+  }
+</style>
diff --git a/src/views/notification/notice/index.vue b/src/views/notification/notice/index.vue
new file mode 100644
index 0000000..10ba89b
--- /dev/null
+++ b/src/views/notification/notice/index.vue
@@ -0,0 +1,352 @@
+<template>
+  <div class="container">
+    <Breadcrumb :items="['通知管理', '消息设置']" />
+    <a-card class="general-card" title=" ">
+      <a-row>
+        <a-col :flex="1">
+          <a-form
+            :model="formModel"
+            :label-col-props="{ span: 6 }"
+            :wrapper-col-props="{ span: 18 }"
+            label-align="right"
+          >
+            <a-row :gutter="18">
+              <a-col :span="9">
+                <a-form-item
+                  field="title"
+                  label='标题'
+                >
+                  <a-input
+                    v-model="formModel.title"
+                    style="width: 360px"
+                    placeholder='请输入标题'
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="10">
+                <a-form-item field="Time" label='时间'>
+                  <a-range-picker
+                    show-time
+                    format="YYYY-MM-DD HH:mm"
+                    @ok="timeRangs"
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="9">
+                <a-form-item
+                  field="name"
+                  label='名称'
+                >
+                  <a-input
+                    v-model="formModel.name"
+                    style="width: 360px"
+                    placeholder='请输入名称'
+                  />
+                </a-form-item>
+              </a-col>
+
+
+
+            </a-row>
+          </a-form>
+        </a-col>
+        <a-divider style="height: 84px" direction="vertical" />
+        <a-col :flex="'86px'" style="text-align: right">
+          <a-space direction="vertical" :size="18">
+            <a-button type="primary" @click="search">
+              <template #icon>
+                <icon-search />
+              </template>
+              查询
+            </a-button>
+            <a-button @click="reset">
+              <template #icon>
+                <icon-refresh />
+              </template>
+              重置
+            </a-button>
+          </a-space>
+        </a-col>
+      </a-row>
+
+      <a-divider style="margin-top: 0" />
+      <a-row>
+        <a-col :span="12">
+          <a-space>
+            <MessageEdit ref="createUserRef" :is-create="true" @refresh="search" />
+          </a-space>
+        </a-col>
+        <a-col
+          :span="12"
+          style="
+            display: flex;
+            align-items: center;
+            justify-content: end;
+            padding-bottom: 20px;
+          "
+        >
+          <a-tooltip content='刷新'>
+            <div class="action-icon" @click="search">
+              <icon-refresh size="18" />
+            </div>
+          </a-tooltip>
+
+          <a-dropdown @select="handleSelectDensity">
+            <a-tooltip content='密度'>
+              <div class="action-icon"><icon-line-height size="18" /></div>
+            </a-tooltip>
+            <template #content>
+              <a-doption
+                v-for="item in densityList"
+                :key="item.value"
+                :value="item.value"
+                :class="{ active: item.value === size }"
+              >
+                <span>{{ item.name }}</span>
+              </a-doption>
+            </template>
+          </a-dropdown>
+
+          <a-tooltip content='列设置'>
+            <a-popover
+              trigger="click"
+              position="bl"
+              @popup-visible-change="popupVisibleChange"
+            >
+              <div class="action-icon"><icon-settings size="18" /></div>
+              <template #content>
+                <div id="tableSetting">
+                  <div
+                    v-for="(item, index) in showColumns"
+                    :key="item.dataIndex"
+                    class="setting"
+                  >
+                    <div style="margin-right: 4px; cursor: move">
+                      <icon-drag-arrow />
+                    </div>
+                    <div>
+                      <a-checkbox
+                        v-model="item.checked"
+                        @change="
+                          handleChange($event, item as TableColumnData, index)
+                        "
+                      >
+                      </a-checkbox>
+                    </div>
+                    <div class="title">
+                      {{ item.title === '#' ? '序列号' : item.title }}
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </a-popover>
+          </a-tooltip>
+        </a-col>
+      </a-row>
+
+      <a-table
+        row-key="id"
+        :loading="loading"
+        :pagination="false"
+        :columns="(cloneColumns as TableColumnData[])"
+        :data="renderData"
+        :bordered="false"
+        :size="size"
+        style="margin-bottom: 40px"
+        @page-change="onPageChange"
+      >
+        <template #id="{ record }">
+          <a-checkbox v-model="selectedIds" :value="record.id" style="margin-left: -5px"> </a-checkbox>
+        </template>
+        <template #createTime="{ record }">
+          {{ dayjs(record.createTime).format('YYYY-MM-DD HH:mm') }}
+        </template>
+        <template #isRead="{ record }">
+          {{ record.isRead == true? '已读' : '未读' }}
+        </template>
+
+      </a-table>
+      <a-pagination
+        style="float: right; position: relative; right: 1px; bottom: 25px"
+        :total="pagination.total"
+        :size="size"
+        show-total
+        show-jumper
+        show-page-size
+        @page-size-change="onSizeChange"
+        @change="onPageChange"
+      />
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, onMounted, ref, watch } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
+  import { useMessageStore } from '@/store';
+  import useTableOption from '@/hooks/table-option';
+  import usePagination from '@/hooks/pagination';
+  import dayjs from 'dayjs';
+  import { MessageRecord } from '@/api/message-mgmt';
+  import MessageEdit from './components/message-edit.vue';
+
+  const generateFormModel = () => {
+    return {
+      userId: '',
+      title: '',
+      type: '',
+      name: '',
+      system: '',
+      isRead: '',
+      createAtBegin: '',
+      createAtEnd: '',
+    };
+  };
+
+  const { loading, setLoading } = useLoading(true);
+  const renderData = ref<MessageRecord[]>([]);
+  const formModel = ref(generateFormModel());
+  const selectedIds= ref<number[]>([]);
+  const {
+    cloneColumns,
+    showColumns,
+    densityList,
+    size,
+    handleSelectDensity,
+    handleChange,
+    popupVisibleChange,
+    deepClone,
+  } = useTableOption();
+
+  const messageStore = useMessageStore();
+
+  const { pagination,setPagination } = usePagination();
+
+  const columns = computed<TableColumnData[]>(() => [
+    // {
+    //   title: '用户编号',
+    //   dataIndex: 'userId',
+    // },
+    {
+      title: '标题',
+      dataIndex: 'title',
+    },
+    {
+      title:'时间',
+      dataIndex: 'createTime',
+      slotName: 'createTime',
+
+    },
+    // {
+    //   title: '用户名称',
+    //   dataIndex: 'username',
+    // },
+    {
+      title: '状态',
+      dataIndex: 'isRead',
+      slotName: 'isRead',
+      sortable: {
+        sortDirections: ['ascend', 'descend'],
+      },
+    },
+
+  ]);
+  // 获取消息列表
+  const fetchData = async (
+    params = { size: 10, current: 1 }
+  ) => {
+    setLoading(true);
+    try {
+      const res: any = await messageStore.queryMessageList(params);
+      renderData.value = res.data.records;
+      setPagination(res.data);
+    } catch (err) {
+      // you can report use errorHandler or other
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 查询
+  const search = () => {
+    fetchData({
+      ...pagination,
+      ...formModel.value,
+    } as unknown as MessageRecord);
+    selectedIds.value = [];
+  };
+
+  // 分页发生改变
+  const onPageChange = (current: number) => {
+    pagination.pages = current;
+    pagination.current = current;
+    search();
+  };
+  // 时间范围
+  const timeRangs = (dateString: string[]) => {
+    // eslint-disable-next-line prefer-destructuring
+    formModel.value.createAtBegin = dateString[0];
+    // eslint-disable-next-line prefer-destructuring
+    formModel.value.createAtEnd = dateString[1];
+  };
+
+  // 数据条数改变
+  const onSizeChange = (Size: number) => {
+    pagination.size = Size;
+    search();
+  };
+
+
+  // 重置
+  const reset = () => {
+    formModel.value = generateFormModel();
+  };
+
+  onMounted(() => {
+    search();
+  });
+  watch(() => columns.value, deepClone, { deep: true, immediate: true });
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Notice',
+  };
+</script>
+
+
+<style scoped lang="less">
+  .container {
+    padding: 0 20px 20px 20px;
+  }
+
+  :deep(.arco-table-th) {
+    &:last-child {
+      .arco-table-th-item-title {
+        margin-left: 16px;
+      }
+    }
+  }
+
+  .action-icon {
+    margin-left: 12px;
+    cursor: pointer;
+  }
+
+  .active {
+    color: #0960bd;
+    background-color: #e3f4fc;
+  }
+
+  .setting {
+    display: flex;
+    align-items: center;
+    width: 200px;
+
+    .title {
+      margin-left: 12px;
+      cursor: pointer;
+    }
+  }
+</style>
\ No newline at end of file