<template>
|
<div class="app-container">
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<el-card class="user-card">
|
<div class="user-info">
|
<el-avatar :size="80" :src="userInfo.avatar" />
|
<h3>{{ userInfo.name }}</h3>
|
<p>{{ userInfo.dept }} - {{ userInfo.post }}</p>
|
</div>
|
<el-divider />
|
<div class="stat-item">
|
<span class="label">已完成培训</span>
|
<span class="value">{{ userInfo.completedTrainings }} 次</span>
|
</div>
|
<div class="stat-item">
|
<span class="label">待参加培训</span>
|
<span class="value">{{ userInfo.pendingTrainings }} 次</span>
|
</div>
|
<div class="stat-item">
|
<span class="label">平均考核分数</span>
|
<span class="value">{{ userInfo.avgScore }} 分</span>
|
</div>
|
</el-card>
|
</el-col>
|
|
<el-col :span="18">
|
<el-tabs v-model="activeTab" type="border-card">
|
<el-tab-pane label="我的学习记录" name="records">
|
<PIMTable :column="recordColumns" :tableData="recordList" :page="recordPage" @pagination="changeRecordPage" />
|
</el-tab-pane>
|
|
<el-tab-pane label="考核报告" name="reports">
|
<PIMTable :column="reportColumns" :tableData="reportList" :page="reportPage" @pagination="changeReportPage" />
|
</el-tab-pane>
|
|
<el-tab-pane label="在线测评" name="assessment">
|
<div class="assessment-list">
|
<el-card v-for="item in assessmentList" :key="item.id" class="assessment-card">
|
<div class="assessment-header">
|
<h4>{{ item.title }}</h4>
|
<el-tag :type="item.status === '待测评' ? 'warning' : 'success'">{{ item.status }}</el-tag>
|
</div>
|
<p class="assessment-desc">{{ item.description }}</p>
|
<div class="assessment-footer">
|
<span>截止时间：{{ item.deadline }}</span>
|
<el-button type="primary" size="small" :disabled="item.status !== '待测评'" @click="startAssessment(item)">
|
{{ item.status === '待测评' ? '开始测评' : '已完成' }}
|
</el-button>
|
</div>
|
</el-card>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive } from "vue";
|
import PIMTable from "@/components/PIMTable/PIMTable.vue";
|
|
defineOptions({
|
name: "员工学习",
|
});
|
|
const activeTab = ref("records");
|
|
const userInfo = reactive({
|
name: "张三",
|
dept: "生产部",
|
post: "操作工",
|
avatar: "",
|
completedTrainings: 12,
|
pendingTrainings: 3,
|
avgScore: 85,
|
});
|
|
// 学习记录
|
const recordList = ref([]);
|
const recordPage = reactive({ current: 1, size: 10, total: 0 });
|
const recordColumns = [
|
{ label: "培训内容", prop: "content", align: "center" },
|
{ label: "培训时间", prop: "trainingTime", align: "center" },
|
{ label: "培训时长", prop: "duration", align: "center" },
|
{ label: "培训方式", prop: "method", align: "center" },
|
{ label: "完成状态", prop: "status", align: "center" },
|
];
|
|
// 考核报告
|
const reportList = ref([]);
|
const reportPage = reactive({ current: 1, size: 10, total: 0 });
|
const reportColumns = [
|
{ label: "考核名称", prop: "name", align: "center" },
|
{ label: "考核时间", prop: "assessTime", align: "center" },
|
{ label: "得分", prop: "score", align: "center" },
|
{ label: "等级", prop: "grade", align: "center" },
|
{ label: "是否合格", prop: "qualified", align: "center" },
|
];
|
|
// 在线测评
|
const assessmentList = ref([
|
{ id: 1, title: "安全操作规程测评", description: "考核员工对安全操作规程的掌握程度", deadline: "2026-05-30", status: "待测评" },
|
{ id: 2, title: "应急处置能力测评", description: "考核员工应急处置能力", deadline: "2026-06-15", status: "已完成" },
|
]);
|
|
const changeRecordPage = ({ page, limit }) => { recordPage.current = page; recordPage.size = limit; };
|
const changeReportPage = ({ page, limit }) => { reportPage.current = page; reportPage.size = limit; };
|
const startAssessment = (item) => {};
|
</script>
|
|
<style lang="scss" scoped>
|
.user-card {
|
.user-info {
|
text-align: center;
|
h3 {
|
margin: 15px 0 5px;
|
}
|
p {
|
color: #666;
|
font-size: 14px;
|
}
|
}
|
.stat-item {
|
display: flex;
|
justify-content: space-between;
|
padding: 10px 0;
|
.label {
|
color: #666;
|
}
|
.value {
|
font-weight: bold;
|
color: #409eff;
|
}
|
}
|
}
|
|
.assessment-list {
|
.assessment-card {
|
margin-bottom: 15px;
|
.assessment-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
h4 {
|
margin: 0;
|
}
|
}
|
.assessment-desc {
|
color: #666;
|
margin: 10px 0;
|
}
|
.assessment-footer {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
span {
|
color: #999;
|
font-size: 12px;
|
}
|
}
|
}
|
}
|
</style>
|
