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

授课记录静态页面调整

Browse Source
This commit is contained in:
wangxuemei
2024-06-04 18:57:51 +08:00
parent 34c4a796a8
commit 60e3719c87
5 changed files with 3279 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/api/Lecturer.js Normal file
View File

@@ -0,0 +1,43 @@
import http from "./config";
/*
* @Author: lixg lixg@dongwu-inc.com
* @Date: 2022-11-18 14:09:43
* @LastEditors: lixg lixg@dongwu-inc.com
* @LastEditTime: 2023-02-11 18:55:44
* @FilePath: /fe-manage/src/api/indexProjStu.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
// 获取内部讲师体系列表
//VUE_APP_BASE_API /manageApi
export const getTeacherSystemList = (obj) => http.post('/admin/teacher/getSystem', obj)
// 获取内部讲师列表
export const getTeacherList = (obj) => http.post('/admin/teacher/getInTeacherList', obj)
//获取内部讲师发薪地
export const getTeacherPayRollPriceList = (obj) => http.post('/admin/teacher/getPayRollPlace', obj)
//获取内部讲师级别
export const getLevel = (obj) => http.post('/admin/teacher/getLevel', obj)
//新增内部讲师
export const insertTeacher = () => http.post('/admin/teacher/insertInTeacher' ,obj)
//修改 内部讲师
export const updateInTeacher = () => http.post('/admin/teacher/updateInTeacher' ,obj)
//内部讲师详情
export const getTeacherById= (obj) => http.post('/admin/teacher/getTeacherById' ,obj)
//删除内部讲师
export const deleteTeacher = (obj) => http.post('/admin/teacher/deleteInTeacher' ,obj)//
//修改内部讲师状态
export const updateTeacherState = (obj) => http.post('/admin/teacher/update-status' ,obj)
//获取内部讲师授课记录
export const getTeacherCourseList = (obj) => http.post('/admin/teacher/getTeacherCourseList' ,obj)
//导出内部讲师列表
// http://pretest.zcwytd.com/manageApi/lesson_records/export
export const exportteacher = (obj) => http.post('/admin/lesson_records/export' ,obj)
// 所有教师专长
export const getTeacherExpertise = (obj) => http.post('/admin/teacher/getTeacherExpertise' ,obj)
//根据父级教师专长(pid)查找子级教师专长
export const getTeacherExpertiseByPid = (obj) => http.post('/admin/teacher/getTeacherExpertiseByPid' ,obj)
// 新增页面内部姓名
export const infoteacher = (obj) => http.get('/admin/thirdApi/org/info' ,obj)
//外部讲师列表
export const getOutTeacherList = (obj) => http.post('/admin/teacher/getOutTeacherList', obj)
//外部讲师详情
export const getOuterTeacherById = (obj) => http.post('/admin/teacher/getOuterTeacherById', obj)

11
src/api/Teaching.js Normal file
View File

@@ -0,0 +1,11 @@
import http from "./config";
//列表查询内部讲师授课记录
export const getNewInTeacherCourseList = (obj) => http.post('/admin/teacher/getNewInTeacherCourseList', obj)
//内部讲师授课记录详情
export const getTeacherCourseList = (obj) => http.post('/admin/teacher/getTeacherCourseList', obj)
//授课记录导出
export const getexport = (obj) => http.post('/lesson_records/export', obj)
//授课记录导入
export const importTeacherCourseRecord = (obj) => http.post('/importTeacherCourseRecord', obj)
//外部讲师授课记录
export const getOuterTeacherCourseList = (obj) => http.post('/admin/teacher/getOuterTeacherCourseList', obj)

1275
src/views/lecturer/ExternalTeaching.vue
View File

File diff suppressed because it is too large Load Diff

977
src/views/lecturer/ExternalTeachingDetail.vue Normal file
View File

@@ -0,0 +1,977 @@
<!-- 内部授课详情页面 -->
<template>
<div class="ExternalTeachingDetail">
<div style="width:100px ; color:black ;margin: 10px ;" @click="handleBack">
返回上一层
</div>
<!-- 搜索框及按钮 -->
<div class="filter">
<div class="filterItems">
<div class="select">
<a-input v-model:value="searchParam.userNo " style="width: 230px; height: 40px; border-radius: 8px"
placeholder="请输入讲师姓名/工号" allowClear showSearch>
</a-input>
<!-- <a-select style="width: 230px" placeholder="请选择所属组织" v-model:value="searchParam.userNo"
:options="infoteacherList">
</a-select> -->
</div>
<div class="select">
<a-input v-model:value="searchParam.teacherNo " style="width: 230px; height: 40px; border-radius: 8px"
placeholder="请输入姓名/课程编号" allowClear showSearch>
</a-input>
</div>
<div class="select">
<a-select style="width: 230px" placeholder="级别" v-model:value="searchParam.tlevelName"
:options="getLevelList">
</a-select>
</div>
<div class="select">
<a-select style="width: 230px" v-model:value="searchParam.tlevelName" placeholder="内容分类" :options="getLevelList">
</a-select>
</div>
<div class="select">
<a-select style="width: 230px" v-model:value="searchParam.certStatus" placeholder="开课场地"
:options="AuthenticationStatusList">
</a-select>
</div>
<div style="display: flex; margin-bottom: 20px">
<div class="btnn btn1" @click="searchSubmit">
<div class="search"></div>
<div class="btnText">搜索</div>
</div>
<div class="btn btn2" @click="searchReset">
<div class="search"></div>
<div class="btnText">重置</div>
</div>
</div>
</div>
<!-- 表格 -->
<div style="padding: 10px 0">
<a-table :header-cell-style="{ 'text-align': 'center' }" style="border: 1px solid #f2f6fe" :columns="columns"
:data-source="tableData" :loading="tableLoading" @expand="expandTable" :pagination="false">
<template #bodyCell="{ record, column }">
<template v-if="column.key === 'operation'">
<a-space style="display:flex ;justify-content: space-around; ">
<a-button type="link" @click="() => handleModify(record, String(record.courseform))">修改</a-button>
<a-button type="link" @click="() => deleteModal(record, String(record.courseform))">删除</a-button>
</a-space>
</template>
</template>
</a-table>
</div>
</div>
<div class="tableBox ">
<div style="float: right;">
<a-pagination
v-if="tableDataTotal > 10"
:showSizeChanger="true"
:hideOnSinglePage="true"
:pageSize="pageSize"
v-model:current="searchParam.pageNo"
:total="tableDataTotal"
class="pagination"
@change="changePagination"
/>
</div>
</div>
<!-- 弹窗组件 -->
<a-modal :visible="teacherdialog" :title="teacherdialogtitle" @ok="closeModal2" :footer="null" :closable="false"
wrapClassName="doublepro" width="734px" height="476px">
<div style="padding-bottom: 15px;" >
<!-- <div style="border: 1px rgb(177, 177, 177) solid; margin-left: 33px; margin-right: 33px; margin-bottom: 33px;" > -->
<div class="ExternalTeachingDetail" >
<div class="filter">
<div class="filterItems">
<div class="select">
<span style="display:inline-block ;width:600px; ">请输入授课时长(小时) </span>
<a-input v-model:value="formParam.teaching"
style="width:600px; height: 40px ; " placeholder="" allowClear showSearch>
</a-input>
</div>
<div class="del_btnbox" >
<a-button class="del_btn btn1" @click="cancelTeacherDialog" style="margin-right: 32px;">取消</a-button>
<a-button class="del_btn btn2" @click="createTeacherDialog" :loading="buttonLoading">保存
</a-button>
</div>
</div>
</div>
</div>
<!-- </div> -->
</div>
</a-modal>
<!-- 删除功能弹窗 -->
<div>
<a-modal v-model:visible="deleteTeacherdialog" :footer="null" :closable="close" wrapClassName="canclestu1"
centered="true">
<div class="delete">
<div class="del_header"></div>
<div class="del_main">
<div class="header">
<div class="icon1"></div>
<span>提示</span>
</div>
<div class="body">
<span>您确定要删除此条记录吗</span>
</div>
<div class="del_btnbox">
<div class="del_btn btn2" @click="cancelTeacherDialog" style="margin-right: 32px">
<div class="btnText">取消</div>
</div>
<div class="del_btn btn2"
@click="closeDeleteTeacher">
<div class="btnText">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
</div>
<!-- <div> <Upload/> </div> -->
</div>
</template>
<script lang="jsx">
import { reactive, toRefs, ref } from "vue";
import { useRouter } from "vue-router";
import Editor from "@/components/project/Editor";
import Upload from "@/components/project/Upload";
import {infoteacher,getLevel,deleteTeacher, } from "../../api/Lecturer";
import { getNewInTeacherCourseList} from "../../api/Teaching";
// import {getProjSt} from "../../api/indexProjStu";
// import AddTeacher from "../../components/drawers/project/AddTeacher"
export default {
name: "ExternalTeachingDetail",
components: {
// AddTeacher,
Editor,
Upload
},
setup() {
const router = useRouter();
const state = reactive({
tableLoading:false,
delTeacherId:null, //删除id确认
deleteTeacherdialog: false, //删除弹窗
teacherdialog: false, //控制讲师弹窗
teacherdialogtitle: '',//讲师弹框title内容
pageSizeOptions: ['10', '20', '30', '50'], //下拉选择每页显示多少条
pageSize: 10,
tableDataTotal: -1,//table列表总条数
formParam: {
},
searchParam: {
userNo:null,//工号姓名
teacherNo:null,//课程编号
tsystemName:null,//讲师体系
payrollPlaceName:null,//发薪地
pageNo: "1",
pageSize: "10"
},
})
//获取内部讲师级别
const getLevelList = ref([
// { value: 0, label: "未定级" },
])
const getLevelLista =() => {
getLevel().then((res)=>{
if (res.data.code === 200) {
let arr = res.data.data;
let array = getLevelList.value;
arr.map((value) => {
let obj = {
value: value.id,
label: value.name,
};
array.push(obj);
});
getLevelList.value = array;
}
})
}
getLevelLista()
const OnTheJobStatusList = ref([
{ value: 0, label: "分类1" },
{ value: 1, label: "分类2" },
])
const AuthenticationStatusList = ref([
{ value: 0, label: "未开课" },
{ value: 1, label: "已开课" },
])
const columns = ref([
{
title: '课程编号 ',
dataIndex: 'userNo',
key: 'userNo',
elipsis: true,
width: 120,
},
{
title: '课程名称 ',
dataIndex: 'tlevelName',
key: 'tlevelName',
elipsis: true,
width: 120,
},
{
title: '授课/课程日期 ',
dataIndex: 'payrollPlaceName',
key: 'payrollPlaceName',
elipsis: true,
width: 120,
},
{
title: '授课/课程开发日期 ',
dataIndex: 'payrollPlaceName',
key: 'payrollPlaceName',
elipsis: true,
width: 120,
},
{
title: '开课场地 ',
dataIndex: 'payrollPlaceName',
key: 'payrollPlaceName',
elipsis: true,
width: 120,
},
{
title: '所属课程 ',
dataIndex: 'payrollPlaceName',
key: 'payrollPlaceName',
elipsis: true,
width: 120,
},
{
title: '所属项目 ',
dataIndex: 'payrollPlaceName',
key: 'payrollPlaceName',
elipsis: true,
width: 120,
},
{
title: '所属路径 ',
dataIndex: 'payrollPlaceName',
key: 'payrollPlaceName',
elipsis: true,
width: 120,
},
{
title: '晶芯科技 ',
dataIndex: 'payrollPlaceName',
key: 'payrollPlaceName',
elipsis: true,
width: 120,
},
{
title: '授课时长(H) ',
dataIndex: 'teaching',
key: 'teaching',
elipsis: true,
width: 120,
},
{
title: '内容分类',
dataIndex: 'teaching',
key: 'teaching',
elipsis: true,
width: 120,
},
{
title: '课程类型 ',
dataIndex: 'waitStatus',
key: 'waitStatus',
elipsis: true,
width: 120,
customRender: (value) => {
return (
<div>
{value.record.waitStatus == "0" || value.record.waitStatus == "1"
? {
"0": "在线课",
"1": "面授课",
}[value.record.waitStatus + ""] || ""
: "-"}
</div>
)
}
},
{
title: '参训学员人数',
dataIndex: 'teaching',
key: 'teaching',
elipsis: true,
width: 120,
},
{
title: '评分',
dataIndex: 'teaching',
key: 'teaching',
elipsis: true,
width: 120,
},
{
title: '开课状态 ',
dataIndex: 'certStatus',
key: 'certStatus',
elipsis: true,
width: 120,
customRender: (value) => {
return (
<div>
{value.record.certStatus == 0 || value.record.certStatus == 1
? {
"0": "未开课",
"1": "已开课",
}[value.record.certStatus + ""] || ""
: "-"}
</div>
)
}
},
{
title: '操作 ',
dataIndex: 'operation',
key: 'operation',
elipsis: true,
width: 300,
scopedSlots: { customRender: "action" },
},
])
//列表数据
const tableData = ref([
// {
// name: '夏冬',
// userNo: '1152790',
// organizationDTO: '京东方科技集团股份有限公司/显示器创新业务中台/品质中台/整机品保中心QA部',
// lecturerSystem: 'MiniLED事业',
// grade: '1',
// placeOfPay: 'B1',
// teachingDuration: '0.00小时',
// onTheJobStatus: '1',
// authenticationStatus: '1',
// accountStatus: '1',
// },
])
// 搜索
const searchSubmit = () => {
getTableDate();
};
//重置
const searchReset = () => {
state.searchParam = { pageNo: 1, pageSize: 10 };
// getTableDate();
};
// List接口数据
const getTableDate = (obj) => {
state.tableLoading=true
let objA = {...state.searchParam};
getNewInTeacherCourseList(objA)
.then((res) => {
tableData.value = res.data.data.records
state.tableDataTotal = Number(res.data.data.total);
state.tableLoading=false
console.log("获取tableData", tableData);
})
};
getTableDate()
// // List接口数据
// const getTableDate = ()=>{
// state.tableloading = true ;
// api
// // api 接口命名
// getNewInTeacherCourseList({
// ...state.searchParam
// })
// .then((res)=>{
// console.log(res.data.rows)
// // state.tableDataTotal = Number(res.data.data.total);
// // state.tableLoading = false;
// // const tableData = res.data.rows;
// // // initDataSublist("", data);
// // console.log(data);
// // tableData.value = data;
// // console.log("tableData", tableData);
// })
// }
// 获取项目列表信息
//let tableData = ref([]);
// // 翻页
const changePagination = (page) => {
state.searchParam.pageNo = page;
getTableDate();
};
// 新增讲师
const addTeacher = () => {
state.teacherdialog = true;
state.teacherdialogtitle = '添加授课记录'
//获取内部讲师级别
getLevelLista()
getTeacherExpertisea()
}
//修改讲师信息弹窗
const handleModify = (record) => {
state.teacherdialog = true;
state.formParam.teaching=record.userNo
state.teacherdialogtitle = '修改授课时长'
}
//保存
const createTeacherDialog =()=>{
//调用新增修改接口
// this.$refs["formParam"].validate(valid => {
// if (valid) {
// let objform = {...state.formParam}
// if (state.formParam.userNo != undefined) {
// updateInTeacher (objform).then(response => {
// state.$modal.msgSuccess("修改成功");
// state.teacherdialog = false;
// state.getlist()
// });
// }
// }
// })
state.teacherdialog = false
}
//删除弹窗
const deleteModal = (record) => {
state.deleteTeacherdialog = true
state.delTeacherId = record.id
};
//确认删除
const closeDeleteTeacher=()=>{
let ids ={
id : state.delTeacherId
}
console.log(ids)
//调用删除接口
deleteTeacher(ids).then((res)=>{
if(res.data.code == 200 ){
// message.success("删除成功");
state.deleteTeacherdialog = false
getTableDate();
}
})
}
//取消按钮 清空输入的数据
const cancelTeacherDialog = () => {
state.teacherdialog = false
cancel()
};
//清空数据
const cancel = () => {
state.formParam ={
teaching :null,
}
}
//页面内部姓名
const infoteacherList = ref([
]);
const getinfoteacher = (obj) => {
state.tableLoading=true
infoteacher()
.then((res) => {
infoteacherList.value = res.data.data.records
})
};
//返回上一层
const handleBack=()=>{
router.back()
}
//导出功能
// const handleExport = ()=>{
// this.download('lesson_records/export', {
// ...state.searchParam
// }, `project_${new Date().getTime()}.xlsx` )
// }
return {
...toRefs(state),
handleBack,//返回上一层
infoteacherList,//内部姓名
getinfoteacher,//获取内部姓名
// handleExport,
getLevelList,
OnTheJobStatusList,
getLevelLista,
AuthenticationStatusList,
searchSubmit,
searchReset,
columns,
tableData,
changePagination,
addTeacher,
cancelTeacherDialog,
cancel,
deleteModal,
handleModify,
closeDeleteTeacher,
createTeacherDialog,
getTableDate, //list接口数据调用
// getStu
}
},
};
</script>
<style lang="scss">
//导出按钮icon
.daochu {
width: 16px;
height: 18px;
background-image: url("../../assets/images/coursewareManage/export1.png");
}
//导入按钮icon
.daoru{
width: 16px;
height: 18px;
background-image: url("../../assets/images/coursewareManage/daoru.png");
}
//弹窗内详情样式
.display1 {
display: inline-block;
width: 200px;
}
// .display0{
// display:inline-block ;
// width:200px ;
// text-align:center }
//弹窗内确认取消按钮布局
.del_btnbox {
display: flex;
margin: 30px auto;
justify-content: center;
.del_btn {
width: 100px;
height: 40px;
background: rgba(64, 158, 255, 0);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer;
.btnText {
font-size: 14px;
font-weight: 400;
line-height: 40px;
}
}
.btn1 {
border: 1px solid rgba(64, 158, 255, 1);
color: #4ea6ff;
margin-right: 14px;
}
.btn2 {
background-color: #4ea6ff;
color: #ffffff;
}
}
.ant-table-cell-fix-right {
width: 300px !important;
}
.ant-table-tbody>tr>td {
text-align: center;
}
.ExternalTeachingDetail {
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;
.filterItems {
display: flex;
flex-wrap: wrap;
.select {
margin-right: 20px;
margin-bottom: 20px;
}
.addTimeBox {
position: relative;
display: flex;
align-items: center;
.addTime {
position: absolute;
z-index: 10;
margin-left: 10px;
color: rgba(0, 0, 0, 0.4);
}
.ant-picker {
padding-left: 85px;
}
.ant-picker-range .ant-picker-active-bar {
margin-left: 85px;
}
}
.btn {
padding: 0px 26px 0px 26px;
height: 38px;
background: #4ea6ff;
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.search {
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: #fff;
line-height: 36px;
margin-left: 5px;
}
}
.btnn {
padding: 0px 26px 0px 26px;
height: 38px;
background: #4ea6ff;
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.search {
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: #ffffff;
line-height: 36px;
margin-left: 5px;
}
}
.btn1 {
.search {
width: 15px;
height: 17px;
background-image: url("../../assets/images/courseManage/search0.png");
}
}
.btn2 {
.search {
width: 16px;
height: 18px;
background-image: url("../../assets/images/courseManage/reset0.png");
}
}
// .btn1:hover {
// background: rgba(64, 158, 255, 0.76);
// .search {
// background-image: url("../../assets/images/courseManage/search0.png");
// }
// .btnText {
// color: #ffffff;
// }
// }
.btn1:active {
background: #0982ff;
}
// .btn2:hover {
// background: rgba(64, 158, 255, 0.1);
// }
.btn2:active {
background: #0982ff;
}
}
.btns {
display: flex;
// flex-wrap: wrap;
.btn {
padding: 0px 26px 0px 26px;
height: 38px;
background: #4ea6ff;
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
cursor: pointer;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
.search {
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: #ffffff;
line-height: 36px;
margin-left: 5px;
}
}
.btn3 {
margin-right: 0px;
.search {
width: 17px;
height: 18px;
background-image: url("../../assets/images/courseManage/add0.png");
}
}
// .btn3:hover {
// background: rgba(64, 158, 255, 0.76);
// }
.btn3:active {
background: #0982ff;
}
}
}
.tableBox {
margin: 20px 38px 30px;
.ant-table-thead>tr>th {
background-color: #eff4fc;
}
th {
background-color: #eff4fc !important;
text-align: center !important;
}
}
.tableBox {
padding-bottom: 20px;
.pa {
// position: absolute;
// bottom: 20px;
// left: 0;
width: 100%;
// height: 20px;
// background-color: red;
display: flex;
justify-content: center;
// margin-bottom: 10px;
// position: absolute;
// bottom: -40px;
}
}
.operation {
font-size: 14px;
font-weight: 400;
color: #4ea6ff;
margin-right: -45px;
display: flex;
justify-content: right;
margin-right: 18px;
// line-height: 36px;
.operation1 {
margin-left: 21px;
width: 28px;
display: inline-block;
}
.operation3 {
margin-left: 21px;
width: 70px;
display: inline-block;
text-align: center;
}
.more {
width: 50px;
display: inline-block;
margin-left: 21px;
position: relative;
text-align: left;
// z-index: 99999;
.moreArrow {
width: 13px;
height: 7px;
display: inline-block;
background-image: url("../../assets/images/navtop/down.png");
background-size: 100%;
margin: 2px;
margin-left: 7px;
}
.moreItems {
width: 100px;
padding: 5px;
display: none;
background: #ffffff;
box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
border-radius: 3px;
border: 0px solid #dcdcdc;
position: absolute;
left: 0px;
top: 28px;
z-index: 100;
text-align: center;
}
}
.more:hover .moreArrow {
background-image: url("../../assets/images/navtop/up.png");
}
.more:hover .moreItems {
display: block;
}
}
}
.delete {
z-index: 9999;
width: 424px;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
border-radius: 4px;
position: absolute;
left: 50%;
top: 10%;
transform: translate(-50%, -50%);
.del_header {
position: absolute;
width: calc(100%);
height: 40px;
background: linear-gradient(rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%);
}
.del_main {
width: 100%;
position: relative;
.header {
display: flex;
align-items: center;
padding-top: 20px;
padding-left: 26px;
font-size: 16px;
.del-icon {
width: 16px;
height: 16px;
margin-right: 10px;
background-image: url(@/assets/images/coursewareManage/notice.png);
background-size: 100% 100%;
}
.icon {
width: 16px;
height: 16px;
margin-right: 10px;
background-image: url(@/assets/images/coursewareManage/QR.png);
background-size: 100% 100%;
}
.close_exit {
position: absolute;
right: 42px;
cursor: pointer;
width: 20px;
height: 20px;
background-image: url(@/assets/images/coursewareManage/close.png);
background-size: 100% 100%;
}
}
.body {
width: 100%;
margin: 34px auto 56px auto;
display: flex;
justify-content: center;
align-items: center;
}
.del_btnbox {
display: flex;
margin: 30px auto;
justify-content: center;
.del_btn {
width: 100px;
height: 40px;
background: rgba(64, 158, 255, 0);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.btnText {
font-size: 14px;
font-weight: 400;
line-height: 40px;
}
}
.btn1 {
border: 1px solid rgba(64, 158, 255, 1);
color: #4ea6ff;
}
.btn2 {
background-color: #4ea6ff;
color: #ffffff;
}
}
}
}
</style>

977
src/views/lecturer/InsideTeachingDetail.vue Normal file
View File

@@ -0,0 +1,977 @@
<!-- 内部授课详情页面 -->
<template>
<div class="InsideTeachingDetail">
<div style="width:100px ; color:black ;margin: 10px ;" @click="handleBack">
返回上一层
</div>
<!-- 搜索框及按钮 -->
<div class="filter">
<div class="filterItems">
<div class="select">
<a-input v-model:value="searchParam.userNo " style="width: 230px; height: 40px; border-radius: 8px"
placeholder="请输入讲师姓名/工号" allowClear showSearch>
</a-input>
<!-- <a-select style="width: 230px" placeholder="请选择所属组织" v-model:value="searchParam.userNo"
:options="infoteacherList">
</a-select> -->
</div>
<div class="select">
<a-input v-model:value="searchParam.teacherNo " style="width: 230px; height: 40px; border-radius: 8px"
placeholder="请输入姓名/课程编号" allowClear showSearch>
</a-input>
</div>
<div class="select">
<a-select style="width: 230px" placeholder="级别" v-model:value="searchParam.tlevelName"
:options="getLevelList">
</a-select>
</div>
<div class="select">
<a-select style="width: 230px" v-model:value="searchParam.tlevelName" placeholder="内容分类" :options="getLevelList">
</a-select>
</div>
<div class="select">
<a-select style="width: 230px" v-model:value="searchParam.certStatus" placeholder="开课场地"
:options="AuthenticationStatusList">
</a-select>
</div>
<div style="display: flex; margin-bottom: 20px">
<div class="btnn btn1" @click="searchSubmit">
<div class="search"></div>
<div class="btnText">搜索</div>
</div>
<div class="btn btn2" @click="searchReset">
<div class="search"></div>
<div class="btnText">重置</div>
</div>
</div>
</div>
<!-- 表格 -->
<div style="padding: 10px 0">
<a-table :header-cell-style="{ 'text-align': 'center' }" style="border: 1px solid #f2f6fe" :columns="columns"
:data-source="tableData" :loading="tableLoading" @expand="expandTable" :pagination="false">
<template #bodyCell="{ record, column }">
<template v-if="column.key === 'operation'">
<a-space style="display:flex ;justify-content: space-around; ">
<a-button type="link" @click="() => handleModify(record, String(record.courseform))">修改</a-button>
<a-button type="link" @click="() => deleteModal(record, String(record.courseform))">删除</a-button>
</a-space>
</template>
</template>
</a-table>
</div>
</div>
<div class="tableBox ">
<div style="float: right;">
<a-pagination
v-if="tableDataTotal > 10"
:showSizeChanger="true"
:hideOnSinglePage="true"
:pageSize="pageSize"
v-model:current="searchParam.pageNo"
:total="tableDataTotal"
class="pagination"
@change="changePagination"
/>
</div>
</div>
<!-- 弹窗组件 -->
<a-modal :visible="teacherdialog" :title="teacherdialogtitle" @ok="closeModal2" :footer="null" :closable="false"
wrapClassName="doublepro" width="734px" height="476px">
<div style="padding-bottom: 15px;" >
<!-- <div style="border: 1px rgb(177, 177, 177) solid; margin-left: 33px; margin-right: 33px; margin-bottom: 33px;" > -->
<div class="InsideTeachingDetail" >
<div class="filter">
<div class="filterItems">
<div class="select">
<span style="display:inline-block ;width:600px; ">请输入授课时长(小时) </span>
<a-input v-model:value="formParam.teaching"
style="width:600px; height: 40px ; " placeholder="" allowClear showSearch>
</a-input>
</div>
<div class="del_btnbox" >
<a-button class="del_btn btn1" @click="cancelTeacherDialog" style="margin-right: 32px;">取消</a-button>
<a-button class="del_btn btn2" @click="createTeacherDialog" :loading="buttonLoading">保存
</a-button>
</div>
</div>
</div>
</div>
<!-- </div> -->
</div>
</a-modal>
<!-- 删除功能弹窗 -->
<div>
<a-modal v-model:visible="deleteTeacherdialog" :footer="null" :closable="close" wrapClassName="canclestu1"
centered="true">
<div class="delete">
<div class="del_header"></div>
<div class="del_main">
<div class="header">
<div class="icon1"></div>
<span>提示</span>
</div>
<div class="body">
<span>您确定要删除此条记录吗</span>
</div>
<div class="del_btnbox">
<div class="del_btn btn2" @click="cancelTeacherDialog" style="margin-right: 32px">
<div class="btnText">取消</div>
</div>
<div class="del_btn btn2"
@click="closeDeleteTeacher">
<div class="btnText">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
</div>
<!-- <div> <Upload/> </div> -->
</div>
</template>
<script lang="jsx">
import { reactive, toRefs, ref } from "vue";
import { useRouter } from "vue-router";
import Editor from "@/components/project/Editor";
import Upload from "@/components/project/Upload";
import {infoteacher,getLevel,deleteTeacher, } from "../../api/Lecturer";
import { getNewInTeacherCourseList} from "../../api/Teaching";
// import {getProjSt} from "../../api/indexProjStu";
// import AddTeacher from "../../components/drawers/project/AddTeacher"
export default {
name: "InsideTeachingDetail",
components: {
// AddTeacher,
Editor,
Upload
},
setup() {
const router = useRouter();
const state = reactive({
tableLoading:false,
delTeacherId:null, //删除id确认
deleteTeacherdialog: false, //删除弹窗
teacherdialog: false, //控制讲师弹窗
teacherdialogtitle: '',//讲师弹框title内容
pageSizeOptions: ['10', '20', '30', '50'], //下拉选择每页显示多少条
pageSize: 10,
tableDataTotal: -1,//table列表总条数
formParam: {
},
searchParam: {
userNo:null,//工号姓名
teacherNo:null,//课程编号
tsystemName:null,//讲师体系
payrollPlaceName:null,//发薪地
pageNo: "1",
pageSize: "10"
},
})
//获取内部讲师级别
const getLevelList = ref([
// { value: 0, label: "未定级" },
])
const getLevelLista =() => {
getLevel().then((res)=>{
if (res.data.code === 200) {
let arr = res.data.data;
let array = getLevelList.value;
arr.map((value) => {
let obj = {
value: value.id,
label: value.name,
};
array.push(obj);
});
getLevelList.value = array;
}
})
}
getLevelLista()
const OnTheJobStatusList = ref([
{ value: 0, label: "分类1" },
{ value: 1, label: "分类2" },
])
const AuthenticationStatusList = ref([
{ value: 0, label: "未开课" },
{ value: 1, label: "已开课" },
])
const columns = ref([
{
title: '课程编号 ',
dataIndex: 'userNo',
key: 'userNo',
elipsis: true,
width: 120,
},
{
title: '课程名称 ',
dataIndex: 'tlevelName',
key: 'tlevelName',
elipsis: true,
width: 120,
},
{
title: '授课/课程日期 ',
dataIndex: 'payrollPlaceName',
key: 'payrollPlaceName',
elipsis: true,
width: 120,
},
{
title: '授课/课程开发日期 ',
dataIndex: 'payrollPlaceName',
key: 'payrollPlaceName',
elipsis: true,
width: 120,
},
{
title: '开课场地 ',
dataIndex: 'payrollPlaceName',
key: 'payrollPlaceName',
elipsis: true,
width: 120,
},
{
title: '所属课程 ',
dataIndex: 'payrollPlaceName',
key: 'payrollPlaceName',
elipsis: true,
width: 120,
},
{
title: '所属项目 ',
dataIndex: 'payrollPlaceName',
key: 'payrollPlaceName',
elipsis: true,
width: 120,
},
{
title: '所属路径 ',
dataIndex: 'payrollPlaceName',
key: 'payrollPlaceName',
elipsis: true,
width: 120,
},
{
title: '晶芯科技 ',
dataIndex: 'payrollPlaceName',
key: 'payrollPlaceName',
elipsis: true,
width: 120,
},
{
title: '授课时长(H) ',
dataIndex: 'teaching',
key: 'teaching',
elipsis: true,
width: 120,
},
{
title: '内容分类',
dataIndex: 'teaching',
key: 'teaching',
elipsis: true,
width: 120,
},
{
title: '课程类型 ',
dataIndex: 'waitStatus',
key: 'waitStatus',
elipsis: true,
width: 120,
customRender: (value) => {
return (
<div>
{value.record.waitStatus == "0" || value.record.waitStatus == "1"
? {
"0": "在线课",
"1": "面授课",
}[value.record.waitStatus + ""] || ""
: "-"}
</div>
)
}
},
{
title: '参训学员人数',
dataIndex: 'teaching',
key: 'teaching',
elipsis: true,
width: 120,
},
{
title: '评分',
dataIndex: 'teaching',
key: 'teaching',
elipsis: true,
width: 120,
},
{
title: '开课状态 ',
dataIndex: 'certStatus',
key: 'certStatus',
elipsis: true,
width: 120,
customRender: (value) => {
return (
<div>
{value.record.certStatus == 0 || value.record.certStatus == 1
? {
"0": "未开课",
"1": "已开课",
}[value.record.certStatus + ""] || ""
: "-"}
</div>
)
}
},
{
title: '操作 ',
dataIndex: 'operation',
key: 'operation',
elipsis: true,
width: 300,
scopedSlots: { customRender: "action" },
},
])
//列表数据
const tableData = ref([
// {
// name: '夏冬',
// userNo: '1152790',
// organizationDTO: '京东方科技集团股份有限公司/显示器创新业务中台/品质中台/整机品保中心QA部',
// lecturerSystem: 'MiniLED事业',
// grade: '1',
// placeOfPay: 'B1',
// teachingDuration: '0.00小时',
// onTheJobStatus: '1',
// authenticationStatus: '1',
// accountStatus: '1',
// },
])
// 搜索
const searchSubmit = () => {
getTableDate();
};
//重置
const searchReset = () => {
state.searchParam = { pageNo: 1, pageSize: 10 };
// getTableDate();
};
// List接口数据
const getTableDate = (obj) => {
state.tableLoading=true
let objA = {...state.searchParam};
getNewInTeacherCourseList(objA)
.then((res) => {
tableData.value = res.data.data.records
state.tableDataTotal = Number(res.data.data.total);
state.tableLoading=false
console.log("获取tableData", tableData);
})
};
getTableDate()
// // List接口数据
// const getTableDate = ()=>{
// state.tableloading = true ;
// api
// // api 接口命名
// getNewInTeacherCourseList({
// ...state.searchParam
// })
// .then((res)=>{
// console.log(res.data.rows)
// // state.tableDataTotal = Number(res.data.data.total);
// // state.tableLoading = false;
// // const tableData = res.data.rows;
// // // initDataSublist("", data);
// // console.log(data);
// // tableData.value = data;
// // console.log("tableData", tableData);
// })
// }
// 获取项目列表信息
//let tableData = ref([]);
// // 翻页
const changePagination = (page) => {
state.searchParam.pageNo = page;
getTableDate();
};
// 新增讲师
const addTeacher = () => {
state.teacherdialog = true;
state.teacherdialogtitle = '添加授课记录'
//获取内部讲师级别
getLevelLista()
getTeacherExpertisea()
}
//修改讲师信息弹窗
const handleModify = (record) => {
state.teacherdialog = true;
state.formParam.teaching=record.userNo
state.teacherdialogtitle = '修改授课时长'
}
//保存
const createTeacherDialog =()=>{
//调用新增修改接口
// this.$refs["formParam"].validate(valid => {
// if (valid) {
// let objform = {...state.formParam}
// if (state.formParam.userNo != undefined) {
// updateInTeacher (objform).then(response => {
// state.$modal.msgSuccess("修改成功");
// state.teacherdialog = false;
// state.getlist()
// });
// }
// }
// })
state.teacherdialog = false
}
//删除弹窗
const deleteModal = (record) => {
state.deleteTeacherdialog = true
state.delTeacherId = record.id
};
//确认删除
const closeDeleteTeacher=()=>{
let ids ={
id : state.delTeacherId
}
console.log(ids)
//调用删除接口
deleteTeacher(ids).then((res)=>{
if(res.data.code == 200 ){
// message.success("删除成功");
state.deleteTeacherdialog = false
getTableDate();
}
})
}
//取消按钮 清空输入的数据
const cancelTeacherDialog = () => {
state.teacherdialog = false
cancel()
};
//清空数据
const cancel = () => {
state.formParam ={
teaching :null,
}
}
//页面内部姓名
const infoteacherList = ref([
]);
const getinfoteacher = (obj) => {
state.tableLoading=true
infoteacher()
.then((res) => {
infoteacherList.value = res.data.data.records
})
};
//返回上一层
const handleBack=()=>{
router.back()
}
//导出功能
// const handleExport = ()=>{
// this.download('lesson_records/export', {
// ...state.searchParam
// }, `project_${new Date().getTime()}.xlsx` )
// }
return {
...toRefs(state),
handleBack,//返回上一层
infoteacherList,//内部姓名
getinfoteacher,//获取内部姓名
// handleExport,
getLevelList,
OnTheJobStatusList,
getLevelLista,
AuthenticationStatusList,
searchSubmit,
searchReset,
columns,
tableData,
changePagination,
addTeacher,
cancelTeacherDialog,
cancel,
deleteModal,
handleModify,
closeDeleteTeacher,
createTeacherDialog,
getTableDate, //list接口数据调用
// getStu
}
},
};
</script>
<style lang="scss">
//导出按钮icon
.daochu {
width: 16px;
height: 18px;
background-image: url("../../assets/images/coursewareManage/export1.png");
}
//导入按钮icon
.daoru{
width: 16px;
height: 18px;
background-image: url("../../assets/images/coursewareManage/daoru.png");
}
//弹窗内详情样式
.display1 {
display: inline-block;
width: 200px;
}
// .display0{
// display:inline-block ;
// width:200px ;
// text-align:center }
//弹窗内确认取消按钮布局
.del_btnbox {
display: flex;
margin: 30px auto;
justify-content: center;
.del_btn {
width: 100px;
height: 40px;
background: rgba(64, 158, 255, 0);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer;
.btnText {
font-size: 14px;
font-weight: 400;
line-height: 40px;
}
}
.btn1 {
border: 1px solid rgba(64, 158, 255, 1);
color: #4ea6ff;
margin-right: 14px;
}
.btn2 {
background-color: #4ea6ff;
color: #ffffff;
}
}
.ant-table-cell-fix-right {
width: 300px !important;
}
.ant-table-tbody>tr>td {
text-align: center;
}
.InsideTeachingDetail {
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;
.filterItems {
display: flex;
flex-wrap: wrap;
.select {
margin-right: 20px;
margin-bottom: 20px;
}
.addTimeBox {
position: relative;
display: flex;
align-items: center;
.addTime {
position: absolute;
z-index: 10;
margin-left: 10px;
color: rgba(0, 0, 0, 0.4);
}
.ant-picker {
padding-left: 85px;
}
.ant-picker-range .ant-picker-active-bar {
margin-left: 85px;
}
}
.btn {
padding: 0px 26px 0px 26px;
height: 38px;
background: #4ea6ff;
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.search {
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: #fff;
line-height: 36px;
margin-left: 5px;
}
}
.btnn {
padding: 0px 26px 0px 26px;
height: 38px;
background: #4ea6ff;
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.search {
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: #ffffff;
line-height: 36px;
margin-left: 5px;
}
}
.btn1 {
.search {
width: 15px;
height: 17px;
background-image: url("../../assets/images/courseManage/search0.png");
}
}
.btn2 {
.search {
width: 16px;
height: 18px;
background-image: url("../../assets/images/courseManage/reset0.png");
}
}
// .btn1:hover {
// background: rgba(64, 158, 255, 0.76);
// .search {
// background-image: url("../../assets/images/courseManage/search0.png");
// }
// .btnText {
// color: #ffffff;
// }
// }
.btn1:active {
background: #0982ff;
}
// .btn2:hover {
// background: rgba(64, 158, 255, 0.1);
// }
.btn2:active {
background: #0982ff;
}
}
.btns {
display: flex;
// flex-wrap: wrap;
.btn {
padding: 0px 26px 0px 26px;
height: 38px;
background: #4ea6ff;
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
cursor: pointer;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
.search {
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: #ffffff;
line-height: 36px;
margin-left: 5px;
}
}
.btn3 {
margin-right: 0px;
.search {
width: 17px;
height: 18px;
background-image: url("../../assets/images/courseManage/add0.png");
}
}
// .btn3:hover {
// background: rgba(64, 158, 255, 0.76);
// }
.btn3:active {
background: #0982ff;
}
}
}
.tableBox {
margin: 20px 38px 30px;
.ant-table-thead>tr>th {
background-color: #eff4fc;
}
th {
background-color: #eff4fc !important;
text-align: center !important;
}
}
.tableBox {
padding-bottom: 20px;
.pa {
// position: absolute;
// bottom: 20px;
// left: 0;
width: 100%;
// height: 20px;
// background-color: red;
display: flex;
justify-content: center;
// margin-bottom: 10px;
// position: absolute;
// bottom: -40px;
}
}
.operation {
font-size: 14px;
font-weight: 400;
color: #4ea6ff;
margin-right: -45px;
display: flex;
justify-content: right;
margin-right: 18px;
// line-height: 36px;
.operation1 {
margin-left: 21px;
width: 28px;
display: inline-block;
}
.operation3 {
margin-left: 21px;
width: 70px;
display: inline-block;
text-align: center;
}
.more {
width: 50px;
display: inline-block;
margin-left: 21px;
position: relative;
text-align: left;
// z-index: 99999;
.moreArrow {
width: 13px;
height: 7px;
display: inline-block;
background-image: url("../../assets/images/navtop/down.png");
background-size: 100%;
margin: 2px;
margin-left: 7px;
}
.moreItems {
width: 100px;
padding: 5px;
display: none;
background: #ffffff;
box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
border-radius: 3px;
border: 0px solid #dcdcdc;
position: absolute;
left: 0px;
top: 28px;
z-index: 100;
text-align: center;
}
}
.more:hover .moreArrow {
background-image: url("../../assets/images/navtop/up.png");
}
.more:hover .moreItems {
display: block;
}
}
}
.delete {
z-index: 9999;
width: 424px;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
border-radius: 4px;
position: absolute;
left: 50%;
top: 10%;
transform: translate(-50%, -50%);
.del_header {
position: absolute;
width: calc(100%);
height: 40px;
background: linear-gradient(rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%);
}
.del_main {
width: 100%;
position: relative;
.header {
display: flex;
align-items: center;
padding-top: 20px;
padding-left: 26px;
font-size: 16px;
.del-icon {
width: 16px;
height: 16px;
margin-right: 10px;
background-image: url(@/assets/images/coursewareManage/notice.png);
background-size: 100% 100%;
}
.icon {
width: 16px;
height: 16px;
margin-right: 10px;
background-image: url(@/assets/images/coursewareManage/QR.png);
background-size: 100% 100%;
}
.close_exit {
position: absolute;
right: 42px;
cursor: pointer;
width: 20px;
height: 20px;
background-image: url(@/assets/images/coursewareManage/close.png);
background-size: 100% 100%;
}
}
.body {
width: 100%;
margin: 34px auto 56px auto;
display: flex;
justify-content: center;
align-items: center;
}
.del_btnbox {
display: flex;
margin: 30px auto;
justify-content: center;
.del_btn {
width: 100px;
height: 40px;
background: rgba(64, 158, 255, 0);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.btnText {
font-size: 14px;
font-weight: 400;
line-height: 40px;
}
}
.btn1 {
border: 1px solid rgba(64, 158, 255, 1);
color: #4ea6ff;
}
.btn2 {
background-color: #4ea6ff;
color: #ffffff;
}
}
}
}
</style>