Files
fe-manage/src/views/lecturer/ExternalLecturer.vue
2024-05-30 20:28:25 +08:00

1273 lines
36 KiB
Vue

<!-- 外部讲师页面 -->
<template>
<div class="projectManage">
<div>
</div>
<!-- 搜索框及按钮 -->
<div class="filter">
<div class="filterItems">
<div class="select">
<!-- v-model:value="searchParam.name" -->
<a-input v-model:value="searchParam.name " style="width: 230px; height: 40px; border-radius: 8px"
placeholder="请输入讲师姓名检索" allowClear showSearch>
</a-input>
</div>
<div class="select">
<a-select style="width: 230px" v-model:value="searchParam.status" placeholder="账号状态"
:options="AccountStatusList">
</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>
<br/>
<div class="btns">
<div class="btn btn3" @click="addTeacher">
<div class="search"></div>
<div class="btnText">新增讲师</div>
</div>
</div>
<div class="btns">
<div class="btn btn3" @click="showEHWorkModal" style="margin-right:20px">
<div class="daochu"></div>
<div class="btnText" @click="handleExport">导出</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="() => handleLook(record, String(record.courseform))">查看</a-button>
<a-button type="link" @click="() => handleModify(record, String(record.courseform))">编辑</a-button>
<a-button v-if="record.status== '1'" type="link" @click="() => handleOperate(record, String(record.courseform))">停用</a-button>
<a-button v-if="record.status== '2'" type="link" @click="() => handleOperate(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="774px" height="476px">
<div style="cursor: pointer; margin-right: 32px;float: right; margin-top: -40px;" @click="cancelTeacherDialog">
<img
style="width: 22px; height: 22px"
src="../../assets/images/basicinfo/close22.png"
/>
</div>
<div style="padding-bottom: 15px;" >
<div class="headerLeft" style="margin-left: 33px" >
<a-button @click ="particulars">个人详情</a-button>
<a-button @click ="teacherrecords" v-if="teacherdialog1 == 1" >授课记录</a-button>
</div>
<!-- 个人详情 -->
<div style="border: 1px rgb(177, 177, 177) solid; margin-left: 33px; margin-right: 33px; margin-bottom: 33px;" v-show="tagsshow==1">
<div class="projectManage">
<div class="filter">
<div class="filterItems">
<!-- <div class="select">
<span style="display:inline-block ;width:100px ;text-align:center ">头像 :</span>
</div> -->
<div class="select">
<div style="display:inline-block ;width:5px ;text-align:center ">
<img
style="width: 5px; height: 5px"
src="../../assets/images/basicinfo/asterisk.png"
/>
</div>
<!-- v-model:value="searchParam.name" -->
<span style="display:inline-block ;width:80px ;text-align:center ">讲师姓名 :</span>
<a-input v-if="teacherdialog1 == 0" v-model:value="formParam.name" style="width:200px; height: 40px; "
placeholder="请输入讲师姓名" allowClear showSearch>
</a-input>
<span v-if="teacherdialog1 == 1" class=display1>{{ formParam.name }}</span>
</div>
<div class="select">
<div style="display:inline-block ;width:5px ;text-align:center ">
<img
style="width: 5px; height: 5px"
src="../../assets/images/basicinfo/asterisk.png"
/>
</div>
<span style="display:inline-block ;width:80px ;text-align:center ">手机号码 :</span>
<a-input v-if="teacherdialog1 == 0" v-model:value="formParam.userNo"
style="width:200px; height: 40px; " placeholder="请输入11位手机号码" allowClear showSearch>
</a-input>
<span v-if="teacherdialog1 == 1" class=display1>{{ formParam.userNo }}</span>
</div>
<div class="select">
<div style="display:inline-block ;width:5px ;text-align:center ">
<img
style="width: 5px; height: 5px"
src="../../assets/images/basicinfo/asterisk.png"
/>
</div>
<span style="display:inline-block ;width:80px ;text-align:center ">邮箱:</span>
<a-input v-if="teacherdialog1 == 0" v-model:value="formParam.departId"
style="width:200px; height: 40px;" placeholder="" allowClear showSearch>
</a-input>
<span v-if="teacherdialog1 == 1" class=display1>{{ formParam.departId }}</span>
</div>
<div class="select">
<!-- <Editor/> -->
<div class="select">
<span style="display:inline-block ;width:80px ; text-align:center ">讲师介绍 :</span>
</div>
<Editor v-if="teacherdialog1 == 0" v-model="formParam.teacherIntrofuce"
style="width: 500px ;display:inline-block ; margin-top:-50px ;margin-left:80px " />
<span v-if="teacherdialog1 == 1" style="display: block; width: 500px;">{{ formParam.description }}</span>
</div>
<div class="select">
<span style="display:inline-block ;width:80px ;text-align:center ">备注 :</span>
<a-input type="textarea" v-if="teacherdialog1 == 0" v-model:value="formParam.userNo"
style="width:200px; height: 40px; ">
</a-input>
<span v-if="teacherdialog1 == 1" class=display1>{{ formParam.userNo }}</span>
</div>
<div class="del_btnbox" v-if="teacherdialog1 == 0">
<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 class="projectManage" v-show="tagsshow==2" style="margin">
<div style="padding: 33px">
<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>
</a-table>
</div>
<a-pagination
v-if="teacherrecordstableDataTotal > 10"
:showSizeChanger="true"
:hideOnSinglePage="true"
:pageSize="pageSize"
v-model:current="searchParam.pageNo"
:total="teacherrecordstableDataTotal"
class="pagination"
@change="teacherchangePagination"
/>
</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>
<a-modal v-model:visible="editTeacher" :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 v-if="handleOperate1== 2">您确定要启用此讲师状态吗</span>
<span v-if="handleOperate1== 1" >您确定要停用此讲师状态吗</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="closehandleOperate">
<div class="btnText">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
</div>
</div>
</template>
<script lang="jsx">
import { reactive, toRefs, ref } from "vue";
import Editor from "@/components/project/Editor";
import {getTeacherSystemList , getTeacherList,getTeacherPayRollPriceList, getLevel,insertTeacher,deleteTeacher,updateInTeacher,getTeacherById, updateTeacherState,getTeacherCourseList} from "../../api/indexPeojiectManage";
// import {getProjSt} from "../../api/indexProjStu";
// import AddTeacher from "../../components/drawers/project/AddTeacher"
export default {
name: "projectManage",
components: {
// AddTeacher,
Editor
},
setup() {
const state = reactive({
promotionrecordsLoading:false , //晋级记录遮罩层
tableLoading:false,
tagsshow:"1",
PlaceOfPayList:[],
LecturerSystemList:[],
delTeacherId:null, //删除id确认
editTeacherid:null,//修改状态id确认
userNoid:null, //内部讲师详情工号确认
lookTeacherId:null, //内部讲师详情id确认
deleteTeacherdialog: false, //删除弹窗
editTeacher:false , //修改状态弹窗
handleOperate1:null, //修改状态弹窗内容
teacherdialog1: null,
teacherdialog: false, //控制讲师弹窗
teacherdialogtitle: '',//讲师弹框title内容
pageSizeOptions: ['10', '20', '30', '50'], //下拉选择每页显示多少条
pageSize: 10,
tableDataTotal: -1,//table列表总条数
teacherrecordstableDataTotal:-1,//授课记录列表总条数
formParam: {
authenticationStatus: 1 //认证状态
},
searchParam: {
name:null,//姓名
status:null,//状态
pageNo: "1",
pageSize: "10"
},
activeName:'first'
})
const LecturerSystemList = ref([
// { value: 0, systemName: "讲师体系" },
]);
//获取讲师体系列表
const LecturerSystemLista =() => {
// console.log('点击了LecturerSystemLista')
getTeacherSystemList().then((res)=>{
if (res.data.code === 200) {
let arr = res.data.data;
let array = LecturerSystemList.value;
arr.map((value) => {
let obj = {
value: value.id,
label: value.name,
};
array.push(obj);
});
LecturerSystemList.value = array;
}
console.log("获取讲师",LecturerSystemList);
})
}
//获取内部讲师级别
LecturerSystemLista()
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: "在职" },
{ value: 1, label: "离职" },
])
const AuthenticationStatusList = ref([
{ value: 0, label: "未认证" },
{ value: 1, label: "已认证" },
])
const PlaceOfPayList = ref([
// { value: 0, label: "发薪地B1" },
])
//获取讲师发薪地列表
const PlaceOfPayLista =() => {
getTeacherPayRollPriceList().then((res)=>{
if (res.data.code === 200) {
let arr = res.data.data;
let array = PlaceOfPayList.value;
arr.map((value) => {
let obj = {
value: value.payrollPlaceId,
label: value.payrollPlaceName,
};
array.push(obj);
});
PlaceOfPayList.value = array;
}
console.log("获取发薪地", PlaceOfPayList);
})
}
PlaceOfPayLista()
const AccountStatusList = ref([
{ value: 0, label: "启用" },
{ value: 1, label: "停用" },
])
const teacheExpertiseList= ref([
{ value: 0, label: "领导力" , children: [{value: 0, label: "管理团队" ,value: 1, label: "管理业务" ,value: 2, label: "管理自我" }]},
{ value: 1, label: "专业力" , children: [{value: 0, label: "管理团队" ,value: 1, label: "专业力" ,value: 2, label: "专业力" }]},
{ value: 2, label: "通用力" , children: [{value: 0, label: "管理团队" ,value: 1, label: "通用力" ,value: 2, label: "通用力" }]},
])
const columns = ref([
{
title: '讲师编号 ',
dataIndex: 'userNo',
key: 'userNo',
elipsis: true,
width: 120,
},
{
title: '讲师姓名 ',
dataIndex: 'name',
key: 'name',
elipsis: true,
width: 120,
},
{
title: '手机号 ',
dataIndex: 'departId',
key: 'departId',
elipsis: true,
width: 400,
// customRender: (value, record) => {
// return (
// <div>
// {value.record.orgName}
// </div>
// )
// }
},
{
title: '邮箱 ',
dataIndex: 'tsystemName',
key: 'tsystemName',
elipsis: true,
width: 120,
},
{
title: '授课时长 ',
dataIndex: 'teaching',
key: 'teaching',
elipsis: true,
width: 120,
},
{
title: '账号状态 ',
dataIndex: 'status',
key: 'status',
elipsis: true,
width: 120,
customRender: (value) => {
return (
<div>
{value.record.status == 0 || value.record.status == 1|| value.record.status == 2
? {
'0': "临时",
'1': "启用",
'2': "停用"
}[value.record.status + ""] || ""
: "-"}
</div>
)
}
},
{
title: '操作 ',
dataIndex: 'operation',
key: 'operation',
elipsis: true,
width: 300,
scopedSlots: { customRender: "action" },
},
])
//列表数据
const tableData = ref([
])
// 搜索
const searchSubmit = () => {
// getLevelLista()
// LecturerSystemLista()
// PlaceOfPayLista()
getTableDate();
};
//重置
const searchReset = () => {
state.searchParam = { pageNo: 1, pageSize: 10 , name:null,
status:null};
getTableDate();
};
// List接口数据
const getTableDate = (obj) => {
state.tableLoading=true
state.loading = true;
let objA = {...state.searchParam};
getTeacherList(objA)
.then((res) => {
tableData.value = res.data.data.records
state.tableDataTotal = Number(res.data.data.total);
state.tableLoading=false
// console.log("获取讲师tableDatateacherName", tableData);
})
};
getTableDate()
// // List接口数据
// const getTableDate = ()=>{
// state.tableloading = true ;
// api
// // api 接口命名
// getTeacherList({
// ...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 teacherchangePagination = (page) => {
state.searchParam.pageNo = page;
getteacherrecordstableData();
};
// 新增讲师
const addTeacher = () => {
state.teacherdialog1 = 0
state.teacherdialog = true;
state.teacherdialogtitle = '新增讲师'
}
//修改讲师信息弹窗
const handleModify = (record) => {
state.teacherdialog1 = 0
state.teacherdialog = true;
state.teacherdialogtitle = '修改信息'
TeacherSystem()
// state.formParam.name = record.name;
// state.formParam.userNo = record.userNo;
// state.formParam.organizationDTO = record.organizationDTO;
// state.formParam.teachingDuration = record.teachingDuration;
// state.formParam.grade = record.grade;
// state.formParam.lecturerSystem = record.lecturerSystem;
// state.formParam.authenticationStatus = record.authenticationStatus;
}
//保存
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()
// });
// }
// else {
// insertTeacher(objform).then(response => {
// console.log('1')
// state.$modal.msgSuccess("新增成功");
// state.teacherdialog = false;
// getTableDate()
// })
// }
// }
// })
state.teacherdialog = false
}
//删除弹窗
const deleteModal = (record) => {
state.deleteTeacherdialog = true
state.delTeacherId = record.id
};
//修改状态窗口
const handleOperate = (record) => {
if( record.status == 1){
state.handleOperate1 = record.status
}
if( record.status == 2){
state.handleOperate1 =record.status
}
state.editTeacherid =record.id
state.editTeacher = true
};
//确认删除
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 closehandleOperate= ()=>{
//调用接口
let ids ={
id : state.editTeacherid
}
console.log(ids)
updateTeacherState(ids).then((res) => {
// message.success("操作成功");
state.editTeacher = false
getTableDate();
})
}
//取消按钮 清空输入的数据
const cancelTeacherDialog = () => {
if(state.teacherdialog = true )
{
state.teacherdialog = false
cancel()
}
state.deleteTeacherdialog = false
state.editTeacher = false
state.tagsshow= 1
};
//清空数据
const cancel = () => {
// state.formParam=({
// //讲师姓名
state.formParam.name = null;
// // 讲师工号
state.formParam.userNo = null;
// //将讲师组织
state.formParam.organizationDTO = null;
// //初始授课时长
state.formParam.teachingDuration = null,
//讲师等级
state.formParam.grade = null;
//讲师体;
state.formParam.lecturerSystem = null;
// //认证状;
state.formParam.authenticationStatus = 0;
//讲师介绍
state.formParam.teacherIntrofuce =null;
//工作经历
state.formParam.workHistory =null;
//擅长课程
state.formParam.proficientInCourse =null;
console.log(state.formParam);
}
//表格内查看数据操作
const handleLook = (record) => {
state.teacherdialog1 = 1
state.teacherdialog = true;
state.teacherdialogtitle = '查看详情'
state.userNoid= record.userNo
state.lookTeacherId= record.id
// alert(record.grade)
TeacherSystem()
}
//内部讲师详情
const TeacherSystem=()=>{
let ids={userNo : state.userNoid }
getTeacherById(ids).then((res) => {
console.log("内部讲师详情", res.data);
state.formParam= res.data.data
})
.catch((err) => {
console.log("内部讲师详情", err);
});
}
// tab 标签切换
const particulars=()=>{
state.tagsshow= 1
}
const teacherrecords=()=>{
state.tagsshow= 2
getteacherrecordstableData ()
}
const promotionrecords=()=>{
state.tagsshow= 3
}
//授课记录列表
const teacherrecordsColumns = ref ([
{
title: '课程编号',
dataIndex: 'id',
key: 'id',
elipsis: true,
width: 120,
},
{
title: '课程名称',
dataIndex: 'name',
key: 'name',
elipsis: true,
width: 120,
},
{
title: '课程日期',
dataIndex: 'beginTime',
key: 'beginTime',
elipsis: true,
width: 120,
},
{
title: '内容分类',
dataIndex: 'nrfl',
key: 'nrfl',
elipsis: true,
width: 120,
},
{
title: '课程类型',
dataIndex: 'type',
key: 'type',
elipsis: true,
width: 120,
customRender: (value) => {
return (
<div>
{value.record.type == 1 || value.record.type == 2||record.type == 3
? {
"1": "项目开课",
"2": "路径开课",
"3": "面授开课",
}[value.record.type + ""] || ""
: "-"}
</div>
)
}
},
{
title: '学习总人数',
dataIndex: 'xxzrs',
key: 'xxzrs',
elipsis: true,
width: 120,
},
{
title: '授课时长',
dataIndex: 'duration',
key: 'duration',
elipsis: true,
width: 120,
},
{
title: '评分',
dataIndex: 'score ',
key: 'score ',
elipsis: true,
width: 120,
},
{
title: '开课状态',
dataIndex: 'status ',
key: 'status ',
elipsis: true,
width: 120,
customRender: (value) => {
return (
<div>
{value.record.status == 0 || value.record.status == 1
? {
"0": "未开课",
"1": "已开课",
}[value.record.status + ""] || ""
: "-"}
</div>
)
}
}
])
//授课记录列表数据
const teacherrecordstableData = ref([
])
const getteacherrecordstableData = () => {
state.teacherrecordsLoading=true
state.loading = true;
// let ids={id: state.lookTeacherId ,pageNo: "1", pageSize: "10" }
let ids=
{id: "965341999643234304",
pageNo: "1",
pageSize: "10"}
// api接口
getTeacherCourseList(ids).then((res) => {
teacherrecordstableData.value = res.data.data.records
state.teacherrecordstableDataTotal = Number(res.data.data.total);
state.teacherrecordsLoading=false
})
};
// getpromotionrecordstableData()
//导出功能
// const handleExport = ()=>{
// this.download('lesson_records/export', {
// ...state.searchParam
// }, `project_${new Date().getTime()}.xlsx` )
// }
return {
...toRefs(state),
// handleExport,
LecturerSystemList,
getLevelList,
OnTheJobStatusList,
getLevelLista,
PlaceOfPayLista,
AuthenticationStatusList,
PlaceOfPayList,
AccountStatusList,
searchSubmit,
searchReset,
columns,
tableData,
changePagination,
addTeacher,
cancelTeacherDialog,
handleLook,
cancel,
deleteModal,
handleModify,
closeDeleteTeacher,
createTeacherDialog,
handleOperate,
closehandleOperate,
teacheExpertiseList,
getTableDate, //list接口数据调用
// getStu
LecturerSystemLista,
TeacherSystem,
particulars,
teacherrecords,
promotionrecords,
teacherrecordstableData,
teacherrecordsColumns,
getteacherrecordstableData ,
teacherchangePagination,
// getpromotionrecordstableData
}
},
};
</script>
<style lang="scss">
//导出按钮icon
.daochu {
width: 16px;
height: 18px;
background-image: url("../../assets/images/coursewareManage/export1.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;
}
.projectManage {
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: 80px;
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>