265 lines
7.1 KiB
Vue
265 lines
7.1 KiB
Vue
<template>
|
|
<view class="scene-timing-wrap">
|
|
<view class="container-wrap">
|
|
<view class="form-item-wrap">
|
|
<u-radio-group v-model='radioValue' placement="column">
|
|
<view style="padding:20rpx 0"><u-radio :name="1" :label="1" >
|
|
{{$tt('cron.month.382453-0')}}
|
|
</u-radio>
|
|
</view>
|
|
<view style="padding:20rpx 0"><u-radio :name="2" :label="2" >
|
|
{{$tt('cron.month.382453-1')}}
|
|
<u--input v-model='cycle01' :min="1" :max="11" type="number" :customStyle="{ marginLeft: '15rpx' }" :maxlength="2" @input="checkValueCycle01" /> -
|
|
<u--input v-model='cycle02' :min="cycle01 ? cycle01 + 1 : 2" :max="12" :customStyle="{ marginRight: '15rpx' }"
|
|
type="number" :maxlength="2" @input="checkValueCycle02"/>
|
|
{{$tt('cron.month.382453-2')}}
|
|
</u-radio>
|
|
</view>
|
|
<view style="padding:20rpx 0"><u-radio :name="3" :label="3" >
|
|
{{$tt('cron.month.382453-3')}}
|
|
<u--input v-model='average01' :min="1" :max="11" type="number" :customStyle="{ margin: '0 15rpx' }" :maxlength="2" @input="checkValueAverage01"/>
|
|
{{$tt('cron.month.382453-4')}}
|
|
<u--input v-model='average02' :min="1" :max="12 - average01 || 0" :customStyle="{ margin: '0 15rpx' }" :maxlength="2" @input="checkValueAverage02"
|
|
type="number" />
|
|
{{$tt('cron.month.382453-5')}}
|
|
</u-radio>
|
|
</view>
|
|
<view style="padding:20rpx 0"><u-radio :name="4" :label="4" >
|
|
{{$tt('cron.month.382453-6')}}
|
|
<view style="margin-right:15rpx ;"></view>
|
|
<!-- #ifndef APP-NVUE -->
|
|
<u-input v-model="selectValue" :placeholder="$tt('cron.day.304304-11')" inputAlign="right" disabledColor="#fff"
|
|
disabled :customStyle="{ marginRight: '20rpx' }">
|
|
<!-- #ifdef APP-NVUE -->
|
|
<u--input v-model="selectValue" :placeholder="$tt('cron.day.304304-11')" inputAlign="right" disabledColor="#fff"
|
|
disabled :customStyle="{ marginRight: '20rpx' }">
|
|
</u--input>
|
|
<!-- #endif -->
|
|
<!-- #endif -->
|
|
<template slot="suffix">
|
|
<u-icon name="arrow-down" @click="isRepeat = true"></u-icon>
|
|
</template>
|
|
<!-- #ifndef APP-NVUE -->
|
|
</u-input>
|
|
<!-- #endif -->
|
|
<!-- #ifdef APP-NVUE -->
|
|
</u--input>
|
|
<!-- #endif -->
|
|
</u-radio>
|
|
</view>
|
|
</u-radio-group>
|
|
</view>
|
|
</view>
|
|
<view class="other">
|
|
<u-popup :show="isRepeat" :round="5" mode="bottom" bgColor="#eef3f7" :closeOnClickOverlay="true"
|
|
@close="isRepeat = false">
|
|
<view class="repeat-popup-wrap">
|
|
<view class="nav">
|
|
<text @click="isRepeat = false">{{$tt('common.cancel')}}</text>
|
|
<text @click="handleRepeatConfirm">{{$tt('common.confirm')}}</text>
|
|
</view>
|
|
<view class="radio-group-wrap" style="height: 500rpx;overflow: auto;">
|
|
<u-checkbox-group v-model="checkboxList" :borderBottom="false" placement="column"
|
|
iconPlacement="right">
|
|
<view class="radio-wrap">
|
|
<view v-for="num in Array(12).fill(1).map((_, index) => index + 1)" :key="num"
|
|
class="number-wrap" style="padding:15rpx 0">
|
|
<u-checkbox :label="num.toString()" :name="num" iconSize="16"></u-checkbox>
|
|
</view>
|
|
</view>
|
|
</u-checkbox-group>
|
|
</u-checkbox-group>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { navigateBackTo } from '@/utils/common.js';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
radioValue: 1,
|
|
cycle01: 1,
|
|
cycle02: 2,
|
|
average01: 0,
|
|
average02: 1,
|
|
selectValue: '',
|
|
checkboxList: [],
|
|
isRepeat: false,
|
|
repeatValue: '',
|
|
checkNum: this.$options.propsData.check,
|
|
}
|
|
},
|
|
name: 'crontab-month',
|
|
props: ['check', 'cron'],
|
|
methods: {
|
|
// 单选按钮值变化时
|
|
radioChange() {
|
|
switch (this.radioValue) {
|
|
case 1:
|
|
this.$emit('update', 'month', '*');
|
|
break;
|
|
case 2:
|
|
this.$emit('update', 'month', this.cycleTotal);
|
|
break;
|
|
case 3:
|
|
this.$emit('update', 'month', this.averageTotal);
|
|
break;
|
|
case 4:
|
|
this.$emit('update', 'month', this.checkboxString);
|
|
break;
|
|
}
|
|
},
|
|
// 周期两个值变化时
|
|
cycleChange() {
|
|
if (this.radioValue == '2') {
|
|
this.$emit('update', 'month', this.cycleTotal);
|
|
}
|
|
},
|
|
// 平均两个值变化时
|
|
averageChange() {
|
|
if (this.radioValue == '3') {
|
|
this.$emit('update', 'month', this.averageTotal);
|
|
}
|
|
},
|
|
// checkbox值变化时
|
|
checkboxChange() {
|
|
if (this.radioValue == '4') {
|
|
this.$emit('update', 'month', this.checkboxString);
|
|
}
|
|
},
|
|
|
|
// 时间选择
|
|
handleRepeatConfirm() {
|
|
this.selectValue = this.checkboxList.join(', ');
|
|
this.isRepeat = false;
|
|
},
|
|
handleSelectChange(selected) {
|
|
// 处理选中值变化
|
|
this.checkboxList = selected;
|
|
},
|
|
//检查输入cycle01
|
|
checkValueCycle01(event) {
|
|
if (event < 1) {
|
|
this.cycle01 = 1;
|
|
} else if (event > 11) {
|
|
this.cycle01 = 11;
|
|
} else {
|
|
this.cycle01 = event;
|
|
}
|
|
},
|
|
//检查输入cycle02
|
|
checkValueCycle02(event) {
|
|
if (event < this.cycle01) {
|
|
this.cycle02 = this.cycle01 + 1;
|
|
} else if (event > 12) {
|
|
this.cycle02 = 12;
|
|
} else {
|
|
this.cycle02 = event;
|
|
}
|
|
},
|
|
//检查输入average01
|
|
checkValueAverage01(event) {
|
|
if (event < 1) {
|
|
this.average01 = 1;
|
|
} else if (event > 11) {
|
|
this.average01 = 11;
|
|
} else {
|
|
this.average01 = event;
|
|
}
|
|
},
|
|
//检查输入average02
|
|
checkValueAverage02(event) {
|
|
if (event < 1) {
|
|
this.average02 = 1;
|
|
} else if (event > 12) {
|
|
this.average02 = 12;
|
|
} else {
|
|
this.average02 = event;
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
'radioValue': 'radioChange',
|
|
'cycleTotal': 'cycleChange',
|
|
'averageTotal': 'averageChange',
|
|
'checkboxString': 'checkboxChange'
|
|
},
|
|
computed: {
|
|
// 计算两个周期值
|
|
cycleTotal: function() {
|
|
const cycle01 = this.checkNum(this.cycle01, 1, 11)
|
|
const cycle02 = this.checkNum(this.cycle02, cycle01 ? cycle01 + 1 : 2, 12)
|
|
return cycle01 + '-' + cycle02;
|
|
},
|
|
// 计算平均用到的值
|
|
averageTotal: function() {
|
|
const average01 = this.checkNum(this.average01, 1, 11)
|
|
const average02 = this.checkNum(this.average02, 1, 12 - average01 || 0)
|
|
return average01 + '/' + average02;
|
|
},
|
|
// 计算勾选的checkbox值合集
|
|
checkboxString: function() {
|
|
let str = this.checkboxList.join();
|
|
return str == '' ? '*' : str;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
page {
|
|
height: 100%;
|
|
background: $uni-bg-color-grey;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.scene-timing-wrap {
|
|
|
|
.container-wrap {
|
|
.form-wrap {
|
|
background: #fff;
|
|
border-radius: 10rpx;
|
|
|
|
.form-item-wrap {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.btn-wrap {
|
|
margin: 30rpx 26rpx;
|
|
}
|
|
}
|
|
|
|
.other {
|
|
.repeat-popup-wrap {
|
|
padding: 30rpx;
|
|
|
|
.nav {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 32rpx;
|
|
margin-bottom: 34rpx;
|
|
}
|
|
|
|
.radio-group-wrap {
|
|
background-color: #fff;
|
|
border-radius: 10rpx;
|
|
|
|
.radio-wrap {
|
|
padding: 32rpx;
|
|
|
|
&:not(:last-child) {
|
|
border-bottom: 1rpx solid #F1F2F5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |