根据后台数据多个数组之间实现区间验证

<template>
  <el-dialog
      :title.sync="title"
      :visible.sync="showDialog"
      width="56%"
      :before-close="handleClose"
      :close-on-click-modal="false"
  >
    <el-form :model="ruleScoringFrom" :rules="ruleScoringFromRule" ref="ruleScoringRef" label-width="330px">
      <el-col :span="24">
        <el-form-item label="问题率(%)" prop="problems" required>
          <input-range :numberRange="ruleScoringFrom.problems" :connectText="'~'"
                       :width="'100%'"
                       @blur="changeInput" @clear="clear"/>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="得分" prop="score">
          <el-input type="number"
                    v-model="ruleScoringFrom.score"
                    placeholder="得分"
                    max="100"
                    min="0"
                    οninput="if(value.length > 2) if(value>100) value = 100"
                    οnchange="value = Math.max(0, parseInt(value))"/>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="优先级" prop="priority">
          <el-input type="number"
                    v-model="ruleScoringFrom.priority"
                    placeholder="优先级"
                    min="0"
                    οnchange="value = Math.max(0, parseInt(value))"
                    οninput="if(value.length > 5) value = value.slice(0,5)"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="说明" prop="description">
          <el-input type="textarea" :rows="3" v-model="ruleScoringFrom.description" placeholder="说明(备注)"/>
        </el-form-item>
      </el-col>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="saveForm" v-if="!disabled">保存</el-button>
      <el-button @click="handleClose">关闭</el-button>
    </div>

  </el-dialog>
</template>

<script>
import qualityRuleScoringService from "service/indicator/QualityRuleScoringService";
import inputRange from "components/inputRange/input-range";


export default {
  name: "indicator-add",
  props: ["title", "callback"],
  components: {inputRange},
  data() {
    return {
      showDialog: false,
      disabled: false,
      ruleScoringFrom: {
        problemMin: 0,
        problemMax: 0,
        score: 0,
        priority: 0,
        problems: [0, 0]
      },
      ruleScoringList: [],
      ruleScoringFromRule: {
        score: [{required: true, message: "得分不能为空", trigger: "blur"}],
        problems: [{required: true, message: "问题率不能为空", trigger: "blur"}],
        priority: [{required: true, message: "优先级不能为空", trigger: "blur"}],
      },
      isCheck: true
    };
  },
  methods: {
    //区间回调
    changeInput(numberRange) {
      this.ruleScoringFrom.problemMin = parseInt(numberRange[0])
      this.ruleScoringFrom.problemMax = parseInt(numberRange[1])
      this.checkValidate();
    },
    //区间验证
    checkValidate() {
      if (this.ruleScoringFrom.problemMin >= this.ruleScoringFrom.problemMax) {
        this.$message({
          message: "区间不规范:左边起点必须小于右边终点",
          type: 'warning'
        });
        this.isCheck = false
        return;
      }
      if (this.ruleScoringFrom.problemMax > 100) {
        this.$message({
          message: "区间不规范:最大值不能超过100%",
          type: 'warning'
        });
        this.isCheck = false
        return;
      }
      for (let i = 0; i < this.ruleScoringList.length; i++) {
        if (this.ruleScoringFrom.problemMin <= parseInt(this.ruleScoringList[i].problemMax)) {
          this.$message({
            message: "区间不规范:区间不能重复",
            type: 'warning'
          });
          this.isCheck = false
          return;
        }
      }
    },
    //清空
    clear(numberRange) {
      this.ruleScoringFrom.problems = numberRange
      this.ruleScoringFrom.problemMin = 0
      this.ruleScoringFrom.problemMax = 0
      this.ruleScoringFrom = JSON.parse(JSON.stringify(this.ruleScoringFrom));
    },
    //初始化
    async init(obj, type) {
      this.showDialog = true
      await this.getRuleScoringList()
      switch (type) {
        case "add":
          this.disabled = false
          this.ruleScoringFrom.priority = Number(this.ruleScoringList[this.ruleScoringList.length - 1].priority) + 1
          this.ruleScoringFrom = JSON.parse(JSON.stringify(this.ruleScoringFrom));
          break
        case "edit":
          this.disabled = false
          await this.getRuleScoringFrom(obj.id)
          this.ruleScoringFrom.problems = [this.ruleScoringFrom.problemMin, this.ruleScoringFrom.problemMax]
          this.ruleScoringFrom = JSON.parse(JSON.stringify(this.ruleScoringFrom));
          break
        default:
          this.disabled = true
          break
      }
    },
    //获取所有区间
    async getRuleScoringList() {
      const res = await qualityRuleScoringService.queryList()
      if (res.status !== 200) {
        throw new Error("接口请求失败, status: " + res.status);
      }
      let objlist = res.data
      this.ruleScoringList = objlist
    },
    //根据id查询
    async getRuleScoringFrom(id) {
      const res = await qualityRuleScoringService.queryById({id: id})
      if (res.status !== 200) {
        throw new Error("接口请求失败, status: " + res.status);
      }
      this.ruleScoringFrom = res.data
    },
    //保存表单
    saveForm() {
      this.isCheck = true
      this.checkValidate();
      if (this.isCheck) {
        // 表单校验
        this.$refs.ruleScoringRef.validate(valid => {
          if (valid) {
            qualityRuleScoringService.save(this.ruleScoringFrom).then(({data}) => {
              if (data.code == 0) {
                this.$message({
                  message: '保存成功!',
                  type: 'success'
                });
                this.callback();
                this.handleClose()
              }
            })
          }
        });
      }
    },
    //关闭弹出框
    handleClose() {
      this.$refs.ruleScoringRef.resetFields();
      this.showDialog = false;
    },
  }
  ,
}
;
</script>

<style lang="scss" scoped></style>

input-range 组件

<template>
  <div class="mt-input__ranger"
       :class="{'mt-input__ranger-mini': size==='mini', 'mt-input__ranger-middle': size==='middle', 'mt-input__ranger-large': size==='large', 'is-focus': isFocus}"
       :style="{width: width}">
    <span class="pre-label">
      <img v-if="preLabelIcon" :src="preLabelIcon" alt="">
    </span>
    <div class="pre-wrapper">
      <input type="text"
             :placeholder="prePlaceholder"
             v-model="numberRange[0]"
             @input="numberInput"
             @focus="isFocus = true"
             @blur="numberBlur"
             @keyup=" $event.currentTarget.value = $event.currentTarget.value.replace(/[^\d]/g, '')"
      >
    </div>
    <span class="connect">{{ connectText }}</span>
    <div class="append-wrapper">
      <input type="text"
             :placeholder="appendPlaceholder"
             v-model="numberRange[1]"
             @input="numberInput"
             @focus="isFocus = true"
             @blur="numberBlur"
             @keyup=" $event.currentTarget.value = $event.currentTarget.value.replace(/[^\d]/g, '')"
      >
    </div>
    <div class="clear-wrapper" v-if="numberRange.length>0">
      <span class="clear" @click="clear()">&times;</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isFocus: false
    }
  },
  props: {
    width: {type: String, default: '300px'},
    size: {type: String, default: 'middle'},
    preLabelIcon: {type: String, default: ''},
    prePlaceholder: {type: String, default: '开始'},
    connectText: {type: String, default: '至'},
    appendPlaceholder: {type: String, default: '结束'},
    numberRange: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    numberInput(ev) {
      let self = this;
      self.$emit('input', self.numberRange);
    },
    numberBlur(ev) {
      let self = this;
      self.$emit('blur', self.numberRange);
    },
    clear() {
      let self = this;
      self.numberRange = [];
      self.$emit('clear', self.numberRange);
    }
  }
}
</script>
<style scoped>
input {
  border: none;
  outline: none;
  width: 100%;
  height: 100%;
  display: block;
  text-align: center;
  box-sizing: border-box;
}

:-moz-placeholder {
  color: #C0C4CC;
}

::-moz-placeholder {
  color: #C0C4CC;
}

input:-ms-input-placeholder {
  color: #C0C4CC;
}

input::-webkit-input-placeholder {
  color: #C0C4CC;
}

.mt-input__ranger {
  border: 1px solid #C0C4CC;
  position: relative;
  transition: border-color .3s ease 0s;
}

.mt-input__ranger-mini {
  height: 28px;
  line-height: 28px;
}

.mt-input__ranger-middle {
  height: 30px;
  line-height: 30px;
}

.mt-input__ranger-large {
  height: 32px;
  line-height: 32px;
}

.append-wrapper, .pre-wrapper {
  float: left;
  height: 100%;
  width: calc((100% - 70px) / 2);
}

.pre-label {
  width: 20px;
  height: 100%;
  float: left;
}

.pre-label img {
  width: 100%;
  height: 100%;
  display: block;
}

.connect {
  float: left;
  width: 20px;
  height: 100%;
  text-align: center;
}

.clear-wrapper {
  width: 30px;
  height: 100%;
  position: absolute;
  right: 0;
  text-align: center;
}

.clear {
  width: 14px;
  height: 14px;
  background: #C0C4CC;
  border-radius: 8px;
  float: left;
  text-align: center;
  line-height: 14px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  position: absolute;
  left: 50%;
  margin-left: -7px;
  top: 50%;
  margin-top: -7px;
  display: none;
}

.clear-wrapper:hover .clear {
  display: block;
}

.is-focus {
  border-color: #aaa;
  transition: border-color .3s ease 0s;
}
</style>