343 lines
9.3 KiB
Vue
343 lines
9.3 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.week.903494-0')}}
|
|
</u-radio>
|
|
</view>
|
|
<view style="padding:20rpx 0"><u-radio :name="2" :label="2">
|
|
{{$tt('cron.week.903494-1')}}
|
|
</u-radio>
|
|
</view>
|
|
<view style="padding:20rpx 0"><u-row><u-radio :name="3" :label="3">
|
|
{{$tt('cron.week.903494-2')}}
|
|
</u-radio>
|
|
<uni-data-select v-model="cycle01" :localdata="weekList" :clear="false"
|
|
style="margin:0 15rpx;width:150rpx;"></uni-data-select>-
|
|
<uni-data-select v-model="cycle02" :localdata="weekList" :clear="false"
|
|
style="margin-left:15rpx;width:150rpx;"></uni-data-select>
|
|
</u-row>
|
|
</view>
|
|
<view style="padding:20rpx 0"><u-row><u-radio :name="4" :label="4"
|
|
style="padding: 20rpx 10rpx;position: relative;">
|
|
{{$tt('cron.week.903494-3')}}
|
|
<u-input v-model='average01' :min="1" :max="4" type="number" :maxlength="1"
|
|
:customStyle="{ margin: '0 15rpx',width:'100rpx' }" @input="checkValue" />
|
|
{{$tt('cron.week.903494-4')}}
|
|
</u-radio>
|
|
<uni-data-select v-model="average02" :localdata="weekList" :clear="false"
|
|
style="position: relative;margin-left:15rpx;width:150rpx;"></uni-data-select>
|
|
</u-row>
|
|
</view>
|
|
<view style="padding:20rpx 0">
|
|
<u-row><u-radio :name="5" :label="5">
|
|
{{$tt('cron.week.903494-5')}}
|
|
</u-radio>
|
|
<uni-data-select v-model="weekday" :localdata="weekList" :clear="false"
|
|
style="margin-left:15rpx;width:150rpx;"></uni-data-select>
|
|
</u-row>
|
|
</view>
|
|
<view style="padding:20rpx 0"><u-radio :name="6" :label="6">
|
|
{{$tt('cron.week.903494-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: '15rpx' }">
|
|
<!-- #ifdef APP-NVUE -->
|
|
<u--input v-model="selectValue" :placeholder="$tt('cron.day.304304-11')"
|
|
inputAlign="right" disabledColor="#fff" disabled
|
|
:customStyle="{ marginRight: '15rpx' }">
|
|
</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">
|
|
<u-checkbox-group v-model="selectValues" :borderBottom="false" placement="column"
|
|
iconPlacement="right">
|
|
<view class="radio-wrap">
|
|
<u-checkbox :label="$tt('sceneTiming.monday')" :name="1" iconSize="16"></u-checkbox>
|
|
</view>
|
|
<view class="radio-wrap">
|
|
<u-checkbox :label="$tt('sceneTiming.tuesday')" :name="2" iconSize="16"></u-checkbox>
|
|
</view>
|
|
<view class="radio-wrap">
|
|
<u-checkbox :label="$tt('sceneTiming.wednesday')" :name="3" iconSize="16"></u-checkbox>
|
|
</view>
|
|
<view class="radio-wrap">
|
|
<u-checkbox :label="$tt('sceneTiming.thursday')" :name="4" iconSize="16"></u-checkbox>
|
|
</view>
|
|
<view class="radio-wrap">
|
|
<u-checkbox :label="$tt('sceneTiming.friday')" :name="5" iconSize="16"></u-checkbox>
|
|
</view>
|
|
<view class="radio-wrap">
|
|
<u-checkbox :label="$tt('sceneTiming.saturday')" :name="6" iconSize="16"></u-checkbox>
|
|
</view>
|
|
<view class="radio-wrap">
|
|
<u-checkbox :label="$tt('sceneTiming.sunday')" :name="7" iconSize="16"></u-checkbox>
|
|
</view>
|
|
</u-checkbox-group>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { navigateBackTo } from '@/utils/common.js';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
radioValue: 2,
|
|
weekday: 2,
|
|
cycle01: 2,
|
|
cycle02: 3,
|
|
average01: 1,
|
|
average02: 2,
|
|
checkboxList: [],
|
|
selectValue: '',
|
|
selectValues: [],
|
|
isRepeat: false,
|
|
checkNum: this.$options.propsData.check,
|
|
weekList: [{
|
|
value: 2,
|
|
text: '星期一'
|
|
},
|
|
{
|
|
value: 3,
|
|
text: '星期二'
|
|
},
|
|
{
|
|
value: 4,
|
|
text: '星期三'
|
|
},
|
|
{
|
|
value: 5,
|
|
text: '星期四'
|
|
},
|
|
{
|
|
value: 6,
|
|
text: '星期五'
|
|
},
|
|
{
|
|
value: 7,
|
|
text: '星期六'
|
|
},
|
|
{
|
|
value: 1,
|
|
text: '星期日'
|
|
}
|
|
],
|
|
}
|
|
},
|
|
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);
|
|
}
|
|
},
|
|
//检查输入
|
|
checkValue(event) {
|
|
const value = Number(event);
|
|
if (value < 1) {
|
|
this.average01 = 1;
|
|
} else if (value > 4) {
|
|
this.average01 = 4;
|
|
} else {
|
|
this.average01 = value;
|
|
}
|
|
},
|
|
handleRepeatConfirm() {
|
|
this.selectValue = this.getRepeatName(this.selectValues);
|
|
// this.selectValue = this.checkboxList.join(', ');
|
|
console.log(this.selectValue, 'll');
|
|
this.isRepeat = false;
|
|
},
|
|
// 获取repeat名称
|
|
getRepeatName(selectValues) {
|
|
const list = selectValues.map(item => {
|
|
if (item === 1) {
|
|
return this.$tt('sceneTiming.monday')
|
|
} else if (item === 2) {
|
|
return this.$tt('sceneTiming.tuesday')
|
|
} else if (item === 3) {
|
|
return this.$tt('sceneTiming.wednesday')
|
|
} else if (item === 4) {
|
|
return this.$tt('sceneTiming.thursday')
|
|
} else if (item === 5) {
|
|
return this.$tt('sceneTiming.friday')
|
|
} else if (item === 6) {
|
|
return this.$tt('sceneTiming.saturday')
|
|
} else if (item === 7) {
|
|
return this.$tt('sceneTiming.sunday')
|
|
}
|
|
})
|
|
if (list.length === 7) {
|
|
return this.$tt('sceneTiming.everyDay');
|
|
} else {
|
|
return list.join(',');
|
|
}
|
|
},
|
|
},
|
|
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() {
|
|
const str = this.selectValues.map(val => {
|
|
return val + 1 > 7 ? 1 : val + 1;
|
|
}).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> |