lbw_9527443
3b1c1c03f3
- 添加任务列表获取和状态更新API调用 - 修改任务列表组件显示格式和状态标签 - 优化日期格式化处理逻辑 - 调整任务列表样式和交互效果 - 注释掉部分不需要的API调用
121 lines
2.3 KiB
Vue
121 lines
2.3 KiB
Vue
<template>
|
|
<div class="dashboard-card">
|
|
<div class="card-header">
|
|
<h3>下发任务</h3>
|
|
<button class="add-task-btn" @click="$emit('show-task-modal')">
|
|
<i class="icon-plus"></i> 新建任务
|
|
</button>
|
|
</div>
|
|
<div class="task-list compact">
|
|
<div v-for="task in tasks.slice(0, 10)" :key="task.id" class="task-item">
|
|
<div class="task-content">
|
|
<div class="task-title">{{ task.title }}</div>
|
|
<div class="task-meta" style="display: flex; gap: 15px;">
|
|
<span class="deadline">创建时间: {{ formatDate(task.created_at) }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="task-status" :class="task.status">
|
|
{{ getTaskStatusText(task.status) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, defineEmits } from 'vue';
|
|
import { assignTasks } from '@/api/top.js';
|
|
|
|
defineProps({
|
|
tasks: Array,
|
|
formatDate: Function,
|
|
getTaskStatusText: Function
|
|
});
|
|
|
|
defineEmits(['show-task-modal']);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dashboard-card {
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
height: 350px;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.card-header h3 {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.add-task-btn {
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.add-task-btn i {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.task-list.compact .task-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.task-list.compact .task-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.task-title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.task-meta {
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
|
|
.task-status {
|
|
padding: 4px 8px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.task-status.pending {
|
|
background-color: #FFC107;
|
|
color: #fff;
|
|
}
|
|
|
|
.task-status.completed {
|
|
background-color: #4CAF50;
|
|
color: #fff;
|
|
}
|
|
|
|
.task-status.overdue {
|
|
background-color: #F44336;
|
|
color: #fff;
|
|
}
|
|
|
|
.icon-plus::before { content: '+'; }
|
|
</style> |