又称 七子表达式，用于选择周期性的时间
在写的过程中发现，这个居然还分两种格式，一种是crontab，一种是quartz，
找了社区的一些组件
crontab格式的:
1.react-js-cron
样式不错，需要手动汉化，需要安装antd，但是格式是crontab的，后端需要quartz格式的表达式，不符合
image.png
quartz格式的:
1.antd-cron-editor(bug太明显) :
选week的时候，不展示星期几，连数字都没有(需要设置span=3以上)
星期几的时候只有数字，连”星期”这个中文都没有，并且不是从周日开始
2.@sbzen/re-cron(无法汉化):
样式可以，但是无法汉化
3. antd-cron(bug太明显):
需要固定住antd的版本，否则样式会错乱，没有github地址，没有详细文档，只有onChange和value这两个参数
在分钟那一页选第二个周期后，又在第四个上指定，会出现undefined字面
4.cron-editor-react(bug太明显)
选周的具体星期数，会多出一堆数字，还会重复
5.react-crons(部分无法汉化):
选择周的时候，星期几无法汉化，都汉化了这么多了，week的为啥不做汉化
并且onChange出来的value还带着MON,TUS 之类的星期大写，还没换成数字
6.OneCron:
交互太丑了
7.react-cron-antd:
编译直接报错
8.@tulaoda/cron-editor-react:
公司仓库没这个包
最后决定采用react-crons也就是第5个，因为改起来相对简单一些
需要先安装antd "antd": "^3.20.1"，并且antd版本不能太高，比如4.x，样式会乱
不需要在全局的样式环境里面引入antd的样式，因为接下来的dist里面的js自带了引入样式
过程：
1.不能用class继承去修改，因为要改的实在太多了，然后想当然的复制了node_modules里面的react-crons/src 到项目里面手动修改，然后因为依赖项太多，且基本上不符合eslint规范，所以放弃
2.选择react-crons/dist 里的index.js去修改，这样不需要安装依赖，eslint规范修复也只要用vscode的当前文件一键修复，再加上eslint-disable即可，但是这样的es5的代码改起来很麻烦，
-
找到该文件里的 SUN,MON,TUE的关键字进行一键替换
image.png
4.发现还有个很low的地方就是，选了之后不会给我转成对应的数字？？？？吐了呀
image.png
-
找到对应的关键字 weekOptions
image.png
换成
const weekOptions = [
{label: '周日', value: '1'},
{label: '周一', value: '2'},
{label: '周二', value: '3'},
{label: '周三', value: '4'},
{label: '周四', value: '5'},
{label: '周五', value: '6'},
{label: '周六', value: '7'}
];
要注意：周日是1，周日是1，周日是1 !!!!!!!
好多地方的cron表达式生成的周日是0,并且是0~6的范围
我这个项目里面能解析的是1~7的范围
6.因为是用weekOptions遍历生成的checkbox或者Select下拉框，然后我们把一个字符串数组改成了JSON数组，所以这里的格式也要改下
image.png
以及这里的createChecks 生成复选框的通用函数，加个isMap参数来判断如果传入的数组是个JSON数组，那就取里面的label和value作为复选框的文案和值
image.png
配好了isMap后在这里传入
image.png
7.之前一键替换后，发现有些地方是需要替换文案的，有些是需要替换值的，不出意外的话，刚才的步骤里，这些值从"MON"被换成了"周一"，但是实际上得是值,所以需要手动换成'1'
image.png
image.png
8.大概就这些，然后改完了后使用方式还是和原来一样，假设这个文件叫cron.js
那么我们引入还是
import {Cron} from './Corn';
正常按文档传参即可
- 用着改造后的Corn组件写代码，写着写着还没意识到问题的严重性，直到今天提测的时候才发现有个很蛋疼的问题
这个Cron组件没有支持 传入disabled属性！！！！！！
我想禁用这个组件，发现没有这个参数！！！！！ 也就是说，即使在formType==='view'的模式下，它依旧可以被改变值
吐了呀，只能手动再进去改
我需要手动接受 props中的disabled属性，而在这个编译产物里面，props已经有了
image.png
也就是说，我们需要加上 disabled: _this$props.disabled属性就可以了
这个组件一共用了InputNumber,Select,CheckBox,Radio组件
好在有些地方是自带了disabled属性的
image.png
那就用vscode的全局替换，但是不能直接搜disabled替换，因为可能会把后面的样式也替换掉
要搜
disabled: 后面带个空格，这样子匹配能精确一些，大概像这样子匹配
把
disabled: 空格 替换成 disabled: _this$props.disabled ||替换完了后长这样
image.png
然后再继续替换
搜antd.Radio, { 替换成antd.Radio, {disabled: _this$props.disabled,
Select也可以用这个替换，不过我找了一下，Select的基本上都是在上一步被替换好了
替换后长这样
image.png
代码没对齐，不过不管它了。
vscode右侧的预览可以看到哪些地方改了之后有语法错误，大部分都是写重复了，多加了一个disabled属性，手动删掉就行
还有个特殊的地方，是这里，这里不是_this$props.disabled了，而是props.disabled了，因为这个地方跟刚刚那些地方，不在同一个函数里，
image.png
10 .还有个InputCron，一起出来的东西
import {Cron, InputCron} from './Corn';
如果用InputCron，发现disabled属性刚改造的居然又没用了，再改下
找到InputCron那一部分
image.png
原来少传了一层，加上即可
image.png
网友评论