Files
fe-manage/src/views/gratefulteacher/InstructorCertification.vue
zhangsir c0e127290a 修改
2024-06-03 21:15:08 +08:00

726 lines
20 KiB
Vue

<script setup >
import { ref,onMounted,computed } from 'vue';
import { useRoute, useRouter } from 'vue-router'
import {getexamineList,CreateAuthentication,delExamine,getOnlineLearningList,deleteCourse,addCourse,updateExamine,removePermission,updateStatus} from '@/api/examineApi.js'
import dialog from "@/utils/dialog";
import DropDown from "@/components/common/DropDown";
import OwnerTableModelStudent from "./tablemodel";
import CommonStudent from "./CommonTeacher";
import CreateOnline from "@/components/drawers/CreateOnline.vue";
import { message } from "ant-design-vue";
import { useStore } from "vuex";
const route = useRoute()
const router = useRouter()
const visible = ref(false);
const loading = ref(false);
const store = useStore();
const userInfo = computed(() => store.state.userInfo);
const uploadAdmin = (admin)=>{
const roleCode = userInfo.value.roleList.map((item)=>item.roleCode)
if (admin){
return roleCode.some(t => t == admin)
}
}
const onlineRef = ref(false);
const columns = [
{
name: 'serial',
dataIndex: 'serial',
key: 'serial',
width: 100,
},
{
title: '认证项目名称',
dataIndex: 'name',
key: 'name',
ellipsis: true,
width: 500,
},
{
title: '创建人',
dataIndex: 'createName',
key: 'createName',
},
{
title: '创建时间',
key: 'createTime',
dataIndex: 'createTime',
},
{
title: '操作',
key: 'action',
fixed: "right",
width: 250,
},
];
const ViewReviewcolumns =[
{
title: "课程名称",
name: 'courseName',
dataIndex: 'courseName',
key: 'id',
ellipsis: true,
width: 300,
},
{
title: "创建人",
name: 'createName',
dataIndex: 'createName',
key: 'id',
align: "center",
width: 50,
},
{
title: "发布时间",
name: 'createTime',
dataIndex: 'createTime',
key: 'id',
align: "center",
ellipsis: true,
width: 100,
},
{
title: "操作",
width: 50,
dataIndex: "id",
key: "id",
align: "center",
slots: { customRender: "action" },
},
]
const imgData = ref([
{id:1,img:'50.png'},
{id:2,img:'39.png'},
{id:3,img:'46.png'},
{id:4,img:'33.png'},
{id:5,img:'47.png'},
{id:6,img:'49.png'},
{id:7,img:'27.png'},
{id:8,img:'30.png'},
{id:9,img:'44.png'},
])
const createParam = ref({
name: '',
description: '',
cover: '',
index:''
})
const imgClick = (item) => {
createParam.value.cover = item.value
createParam.value.index = item.code
}
//创建认证确定
const handleOk = async () => {
if(createParam.value.name.trim()==''||createParam.value.name.trim()==null){
message.info('请输入认证项目名称')
createParam.value.name = ''
return
}
if(createParam.value.cover==''||createParam.value.cover==null){
message.info('请选择封面图')
return
}
visible.value = false
await CreateAuthentication(createParam.value).then(res=>{
message.success('创建成功')
getlist()
})
}
const handleEdit = async () => {
if(createParam.value.name.trim()==''||createParam.value.name.trim()==null){
message.info('请输入认证项目名称')
createParam.value.name = ''
return
}
if(createParam.value.cover==''||createParam.value.cover==null){
message.info('请选择认证项目封面图')
return
}
visible.value = false
await updateExamine({
name:createParam.value.name,
cover:createParam.value.cover,
id:createParam.value.id,
description: createParam.value.description
}).then(res=>{
message.success('编辑成功')
getlist()
})
}
const editId = ref('')
//编辑认证
const editFee = (record) => {
editId.value = record.id
visible.value = true
createParam.value = {...record}
}
//线上学习课列表显示
const ViewReviewdata = ref([])
const ViewReviewDataShow = ref([])
function selectCourse(row) {
row.courseName = row.name
row.createName = row.sysCreateBy
row.createTime = row.publishTime
row.newId = 2
if (!ViewReviewDataShow.value.some(item => item.id === row.id)) {
if (ViewReviewdata.value.some(item => item.courseName == row.name)) {
message.error('该课程已添加')
return
}
ViewReviewdata.value.push(row);
ViewReviewDataShow.value.push(row);
}
onlineRef.value.closeModal();
}
const OnlineLearning = async (i, row) => {
window.selectCourse = selectCourse;
// row && (ViewReviewdata.value = [row.info]);
ViewReviewShow.value = true
await getOnlineLearningList().then(res=>{
if(res.code == 200){
ViewReviewdata.value = res.data
}
})
}
//创建认证
const createData = () => {
editId.value = ''
createParam.value = {
name: '',
description: '',
cover: '',
}
visible.value = true
}
//删除数据
const deleteReview = (record,index) =>{
dialog({
content: '确认删除吗?删除后数据不可恢复',
ok: () => {
if(record.newId==2){
ViewReviewdata.value = ViewReviewdata.value.filter(item => item.id !== record.id);
message.success('删除成功')
return
}
deleteCourse({id:record.id}).then(res=>{
if(res.code == 200){
message.success('删除成功')
OnlineLearning()
}
})
}
})
}
const resizeRe = (record) => {
//启用 0 禁用 1
dialog({
content: record.status==1?'确定启用吗?启用后新报名的讲师会显示该课程信息':'确定禁用吗?禁用后新报名的讲师不显示该课程信息',
ok: () => {
updateStatus({
id:record.id,
status: record.status==1?0:1
}).then(res=>{
message.success(record.status==1?'启用成功':'禁用成功')
OnlineLearning()
})
}
})
}
const falseData = () => {
ViewReviewdata.value = []
ViewReviewDataShow.value = []
ViewReviewShow.value = false
}
const AddList = () => {
if(ViewReviewDataShow.value.length==0){
message.error('请选择课程')
return
}
const filteredData = ViewReviewdata.value.filter(item => item.newId === 2);
if(filteredData.length==0){
message.error('请选择课程')
return
}
const transformedData = filteredData.map(item => ({
courseName: item.name,
courseId: item.id,
createName: item.createName,
createTime: item.createTime
}));
addCourse(transformedData).then(res=>{
})
falseData()
}
//认证审批项目列表数据
const data = ref([])
const delVisible = ref(false)
//页数
const current1 = ref(1);
//表格行数
const pageSize = ref(15)
//总条数
const total = ref(0)
//封面图
const url = ref('http://localhost:8070/manage/img/50.34e94524.png')
//搜索值
const searchValue = ref('')
//搜索功能
const Administrator= ref(1)
const search = async()=>{
current1.value = 1
loading.value = true
if(uploadAdmin('examine-admin')){
Administrator.value = 0
}
const res = await getexamineList({
pageNo: current1.value,
pageSize: pageSize.value,
name: searchValue.value,
isSuper:Administrator.value
})
loading.value = false
data.value= res.data.records
total.value = res.data.total
}
//重置
const handleRest = ()=>{
current1.value = 1
searchValue.value = null
getlist()
}
//删除认证
const deleteExamine = async(id)=>{
await delExamine({
id
})
message.success('删除成功')
getlist()
}
const onChange = (pageNo,pageSize) => {
current1.value = pageNo
getlist()
};
const ViewReviewShow =ref(null)
const centerDialogVisible = ref(false)
const SkipManagement = (id,description,time,isView)=>{
router.push({
path: '/LecturerManagement',
query: {id,
description:description,
time:time,
isView
},
// name:'LecturerManagement',
// params:{
// description:description,
// time:time
// }
})
}
const toLecture = (id,description,time,isView) =>{
router.push({
path: '/LecturerManagement',
query: {id,
description:description,
time:time,
lecture:true,
isView
}
})
}
//讲师认证列表数据
const InstructorCertificationlist = ref([])
const getlist = async() =>{
loading.value = true
if(uploadAdmin('examine-admin')){
Administrator.value = 0
}
const res = await getexamineList({
pageNo: current1.value,
pageSize: pageSize.value,
name: !searchValue.value?'':searchValue.value,
isSuper:Administrator.value
})
loading.value = false
total.value = res.data.total
data.value= res.data.records
}
const imageList = ref([])
onMounted(()=>{
imageList.value = store.state.examine_cover?.map((e) => ({
code: e.id,
value: e.value,
label: e.name,
}));
getlist()
})
const customRow=(column) =>{
column.forEach((e, index) => {
column[index].className = 'tableClass'
})
}
const handleMsg = {
del: "你确定删除该教师信息吗?",
};
function handleOper(record, type, status = "") {
dialog({
content: "确认删除吗?数据删除后不可恢复",
// ok:deleteExamine(record.id)
ok:()=>{
deleteExamine(record.id)
}
});
}
</script>
<template>
<div class="page">
<!-- 线上学习课程设置 -->
<a-drawer v-model:visible="ViewReviewShow"
class="custom-class"
:closable="false"
placement="right"
width="70%">
<div class="header">
<div class="headerTitle">线上学习课程设置</div>
<img
style="width: 29px; height: 29px; cursor: pointer"
src="../../assets/images/basicinfo/close.png"
@click="falseData"
/>
</div>
<div style="display: flex;flex-direction: column;">
<!-- <div @click="ViewReviewShow=true" style="margin-bottom: 15px; height: 38px; width: 150px;background: #4ea6ff;line-height: 40px;text-align: center;border-radius: 8px;color: #ffffff;">选择/新建课程</div> -->
<CreateOnline ref="onlineRef" :id="''" :type="''">
<a-button type="primary" style="border-radius: 4px;margin-bottom:15px;">{{
"选择/新建课程"
}}
</a-button>
</CreateOnline>
<div>
<a-table
:row-selection="rowSelection"
:pagination="false"
:scroll="{ x: 1000 }"
:columns="ViewReviewcolumns"
:data-source="ViewReviewdata"
>
<template #action="{ record, column }">
<a-space>
<a-button type="link" @click="resizeRe(record,index)">
<span>{{record.status==1?'启用':'禁用'}}</span>
</a-button>
<a-button type="link" @click="deleteReview(record,index)">
<span>删除</span>
</a-button>
</a-space>
</template>
</a-table>
</div>
<div style=" display: flex;justify-content: center;">
<div @click="falseData" style="margin-right: 30px; border-radius: 8px; color: #fff;font-size: 16px; display: flex; justify-content: center;align-items: center; width: 100px; height: 38px; margin-top: 36px;background: #3da8f0;">取消</div>
<div @click="AddList" style="border-radius: 8px; color: #fff;font-size: 16px; display: flex; justify-content: center;align-items: center; width: 100px; height: 38px; margin-top: 36px;background: #3da8f0;">确定</div>
</div>
</div>
</a-drawer>
<div class="filter">
<div class="filterItems">
<div style="display: flex;">
<a-input :max="50" v-model:value="searchValue" style="width: 270px; height: 41px; border-radius: 8px"
placeholder="请输入认证项目名称" />
<div style="display: flex; margin-left: 20px">
<div class="btn btn1" @click="search()">
<div class="search"></div>
<div class="btnText ">搜索</div>
</div>
<div class="btn btn2" style="width: 105px" @click="handleRest">
<div class="search"></div>
<div class="btnText">重置</div>
</div>
</div>
</div>
<div style="display: flex;justify-content: space-between;align-self: end;">
<div v-if="uploadAdmin('examine-admin')" @click="OnlineLearning" style=" cursor: pointer;margin-right: 15px;height: 38px; width: 150px;background: #4ea6ff; line-height: 40px;text-align: center;border-radius: 8px;color: #ffffff;">线上学习课程设置</div>
<div class="btns" @click="centerDialogVisible=true">
<div style="margin-right: 0;" class="btn btn3" @click="createData">
<div class="search"></div>
<div class="btnText">创建认证</div>
</div>
</div>
</div>
</div>
</div>
<!-- 表格 -->
<div class="table">
<a-table :columns="columns"
:customHeaderRow="customRow"
:data-source="data"
:scroll="{ x: 1000 }"
:loading="loading"
class="ant-table"
:row-class-name="(_record, index) => 'table' "
:pagination="false">
<template #headerCell="{ column }">
<template v-if="column.key === 'serial'">
<span>
序号
</span>
</template>
</template>
<template #bodyCell="{ column, record,index }">
<template v-if="column.key === 'serial'">
<span>
{{ index+1 }}
</span>
</template>
<template v-else-if="column.key === 'tags'">
<span>
{{ record.name }}
</span>
</template>
<template v-else-if="column.key === 'action'">
<span style="text-align: center;">
<a style="margin-right: 7px;" v-if="record.isView!=0||uploadAdmin('examine-admin')" @click="editFee(record)">编辑</a>
<a style="margin-right: 7px;" @click='SkipManagement(record.id,record.description,record.name,record.isView)'>管理</a>
<a style="margin-right: 7px;" @click="toLecture(record.id,record.description,record.name,record.isView)">
评审
</a>
<DropDown v-if="uploadAdmin('examine-admin')" value="授权">
<OwnerTableModelStudent
:types="[7, 8, 9]"
:id="record.id"
:type="9"
:searchTrue="true"
>权限名单</OwnerTableModelStudent
>
<CommonStudent :type="7" :permissionType="0" :examineId="record.id" :id="record.id" title="查看权"
>查看权</CommonStudent
>
<CommonStudent :type="8" :permissionType="1" :examineId="record.id" :id="record.id" title="管理权"
>管理权</CommonStudent
>
</DropDown>
<a style="color: #de2139;margin-left: 7px" v-if="record.isView!=0||uploadAdmin('examine-admin')" @click="handleOper(record, 'del')">删除</a>
</span>
</template>
</template>
</a-table>
</div>
<div style="text-align: center; margin-top: 18px;">
<a-pagination :defaultPageSize="pageSize" :showSizeChanger="false" v-model:current="current1" show-quick-jumper :total="total" @change="onChange" />
</div>
<!--创建认证和编辑认证 -->
<a-modal v-model:visible="visible" :title="editId?'编辑认证':'创建认证'" @ok="!editId?handleOk():handleEdit()" width="610px">
<a-form class="form_item">
<a-form-item :rules="[{ required: true, message: 'Please input your password!' }]" label="认证项目名称" style="margin-left: 32px;margin-top: 24px">
<a-input :showCount="true" :maxlength="50" v-model:value="createParam.name" placeholder="认证项目名称" style="border-radius: 8px;width: 410px;height: 36px;" />
</a-form-item>
<a-form-item :rules="[{ required: true, message: 'Please input your password!' }]" label="封面图" style="width: 560px;margin-left: 73px;margin-top: 24px;">
<div class="img_box_item" @click="imgClick(item)" v-for="(item,index) in imageList" :key="index">
<img :style="createParam?.cover==item.value?{border:'3px solid rgba(78, 166, 255, 1)'}:{border:'1px solid #ccc'}" style="width: 127px; height: 70px;" :src="item.value" alt="">
</div>
</a-form-item>
<a-form-item style="margin-left: 71px;margin-top: 24px;" label="具体说明">
<a-textarea
style="width: 410px;height: 130px;overflow: auto;position: relative;resize: none;"
:maxlength="150"
v-model:value="createParam.description"
/>
<span style="position:absolute;right:71px;bottom:0px;color: #c7cbd2;">{{ createParam.description.length }}/150</span>
</a-form-item>
</a-form>
</a-modal>
</div>
</template>
<style lang="scss" scoped>
::v-deep .ant-pagination{
margin-bottom: 18px;
}
.btn3 {
margin-right: 0;
.search {
width: 17px;
height: 18px;
background-image: url("@/assets/images/courseManage/add0.png");
}
}
.btn3:active {
background: #0982ff;
}
.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:active {
background: #0982ff;
}
.btn2:active {
background: rgba(64, 158, 255, 0.2);
}
.btn {
padding: 0 26px 0 26px;
height: 38px;
background: #4ea6ff;
border-radius: 8px;
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;
}
}
.form_item{
::v-deep .ant-form-item-control-input-content {
display: flex;
flex-wrap: wrap;
}
.img_box_item{
cursor: pointer;
margin-right: 15px;
margin-bottom: 13px;
}
}
.page {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
}
.filter {
margin-left: 40px;
margin-right: 40px;
margin-top: 28px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.filterItems{
width: 100%;
height: 41px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
}
.table {
margin-left: 40px;
margin-right: 40px;
margin-top: 28px;
display: flex;
flex-direction: column;
}
:deep(.ant-table-tbody > tr > td ){
background-color: #f9f9f9;
}
.custom-dialog-title {
text-align: left; /* 让标题文本居左 */
/* 其他你需要的样式 */
}
.imgs {
width: 560px;
margin-left: 44.5px;
}
.explain {
width: 560px;
margin-left: 44.5px;
}
:deep(.imgs .el-form-item__label){
margin-top: 29px;
}
:deep(.demo-pagination-block) {
width: 100%;
}
:deep(.ant-table-tbody > tr > td){
text-align: center;
} .header {
margin-top: -20px;
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
// background-color: red;
margin-bottom: 20px;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
// margin-left: 24px;
}
}
:deep(.ant-table-tbody > tr > td:nth-last-child(4)) {
text-align: left;
}
</style>