这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战
写在前面
这是几个月前开发的一个有点复杂的组件，主要是用来拼接多层筛选条件，之前做的时候比较匆忙，现在梳理一下。效果如图：
分析
复杂的内容简单化首先是要做拆分。略微观察可见：选中某个变量 + 某个逻辑条件 + 某个具体值 + 该条件操作按钮四者组成了条件的最小单元。也正好是添加的【单条件】。
【单条件】如下所示：
【单条件】内部逻辑相对独立，故先忽略内部逻辑作为一个考虑。
【条件组】即为：某个共有逻辑条件 + 多个【单条件】 + 条件组操作按钮。
【最外层】即为：某个共有逻辑条件 + 多个【单条件】或者【条件组】。
外层整体逻辑：
- 每层内部循环判断是【单条件】还是【条件组】，条件组内部有二次循环。
- 判断当前层是否为最外层或者最内层，这两层没有整体删除操作按钮。
- 底部的两个按钮（添加条件 和 添加条件组）外加条件组删除按钮，均是数组的操作，不难实现。
- 留意内层清空，对应外层也要随之清空。
现在产品只要求最多三层，【条件组】不需要内嵌【条件组】两层循环也能实现。为了保险起见（万一后续紧急改需求），此处还是使用递归组件实现。多一个判断，最多 N 层，到第 N 层不用继续循环且该层不可内嵌【条件组】。
内层逻辑：
- 所选变量类型决定可选逻辑条件范围。若变量类型是数组，请求具体值可选项，并在全局存一份。
- 所选逻辑条件决定后续输入具体值类型（文本输入，数字输入，日期输入，范围输入，下拉选项单选多选）及具体值校验内容。
这一步非常繁琐，规则清楚后（让需求写清楚规则文档后）分别对象取值或写一个函数去处理的过程。 - 内部增减按钮仅为对上一层数组操作，不难实现。
- 每个【单条件】内部分别校验，若有问题给不同 class。整体校验通过该 class 有无判断。各种区间类型校验想办法转换成数学表达式就好处理了。
果然是写之前压力山大，写完后，就这，不值一提。可能时间都花在和产品和后台同步内层逻辑的规则上去了吧。
看完本文不知你有没有更好的想法，欢迎评论区留言讨论！😝😝😝
