300 lines
9.1 KiB
Vue
300 lines
9.1 KiB
Vue
<template>
|
|
<view class="scene-timing-wrap">
|
|
<view class="container-wrap">
|
|
<view class="form-wrap">
|
|
<u--form :model="form" ref="form" :rules="rules" errorType="toast" labelPosition="left" labelWidth="80">
|
|
<view class="form-item-wrap">
|
|
<u-form-item prop="time" :label="$tt('sceneTiming.time')" @click="isTimer = true">
|
|
<u--input v-model="form.time" border="none" inputAlign="right" :placeholder="$tt('sceneTiming.selectTime')"
|
|
disabledColor="#fff" disabled :customStyle="{ marginRight: '20rpx' }" />
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
|
</u-form-item>
|
|
</view>
|
|
<view class="form-item-wrap">
|
|
<u-form-item prop="repeat" :label="$tt('sceneTiming.again')" @click="isRepeat = true">
|
|
<u--input v-model="form.repeat" border="none" inputAlign="right" :placeholder="$tt('sceneTiming.selectWeek')"
|
|
disabledColor="#fff" disabled :customStyle="{ marginRight: '20rpx' }" />
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
|
</u-form-item>
|
|
</view>
|
|
<view class="form-item-wrap">
|
|
<u-form-item label="CRON">
|
|
<template slot="right">
|
|
<u-radio-group v-model="form.isAdvance">
|
|
<u-radio :customStyle="{marginRight: '30rpx'}" :label="$tt('sceneTiming.default')" :name="0"></u-radio>
|
|
<u-radio :customStyle="{marginRight: '10rpx'}" :label="$tt('sceneTiming.auto')" :name="1"
|
|
disabled></u-radio>
|
|
</u-radio-group>
|
|
</template>
|
|
</u-form-item>
|
|
</view>
|
|
<view class="form-item-wrap">
|
|
<u-form-item>
|
|
<!-- #ifndef APP-NVUE -->
|
|
<u-input v-model="form.cronExpression" :placeholder="$tt('sceneTiming.inputCRON')" disabled>
|
|
<!-- #endif -->
|
|
<!-- #ifdef APP-NVUE -->
|
|
<u--input v-model="form.cronExpression" :placeholder="$tt('sceneTiming.inputCRON')" disabled>
|
|
<!-- #endif -->
|
|
<template slot="suffix">
|
|
<u-button :text="$tt('sceneTiming.expression')" icon="calendar" type="primary" size="mini"
|
|
disabled></u-button>
|
|
</template>
|
|
<!-- #ifndef APP-NVUE -->
|
|
</u-input>
|
|
<!-- #endif -->
|
|
<!-- #ifdef APP-NVUE -->
|
|
</u--input>
|
|
<!-- #endif -->
|
|
</u-form-item>
|
|
</view>
|
|
</u--form>
|
|
</view>
|
|
<view class="btn-wrap">
|
|
<u-button :customStyle="{ height: '96rpx' }" size="normal" :plain="true" :text="$tt('common.save')"
|
|
@click="handleSave"></u-button>
|
|
</view>
|
|
</view>
|
|
<view class="other">
|
|
<!-- 选择时间 -->
|
|
<u-datetime-picker :show="isTimer" v-model="form.time" mode="time" @cancel="isTimer=false"
|
|
@close="isTimer=false" @confirm="handleDatetimeConfirm"></u-datetime-picker>
|
|
|
|
<!-- 星期 -->
|
|
<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="repeatValue" :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 {
|
|
type: 'trigger',
|
|
editIndex: null, // null 代表新增
|
|
isTimer: false, // 时间
|
|
isRepeat: false, // 星期
|
|
form: {
|
|
time: uni.$u.timeFormat(new Date(), 'hh:MM'),
|
|
repeat: this.$tt('sceneTiming.everyDay'),
|
|
isAdvance: 0,
|
|
cronExpression: `0 ${uni.$u.timeFormat(new Date(),'MM')} ${uni.$u.timeFormat(new Date(),'hh')} ? * 1,2,3,4,5,6,7`,
|
|
},
|
|
rules: {
|
|
time: {
|
|
type: 'string',
|
|
required: true,
|
|
message: this.$tt('sceneTiming.selectTime'),
|
|
trigger: ['blur', 'change']
|
|
},
|
|
repeat: {
|
|
type: 'string',
|
|
required: true,
|
|
message: this.$tt('sceneTiming.selectWeek'),
|
|
trigger: ['blur', 'change']
|
|
},
|
|
},
|
|
repeatValue: [1, 2, 3, 4, 5, 6, 7],
|
|
};
|
|
},
|
|
onLoad (option) {
|
|
const { type, editIndex } = option;
|
|
this.type = type;
|
|
this.editIndex = Number(editIndex);
|
|
if (!Number.isNaN(this.editIndex) && this.editIndex !== null) {
|
|
const { cronExpression } = uni.getStorageSync('trigger');
|
|
const time = cronExpression.substring(5, 7) + ':' + cronExpression.substring(2, 4);
|
|
const repeatValue = cronExpression.substring(12).split(',').map(Number);
|
|
const repeat = this.getRepeatName(repeatValue)
|
|
this.form = { ...this.form, time, repeat, cronExpression };
|
|
this.repeatValue = repeatValue;
|
|
}
|
|
},
|
|
methods: {
|
|
// 时间选择
|
|
handleDatetimeConfirm () {
|
|
this.$nextTick(() => {
|
|
this.gentCronExpression();
|
|
})
|
|
this.isTimer = false;
|
|
},
|
|
// 星期选择
|
|
handleRepeatConfirm () {
|
|
const repeat = this.getRepeatName(this.repeatValue);
|
|
this.form.repeat = repeat;
|
|
this.gentCronExpression();
|
|
this.isRepeat = false;
|
|
},
|
|
// 获取repeat名称
|
|
getRepeatName (repeatValue) {
|
|
const list = repeatValue.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(',');
|
|
}
|
|
},
|
|
// 生成cron表达式
|
|
gentCronExpression () {
|
|
let hour = '00';
|
|
let minute = '00';
|
|
if (this.form.time) {
|
|
hour = this.form.time.substring(0, 2);
|
|
minute = this.form.time.substring(3);
|
|
}
|
|
let week = '*';
|
|
if (this.repeatValue.length > 0) {
|
|
week = this.repeatValue.sort();
|
|
}
|
|
this.form.cronExpression = '0 ' + minute + ' ' + hour + ' ? * ' + week;
|
|
},
|
|
// 保存
|
|
handleSave () {
|
|
this.$refs.form.validate().then(respon => {
|
|
let action = uni.getStorageSync(this.type);
|
|
const { cronExpression } = this.form;
|
|
action = { ...action, cronExpression };
|
|
uni.setStorageSync(this.type, action);
|
|
// 更新或者插入新的触发或者执行
|
|
let { triggers, actions, ...res } = uni.getStorageSync('sceneData');
|
|
if (Number.isNaN(this.editIndex) || this.editIndex === null) {
|
|
if (this.type === 'trigger') {
|
|
triggers.push(action);
|
|
} else {
|
|
actions.push(action);
|
|
}
|
|
uni.setStorageSync('sceneData', { triggers, actions, ...res });
|
|
} else {
|
|
if (this.type === 'trigger') {
|
|
let list = triggers.map((item, i) => {
|
|
if (i == this.editIndex) {
|
|
return action
|
|
} else {
|
|
return item
|
|
}
|
|
});
|
|
uni.setStorageSync('sceneData', { triggers: [...list], actions, ...res });
|
|
} else {
|
|
let list = actions.map((item, i) => {
|
|
if (i == this.editIndex) {
|
|
return action
|
|
} else {
|
|
return item
|
|
}
|
|
});
|
|
uni.setStorageSync('sceneData', { triggers, actions: [...list], ...res });
|
|
}
|
|
}
|
|
uni.setStorageSync('callback', true);
|
|
navigateBackTo('/pagesA/scene/detail');
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
height: 100%;
|
|
background: #eef3f7;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.scene-timing-wrap {
|
|
|
|
.container-wrap {
|
|
.form-wrap {
|
|
background: #fff;
|
|
margin: 30rpx;
|
|
|
|
.form-item-wrap {
|
|
padding: 4rpx 20rpx;
|
|
}
|
|
}
|
|
|
|
.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: 40rpx;
|
|
|
|
&:not(:last-child) {
|
|
border-bottom: 1rpx solid #F1F2F5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |