285 lines
7.8 KiB
Vue
285 lines
7.8 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" spacing="30rpx">
|
|
<view style="padding:20rpx 0"><u-radio :name="1" :label="1">
|
|
{{$tt('cron.year.999034-0')}}
|
|
</u-radio>
|
|
</view>
|
|
<view style="padding:20rpx 0"><u-radio :name="2" :label="2">
|
|
{{$tt('cron.year.999034-1')}}
|
|
</u-radio>
|
|
</view>
|
|
<view style="padding:20rpx 0"><u-radio :name="3" :label="3">
|
|
{{$tt('cron.year.999034-2')}}
|
|
<u--input v-model='cycle01' :min='fullYear' :max="2098" type="number"
|
|
:customStyle="{ marginLeft: '15rpx' }" :maxlength="4" @input="checkValueCycle01" />-
|
|
<u--input v-model='cycle02' :min="cycle01 + 1 ? cycle01 + 1 : fullYear + 1" :max="2099"
|
|
type="number" :maxlength="4" @input="checkValueCycle02" />
|
|
</u-radio>
|
|
</view>
|
|
<view style="padding:20rpx 0"> <u-radio :name="4" :label="4">
|
|
{{$tt('cron.year.999034-3')}}
|
|
<u--input v-model='average01' :min='fullYear' :max="2098" type="number"
|
|
:customStyle="{ margin: '0 15rpx' }" :maxlength="4"
|
|
@input="checkValueAverage01" />{{$tt('cron.year.999034-4')}}
|
|
<u--input v-model='average02' :min="1" :max="2099 - average01 || fullYear"
|
|
:customStyle="{ margin: '0 15rpx' }" type="number" :maxlength="2"
|
|
@input="checkValueAverage02" />{{$tt('cron.year.999034-5')}}
|
|
</u-radio>
|
|
</view>
|
|
<view style="padding:20rpx 0"><u-radio :name="5" :label="5">
|
|
{{$tt('cron.year.999034-6')}}
|
|
<view style="margin-left: 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="item in Array(9).fill(0).map((_, index) => index)" :key="item"
|
|
:value="item - 1 + fullYear" :label="item - 1 + fullYear" class="number-wrap"
|
|
style="padding:15rpx 0">
|
|
<u-checkbox :label="item + fullYear" :name="item + fullYear"
|
|
iconSize="16"></u-checkbox>
|
|
</view>
|
|
</view>
|
|
</u-checkbox-group>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { navigateBackTo } from '@/utils/common.js';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
fullYear: 0,
|
|
radioValue: 1,
|
|
cycle01: 0,
|
|
cycle02: 0,
|
|
average01: 0,
|
|
average02: 1,
|
|
checkboxList: [],
|
|
selectValue: '',
|
|
checkboxList: [],
|
|
isRepeat: false,
|
|
repeatValue: '',
|
|
checkNum: this.$options.propsData.check,
|
|
}
|
|
},
|
|
name: 'crontab-year',
|
|
props: ['check', 'month', 'cron'],
|
|
methods: {
|
|
// 单选按钮值变化时
|
|
radioChange() {
|
|
switch (this.radioValue) {
|
|
case 1:
|
|
this.$emit('update', 'year', '');
|
|
break;
|
|
case 2:
|
|
this.$emit('update', 'year', '*');
|
|
break;
|
|
case 3:
|
|
this.$emit('update', 'year', this.cycleTotal);
|
|
break;
|
|
case 4:
|
|
this.$emit('update', 'year', this.averageTotal);
|
|
break;
|
|
case 5:
|
|
this.$emit('update', 'year', this.checkboxString);
|
|
break;
|
|
}
|
|
},
|
|
// 周期两个值变化时
|
|
cycleChange() {
|
|
if (this.radioValue == '3') {
|
|
this.$emit('update', 'year', this.cycleTotal);
|
|
}
|
|
},
|
|
// 平均两个值变化时
|
|
averageChange() {
|
|
if (this.radioValue == '4') {
|
|
this.$emit('update', 'year', this.averageTotal);
|
|
}
|
|
},
|
|
// checkbox值变化时
|
|
checkboxChange() {
|
|
if (this.radioValue == '5') {
|
|
this.$emit('update', 'year', this.checkboxString);
|
|
}
|
|
},
|
|
handleSelectChange(selected) {
|
|
// 处理选中值变化
|
|
this.checkboxList = selected;
|
|
},
|
|
// 时间选择
|
|
handleRepeatConfirm() {
|
|
this.selectValue = this.checkboxList.join(', ');
|
|
this.isRepeat = false;
|
|
},
|
|
//检查输入cycle01
|
|
checkValueCycle01(event) {
|
|
if (event < this.fullYear) {
|
|
this.cycle01 = this.fullYear;
|
|
} else if (event > 2098) {
|
|
this.cycle01 = 2098;
|
|
} else {
|
|
this.cycle01 = event;
|
|
}
|
|
},
|
|
//检查输入cycle02
|
|
checkValueCycle02(event) {
|
|
if (event < this.cycle01) {
|
|
this.cycle02 = this.cycle01 + 1;
|
|
} else if (event > 2099) {
|
|
this.cycle02 = 2099;
|
|
} else {
|
|
this.cycle02 = event;
|
|
}
|
|
},
|
|
//检查输入average01
|
|
checkValueAverage01(event) {
|
|
if (event < this.fullYear) {
|
|
this.average01 = this.fullYear;
|
|
} else if (event > 2098) {
|
|
this.average01 = 2098;
|
|
} else {
|
|
this.average01 = event;
|
|
}
|
|
},
|
|
//检查输入average02
|
|
checkValueAverage02(event) {
|
|
if (event < 1) {
|
|
this.average02 = 1;
|
|
} else if (event > (2099 - this.average01)) {
|
|
this.average02 = 2099 - this.average01;
|
|
} else {
|
|
this.average02 = event;
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
'radioValue': 'radioChange',
|
|
'cycleTotal': 'cycleChange',
|
|
'averageTotal': 'averageChange',
|
|
'checkboxString': 'checkboxChange'
|
|
},
|
|
computed: {
|
|
// 计算两个周期值
|
|
cycleTotal: function() {
|
|
const cycle01 = this.checkNum(this.cycle01, this.fullYear, 2098)
|
|
const cycle02 = this.checkNum(this.cycle02, cycle01 ? cycle01 + 1 : this.fullYear + 1, 2099)
|
|
return cycle01 + '-' + cycle02;
|
|
},
|
|
// 计算平均用到的值
|
|
averageTotal: function() {
|
|
const average01 = this.checkNum(this.average01, this.fullYear, 2098)
|
|
const average02 = this.checkNum(this.average02, 1, 2099 - average01 || this.fullYear)
|
|
return average01 + '/' + average02;
|
|
},
|
|
// 计算勾选的checkbox值合集
|
|
checkboxString: function() {
|
|
let str = this.selectValue;
|
|
return str;
|
|
}
|
|
},
|
|
mounted: function() {
|
|
// 仅获取当前年份
|
|
this.fullYear = Number(new Date().getFullYear());
|
|
this.cycle01 = this.fullYear;
|
|
this.cycle02 = this.fullYear + 1;
|
|
this.average01 = this.fullYear;
|
|
}
|
|
}
|
|
</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;
|
|
line-height: 100rpx;
|
|
|
|
.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> |