CID/src/spdm/views/home/components/TaskList.vue

<script lang="ts">
export default {
	title: 'spdm.taskList.title', // '任务消息'
	icon: 'Star',
	name: 'TaskList',
	description: 'spdm.taskList.des', // '任务消息列表'
};
</script>

<template>
	<el-card class="h-[400px] box-card task-message">
		<template #header>
			<div class="card-header">
				<span>{{ t('spdm.taskList.title') }}</span>
				<el-button link class="button" text @click="goMoreFun">{{ t('home.moreTip') }}</el-button>
			</div>
		</template>
		<div v-if="taskList.length">
			<div class="table-wrapper">
				<TableRender style="width: 100%" row-key="id" border :data="taskList" :columns="tableColumns"> </TableRender>
			</div>
			<el-pagination layout="total, prev, pager, next" :pager-count="5" :page-size="6" :total="total" @current-change="currentPageChangeFun" />
		</div>
		<el-empty v-else class="empty" :image-size="120" />
	</el-card>
</template>

<script setup lang="ts" name="TaskMessageDashboard">
import { queryTaskListApi } from '/@/spdm/api/spdm-task';
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useI18n } from 'vue-i18n';
import TableRender from '/@/components/TableRender/index.vue';
import { ElTag } from 'element-plus';
import mittBus from '/@/utils/mitt';

const router = useRouter();

const { t } = useI18n();
const taskList = ref<any[]>([]);

interface TaskStatus {
	[key: number]: string;
}

const status: TaskStatus = {
	1: '未开始',
	2: '进行中',
	3: '已驳回',
	4: '已完成',
	5: '已暂停',
	6: '已关闭',
	7: '已延期',
	8: '已闭环',
};
const statusType: TaskStatus = {
	1: 'info',
	2: 'primary',
	3: 'danger',
	4: 'success',
	5: 'warning',
	6: 'info',
	7: 'danger',
	8: 'success',
};
const tableColumns = ref([
	{
		// t('hooks.requirement.09115201-21')
		label: '任务名称',
		prop: 'taskName',
	},
	{
		label: '状态',
		prop: 'status',
		width: 120,
		renderDefault: ({ row }) =>
			h(
				ElTag,
				{
					type: row.statusType,
					size: 'small',
				},
				{
					default: row.status,
				}
			),
	},
	{
		label: '负责人',
		prop: 'pMember',
		width: 120,
	},
	{
		label: '计划完成时间',
		prop: 'endTime',
		width: 180,
	},
]);
const current = ref(1);
const total = ref(0);
const currentPageChangeFun = (val: number) => {
	current.value = val;
	getTableList();
};

// 更多按钮
const goMoreFun = () => {
	localStorage.setItem('HOME_TASK_PARAMS', 'total');
	router.push('spdm/task/execute'); // 跳转到我执行的页面
};

const getTableList = () => {
	let idMap = [
		{ key: null, value: 'tag1' },
		{ key: null, value: 'tag2' },
		{ key: null, value: 'tag3' },
		{ key: null, value: 'tag4' },
		{ key: null, value: 'tag5' },
		{ key: null, value: 'tag6' },
		{ key: null, value: 'tag7' },
		{ key: null, value: 'tag8' },
		{ key: null, value: 'tag9' },
		{ key: null, value: 'tag10' },
	];
	const params = {
		current: current.value,
		idMap: idMap,
		size: 6,
		sortOrder: 1,
		type: 0,
		filterDiscipline: discipline.value,
	};
	queryTaskListApi(params).then((res) => {
		const list = res.data.data;
		list.forEach((item: any) => {
			(item.pMember = item?.pMemberList?.map((v: any) => v.nickname).join(',') || '--'),
				((item.status = status[item.exeStatus]), (item.statusType = statusType[item.exeStatus]));
		});
		taskList.value = list;
		total.value = res.data.total;
	});
};
const discipline = ref([]);
onMounted(() => {
	// getTableList();
	mittBus.on('current_discipline', (data) => {
		discipline.value = data;
		getTableList();
	});
});
onBeforeUnmount(() => {
	mittBus.off('current_discipline');
});
</script>

<style scoped lang="scss">
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.button {
		// 鼠标hover 文字变成蓝色
		&:hover {
			color: #409eff;
		}
	}
}
.table-wrapper {
	height: 285px;
	width: 100%;
	overflow: hidden;
}
.empty {
	margin-top: 100px;
}
.el-pagination {
	margin-top: 8px;
}
</style>