<script lang="ts" setup>
|
import type { TaskEntity } from './types';
|
|
import { onMounted, ref } from 'vue';
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useMessage } from '@jnpf/hooks';
|
import {
|
Descriptions as ADescriptions,
|
DescriptionsItem as ADescriptionsItem,
|
} from 'ant-design-vue';
|
|
import { getUserInfoList } from '#/api/permission/user';
|
import { getTaskInfo } from '#/api/x/tms/task';
|
import { TMS_BTN } from '#/views/x/tms/shared/ui';
|
|
import {
|
labelOfCategory,
|
labelOfEvalMode,
|
labelOfPersonStatus,
|
labelOfPublishStatus,
|
labelOfSourceType,
|
labelOfTaskKind,
|
labelOfTrainMode,
|
loadTaskDics,
|
publishStatusColor,
|
} from './constants';
|
|
import '#/views/x/tms/shared/page.css';
|
|
defineOptions({ name: 'TmsTaskDetail' });
|
|
const route = useRoute();
|
const router = useRouter();
|
const { createMessage } = useMessage();
|
|
const loading = ref(false);
|
const detail = ref<TaskEntity | null>(null);
|
|
onMounted(async () => {
|
await loadTaskDics();
|
await loadData();
|
});
|
|
async function loadData() {
|
const id = String(route.params.id || '');
|
if (!id) {
|
router.replace('/tms/task');
|
return;
|
}
|
loading.value = true;
|
try {
|
const info = await getTaskInfo(id);
|
await fillUserNames(info);
|
detail.value = info;
|
} catch (e: any) {
|
createMessage.error(e?.message || '加载失败');
|
router.replace('/tms/task');
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
async function fillUserNames(info: TaskEntity) {
|
const ids = [
|
info.teacherId,
|
...(info.personTasks || []).map((item) => item.userId),
|
].filter((id): id is string => !!id);
|
const uniqueIds = [...new Set(ids)];
|
if (!uniqueIds.length) return;
|
const res = await getUserInfoList(uniqueIds);
|
const list = res?.data?.list || [];
|
const nameOf = new Map<string, string>();
|
for (const user of list) {
|
const name = user.realName || String(user.fullName || '').split('/')[0] || user.account;
|
if (user.id && name) nameOf.set(user.id, name);
|
}
|
info.teacherName = nameOf.get(info.teacherId || '') || info.teacherId;
|
for (const item of info.personTasks || []) {
|
item.userName = nameOf.get(item.userId || '') || item.userId;
|
}
|
}
|
|
function goBack() {
|
router.push('/tms/task');
|
}
|
|
function goEdit() {
|
if (!detail.value?.id || detail.value.publishStatus !== 'draft') return;
|
router.push(`/tms/task/edit/${detail.value.id}`);
|
}
|
</script>
|
|
<template>
|
<div class="jnpf-content-wrapper tms-task-detail-page" v-loading="loading">
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-content tms-task-detail-wrap" v-if="detail">
|
<a-card title="培训任务详情" :bordered="false">
|
<template #extra>
|
<a-space>
|
<a-button @click="goBack">{{ TMS_BTN.back }}</a-button>
|
<a-button
|
type="primary"
|
:disabled="detail.publishStatus !== 'draft'"
|
@click="goEdit"
|
>
|
{{ TMS_BTN.edit }}
|
</a-button>
|
</a-space>
|
</template>
|
|
<ADescriptions :column="2" bordered size="small">
|
<ADescriptionsItem label="培训编号">{{ detail.taskNo || '-' }}</ADescriptionsItem>
|
<ADescriptionsItem label="状态">
|
<a-tag :color="publishStatusColor(detail.publishStatus)">
|
{{ labelOfPublishStatus(detail.publishStatus) }}
|
</a-tag>
|
</ADescriptionsItem>
|
<ADescriptionsItem label="培训主题" :span="2">{{ detail.subject }}</ADescriptionsItem>
|
<ADescriptionsItem label="培训分类">{{ labelOfCategory(detail.category) }}</ADescriptionsItem>
|
<ADescriptionsItem label="来源类型">{{ labelOfSourceType(detail.sourceType) }}</ADescriptionsItem>
|
<ADescriptionsItem label="培训方式">{{ labelOfTrainMode(detail.trainMode) }}</ADescriptionsItem>
|
<ADescriptionsItem label="考核方式">{{ labelOfEvalMode(detail.evalMode) }}</ADescriptionsItem>
|
<ADescriptionsItem label="任务类型">{{ labelOfTaskKind(detail.taskKind) }}</ADescriptionsItem>
|
<ADescriptionsItem label="上次任务编号">{{ detail.prevTaskNo || '-' }}</ADescriptionsItem>
|
<ADescriptionsItem label="开始时间">{{ detail.startTime || '-' }}</ADescriptionsItem>
|
<ADescriptionsItem label="结束时间">{{ detail.endTime || '-' }}</ADescriptionsItem>
|
<ADescriptionsItem label="关闭时间">{{ detail.closeTime || '-' }}</ADescriptionsItem>
|
<ADescriptionsItem label="发布时间">{{ detail.publishTime || '-' }}</ADescriptionsItem>
|
<ADescriptionsItem label="地点">{{ detail.placeName || '-' }}</ADescriptionsItem>
|
<ADescriptionsItem label="教材编号">{{ detail.materialNo || '-' }}</ADescriptionsItem>
|
<ADescriptionsItem label="附件" :span="2">
|
{{ detail.files?.map((item) => item.fileName).filter(Boolean).join('、') || '-' }}
|
</ADescriptionsItem>
|
<ADescriptionsItem label="试卷">{{ detail.paperName || '-' }}</ADescriptionsItem>
|
<ADescriptionsItem label="补考次数">{{ detail.retakeLimit ?? 1 }}</ADescriptionsItem>
|
<ADescriptionsItem label="合格分">{{ detail.passScore ?? '-' }}</ADescriptionsItem>
|
<ADescriptionsItem label="考试开始">{{ detail.examStart || '-' }}</ADescriptionsItem>
|
<ADescriptionsItem label="考试结束">{{ detail.examEnd || '-' }}</ADescriptionsItem>
|
<ADescriptionsItem label="培训师">{{ detail.teacherName || '-' }}</ADescriptionsItem>
|
<ADescriptionsItem label="培训对象数">
|
{{ detail.personCount ?? detail.traineeIds?.length ?? '-' }}
|
</ADescriptionsItem>
|
<ADescriptionsItem label="培训要点" :span="2">{{ detail.keyPoints || '-' }}</ADescriptionsItem>
|
<ADescriptionsItem label="备注" :span="2">{{ detail.remark || '-' }}</ADescriptionsItem>
|
<ADescriptionsItem label="创建时间">{{ detail.creatorTime || '-' }}</ADescriptionsItem>
|
</ADescriptions>
|
|
<a-divider>个人任务</a-divider>
|
<a-table
|
size="small"
|
:pagination="false"
|
row-key="id"
|
:data-source="detail.personTasks || []"
|
:columns="[
|
{ title: '用户名称', dataIndex: 'userName', width: 160 },
|
{ title: '状态', dataIndex: 'bizStatus', width: 100 },
|
{ title: '签到时间', dataIndex: 'signTime', width: 170 },
|
{ title: '成绩', dataIndex: 'examScore', width: 90 },
|
{ title: '合格', dataIndex: 'passFlag', width: 90 },
|
]"
|
>
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.dataIndex === 'bizStatus'">
|
{{ labelOfPersonStatus(record.bizStatus) }}
|
</template>
|
<template v-else-if="column.dataIndex === 'passFlag'">
|
{{ record.passFlag === '1' ? '合格' : record.passFlag === '0' ? '不合格' : '-' }}
|
</template>
|
</template>
|
</a-table>
|
</a-card>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
.tms-task-detail-page {
|
height: 100%;
|
min-height: 0;
|
}
|
|
.tms-task-detail-wrap {
|
height: 100%;
|
min-height: 0;
|
overflow-x: hidden;
|
overflow-y: auto !important;
|
background: #fff;
|
box-sizing: border-box;
|
}
|
</style>
|
