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('请输入数值')
}
},
