现有逻辑梳理

渲染（初始化）流程

1. 初始化配置表中的字段。

   • 将配置表中的字段转换为key、value、label形式，提供给AppExport、Apptable使用，Apptable中已经没有用到该字段，建议删除相关代码。

2. 从cookie中获取该路径下是否有字段集合。

   

3. 从/caches接口获取字段数据。

   

4. 点击表格视图切换字段显示。

   

问题梳理

1. 不能使用cookie作为字段本地存储的方式。
   • 系统页面多，字段多，一旦超出cookie存储大小，数据将会丢失。
   • 每次请求都将这么庞大的cookie放在请求里，对服务端是会有一定的影响的。
2. /caches接口存储也有时效性，对用户会造成困扰，之前的代码逻辑错误，使用上也有bug。
3. /caches接口可以算是/table_views的子集，可以利用/table_views实现所需功能。
4. 字段控制器和表格视图数据源分离，导致逻辑冲突。

重构方案

1. 使用localStorage替代cookie储存字段，本地存储解决性能问题。
2. 使用/table_views替代/caches接口在服务端储存字段。
3. 统一字段控制器与表格视图的数据源。
   • 字段控制器中的字段调整同步到表格视图中。
   • 表格视图中保存的数据作为字段控制器的数据源。

方案分析

过渡

此次存储方案的变更，会涉及到过渡旧数据的问题，为使用户无感过渡，需要有完善的过渡方案。

需要过渡，主要是由于储存方式由cookie改为localstorage之后，使用cookie存储的唯一性发生了改变，之前如果cookie中有值，那展示的一定是cookie中的字段，但是现在改为localstorage之后就需要确定哪个视图才是用户选中的视图，并且下次加载时就已经过渡到从localstorage中获取。

性能

由于/table_views接口平均响应时间要比/caches要长100~200毫秒左右，必须有一种方案来平衡性能与效果带来的利弊。

1. 将/table_views接口提前列表接口之前。

2. 页面第一次加载时，将table_views返回的数据存在localstorage，之后切换页面首先加载localstorage中的数据。

3. 当修改字段控制器或者表格视图中的字段时，同步修改到相对应的组件中，并保存到/table_views接口，同时更新localstorage中对应路由存储的数据。

逻辑

整体流程图：

部分交互逻辑图：

选中某个表格视图

更新表格视图

删除表格视图

更新字段控制器

逻辑代码：

// localstorage中无数据时执行
this.viewOptions = d.data.data;
const viewCookie = JSON.parse(this.$tool.getCookie(this.pageType));
// 当没有localstorage，也没有默认视图时，显示所有字段，并在数据库保存一个默认视图
if (this.viewOptions.length === 0) {
  this.saveDefault();
}else {
  if (viewCookie) {
      // 当接口与cookie中都有数据时，判断cookie中的数据对应接口数据中的哪一个，并将其selected置为true
      this.compareField(this.viewOptions, viewCookie);
  }else {
      // 当cookie中无数据，则将默认视图作为选中视图显示
      this.saveDefaultToLocal();
  }
}

方案落地

整理代码

1. 删除注释代码，以及initOptionColumns方法中与路由相关的代码（已经很古老了）。
2. 将有关/caches接口的逻辑代码删除。
3. 由于表格视图功能只与当前使用的表格有关，与其它组件之间没有联系，所以/table_views的数据与请求不再使用vuex管理，直接由AppView组件内部处理。

数据源

按现有的组件结构，组件之间的数据通讯逻辑如下图：

AppView作为数据源将接口/table_views中获取的数据提供给TableComponent和AppTransfer，由于现有逻辑中AppTransfer与AppView是有直接交互的，所以并不适合隔代通讯，将使用全局事件总线$bus处理组件之间的通讯。修改后的逻辑如下：

基础测试用例