Skip to content

P
pica.cloud.web-education-admin
提交 e799d721 编写于 作者: dmx_mac's avatar dmx_mac
浏览文件
操作

feat:增加表单验证

上级 21e4abba
显示空白字符变更
内嵌 并排
正在显示 包含 122 行增加 和 57 行删除
src/views/shop/create-shop.vue
浏览文件 @ e799d721
...@@ -33,6 +33,7 @@ ...@@ -33,6 +33,7 @@
label-suffix="：" label-suffix="："
class="basic-form" class="basic-form"
style="margin-top: 15px" style="margin-top: 15px"
inline-message
> >
<div> <div>
<el-tabs v-model="activeTabName" @tab-click="handleTabName"> <el-tabs v-model="activeTabName" @tab-click="handleTabName">
...@@ -384,6 +385,7 @@ ...@@ -384,6 +385,7 @@
v-if="formData.storeType == 1" v-if="formData.storeType == 1"
label="经营范围" label="经营范围"
class="required-label" class="required-label"
prop="certifyReq.bizScope"
> >
<el-cascader <el-cascader
ref="cascaderBizScope" ref="cascaderBizScope"
...@@ -405,6 +407,7 @@ ...@@ -405,6 +407,7 @@
</p> </p>
<div> <div>
<div> <div>
<el-form-item prop="imgUrlC1">
<el-upload <el-upload
v-model="formData.imgUrlC1" v-model="formData.imgUrlC1"
:disabled="Boolean(formData.imgUrlC1)" :disabled="Boolean(formData.imgUrlC1)"
...@@ -435,10 +438,12 @@ ...@@ -435,10 +438,12 @@
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</div> </div>
</el-upload> </el-upload>
</el-form-item>
<div v-if="formData.storeType == 1" class="img-data"> <div v-if="formData.storeType == 1" class="img-data">
<el-form-item <el-form-item
label="企业名称" label="企业名称"
label-width="100px" label-width="100px"
prop="certifyReq.orgName"
> >
<el-input <el-input
size="small" size="small"
...@@ -448,6 +453,7 @@ ...@@ -448,6 +453,7 @@
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="信用代码" label="信用代码"
prop="certifyReq.creditCode"
> >
<el-input <el-input
size="small" size="small"
...@@ -457,6 +463,7 @@ ...@@ -457,6 +463,7 @@
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="有效日期" label="有效日期"
prop="imgUrlC1Date"
> >
<el-date-picker <el-date-picker
v-model="imgUrlC1Date" v-model="imgUrlC1Date"
...@@ -543,6 +550,7 @@ ...@@ -543,6 +550,7 @@
<el-form-item <el-form-item
label="委托人姓名" label="委托人姓名"
label-width="100px" label-width="100px"
prop="certifyReq.assignorName"
> >
<el-input <el-input
v-model="formData.certifyReq.assignorName" v-model="formData.certifyReq.assignorName"
...@@ -552,6 +560,7 @@ ...@@ -552,6 +560,7 @@
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="证件号码" label="证件号码"
prop="certifyReq.assignorCertNo"
> >
<el-input <el-input
size="small" size="small"
...@@ -561,6 +570,7 @@ ...@@ -561,6 +570,7 @@
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="有效日期" label="有效日期"
prop="imgUrlC5Date"
> >
<el-date-picker <el-date-picker
v-model="imgUrlC5Date" v-model="imgUrlC5Date"
...@@ -612,6 +622,7 @@ ...@@ -612,6 +622,7 @@
<p v-if="certifyValidDtoList(6)" class="red">{{certifyValidDtoList(6)}}</p> <p v-if="certifyValidDtoList(6)" class="red">{{certifyValidDtoList(6)}}</p>
<div>法人身份证</div> <div>法人身份证</div>
<div class="flex-wrap"> <div class="flex-wrap">
<el-form-item prop="imgUrlC2">
<el-upload <el-upload
:disabled="Boolean(formData.imgUrlC2)" :disabled="Boolean(formData.imgUrlC2)"
v-model="formData.imgUrlC2" v-model="formData.imgUrlC2"
...@@ -642,6 +653,8 @@ ...@@ -642,6 +653,8 @@
</div> </div>
<div>身份证正面</div> <div>身份证正面</div>
</el-upload> </el-upload>
</el-form-item>
<el-form-item prop="imgUrlC3">
<el-upload <el-upload
:disabled="Boolean(formData.imgUrlC3)" :disabled="Boolean(formData.imgUrlC3)"
v-model="formData.imgUrlC3" v-model="formData.imgUrlC3"
...@@ -672,12 +685,14 @@ ...@@ -672,12 +685,14 @@
</div> </div>
<div>身份证反面</div> <div>身份证反面</div>
</el-upload> </el-upload>
</el-form-item>
</div> </div>
<div class="img-data"> <div class="img-data">
<el-form-item <el-form-item
label="法人姓名" label="法人姓名"
label-width="100px" label-width="100px"
prop="certifyReq.legalName"
> >
<el-input <el-input
size="small" size="small"
...@@ -687,6 +702,7 @@ ...@@ -687,6 +702,7 @@
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="证件号码" label="证件号码"
prop="certifyReq.legalCertNo"
> >
<el-input <el-input
size="small" size="small"
...@@ -696,6 +712,7 @@ ...@@ -696,6 +712,7 @@
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="有效日期" label="有效日期"
prop="imgUrlC3Date"
> >
<el-date-picker <el-date-picker
v-model="imgUrlC3Date" v-model="imgUrlC3Date"
...@@ -715,6 +732,7 @@ ...@@ -715,6 +732,7 @@
<div v-if="controlLicense.includes('1') || formData.storeType == 2"> <div v-if="controlLicense.includes('1') || formData.storeType == 2">
<p v-if="certifyValidDtoList(7)" class="red">{{certifyValidDtoList(7)}}</p> <p v-if="certifyValidDtoList(7)" class="red">{{certifyValidDtoList(7)}}</p>
<p class="tips">药品经营许可证</p> <p class="tips">药品经营许可证</p>
<el-form-item prop="imgUrlP1">
<el-upload <el-upload
:disabled="Boolean(formData.imgUrlP1)" :disabled="Boolean(formData.imgUrlP1)"
v-model="formData.imgUrlP1" v-model="formData.imgUrlP1"
...@@ -744,10 +762,12 @@ ...@@ -744,10 +762,12 @@
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</div> </div>
</el-upload> </el-upload>
</el-form-item>
<el-form-item <el-form-item
v-if="formData.storeType == 1" v-if="formData.storeType == 1"
label="有效日期" label="有效日期"
label-width="100px" label-width="100px"
prop="imgUrlP1Date"
> >
<el-date-picker <el-date-picker
v-model="imgUrlP1Date" v-model="imgUrlP1Date"
...@@ -762,6 +782,7 @@ ...@@ -762,6 +782,7 @@
<div v-if="controlLicense.includes('1')"> <div v-if="controlLicense.includes('1')">
<p v-if="certifyValidDtoList(8)" class="red">{{certifyValidDtoList(8)}}</p> <p v-if="certifyValidDtoList(8)" class="red">{{certifyValidDtoList(8)}}</p>
<p class="tips">药品经营质量管理规范认证证书</p> <p class="tips">药品经营质量管理规范认证证书</p>
<el-form-item prop="imgUrlP2">
<el-upload <el-upload
:disabled="Boolean(formData.imgUrlP2)" :disabled="Boolean(formData.imgUrlP2)"
v-model="formData.imgUrlP2" v-model="formData.imgUrlP2"
...@@ -791,9 +812,11 @@ ...@@ -791,9 +812,11 @@
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</div> </div>
</el-upload> </el-upload>
</el-form-item>
<el-form-item <el-form-item
label="有效日期" label="有效日期"
label-width="100px" label-width="100px"
prop="imgUrlP2Date"
> >
<el-date-picker <el-date-picker
v-model="imgUrlP2Date" v-model="imgUrlP2Date"
...@@ -808,6 +831,7 @@ ...@@ -808,6 +831,7 @@
<div v-if="controlLicense.includes('3')"> <div v-if="controlLicense.includes('3')">
<p v-if="certifyValidDtoList(9)" class="red">{{certifyValidDtoList(9)}}</p> <p v-if="certifyValidDtoList(9)" class="red">{{certifyValidDtoList(9)}}</p>
<p class="tips">食品经营(流通)许可证</p> <p class="tips">食品经营(流通)许可证</p>
<el-form-item prop="imgUrlP3">
<el-upload <el-upload
:disabled="Boolean(formData.imgUrlP3)" :disabled="Boolean(formData.imgUrlP3)"
v-model="formData.imgUrlP3" v-model="formData.imgUrlP3"
...@@ -837,9 +861,11 @@ ...@@ -837,9 +861,11 @@
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</div> </div>
</el-upload> </el-upload>
</el-form-item>
<el-form-item <el-form-item
label="有效日期" label="有效日期"
label-width="100px" label-width="100px"
prop="imgUrlP3Date"
> >
<el-date-picker <el-date-picker
v-model="imgUrlP3Date" v-model="imgUrlP3Date"
...@@ -854,6 +880,7 @@ ...@@ -854,6 +880,7 @@
<div v-if="controlLicense.includes('2')"> <div v-if="controlLicense.includes('2')">
<p v-if="certifyValidDtoList(10)" class="red">{{certifyValidDtoList(10)}}</p> <p v-if="certifyValidDtoList(10)" class="red">{{certifyValidDtoList(10)}}</p>
<p class="tips">医疗器械经营许可证</p> <p class="tips">医疗器械经营许可证</p>
<el-form-item prop="imgUrlP4">
<el-upload <el-upload
:disabled="Boolean(formData.imgUrlP4)" :disabled="Boolean(formData.imgUrlP4)"
v-model="formData.imgUrlP4" v-model="formData.imgUrlP4"
...@@ -883,9 +910,11 @@ ...@@ -883,9 +910,11 @@
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</div> </div>
</el-upload> </el-upload>
</el-form-item>
<el-form-item <el-form-item
label="有效日期" label="有效日期"
label-width="100px" label-width="100px"
prop="imgUrlP4Date"
> >
<el-date-picker <el-date-picker
v-model="imgUrlP4Date" v-model="imgUrlP4Date"
...@@ -899,6 +928,7 @@ ...@@ -899,6 +928,7 @@
</div> </div>
<div v-if="controlLicense.includes('2')"> <div v-if="controlLicense.includes('2')">
<p class="tips">医疗器械网络销售备案</p> <p class="tips">医疗器械网络销售备案</p>
<el-form-item prop="imgUrlP5">
<el-upload <el-upload
:disabled="Boolean(formData.imgUrlP5)" :disabled="Boolean(formData.imgUrlP5)"
v-model="formData.imgUrlP5" v-model="formData.imgUrlP5"
...@@ -928,9 +958,11 @@ ...@@ -928,9 +958,11 @@
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</div> </div>
</el-upload> </el-upload>
</el-form-item>
<el-form-item <el-form-item
label="有效日期" label="有效日期"
label-width="100px" label-width="100px"
prop="imgUrlP5Date"
> >
<el-date-picker <el-date-picker
v-model="imgUrlP5Date" v-model="imgUrlP5Date"
...@@ -945,6 +977,7 @@ ...@@ -945,6 +977,7 @@
<div v-if="controlLicense.includes('2')"> <div v-if="controlLicense.includes('2')">
<p v-if="certifyValidDtoList(11)" class="red">{{certifyValidDtoList(11)}}</p> <p v-if="certifyValidDtoList(11)" class="red">{{certifyValidDtoList(11)}}</p>
<p class="tips">二类医疗器械经营备案凭证</p> <p class="tips">二类医疗器械经营备案凭证</p>
<el-form-item prop="imgUrlP6">
<el-upload <el-upload
:disabled="Boolean(formData.imgUrlP6)" :disabled="Boolean(formData.imgUrlP6)"
v-model="formData.imgUrlP6" v-model="formData.imgUrlP6"
...@@ -974,9 +1007,11 @@ ...@@ -974,9 +1007,11 @@
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</div> </div>
</el-upload> </el-upload>
</el-form-item>
<el-form-item <el-form-item
label="有效日期" label="有效日期"
label-width="100px" label-width="100px"
prop="imgUrlP6Date"
> >
<el-date-picker <el-date-picker
v-model="imgUrlP6Date" v-model="imgUrlP6Date"
...@@ -1431,7 +1466,34 @@ export default { ...@@ -1431,7 +1466,34 @@ export default {
repotExpressList: [ repotExpressList: [
{ required: true, message: "请选择物流公司名称", trigger: "change" }, { required: true, message: "请选择物流公司名称", trigger: "change" },
], ],
'certifyReq.orgType':[{type: "string", required: true, message: '请填写名字', trigger: 'blur'}], //有多条校验条件的时候可以放个ob 'certifyReq.orgType':[{type: "string", required: true, message: '请填企业类型', trigger: 'blur'}], //有多条校验条件的时候可以放个ob
'certifyReq.orgAddress':[{type: "string", required: true, message: '请填写详细地址', trigger: 'blur'}],
'certifyReq.bizScope':[{type: "array", required: true, message: '请选择经营范围', trigger: 'change'}],
'certifyReq.orgName':[{type: "string", required: true, message: '请输入企业名称', trigger: 'blur'}],
'certifyReq.creditCode':[{type: "string", required: true, message: '请输入信用代码', trigger: 'blur'}],
// imgUrlC1Date:[{type: "array", required: true, message: '请选择有效日期', trigger: 'blur'}],
'certifyReq.assignorName':[{type: "string", required: true, message: '请输入委托人姓名', trigger: 'blur'}],
'certifyReq.assignorCertNo':[{type: "string", required: true, message: '请输入证件号码', trigger: 'blur'}],
// imgUrlC5Date:[{type: "array", required: true, message: '请选择有效日期', trigger: 'change'}],
'certifyReq.legalName':[{type: "string", required: true, message: '请输入法人姓名', trigger: 'blur'}],
'certifyReq.legalCertNo':[{type: "string", required: true, message: '请输入证件号码', trigger: 'blur'}],
// imgUrlC3Date:[{type: "array", required: true, message: '请选择有效日期', trigger: 'change'}],
imgUrlP1:[{type: "string", required: true, message: '请上传图片', trigger: 'blur'}],
// imgUrlP1Date:[{type: "array", required: true, message: '请选择有效日期', trigger: 'change'}],
imgUrlP2:[{type: "string", required: true, message: '请上传图片', trigger: 'change'}],
imgUrlP3:[{type: "string", required: true, message: '请上传图片', trigger: 'change'}],
imgUrlP4:[{type: "string", required: true, message: '请上传图片', trigger: 'change'}],
imgUrlP5:[{type: "string", required: true, message: '请上传图片', trigger: 'change'}],
imgUrlP6:[{type: "string", required: true, message: '请上传图片', trigger: 'change'}],
imgUrlC1:[{type: "string", required: true, message: '请上传图片', trigger: 'change'}],
imgUrlC2:[{type: "string", required: true, message: '请上传图片', trigger: 'change'}],
imgUrlC3:[{type: "string", required: true, message: '请上传图片', trigger: 'change'}],
// imgUrlP2Date:[{type: "array", required: true, message: '请选择有效日期', trigger: 'change'}],
// imgUrlP3Date:[{type: "array", required: true, message: '请选择有效日期', trigger: 'change'}],
// imgUrlP4Date:[{type: "array", required: true, message: '请选择有效日期', trigger: 'change'}],
// imgUrlP5Date:[{type: "array", required: true, message: '请选择有效日期', trigger: 'change'}],
// imgUrlP6Date:[{type: "array", required: true, message: '请选择有效日期', trigger: 'change'}],
}, },
imgMouseOver1: false, imgMouseOver1: false,
uploadImgMessage1: false, //未上传图片，校验提示语 uploadImgMessage1: false, //未上传图片，校验提示语
...@@ -1498,6 +1560,7 @@ export default { ...@@ -1498,6 +1560,7 @@ export default {
"formData.certifyReq.bizScope": { "formData.certifyReq.bizScope": {
handler(val) { handler(val) {
const j = []; const j = [];
if(val) {
val.map( i => { val.map( i => {
if( i[0].includes('first') ){ if( i[0].includes('first') ){
const m = i[0].charAt(0); const m = i[0].charAt(0);
...@@ -1505,6 +1568,7 @@ export default { ...@@ -1505,6 +1568,7 @@ export default {
} }
}) })
this.controlLicense = j; this.controlLicense = j;
}
}, },
deep: true, deep: true,
}, },
...@@ -1810,6 +1874,7 @@ export default { ...@@ -1810,6 +1874,7 @@ export default {
submitFlag = true; submitFlag = true;
} else { } else {
submitFlag = false; submitFlag = false;
this.$message.warning("请完善必填信息！");
} }
}); });
return submitFlag; return submitFlag;
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或