增加必填校验

This commit is contained in:
qq787203167
2022-02-12 15:00:38 +08:00
parent 8de6d281c9
commit 854495c7ad
2 changed files with 101 additions and 45 deletions
+100 -44
View File
@@ -11,7 +11,7 @@
<a-col :span="12" v-if="item.type === 'INPUT'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span class="Required" v-if="item.Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
@@ -24,7 +24,7 @@
<a-col :span="12" v-else-if="item.type === 'CHECKBOX'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span class="Required" v-if="item.Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
@@ -39,7 +39,7 @@
<a-col :span="12" v-else-if="item.type === 'SINGLETIME'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span class="Required" v-if="item.Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
@@ -53,7 +53,7 @@
<a-col :span="12" v-else-if="item.type === 'SMULTITIME'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span class="Required" v-if="item.Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
@@ -67,7 +67,7 @@
<a-col :span="12" v-else-if="item.type === 'NUMBER'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span class="Required" v-if="item.Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
@@ -80,12 +80,13 @@
<a-col :span="12" v-else-if="item.type === 'SELECT'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span class="Required" v-if="item.Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.attrModel">
<j-dict-select-tag class="box-input" v-model="formInline[item.attrModel]"
@input="handleInput(item.attrModel)"
:placeholder="$t('selectStatus')" :type="'select'"
:triggerChange="false" dictCode="valid_status"/>
</a-form-model-item>
@@ -95,7 +96,7 @@
<a-col :span="12" v-else-if="item.type === 'SELECTALL'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span class="Required" v-if="item.Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
@@ -110,12 +111,14 @@
<a-col :span="12" v-else-if="item.type === 'RADIO'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span class="Required" v-if="item.Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
<a-form-model-item class="itemModel" :prop="item.attrModel">
<j-dict-select-tag v-model="formInline[item.attrModel]" :placeholder="$t('selectStatus')"
<j-dict-select-tag v-model="formInline[item.attrModel]"
@input="handleInput(item.attrModel)"
:placeholder="$t('selectStatus')"
:type="'radio'" :triggerChange="false" dictCode="valid_status"/>
</a-form-model-item>
</div>
@@ -124,7 +127,7 @@
<a-col :span="24" v-else-if="item.type === 'TEXTAREA'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span class="Required" v-if="item.Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
@@ -137,7 +140,7 @@
<a-col :span="24" v-else-if="item.type === 'FILE'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span class="Required" v-if="item.Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
@@ -155,7 +158,7 @@
<a-col :span="24" v-else-if="item.type === 'STANDARD'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span class="Required" v-if="item.Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
@@ -174,7 +177,7 @@
<a-col :span="12" v-if="item.type === 'INPUT'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span class="Required" v-if="item.Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
@@ -187,7 +190,7 @@
<a-col :span="12" v-else-if="item.type === 'CHECKBOX'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span class="Required" v-if="item.Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
@@ -202,7 +205,7 @@
<a-col :span="12" v-else-if="item.type === 'SINGLETIME'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span class="Required" v-if="item.Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
@@ -216,7 +219,7 @@
<a-col :span="12" v-else-if="item.type === 'SMULTITIME'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span class="Required" v-if="item.Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
@@ -229,7 +232,7 @@
<a-col :span="12" v-else-if="item.type === 'NUMBER'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span class="Required" v-if="item.Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
@@ -242,7 +245,7 @@
<a-col :span="12" v-else-if="item.type === 'SELECT'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span class="Required" v-if="item.Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
@@ -257,7 +260,7 @@
<a-col :span="12" v-else-if="item.type === 'SELECTALL'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span class="Required" v-if="item.Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
@@ -272,7 +275,7 @@
<a-col :span="12" v-else-if="item.type === 'RADIO'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span class="Required" v-if="item.Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
@@ -286,7 +289,7 @@
<a-col :span="24" v-else-if="item.type === 'TEXTAREA'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span class="Required" v-if="item.Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
@@ -299,7 +302,7 @@
<a-col :span="24" v-else-if="item.type === 'FILE'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span class="Required" v-if="item.Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
@@ -317,7 +320,7 @@
<a-col :span="24" v-else-if="item.type === 'STANDARD'">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span class="Required" v-if="item.Required">*</span>
<span :class="{'title-text-text':false}">{{item.enName}}</span><br>
<span :class="{'title-text-text':false}">{{item.name}}</span>
</div>
@@ -359,11 +362,7 @@
return {
formInline: {},
isFormInline: false,
rules: {
title: [
{ required: true, message: 'Please input Activity name', trigger: 'blur' }
]
},
rules: {},
labelCol: {
xs: { span: 24 },
sm: { span: 6 }
@@ -380,7 +379,8 @@
placeholder: '请输入名称',
attrModel: 'name',
enName: 'Name',
text: '基本信息'
text: '基本信息',
Required: true
},
{
id: 2,
@@ -389,7 +389,8 @@
placeholder: '请输入标题',
attrModel: 'title',
enName: 'title',
text: '基本信息'
text: '基本信息',
Required: true
},
{
id: 3,
@@ -399,7 +400,8 @@
enName: 'Single choice',
validStatus: 'valid_status',
attrModel: 'radio',
text: '基本信息'
text: '基本信息',
Required: true
},
{
id: 4,
@@ -409,7 +411,8 @@
placeholder: '请输入标题',
attrModel: 'checkbox',
validStatus: 'valid_status',
text: '基本信息'
text: '基本信息',
Required: true
},
{
id: 5,
@@ -417,9 +420,10 @@
name: '下拉单选',
enName: 'title',
placeholder: '请输入标题',
attrModel: 'radio',
attrModel: 'selete',
validStatus: 'valid_status',
text: '基本信息'
text: '基本信息',
Required: true
},
{
id: 6,
@@ -429,7 +433,8 @@
placeholder: '请输入标题',
validStatus: 'valid_status',
attrModel: 'selectAll',
text: '基本信息'
text: '基本信息',
Required: true
},
{
id: 7,
@@ -446,7 +451,7 @@
name: '文本框',
enName: 'title',
placeholder: '请输入文本框',
attrModel: 'number',
attrModel: 'textArea',
text: '基本信息'
},
{
@@ -506,8 +511,7 @@
}
},
mounted() {
this.isFormInline = false
this.isFormInline = true
this.IntegrateData()
if (this.isDisplayType) {
this.headerText.forEach((res) => {
res.content = []
@@ -518,13 +522,14 @@
})
})
}
console.log('dataheae',this.headerText)
},
methods: {
sumber() {
console.log(this.formInline)
this.$refs.ruleForm.validate(valid => {
if (valid) {
alert('submit!')
console.log(valid)
console.log(this.formInline)
} else {
console.log('error submit!!')
return false
@@ -549,7 +554,58 @@
this.formInline[this.uploadName] = attIdList.join(',')
this.formInline = { ...this.formInline }
},
handleInput(value) {
this.$nextTick(() => {
this.formInline = { ...this.formInline }
this.$refs.ruleForm.validateField([value])
})
},
IntegrateData() {
this.isFormInline = false
let rules = {}
this.dataList.forEach((res, index) => {
const rule = []
if (res.Required) {
if (res.type === 'INPUT') {
rule.push({
required: true,
message: res.name + '不能为空',
trigger: 'blur'
})
} else if (res.type === 'CHECKBOX' || res.type === 'SELECTALL' ||
res.type === 'SINGLETIME' || res.type === 'SMULTITIME') {
rule.push({
required: true,
message: res.name + '不能为空',
trigger: 'change'
})
} else if (res.type === 'NUMBER') {
rule.push({
required: true,
message: res.name + '不能为空',
trigger: 'blur'
})
} else if (res.type === 'TEXTAREA') {
rule.push({
required: true,
message: res.name + '不能为空',
trigger: 'blur'
})
} else if (res.type === 'RADIO' || res.type === 'SELECT') {
rule.push({
required: true,
message: res.name + '不能为空',
trigger: 'change'
})
}
}
if (rule.length > 0) {
rules[res.attrModel] = rule
}
})
this.$set(this, 'rules', rules)
this.isFormInline = true
}
}
}
</script>
@@ -563,9 +619,9 @@
width: calc(100% - 130px);
}
.formAdd .ant-form-item {
margin-bottom: 20px;
}
/*.formAdd .ant-form-item {*/
/* margin-bottom: 20px;*/
/*}*/
.itemModel .ant-form-item-control-wrapper {
width: 100%;
@@ -89,7 +89,7 @@
}else{
val = e
}
console.log(val);
console.log(val)
if(this.triggerChange){
this.$emit('change', val);
}else{