HikCloudPageCache

HUI Pro 表格增强工具库，专为海康云设计规范（HIK Cloud Design）打造，提供列表缓存、自定义列、分页持久化等功能。

1. 安装

npm install hik-cloud-page-cache

2. 接入步骤

第一步：在 main.js 中注册插件与组件

导入插件、样式，并全局注册核心组件。

import ListCachePlugin, { 
  destroyIfNeeded, 
  HikCloudTableCacheWrapper, 
  HikCloudPaginationCache 
} from 'hik-cloud-page-cache';
import 'hik-cloud-page-cache/dist/style.css';

// 1. 注册全局组件
Vue.component('HikCloudTableCacheWrapper', HikCloudTableCacheWrapper);
Vue.component('HikCloudPaginationCache', HikCloudPaginationCache);

// 2. 安装插件并配置 mapSettings
Vue.use(ListCachePlugin, {
  projectName: 'Chain', // 项目前缀，用于存储隔离
  mapSettings: {
    // 显式定义缓存依赖关系
    // 格式: '列表页路由Name': ['详情页1路由Name', '详情页2路由Name']
    // 含义: 仅当从详情页返回列表页时保留缓存，去往其他页面时自动销毁。
    'Member': ['MemberAdd', 'MemberEdit', 'MemberDetail'],
    'AiConfigs': ['AiConfigDisposeNew', 'AiConfigDisposeEdit']
  }
});

第二步：在 App.vue 中配置缓存容器

必须使用 <keep-alive> 包裹 <router-view>，并根据路由 meta 信息判断是否开启缓存。

<template>
  <div id="app">
    <!-- 开启缓存的路由 -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    
    <!-- 不开启缓存的路由 -->
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

第三步：在 router/index.js 中添加销毁守卫

插件需要通过路由守卫来精准判断何时该清理内存中的缓存。

import { destroyIfNeeded } from 'hik-cloud-page-cache';

const router = new Router({ ... });

router.beforeEach((to, from, next) => {
  // 必须调用此方法，否则 mapSettings 的销毁逻辑不会生效
  destroyIfNeeded(to, from);
  next();
});

第四步：路由定义中标记 keepAlive

在需要缓存的列表页路由中，标记 meta.keepAlive: true。

{
  path: '/member',
  name: 'Member', // 必须与 mapSettings 中的 key 一致
  component: MemberList,
  meta: { keepAlive: true }
}

3. 列表页使用 (Component)

在需要缓存的列表组件中添加 listCacheOptions 配置。

export default {
  name: 'Member',
  listCacheOptions: {
    idKey: 'memberId',        // 数据主键名
    dataPath: 'tableData',    // 列表数据在 data 中的路径
    refreshMethod: 'getData', // 局部刷新方法 (编辑返回时触发)
    resetMethod: 'handleReset' // 全局重置方法 (添加返回时触发)
  },
  methods: {
    getData() {
      // 请求接口逻辑
    },
    handleReset() {
      this.queryForm = {};      // 1. 清空搜索项
      this.pageData.pageNo = 1; // 2. 重置页码
      this.getData();           // 3. 重新请求
    }
  }
}

模板包裹

<hik-cloud-table-cache-wrapper ref="tableWrapper" storage-key="member-list">
  <el-table :data="tableData">
    <!-- 列定义 -->
  </el-table>
</hik-cloud-table-cache-wrapper>

<hik-cloud-pagination-cache 
  :total="total" 
  :current-page.sync="pageNo" 
  @current-change="getData"
></hik-cloud-pagination-cache>

4. 详情页发送信号 (Signals)

当在详情页完成操作并返回时，需要发送信号通知列表页。

// 添加成功：触发 RESET 信号，列表页将执行 handleReset 并回到第一页
this.$listSignal.reset('Member');

// 编辑成功：触发 REFRESH 信号，列表页将执行 getData 保持当前页码
this.$listSignal.refresh('Member');

5. 常用方法

scrollToTop()

手动将表格滚动条置顶。常用于分页切换、搜索重置等场景。

// 在父组件中通过 ref 调用
this.$refs.tableWrapper.scrollToTop();

6. 注意事项

1. 路由 Name 匹配：mapSettings 中的名称、路由定义中的 name、以及信号发送时的名称必须完全一致。
2. ID 稳定性：建议为 el-table-column 设置 column-key 或 prop，以获得最稳定的自定义列缓存效果。