style: 优化延误扣分配置UI
This commit is contained in:
Your Name
parent
6d011111c5
commit
f4e4c9bcfe
@ -1061,51 +1061,73 @@
|
||||
</a-divider>
|
||||
|
||||
<div class="config-grid">
|
||||
<div class="config-item" style="grid-column: span 1;">
|
||||
<div class="config-item-header">
|
||||
<Icon name="minus" size="md" color="#ff4d4f" />
|
||||
<span class="config-item-title">每小时扣分</span>
|
||||
<!-- 每小时扣分 -->
|
||||
<div class="config-item delay-config-card">
|
||||
<div class="config-info">
|
||||
<div class="config-header">
|
||||
<div class="icon-box red">
|
||||
<Icon name="clock" size="md" />
|
||||
</div>
|
||||
<span class="title">每小时扣分</span>
|
||||
</div>
|
||||
<div class="desc">任务延误完结时每延误1小时扣除的分数，支持小数。</div>
|
||||
</div>
|
||||
<div class="config-action">
|
||||
<a-input-number
|
||||
v-model:value="delayPenaltyConfig.perHour"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="0.1"
|
||||
:precision="2"
|
||||
size="large"
|
||||
style="width: 160px;"
|
||||
>
|
||||
<template #addonAfter>分/小时</template>
|
||||
</a-input-number>
|
||||
</div>
|
||||
<div class="config-item-desc">任务延误完结时每延误1小时扣除的分数</div>
|
||||
<a-input-number
|
||||
v-model:value="delayPenaltyConfig.perHour"
|
||||
:min="0"
|
||||
:max="10"
|
||||
:step="0.1"
|
||||
:precision="2"
|
||||
style="width: 120px;"
|
||||
>
|
||||
<template #addonAfter>分/小时</template>
|
||||
</a-input-number>
|
||||
</div>
|
||||
|
||||
<div class="config-item" style="grid-column: span 1;">
|
||||
<div class="config-item-header">
|
||||
<Icon name="calendar" size="md" color="#31f08b" />
|
||||
<span class="config-item-title">月度积分清零</span>
|
||||
<!-- 月度积分清零 -->
|
||||
<div class="config-item delay-config-card">
|
||||
<div class="config-info">
|
||||
<div class="config-header">
|
||||
<div class="icon-box green">
|
||||
<Icon name="calendar" size="md" />
|
||||
</div>
|
||||
<span class="title">月度积分清零</span>
|
||||
</div>
|
||||
<div class="desc">启用后，接单部门的积分统计将在每月1号自动归零重新开始。</div>
|
||||
</div>
|
||||
<div class="config-action">
|
||||
<a-switch
|
||||
v-model:checked="delayPenaltyConfig.monthlyReset"
|
||||
checked-children="已启用"
|
||||
un-checked-children="已关闭"
|
||||
/>
|
||||
</div>
|
||||
<div class="config-item-desc">接单部门积分是否按月清零重新统计</div>
|
||||
<a-switch
|
||||
v-model:checked="delayPenaltyConfig.monthlyReset"
|
||||
checked-children="启用"
|
||||
un-checked-children="关闭"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-alert
|
||||
message="延误扣分说明"
|
||||
description="任务延误时间 = 实际完成时间 - 预计完成时间（接单时间 + 累计时效）。延误扣分 = 延误小时数 × 每小时扣分数。扣分从任务积分中扣除，最多扣至0分。"
|
||||
type="warning"
|
||||
message="延误扣分计算公式"
|
||||
type="info"
|
||||
show-icon
|
||||
style="margin-top: 16px; margin-bottom: 16px;"
|
||||
/>
|
||||
style="margin-top: 24px; margin-bottom: 24px;"
|
||||
>
|
||||
<template #description>
|
||||
<div class="formula-desc">
|
||||
<p><strong>延误时间</strong> = 实际完成时间 - 预计完成时间（接单时间 + 累计时效）</p>
|
||||
<p><strong>延误扣分</strong> = 延误小时数 × 每小时扣分数</p>
|
||||
<p class="note">* 扣分将从该任务原本应得的积分中扣除，最多扣至0分（不会出现负分）。</p>
|
||||
</div>
|
||||
</template>
|
||||
</a-alert>
|
||||
|
||||
<a-form-item style="margin-top: 32px;">
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSaveDelayPenaltyConfig" :loading="savingDelayPenaltyConfig">
|
||||
<a-button type="primary" size="large" @click="handleSaveDelayPenaltyConfig" :loading="savingDelayPenaltyConfig">
|
||||
<template #icon><Icon name="check" size="sm" /></template>
|
||||
保存配置
|
||||
保存延误配置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
@ -5014,6 +5036,93 @@ watch(activeTab, (value) => {
|
||||
}
|
||||
}
|
||||
|
||||
// 延误配置卡片样式
|
||||
.delay-config-card {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 100px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.config-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding-right: 20px;
|
||||
|
||||
.config-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.icon-box {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.red {
|
||||
background: rgba(255, 77, 79, 0.1);
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
&.green {
|
||||
background: rgba(49, 240, 139, 0.1);
|
||||
color: #31f08b;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: $text-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 13px;
|
||||
color: $text-tertiary;
|
||||
padding-left: 48px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.config-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.formula-desc {
|
||||
p {
|
||||
margin-bottom: 4px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.note {
|
||||
color: #ff4d4f;
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 测试消息提示
|
||||
.test-message-hint {
|
||||
margin-left: $space-md;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user