修改taskItem
This commit is contained in:
@ -1,16 +1,52 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="task-item">
|
<div class="task-item" @click="handleTask(task, record)">
|
||||||
|
<div class="w-4px h-18px rounded-2px" :style="{ background: getTaskColor() }"></div>
|
||||||
|
<div>{{ task?.name || '-' }}</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
// 定义props和emit
|
||||||
|
const props = defineProps({
|
||||||
|
task: Object,
|
||||||
|
record: Object,
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['filter-change', 'handle-task']);
|
||||||
|
const handleTask = (task, record) => {
|
||||||
|
|
||||||
|
};
|
||||||
|
// 根据任务类型获取颜色
|
||||||
|
const getTaskColor = () => {
|
||||||
|
if (!props.task) return '#000';
|
||||||
|
|
||||||
|
// 根据colorTip.vue中的颜色定义设置不同状态的颜色
|
||||||
|
switch (props.task.status) {
|
||||||
|
case 0: // 待生成
|
||||||
|
return '#ffae00';
|
||||||
|
case 1: // 待发布
|
||||||
|
return '#6d4cfe';
|
||||||
|
case 2: // 已发布
|
||||||
|
return '#939499';
|
||||||
|
case 3: // 发布失败
|
||||||
|
return '#f64b31';
|
||||||
|
default:
|
||||||
|
return props.task.color || '#939499';
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.task-item {
|
.task-item {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
font-size: 12px;
|
||||||
|
height: 19px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -59,7 +59,9 @@
|
|||||||
<div v-if="record[column.dataIndex].length >= 3" class="task-more">
|
<div v-if="record[column.dataIndex].length >= 3" class="task-more">
|
||||||
<TaskItem :task="record[column.dataIndex][0]" :record="record" @handle-task="handleTaskAction" />
|
<TaskItem :task="record[column.dataIndex][0]" :record="record" @handle-task="handleTaskAction" />
|
||||||
<a-trigger trigger="click" position="br">
|
<a-trigger trigger="click" position="br">
|
||||||
<div class="size-12px color-#8f959f px-8px">还有{{ record[column.dataIndex].length - 1 }}项</div>
|
<div class="size-12px color-#8f959f h-19px ml-4px">
|
||||||
|
还有{{ record[column.dataIndex].length - 1 }}项
|
||||||
|
</div>
|
||||||
<template #content>
|
<template #content>
|
||||||
<div class="bg-#fff p-12px shadow-sm rounded-4px">
|
<div class="bg-#fff p-12px shadow-sm rounded-4px">
|
||||||
<TaskItem
|
<TaskItem
|
||||||
@ -590,6 +592,14 @@ onMounted(() => {
|
|||||||
color: #6d4cfe !important;
|
color: #6d4cfe !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:deep(.arco-table-cell) {
|
||||||
|
padding: 0px !important;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: start;
|
||||||
|
height: 42px;
|
||||||
|
}
|
||||||
|
|
||||||
:deep(td.today-column) .arco-table-cell-wrap {
|
:deep(td.today-column) .arco-table-cell-wrap {
|
||||||
color: white !important;
|
color: white !important;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user