<script lang="ts" setup>
|
import type { TrainRecordCatalogDetail, TrainRecordCatalogItem } from './types';
|
|
import { computed, onMounted, ref } from 'vue';
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { Table as ATable } from 'ant-design-vue';
|
import dayjs from 'dayjs';
|
|
import { getTrainRecordCatalog } from '#/api/x/tms/trainRecord';
|
|
defineOptions({ name: 'TmsTrainRecordCatalog' });
|
|
const route = useRoute();
|
const router = useRouter();
|
const { createMessage } = useMessage();
|
|
const loading = ref(false);
|
const detail = ref<TrainRecordCatalogDetail | null>(null);
|
/** jnpf-date-range 值为时间戳数组 */
|
const dateRange = ref<number[] | undefined>(undefined);
|
|
const queryDates = computed(() => {
|
const range = dateRange.value;
|
if (!range || range.length < 2) return { startDate: undefined, endDate: undefined };
|
return {
|
startDate: dayjs(range[0]).format('YYYY-MM-DD'),
|
endDate: dayjs(range[1]).format('YYYY-MM-DD'),
|
};
|
});
|
|
const columns = [
|
{ title: '序号', key: 'index', width: 70, align: 'center', customRender: ({ index }: any) => index + 1 },
|
{ title: '培训记录编号', dataIndex: 'recordNo', key: 'recordNo', width: 150 },
|
{ title: '培训类型', dataIndex: 'trainType', key: 'trainType', width: 110 },
|
{ title: '培训内容', dataIndex: 'trainContent', key: 'trainContent', ellipsis: true },
|
{ title: '培训方式', dataIndex: 'trainMode', key: 'trainMode', width: 110 },
|
{ title: '培训师', dataIndex: 'trainerName', key: 'trainerName', width: 120 },
|
{ title: '考核方式', dataIndex: 'evalMode', key: 'evalMode', width: 110 },
|
{ title: '培训结果', dataIndex: 'trainResult', key: 'trainResult', width: 100, align: 'center' },
|
{ title: '是否合格', dataIndex: 'passFlag', key: 'passFlag', width: 100, align: 'center' },
|
{ title: '具体培训时间', dataIndex: 'trainDate', key: 'trainDate', width: 130 },
|
];
|
|
onMounted(() => {
|
loadData();
|
});
|
|
async function loadData() {
|
const id = String(route.params.id || '');
|
if (!id) {
|
router.replace('/tms/trainRecord');
|
return;
|
}
|
loading.value = true;
|
try {
|
const { startDate, endDate } = queryDates.value;
|
detail.value = await getTrainRecordCatalog({
|
recordId: id,
|
startDate,
|
endDate,
|
});
|
} catch (e: any) {
|
createMessage.error(e?.message || '加载培训目录失败');
|
router.replace('/tms/trainRecord');
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
function handleSearch() {
|
loadData();
|
}
|
|
function handleReset() {
|
dateRange.value = undefined;
|
loadData();
|
}
|
|
function handleExport() {
|
const list = detail.value?.list || [];
|
if (!list.length) {
|
createMessage.warning('暂无数据可导出');
|
return;
|
}
|
createMessage.success(`已准备导出 ${list.length} 条（导出接口联调后生效）`);
|
}
|
|
function goBack() {
|
router.push('/tms/trainRecord');
|
}
|
|
/** 弹出层挂到 body，避免被 jnpf-content-wrapper overflow:hidden 裁切 */
|
function popupContainer() {
|
return document.body;
|
}
|
|
function resultText(row: TrainRecordCatalogItem) {
|
if (row.trainResult === '' || row.trainResult === undefined || row.trainResult === null) return '';
|
return String(row.trainResult);
|
}
|
</script>
|
|
<template>
|
<div class="jnpf-content-wrapper tms-record-catalog-page">
|
<div class="jnpf-content-wrapper-center tms-record-catalog-center">
|
<div class="jnpf-content-wrapper-content tms-record-catalog-wrap">
|
<a-spin :spinning="loading" class="catalog-spin">
|
<div class="catalog-inner">
|
<div class="catalog-toolbar">
|
<div class="catalog-filter">
|
<span class="filter-label">查询日期</span>
|
<jnpf-date-range
|
v-model:value="dateRange"
|
allow-clear
|
format="YYYY-MM-DD"
|
class="date-range"
|
:placeholder="['开始日期', '结束日期']"
|
:get-popup-container="popupContainer"
|
/>
|
<a-button type="primary" class="ml-3" @click="handleSearch">查询</a-button>
|
<a-button class="ml-2" @click="handleReset">重置</a-button>
|
</div>
|
<a-space>
|
<a-button @click="handleExport">导出</a-button>
|
<a-button @click="goBack">关闭</a-button>
|
</a-space>
|
</div>
|
|
<div class="catalog-heading">
|
<div class="user-name">姓名：{{ detail?.userName || '-' }}</div>
|
<div class="catalog-title">培训目录</div>
|
</div>
|
|
<div class="catalog-table-wrap">
|
<ATable
|
size="middle"
|
bordered
|
row-key="id"
|
:columns="columns"
|
:data-source="detail?.list || []"
|
:pagination="false"
|
:scroll="{ x: 1200 }"
|
:locale="{ emptyText: '暂无培训记录' }"
|
>
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.key === 'trainResult'">
|
{{ resultText(record) }}
|
</template>
|
<template v-else-if="column.key === 'passFlag'">
|
<span v-if="record.passFlag === '1'" class="pass-yes">合格</span>
|
<span v-else-if="record.passFlag === '0'" class="pass-no">不合格</span>
|
<span v-else>-</span>
|
</template>
|
</template>
|
</ATable>
|
</div>
|
</div>
|
</a-spin>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
.tms-record-catalog-page {
|
height: 100%;
|
min-height: 0;
|
}
|
|
.tms-record-catalog-center {
|
height: 100% !important;
|
min-height: 0 !important;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.tms-record-catalog-wrap {
|
display: flex !important;
|
flex-direction: column;
|
flex: 1 1 0 !important;
|
min-height: 0 !important;
|
height: 100%;
|
overflow: auto !important;
|
background: #fff;
|
padding: 0;
|
}
|
|
.catalog-spin {
|
display: block;
|
min-height: 100%;
|
width: 100%;
|
}
|
|
.catalog-spin :deep(.ant-spin-container) {
|
min-height: 100%;
|
width: 100%;
|
}
|
|
.catalog-inner {
|
display: flex;
|
flex-direction: column;
|
min-height: 100%;
|
width: 100%;
|
box-sizing: border-box;
|
padding: 16px 20px 20px;
|
gap: 12px;
|
}
|
|
.catalog-toolbar {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
flex-wrap: wrap;
|
gap: 12px;
|
flex-shrink: 0;
|
}
|
|
.catalog-filter {
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
gap: 4px;
|
flex: 1;
|
padding: 10px 12px;
|
background: #fafafa;
|
border-radius: 6px;
|
}
|
|
.filter-label {
|
margin-right: 8px;
|
color: rgba(0, 0, 0, 0.65);
|
flex-shrink: 0;
|
}
|
|
.date-range {
|
width: 280px;
|
}
|
|
.catalog-heading {
|
text-align: center;
|
flex-shrink: 0;
|
padding: 8px 0 4px;
|
}
|
|
.user-name {
|
font-size: 15px;
|
font-weight: 600;
|
margin-bottom: 6px;
|
}
|
|
.catalog-title {
|
font-size: 16px;
|
font-weight: 600;
|
}
|
|
.catalog-table-wrap {
|
flex: 1;
|
width: 100%;
|
}
|
|
.catalog-table-wrap :deep(.ant-table-wrapper) {
|
width: 100%;
|
}
|
|
.catalog-table-wrap :deep(.ant-table-thead > tr > th) {
|
background: #fafafa !important;
|
font-weight: 600;
|
text-align: center;
|
}
|
|
.pass-yes {
|
color: #52c41a;
|
font-weight: 500;
|
}
|
|
.pass-no {
|
color: #ff4d4f;
|
font-weight: 500;
|
}
|
</style>
|
