517 lines
14 KiB
Vue
Raw Normal View History

2025-05-22 16:23:08 +08:00
<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>