fix: product profile page && configuration center page layout change pagination not update

ww
1 parent c2cbd62e
Showing 2 changed files with 29 additions and 49 deletions
src/views/configuration/center/index.vue
src/views/device/profiles/CardMode.vue
--- a/src/views/configuration/center/index.vue
View file @478618a
+++ b/src/views/configuration/center/index.vue
View file @478618a
 <script setup lang="ts">
-  import { List, Card, Button, PaginationProps, Popover, Slider, Tooltip } from 'ant-design-vue';
-  import { ReloadOutlined, AppstoreOutlined } from '@ant-design/icons-vue';
+  import { List, Card, Button, PaginationProps, Tooltip } from 'ant-design-vue';
+  import { ReloadOutlined } from '@ant-design/icons-vue';
   import { computed, onMounted, reactive, ref, unref } from 'vue';
   import { OrganizationIdTree, useResetOrganizationTree } from '../../common/organizationIdTree';
   import {
@@ -21,7 +21,7 @@
   import { cloneDeep } from 'lodash';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { useGlobSetting } from '/@/hooks/setting';
-  import { AuthIcon } from '/@/components/Widget';
+  import { AuthIcon, CardLayoutButton } from '/@/components/Widget';
   import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
   const listColumn = ref(5);
@@ -34,6 +34,7 @@
     size: 'small',
     showTotal: (total: number) => `共 ${total} 条数据`,
     current: 1,
+    pageSize: unref(listColumn) * 2,
     onChange: (page: number) => {
       pagination.current = page;
       getListData();
@@ -63,16 +64,16 @@
   async function getListData(value: Recordable = {}) {
     try {
       loading.value = true;
-      const pageSize = 4 * unref(listColumn);
+      const pageSize = unref(listColumn) * 2;
       const { items, total } = await getPage({
         organizationId: unref(organizationId),
         ...value,
         page: pagination.current!,
         pageSize,
       });
+
       dataSource.value = items;
-      pagination.total = total;
-      pagination.pageSize = pageSize;
+      Object.assign(pagination, { total, pageSize });
     } catch (error) {
     } finally {
       loading.value = false;
@@ -138,6 +139,11 @@
     } catch (error) {}
   };
+  const handleCardLayoutChange = () => {
+    pagination.current = 1;
+    getListData();
+  };
+
   const listEl = ref<Nullable<ComponentElRef>>(null);
   onMounted(() => {
@@ -180,23 +186,7 @@
             <Authority :value="ConfigurationPermission.CREATE">
               <Button type="primary" @click="handleCreateOrUpdate()">新增组态</Button>
             </Authority>
-            <Popover :trigger="['hover']">
-              <template #content>
-                <div class="w-50">
-                  <div>每行显示数量</div>
-                  <Slider
-                    v-model:value="listColumn"
-                    :max="12"
-                    :min="4"
-                    :marks="{ 4: 4, 5: 5, 6: 6, 7: 7, 8: 8, 9: 9, 10: 10, 11: 11, 12: 12 }"
-                    @change="getListData"
-                  />
-                </div>
-              </template>
-              <Button type="primary">
-                <AppstoreOutlined />
-              </Button>
-            </Popover>
+            <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" />
             <Tooltip title="刷新">
               <Button type="primary" @click="getListData">
                 <ReloadOutlined @click="getListData" />
@@ -256,28 +246,6 @@
                   ]"
                   :trigger="['hover']"
                 />
-                <!-- <Dropdown
-                  :dropMenuList="[
-                    {
-                      text: '编辑',
-                      auth: ConfigurationPermission.UPDATE,
-                      icon: 'clarity:note-edit-line',
-                      event: '',
-                      onClick: handleCreateOrUpdate.bind(null, item),
-                    },
-                    {
-                      text: '删除',
-                      auth: ConfigurationPermission.DELETE,
-                      icon: 'ant-design:delete-outlined',
-                      color: 'error',
-                      event: '',
-                      onClick: handleDelete.bind(null, item),
-                    },
-                  ]"
-                  :trigger="['hover']"
-                >
-                  <EllipsisOutlined key="ellipsis" />
-                </Dropdown> -->
               </template>
               <Card.Meta>
                 <template #title>
@@ -308,6 +276,10 @@
     height: 24px;
   }
+  .configuration-list:deep(.ant-card-body) {
+    padding: 16px !important;
+  }
+
   .configuration-list:deep(.ant-list-empty-text) {
     @apply w-full h-full flex justify-center items-center;
   }
--- a/src/views/device/profiles/CardMode.vue
View file @478618a
+++ b/src/views/device/profiles/CardMode.vue
View file @478618a
@@ -62,10 +62,13 @@
   const loading = ref(false);
+  const colNumber = ref(5);
+
   const pagination = reactive<PaginationProps>({
     size: 'small',
     showTotal: (total: number) => `共 ${total} 条数据`,
     current: 1,
+    pageSize: unref(colNumber) * 2,
     onChange: (page: number) => {
       pagination.current = page;
       getDataSource();
@@ -74,8 +77,6 @@
   const dataSource = ref<ProfileRecord[]>([]);
-  const colNumber = ref(5);
-
   const getSelectAllFlag = computed(() => {
     return unref(dataSource).every((item) => item.checked);
   });
@@ -93,13 +94,14 @@
         setFieldsValue(otherParams);
       }
       const params = getFieldsValue();
+      const pageSize = unref(colNumber) * 2;
       const { items, total } = await deviceConfigGetQuery({
         page: pagination.current,
         pageSize: unref(colNumber) * 2,
         ...params,
         ...otherParams,
       });
-      pagination.total = total;
+      Object.assign(pagination, { total, pageSize });
       dataSource.value = items.map((item) => ({ ...item, checked: false }));
     } catch (error) {
     } finally {
@@ -162,6 +164,12 @@
       throw error;
     }
   };
+
+  const handleCardLayoutChange = () => {
+    pagination.current = 1;
+    getDataSource();
+  };
+
   const { query: routeParams } = useRoute();
   onMounted(() => {
     getDataSource(routeParams);
@@ -204,7 +212,7 @@
             </Authority>
             <ModeSwitchButton :value="$props.mode" @change="handleModeChange" />
-            <CardLayoutButton v-model:value="colNumber" @change="getDataSource" />
+            <CardLayoutButton v-model:value="colNumber" @change="handleCardLayoutChange" />
             <Tooltip title="刷新">
               <Button type="primary" @click="getDataSource">