fe-manage/src/views/lecturer/LookExternalLecturer.vue

ExternalLecturer
<template>
    <!-- 外部讲师查看详情 -->
    <div class="LookExternalLecturer">
    <a-layout-header style="background: white;color: black; font-size: 20px ;">
     <span>查看讲师</span>
     <router-link to="/lecturerList" class="goback">
            <span class="return"></span>
            <router-link class="returntext" to="/lecturerList" style="line-height:47px ">
              返回
            </router-link>
          </router-link>
     </a-layout-header>
    <a-divider style="height: 1px; background-color: #b7b8b7 ;margin: 0;" />
    <a-layout-content>
        <!-- 讲师信息 -->
        <div style="width: 100%;margin-top: 10px;">
        <span class="line"></span>
        <a-descriptions title="讲师信息" bordered :column="3" :contentStyle="rowCenter" :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.userNo}}</a-descriptions-item>
    <a-descriptions-item label="手机号码">{{formParam.mobile}}</a-descriptions-item>
    <a-descriptions-item label="讲师邮箱">{{formParam.email}}</a-descriptions-item>
  <a-descriptions-item label="所属组织" :span="2">{{formParam.departId}}</a-descriptions-item>
  </a-descriptions>
  <div style="margin-top: 10px;"></div>
  <span class="line" ></span>
  <a-descriptions title="其他信息" bordered :column="4" :contentStyle="rowCenter" :labelStyle="rowCenter"  >
            <!-- 一层 -->
    <a-descriptions-item label="讲师介绍" :span="4"><div style="min-width: 500px;"> {{formParam.description===null?'--':formParam.description}}</div> </a-descriptions-item>
    <a-descriptions-item label="备注" :span="4">
      {{formParam.remark===null?'--':formParam.remark}}</a-descriptions-item>
  </a-descriptions>
  <!-- 记录 -->
  <div style="margin-top: 1px;"></div>
  <a-tabs v-model:activeKey="activeKey">
    <a-tab-pane key="1" tab="授课记录">
      <a-table :header-cell-style="{ 'text-align': 'center' }" style="border: 1px solid #f2f6fe" :columns="teacherrecordsColumns"
        
        :data-source="teacherrecordstableData" :loading="teacherrecordsLoading" @expand="expandTable" :pagination="false">
        <template #bodyCell="{  record,  column }" >
            <!-- 鼠标悬停提示 -->
            <template v-if="column.key === 'remark'">
              <a-space style="display:flex ;justify-content: space-around;  ">
                <a-popover>
    <template #content>
      <p>{{ record.remark }}</p>
    </template>
    <span>{{ record.remark }}</span>
  </a-popover>
              </a-space>
            </template>
        </template>
      </a-table>
      <div style="float: right;">
    
          <a-pagination
          v-if="tableDataTotal > 10"
        :showSizeChanger="false"
        :showQuickJumper="true"
        :hideOnSinglePage="true"
        :pageSize="searchParam.pageSize"
        :current="searchParam.pageNo"
        :total="tableDataTotal"
        class="pagination"
        @change="changePagination"
      />
          </div>
       </a-tab-pane>
   
  </a-tabs>
</div>
    </a-layout-content>
    </div>
</template>
<script lang ="jsx">
import { useRouter,useRoute } from "vue-router";
import { reactive, toRefs, ref } from "vue"
import {getTeacherById,getTeacherCourseList } from "../../api/Lecturer"; 
export default{
    name :"LookExternalLecturer",
    components:{

    },
    setup(){
        const router=useRouter();
        const { query: { id }} = useRoute();
        const state = reactive({
            activeKey:'1',
            id,
            formParam: {
      },
      promotionrecordsLoading: false,  //晋级记录遮罩层
      teacherrecordsLoading: false,// 授课记录遮罩层
      teacherrecordstableDataTotal: -1,//授课记录列表总条数
      teacherrepromotableDataTotal: -1,//晋级记录总条数
      teacherrecords: {
        teacherType:'1',
        pageNo: "1",
        pageSize: "10",
        id: null
      },
      teacherrepromo:{
        id:null,
        pageNo: "1",
        pageSize: "10",
      }
        });
        
          //外部讲师详情
    const TeacherSystem = () => {
      getTeacherById(state.id).then((res) => {
        console.log("内部讲师详情", res.data);
        state.formParam = res.data.data[0]
        state.formParam.photo = state.formParam.photo ===null ? 'https://p0.itc.cn/q_70/images01/20211013/f45d91616a364d6ea9c42a8db69734aa.png' : state.formParam.photo
      })
        .catch((err) => {
          console.log("内部讲师详情", err);
        });
    }
    TeacherSystem()
           //返回上一层
    const handleBack=()=>{
      router.back()
    };
        //授课记录列表
        const teacherrecordsColumns = ref([
      {
        title: '课程编号',
        dataIndex: 'offcourseId',
        key: 'offcourseId',
        elipsis: true, align: "center",
        width: 120,
      },
      {
        title: '课程名称',
        dataIndex: 'name',
        key: 'name',
        elipsis: true, align: "center",
        width: 120,
      },
      {
        title: '课程日期',
        dataIndex: 'beginTime',
        key: 'beginTime',
        elipsis: true, align: "center",
        width: 120,
      },
      {
        title: '内容分类',
        dataIndex: 'nrfl',
        key: 'nrfl',
        elipsis: true, align: "center",
        width: 120,
      },
      {
        title: '课程类型',
        dataIndex: 'type',
        key: 'type',
        elipsis: true, align: "center",
        width: 120,
        customRender: (value) => {
          return (
            <div>
              {value.record.type == 1 || value.record.type == 2 || value.record.type == 3
                ? {
                  "1": "项目开课",
                  "2": "路径开课",
                  "3": "面授开课",
                }[value.record.type + ""] || ""
                : "-"}
            </div>
          )
        }
      },
      {
        title: '学习总人数',
        dataIndex: 'projectMember',
        key: 'projectMember',
        elipsis: true, align: "center",
        width: 120,
      },
      {
        title: '授课时长',
        dataIndex: 'duration',
        key: 'duration',
        elipsis: true, align: "center",
        width: 120,
      },
      {
        title: '评分',
        dataIndex: 'score',
        key: 'score',
        elipsis: true, align: "center",
        width: 120,
      },
      {
        title: '开课状态',
        dataIndex: 'status',
        key: 'status',
        elipsis: true, align: "center",
        width: 120,
        customRender: (value) => {
          return (
            <div>
              {value.record.status == 0 || value.record.status == 1
                ? {
                  "0": "未开课",
                  "1": "已开课",
                }[value.record.status + ""] || ""
                : "-"}
            </div>
          )
        }
      },
      {
        title: '备注',
        dataIndex: 'remark',
        key: 'remark',
        elipsis: true, align: "center",
        width: 120,
        scopedSlots: { customRender: "remark" },
      },
    ])
    //授课记录列表数据
    const teacherrecordstableData = ref([
    ])
    const getteacherrecordstableData = () => {
      state.teacherrecordsLoading = true
      state.teacherrecords.id = state.id
      let obj = { ...state.teacherrecords }

      // api接口
      getTeacherCourseList(obj).then((res) => {
        teacherrecordstableData.value = res.data.data.records
        state.teacherrecordstableDataTotal = Number(res.data.data.total);
        state.teacherrecordsLoading = false
      })
    };
    getteacherrecordstableData()
    //授课翻页
    const teacherchangePagination = (page) => {
      state.teacherrecords.pageNo = page;
      getteacherrecordstableData();
    };
        return{
            ...toRefs(state),
            router,
            TeacherSystem,
            handleBack,
            rowCenter:{"text-align":"center"},
            teacherrecordstableData,
      teacherrecordsColumns,
      getteacherrecordstableData,
      teacherchangePagination,
        }
    }
}
</script>
<style lang="scss" scoped>

.LookExternalLecturer {
  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: 25px; background: #4ea6ff;border-radius: 30%; margin-right: 5px;
}
::v-deep .ant-descriptions-header{
    margin-bottom: 10px ;
}
.goback {
        float: right;
        padding-right: 70px;
        //padding-top: 37px;
        position: relative;

        .return {
          display: inline-block;
          width: 42px;
          height: 42px;
          margin-top: 17px;
          margin-right: 10px;
          background-image: url("../../assets/images/projectadd/return.png");
        }

        .returntext {
          display: inline-block;
          position: absolute;
          top: 12px;
          color: #4ea6ff;
          font-size: 14px;
        }
      }
</style>