<template>
<myModal
:params="myModalParams"
:modalWidthSize="'small'"
:visible="visible"
@submit="handleOk"
@cancel="handleCancel"
:getContainer="getEle"
destroyOnClose
>
<template v-slot:header><span></span></template>
<template v-slot:body>
<div class="weight-config-box">
<!-- 风险评价等级 -->
<div class="config-section">
<h3>风险评价等级</h3>
<div class="grade-box">
<!-- 优 -->
<div class="excellent">
<div class="text">{{ $ t('优:') }}</div>
<div class="num-box">
<span>分数≤</span>
<a-input
v-model="riskScores.excellent"
@input="e => handleInput(e, 'risk', 'excellent')"
style="width: 100px"
placeholder="0-1"
/>
</div>
<div>(0-1)</div>
</div>
<!-- 良 -->
<div class="good">
<div class="text">{{ $ t('良:') }}</div>
<div class="num-box">
<a-input
v-model="riskScores.goodMin"
@input="e => handleInput(e, 'risk', 'goodMin')"
style="width: 100px"
placeholder="0-1"
/>
<span><分数≤</span>
<a-input
v-model="riskScores.goodMax"
@input="e => handleInput(e, 'risk', 'goodMax')"
style="width: 100px"
placeholder="0-1"
/>
</div>
<div>(0-1)</div>
</div>
<!-- 差 -->
<div class="bad">
<div class="text">{{ $ t('差:') }}</div>
<div class="num-box">
<a-input
v-model="riskScores.bad"
@input="e => handleInput(e, 'risk', 'bad')"
style="width: 100px"
placeholder="0-1"
/>
<span><分数</span>
</div>
<div>(0-1)</div>
</div>
</div>
<!-- 风险评价错误提示 -->
<div v-if="riskErrorMsg" class="error-msg">
<a-alert type="error" :message="riskErrorMsg" banner />
</div>
</div>
<!-- 报警评价等级 -->
<div class="config-section">
<h3>报警评价等级</h3>
<div class="grade-box">
<!-- 优 -->
<div class="excellent">
<div class="text">{{ $ t('优:') }}</div>
<div class="num-box">
<span>分数≤</span>
<a-input
v-model="alarmScores.excellent"
@input="e => handleInput(e, 'alarm', 'excellent')"
style="width: 100px"
placeholder="0-1"
/>
</div>
<div>(0-1)</div>
</div>
<!-- 良 -->
<div class="good">
<div class="text">{{ $ t('良:') }}</div>
<div class="num-box">
<a-input
v-model="alarmScores.goodMin"
@input="e => handleInput(e, 'alarm', 'goodMin')"
style="width: 100px"
placeholder="0-1"
/>
<span><分数≤</span>
<a-input
v-model="alarmScores.goodMax"
@input="e => handleInput(e, 'alarm', 'goodMax')"
style="width: 100px"
placeholder="0-1"
/>
</div>
<div>(0-1)</div>
</div>
<!-- 差 -->
<div class="bad">
<div class="text">{{ $ t('差:') }}</div>
<div class="num-box">
<a-input
v-model="alarmScores.bad"
@input="e => handleInput(e, 'alarm', 'bad')"
style="width: 100px"
placeholder="0-1"
/>
<span><分数</span>
</div>
<div>(0-1)</div>
</div>
</div>
<!-- 报警评价错误提示 -->
<div v-if="alarmErrorMsg" class="error-msg">
<a-alert type="error" :message="alarmErrorMsg" banner />
</div>
</div>
</div>
</template>
</myModal>
</template>
<script>
import myModal from '@/components/scfComponents/modalComponents/modal.vue';
export default {
components: { myModal },
data() {
return {
visible: false,
riskErrorMsg: '', // 独立错误提示
alarmErrorMsg: '', // 独立错误提示
riskScores: {
excellent: '',
goodMin: '',
goodMax: '',
bad: ''
},
alarmScores: {
excellent: '',
goodMin: '',
goodMax: '',
bad: ''
},
myModalParams: {
title: '编辑权重',
},
};
},
methods: {
getEle() {
return document.querySelector('.standard-page');
},
// 修正输入处理方法
handleInput(e, type, field) {
let val = e.target.value;
// 过滤非法字符
val = val.replace(/[^\d.]/g, '');
// 处理小数点问题
val = val.replace(/^\./, '0.').replace(/\.{2,}/g, '.');
// 更新对应数据对象
if (type === 'risk') {
this.riskScores[field] = val;
this.riskErrorMsg = ''; // 清除当前区域错误
} else {
this.alarmScores[field] = val;
this.alarmErrorMsg = '';
}
},
// 修正初始化方法
showModal(riskData, alarmData) {
if (riskData) this.riskScores = { ...riskData };
if (alarmData) this.alarmScores = { ...alarmData };
this.visible = true;
this.riskErrorMsg = '';
this.alarmErrorMsg = '';
},
// 重构验证逻辑
handleOk() {
const riskValid = this.validateScores(this.riskScores, 'risk');
const alarmValid = this.validateScores(this.alarmScores, 'alarm');
if (riskValid && alarmValid) {
this.$ emit('submit', {
riskScores: { ...this.riskScores },
alarmScores: { ...this.alarmScores }
});
this.visible = false;
}
},
// 通用验证方法
validateScores(scores, type) {
const fields = ['excellent', 'goodMin', 'goodMax', 'bad'];
const errorTarget = type === 'risk' ? 'riskErrorMsg' : 'alarmErrorMsg';
// 空值检查
for (const field of fields) {
if (scores[field] === '') {
this[errorTarget] = this.$ t('所有字段必须填写');
return false;
}
}
// 数字转换
const excellent = parseFloat(scores.excellent);
const goodMin = parseFloat(scores.goodMin);
const goodMax = parseFloat(scores.goodMax);
const bad = parseFloat(scores.bad);
// 数字有效性检查
if ([excellent, goodMin, goodMax, bad].some(isNaN)) {
this[errorTarget] = this.$ t('请输入有效的数字');
return false;
}
// 范围检查 (0-1)
if ([excellent, goodMin, goodMax, bad].some(v => v < 0 || v > 1)) {
this[errorTarget] = this.$ t('所有值必须在0-1范围内');
return false;
}
// 逻辑关系验证
if (goodMin >= goodMax) {
this[errorTarget] = this.$ t('良的下限必须小于上限');
return false;
}
if (excellent >= goodMin) {
this[errorTarget] = this.$ t('优的上限必须小于良的下限');
return false;
}
if (goodMax >= bad) {
this[errorTarget] = this.$ t('良的上限必须小于差的下限');
return false;
}
return true;
},
handleCancel() {
this.visible = false;
},
},
};
</script>
<style lang="less" scoped>
.weight-config-box {
width: 100%;
height: 100%;
text-align: left;
box-sizing: border-box;
.config-section {
margin-bottom: 24px;
h3 {
margin-bottom: 12px;
font-weight: 500;
}
}
.grade-box {
> div {
display: flex;
align-items: center;
margin-top: 12px;
.num-box {
width: 260px;
margin: 0 12px;
display: flex;
align-items: center;
justify-content: space-between;
}
}
.excellent .num-box {
justify-content: flex-end;
}
.bad .num-box {
justify-content: flex-start;
}
.error-msg {
margin-top: 16px;
}
}
}
</style>
只能输入0-1之内数字