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 = thisgetActivityTypeList().then((res) => {if (res.success || res.data || res.code == 200) {that.activityType = res.data.map((item, index, arr) => {let cc = { 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>
