1. 양식에서 다양한 데이터 유형을 선택할 경우 해당 데이터 유형에 해당하는 아래 시간을 선택하고, 데이터 유형의 변화를 모니터링하여 시간 형식을 지정해야 합니다.
2. 단, 데이터 타입을 순서 없이 선택한 경우, 시간을 다시 선택하면 오류가 발생할 수 있으므로 DOM 업데이트 후 폼을 삭제해야 합니다.
3. 확인 규칙, 종료 시간은 시작 시간보다 커야 하지만 현재 시간을 선택할 수 없으므로 타임스탬프를 변환해야 합니다.
<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 = "";
}
});
},
},