JCronModal.vue 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928
  1. <template>
  2. <a-modal
  3. title="corn表达式"
  4. :width="modalWidth"
  5. :visible="visible"
  6. :confirmLoading="confirmLoading"
  7. :footer="null"
  8. @ok="handleSubmit"
  9. @cancel="close"
  10. cancelText="关闭">
  11. <div class="card-container">
  12. <a-tabs defaultActiveKey="1" type="card">
  13. <a-tab-pane key="1" tab="秒">
  14. <!-- <span slot="tab"><a-icon type="schedule" /> 秒</span> -->
  15. <a-radio-group v-model="result.second.cronEvery">
  16. <a-row>
  17. <a-radio value="1">每一秒钟</a-radio>
  18. </a-row>
  19. <a-row>
  20. <a-radio value="2">每隔
  21. <a-input-number size="small" v-model="result.second.incrementIncrement" :min="1" :max="60"></a-input-number>
  22. 秒执行 从
  23. <a-input-number size="small" v-model="result.second.incrementStart" :min="0" :max="59"></a-input-number>
  24. 秒开始
  25. </a-radio>
  26. </a-row>
  27. <a-row>
  28. <a-radio value="3">具体秒数(可多选)</a-radio>
  29. <a-select style="width:354px;" size="small" mode="multiple" v-model="result.second.specificSpecific">
  30. <a-select-option v-for="(val,index) in 60" :key="index" :value="index">{{ index }}</a-select-option>
  31. </a-select>
  32. </a-row>
  33. <a-row>
  34. <a-radio value="4">周期从
  35. <a-input-number size="small" v-model="result.second.rangeStart" :min="1" :max="60"></a-input-number>
  36. <a-input-number size="small" v-model="result.second.rangeEnd" :min="0" :max="59"></a-input-number>
  37. </a-radio>
  38. </a-row>
  39. </a-radio-group>
  40. </a-tab-pane>
  41. <a-tab-pane key="2" tab="分">
  42. <!-- <span slot="tab"><a-icon type="schedule" />分</span> -->
  43. <div class="tabBody">
  44. <a-radio-group v-model="result.minute.cronEvery">
  45. <a-row>
  46. <a-radio value="1">每一分钟</a-radio>
  47. </a-row>
  48. <a-row>
  49. <a-radio value="2">每隔
  50. <a-input-number size="small" v-model="result.minute.incrementIncrement" :min="1" :max="60"></a-input-number>
  51. 分执行 从
  52. <a-input-number size="small" v-model="result.minute.incrementStart" :min="0" :max="59"></a-input-number>
  53. 分开始
  54. </a-radio>
  55. </a-row>
  56. <a-row>
  57. <a-radio value="3">具体分钟数(可多选)</a-radio>
  58. <a-select style="width:340px;" size="small" mode="multiple" v-model="result.minute.specificSpecific">
  59. <a-select-option v-for="(val,index) in Array(60)" :key="index" :value="index"> {{ index }}</a-select-option>
  60. </a-select>
  61. </a-row>
  62. <a-row>
  63. <a-radio value="4">周期从
  64. <a-input-number size="small" v-model="result.minute.rangeStart" :min="1" :max="60"></a-input-number>
  65. <a-input-number size="small" v-model="result.minute.rangeEnd" :min="0" :max="59"></a-input-number>
  66. </a-radio>
  67. </a-row>
  68. </a-radio-group>
  69. </div>
  70. </a-tab-pane>
  71. <a-tab-pane key="3" tab="时">
  72. <!-- <span slot="tab"><a-icon type="schedule" /> 时</span> -->
  73. <div class="tabBody">
  74. <a-radio-group v-model="result.hour.cronEvery">
  75. <a-row>
  76. <a-radio value="1">每一小时</a-radio>
  77. </a-row>
  78. <a-row>
  79. <a-radio value="2">每隔
  80. <a-input-number size="small" v-model="result.hour.incrementIncrement" :min="0" :max="23"></a-input-number>
  81. 小时执行 从
  82. <a-input-number size="small" v-model="result.hour.incrementStart" :min="0" :max="23"></a-input-number>
  83. 小时开始
  84. </a-radio>
  85. </a-row>
  86. <a-row>
  87. <a-radio class="long" value="3">具体小时数(可多选)</a-radio>
  88. <a-select style="width:340px;" size="small" mode="multiple" v-model="result.hour.specificSpecific">
  89. <a-select-option v-for="(val,index) in Array(24)" :key="index" >{{ index }}</a-select-option>
  90. </a-select>
  91. </a-row>
  92. <a-row>
  93. <a-radio value="4">周期从
  94. <a-input-number size="small" v-model="result.hour.rangeStart" :min="0" :max="23"></a-input-number>
  95. <a-input-number size="small" v-model="result.hour.rangeEnd" :min="0" :max="23"></a-input-number>
  96. 小时
  97. </a-radio>
  98. </a-row>
  99. </a-radio-group>
  100. </div>
  101. </a-tab-pane>
  102. <a-tab-pane key="4" tab="天">
  103. <!-- <span slot="tab"><a-icon type="schedule" /> 天</span> -->
  104. <div class="tabBody">
  105. <a-radio-group v-model="result.day.cronEvery">
  106. <a-row>
  107. <a-radio value="1">每一天</a-radio>
  108. </a-row>
  109. <a-row>
  110. <a-radio value="2">每隔
  111. <a-input-number size="small" v-model="result.week.incrementIncrement" :min="1" :max="7"></a-input-number>
  112. 周执行 从
  113. <a-select size="small" v-model="result.week.incrementStart">
  114. <a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option>
  115. </a-select>
  116. 开始
  117. </a-radio>
  118. </a-row>
  119. <a-row>
  120. <a-radio value="3">每隔
  121. <a-input-number size="small" v-model="result.day.incrementIncrement" :min="1" :max="31"></a-input-number>
  122. 天执行 从
  123. <a-input-number size="small" v-model="result.day.incrementStart" :min="1" :max="31"></a-input-number>
  124. 天开始
  125. </a-radio>
  126. </a-row>
  127. <a-row>
  128. <a-radio class="long" value="4">具体星期几(可多选)</a-radio>
  129. <a-select style="width:340px;" size="small" mode="multiple" v-model="result.week.specificSpecific">
  130. <a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option>
  131. </a-select>
  132. </a-row>
  133. <a-row>
  134. <a-radio class="long" value="5">具体天数(可多选)</a-radio>
  135. <a-select style="width:354px;" size="small" mode="multiple" v-model="result.day.specificSpecific">
  136. <a-select-option v-for="(val,index) in Array(31)" :key="index" :value="index+1">{{ index+1 }}</a-select-option>
  137. </a-select>
  138. </a-row>
  139. <a-row>
  140. <a-radio value="6">在这个月的最后一天</a-radio>
  141. </a-row>
  142. <a-row>
  143. <a-radio value="7">在这个月的最后一个工作日</a-radio>
  144. </a-row>
  145. <a-row>
  146. <a-radio value="8">在这个月的最后一个
  147. <a-select size="small" v-model="result.day.cronLastSpecificDomDay">
  148. <a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option>
  149. </a-select>
  150. </a-radio>
  151. </a-row>
  152. <a-row>
  153. <a-radio value="9">
  154. 在本月底前
  155. <a-input-number size="small" v-model="result.day.cronDaysBeforeEomMinus" :min="1" :max="31"></a-input-number>
  156. </a-radio>
  157. </a-row>
  158. <a-row>
  159. <a-radio value="10">最近的工作日(周一至周五)至本月
  160. <a-input-number size="small" v-model="result.day.cronDaysNearestWeekday" :min="1" :max="31"></a-input-number>
  161. </a-radio>
  162. </a-row>
  163. <a-row>
  164. <a-radio value="11">在这个月的第
  165. <a-input-number size="small" v-model="result.week.cronNthDayNth" :min="1" :max="5"></a-input-number>
  166. <a-select size="small" v-model="result.week.cronNthDayDay">
  167. <a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option>
  168. </a-select>
  169. </a-radio>
  170. </a-row>
  171. </a-radio-group>
  172. </div>
  173. </a-tab-pane>
  174. <a-tab-pane key="5" tab="月">
  175. <!-- <span slot="tab"><a-icon type="schedule" /> 月</span> -->
  176. <div class="tabBody">
  177. <a-radio-group v-model="result.month.cronEvery">
  178. <a-row>
  179. <a-radio value="1">每一月</a-radio>
  180. </a-row>
  181. <a-row>
  182. <a-radio value="2">每隔
  183. <a-input-number size="small" v-model="result.month.incrementIncrement" :min="0" :max="12"></a-input-number>
  184. 月执行 从
  185. <a-input-number size="small" v-model="result.month.incrementStart" :min="0" :max="12"></a-input-number>
  186. 月开始
  187. </a-radio>
  188. </a-row>
  189. <a-row>
  190. <a-radio class="long" value="3">具体月数(可多选)</a-radio>
  191. <a-select style="width:354px;" size="small" filterable mode="multiple" v-model="result.month.specificSpecific">
  192. <a-select-option v-for="(val,index) in Array(12)" :key="index" :value="index+1">{{ index+1 }}</a-select-option>
  193. </a-select>
  194. </a-row>
  195. <a-row>
  196. <a-radio value="4">从
  197. <a-input-number size="small" v-model="result.month.rangeStart" :min="1" :max="12"></a-input-number>
  198. <a-input-number size="small" v-model="result.month.rangeEnd" :min="1" :max="12"></a-input-number>
  199. 月之间的每个月
  200. </a-radio>
  201. </a-row>
  202. </a-radio-group>
  203. </div>
  204. </a-tab-pane>
  205. <a-tab-pane key="6" tab="年">
  206. <!-- <span slot="tab"><a-icon type="schedule" /> 年</span> -->
  207. <div class="tabBody">
  208. <a-radio-group v-model="result.year.cronEvery">
  209. <a-row>
  210. <a-radio value="1">每一年</a-radio>
  211. </a-row>
  212. <a-row>
  213. <a-radio value="2">每隔
  214. <a-input-number size="small" v-model="result.year.incrementIncrement" :min="1" :max="99"></a-input-number>
  215. 年执行 从
  216. <a-input-number size="small" v-model="result.year.incrementStart" :min="2019" :max="2119"></a-input-number>
  217. 年开始
  218. </a-radio>
  219. </a-row>
  220. <a-row>
  221. <a-radio class="long" value="3">具体年份(可多选)</a-radio>
  222. <a-select style="width:354px;" size="small" filterable mode="multiple" v-model="result.year.specificSpecific">
  223. <a-select-option v-for="(val,index) in Array(100)" :key="index" :value="2019+index">{{ 2019+index }}</a-select-option>
  224. </a-select>
  225. </a-row>
  226. <a-row>
  227. <a-radio value="4">从
  228. <a-input-number size="small" v-model="result.year.rangeStart" :min="2019" :max="2119"></a-input-number>
  229. <a-input-number size="small" v-model="result.year.rangeEnd" :min="2019" :max="2119"></a-input-number>
  230. 年之间的每一年
  231. </a-radio>
  232. </a-row>
  233. </a-radio-group>
  234. </div>
  235. </a-tab-pane>
  236. </a-tabs>
  237. <div class="bottom">
  238. <span class="value">{{ this.cron }}</span>
  239. </div>
  240. </div>
  241. <div class="jobBtns">
  242. <a-button key="back" @click="close">取消</a-button>
  243. <a-button @click="handleSubmit" :loading="loading" type="primary">
  244. 确定
  245. </a-button>
  246. </div>
  247. </a-modal>
  248. </template>
  249. <script>
  250. export default {
  251. name: 'VueCron',
  252. props: ['data'],
  253. data () {
  254. return {
  255. visible: false,
  256. confirmLoading: false,
  257. size: 'large',
  258. weekDays: ['天', '一', '二', '三', '四', '五', '六'].map(val => '星期' + val),
  259. result: {
  260. second: {},
  261. minute: {},
  262. hour: {},
  263. day: {},
  264. week: {},
  265. month: {},
  266. year: {}
  267. },
  268. defaultValue: {
  269. second: {
  270. cronEvery: '',
  271. incrementStart: 3,
  272. incrementIncrement: 5,
  273. rangeStart: 1,
  274. rangeEnd: 0,
  275. specificSpecific: []
  276. },
  277. minute: {
  278. cronEvery: '',
  279. incrementStart: 3,
  280. incrementIncrement: 5,
  281. rangeStart: 1,
  282. rangeEnd: '0',
  283. specificSpecific: []
  284. },
  285. hour: {
  286. cronEvery: '',
  287. incrementStart: 3,
  288. incrementIncrement: 5,
  289. rangeStart: '0',
  290. rangeEnd: '0',
  291. specificSpecific: []
  292. },
  293. day: {
  294. cronEvery: '',
  295. incrementStart: 1,
  296. incrementIncrement: '1',
  297. rangeStart: '',
  298. rangeEnd: '',
  299. specificSpecific: [],
  300. cronLastSpecificDomDay: 1,
  301. cronDaysBeforeEomMinus: 1,
  302. cronDaysNearestWeekday: 1
  303. },
  304. week: {
  305. cronEvery: '',
  306. incrementStart: 1,
  307. incrementIncrement: 1,
  308. specificSpecific: [],
  309. cronNthDayDay: 1,
  310. cronNthDayNth: 1
  311. },
  312. month: {
  313. cronEvery: '',
  314. incrementStart: 3,
  315. incrementIncrement: 5,
  316. rangeStart: 1,
  317. rangeEnd: 1,
  318. specificSpecific: []
  319. },
  320. year: {
  321. cronEvery: '',
  322. incrementStart: 2017,
  323. incrementIncrement: 1,
  324. rangeStart: 2019,
  325. rangeEnd: 2019,
  326. specificSpecific: []
  327. },
  328. label: ''
  329. }
  330. }
  331. },
  332. computed: {
  333. modalWidth () {
  334. return 608
  335. },
  336. secondsText () {
  337. let seconds = ''
  338. const cronEvery = this.result.second.cronEvery || ''
  339. switch (cronEvery.toString()) {
  340. case '1':
  341. seconds = '*'
  342. break
  343. case '2':
  344. seconds = this.result.second.incrementStart + '/' + this.result.second.incrementIncrement
  345. break
  346. case '3':
  347. this.result.second.specificSpecific.map(val => { seconds += val + ',' })
  348. seconds = seconds.slice(0, -1)
  349. break
  350. case '4':
  351. seconds = this.result.second.rangeStart + '-' + this.result.second.rangeEnd
  352. break
  353. }
  354. return seconds
  355. },
  356. minutesText () {
  357. let minutes = ''
  358. const cronEvery = this.result.minute.cronEvery || ''
  359. switch (cronEvery.toString()) {
  360. case '1':
  361. minutes = '*'
  362. break
  363. case '2':
  364. minutes = this.result.minute.incrementStart + '/' + this.result.minute.incrementIncrement
  365. break
  366. case '3':
  367. this.result.minute.specificSpecific.map(val => {
  368. minutes += val + ','
  369. })
  370. minutes = minutes.slice(0, -1)
  371. break
  372. case '4':
  373. minutes = this.result.minute.rangeStart + '-' + this.result.minute.rangeEnd
  374. break
  375. }
  376. return minutes
  377. },
  378. hoursText () {
  379. let hours = ''
  380. const cronEvery = this.result.hour.cronEvery || ''
  381. switch (cronEvery.toString()) {
  382. case '1':
  383. hours = '*'
  384. break
  385. case '2':
  386. hours = this.result.hour.incrementStart + '/' + this.result.hour.incrementIncrement
  387. break
  388. case '3':
  389. this.result.hour.specificSpecific.map(val => {
  390. hours += val + ','
  391. })
  392. hours = hours.slice(0, -1)
  393. break
  394. case '4':
  395. hours = this.result.hour.rangeStart + '-' + this.result.hour.rangeEnd
  396. break
  397. }
  398. return hours
  399. },
  400. daysText () {
  401. let days = ''
  402. const cronEvery = this.result.day.cronEvery || ''
  403. switch (cronEvery.toString()) {
  404. case '1':
  405. break
  406. case '2':
  407. case '4':
  408. case '11':
  409. days = '?'
  410. break
  411. case '3':
  412. days = this.result.day.incrementStart + '/' + this.result.day.incrementIncrement
  413. break
  414. case '5':
  415. this.result.day.specificSpecific.map(val => {
  416. days += val + ','
  417. })
  418. days = days.slice(0, -1)
  419. break
  420. case '6':
  421. days = 'L'
  422. break
  423. case '7':
  424. days = 'LW'
  425. break
  426. case '8':
  427. days = this.result.day.cronLastSpecificDomDay + 'L'
  428. break
  429. case '9':
  430. days = 'L-' + this.result.day.cronDaysBeforeEomMinus
  431. break
  432. case '10':
  433. days = this.result.day.cronDaysNearestWeekday + 'W'
  434. break
  435. }
  436. return days
  437. },
  438. weeksText () {
  439. let weeks = ''
  440. const cronEvery = this.result.day.cronEvery || ''
  441. switch (cronEvery.toString()) {
  442. case '1':
  443. case '3':
  444. case '5':
  445. weeks = '?'
  446. break
  447. case '2':
  448. weeks = this.result.week.incrementStart + '/' + this.result.week.incrementIncrement
  449. break
  450. case '4':
  451. this.result.week.specificSpecific.map(val => {
  452. weeks += val + ','
  453. })
  454. weeks = weeks.slice(0, -1)
  455. break
  456. case '6':
  457. case '7':
  458. case '8':
  459. case '9':
  460. case '10':
  461. weeks = '?'
  462. break
  463. case '11':
  464. weeks = this.result.week.cronNthDayDay + '#' + this.result.week.cronNthDayNth
  465. break
  466. }
  467. return weeks
  468. },
  469. monthsText () {
  470. let months = ''
  471. const cronEvery = this.result.month.cronEvery || ''
  472. switch (cronEvery.toString()) {
  473. case '1':
  474. months = '*'
  475. break
  476. case '2':
  477. months = this.result.month.incrementStart + '/' + this.result.month.incrementIncrement
  478. break
  479. case '3':
  480. this.result.month.specificSpecific.map(val => {
  481. months += val + ','
  482. })
  483. months = months.slice(0, -1)
  484. break
  485. case '4':
  486. months = this.result.month.rangeStart + '-' + this.result.month.rangeEnd
  487. break
  488. }
  489. return months
  490. },
  491. yearsText () {
  492. let years = ''
  493. const cronEvery = this.result.year.cronEvery || ''
  494. switch (cronEvery.toString()) {
  495. case '1':
  496. years = '*'
  497. break
  498. case '2':
  499. years = this.result.year.incrementStart + '/' + this.result.year.incrementIncrement
  500. break
  501. case '3':
  502. this.result.year.specificSpecific.map(val => {
  503. years += val + ','
  504. })
  505. years = years.slice(0, -1)
  506. break
  507. case '4':
  508. years = this.result.year.rangeStart + '-' + this.result.year.rangeEnd
  509. break
  510. }
  511. return years
  512. },
  513. cron () {
  514. return `${this.secondsText || '*'} ${this.minutesText || '*'} ${this.hoursText || '*'} ${this.daysText || '*'} ${this.monthsText || '*'} ${this.weeksText || '?'} ${this.yearsText || '*'}`
  515. }
  516. },
  517. watch: {
  518. visible: {
  519. handler () {
  520. let label = this.data
  521. const arr = label.split(' ')
  522. const len = arr.length
  523. const bx = (a, b) => {
  524. for (let i = 0; i < a; i++) {
  525. b.push('*')
  526. }
  527. return b
  528. }
  529. if (len < 7) {
  530. label = bx(7 - len, arr).join(' ')
  531. }
  532. console.log(label, 'ddddddddddd')
  533. if (label) {
  534. this.secondsReverseExp(label)
  535. this.minutesReverseExp(label)
  536. this.hoursReverseExp(label)
  537. this.daysReverseExp(label)
  538. this.daysReverseExp(label)
  539. this.monthsReverseExp(label)
  540. this.yearReverseExp(label)
  541. JSON.parse(JSON.stringify(label))
  542. } else {
  543. this.result = JSON.parse(JSON.stringify(this.defaultValue))
  544. }
  545. }
  546. }
  547. },
  548. methods: {
  549. show () {
  550. this.visible = true
  551. },
  552. handleSubmit () {
  553. this.$emit('ok', this.cron)
  554. this.close()
  555. this.visible = false
  556. },
  557. close () {
  558. this.visible = false
  559. },
  560. secondsReverseExp (seconds) {
  561. const val = seconds.split(' ')[0]
  562. // alert(val);
  563. const second = {
  564. cronEvery: '',
  565. incrementStart: 3,
  566. incrementIncrement: 5,
  567. rangeStart: 1,
  568. rangeEnd: 0,
  569. specificSpecific: []
  570. }
  571. switch (true) {
  572. case val.includes('*'):
  573. second.cronEvery = '1'
  574. break
  575. case val.includes('/'):
  576. second.cronEvery = '2'
  577. second.incrementStart = val.split('/')[0]
  578. second.incrementIncrement = val.split('/')[1]
  579. break
  580. case val.includes(','):
  581. second.cronEvery = '3'
  582. second.specificSpecific = val.split(',').map(Number).sort()
  583. break
  584. case val.includes('-'):
  585. second.cronEvery = '4'
  586. second.rangeStart = val.split('-')[0]
  587. second.rangeEnd = val.split('-')[1]
  588. break
  589. default:
  590. second.cronEvery = '1'
  591. }
  592. this.result.second = second
  593. },
  594. minutesReverseExp (minutes) {
  595. const val = minutes.split(' ')[1]
  596. const minute = {
  597. cronEvery: '',
  598. incrementStart: 3,
  599. incrementIncrement: 5,
  600. rangeStart: 1,
  601. rangeEnd: 0,
  602. specificSpecific: []
  603. }
  604. switch (true) {
  605. case val.includes('*'):
  606. minute.cronEvery = '1'
  607. break
  608. case val.includes('/'):
  609. minute.cronEvery = '2'
  610. minute.incrementStart = val.split('/')[0]
  611. minute.incrementIncrement = val.split('/')[1]
  612. break
  613. case val.includes(','):
  614. minute.cronEvery = '3'
  615. minute.specificSpecific = val.split(',').map(Number).sort()
  616. break
  617. case val.includes('-'):
  618. minute.cronEvery = '4'
  619. minute.rangeStart = val.split('-')[0]
  620. minute.rangeEnd = val.split('-')[1]
  621. break
  622. default:
  623. minute.cronEvery = '1'
  624. }
  625. this.result.minute = minute
  626. },
  627. hoursReverseExp (hours) {
  628. const val = hours.split(' ')[2]
  629. const hour = {
  630. cronEvery: '',
  631. incrementStart: 3,
  632. incrementIncrement: 5,
  633. rangeStart: 1,
  634. rangeEnd: '0',
  635. specificSpecific: []
  636. }
  637. switch (true) {
  638. case val.includes('*'):
  639. hour.cronEvery = '1'
  640. break
  641. case val.includes('/'):
  642. hour.cronEvery = '2'
  643. hour.incrementStart = val.split('/')[0]
  644. hour.incrementIncrement = val.split('/')[1]
  645. break
  646. case val.includes(','):
  647. hour.cronEvery = '3'
  648. hour.specificSpecific = val.split(',').map(Number).sort()
  649. break
  650. case val.includes('-'):
  651. hour.cronEvery = '4'
  652. hour.rangeStart = val.split('-')[0]
  653. hour.rangeEnd = val.split('-')[1]
  654. break
  655. default:
  656. hour.cronEvery = '1'
  657. }
  658. this.result.hour = hour
  659. },
  660. daysReverseExp (cron) {
  661. const days = cron.split(' ')[3]
  662. const weeks = cron.split(' ')[5]
  663. const day = {
  664. cronEvery: '',
  665. incrementStart: 1,
  666. incrementIncrement: 1,
  667. rangeStart: 1,
  668. rangeEnd: 1,
  669. specificSpecific: [],
  670. cronLastSpecificDomDay: 1,
  671. cronDaysBeforeEomMinus: 1,
  672. cronDaysNearestWeekday: 1
  673. }
  674. const week = {
  675. cronEvery: '',
  676. incrementStart: 1,
  677. incrementIncrement: 1,
  678. specificSpecific: [],
  679. cronNthDayDay: 1,
  680. cronNthDayNth: '1'
  681. }
  682. if (!days.includes('?')) {
  683. switch (true) {
  684. case days.includes('*'):
  685. day.cronEvery = '1'
  686. break
  687. case days.includes('?'):
  688. // 2、4、11
  689. break
  690. case days.includes('/'):
  691. day.cronEvery = '3'
  692. day.incrementStart = days.split('/')[0]
  693. day.incrementIncrement = days.split('/')[1]
  694. break
  695. case days.includes(','):
  696. day.cronEvery = '5'
  697. day.specificSpecific = days.split(',').map(Number).sort()
  698. // day.specificSpecific.forEach(function (value, index) {
  699. // day.specificSpecific[index] = value -1;
  700. // });
  701. break
  702. case days.includes('LW'):
  703. day.cronEvery = '7'
  704. break
  705. case days.includes('L-'):
  706. day.cronEvery = '9'
  707. day.cronDaysBeforeEomMinus = days.split('L-')[1]
  708. break
  709. case days.includes('L'):
  710. // alert(days);
  711. if (days.len == 1) {
  712. day.cronEvery = '6'
  713. day.cronLastSpecificDomDay = '1'
  714. } else {
  715. day.cronEvery = '8'
  716. day.cronLastSpecificDomDay = Number(days.split('L')[0])
  717. }
  718. break
  719. case days.includes('W'):
  720. day.cronEvery = '10'
  721. day.cronDaysNearestWeekday = days.split('W')[0]
  722. break
  723. default:
  724. day.cronEvery = '1'
  725. }
  726. } else {
  727. switch (true) {
  728. case weeks.includes('/'):
  729. day.cronEvery = '2'
  730. week.incrementStart = weeks.split('/')[0]
  731. week.incrementIncrement = weeks.split('/')[1]
  732. break
  733. case weeks.includes(','):
  734. day.cronEvery = '4'
  735. week.specificSpecific = weeks.split(',').map(Number).sort()
  736. break
  737. case '#':
  738. day.cronEvery = '11'
  739. week.cronNthDayDay = weeks.split('#')[0]
  740. week.cronNthDayNth = weeks.split('#')[1]
  741. break
  742. default:
  743. day.cronEvery = '1'
  744. week.cronEvery = '1'
  745. }
  746. }
  747. this.result.day = day
  748. this.result.week = week
  749. },
  750. monthsReverseExp (cron) {
  751. const months = cron.split(' ')[4]
  752. const month = {
  753. cronEvery: '',
  754. incrementStart: 3,
  755. incrementIncrement: 5,
  756. rangeStart: 1,
  757. rangeEnd: 1,
  758. specificSpecific: []
  759. }
  760. switch (true) {
  761. case months.includes('*'):
  762. month.cronEvery = '1'
  763. break
  764. case months.includes('/'):
  765. month.cronEvery = '2'
  766. month.incrementStart = months.split('/')[0]
  767. month.incrementIncrement = months.split('/')[1]
  768. break
  769. case months.includes(','):
  770. month.cronEvery = '3'
  771. month.specificSpecific = months.split(',').map(Number).sort()
  772. break
  773. case months.includes('-'):
  774. month.cronEvery = '4'
  775. month.rangeStart = months.split('-')[0]
  776. month.rangeEnd = months.split('-')[1]
  777. break
  778. default:
  779. month.cronEvery = '1'
  780. }
  781. this.result.month = month
  782. },
  783. yearReverseExp (cron) {
  784. const years = cron.split(' ')[6]
  785. const year = {
  786. cronEvery: '',
  787. incrementStart: 3,
  788. incrementIncrement: 5,
  789. rangeStart: 2019,
  790. rangeEnd: 2019,
  791. specificSpecific: []
  792. }
  793. switch (true) {
  794. case years.includes('*'):
  795. year.cronEvery = '1'
  796. break
  797. case years.includes('/'):
  798. year.cronEvery = '2'
  799. year.incrementStart = years.split('/')[0]
  800. year.incrementIncrement = years.split('/')[1]
  801. break
  802. case years.includes(','):
  803. year.cronEvery = '3'
  804. year.specificSpecific = years.split(',').map(Number).sort()
  805. break
  806. case years.includes('-'):
  807. year.cronEvery = '4'
  808. year.rangeStart = years.split('-')[0]
  809. year.rangeEnd = years.split('-')[1]
  810. break
  811. default:
  812. year.cronEvery = '1'
  813. }
  814. this.result.year = year
  815. }
  816. }
  817. }
  818. </script>
  819. <style lang="less">
  820. .card-container {
  821. background: #fff;
  822. overflow: hidden;
  823. padding: 12px;
  824. position: relative;
  825. width: 100%;
  826. .ant-tabs{
  827. border:1px solid #e6ebf5;
  828. padding: 0;
  829. .ant-tabs-bar {
  830. margin: 0;
  831. outline: none;
  832. border-bottom: none;
  833. .ant-tabs-nav-container{
  834. margin: 0;
  835. .ant-tabs-tab {
  836. padding: 0 24px!important;
  837. background-color: #f5f7fa!important;
  838. margin-right: 0px!important;
  839. border-radius: 0;
  840. line-height: 38px;
  841. border: 1px solid transparent!important;
  842. border-bottom: 1px solid #e6ebf5!important;
  843. }
  844. .ant-tabs-tab-active.ant-tabs-tab{
  845. color: #409eff;
  846. background-color: #fff!important;
  847. border-right:1px solid #e6ebf5!important;
  848. border-left:1px solid #e6ebf5!important;
  849. border-bottom:1px solid #fff!important;
  850. font-weight: normal;
  851. transition:none!important;
  852. }
  853. }
  854. }
  855. .ant-tabs-tabpane{
  856. padding: 15px;
  857. .ant-row{
  858. margin: 10px 0;
  859. }
  860. .ant-select,.ant-input-number{
  861. width: 100px;
  862. }
  863. }
  864. }
  865. }
  866. </style>
  867. <style lang="less" scoped>
  868. .container-widthEn{
  869. width: 755px;
  870. }
  871. .container-widthCn{
  872. width: 608px;
  873. }
  874. .language{
  875. text-align: center;
  876. position: absolute;
  877. right: 13px;
  878. top: 13px;
  879. border: 1px solid transparent;
  880. height: 40px;
  881. line-height: 38px;
  882. font-size: 16px;
  883. color: #409eff;
  884. z-index: 1;
  885. background: #f5f7fa;
  886. outline: none;
  887. width: 47px;
  888. border-bottom: 1px solid #e6ebf5;
  889. border-radius: 0;
  890. }
  891. .card-container{
  892. .bottom{
  893. display: flex;
  894. justify-content: center;
  895. padding: 10px 0 0 0;
  896. .cronButton{
  897. margin: 0 10px;
  898. line-height: 40px;
  899. }
  900. }
  901. }
  902. .tabBody{
  903. .a-row{
  904. margin: 10px 0;
  905. .long{
  906. .a-select{
  907. width:354px;
  908. }
  909. }
  910. .a-input-number{
  911. width: 110px;
  912. }
  913. }
  914. }
  915. </style>