antd form 表单

 

摘要

  v-decorator="[

                      'numberValue',

                      { rules: [{ validator: myCheckNumber }], initialValue: currentRecord.calculateValue }

                    ]"

 

  v-decorator="[
                          item.value + 'inputnumber' + ruleItem.id,
                          {
                            rules: [{ required: item.showFlag, message: '请输入正确的非负整数', pattern: /^[0-9]+$/ }],
                            initialValue: null
                          }
                        ]"

 

 

 

 

      labelColRight: {

        xs: { span: 24 },

        sm: { span: 3 }

      },

      wrapperColRight: {

        xs: { span: 24 },

        sm: { span: 20 }

      },

 

 

  <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="内容包名称">

                  <!-- <span class="ant-form-text">{{ currentRecord.packagename }}</span> -->

                  <a-input

                    :disabled="pageMode === 'show'"

                    name="packagename"

                    autocomplete="off"

                    v-decorator="[

                      'packagename',

                      {

                        rules: [

                          { required: true, message: '内容包名不为空' },

                          { max: 25, message: '内容包名不超过25个字' }

                        ],

                        initialValue: currentRecord.packagename

                      }

                    ]"

                    placeholder="请输入内容包名"

                  />

                </a-form-item>

 

<div style="display:inline-block;">

                <a-form-item>

                  <a-input

                    style="width:200px;margin-left:6px;"

                    placeholder="请输入数值"

                    @blur="handleBlurInput"

                    v-decorator="[

                      'numberValue',

                      { rules: [{ validator: myCheckNumber }], initialValue: currentRecord.calculateValue }

                    ]"

                  />

                </a-form-item>

              </div>

<a-form-item

                      :labelCol="labelColRight"

                      :wrapperCol="wrapperColRight"

                      label="取值"

                      class="targetTypeDmsFormItem"

                    >

      


<a-input-number
                        :disabled="pageMode === 'show'"
                        class="dms-inputnumber-style"
                        v-if="item.ruleLeft === 3"
                        v-decorator="[
                          item.value + 'inputnumber' + ruleItem.id,
                          {
                            rules: [{ required: item.showFlag, message: '请输入正确的非负整数', pattern: /^[0-9]+$/ }],
                            initialValue: null
                          }
                        ]"
                        :min="0"
                        placeholder="请输入数值"
                        @change="handleChangeRight($event, 'inputNumber', item, thisIndex)"
                      />

    <a-date-picker
                        :disabled="pageMode === 'show'"
                        v-if="item.ruleLeft === 2"
                        style="width:200px;"
                        class="dms-datepicker-style"
                        v-decorator="[
                          item.value + 'datetime' + ruleItem.id,
                          {
                            rules: [{ type: 'object', required: item.showFlag, message: '请选择时间' }],
                            initialValue: null
                          }
                        ]"
                        show-time
                        format="YYYY-MM-DD HH:mm:ss"
                        @change="handleChangeRight($event, 'datepicker', item, thisIndex)"
                      />

 <a-textarea
                              :disabled="pageMode === 'show'"
                              v-if="item.inputType === 'textarea'"
                              class="dms-textarea-style"
                              v-decorator="[
                                item.value + 'textarea' + ruleItem.id,
                                {
                                  rules: [
                                    {
                                      required: item.showFlag && !wordPackageInfo[item.value].switch,
                                      message: '请输入取值'
                                    }
                                  ],
                                  initialValue: null
                                }
                              ]"
                              placeholder="请输入取值，一行代表一个值"
                              :rows="2"
                              @change="handleChangeRight($event, 'textarea', item)"
                            />

　　

myCheckCustomNumberRange (value, cb) {
      if (
        this.currentRecord.dmsName[1] === 'lastActiveDay' ||
        this.currentRecord.dmsName[1] === 'lastActiveWeek' ||
        this.currentRecord.dmsName[1] === 'lastActiveMonth' ||
        this.currentRecord.dmsName[1] === 'activeDayBySometime' ||
        this.currentRecord.dmsName[1] === 'activeDayBySomeweek'
      ) {
        let maxDay = 1
        if (
          this.currentRecord.dmsName[1] === 'lastActiveDay' ||
          this.currentRecord.dmsName[1] === 'activeDayBySometime' ||
          this.currentRecord.dmsName[1] === 'activeDayBySomeweek'
        ) {
          maxDay = parseInt(this.currentRecord.dmsNameStr[2])
        } else if (this.currentRecord.dmsName[1] === 'lastActiveWeek') {
          maxDay = parseInt(this.currentRecord.dmsNameStr[2]) * 7
        } else if (this.currentRecord.dmsName[1] === 'lastActiveMonth') {
          maxDay = parseInt(this.currentRecord.dmsNameStr[2]) * 31
        }
        if (value > maxDay) {
          cb('最大值不超过' + maxDay + '天')
        } else {
          cb()
        }
      } else {
        cb()
      }
    },
    myCheckIntNumber (value, cb, haveZero) {
      if (value.length > 10) {
        return cb('请输入十位以内的数值')
      } else {
        const v = parseInt(value)
        if (haveZero) {
          if (v < 0) {
            return cb('请输入正确的非负整数')
          } else if (!/^[0-9]\d*$/.test(value)) {
            cb('请输入正确的非负整数')
          } else if (value.length > 1 && (value[0] === '0' || value[0] === 0)) {
            cb('请输入正确的非负整数')
          } else {
            this.myCheckCustomNumberRange(value, cb)
          }
        } else {
          if (v < 1) {
            return cb('请输入正确的正整数')
          } else if (!/^[1-9]\d*$/.test(value)) {
            cb('请输入正确的正整数')
          } else {
            cb()
          }
        }
      }
    },
    myCheckPercentNumber (value, cb) {
      // 输入时0.不报错，保存时0.报错
      const regA = /^0\.\d{1,6}$/
      const regB = /^1\.0{1,6}$/
      if (regA.test(value) || regB.test(value)) {
        cb()
      } else {
        if (value === '0' || value === '1') {
          cb()
        } else {
          if (value === '1.' || value === '0.') {
            if (this.oldUpdateNum === this.newUpdateNum) {
              // 实时校验
              cb()
            } else {
              // 保存时校验
              cb('请检查数值的格式')
              this.oldUpdateNum = this.newUpdateNum
            }
          } else {
            const regC = /^[0,1]\.\d+$/
            if (regC.test(value)) {
              if (value.length > 8) {
                cb('小数位数不超过6位')
              } else {
                cb('请输入[0,1]范围内正确的数值')
              }
            } else {
              cb('请输入[0,1]范围内正确的数值')
            }
          }
        }
      }
    },
    myCheckNumber (rule, value, cb) {
      console.log('myCheckNumber check number , this.currentRecord is...', this.currentRecord)
      const haveZero = this.currentRecord.numberHaveZero
      if (value && value !== '') {
        if (this.currentRecord.numberIsPercent) {
          this.myCheckPercentNumber(value, cb)
        } else {
          if (haveZero) {
            this.myCheckIntNumber(value, cb, haveZero)
          } else {
            if (this.dmsType === 'literary_work') {
              if (this.currentRecord.dmsNameStr[1].indexOf('百分比') > -1) {
                this.myCheckPercentNumber(value, cb)
              } else {
                this.myCheckIntNumber(value, cb, haveZero)
              }
            } else {
              this.myCheckIntNumber(value, cb, haveZero)
            }
          } // end else
        }
      } else {
        cb('请输入数值')
      }
    },