react+antd 解决多选的下拉选项中存在“全部”的问题

需求要求多选的下拉数据为(括号后为枚举值)：

1.全部（’0‘）

2.未开始（’1‘）

3.进行中（’2‘）

4.已结束（’3‘）

5.已关闭（’4‘）

选择场景包括：

1.选择了“全部”后，选择了其他选项——最终显示选中的选项排除“全部”

例如： 第一个选“全部”，第二个选“未开始”，那么展示在页面的选中项仅为“未开始”

2.选择了除“全部”外的所有选项——最终显示选中的选项应该仅有“全部”

例如：选中“未开始”，“进行中”，“已结束”，“已关闭”，那么展示在页面的选中项应该仅为“全部”

3.在选择框为空的情况下，选中任何值都可以

例如：仅选择“全部”，那么显示即为“全部”；选中“未开始”，那么显示即为“未开始”

4.在第一个选择了除“全部”外的任意一项后选择了“全部”——最终显示选择的项目应为“全部”

例如：第一个选择了“未开始”，第二个选择了“全部”，那么展示在页面的选中项应为“全部”

代码实现如下：

const OnChange = (value: string[]) => {
    if (value.indexOf('0') === -1) {
      if (value.length === enum.length - 1) {
        form.setFieldValue('type', ['0']);
      } else {
        form.setFieldValue('type', value);
      }
    } else {
      if (value[0] === '0') {
        if (value.length === 1) {
          form.setFieldValue('type', ['0']);
        } else {
          form.setFieldValue(
            'type',
            value.filter((item) => item !== '0'),
          );
        }
      } else {
        form.setFieldValue('type', ['0']);
      }
    }
  };

HTML结构如下：

<Select
     placeholder="请选择"
     allowClear
     options={enum}
     mode="multiple"
     maxTagCount={1}
     onChange={OnChange}
/>

（实现这个需求的方法很朴实，都是通过if-else判断的，也思考过是否更改成switch来让结构更加清晰，但是判断带有嵌套可能会更加不好理解，最终还是选择了if-else来判断，如果小伙伴们有什么更加简洁优雅的方式欢迎评论区讨论吖~）