fix: 优化设计师大厅任务展开UI配色,显示SPU信息

This commit is contained in:
Your Name 2026-01-08 15:15:22 +08:00
parent f9b54a1f9f
commit 6e3f8101c8
3 changed files with 250 additions and 17 deletions

View File

@ -459,6 +459,7 @@ public class DesignerService {
item.put("id", task.getId());
item.put("taskNo", task.getTaskNo());
item.put("title", task.getTitle());
item.put("spuInfo", task.getSpuInfo()); // 添加SPU信息
item.put("status", task.getStatus());
item.put("progress", task.getProgress());
item.put("score", task.getScore());
@ -483,13 +484,16 @@ public class DesignerService {
java.util.Map<String, Object> taskItem = new java.util.LinkedHashMap<>();
taskItem.put("id", item.getId());
taskItem.put("taskNo", item.getItemNo());
taskItem.put("title", "子任务 #" + item.getGroupNo());
// 获取主任务信息
Task mainTask = taskMapper.selectById(item.getTaskId());
// 优先显示主任务的SPU信息,否则显示子任务标题
String spuInfo = mainTask != null ? mainTask.getSpuInfo() : null;
taskItem.put("title", spuInfo != null ? spuInfo : ("子任务 #" + item.getGroupNo()));
taskItem.put("spuInfo", spuInfo);
taskItem.put("status", item.getStatus());
taskItem.put("progress", item.getProgress());
taskItem.put("score", item.getTotalScore());
taskItem.put("startTime", item.getCreateTime()); // 使用创建时间作为开始时间
// 获取主任务的截止时间
Task mainTask = taskMapper.selectById(item.getTaskId());
taskItem.put("deadline", mainTask != null ? mainTask.getDeadline() : null);
taskItem.put("createTime", item.getCreateTime());
taskItem.put("isSubTask", true);

View File

@ -227,28 +227,40 @@
<div
v-for="task in designer.inProgressTasks"
:key="task.id"
class="task-item"
class="task-item-expanded"
>
<div class="task-info-row">
<span class="task-title">{{ task.title }}</span>
<span class="task-no">{{ task.taskNo }}</span>
<div class="task-header">
<span class="task-title-text">{{ task.spuInfo || task.title || '未知任务' }}</span>
<a-tag :color="task.isSubTask ? 'purple' : 'blue'" size="small">
{{ task.isSubTask ? '子任务' : '主任务' }}
</a-tag>
</div>
<div class="task-progress-row">
<div class="task-no-row">
<span class="task-no-label">编号:</span>
<span class="task-no-value">{{ task.taskNo }}</span>
</div>
<div class="task-progress-bar">
<div class="progress-label">进度</div>
<a-progress
:percent="task.progress || 0"
:stroke-color="getProgressColor(task.progress || 0)"
:trail-color="'rgba(255,255,255,0.1)'"
size="small"
style="flex: 1;"
/>
<span class="progress-text">{{ task.progress || 0 }}%</span>
<span class="progress-percent">{{ task.progress || 0 }}%</span>
</div>
<div class="task-time-row">
<span class="task-time">
<Icon name="clock" size="xs" color="#6B6B6B" />
开始: {{ formatDate(task.startTime) }}
</span>
<span class="task-deadline">
截止: {{ formatDate(task.deadline) }}
</span>
<div class="task-time-info">
<div class="time-item">
<Icon name="clock" size="xs" color="#31f08b" />
<span class="time-label">开始:</span>
<span class="time-value">{{ formatDate(task.startTime) }}</span>
</div>
<div class="time-item">
<Icon name="clock" size="xs" color="#ff7a45" />
<span class="time-label">截止:</span>
<span class="time-value">{{ formatDate(task.deadline) }}</span>
</div>
</div>
</div>
</div>
@ -902,6 +914,104 @@ onMounted(() => {
font-size: $font-size-sm;
}
// 展开的任务项样式
.task-item-expanded {
padding: 12px;
margin-bottom: 8px;
background: linear-gradient(135deg, rgba(49, 240, 139, 0.08) 0%, rgba(26, 26, 26, 0.95) 100%);
border-radius: 8px;
border: 1px solid rgba(49, 240, 139, 0.2);
&:last-child {
margin-bottom: 0;
}
.task-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
.task-title-text {
font-size: 13px;
font-weight: 500;
color: #fff;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-right: 8px;
}
}
.task-no-row {
display: flex;
align-items: center;
margin-bottom: 8px;
font-size: 11px;
.task-no-label {
color: rgba(255, 255, 255, 0.5);
margin-right: 4px;
}
.task-no-value {
color: rgba(255, 255, 255, 0.8);
font-family: monospace;
}
}
.task-progress-bar {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
.progress-label {
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
min-width: 28px;
}
:deep(.ant-progress) {
margin: 0;
.ant-progress-inner {
background: rgba(255, 255, 255, 0.1);
}
}
.progress-percent {
font-size: 12px;
font-weight: 500;
color: #31f08b;
min-width: 35px;
text-align: right;
}
}
.task-time-info {
display: flex;
justify-content: space-between;
gap: 16px;
.time-item {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
.time-label {
color: rgba(255, 255, 255, 0.5);
}
.time-value {
color: rgba(255, 255, 255, 0.9);
}
}
}
}
.task-item {
padding: $space-sm;
margin-bottom: $space-sm;

View File

@ -856,6 +856,72 @@
</template>
</template>
</a-table>
<!-- 每日进度检查配置 -->
<div class="section-header" style="margin-top: 32px;">
<h2 class="section-title">每日进度检查配置</h2>
</div>
<a-alert
message="功能说明"
description="系统每天定时检查设计师是否更新了进行中任务的进度。未更新进度的设计师将被扣分并收到钉钉提醒。"
type="info"
show-icon
style="margin-bottom: 16px;"
/>
<a-form :model="progressCheckConfig" layout="vertical" class="progress-check-form">
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="启用每日进度检查">
<a-switch
v-model:checked="progressCheckConfig.enabled"
@change="saveProgressCheckConfig"
/>
<span style="margin-left: 8px; color: #888;">{{ progressCheckConfig.enabled ? '已启用' : '已禁用' }}</span>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="每日检查时间(小时,24小时制)">
<a-input-number
v-model:value="progressCheckConfig.checkHour"
:min="0"
:max="23"
:disabled="!progressCheckConfig.enabled"
@change="saveProgressCheckConfig"
style="width: 120px;"
/>
<span style="margin-left: 8px; color: #888;">点</span>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="未更新进度扣分">
<a-input-number
v-model:value="progressCheckConfig.deductionScore"
:min="0"
:max="100"
:precision="1"
:disabled="!progressCheckConfig.enabled"
@change="saveProgressCheckConfig"
style="width: 120px;"
/>
<span style="margin-left: 8px; color: #888;">分/任务/天</span>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="扣分时发送钉钉通知">
<a-switch
v-model:checked="progressCheckConfig.notifyEnabled"
:disabled="!progressCheckConfig.enabled"
@change="saveProgressCheckConfig"
/>
<span style="margin-left: 8px; color: #888;">{{ progressCheckConfig.notifyEnabled ? '已启用' : '已禁用' }}</span>
</a-form-item>
</a-col>
</a-row>
</a-form>
</div>
</a-tab-pane>
@ -2485,6 +2551,14 @@ const designerTargetForm = reactive<DesignerTargetScore>({
const designerTargetModalVisible = ref(false)
const designerTargetModalTitle = ref('添加目标积分配置')
// 每日进度检查配置
const progressCheckConfig = reactive({
enabled: true,
checkHour: 18,
deductionScore: 1,
notifyEnabled: true
})
const designerTargetColumns = [
{ title: 'ID', dataIndex: 'id', key: 'id', width: 60 },
{ title: '部门', dataIndex: 'deptName', key: 'deptName' },
@ -4625,6 +4699,8 @@ onMounted(() => {
// 加载设计师目标积分配置
loadTargetScoreDepartments()
loadDesignerTargetList()
// 加载进度检查配置
loadProgressCheckConfig()
})
// S3配置相关方法
@ -4910,6 +4986,49 @@ const handleDeleteDesignerTarget = async (id: number) => {
}
}
// 加载进度检查配置
const loadProgressCheckConfig = async () => {
try {
const response = await getSystemConfigsByGroup('progress')
const configList = response.data || []
for (const config of configList) {
switch (config.configKey) {
case 'progress.daily_check_enabled':
progressCheckConfig.enabled = config.configValue === 'true'
break
case 'progress.daily_check_hour':
progressCheckConfig.checkHour = parseInt(config.configValue) || 18
break
case 'progress.no_update_deduction':
progressCheckConfig.deductionScore = parseFloat(config.configValue) || 1
break
case 'progress.notify_on_deduction':
progressCheckConfig.notifyEnabled = config.configValue === 'true'
break
}
}
} catch (error: any) {
console.error('加载进度检查配置失败:', error)
}
}
// 保存进度检查配置
const saveProgressCheckConfig = async () => {
try {
await batchUpdateSystemConfigs({
'progress.daily_check_enabled': String(progressCheckConfig.enabled),
'progress.daily_check_hour': String(progressCheckConfig.checkHour),
'progress.no_update_deduction': String(progressCheckConfig.deductionScore),
'progress.notify_on_deduction': String(progressCheckConfig.notifyEnabled)
})
message.success('保存成功')
} catch (error: any) {
console.error('保存进度检查配置失败:', error)
message.error('保存失败')
}
}
watch(activeTab, (value) => {
// 切换到用户与部门 tab 时,始终刷新数据以获取最新状态
if (value === 'users') {