Files
fe-manage/src/components/drawers/AddOnline.vue
2022-12-12 18:16:12 +08:00

881 lines
25 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: 280px;
height: 40px;
border-radius: 8px;
padding-right: 49px;
"
placeholder="请输入课程名称"
maxlength="20"
/>
<div class="inp_num" style="position: absolute; right: 7px">
<span style="color: #c7cbd2">
</span>
</div>
</div>
</div>
<!-- 2022-12-10注释 后面放开 李晓鸽 -->
<!-- <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: #4ea6ff">{{ 1 }}</span>
<span v-else style="color: #4ea6ff">{{
selectedRowKeys.length
}}</span>
</span
>
<span style="color: rgba(0, 0, 0, 0.65)"
>列表选项总计<span>{{ tableDataTotal }}</span> </span
>
</div>
<div class="mntc_right" @click="clearLine" v-if="!edit">
<span style="color: #387df7; margin-right: 24px"></span>
</div>
</div>
-->
<div class="main_table">
<!-- 编辑的表格 -->
<div>
<div>
<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="tableBox">
<div class="pa">
<a-pagination
v-if="tableDataTotal > 10"
:showSizeChanger="false"
showQuickJumper="true"
hideOnSinglePage="true"
:pageSize="pageSize"
:current="currentPage"
:total="tableDataTotal"
class="pagination"
@change="handelChangePage"
/>
</div>
</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,
type: 'radio',
}"
:columns="tableDataFunc()"
:data-source="tableData"
:loading="tableDataTotal === -1 ? true : false"
:pagination="false"
/>
<div class="pa">
<a-pagination
v-if="tableDataTotal > 10"
showSizeChanger="false"
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,
IsExistenceProjectTemplate,
} 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,
},
projectTemplateId: {
type: Number,
default: null,
},
},
setup(props, ctx) {
const state = reactive({
inputV1: null,
options1: [
{
value: "微课",
label: "微课",
},
{
value: "录播课",
label: "录播课",
},
],
time: undefined,
onlineClassesId: null,
onlineName: "",
selectV: null,
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 = null;
state.selectV = null;
state.selectedRowKeys = [];
state.addOnlineList = [];
state.currentPage = 1;
localStorage.setItem("stageId", props.chooseStageId);
localStorage.setItem("chapterId", props.isactive);
};
const afterVisibleChange = (bol) => {
if (bol == true) {
getAllOnlineText();
getOnlineById();
}
};
//TODO 根据id 获取在线课信息
const getOnlineById=()=>{
}
const tableDataFunc = () => {
const columns = [
// {
// title: "课程编号",
// dataIndex: "num",
// key: "num",
// width: "80px",
// align: "center",
// },
{
title: "名称",
dataIndex: "name",
key: "name",
width: "40%",
ellipsis: true,
},
{
title: "课程分类",
dataIndex: "contenttype",
key: "contenttype",
width: "15%",
align: "center",
},
{
title: "授课教师",
dataIndex: "teacher",
key: "teacher",
width: "15%",
align: "center",
},
{
title: "创建人",
dataIndex: "sysCreateBy",
key: "sysCreateBy",
width: "15%x",
align: "center",
},
// {
// title: "创建时间",
// dataIndex: "createTime",
// key: "createTime",
// width: "15%",
// align: "center",
// },
{
title: "发布时间",
dataIndex: "publishTime",
key: "publishTime",
width: "15%",
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;
state.selectedRowKeys = [];
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,
createTime: value.sysCreateTime,
publishTime: value.publishTime,
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);
for (let i = 0; i < res.data.data.list.length; i++) {
if (
Number(res.data.data.list[i].onlineClassesId) ==
props.EditOnlineId
) {
state.selectedRowKeys = [i + 1];
}
}
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) {
if(!props.isactive){
message.destroy();
return message.warning("请先选中关卡");
}
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.warning("在线课" + 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.warning("在线课" + 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) {
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);
IsExistenceProjectTemplate({
courseTaskId: p_data_id,
projectTemplateId:props.projectTemplateId,
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.warning("在线课" + tipStr + "重复添加");
return;
}else{
state.addOnlineList.map((value) => {
console.log( props, props.projectTemplateId,props.projectTaskId)
addTempTask({
courseId: value.num,
name: value.name,
projectTemplateId: localStorage.getItem("projectTemplateId"),
projectTaskId: props.projectTaskId || 0,
stageId: props.chooseStageId || 0,
type: 1,
})
.then((res) => {
console.log('新增或者编辑在线课',res)
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 = null;
state.selectV = null;
state.selectedRowKeys = [];
state.addOnlineList = [];
state.currentPage = 1;
getAllOnlineText();
};
onMounted(() => {
});
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;
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: #4ea6ff;
}
}
.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: 3px;
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;
padding-left: 5px !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>