| | |
| | | <template> |
| | | <el-form-item label="时间"> |
| | | <el-form-item label="时间" prop="timeArray"> |
| | | <el-date-picker |
| | | v-model="date" |
| | | @change="handleChange" |
| | | :model-value="modelValue" |
| | | @update:model-value="handleChange" |
| | | :type="type" |
| | | start-placeholder="选择开始时间" |
| | | end-placeholder="选择结束时间" |
| | | size="small" |
| | | class="w-150" |
| | | :disabled-date="diableData" |
| | | /> |
| | | </el-form-item> |
| | | </template> |
| | | |
| | | <script> |
| | | import moment from 'moment'; |
| | | import { ElMessage } from 'element-plus'; |
| | | |
| | | export default { |
| | | props: { |
| | | modelValue: Array, |
| | | // 日期值 |
| | | modelValue: { |
| | | type: Array |
| | | }, |
| | | // 控件类型 |
| | | type: { |
| | | type: String, |
| | | default: 'datetimerange' |
| | | } |
| | | }, |
| | | // 允许开始时间 |
| | | startDate: Date, |
| | | // 允许结束时间 |
| | | endDate: Date |
| | | }, |
| | | emits: ['update:modelValue'], |
| | | data() { |
| | | return { |
| | | date: this.modelValue |
| | | }; |
| | | return {}; |
| | | }, |
| | | methods: { |
| | | handleChange(value) { |
| | | this.$emit('update:modelValue', value); |
| | | // 时间不能超过设定的开始结束时间 |
| | | let outRange = false; |
| | | if (this.startDate) { |
| | | outRange = |
| | | outRange || |
| | | moment(value[0]).isBefore(this.startDate) || |
| | | moment(value[1]).isBefore(this.startDate); |
| | | } |
| | | if (this.endDate) { |
| | | outRange = |
| | | outRange || |
| | | moment(value[0]).isAfter(this.endDate) || |
| | | moment(value[1]).isAfter(this.endDate); |
| | | } |
| | | if (outRange) { |
| | | ElMessage({ |
| | | message: '所选时间不能超过走航任务时间范围', |
| | | type: 'warning' |
| | | }); |
| | | } else { |
| | | this.$emit('update:modelValue', value); |
| | | } |
| | | }, |
| | | diableData(date) { |
| | | const time = moment(date); |
| | | let result1 = false; |
| | | let result2 = false; |
| | | if (this.startDate) { |
| | | result1 = time.isBefore(this.startDate); |
| | | } |
| | | if (this.endDate) { |
| | | result2 = time.isAfter(this.endDate); |
| | | } |
| | | return result1 || result2; |
| | | } |
| | | }, |
| | | mounted() { |
| | |
| | | } |
| | | }; |
| | | </script> |
| | | <style scoped></style> |