Vue组件（28）做一个更好用的查询控件（四）把日期查询做到极致

需求场景

客户需要查询上一个月的新增客户的功能。

• 后端：
  这个好办，客户的注册日期的字段类型是datetime的，传给我一个范围就可以，比如这样：2021-01-01、2021-01-31，这样我就可以查询某个月份的数据了。

• 前端：
  好办，UI库的日期控件提供了这个功能很简单。

• 客户：
  这个，功能是实现了，但是我要查一个月份的，你们做的为啥是这样？

0010日期的范围查询.png

为啥让我先选一号，然后再去选31号？太麻烦了，你们能不能做出这样：

0011直接选择月份.png

直接选月份不香吗？

• 前端
  我改好了。

• 后端
  为了提高查询效率，我们增加了一个int类型的字段，里面放 202101、202102这样的数据，这样前端只需要提供年月（202101）的数据就可以了。

• 前端
  不早说。。。。。。

讨论

这个怎么办？似乎要做个转换，前端日期控件给的类型一般都是标准的date，那么怎么表达月份？或者这个需求其实要的是起始日期和结束日期，这又要怎么转换？

如果要做转换的话，那么是前端做还是后端做？

听说因为这些事情，前后端经常吵架。。。

这还只是按月查询，那么有没有按年查询的需求呢？

我一朋友和我说，后端不爱转的话，那么就前端转呗，有啥的。
当然也可以换过来说，前端不爱转的话，那么后端转呗，有啥的。

好吧，还是说点有用的，这种麻烦事前后端都不爱做，烦。这是人之常情，谁又愿意给自己找活干呢？

但是总是要做呀，不做的话，客户用的不方便。

封装个控件来解决麻烦

先总结一下各方的需求。

• 后端
  日期的类型一般是datetime，当然也可能是date或者时间戳，或者是int、char的形式，不管用哪种都需要罗列一下。

• 前端
  现在UI库的日期控件都会提供各种形式，以前只是简单的年月日的形式，现在多了年、年月、年周、范围查询等方式，既然提供了就要利用起来不能浪费吧。

• 客户
  “我不管你们是啥类型，也不管用的啥UI库，总之，越方便越好，其他我不关心。”

• 总结：

  
  
  0012查询日期的分析.png

解决方案

• 后端需要的格式：
  首先归纳一下后端需要的数据格式，我们可以通过format来实现。

      switch (props.submitFormat) {
        case 'date': // 提交标准的日期形式
          re1 = findText.value[0]
          re2 = findText.value[1]
          break
        case 'timestamp': // 提交时间戳
          re1 = findText.value[0].valueOf()
          re2 = findText.value[1].valueOf()
          break
        default: // 通过format实现后端需要日期格式，比如 2021-01-01等
          re1 = dateFormat(findText.value[0]).format(props.submitFormat)
          console.log('提交日期', re1)
          re2 = dateFormat(findText.value[1]).format(props.submitFormat)
          console.log('提交日期', re2)
          break
      }

直接使用 dayjs 来实现格式化，https://day.js.org/docs/zh-CN/display/format 。因为element-plus用的就是这个，我们就不引入其他库了，

• 前端的日期控件的显示形式
  然后是控件的显示形式，我们再增加一个选项，可以选择各种日期形式

  
  
  0013选择日期形式.png

0014年月的选择.png

0015年的选择.png

这样就可以非常灵活了。按月查、按年查，设置开始结束都可以。

• 数据调整
  只是做到这些，还差了一点点，因为用户选择 2021-01的话，其实后端需要的是 2021-01-01 到 2021-01-31（或者是 2021-02-01）。

也就是说要把用户选择的一个日期，改成一个范围日期。还需要做点判断和转换才可以。