Taro 3.x 跨版本升级踩坑指南

客服工单系统是客服解决用户实际问题、处理日常工作最常用的系统。为有效辅助客服的工作，系统需要及时提供用户、商品和订单等信息。同时，客服工单的创建、流转和处理，也需要各种类型表单的操作。所以基础信息的展示和交互、表单的展示和操作，对于客服工单系统至关重要。本文就为大家介绍，在转转客服工单系统中，我们是如何通过数据驱动的方式解决这类问题的。

基础信息

展示形式

这里以工单详情为例，工单详情以模块的方式，提供包括基础信息、用户信息、订单信息等重要的数据，如下图：

每一个模块都是由大量不同的类型信息平铺展示，如下：

这些信息数据量和类型繁多，数据字段跟公司的业务有关，数据类型涵盖从最简单的文本展示、链接跳转，到图片预览、弹窗交互等，这些不可能由前端单独一一去做处理。所以我们通过归类和抽象，将数据格式进行统一化、对共性组件进行抽离，交由不同的组件处理。在介绍基本使用之前，先看下整体的结构设计。

结构设计

三个层次

工单详情的每一个大模块都可以分为四个层次，分别为：数据共享层、业务层、抽象层、数据展示层。

每一个业务层都是一个可折叠的面板，未展开前都只展示简略信息。 其数据均由数据共享层提供，展开后可通过请求共享的 url，获取详细数据。

这里控制请求逻辑的就是抽象层。 其中包括了一个展开后自动请求的 hook—useAbstract，以及一个根据 useAbstract 返回值控制展示的 Abstract 组件，获取到的数据最终传给数据展示层–DetailInfoArea。

//useAbstract
const [infoDataList, isEmptyInfo, loading] = useAbstract({ isShow, initShowData })
// 这里infoDataList为返回数据，isEmptyInfo用于控制展示，loading是加载状态 

// Abstract
<Abstract infoDataList={infoDataList} isEmptyInfo={isEmptyInfo} isLoading={loading}></Abstract> 

// DetailInfoArea
{!isEmptyInfo? infoDataList.filter((item) => Array.isArray(item.data) && item.data.length).map((infoItem, index) => {return (<Card key={index}><DetailInfoAreaorderId={orderId}bussinessType={bussinessType}data={infoItem.data}/></Card>)})
: null} 

最终通过一个 type 和组件的映射匹配出相应的组件。

import PopInfo from '../PopUp/PopInfo'
import LinkAirPlane from '../FormComponent/LinkAirPlane'
import Text from '../FormComponent/Text'
import countDown from '../FormComponent/CountDown'
…… // 其他组件

export default {// Pop类组件PopInfo,PopDrawer,// link类组件LinkAirPlane,// 其他数据展示组件Text,countDown,……
} 

三类组件

通用数据展示组件分为三大类：pop 类 、 link 类、其他类型组件。

1.Pop 类组件：用于点击后弹窗/抽屉展示数据或操作–常用做其他数据展示的容器
2.Link 类组件：由于点击后跳转
3.其他类型组件：基础展示 text、table 数据、图片/视频展示…

具体组件类型、名称和作用如下：

归属类型