588 lines
16 KiB
Vue
Raw Normal View History

2024-12-09 14:16:57 +08:00
<template>
<page-meta>
<navigation-bar :title="$tt('navBar.timedDetails')" title-align="center" background-color="#007AFF" />
</page-meta>
<view class="device-timing-detail-wrap">
<view class="name-wrap">
<u--input clearable border="false" :placeholder="$tt('sceneDetail.inputName')"
:customStyle="{ backgroundColor: '#fff', padding: '12px 30rpx', borderRadius: '10rpx' }" fontSize="16"
v-model="timingData.jobName"></u--input>
</view>
<view class="container-wrap">
<view class="cell-group-wrap">
<u-cell-group :border="false">
<view class="cell-wrap">
<u-cell size="large" :border="false" :title="$tt('sceneTiming.status')">
<u-switch v-model="timingData.status" slot="value" activeValue="0" inactiveValue="1"
activeColor="#3C9CFF" inactiveColor="#dbdbdb" size="18"></u-switch>
</u-cell>
</view>
</u-cell-group>
</view>
<view class="condition-wrap">
<view class="form-wrap">
<u--form errorType="toast" labelPosition="left" labelWidth="80" :labelStyle="{ fontSize: '32rpx' }">
<view class="form-item-wrap">
<u-form-item :label="$tt('sceneTiming.time')" @click="isTime = true">
<u--input v-model="timingData.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 :label="$tt('sceneTiming.again')" @click="isRepeat = true">
<u--input v-model="timingData.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="timingData.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="timingData.cronExpression" :placeholder="$tt('sceneTiming.inputCRON')" disabled>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<u--input v-model="timingData.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>
<view class="execute-wrap">
<view class="title-wrap">
<view class="left-wrap">
<text class="title">{{$tt('sceneDetail.action')}}</text>
</view>
<view class="right-wrap">
<u-icon name="plus-circle-fill" size="24" color='#3c9cff' bold @click="handleAddModel"></u-icon>
</view>
</view>
<view v-if="timingData.actions.length === 0" class="empty-cell" @click="handleAddModel">
<view class="text">{{$tt('sceneDetail.addTask')}}</view>
</view>
<view v-else class="swipe-action-wrap">
<u-swipe-action autoClose>
<u-cell-group :border="false">
<view class="action-item-wrap" v-for="(item,index) in timingData.actions"
:key="getKey(index, item)">
<!-- 设置key为不同id是为了解决uview的SwipeAction 滑动单元格 关闭事件 删除当前项下一项自动弹出删除选择bug -->
<u-swipe-action-item :options="swipeOptions" @click="handleDeleteSceneItem(index)">
<u-cell :border="false" isLink
@click="handleEditTimingItem({item:item, index:index})">
<view slot="title" class="slot-title">
<u--image :src="getImageUrl(item)" radius="4" width="33"
height="33"></u--image>
<view class="cell-text">
<view class="title">{{item.deviceName}}</view>
<view class="des">
<template v-if="item.parentName && item.parentName !== item.name">
{{item.parentName}} >>
</template>
<template v-if="item.arrayIndexName">
{{item.arrayIndexName}} >>
</template>
{{item.name}}
{{item.valueName ? item.valueName : item.value !== '' ? item.value : ''}}
</view>
</view>
</view>
</u-cell>
</u-swipe-action-item>
</view>
</u-cell-group>
</u-swipe-action>
</view>
</view>
<view class="btn-save-wrap">
<u-button type="primary" :customStyle="{ height: '96rpx' }" size="normal" :text="$tt('common.save')"
@click="handleSave"></u-button>
</view>
</view>
<view class="other">
<!-- 选择时间 -->
<u-datetime-picker :show="isTime" v-model="timingData.time" mode="time" @cancel="isTime=false"
@close="isTime=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="timingData.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>
<u-popup :show="isModel" :round="5" mode="bottom" bgColor="#eef3f7" :closeOnClickOverlay="true"
@close="isModel = false">
<view class="model-popup-wrap">
<view class="title">{{$tt('product.selectThingModel')}}</view>
<u-radio-group>
<view class="cell-group-wrap">
<u-cell-group :border="false">
<view class="cell-wrap">
<u-cell :title="$tt('product.attribute')" :name="1" :border="false" isLink @click="goToModelList"></u-cell>
</view>
<view class="cell-wrap">
<u-cell :title="$tt('product.function')" :name="2" :border="false" isLink @click="goToModelList"></u-cell>
</view>
</u-cell-group>
</view>
</u-radio-group>
</view>
</u-popup>
</view>
</view>
</template>
<script>
import { getJob, addJob, updateJob } from '@/apis/modules/job.js';
export default {
data () {
return {
jobId: null,
isTime: false,
isRepeat: false,
isModel: false,
swipeOptions: [{ text:this.$tt('common.delete'), style: { backgroundColor: '#f56c6c' } }],
timingData: {
actions: []
}
};
},
onLoad (option) {
this.jobId = Number(option.jobId);
if (this.jobId) {
this.getDetail();
} else {
this.timingData = uni.getStorageSync('timingData');
}
},
onShow () {
const callback = uni.getStorageSync('callback');
if (callback) {
this.timingData = uni.getStorageSync('timingData');
}
},
onHide () {
// 页面隐藏时关闭弹框
this.isModel = false;
// 保存当前页面数据
uni.setStorageSync('timingData', this.timingData);
},
methods: {
// 获取一键任务详情
getDetail () {
getJob(this.jobId).then(res => {
if (res.code === 200) {
// 计算时间和重复周期
const { cronExpression } = res.data;
const time = cronExpression.substring(5, 7) + ':' + cronExpression.substring(2, 4);
const repeatValue = cronExpression.substring(12).split(',').map(Number);
const repeat = this.getRepeatName(repeatValue)
const actions = JSON.parse(res.data.actions);
let timingData = uni.getStorageSync('timingData');
this.timingData = {
...timingData,
...res.data,
time,
repeat,
repeatValue,
cronExpression,
actions: actions,
};
uni.setStorageSync('timingData', this.timingData);
} else {
uni.showToast({
icon: 'none',
title: res.msg
});
}
}).catch(err => {
console.log('定时详情:', err);
})
},
// 时间选择
handleDatetimeConfirm () {
this.$nextTick(() => {
this.gentCronExpression();
})
this.isTime = false;
},
// 星期选择
handleRepeatConfirm () {
const repeat = this.getRepeatName(this.timingData.repeatValue);
this.timingData.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.timingData.time) {
hour = this.timingData.time.substring(0, 2);
minute = this.timingData.time.substring(3);
}
let week = '*';
if (this.timingData.repeatValue.length > 0) {
week = this.timingData.repeatValue.sort();
}
this.timingData.cronExpression = '0 ' + minute + ' ' + hour + ' ? * ' + week;
},
// 获取设备图片
getImageUrl (item) {
if (item.type === 1) {
return '/static/home/device/attribute.png';
} else if (item.type === 2) {
return '/static/home/device/function.png';
} else {
return '';
}
},
handleAddModel () {
uni.removeStorageSync('callback');
this.isModel = true;
},
// 物模跳转
goToModelList ({ name }) {
let action = {
id: '',
name: '',
value: '',
valueName: '',
type: 1,
parentId: '',
parentName: '',
arrayIndex: '',
arrayIndexName: '',
};
const { deviceId, deviceName } = this.timingData;
const storage = uni.getStorageSync('action');
if (storage) {
uni.removeStorageSync('action');
}
action = { ...action, type: name, deviceId, deviceName };
uni.setStorageSync('action', action);
uni.$u.route('/pagesA/home/device/model');
},
// 删除触发、执行项
handleDeleteSceneItem (index) {
const { actions } = this.timingData;
const list = actions.filter((item, i) => i !== index);
this.timingData = { ...this.timingData, actions: [...list] };
},
// 编辑触发、执行项, 小程序转换问题,所以用对象传进来
handleEditTimingItem (val) {
const storage = uni.getStorageSync('action');
if (storage) {
uni.removeStorageSync('action');
}
uni.setStorageSync('action', val.item);
uni.removeStorageSync('callback');
uni.$u.route('/pagesA/home/device/model', { editIndex: val.index });
},
// 保存
handleSave () {
const { jobId, jobName, deviceId, actions, time, repeat, ...resd } = this.timingData;
if (!jobName) {
uni.showToast({
icon: 'none',
title: this.$tt('product.timedName'),
});
return
};
if (actions.length === 0) {
uni.showToast({
icon: 'none',
title: this.$tt('product.taskExecution'),
});
return
};
const strActions = JSON.stringify(actions);
const data = { ...resd, jobId, jobName, deviceId, actions: strActions };
if (jobId) {
updateJob(data).then(res => {
if (res.code === 200) {
uni.showToast({
icon: 'none',
title: this.$tt('common.updateSuccessful'),
});
uni.navigateBack({ delta: 1 });
}
});
} else {
addJob(data).then(res => {
if (res.code === 200) {
uni.showToast({
icon: 'none',
title: this.$tt('common.addSuccessful'),
});
uni.navigateBack({ delta: 1 });
}
});
}
},
getKey (index, item) {
return `${index}-${item.id}`
},
}
};
</script>
<style>
page {
height: 100%;
background: #eef3f7;
}
</style>
<style lang="scss" scoped>
.device-timing-detail-wrap {
height: 100%;
width: 100%;
position: relative;
.name-wrap {
margin: 30rpx;
}
.container-wrap {
padding-bottom: 140rpx;
.cell-group-wrap {
margin: 30rpx;
.cell-wrap {
background: #fff;
border-radius: 12rpx;
}
}
.condition-wrap {
.form-wrap {
background: #fff;
margin: 30rpx;
border-radius: 12rpx;
.form-item-wrap {
padding: 4rpx 30rpx;
}
}
}
.execute-wrap {
margin: 30rpx;
background: #fff;
border-radius: 12rpx;
padding-bottom: 12rpx;
.title-wrap {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 30rpx;
.left-wrap {
flex: 1;
display: flex;
flex-direction: column;
.title {
font-size: 18px;
}
}
.right-wrap {}
}
.empty-cell {
padding: 30rpx;
.text {
height: 92rpx;
border: 2rpx dashed #8686862e;
border-radius: 12rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 28rpx;
}
}
.swipe-action-wrap {
.action-item-wrap {
&:not(:last-child) {
border-bottom: 2rpx solid #eaeefb;
}
.slot-title {
display: flex;
flex-direction: row;
align-items: center;
.cell-text {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 24rpx;
.title {
font-size: 32rpx;
}
.des {
font-size: 28rpx;
color: #868686;
}
}
}
}
}
.btn-wrap {
padding: 0 28rpx;
margin-top: 30rpx;
}
}
.btn-save-wrap {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
padding: 30rpx 26rpx 40rpx;
background: #eef3f7f7;
}
}
.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: 12rpx;
.radio-wrap {
padding: 40rpx;
&:not(:last-child) {
border-bottom: 1rpx solid #F1F2F5;
}
}
}
}
.model-popup-wrap {
padding: 30rpx;
.title {
font-size: 32rpx;
text-align: center;
margin-bottom: 34rpx;
}
.cell-group-wrap {
width: 100%;
background: #fff;
border-radius: 12rpx;
.cell-wrap {
padding: 6rpx 0;
border-bottom: 1rpx solid #F1F2F5;
}
}
}
}
}
</style>