【bug】召开时间表单验证颜色修改

This commit is contained in:
fengachen
2021-10-21 14:03:38 +08:00
parent f0d8f5fab2
commit 77a0bec433
3 changed files with 70 additions and 34 deletions
+18 -3
View File
@@ -2,6 +2,7 @@
<div v-if="!reloading" class="j-area-linkage"> <div v-if="!reloading" class="j-area-linkage">
<!--area-cascader level-0二级联动 1-三级联动--> <!--area-cascader level-0二级联动 1-三级联动-->
<area-cascader <area-cascader
style="border-color: red"
v-if="_type === enums.type[0]" v-if="_type === enums.type[0]"
:value="innerValue" :value="innerValue"
:data="pca" :data="pca"
@@ -9,7 +10,7 @@
v-bind="$attrs" v-bind="$attrs"
v-on="_listeners" v-on="_listeners"
@change="handleChange" @change="handleChange"
:class="isActive ? 'placeholderBlack' : 'placeholderGray'" :class="{'placeholderBlack':isActive,'placeholderGray':!isActive,'has-error':hasError}"
/> />
<!--area-select level-1二级联动 2-三级联动--> <!--area-select level-1二级联动 2-三级联动-->
<area-select <area-select
@@ -19,7 +20,7 @@
v-bind="$attrs" v-bind="$attrs"
v-on="_listeners" v-on="_listeners"
@change="handleChange" @change="handleChange"
:class="isActive ? 'placeholderBlack' : 'placeholderGray'" :class="{'placeholderBlack':isActive,'placeholderGray':!isActive,'has-error':hasError}"
/> />
<div v-else> <div v-else>
<span style="color:red;"> Bad type value: {{_type}}</span> <span style="color:red;"> Bad type value: {{_type}}</span>
@@ -36,7 +37,13 @@ export default {
props: { props: {
value: { value: {
type: String, type: String,
required: false required: false,
},
// 表单是否必填控制
hasError:{
type:Boolean,
required: false,
default:false
}, },
// 组件的类型,可选值: // 组件的类型,可选值:
// select 下拉样式 // select 下拉样式
@@ -160,6 +167,14 @@ export default {
} }
/deep/ .area-cascader-wrap .area-select:hover {
border-color: #069f99;;
}
/deep/ .has-error .area-select {
border-color: #f5222d!important;
}
///deep/.placeholderBlack .area-cascader-wrap .area-select.active { ///deep/.placeholderBlack .area-cascader-wrap .area-select.active {
// color: #333 !important; // color: #333 !important;
//} //}
@@ -94,6 +94,8 @@
<j-area-linkage <j-area-linkage
type="cascader" type="cascader"
placeholder="请选择省市" placeholder="请选择省市"
:has-error="hasError"
@change="changeConvoke"
v-decorator="['convokeLocale',validatorRules.convokeLocale]" v-decorator="['convokeLocale',validatorRules.convokeLocale]"
></j-area-linkage> ></j-area-linkage>
</a-form-item> </a-form-item>
@@ -436,8 +438,10 @@ export default {
workGroupList: [], workGroupList: [],
// 收费二维码显示 // 收费二维码显示
QRcodeBool: true, QRcodeBool: true,
// 召开地点border颜色控制
hasError:false,
// 会议类型 // 会议类型
meetingType:'', meetingType: '',
} }
}, },
computed: { computed: {
@@ -467,7 +471,7 @@ export default {
this.edit(res.result) this.edit(res.result)
} }
}) })
}else { } else {
// 没有id走新增 // 没有id走新增
this.add() this.add()
} }
@@ -510,11 +514,11 @@ export default {
} }
console.log(this.model) console.log(this.model)
// 召开时间回显 // 召开时间回显
if(this.model.startTime){ if (this.model.startTime) {
this.model.convokeTime = [moment(this.model.startTime, dateFormat), moment(this.model.endTime, dateFormat)] this.model.convokeTime = [moment(this.model.startTime, dateFormat), moment(this.model.endTime, dateFormat)]
} }
// 注册签到时间回显 // 注册签到时间回显
if( this.model.startSignInTime){ if (this.model.startSignInTime) {
this.model.signInTime = [moment(this.model.startSignInTime, dateFormat), moment(this.model.endSignInTime, dateFormat)] this.model.signInTime = [moment(this.model.startSignInTime, dateFormat), moment(this.model.endSignInTime, dateFormat)]
} }
// 后端需要的召开时间 // 后端需要的召开时间
@@ -525,7 +529,7 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
// 加定时器是因为有可能赋值不成功 // 加定时器是因为有可能赋值不成功
setTimeout(() => { setTimeout(() => {
this.form.setFieldsValue(pick(this.model,'notice','paymentQrCode','meetingName', 'meetingType', 'convokeTime', 'particularYear', 'estimatedNumber', 'meetingFiles', 'registerDeadline', 'meetingContent', 'convokeLocale', 'address', 'meetingCosts', 'directorId', 'remark', 'directorPhone')), 200 this.form.setFieldsValue(pick(this.model, 'notice', 'paymentQrCode', 'meetingName', 'meetingType', 'convokeTime', 'particularYear', 'estimatedNumber', 'meetingFiles', 'registerDeadline', 'meetingContent', 'convokeLocale', 'address', 'meetingCosts', 'directorId', 'remark', 'directorPhone')), 200
}) })
// 如果是标协会议则回显 标协会议的字段 // 如果是标协会议则回显 标协会议的字段
if (this.meetingType === '2') { if (this.meetingType === '2') {
@@ -550,6 +554,10 @@ export default {
handleOk() { handleOk() {
const that = this const that = this
this.form.validateFields((err, values) => { this.form.validateFields((err, values) => {
// 这是设置召开时间不选择的边框颜色为红色
if (err && Object.prototype.hasOwnProperty.call(err, 'convokeLocale')) {
this.hasError = true
}
if (!err) { if (!err) {
that.confirmLoading = true that.confirmLoading = true
let httpurl = '' let httpurl = ''
@@ -562,7 +570,7 @@ export default {
let placeName = values.convokeLocale let placeName = values.convokeLocale
const formData = Object.assign(this.model, values, {venue: this.getPcaText(placeName)}) const formData = Object.assign(this.model, values, {venue: this.getPcaText(placeName)})
// 如果会议的费用未为0 不能上传缴费凭证 // 如果会议的费用未为0 不能上传缴费凭证
if(values.meetingCosts === '0.00' ){ if (values.meetingCosts === '0.00') {
delete formData.paymentQrCode delete formData.paymentQrCode
} }
// 添加编辑会议需要增加会议类型 // 添加编辑会议需要增加会议类型
@@ -601,6 +609,14 @@ export default {
}) })
}, },
/* /*
*
* */
changeConvoke(val){
if(!!val){
this.hasError = false
}
},
/*
* 取消 * 取消
* */ * */
handleCancel() { handleCancel() {
@@ -706,33 +722,38 @@ export default {
/* /*
* 根据会议类型返回不同的会议新增与编辑接口 * 根据会议类型返回不同的会议新增与编辑接口
* */ * */
createUrlByMeetingType(meetingType){ createUrlByMeetingType(meetingType) {
switch (String(meetingType)){ switch (String(meetingType)) {
// 工作组会议 // 工作组会议
case '1':return { case '1':
add:'/meeting/workGroupMeeting/add', return {
edit:'/meeting/workGroupMeeting/edit' add: '/meeting/workGroupMeeting/add',
} edit: '/meeting/workGroupMeeting/edit'
}
// 标协会议 // 标协会议
case '2':return { case '2':
add:'/meeting/standardsMeeting/add', return {
edit:'/meeting/standardsMeeting/edit' add: '/meeting/standardsMeeting/add',
} edit: '/meeting/standardsMeeting/edit'
}
// 国际研讨会 // 国际研讨会
case '3':return { case '3':
add:'/meeting/internalMeeting/add', return {
edit:'/meeting/internalMeeting/edit' add: '/meeting/internalMeeting/add',
} edit: '/meeting/internalMeeting/edit'
}
// 其他会议 // 其他会议
case '4':return { case '4':
add:'/meeting/otherMeeting/add', return {
edit:'/meeting/otherMeeting/edit' add: '/meeting/otherMeeting/add',
} edit: '/meeting/otherMeeting/edit'
}
// 分标委会议 // 分标委会议
case '5':return { case '5':
add:'/meeting/committeeMeeting/add', return {
edit:'/meeting/committeeMeeting/edit' add: '/meeting/committeeMeeting/add',
} edit: '/meeting/committeeMeeting/edit'
}
} }
}, },
/* /*
@@ -791,8 +812,8 @@ export default {
// 会议费用为 0控制二维码显示隐藏 // 会议费用为 0控制二维码显示隐藏
if (value === '0.00') { if (value === '0.00') {
this.QRcodeBool = false this.QRcodeBool = false
// 如果付款二维码有值 需要清空 // 如果付款二维码有值 需要清空
if(this.form.getFieldValue('paymentQrCode')){ if (this.form.getFieldValue('paymentQrCode')) {
this.form.resetFields('paymentQrCode') this.form.resetFields('paymentQrCode')
} }
} else { } else {
@@ -27,7 +27,7 @@ export default {
rules: [ rules: [
{ required: true, message: '请选择省市!' }, { required: true, message: '请选择省市!' },
], ],
validateTrigger:['blur','change'] validateTrigger:['change']
}, },
address:{ address:{
rules: [ rules: [