ant-design-vue对起始时间的校验

ant-design-vue对起始时间的校验

由于要添加对起始时间的校验,项目中无法直接使用this.model.value获取当前的字段,因此需要j-date上添加一组v-model,保证可以获取到当前字段的值,再对其进行校验。(当前也获取不到this.form的值)

ant-design-vue对起始时间的校验

添加起始时间的自定义校验

ant-design-vue对起始时间的校验

ant-design-vue对起始时间的校验

这些方法中的model值是从上面v-model中获取到的

ant-design-vue对起始时间的校验

至此校验就写好了

ant-design-vue对起始时间的校验

不过当前存在一个问题,控制台一直有报错,但是未找到合理 的解决方法

ant-design-vue对起始时间的校验

如有解决报错方法,还请指教。

附上源码:

<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>

上一篇:第二篇英文翻译


下一篇:jmeter+ant+jenkins 搭建持续集成接口测试