<template>
|
<HomePanel title="待办中心" :loading="loading">
|
<template #extra>
|
<span v-if="list.length" class="todo-badge app-num">{{ list.length }} 项待处理</span>
|
</template>
|
<ul v-if="list.length" class="todo">
|
<li v-for="item in list" :key="item.id" class="todo__item">
|
<div class="todo__row">
|
<span class="todo__dot"></span>
|
<span class="todo__reason">{{ item.approveReason || '待办事项' }}</span>
|
<span class="todo__time">{{ item.approveTime }}</span>
|
</div>
|
<div class="todo__meta">
|
<span>编号 {{ item.approveId }}</span>
|
<span>部门 {{ item.approveDeptName }}</span>
|
</div>
|
</li>
|
</ul>
|
<el-empty v-else description="暂无待办事项" :image-size="56" />
|
</HomePanel>
|
</template>
|
|
<script setup>
|
import HomePanel from './HomePanel.vue'
|
|
defineProps({
|
list: { type: Array, default: () => [] },
|
loading: { type: Boolean, default: false }
|
})
|
</script>
|
|
<style scoped>
|
.todo-badge {
|
font-size: 12px;
|
color: var(--app-warning);
|
background: var(--app-warning-soft);
|
border-radius: 10px;
|
padding: 2px 10px;
|
}
|
|
.todo {
|
list-style: none;
|
margin: 0;
|
padding: 0;
|
max-height: 320px;
|
overflow-y: auto;
|
}
|
|
.todo__item {
|
padding: 10px 12px;
|
border-radius: var(--app-radius-sm);
|
transition: background var(--app-transition);
|
}
|
|
.todo__item:hover {
|
background: var(--app-surface-hover);
|
}
|
|
.todo__item + .todo__item {
|
margin-top: 4px;
|
}
|
|
.todo__row {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
min-width: 0;
|
}
|
|
.todo__dot {
|
width: 6px;
|
height: 6px;
|
flex-shrink: 0;
|
border-radius: 50%;
|
background: var(--app-primary);
|
}
|
|
.todo__reason {
|
flex: 1;
|
min-width: 0;
|
font-size: 13px;
|
color: var(--app-text);
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.todo__time {
|
flex-shrink: 0;
|
font-size: 12px;
|
color: var(--app-text-tertiary);
|
}
|
|
.todo__meta {
|
display: flex;
|
gap: 16px;
|
margin: 6px 0 0 14px;
|
font-size: 12px;
|
color: var(--app-text-tertiary);
|
}
|
</style>
|
