mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-10 03:16:44 +08:00
290 lines
13 KiB
Vue
290 lines
13 KiB
Vue
<template>
|
|
<a-modal
|
|
class="custom-modal"
|
|
:title="modelTitle"
|
|
:visible="props.isModalVisible"
|
|
@cancel="onCancel"
|
|
@ok="onCancel"
|
|
width="1250px"
|
|
>
|
|
<a-table
|
|
rowKey="id"
|
|
:columns="modelColumns"
|
|
:data-source="data.dataSource"
|
|
:scroll="{ x: 400 }"
|
|
:pagination="false"
|
|
class="custom-table"
|
|
:loading="data.tableLoading"
|
|
:rowKey="id"
|
|
>
|
|
<!-- :loading="tableLoading"-->
|
|
<template v-slot:header>
|
|
<draggable
|
|
v-model="modelColumns"
|
|
item-key="key"
|
|
:list="modelColumns"
|
|
:group="{ name: 'columns', pull: 'clone', put: false }"
|
|
>
|
|
<template #item="{ element }">
|
|
<a-table-column class="draggable-column" :title="element.title" :dataIndex="element.dataIndex" :key="element.key"></a-table-column>
|
|
</template>
|
|
</draggable>
|
|
</template>
|
|
</a-table>
|
|
<div class="tableBox">
|
|
<div class="pa">
|
|
<a-pagination
|
|
:showSizeChanger="false"
|
|
showQuickJumper="true"
|
|
hideOnSinglePage="true"
|
|
:pageSize="data.pageSize"
|
|
v-model:current="data.pageNo"
|
|
:total="data.total"
|
|
class="pagination"
|
|
@change="modelChangePagination"
|
|
rowKey="id"
|
|
:show-total="total => `共 ${total} 条`"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</a-modal>
|
|
</template>
|
|
<script setup>
|
|
import { reactive,ref,onMounted } from "vue";
|
|
import draggable from 'vuedraggable';
|
|
import * as api from "../../api/indexOvervoew";
|
|
const props = defineProps({
|
|
isModalVisible: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
modalType:{
|
|
type:Number,
|
|
default: 1,
|
|
},
|
|
studentId:{
|
|
type:String,
|
|
default:''
|
|
}
|
|
})
|
|
const modelColumns = ref([])
|
|
const modelTitle = ref('')
|
|
const data = reactive({
|
|
pageSize: 10,
|
|
pageNo: 1,
|
|
total: 0,
|
|
dataSource: [],
|
|
tableLoading: false
|
|
})
|
|
|
|
onMounted(() => {
|
|
getModelColumns();
|
|
})
|
|
|
|
const getModelColumns = ()=>{
|
|
if(props.modalType==1){
|
|
modelTitle.value = '项目'
|
|
modelColumns.value = [
|
|
{title: "项目名称", dataIndex: "projectName", key: "projectName", ellipsis: true, align: "center",},
|
|
{title: "归属组织", dataIndex: "sourceBelongFullName", key: "sourceBelongFullName", ellipsis: true, align: "center",},
|
|
{title: "总任务数", dataIndex: "taskCount", key: "taskCount", ellipsis: true, align: "center",},
|
|
{title: "完成任务数", dataIndex: "taskCompletedNum", key: "taskCompletedNum", ellipsis: true, align: "center",},
|
|
{title: "总任务数完成率", dataIndex: "taskCompletedRate", key: "taskCompletedRate", ellipsis: true, align: "center",
|
|
customRender: (text) => {return !text.value && text.value != 0?'-':text.value + "%";}
|
|
},
|
|
{title: "必修项目数", dataIndex: "bxCount", key: "bxCount", ellipsis: true, align: "center",},
|
|
{title: "必修项目完成率", dataIndex: "bxCompletedRate", key: "bxCompletedRate", ellipsis: true, align: "center",
|
|
customRender: (text) => {return !text.value && text.value != 0?'-':text.value + "%";}
|
|
},
|
|
]
|
|
}else if(props.modalType==2){
|
|
modelTitle.value = '学习路径'
|
|
modelColumns.value = [
|
|
{title: "路径名称", dataIndex: "routerName", key: "routerName", ellipsis: true, align: "center",},
|
|
{title: "归属组织", dataIndex: "orgFullName", key: "orgFullName", ellipsis: true, align: "center",},
|
|
{title: "关卡数", dataIndex: "chapterNum", key: "chapterNum", ellipsis: true, align: "center",},
|
|
{title: "任务数", dataIndex: "taskCount", key: "taskCount", ellipsis: true, align: "center",},
|
|
{title: "任务完成数", dataIndex: "taskCompletedNum", key: "taskCompletedNum", ellipsis: true, align: "center",},
|
|
{title: "任务完成率", dataIndex: "taskCompletedRate", key: "taskCompletedRate", ellipsis: true, align: "center",
|
|
customRender: (text) => {return !text.value && text.value != 0?'-':text.value + "%";}
|
|
},
|
|
{title: "必修任务数", dataIndex: "taskRequiredNum", key: "taskRequiredNum", ellipsis: true, align: "center",},
|
|
{title: "必修任务完成率", dataIndex: "taskRequiredCompletedRate", key: "taskRequiredCompletedRate", ellipsis: true, align: "center",
|
|
customRender: (text) => {return !text.value && text.value != 0?'-':text.value + "%";}
|
|
},
|
|
]
|
|
}else if(props.modalType==3){
|
|
modelTitle.value = '面授'
|
|
modelColumns.value = [
|
|
{title: "面授名称", dataIndex: "offcourseName", key: "offcourseName", ellipsis: true, align: "center",},
|
|
{title: "归属组织", dataIndex: "sourceBelongFullName", key: "sourceBelongFullName", ellipsis: true, align: "center",},
|
|
{title: "参与时间", dataIndex: "signUpTime", key: "signUpTime", ellipsis: true, align: "center",},
|
|
{title: "完成状态", dataIndex: "completedStatus", key: "completedStatus", ellipsis: true, align: "center",
|
|
customRender: (text) => {return text.value && text.value == 1?'已结业':"未结业";}
|
|
},
|
|
]
|
|
}else if(props.modalType==4){
|
|
modelTitle.value = '在线课程'
|
|
modelColumns.value = [
|
|
{title: "在线课名称", dataIndex: "courseName", key: "courseName", ellipsis: true, align: "center",},
|
|
{title: "归属组织", dataIndex: "sourceBelongFullName", key: "sourceBelongFullName", ellipsis: true, align: "center",},
|
|
{title: "学习时间", dataIndex: "studyTime", key: "studyTime", ellipsis: true, align: "center",},
|
|
{title: "学习时长", dataIndex: "studyDuration", key: "studyDuration", ellipsis: true, align: "center",},
|
|
{title: "累计学习课件数", dataIndex: "coursewareCount", key: "coursewareCount", ellipsis: true, align: "center",},
|
|
{title: "完成状态", dataIndex: "completedStatus", key: "completedStatus", ellipsis: true, align: "center",
|
|
customRender: (text) => {return text.value && text.value == 1?'已完成':"未完成";}
|
|
},
|
|
]
|
|
}else if(props.modalType==5){
|
|
modelTitle.value = '考试'
|
|
modelColumns.value = [
|
|
{title: "考试名称", dataIndex: "testName", key: "testName", ellipsis: true, align: "center",},
|
|
{title: "考试时间", dataIndex: "examTime", key: "examTime", ellipsis: true, align: "center",},
|
|
{title: "题量", dataIndex: "questionCount", key: "questionCount", ellipsis: true, align: "center",},
|
|
{title: "满分", dataIndex: "totalScore", key: "totalScore", ellipsis: true, align: "center",},
|
|
{title: "及格分", dataIndex: "passLine", key: "passLine", ellipsis: true, align: "center",},
|
|
{title: "参考时间", dataIndex: "takeExamTime", key: "takeExamTime", ellipsis: true, align: "center",},
|
|
{title: "成绩", dataIndex: "score", key: "score", ellipsis: true, align: "center",},
|
|
{title: "部门排名", dataIndex: "deptSortNum", key: "deptSortNum", ellipsis: true, align: "center",},
|
|
]
|
|
}else if(props.modalType==6){
|
|
modelTitle.value = '案例'
|
|
modelColumns.value = [
|
|
{title: "案例标题", dataIndex: "caseName", key: "caseName", ellipsis: true, align: "center",},
|
|
{title: "案例作者", dataIndex: "authorName", key: "authorName", ellipsis: true, align: "center",},
|
|
{title: "创建时间", dataIndex: "caseCreateTime", key: "caseCreateTime", ellipsis: true, align: "center",},
|
|
{title: "浏览时间", dataIndex: "viewTime", key: "viewTime", ellipsis: true, align: "center",},
|
|
{title: "是否点赞", dataIndex: "isPraises", key: "isPraises", ellipsis: true, align: "center",
|
|
customRender: (text) => {return text.value && text.value == 1?'是':"否";}
|
|
},
|
|
{title: "是否评论", dataIndex: "isComments", key: "isComments", ellipsis: true, align: "center",
|
|
customRender: (text) => {return text.value && text.value == 1?'是':"否";}
|
|
},
|
|
{title: "是否收藏", dataIndex: "isFavorites", key: "isFavorites", ellipsis: true, align: "center",
|
|
customRender: (text) => {return text.value && text.value == 1?'是':"否";}
|
|
},
|
|
]
|
|
}else if(props.modalType==7){
|
|
modelTitle.value = '专业力'
|
|
modelColumns.value = [
|
|
{title: "岗位名称", dataIndex: "stdPositionName", key: "stdPositionName", ellipsis: true, align: "center",},
|
|
{title: "资格等级", dataIndex: "qualsLevelName", key: "qualsLevelName", ellipsis: true, align: "center",},
|
|
{title: "band", dataIndex: "bandInfo", key: "bandInfo", ellipsis: true, align: "center",},
|
|
{title: "任务总数", dataIndex: "totalTaskNum", key: "totalTaskNum", ellipsis: true, align: "center",},
|
|
{title: "必修总数", dataIndex: "requiredTaskNum", key: "requiredTaskNum", ellipsis: true, align: "center",},
|
|
{title: "完成总任务数", dataIndex: "completedTaskNum", key: "completedTaskNum", ellipsis: true, align: "center",},
|
|
{title: "总任务完成率", dataIndex: "learnCompletedRate", key: "learnCompletedRate", ellipsis: true, align: "center",
|
|
customRender: (text) => {return !text.value && text.value != 0?'-':text.value + "%";}
|
|
},
|
|
{title: "完成必修任务数", dataIndex: "requiredTaskCompletedNum", key: "requiredTaskCompletedNum", ellipsis: true, align: "center",},
|
|
{title: "必修任务完成率", dataIndex: "requiredTaskCompletedRate", key: "requiredTaskCompletedRate", ellipsis: true, align: "center",
|
|
customRender: (text) => {return !text.value && text.value != 0?'-':text.value + "%";}
|
|
},
|
|
{title: "总完成状态", dataIndex: "completedStatus", key: "completedStatus", ellipsis: true, align: "center",
|
|
customRender: (text) => {return text.value && text.value == 1?'已完成':"未完成";}
|
|
},
|
|
]
|
|
}
|
|
getTableData()
|
|
}
|
|
|
|
const getTableData = async () => {
|
|
data.tableLoading = true;
|
|
if(props.modalType==1){
|
|
const res = await api.studentProjectReportList({page: data.pageNo,size: data.pageSize,studentId: props.studentId});
|
|
data.dataSource = res.data.records || [];
|
|
data.total = res.data.total;
|
|
}else if(props.modalType==2){
|
|
const res = await api.studentRouterReportList({page: data.pageNo,size: data.pageSize,studentId: props.studentId});
|
|
data.dataSource = res.data.records || [];
|
|
data.total = res.data.total;
|
|
}else if(props.modalType==3){
|
|
const res = await api.studentOffCourseReportList({page: data.pageNo,size: data.pageSize,studentId: props.studentId});
|
|
data.dataSource = res.data.records || [];
|
|
data.total = res.data.total;
|
|
}else if(props.modalType==4){
|
|
const res = await api.studentOnlineReportList({page: data.pageNo,size: data.pageSize,studentId: props.studentId});
|
|
data.dataSource = res.data.records || [];
|
|
data.total = res.data.total;
|
|
}else if(props.modalType==5){
|
|
const res = await api.studentExamReportList({page: data.pageNo,size: data.pageSize,studentId: props.studentId});
|
|
data.dataSource = res.data.records || [];
|
|
data.total = res.data.total;
|
|
}else if(props.modalType==6){
|
|
const res = await api.studentCaseReportList({page: data.pageNo,size: data.pageSize,studentId: props.studentId});
|
|
data.dataSource = res.data.records || [];
|
|
data.total = res.data.total;
|
|
}else if(props.modalType==7){
|
|
const res = await api.studentProfessionalReportList({page: data.pageNo,size: data.pageSize,studentId: props.studentId});
|
|
data.dataSource = res.data.records || [];
|
|
data.total = res.data.total;
|
|
}
|
|
data.tableLoading = false;
|
|
};
|
|
|
|
const emit = defineEmits({})
|
|
const onCancel = ()=>{
|
|
emit("update:isModalVisible", false);
|
|
}
|
|
// 监听弹出层分页变化方法
|
|
const modelChangePagination = (page) =>{
|
|
data.pageNo = page;
|
|
getTableData();
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.tableBox {
|
|
margin: 20px 20px 20px;
|
|
|
|
.ant-table-thead > tr > th {
|
|
background-color: #eff4fc;
|
|
}
|
|
}
|
|
.tableBox {
|
|
.pa {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
.custom-modal {
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.custom-modal :deep(.ant-modal-header) {
|
|
background: #1890ff;
|
|
color: white;
|
|
border-radius: 8px 8px 0 0;
|
|
}
|
|
|
|
.custom-modal :deep(.ant-modal-title) {
|
|
color: white;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.custom-modal :deep(.ant-modal-close-x) {
|
|
color: white;
|
|
}
|
|
|
|
.custom-modal :deep(.ant-modal-footer) {
|
|
border-top: 1px solid #f0f0f0;
|
|
padding: 16px 24px;
|
|
}
|
|
.custom-table {
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.custom-table :deep(.ant-table-thead > tr > th) {
|
|
background-color: #fafafa;
|
|
font-weight: 500;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.custom-table :deep(.ant-table-tbody > tr:hover > td) {
|
|
background: #e6f7ff !important;
|
|
}
|
|
</style> |