ant-design-vue对起始时间的校验
由于要添加对起始时间的校验，项目中无法直接使用this.model.value获取当前的字段，因此需要j-date上添加一组v-model，保证可以获取到当前字段的值，再对其进行校验。（当前也获取不到this.form的值）
添加起始时间的自定义校验
这些方法中的model值是从上面v-model中获取到的
至此校验就写好了
不过当前存在一个问题，控制台一直有报错，但是未找到合理 的解决方法
如有解决报错方法，还请指教。
附上源码：
<template>
<a-modal :title="title" :width="800" :visible="visible"
:maskClosable="false" :confirmLoading="confirmLoading"
:okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
@ok="handleOk" @cancel="handleCancel" cancelText="关闭">
<div :style="{width: '100%',border: '1px solid #e9e9e9',padding: '10px 16px',background: '#fff',}">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-row :gutter="24">
<a-col :md="12" :sm="20">
<a-form-item label="活动名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-decorator="['name',validatorRules.name]" :disabled="disableSubmit"
placeholder="请输入活动名称"></a-input>
</a-form-item>
</a-col>
<a-col :md="12" :sm="20">
<a-form-item label="活动类别" :labelCol="labelCol" :wrapperCol="wrapperCol" :required='true'>
<a-tree-select placeholder="请选择活动类别" :treeData="activityType" :disabled="disableSubmit" v-model='model.typeid'>
</a-tree-select>
</a-form-item>
</a-col>
</a-row>
<a-col :md="17" :sm="20">
<a-form-item label="活动开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-date v-model='model.startDate' v-decorator="['startDate',validatorRules.startDate]" :trigger-change="true" style="width: 100%"
:show-time='true' date-format='YYYY-MM-DD HH:mm:ss' placeholder="请选择活动开始时间" :disabled="disableSubmit"/>
</a-form-item>
</a-col>
<a-col :md="17" :sm="20">
<a-form-item label="活动结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-date v-model='model.endDate' v-decorator="['endDate',validatorRules.endDate]" :trigger-change="true" style="width: 100%"
:show-time='true' date-format='YYYY-MM-DD HH:mm:ss' placeholder="请选择活动结束时间" :disabled="disableSubmit"/>
</a-form-item>
</a-col>
<a-col :md="17" :sm="20">
<a-form-item label="报名开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-date v-model='model.enrollTime' v-decorator="['enrollTime',validatorRules.enrollTime]" :trigger-change="true"
:show-time='true' date-format='YYYY-MM-DD HH:mm:ss' style="width: 100%" placeholder="请选择报名开始时间" :disabled="disableSubmit" />
</a-form-item>
</a-col>
<a-col :md="17" :sm="20">
<a-form-item label="报名结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-date v-model='model.enrollEndTime' v-decorator="['enrollEndTime',validatorRules.enrollEndTime]" :trigger-change="true"
:show-time='true' date-format='YYYY-MM-DD HH:mm:ss' style="width: 100%" placeholder="请选择报名结束时间" :disabled="disableSubmit" />
</a-form-item>
</a-col>
<a-row :gutter="24">
<a-col :md="12" :sm="20">
<a-form-item label="参与人数" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-decorator="['joinNumber',validatorRules.joinNumber]" :disabled="disableSubmit"
placeholder="请输入参与人数"></a-input>
</a-form-item>
</a-col>
<a-col :md="12" :sm="20">
<a-form-item label="活动简介" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-textarea v-decorator="['summary',validatorRules.summary]" :disabled="disableSubmit"
placeholder="请输入活动简介"></a-textarea>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :md="12" :sm="20">
<a-form-item label="是否直播" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-dict-select-tag type="list" v-decorator="['liveFlag',validatorRules.liveFlag]" :trigger-change="true"
dictCode="activity_liveFlag"
placeholder="活动是否直播：0:否;1:是" :disabled="disableSubmit"/>
</a-form-item>
</a-col>
<a-col :md="12" :sm="20">
<a-form-item label="活动奖励" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-decorator="['reward',validatorRules.reward]" :disabled="disableSubmit"
placeholder="请输入活动奖励"></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :md="12" :sm="20">
<a-form-item label="是否免费" :labelCol="labelCol" :wrapperCol="wrapperCol" :required='true'>
<j-dict-select-tag type="list" v-model='model.free'
dictCode="activity_free"
placeholder="请选择是否免费" :disabled="disableSubmit"/>
</a-form-item>
</a-col>
<a-col :md="12" :sm="20">
<a-form-item v-if='model.free ==0' label="金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-decorator="['price',validatorRules.price]"
placeholder="请输入活动金额" :disabled="disableSubmit"></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :md="12" :sm="20">
<a-form-item label="活动地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-decorator="['address',validatorRules.address]" :disabled="disableSubmit"
placeholder="请输入活动地址" ></a-input>
</a-form-item>
</a-col>
</a-row>
<a-form-item label="上传图片或视频地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-image-upload v-decorator="['media',validatorRules.media]" isMultiple :disabled="disableSubmit"></j-image-upload>
</a-form-item>
<a-form-item label="活动描述" :labelCol="labelCol" :wrapperCol="wrapperCol" >
<j-editor v-model="describe.value" :disabled="disableSubmit"/>
</a-form-item>
</a-form>
</a-spin>
</div>
</a-modal>
</template>
<script>
import {addActivity, editGiftCategory, getActivityTypeList} from '@/api/api'
import Icons from './icon/Icons'
import pick from 'lodash.pick'
import store from '@/store'
export default {
name: "ActivityModal",
components: {Icons},
data() {
return {
//富文本
describe: {
value: ''
},
drawerWidth: 700,
treeData: [],
title: "操作",
visible: false,
disableSubmit: false,
model: {},
localMenuType: 0,
name: null,
labelCol: {
xs: {span: 24},
sm: {span: 5},
},
wrapperCol: {
xs: {span: 24},
sm: {span: 16},
},
confirmLoading: false,
form: this.$form.createForm(this),
validateStatus: "",
activityType:[]
}
},
computed: {
validatorRules: function () {
let validateName = (rule, value, callback) => {
if (value && value.length > 200) {
callback(new Error('活动名称不能超过200字'))
}
callback()
};
let validateEnrollStartTime = (rule, value, callback) => {
if (value) {
if (this.onEnrollStartTimeChange(value)){
callback(new Error('报名开始时间不能晚于报名结束时间'))
}
if (this.onEnrollSTimeChange(value)){
callback(new Error('报名开始时间不能晚于活动开始时间'))
}
}
callback()
};
let validateEnrollEndTime = (rule, value, callback) => {
if (value) {
if (this.onEnrollEndTimeChange(value)){
callback(new Error('报名结束时间不能早于报名开始时间'))
}
if (this.onEnrollETimeChange(value)){
callback(new Error('报名结束时间不能晚于活动开始时间'))
}
}
callback()
};
let validateActStartTime = (rule, value, callback) => {
if (value) {
if (this.onActStartTimeChange(value)){
callback(new Error('活动开始时间不能晚于活动结束时间'))
}
}
callback()
};
let validateActEndTime = (rule, value, callback) => {
if (value) {
if (this.onActEndTimeChange(value)){
callback(new Error('活动结束时间不能早于活动开始时间'))
}
}
callback()
};
let validateAddress = (rule, value, callback) => {
if (value && value.length > 200) {
callback(new Error('活动地址不能超过200字'))
}
callback()
};
let validateJoinNumber = (rule, value, callback) => {
const regex = /^[0-9]*$/;
if (value && !regex.test(value)){
callback("参与人数只能为数字")
}
if (value && value > 999999999) {
callback(new Error('参与人数不能超过999999999字'))
}
callback()
};
let validateSummary = (rule, value, callback) => {
if (value && value.length > 200) {
callback(new Error('活动简介不能超过200字'))
}
callback()
};
let validateReward = (rule, value, callback) => {
if (value && value.length > 200) {
callback(new Error('活动奖励不能超过200字'))
}
callback()
};
let validatePrice = (rule, value, callback) => {
const regex = /^([\+]?[1-9]+[\d]*(.[0-9]{1,2})?)$/;
if (value && !regex.test(value)){
callback("活动金额只能为数字，如有小数只能带两位小数")
}
if (value && value > 99999999.99) {
callback(new Error('活动金额不能超过99999999.99'))
}
callback()
};
return {
name: {rules: [{required: true, message: '请输入活动名称'},{validator:validateName,trigger:'blur'},]},
status: {rules: [{required: true, message: '请输入活动状态'}]},
enrollTime: {rules: [{required: true, message: '请选择报名开始时间'},{validator:validateEnrollStartTime,trigger:'blur'},]},
enrollEndTime: {rules: [{required: true, message: '请选择报名结束时间'},{validator:validateEnrollEndTime,trigger:'blur'},]},
startDate: {rules: [{required: true, message: '请选择活动开始时间'},{validator:validateActStartTime,trigger:'blur'},]},
endDate: {rules: [{required: true, message: '请选择活动结束时间'},{validator:validateActEndTime,trigger:'blur'},]},
media: {rules: [{required: true, message: '请上传文件'}]},
updateUser: {rules: [{required: true, message: '请输入修改者'}]},
price: {rules: [{required: true, message: '请输入活动金额'},{validator:validatePrice,trigger:'blur'},]},
free: {rules: [{required: true, message: '请设置活动是否免费'}]},
liveFlag: {rules: [{required: true, message: '请设置活动是否直播'}]},
address: {rules: [{required: true, message: '请输入活动地址'},{validator:validateAddress,trigger:'blur'},]},
typeid: {rules: [{required: true, message: '请输入活动类别'}]},
description: {rules: [{required: true, message: '请输入活动描述'}]},
typename: {rules: [{required: true, message: '请输入活动类别名'}]},
summary: {rules: [{required: true, message: '请输入活动简介'},{validator:validateSummary,trigger:'blur'},]},
joinNumber: {rules: [{required: true, message: '请输入参与人数'},{validator:validateJoinNumber,trigger:'blur'},]},
reward: {rules: [{required: true, message: '请输入活动奖励'},{validator:validateReward,trigger:'blur'},]},
}
}
},
created() {
//请求后台数据,初始化分类数据
this.loadTree();
this.initDictConfig();
},
methods: {
loadTree() {
let that = this
getActivityTypeList().then((res) => {
if (res.success || res.data || res.code == 200) {
that.activityType = res.data.map((item, index, arr) => {
let c
c = { label: item.name, value: item.id }
return c;
})
}
})
},
add() {
this.loadTree();
// 默认值
this.edit({});
},
edit(record) {
this.resetScreenSize(); // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
this.form.resetFields();
this.model = Object.assign({}, record);
//给富文本赋值
this.describe.value = record.description;
this.visible = true;
let fieldsVal = pick(this.model, 'name', 'status', 'startDate', 'enrollTime', 'enrollEndTime', 'endDate', 'createTime', 'updateTime', 'createUser', 'updateUser', 'price', 'free', 'liveFlag', 'description', 'address', 'typeid', 'typename', 'summary', 'joinNumber', 'reward', 'media');
this.$nextTick(() => {
this.form.setFieldsValue(fieldsVal)
});
},
close() {
this.$emit('close');
this.disableSubmit = false;
this.visible = false;
},
handleOk() {
const that = this;
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
let userid = store.getters.userInfo.id;
this.model.name = that.name;
this.model.sortNo = that.sortNo;
this.model.media = that.media;
this.model.createTime = null;
let formData = Object.assign(this.model, values);
console.log(formData);
formData.description = this.describe.value;
formData.createUser = userid;
that.confirmLoading = true;
console.log(formData);
let obj;
if (!this.model.giftCategoryId) {
obj = addActivity(formData);
} else {
obj = editGiftCategory(formData);
}
obj.then((res) => {
if (res.code == 200) {
that.$message.success(res.msg);
that.$emit('ok');
that.close();
} else {
that.$message.error(res.msg);
}
}).finally(() => {
that.confirmLoading = false;
//that.close();
});
}
})
},
handleCancel() {
this.close()
},
handleIconCancel() {
this.iconChooseVisible = false
},
// 根据屏幕变化,设置抽屉尺寸
resetScreenSize() {
let screenWidth = document.body.clientWidth;
if (screenWidth < 500) {
this.drawerWidth = screenWidth;
} else {
this.drawerWidth = 700;
}
},
initDictConfig() {
},
/**
* 开始时间发生变化时触发,设置结束时间不可选择的日期
* 结束时间应大于等于开始时间
* @param {string} startTime 格式化后的日期
*/
onEnrollStartTimeChange(startTime) {
return startTime > this.model.enrollEndTime
},
onEnrollSTimeChange(startTime) {
return startTime >this.model.startDate
},
/**
* 结束时间发生变化时触发,设置开始时间不可选择的日期
* 开始时间小于等于结束时间
* @param {string} date 格式化后的日期
*/
onEnrollEndTimeChange(endTime) {
return endTime < this.model.enrollTime
},
onEnrollETimeChange(endTime) {
return endTime > this.model.startDate
},
/**
* 开始时间发生变化时触发,设置结束时间不可选择的日期
* 结束时间应大于等于开始时间
* @param {string} startTime 格式化后的日期
*/
onActStartTimeChange(startTime) {
return startTime > this.model.endDate
},
/**
* 结束时间发生变化时触发,设置开始时间不可选择的日期
* 开始时间小于等于结束时间
* @param {string} date 格式化后的日期
*/
onActEndTimeChange(endTime) {
return endTime < this.model.startDate
}
}
}
</script>
<style scoped>
</style>