517 lines
14 KiB
Vue
517 lines
14 KiB
Vue
<template>
|
||
<page-meta>
|
||
<navigation-bar :title="$tt('cron.index.464657-11')" title-align="center" background-color="#F1F3F9"
|
||
front-color="#000000">
|
||
</navigation-bar>
|
||
</page-meta>
|
||
|
||
<view class="scene-timing-wrap">
|
||
<view class="container-wrap">
|
||
<view class="form-wrap">
|
||
<!-- <u-sticky bgColor="#FFF" customStyle="border-bottom:1px solid #eee;border-radius:20rpx"> -->
|
||
<u-tabs :list="expressList" lineHeight="2" :duration="100" @click="tabClick"></u-tabs>
|
||
<!-- </u-sticky> -->
|
||
<view class="form-item-wrap" v-if="tabIndex==0">
|
||
<CrontabSecond @update="updateCrontabValue" :check="checkNumber" :cron="crontabValueObj"
|
||
ref="cronsecond" />
|
||
</view>
|
||
<view class="form-item-wrap" v-if="tabIndex==1">
|
||
<CrontabMin @update="updateCrontabValue" :check="checkNumber" :cron="crontabValueObj"
|
||
ref="cronsecond" />
|
||
</view>
|
||
<view class="form-item-wrap" v-if="tabIndex==2">
|
||
<CrontabHour @update="updateCrontabValue" :check="checkNumber" :cron="crontabValueObj"
|
||
ref="cronsecond" />
|
||
</view>
|
||
<view class="form-item-wrap" v-if="tabIndex==3">
|
||
<CrontabDay @update="updateCrontabValue" :check="checkNumber" :cron="crontabValueObj"
|
||
ref="cronsecond" />
|
||
</view>
|
||
<view class="form-item-wrap" v-if="tabIndex==4">
|
||
<CrontabMonth @update="updateCrontabValue" :check="checkNumber" :cron="crontabValueObj"
|
||
ref="cronsecond" />
|
||
</view>
|
||
<view class="form-item-wrap" v-if="tabIndex==5">
|
||
<CrontabWeek @update="updateCrontabValue" :check="checkNumber" :cron="crontabValueObj"
|
||
ref="cronsecond" />
|
||
</view>
|
||
<view class="form-item-wrap" v-if="tabIndex==6">
|
||
<CrontabYear @update="updateCrontabValue" :check="checkNumber" :cron="crontabValueObj"
|
||
ref="cronsecond" />
|
||
</view>
|
||
</view>
|
||
<div class="popup-main">
|
||
<div class="popup-result" style="border-top: 1px solid #ccc;">
|
||
<p class="title">{{$tt('cron.index.464657-7')}}</p>
|
||
<uni-table :border="true" stripe>
|
||
<uni-tr>
|
||
<!-- 表头 -->
|
||
<uni-th v-for="(title, index) in tabTitles" :key="index" width="40">{{ title }}</uni-th>
|
||
<uni-th>{{$tt('cron.index.464657-8')}}</uni-th>
|
||
</uni-tr>
|
||
<uni-tr>
|
||
<!-- 数据行 -->
|
||
<uni-td>
|
||
<span>{{ crontabValueObj.second }}</span>
|
||
</uni-td>
|
||
<uni-td>
|
||
<span>{{ crontabValueObj.min }}</span>
|
||
</uni-td>
|
||
<uni-td>
|
||
<span>{{ crontabValueObj.hour }}</span>
|
||
</uni-td>
|
||
<uni-td>
|
||
<span>{{ crontabValueObj.day }}</span>
|
||
</uni-td>
|
||
<uni-td>
|
||
<span>{{ crontabValueObj.month }}</span>
|
||
</uni-td>
|
||
<uni-td>
|
||
<span>{{ crontabValueObj.week }}</span>
|
||
</uni-td>
|
||
<uni-td>
|
||
<span>{{ crontabValueObj.year }}</span>
|
||
</uni-td>
|
||
<uni-td>
|
||
<span>{{ crontabValueString }}</span>
|
||
</uni-td>
|
||
</uni-tr>
|
||
</uni-table>
|
||
</div>
|
||
</div>
|
||
<div class="popup-main">
|
||
<CrontabResult :ex="crontabValueString"></CrontabResult>
|
||
</div>
|
||
<view class="btn-wrap" style="margin-top:20rpx;display:flex;">
|
||
<u-button :customStyle="{ height: '96rpx',marginLeft:'5rpx', color: '#3378FE', borderRadius: '10rpx' }"
|
||
size="normal" :plain="true" :text="$tt('common.confirm')" @click="submitFill"></u-button>
|
||
<u-button
|
||
:customStyle="{ height: '96rpx',marginRight:'5rpx', color: '#000', borderRadius: '10rpx',marginLeft:'10rpx' }"
|
||
size="normal" :plain="true" :text="$tt('cron.index.464657-10')" @click="clearCron"></u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { navigateBackTo } from '@/utils/common.js';
|
||
import CrontabSecond from './cron/second.vue';
|
||
import CrontabMin from './cron/min.vue';
|
||
import CrontabHour from './cron/hour.vue';
|
||
import CrontabDay from './cron/day.vue';
|
||
import CrontabMonth from './cron/month.vue';
|
||
import CrontabWeek from './cron/week.vue';
|
||
import CrontabYear from './cron/year.vue';
|
||
import CrontabResult from './cron/result.vue';
|
||
|
||
export default {
|
||
components: {
|
||
CrontabSecond,
|
||
CrontabMin,
|
||
CrontabHour,
|
||
CrontabDay,
|
||
CrontabMonth,
|
||
CrontabWeek,
|
||
CrontabYear,
|
||
CrontabResult,
|
||
},
|
||
data() {
|
||
return {
|
||
type: 'trigger',
|
||
editIndex: null, // null 代表新增
|
||
isTimer: false, // 时间
|
||
isRepeat: false, // 星期
|
||
tabIndex: 0,
|
||
//秒
|
||
radioValue: 1,
|
||
workday: 1,
|
||
cycle01: 1,
|
||
cycle02: 2,
|
||
average01: 1,
|
||
average02: 1,
|
||
radioValue1: 1,
|
||
selectedValue: null, // 选中的值
|
||
options: [], // 选择框的选项
|
||
checkboxList: [],
|
||
resultList: [],
|
||
isScenePage: 1, //是否为场景页定时，1为场景，0为设备定时
|
||
checkNum: this.$options.propsData.check,
|
||
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`,
|
||
},
|
||
tabTitles: ['秒', '分钟', '小时', '日', '月', '周', '年'],
|
||
tabActive: 0,
|
||
myindex: 0,
|
||
crontabValueObj: {
|
||
second: '*',
|
||
min: '*',
|
||
hour: '*',
|
||
day: '*',
|
||
month: '*',
|
||
week: '?',
|
||
year: '',
|
||
},
|
||
expressList: [{
|
||
id: '0',
|
||
name: '秒',
|
||
}, {
|
||
id: '1',
|
||
name: '分钟',
|
||
}, {
|
||
id: '2',
|
||
name: '小时'
|
||
}, {
|
||
id: '3',
|
||
name: '日'
|
||
}, {
|
||
id: '4',
|
||
name: '月'
|
||
}, {
|
||
id: '5',
|
||
name: '周'
|
||
}, {
|
||
id: '6',
|
||
name: '年'
|
||
}],
|
||
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],
|
||
};
|
||
|
||
},
|
||
mounted() {},
|
||
|
||
computed: {
|
||
// 计算两个周期值
|
||
cycleTotal: function() {
|
||
const cycle01 = this.checkNum(this.cycle01, 1, 30)
|
||
const cycle02 = this.checkNum(this.cycle02, cycle01 ? cycle01 + 1 : 2, 31, 31)
|
||
return cycle01 + '-' + cycle02;
|
||
},
|
||
// 计算平均用到的值
|
||
averageTotal: function() {
|
||
const average01 = this.checkNum(this.average01, 1, 30)
|
||
const average02 = this.checkNum(this.average02, 1, 31 - average01 || 0)
|
||
return average01 + '/' + average02;
|
||
},
|
||
// 计算工作日格式
|
||
workdayCheck: function() {
|
||
const workday = this.checkNum(this.workday, 1, 31)
|
||
return workday;
|
||
},
|
||
// 计算勾选的checkbox值合集
|
||
checkboxString: function() {
|
||
let str = this.checkboxList.join();
|
||
return str == '' ? '*' : str;
|
||
},
|
||
crontabValueString: function() {
|
||
let obj = this.crontabValueObj;
|
||
let str = obj.second + ' ' + obj.min + ' ' + obj.hour + ' ' + obj.day + ' ' + obj.month + ' ' + obj
|
||
.week + (obj.year == '' ? '' : ' ' + obj.year);
|
||
return str;
|
||
},
|
||
},
|
||
onLoad(options) {
|
||
this.isScenePage = Number(options.isScenePage);
|
||
console.log(options);
|
||
},
|
||
|
||
methods: {
|
||
// 单击选显卡
|
||
tabClick(item) {
|
||
this.tabIndex = item.index;
|
||
},
|
||
|
||
updateCrontabValue(name, value, from) {
|
||
'updateCrontabValue',
|
||
name,
|
||
value,
|
||
from;
|
||
this.crontabValueObj[name] = value;
|
||
if (from && from !== name) {
|
||
console.log(`来自组件 ${from} 改变了 ${name} ${value}`);
|
||
this.changeRadio(name, value);
|
||
}
|
||
},
|
||
// 赋值到组件
|
||
changeRadio(name, value) {
|
||
let arr = ['second', 'min', 'hour', 'month'],
|
||
refName = 'cron' + name,
|
||
insValue;
|
||
|
||
if (!this.$refs[refName]) return;
|
||
|
||
if (arr.includes(name)) {
|
||
if (value === '*') {
|
||
insValue = 1;
|
||
} else if (value.indexOf('-') > -1) {
|
||
let indexArr = value.split('-');
|
||
isNaN(indexArr[0]) ? (this.$refs[refName].cycle01 = 0) : (this.$refs[refName].cycle01 = indexArr[
|
||
0]);
|
||
this.$refs[refName].cycle02 = indexArr[1];
|
||
insValue = 2;
|
||
} else if (value.indexOf('/') > -1) {
|
||
let indexArr = value.split('/');
|
||
isNaN(indexArr[0]) ? (this.$refs[refName].average01 = 0) : (this.$refs[refName].average01 =
|
||
indexArr[0]);
|
||
this.$refs[refName].average02 = indexArr[1];
|
||
insValue = 3;
|
||
} else {
|
||
insValue = 4;
|
||
this.$refs[refName].checkboxList = value.split(',');
|
||
}
|
||
} else if (name == 'day') {
|
||
if (value === '*') {
|
||
insValue = 1;
|
||
} else if (value == '?') {
|
||
insValue = 2;
|
||
} else if (value.indexOf('-') > -1) {
|
||
let indexArr = value.split('-');
|
||
isNaN(indexArr[0]) ? (this.$refs[refName].cycle01 = 0) : (this.$refs[refName].cycle01 = indexArr[
|
||
0]);
|
||
this.$refs[refName].cycle02 = indexArr[1];
|
||
insValue = 3;
|
||
} else if (value.indexOf('/') > -1) {
|
||
let indexArr = value.split('/');
|
||
isNaN(indexArr[0]) ? (this.$refs[refName].average01 = 0) : (this.$refs[refName].average01 =
|
||
indexArr[0]);
|
||
this.$refs[refName].average02 = indexArr[1];
|
||
insValue = 4;
|
||
} else if (value.indexOf('W') > -1) {
|
||
let indexArr = value.split('W');
|
||
isNaN(indexArr[0]) ? (this.$refs[refName].workday = 0) : (this.$refs[refName].workday = indexArr[
|
||
0]);
|
||
insValue = 5;
|
||
} else if (value === 'L') {
|
||
insValue = 6;
|
||
} else {
|
||
this.$refs[refName].checkboxList = value.split(',');
|
||
insValue = 7;
|
||
}
|
||
} else if (name == 'week') {
|
||
if (value === '*') {
|
||
insValue = 1;
|
||
} else if (value == '?') {
|
||
insValue = 2;
|
||
} else if (value.indexOf('-') > -1) {
|
||
let indexArr = value.split('-');
|
||
isNaN(indexArr[0]) ? (this.$refs[refName].cycle01 = 0) : (this.$refs[refName].cycle01 = indexArr[
|
||
0]);
|
||
this.$refs[refName].cycle02 = indexArr[1];
|
||
insValue = 3;
|
||
} else if (value.indexOf('#') > -1) {
|
||
let indexArr = value.split('#');
|
||
isNaN(indexArr[0]) ? (this.$refs[refName].average01 = 1) : (this.$refs[refName].average01 =
|
||
indexArr[0]);
|
||
this.$refs[refName].average02 = indexArr[1];
|
||
insValue = 4;
|
||
} else if (value.indexOf('L') > -1) {
|
||
let indexArr = value.split('L');
|
||
isNaN(indexArr[0]) ? (this.$refs[refName].weekday = 1) : (this.$refs[refName].weekday = indexArr[
|
||
0]);
|
||
insValue = 5;
|
||
} else {
|
||
this.$refs[refName].checkboxList = value.split(',');
|
||
insValue = 6;
|
||
}
|
||
} else if (name == 'year') {
|
||
if (value == '') {
|
||
insValue = 1;
|
||
} else if (value == '*') {
|
||
insValue = 2;
|
||
} else if (value.indexOf('-') > -1) {
|
||
insValue = 3;
|
||
} else if (value.indexOf('/') > -1) {
|
||
insValue = 4;
|
||
} else {
|
||
this.$refs[refName].checkboxList = value.split(',');
|
||
insValue = 5;
|
||
}
|
||
}
|
||
this.$refs[refName].radioValue = insValue;
|
||
},
|
||
// 表单选项的子组件校验数字格式（通过-props传递）
|
||
checkNumber(value, minLimit, maxLimit) {
|
||
// 检查必须为整数
|
||
value = Math.floor(value);
|
||
if (value < minLimit) {
|
||
value = minLimit;
|
||
} else if (value > maxLimit) {
|
||
value = maxLimit;
|
||
}
|
||
return value;
|
||
},
|
||
// 填充表达式
|
||
submitFill() {
|
||
const crontabValueString = this.crontabValueString;
|
||
const type = uni.getStorageSync('type');
|
||
const editIndex = uni.getStorageSync('editIndex');
|
||
const jobId = uni.getStorageSync('jobId');
|
||
if (this.isScenePage == 0) {
|
||
uni.$u.route('/pagesA/home/device/timing/detail', {
|
||
jobId,
|
||
crontabValueString
|
||
});
|
||
} else {
|
||
uni.$u.route('/pagesA/scene/timing/index', {
|
||
type,
|
||
editIndex,
|
||
crontabValueString
|
||
});
|
||
}
|
||
|
||
},
|
||
clearCron() {
|
||
// 还原选择项
|
||
('准备还原');
|
||
this.crontabValueObj = {
|
||
second: '*',
|
||
min: '*',
|
||
hour: '*',
|
||
day: '*',
|
||
month: '*',
|
||
week: '?',
|
||
year: '',
|
||
};
|
||
for (let j in this.crontabValueObj) {
|
||
this.changeRadio(j, this.crontabValueObj[j]);
|
||
}
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
height: 100%;
|
||
background: $uni-bg-color-grey;
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
.scene-timing-wrap {
|
||
padding-bottom: 10rpx;
|
||
|
||
.container-wrap {
|
||
.form-wrap {
|
||
background: #fff;
|
||
margin: 30rpx;
|
||
padding: 20rpx;
|
||
border-radius: 20rpx;
|
||
|
||
.form-item-wrap {
|
||
margin: 10px 20rpx;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.btn-wrap {
|
||
margin: 30rpx 20rpx;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.popup-main {
|
||
position: relative;
|
||
margin: 30rpx;
|
||
padding: 20rpx;
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
font-size: 12px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.popup-title {
|
||
overflow: hidden;
|
||
line-height: 34px;
|
||
padding-top: 6px;
|
||
background: #f2f2f2;
|
||
}
|
||
|
||
.popup-result {
|
||
box-sizing: border-box;
|
||
line-height: 24px;
|
||
margin: 25px auto;
|
||
padding: 15px 10px 10px;
|
||
// border-top: 1px solid #ccc;
|
||
position: relative;
|
||
}
|
||
|
||
.popup-result .title {
|
||
position: absolute;
|
||
top: -18px;
|
||
left: 50%;
|
||
width: 140px;
|
||
font-size: 14px;
|
||
margin-left: -70px;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
background: #fff;
|
||
}
|
||
|
||
.popup-result table {
|
||
text-align: center;
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.popup-result table span {
|
||
display: block;
|
||
width: 100%;
|
||
font-family: arial;
|
||
line-height: 30px;
|
||
height: 30px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
border: 1px solid #e8e8e8;
|
||
}
|
||
|
||
.popup-result-scroll {
|
||
font-size: 12px;
|
||
line-height: 24px;
|
||
height: 10em;
|
||
overflow-y: auto;
|
||
}
|
||
</style> |