--- theme: jzman highlight: atelier-dune-light --- > 大家好，我是寒草😈，一只工作一年出头的草系码猿🐒 > 如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~ > 加我微信：**hancao97**，邀你进群，一起学习交流，成为更优秀的工程师～「这是我参与2022首次更文挑战的第1天，活动详情查看：[2022首次更文挑战](https://juejin.cn/post/7052884569032392740 "https://juejin.cn/post/7052884569032392740")」。 # 我很烦我的上一篇文章[LowCode + 团队组件设计规范 = 灵光一闪？](https://juejin.cn/post/7055291302887292959)提到过，我有规范化标准化生产业务基础组件的想法。每次写这样一个组件差异也不是很大，每次都要有同样的 `api`，同样的 `props`，写多了就产生了厌烦。 > 没错，我就是一个很容易厌倦的工程师。好烦哦～厌倦了怎么办呢，想办法解决啊。 > 没错，虽然我是一个很容易厌倦的工程师，但是我还是有这该死的责任感。好烦哦～用技术手段，用可视化界面，去产生那些没啥营养的代码。 > 啊，我这该死的无处安放的魅力与中二气息。好烦哦，我好喜欢我自己「🐶 狗头」所以，开搞开搞，整个编码过程大约一个小时，比较简单～ # 一小时编码 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/62d71b52e29f41adbb6ee1a1f5c1bc3a~tplv-k3u1fbpfcp-watermark.image?) 整体的思路就很简单： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/773dcffbc42e4fc783e100c4d1d749f1~tplv-k3u1fbpfcp-watermark.image?) 在页面进行操作后生成中间数据，之后通过中间数据生成代码。下面我分别介绍 Form 和 Table 我分别写了什么。 ## Form ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/87a3cf616bae4e65b978d99025fe9e0d~tplv-k3u1fbpfcp-watermark.image?) **props:** - disabled - disabledFileds **methods:** - getData - setData - clearData - validate - clearValidate **数据结构：** ```js Array.<{ isInline: Boolean, label: String, key: String, type: String, required: Boolean }> ``` **作为表单要包含所有常见表单项：** ```js typeoOtions: [{ type: "RADIO", },{ type: "CHECKBOX", },{ type: "INPUT" }, { type: "INPUTNUMBER" }, { type: "SELECT" },{ type: "CASCADER" },{ type: "SWITCH" }, { type: "TIMEPICKER" }, { type: "DATEPICKER" }, { type: "DATETIMEPICKER" }, { type: "RATE" }, { type: "CUSTMER" } ], ``` **生成代码的工具方法：** ```js const optionTypes = [ 'RADIO', 'CHECKBOX', 'SELECT', 'CASCADER', ]; const getFormItem = (schemaItem) => { switch (schemaItem.type) { case 'RADIO': return `

`; case "CHECKBOX": return `

`; case 'INPUT': return `` case 'INPUTNUMBER': return ``; case 'SELECT': return `

`; case 'CASCADER': return ``; case 'SWITCH': return ``; case 'TIMEPICKER': return `` case 'DATEPICKER': return ``; case 'DATETIMEPICKER': return ``; case 'RATE': return ``; case 'CUSTMER': default: return ``; } }; export const getFormCode = (schema) => { return ` ` } ``` ## Table ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/917db1d55ceb43828689d239a9ec2f92~tplv-k3u1fbpfcp-watermark.image?) **props:** - filter - selectable **methods:** - reload - gotoFirstPage - getSelectionInfo - setSelectionInfo **event:** - selectionChange **数据结构：** ```js Array.<{ type: 'normal'｜'selection', prop: String, title: String, isCustmer: Boolean }> ``` **生成代码的工具方法：** ```js const getTableColumn = (schemaItem) => { if(schemaItem.type == 'selection') { return ``; } else if(schemaItem.isCustmer) { return ` `; } else { return ``; } }; export const getTableCode = (schema) => { return ` `; } ``` # 说不出再见 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/25154a7a7a1546df973d60cbc5eeaffa~tplv-k3u1fbpfcp-watermark.image?) 整片文章难度不高，但是可以提升自己的开发效率，就像我在我之前的年终总结[「寒草呈献」我的肩上是风，风上是闪烁的星群✨｜致直面焦虑与本心的 2021](https://juejin.cn/post/7046522852161355790)所说的，我们无法避免工作中存在重复，但是我们可以想办法去避免重复的劳作，使自己摆脱西西弗斯式的工作。 ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨ **君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。** ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨ `下一篇文章再会～` > 我是寒草，微信：**hancao97**，欢迎加我的微信，成为我的伙伴，也可以找我拉你进微信群和伙伴们一起成长！