表单联动计算方案讨论

[tolerance-go]

我个人觉得，ant design 分层的终极就是中台管理系统的 node-code design，为了提高开发效率，这个过程就是不断抽象的过程，声明语法越来越复杂，配置化程度会越来越高，所以最后上一个好用的可视化平台去管理配置肯定是合理又令人期待的

但是逻辑层也别厚此薄彼了。。。看了一圈，没有满意的库，日常在管理系统前端中占比最大的就是表单逻辑处理，我的想法是抽象一个专门处理联动计算的引擎出来和视图层结合使用

下面简单说一下，我思考的表单数据联动的方案

功能点

1. 支持级联联动，联动可以由初始输入触发连锁反应
2. 可以处理循环联动
3. 支持异步数据计算
4. 支持 undo/redo 操作
5. 和现有的验证框架集成

设计思路

数据结构：

• 数据结构对象（一个树）
• 联动依赖对象（一个双向环图）
• 数据结构的时间切面对象（一个栈）

大致的 API：

通过 commit 驱动内部逻辑，根据联动依赖关系和当前最新的字段数据计算出下一个数据结构对象，存放到切面栈中，触发相关 hook

type Key = string | string[];

interface DependConfig {
  key: Key;
}

interface DependTree {
  children?: DependTree[];
  depends: Key[];
  dependBy: Key[];
}

interface FieldTree {
  children?: DependTree[];
  status: 'loading' | 'done' | 'fail';
  value: any;
}

interface LinkageType {
  dependTree: DependTree;

  fieldTree: FieldTree;

  stacks: FieldTree[];

  registe(
    key: Key,
    options: {
      depends: (DependConfig | Key)[];
      compute: (changed: { [key: string]: any }) => any;
    }
  ): void;

  commit(key: Key, val: any): void;

  listen(callback: (key: Key, val: any, stacks: FieldTree[]) => void): void;

  unListen(callback: (key: Key, val: any, stacks: FieldTree[]) => void): void;
}

class Linkage implements LinkageType {
  dependTree = {};
  fieldTree = {};
  stacks = [];

  constructor(initalData) {}

  registe(key, options) {}

  commit(key, val) {}

  listen(callback) {}
  unListen(callback) {}
}

const linkage = new Linkage({
  field1: {
    field2: 1,
    field3: 2,
  },
});

linkage.registe("field1", {
  depends: ["field2"],
  compute: (changed) => {
    if (changed.field2 !== undefined) {
      return changed.field2 * 100;
    }
  },
});

linkage.listen((key, val, stacks) => {
  console.log(key, "change to ->", val);
  console.log(stacks);
});

linkage.commit("field1", 10);

以上都是我个人的想法，希望可以和大家讨论，也非常希望可以参与到这个过程中，大佬们，有任务尽管指派给我 ヾ(◍°∇°◍)ﾉﾞ

注意事项

复用对象，可以减少内存占用

[chenshuai2144]

我们还是希望用 render 的方式。

联动可以用的 formProps={()=> Config } 这种方式。

[729993031]

你是想抽象出一个表单联动的hooks吗？ 不知道这个可不可以https://core.formilyjs.org/zh-CN/api/entry/form-hooks-api？