hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-14 21:36:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

讲师管理bug

Browse Source
This commit is contained in:
zhangsir
2024-12-01 14:18:09 +08:00
parent 6dab4c8921
commit 784e403da3
5 changed files with 1024 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

432
src/components/project/LookExternalLecturer.vue Normal file
View File

@@ -0,0 +1,432 @@
<template>
<a-drawer :visible="visible" placement="right" :closable="false" :maskClosable="false"
width="80%" :title="false">
<!-- 外部讲师查看详情 -->
<div class="LookExternalLecturer">
<div class="header" style="margin-top: -24px;">
<div class="headerTitle">查看讲师</div>
<!-- <router-link :to="{ path: '/lecturerList', query: { activeKey: '2', } }"> -->
<img
@click="handleBack"
style="width: 29px; height: 29px; cursor: pointer"
src="../../assets/images/basicinfo/close.png"
/>
<!-- </router-link> -->
</div>
<!-- <a-divider style="height: 1px; background-color: #b7b8b7 ;margin: 0;" /> -->
<a-layout-content>
<!-- 讲师信息 -->
<div style="width: 100%;margin-top: 10px;">
<span class="line" style="margin-left:12px;"></span>
<a-descriptions title="讲师信息" style="padding:0 20px;" bordered :column="3" :contentStyle="rowCenters" :labelStyle="rowCenter">
<!-- 一层 -->
<a-descriptions-item label="讲师头像"> <a-image
:width="55" style="border-radius: 50%;"
:src=formParam.photo
/></a-descriptions-item>
<a-descriptions-item label="讲师姓名">{{formParam.name||'-'}}</a-descriptions-item>
<a-descriptions-item label="手机号码">{{formParam.mobile||'-'}}</a-descriptions-item>
<a-descriptions-item label="供应商">{{formParam.supplier||'-'}}</a-descriptions-item>
<a-descriptions-item label="讲师邮箱">{{formParam.email||'-'}}</a-descriptions-item>
<a-descriptions-item label="授课时长" :span="2">{{formParam.teaching||'-'}}
<span style="margin-left: 5px;" v-if="formParam.teaching != null">分钟</span>
<span style="margin-left: 10px ; padding: 2px;" v-if="formParam.teaching != null">({{
(formParam.teaching / 60).toFixed(2) }}小时)</span>
</a-descriptions-item>
</a-descriptions>
<div style="margin-top: 18px;"></div>
<span class="line" style="margin-left:12px;"></span>
<!-- 记录 -->
<a-descriptions title="其他信息" bordered :column="4" style="padding:0 20px;" :contentStyle="rowCenters" :labelStyle="rowCenter" >
<!-- 一层 -->
<a-descriptions-item label="讲师介绍" :span="4" >
<div v-if="formParam.description !=null&&resp(formParam.description)" style="min-width: 500px;" v-html="formParam.description" ></div>
<div v-else>-</div>
</a-descriptions-item>
<a-descriptions-item label="备注" :span="4">
<div v-if="formParam.remark ==null || formParam.remark =='<p><br></p>'" style="min-width: 500px;">- </div>
<div style="min-width: 500px;">{{formParam.remark ===null?'':formParam.remark}}</div>
<!-- </a-tag>
</div> -->
</a-descriptions-item>
</a-descriptions>
<!-- -->
<div style="margin-top: 9px;"></div>
<a-tabs v-model:activeKey="activeKey" style="padding:0 20px;">
<a-tab-pane key="1" tab="授课记录">
<a-table :header-cell-style="{ 'text-align': 'center' }" :columns="teacherrecordsColumns"
:sroll="{ x: '1000' }"
:data-source="teacherrecordstableData" :loading="teacherrecordsLoading" @expand="expandTable" :pagination="pagination">
</a-table>
</a-tab-pane>
</a-tabs>
</div>
</a-layout-content>
</div>
</a-drawer>
</template>
<script lang ="jsx">
import { useRouter,useRoute } from "vue-router";
import { reactive, toRefs, ref,computed,watch } from "vue"
import {getTeacherById} from "../../api/Lecturer";
import { getNewInTeacherCourseList } from "../../api/Teaching";
// import boe from '@/assets/boe.jpg'
import avatar from '@/assets/avatar.png'
import dayjs from "dayjs";
export default{
name :"LookExternalLecturer",
components:{
},
props:{
visible:{
type: Boolean,
default: false,
},
id:{
type: String,
default: ""
}
},
setup(props,emits){
const router=useRouter();
const state = reactive({
activeKey:'1',
formParam: {
},
promotionrecordsLoading: false, //晋级记录遮罩层
teacherrecordsLoading: false,// 授课记录遮罩层
teacherrecordstableDataTotal: 0,//授课记录列表总条数
teacherrepromotableDataTotal: -1,//晋级记录总条数
teacherrecords: {
recordType:2,
pageNo: "1",
pageSize: "10",
id: null
},
teacherrepromo:{
id:null,
pageNo: "1",
pageSize: "10",
}
});
watch(()=>props.visible,(val)=>{
if(val){
TeacherSystem(props.id)
}else{
state.formParam = {}
teacherrecordstableData.value = []
}
})
//外部讲师详情
const TeacherSystem = (id) => {
getTeacherById({id,}).then((res) => {
console.log("内部讲师详情", res.data);
state.formParam = res.data.data
state.formParam.photo = state.formParam.photo ===null ?avatar : state.formParam.photo
state.formParam.teachingDate = res.data.data.teachingDate ? dayjs(res.data.data.teachingDate, 'YYYY-MM-DD HH:mm'):'',
getteacherrecordstableData()
})
.catch((err) => {
console.log("内部讲师详情", err);
});
}
//返回上一层
const handleBack=()=>{
emits.emit('update:visible',false)
};
//授课记录列表
const teacherrecordsColumns = ref([
// {
// title: '课程编号',
// dataIndex: 'offcourseId',
// key: 'offcourseId',
// ellipsis: true, align: "center",
// width: 120,
// },
{
title: '课程编号',
dataIndex: 'courseId',
key: 'courseId',
align: "center",
customRender: ({text, index})=>{
return index+1;
},
width: 120,
},
{
title: '课程名称',
dataIndex: 'courseName',
key: 'courseName',
ellipsis: true, align: "center",
width: 120,
},
{
title: '课程日期',
dataIndex: 'teachingDate',
key: 'teachingDate',
ellipsis: true, align: "center",
width: 200,
customRender: (value) => {
return (
<div>
{dayjs(value.record?.teachingDate).format("YYYY-MM-DD HH:mm")}
</div>
);
},
},
{
title: '内容分类',
dataIndex: 'courseTypeName',
key: 'courseTypeName',
ellipsis: true, align: "center",
width: 120,
},
{
title: '课程类型',
dataIndex: 'type',
key: 'type',
ellipsis: true, align: "center",
width: 120,
customRender: (value) => {
return (
<div>
{String(value.record.type)
? {
"0": "在线课",
"1": "面授课",
"2": "课程开发",
"3": "作业员入模培训",
"4": "其他",
}[value.record.type + ""]
: "-"}
</div>
)
}
},
{
title: '学习总人数',
dataIndex: 'studys',
key: 'studys',
ellipsis: true, align: "center",
width: 120,
},
{
title: '授课时长(分钟)',
dataIndex: 'teaching',
key: 'teaching',
ellipsis: true, align: "center",
width: 120,
},
{
title: '评分',
dataIndex: 'score',
key: 'score',
ellipsis: true, align: "center",
width: 120,
},
{
title: '开课状态',
dataIndex: 'courseStatus',
key: 'courseStatus',
ellipsis: true, align: "center",
width: 120,
customRender: (value) => {
return (
<div>
{value.record.courseStatus == 0 || value.record.courseStatus == 1
? {
"0": "未开课",
"1": "开课",
}[value.record.courseStatus + ""] || ""
: "-"}
</div>
)
}
},
{
title: '备注',
dataIndex: 'remark',
key: 'remark',
ellipsis: true, align: "center",
width: 120,
customRender: (text)=>{
return (
<div>
{text.record.remark || "-"}
</div>
)
},
},
])
//授课记录列表数据
const teacherrecordstableData = ref([
])
const getteacherrecordstableData = () => {
state.teacherrecordsLoading = true
state.teacherrecords.name = state.formParam.name
let obj = { ...state.teacherrecords }
// api接口
getNewInTeacherCourseList(obj).then((res) => {
teacherrecordstableData.value = res.data.data.records
state.teacherrecordstableDataTotal = Number(res.data.data.total);
state.teacherrecordsLoading = false
})
};
const pagination = computed(() => ({
total: state.teacherrecordstableDataTotal,
showSizeChanger: true,
showQuickJumper:true,
current: state.teacherrecords.pageNo,
pageSize: state.teacherrecords.pageSize,
onChange: paginationChange,
}));
const paginationChange = (e,pageSize) => {
state.teacherrecords.pageNo = e;
state.teacherrecords.pageSize = pageSize
getteacherrecordstableData();
};
//授课翻页
const teacherchangePagination = (page) => {
state.searchParam.pageNo = page;
// state.pageNo = page;
state.searchParam.pageSize = pageSize;
getTableDate();
state.teacherrecords.pageNo = page;
getteacherrecordstableData();
};
const resp = (val) => {
if(val){
const reg = /<[^<>]+>/g;
const value = val.replace(reg, "");
return value
}
}
return{
...toRefs(state),
router,
resp,
TeacherSystem,
handleBack,
rowCenter:{"text-align":"center",'width':'120px'},
rowCenters:{'min-width':'176px'},
teacherrecordstableData,
teacherrecordsColumns,
getteacherrecordstableData,
teacherchangePagination,
pagination,
paginationChange,
}
}
}
</script>
<style lang="scss" scoped>
.LookExternalLecturer {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.header {
padding: 0px 32px;
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
// background-color: red;
// margin-bottom: 20px;
flex-shrink: 0;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
// margin-left: 24px;
}
}
.filter {
margin-left: 38px;
margin-right: 38px;
margin-top: 30px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.select {
margin-right: 20px;
margin-bottom: 20px;
}
}
}
.backbtn{
float: right;
margin-right: 20px;
border: none;
color: #4ea6ff;
width: 80px;
height:64px
}
//小竖线
.line{
float:left; width: 3px; height: 25px; background: #4ea6ff;border-radius: 30%; margin-right: 5px;
}
::v-deep .ant-descriptions-header{
margin-bottom: 18px ;
margin-top: 18px;
}
.goback {
float: right;
padding-right: 70px;
//padding-top: 37px;
position: relative;
.return {
display: inline-block;
width: 42px;
height: 42px;
margin-top: 12px;
margin-right: 10px;
background-image: url("../../assets/images/projectadd/return.png");
}
.returntext {
display: inline-block;
position: absolute;
top: 12px;
color: #4ea6ff;
font-size: 14px;
}
}
::v-deep .ant-select-selection-overflow-item {
margin-top: -2px;
}
::v-deep .ant-select-multiple .ant-select-selection-item {
height: 34px
}
.tableBox {
padding-bottom: 20px;
margin: 20px 38px 30px;
::v-deep .ant-select-dropdown{
display: inline-block;
}
::v-deep .ant-select-selection-item{
margin-left: 3px;
}
::v-deep .ant-pagination-options-size-changer.ant-select{
width: 84px;
}
.pa {
width: 100%;
display: flex;
justify-content: right;
}
}
</style>