<template> 
 | 
    <el-form size='small'> 
 | 
        <el-form-item> 
 | 
            <el-radio v-model='radioValue' :label="1"> 
 | 
                周,允许的通配符[, - * ? / L #] 
 | 
            </el-radio> 
 | 
        </el-form-item> 
 | 
  
 | 
        <el-form-item> 
 | 
            <el-radio v-model='radioValue' :label="2"> 
 | 
                不指定 
 | 
            </el-radio> 
 | 
        </el-form-item> 
 | 
  
 | 
        <el-form-item> 
 | 
            <el-radio v-model='radioValue' :label="3"> 
 | 
                周期从星期 
 | 
                <el-select clearable v-model="cycle01"> 
 | 
                    <el-option 
 | 
                        v-for="(item,index) of weekList" 
 | 
                        :key="index" 
 | 
                        :label="item.value" 
 | 
                        :value="item.key" 
 | 
                        :disabled="item.key === 1" 
 | 
                    >{{item.value}}</el-option> 
 | 
                </el-select> 
 | 
                - 
 | 
                <el-select clearable v-model="cycle02"> 
 | 
                    <el-option 
 | 
                        v-for="(item,index) of weekList" 
 | 
                        :key="index" 
 | 
                        :label="item.value" 
 | 
                        :value="item.key" 
 | 
                        :disabled="item.key < cycle01 && item.key !== 1" 
 | 
                    >{{item.value}}</el-option> 
 | 
                </el-select> 
 | 
            </el-radio> 
 | 
        </el-form-item> 
 | 
  
 | 
        <el-form-item> 
 | 
            <el-radio v-model='radioValue' :label="4"> 
 | 
                第 
 | 
                <el-input-number v-model='average01' :min="1" :max="4" /> 周的星期 
 | 
                <el-select clearable v-model="average02"> 
 | 
                    <el-option v-for="(item,index) of weekList" :key="index" :label="item.value" :value="item.key">{{item.value}}</el-option> 
 | 
                </el-select> 
 | 
            </el-radio> 
 | 
        </el-form-item> 
 | 
  
 | 
        <el-form-item> 
 | 
            <el-radio v-model='radioValue' :label="5"> 
 | 
                本月最后一个星期 
 | 
                <el-select clearable v-model="weekday"> 
 | 
                    <el-option v-for="(item,index) of weekList" :key="index" :label="item.value" :value="item.key">{{item.value}}</el-option> 
 | 
                </el-select> 
 | 
            </el-radio> 
 | 
        </el-form-item> 
 | 
  
 | 
        <el-form-item> 
 | 
            <el-radio v-model='radioValue' :label="6"> 
 | 
                指定 
 | 
                <el-select clearable v-model="checkboxList" placeholder="可多选" multiple style="width:100%"> 
 | 
                    <el-option v-for="(item,index) of weekList" :key="index" :label="item.value" :value="String(item.key)">{{item.value}}</el-option> 
 | 
                </el-select> 
 | 
            </el-radio> 
 | 
        </el-form-item> 
 | 
  
 | 
    </el-form> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
export default { 
 | 
    data() { 
 | 
        return { 
 | 
            radioValue: 2, 
 | 
            weekday: 2, 
 | 
            cycle01: 2, 
 | 
            cycle02: 3, 
 | 
            average01: 1, 
 | 
            average02: 2, 
 | 
            checkboxList: [], 
 | 
            weekList: [ 
 | 
                { 
 | 
                    key: 2, 
 | 
                    value: '星期一' 
 | 
                }, 
 | 
                { 
 | 
                    key: 3, 
 | 
                    value: '星期二' 
 | 
                }, 
 | 
                { 
 | 
                    key: 4, 
 | 
                    value: '星期三' 
 | 
                }, 
 | 
                { 
 | 
                    key: 5, 
 | 
                    value: '星期四' 
 | 
                }, 
 | 
                { 
 | 
                    key: 6, 
 | 
                    value: '星期五' 
 | 
                }, 
 | 
                { 
 | 
                    key: 7, 
 | 
                    value: '星期六' 
 | 
                }, 
 | 
                { 
 | 
                    key: 1, 
 | 
                    value: '星期日' 
 | 
                } 
 | 
            ], 
 | 
            checkNum: this.$options.propsData.check 
 | 
        } 
 | 
    }, 
 | 
    name: 'crontab-week', 
 | 
    props: ['check', 'cron'], 
 | 
    methods: { 
 | 
        // 单选按钮值变化时 
 | 
        radioChange() { 
 | 
            if (this.radioValue !== 2 && this.cron.day !== '?') { 
 | 
                this.$emit('update', 'day', '?', 'week'); 
 | 
            } 
 | 
            switch (this.radioValue) { 
 | 
                case 1: 
 | 
                    this.$emit('update', 'week', '*'); 
 | 
                    break; 
 | 
                case 2: 
 | 
                    this.$emit('update', 'week', '?'); 
 | 
                    break; 
 | 
                case 3: 
 | 
                    this.$emit('update', 'week', this.cycleTotal); 
 | 
                    break; 
 | 
                case 4: 
 | 
                    this.$emit('update', 'week', this.averageTotal); 
 | 
                    break; 
 | 
                case 5: 
 | 
                    this.$emit('update', 'week', this.weekdayCheck + 'L'); 
 | 
                    break; 
 | 
                case 6: 
 | 
                    this.$emit('update', 'week', this.checkboxString); 
 | 
                    break; 
 | 
            } 
 | 
        }, 
 | 
  
 | 
        // 周期两个值变化时 
 | 
        cycleChange() { 
 | 
            if (this.radioValue == '3') { 
 | 
                this.$emit('update', 'week', this.cycleTotal); 
 | 
            } 
 | 
        }, 
 | 
        // 平均两个值变化时 
 | 
        averageChange() { 
 | 
            if (this.radioValue == '4') { 
 | 
                this.$emit('update', 'week', this.averageTotal); 
 | 
            } 
 | 
        }, 
 | 
        // 最近工作日值变化时 
 | 
        weekdayChange() { 
 | 
            if (this.radioValue == '5') { 
 | 
                this.$emit('update', 'week', this.weekday + 'L'); 
 | 
            } 
 | 
        }, 
 | 
        // checkbox值变化时 
 | 
        checkboxChange() { 
 | 
            if (this.radioValue == '6') { 
 | 
                this.$emit('update', 'week', this.checkboxString); 
 | 
            } 
 | 
        }, 
 | 
    }, 
 | 
    watch: { 
 | 
        'radioValue': 'radioChange', 
 | 
        'cycleTotal': 'cycleChange', 
 | 
        'averageTotal': 'averageChange', 
 | 
        'weekdayCheck': 'weekdayChange', 
 | 
        'checkboxString': 'checkboxChange', 
 | 
    }, 
 | 
    computed: { 
 | 
        // 计算两个周期值 
 | 
        cycleTotal: function () { 
 | 
            this.cycle01 = this.checkNum(this.cycle01, 1, 7) 
 | 
            this.cycle02 = this.checkNum(this.cycle02, 1, 7) 
 | 
            return this.cycle01 + '-' + this.cycle02; 
 | 
        }, 
 | 
        // 计算平均用到的值 
 | 
        averageTotal: function () { 
 | 
            this.average01 = this.checkNum(this.average01, 1, 4) 
 | 
            this.average02 = this.checkNum(this.average02, 1, 7) 
 | 
            return this.average02 + '#' + this.average01; 
 | 
        }, 
 | 
        // 最近的工作日(格式) 
 | 
        weekdayCheck: function () { 
 | 
            this.weekday = this.checkNum(this.weekday, 1, 7) 
 | 
            return this.weekday; 
 | 
        }, 
 | 
        // 计算勾选的checkbox值合集 
 | 
        checkboxString: function () { 
 | 
            let str = this.checkboxList.join(); 
 | 
            return str == '' ? '*' : str; 
 | 
        } 
 | 
    } 
 | 
} 
 | 
</script> 
 |