大概是这样，能量隔离时间可选，然后解除时间是在隔离时间和现在时间的区间内选择，复杂点主要是这个若只组件不支持时分秒，支持日期，时分秒需要自己写函数做判断，真滴恶心，这里还有个小bug就是默认的时间，如果你只选择日期而不选择时分秒，他的时分秒就是默认的当前的时间，如果隔离时间和解除时间恰好是一天，有可能会出现隔离时间大于解除时间这里不好弄，but这个写法贼若只，应该是用时间戳写回简单很多，md，但是写都写了，能跑就行
<template>
<a-modal
title="解除隔离"
:width="width"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleOk"
@cancel="close"
>
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-item label="能量隔离解除时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-date-picker
placeholder="请选择能量隔离解除时间"
v-decorator="['unIsolationTime', validatorRules.unIsolationTime]"
:show-time="true"
format="YYYY-MM-DD HH:mm:ss"
style="width: 100%"
:disabled-date="disabledDate"
:disabled-time="disabledDateTime"
@change="timeComparison"
/>
</a-form-item>
<a-form-item label="能量隔离解除人" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-select
placeholder="请选择能量隔离解除人"
v-decorator="['unIsolationOperatorId', validatorRules.unIsolationOperatorId]"
>
<a-select-option v-for="item in userList" :key="item.id">{{ item.username }}</a-select-option>
</a-select>
</a-form-item>
</a-form>
</a-spin>
</a-modal>
</template>
<script>
import { httpAction, getAction } from '@/api/manage'
import moment from 'moment'
export default {
name: 'unDesegregationModal',
data() {
return {
form: this.$form.createForm(this),
width: 500,
confirmLoading: false,
visible: false,
userList: [],
url: {
listNoPage: '/sys/user/listNoPage',
desegregate: '/energyIsolation/energyIsolation/unIsolation'
},
labelCol: {
xs: { span: 24 },
sm: { span: 8 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 }
},
validatorRules: {
unIsolationOperatorId: { rules: [{ required: true, message: '请选择能量隔离解除人!' }] },
unIsolationTime: { rules: [{ required: true, message: '请选择能量隔离解除时间!' }] }
},
id: '',
date: '', // 隔离时间
dateRange: '',
rangeHour: ''
}
},
mounted() {
this.getUserList()
this.dateRange = moment().format('YYYY-MM-DD')
this.rangeHour = new Date().getHours()
this.defaultTimes = moment(`${moment(this.date).format('HH:mm:ss')}`, 'HH:mm:ss')
},
methods: {
getUserList() {
getAction(this.url.listNoPage, {}).then(res => {
if (res.success) {
this.userList = res.result
} else {
this.userList = []
}
})
},
openModal(id, date) {
this.form.resetFields()
this.visible = true
this.id = id
this.date = date
this.getUserList()
},
close() {
this.form.resetFields()
this.visible = false
this.id = ''
this.userList = []
this.date = ''
},
timeComparison(date, dateString) {
this.dateRange = moment(dateString).format('YYYY-MM-DD')
this.rangeHour = new Date(date).getHours()
},
// defaultTime() {
// // 默认时分
// let date = moment(`${this.date}`).format('YYYY-MM-DD')
// if (this.dateRange === moment().format('YYYY-MM-DD')) {
// return moment(`${moment().format('HH:mm:ss')}`, 'HH:mm:ss')
// }
// if (this.dateRange === date) {
// return moment(`${moment(this.date).format('HH:mm:ss')}`, 'HH:mm:ss')
// }
// return moment(`${moment(this.date).format('HH:mm:ss')}`, 'HH:mm:ss')
// },
handleOk() {
const that = this
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
that.confirmLoading = true
values.unIsolationTime = moment(values.unIsolationTime).format('YYYY-MM-DD HH:mm:ss')
let formData = {
...values,
id: that.id
}
httpAction(this.url.desegregate, formData, 'post')
.then(res => {
if (res.success) {
that.$message.success(res.message)
that.$emit('ok')
} else {
that.$message.warning(res.message)
}
})
.finally(() => {
that.confirmLoading = false
that.close()
})
}
})
},
disabledDate(current) {
let date = moment(this.date).format('YYYY-MM-DD HH:mm:ss')
const startDate = moment(date)
.startOf('day')
.format('YYYY-MM-DD HH:mm:ss')
return (current && current < moment(startDate)) || current > moment()
},
range(start, end) {
const result = []
for (let i = start; i < end; i++) {
result.push(i)
}
return result
},
disabledDateTime() {
let nowDate = new Date()
let hour = nowDate.getHours()
let minute = nowDate.getMinutes()
let oldDate = new Date(this.date)
let oldHour = oldDate.getHours()
let oldMinute = oldDate.getMinutes()
if (moment(this.date).format('YYYY-MM-DD') === moment().format('YYYY-MM-DD')) {
return {
disabledHours: () => {
if (hour === oldHour) {
return this.range(0, 24).filter(h => h !== hour)
}
return this.range(0, 24).splice(hour + 1)
},
disabledMinutes: () => {
return this.range(0, 60).splice(minute + 1)
}
}
} else if (this.dateRange === moment().format('YYYY-MM-DD')) {
return {
disabledHours: () => this.range(0, 24).splice(hour + 1),
disabledMinutes: () => {
return this.range(0, 60).splice(minute + 1)
}
}
} else if (this.dateRange === moment(this.date).format('YYYY-MM-DD')) {
return {
disabledHours: () => this.range(0, 24).splice(0, oldHour),
disabledMinutes: () => {
if (oldHour === this.rangeHour) {
return this.range(0, 60).splice(0, oldMinute)
} else {
return []
}
}
}
} else {
return {
disabledHours: () => this.range(0, 24).splice(0, 0),
disabledMinutes: () => this.range(0, 60).splice(0, 0)
}
}
}
}
}
</script>
<style></style>
