158 lines
3.7 KiB
Vue
158 lines
3.7 KiB
Vue
<!-- 我的任务 -->
|
|
<template>
|
|
<a-card
|
|
:title="title"
|
|
:bordered="false"
|
|
:body-style="{ padding: '10px', height: '358px' }"
|
|
class="workplace-table-card"
|
|
>
|
|
<template #extra>
|
|
<more-icon @remove="onRemove" @edit="onEdit" />
|
|
</template>
|
|
<div style="overflow: auto; position: relative">
|
|
<table class="ele-table" style="table-layout: fixed; min-width: 300px">
|
|
<colgroup>
|
|
<col width="38" />
|
|
<col width="65" />
|
|
<col />
|
|
<col width="70" />
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th style="position: sticky; left: 0"></th>
|
|
<th style="text-align: center">优先级</th>
|
|
<th>任务名称</th>
|
|
<th style="text-align: center">状态</th>
|
|
</tr>
|
|
</thead>
|
|
<vue-draggable
|
|
tag="tbody"
|
|
item-key="id"
|
|
v-model="taskList"
|
|
handle=".sort-handle"
|
|
:animation="300"
|
|
:set-data="() => void 0"
|
|
>
|
|
<template #item="{ element }">
|
|
<tr>
|
|
<td style="text-align: center; position: sticky; left: 0">
|
|
<menu-outlined class="sort-handle ele-text-secondary" />
|
|
</td>
|
|
<td style="text-align: center">
|
|
<ele-tag
|
|
:color="['red', 'orange', 'blue'][element.priority - 1]"
|
|
shape="circle"
|
|
>
|
|
{{ element.priority }}
|
|
</ele-tag>
|
|
</td>
|
|
<td class="ele-elip" :title="element.taskName">
|
|
<a>{{ element.taskName }}</a>
|
|
</td>
|
|
<td style="text-align: center">
|
|
<span v-if="element.status === 0" class="ele-text-warning">
|
|
未开始
|
|
</span>
|
|
<span v-else-if="element.status === 1" class="ele-text-success">
|
|
进行中
|
|
</span>
|
|
<span v-else-if="element.status === 2" class="ele-text-info">
|
|
已完成
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</vue-draggable>
|
|
</table>
|
|
</div>
|
|
</a-card>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
import VueDraggable from 'vuedraggable';
|
|
import { MenuOutlined } from '@ant-design/icons-vue';
|
|
import MoreIcon from './more-icon.vue';
|
|
|
|
defineProps<{
|
|
title?: string;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'remove'): void;
|
|
(e: 'edit'): void;
|
|
}>();
|
|
|
|
interface Task {
|
|
id: number;
|
|
priority: number;
|
|
taskName: string;
|
|
status: number;
|
|
}
|
|
|
|
// 我的任务数据
|
|
const taskList = ref<Task[]>([]);
|
|
|
|
/* 查询我的任务 */
|
|
const queryTaskList = () => {
|
|
taskList.value = [
|
|
{
|
|
id: 1,
|
|
priority: 1,
|
|
taskName: '解决项目一的bug',
|
|
status: 0
|
|
},
|
|
{
|
|
id: 2,
|
|
priority: 2,
|
|
taskName: '解决项目二的bug',
|
|
status: 0
|
|
},
|
|
{
|
|
id: 3,
|
|
priority: 2,
|
|
taskName: '解决项目三的bug',
|
|
status: 1
|
|
},
|
|
{
|
|
id: 4,
|
|
priority: 3,
|
|
taskName: '解决项目四的bug',
|
|
status: 1
|
|
},
|
|
{
|
|
id: 5,
|
|
priority: 3,
|
|
taskName: '解决项目五的bug',
|
|
status: 2
|
|
},
|
|
{
|
|
id: 6,
|
|
priority: 3,
|
|
taskName: '解决项目六的bug',
|
|
status: 2
|
|
}
|
|
];
|
|
};
|
|
|
|
const onRemove = () => {
|
|
emit('remove');
|
|
};
|
|
|
|
const onEdit = () => {
|
|
emit('edit');
|
|
};
|
|
|
|
queryTaskList();
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.ele-table tr.sortable-chosen {
|
|
background: hsla(0, 0%, 60%, 0.1);
|
|
}
|
|
|
|
.workplace-table-card .sort-handle {
|
|
cursor: move;
|
|
}
|
|
</style>
|