1,html里的结构是这样的
Modify是循环的数组
problemMedicine是问题名称的级联选择器的所有数据,在data里是有定义的,如下:
problemMedicine: [{
value: '1',
label: '药品问题',
children: []
},
{
value: '0',
label: '非药品问题',
disabled: false,
},
], //不合理问题药品
QuestionType是问题代码下拉框的所有数据
<div class="nva_r_modify_t" v-for="data in Modify">
<div class="modifyClass">
<div class="Question_t">
<el-checkbox v-model="data.Question"></el-checkbox>
</div>
<div class="modify_b">
<div class="problemClass">
<span style="color:#333;">问题名称:</span>
<el-cascader v-model="data.problem" :options="problemMedicine"
style="width:300px;" @change="Cproblem"
:disabled="QuestionNameDisabled(data.problem,data.question)"
:props="{ expandTrigger: 'hover' }" placeholder="请选择问题药品"
:show-all-levels="false">
</el-cascader>
</div>
<div class="problemClass">
<span style="color:#333;">问题代码:</span>
<el-select v-model="data.question" placeholder="请选择问题代码"
@change="Cproblem2" style="width:300px;height:36px;">
<el-option v-for="ret in QuestionType"
:disabled="Array.isArray(data.problem) == true ? CtrolCodeDisabled2(ret.disabled,data.problem) : CtrolCodeDisabled(data.problem,ret.Code)"
:key="ret.Code" :label="ret.Code+' '+ret.Name" :value="ret.Code">
</el-option>
</el-select>
</div>
</div>
2,现在如果已添加了A药品1-1代码,那么A药品的级联框要禁用,只能修改1-1的代码。然后如果新加药品的话,不能禁用新加的药品级联框,所以要区分是已存在的药品,还是新加的药品
2-1:在 watch里深度监听newModify,在computed里返回到页面newModify() {
return JSON.parse(JSON.stringify(this.Modify))
},
newModify: {
deep: true, // 递归监听Modify的变化
handler(newData, oldData) {
this.DisableArray2 = []
newData.map((item, index) => {
if (item.problem) {
let isarray = Array.isArray(item.problem) //因为新加的问题的problem是个数组,判断是不是数组
if (isarray == true) { //是数组的话,让problem==null,就在QuestionNameDisabled方法里判断的时候,可以跟已存在的不一样,就不会禁用新加的
item.problem = null
}
this.DisableArray2.push(item.problem + item.question)
}
})
}
this.DisableArray2这个数组拿到的就是所有的问题名称和问题代码,如果是新加的问题名称就是null
2-2:在methods:里QuestionNameDisabled 这个方法在html的问题名称的:disabled里传过来的两个参数,就是当前操作的药品。比较当前的药品跟this.DisableArray2里面的是不是一样的,如果是一样的就是已存在的药品,就可以禁用,不一样的就是新加的,就不禁用。
//问题名称禁用 Code 问题名称绑定的ID ID问题代码绑定的ID
QuestionNameDisabled (Code,ID) {
let IsDisabled = false
this.DisableArray2.map(item => {
if(item === Code + ID){
IsDisabled = true
}
})
return IsDisabled
},
3,下一步是已存在的禁用一样的问题代码,其实初始点进来不添加新问题的时候,要禁用同样问题名称下的问题代码,逻辑跟禁用问题代码差不多。
3-1:在 watch里深度监听newModify里面拿到要对比的数组,跟当前的做比对,如果问题名称和问题代码全部一样,就禁用问题代码,
newModify: {
deep: true, // 递归监听Modify的变化
handler(newData, oldData) {
this.DisableArray = []
newData.map((item, index) => {
if (item.Question) {
this.DisableArray.push(item.problem + item.question)
}
3-2:拿到的this.DisableArray这个数组就是所有的问题名称加问题代码的组合。在在methods:里CtrolCodeDisabled 这个方法在html的问题代码的:disabled里传过来的两个参数,(这里判断是不是数组,是数组的话就是新加的问题药品,走前一个方法,反之走后一个方法)就是当前操作的药品。比较当前的药品跟this.DisableArray里是否一样,一样就禁用问题代码。
//问题代码禁用 Code 问题名称绑定的ID ID问题代码绑定的ID
CtrolCodeDisabled(Code, ID) {
let IsDisabled = false
this.DisableArray.map(item => {
if(item === Code + ID){
IsDisabled = true
}
})
return IsDisabled
}
4,
那么再点击添加一条新药品的时候,已存在的问题名称禁用,新加的问题名称不禁用(以上2已经实现)。例如:已存在的是A的1-1,那么新加的时候,如果问题名称也选择了A,那么问题代码的1-1就要禁用,其他问题代码都可以选择,如果选择了B,所有问题代码都可以选择。
4-1:首先还是在watch里深度监听newModify里面拿到要对比的数组,this.DisableArray3是所有的问题名称。
newModify: {
deep: true, // 递归监听Modify的变化
handler(newData, oldData) {
this.DisableArray3 = []
newData.map((item, index) => {
if (item.Question) {
this.DisableArray3.push(item.problem) //用来对比新加的问题名称跟已存在的 然后禁用一样名称下的问题代码
}
4-2:药品名称的级联框发生改变的时候触发
html里面是
@change="Cproblem"
方法里面
//点评结果问题名称变化触发
Cproblem(data, item) {
//data就是当前的药品数据
this.shifougaibian1 = true;
this.Modify.forEach((item) => {
if (data == item.problem) {
item.Question = true
}
//以下是如果是数组就是新加的问题,如果问题名称发生改变,就清空下面的问题代码,(防止已存在了A的1-1,B的1-2,新加的时候选了A的1-2,然后把问题名称换成B,那样就成了B的1-2,就会被禁用了)
if (Array.isArray(item.problem)) {
item.question = ""
}
})
//以下的是每次改变问题名称的时候,都让disabled = false
this.QuestionType.forEach((item, idx) => { //拿到同样proplem的问题代码,就是要禁用的问题代码
item.disabled = false
})
if (data[0] == 0) { // 0是非问题药品
data = data
}else {
data = data.slice(1) //新加的是数组,第一项是1,是无用的,所以截取掉
}
this.Modify.forEach((itt) => {
if (Array.isArray(itt.problem)) { //一次添加两个新的问题的情况
if (itt.problem[0] == 0) {
itt.problem = itt.problem
}else if (itt.problem.length > 1){
itt.problem = itt.problem.slice(1)
}else {
itt.problem = itt.problem //一次添加两个新的问题的情况
}
}
if (data == itt.problem.toString()) { //转换成字符比较
this.QuestionType.forEach((item, idx) => { //拿到同样proplem的问题代码,就是要禁用的问题代码
if (itt.question === item.Code) {
item.disabled = true
}
})
}
})
以上的就改变了this.QuestionType里面的disabled 的值,在html的 CtrolCodeDisabled2这个方法里面传了disabled 的值,(其实直接写disabled 就可以,我懒得改了)
//新加的问题,问题名称相同时候,问题代码要禁用
CtrolCodeDisabled2(disabled,data) {
return disabled
}
完成!!!