该博客详细展示了如何在Vue中使用el-date-picker组件进行时间值的比较和验证。通过监听change事件，当用户选择开始时间和结束时间时，实时检查是否符合时间顺序，若开始时间大于结束时间则显示警告。此外，还展示了在循环组件中如何处理多个时间比较的情况，以及如何处理用户增加和删除时间条目的操作。整个过程涉及到了表单验证、时间格式转换和消息提示的实现。
el-date-picker比较两个时间值的大小，el-date-picker循环组件比较时间值的大小
change事件用于时间比较值
dom部分
<el-row>
<el-col :span="12">
<el-form-item label="*开始时间:">
<el-date-picker
v-model="lists[index].开始时间"
name="开始时间"
placeholder="请选择时间"
type="datetime"
value-format="yyyy-MM-dd HH:mm"
format="yyyy-MM-dd HH:mm"
style="width: 190px"
@change="startTime($event, index)"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="*结束时间:">
<el-date-picker
v-model="lists[index].结束时间"
name="结束时间"
placeholder="请选择时间"
type="datetime"
value-format="yyyy-MM-dd HH:mm"
format="yyyy-MM-dd HH:mm"
style="width: 185px"
@change="endTime($event, index)"
></el-date-picker>
</el-form-item>
</el-col>
</el-row>
data数据
data ( ） {
return{
lists: [{}, {}],
}
}
处理方法
//开始时间结束时间判断处理
startTime(val, index) {
if (val != null) {
this.lists[index].开始时间 = val
console.log('开始时间', val, index)
if (
new Date(val).getTime() >=
new Date(this.lists[index].结束时间).getTime()
) {
this.lists[index].开始时间 = ''
this.$message({
message: '警告，开始时间不能大于结束时间',
type: 'warning',
})
}
}
},
endTime(val, index) {
if (val != null) {
this.lists[index].结束 = val
if (
new Date(val).getTime() <=
new Date(this.lists[index].开始时间).getTime()
) {
this.lists[index].结束时间 = ''
this.$message({
message: '警告，结束时间不能小于开始时间',
type: 'warning',
})
}
}
},
固定值的比较，非循环
后期补充,循环时间组件，但是没有绑定index循环的索引值，绑固定值时候的处理办法
<template>
<el-dialog
:title="title"
:visible.sync="dialogFormVisible"
width="800px"
:modal-append-to-body="false"
@close="close"
>
<div id="FinalizationtBox">
<!-- 图片预览弹窗 -->
<el-dialog
id="newDialog"
class="DialogImage"
:visible.sync="dialogVisible"
:append-to-body="true"
>
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
<el-form ref="params" :model="params">
<div id="domData">
<!-- 编辑通读 -->
<el-row>
<el-col :span="12">
<el-form-item label="*通读类型">
<el-select
v-model="params.types"
placeholder="请选择"
name="通读类型"
style="width: 280px"
>
<el-option
v-for="item in optionsList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="*总页数">
<el-input
v-model="params.yeshu"
name="总页数"
type="number"
placeholder="最多输入100个字符"
style="width: 292px"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item label="*外审:"></el-form-item>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="*发外审时间:">
<el-date-picker
v-model="params.waishenshijain"
type="date"
name="发外审时间"
placeholder="选择日期"
style="width: 260px"
@change="waishenTime"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="*接收外审回复时间:">
<el-date-picker
v-model="params.jieshou"
type="date"
name="接收外审回复时间"
placeholder="选择日期"
@change="jieshouTime"
></el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="*核实外审反馈时间:">
<el-date-picker
v-model="params.fankui"
type="date"
name="核实外审反馈时间"
placeholder="选择日期"
style="width: 218px"
@change="feedbackTime"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12"></el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="通审:"></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="*发作者通审时间:">
<el-date-picker
v-model="params.zuozheTime"
type="date"
name="发作者通审时间"
placeholder="选择日期"
style="width: 232px"
@change="zuozheTime"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="*接收作者通审时间:">
<el-date-picker
v-model="params.zuozheTongshen"
type="date"
name="接收作者通审时间"
placeholder="选择日期"
style="width: 220px"
@change="zuozheTongshen"
></el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="*核实作者通审时间:">
<el-date-picker
v-model="params.heshiTime"
type="date"
name="核实作者通审时间"
placeholder="选择日期"
style="width: 218px"
@change="heShiTime"
></el-date-picker>
</el-form-item>
</el-col>
</el-row>
</div>
<el-row>
<el-col :span="24">
<el-form-item label="通读PS时间:"></el-form-item>
</el-col>
</el-row>
<div id="domData2" style="width: 100%" class="listArr">
<div v-for="(list, index) in lists" :key="index">
<el-card class="box-card">
<div>
<el-row>
<el-col :span="10">
<el-form-item label="*开始时间:">
<el-date-picker
v-model="list.开始时间"
name="开始时间"
placeholder="选择日期"
type="datetime"
value-format="yyyy-MM-dd HH:mm"
format="yyyy-MM-dd HH:mm"
style="width: 190px"
@change="startTime($event, index)"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="*结束时间:">
<el-date-picker
v-model="list.结束时间"
name="结束时间"
placeholder="选择日期"
type="datetime"
value-format="yyyy-MM-dd HH:mm"
format="yyyy-MM-dd HH:mm"
style="width: 190px"
@change="endTime($event, index)"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="4">
<div class="buttonAdd">
<div
v-show="index == 0 ? false : true"
style="
width: 20px;
font-size: 19px;
margin-top: -10px;
margin-left: 55px;
font-weight: blod;
color: #dddddd;
cursor: pointer;
float: left;
"
@click="deleteListItem(index)"
>
<vab-icon :icon="['fas', 'window-minimize']"></vab-icon>
</div>
<div
style="
width: 20px;
font-size: 20px;
margin-left: 10px;
margin-top: -5px;
font-weight: 500;
color: #dddddd;
cursor: pointer;
float: right;
"
@click="addListItem"
>
<vab-icon :icon="['fas', 'plus']"></vab-icon>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="*进度:">
<div style="display: flex">
<el-input
v-model="list.进度"
name="进度"
type="number"
:min="0"
:max="100"
placeholder="请输入进度"
style="width: 350px"
oninput="if(value>100)value=100"
></el-input>
<div style="margin-left: 9px; margin-right: 10px">
%
</div>
</div>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="页 数:" label-width="80px">
<div style="display: flex">
<el-input
v-model="list.页数"
name="页数"
placeholder="请输入页数"
style="width: 188px"
></el-input>
</div>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-progress
v-if="!isNaN(parseInt(list.进度))"
class="progress"
:percentage="Number(list.进度)"
></el-progress>
</el-col>
</el-row>
</div>
</el-card>
</div>
</div>
<el-row>
<el-col :span="24">
<el-form-item label="* 核实扉页:"></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="" label-width="10px">
<el-upload
action=""
:http-request="Upload"
list-type="picture-card"
:file-list="fileLister"
:limit="6"
accept=".jpg,.jpeg,.png"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-exceed="exceeding"
:on-success="handleAvatarSuccess"
>
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<div id="domData3">
<el-row>
<!-- -->
<el-col :span="24">
<div
v-for="(item, index) in imgList"
v-show="displayView"
:key="index"
class="inputList"
>
<el-input
v-model="imgList[index]"
:name="'核实扉页' + index"
></el-input>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="通读备注:">
<el-input
v-model="params.shuming"
type="textarea"
:autosize="{ minRows: 5, maxRows: 6 }"
name="通读备注"
placeholder="最多200个字符"
style="width: 80%"
></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<div class="footCenter">
<el-button type="primary" @click="save">确 定</el-button>
<el-button @click="close">取 消</el-button>
</div>
</div>
</el-dialog>
</template>
<script>
import { doEdit } from '@/api/table'
import { client } from '@/utils/alioss'
import { saveBianJiTDMX, getBianJiTDMX } from '@/api/manage'
export default {
name: 'Finalization',
data() {
return {
lists: [{ 开始时间: '', 结束时间: '', 进度: '', 页数: '' }],
dialogImageUrl: '',
dialogVisible: false,
title: '',
dialogFormVisible: false,
optionsList: [
{ label: '全部通读', value: '全部通读' },
{ label: '改版部分通读', value: '改版部分通读' },
{ label: '未改版部分审查', value: '未改版部分审查' },
{ label: '校对通读', value: '校对通读' },
{ label: '编辑审查', value: '编辑审查' },
],
params: {},
imgList: [],
fileLister: [],
displayView: false,
stepId: '',
switchVariable: true,
}
},
created() {},
methods: {
addListItem() {
this.lists.push({})
},
deleteListItem() {
this.lists.pop()
},
//开始时间结束时间判断处理
startTime(val, index) {
if (val != null) {
this.lists[index].开始时间 = val
if (
new Date(val).getTime() >=
new Date(this.lists[index].结束时间).getTime()
) {
this.lists[index].开始时间 = ''
this.$message({
message: '警告，开始时间不能大于结束时间',
type: 'warning',
})
}
}
},
endTime(val, index) {
if (val != null) {
this.lists[index].结束时间 = val
if (
new Date(val).getTime() <=
new Date(this.lists[index].开始时间).getTime()
) {
this.lists[index].结束时间 = ''
this.$message({
message: '警告，结束时间不能小于开始时间',
type: 'warning',
})
}
}
},
//移除图片
handleRemove(file, fileList) {
console.log(file, fileList)
this.imgList.pop()
},
showEdit(row) {
if (!row) {
this.dialogFormVisible = true
this.title = '编辑通读'
this.switchVariable = false
// this.resetFields('FinalizationtBox')
} else {
this.switchVariable = true
this.stepId = row.stepId
this.dialogFormVisible = true
this.imgList = []
this.title = '编辑通读'
getBianJiTDMX({ stepId: this.stepId }).then((val) => {
if (val.code == 200) {
if (val.data.列表数据.length > 0) {
this.setElementDatas('domData', val.data.明细数据)
this.setElementDatas('domData3', val.data.明细数据)
this.lists = this.$set(this.lists, 0, val.data.列表数据)
this.fileLister = []
for (const key in val.data.明细数据) {
if (
val.data.明细数据[key].detailName.startsWith('核实扉页')
) {
this.fileLister.push({
url: val.data.明细数据[key].detailValue,
})
}
}
} else {
this.resetFields('domData')
this.resetFields('domData3')
this.lists = [{}]
}
}
})
}
},
//新增明细
saveBianJiTDMX(obj) {
saveBianJiTDMX(obj).then((res) => {
if (res.code == 200) {
this.$baseMessage('新增成功', 'success')
this.$parent.handleQuery()
this.dialogFormVisible = false
}
})
},
//比较时间
waishenTime(val) {
console.log(val)
if (val != null) {
this.params.waishenshijain = val
if (
new Date(val).getTime() >= new Date(this.params.jieshou).getTime()
) {
this.params.waishenshijain = ''
this.$message({
message: '警告，发外审时间不能大于接收外审回复时间',
type: 'warning',
})
} else if (
new Date(val).getTime() >= new Date(this.params.fankui).getTime()
) {
this.params.waishenshijain = ''
this.$message({
message: '警告，发外审时间不能大于核实外审反馈时间',
type: 'warning',
})
}
}
},
//接收时间
jieshouTime(val) {
if (val != null) {
this.params.jieshou = val
if (
new Date(val).getTime() >= new Date(this.params.fankui).getTime()
) {
this.params.jieshou = ''
this.$message({
message: '警告，接收外审回复时间不能大于核实外审反馈时间',
type: 'warning',
})
} else if (
new Date(val).getTime() >= new Date(this.params.fankui).getTime()
) {
this.params.jieshou = ''
this.$message({
message: '警告，发外审时间不能大于核实外审反馈时间',
type: 'warning',
})
}
}
},
//反馈时间
feedbackTime(val) {
if (val != null) {
this.params.fankui = val
if (
new Date(
this.params.waishenshijain >= new Date(val).getTime()
).getTime()
) {
this.params.fankui = ''
this.$message({
message: '警告，核实外审反馈时间不能小于发外审时间',
type: 'warning',
})
} else if (
new Date(this.params.jieshou >= new Date(val).getTime()).getTime()
) {
this.params.fankui = ''
this.$message({
message: '警告，核实外审反馈时间不能小于接收外审回复时间',
type: 'warning',
})
}
}
},
//作者通审时间
zuozheTime(val) {
if (val != null) {
this.params.zuozheTime = val
if (
new Date(val).getTime() >=
new Date(this.params.zuozheTongshen).getTime()
) {
this.params.zuozheTime = ''
this.$message({
message: '警告，发作者通审时间不能大于接收作者通审时间',
type: 'warning',
})
} else if (
new Date(val).getTime() >= new Date(this.params.heshiTime).getTime()
) {
this.params.zuozheTime = ''
this.$message({
message: '警告，发作者通审时间不能大于核实作者通审时间',
type: 'warning',
})
}
}
},
//作者通审时间
zuozheTongshen(val) {
if (val != null) {
this.params.zuozheTongshen = val
if (
new Date(val).getTime() >= new Date(this.params.heshiTime).getTime()
) {
this.params.zuozheTongshen = ''
this.$message({
message: '警告，接收作者通审时间不能大于核实作者通审时间',
type: 'warning',
})
}
}
},
//核实时间
heShiTime(val) {
if (val != null) {
this.params.heshiTime = val
if (
new Date(
this.params.zuozheTime >= new Date(val).getTime()
).getTime()
) {
this.params.heshiTime = ''
this.$message({
message: '警告，核实作者通审时间不能小于发作者通审时间',
type: 'warning',
})
} else if (
new Date(
this.params.zuozheTongshen >= new Date(val).getTime()
).getTime()
) {
this.params.heshiTime = ''
this.$message({
message: '警告，核实作者通审时间不能小于接收作者通审时间',
type: 'warning',
})
}
}
},
close() {
this.dialogFormVisible = false
this.fileLister = []
this.resetFields('domData')
// this.resetFields('domData2')
this.resetFields('domData3')
this.list.进度 = 0
},
//文件超出6个警告
exceeding(files, fileList) {
console.log('超出了', fileList)
this.$message({
message: '警告,最多只能上传6个',
type: 'warning',
})
},
//上传成功
handleAvatarSuccess(response, file, fileList) {
console.log(response, 22, file, 33, fileList)
},
//预览图片
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
//上传文件到阿里云
Upload(file) {
var fileName = file.file.uid + file.file.name
var size = file.file.size
client()
.put('/resource/video/' + fileName, file.file)
.then((result) => {
this.imgList.push(result.url)
this.params.uploadMeetingFileUrl = result.url
})
},
save() {
var rules = {
required: [
'通读类型',
'总页数',
'发外审时间',
'接收外审回复时间',
'核实外审反馈时间',
'发作者通审时间',
'接收作者通审时间',
'核实作者通审时间',
'开始时间',
'结束时间',
'进度',
'核实扉页',
],
gtZero: ['dd'],
}
//调用全局表单校验 this.validateElementDatas('domData', rules)
var values = this.getElementDatas('domData')
var values3 = this.getElementDatas('domData3')
values = values.concat(values3)
var obj = {
mapDatas: {
明细数据: values,
列表数据: this.lists,
},
stepId: this.stepId,
}
if (this.switchVariable) {
console.log('扉页长度', this.fileLister)
if (
this.validateElementDatas('domData', rules) &&
this.validateElementDatas('domData2', rules)
) {
if (this.imgList.length > 0 || this.fileLister.length > 0) {
this.saveBianJiTDMX(obj)
} else {
this.$message({
message: '核实扉页不能为空',
type: 'warning',
})
}
}
} else {
console.log(2222)
if (
this.validateElementDatas('domData', rules) &&
this.validateElementDatas('domData2', rules)
) {
console.log('图片明细', this.imgList)
if (this.imgList.length > 0) {
this.saveBianJiTDMX(obj)
} else {
this.$message({
message: '核实扉页不能为空',
type: 'warning',
})
}
}
}
},
},
}
</script>
<style scoped>
#FinalizationtBox {
height: 460px !important;
overflow-y: auto;
box-sizing: border-box;
}
.footCenter {
width: 100%;
text-align: center;
}
html body div::-webkit-scrollbar-thumb {
background-color: #b292f5 !important;
background-clip: padding-box;
border: 4px solid transparent;
border-radius: 7px;
}
/* html body .el-dialog__header {
padding: 0;
background-color: #ffffff !important;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
} */
#newDialog {
/* margin-top: 10px; */
padding: 20px;
/* background-color: #ffffff !important; */
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.DialogImage /deep/ .el-dialog__header {
padding: 0px;
/* background-color: #ffacff !important; */
}
.DialogImage /deep/ .el-dialog__body,
.DialogImage /deep/ .el-message-box__body {
border-top: 0px solid #dcdfe6;
padding: 0;
}
.DialogImage /deep/.el-icon-close:before {
background: #ffffff;
}
.buttonAdd {
width: 100%;
}
#domData2 /deep/ .el-card.is-always-shadow {
box-shadow: 0px 0px 1 rgb(0 0 0 / 0.01%);
}
#domData2 /deep/ .el-card {
border-radius: 10px;
border: 0px solid #ebeef5;
}
.progress /deep/ .el-progress-bar__outer {
height: 12px !important;
background-color: #fff1f5;
}
</style>
扫一扫
1104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
