<script lang="ts" setup>
|
import type { ActionItem, BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import type { PersonTaskItem } from './types';
|
|
import { onMounted } from 'vue';
|
import { useRouter } from 'vue-router';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicVxeTable, TableAction, useVxeTable } from '@jnpf/ui/vxeTable';
|
|
import { getMyPersonTaskList } from '#/api/x/tms/personTask';
|
import { TMS_DIC_FIELD_NAMES } from '#/views/x/tms/shared/dic';
|
import { TMS_BTN } from '#/views/x/tms/shared/ui';
|
|
import {
|
PERSON_STATUS_OPTIONS,
|
labelOfEvalMode,
|
labelOfPersonStatus,
|
labelOfTrainMode,
|
loadPersonTaskDics,
|
} from './constants';
|
|
import '#/views/x/tms/shared/page.css';
|
|
defineOptions({ name: 'TmsPersonTask' });
|
|
const router = useRouter();
|
const { createMessage } = useMessage();
|
|
const columns: BasicColumn[] = [
|
{ title: '培训编号', dataIndex: 'taskNo', width: 140 },
|
{ title: '培训主题', dataIndex: 'subject', minWidth: 200 },
|
{
|
title: '培训方式',
|
dataIndex: 'trainMode',
|
width: 110,
|
customRender: ({ record }) => labelOfTrainMode((record as PersonTaskItem).trainMode),
|
},
|
{ title: '开始时间', dataIndex: 'startTime', width: 170 },
|
{ title: '结束时间', dataIndex: 'endTime', width: 170 },
|
{
|
title: '状态',
|
dataIndex: 'bizStatus',
|
width: 100,
|
customRender: ({ record }) => labelOfPersonStatus((record as PersonTaskItem).bizStatus),
|
},
|
{ title: '学习进度', dataIndex: 'learnStatus', width: 100 },
|
{
|
title: '是否可考',
|
dataIndex: 'canExam',
|
width: 100,
|
customRender: ({ record }) => {
|
const row = record as PersonTaskItem;
|
if (row.canExam) return '是';
|
return row.examTip ? '否' : '否';
|
},
|
},
|
{
|
title: '考核方式',
|
dataIndex: 'evalMode',
|
width: 110,
|
customRender: ({ record }) => labelOfEvalMode((record as PersonTaskItem).evalMode),
|
},
|
];
|
|
const [registerTable, { reload, getForm }] = useVxeTable({
|
api: fetchList,
|
columns,
|
immediate: false,
|
rowKey: 'id',
|
useSearchForm: true,
|
formConfig: {
|
baseColProps: { span: 6 },
|
compact: true,
|
showAdvancedButton: true,
|
alwaysShowLines: 1,
|
autoAdvancedLine: 1,
|
schemas: [
|
{
|
field: 'keyword',
|
label: '关键词',
|
component: 'Input',
|
componentProps: { placeholder: '编号/主题', submitOnPressEnter: true },
|
},
|
{
|
field: 'bizStatus',
|
label: '状态',
|
component: 'Select',
|
componentProps: {
|
allowClear: true,
|
placeholder: '请选择',
|
options: PERSON_STATUS_OPTIONS.value,
|
fieldNames: TMS_DIC_FIELD_NAMES,
|
},
|
},
|
],
|
},
|
actionColumn: {
|
width: 160,
|
title: '操作',
|
dataIndex: 'action',
|
fixed: 'right',
|
},
|
});
|
|
onMounted(async () => {
|
await loadPersonTaskDics();
|
getForm()?.updateSchema?.({
|
field: 'bizStatus',
|
componentProps: {
|
allowClear: true,
|
placeholder: '请选择',
|
options: PERSON_STATUS_OPTIONS.value,
|
fieldNames: TMS_DIC_FIELD_NAMES,
|
},
|
});
|
reload();
|
});
|
|
async function fetchList(params: Record<string, any>) {
|
const page = await getMyPersonTaskList(params);
|
return {
|
data: {
|
list: Array.isArray(page?.list) ? page.list : [],
|
pagination: page?.pagination || { total: 0 },
|
},
|
};
|
}
|
|
function isClosedStatus(status?: string) {
|
return status === 'cancelled' || status === 'expired';
|
}
|
|
function canEnterLearn(record: PersonTaskItem) {
|
return !isClosedStatus(record.bizStatus);
|
}
|
|
function handleView(record: PersonTaskItem) {
|
router.push(`/tms/personTask/detail/${record.id}`);
|
}
|
|
function handleLearn(record: PersonTaskItem) {
|
if (!canEnterLearn(record)) {
|
createMessage.warning(
|
record.bizStatus === 'cancelled' ? '任务已取消，无法学习' : '任务已过期，无法学习',
|
);
|
return;
|
}
|
router.push(`/tms/personTask/learn/${record.id}`);
|
}
|
|
function handleExamHint(record: PersonTaskItem) {
|
if (record.canExam) {
|
router.push(`/tms/personTask/learn/${record.id}`);
|
return;
|
}
|
createMessage.info(record.examTip || record.signTip || '当前暂不可考试');
|
}
|
|
function getTableActions(record: PersonTaskItem): ActionItem[] {
|
const actions: ActionItem[] = [{ label: TMS_BTN.detail, onClick: handleView.bind(null, record) }];
|
if (canEnterLearn(record)) {
|
actions.push({ label: TMS_BTN.learn, onClick: handleLearn.bind(null, record) });
|
}
|
if (record.canExam) {
|
actions.push({
|
label: record.passFlag === '0' ? TMS_BTN.retake : TMS_BTN.exam,
|
onClick: handleExamHint.bind(null, record),
|
});
|
} else if (canEnterLearn(record) && record.examTip) {
|
actions.push({
|
label: TMS_BTN.exam,
|
disabled: true,
|
tooltip: record.examTip,
|
});
|
}
|
return actions;
|
}
|
</script>
|
|
<template>
|
<div class="jnpf-content-wrapper">
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-content">
|
<BasicVxeTable @register="registerTable">
|
<template #tableTitle>
|
<div>
|
<div class="tms-page-header__title">个人培训任务</div>
|
<div class="tms-page-header__sub">学习教材并完成考核；可考时操作列直接进入考试。</div>
|
</div>
|
</template>
|
<template #action="{ record }">
|
<TableAction :actions="getTableActions(record)" />
|
</template>
|
</BasicVxeTable>
|
</div>
|
</div>
|
</div>
|
</template>
|
