Files
fe-manage/src/views/lecturer/InsideLecturer.vue
2024-08-13 14:36:01 +08:00

1500 lines
44 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. 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" style="min-width: 1270px;">
<a-form layout="inline">
<a-form-item class="select">
<div style="width: 276px; height: 40px; border-radius: 8px" >
<ProjectManager v-model:value="searchParam.userNo"
v-model:name="searchParam.name"
placeholder="请输入工号/讲师姓名进行检索"
@onChange="managerChange" mode="multiple"></ProjectManager>
</div>
<!-- v-model:value="searchParam.name" -->
<!-- <a-input v-model:value="searchParam.userNo" style="width: 276px; height: 40px; border-radius: 8px"
placeholder="请输入工号/讲师姓名进行检索" allowClear showSearch>
</a-input> -->
<!-- <a-tree-select
:fieldNames="{
children: 'children',
label: 'name',
value: 'code',
}"
allow-clear
:getPopupContainer="triggerNode => triggerNode.parentNode || document.body"
v-model:value="valueproj"
show-search
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
placeholder="请选择内容分类"
tree-default-expand-all
:tree-data="sysTypeOptions">
</a-tree-select> -->
</a-form-item>
<a-form-item class="select">
<a-select style="width: 276px" placeholder="请选择讲师体系" v-model:value="searchParam.systemid" allowClear
:options="LecturerSystemList" @change="changetlevel">
</a-select>
</a-form-item>
<a-form-item class="select">
<a-select style="width: 276px" v-model:value="searchParam.tlevelId" placeholder="请选择讲师级别" allowClear
:options="getLevelList" :disabled="getLevelList.length!==0 ? false:true" >
</a-select>
</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 v-if="moreid == 2" class="select">
<a-select style="width: 276px ;margin-bottom:20px" v-model:value="searchParam.waitStatus" placeholder="在职状态"
:options="OnTheJobStatusList" allowClear>
</a-select>
</a-form-item>
<a-form-item v-if="moreid == 2" class="select">
<a-select style="width: 276px ;" v-model:value="searchParam.certStatus" placeholder="认证状态" allowClear
:options="AuthenticationStatusList">
</a-select>
</a-form-item>
<a-form-item v-if="moreid == 2" class="select">
<a-select style="width: 276px " v-model:value="searchParam.certStatus" placeholder="擅长课程" allowClear
:options="AuthenticationStatusList">
</a-select>
</a-form-item>
<!-- <a-form-item v-if="moreid == 2" class="select">
<a-select style="width: 276px ;margin-bottom:20px" v-model:value="searchParam.payrollPlaceId" placeholder="发薪地" allowClear
:options="PlaceOfPayList">
</a-select>
</a-form-item> -->
<!-- <div class="select">
<a-select style="width: 276px" v-model:value="searchParam.status" placeholder="账号状态"
:options="AccountStatusList">
</a-select>
</div> -->
</a-form>
<div style="width: 100%;"></div>
<div style="display: flex; margin-bottom: 20px">
<a-button @click="addTeacher()" type="primary" class="resetbtn">
<FolderAddOutlined /> 新增讲师
</a-button>
<div style="margin-left: 20px ;">
<a-button @click="handleExport()" class="resetbtn">
<UploadOutlined /> 导出
</a-button>
</div>
</div>
<!-- 表格 -->
<div style="padding: 10px 0">
<a-table 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 >
<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="false"
:showQuickJumper="true"
: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">
<!-- 基本信息 -->
<a-row>
<a-col :span="24">
<span class="line"></span><span>基本信息</span>
</a-col>
</a-row>
<!-- 头像 -->
<a-row :gutter="16">
<a-col :span="24">
<div class="item_inp" style="background-color: #fff;">
<a-upload name="avatar" list-type="picture-card" class="avatar-uploader" :show-upload-list="false"
:headers="headers"
:before-upload="beforeUpload">
<img class="i_upload_img" v-if="imageUrl" :src="imageUrl" alt="avatar" />
<div class="i_upload" v-else>
<div class="addimg">
<div class="heng"></div>
<div class="shu"></div>
</div>
</div>
</a-upload>
<div class="i_bottom">
<div class="tip" style="margin-bottom: 10px;">
<span style="color: #999999; margin-left: 8px">支持图片格式为jpg/jpeg/png 图片最大为2MB</span>
</div>
</div>
</div>
</a-col>
</a-row>
<!-- 讲师名称组织 -->
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="讲师名称" name="name">
<ProjectManager v-model:value="formParam.userNo"
v-model:name="formParam.name"
placeholder="请输入工号/讲师姓名进行检索"
@onChange="managerChange" mode="multiple"></ProjectManager>
<!-- <SearchTeacher v-model:value="formParam.name"></SearchTeacher> -->
<!-- <a-tree-select v-model:value="formParam.name"
show-search allow-clear tree-data-simple-mode class="draitem"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="treeData" placeholder="请输入讲师名称" /> -->
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="讲师组织" name="departId">
<a-popover title="讲师组织">
<template #content>
{{ formParam.departId }}
</template>
<a-input disabled v-model:value="formParam.departId" class="draitem"
placeholder="自动带出讲师的组织,展示主要部分,鼠标浮上去展示所有" allowClear showSearch>
</a-input>
</a-popover>
</a-form-item>
</a-col>
</a-row>
<!-- 讲师级别 体系-->
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="讲师体系" name="tsystemId">
<a-select class="draitem" v-model:value="formParam.tsystemId" placeholder="请选择讲师体系" allowClear
@change="changetlevel"
:options="LecturerSystemList">
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="讲师级别" name="tlevelId">
<a-select class="draitem" v-model:value="formParam.tlevelId" placeholder="请选择讲师级别" allowClear
:disabled="getLevelList.length!==0 ? false:true"
:options="getLevelList">
</a-select>
</a-form-item>
</a-col>
</a-row>
<!-- 初始时长 认证 -->
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="初始授课时长" name="defaultteachingTime">
<a-input v-model:value="formParam.defaultteachingTime" style="width:80%; height: 40px; border-radius: 8px; " placeholder="0"
allowClear showSearch suffix="分钟">
</a-input>
<span style="margin-left: 5px ;" v-if="formParam.defaultteachingTime!= null">{{ (formParam.defaultteachingTime /60 ).toFixed(2)}}小时</span>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="认证状态" name="certStatus">
<a-radio-group v-model:value="formParam.certStatus"
class="draitem">
<a-radio :value="0">未认证</a-radio>
<a-radio :value="1">已认证</a-radio>
<span>
<a-upload
multiple
:headers="headers"
:show-upload-list="false"
:before-upload="beforeUpload2"
>
<a-button type="text" class="moreidbtn" v-if="formParam.certStatus==1">上传凭证</a-button>
</a-upload>
<!-- <span>
支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip
</span> -->
</span>
</a-radio-group>
<!-- <FJUpload v-if="formParam.certStatus==1" v-model:value="formParam.workEnclosureAddress"/> -->
</a-form-item>
</a-col>
</a-row>
<!-- 其他信息 -->
<a-row>
<a-col :span="24">
<span class="line" ></span><span>其他信息</span>
</a-col>
</a-row>
<!-- 讲师介绍 -->
<a-row :gutter="16">
<a-col :span="24">
<a-form-item label="讲师介绍">
<Editor v-model="formParam.description "/>
</a-form-item>
</a-col>
</a-row>
<!-- 工作经历 -->
<a-row :gutter="16">
<a-col :span="24">
{{ formParam.workExperience }}
<a-form-item label="工作经历">
<Editor v-model:value="formParam.workExperience" :isupload="isupload"/>
</a-form-item>
</a-col>
</a-row>
<!-- 擅长课程 -->
<a-row :gutter="16">
<a-col :span="24">
<a-form-item label="擅长课程">
<Editor v-model="formParam.courses "/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="50" style="margin-bottom: 50px;">
<a-col :span="2">
<a-tag color="blue" style="line-height: 40px; ">管理业务</a-tag>
</a-col>
<a-col :span="20">
<div class="add_content" @click="addContentData" >+</div>
</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>
<!-- 删除功能弹窗 -->
<div>
<a-modal v-model:visible="deleteInTeacherdialog" :footer="null" :closable="close"
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" 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>
<AddContent v-model:showContent="showContent" @AddContentList="AddContentList" :Addtitle="Addtitle" />
<!-- <div> <Upload/> </div> -->
</div>
</template>
<script lang="jsx">
import { reactive, toRefs, ref, watch } from "vue";
import {
RightOutlined,
UpOutlined,
UploadOutlined,
FolderAddOutlined
} from '@ant-design/icons-vue';
import Editor from "@/components/project/Editor";
import ProjectManager from "@/components/project/ProjectManagerNew";
import SearchTeacher from "@/components/project/SearchTeacher";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";
import { getTeacherSystemList, getTeacherList, getPayRollPlace, getLevel, insertTeacher, deleteInTeacher, updateInTeacher, getTeacherById, updateTeacherState } from "../../api/Lecturer";
import { fileUp } from "../../api/indexEval";
import {getCookieForName} from "@/api/method";
// import {getProjSt} from "../../api/indexProjStu";
import AddContent from "../../components/project/AddContent.vue"
export default {
name: "InsideLecturer",
components: {
ProjectManager,
SearchTeacher,
AddContent,
Editor,
// FJUpload,
RightOutlined, //图标--展开
UpOutlined,//图标--收起
UploadOutlined,//图标--导出
FolderAddOutlined,//图标--新增
},
setup() {
const router = useRouter();
const state = reactive({
Addtitle:'选择教师专长',
showContent: false,
moreid: 1,
byPid: null,
currentPage1: 1,
pageSize1: 10,
tableLoading: false,
tagsshow: "1",
PlaceOfPayList: [],
LecturerSystemList: [],
delTeacherId: null, //删除id确认
editTeacherid: null,//修改状态id确认
newStatus: null, //修改状态码确认
id : null, //内部讲师详情工号确认
lookTeacherId: null, //内部讲师详情id确认
deleteInTeacherdialog: false, //删除弹窗
editTeacher: false, //修改状态弹窗
handleOperate1: null, //修改状态弹窗内容
teacherdialog1: null,
teacherdialog: false, //控制讲师弹窗
teacherdialogtitle: '',//讲师弹框title内容
pageSizeOptions: ['10', '20', '30', '50'], //下拉选择每页显示多少条
pageSize: 10,
tableDataTotal: -1,//table列表总条数
formParam: {
userNo:null,
certStatus: 0,//认证状态
defaultteachingTime: '0',
vf:true
},
searchParam: {
name:null,
userNo: null,
systemid: null,
tlevelId: null,
waitStatus: null,
certStatus: null,
salaryName: null,
payrollPlaceId: null,
status: null,
pageNo: "1",
pageSize: "10"
},
teacherrepromo: {
pageNo: "1",
pageSize: "10",
userNo: null
},
activeName: 'first'
})
const headers = { token: getCookieForName("token") };
//图片上传
const imageUrl = ref('')
const beforeUpload = (file) => {
const isJpgOrPng =
file.type === "image/jpg" ||
file.type === "image/jpeg" ||
file.type === "image/png" ||
file.type === "image/svg" ||
file.type === "image/bmp" ||
file.type === "image/gif";
if (!isJpgOrPng) {
message.error("仅支持jpg、gif、png、jpeg、svg、bmp格式!");
return false;
}
watch(()=>state.formParam.workExperience,(val)=>{
console.log(val,'11111')
})
let isLt1M = file.size < 2000000;
console.log(file.size, isLt1M)
if (!isLt1M) {
message.error("图片大小超过2MB!");
return false;
}
const formDatas = new FormData();
formDatas.append("file", file);
console.log("file", file)
fileUp(formDatas).then((res) => {
if (res.data.code === 200) {
console.log(res.data.data, 45);
imageUrl.value = process.env.VUE_APP_FILE_PATH + res.data.data;
// state.hasImgName = file.name;
// emit("src", { id: '', src: res.data.data });
}
});
return false;
};
//附件上传
const beforeUpload2 = (file) => {
console.log(6765555);
console.log(file);
const fileType = [
"jpg",
"jpeg",
"png",
"gif",
"pdf",
"ppt",
"pptx",
"doc",
"docx",
"xls",
"xlsx",
"zip",
];
if (!fileType.includes(file.name.split(".")[1])) {
message.error(
"仅支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.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 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 = [];
arr.map((value) => {
let obj = {
value: value.kid,
label: value.systemName,
};
array.push(obj);
});
LecturerSystemList.value = array;
}
console.log("获取讲师", LecturerSystemList);
})
}
const isupload = (val)=>{
console.log(val,'val')
}
const addContentData = () => {
state.showContent = true
}
const AddContentList = (data) => {
console.log(data,'treedatalist')
[ {
title: 'parent 1',
key: '0-0',
children: [
{
title: 'parent 1-0',
key: '0-0-0',
disabled: true,
children: [
{ title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
{ title: 'leaf', key: '0-0-0-1' },
],
},
{
title: 'parent 1-1',
key: '0-0-1',
children: [{ key: '0-0-1-0', slots: { title: 'title0010' } }],
},
],
}]
//组件获取返回的所有值,调用以前接口,现环境不可用,示例:
// [{
// "id": "966459050400600064",
// "sysCreateAid": "952948872212635648",
// "sysCreateBy": "董瑞华",
// "sysCreateTime": "2022-04-20 22:03:13",
// "sysUpdateTime": "2022-04-20 22:03:13",
// "sysUpdateBy": "董瑞华",
// "sysVersion": 0,
// "deleted": false,
// "name": "研发",
// "parentId": "966458733088919552",
// "filter": true,
// "orderIndex": 2,
// "origin": 2,
// "status": 1,
// "total": 0,
// "sysResType": 1,
// "children": "",
// "parentName": "专业力",
// "resDataManager": "",
// "code": "966459050400600064",
// "value": "966459050400600064"
// }]
}
LecturerSystemLista()
//获取内部讲师级别
const getLevelList = ref([
// { value: 0, label: "未定级" },
])
const changetlevel = (val) => {
console.log( "讲师体系id" +val);
getLevel( {kid:val}).then((res) => {
if (res.data.code === 200) {
let arr = res.data.data;
let array = [];
arr.map((value) => {
let obj = {
value: value.levelCode,
label: value.levelName,
};
array.push(obj);
});
getLevelList.value = array;
}
})
}
changetlevel()
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 = () => {
getPayRollPlace().then((res) => {
if (res.data.code === 200) {
let arr = res.data.data;
let array = [];
arr.map((value) => {
let obj = {
value: value.id,
label: value.name,
};
array.push(obj);
});
PlaceOfPayList.value = array;
}
})
}
PlaceOfPayLista()
const AccountStatusList = ref([
{ value: 1, label: "启用" },
{ value: 2, label: "停用" },
])
// const teacheExpertiseList = ref([
// ])
// //获取讲师父 专长
// const TeacherExpertiseList = ref([
// ]);
// const getTeacherExpertisea = () => {
// // console.log('点击了LecturerSystemLista')
// getTeacherExpertise().then((res) => {
// if (res.data.code === 200) {
// let arr = res.data.data;
// let array = [];
// arr.map((value) => {
// let obj = {
// value: value.id,
// label: value.name,
// };
// array.push(obj);
// });
// TeacherExpertiseList.value = array;
// }
// })
// }
// getTeacherExpertisea()
// const changeSelect = (val) => {
// state.byPid = val
// getTeacherExpertiseByPida(val)
// state.formParam.expertise = getTeacherExpertiseByPidList[0]
// }
//获取讲师子 专长
// const getTeacherExpertiseByPidList = ref([
// ]);
// const getTeacherExpertiseByPida = () => {
// // let pid = {id :val}
// // console.log('点击了LecturerSystemLista')
// let id = val
// getTeacherExpertiseByPid(state.byPid).then((res) => {
// if (res.data.code === 200) {
// let arr = res.data.data;
// let array = [];
// arr.map((value) => {
// let obj = {
// value: value.id,
// label: value.name,
// };
// array.push(obj);
// });
// getTeacherExpertiseByPidList.value = array;
// }
// })
// }
// watch(
// )
//新增页面内部姓名
const infoteacherList = ref([
// { value: 0, systemName: "讲师体系" },
]);
const getinfoteacher = () => {
// state.tableLoading=true
// ()
// .then((res) => {
// infoteacherList.value = res.data.data.records
// })
};
//展开切换
const handlemoreid = () => {
if (state.moreid == 1) {
state.moreid = 2
}
else if (state.moreid == 2) {
state.moreid = 1
state.searchParam.waitStatus = null
state.searchParam.certStatus = null
state.searchParam.payrollPlaceId = null
}
}
const columns = ref([
{
title: '讲师姓名 ',
dataIndex: 'name',
key: 'name',
elipsis: true,
align: "center",
width: 100,
},
{
title: '讲师工号 ',
dataIndex: 'userNo',
key: 'userNo',
elipsis: true,
align: "center",
width: 100,
},
{
title: '所属组织 ',
dataIndex: 'departId',
key: 'departId',
elipsis: true, align: "center",
width: 400,
// customRender: (value, record) => {
// return (
// <div>
// {value.record.orgName}
// </div>
// )
// }
},
{
title: '讲师体系 ',
dataIndex: 'tsystemName',
key: 'tsystemName',
elipsis: true, align: "center",
width: 100,
},
{
title: '级别 ',
dataIndex: 'tlevelName',
key: 'tlevelName',
elipsis: true, align: "center",
width: 100,
},
{
title: '发薪地 ',
dataIndex: 'payrollPlaceName',
key: 'payrollPlaceName',
elipsis: true, align: "center",
width: 120,
},
{
title: '授课时长 ',
dataIndex: 'teaching',
key: 'teaching',
elipsis: true, align: "center",
width: 120,
},
{
title: '在职状态 ',
dataIndex: 'waitStatus',
key: 'waitStatus',
elipsis: true, align: "center",
width: 120,
customRender: (value) => {
return (
<div>
{value.record.waitStatus == "0" || value.record.waitStatus == "1"
? {
"0": "在职",
"1": "离职",
}[value.record.waitStatus + ""] || ""
: "-"}
</div>
)
}
},
{
title: '认证状态 ',
dataIndex: 'certStatus',
key: 'certStatus',
elipsis: true, align: "center",
width: 120,
customRender: (value) => {
return (
<div>
{value.record.certStatus == 0 || value.record.certStatus == 1
? {
"0": "未认证",
"1": "已认证",
}[value.record.certStatus + ""] || ""
: "-"}
</div>
)
}
},
{
title: '账号状态 ',
dataIndex: 'status',
key: 'status',
elipsis: true, align: "center",
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: 200,
align: "right",
scopedSlots: { customRender: "action" },
},
])
//列表数据
const tableData = ref([
])
// 搜索
const searchSubmit = () => {
getTableDate();
};
//重置
const searchReset = () => {
state.searchParam = {
name:null,
userNo: null,
departId:null,
systemid: null,
tlevelId: null,
waitStatus: null,
certStatus: null,
salaryName: null,
payrollPlaceId: null,
status: null,
pageNo: 1,
pageSize: 10,
};
getTableDate();
};
// List接口数据
const getTableDate = (obj) => {
state.tableLoading = 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("获取讲师tableData", 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, pageSize) => {
state.searchParam.pageNo = page;
state.currentPage1 = page;
state.pageSize1 = pageSize;
getTableDate();
};
// 新增讲师
const addTeacher = () => {
cancel()
state.teacherdialog = true;
state.teacherdialogtitle = '新增讲师'
state.formParam.vf=true
}
//修改讲师信息弹窗
const handleModify = (record) => {
state.teacherdialog = true;
state.teacherdialogtitle = '修改信息'
state.id = record.id
state.formParam.vf=false
TeacherSystem()
}
//保存
const createTeacherDialog = () => {
console.log(state.formParam);
console.log(state.formParam.vf)
// if (state.formParam.vf == false) {
// updateInTeacher(state.formParam).then(response => {
// message.success("修改成功");
// });
// }
// let a =
// {"kid":"6B049FAF-C314-7CCF-0D28-0D23F4C42531","id":"965342027497607168","photo":"/2022/12/1057603184561385472.jpg","name":"李玉冰","systemId":null,"defaultteachingTime":"11","teaching":"420","levelId":null,"levelName":null,"certStatus":1,"description":"京东方大学学习平台管理员","workExperience":"<p>卫健委因无法准确掌握实际数量即日起不再公布无症状感染者数据。2、官方在感染高风险人群、60岁以上老年人群等开展第二剂次加强免疫接种</p>","courses":null,"expertise":null,"teacherType":null,"certifyBy":null,"certifyAt":null,"certification":null,"userNo":"00004409","orgName":null,"salaryId":null,"salaryName":null,"waitStatus":"0","status":1,"mobile":null,"email":null,"remark":null,"sysupdateBy":null,"tsystemName":"D事业群"}
// else {
// insertTeacher(state.formParam)
// .then((res) => {
// message.success("保存成功");
// }).catch((err) => {
// console.log(err);
// });
// }
state.teacherdialog = false;
getTableDate();
};
//删除弹窗
const deleteModal = (record) => {
state.deleteInTeacherdialog = true
state.delTeacherId = record.id
};
//修改状态窗口
const handleOperate = (record) => {
if (record.status == 1) {
state.handleOperate1 = record.status
state.newStatus = 2
}
if (record.status == 2) {
state.handleOperate1 = record.status
state.newStatus = 1
}
state.editTeacherid = record.id
state.editTeacher = true
};
//确认删除
const closeDeleteTeacher = () => {
//调用删除接口
deleteInTeacher(state.delTeacherId).then((res) => {
if (res.data.code == 200) {
// message.success("删除成功");
state.deleteInTeacherdialog = false
getTableDate();
}
})
}
//确认启用停用
const closehandleOperate = () => {
//调用接口
let ids = {
id: state.editTeacherid,
newStatus: state.newStatus
}
console.log(ids)
updateTeacherState(ids).then((res) => {
message.success("操作成功");
state.editTeacher = false
getTableDate();
})
}
//取消按钮 清空输入的数据
const cancelTeacherDialog = () => {
if (state.teacherdialog = true) {
state.teacherdialog = false
cancel()
}
state.deleteInTeacherdialog = false
state.editTeacher = false
state.tagsshow = 1
};
//清空数据
const cancel = () => {
state.formParam = {
name: null,
// userNo:null,
departId: null,
tlevelId: null,
defaultteachingTime: 0,
// levelName:null,
// leveName:null,
tsystemId: null,
// systemid:null,
certStatus:0,
description:null,
workExperience:null,
courses:null,
}
}
const rules = {
name: [{ required: true, message: '讲师不能为空' }],
departId: [{ required: true, message: '组织不能为空' }],
tlevelId: [{ required: true, message: '讲师级别不能为空' }],
tsystemId: [{ required: true, message: '讲师体系不能为空' }],
defaultteachingTime: [{ required: true, message: '授课时长不能为空' }],
certStatus: [{ required: true, message: '认证状态不能为空' }],
}
//表格内查看数据操作
const handleLook = (record) => {
let id = record.id
router.push({ path: '/LookInsideLecturer', query: { id } })
}
//内部讲师详情
const TeacherSystem = () => {
getTeacherById(state.id).then((res) => {
if (res.data.code === 200) {
state.formParam = res.data.data[0]
}
console.log("内部讲师详情", state.formParam);
})
.catch((err) => {
console.log("内部讲师详情", err);
});
}
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}/teacher/export?pageNo=${state.currentPage1
}&pageSize=${state.pageSize1}
&userNo=${state.searchParam.userNo ? state.searchParam.userNo : ""}
&name=${state.searchParam.name ? state.searchParam.name : ""}
&systemid=${state.searchParam.systemid ? state.searchParam.systemid : ""}
&tlevelId=${state.searchParam.tlevelId ? state.searchParam.tlevelId : ""
}&waitStatus=${state.searchParam.waitStatus ? state.searchParam.waitStatus : ""}
&certStatus=${state.searchParam.certStatus ? state.searchParam.certStatus : ""
}&salaryName=${state.searchParam.salaryName ? state.searchParam.salaryName : ""}
&status=${state.searchParam.status ? state.searchParam.status : ""}`
);
// this.download('lesson_records/export', {
// ...state.searchParam
// }, `project_${new Date().getTime()}.xlsx` )
}
return {
...toRefs(state),
rules,
managerChange,
headers,
beforeUpload,
imageUrl,
handlemoreid,
// changeSelect,
handleExport,
LecturerSystemList,
getLevelList,
OnTheJobStatusList,
changetlevel,
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,
// TeacherExpertiseList,
// getTeacherExpertisea,
// getTeacherExpertiseByPidList,
// getTeacherExpertiseByPida,
infoteacherList,
getinfoteacher,
addContentData,
isupload,
AddContentList,
beforeUpload2,
}
},
};
</script>
<style lang="scss" scoped>
.add_content{
width: 40px;
height: 40px;
cursor: pointer;
border-radius: 50%;
background-color: #4ea6ff;
text-align: center;
line-height: 40px;
color: #ffffff;
font-size: 26px;
}
//导出按钮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;
}
.InsideLecturer { width: 100%;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
.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;
}
}}
.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: 30%;
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;
}
}
}
}
.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;
}
}
}
}
// 重置样式
.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 输入框的高度 */
.ant-tree-select .ant-select-selection {
height: 40px;
line-height: 40px;
/* 确保文字垂直居中 */
}
.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;
line-height: 40px;
}
.ant-col-12{
height:90px;
}
.item_inp {
flex: 1;
text-align: center ;
.i_upload_img {
width: 100px;
height: 100px;
border-radius: 8px;
}
.i_upload {
width: 100px;
height: 100px;
border: 1px solid #4ea6ff;
border-radius:50%;
text-align: center;
align-items: center;
cursor: pointer;
.addimg {
position: relative;
.heng {
position: absolute;
top: 50px;
left: 25px;
width: 50px;
border: 1px solid #4ea6ff;
}
.shu {
position: absolute;
top: 25px;
left: 50px;
height: 50px;
border: 1px solid #4ea6ff;
}
}
}
.ant-upload.ant-upload-select-picture-card {
border: 0px !important;
border-radius: 50%!important;
}
}
.ant-upload.ant-upload-select-picture-card {
border: 0px !important;
border-radius: 50%!important;
}
</style>