refactor(pagination): 重构分页逻辑并优化相关组件

- 重构 usePagination 钩子，使用 ref 替代直接操作对象属性
- 优化多个组件中的分页相关代码，使用新的 pagination 结构
- 在 bulletin-card 组件中添加空状态卡片样式
- 调整 message-edit 组件，增加消息类型选择功能
- 修改 bulletins 接口，统一字段命名

src/api/bulletins.ts

@@ -1,6 +1,7 @@
 import axios from 'axios';
 
 export interface BulletinsRecord {
+  id?: number;
   title?: string;
   state?: number[];
   top?: boolean;
@@ -13,7 +14,6 @@ export interface BulletinsRecord {
 }
 
 export interface BulletinsList extends BulletinsRecord{
-  id?: number;
   remark: string;
   createBy: string;
   content: string;

src/hooks/pagination.ts

@@ -1,16 +1,24 @@
+import { ref } from 'vue';
 
 export default function usePagination(initValue = false) {
-  const pagination: any = {
+  interface Pagination {
+    page: number;
+    size: number;
+    current: number;
+    total: number;
+  }
+
+  const pagination = ref<Pagination>({
     page: 1,
     size: 10,
     current: 1,
     total: 0,
-  };
+  });
-  const setPagination = (value: any) => {
+  const setPagination = (value: Pagination) => {
-    pagination.page = value.page;
+    pagination.value.page = value.page;
-    pagination.size = value.size;
+    pagination.value.size = value.size;
-    pagination.current = value.current;
+    pagination.value.current = value.current;
-    pagination.total = value.total;
+    pagination.value.total = value.total;
   };
   return {
     pagination,

src/views/iot/device/index.vue

@@ -307,21 +307,21 @@
   // 查询
   const search = () => {
     fetchData({
-      ...pagination,
+      ...pagination.value,
       ...formModel.value,
     } as unknown as DeviceRecord);
   };
 
   // 分页发生改变
   const onPageChange = (current: number) => {
-    pagination.page = current;
+    pagination.value.page = current;
-    pagination.current = current;
+    pagination.value.current = current;
     search();
   };
 
   // 数据条数改变
   const onSizeChange = (Size: number) => {
-    pagination.size = Size;
+    pagination.value.size = Size;
     search();
   };
 
@@ -338,7 +338,7 @@
       params: {id}
     }).href;
     router.push(url);
-  };
+  }
 
   // 删除
   const handleDelete = async (id: number) => {

src/views/iot/product/index.vue

@@ -317,21 +317,21 @@
   // 查询
   const search = () => {
     fetchData({
-      ...pagination,
+      ...pagination.value,
       ...formModel.value,
     } as unknown as ProductRecord);
   };
 
   // 分页发生改变
   const onPageChange = (current: number) => {
-    pagination.page = current;
+    pagination.value.page = current;
-    pagination.current = current;
+    pagination.value.current = current;
     search();
   };
 
   // 数据条数改变
   const onSizeChange = (Size: number) => {
-    pagination.size = Size;
+    pagination.value.size = Size;
     search();
   };
 
@@ -348,7 +348,7 @@
       params: {id}
     }).href;
     router.push(url);
-  };
+  }
 
   // 打开物模型
   function openTsl(id:number): void{
@@ -357,7 +357,7 @@
       params: {id}
     }).href;
     router.push(url);
-  };
+  }
 
   // 删除
   const handleDelete = async (id: number) => {

src/views/notification/bulletin/index.vue

@@ -365,7 +365,7 @@
   // 查询
   const search = () => {
     fetchData({
-      ...pagination,
+      ...pagination.value,
       ...formModel.value,
     } as unknown as BulletinsRecord);
     selectedIds.value = [];
@@ -373,8 +373,8 @@
 
   // 分页发生改变
   const onPageChange = (current: number) => {
-    pagination.page = current;
+    pagination.value.page = current;
-    pagination.current = current;
+    pagination.value.current = current;
     search();
   };
   // 时间范围
@@ -387,7 +387,7 @@
 
   // 数据条数改变
   const onSizeChange = (Size: number) => {
-    pagination.size = Size;
+    pagination.value.size = Size;
     search();
   };
 
@@ -421,7 +421,7 @@
       params: {id}
     }).href;
     router.push(url);
-  };
+  }
 
   // 发布公告
   const publishBulletin = async (data:number[]) => {

src/views/notification/notice/components/message-edit.vue

@@ -38,6 +38,20 @@
           @click="queryDeptTree"
         />
       </a-form-item>
+      <a-form-item
+        field="type"
+        label="类型"
+        :validate-trigger="['change', 'input']"
+        :rules="[
+          { required: true, message: '请选择类型' },
+        ]"
+      >
+        <a-select
+          v-model="formData.type"
+          placeholder='请选择类型'
+          :options="messageType"
+        />
+      </a-form-item>
       <a-form-item
         field="title"
         label="标题"
@@ -172,12 +186,10 @@
   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: {
@@ -199,6 +211,8 @@
   }
   const CreateRef = ref<FormInstance>();
   const formData = ref<any>({
+    sms: false,
+    email: false,
     ...props.prem,
   });
   const messageStore = useMessageStore();
@@ -291,6 +305,16 @@
   ]);
   const selectedDepartmentMembers: any = ref([]);
   const renderData = ref<any[]>([]);
+  const messageType = computed(() => [
+    {
+      label: '消息',
+      value: 'MESSAGE',
+    },
+    {
+      label: '通知',
+      value: 'NOTICE',
+    },
+  ]);
   // 获取部门树
   const getDeptTree = async () => {
     const res = await getAllDeptTree(1);
@@ -395,6 +419,7 @@
     if (!valid) {
       // 新增
       if (props.isCreate) {
+        formData.value.html = true;
         // formData.value.username = formData.value.email;
         const res = await messageStore.createMessage(formData.value);
         if (res.status === 200) {

src/views/notification/notice/index.vue

@@ -251,7 +251,7 @@
   // 查询
   const search = () => {
     fetchData({
-      ...pagination,
+      ...pagination.value,
       ...formModel.value,
     } as unknown as MessageRecord);
     selectedIds.value = [];
@@ -259,9 +259,7 @@
 
   // 分页发生改变
   const onPageChange = (current: number) => {
-    setPagination({
+    pagination.value.current = current;
-      current,
-    });
     search();
   };
   // 时间范围
@@ -274,9 +272,7 @@
 
   // 数据条数改变
   const onSizeChange = (size: number) => {
-    setPagination({
+    pagination.value.size = size;
-      size,
-    })
     search();
   };
 

src/views/user/bulletin-card/components/card-wrap.vue

@@ -7,6 +7,9 @@
       <a-space align="start">
         <a-card-meta>
           <template #title>
+            <a-avatar :size="48" :style="{ marginRight: '8px' }">
+              A
+            </a-avatar>
             <a-typography-text style="margin-right: 10px">
               {{ title }}
             </a-typography-text>

src/views/user/bulletin-card/index.vue

@@ -94,6 +94,25 @@
               </template>
             </CardWrap>
           </a-col>
+          <a-col
+            :xs="12"
+            :sm="12"
+            :md="12"
+            :lg="6"
+            :xl="6"
+            :xxl="6"
+            class="list-col"
+          >
+            <div class="card-wrap empty-wrap">
+              <a-card :bordered="false" hoverable>
+                <a-result :status="null" title="点击创建设备">
+                  <template #icon>
+                    <icon-plus style="font-size: 20px" />
+                  </template>
+                </a-result>
+              </a-card>
+            </div>
+          </a-col>
         </a-row>
       </div>
       <a-pagination
@@ -144,6 +163,7 @@
       const res = await bulletinsStore.getBulletinsList(params);
       renderData.value = res.data.records;
       setPagination(res.data);
+      console.log(pagination.value.total);
     } catch (err) {
       // you can report use errorHandler or other
     } finally {
@@ -164,22 +184,21 @@
   // 查询
   const search = () => {
     fetchData({
-      ...pagination,
+      ...pagination.value,
       ...formModel.value,
     } as unknown as BulletinsRecord);
   };
 
   // 分页发生改变
   const onPageChange = (current: number) => {
-    setPagination({
+    pagination.value.current = current;
-      current,
-    })
     search();
   };
 
   // 数据条数改变
   const onSizeChange = (total: number) => {
-    pagination.total = total;
+    pagination.value.total = total;
+    console.log(pagination.value.total);
     search();
   };
 
@@ -193,7 +212,7 @@
   };
 </script>
 
-<style scoped>
+<style scoped lang="less">
   .container {
     padding: 0 20px 20px 20px;
   }
@@ -205,4 +224,37 @@
       }
     }
   }
+  .card-wrap {
+    height: 100%;
+    transition: all 0.3s;
+    border: 1px solid var(--color-neutral-3);
+    &:hover {
+      transform: translateY(-4px);
+    }
+    :deep(.arco-card-meta-description) {
+      color: rgb(var(--gray-6));
+      .arco-descriptions-item-label-inline {
+        font-weight: normal;
+        font-size: 12px;
+        color: rgb(var(--gray-6));
+      }
+      .arco-descriptions-item-value-inline {
+        color: rgb(var(--gray-8));
+      }
+    }
+  }
+  .empty-wrap {
+    height: 210px;
+    border-radius: 4px;
+    :deep(.arco-card) {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+      .arco-result-title {
+        color: rgb(var(--gray-6));
+      }
+    }
+  }
 </style>

src/views/user/bulletins/index.vue

@@ -78,7 +78,6 @@
         :style="highlightRow"
         style="margin-bottom: 40px"
         :filter-icon-align-left="alignLeft"
-        @change="handleSortChange"
         @page-change="onPageChange"
       >
         <template #publishTime="{ record }">
@@ -136,7 +135,7 @@
       publishTimeEnd: '',
     };
   };
-  const { pagination,setPagination } = usePagination(true);
+  const { pagination,setPagination } = usePagination();
 
   const { loading, setLoading } = useLoading(true);
   const renderData = ref<BulletinsRecord[]>([]);
@@ -227,21 +226,21 @@
   // 查询
   const search = () => {
     fetchData({
-      ...pagination,
+      ...pagination.value,
       ...formModel.value,
     } as unknown as BulletinsRecord);
   };
 
   // 分页发生改变
   const onPageChange = (current: number) => {
-    pagination.page = current;
+    pagination.value.page = current;
-    pagination.current = current;
+    pagination.value.current = current;
     search();
   };
 
   // 数据条数改变
   const onSizeChange = (total: number) => {
-    pagination.total = total;
+    pagination.value.total = total;
     search();
   };
 
@@ -254,7 +253,6 @@
 
   // 表格内部排序
   const alignLeft = ref(false);
-  const handleSortChange = (data: any, extra: any, currentDataSource: any) => {};
 
     watch(() => columns.value, deepClone, { deep: true, immediate: true });
 
@@ -265,8 +263,4 @@
     padding: 0 20px 20px 20px;
   }
 
-  .highlight-class {
-    background-color: yellow; /* 这里可以修改为你想要的高亮颜色 */
-    font-weight: bold; /* 可以添加其他样式，如加粗等 */
-  }
 </style>

src/views/user/messages/index.vue

@@ -122,12 +122,10 @@
   import { computed, ref, watch } from 'vue';
   import useLoading from '@/hooks/loading';
   import dayjs from 'dayjs';
-  import { Pagination } from '@/types/global';
   import usePagination from '@/hooks/pagination';
   import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
   import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
   import { useMessagesStore } from '@/store';
-  import router from '@/router';
   import useTableOption from '@/hooks/table-option';
   import { BulletinsRecord } from '@/api/bulletins';
 
@@ -226,30 +224,25 @@
     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,
+      ...pagination.value,
       ...formModel.value,
     } as unknown as BulletinsRecord);
   };
 
   // 分页发生改变
   const onPageChange = (current: number) => {
-    pagination.page = current;
+    pagination.value.page = current;
-    pagination.current = current;
+    pagination.value.current = current;
     search();
   };
 
   // 数据条数改变
   const onSizeChange = (Size: number) => {
-    pagination.size = Size;
+    pagination.value.size = Size;
     search();
   };
 
@@ -262,7 +255,6 @@
 
   // 表格内部排序
   const alignLeft = ref(false);
-  const handleSortChange = (data: any, extra: any, currentDataSource: any) => {};
 
   watch(() => columns.value, deepClone, { deep: true, immediate: true });
 </script>
@@ -272,8 +264,4 @@
     padding: 0 20px 20px 20px;
   }
 
-  .highlight-class {
-    background-color: yellow; /* 这里可以修改为你想要的高亮颜色 */
-    font-weight: bold; /* 可以添加其他样式，如加粗等 */
-  }
 </style>