湖南雷锋建设有限公司网站,新网站该如何做网站优化呢,屏蔽wordpress google,水区建设局网站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 ;}});},},
