<template>
|
<el-dialog
|
:title="!dataForm.id ? '新增' : '修改'"
|
:close-on-click-modal="false"
|
append-to-body
|
:visible.sync="visible">
|
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
|
<el-form-item label="定时名称" prop="name">
|
<el-input v-model="dataForm.name" placeholder="定时名称"></el-input>
|
</el-form-item>
|
<!-- 定时控制 -->
|
<el-form-item label="星期" prop="week">
|
<el-radio-group v-model="week.type">
|
<el-radio :label="0">每一天</el-radio>
|
<el-radio :label="1">某几天</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="" prop="week" v-if="week.type == 1">
|
<el-checkbox-group v-model="week.day">
|
<el-checkbox
|
v-for="item in weekList"
|
:key="item.value"
|
:label="item.value">
|
{{item.label}}
|
</el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
<el-form-item label="时间" prop="time">
|
<el-time-picker
|
v-model="time"
|
format='HH:mm'
|
value-format="HH:mm">
|
</el-time-picker>
|
</el-form-item>
|
<el-form-item label="控灯动作" prop="value">
|
<el-radio-group v-model="dataForm.value">
|
<el-radio v-for="item in operateList" :label="item.value" :key="item.value">{{ item.label }}</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<!-- 取消按钮 -->
|
<button class="btn-cancel" @click="visible = false"></button>
|
<!-- 确定按钮 -->
|
<button class="btn-config" type="primary" @click="dataFormSubmit()"></button>
|
</span>
|
</el-dialog>
|
</template>
|
|
<script>
|
export default {
|
data () {
|
return {
|
visible: false,
|
dataForm: {
|
timeDefaultId: 0,
|
timeId: 0,
|
parentId: '',
|
name: '',
|
type: '',
|
beanName: '',
|
value: '0',
|
cron: '',
|
createUserId: '',
|
createTime: ''
|
},
|
week: {
|
type: 0,
|
day: []
|
},
|
time: '',
|
operateList: [
|
{
|
value: '1',
|
label: '正常开灯'
|
},
|
{
|
value: '0',
|
label: '关灯'
|
},
|
{
|
value: '2',
|
label: '20%亮度'
|
},
|
{
|
value: '5',
|
label: '50%亮度'
|
},
|
{
|
value: '8',
|
label: '80%亮度'
|
},
|
{
|
value: '10',
|
label: '100%亮度'
|
}
|
],
|
weekList: [
|
{
|
value: 1,
|
label: '星期日'
|
},
|
{
|
value: 2,
|
label: '星期一'
|
},
|
{
|
value: 3,
|
label: '星期二'
|
},
|
{
|
value: 4,
|
label: '星期三'
|
},
|
{
|
value: 5,
|
label: '星期四'
|
},
|
{
|
value: 6,
|
label: '星期五'
|
},
|
{
|
value: 7,
|
label: '星期六'
|
}
|
],
|
dataRule: {
|
name: [
|
{ required: true, message: '定时名称不能为空', trigger: 'blur' }
|
],
|
beanName: [
|
{ required: true, message: '执行动作不能为空', trigger: 'blur' }
|
]
|
}
|
}
|
},
|
computed: {
|
timeTemName () {
|
return this.changeName()
|
}
|
},
|
watch: {
|
timeTemName (curVal, oldVal) {
|
this.dataForm.name = curVal
|
}
|
},
|
methods: {
|
init (data, parentId) {
|
this.visible = true
|
this.$nextTick(() => {
|
this.$refs['dataForm'].resetFields()
|
if (data !== undefined && data !== null) {
|
// this.dataForm = data
|
this.dataForm.timeId = data.timeId
|
this.dataForm.parentId = data.parentId
|
this.dataForm.name = data.name
|
this.dataForm.type = data.type
|
this.dataForm.beanName = data.beanName
|
this.dataForm.value = data.value
|
this.dataForm.cron = data.cron
|
this.dataForm.createUserId = data.createUserId
|
this.dataForm.createTime = data.createTime
|
this.dataForm.timeDefaultId = data.timeDefaultId
|
this.cronToData(this.dataForm.cron)
|
} else {
|
this.dataForm.parentId = parentId
|
this.dataForm.name = ''
|
this.dataForm.type = 1
|
this.dataForm.beanName = 'lightbatchTesk'
|
this.dataForm.value = '0'
|
this.dataForm.cron = ''
|
this.dataForm.createUserId = ''
|
this.dataForm.createTime = ''
|
this.dataForm.timeDefaultId = 0
|
this.week.type = 0
|
this.week.day = []
|
this.time = ''
|
}
|
this.changeName()
|
})
|
},
|
// 表单提交
|
dataFormSubmit () {
|
this.$refs['dataForm'].validate((valid) => {
|
if (parseInt(this.week.type) !== 0) {
|
// 星期不是每一天
|
if (this.week.day.length === 0) {
|
this.$message.error('星期请选择星期')
|
return
|
} else if (this.week.day.length === 7) {
|
this.$message.error('星期请选择每一天')
|
return
|
}
|
}
|
if (this.time === undefined || this.time === null || this.time === '') {
|
this.$message.error('时间不能为空')
|
return
|
}
|
if (this.dataForm.value === undefined || this.dataForm.value === '') {
|
this.$message.error('控灯操作不能为空')
|
return
|
}
|
this.dataForm.cron = this.dataToCron(this.time, this.week)
|
this.$message({
|
message: '操作成功',
|
type: 'success',
|
duration: 1500,
|
onClose: () => {
|
this.visible = false
|
this.$emit('refreshData', this.dataForm)
|
}
|
})
|
})
|
},
|
// 日期转cron表达式
|
dataToCron (timeCode, weekType) {
|
// 添加秒
|
var cron = '0 '
|
var time = timeCode.split(':')
|
// 添加分钟，小时
|
if (time && time.length === 2) {
|
cron += time[1].replace(/\b0/gi, '') + ' '
|
cron += time[0].replace(/\b0/gi, '') + ' '
|
}
|
// 添加天
|
if (weekType.type === 0) {
|
// 每一天
|
cron += '* '
|
} else if (weekType.type === 1) {
|
// 某几天
|
cron += '? '
|
}
|
// 添加月
|
cron += '* '
|
// 添加星期
|
if (weekType.type === 0) {
|
// 每一天
|
cron += '?'
|
} else if (weekType.type === 1) {
|
// 某几天
|
weekType.day.forEach(element => {
|
cron += element + ','
|
})
|
}
|
cron = (cron.substring(cron.length - 1) === ',') ? cron.substring(0, cron.length - 1) : cron
|
return cron
|
},
|
// cron表达式转日期格式
|
cronToData (cron) {
|
if (cron === undefined || cron === '') {
|
this.week.type = 0
|
this.week.day = []
|
return
|
}
|
var time = cron.split(' ')
|
this.time = time[2] + ':' + time[1]
|
if (time[3] === '*') {
|
// 每一天
|
this.week.type = 0
|
this.week.day = []
|
} else {
|
this.week.type = 1
|
// this.week.day = time[5].split(',')
|
var list = []
|
time[5].split(',').forEach(element => {
|
list.push(parseInt(element))
|
})
|
this.week.day = list
|
}
|
},
|
// 自动生成名称
|
changeName () {
|
var name = ''
|
if (this.week.type === 0) {
|
name += '每天 '
|
} else if (this.week.type === 1) {
|
this.week.day.forEach(day => {
|
this.weekList.forEach(week => {
|
if (day === week.value) {
|
name += week.label + ','
|
}
|
})
|
})
|
}
|
name = (name.substring(name.length - 1) === ',') ? name.substring(0, name.length - 1) : name
|
name += this.time + ' '
|
this.operateList.forEach(element => {
|
if (element.value === this.dataForm.value) {
|
name += element.label
|
}
|
})
|
this.dataForm.name = name
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
div {
|
/deep/ .el-input__inner {
|
background: transparent;
|
color: #fff
|
}
|
/deep/ span {
|
color: #fff
|
}
|
/deep/ .el-form-item__label {
|
color: #fff
|
}
|
}
|
</style>
|
