修改和添加的时候,来禁用已选的

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
      }

完成!!!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值