1. In the form, when selecting different data types, you need to select the time below corresponding to the data type, and format the time by monitoring changes in the data type.
2. However, when the data types are selected out of sequence, an error may be reported when selecting the time again, so the form needs to be cleared after the DOM is updated.
3. Verification rules, the end time needs to be greater than the start time, but the current time cannot be selected, so the timestamp needs to be converted.
<el-form
ref="formRef1"
:model="form1"
:rules="rules1"
label-width="110px"
:inline="true"
class="demo-form-inline"
>
<el-form-item label="数据类型" prop="type">
<el-select v-model="form1.type" placeholder="请选择">
<el-option
v-for="item in dataList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="开始时间" prop="startTime">
<el-date-picker
ref="startTimePickerRef"
v-model="form1.startTime"
:type="dateType"
:format="timeFormat"
:value-format="timeFormat"
placeholder="开始时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-date-picker
ref="endTimePickerRef"
v-model="form1.endTime"
:type="dateType"
:format="timeFormat"
:value-format="timeFormat"
placeholder="结束时间"
>
</el-date-picker>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="resetForm('formRef1')">取 消</el-button>
<el-button type="primary" @click="submitData('formRef1', 1)">生成数据</el-button>
</span>
</el-dialog><script>
import moment from "moment";
export default {
data() {
var checkTime = (rule, value, callback) => {
// console.log(value, "---value---"); // value 是endTime
// 获取开始时间和结束时间的时间戳
const startTime = moment(this.form1.startTime).format("yyyy-MM-DD HH:mm:ss");
const endTime = moment(value).format("yyyy-MM-DD HH:mm:ss");
const startTimeStamp = new Date(startTime).getTime();
const endTimeStamp = new Date(endTime).getTime();
if (this.form1.type === "2") {
// 小时数据,不能大于等于当前小时
const currentDate = new Date(); // 获取当前日期和时间
currentDate.setMinutes(0, 0, 0); // 将分钟、秒、毫秒都设置为0，表示0分0秒
const currentHourTimeStamp = currentDate.getTime(); // 获取当前小时时间戳
if (endTimeStamp < startTimeStamp) {
callback(new Error("结束时间应该大于或等于开始时间"));
} else if (endTimeStamp >= currentHourTimeStamp) {
callback(new Error("结束时间应该早于当前时间"));
} else {
callback();
}
} else if (this.form1.type === "3" || this.form1.type === "4") {
// 日数据或周数据,不能大于等于当日
const currentDateTimeStamp = new Date().setHours(0, 0, 0, 0); //将小时、分钟、秒和毫秒设置为0
if (endTimeStamp < startTimeStamp) {
callback(new Error("结束时间应该大于或等于开始时间"));
} else if (endTimeStamp >= currentDateTimeStamp) {
callback(new Error("结束时间应该早于当前时间"));
} else {
callback();
}
} else if (this.form1.type === "5") {
// 月数据,不能大于等于当月
const currentDate = new Date();
currentDate.setDate(1); // 将日期设置为1，表示当前月的第一天
currentDate.setHours(0, 0, 0, 0); // 将小时、分钟、秒、毫秒都设置为0，表示0点0分0秒
const firstDayOfMonthTimestamp = currentDate.getTime(); // 获取时间戳
if (endTimeStamp < startTimeStamp) {
callback(new Error("结束时间应该大于或等于开始时间"));
} else if (endTimeStamp >= firstDayOfMonthTimestamp) {
callback(new Error("结束时间应该早于当前月"));
} else {
callback();
}
} else {
// 分钟数据,不能大于等于当前分钟
const currentDate = new Date(); // 获取当前日期和时间
currentDate.setMinutes(0, 0); // 将秒、毫秒都设置为0，表示0分0秒
const currentMinTimeStamp = currentDate.getTime(); // 获取时间戳
if (endTimeStamp < startTimeStamp) {
callback(new Error("结束时间应该大于或等于开始时间"));
} else if (endTimeStamp >= currentMinTimeStamp) {
callback(new Error("结束时间应该早于当前时间"));
} else {
callback();
}
}
};
return {
form1: {
stationCodes: [], // 数据生成配置里可多选
type: "", // 数据类型
startTime: "",
endTime: "",
precisionNum: null, // 精确位数
remark: "", // 备注
},
// 数据类型
dataList: [
// {
// label: "分钟数据",
// value: "1",
// },
{
label: "小时数据",
value: "2",
},
{
label: "日数据",
value: "3",
},
{
label: "周数据",
value: "4",
},
{
label: "月数据",
value: "5",
},
],
dateType: "date", // 时间类型
timeFormat: "", // 默认时间格式
rules1: {
type: [{ required: true, message: "请选择数据类型", trigger: "change" }],
startTime: [
{
required: true,
message: "请选择开始时间",
trigger: "blur",
},
],
endTime: [
{
required: true,
message: "请选择结束时间",
trigger: "blur",
},
{
validator: checkTime,
trigger: "blur",
},
],
};
},
watch: {
"form1.type": function (newType) {
if (newType === "1") {
// 设置时间格式为分钟
this.dateType = "datetime";
this.timeFormat = "yyyy-MM-dd HH:mm";
} else if (newType === "2") {
// 设置时间格式为小时
this.dateType = "datetime";
this.timeFormat = "yyyy-MM-dd HH";
} else if (newType === "3") {
// 设置时间格式为日期
this.dateType = "date";
this.timeFormat = "yyyy-MM-dd";
} else if (newType === "4") {
// 设置时间格式为周,这里周德格式后台要求还显示日的
this.dateType = "date";
this.timeFormat = "yyyy-MM-dd";
} else if (newType === "5") {
// 设置时间格式为月份
this.dateType = "month";
this.timeFormat = "yyyy-MM";
}
// 更新值和格式,如果不按顺序选择类型的话可能会报错,所以dom更新后清空
this.$nextTick(() => {
this.form1.startTime = "";
this.form1.endTime = "";
if (this.$refs.startTimePickerRef) {
this.$refs.startTimePickerRef.$el.querySelector("input").value = "";
}
if (this.$refs.endTimePickerRef) {
this.$refs.endTimePickerRef.$el.querySelector("input").value = "";
}
});
},
},