趣学前端 | 多个页面的操作聚合到某个页面的实现方案

一、前言

刚接到这个需求的时候我有点不想写，因为要把所有的页面全都改一遍，且要保证不出现问题，功能不难，但是工作量有点大。我小小的纠结了一下就着手去做了，因为我发现，一旦改好，会有助于后面的业务开发。

我们的这个业务是工作流性质的，整个流程一共十个左右的节点，每个节点会有一个单独的页面，然后不同节点页面的操作有相同和不同的操作。新需要是要做一个待办页面，这个页面包含所有的节点，并且需要聚合所有的操作。

这个设计思路挺简单的，按照页面的维度，将所有页面的操作提炼成按钮组业务组件，然后需要聚合的页面进行引入。

项目基于React框架开发的，所以代码写法是JSX语法，组件开发使用的hooks函数式组件，UI框架使用的是antd。

二、实现

2.1 提炼组件

以页面维度，提炼页面按钮组件ButtonGroup.jsx。下面是我的项目文件结构：

受理页面的操作按钮组件

主要操作包括受理和编辑，这两个操作的交互都是打开表单弹窗。

return (
  <>
    <button onClick={() => this.updataOperate('visible')}>编辑</button>
    <button onClick={() => this.updataOperate('acceptVisible')}>受理</button>
  </>
);

基本上所有的页面都是上面类似的修改，区别在于有的页面操作按钮多一些，有的页面按钮少一些。无论那种交互方式，能够提炼公共方法的尽量提炼公共方法。

2.2 特殊处理

比如编辑按钮，待办页面所有节点都展示编辑按钮，但是节点页面中只有受理页面有，这个时候待办页面的待受理节点不应该重复展示编辑按钮，所以我设置了一个btnFlag变量。主要有两个值，accept-受理页面， other-其他引入受理按钮组的都传这个值。

受理页面的操作按钮组件

根据btnFlag的值判断编辑按钮是否展示，当值为accept时展示，其他值不展示。

return (
  <>
    {btnFlag === 'accept' ? <button onClick={() => this.updataOperate('visible')}>编辑</button> : null}
    <button onClick={() => this.updataOperate('acceptVisible')}>受理</button>
  </>
);

2.3 引入使用

待办页面

文件相对路径：pending.jsx

待办页面将所有的按钮组引入之后，按照节点值进行区分。

import AcceptButtonGroup from '../accept/components/ButtonGroup'; // 带受理
import defineButtonGroup from '../define/components/ButtonGroup'; // 待确定

/**
 * 列表操作
 */
columns = columns.concat([
  {
    title: '操作',
    key: 'action',
    width: 160,
    fixed: 'right',
    render: (text, record) => (
      <>
        {record.node === 'accept' && <AcceptButtonGroup record={record} />}
        {record.node === 'define' && <DefineButtonGroup record={record} />}
      </>
    ),
  },
]);

2.4 后续开发

既然有了这个聚合的开始，后面再有新需求的时候，我们的产品经理就会按照他想要的去规划操作按钮的摆放位置，比如某个处理操作，他会将需要放到哪些页面列出来，这个时候，把处理按钮提炼出来，开发就非常愉快了，所有需要的页面直接引入完事。

2.5 再一次化繁为简

果然不出我所料，我们和(ai)蔼(gao)可(shi)亲(qing)的产品经理近期又提了一个小功能，根据不同客户端操作的数据，在管理后台中区别展示操作按钮，客户端A操作进入管理后台的数据展示操作A1、A2...等，客户端B操作进入管理后台的数据展示操作B1、B2...等，管理后台原来的操作数据不变。

既然已经有了多个操作按钮聚合的设计思路，这次我设计思路也很快就有了，那就是按照端的维度封装按钮组的组件。

客户端A按钮组的组件

return (
  <>
    <button onClick={() => {}}>查看备注</button>
  </>
);

客户端B按钮组的组件

return (
  <>
    <button onClick={() => {}}>查看取消原因</button>
  </>
);

列表页区分端公共方法

将获取操作的系统的类型的函数提炼成公共方法。

/**
   * 获取操作的系统的类型
   * @param {Object} record 列表操作数据项
   * @param {string} type 校验端类型 前端定义字符串是为了更加语义化一些
   * @return {void}
   */
  getCreatDataCMSType(record, type) {
    const CMSTypeMap = {
      init:1,
      A: 2,
      B: 3,
    };
    const CMSTypeType = CMSTypeMap[type];
    const CMSType = record.CMSType ? record.CMSType : 'init';
    let flag = false;
    if (CMSType === CMSTypeType) {
      flag = true;
    }
    return flag;
  },

列表页展示

import ButtonGroupA from './components/ButtonGroupA';
import ButtonGroupB from './components/ButtonGroupB';
import { util } from '@/utils';
......
{util.getCreatDataCMSType(record, 'A') ? <ButtonGroupA record={record} /> : null}
{util.getCreatDataCMSType(record, 'B') ? <ButtonGroupB record={record} /> : null}

三、总结

就小技巧而言，这个功能并不是很难实现，其实更多的是它带给我的启示，后续的开发中受益匪浅。

打破原来的习惯，在最初会觉得有点痛苦，一旦开始，就会一直想怎么把东西做的更好，会对自己吹毛求疵，总觉得不够。

同时，我会根据业务的的发展，提前考虑一些功能，怎么设计开发能够在后续的需求里尽可能的复用，进而减少重复的开发。

我一直没想过操作按钮也可以提炼公共组件，因为太习惯直接上来就开发了。但是就当前业务发展，很多操作，可能会交叉的出现不同的页面中，提炼公共组件就很有必要了。