项目组件实操：智能选择税收分类编码组件解析（一）

一、需求背景：

在A平台现有激活发票服务的流程中，增加一个流程环节选择税收分类编码，其页面及接口在B平台有现成（可通过B平台开发出来供A平台调用），可通过服务端进行转发封装调用。

1、B平台功能展示+项目了解

2、B平台提供的接口：b1，b2，b3

3、流程走到选择税收分类编码表单填写：输入商品名称，税收分类编码（智能选择），简称，税率（自动填充）

4、点击智能选择，打开税收分类编码弹窗展示对应商品名称列表和分页的税收分类编码数据，如先输入商品名称，则打开时带入商品名称初始高亮，如无，则初始不高亮，支持搜索当前税收分类编码数据，选择完后关闭弹窗，自动填充出来选择后的税收分类编码数据。

5、A平台税收编码录入接口：a

二、需求分析：

1、这是一个迭代需求，对原流程增加一个小环节（选择税收分类编码）

2、具体功能如下：

• 一个流程表单步骤：选择税收分类编码（商品名称，税收分类编码，简称，税率）
• 一个智能选择税收分类编码组件：商品名称，税收分类编码表格，税收分类编码搜索
• 表单校验非空，点击下一步调用接口录入

3、已选税收分类编码X，再次点击智能选择弹窗，是否高亮之前选择的X，商品名称可修改，如果已选的税收分类编码X跟商品名称传入相冲突，如何处理高亮？

 

三、技术方案分析

1、了解A项目和B项目的技术栈背景

• A平台项目剖析：基于vue2+私有UI库的一个web项目

• B平台项目剖析：基于react hooks + antd3.x的一个web项目，无现成组件封装供使用

2、了解B项目现存功能的场景，包括是否有现成组件封装落地，跟我们需求功能描述的共性和差异性；   

• 技术栈不一致
• 税收分类编码表单场景要求不一致
• 智能税收分类编码弹窗功能一致

3、 可行性分析：

• 技术栈和表单渲染内容也不一致，页面组件无法直接使用
• 智能税收分类编码弹窗功能一致：可以考虑是否开发一个无视技术栈的通用组件（智能税收分类编码组件）供后期统一调用使用，结合项目实际排期来决定？
• 兼容分析：为了方便以后组件能兼容B平台调用，可以将组件输入输出准则向前（B平台功能）兼容

4、通用组件封装思路：

• 组件形式：渲染类弹窗组件
• 组件入参：支持传入商品名称，用于初始化商品名称高亮，非必传
• 组件出参：输出一个税收分类编码对象
• 定制化属性：组件内接口api url可定制化传入，权限（数据、按钮）配置，更细化一些可以定制化主题和表格、按钮样式等等

 

四、编码实现

        详见下一章：智能选择税收分类编码组件解析（二）