.no-vue3-cron-div { .language { position: absolute; r..._vue3 cron组件">
devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue3Cron表达式组件

作者：繁依Fanyi0 | 2024-04-12 12:32:56

赞

踩

vue3 cron组件

npm安装no-vue3-cron引入报错，就直接把代码拿来自己改了

no-vue3-cron仓库地址：https://github.com/wuchuanpeng/no-vue3-cron

vue-cron.vue

  1. <style lang="scss">
  2. .no-vue3-cron-div {
  3.   .language {
  4.     position: absolute;
  5.     right: 25px;
  6.     z-index: 1;
  7.   }
  8.  
  9.   .el-tabs {
  10.     box-shadow: none;
  11.   }
  12.  
  13.   .tabBody {
  14.     overflow: auto;
  15.  
  16.     .el-row {
  17.       margin: 20px 0;
  18.  
  19.       .long {
  20.         .el-select {
  21.           width: 200px;
  22.         }
  23.       }
  24.  
  25.       .el-input-number {
  26.         width: 120px;
  27.       }
  28.     }
  29.   }
  30.  
  31.   .myScroller {
  32.     &::-webkit-scrollbar {
  33.       /*滚动条整体样式*/
  34.       width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  35.       height: 1px;
  36.     }
  37.  
  38.     &::-webkit-scrollbar-thumb {
  39.       /*滚动条里面小方块*/
  40.       border-radius: 10px;
  41.       background-color: skyblue;
  42.       background-image: -webkit-linear-gradient(
  43.               45deg,
  44.               rgba(255, 255, 255, 0.2) 25%,
  45.               transparent 25%,
  46.               transparent 50%,
  47.               rgba(255, 255, 255, 0.2) 50%,
  48.               rgba(255, 255, 255, 0.2) 75%,
  49.               transparent 75%,
  50.               transparent
  51.       );
  52.     }
  53.  
  54.     &::-webkit-scrollbar-track {
  55.       /*滚动条里面轨道*/
  56.       box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  57.       background: #ededed;
  58.       border-radius: 10px;
  59.     }
  60.   }
  61.  
  62.   .bottom {
  63.     width: 100%;
  64.     margin-top: 5px;
  65.     display: flex;
  66.     align-items: center;
  67.     justify-content: space-around;
  68.  
  69.     .value {
  70.       float: left;
  71.       font-size: 14px;
  72.       vertical-align: middle;
  73.  
  74.       span:nth-child(1) {
  75.         color: red
  76.       }
  77.     }
  78.   }
  79. }
  80. </style>
  81. <template>
  82.   <div class="no-vue3-cron-div">
  83.     <el-button
  84.         class="language"
  85.         type="text"
  86.         @click="state.language = state.language === 'en' ? 'cn' : 'en'"
  87.     >{{ state.language === 'en' ? 'cn' : 'en' }}</el-button
  88.     >
  89.     <el-tabs type="border-card">
  90.       <el-tab-pane>
  91.         <template #label>
  92.           <span><i class="el-icon-date"></i> {{ state.text.Seconds.name }}</span>
  93.         </template>
  94.         <div class="tabBody myScroller" :style="{'max-height': maxHeight}">
  95.           <el-row>
  96.             <el-radio v-model="state.second.cronEvery" label="1">{{
  97.                 state.text.Seconds.every
  98.               }}
  99.             </el-radio>
  100.           </el-row>
  101.           <el-row>
  102.             <el-radio v-model="state.second.cronEvery" label="2"
  103.             >{{ state.text.Seconds.interval[0] }}
  104.               <el-input-number
  105.                   v-model="state.second.incrementIncrement"
  106.                   :min="1"
  107.                   :max="60"
  108.               ></el-input-number>
  109.               {{ state.text.Seconds.interval[1] || "" }}
  110.               <el-input-number
  111.  
  112.                   v-model="state.second.incrementStart"
  113.                   :min="0"
  114.                   :max="59"
  115.               ></el-input-number>
  116.               {{ state.text.Seconds.interval[2] || "" }}
  117.             </el-radio>
  118.           </el-row>
  119.           <el-row>
  120.             <el-radio class="long" v-model="state.second.cronEvery" label="3"
  121.             >{{ state.text.Seconds.specific }}
  122.               <el-select :style="{width: '100%'}"
  123.  
  124.                   multiple
  125.                   v-model="state.second.specificSpecific"
  126.               >
  127.                 <el-option
  128.                     v-for="(val, index) in 60"
  129.                     :key="index"
  130.                     :value="val - 1"
  131.                 >{{ val - 1 }}
  132.                 </el-option
  133.                 >
  134.               </el-select>
  135.             </el-radio>
  136.           </el-row>
  137.           <el-row>
  138.             <el-radio v-model="state.second.cronEvery" label="4"
  139.             >{{ state.text.Seconds.cycle[0] }}
  140.               <el-input-number
  141.  
  142.                   v-model="state.second.rangeStart"
  143.                   :min="1"
  144.                   :max="60"
  145.               ></el-input-number>
  146.               {{ state.text.Seconds.cycle[1] || "" }}
  147.               <el-input-number
  148.  
  149.                   v-model="state.second.rangeEnd"
  150.                   :min="0"
  151.                   :max="59"
  152.               ></el-input-number>
  153.               {{ state.text.Seconds.cycle[2] || "" }}
  154.             </el-radio>
  155.           </el-row>
  156.         </div>
  157.       </el-tab-pane>
  158.       <el-tab-pane>
  159.         <template #label>
  160.           <span><i class="el-icon-date"></i> {{ state.text.Minutes.name }}</span>
  161.         </template>
  162.         <div class="tabBody myScroller" :style="{'max-height': maxHeight}">
  163.           <el-row>
  164.             <el-radio v-model="state.minute.cronEvery" label="1">{{
  165.                 state.text.Minutes.every
  166.               }}
  167.             </el-radio>
  168.           </el-row>
  169.           <el-row>
  170.             <el-radio v-model="state.minute.cronEvery" label="2"
  171.             >{{ state.text.Minutes.interval[0] }}
  172.               <el-input-number
  173.  
  174.                   v-model="state.minute.incrementIncrement"
  175.                   :min="1"
  176.                   :max="60"
  177.               ></el-input-number>
  178.               {{ state.text.Minutes.interval[1] }}
  179.               <el-input-number
  180.  
  181.                   v-model="state.minute.incrementStart"
  182.                   :min="0"
  183.                   :max="59"
  184.               ></el-input-number>
  185.               {{ state.text.Minutes.interval[2] || "" }}
  186.             </el-radio>
  187.           </el-row>
  188.           <el-row>
  189.             <el-radio class="long" v-model="state.minute.cronEvery" label="3"
  190.             >{{ state.text.Minutes.specific }}
  191.               <el-select :style="{width: '100%'}"
  192.  
  193.                   multiple
  194.                   v-model="state.minute.specificSpecific"
  195.               >
  196.                 <el-option
  197.                     v-for="(val, index) in 60"
  198.                     :key="index"
  199.                     :value="val - 1"
  200.                 >{{ val - 1 }}
  201.                 </el-option
  202.                 >
  203.               </el-select>
  204.             </el-radio>
  205.           </el-row>
  206.           <el-row>
  207.             <el-radio v-model="state.minute.cronEvery" label="4"
  208.             >{{ state.text.Minutes.cycle[0] }}
  209.               <el-input-number
  210.  
  211.                   v-model="state.minute.rangeStart"
  212.                   :min="1"
  213.                   :max="60"
  214.               ></el-input-number>
  215.               {{ state.text.Minutes.cycle[1] }}
  216.               <el-input-number
  217.  
  218.                   v-model="state.minute.rangeEnd"
  219.                   :min="0"
  220.                   :max="59"
  221.               ></el-input-number>
  222.               {{ state.text.Minutes.cycle[2] }}
  223.             </el-radio>
  224.           </el-row>
  225.         </div>
  226.       </el-tab-pane>
  227.       <el-tab-pane>
  228.         <template #label>
  229.           <span><i class="el-icon-date"></i> {{ state.text.Hours.name }}</span>
  230.         </template>
  231.         <div class="tabBody myScroller" :style="{'max-height': maxHeight}">
  232.           <el-row>
  233.             <el-radio v-model="state.hour.cronEvery" label="1">{{
  234.                 state.text.Hours.every
  235.               }}
  236.             </el-radio>
  237.           </el-row>
  238.           <el-row>
  239.             <el-radio v-model="state.hour.cronEvery" label="2"
  240.             >{{ state.text.Hours.interval[0] }}
  241.               <el-input-number
  242.  
  243.                   v-model="state.hour.incrementIncrement"
  244.                   :min="0"
  245.                   :max="23"
  246.               ></el-input-number>
  247.               {{ state.text.Hours.interval[1] }}
  248.               <el-input-number
  249.  
  250.                   v-model="state.hour.incrementStart"
  251.                   :min="0"
  252.                   :max="23"
  253.               ></el-input-number>
  254.               {{ state.text.Hours.interval[2] }}
  255.             </el-radio>
  256.           </el-row>
  257.           <el-row>
  258.             <el-radio class="long" v-model="state.hour.cronEvery" label="3"
  259.             >{{ state.text.Hours.specific }}
  260.               <el-select :style="{width: '100%'}" multiple v-model="state.hour.specificSpecific">
  261.                 <el-option
  262.                     v-for="(val, index) in 24"
  263.                     :key="index"
  264.                     :value="val - 1"
  265.                 >{{ val - 1 }}
  266.                 </el-option
  267.                 >
  268.               </el-select>
  269.             </el-radio>
  270.           </el-row>
  271.           <el-row>
  272.             <el-radio v-model="state.hour.cronEvery" label="4"
  273.             >{{ state.text.Hours.cycle[0] }}
  274.               <el-input-number
  275.  
  276.                   v-model="state.hour.rangeStart"
  277.                   :min="0"
  278.                   :max="23"
  279.               ></el-input-number>
  280.               {{ state.text.Hours.cycle[1] }}
  281.               <el-input-number
  282.  
  283.                   v-model="state.hour.rangeEnd"
  284.                   :min="0"
  285.                   :max="23"
  286.               ></el-input-number>
  287.               {{ state.text.Hours.cycle[2] }}
  288.             </el-radio>
  289.           </el-row>
  290.         </div>
  291.       </el-tab-pane>
  292.       <el-tab-pane>
  293.         <template #label>
  294.           <span><i class="el-icon-date"></i> {{ state.text.Day.name }}</span>
  295.         </template>
  296.         <div class="tabBody myScroller" :style="{'max-height': maxHeight}">
  297.           <el-row>
  298.             <el-radio v-model="state.day.cronEvery" label="1">{{
  299.                 state.text.Day.every
  300.               }}
  301.             </el-radio>
  302.           </el-row>
  303.           <el-row>
  304.             <el-radio v-model="state.day.cronEvery" label="2"
  305.             >{{ state.text.Day.intervalWeek[0] }}
  306.               <el-input-number
  307.  
  308.                   v-model="state.week.incrementIncrement"
  309.                   :min="1"
  310.                   :max="7"
  311.               ></el-input-number>
  312.               {{ state.text.Day.intervalWeek[1] }}
  313.               <el-select :style="{width: '100%'}" v-model="state.week.incrementStart">
  314.                 <el-option
  315.                     v-for="(val, index) in 7"
  316.                     :key="index"
  317.                     :label="state.text.Week[val - 1]"
  318.                     :value="val"
  319.                 ></el-option>
  320.               </el-select>
  321.               {{ state.text.Day.intervalWeek[2] }}
  322.             </el-radio>
  323.           </el-row>
  324.           <el-row>
  325.             <el-radio v-model="state.day.cronEvery" label="3"
  326.             >{{ state.text.Day.intervalDay[0] }}
  327.               <el-input-number
  328.  
  329.                   v-model="state.day.incrementIncrement"
  330.                   :min="1"
  331.                   :max="31"
  332.               ></el-input-number>
  333.               {{ state.text.Day.intervalDay[1] }}
  334.               <el-input-number
  335.  
  336.                   v-model="state.day.incrementStart"
  337.                   :min="1"
  338.                   :max="31"
  339.               ></el-input-number>
  340.               {{ state.text.Day.intervalDay[2] }}
  341.             </el-radio>
  342.           </el-row>
  343.           <el-row>
  344.             <el-radio class="long" v-model="state.day.cronEvery" label="4"
  345.             >{{ state.text.Day.specificWeek }}
  346.               <el-select :style="{width: '100%'}" multiple v-model="state.week.specificSpecific">
  347.                 <el-option
  348.                     v-for="(val, index) in 7"
  349.                     :key="index"
  350.                     :label="state.text.Week[val - 1]"
  351.                     :value="
  352.                     ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'][val - 1]
  353.                   "
  354.                 ></el-option>
  355.               </el-select>
  356.             </el-radio>
  357.           </el-row>
  358.           <el-row>
  359.             <el-radio class="long" v-model="state.day.cronEvery" label="5"
  360.             >{{ state.text.Day.specificDay }}
  361.               <el-select :style="{width: '100%'}" multiple v-model="state.day.specificSpecific">
  362.                 <el-option
  363.                     v-for="(val, index) in 31"
  364.                     :key="index"
  365.                     :value="val"
  366.                 >{{ val }}
  367.                 </el-option
  368.                 >
  369.               </el-select>
  370.             </el-radio>
  371.           </el-row>
  372.           <el-row>
  373.             <el-radio v-model="state.day.cronEvery" label="6">{{
  374.                 state.text.Day.lastDay
  375.               }}
  376.             </el-radio>
  377.           </el-row>
  378.           <el-row>
  379.             <el-radio v-model="state.day.cronEvery" label="7">{{
  380.                 state.text.Day.lastWeekday
  381.               }}
  382.             </el-radio>
  383.           </el-row>
  384.           <el-row>
  385.             <el-radio v-model="state.day.cronEvery" label="8"
  386.             >{{ state.text.Day.lastWeek[0] }}
  387.               <el-select :style="{width: '100%'}" v-model="state.week.cronLastSpecificDomDay">
  388.                 <el-option
  389.                     v-for="(val, index) in 7"
  390.                     :key="index"
  391.                     :label="state.text.Week[val - 1]"
  392.                     :value="val"
  393.                 ></el-option>
  394.               </el-select>
  395.               {{ state.text.Day.lastWeek[1] || "" }}
  396.             </el-radio>
  397.           </el-row>
  398.           <el-row>
  399.             <el-radio v-model="state.day.cronEvery" label="9">
  400.               <el-input-number
  401.  
  402.                   v-model="state.day.cronDaysBeforeEomMinus"
  403.                   :min="1"
  404.                   :max="31"
  405.               ></el-input-number>
  406.               {{ state.text.Day.beforeEndMonth[0] }}
  407.             </el-radio>
  408.           </el-row>
  409.           <el-row>
  410.             <el-radio v-model="state.day.cronEvery" label="10"
  411.             >{{ state.text.Day.nearestWeekday[0] }}
  412.               <el-input-number
  413.  
  414.                   v-model="state.day.cronDaysNearestWeekday"
  415.                   :min="1"
  416.                   :max="31"
  417.               ></el-input-number>
  418.               {{ state.text.Day.nearestWeekday[1] }}
  419.             </el-radio>
  420.           </el-row>
  421.           <el-row>
  422.             <el-radio v-model="state.day.cronEvery" label="11"
  423.             >{{ state.text.Day.someWeekday[0] }}
  424.               <el-input-number
  425.  
  426.                   v-model="state.week.cronNthDayNth"
  427.                   :min="1"
  428.                   :max="5"
  429.               ></el-input-number>
  430.               <el-select :style="{width: '100%'}" v-model="state.week.cronNthDayDay">
  431.                 <el-option
  432.                     v-for="(val, index) in 7"
  433.                     :key="index"
  434.                     :label="state.text.Week[val - 1]"
  435.                     :value="val"
  436.                 ></el-option>
  437.               </el-select>
  438.               {{ state.text.Day.someWeekday[1] }}
  439.             </el-radio>
  440.           </el-row>
  441.         </div>
  442.       </el-tab-pane>
  443.       <el-tab-pane>
  444.         <template #label>
  445.           <span><i class="el-icon-date"></i> {{ state.text.Month.name }}</span>
  446.         </template>
  447.         <div class="tabBody myScroller" :style="{'max-height': maxHeight}">
  448.           <el-row>
  449.             <el-radio v-model="state.month.cronEvery" label="1">{{
  450.                 state.text.Month.every
  451.               }}
  452.             </el-radio>
  453.           </el-row>
  454.           <el-row>
  455.             <el-radio v-model="state.month.cronEvery" label="2"
  456.             >{{ state.text.Month.interval[0] }}
  457.               <el-input-number
  458.  
  459.                   v-model="state.month.incrementIncrement"
  460.                   :min="0"
  461.                   :max="12"
  462.               ></el-input-number>
  463.               {{ state.text.Month.interval[1] }}
  464.               <el-input-number
  465.  
  466.                   v-model="state.month.incrementStart"
  467.                   :min="0"
  468.                   :max="12"
  469.               ></el-input-number>
  470.             </el-radio>
  471.           </el-row>
  472.           <el-row>
  473.             <el-radio class="long" v-model="state.month.cronEvery" label="3"
  474.             >{{ state.text.Month.specific }}
  475.               <el-select :style="{width: '100%'}" multiple v-model="state.month.specificSpecific">
  476.                 <el-option
  477.                     v-for="(val, index) in 12"
  478.                     :key="index"
  479.                     :label="val"
  480.                     :value="val"
  481.                 ></el-option>
  482.               </el-select>
  483.             </el-radio>
  484.           </el-row>
  485.           <el-row>
  486.             <el-radio v-model="state.month.cronEvery" label="4"
  487.             >{{ state.text.Month.cycle[0] }}
  488.               <el-input-number
  489.  
  490.                   v-model="state.month.rangeStart"
  491.                   :min="1"
  492.                   :max="12"
  493.               ></el-input-number>
  494.               {{ state.text.Month.cycle[1] }}
  495.               <el-input-number
  496.  
  497.                   v-model="state.month.rangeEnd"
  498.                   :min="1"
  499.                   :max="12"
  500.               ></el-input-number>
  501.             </el-radio>
  502.           </el-row>
  503.         </div>
  504.       </el-tab-pane>
  505.       <el-tab-pane>
  506.         <template #label>
  507.           <span><i class="el-icon-date"></i> {{ state.text.Year.name }}</span>
  508.         </template>
  509.         <div class="tabBody myScroller" :style="{'max-height': maxHeight}">
  510.           <el-row>
  511.             <el-radio v-model="state.year.cronEvery" label="1">{{
  512.                 state.text.Year.every
  513.               }}
  514.             </el-radio>
  515.           </el-row>
  516.           <el-row>
  517.             <el-radio v-model="state.year.cronEvery" label="2"
  518.             >{{ state.text.Year.interval[0] }}
  519.               <el-input-number
  520.  
  521.                   v-model="state.year.incrementIncrement"
  522.                   :min="1"
  523.                   :max="99"
  524.               ></el-input-number>
  525.               {{ state.text.Year.interval[1] }}
  526.               <el-input-number
  527.  
  528.                   v-model="state.year.incrementStart"
  529.                   :min="2018"
  530.                   :max="2118"
  531.               ></el-input-number>
  532.             </el-radio>
  533.           </el-row>
  534.           <el-row>
  535.             <el-radio class="long" v-model="state.year.cronEvery" label="3"
  536.             >{{ state.text.Year.specific }}
  537.               <el-select :style="{width: '100%'}"
  538.  
  539.                   filterable
  540.                   multiple
  541.                   v-model="state.year.specificSpecific"
  542.               >
  543.                 <el-option
  544.                     v-for="(val, index) in 100"
  545.                     :key="index"
  546.                     :label="2017 + val"
  547.                     :value="2017 + val"
  548.                 ></el-option>
  549.               </el-select>
  550.             </el-radio>
  551.           </el-row>
  552.           <el-row>
  553.             <el-radio v-model="state.year.cronEvery" label="4"
  554.             >{{ state.text.Year.cycle[0] }}
  555.               <el-input-number
  556.                   v-model="state.year.rangeStart"
  557.                   :min="2018"
  558.                   :max="2118"
  559.               ></el-input-number>
  560.               {{ state.text.Year.cycle[1] }}
  561.               <el-input-number
  562.                   v-model="state.year.rangeEnd"
  563.                   :min="2018"
  564.                   :max="2118"
  565.               ></el-input-number>
  566.             </el-radio>
  567.           </el-row>
  568.         </div>
  569.       </el-tab-pane>
  570.     </el-tabs>
  571.     <div class="bottom">
  572.       <div class="value">
  573.         <span>
  574.           cron预览:
  575.         </span>
  576.         <el-tag type="primary">
  577.           {{ state.cron }}
  578.         </el-tag>
  579.       </div>
  580.       <div class="buttonDiv">
  581.         <el-button type="primary" size="mini" @click.stop="handleChange">{{ state.text.Save }}</el-button>
  582.         <el-button type="primary" size="mini" @click.stop="close">{{ state.text.Close }}</el-button>
  583.       </div>
  584.     </div>
  585.   </div>
  586. </template>
  587. <script>
  588. import Language from "./language";
  589. import {watch, reactive, computed, toRefs, defineComponent} from "vue";
  590.  
  591. export default defineComponent({
  592.   name: "noVue3Cron",
  593.   props: {
  594.     cronValue: String,
  595.     i18n: {},
  596.     maxHeight: {}
  597.   },
  598.   setup(props, {emit}) {
  599.     const {i18n} = toRefs(props)
  600.     const state = reactive({
  601.       language: i18n.value,
  602.       second: {
  603.         cronEvery: "1",
  604.         incrementStart: 3,
  605.         incrementIncrement: 5,
  606.         rangeStart: 0,
  607.         rangeEnd: 0,
  608.         specificSpecific: [],
  609.       },
  610.       minute: {
  611.         cronEvery: "1",
  612.         incrementStart: 3,
  613.         incrementIncrement: 5,
  614.         rangeStart: 0,
  615.         rangeEnd: 0,
  616.         specificSpecific: [],
  617.       },
  618.       hour: {
  619.         cronEvery: "1",
  620.         incrementStart: 3,
  621.         incrementIncrement: 5,
  622.         rangeStart: 0,
  623.         rangeEnd: 0,
  624.         specificSpecific: [],
  625.       },
  626.       day: {
  627.         cronEvery: "1",
  628.         incrementStart: 1,
  629.         incrementIncrement: 1,
  630.         rangeStart: 0,
  631.         rangeEnd: 0,
  632.         specificSpecific: [],
  633.         cronDaysBeforeEomMinus: 0,
  634.         cronDaysNearestWeekday: 0,
  635.       },
  636.       week: {
  637.         cronEvery: "1",
  638.         incrementStart: 1,
  639.         incrementIncrement: 1,
  640.         specificSpecific: [],
  641.         cronLastSpecificDomDay: 1,
  642.         cronNthDayDay: 1,
  643.         cronNthDayNth: 1,
  644.       },
  645.       month: {
  646.         cronEvery: "1",
  647.         incrementStart: 3,
  648.         incrementIncrement: 5,
  649.         rangeStart: 0,
  650.         rangeEnd: 0,
  651.         specificSpecific: [],
  652.       },
  653.       year: {
  654.         cronEvery: "1",
  655.         incrementStart: 2017,
  656.         incrementIncrement: 1,
  657.         rangeStart: 0,
  658.         rangeEnd: 0,
  659.         specificSpecific: [],
  660.       },
  661.       output: {
  662.         second: "",
  663.         minute: "",
  664.         hour: "",
  665.         day: "",
  666.         month: "",
  667.         Week: "",
  668.         year: "",
  669.       },
  670.       text: computed(() => Language[state.language || "cn"]),
  671.       secondsText: computed(() => {
  672.         let seconds = "";
  673.         let cronEvery = state.second.cronEvery;
  674.         switch (cronEvery.toString()) {
  675.           case "1":
  676.             seconds = "*";
  677.             break;
  678.           case "2":
  679.             seconds =
  680.                 state.second.incrementStart +
  681.                 "/" +
  682.                 state.second.incrementIncrement;
  683.             break;
  684.           case "3":
  685.             state.second.specificSpecific.map((val) => {
  686.               seconds += val + ",";
  687.             });
  688.             seconds = seconds.slice(0, -1);
  689.             break;
  690.           case "4":
  691.             seconds = state.second.rangeStart + "-" + state.second.rangeEnd;
  692.             break;
  693.         }
  694.         return seconds;
  695.       }),
  696.       minutesText: computed(() => {
  697.         let minutes = "";
  698.         let cronEvery = state.minute.cronEvery;
  699.         switch (cronEvery.toString()) {
  700.           case "1":
  701.             minutes = "*";
  702.             break;
  703.           case "2":
  704.             minutes =
  705.                 state.minute.incrementStart +
  706.                 "/" +
  707.                 state.minute.incrementIncrement;
  708.             break;
  709.           case "3":
  710.             state.minute.specificSpecific.map((val) => {
  711.               minutes += val + ",";
  712.             });
  713.             minutes = minutes.slice(0, -1);
  714.             break;
  715.           case "4":
  716.             minutes = state.minute.rangeStart + "-" + state.minute.rangeEnd;
  717.             break;
  718.         }
  719.         return minutes;
  720.       }),
  721.       hoursText: computed(() => {
  722.         let hours = "";
  723.         let cronEvery = state.hour.cronEvery;
  724.         switch (cronEvery.toString()) {
  725.           case "1":
  726.             hours = "*";
  727.             break;
  728.           case "2":
  729.             hours =
  730.                 state.hour.incrementStart + "/" + state.hour.incrementIncrement;
  731.             break;
  732.           case "3":
  733.             state.hour.specificSpecific.map((val) => {
  734.               hours += val + ",";
  735.             });
  736.             hours = hours.slice(0, -1);
  737.             break;
  738.           case "4":
  739.             hours = state.hour.rangeStart + "-" + state.hour.rangeEnd;
  740.             break;
  741.         }
  742.         return hours;
  743.       }),
  744.       daysText: computed(() => {
  745.         let days = "";
  746.         let cronEvery = state.day.cronEvery;
  747.         switch (cronEvery.toString()) {
  748.           case "1":
  749.             break;
  750.           case "2":
  751.           case "4":
  752.           case "11":
  753.           case "8":
  754.             days = "?";
  755.             break;
  756.           case "3":
  757.             days =
  758.                 state.day.incrementStart + "/" + state.day.incrementIncrement;
  759.             break;
  760.           case "5":
  761.             state.day.specificSpecific.map((val) => {
  762.               days += val + ",";
  763.             });
  764.             days = days.slice(0, -1);
  765.             break;
  766.           case "6":
  767.             days = "L";
  768.             break;
  769.           case "7":
  770.             days = "LW";
  771.             break;
  772.           case "9":
  773.             days = "L-" + state.day.cronDaysBeforeEomMinus;
  774.             break;
  775.           case "10":
  776.             days = state.day.cronDaysNearestWeekday + "W";
  777.             break;
  778.         }
  779.         return days;
  780.       }),
  781.       weeksText: computed(() => {
  782.         let weeks = "";
  783.         let cronEvery = state.day.cronEvery;
  784.         switch (cronEvery.toString()) {
  785.           case "1":
  786.           case "3":
  787.           case "5":
  788.             weeks = "?";
  789.             break;
  790.           case "2":
  791.             weeks =
  792.                 state.week.incrementStart + "/" + state.week.incrementIncrement;
  793.             break;
  794.           case "4":
  795.             state.week.specificSpecific.map((val) => {
  796.               weeks += val + ",";
  797.             });
  798.             weeks = weeks.slice(0, -1);
  799.             break;
  800.           case "6":
  801.           case "7":
  802.           case "9":
  803.           case "10":
  804.             weeks = "?";
  805.             break;
  806.           case "8":
  807.             weeks = state.week.cronLastSpecificDomDay + "L";
  808.             break;
  809.           case "11":
  810.             weeks = state.week.cronNthDayDay + "#" + state.week.cronNthDayNth;
  811.             break;
  812.         }
  813.         return weeks;
  814.       }),
  815.       monthsText: computed(() => {
  816.         let months = "";
  817.         let cronEvery = state.month.cronEvery;
  818.         switch (cronEvery.toString()) {
  819.           case "1":
  820.             months = "*";
  821.             break;
  822.           case "2":
  823.             months =
  824.                 state.month.incrementStart + "/" + state.month.incrementIncrement;
  825.             break;
  826.           case "3":
  827.             state.month.specificSpecific.map((val) => {
  828.               months += val + ",";
  829.             });
  830.             months = months.slice(0, -1);
  831.             break;
  832.           case "4":
  833.             months = state.month.rangeStart + "-" + state.month.rangeEnd;
  834.             break;
  835.         }
  836.         return months;
  837.       }),
  838.       yearsText: computed(() => {
  839.         let years = "";
  840.         let cronEvery = state.year.cronEvery;
  841.         switch (cronEvery.toString()) {
  842.           case "1":
  843.             years = "*";
  844.             break;
  845.           case "2":
  846.             years =
  847.                 state.year.incrementStart + "/" + state.year.incrementIncrement;
  848.             break;
  849.           case "3":
  850.             state.year.specificSpecific.map((val) => {
  851.               years += val + ",";
  852.             });
  853.             years = years.slice(0, -1);
  854.             break;
  855.           case "4":
  856.             years = state.year.rangeStart + "-" + state.year.rangeEnd;
  857.             break;
  858.         }
  859.         return years;
  860.       }),
  861.       cron: computed(() => {
  862.         return `${state.secondsText || "*"} ${state.minutesText ||
  863.         "*"} ${state.hoursText || "*"} ${state.daysText ||
  864.         "*"} ${state.monthsText || "*"} ${state.weeksText ||
  865.         "?"} ${state.yearsText || "*"}`;
  866.       }),
  867.     });
  868.     watch(() => props.cronValue, (newCron) => {
  869.       if(typeof(newCron) !== 'string' || !newCron) return false
  870.       let crons = newCron.split(" ");
  871.       // 解析seconds
  872.       let secondsText = crons[0].trim();
  873.       if (secondsText === "*") {
  874.         state.second.cronEvery = "1";
  875.       }else if (secondsText.includes("/")) {
  876.         state.second.cronEvery = "2";
  877.         let secondsTexts = secondsText.split("/");
  878.         state.second.incrementStart = parseInt(secondsTexts[0])
  879.         state.second.incrementIncrement = parseInt(secondsTexts[1])
  880.       }else if (secondsText.includes(",") || isFinite(secondsText)) {
  881.         state.second.cronEvery = "3";
  882.         state.second.specificSpecific = secondsText.split(",").map(item => parseInt(item));
  883.       }else if (secondsText.includes("-")) {
  884.         state.second.cronEvery = "4";
  885.         let secondsTexts = secondsText.split("-");
  886.         state.second.rangeStart = parseInt(secondsTexts[0])
  887.         state.second.rangeEnd = parseInt(secondsTexts[1])
  888.       }
  889.       // 解析minutes
  890.       let minutesText = crons[1].trim();
  891.       if (minutesText === "*") {
  892.         state.minute.cronEvery = "1";
  893.       }else if (minutesText.includes("/")) {
  894.         state.minute.cronEvery = "2";
  895.         let minutesTexts = minutesText.split("/");
  896.         state.minute.incrementStart = parseInt(minutesTexts[0])
  897.         state.minute.incrementIncrement = parseInt(minutesTexts[1])
  898.       }else if (minutesText.includes(",") || isFinite(minutesText)) {
  899.         state.minute.cronEvery = "3";
  900.         state.minute.specificSpecific = minutesText.split(",").map(item => parseInt(item));
  901.       }else if (minutesText.includes("-")) {
  902.         state.minute.cronEvery = "4";
  903.         let minutesTexts = minutesText.split("-");
  904.         state.minute.rangeStart = parseInt(minutesTexts[0])
  905.         state.minute.rangeEnd = parseInt(minutesTexts[1])
  906.       }
  907.       // 解析hours
  908.       let hoursText = crons[2].trim();
  909.       if (hoursText === "*") {
  910.         state.hour.cronEvery = "1";
  911.       }else if (hoursText.includes("/")) {
  912.         state.hour.cronEvery = "2";
  913.         let hoursTexts = hoursText.split("/");
  914.         state.hour.incrementStart = parseInt(hoursTexts[0])
  915.         state.hour.incrementIncrement = parseInt(hoursTexts[1])
  916.       }else if (hoursText.includes(",") || isFinite(hoursText)) {
  917.         state.hour.cronEvery = "3";
  918.         state.hour.specificSpecific = hoursText.split(",").map(item => parseInt(item));
  919.       }else if (hoursText.includes("-")) {
  920.         state.hour.cronEvery = "4";
  921.         let hoursTexts = hoursText.split("-");
  922.         state.hour.rangeStart = parseInt(hoursTexts[0])
  923.         state.hour.rangeEnd = parseInt(hoursTexts[1])
  924.       }
  925.       // 解析days weeks
  926.       let daysText = crons[3].trim();
  927.       let weeksText = crons[5].trim();
  928.       if (daysText.includes("/")) {
  929.         state.day.cronEvery = "3";
  930.         let daysTexts = daysText.split("/");
  931.         state.day.incrementStart = parseInt(daysTexts[0])
  932.         state.day.incrementIncrement = parseInt(daysTexts[1])
  933.       }else if (daysText.includes(",") || isFinite(daysText)) {
  934.         state.day.cronEvery = "5";
  935.         state.day.specificSpecific = daysText.split(",").map(item => parseInt(item));
  936.       }else if (daysText === "L") {
  937.         state.day.cronEvery = "6";
  938.       }else if (daysText === "LW") {
  939.         state.day.cronEvery = "7";
  940.       }else if (daysText.startsWith("L-")) {
  941.         state.day.cronEvery = "9";
  942.         state.day.cronDaysBeforeEomMinus = parseInt(daysText.replaceAll("L-", ""))
  943.       }else if (daysText.endsWith("W")) {
  944.         state.day.cronEvery = "10";
  945.         state.day.cronDaysNearestWeekday = parseInt(daysText.replaceAll("W", ""))
  946.       }else if (daysText === "?") {
  947.         if (weeksText.includes("/")) {
  948.           state.day.cronEvery = "2";
  949.           let weeksTexts = weeksText.split("/");
  950.           state.week.incrementStart = parseInt(weeksTexts[0])
  951.           state.week.incrementIncrement = parseInt(weeksTexts[1])
  952.         }else if (weeksText.includes(",") || isFinite(weeksText)) {
  953.           state.day.cronEvery = "4";
  954.           state.week.specificSpecific = weeksText.split(",").map(item => item);
  955.         }else if (weeksText.includes("#")) {
  956.           state.day.cronEvery = "11";
  957.           let weeksTexts = weeksText.split("#");
  958.           state.week.cronNthDayDay = parseInt(weeksTexts[0])
  959.           state.week.cronNthDayNth = parseInt(weeksTexts[1])
  960.         }else if (weeksText.endsWith("L")) {
  961.           state.day.cronEvery = "8";
  962.           state.week.cronLastSpecificDomDay = parseInt(weeksText.replaceAll("L", ""))
  963.         }
  964.       }else {
  965.         state.day.cronEvery = "1";
  966.       }
  967.  
  968.       // 解析months
  969.       let monthsText = crons[4].trim();
  970.       if (monthsText === "*") {
  971.         state.month.cronEvery = "1";
  972.       }else if (monthsText.includes("/")) {
  973.         state.month.cronEvery = "2";
  974.         let monthsTexts = monthsText.split("/");
  975.         state.month.incrementStart = parseInt(monthsTexts[0])
  976.         state.month.incrementIncrement = parseInt(monthsTexts[1])
  977.       }else if (monthsText.includes(",") || isFinite(monthsText)) {
  978.         state.month.cronEvery = "3";
  979.         state.month.specificSpecific = monthsText.split(",").map(item => parseInt(item));
  980.       }else if (monthsText.includes("-")) {
  981.         state.month.cronEvery = "4";
  982.         let monthsTexts = monthsText.split("-");
  983.         state.month.rangeStart = parseInt(monthsTexts[0])
  984.         state.month.rangeEnd = parseInt(monthsTexts[1])
  985.       }
  986.       // 解析years
  987.       let yearsText = crons[6].trim();
  988.       if (yearsText === "*") {
  989.         state.year.cronEvery = "1";
  990.       }else if (yearsText.includes("/")) {
  991.         state.year.cronEvery = "2";
  992.         let yearsTexts = yearsText.split("/");
  993.         state.year.incrementStart = parseInt(yearsTexts[0])
  994.         state.year.incrementIncrement = parseInt(yearsTexts[1])
  995.       }else if (yearsText.includes(",") || isFinite(yearsText)) {
  996.         state.year.cronEvery = "3";
  997.         state.year.specificSpecific = yearsText.split(",").map(item => parseInt(item));
  998.       }else if (yearsText.includes("-")) {
  999.         state.year.cronEvery = "4";
  1000.         let yearsTexts = yearsText.split("-");
  1001.         state.year.rangeStart = parseInt(yearsTexts[0])
  1002.         state.year.rangeEnd = parseInt(yearsTexts[1])
  1003.       }
  1004.  
  1005.     }, {
  1006.       immediate: true
  1007.     })
  1008.     const getValue = () => {
  1009.       return state.cron
  1010.     }
  1011.     const close = () => {
  1012.       emit('close')
  1013.     }
  1014.     const handleChange = () => {
  1015.       emit('change', state.cron)
  1016.       close()
  1017.     }
  1018.     const rest = (data) => {
  1019.       for (let i in data) {
  1020.         if (data[i] instanceof Object) {
  1021.           this.rest(data[i]);
  1022.         } else {
  1023.           switch (typeof data[i]) {
  1024.             case "object":
  1025.               data[i] = [];
  1026.               break;
  1027.             case "string":
  1028.               data[i] = "";
  1029.               break;
  1030.           }
  1031.         }
  1032.       }
  1033.     }
  1034.     return {
  1035.       state,
  1036.       getValue,
  1037.       close,
  1038.       handleChange,
  1039.       rest
  1040.     }
  1041.   },
  1042. });
  1043. </script>

使用

  1. <el-input v-model="formData.paramExpression"
  2.           :disabled="disabledStatus"
  3.           placeholder="请输入定时表达式" >
  4.   <template #append>
  5.     <el-popover :visible="cronPopover" width="700px" trigger="manual">
  6.       <vue-cron
  7.           :value="formData.paramExpression"
  8.           @change="changeCron"
  9.           @close="cronPopover=false"
  10.           max-height="400px"
  11.           i18n="cn"
  12.       ></vue-cron>
  13.       <template #reference>
  14.         <el-button @click="cronPopover = !cronPopover">设置定时表达式</el-button>
  15.       </template>
  16.     </el-popover>
  17.   </template>
  18. </el-input>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/410658
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号