mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-07 01:46:43 +08:00
612 lines
19 KiB
Vue
612 lines
19 KiB
Vue
<template>
|
|
<a-drawer class="largeDrawerInside" :visible="visible" placement="right" :closable="false" width="80%" :title="false"
|
|
@close="handleClose">
|
|
<!-- 内部讲师查看详情 -->
|
|
<div class="LookInsideLecturer">
|
|
<div class="header" style="margin-top: -24px;margin-left: -24px;">
|
|
<div class="headerTitle">查看讲师</div>
|
|
<!-- <router-link :to="{ path: '/lecturerList', query: { activeKey: '1', } }"> -->
|
|
<img @click="handleClose" style="width: 29px; height: 29px; cursor: pointer"
|
|
src="../../assets/images/basicinfo/close.png" />
|
|
<!-- </router-link> -->
|
|
</div>
|
|
<a-layout-content>
|
|
<!-- 讲师信息 -->
|
|
<div style="width: 100%;margin-top: 10px;padding: 20px;">
|
|
<span class="line"></span>
|
|
<a-descriptions title="基本信息" bordered :column="4" :contentStyle="rowCenter" :labelStyle="rowCenters">
|
|
<!-- 一层 -->
|
|
<a-descriptions-item label="讲师头像">
|
|
<a-image :width="55" style="border-radius: 50%;width:55px;height:55px;" :src=formParam.photo />
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="讲师姓名">
|
|
<div style="user-select:text">{{ formParam.name }} / {{ formParam.userNo }}</div>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="讲师体系">
|
|
<div style="user-select:text">{{ formParam.tsystemName || '-' }}</div>
|
|
</a-descriptions-item>
|
|
<!-- 二层 -->
|
|
<a-descriptions-item label="讲师级别">{{ formParam.tlevelName || '-' }}</a-descriptions-item>
|
|
<a-descriptions-item label="认证状态">{{ formParam.certStatus == 0 ? '未认证' : formParam.certStatus == 1 ? '已认证' : '-' }}
|
|
<span>
|
|
<a-button type="text" class="moreidbtn" v-if="formParam.certStatus == 1"
|
|
@click="handleup">查看认证资料</a-button>
|
|
</span>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="授课时长"> <span v-if="formParam.teaching != null">{{ formParam.teaching }}分钟({{
|
|
(Number(formParam.teaching) / 60).toFixed(2)}}小时)</span><span v-else>-</span>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="发薪地 ">{{ formParam.salaryName || '-' }}</a-descriptions-item>
|
|
<!-- 三层 -->
|
|
<a-descriptions-item label="在职状态">{{ formParam.waitStatus == '0' ? '在职' : formParam.waitStatus == '1'
|
|
?'离职':'-'}}</a-descriptions-item>
|
|
<a-descriptions-item label="账号状态">{{ formParam.status == '0' ? '临时' : formParam.status == '1'
|
|
? '启用' : formParam.status == 2 ?'停用':'-'}}</a-descriptions-item>
|
|
<a-descriptions-item label="录入方式">{{ formParam.createFrom == '0' ? '自动录入'
|
|
: formParam.createFrom == '1' ? '手动录入':'-'}}</a-descriptions-item>
|
|
<a-descriptions-item style="max-width: 400px;" label="所属组织">
|
|
<span :title="formParam.orgName" style="user-select:text">{{ formParam.orgName || '-' }}</span>
|
|
</a-descriptions-item>
|
|
</a-descriptions>
|
|
<div style="margin-top: 10px;"></div>
|
|
<span class="line"></span>
|
|
<a-descriptions title="其他信息" bordered :column="4" :contentStyle="rowCenter" :labelStyle="rowCenters">
|
|
<!-- 一层 -->
|
|
<a-descriptions-item style="max-width: 200px;" 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.workExperience != null && resp(formParam.workExperience)" style="min-width: 500px;"
|
|
v-html="formParam.workExperience"></div>
|
|
<div v-else>-</div>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="擅长课程" :span="4">
|
|
<div v-if="formParam.courses != null && resp(formParam.courses)" style="min-width: 500px;"
|
|
v-html="formParam.courses"></div>
|
|
<div v-else>-</div>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="教师专长" :span="4">
|
|
<a-tag v-if="formParam.expertiseNames" color="blue" style="margin-right:10px"
|
|
v-for="item in formParam.expertiseNames?.split(',')">{{ item }}</a-tag>
|
|
<span v-else>-</span>
|
|
</a-descriptions-item>
|
|
</a-descriptions>
|
|
<!-- 记录 -->
|
|
<div style="margin-top: 8px;"></div>
|
|
<a-tabs v-model:activeKey="activeKey">
|
|
<a-tab-pane key="1" tab="授课记录">
|
|
<a-table :header-cell-style="{ 'text-align': 'center' }" :columns="teacherrecordsColumns"
|
|
:data-source="teacherrecordstableData" :loading="teacherrecordsLoading" :scroll="{ x: '1000' }"
|
|
:pagination="pagination">
|
|
</a-table>
|
|
<div style="float: right;">
|
|
<a-pagination v-if="tableDataTotal > 10" :showSizeChanger="true" :showQuickJumper="false"
|
|
:hideOnSinglePage="false" :pageSize="searchParam.pageSize" :current="searchParam.pageNo"
|
|
:total="tableDataTotal" class="pagination" @change="changePagination" />
|
|
</div>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="2" tab="晋级记录">
|
|
<a-table :header-cell-style="{ 'text-align': 'center' }" style="border: 1px solid #f2f6fe"
|
|
:columns="promotionrecordsColumns" :data-source="promotionrecordstableData"
|
|
:loading="promotionrecordsLoading" @expand="expandTable" :pagination="false">
|
|
<template #bodyCell="{ record, column, index }">
|
|
</template>
|
|
</a-table>
|
|
<div style="float: right;">
|
|
<a-pagination v-if="teacherrepromotableDataTotal > 10" :showSizeChanger="true" :showQuickJumper="false"
|
|
:hideOnSinglePage="true" :pageSize="teacherrepromo.pageSize" :current="teacherrepromo.pageNo"
|
|
:total="teacherrepromotableDataTotal" class="pagination" @change="teacherrepromoPagination" />
|
|
</div>
|
|
</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 { useStore } from "vuex";
|
|
import { getTeacherById, getTeacherLogList } from "../../api/Lecturer";
|
|
import { getNewInTeacherCourseList } from "../../api/Teaching";
|
|
import avatar from '@/assets/avatar.png'
|
|
import Avatarman from '@/assets/Avatarman.png'
|
|
import Avatarwoman from '@/assets/Avatarwoman.png'
|
|
import dayjs from "dayjs";
|
|
export default {
|
|
name: "LookInsideLecturer",
|
|
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: 1,
|
|
pageNo: "1",
|
|
pageSize: "10",
|
|
id: null
|
|
},
|
|
teacherrepromo: {
|
|
userId: null,
|
|
pageNo: "1",
|
|
pageSize: "10",
|
|
}
|
|
});
|
|
watch(() => props.visible, (val) => {
|
|
console.log(val, 'xixixiixix')
|
|
if (val) {
|
|
const id = props.id
|
|
TeacherSystem(id)
|
|
} else {
|
|
state.formParam = {}
|
|
}
|
|
})
|
|
const isOrgNames = (val) => {
|
|
if (val) {
|
|
const parts = val.split('/');
|
|
const reversedParts = parts.reverse();
|
|
state.formParam.orgNames = reversedParts.join('/');
|
|
}
|
|
}
|
|
const handleClose = () => {
|
|
emits.emit('update:visible', false)
|
|
}
|
|
//内部讲师详情
|
|
const TeacherSystem = (id) => {
|
|
getTeacherById({ id, }).then((res) => {
|
|
let objA = res.data.data
|
|
console.log(objA, '11111111111')
|
|
state.formParam = objA
|
|
state.formParam.photo = state.formParam.photo == null ?
|
|
state.formParam.gender == 1 ? Avatarman :
|
|
state.formParam.gender == 2 ? Avatarwoman : Avatarman : (state.formParam.photo.includes('upload') ? state.formParam.photo : '/upload' + state.formParam.photo)
|
|
state.teacherrepromo.userId = res.data.data.id
|
|
console.log(state.teacherrepromo.id);
|
|
isOrgNames(state.formParam.orgName)
|
|
getteacherrecordstableData()
|
|
promotionrecordstableData.value = res.data.data.levelLogList
|
|
})
|
|
.catch((err) => {
|
|
console.log("内部讲师详情", err);
|
|
});
|
|
}
|
|
const resp = (val) => {
|
|
if (val) {
|
|
const reg = /<[^<>]+>/g;
|
|
const value = val.replace(reg, "");
|
|
return value
|
|
}
|
|
}
|
|
//授课记录列表
|
|
const teacherrecordsColumns = ref([
|
|
// {
|
|
// 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: 180,
|
|
customCell: () => { return { style: { userSelect: 'text' } } },
|
|
},
|
|
{
|
|
title: '课程日期',
|
|
dataIndex: 'teachingDate',
|
|
key: 'teachingDate',
|
|
ellipsis: true, align: "center",
|
|
width: 160,
|
|
customRender: (value) => {
|
|
return (
|
|
<div style="user-select: text">
|
|
{ value.record?.teachingDate ? dayjs(value.record?.teachingDate).format("YYYY-MM-DD HH:mm") : '-' }
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: "内容分类",
|
|
width: 100,
|
|
dataIndex: "courseTypeName",
|
|
ellipsis: true,
|
|
key: "keywords",
|
|
align: "center",
|
|
},
|
|
{
|
|
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,
|
|
customRender: ({ text }) => {
|
|
return text ? text + '人' : '-'
|
|
}
|
|
},
|
|
{
|
|
title: '授课时长(分钟)',
|
|
dataIndex: 'teaching',
|
|
key: 'teaching',
|
|
ellipsis: true, align: "center",
|
|
width: 130,
|
|
customRender: ({ text }) => {
|
|
return text ? text + '分钟' : '-'
|
|
}
|
|
},
|
|
{
|
|
title: '评分',
|
|
dataIndex: 'score',
|
|
key: 'score',
|
|
ellipsis: true, align: "center",
|
|
width: 120,
|
|
customRender: (value) => {
|
|
return (
|
|
<div>
|
|
{ value.record.score ? Number(value.record.score).toFixed(0) == 0 ? '-' : Number(value.record.score).toFixed(2) + '分' : '-' }
|
|
</div>
|
|
)
|
|
}
|
|
},
|
|
{
|
|
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: 200,
|
|
customRender: (value) => {
|
|
return (
|
|
<div>{ value.record.remark || '-' }</div>
|
|
)
|
|
}
|
|
},
|
|
])
|
|
//授课记录列表数据
|
|
const teacherrecordstableData = ref([
|
|
])
|
|
const getteacherrecordstableData = () => {
|
|
state.teacherrecordsLoading = true
|
|
// state.teacherrecords.name = state.formParam.name
|
|
state.teacherrecords.teacherId = state.formParam.id
|
|
let obj = { ...state.teacherrecords }
|
|
// api接口
|
|
getNewInTeacherCourseList(obj).then((res) => {
|
|
console.log(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.teacherrecords.pageNo = page;
|
|
// state.pageNo = page;
|
|
state.teacherrecords.pageSize = pageSize;
|
|
getteacherrecordstableData();
|
|
};
|
|
//晋级记录翻页
|
|
const teacherrepromoPagination = (page) => {
|
|
state.teacherrepromo.pageNo = page;
|
|
// getpromotionrecordstableData();
|
|
};
|
|
//晋级记录列表
|
|
const promotionrecordsColumns = ref([
|
|
{
|
|
title: '变更时间',
|
|
dataIndex: 'createTime',
|
|
key: 'createTime',
|
|
ellipsis: true, align: "center",
|
|
width: 120,
|
|
},
|
|
{
|
|
title: '变更方式',
|
|
dataIndex: 'type',
|
|
key: 'type',
|
|
ellipsis: true, align: "center",
|
|
width: 120,
|
|
customRender: (value) => {
|
|
return (
|
|
<div>
|
|
{ value.record.type == 1 ? "自动" : value.record.type == 0 ? '手动' : "-" }
|
|
</div>
|
|
)
|
|
}
|
|
},
|
|
{
|
|
title: '变更结果',
|
|
dataIndex: 'result',
|
|
key: 'result',
|
|
ellipsis: true, align: "center",
|
|
width: 120,
|
|
},
|
|
{
|
|
title: '操作人',
|
|
dataIndex: 'updateName',
|
|
key: 'updateName',
|
|
ellipsis: true, align: "center",
|
|
width: 120,
|
|
customRender: (value) => {
|
|
return (
|
|
<div>
|
|
{ value.record.updateName || '-' }
|
|
</div>
|
|
)
|
|
}
|
|
},
|
|
])
|
|
//晋级记录列表数据
|
|
const promotionrecordstableData = ref([
|
|
])
|
|
// const getpromotionrecordstableData = () => {
|
|
// state.promotionrecordsLoading = true
|
|
// // state.teacherrepromo.kid = state.kid
|
|
// getTeacherLogList(state.teacherrepromo).then((res) => {
|
|
// promotionrecordstableData.value = res.data.data.records
|
|
// state.teacherrepromotableDataTotal = Number(res.data.data.total);
|
|
// })
|
|
// state.promotionrecordsLoading = false
|
|
// };
|
|
const goback = () => {
|
|
router.back()
|
|
}
|
|
const store = useStore();
|
|
// // 内容分类
|
|
// const sysTypeOptions = computed(() => {return store.state.content_type;});
|
|
// //内容分类
|
|
// const getSysTypeMap = (code) => {
|
|
// if(code=="")return
|
|
// // console.log(store.state.sysTypeMap,'map集合');
|
|
// return store.state.sysTypeMap.get(code)
|
|
// }
|
|
// getSysTypeMap()
|
|
const handleup = () => {
|
|
let url = "";
|
|
if(state.formParam.certification != null && state.formParam.certification != undefined && state.formParam.certification != ''){
|
|
if(state.formParam.certification.includes("/upload")){
|
|
url = `${process.env.VUE_APP_BOE_API_URL}${state.formParam.certification}`
|
|
}else{
|
|
url = `${process.env.VUE_APP_BOE_API_URL}/upload${state.formParam.certification}`
|
|
}
|
|
}
|
|
window.open(url);
|
|
}
|
|
return {
|
|
...toRefs(state),
|
|
router,
|
|
goback,
|
|
handleup,
|
|
// getSysTypeMap,
|
|
// sysTypeOptions,
|
|
TeacherSystem,
|
|
handleClose,
|
|
isOrgNames,
|
|
rowCenter: { "text-align": "left", 'min-width': '176px' },
|
|
rowCenters: { "text-align": "center", 'width': '160px', 'min-width': '110px' },
|
|
teacherrecordstableData,
|
|
teacherrecordsColumns,
|
|
resp,
|
|
getteacherrecordstableData,
|
|
teacherchangePagination,
|
|
pagination,
|
|
paginationChange,
|
|
teacherrepromoPagination,
|
|
promotionrecordsColumns,
|
|
promotionrecordstableData,
|
|
// getpromotionrecordstableData,
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.LookInsideLecturer {
|
|
padding: 24px;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.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: 16px;
|
|
background: #4ea6ff;
|
|
border-radius: 30%;
|
|
margin-left: -10px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
::v-deep .ant-descriptions-header {
|
|
margin-bottom: 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;
|
|
}
|
|
}
|
|
|
|
.moreidbtn {
|
|
border: none;
|
|
color: #4ea6ff;
|
|
width: 80px
|
|
}
|
|
|
|
::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> |