需求描述

消息类型为跳转外部链接的时候，活动地址为必填项，否则为非必填项

消息类型为跳转外部链接

消息类型为其他

如果使用elementUI 的表单验证rules来校验的话，经过测试，elementui在组件初始化后校验规则就定型了，切换是没有效果的

解决方案

第一步：去掉"活动地址”中rules校验的规则，即target

第二步：在“活动地址”的form-item上添加required属性

第三步：计算属性，计算给required赋值的属性

效果如下图

第四步：设置自定义提示

使用自定义函数控制流程，把“活动地址”的校验重新加入rules里面

然后设置validateName函数，根据需求去做一些自己的判断

贴上完整代码

export default {

name: "add-doctor-push-notification",

data () {

// 验证活动地址的函数

let validateName = (rule, value, callback) => {

if (this.isShowTarget) {

if (value) {

callback()

} else {

callback(new Error("请输入活动地址"))

}

} else {

callback()

}

};

let validateMobile = (rule, value, callback) => {

if (this.isShowExecuteRange) {

if (value) {

callback()

} else {

callback(new Error("请输入手机号"))

}

} else {

callback();

}

}

return {

form: {

projectType: "dr", // app信息 pt患者端 dr医生端

content: "", //消息内容

executeRange: "all", //推送范围 all所有 assign指定

executeRangeRef: "", // 推送范围对应的扩展信息

executeTime: "", //触发时间

id: "", //主键

logo: "", //logo

target: "", //相关信息

targetType: "", // 消息类型 url_address 外部地址引用;only_show 不跳转;homePage 首页

title: "" //消息标题

},

checkTarget: "",

checkExecuteRange: "",

options: [{

value: 'url_address',

label: '跳转外部链接'

}, {

value: 'only_show',

label: '不跳转'

}, {

value: 'homePage',

label: '首页'

}],

rules:{

title: [

{ required: true, message: '请输入消息标题', trigger: 'blur' },

{ min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }

],

content: [

{ required: true, message: '请输入消息内容', trigger: 'blur' },

{ min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }

],

targetType: [

{ required: true, message: '请输入消息类型', trigger: 'blur' },

{ min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }

],

target: [

{ validator: validateName }

],

executeTime: [

{ required: true, message: '请输入触发时间', trigger: 'blur' },

{ min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }

],

executeRange: [

{ required: true, message: '请输入触发范围', trigger: 'blur' },

{ min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }

],

executeRangeRef: [

{ validator: validateMobile }

]

}

}

},

computed: {

isShowTarget () {

return this.form.targetType ==='url_address'

},

isShowExecuteRange () {

return this.form.executeRange ==='assign'

}

},

created () {

this.init()

},

mounted () {

this.$nextTick(() => {

console.log('mounted')

})

},

methods: {

// 初始化

init () {

if (this.$route.query.id) {

this.getPushNotificationDetail(this.$route.query.id)

}

console.log('---------init--')

},

// 新增消息推送按钮事件

addMsgPush () {

this.$refs.form.validate((valid) => {

if (valid) {

this.$messageBox.confirm('确定保存编辑项?', '提示', {

confirmButtonText: '确定',

cancelButtonText: '取消',

type: 'warning'

}).then(async () => {

let param = {...this.form}

if (this.$route.query.id) {

this.savePushNotification (param, this.$route.query.id, this.$configInfo.httpType.put)

} else {

this.savePushNotification (param, "", this.$configInfo.httpType.post)

}

}).catch(() => {

this.$message({

type: 'info',

message: '已取消保存'

})

})

} else {

return false;

}

});

},

// 保存消息推送

async savePushNotification (param, query, type) {

try {

let dataResult = await this.$asyncAjax.getPushNotification(param, query, type)

this.$message({

type: 'success',

message: '保存成功'

})

this.$router.push({

path: '/doctor-push-notification'

})

console.log(dataResult)

} catch (e) {

console.log(e)

}

},

// 获取详情

async getPushNotificationDetail (id) {

try {

let dataResult = await this.$asyncAjax.getPushNotification("", id, this.$configInfo.httpType.get)

console.log(dataResult)

this.form = {...dataResult}

} catch (e) {

console.log(e)

}

},

// 下拉框选中的值

selectChange (val) {

switch (val) {

case "url_address":

break

default:

this.form.target = ""

}

},

// 单选按钮选中的值

radioChange (val) {

switch (val) {

case "assign":

break

default:

this.form.executeRangeRef = ""

}

}

}

}

.section-layout{

background-color: #fff;

box-sizing: border-box;

padding-bottom: 100px;

}

.section-layout form {

// padding-left: 100px;

padding: 10px 100px 10px;

}

.button-group{

position: fixed;

bottom: 0;

width: calc(100% - 300px);

z-index: 999;

box-sizing: border-box;

background-color: #fff;

text-align: right;

border-top: 1px solid #eee;

padding-top: 20px;

padding-bottom: 20px;

padding-right: 20px;

}