Files
fe-manage/src/components/drawers/AddOnline.vue

812 lines
23 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>
<a-drawer
:visible="addonlineVisible"
class="drawerStyle addonlineDrawer"
width="80%"
title="添加在线"
placement="right"
@after-visible-change="afterVisibleChange"
>
<div class="drawerMain">
<div class="header">
<div v-if="edit" class="headerTitle">编辑在线</div>
<div v-else class="headerTitle">添加在线</div>
<img
style="width: 29px; height: 29px; cursor: pointer"
src="../../assets/images/basicinfo/close.png"
@click="closeDrawer"
/>
</div>
<div class="contentMain">
<div class="main_items">
<div class="mi_ipts">
<div class="mii_ipt">
<div class="ipt_name">课程编号</div>
<div class="fi_input">
<a-input
v-model:value="inputV1"
style="width: 240px; height: 40px; border-radius: 8px"
placeholder="请输入项目名称"
maxlength="20"
/>
</div>
</div>
<div class="mii_ipt">
<div class="ipt_name">内容分类</div>
<div class="select">
<a-select
v-model:value="selectV"
dropdownClassName="dropdown-style"
style="width: 240px"
placeholder="请选择"
:options="options1"
allowClear
showSearch
/>
</div>
</div>
</div>
<div class="mi_btns">
<div class="btn btn1" @click="searchList()">
<div class="search"></div>
<div class="btnText">搜索</div>
</div>
<div class="btn btn2" @click="resetOnline()">
<div class="search"></div>
<div class="btnText">重置</div>
</div>
</div>
</div>
<div class="main_notice">
<div class="mntc_left">
<div class="notice_icon"></div>
<span style="color: rgba(0, 0, 0, 0.65); margin-right: 17px"
>已选择
<span v-if="edit" style="color: #388be1">{{ 1 }}</span>
<span v-else style="color: #388be1">{{ selectedRowKeys.length }}</span>
</span
>
<span style="color: rgba(0, 0, 0, 0.65)"
>列表选项总计<span>{{ tableDataTotal }}</span> </span
>
</div>
<div class="mntc_right" @click="clearLine">
<span style="color: #387df7; margin-right: 24px">清空</span>
</div>
</div>
<div class="main_table">
<!-- 编辑的表格 -->
<div v-if="edit">
<div v-if="choicecourse" class="main_btns" style="justify-content:flex-start;">
<div class="btn2" style="display:flex;justify-content:center;align-items:center;" @click="ChoiceCourse">选择在线课</div>
</div>
<div v-else>
<a-table
class="ant-table-striped"
:row-class-name="
(_record, index) => (index % 2 === 1 ? 'table-striped' : null)
"
:row-selection="{
type:'radio',
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
:columns="tableDataFunc()"
:data-source="tableData"
:loading="tableDataTotal === -1 ? true : false"
:pagination="false"
/>
<div class="pa">
<a-pagination
v-if="tableDataTotal > 10"
showSizeChanger="true"
showQuickJumper="true"
hideOnSinglePage="true"
:pageSize="pageSize"
:current="currentPage"
:total="tableDataTotal"
class="pagination"
@change="handelChangePage"
/>
</div>
</div>
</div>
<div v-else>
<a-table
class="ant-table-striped"
:row-class-name="
(_record, index) => (index % 2 === 1 ? 'table-striped' : null)
"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
:columns="tableDataFunc()"
:data-source="tableData"
:loading="tableDataTotal === -1 ? true : false"
:pagination="false"
/>
<div class="pa">
<a-pagination
v-if="tableDataTotal > 10"
showSizeChanger="true"
showQuickJumper="true"
hideOnSinglePage="true"
:pageSize="pageSize"
:current="currentPage"
:total="tableDataTotal"
class="pagination"
@change="handelChangePage"
/>
</div>
</div>
</div>
</div>
<div class="main_btns">
<button class="btn1" @click="closeDrawer">取消</button>
<button class="btn2" @click="updateTask">确定</button>
</div>
</div>
</a-drawer>
</template>
<script>
import { onMounted, reactive, toRefs } from "vue";
import * as api from "../../api/indexOnline.js";
import * as apiTask from "../../api/indexTaskadd";
// import { setCookie } from "../../api/method"
import { message } from "ant-design-vue";
import { RouterEditTask, IsExistence, IsExistenceProject } from "@/api/indexTask";
import { addTempTask } from "../../api/indexTaskadd";
export default {
name: "AddOnline",
props: {
addonlineVisible: {
type: Boolean,
default: false,
},
EditOnlineId: {
type: Number,
default: null,
},
edit: {
// 是否为编辑
type: Boolean,
default: null,
},
projectId: {
type: Number,
default: null,
},
chooseStageId: {
type: Number,
default: null,
},
routerTaskId: {
type: Number,
default: 0,
},
isLevel: {
// 是否是关卡页面触发
type: Number,
default: null,
},
projectTaskId: {
// 要编辑的projectId
type: Number,
default: null,
},
routerId: {
type: Number,
default: null,
},
isactive: {
type: Number,
default: null,
},
},
setup(props, ctx) {
const state = reactive({
inputV1: "",
options1: [
{
value: "微课",
label: "微课",
},
{
value: "录播课",
label: "录播课"
}
],
time: undefined,
onlineClassesId: null,
onlineName: "",
selectV: "",
selectedRowKeys: [],
tableData: [],
addOnlineList:[],
currentPage: 1,
tableDataTotal: 0,
pageSize: 10,
choicecourse: true
});
const ChoiceCourse = () => {
state.choicecourse = false
}
const closeDrawer = () => {
state.choicecourse = true
ctx.emit("update:addonlineVisible", false);
ctx.emit("update:edit", false);
state.inputV1 = "";
state.selectedRowKeys = [];
state.addOnlineList = [];
state.currentPage = 1;
localStorage.setItem("stageId", props.chooseStageId);
localStorage.setItem("chapterId", props.isactive);
};
const afterVisibleChange = (bol) => {
if(bol == true){
getAllOnlineText();
}
};
const tableDataFunc = () => {
const columns = [
{
title: "课程编号",
dataIndex: "num",
key: "num",
width: "80px",
align: "left",
},
{
title: "名称",
dataIndex: "name",
key: "name",
width: "100px",
align: "center",
},
{
title: "内容分类",
dataIndex: "contenttype",
key: "contenttype",
width: "80px",
align: "center",
},
{
title: "授课教师",
dataIndex: "teacher",
key: "teacher",
width: "100px",
align: "center",
},
{
title: "创建人",
dataIndex: "sysCreateBy",
key: "sysCreateBy",
width: "80px",
align: "center",
},
{
title: "完成时间",
dataIndex: "overtime",
key: "time",
width: "150px",
align: "center",
},
];
return columns;
};
const onSelectChange = (selectedRowKeys,selectedRows) => {
state.selectedRowKeys = selectedRowKeys;
state.addOnlineList = selectedRows;
console.log(selectedRowKeys,selectedRows)
if( props.edit && selectedRows.length > 0 ){
selectedRows.map((value)=>{
console.log(props,value)
if(value.courseId == props.EditOnlineId){
message.destroy()
message.error('选项相同,请重新选择')
state.selectedRowKeys = []
state.addOnlineList = []
}
})
}
};
//清空所选
const clearLine = () => {
state.selectedRowKeys = [];
state.addOnlineList = [];
};
const handelChangePage = (page) => {
state.currentPage = page;
getAllOnlineText();
};
const getTableDate = (tableData) => {
let data = tableData;
let array = [];
data.map((value,index) => {
{
let obj = {
key: index + 1,
num:value.onlineClassesId,
name:value.name,
contenttype:value.contentType == 10 ? "微课" : "录播课",
teacher:value.teacher,
sysCreateBy:value.sysCreateBy,
overtime:"",
courseId: Number(value.onlineClassesId),
};
array.push(obj);
}
});
state.tableData = array;
};
//获取全部在线信息接口
const getAllOnlineText = () => {
api
.queryOnlinelList({
"createUser": "",
"keyword": state.inputV1,
"orderAsc": true,
"orderField": "",
"pageIndex": state.currentPage,
"pageSize": state.pageSize,
"publish": true,
"status": 0,
"sysType1": "",
"sysType2": "",
"sysType3": "",
})
.then((res) => {
let arr = res.data.data.list;
state.tableDataTotal = res.data.data.count
if (res.status === 200) {
console.log('获取在线课列表数据', res)
getTableDate(arr);
}
})
.catch((err) => {
console.log(err,'请求失败在线');});
};
// 校验当前在线课是否已经添加进来了
const isExistence = (id) => {
console.log({
"chapterId": Number(props.isactive),
"courseTaskId": Number(id),
"routerId": props.routerId,
"type": 1
})
IsExistence({
"chapterId": Number(props.isactive),
"courseTaskId": Number(id),
"routerId": props.routerId,
"type": 1
}).then(res=>{
console.log('我是不是已经添加了',res)
}).catch(err=>{
console.log(err)
})
}
// 判断项目中是否添加当前在线课
const IsExistenceProjects = (id) => {
console.log('参数传递',{
"courseTaskId": id,
"projectId": props.projectId,
"stageId": props.chooseStageId || 0,
"type": 1
})
IsExistenceProject({
"courseTaskId": id,
"projectId": Number(props.projectId),
"stageId": props.chooseStageId || 0,
"type": 1
}).then(res=>{
console.log('项目中是否包含此在线课了',res)
}).catch(err=>{
console.log(err)
})
}
const updateTask = () => {
if(props.isLevel == 1){
// isExistence(23)
// return
// let routerarr = []
// console.log('我是要便利的数据1', state.addOnlineList)
// state.addOnlineList.map((value) => {
// routerarr.push(isExistence(value.courseId))
// })
// console.log('当前是否已经添加了',routerarr)
}
if(props.isLevel == 3){
console.log('我是要便利的数据3', state.addOnlineList)
}
if (props.isLevel == 1) {
console.log('我是要便利的数据2', state.addOnlineList)
let l_data = state.addOnlineList;
let l_data_id = []
l_data.map((item)=>{
l_data_id.push(item["courseId"])
})
console.log('需要查询的在线课ID',l_data_id)
IsExistence({
"chapterId": Number(props.isactive),
"courseTaskId": l_data_id,
"routerId": props.routerId,
"type": 1
}).then(res=>{
console.log('路径图中是否包含此在线课了',res)
if(res.data.data.length){
let strdata = res.data.data
let tipStr = ''
for(let i=0;i<strdata.length;i++){
if(i==strdata.length-1){
tipStr+=strdata[i].courseName
}else{
tipStr+=strdata[i].courseName + '/'
}
}
message.destroy()
message.info('在线课('+tipStr+')重复添加')
return
}else{
state.addOnlineList.map((value) => {
console.log(value)
RouterEditTask({
chapterId: Number(props.isactive),
courseId: value.num,
name: value.name,
routerId: props.routerId,
routerTaskId: props.routerTaskId || 0,
type: 1,
})
.then(() => {
message.destroy();
message.success(`${props.edit ? "编辑" : "新增"}关卡任务成功`);
ctx.emit("changeData", false);
closeDrawer();
state.addLoading = false;
})
.catch(() => {
message.destroy();
message.error(`${props.edit ? "编辑" : "新增"}关卡任务失败`);
});
})
}
}).catch(err=>{
console.log(err)
})
} else if (props.isLevel === 2) {
console.log('我是要便利的数据2', state.addOnlineList)
let p_data = state.addOnlineList;
let p_data_id = []
p_data.map((item)=>{
p_data_id.push(item["courseId"])
})
console.log('需要查询的在线课ID',p_data_id)
IsExistenceProject({
"courseTaskId": p_data_id,
"projectId": Number(props.projectId),
"stageId": props.chooseStageId || 0,
"type": 1
}).then(res=>{
console.log('项目中是否包含此在线课了',res)
if(res.data.data.length){
let strdata = res.data.data
let tipStr = ''
for(let i=0;i<strdata.length;i++){
if(i==strdata.length-1){
tipStr+=strdata[i].courseName
}else{
tipStr+=strdata[i].courseName + '/'
}
}
message.destroy()
message.info('在线课('+tipStr+')重复添加')
return
}else{
state.addOnlineList.map((value) => {
apiTask
.addTask({
courseId: value.num,
name: value.name,
projectId: props.projectId,
projectTaskId: props.projectTaskId || 0,
stageId: props.chooseStageId || 0,
type: 1,
})
.then(() => {
message.destroy();
message.success(`${props.edit ? "编辑" : "新增"}阶段任务成功`);
ctx.emit("changeData", false);
closeDrawer();
})
.catch(() => {
message.destroy();
message.error(`${props.edit ? "编辑" : "新增"}阶段任务失败`);
});
})
}
}).catch(err=>{
console.log(err)
})
} else if (props.isLevel == 3) {
addTempTask({
courseId: state.onlineClassesId,
name: state.onlineName,
projectTemplateId: props.projectTemplateId,
projectTaskId: props.projectTaskId || 0,
stageId: props.chooseStageId || 0,
type: 1,
})
.then(() => {
message.destroy();
message.success(`${props.edit ? "编辑" : "新增"}模板库任务成功`);
ctx.emit("changeData", false);
closeDrawer();
})
.catch(() => {
message.destroy();
message.error(`${props.edit ? "编辑" : "新增"}模板库任务失败`);
});
}
//if(state.addOnlineList.Target==undefined){
// closeDrawer();
//}
};
//搜索在线列表
const searchList = ()=> {
if(state.inputV1 !== '' || state.selectV !== ''){
getAllOnlineText()
}else {
resetOnline()
}
}
//重置在线信息
const resetOnline = () => {
state.inputV1 = "";
state.selectV = "";
state.selectedRowKeys = [];
state.addOnlineList = [];
state.currentPage = 1;
getAllOnlineText();
};
onMounted(()=>{
// let cookie =
// "eyJ0eXBlIjoidG9rZW4iLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC91LmJvZS5jb20iLCJpYXQiOjE2Njk0MjgwNTAsImV4cCI6MTY2OTQzNTI1MCwiR2l2ZW5OYW1lIjoiYm9ldSIsInVzZXJJZCI6IjZCMDQ5RkFGLUMzMTQtN0NDRi0wRDI4LTBEMjNGNEM0MjUzMSIsInVJZCI6Ijk2NTM0MjAyNzQ5NzYwNzE2OCIsInBlcm1pc3Npb24iOiIifQ==.9ea5ce6d4cd43c2c17f21a293e4dc0d362c2a404b9d50fae5c49fed5a238fb1a";
// setCookie("token", cookie, 10);
})
return {
...toRefs(state),
afterVisibleChange,
closeDrawer,
tableDataFunc,
onSelectChange,
clearLine,
handelChangePage,
getAllOnlineText,
getTableDate,
updateTask,
searchList,
resetOnline,
isExistence,
IsExistenceProjects,
ChoiceCourse
};
},
};
</script>
<style lang="scss">
.ant-table-striped :deep(.table-striped) td {
background-color: #fafafa !important;
}
.addonlineDrawer {
.drawerMain {
.header {
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
margin-left: 24px;
}
}
.contentMain {
padding-right: 12px;
.main_items {
display: flex;
justify-content: space-between;
margin-top: 32px;
margin-bottom: 12px;
flex-wrap: wrap;
.mi_ipts {
display: flex;
margin-bottom: 20px;
.mii_ipt {
display: flex;
align-items: center;
margin-right: 24px;
.ipt_name {
white-space: nowrap;
}
}
}
.mi_btns {
display: flex;
margin-left: 38px;
margin-bottom: 20px;
cursor: pointer;
.btn {
padding: 0px 26px 0px 26px;
height: 38px;
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
margin-left: 14px;
flex-shrink: 0;
.search {
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
line-height: 36px;
margin-left: 5px;
}
}
.btn1 {
background: rgb(64, 158, 255);
.search {
width: 15px;
height: 17px;
background-image: url("@/assets/images/coursewareManage/search0.png");
}
.btnText {
color: rgb(255, 255, 255);
}
}
.btn2 {
background: rgb(255, 255, 255);
.search {
width: 15px;
height: 17px;
background-image: url("@/assets/images/coursewareManage/reset1.png");
}
.btnText {
color: rgb(64, 158, 255);
}
}
.btn1:hover {
background: rgb(255, 255, 255);
.search {
background-image: url("@/assets/images/courseManage/search1.png");
}
.btnText {
color: #388be1;
}
}
.btn2:hover {
background: rgba(64, 158, 255, 1);
.search {
background-image: url("@/assets/images/courseManage/reset0.png");
}
.btnText {
color: #ffffff;
}
}
}
}
.main_notice {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32px;
height: 40px;
background-color: #e9f6fe;
.mntc_left {
display: flex;
align-items: center;
.notice_icon {
width: 14px;
height: 14px;
margin-right: 9px;
margin-left: 9px;
background-image: url(@/assets/images/coursewareManage/gan.png);
background-size: 100% 100%;
}
}
.mntc_right {
cursor: pointer;
}
}
.main_table {
position: relative;
padding-bottom: 80px;
.ant-checkbox-wrapper {
align-items: center;
margin-top: -2px;
}
.ant-table-selection-column {
padding: 0px !important;
}
.ant-table-thead > tr > th {
background-color: rgba(239, 244, 252, 1);
}
th.h {
background-color: #eff4fc !important;
}
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
> td {
background: #f6f9fd;
}
.pa {
left: 0;
width: 100%;
display: flex;
justify-content: center;
position: absolute;
bottom: 20px;
}
}
}
.main_btns {
height: 72px;
width: 100%;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
.btn1 {
width: 100px;
height: 40px;
border: 1px solid #4ea6ff;
border-radius: 8px;
color: #4ea6ff;
background-color: #fff;
cursor: pointer;
}
.btn2 {
cursor: pointer;
width: 100px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-left: 15px;
color: #fff;
}
}
}
}
</style>