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)" />
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <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)" /> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | 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( '请输入数值' ) } }, |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步