大盒嵌套小盒点击事件顺序

如上图，点击 +/-按钮的事件触发顺序为：+/-按钮 =》 大框事件

问题：当点击+/- ，数值改变， 之后触发了大框的点击事件，大框带的值又赋值，值恢复原样；

解决思路：点击大框后，再触发小框事件，

解决：给小框事件添加一个定时器，settimeout---10ms

<template>
  <div class="template-paramconfig-container">
  
   
  
    <div class="paramconfig-content-block">
      <el-row :gutter='20'>
        <el-col :span='12'>
          <div class="paramconfig-left">

            <el-form :inline="true" :model="configform" class="demo-form-inline">

            

            <el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
             
              <el-table-column label="偏离值" align='center' v-if="configform.standard=='3'">
                <template slot-scope="scope">
                  <div v-for="item in scope.row.paramList" :key="item.paramId">
                    <div class="lritem"><span>{{item.paramName}}：</span>

                      <Count :paramobj='item' :itemid='scope.row.itemId' @objchange='objchange' />
                    </div>

                  </div>

                </template>
              </el-table-column>
              
            </el-table>
           
          </div>
        </el-col>
       
      </el-row>
    </div>
   
  </div>
</template>

<script>

import Count from "../component/count.vue";

export default {
  name: "V2Paramconfig",
  components: {
 
    Count,
  },
  data() {
    return {
      isbtn: false,
      paramsetimg: undefined,
      rangedesc: "",
      imageText: "",
      imageText1: "",
      imageText2: "",
      ischange: false,
      //
      warndialog: {
        visible: false,
        tip: "",
        projectId: this.$route.query.projectId,
      },
      title: "军事通用五项考核-",
      configform: {
        standard: undefined,
        method: undefined,
        min: 0,
        sec: 0,
        weight: "100",
      },

      tableData: [],
      currentRow: null,

      project: {},
      weightbtn: "primary",
      allsdParams: null,
      paramchange: [], //参数变动的值
      newproject: {},
      // btnok: true,
      btnchange: false,
      changeid: undefined,
    };
  },

  mounted() {},
  created() {
    this.project = this.$route.query;
    this.configform.standard = this.project.mode;
    this.configform.method = this.project.difficulty;
    // console.log(this.project, "this.project");
    this.title = this.title + this.project.name;
    this.handleGetsdparams(this.project.projectId);
    this.handleGetCurrentsd();
    this.initDicts();
    // this.handleCurrentChange()
  },

  methods: {
   
    //保存更改
    async handleSave() {
      let query;
      if (this.configform.standard == "3") {
        //自定义
        query = {
          templateId: sessionStorage.getItem("tempid"),
          projectId: this.project.projectId,

          difficulty: this.configform.standard,
          mode: this.configform.method,
          timeLimit: this.configform.min * 60 + this.configform.sec,
          itemList: this.paramchange,
        };
      } else {
        query = {
          templateId: sessionStorage.getItem("tempid"),
          projectId: this.project.projectId,

          difficulty: this.configform.standard,
          mode: this.configform.method,
          timeLimit: this.configform.min * 60 + this.configform.sec,
        };
      }
      // console.log(query,'qqqquery');
      // return false;
      let res = await modifyParams(JSON.stringify(query));
      // console.log(res, "rrrrrrrrrrrrrrrrrres");
      if (res.code == 200) {
        this.$message.success("保存成功");
      }
    },
    // 切换评判标准
    handleChangesd(item) {
      this.newproject.mode = item;
      this.paramchange = [];

      this.allsdParams.forEach((v) => {
        if (v.difficulty == Number(item)) {
          this.tableData = v.itemList;
          // console.log(this.tableData, "this.tableData");
          this.tableData.forEach((v) => {
            let obj = {
              itemId: v.itemId,
              weight: v.weight,
              paramList: [],
            };
            v.paramList.forEach((item) => {
              let obj1 = {
                paramId: item.paramId,
                param: item.param,
                deviate: item.deviate ? item.deviate : 0,
              };
              obj.paramList.push(obj1);
            });

            this.paramchange.push(obj);
          });
        }
      });
      this.setCurrent(this.tableData[0]);
    },
    // 权重配置
    handleWeightchange(row) {
      // console.log(row, "ooiiiiii");
      this.paramchange.forEach((v) => {
        if (v.itemId == row.itemId) {
          v.weight = row.weight;
        }
      });
    },
    //恢复默认配置
    restoreConfig() {
      this.warndialog.visible = true;
      this.warndialog.tip = `此操作将把课目配置恢复为标准模式！是否继续操作？`;
    },
    closeWarn(data) {
      this.warndialog.visible = data;
    },
    //初始化字典表
    initDicts() {
      this.getDicts("as_template_difficulty").then((res) => {
        if (res.code == 200) {
          this.standardOptions = res.data;
          // console.log(this.standardOptions,'this.standardOptions')
        }
      });
      this.getDicts("as_template_mode").then((res) => {
        if (res.code == 200) {
          res.data.forEach((v) => {
            if (Number(v.dictValue) == this.project.mode) {
              this.methodOptions.push(v);
            }
          });
        }
      });
    },
    //获取评判标准参数
    async handleGetsdparams(id) {
      let res = await getConfigparams(id);
      if (res.code == 200) {
        this.allsdParams = res.data;
        // console.log(this.allsdParams, "all");
      }
    },
    // 获取当前的评判标准
    async handleGetCurrentsd() {
      let templateId = sessionStorage.getItem("tempid");
      let projectId = this.project.projectId;
      let res = await getCurrentParams(templateId, projectId);
      if (res.code == 200) {
        this.configform.standard = String(res.data.difficulty);
        this.configform.method = String(res.data.mode);
        this.tableData = res.data.itemList;
        this.setCurrent(this.tableData[0]);
        this.handleTime(res.data.timeLimit);
        this.tableData.forEach((v) => {
          let obj = {
            itemId: v.itemId,
            weight: v.weight,
            paramList: [],
          };
          v.paramList.forEach((item) => {
            let obj1 = {
              paramId: item.paramId,
              param: item.param,
              deviate: item.deviate,
            };
            obj.paramList.push(obj1);
          });
          this.paramchange.push(obj);
        });
      }
    },
    handleChange(value) {
      console.log(value, "value");
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
     // 自定义偏离值
    objchange(data) {
      // this.btnchange = !this.btnchange
      if (data.itemId) {
        this.changeid = data.itemId;
        console.log(this.changeid, " this.changeid");
        // console.log(9998)
        //  this.btnchange = !this.btnchange
      }
      console.log("自定义偏离", data);
      this.ischange = true;
      this.imageText1 = this.imageText2;
      // this.imageText = this.imageText2;
   
      this.paramchange.forEach((v) => {
        if (v.itemId == data.itemId) {
          // console.log(789);
          v.paramList.forEach((item) => {
            if (item.paramId == data.paramId) {
              item.param = data.newparam;
              item.deviate = data.deviatenum;
            } else {
              item.deviate = 0;
            }
          });

          if (v.paramList[0]) {
            if (this.imageText1.indexOf("{{0}}") != -1) {
              this.imageText1 = this.imageText1.replace(
                "{{0}}",
                v.paramList[0].param
              );
            }
          }
          if (v.paramList[1]) {
            if (this.imageText1.indexOf("{{1}}") != -1) {
              this.imageText1 = this.imageText1.replace(
                "{{1}}",
                v.paramList[1].param
              );
            }
          }
         
        } else {
          v.paramList.forEach((item) => {
            item.deviate = 0;
          });
        }
      });
      console.log(this.paramchange,'小盒子ppp')


      // console.log(this.paramchange, "paramchangeparamchangeparamchange")
    },
    handleCurrentChange(val) {
      // this.setCurrent(val);
// this.ischange = false;

      this.currentRow = val;
      console.log("大盒子", this.currentRow);

      this.rangedesc = this.currentRow.remark;
      this.paramsetimg = this.currentRow.image;
      this.imageText = this.currentRow.imageText;
      this.imageText1 = this.currentRow.imageText;
      this.imageText2 = this.currentRow.imageText;
      console.log(this.imageText,this.imageText1,this.imageText2)
      // this.objchange(data);
      console.log(this.paramchange,'大盒子ppp')
      if (val.paramList[0]) {
        if (this.imageText.indexOf("{{0}}") != -1) {
          this.imageText = this.imageText.replace(
            "{{0}}",
            val.paramList[0].param
          );
        }
      }
      if (val.paramList[1]) {
        if (this.imageText.indexOf("{{1}}") != -1) {
          this.imageText = this.imageText.replace(
            "{{1}}",
            val.paramList[1].param
          );
        }
      }
      //  if (val.paramList[0]) {
      //   if (this.imageText1.indexOf("{{0}}") != -1) {
      //     this.imageText1 = this.imageText1.replace(
      //       "{{0}}",
      //       val.paramList[0].param
      //     );
      //   }
      // }
      // if (val.paramList[1]) {
      //   if (this.imageText1.indexOf("{{1}}") != -1) {
      //     this.imageText1 = this.imageText1.replace(
      //       "{{1}}",
      //       val.paramList[1].param
      //     );
      //   }
      // }
      // this.imageText=this.imageText1
      console.log(this.imageText,this.imageText1,this.imageText2)
    },
    // 时间处理器
    handleTime(t) {
      this.configform.min = Math.floor(t / 60);
      this.configform.sec = t - Math.floor(t / 60) * 60;
    },
  },
  watch: {
    paramchange:{
      handler(val) {
        // console.log(val,'ppppppppppppppppp')
        // this.imageText = this.imageText1
      },
      deep:true,
      immediate:true
    }
    // changeid: {
    //   handler(val) {
    //     // console.log(val, "vvv");
    //     // console.log(this.paramchange, "this.paramchange");
    //     // this.setCurrent(val)
    //   },
    //   deep: true,
    //   immediate: true,
    // },
    // imageText:{
    //   handler(val) {
    //     console.log(val,'imageText')
    //   },
    //   deep: true,
    //   immediate: true,
    // },
    //     imageText1:{
    //   handler(val) {
    //     console.log(val,'imageText1')
    //   },
    //   deep: true,
    //   immediate: true,
    // },
    //     imageText2:{
    //   handler(val) {
    //     console.log(val,'imageText2')
    //   },
    //   deep: true,
    //   immediate: true,
    // }
  },
};
</script>

<style lang="scss" scoped>
.template-paramconfig-container {
  padding: 10px 20px;
  .paramconfig-title-block {
    height: 130px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    margin-top: 10px;
    padding: 30px 20px;
    .title {
      font-size: 24px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #222222;
      margin-bottom: 10px;
    }
    .desc {
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 450;
      color: #333333;
      line-height: 28px;
      span {
        font-weight: 500;
      }
    }
  }
  .param-set {
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 26px;
    margin: 20px 0 10px;
  }
  .paramconfig-content-block {
    //   height: 710px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    margin-top: 10px;
    padding: 20px;
    .paramsetimg {
      width: 100%;
      height: 600px;
      background: #f3f7ff;
      border-radius: 8px;
      display: flex;
      flex-direction: column;

      padding: 8px;
      .desc {
        width: 100%;
        padding: 16px 20px;
        color: #9fc1fd;
        .title {
          font-size: 16px;
        }
        .rangedesc {
          font-size: 14px;
        }
      }
      .imgs {
        width: 100%;
        height: 100%;
        position: relative;
        img {
          max-width: 100%;
          // width: 100%;
          max-height: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
        }
        .tips {
          width: 100%;
          height: 100%;
          position: relative;
          .imagetext {
            position: absolute;
            left: 50%;
            transform: translateX(110px);
            top: 34%;
            height: 60px;
            padding: 16px;
            background: #fff;
            color: #4d8cfb;
            font-size: 20px;
            border-radius: 30px;
          }
        }
      }
    }
    .timeunit {
      display: inline-block;
      margin-left: 8px;
    }
  }
  .configbtns {
    width: 100%;
    margin-top: 20px;
    text-align: center;
    .el-button {
      width: 120px;
    }
  }
  .resetbtn {
    width: 100%;
    text-align: right;
    margin-bottom: 20px;
  }
  .lritem {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>
<style lang="scss" >
.template-paramconfig-container {
  .el-input-number.el-input-number--medium.is-controls-right {
    width: 70px;
  }
  .el-input-number__decrease,
  .el-input-number__increase {
    width: 18px;
    background: #fff;
    border: none !important;
  }
  .el-input.el-input--medium .el-input__inner {
    padding-right: 18px;
  }
  .el-table th {
    height: 56px;
    background: #f6f6f6;
    // border-radius: 8px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .el-table thead th:first-child,
  .el-table thead th:nth-child(4) {
    border-radius: 8px;
  }
  .el-table tr td {
    border: none;
  }
  .el-table tr {
    border-radius: 8px;
    border: 1px solid #f6f6f6;
    min-height: 90px;
    height: 90px;
  }
  //   .el-table__row.current-row{
  // z-index: 100;
  // position: relative;
  //   }
}
</style>

<template>
  <div class="count-container">

    <el-input v-model="paramobj.range">
      <template slot="append">
        <div class="btns">
          <el-button type="primary" class="btnitem"  @click="handleOpe('+', paramobj)">+</el-button>
          <el-button type="primary" class="btnitem"  @click="handleOpe('-', paramobj)">-</el-button>
        </div>
      </template>
    </el-input>

  </div>
</template>

<script>
export default {
  name: "YnuPhysicalWebCount",
  props: {
    paramobj: {
      type: Object,
    },
    itemid: {
      type: Number,
    },
    // isbtn: {
    //   type: Boolean,
    // },
  },
  data() {
    return {
      num: 1,
      num1: 1,
      newparamList: [],
      obj: {
        paramId: this.paramobj.paramId,
        newparam: this.paramobj.param,
        deviatenum: 0,
        itemId: this.itemid,
      },
      // btnok:false
      // btnok: this.isbtn ? false:true,
    };
  },

  mounted() {},

  methods: {
    handleOpe(ope, paramobj) {
      setTimeout(() => {
      console.log("小盒子",paramobj);
      if (ope == "+" && this.obj.newparam < paramobj.maxParam) {
        let i = String(paramobj.range).indexOf(".");
        let dotnum = 0;
        if (i != -1) {
          let str = String(paramobj.range).slice(i + 1);
          dotnum = str.length;
        }
        let deviatenum;
        let newparam;
        newparam = (this.obj.newparam + this.num * paramobj.range).toFixed(
          dotnum
        );
        deviatenum = (Number(newparam) - Number(this.paramobj.param)).toFixed(
          dotnum
        );
        if (Number(newparam) > paramobj.maxParam) {
          return false;
        }
        this.obj.deviatenum = Number(deviatenum);
        this.obj.newparam = Number(newparam);
        // console.log(this.obj, "this.obj");
      } else if (ope == "-" && this.obj.newparam > paramobj.minParam) {
        // console.log("-----");
        let i = String(paramobj.range).indexOf(".");
        let dotnum = 0;
        if (i != -1) {
          let str = String(paramobj.range).slice(i + 1);
          dotnum = str.length;
        }
        // console.log(dotnum, "dotnum");
        let deviatenum;
        let newparam;
        newparam = (this.obj.newparam - this.num * paramobj.range).toFixed(
          dotnum
        );
        deviatenum = (Number(newparam) - Number(this.paramobj.param)).toFixed(
          dotnum
        );
        // console.log(newparam, deviatenum);
        if (Number(newparam) < paramobj.minParam) {
          return false;
        }
        this.obj.deviatenum = Number(deviatenum);
        this.obj.newparam = Number(newparam);
        // console.log(this.obj, "this.obj");
      }
      this.$emit("objchange", this.obj);
            }, 10);
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
.count-container {
  .btns {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-end;
    height: 100%;
    .btnitem {
      width: 20px;
      height: 15px;
      padding: 0;
      margin: 0;
      background: #4d8cfb;
      display: inline-block;
      color: #fff;
      border-radius: 2px;
      cursor: pointer;
    }
    // .btnok {
    //   opacity: 0.8;
    //   width: 20px;
    //   height: 15px;
    //   padding: 0;
    //   margin: 0;
    //   // background: #4d8cfb;
    //   background: red;
    //   display: inline-block;
    //   color: #fff;
    //   border-radius: 2px;
    //   cursor: pointer;
    // }
  }

  .big {
    width: 200px;
    height: 50px;
    border: 1px solid #ccc;
  }
  .small {
    width: 100px;
    height: 25px;
    border: 1px solid red;
  }
}
</style>
<style lang="scss">
.count-container {
  .el-input-group__append {
    padding: 0;
  }
  .el-input.el-input--medium.el-input-group.el-input-group--append {
    width: 62px;
    height: 32px;
    border-radius: 2px;
  }
  .el-input.el-input--medium .el-input__inner {
    padding: 0 !important;
    text-align: center;
  }
}
</style>