Skip to content

O
online-edu-admin
Commit 97a90acd authored by Liu Peng's avatar Liu Peng
Browse files
Options

完成课程修改

parent dac432f4
Hide whitespace changes
Inline Side-by-side
Showing with 241 additions and 237 deletions
src/api/biz/course.js
View file @ 97a90acd
......@@ -32,6 +32,14 @@ export const fetchAliyunAuth = () => {
return request("get", "/api/aliyun/mgr/videoConfig", {});
};
export const deleteChaper = (chaperId) => {
return request("get", `/api/mgr/course/delChaper/${chaperId}`, {});
};
export const updateChaperTitle = (data) => {
return request("post", `/api/mgr/course/modifyChaperName`, data);
};
export const fetchAliyunPolicy = (data) => {
return request(
"get",
......@@ -55,4 +63,3 @@ export const fetchVideoInfo = (videoId) => {
export const saveCourse = (obj) => {
return request("post", "/api/mgr/course/save", obj);
};
src/views/biz/course/detail.vue
View file @ 97a90acd
......@@ -78,15 +78,35 @@
justify="start"
align="middle"
>
<a-col :span="6">
<img
:src="video.coverURL"
width="100%"
/>
<a-col
:span="6"
class="video-image"
>
<div class="video-image-background">
<img
:src="video.coverUrl"
width="100%"
/>
<div class="video-image-toolbar">
<a-icon
type="delete"
@click="deleteVideo(video)"
/>
<a-icon
type="edit"
@click="editVideo(video)"
/>
</div>
<div class="video-image-cover"></div>
<div class="video-image-play">
<a-icon type="play-circle" />
</div>
<div class="video-image-time">{{formatDuraton(video.duration)}}</div>
</div>
</a-col>
<a-col :span="12">
<div class="video-desc">第{{index+1}}级</div>
<div class="video-desc">{{video.chaperName}}</div>
<div class="video-desc">{{video.name}}</div>
</a-col>
</a-row>
</div>
......@@ -217,16 +237,17 @@
<a-select
mode="multiple"
label-in-value
placeholder="选择课程标签"
v-model="step1FormModel.tags"
v-model="selectedTags"
@change="handleTagChange"
>
<a-select-option
v-for="(t) in this.tags"
:key="t.id"
:value="t.id"
:key="t.tagId"
:value="t.tagId"
>
{{ t.name }}
{{ t.tagName }}
</a-select-option>
</a-select>
</a-form-model-item>
......@@ -254,8 +275,8 @@
>
<a-select
mode="multiple"
placeholder="选择企业"
v-model="step1FormModel.allowOrgIds"
placeholder="选择企业"
v-model="step1FormModel.allowOrgIds"
@change="handleEnterpriseChange"
>
<a-select-option
......@@ -307,7 +328,6 @@
name="file"
:multiple="false"
:show-upload-list="true"
:loading="loading"
:customRequest="uploadVideo"
:before-upload="beforeVideoUpload"
>
......@@ -319,6 +339,26 @@
</a-modal>
</template>
<template>
<a-modal
:visible="showVideoEditor"
title="修改视频名称"
@ok="updateVideoTitle"
@cancel="closeVideoEditor"
:destroyOnClose="true"
>
<a-form>
<a-form-item>
<a-input
v-model="video2update.name"
placeholder="输入视频标题"
allowClear
></a-input>
</a-form-item>
</a-form>
</a-modal>
</template>
</div>
</template>
<script>
......@@ -336,56 +376,16 @@ import {
saveCourse,
fetchSeriesList,
saveSeriesInfo,
deleteChaper,
updateChaperTitle,
} from "@/api/biz/course";
import { fetchList as fetchTagList } from "@/api/biz/courseTag";
import { fetchList as fetchEnterprise } from "@/api/biz/enterprise";
//系列待选列表表格列定义
let seriesColumns = [
{
title: "系列名称",
dataIndex: "name",
align: "center",
},
];
//讲师待选列表表格列定义
let teacherColumns = [
{
title: "讲师名称",
dataIndex: "name",
align: "center",
},
{
title: "培训机构",
dataIndex: "orgName",
align: "center",
},
];
//章节表格列定义
let chaperColumns = [
{
title: "章节名称",
dataIndex: "name",
align: "center",
},
{
title: "视频",
dataIndex: "videoUrl",
align: "center",
},
{
title: "操作",
key: "action",
scopedSlots: { customRender: "videoTblAction" },
align: "center",
},
];
export default {
// 创建完毕
created() {
// console.log(this.$route.query.id)
//路由传过来的课程ID，新建是为空
let courseId = this.$route.query.id;
if (courseId) {
......@@ -412,7 +412,14 @@ export default {
pageIndex: 1,
pageSize: 1000,
}).then((res) => {
this.tags = res.data;
const _tags = [];
res.data.forEach((d) => {
_tags.push({
tagId: d.id,
tagName: d.name,
});
});
this.tags = _tags;
});
teacherFetchList({
......@@ -513,12 +520,15 @@ export default {
}
};
return {
enterpriese: [],
video2update: {},
enterprise: [],
currentSeries: {},
tags: [],
selectedTags: [],
videoSeries: [],
videoTitle: "",
video: { id: "", img: "", file: "", fileName: "", title: "" },
showVideoEditor: false,
teachers: [],
seriesData: [],
onUploadProgress: undefined,
......@@ -530,23 +540,6 @@ export default {
statusText: "",
aliyunRegion: "",
aliyunUserId: "",
//当前第几步
currentStep: 0,
//步骤列表
steps: [
{
title: "第一步",
content: "添加课程基本信息",
},
{
title: "第二步",
content: "添加课件和标签",
},
{
title: "完成",
content: "完成添加课程",
},
],
//第一步保存时验证规则定义
step1FormRules: {
name: [{ required: true, message: "不能为空", trigger: "blur" }],
......@@ -580,51 +573,88 @@ export default {
loading: false,
//选择系列弹出窗口的显示控制
seriesModalVisible: false,
//系列待选表格列定义
seriesColumns: seriesColumns,
//系列待选表格数据对象
seriesData: [],
//系列待选表格加载进度条
seriesLoading: false,
//系列待选表格分页控制对象
seriesPagination: {},
//系列待选表格选中项的ID
seriesSelectedRowKeys: [],
//选择讲师弹出窗口显示控制
teacherModalVisible: false,
//视频上传窗口
videoUploadModalVisible: false,
//讲师待选表格列定义
teacherColumns: teacherColumns,
//讲师待选表格数据对象
teacherData: [],
//讲师待选表格加载进度条
teacherLoading: false,
//讲师待选表格分页控制对象
teacherPagination: {
showSizeChanger: true,
},
//选择讲师的ID
teacherSelectedRowKeys: [],
//讲师待选表格查询参数对象
teacherSearchPage: {
name: "",
pageIndex: 1,
pageSize: 10,
},
//记录第一步操作表单修改次数，用于判断是否要提交后台保存，> 1时说明表单修改过需要保存
step1ModifyCount: 0,
//第二步添加章节点弹出窗口显示控制
videoModalVisible: false,
//第二步章节列表列定义
chaperColumns: chaperColumns,
//第二步章节表格数据对象
chaperData: [],
//第二步章节表格加载进度条
chaperTblLoading: false,
};
},
methods: {
editVideo(video) {
this.video2update = video;
this.showVideoEditor = true;
},
updateVideoTitle() {
const data = {
chaperId: this.video2update.id,
chaperName: this.video2update.name,
};
updateChaperTitle(data).then((resp) => {
if (resp.resp_code === 200) {
this.$message.success("视频名称修改成功");
} else {
this.$message.error(`视频名称修改失败:${resp.resp_msg}`);
}
});
this.showVideoEditor = false;
},
closeVideoEditor() {
this.showVideoEditor = false;
},
deleteVideo(video) {
let self = this;
this.$confirm({
title: `确认要删除${video.name ? video.name : ""}吗?`,
content: "删除操作同时会删除已经上传的视频文件",
onOk() {
deleteChaper(video.id).then((resp) => {
if (resp.resp_code === 200) {
self.videoSeries.forEach((item, index) => {
console.log(item, video);
if (item.id === video.id) {
self.videoSeries.splice(index, 1);
}
});
}
});
},
onCancel() {},
});
},
formatDuraton(t) {
let time = Math.round(t);
if (time > -1) {
var hour = Math.floor(time / 3600);
var min = Math.floor(time / 60) % 60;
var sec = time % 60;
if (hour > 0) {
if (hour < 10) {
time = "0" + hour + ":";
} else {
time = hour + ":";
}
} else {
time = "";
}
if (min > 0) {
if (min < 10) {
time += "0";
}
time += min + ":";
} else {
time = "";
}
if (sec < 10) {
time += "0";
}
time += sec;
}
return time;
},
handleEnterpriseChange(value) {
this.step1FormModel.allowOrgIds = value;
},
......@@ -646,7 +676,6 @@ export default {
if (res.count === 0) {
callback([{ name: value, id: -1 }]);
} else {
console.log(res.data);
const item = res.data.find((d) => d.name.trim() === value);
if (!item) {
//未找到完全匹配的
......@@ -669,7 +698,7 @@ export default {
}
},
handleTagChange(values) {
console.log(values);
this.selectedTags = values;
},
handleTeacherChange(value) {
this.teachers.forEach((org) => {
......@@ -700,12 +729,9 @@ export default {
const chaperList = [];
this.videoSeries.forEach((chapter, index) => {
chaperList.push({
chaperName: chapter.chaperName,
videoId: chapter.videoId,
sortNo: index,
});
chaperList.push(chapter);
});
const course = {
allow,
allowOrgIds,
......@@ -730,6 +756,16 @@ export default {
: this.currentSeries.label;
}
const courseId = this.$route.query.id;
if (courseId) {
course.id = parseInt(courseId, 10);
}
const _tags = [];
this.selectedTags.forEach((t) => {
_tags.push(t.key);
});
course.tagIds = _tags;
saveCourse(course).then((res) => {
if (res.resp_code === 200) {
this.$message.success("课程保存成功");
......@@ -744,29 +780,29 @@ export default {
.then((res) => {
if (res.resp_code == 200) {
this.step1FormModel = { ...res.datas };
const _ctags = [];
this.step1FormModel.tagList.forEach((t) => {
_ctags.push(t.tagId);
});
this.step1FormModel.tags = _ctags;
const _enterprise = [];
this.step1FormModel.allowOrgList.forEach((t) => {
_enterprise.push(t.orgId);
});
this.step1FormModel.allowOrgIds = _enterprise;
if (this.step1FormModel.allowOrgList) {
const _enterprise = [];
this.step1FormModel.allowOrgList.forEach((t) => {
_enterprise.push(t.orgId);
});
this.step1FormModel.allowOrgIds = _enterprise;
}
if (this.step1FormModel.tagList) {
this.step1FormModel.tagList.forEach((t) => {
this.selectedTags.push({ key: t.tagId, label: t.tagName });
});
}
this.currentSeries = {
key: this.step1FormModel.seriesId,
label: this.step1FormModel.seriesName,
};
const _videoSeries = [];
res.datas.chaperList.forEach((cc) => {
_videoSeries.push({
chaperName: cc.name,
videoId: cc.id,
coverURL: cc.snapshotUrl,
});
_videoSeries.push({ ...cc });
});
this.videoSeries = _videoSeries;
} else {
......@@ -777,55 +813,9 @@ export default {
disposereq(this, err);
});
},
//跳转下一步
nextStep() {
if (this.currentStep == 0) {
this.saveStep1();
}
},
//保存第一步表单数据
saveStep1() {
// console.log(this.step1FormModel)
if (this.step1ModifyCount <= 1) {
//未修改，无需保存
this.currentStep++;
return;
}
this.$refs.step1FormModelRef.validate((valid) => {
if (valid) {
if (!this.step1FormModel.logoUrl) {
this.$message.info("请上传封面");
return false;
}
//请求后台保存
let saveObj = { ...this.step1FormModel };
saveStep1(saveObj)
.then((res) => {
if (res.resp_code == 200) {
let courseId = res.datas;
this.step1FormModel.id = courseId;
this.currentStep++;
} else {
this.$message.info(res.resp_msg);
}
})
.catch((err) => {
disposereq(this, err);
});
}
});
},
//上一步
prevStep() {
this.currentStep--;
},
//最后一步完成操作
completeStep() {
this.$message.info("完成");
},
//上传封面时上传中的回调
handleChange(info) {
// console.log(info.file.status)
if (info.file.status === "uploading") {
this.loading = true;
return;
......@@ -921,6 +911,7 @@ export default {
},
// 开始上传
onUploadstarted: function(uploadInfo) {
self.uploadVideoStatus = "uploading";
if (!uploadInfo.videoId) {
fetchAliyunPolicy({
fileName: self.video.fileName,
......@@ -943,7 +934,6 @@ export default {
return;
}
});
self.$message.info("文件开始上传");
} else {
refreshAliyunPolicy(uploadInfo.videoId).then((res) => {
if (res.resp_code == 200) {
......@@ -968,6 +958,7 @@ export default {
// 文件上传成功
onUploadSucceed: function(uploadInfo) {
self.$message.success("文件上传成功");
self.uploadVideoStatus = "success";
},
// 文件上传失败
onUploadFailed: function(uploadInfo, code, message) {
......@@ -1046,9 +1037,9 @@ export default {
if (res.resp_code == 200) {
const { coverURL, duration } = res.datas;
this.videoSeries.push({
chaperName: title,
name: title,
videoId: id,
coverURL,
coverUrl: coverURL,
duration,
});
this.video = {};
......@@ -1057,51 +1048,6 @@ export default {
});
}
},
//讲师待选窗口确认操作
teacherSelected() {
if (this.teacherSelectedRowKeys.length == 0) {
this.$message.info("请选择讲师");
return false;
}
this.step1FormModel.teacherId = this.teacherSelectedRowKeys[0];
let teacherObj = this.teacherData.filter(
(e) => e.id == this.teacherSelectedRowKeys[0]
)[0];
// console.log(teacherObj)
this.step1FormModel.teacherName = teacherObj.name;
// console.log(this.step1FormModel)
this.teacherModalClose();
},
//关闭讲师待选窗口
teacherModalClose() {
this.teacherModalVisible = false;
this.seriesSelectedRowKeys = [];
this.teacherData = [];
this.teacherPagination = {};
this.teacherSelectedRowKeys = [];
this.teacherSearchPage = {
name: "",
pageIndex: 1,
pageSize: 10,
};
},
//待选讲师表格分页操作
teacherHandleTableChange(pagination, filters, sorter) {
let queryParam = { ...this.teacherSearchPage };
queryParam.pageIndex = pagination.current;
queryParam.pageSize = pagination.pageSize;
this.getTeacherList(queryParam);
},
//选中讲师操作
teacherSelectChange(selectedRowKeys) {
// console.log(selectedRowKeys)
this.teacherSelectedRowKeys = selectedRowKeys;
},
//待选讲师表格查询
teacherHandlSearch() {
this.getTeacherList(this.teacherSearchPage);
},
//查询讲师
getTeacherList(query) {
this.teacherLoading = true;
......@@ -1128,15 +1074,6 @@ export default {
this.videoModalVisible = true;
},
},
watch: {
//监视第一步表单是否有修改操作
step1FormModel: {
handler(val, oldVal) {
this.step1ModifyCount++;
},
deep: true,
},
},
};
</script>
<style>
......@@ -1183,4 +1120,63 @@ export default {
.cancel-btn {
margin-left: 15px;
}
.video-image-background {
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 100%;
}
.video-image {
width: 120px;
height: 68px;
background: #d5d5d5 url("../../../assets/img/course/video-bg.png") no-repeat
50%;
display: inline-block;
position: relative;
cursor: pointer;
background-size: 60px;
}
.video-image-time {
position: absolute;
text-align: right;
color: #fff;
width: 100%;
right: 0;
bottom: 0;
z-index: 2;
height: 24px;
line-height: 24px;
padding: 0 3px;
background-image: linear-gradient(-180deg, transparent, rgba(0, 0, 0, 0.8));
}
.video-image-toolbar {
position: absolute;
text-align: right;
color: #fff;
width: 100%;
right: 0;
top: 0;
z-index: 2;
height: 24px;
line-height: 24px;
padding: 0 3px;
}
.video-image-play {
position: absolute;
top: 20px;
left: 52px;
z-index: 3;
color: #fff;
opacity: 0.4;
}
.video-image-cover {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment