在线网站制作模拟,仿《爱美眉》网站 dede,常见的互联网应用,华为企业官网首页1. 在表单中, 当选择不同的数据类型时, 需要在下面选择时间时和数据类型对应上, 通过监听数据类型的变化, 给时间做格式化, 2. 但是当不按顺序选择数据类型后, 再选时间可能会报错, 所以需要在dom更新后, 再清空表单. 3. 校验规则, 结束时间需要大于开始时间, 但是不能选当前的… 1. 在表单中, 当选择不同的数据类型时, 需要在下面选择时间时和数据类型对应上, 通过监听数据类型的变化, 给时间做格式化, 2. 但是当不按顺序选择数据类型后, 再选时间可能会报错, 所以需要在dom更新后, 再清空表单. 3. 校验规则, 结束时间需要大于开始时间, 但是不能选当前的时间, 所以需要转换时间戳. el-formrefformRef1:modelform1:rulesrules1label-width110px:inlinetrueclassdemo-form-inlineel-form-item label数据类型 proptypeel-select v-modelform1.type placeholder请选择el-optionv-foritem in dataList:keyitem.value:labelitem.label:valueitem.value/el-option/el-select/el-form-itemel-form-item label开始时间 propstartTimeel-date-pickerrefstartTimePickerRefv-modelform1.startTime:typedateType:formattimeFormat:value-formattimeFormatplaceholder开始时间/el-date-picker/el-form-itemel-form-item label结束时间 propendTimeel-date-pickerrefendTimePickerRefv-modelform1.endTime:typedateType:formattimeFormat:value-formattimeFormatplaceholder结束时间/el-date-picker/el-form-item/el-formspan slotfooter classdialog-footerel-button clickresetForm(formRef1)取 消/el-buttonel-button typeprimary clicksubmitData(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); //将小时、分钟、秒和毫秒设置为0if (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 ;}});},},
