262 lines
7.0 KiB
Vue
262 lines
7.0 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.min.411657-0')}}
|
|
</u-radio>
|
|
</view>
|
|
<view style="padding:20rpx 0"><u-radio :name="2" :label="2">
|
|
{{$tt('cron.min.411657-1')}}
|
|
<u--input v-model='cycle01' :min="0" :max="58" type="number"
|
|
:customStyle="{ marginLeft: '15rpx' }" :maxlength="2" @input="checkValueCycle01" /> -
|
|
<u--input v-model='cycle02' :min="cycle01 ? cycle01 + 1 : 1" :max="59"
|
|
:customStyle="{ marginRight: '15rpx' }" type="number" :maxlength="2"
|
|
@input="checkValueCycle02" />
|
|
{{$tt('cron.min.411657-2')}}
|
|
</u-radio>
|
|
</view>
|
|
<view style="padding:20rpx 0"><u-radio :name="3" :label="3">
|
|
{{$tt('cron.min.411657-3')}}
|
|
<u--input v-model='average01' :min="0" :max="58" type="number"
|
|
:customStyle="{ margin: '0 15rpx' }" :maxlength="2" @input="checkValueAverage01" />
|
|
{{$tt('cron.min.411657-4')}}
|
|
<u--input v-model='average02' :min="1" :max="59 - average01 || 0" type="number"
|
|
:customStyle="{ margin: '0 15rpx' }" :maxlength="2" @input="checkValueAverage02"/>
|
|
{{$tt('cron.min.411657-5')}}
|
|
</u-radio>
|
|
</view>
|
|
<view style="padding:20rpx 0"><u-radio :name="4" :label="4">
|
|
{{$tt('cron.min.411657-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(60).fill(0).map((_, index) => index)" :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,
|
|
checkboxList: [],
|
|
isRepeat: false,
|
|
selectValue: '',
|
|
checkNum: this.$options.propsData.check,
|
|
}
|
|
},
|
|
name: 'crontab-min',
|
|
props: ['check', 'cron'],
|
|
methods: {
|
|
// 单选按钮值变化时
|
|
radioChange() {
|
|
switch (this.radioValue) {
|
|
case 1:
|
|
this.$emit('update', 'min', '*', 'min');
|
|
break;
|
|
case 2:
|
|
this.$emit('update', 'min', this.cycleTotal, 'min');
|
|
break;
|
|
case 3:
|
|
this.$emit('update', 'min', this.averageTotal, 'min');
|
|
break;
|
|
case 4:
|
|
this.$emit('update', 'min', this.checkboxString, 'min');
|
|
break;
|
|
}
|
|
},
|
|
// 周期两个值变化时
|
|
cycleChange() {
|
|
if (this.radioValue == '2') {
|
|
this.$emit('update', 'min', this.cycleTotal, 'min');
|
|
}
|
|
},
|
|
// 时间选择
|
|
handleRepeatConfirm() {
|
|
this.selectValue = this.checkboxList.join(', ');
|
|
this.isRepeat = false;
|
|
},
|
|
// 平均两个值变化时
|
|
averageChange() {
|
|
if (this.radioValue == '3') {
|
|
this.$emit('update', 'min', this.averageTotal, 'min');
|
|
}
|
|
},
|
|
// checkbox值变化时
|
|
checkboxChange() {
|
|
if (this.radioValue == '4') {
|
|
this.$emit('update', 'min', this.checkboxString, 'min');
|
|
}
|
|
},
|
|
//检查输入cycle01
|
|
checkValueCycle01(event) {
|
|
if (event < 0) {
|
|
this.cycle01 = 0;
|
|
} else if (event > 58) {
|
|
this.cycle01 = 58;
|
|
} else {
|
|
this.cycle01 = event;
|
|
}
|
|
},
|
|
//检查输入cycle02
|
|
checkValueCycle02(event) {
|
|
if (event < this.cycle01) {
|
|
this.cycle02 = this.cycle01 + 1;
|
|
} else if (event > 59) {
|
|
this.cycle02 = 59;
|
|
} else {
|
|
this.cycle02 = event;
|
|
}
|
|
},
|
|
//检查输入average01
|
|
checkValueAverage01(event) {
|
|
if (event < 0) {
|
|
this.average01 = 0;
|
|
} else if (event > 58) {
|
|
this.average01 = 58;
|
|
} else {
|
|
this.average01 = event;
|
|
}
|
|
},
|
|
//检查输入average02
|
|
checkValueAverage02(event) {
|
|
if (event < 1) {
|
|
this.average02 = 1;
|
|
} else if (event > 59) {
|
|
this.average02 = 59;
|
|
} else {
|
|
this.average02 = event;
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
'radioValue': 'radioChange',
|
|
'cycleTotal': 'cycleChange',
|
|
'averageTotal': 'averageChange',
|
|
'checkboxString': 'checkboxChange',
|
|
},
|
|
computed: {
|
|
// 计算两个周期值
|
|
cycleTotal: function() {
|
|
const cycle01 = this.checkNum(this.cycle01, 0, 58)
|
|
const cycle02 = this.checkNum(this.cycle02, cycle01 ? cycle01 + 1 : 1, 59)
|
|
return cycle01 + '-' + cycle02;
|
|
},
|
|
// 计算平均用到的值
|
|
averageTotal: function() {
|
|
const average01 = this.checkNum(this.average01, 0, 58)
|
|
const average02 = this.checkNum(this.average02, 1, 59 - average01 || 0)
|
|
return average01 + '/' + average02;
|
|
},
|
|
// 计算勾选的checkbox值合集
|
|
checkboxString: function() {
|
|
let str = this.selectValue;
|
|
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;
|
|
|
|
.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> |