<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()">×</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>