dzhh-frontend/.svn/pristine/25/25c98c0e5d33ab2386803580babb45f4a3dfa730.svn-base

<template>
  <a-modal
    title="cron表达式"
    :width="modalWidth"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="change"
    @cancel="close"
    cancelText="关闭">
    <div class="card-container">
      <a-tabs type="card">
        <a-tab-pane key="1" type="card">
          <span slot="tab"><a-icon type="schedule" /> 秒</span>
          <a-radio-group v-model="result.second.cronEvery">
            <a-row>
              <a-radio value="1">每一秒钟</a-radio>
            </a-row>
            <a-row>
              <a-radio value="2">每隔
                <a-input size="small" v-model="result.second.incrementIncrement" :min="1" :max="60"></a-input>
                秒执行 从
                <a-input size="small" v-model="result.second.incrementStart" :min="0" :max="59"></a-input>
                秒开始
              </a-radio>
            </a-row>
            <a-row>
              <a-radio value="3">具体秒数(可多选)</a-radio>
              <a-select style="width:354px;" size="small" mode="multiple" v-model="result.second.specificSpecific">
                <a-select-option v-for="(val,index) in 60" :key="index" :value="index">{{ index }}</a-select-option>
              </a-select>
            </a-row>
            <a-row>
              <a-radio value="4">周期从
                <a-input size="small" v-model="result.second.rangeStart" :min="1" :max="60"></a-input>
                到
                <a-input size="small" v-model="result.second.rangeEnd" :min="0" :max="59"></a-input>
                秒
              </a-radio>
            </a-row>
          </a-radio-group>
        </a-tab-pane>
        <a-tab-pane key="2">
          <span slot="tab"><a-icon type="schedule" />分</span>
          <div class="tabBody">
            <a-radio-group v-model="result.minute.cronEvery">
              <a-row>
                <a-radio value="1">每一分钟</a-radio>
              </a-row>
              <a-row>
                <a-radio value="2">每隔
                  <a-input size="small" v-model="result.minute.incrementIncrement" :min="1" :max="60"></a-input>
                  分执行 从
                  <a-input size="small" v-model="result.minute.incrementStart" :min="0" :max="59"></a-input>
                  分开始
                </a-radio>
              </a-row>
              <a-row>
                <a-radio value="3">具体分钟数(可多选)</a-radio>
                <a-select style="width:340px;" size="small" mode="multiple" v-model="result.minute.specificSpecific">
                  <a-select-option v-for="(val,index) in Array(60)" :key="index" :value="index"> {{ index }}</a-select-option>
                </a-select>
              </a-row>
              <a-row>
                <a-radio value="4">周期从
                  <a-input size="small" v-model="result.minute.rangeStart" :min="1" :max="60"></a-input>
                  到
                  <a-input size="small" v-model="result.minute.rangeEnd" :min="0" :max="59"></a-input>
                  分
                </a-radio>
              </a-row>
            </a-radio-group>
          </div>
        </a-tab-pane>
        <a-tab-pane key="3">
          <span slot="tab"><a-icon type="schedule" /> 时</span>
          <div class="tabBody">
            <a-radio-group v-model="result.hour.cronEvery">
              <a-row>
                <a-radio value="1">每一小时</a-radio>
              </a-row>
              <a-row>
                <a-radio value="2">每隔
                  <a-input size="small" v-model="result.hour.incrementIncrement" :min="0" :max="23"></a-input>
                  小时执行 从
                  <a-input size="small" v-model="result.hour.incrementStart" :min="0" :max="23"></a-input>
                  小时开始
                </a-radio>
              </a-row>
              <a-row>
                <a-radio class="long" value="3">具体小时数(可多选)</a-radio>
                <a-select style="width:340px;" size="small" mode="multiple" v-model="result.hour.specificSpecific">
                  <a-select-option v-for="(val,index) in Array(24)" :key="index" >{{ index }}</a-select-option>
                </a-select>
              </a-row>
              <a-row>
                <a-radio value="4">周期从
                  <a-input size="small" v-model="result.hour.rangeStart" :min="0" :max="23"></a-input>
                  到
                  <a-input size="small" v-model="result.hour.rangeEnd" :min="0" :max="23"></a-input>
                  小时
                </a-radio>
              </a-row>
            </a-radio-group>
          </div>
        </a-tab-pane>
        <a-tab-pane key="4">
          <span slot="tab"><a-icon type="schedule" />  天</span>
          <div class="tabBody">
            <a-radio-group v-model="result.day.cronEvery">
              <a-row>
                <a-radio value="1">每一天</a-radio>
              </a-row>
              <a-row>
                <a-radio value="2">每隔
                  <a-input size="small" v-model="result.week.incrementIncrement" :min="1" :max="7"></a-input>
                  周执行 从
                  <a-select size="small" v-model="result.week.incrementStart">
                    <a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option>
                  </a-select>
                  开始
                </a-radio>
              </a-row>
              <a-row>
                <a-radio value="3">每隔
                  <a-input size="small" v-model="result.day.incrementIncrement" :min="1" :max="31"></a-input>
                  天执行 从
                  <a-input size="small" v-model="result.day.incrementStart" :min="1" :max="31"></a-input>
                  天开始
                </a-radio>
              </a-row>
              <a-row>
                <a-radio class="long" value="4">具体星期几(可多选)</a-radio>
                <a-select style="width:340px;" size="small" mode="multiple" v-model="result.week.specificSpecific">
                  <a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option>
                </a-select>
              </a-row>
              <a-row>
                <a-radio class="long" value="5">具体天数(可多选)</a-radio>
                <a-select style="width:354px;" size="small" mode="multiple" v-model="result.day.specificSpecific">
                  <a-select-option v-for="(val,index) in Array(31)" :key="index" :value="index">{{ index+1 }}</a-select-option>
                </a-select>
              </a-row>
              <a-row>
                <a-radio value="6">在这个月的最后一天</a-radio>
              </a-row>
              <a-row>
                <a-radio value="7">在这个月的最后一个工作日</a-radio>
              </a-row>
              <a-row>
                <a-radio value="8">在这个月的最后一个
                  <a-select size="small" v-model="result.day.cronLastSpecificDomDay">
                    <a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option>
                  </a-select>
                </a-radio>
              </a-row>
              <a-row>
                <a-radio value="9">
                  <a-input size="small" v-model="result.day.cronDaysBeforeEomMinus" :min="1" :max="31"></a-input>
                  在本月底前
                </a-radio>
              </a-row>
              <a-row>
                <a-radio value="10">最近的工作日（周一至周五）至本月
                  <a-input size="small" v-model="result.day.cronDaysNearestWeekday" :min="1" :max="31"></a-input>
                  日
                </a-radio>
              </a-row>
              <a-row>
                <a-radio value="11">在这个月的第
                  <a-input size="small" v-model="result.week.cronNthDayNth" :min="1" :max="5"></a-input>
                  个
                  <a-select size="small" v-model="result.week.cronNthDayDay">
                    <a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option>
                  </a-select>

                </a-radio>
              </a-row>
            </a-radio-group>
          </div>
        </a-tab-pane>
        <a-tab-pane key="5">
          <span slot="tab"><a-icon type="schedule" /> 月</span>
          <div class="tabBody">
            <a-radio-group v-model="result.month.cronEvery">
              <a-row>
                <a-radio value="1">每一月</a-radio>
              </a-row>
              <a-row>
                <a-radio value="2">每隔
                  <a-input size="small" v-model="result.month.incrementIncrement" :min="0" :max="12"></a-input>
                  月执行 从
                  <a-input size="small" v-model="result.month.incrementStart" :min="0" :max="12"></a-input>
                  月开始
                </a-radio>
              </a-row>
              <a-row>
                <a-radio class="long" value="3">具体月数(可多选)</a-radio>
                <a-select style="width:354px;" size="small" filterable mode="multiple" v-model="result.month.specificSpecific">
                  <a-select-option v-for="(val,index) in Array(12)" :key="index"  :value="index">{{ index+1 }}</a-select-option>
                </a-select>
              </a-row>
              <a-row>
                <a-radio value="4">从
                  <a-input size="small" v-model="result.month.rangeStart" :min="1" :max="12"></a-input>
                  到
                  <a-input size="small" v-model="result.month.rangeEnd" :min="1" :max="12"></a-input>
                  月之间的每个月
                </a-radio>
              </a-row>
            </a-radio-group>
          </div>
        </a-tab-pane>
        <a-tab-pane key="6">
          <span slot="tab"><a-icon type="schedule" /> 年</span>
          <div class="tabBody">
            <a-radio-group v-model="result.year.cronEvery">
              <a-row>
                <a-radio value="1">每一年</a-radio>
              </a-row>
              <a-row>
                <a-radio value="2">每隔
                  <a-input size="small" v-model="result.year.incrementIncrement" :min="1" :max="99"></a-input>
                  年执行 从
                  <a-input size="small" v-model="result.year.incrementStart" :min="2019" :max="2119"></a-input>
                  年开始
                </a-radio>
              </a-row>
              <a-row>
                <a-radio class="long" value="3">具体年份(可多选)</a-radio>
                <a-select style="width:354px;" size="small" filterable mode="multiple" v-model="result.year.specificSpecific">
                  <a-select-option v-for="(val,index) in Array(100)" :key="index" :value="2019+index">{{ 2019+index }}</a-select-option>
                </a-select>
              </a-row>
              <a-row>
                <a-radio value="4">从
                  <a-input size="small" v-model="result.year.rangeStart" :min="2019" :max="2119"></a-input>
                  到
                  <a-input size="small" v-model="result.year.rangeEnd" :min="2019" :max="2119"></a-input>
                  年之间的每一年
                </a-radio>
              </a-row>
            </a-radio-group>
          </div>
        </a-tab-pane>
      </a-tabs>
      <div class="bottom">
        <span class="value">{{this.cron.label }}</span>
      </div>
    </div>
  </a-modal>
</template>
<script>
    import pick from 'lodash.pick'
    export default {
        name:'VueCron',
        props:['data','i18n'],
        data(){
            return {
                visible: false,
                confirmLoading:false,
                size:'large',
                weekDays:['天','一','二','三','四','五','六'].map(val=>'星期'+val),
                result: {
                  second:{
                    cronEvery:'',
                    incrementStart:3,
                    incrementIncrement:5,
                    rangeStart:1,
                    rangeEnd:0,
                    specificSpecific:[],
                  },
                  minute:{
                    cronEvery:'',
                    incrementStart:3,
                    incrementIncrement:5,
                    rangeStart:1,
                    rangeEnd:'0',
                    specificSpecific:[],
                  },
                  hour:{
                    cronEvery:'',
                    incrementStart:3,
                    incrementIncrement:5,
                    rangeStart:'0',
                    rangeEnd:'0',
                    specificSpecific:[],
                  },
                  day:{
                    cronEvery:'',
                    incrementStart:1,
                    incrementIncrement:'1',
                    rangeStart:'',
                    rangeEnd:'',
                    specificSpecific:[],
                    cronLastSpecificDomDay:1,
                    cronDaysBeforeEomMinus:'',
                    cronDaysNearestWeekday:'',
                  },
                  week:{
                    cronEvery:'',
                    incrementStart:1,
                    incrementIncrement:'1',
                    specificSpecific:[],
                    cronNthDayDay:1,
                    cronNthDayNth:'1',
                  },
                  month:{
                    cronEvery:'',
                    incrementStart:3,
                    incrementIncrement:5,
                    rangeStart:1,
                    rangeEnd:1,
                    specificSpecific:[],
                  },
                  year:{
                    cronEvery:'',
                    incrementStart:2017,
                    incrementIncrement:1,
                    rangeStart:2019,
                    rangeEnd: 2019,
                    specificSpecific:[],
                  },
                  label:''
                },
                output:{
                  second:{
                    cronEvery:'',
                    incrementStart:'',
                    incrementIncrement:'',
                    rangeStart:'',
                    rangeEnd:'',
                    specificSpecific:[],
                  },
                  minute:{
                    cronEvery:'',
                    incrementStart:'',
                    incrementIncrement:'',
                    rangeStart:'',
                    rangeEnd:'',
                    specificSpecific:[],
                  },
                  hour:{
                    cronEvery:'',
                    incrementStart:'',
                    incrementIncrement:'',
                    rangeStart:'',
                    rangeEnd:'',
                    specificSpecific:[],
                  },
                  day:{
                    cronEvery:'',
                    incrementStart:'',
                    incrementIncrement:'',
                    rangeStart:'',
                    rangeEnd:'',
                    specificSpecific:[],
                    cronLastSpecificDomDay:'',
                    cronDaysBeforeEomMinus:'',
                    cronDaysNearestWeekday:'',
                  },
                  week:{
                    cronEvery:'',
                    incrementStart:'',
                    incrementIncrement:'',
                    specificSpecific:[],
                    cronNthDayDay:'',
                    cronNthDayNth:'',
                  },
                  month:{
                    cronEvery:'',
                    incrementStart:'',
                    incrementIncrement:'',
                    rangeStart:'',
                    rangeEnd:'',
                    specificSpecific:[],
                  },
                  year:{
                    cronEvery:'',
                    incrementStart:'',
                    incrementIncrement:'',
                    rangeStart:'',
                    rangeEnd:'',
                    specificSpecific:[],
                  }
                }
            }
        },
        computed: {
            modalWidth(){
                return 608;
            },
            text(){
                return Language['cn']
            },
            secondsText() {
                let seconds = '';
                let cronEvery=this.result.second.cronEvery;
                switch (cronEvery.toString()){
                    case '1':
                        seconds = '*';
                        break;
                    case '2':
                        seconds = this.result.second.incrementStart+'/'+this.result.second.incrementIncrement;
                        break;
                    case '3':
                        this.result.second.specificSpecific.map(val=> {seconds += val+','});
                        seconds = seconds.slice(0, -1);
                        break;
                    case '4':
                        seconds = this.result.second.rangeStart+'-'+this.result.second.rangeEnd;
                        break;
                }
                return seconds;
            },
            minutesText() {
                let minutes = '';
                let cronEvery=this.result.minute.cronEvery;
                switch (cronEvery.toString()){
                    case '1':
                        minutes = '*';
                        break;
                    case '2':
                        minutes = this.result.minute.incrementStart+'/'+this.result.minute.incrementIncrement;
                        break;
                    case '3':
                        this.result.minute.specificSpecific.map(val=> {
                            minutes += val+','
                        });
                        minutes = minutes.slice(0, -1);
                        break;
                    case '4':
                        minutes = this.result.minute.rangeStart+'-'+this.result.minute.rangeEnd;
                        break;
                }
                return minutes;
            },
            hoursText() {
                let hours = '';
                let cronEvery=this.result.hour.cronEvery;
                switch (cronEvery.toString()){
                    case '1':
                        hours = '*';
                        break;
                    case '2':
                        hours = this.result.hour.incrementStart+'/'+this.result.hour.incrementIncrement;
                        break;
                    case '3':
                        this.result.hour.specificSpecific.map(val=> {
                            hours += val+','
                        });
                        hours = hours.slice(0, -1);
                        break;
                    case '4':
                        hours = this.result.hour.rangeStart+'-'+this.result.hour.rangeEnd;
                        break;
                }
                return hours;
            },
            daysText() {
                let days='';
                let cronEvery=this.result.day.cronEvery;
                switch (cronEvery.toString()){
                    case '1':
                        break;
                    case '2':
                    case '4':
                    case '11':
                        days = '?';
                        break;
                    case '3':
                        days = this.result.day.incrementStart+'/'+this.result.day.incrementIncrement;
                        break;
                    case '5':
                        this.result.day.specificSpecific.map(val=> {
                            days += val+','
                        });
                        days = days.slice(0, -1);
                        break;
                    case '6':
                        days = "L";
                        break;
                    case '7':
                        days = "LW";
                        break;
                    case '8':
                        days = this.result.day.cronLastSpecificDomDay + 'L';
                        break;
                    case '9':
                        days = 'L-' + this.result.day.cronDaysBeforeEomMinus;
                        break;
                    case '10':
                        days = this.result.day.cronDaysNearestWeekday+"W";
                        break
                }
                return days;
            },
            weeksText() {
                let weeks = '';
                let cronEvery=this.result.day.cronEvery;
                switch (cronEvery.toString()){
                    case '1':
                    case '3':
                    case '5':
                        weeks = '?';
                        break;
                    case '2':
                        weeks = this.result.week.incrementStart+'/'+this.result.week.incrementIncrement;
                        break;
                    case '4':
                        this.result.week.specificSpecific.map(val=> {
                            weeks += val+','
                        });
                        weeks = weeks.slice(0, -1);
                        break;
                    case '6':
                    case '7':
                    case '8':
                    case '9':
                    case '10':
                        weeks = "?";
                        break;
                    case '11':
                        weeks = this.result.week.cronNthDayDay+"#"+this.result.week.cronNthDayNth;
                        break;
                }
                return weeks;
            },
            monthsText() {
                let months = '';
                let cronEvery=this.result.month.cronEvery;
                switch (cronEvery.toString()){
                    case '1':
                        months = '*';
                        break;
                    case '2':
                        months = this.result.month.incrementStart+'/'+this.result.month.incrementIncrement;
                        break;
                    case '3':
                        this.result.month.specificSpecific.map(val=> {
                            months += val+','
                        });
                        months = months.slice(0, -1);
                        break;
                    case '4':
                        months = this.result.month.rangeStart+'-'+this.result.month.rangeEnd;
                        break;
                }
                return months;
            },
            yearsText() {
                let years = '';
                let cronEvery=this.result.year.cronEvery;
                switch (cronEvery.toString()){
                    case '1':
                        years = '*';
                        break;
                    case '2':
                        years = this.result.year.incrementStart+'/'+this.result.year.incrementIncrement;
                        break;
                    case '3':
                        this.result.year.specificSpecific.map(val=> {
                            years += val+','
                        });
                        years = years.slice(0, -1);
                        break;
                    case '4':
                        years = this.result.year.rangeStart+'-'+this.result.year.rangeEnd;
                        break;
                }
                return years;
            },
            cron(){
                return {
                  value: this.result,
                  label:`${this.secondsText||'*'} ${this.minutesText||'*'} ${this.hoursText||'*'} ${this.daysText||'*'} ${this.monthsText||'*'} ${this.weeksText||'*'} ${this.yearsText||'*'}`
                }
            },
        },
        watch:{
          data(){
            //this.rest(this.data);
          }
        },
        methods: {
            show(){
              //this.rest(pick(this.data.value,'second','minute','hour','day','week','month','year'));
              //this.rest(this.data.value);
              Object.assign(this.data.value,this.result);
              console.log('data初始化',this.data);
              //this.result = this.data.value;
              this.visible=true;
            },
            getValue(){
                return this.cron;
            },
            change(){
                console.log('返回前',this.cron);
                this.$emit('change',this.cron);
                this.close();
                this.visible = false;
            },
            close(){
                this.visible = false;
                //this.$emit('close')
            },
            rest(data){
                for(let i in data){
                  console.log(data[i]);
                    if(data[i] instanceof Object){
                        this.rest(data[i])
                    }else {
                      switch(typeof data[i]) {
                        case 'object':
                          data[i] = [];
                          break;
                        case 'string':
                          data[i] = '';
                          break;
                        case 'number':
                          data[i] = null;
                          break;
                      }
                    }
                }
            },
            callback (key) {
                //console.log(key)
            }
        }
    }
</script>

<style lang="less">
    .card-container {
        background: #fff;
        overflow: hidden;
        padding: 12px;
        position: relative;
        width: 100%;
        .ant-tabs{
            border:1px solid #e6ebf5;
            padding: 0;
            .ant-tabs-bar {
                margin: 0;
                outline: none;
                border-bottom: none;
                .ant-tabs-nav-container{
                    margin: 0;
                    .ant-tabs-tab {
                        padding: 0 24px!important;
                        background-color: #f5f7fa!important;
                        margin-right: 0px!important;
                        border-radius: 0;
                        line-height: 38px;
                        border: 1px solid transparent!important;
                        border-bottom: 1px solid #e6ebf5!important;
                    }
                    .ant-tabs-tab-active.ant-tabs-tab{
                        color: #409eff;
                        background-color: #fff!important;
                        border-right:1px solid #e6ebf5!important;
                        border-left:1px solid #e6ebf5!important;
                        border-bottom:1px solid #fff!important;
                        font-weight: normal;
                        transition:none!important;
                    }
                }
            }
            .ant-tabs-tabpane{
                padding: 15px;
                .ant-row{
                    margin: 10px 0;
                }
                .ant-select,.ant-input-number{
                    width: 100px;
                }
            }
        }
    }
</style>
<style lang="less" scoped>
    .container-widthEn{
        width: 755px;
    }
    .container-widthCn{
        width: 608px;
    }
    .language{
        text-align: center;
        position: absolute;
        right: 13px;
        top: 13px;
        border: 1px solid transparent;
        height: 40px;
        line-height: 38px;
        font-size: 16px;
        color: #409eff;
        z-index: 1;
        background: #f5f7fa;
        outline: none;
        width: 47px;
        border-bottom: 1px solid #e6ebf5;
        border-radius: 0;
    }
    .card-container{
        .bottom{
            display: flex;
            justify-content: center;
            padding: 10px 0 0 0;
            .cronButton{
                margin: 0 10px;
                line-height: 40px;
            }
        }
    }
    .tabBody{
        .a-row{
            margin: 10px 0;
            .long{
                .a-select{
                    width:354px;
                }
            }
            .a-input{
                width: 110px;
            }
        }
    }
</style>