ToG 业务中如何以“不变”应“万变”

1. www.zhengcaiyun.cn Zo （队） m a oTe 团端前云采政 ToG 业务中如何以“不变”应“万变” ） m a e ） m a Te o o （ Z ooT Z （队团端⻥⻥政前云采 2023.03.12 云采政队团前端

2. Zo （队） m a oTe 团端前云采政甘家羽（⻥⻥） 2019 年入职政采云有限公司前后经历订单中心、配置中心、基础组件业务目前为生态业务前端负责人，主要负责政采云低代码平台） am e T oo Z （队团端政前云采云采政队团前端） m a Te o o （ Z

3. Zo （队） m a oTe 团端前云采政 • 我们是谁 • 标准化物料体系 • 规范化技术方案设计） m a Te o o （ Z 队团端政前云采 • 工具化⻚面搭建 • 安全可靠的发布平台队团端前云政采） m a Te o o （ Z

4. Zo （队） m a oTe 团端前云采政 01 我们是谁） m a Te o o （ Z ） m a Te o o （ Z 队团端政前云采云采政队团前端

5. Zo （队） m a oTe 团端前云采政政采云平台是适应政府采购数字化改革要求和电商化采购趋势，在监管部⻔指导下搭建的集网上交易、网上监管和网上服务于一体，覆盖政府采购各领域、全流程、多用户的一站式云服务平台。 m ）政端前采云（队团） m a Te o o （ Z ea T o Zo 云采政队团前端

6. Zo （队） m a oTe 团端前云采政乐采云平台是为适应数字化采购的新形势，由政采云有限公司为主建设、独立运营，并将在政府采购领域多年积累的技术能力、运营经验和资源优势等引入到企业采购等非政府采购领域，为广大企 m ）） m a Te o （ o Z 队业、村社组织等单位用户搭建的一体化、数智化采购云服务平台。（团队端团前端云前采云政采政 ea T o Zo

7. 差异化维度 Zo （队） m a oTe 团端前云采政政府采购浙江政府采购订单中心政前云采履约中心 …… 供应商采购监管队团前端） m a Te o o （ Z 队团端采购单位合同中心 …… 云采政） m a Te o o （ Z

8. Zo （队） m a oTe 团端前云采政） m a Te o o （ Z ） m a Te o o （ Z 队团端政前云采云采政队团前端

9. Zo （队） m a oTe 团端前云采政 02 标准化物料体系） m a Te o o （ Z ） m a Te o o （ Z 队团端政前云采云采政队团前端

10. 中后台⻚面特征 Zo （队） m a oTe 团端前云采政统一标准清晰美观简单高效⻚面布局主题色/功能色功能性保证对⻬方式⻚面内容紧凑）） m a Te o o （ Z 操作习惯组件样式政前云采队团端 am e T oo Z 重点信息提炼（间距、字号云采政队团前端

11. 物料库 Zo （队） m a oTe 团端前云采政一个或多个 UI 组件的组合标准 Sketch 控件库基础组件队团端） m a Te o o （ Z 政前云采业务组件） m a Te 一个或多个基础组件的组合，含业务属性 o o Z （队团端前云采政

12. 物料库使用痛点 Zo （队） m a oTe 团端前云采我要写一个⻚面，不知道是否有同学开发过类似组件政组件信息无法查阅好不容易找到一个组件，发现维护的同学离职了，不敢用怎么办） m a ） Te m o a o Z Te o （ o 如何在线查看 Z 队（团我在别人的⻚面上看到一个合适的组件，可我不知道它是哪一个队已发布⻚面的组件使用信息端团前端云前采云政采政

13. Zo （队） m a oTe 团端前云采政前端工程化平台：敦煌） m a ） Te m o a o Z Te 客户端，含项目管理、组件管理等常用功能，研发流程托管，统一开发体验 o （ o Z 队（团队端团前端云前采云政采政

14. 组件注册 Zo （队） m a oTe 团端前云采政） m a Te o o （ Z ） m a Te o o （ Z 队团端政前云采云采政队团前端

15. 线上组件查找 Zo （队） m a oTe 团端前云采政谷歌浏览器插件：天桥政端前采云） m a Te o o Z 显示⻚面所属项目信息、依赖远端服务组件信息（团队云采政队团前端） m a Te o o （ Z

16. 线上组件查找 Zo （队） m a oTe 团端前云采政） m a Te o o （ Z ） m a Te o o （ Z 队团端政前云采云采政队团前端

17. 物料体系 Zo （队物料资源云采政团端前） m a oTe 管理策略基础 / 业务组件库组件管理文档库权限管理） m a Utils o 库 Te o Z （团队政端前图片 / Icon 库采云） m a Te o o （ Z 数据管理云采政队团前端

18. Zo （队） m a oTe 团端前云采政物料体系⻚面开发） m a Te o o （ Z ） m a Te o o （ Z 队团端政前云采云采政队团前端

19. Zo （队） m a oTe 团端前云采政硬编码（If … Else …）） am e T oo Z （队团端供应商前云采云采政队团前端政采购单位） m a Te o o （ Z

20. 差异化维度 Zo （队） m a oTe 团端前政府采购云采政浙江政府采购云环境杭州市订单中心上海政府采购宁波市） m a Te 合同中心 o o （ Z 队团端政前云采采购单位供应商 …… 台州市岛环境 …… …… 采购监管队团前端 …… ） m a Te o o （ Z 履约中心云采政

21. Zo （队） m a oTe 团端前云采政物料体系技术方案规范⻚面开发） m a Te o o （ Z ） m a Te o o （ Z 队团端政前云采云采政队团前端

22. Zo （队） m a oTe 团端前云采政 03 规范化技术方案设计） m a Te o o （ Z ） m a Te o o （ Z 队团端政前云采云采政队团前端

23. Zo （队） m a oTe 团端前云采政 Bad Case：过多的逻辑判断） m a Te o o （ Z ） m a Te o o （ Z 队团端政前云采云采政队团前端

24. Bad Case：过多的逻辑判断 Zo （队） m a oTe 团端前云采政按钮的显示与否前端要通过大量的字段进行条件逻辑判断） m a Te o o （ Z ） m a Te o o （ Z 队团端政前云采云采政队团前端

25. Bad Case：过多的逻辑判断 Zo （队） m a oTe 团端前下单⻚数据接口调用场景云采政 A：商品详情⻚发起下单同一⻚面不同场景前端调用的接口不一样 B：购物⻋发起下单 A 场景调用接口 1 B 场景调用接口 2 C 和 D 场景调用接口 e 3 am ）） m a Te o o C：订单详情⻚选择重新下单 Z （队团端前云 D：订单列表⻚选择重新下单采政 ooT Z （云采政队团前端

26. 过多的逻辑判断 - 解决方案 Zo （队） m a oTe 团端前云采政判断逻辑“后”置控制前端显示逻辑判定都放在后端去做处理，前端尽可能减少字段判定） m a ）简单判断逻辑可“前”置 Te m o a o Z Te o （ o Z 队前后端约定，If 判断中未超过 2 个条件，且判断形式相对固定，可由前端处理（团队端团前端云前采云政采政

27. 过多的逻辑判断 - 解决方案 Zo （队） m a oTe 团端前云采政） m a Te o o （ Z ） m a Te o o （ Z 队团端政前云采云采政队团前端

28. 过多的逻辑判断 - 解决方案 Zo （队） m a oTe 团端前云采政队团端） m a Te o o （ Z ） m a Te o o （ Z 队团前端云前降低沟通成本；逻辑变更时只需一方排查或修改；有效避免两端不一致问题采云政采政

29. 接口约定 Zo （队） m a oTe 团端前云避免点击一个按钮，先后依赖多接口调用政采避免前端二次加工数据过多）枚举值、下拉框数据由后端维护 m a Te o o Z （队团端前云采金额计算由后端完成政） m a Te o o （ Z 云采政队团前端

30. Zo （队） m a oTe 团端前云采政有些时候，后端也不想写过多的 If Else，此时如何是好？） m a Te o o （ Z ） m a Te o o （ Z 队团端政前云采云采政队团前端

31. 配置中心 Zo （队） m a oTe 团端前云采政） m a Te o o （ Z ） m a Te o o （ Z 队团端政前云采云采政队团前端

32. 配置中心 Zo （队） m a oTe 团端前云采政） m a Te o o （ Z ） m a Te o o （ Z 队团端政前云采云采政队团前端

33. Zo （队） m a oTe 团端前云采政物料体系技术方案规范⻚面开发） m a Te o o （ Z ） m a Te o o （ Z 队团端政前云采云采政队团前端

34. Zo （队） m a oTe 团端前云采政如何提升⻚面开发效率？） m a Te o o （ Z ） m a Te o o （ Z 队团端政前云采云采政队团前端

35. Zo （队） m a oTe 团端前云采政 04 工具化⻚面搭建） m a Te o o （ Z ） m a Te o o （ Z 队团端政前云采云采政队团前端

36. ⻚面模板 Zo （队） m a oTe 团端前云采政） m a Te o o （ Z ） m a Te o o （ Z 队团端政前云采云采政队团前端

37. Zo （队） m a oTe 团端前云采政物料体系技术方案规范⻚面开发） m a Te o o （ Z 队团端政前云采前云政采） m a Te o o Z （⻚面搭建队团端

38. Zo （队） m a oTe 团端前云采政低代码搭建平台：无相） m a ） Te m o a o Z Te 面向政采云平台中后台复杂管理系统的低代码搭建平台 o （ o Z 队（团队端团前端云前采云政采政

39. Zo （创建应用队团前端应用） m a oTe 云采政菜单创建子应用⻚面创建⻚面数据库端前采云政差异视图团队） m a Te o o （ Z ） m a e 渲染 o / T 使用 o （ Z 维护字段创建布局队团前端搭建、配置采云政保存发布

40. Zo （队） m a oTe 团端前云采政） m a Te o o （ Z ） m a Te o o （ Z 队团端政前云采云采政队团前端

41. Zo （队） m a oTe 团端前云采政） m a Te o o （ Z ） m a Te o o （ Z 队团端政前云采云采政队团前端

42. 自定义组件 Zo （队） m a oTe 团端前云采政由多个字段组成后缀内容差异化动态） m a Te o o （ Z 队团端政前云采） m a Te o o Z 自定义组件（队团端前云采政

43. 自定义组件 Zo （队） m a oTe 团端前云采政 import React, { Component } from 'react'; import { Input } from 'XXX'; import './index.less'; export default class BusinessComp extends Component { render() { const { titleSuffix } = this.props; // 配置属性 return ( <div> <Input className="component-input" /> <span>{titleSuffix}</span> </div> ); } } ） m a Te o o （ Z if (widgetType === ‘customComponent’ && !_.get(window, `wuxiang_customComponent.${widgetCode}`)) { // 异步加载远程自定义组件 Load( `https://xxxxxxx/${widgetCode}/${widgetVersion}/index.umd.min.js`, widgetCode, remoteComponents, ) .then(({ comp, code: widgetCode }) => { // 将组件挂在在 windows 下 _.set(window, `wuxiang_customComponent.${widgetCode}`, comp); }); } 队团端政前云采云采政队团前端） m a Te o o （ Z 上传 CDN

44. 高级用法 Zo （队） m a oTe 团端前云采政） m a Te o o （ Z ） m a Te 兼 o o 容 IE （ Z 队团端政前云采云采政队团前端

45. Zo （队） m a oTe 团端前云采政要举办分享大会了，需要提前收集讲师和观众信息但是，线上和线下等不同渠道需要收集的字段信息是不同的） m a Te o o （ Z ） m a Te o o （ Z 队团端政前云采云采政队团前端

46. 解决⻚面差异化 Zo （队） m a oTe 团端前云采政） m a Te o o （ Z ） m a Te o o （ Z 队团端政前云采云采政队团前端

47. 流程编排 Zo （队） m a oTe 团端前云采政） m a Te o o （ Z ） m a Te o o （ Z 队团端政前云采云采政队团前端

48. 上层业务采购计划委托管理团 OA审批端前组件管理列表⻚容器表单⻚基础组件布局管理自定义组件）维度规则 am e T oo 自定义模块 Z （应用管理消息待办打印模板权限管理工作流队团端底层支持前云采政搭建能力订单中心云采政能力维度无相平台 Zo （队） m a oTe 物料平台流程编排消息平台 … 开放能力 SDK API ） m a 中心化⻚面 Te o o （ Z 数据管理队团前端云采模板中心政 NPM 组件用户体系权限

49. Zo （队） m a oTe 团端前云采政物料体系技术方案规范） m a Te o o （ Z 队团端政前云采⻚面开发⻚面搭建发布管控云采政队团前端） m a Te o o （ Z

50. Zo （队） m a oTe 团端前云采政 05 安全可靠的发布平台） m a Te o o （ Z ） m a Te o o （ Z 队团端政前云采云采政队团前端

51. Zo （队） m a oTe 团端前云采政构建部署平台：云⻓） m a Te o 依托标准化的工程结构以及 CLI 套件 API o Z （队） m a Te o o Z 搭建运行于 Docker 容器环境，且由 Node 开发的全流程构建部署服务（团队端团前端云前采云政采政

52. 构建方式升级 Zo （队） m a oTe 团端前云采政内部构建稳定性进程池容器化 Web 服务稳定性） m a Te o o （ Z ） m a Te o o （ Z 队团端政前云采云采政队团前端

53. 构建部署流程 Zo （队） m a oTe 团端前云采政 Start End ） m a Te o o （ Z ） m a Te o o （ Z 队团端政前云采云采政队团前端

54. 代码检测 Zo （队团端前云 ESLint 政采检测安全检测代码检测） m a oTe 线上检测，保证代码规范一致性依赖黑名单拦截，敏感词校验，产物校验） m a Te o o （ Z 队团端政前云采 NPM 依赖分析依赖版本分析、统计端团队前云政采） m a Te o o （ Z

55. NPM 依赖分析 Zo （队） m a oTe 团端前云采政依赖安装数据获取数据清洗）每个包管理工具都有自己的安装方式 am 数据看板 Te o o Z 例：npm install 产出 package-lock.json 文件（队团端前云采政） m a Te o o （ Z 云采政队团前端

56. NPM 依赖分析 Zo （队） m a oTe 团端前云采政依赖安装数据获取数据清洗数据看板调用包管理工具命令获取依赖数据） m npm list --prod --json --depth=0 a e ） m a Te o o （ Z ooT Z （队团端政前云采云采政队团前端

57. NPM 依赖分析 Zo （队） m a oTe 团端前云采政依赖安装数据获取数据清洗） m a Te o o （ Z 数据看板过滤包名和版本信息队团端政前云采云采政队团前端） m a Te o o （ Z

58. NPM 依赖分析 Zo （队） m a oTe 团端前云采政依赖安装数据获取数据清洗） m a Te o o （ Z 数据看板数据落库后, 由前端私库管理平台负责展示） m a Te o o （ Z 队团端政前云采云采政队团前端

59. Zo （队） m a oTe 团端前政府采购云采政浙江政府采购杭州市订单中心上海政府采购宁波市） m a Te 合同中心 o o （ Z 队团端政前云采采购单位供应商 …… 台州市 …… …… 采购监管队团前端 …… ） m a Te o o （ Z 履约中心云采政

60. Zo （队团端前硬编码问题云采物料管理问题政） m a oTe 开发提效问题线上稳定问题物料体系技术方案规范⻚面搭建发布管控设计规范接口约定可视化搭建容器化统一注册） m a Te o 配置约定 o Z （队差异化管理工具助手政团端前云采队团端逻辑编排前云采政） m 代码检测 a e T oo Z （

61. 构建政企采购云服务生态 Zo （队） m a oTe 团端前云采政） m a Te o o （ Z ） m a Te o o （ Z 队团端前云采队团前端云采政政公司地址联系电话浙江省杭州市⻄湖区云栖小镇鹏辉产业园1号楼 95763 公司官网www.zhengcaiyun.cn 政采云平台www.zcygov.cn