yxk-20260730

改善提案
重构 Task_improve002 评分弹窗的展示层级,清晰突出“改善效果、可推广度、独创性、努力度”四个大类评价维度,同时保留现有七项录入、权重和计算逻辑。
This commit is contained in:
ye1023
2026-07-30 14:25:34 +08:00
parent c294724fa4
commit b228a806f0
@@ -152,7 +152,15 @@
/>
</template>
<a-modal v-model:open="scoreModalVisible" title="部门评议打分" :footer="null" :mask-closable="false" :body-style="{ padding: '24px 28px 20px' }">
<a-modal
v-model:open="scoreModalVisible"
title="部门评议打分"
:footer="null"
:mask-closable="false"
:width="820"
:style="{ maxWidth: 'calc(100vw - 24px)' }"
:body-style="{ padding: '24px 28px 20px' }"
>
<a-form layout="vertical">
<a-alert class="score-range-alert" type="info" show-icon message="所有评分项均须填写 0-100 分,最多可保留两位小数。" />
<div class="score-standard-entry">
@@ -162,46 +170,79 @@
查看评分标准
</a-button>
</div>
<a-row :gutter="12">
<a-col :span="24">
<a-form-item label="改善效果(权重 50%" required>
<a-row :gutter="12">
<a-col :xs="24" :sm="12" :lg="6">
<a-form-item label="安全" required><a-input-number v-model:value="scoreForm.safetyScore" :min="0" :max="100" :precision="2" :disabled="scoreLocked" style="width: 100%" /></a-form-item>
</a-col>
<a-col :xs="24" :sm="12" :lg="6">
<a-form-item label="质量" required><a-input-number v-model:value="scoreForm.qualityScore" :min="0" :max="100" :precision="2" :disabled="scoreLocked" style="width: 100%" /></a-form-item>
</a-col>
<a-col :xs="24" :sm="12" :lg="6">
<a-form-item label="效率" required><a-input-number v-model:value="scoreForm.efficiencyScore" :min="0" :max="100" :precision="2" :disabled="scoreLocked" style="width: 100%" /></a-form-item>
</a-col>
<a-col :xs="24" :sm="12" :lg="6">
<a-form-item label="成本" required><a-input-number v-model:value="scoreForm.costScore" :min="0" :max="100" :precision="2" :disabled="scoreLocked" style="width: 100%" /></a-form-item>
</a-col>
</a-row>
<div class="form-help">改善效果得分按安全质量效率成本四项的平均分自动计算{{ effectAveragePreview }}</div>
</a-form-item>
</a-col>
<a-col :xs="24" :sm="12">
<a-form-item label="可推广度(权重 20%" required>
<a-input-number v-model:value="scoreForm.promotionScore" :min="0" :max="100" :precision="2" :disabled="scoreLocked" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :xs="24" :sm="12">
<a-form-item label="独创性(权重 20%" required>
<a-input-number v-model:value="scoreForm.originalityScore" :min="0" :max="100" :precision="2" :disabled="scoreLocked" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :xs="24" :sm="12">
<a-form-item label="努力度(权重 10%" required>
<a-input-number v-model:value="scoreForm.effortScore" :min="0" :max="100" :precision="2" :disabled="scoreLocked" style="width: 100%" />
</a-form-item>
</a-col>
</a-row>
<a-space>
<!-- 四个大类维度仅调整展示层级字段绑定和加权计算规则保持不变 -->
<div class="score-dimension-list">
<section class="score-dimension score-effect-dimension">
<div class="score-dimension-header">
<div class="score-dimension-name">
<span class="score-dimension-index">01</span>
<strong class="score-dimension-title">改善效果</strong>
</div>
<span class="score-dimension-weight">权重 50%</span>
</div>
<a-row :gutter="[12, 12]">
<a-col :xs="24" :sm="12" :lg="6">
<a-form-item class="score-subitem" label="安全" required><a-input-number v-model:value="scoreForm.safetyScore" :min="0" :max="100" :precision="2" :disabled="scoreLocked" style="width: 100%" /></a-form-item>
</a-col>
<a-col :xs="24" :sm="12" :lg="6">
<a-form-item class="score-subitem" label="质量" required><a-input-number v-model:value="scoreForm.qualityScore" :min="0" :max="100" :precision="2" :disabled="scoreLocked" style="width: 100%" /></a-form-item>
</a-col>
<a-col :xs="24" :sm="12" :lg="6">
<a-form-item class="score-subitem" label="效率" required><a-input-number v-model:value="scoreForm.efficiencyScore" :min="0" :max="100" :precision="2" :disabled="scoreLocked" style="width: 100%" /></a-form-item>
</a-col>
<a-col :xs="24" :sm="12" :lg="6">
<a-form-item class="score-subitem" label="成本" required><a-input-number v-model:value="scoreForm.costScore" :min="0" :max="100" :precision="2" :disabled="scoreLocked" style="width: 100%" /></a-form-item>
</a-col>
</a-row>
<div class="effect-score-summary">
<span>安全质量效率成本四项平均分</span>
<strong>{{ effectAveragePreview }}</strong>
</div>
</section>
<a-row class="score-dimension-grid" :gutter="[12, 12]">
<a-col :xs="24" :md="8">
<section class="score-dimension">
<div class="score-dimension-header">
<div class="score-dimension-name">
<span class="score-dimension-index">02</span>
<strong class="score-dimension-title">可推广度</strong>
</div>
<span class="score-dimension-weight">权重 20%</span>
</div>
<a-input-number v-model:value="scoreForm.promotionScore" :min="0" :max="100" :precision="2" :disabled="scoreLocked" style="width: 100%" />
</section>
</a-col>
<a-col :xs="24" :md="8">
<section class="score-dimension">
<div class="score-dimension-header">
<div class="score-dimension-name">
<span class="score-dimension-index">03</span>
<strong class="score-dimension-title">独创性</strong>
</div>
<span class="score-dimension-weight">权重 20%</span>
</div>
<a-input-number v-model:value="scoreForm.originalityScore" :min="0" :max="100" :precision="2" :disabled="scoreLocked" style="width: 100%" />
</section>
</a-col>
<a-col :xs="24" :md="8">
<section class="score-dimension">
<div class="score-dimension-header">
<div class="score-dimension-name">
<span class="score-dimension-index">04</span>
<strong class="score-dimension-title">努力度</strong>
</div>
<span class="score-dimension-weight">权重 10%</span>
</div>
<a-input-number v-model:value="scoreForm.effortScore" :min="0" :max="100" :precision="2" :disabled="scoreLocked" style="width: 100%" />
</section>
</a-col>
</a-row>
</div>
<div class="score-form-actions">
<a-button v-if="!scoreLocked" type="primary" :loading="savingScore" @click="saveScoreDraft">保存评分</a-button>
<span v-else>评分已锁定请重新提交流程办理</span>
</a-space>
</div>
</a-form>
</a-modal>
</section>
@@ -624,6 +665,106 @@
padding-inline: 2px;
}
.score-dimension-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.score-dimension {
min-height: 126px;
padding: 14px;
border-left: 3px solid #1677ff;
background: #f6fbff;
}
.score-dimension-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.score-dimension-name {
display: inline-flex;
align-items: center;
min-width: 0;
gap: 8px;
}
.score-dimension-index {
flex: 0 0 auto;
color: #1677ff;
font-size: 14px;
font-weight: 700;
line-height: 1;
}
.score-dimension-title {
color: #1f2937;
font-size: 17px;
font-weight: 700;
line-height: 1.4;
}
.score-dimension-weight {
flex: 0 0 auto;
color: #1677ff;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
}
.score-effect-dimension {
min-height: auto;
}
.score-subitem {
margin-bottom: 0;
:deep(.ant-form-item-label > label) {
color: #334155;
font-size: 15px;
font-weight: 600;
}
}
.score-dimension {
:deep(.ant-input-number-input) {
color: #1f2937;
font-size: 16px;
font-weight: 600;
}
}
.effect-score-summary {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-top: 14px;
padding-top: 10px;
border-top: 1px solid #d6e8ff;
color: #475569;
font-size: 14px;
strong {
flex: 0 0 auto;
color: #1677ff;
font-size: 20px;
font-weight: 700;
}
}
.score-form-actions {
display: flex;
align-items: center;
justify-content: flex-end;
min-height: 32px;
margin-top: 20px;
}
.institute-vote-summary {
display: flex;
flex-wrap: wrap;
@@ -732,6 +873,29 @@
}
@media (max-width: 576px) {
.score-dimension {
min-height: auto;
padding: 12px;
}
.score-dimension-header {
margin-bottom: 12px;
}
.effect-score-summary {
align-items: flex-start;
flex-direction: column;
gap: 2px;
}
.score-form-actions {
justify-content: stretch;
:deep(.ant-btn) {
width: 100%;
}
}
.base-info-header {
align-items: flex-start;
}