Files
fe-manage/src/views/lecturer/InsideTeaching.vue
2024-11-17 17:35:41 +08:00

1694 lines
54 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!-- 内部授课页面 -->
<template>
<div>
<!-- 搜索框及按钮 -->
<div class="filter">
<a-form layout="inline" style="min-width: 1380px;">
<a-form-item class="select">
<a-input v-model:value="searchParam.name" style="width: 276px; height: 40px; border-radius: 8px"
placeholder="请输入工号/讲师姓名进行检索" allowClear showSearch v-on:keydown.enter="enterPressHadlerSearch" >
</a-input>
</a-form-item>
<a-form-item class="select">
<a-input v-model:value="searchParam.courseName" style="width: 276px; height: 40px; border-radius: 8px"
placeholder="请输入课程名称进行搜索" allowClear showSearch v-on:keydown.enter="enterPressHadlerSearch">
</a-input>
</a-form-item>
<!-- <a-form-item class="select ">
<a-range-picker style="width: 276px; height: 40px; border-radius: 8px" v-model:value="searchdate" separator="至"
:placeholder="[' 开始时间', ' 结束时间']" @change="searchTimeChange" />
</a-form-item> -->
<a-form-item class="select ">
<div class="select addTimeBox">
<div class="addTime" >授课日期</div>
<a-range-picker
v-model:value="searchdate"
style="width: 420px"
format="YYYY-MM-DD"
valueFormat="YYYY-MM-DD"
separator="至"
:placeholder="[' 开始时间', ' 结束时间']"
v-on:keydown.enter="enterPressHadlerSearch"
/>
<!-- @change="searchTimeChange" -->
</div>
</a-form-item>
<div style="display: flex; margin-bottom: 20px">
<a-button @click="searchSubmit()" type="primary" class="resetbtn">查询 </a-button>
<!-- <div class="btn btn1" @click="searchReset" style="background:rgba(64, 158, 255, 0);" > -->
<!-- <div class="search"></div> -->
<a-button class="resetbtn " @click="searchReset">重置</a-button>
<!-- 更多筛选-->
<div v-if="moreid == 1">
<a-button @click="handlemoreid()" class="moreidbtn" type="text"> 展开
<RightOutlined />
</a-button>
</div>
<div v-if="moreid == 2">
<a-button @click="handlemoreid()" class="moreidbtn"> 返回
<UpOutlined />
</a-button>
</div>
</div>
<div style="width:100%"></div>
<a-form-item class="select" v-if="moreid == 2">
<a-select style="width: 230px ;margin-bottom:20px" v-model:value="searchParam.createFrom" placeholder="录入类型"
:options="entryTypeList" allowClear
v-on:keydown.enter="enterPressHadlerSearch">
</a-select>
</a-form-item>
<a-form-item class="select" v-if="moreid == 2">
<a-select style="width: 230px" v-model:value="searchParam.courseStatus" placeholder="开课状态"
:options="AuthenticationStatusList" allowClear showSearch
v-on:keydown.enter="enterPressHadlerSearch">
</a-select>
</a-form-item>
<a-form-item class="select" v-if="moreid == 2">
<a-select style="width: 230px" placeholder="请选择讲师体系" v-model:value="searchParam.tSystemId"
:options="LecturerSystemList" allowClear showSearch @change="changetlevel"
v-on:keydown.enter="enterPressHadlerSearch">
</a-select>
</a-form-item>
<a-form-item class="select" v-if="moreid == 2">
<a-select style="width: 230px" placeholder="请选择所属组织" v-model:value="searchParam.orgId"
:options="getOrganizationList" allowClear showSearch
v-on:keydown.enter="enterPressHadlerSearch">
</a-select>
</a-form-item>
<a-form-item class="select" v-if="moreid == 2">
<a-tree-select style="width: 230px"
:fieldNames="{
children: 'children',
label: 'name',
value: 'code',
}"
allow-clear
:getPopupContainer="triggerNode => triggerNode.parentNode || document.body"
v-model:value="searchParam.courseTypeId"
show-search
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
placeholder="请选择内容分类"
tree-default-expand-all
:tree-data="sysTypeOptions"
v-on:keydown.enter="enterPressHadlerSearch">
</a-tree-select>
</a-form-item>
<div style="width: 100%;"></div>
<a-form-item class="select" v-if="moreid == 2">
<a-select style="min-width: 230px ; height: auto ;margin-bottom:20px" v-model:value="searchParam.score"
placeholder="请选择评分" :options="scoreList" allowClear showSearch mode="tags" @change="scoreChange"
v-on:keydown.enter="enterPressHadlerSearch">
</a-select>
</a-form-item>
<a-form-item class="select" v-if="moreid == 2">
<a-select style="width: 230px" v-model:value="searchParam.studys" placeholder="授课人数" :options="studysList"
allowClear showSearch
v-on:keydown.enter="enterPressHadlerSearch">
</a-select>
<!-- <a-input v-model:value="searchParam.name" style="width: 276px; height: 40px; border-radius: 8px"
placeholder="授课人数" allowClear showSearch>
</a-input> -->
</a-form-item>
</a-form>
<div style="width: 100%;"></div>
<div style="display: flex; margin-bottom: 20px">
<a-button @click="addTeacher()" type="primary" class="langbtn">
<FolderAddOutlined /> 添加授课记录
</a-button>
<!-- <a-upload multiple :headers="headers" :show-upload-list="false" :before-upload="beforeUpload2"> -->
<a-button class="resetbtn" @click="handleImport()" >
<DownloadOutlined /> 导入
</a-button>
<!-- </a-upload> -->
<a-button @click="handleExport()" class="resetbtn">
<UploadOutlined /> 导出
</a-button>
</div>
<!-- 表格 -->
<div style="padding: 10px 0">
<a-table :header-cell-style="{ 'text-align': 'center' }" style="border: 1px solid #f2f6fe" :columns="columns"
:scroll="{ x: 1500 }" :data-source="tableData" :loading="tableLoading" @expand="expandTable"
:pagination="false">
<template #bodyCell="{ record, column }">
<template v-if="column.key === 'teaching'">
<a-space style="display:flex ;justify-content: space-around; ">
<span>{{ (record?.teaching/60).toFixed(2) || '-' }}</span>
</a-space>
</template>
<template v-if="column.key === 'operation'">
<a-space>
<a-button type="link" @click="() => handleLook(record, String(record.courseform))">查看</a-button>
<a-button type="link" @click="() => handleModify(record, String(record.courseform))" v-if="record.createFrom == 1 && record.courseStatus == 0 ">编辑 </a-button>
<a-button type="link" v-if="record.createFrom == 1" @click="() => deleteModal(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 class="pa">
<a-pagination v-if="tableDataTotal > 10" :showSizeChanger="true" :showQuickJumper="false"
:hideOnSinglePage="true" :pageSize="searchParam.pageSize" :current="searchParam.pageNo" :total="tableDataTotal"
class="pagination" @change="changePagination" />
</div>
</div>
<!-- 弹窗组件 -->
<a-drawer v-model:visible="teacherdialog" placement="right" @closa="cancelTeacherDialog" :maskClosable="true"
width="60%" :title="teacherdialogtitle">
<a-form :model="formParam" :rules="rules" layout="vertical" ref="formRef">
<!-- 讲师姓名 teacher 组织 orgName-->
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="讲师名称" name="name">
<SearchTeacher @tlevel="tlevelChange" v-model:value="formParam.name" v-model:lable="formParam.orgNames"
v-model:system="tSystemNames" v-model:level="formParam.tlevelId"></SearchTeacher>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="讲师组织" name="orgName">
<a-popover>
<!-- <template #content>
{{ formParam.orgNames }}
</template> -->
<a-input :title="formParam.orgNames" disabled v-model:value="formParam.orgName" class="draitem"
placeholder="自动带出讲师的组织,展示主要部分,鼠标浮上去展示所有" allowClear showSearch>
</a-input>
</a-popover>
</a-form-item>
</a-col>
</a-row>
<!-- 讲师体系 tsystemName 级别 tlevelId -->
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="讲师体系" name="tsystemName">
<a-input disabled v-model:value="tSystemNames.systemName" class="draitem"
placeholder="自动带出讲师的体系" allowClear showSearch>
</a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="讲师级别" name="tlevelName">
<a-input disabled v-model:value="formParam.tlevelName" class="draitem"
placeholder="自动带出讲师级别" allowClear showSearch>
</a-input>
</a-form-item>
</a-col>
</a-row>
<!-- 内容分类 courseTypeId 课程名称 name -->
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="内容分类" name="courseTypeId">
<a-tree-select
:fieldNames="{
children: 'children',
label: 'name',
value: 'code',
}"
allow-clear
:getPopupContainer="triggerNode => triggerNode.parentNode || document.body"
v-model:value="formParam.courseTypeId"
show-search
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
placeholder="请选择内容分类"
tree-default-expand-all
:tree-data="sysTypeOptions"
@change="treetype"
>
</a-tree-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="课程名称:" name="courseName">
<a-input class="draitem" v-model:value="formParam.courseName" placeholder="请输入后搜索面授课" allowClear showSearch :maxlength="20" showCount @blur="sendName"
>
</a-input>
</a-form-item>
</a-col>
</a-row>
<!-- 授课日期 teachingDate 开课状态 courseStatus -->
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="授课/课程日期 :" name="teachingDate">
<a-date-picker class="draitem" v-model:value="teachingDate" style="width:100%" format="YYYY-MM-DD HH:mm" :show-time="{ format: 'HH:mm' }"
type="datetime"
placeholder="请选择课程日期" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="开课状态">
<a-radio-group v-model:value="formParam.courseStatus" class="draitem">
<a-radio :value="0">未开课</a-radio>
<a-radio :value="1">已开课</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
</a-row>
<!-- 授课时长 teaching 评分 score-->
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="授课时长" name="teaching">
<a-input v-model:value="formParam.teaching" style="width:80%; height: 40px; border-radius: 8px ; "
placeholder="0" allowClear showSearch suffix="分钟"
:maxLength="8"
@blur="clearNonNumber">
</a-input>
<span style="margin-left: 5px ;" v-if="formParam.teaching != null">{{ (formParam.teaching / 60
).toFixed(2) }}小时</span>
<span style="margin-left: 5px ;" v-if="formParam.teaching == null">0.00小时</span>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="评分" name="score">
<!-- <a-input class="draitem" v-model:value="formParam.score" @blur="clearscoreNumber" placeholder="" allowClear showSearch>
</a-input> -->
<a-input-number v-model:value="formParam.score" :min="0" :max="10"
style="width:100%; height: 40px; border-radius: 8px ; " />
</a-form-item>
</a-col>
</a-row>
<!-- 参训人数 studys-->
<a-row :gutter="16">
<a-col :span="24">
<a-form-item label="参训人数" name="studys">
<a-input v-model:value="formParam.studys" class="draitem" placeholder="0 " :maxLength="8"
@blur="clearstudysNumber" allowClear showSearch>
</a-input>
</a-form-item>
</a-col>
</a-row>
<!-- 备注 remark -->
<a-row :gutter="16">
<a-col :span="24">
<a-form-item label="备注">
<a-textarea v-model:value="formParam.remark" showCount :maxlength="200"
@blur="sendRemark"
style="width: 100%; height: 100px; border-radius: 8px" placeholder="请输入" />
</a-form-item>
</a-col>
</a-row>
</a-form>
<div :style="{
position: 'absolute',
right: 0,
bottom: 0,
width: '100%',
borderTop: '1px solid #e9e9e9',
padding: '10px 16px',
background: '#fff',
textAlign: 'right',
zIndex: 1,
}">
<a-button class="drabtn" @click="cancelTeacherDialog">取消</a-button>
<a-button class="drabtn" type="primary" @click="createTeacherDialog" :loading="buttonLoading">保存
</a-button>
</div>
</a-drawer>
<!--查看授课详情 -->
<a-drawer v-model:visible="teachingdialog" placement="right" @closa="cancelTeachingDialog" :maskClosable="true"
width="60%" title="查看讲师授课记录">
<span class="line"></span>
<span>讲师信息</span>
<a-descriptions bordered :column="2" :contentStyle="rowCenter" :labelStyle="rowCenter">
<a-descriptions-item label="讲师名称">{{ formParam.teacherName }}</a-descriptions-item>
<a-descriptions-item label="讲师工号">{{ formParam.userNo }}</a-descriptions-item>
<a-descriptions-item label="讲师组织" :span="2">{{ formParam.orgName }}</a-descriptions-item>
<a-descriptions-item label="讲师体系">{{ formParam.tsystemName }}</a-descriptions-item>
<a-descriptions-item label="讲师级别">{{ formParam.tlevelName
}}</a-descriptions-item>
<a-descriptions-item label="录入方式">
{{ formParam.createFrom == 0 ? '系统生成' : formParam.createFrom == 1 ? '手动录入' : '-' }}</a-descriptions-item>
<a-descriptions-item label="课程类型">{{ formParam.type == 1 ? '在线课' : formParam.type == 0 ? '面授课' : '' }}</a-descriptions-item>
<a-descriptions-item label="课程名称">{{ formParam.courseName }}</a-descriptions-item>
<a-descriptions-item label="开课状态">{{ formParam.courseStatus == 0? '未开课' : formParam.courseStatus == 1
? '已开课' : '' }}</a-descriptions-item>
<a-descriptions-item label="授课时长 ">
<span > {{ formParam.teaching }} 分钟</span>
<span style="margin-left: 10px ;" v-if="formParam.teaching != '0'">({{ (formParam.teaching / 60
).toFixed(2) }}小时)</span> </a-descriptions-item>
<a-descriptions-item label="授课/课程日期 ">{{ formParam.teachingDate }}</a-descriptions-item>
<a-descriptions-item label="参训人数 ">{{ formParam.studys }}</a-descriptions-item>
<a-descriptions-item label="评分 ">{{ formParam.score }}</a-descriptions-item>
<a-descriptions-item label="内容分类">{{ formParam.courseTypeName }}</a-descriptions-item>
<a-descriptions-item label="备注 ">{{ formParam.remark }}</a-descriptions-item>
</a-descriptions>
<div style="margin-top:20px ;line-height: 24px;" >
<span class="line"></span>
<span>讲师费发放情况</span>
</div>
<a-table :header-cell-style="{ 'text-align': 'center' }" style="border: 1px solid #f2f6fe" :columns="column"
:data-source="tableDatas" :pagination="false">
<template #bodyCell="{ record, column }">
<template v-if="column.key === 'operation'">
<a-space>
<!-- <a-button type="link" @click="() => handleLooka(record, String(record.courseform))">查看</a-button> -->
</a-space>
</template>
</template>
</a-table>
<div :style="{
position: 'absolute',
right: 0,
bottom: 0,
width: '100%',
borderTop: '1px solid #e9e9e9',
padding: '10px 16px',
background: '#fff',
textAlign: 'right',
zIndex: 1,
}">
<a-button class="drabtn" @click="cancelTeachingDialog">取消</a-button>
<a-button class="drabtn" type="primary" @click="cancelTeachingDialog" :loading="buttonLoading">返回
</a-button>
</div>
</a-drawer>
<!-- 删除功能弹窗 -->
<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">
<img src="@/assets/images/coursewareManage/QR.png" alt="" style="margin-right:10px" />
<span>提示</span>
</div>
<div class="body">
<span>您确定要删除此条记录吗</span>
</div>
<div class="del_btnbox">
<div class="del_btn btn2" @click="cancelTeacherDialog1" 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>
<ImportWork v-model:showWork="showWork" :url="'/admin/export/importInTeacherRecord'" :title="title"></ImportWork>
<!-- <div> <Upload/> </div> -->
</div>
</template>
<script lang="jsx">
import { reactive, toRefs, ref,computed ,watch ,onMounted} from "vue";
import moment, { Moment } from 'moment';
import { useRouter,useRoute } from "vue-router";
import {
RightOutlined,
UpOutlined,
UploadOutlined,
FolderAddOutlined,
DownloadOutlined
} from '@ant-design/icons-vue';
import dayjs from "dayjs";
// import Editor from "@/components/project/Editor";
import ProjectManager from "@/components/project/ProjectManagerNew";
import { message } from "ant-design-vue";
import { getTeacherSystemList, infoteacher, getTeacherExpertise } from "../../api/Lecturer";
import { getNewInTeacherCourseList, getOrganization, getTeacherCourseList, insertInTeacherCourse, updateInTeacherCourse, deleteInTeacherCourse } from "../../api/Teaching";
import{getExpenseByCourseId} from "../../api/lecturerFeeManagement";
// import AddTeacher from "../../components/drawers/project/AddTeacher"
import ImportWork from "../../components/lecturer/ImportWork.vue";
import { fileUp } from "../../api/Lecturer";
import SearchTeacher from "@/components/project/SearchTeacher";
import { useStore } from "vuex";
export default {
name: "InsideTeaching",
components: {
// AddTeacher,
// Editor,
// Upload,
ImportWork,
SearchTeacher,
// Editor,
// ImageUpload
ProjectManager,
RightOutlined, //图标--展开
UpOutlined,//图标--收起
UploadOutlined,//图标--导出
DownloadOutlined,//图标-导入
FolderAddOutlined,//图标--新增
},
setup() {
onMounted(() => {
const search = sessionStorage.getItem('searchLecturer')
if(route.query.activeKey == 1){
state.moreid = 2
state.searchParam = JSON.parse(search)
}
searchSubmit()
})
const route = useRoute()
const formRef = ref();
const router = useRouter();
const state = reactive({
moreid: 1,
title:'导入内部授课记录',
vf: false,
log: false,
close: false,
showWork: false,
currentPage1: 1,
pageSize1: 10,
tableLoading: false,
delTeacherId: null, //删除id确认
userNoid: null, //详情工号确认
lookTeacherId: null, //详情id确认
deleteTeacherdialog: false, //删除弹窗
teacherdialog1: null,
teacherdialog: false, //控制讲师弹窗
teacherdialogtitle: '',//讲师弹框title内容
teachingdialog: false,//控制查看抽屉
pageSizeOptions: ['10', '20', '30', '50'], //下拉选择每页显示多少条
pageSize: 10,
tableDataTotal: -1,//table列表总条数
searchdate: undefined, //选择时间
teachingDate: undefined, //选择时间
beginTime: null, //开始时间
endTime: null, //结束时间
tSystemNames:{
systemName:null,
levelVoList: []
},
formParam: {
courseStatus: 1,
createFrom: 1,
teaching: null,
name:null,
teacherName: null,
teachingDate:null
},
startTime:null,
searchParam:
{ "recordType": 1, "pageNo": 1, "pageSize": 10, "managerId": null, "name": null, "createFrom": null, "courseStatus": null, "orgId": null, "tSystemId": null, "endTime": null, "beginTime":null, "studys": [], "score": null }
})
// watch(()=>state.formParam.name,(val)=>{
// state.formParam.teacherName = val?.split('/')[1]
// }
// )
//获取所属组织
const getOrganizationList = ref([
// { value: 0, systemName: "讲师体系" },
]);
//获取所属组织
const getOrganizationLista = () => {
// console.log('getOrganizationList')
let obj={
pageNo:1,
pageSize:1000
}
getOrganization(obj).then((res) => {
if (res.data.code === 200) {
let arr = res.data.data.records;
let array = [];
arr.map((value) => {
let obj = {
value: value.id,
label: value.affiliationName,
};
array.push(obj);
});
getOrganizationList.value = array;
}
})
}
getOrganizationLista()
const LecturerSystemList = ref([
// { value: 0, systemName: "讲师体系" },
]);
//获取讲师体系列表
const LecturerSystemLista = () => {
let obj ={
pageNo:1,
pageSize:1000,
}
getTeacherSystemList(obj).then((res) => {
if (res.data.code === 200) {
let arr = res.data.data.records;
let array = [];
arr.map((value) => {
let obj = {
value: value.id,
label: value.systemName,
};
array.push(obj);
});
LecturerSystemList.value = array;
}
console.log("获取讲师", LecturerSystemList);
})
}
LecturerSystemLista()
//获取内容分类
const store = useStore();
const sysTypeOptions = computed(() => store.state.content_type);
const treetype =(val,lab)=>{
console.log(lab)
state.formParam.courseTypeName =lab.toString()
}
const OnTheJobStatusList = ref([
{ value: 1, label: "项目开课" },
{ value: 2, label: "路径开课" },
{ value: 3, label: "面授开课" },
])
const AuthenticationStatusList = ref([
{ value: '', label: "全部" },
{ value:0, label: "未开课" },
{ value: 1, label: "已开课" },
])
const entryTypeList = ref([
{ value: '', label: "全部" },
{ value: 0, label: "系统生成" },
{ value: 1, label: "手动录入" },
])
const scoreList = ref([
{ value: '', label: "全部" },
{ value: '90-100', label: "90~100" },
{ value: '80-90', label: "80~90" },
{ value: '70-80', label: "70~80" },
{ value: '60-70', label: "60~70" },
{ value: '10-50', label: "10~50" },
])
const studysList = ref([
{ value: '0-30', label: "0~30" },
{ value: '0-50', label: "0~50" },
{ value: '0-70', label: "0~70" },
{ value: '0-100', label: "0~100" },
{ value: '0-150', label: "0~150" },
{ value: '0-200', label: "0~200" },
{ value: '0-300', label: "0~300 " },
])
const scoreChange = (e) => {
if(e.length!==0){
e.map((item)=>{
if(item !== ''){
scoreList.value.map((item) => {
item.disabled = false
})
}
else {
scoreList.value.map((item) => {
if (item.value !== '') {
item.disabled = true
}
})
}
})}
else{
scoreList.value.map((item) => {
item.disabled = false
})
}
// if (e == '0') {
// scoreList.value.map((item) => {
// if (item.value !== '0') {
// item.disabled = true
// }
// })
// }
// else {
// scoreList.value.map((item) => {
// item.disabled = false
// })
// }
}
const columns = ref([
{
title: '讲师姓名 ',
dataIndex: 'teacherName',
key: 'teacherName',
ellipsis: true, align: "center",
width: 120,
},
{
title: '讲师工号 ',
dataIndex: 'userNo',
key: 'userNo',
ellipsis: true, align: "center",
width: 120,
},
{
title: '讲师体系 ',
dataIndex: 'tsystemName',
key: 'tsystemName',
ellipsis: true, align: "center",
width: 120,
},
{
title: '所属组织 ',
dataIndex: 'orgName',
key: 'orgName',
ellipsis: true, align: "center",
width: 200,
// customRender: (value, record) => {
// return (
// <div>
// {value.record.orgName}
// </div>
// )
// }
},
{
title: '数据来源',
dataIndex: 'createFrom',
key: 'createFrom',
ellipsis: true, align: "center",
width: 120,
customRender: (value) => {
return (
<div>
{value.record.createFrom == "0" || value.record.createFrom == "1"
? {
"0": "系统生成",
"1": "手动录入",
}[value.record.createFrom + ""] || ""
: "-"}
</div>
)
}
},
{
title: '课程名称 ',
dataIndex: 'courseName',
key: 'courseName ',
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"
? {
"1": "在线课",
"0": "面授课",
}[value.record.type + ""] || ""
: "-"}
</div>
)
}
},
{
title: '授课时间',
dataIndex: 'teachingDate',
key: 'teachingDate',
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: 'courseTypeName',
key: 'courseTypeName',
ellipsis: true, align: "center",
width: 120,
},
{
title: '授课时长(H) ',
dataIndex: 'teaching',
key: 'teaching',
ellipsis: true, align: "center",
scopedSlots: { customRender: "teaching" },
width: 120,
},
{
title: '参训人数',
dataIndex: 'studys',
key: 'studys',
ellipsis: true, align: "center",
width: 120,
},
{
title: '评分',
dataIndex: 'score',
key: 'score',
ellipsis: true, align: "center",
width: 120,
},
{
title: '是否生成课时费 ',
dataIndex: 'createdFee',
key: 'createdFee',
ellipsis: true, align: "center",
width: 150,
customRender: (value) => {
return (
<div>
{value.record.createdFee == 0 || value.record.createdFee == 1
? {
"0": "否",
"1": "是",
}[value.record.feeCreated + ""] || ""
: "-"}
</div>
)
}
},
{
title: '操作 ',
dataIndex: 'operation',
key: 'operation',
ellipsis: true, align: "right",
width: 200,
fixed: "right",
scopedSlots: { customRender: "action" },
},
])
//列表数据
const tableData = ref([
])
const rules = {
// name: [{ required: true, message:'',log: '讲师不能为空' }],
// orgName: [{ required: true, message: '',log:'讲师组织不能为空' }],
// tlevelName: [{ required: true, message: '',log:'讲师级别不能为空' }],
// tsystemName: [{ required: true, message: '',log:'讲师体系不能为空' }],
courseTypeId: [{ required: true, message: '',log:'内容分类不能为空' }],
courseName: [{ required: true, message: '',log:'课程名称不能为空' }],
teachingDate: [{ required: true, message: '', log: '授课日期不能为空' }],
teaching: [{ required: true, message:'',log: '授课时长不能为空' }],
courseStatus: [{ required: true, message: '',log:'开课状态不能为空' }],
}
//展开切换
const handlemoreid = () => {
if (state.moreid == 1) {
state.moreid = 2
}
else if (state.moreid == 2) {
state.moreid = 1
state.searchParam.createFrom = null
state.searchParam.courseStatus =null
state.searchParam.orgId = null
state.searchParam.tSystemId = null
state.searchParam.id = null
state.searchParam.score = []
state.searchParam.studys = []
}
}
// 搜索
const searchSubmit = () => {
getTableDate();
};
//修改时间
// function searchTimeChange(time, timeStr) {
// // let startTime = timeStr[0]
// // let endTime = timeStr[1] ;
// // state.startTime = new Date(startTime).getTime();
// // state.endTime = new Date(endTime).getTime();
// // // state.searchParam.beginTime = new Date(beginTime).getTime() ;
// // // state.searchParam.endTime = new Date(endTime).getTime() ;
// // state.searchParam.beginTime = state.startTime ? state.startTime : null,
// // state.searchParam.endTime = state.endTime ? state.endTime : null
// }
// const editTimeChange = (e, date) => {
// console.log(date);
// state.beginTime = date;
// // console.log(date, state.searchParam.beginTime, state.searchParam.endTime);
// };
//重置
const searchReset = () => {
state.searchdate= undefined,
state.searchParam = {
recordType: 1,
pageNo: 1,
pageSize: 10,
managerId: null,
name: null,
courseName:null,
createFrom: null,
courseStatus:null,
orgId: null,
tSystemId: null,
endTime: null,
beginTime: null,
studys: [],
score: undefined,
status:null,
};
getTableDate();
};
// List接口数据
const getTableDate = (obj) => {
state.tableLoading = true
let objA = { ...state.searchParam };
objA.beginTime = state.searchdate ? dayjs(state.searchdate[0]).format("YYYY-MM-DD") : "",
objA.endTime = state.searchdate ? dayjs(state.searchdate[1]).format("YYYY-MM-DD") : "",
// objA.beginTime = state.searchParam.beginTime !== null ? dayjs(new Date(state.searchParam.beginTime).getTime()).format("YYYY-MM-DD") : "",
// objA.endTime = state.searchParam.endTime !== null ? dayjs(new Date(state.searchParam.endTime).getTime()).format("YYYY-MM-DD") : "",
getNewInTeacherCourseList(objA)
.then((res) => {
tableData.value = res.data.data.records
state.tableDataTotal = Number(res.data.data.total);
state.tableLoading = false
console.log("获取tableData", tableData);
})
.catch(err => {
state.tableLoading = false
message.error(err.data.msg)
})
};
getTableDate()
// // 翻页
const changePagination = (page, pageSize) => {
state.searchParam.pageNo = page;
// state.pageNo = page;
state.searchParam.pageSize = pageSize;
getTableDate();
};
// 新增授课
const addTeacher = () => {
cancel()
state.teacherdialog1 = 0
state.teacherdialog = true;
state.teacherdialogtitle = '添加授课记录'
state.vf = true
}
//修改信息弹窗
const handleModify = (record) => {
state.teacherdialog = true;
state.teacherdialogtitle = '编辑授课记录'
state.lookTeacherId = record.teacherId
state.vf = false
TeacherSystem1(record)
}
async function validateField(name) {
return new Promise((resolve) => {
formRef.value.validateFields([name])
.then(() => {
resolve(false);
})
.catch(() => {
resolve(true);
});
});
}
const tlevelChange = (e) => {
state.formParam.tlevelName = e?.tlevelName
state.formParam.tlevelId = e?.tlevelId
}
watch(() => state.formParam.orgNames, (val) => {
console.log(val, 'orgName')
if(val){
const parts = val.split('/');
const reversedParts = parts.reverse();
state.formParam.orgName = reversedParts.join('/');
}
})
//保存
const createTeacherDialog = async () => {
state.formParam.teachingDate = state.teachingDate ? dayjs(state.teachingDate).format("YYYY-MM-DD HH:mm").toString() : ""
state.formParam.teacherName = state.formParam.name?.split('/')[0]
state.formParam.userNo =state.formParam.name?.split('/')[1]
state.formParam.tsystemName = state.tSystemNames.systemName
state.formParam.tsystemId = state.tSystemNames?.systemId
const formItemNames = Object.keys(rules);
for(let i=0;i<formItemNames.length;i++){
const result = await validateField(formItemNames[i]);
if (result) {
return message.error(rules[formItemNames[i]][0].log)
}
}
state.formParam.orgName = state.formParam.orgNames
state.formParam = {...state.formParam,...state.tSystemNames}
console.log( state.formParam)
if (state.vf == false) {
updateInTeacherCourse(state.formParam).then(response => {
message.success("编辑成功");
state.teacherdialog = false;
cancel()
getTableDate();
});
}
else {
insertInTeacherCourse(state.formParam)
.then((res) => {
message.success("添加成功");
state.teacherdialog = false;
cancel()
getTableDate();
}).catch((err) => {
console.log(err);
});
}
};
//删除弹窗
const deleteModal = (record) => {
state.deleteTeacherdialog = true
state.delTeacherId = record.id
};
//确认删除
const closeDeleteTeacher = () => {
//调用删除接口
// let obj = {
// offcourseId: state.delTeacherId,
// recordType: 1
// }
deleteInTeacherCourse(state.delTeacherId).then((res) => {
if (res.data.code == 200) {
message.success("删除成功");
state.deleteTeacherdialog = false
getTableDate();
}
})
}
//取消按钮 清空输入的数据
const cancelTeacherDialog = () => {
if (state.teacherdialog = true) {
formRef.value.resetFields();
state.teacherdialog = false
cancel()
}
// state.deleteTeacherdialog = false
};
const cancelTeacherDialog1 = () => {
state.deleteTeacherdialog = false
};
//清空数据
const cancel = () => {
state.formParam = {
recordType: 1,
courseStatus:1,
teacher: null,
orgName: null,
tsystemName: null,
tlevelId: null,
courseName: null,
teaching:null,
studys: null,
score: null,
type: null,
remark: null,
offcourseId: null,
createFrom: null,
teachingDate:null,
}
state.teachingDate=null
state.tSystemNames = {
systemName:null,
levelVoList: []
}
}
// //页面内部姓名
// const infoteacherList = ref([
// ]);
// const getinfoteacher = (obj) => {
// state.tableLoading = true
// infoteacher()
// .then((res) => {
// infoteacherList.value = res.data.data.records
// })
// };
function managerChange(e, l, d, t, orgName) {
console.log(e, l);
state.searchParam.userNo = d;
state.searchParam.name = t;
// state.searchParam.trainorgName=orgName
}
//表格内查看数据操作
const handleLook = (record) => {
// state.teacherdialog1 = 1
state.teachingdialog = true;
state.teacherdialogtitle = '查看详情'
state.lookTeacherId = record.teacherId
TeacherSystem1(record)
gettableDatas(record)
// let id = record.userNo
// router.push({ path: '/insideteachingdetail', query: { id } })
// router.push({ path: '/InsideTeachingDetail' })
}
const cancelTeachingDialog = () => {
state.teachingdialog = false;
}
//内部授课详情
// const TeacherSystem = (record) => {
// state.formParam = {
// recordType: 1,
// name: record.name,
// userNo: record.userNo,
// orgName: record.orgName,
// tsystemName: record.tsystemName,
// tlevelId: record.tlevelId,
// type: record.type,
// courseName: record.courseName,
// courseStatus:record.courseStatus,
// beginTime: dayjs(record.beginTime, 'YYYY-MM-DD'),
// // ref< moment.Moment >(moment(record.beginTime,'YYYY-MM-DD')),
// // record.beginTime,
// teaching: record.teaching,
// score: record.score,
// studys: record.studys,
// remark: record.remark,
// createFrom: record.createFrom
// }
// console.log(state.formParam)
// }
//内部授课详情
const TeacherSystem1 = (record) => {
getTeacherCourseList({id:record.id}).then((res) => {
state.formParam = res.data.data
state.tSystemNames.systemName = res.data.data.tsystemName
state.tSystemNames.systemId = res.data.data.tsystemId
state.tSystemNames.systemCode = res.data.data.systemCode
state.tSystemNames.systemId = res.data.data.systemId
state.tSystemNames.levelVoList = res.data.data.levelVoList
state.formParam.tlevelName = res.data.data.tlevelName
state.formParam.tlevelId = res.data.data.tlevelId
state.formParam.name = res.data.data.teacherName+'/'+res.data.data.userNo
state.formParam.orgLists = res.data.data.expertiseNames?.split(',').map(item=>({ name: item }))
state.teachingDate=dayjs(res.data.data.teachingDate, 'YYYY-MM-DD HH:mm' ),
state.formParam.orgNames = state.formParam.orgName
console.log( state.formParam);
})
.catch((err) => {
});
// state.formParam = {
// recordType: 1,
// name: record.name,
// userNo: record.userNo,
// organizationName: record.organizationName,
// systemName: record.systemName,
// sLevelName: record.sLevelName,
// type: record.type,
// courseName: record.courseName,
// courseStatus:record.courseStatus,
// beginTime:record.beginTime,
// // ref< moment.Moment >(moment(record.beginTime,'YYYY-MM-DD')),
// // record.beginTime,
// teaching: record.teaching,
// score: record.score,
// studys: record.studys,
// remark: record.remark,
// createFrom: record.createFrom
// }
console.log(state.formParam)
}
const column = ref([{
title: '基准课酬 ',
dataIndex: 'levelPay',
key: 'levelPay',
ellipsis: true, align: "center",
width: 120,
}, {
title: '计划费用 ',
dataIndex: 'expense',
key: 'expense',
ellipsis: true, align: "center",
width: 120,
},
{
title: '应发费用 ',
dataIndex: 'payableExpense',
key: 'payableExpense',
ellipsis: true, align: "center",
width: 120,
},
{
title: '状态 ',
dataIndex: 'status',
key: 'status',
ellipsis: true, align: "center",
width: 120,
customRender: (value) => {
return (
<div >
{value.record.status == "A10" || value.record.status == "A20" || value.record.status == "A30" || value.record.status == "E10" || value.record.status == "S20"
? {
"A10": "待审核",
"A20": "已提交",
"A30": "审核中",
"E10": "审核打回",
"S20": "审核通过",
}[value.record.status + ""] || ""
: "-"}
</div>
)
}
},
// {
// title: '操作 ',
// dataIndex: 'operation',
// key: 'operation',
// ellipsis: true, align: "right",
// width: 400,
// scopedSlots: { customRender: "action" },
// },
])
const gettableDatas = (record) => {
getExpenseByCourseId({ id: record.id })
.then((res) => {
console.log(res)
tableDatas.value = res.data.data.records
state.tableDataTotal = Number(res.data.data.total);
}).catch(err=>{
message.destroy()
message.error(err.data.msg)
})
}
const tableDatas = ref([])
// function managerChange(e, l, d, t, orgName) {
// console.log(e, l);
// state.searchParam.userNo = d;
// state.searchParam.name = t;
// // state.searchParam.trainorgName=orgName
// }
//导出功能
const handleExport = () => {
window.open(
`${process.env.VUE_APP_BASE_API}/admin/export/exportInTeacherRecord?pageNo=${state.searchParam.pageNo}&pageSize=${state.searchParam.pageSize}&recordType=1&name=${state.searchParam.name ? state.searchParam.name :''}&courseName=${state.searchParam.courseName ? state.searchParam.courseName :''}&createFrom=${state.searchParam.createFrom ? state.searchParam.createFrom : ''}&courseStatus=${state.searchParam.courseStatus ? state.searchParam.courseStatus :''}&tSystemId=${state.searchParam.tSystemId ? state.searchParam.tSystemId : ''}&beginTime=${state.searchParam.beginTime ? state.searchParam.beginTime : ''}&endTime=${state.searchParam.endTime ? state.searchParam.endTime : ''}&orgId=${state.searchParam.orgId ? state.searchParam.orgId :''}&courseTypeId=${state.searchParam.courseTypeId ? state.searchParam.courseTypeId : ''}&score=${state.searchParam.score ? state.searchParam.score : ''}&studys=${state.searchParam.studys ? state.searchParam.studys : ' '}
`)
console.log(state.searchParam.name,state.searchParam,'参数')
}
const handleImport = () => {
state.showWork = true
}
const beforeUpload2 = (file) => {
console.log(file);
const fileType = [
"xls",
"xlsx",
"zip",
];
if (!fileType.includes(file.name.split(".")[1])) {
message.error(
"仅支持.xls,.xlsx,.zip格式!"
);
return false;
}
const formData = new FormData();
formData.append("file", file);
console.log(file);
fileUp(formData).then((res) => {
if (res.data.code === 200) {
state.imgList.push({
img: res.data.data,
name: file.name,
size: file.size,
});
console.log(state.imgList);
// state.hasImgName = res.data.data;
}
});
return false;
};
const clearNonNumber = () => {
state.formParam.teaching = state.formParam.teaching.replace(/\D/g, '');
// state.formParam.teaching
}
const clearscoreNumber = () => {
state.formParam.score = state.formParam.score.replace(/\D/g, '');
}
const clearstudysNumber = () => {
state.formParam.studys = state.formParam.studys.replace(/\D/g, '');
}
//回车
const enterPressHadlerSearch = e => {
  console.log("e",e);
    if (e.keyCode === 13) {
      searchSubmit()
    }
};
const sendName=()=>{
state.formParam.courseName = state.formParam.courseName.replace(/\s/g, '');
}
const sendRemark=()=>{
state.formParam.remark = state.formParam.remark.replace(/\s/g, '');
}
return {
...toRefs(state),
sendName,
sendRemark,
sysTypeOptions,
enterPressHadlerSearch,
treetype,
validateField,
// managerChange,
clearNonNumber,
clearscoreNumber,
clearstudysNumber,
beforeUpload2,
rules,
formRef,
column,
tableDatas,
gettableDatas,
handlemoreid,
handleExport,
handleImport,
LecturerSystemList,
scoreList,
studysList,
OnTheJobStatusList,
AuthenticationStatusList,
entryTypeList,
searchSubmit,
searchReset,
columns,
tableData,
changePagination,
addTeacher,
cancelTeacherDialog,
cancelTeacherDialog1,
handleLook,
cancel,
deleteModal,
handleModify,
closeDeleteTeacher,
createTeacherDialog,
tlevelChange,
getTableDate, //list接口数据调用
// getStu
LecturerSystemLista,
// TeacherSystem,
TeacherSystem1,
getOrganizationLista,
getOrganizationList,
// searchTimeChange,
cancelTeachingDialog,
// editTimeChange,
scoreChange
}
},
};
</script>
<style lang="scss" scoped >
.select .ant-picker {
width: 410px !important;
}
.addTimeBox {
position: relative;
display: flex;
align-items: center;
.addTime {
position: absolute;
z-index: 1;
margin-left: 10px;
color: rgba(0, 0, 0, 0.4);
}
.ant-picker {
padding-left: 85px;
}
::v-deep .ant-picker-range .ant-picker-active-bar {
margin-left: 85px !important;
}
}
.addTimeBox .ant-picker{
padding-left: 85px;
}
//导出按钮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;
}
.InsideTeaching {
width: 100%;
height: 100%;
.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;
}
}
}
.ant-modal {
.ant-modal-content {
width: 424px !important;
.ant-modal-body {
.delete {
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-icons {
width: 16px;
height: 16px;
position: relative;
margin-right: 10px;
img {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
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;
}
}
}
}
}
}
}
.CreatePath {
.out {
z-index: 9999;
display: block;
position: absolute;
top: 90px;
width: 1080px !important;
height: 650px;
overflow: auto;
background-color: #fff;
box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
left: 50%;
top: 300px;
transform: translate(-50%, -50%);
.top {
width: 100%;
height: 68px;
background: linear-gradient(rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%);
display: flex;
align-items: center;
.topimg {
width: 18px;
height: 18px;
margin-left: 27px;
margin-top: -2px;
}
.topc {
color: #000000;
font-size: 16px;
margin-left: 8px;
}
}
.mid {
width: 100%;
height: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
.d {
// margin-top: 8px;
// color: #ff4e4e;
margin-left: -5px;
}
}
}
}
//添加样式
.langbtn {
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
}
// 重置样式
.resetbtn {
width: 100px;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
}
//展开收起样式
.moreidbtn {
border: none;
color: #4ea6ff;
width: 80px
}
//小竖线
.line {
float: left;
width: 3px;
height: 25px;
background: #4ea6ff;
border-radius: 30%;
margin-right: 5px;
}
//抽屉功能
.drawaer // /* 改变所有 a-tree-select 输入框的高度 */
// ::v-deep .ant-select:not(.ant-select-customize-input) .ant-select-selector{
// height: 40px;
// line-height: 40px;
// border-radius: 8px
// /* 确保文字垂直居中 */
// }
::v-deep .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
height: 40px !important;
line-height: 40px;
border-radius: 8px
}
// 抽屉内样式
.draitem {
width: 100%;
height: 40px !important;
border-radius: 8px;
line-height: 40px;
}
.drabtn {
height: 40px;
width: 80px;
border-radius: 8px;
margin-right: 20px
}
::v-deep .ant-select:not(.ant-select-customize-input) .ant-select-selector {
border-radius: 8px;
height: 40px;
}
.ant-col-12 {
height: 90px;
}
::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>