Skip to content

P
pica.cloud.web-education-admin
提交 25d8463d 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

请输入课程名称

上级 092152c4
隐藏空白字符变更
内嵌 并排
正在显示 包含 56 行增加 和 7050 行删除
src/components/education/custom-resource/edit-course-dialog copy 11.vue 已删除 100644 → 0
浏览文件 @ 092152c4
<template>
<div class="edit-course-wrapper dialog-title-border">
<el-dialog
ref="testDialogRef"
title="上传课程"
:visible="dialogVisible"
@close="close"
center
:close-on-click-modal="false"
:close-on-press-escape="false"
width="800px"
>
<div slot="title" style="text-align: left;">
<span style="font-weight: 700;">上传课程</span>
<span style="font-size: 12px;color: #ED3131;margin-left: 4px;"> 请认真核对上传内容，一旦提交后将不能修改</span>
</div>
<div v-show="step == 1" class="course-content">
<el-form
ref="formDataRef"
:model="formData"
:rules="rules"
label-width="120px"
class="basic-form"
>
<el-form-item label="课程名称：" prop="courseName" class="valid-msg">
<el-col :span="20">
<el-input
size="small"
v-model="formData.courseName"
placeholder="请输入课程名称"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">
{{(formData.courseName || '').replace(/\s+/g,"").length}}/25
</span>
<div v-show="needShowAuditMsg && formData.courseNameCheck" class="error">
<span>{{formData.courseNameCheck}}</span>
</div>
</el-col>
</el-form-item>
<el-form-item label="学科分类：" prop="subjectIdList" class="valid-msg">
<el-col :span="18">
<!-- :props="{ expandTrigger: 'hover' }" -->
<el-cascader
style="width: 360px"
v-model="formData.subjectIdList"
:options="labelOptions"
:props="{ value: 'id', label: 'name', children: 'subList'}"
>
</el-cascader>
</el-col>
</el-form-item>
<el-form-item label="开放范围：" prop="shareType">
<el-radio-group v-model="formData.shareType">
<el-radio :label="1">机构共享</el-radio>
</el-radio-group>
</el-form-item>
<div class="basic-item-icon">
<span class="require">*</span>
<el-form-item label="课程视频：" prop="range" >
<el-upload
class="upload-video"
action="#"
:before-upload="beforeUploadVideo"
:limit="3"
:on-exceed="handleExceed"
:show-file-list="false"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
<span class="upload-tips">只支持MP4格式，课程视频最多上传100个，单文件最大2G</span>
<ul v-show="formData.courseCustomChapterModels[0].courseCustomLectureModelList.length" class="custom-list">
<li v-for="(lecture, index) in formData.courseCustomChapterModels[0].courseCustomLectureModelList" :key="index" class="valid-msg">
<ul class="video">
<li>
<span class="title">视频{{index + 1}}</span>
<img src="../../../assets/image/phrase3/icon-pin.png" />
<span class="name" @click="previewVideoAction(lecture)">{{lecture.resourceModel.name}}</span>
</li>
<li>
<img @click="deleteLecture(index)" class="delete" src="../../../assets/image/phrase3/close.png" />
</li>
</ul>
<div class="video-name">
<span class="title">
<span >*</span>
<span class="video-title">视频名称</span>
</span>
<el-input
size="small"
v-model="lecture.name"
placeholder="请输入课程名称"
style="width: 260px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">
{{(lecture.name || '').replace(/\s+/g,"").length}}/25
</span>
</div>
<div v-show="needShowAuditMsg && !formData.courseCustomChapterModels[0].courseCustomLectureModelList[index].nameCheck" class="error-video">
<span>11{{formData.courseCustomChapterModels[0].courseCustomLectureModelList[index].nameCheck}}</span>
</div>
</li>
<span v-show="needShowUploadProcess" class="upload-process" :style="{'width': (uploadProgress/100 * 340) + 'px'}"></span>
</ul>
<span v-if="!formData.courseCustomChapterModels[0].courseCustomLectureModelList.length" v-show="needShowUploadProcess" class="upload-process" :style="{'width': (uploadProgress/100 * 340) + 'px'}"></span>
</div>
</el-upload>
</el-form-item>
</div>
<div class="other-content valid-msg" v-show="isShowOtherContent">
<div class="tips">注：以下信息为非必填项，您也可以根据实际情况修改</div>
<div class="basic-item-icon">
<!-- <span class="require">*</span> -->
<el-form-item label="课程封面：">
<el-upload
v-model="formData.courseIntroImage"
class="bg-uploader"
action="#"
accept="image/*"
:show-file-list="false"
:before-upload="beforeUploadForCourse"
:disabled="disabled"
>
<div class="bg-img-wrapper">
<img
v-if="formData.courseIntroImage"
@mouseover.stop="imgMouseOver=true"
:src="formData.courseIntroImage"
class="bg-img"
/>
<img
v-if="!formData.courseIntroImage"
class="bg-img"
src="../../../assets/image/small.png"
/>
</div>
</el-upload>
<div class="limit-text">尺寸：750*420，只支持jpeg格式</div>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="课程难度：">
<el-radio-group v-model="formData.difficultyLevel">
<el-radio :label="1">初级</el-radio>
<el-radio :label="2">中级</el-radio>
<el-radio :label="3">高级</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="讲师名称：" class="valid-msg">
<el-col :span="18">
<el-input
size="small"
v-model="formData.courseCustomDoctorModels[0].courseDoctorName"
placeholder="请输入讲师名称"
style="width: 360px"
maxlength="25"
@focus="isShowDoctorList=true"
@input="filterDoctorName"
@blur="doctorNameInputBlur"
:disabled="disabled"
></el-input>
<ul v-show="isShowDoctorList" class="doctor-select-list">
<li
v-for="(item, index) in doctorNameList"
:key="index"
@click="selectDoctor(item.courseDoctorName, index)"
:class="{'doctor-selected': item.seleted}"
>
<span v-show="item.show">{{item.courseDoctorName || '测试名'}}</span>
</li>
</ul>
<span
class="word-num"
>{{(formData.courseCustomDoctorModels[0] && formData.courseCustomDoctorModels[0].courseDoctorName || '').replace(/\s+/g,"").length}}/25</span>
</el-col>
</el-form-item>
<div class="basic-item-icon">
<el-form-item label="讲师头像：">
<el-upload
v-model="formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl"
class="bg-uploader"
action="#"
accept="image/*"
:show-file-list="false"
:before-upload="beforeUploadForLecture"
:disabled="disabled"
>
<div class="bg-img-wrapper">
<img
v-if="formData.courseCustomDoctorModels && formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl || ''"
@mouseover.stop="imgMouseOver=true"
:src="formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl"
class="bg-img-doctor"
/>
<img
v-if="!(formData.courseCustomDoctorModels && formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl || '')"
class="bg-img-doctor"
src="../../../assets/image/small.png"
/>
</div>
</el-upload>
<div class="limit-text">尺寸：88*88，只支持jpeg格式</div>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="所属机构：">
<el-col :span="18">
<el-input
size="small"
v-model="formData.courseCustomDoctorModels[0].courseDoctorHospital"
placeholder="请输入所属机构"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span
class="word-num"
>{{(formData.courseCustomDoctorModels && formData.courseCustomDoctorModels[0].courseDoctorHospital || '').replace(/\s+/g,"").length}}/25</span>
</el-col>
</el-form-item>
<el-form-item label="课程简介：">
<el-col :span="18">
<el-input
size="small"
type="textarea"
maxlength="200"
:autosize="{ minRows: 5}"
placeholder="请输入课程简介"
v-model="formData.courseIntro"
style="width:90%;"
></el-input>
<span
class="word-num"
>{{(formData.courseIntro || '').replace(/\s+/g,"").length}}/200</span>
</el-col>
</el-form-item>
</div>
<!-- 更多信息 -->
<div class="separator-line">
<span class="line-left"></span>
<div @click="toggleOtherContent" class="center">
<span>展开更多信息</span>
<img v-show="isShowOtherContent" src="../../../assets/image/phrase3/arrow-up.png" />
<img v-show="!isShowOtherContent" src="../../../assets/image/phrase3/arrow-down.png" />
</div>
<span class="line-right"></span>
</div>
</el-form>
</div>
<div v-show="step == 2" class="course-content-step2">
<img class="success-img" src="../../../assets/image/phrase3/icon-audit-success.png" />
<span class="tips-1">您上传的课程已成功提交，预计在3-5个工作日内完成审核</span>
<span class="tips-2">审核通过后，您才可以选择课程完成项目配置。如有任何疑问可联系云鹊医400-920-8877</span>
<el-button type="primary" size="small" icon="el-icon-back" @click="backToOrgCourse">返回机构课程</el-button>
</div>
<div v-show="step == 1" slot="footer" class="dialog-footer">
<el-button @click="dialogObj.visible=true">取 消</el-button>
<el-button type="primary" @click="submitForm('formDataRef')">确 定</el-button>
</div>
</el-dialog>
<DialogComponet :dialogObj="dialogObj" @hide="hideCancleTips" @confirm="dialogObj.visible=false"></DialogComponet>
<PreviewVideo :dialogVisible="isPreviewVideo" :videoUrl="videoUrl" @close="isPreviewVideo=false"></PreviewVideo>
<!-- <el-dialog
title="拒绝原因"
:visible="showCropper"
width="1000px"
center>
<cropper-two
:cropOption="cropOption"
@getCropImg="getCropImg(arguments)"
:originImg="slide2.oriUrl"
:previewImg="slide2.preUrl"
/>
</el-dialog> -->
<!-- <button @click="previewVideoAction">test video</button> -->
</div>
</template>
<script>
import PreviewVideo from "@/components/education/custom-resource/preview-video";
import PreviewProtocol from "@/components/education/custom-resource/preview-protocol";
import PreviewEditCourse from "@/components/education/custom-resource/edit-course-dialog";
import DialogComponet from "@/components/education/template/dialog";
import CropperTwo from '@/components/common/cropper.two.vue'
import { doUpload, getFilePath } from "@/utils/qiniu-util";
import { openLoading, closeLoading, getQiniuToken1 } from "@/utils/utils";
import { isEmptyUtils } from "@/utils/index";
import { mapActions } from 'vuex';
import { ossUpload, getFilePathForOSS } from "@/utils/oss/ossUtil";
let vm = null;
export default {
data() {
let checkCourseName = (rule, value, callback) => {
// 如果有审核的信息，则直接报错
if (!value && this.needCheckField) {
callback(new Error("请输入课程名称"));
} else {
callback();
}
};
return {
// slide2: {
// oriUrl: 'https://avatars1.githubusercontent.com/u/23690568?s=460&v=4', // 原图
// preUrl: 'https://avatars1.githubusercontent.com/u/23690568?s=460&v=4' // 裁剪后的预览图片，初始化为原图
// },
showCropper: false,
cropOption: {
offset_x: 10,
offset_y: 10,
width: 750,
height: 420
},
step: 1,
needCheckField: false,
needShowAuditMsg: true,
needShowUploadProcess: false,
disabled: false,
formDataBase: {
checkStatus: 0,
courseCustomChapterModels: [
{
courseCustomLectureModelList: [],
id: null,
name: "视频课程"
}
],
courseCustomDoctorModels: [
{
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
}
],
courseId: null,
courseIntro: "",
courseIntroCheck: "",
courseIntroImage:
"https://test1-file.yunqueyi.com/image/png/common/202006201528136.png",
courseIntroImageCheck: "",
courseName: "",
courseNameCheck: "",
deleteCustomLectureIds: [],
difficultyLevel: 1,
shareType: 1,
subjectIdList: []
},
formData: {
checkStatus: 0,
courseCustomChapterModels: [
{
courseCustomLectureModelList: [],
id: null,
name: "视频课程"
}
],
courseCustomDoctorModels: [
{
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
}
],
courseId: null,
courseIntro: "",
courseIntroCheck: "",
courseIntroImage:
"https://test1-file.yunqueyi.com/image/png/common/202006201528136.png",
courseIntroImageCheck: "",
courseName: "",
courseNameCheck: "",
deleteCustomLectureIds: [],
difficultyLevel: 1,
shareType: 1,
subjectIdList: []
},
uploadImgMessage: false,
imgMouseOver: false,
rules: {
courseName: [
{ required: true, message: " " },
{ validator: checkCourseName }
],
subjectIdList: [
{ required: true, message: "请输入课程名称" }
],
shareType: [
{ required: true, message: "请选择开放范围" }
]
},
labelOptions: [],
isShowOtherContent: false,
fileList: [
],
projectBanner:
"https://file.yunqueyi.com/h5/images/cme/project-banner.png",
doctorHeader: "https://file.yunqueyi.com/h5/images/cme/doctor-header.png",
doctorNameList: [
{ courseDoctorName: "333", show: true, seleted: false },
{ courseDoctorName: "334", show: true, seleted: false },
{ courseDoctorName: "335", show: true, seleted: false },
{ courseDoctorName: "336", show: true, seleted: false }
],
isShowDoctorList: false,
isPreviewVideo: false,
videoUrl: "",
orgCourseInfo: {
defaultDoctor: {
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
},
doctorModelList: [
{
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
}
],
limitModel: {
maxLimitOneVideoSize: 2147483648,
maxLimitVideoCount: 100,
maxStorageSpace: 5368709120,
usedStorageSpace: 1021842989
}
},
uploadProgress: 0,
dialogObj: {
visible: false,
title: "确定取消吗？",
message: "发布后,项目将进入审核中,待审核完成后学员可在云鹊医App上参加培训学习",
tip: "",
confirmMsg: "取 消",
hideMsg: "确 定"
},
};
},
props: {
dialogVisible: {
type: Boolean,
default: false
},
courseId: {
type: String | Number,
default: 0
}
},
computed: {},
watch: {
dialogVisible(isVisible) {
this.formData = JSON.parse(JSON.stringify(this.formDataBase));
if (isVisible) {
if (this.courseId == 0) {
this.initAdd(this.courseId);
} else {
this.initModify(this.courseId);
}
}
},
},
components: {
PreviewVideo,
PreviewEditCourse,
DialogComponet,
CropperTwo
},
created() {
vm = this;
// this.initAdd();
},
mounted() {
this.getLabelList();
},
methods: {
...mapActions(['setKind']),
// getCropImg (argument) {
// this.showCropper = false;
// console.log(argument[0], '#####', argument[1]);
// this.slide2.preUrl = argument[0]
// this.cropData = argument[1]
// },
// 创建课程页面的初始信息
initOrgCourseInfo() {
vm.GET("contents/course/custom/info/init", { setEntry: true }).then(
res => {
if (res.code == "000000") {
this.orgCourseInfo = res.data;
this.formData.courseCustomDoctorModels[0] = this.orgCourseInfo.defaultDoctor;
this.formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl =
this.orgCourseInfo.defaultDoctor.courseDoctorAvatarUrl ||
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png";
this.doctorNameList = this.convertDNameToSelectOpt(
this.orgCourseInfo.doctorModelList
);
+this.courseId && this.getCourseInfoById(this.courseId);
}
}
);
},
// 将医生名称进行处理
convertDNameToSelectOpt(doctorModelList) {
doctorModelList.forEach(item => {
item.show = true;
item.seleted = false;
});
return doctorModelList;
},
// 添加时初始化
initAdd() {
console.log("in initAdd");
this.step = 1;
this.needShowAuditMsg = false;
this.initOrgCourseInfo();
},
initModify() {
this.needShowAuditMsg = true;
console.log("in initModify");
this.initOrgCourseInfo();
},
// 创建课程页面的初始信息
getCourseInfoById(courseId) {
vm.GET(`contents/course/custom/info/${courseId}`)
.then( res => {
if ( res.code == "000000") {
this.formData = res.data;
}
}
);
},
// 过滤医生信息
filterDoctorName(value) {
this.doctorNameList.forEach(item => {
if (value) {
if ((item.value + "").indexOf(value) == -1) {
item.show = false;
} else {
item.show = true;
}
if (item.value == value) {
item.seleted = true;
} else {
item.seleted = false;
}
} else {
item.show = true;
}
});
},
// 当选择医生的焦点失去时，要反选医生信息
doctorNameInputBlur() {
setTimeout(() => {
this.isShowDoctorList = false;
this.selectDoctorByName(
this.formData.courseCustomDoctorModels[0].courseDoctorName
);
}, 200);
},
// 根据姓名反选医生信息
// TODO 尝试找到完全匹配的医生
selectDoctorByName(name) {
},
// 选择其中一个
selectDoctor(name) {
console.log(name);
this.formData.courseCustomDoctorModels[0].courseDoctorName = name;
this.selectDoctorByName(name);
},
// 关闭当前弹框
close() {
this.$emit("close");
},
// 获取学科列表
getLabelList() {
let req = {};
this.GET("aggregate/content/labelList", req).then(res => {
if (res.code == "000000") {
this.convertLabelList(res.data);
}
});
},
// 将所有子分类中的“全部”去掉
convertLabelList(labelList) {
let newLabelList = [];
labelList.forEach(item => {
item.subList = item.subList.slice(1);
});
this.labelOptions = labelList;
},
// 上传视频（mp4）
beforeUploadVideo(file) {
// orgCourseInfo.limitModel: {
// maxLimitOneVideoSize: 2147483648,
// maxLimitVideoCount: 100,
// maxStorageSpace: 5368709120,
// usedStorageSpace: 1021842989
// }
this.$message({
showClose: true,
message: '您上传的文件大小已超限制，无法继续上传。如有疑问可拨打云鹊医电话咨询400-920-7788',
type: 'error',
duration: 10000
});
return;
console.log(file);
const isMP4 = file.type === "video/mp4";
const isGt = file.size > this.orgCourseInfo.limitModel.maxLimitOneVideoSize;
const isGtMaxNum = this.formData.courseCustomChapterModels[0].courseCustomLectureModelList.length >= 100;
const usedGtMaxStore = this.orgCourseInfo.limitModel.usedStorageSpace + file.size > this.orgCourseInfo.limitModel.maxStorageSpace;
if (isGt || !isMP4 || isGtMaxNum) {
this.$message.error("视频不符合规范，请根据规范上传视频");
return;
}
if(usedGtMaxStore) {
this.$message.error("您上传的文件大小已超限制，无法继续上传。如有疑问可拨打云鹊医电话咨询400-920-7788");
this.$message({
showClose: true,
message: '恭喜你，这是一条成功消息',
type: 'error',
duration: 10000
});
return;
}
// 直接上传
this.needShowUploadProcess = true;
doUpload(
vm,
file,
getFilePath(file, null),
"preview4",
"progress",
""
).then(function(path) {
// closeLoading(vm);
console.log('vm.uploadProgress', vm.uploadProgress);
console.log(path);
let uploadResourceParam = {
formatType: path.ext,
name: path.name.substring(path.name.length - 25), //path.name,
qCloudUrl : path.fullPath,
size : path.size,
fileType : 1,
status : "success",
uid : new Date().getTime()
}
vm.needShowUploadProcess = false;
vm.uploadProgress = 0;
vm.insertResourceAction(uploadResourceParam);
});
},
// 上传资源（视频）后，生存对应的节
insertResourceAction(uploadResourceParam) {
this.POST("contents/course/custom/info/insertResource", [uploadResourceParam]).then(res => {
if (res.code == "000000") {
let cName = res.data.resourceModelList[0].name;
// cName = cName.substr(0, cName.lastIndexOf('.'));
let lectureObj = {
id: null,
name: cName,
nameCheck: "",
contentCheck: "",
resourceModel: {}
}
this.orgCourseInfo.limitModel = res.data.limitModel;
lectureObj.resourceModel = res.data && res.data.resourceModelList[0];
this.formData.courseCustomChapterModels[0].courseCustomLectureModelList.push(lectureObj);
}
});
},
// 展开/收起 更多信息
toggleOtherContent() {
this.isShowOtherContent = !this.isShowOtherContent;
},
// 限制选择文件个数
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 100 个文件，您已经共选择了 ${files.length + fileList.length} 个文件！`);
},
// 删除按钮
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`);
},
//表单校验
submitForm(formName) {
this.needShowAuditMsg = false;
this.$refs[formName].validate(valid => {
if (valid) {
this.insertOrUpdate();
} else {
console.log("error submit!!");
}
this.needShowAuditMsg = true;
});
},
// 添加或修改课程（kind = 3）
insertOrUpdate() {
this.POST("contents/course/custom/info/insertOrUpdate", this.formData).then(res => {
if (res.code == "000000") {
if(this.courseId == 'add') {
this.step = 2;
} else {
this.close();
this.setKind(3);
}
}
});
},
// 返回到课程选择页面（kind = 3）
backToOrgCourse() {
this.close();
this.setKind(3);
},
// 关闭（“取消”按钮弹出来的）弹框
hideCancleTips() {
this.dialogObj.visible = false;
this.close();
},
// 预览视频
previewVideoAction(lecture) {
this.videoUrl = lecture.resourceModel.filePath;
this.isPreviewVideo = true;
},
// 删除本节视频
// TODO 要将删除的节ID放在删除的节里
deleteLecture(index) {
this.formData.courseCustomChapterModels[0].courseCustomLectureModelList.splice(index, 1);
},
// 上传课程封面图片
beforeUploadForCourse(file) {
const isJPG = file.type === 'image/jpeg'
if(!isJPG) {
this.$message.error('只支持jpeg格式')
return;
}
var _img = new FileReader()
_img.readAsDataURL(file)
_img.onload = function(theFile) {
let image = new Image()
image.src = theFile.target.result
image.onload = function() {
let _this = this
if(_this.width != 740 || _this.height != 420) {
vm.$message.info("上传图片尺寸大小不合适，请重新上传")
}else {
vm.doUploadOSS(file, 1); //封面图片
}
}
}
},
// 上传讲师图片
beforeUploadForLecture(file) {
// const isLt50kb = file.size / 1024 < 50;
const isJPG = file.type === 'image/jpeg'
if(!isJPG) {
this.$message.error('只支持jpeg格式')
return;
}
var _img = new FileReader()
_img.readAsDataURL(file)
_img.onload = function(theFile) {
let image = new Image()
image.src = theFile.target.result
image.onload = function() {
let _this = this
if(_this.width != 88 || _this.height != 88) {
vm.$message.info("上传图片尺寸大小不合适，请重新上传")
}else {
vm.doUploadOSS(file, 2); //封面图片
}
}
}
},
// （调用OSS API）开始上传
doUploadOSS(file, index) {
let self = this;
//上传 指定文件名
ossUpload(self, file, getFilePathForOSS(file), null, null, null).
then(function(path) {
console.log(path);
let list = [{}];
// list[0].name = file.name;
// list[0].url = localStorage.getItem("resource_url") + path;
if (index === 1) {
} else if (index === 2) {
}
self.$message.success("上传成功");
});
return false;
},
}
};
</script>
<style scoped lang="scss">
.edit-course-wrapper {
.course-content {
// color: red;
.basic-item-icon {
position: relative;
margin-top: 20px;
.require {
position: absolute;
left: 40px;
top: 11px;
color: #f56c6c;
}
.upload-message {
position: absolute;
left: 160px;
top: 105px;
font-size: 12px;
color: #f56c6c;
}
.img-delete {
position: absolute;
left: 0px;
top: 0px;
width: 84px;
height: 100px;
background: #000;
opacity: 0.7;
z-index: 999;
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
}
}
.upload-tips {
width: 100%;
position: relative;
top: -10px;
font-size: 12px;
color: #979899;
// display: inline-block;
}
.custom-list {
// width: 100%;
width: 480px;
display: flex;
flex-direction: column;
border-radius: 3px;
border: 1px solid rgba(228,231,237,1);
padding: 20px;
font-size: 14px;
& > li {
margin: 10px 0;
}
.video {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.title {
display: inline-block;
width: 70px;
text-align: right;
margin-right: 10px;
}
.name {
cursor: pointer;
color: #5890DD;
}
img {
width: 12px;
height: 12px;
}
.delete {
position: relative;
top: 4px;
cursor: pointer;
width: 16px;
height: 16px;
}
}
.video-name {
.title {
display: inline-block;
width: 70px;
text-align: right;
margin-right: 10px;
}
}
}
}
.word-num {
font-size: 12px;
color: #999;
padding-top: 5px;
}
.bg-uploader {
img {
float: left;
}
.bg-img-wrapper {
.bg-img {
display: block;
width: 160px;
height: 90px;
}
.bg-img-doctor {
display: block;
width: 88px;
height: 88px;
}
}
.bg-video {
float: left;
width: 84px;
height: 100px;
}
}
.limit-text {
position: absolute;
top: 86px;
left: 0px;
font-size: 12px;
color: #979899;
}
.separator-line {
width: 100%;
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: space-between;
.center {
cursor: pointer;
width: 130px;
color: #666666;
img {
width: 12px;
}
}
.line-left,
.line-right {
// display: inline-block;
// width: 100%;
flex: 1;
border-bottom: 1px dashed #e4e7ed;
}
}
.tips {
width: 100%;
height: 32px;
line-height: 32px;
padding-left: 12px;
background: rgba(254, 250, 245, 1);
border-radius: 3px;
color: #e6a23c;
}
.valid-msg {
position: relative;
.error {
width: 370px;
position: absolute;
display: flex;
justify-content: space-between;
top: 29px;
font-size: 13px;
color: #ed3131;
.text {
flex: 1;
}
.cancle {
cursor: pointer;
width: 20px;
}
}
.edit-wrapper {
color: #449284;
.edit-img {
position: relative;
top: 2px;
width: 12px;
margin: 0 2px 0 4px;
}
}
.doctor-select-list {
width: 200px;
// max-height: 100px;
position: absolute;
z-index: 100;
background: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
// margin: 10px;
li {
padding-left: 20px;
cursor: pointer;
&:hover {
background: #f4f7fd;
}
&.doctor-selected {
background: #f4f7fd;
}
}
}
}
.upload-process {
margin: 10px 0 10px 10px;
display: block;
// width: 310px;
height: 4px;
background: #449284;
border-radius: 2px;
}
}
.course-content-step2 {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
.success-img {
width: 60px;
height: 60px;
}
.tips-1 {
margin-top: 30px;
font-size: 18px;
color: #303133;
}
.tips-2 {
margin-top: 4px;
margin-bottom: 40px;
font-size: 14px;
color: #999999;
}
}
}
</style>
src/components/education/custom-resource/edit-course-dialog copy 2.vue 已删除 100644 → 0
浏览文件 @ 092152c4
<template>
<div class="edit-course-wrapper dialog-title-border">
<el-dialog
ref="testDialogRef"
title="上传课程"
:visible="dialogVisible"
@close="close"
center
:close-on-click-modal="false"
:close-on-press-escape="false"
width="800px"
>
<div slot="title" style="text-align: left;">
<span style="font-weight: 700;">上传课程</span>
<span style="font-size: 12px;color: #ED3131;margin-left: 4px;"> 请认真核对上传内容，一旦提交后将不能修改</span>
</div>
<div v-show="step == 1" class="course-content">
<el-form
ref="formDataRef"
:model="formData"
:rules="rules"
label-width="120px"
class="basic-form"
>
<el-form-item label="课程名称：" prop="courseName" class="valid-msg">
<el-col :span="20">
<el-input
size="small"
v-model="formData.courseName"
placeholder="请输入课程名称"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">
{{(formData.courseName || '').replace(/\s+/g,"").length}}/25
</span>
<div v-show="needShowAuditMsg && formData.courseNameCheck" class="error">
<span>{{formData.courseNameCheck}}</span>
</div>
</el-col>
</el-form-item>
<el-form-item label="学科分类：" prop="subjectIdList" class="valid-msg">
<el-col :span="18">
<!-- :props="{ expandTrigger: 'hover' }" -->
<el-cascader
style="width: 360px"
v-model="formData.subjectIdList"
:options="labelOptions"
:props="{ value: 'id', label: 'name', children: 'subList'}"
>
</el-cascader>
</el-col>
</el-form-item>
<el-form-item label="开放范围：" prop="shareType">
<el-radio-group v-model="formData.shareType">
<el-radio :label="1">机构共享</el-radio>
</el-radio-group>
</el-form-item>
<div class="basic-item-icon">
<span class="require">*</span>
<el-form-item label="课程视频：" prop="range" >
<el-upload
class="upload-video"
action="#"
:before-upload="beforeUploadVideo"
:limit="3"
:on-exceed="handleExceed"
:show-file-list="false"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
<span class="upload-tips">只支持MP4格式，课程视频最多上传100个，单文件最大2G</span>
<ul v-show="formData.courseCustomChapterModels[0].courseCustomLectureModelList.length" class="custom-list">
<li v-for="(lecture, index) in formData.courseCustomChapterModels[0].courseCustomLectureModelList" :key="index" class="valid-msg">
<ul class="video">
<li>
<span class="title">视频{{index + 1}}</span>
<img src="../../../assets/image/phrase3/icon-pin.png" />
<span class="name" @click="previewVideoAction(lecture)">{{lecture.resourceModel.name}}</span>
</li>
<li>
<img @click="deleteLecture(index)" class="delete" src="../../../assets/image/phrase3/close.png" />
</li>
</ul>
<div class="video-name">
<span class="title">
<span >*</span>
<span class="video-title">视频名称</span>
</span>
<el-input
size="small"
v-model="lecture.name"
placeholder="请输入课程名称"
style="width: 260px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">
{{(lecture.name || '').replace(/\s+/g,"").length}}/25
</span>
</div>
<div v-show="needShowAuditMsg && !formData.courseCustomChapterModels[0].courseCustomLectureModelList[index].nameCheck" class="error-video">
<span>11{{formData.courseCustomChapterModels[0].courseCustomLectureModelList[index].nameCheck}}</span>
</div>
</li>
<span v-show="needShowUploadProcess" class="upload-process" :style="{'width': (uploadProgress/100 * 340) + 'px'}"></span>
</ul>
<span v-if="!formData.courseCustomChapterModels[0].courseCustomLectureModelList.length" v-show="needShowUploadProcess" class="upload-process" :style="{'width': (uploadProgress/100 * 340) + 'px'}"></span>
</div>
</el-upload>
</el-form-item>
</div>
<div class="other-content valid-msg" v-show="isShowOtherContent">
<div class="tips">注：以下信息为非必填项，您也可以根据实际情况修改</div>
<div class="basic-item-icon">
<!-- <span class="require">*</span> -->
<el-form-item label="课程封面：">
<el-upload
v-model="formData.courseIntroImage"
class="bg-uploader"
action="#"
accept="image/*"
:show-file-list="false"
:before-upload="beforeUpload1"
:disabled="disabled"
>
<div class="bg-img-wrapper">
<img
v-if="formData.courseIntroImage"
@mouseover.stop="imgMouseOver=true"
:src="formData.courseIntroImage"
class="bg-img"
/>
<img
v-if="!formData.courseIntroImage"
class="bg-img"
src="../../../assets/image/small.png"
/>
</div>
</el-upload>
<div class="limit-text">尺寸：750*420，只支持jpeg格式</div>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="课程难度：">
<el-radio-group v-model="formData.difficultyLevel">
<el-radio :label="1">初级</el-radio>
<el-radio :label="2">中级</el-radio>
<el-radio :label="3">高级</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="讲师名称：" class="valid-msg">
<el-col :span="18">
<el-input
size="small"
v-model="formData.courseCustomDoctorModels[0].courseDoctorName"
placeholder="请输入讲师名称"
style="width: 360px"
maxlength="25"
@focus="isShowDoctorList=true"
@input="filterDoctorName"
@blur="doctorNameInputBlur"
:disabled="disabled"
></el-input>
<ul v-show="isShowDoctorList" class="doctor-select-list">
<li
v-for="(item, index) in doctorNameList"
:key="index"
@click="selectDoctor(item.courseDoctorName, index)"
:class="{'doctor-selected': item.seleted}"
>
<span v-show="item.show">{{item.courseDoctorName || '测试名'}}</span>
</li>
</ul>
<span
class="word-num"
>{{(formData.courseCustomDoctorModels[0] && formData.courseCustomDoctorModels[0].courseDoctorName || '').replace(/\s+/g,"").length}}/25</span>
</el-col>
</el-form-item>
<div class="basic-item-icon">
<el-form-item label="讲师头像：">
<el-upload
v-model="formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl"
class="bg-uploader"
action="#"
accept="image/*"
:show-file-list="false"
:before-upload="beforeUpload2"
:disabled="disabled"
>
<div class="bg-img-wrapper">
<img
v-if="formData.courseCustomDoctorModels && formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl || ''"
@mouseover.stop="imgMouseOver=true"
:src="formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl"
class="bg-img-doctor"
/>
<img
v-if="!(formData.courseCustomDoctorModels && formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl || '')"
class="bg-img-doctor"
src="../../../assets/image/small.png"
/>
</div>
</el-upload>
<div class="limit-text">尺寸：88*88，只支持jpeg格式</div>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="所属机构：">
<el-col :span="18">
<el-input
size="small"
v-model="formData.courseCustomDoctorModels[0].courseDoctorHospital"
placeholder="请输入所属机构"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span
class="word-num"
>{{(formData.courseCustomDoctorModels && formData.courseCustomDoctorModels[0].courseDoctorHospital || '').replace(/\s+/g,"").length}}/25</span>
</el-col>
</el-form-item>
<el-form-item label="课程简介：">
<el-col :span="18">
<el-input
size="small"
type="textarea"
maxlength="200"
:autosize="{ minRows: 5}"
placeholder="请输入课程简介"
v-model="formData.courseIntro"
style="width:90%;"
></el-input>
<span
class="word-num"
>{{(formData.courseIntro || '').replace(/\s+/g,"").length}}/200</span>
</el-col>
</el-form-item>
</div>
<!-- 更多信息 -->
<div class="separator-line">
<span class="line-left"></span>
<div @click="toggleOtherContent" class="center">
<span>展开更多信息</span>
<img v-show="isShowOtherContent" src="../../../assets/image/phrase3/arrow-up.png" />
<img v-show="!isShowOtherContent" src="../../../assets/image/phrase3/arrow-down.png" />
</div>
<span class="line-right"></span>
</div>
</el-form>
</div>
<div v-show="step == 2" class="course-content-step2">
<img class="success-img" src="../../../assets/image/phrase3/icon-audit-success.png" />
<span class="tips-1">您上传的课程已成功提交，预计在3-5个工作日内完成审核</span>
<span class="tips-2">审核通过后，您才可以选择课程完成项目配置。如有任何疑问可联系云鹊医400-920-8877</span>
<el-button type="primary" size="small" icon="el-icon-back" @click="backToOrgCourse">返回机构课程</el-button>
</div>
<div v-show="step == 1" slot="footer" class="dialog-footer">
<el-button @click="dialogObj.visible=true">取 消</el-button>
<el-button type="primary" @click="submitForm('formDataRef')">确 定</el-button>
</div>
</el-dialog>
<DialogComponet :dialogObj="dialogObj" @hide="hideCancleTips" @confirm="dialogObj.visible=false"></DialogComponet>
<PreviewVideo :dialogVisible="isPreviewVideo" :videoUrl="videoUrl" @close="isPreviewVideo=false"></PreviewVideo>
<el-dialog
title="拒绝原因"
:visible="showCropper"
width="1000px"
center>
<cropper-two
:cropOption="cropOption"
@getCropImg="getCropImg(arguments)"
:originImg="slide2.oriUrl"
:previewImg="slide2.preUrl"
/>
</el-dialog>
<!-- <button @click="previewVideoAction">test video</button> -->
</div>
</template>
<script>
import PreviewVideo from "@/components/education/custom-resource/preview-video";
import PreviewProtocol from "@/components/education/custom-resource/preview-protocol";
import PreviewEditCourse from "@/components/education/custom-resource/edit-course-dialog";
import DialogComponet from "@/components/education/template/dialog";
import CropperTwo from '@/components/common/cropper.two.vue'
import { doUpload, getFilePath } from "@/utils/qiniu-util";
import { openLoading, closeLoading, getQiniuToken1 } from "@/utils/utils";
import { isEmptyUtils } from "@/utils/index";
import { mapActions } from 'vuex';
import { ossUpload, getFilePathForOSS } from "@/utils/oss/ossUtil";
let vm = null;
export default {
data() {
let checkCourseName = (rule, value, callback) => {
// 如果有审核的信息，则直接报错
if (!value && this.needCheckField) {
callback(new Error("请输入课程名称"));
} else {
callback();
}
};
return {
slide2: {
oriUrl: 'https://avatars1.githubusercontent.com/u/23690568?s=460&v=4', // 原图
preUrl: 'https://avatars1.githubusercontent.com/u/23690568?s=460&v=4' // 裁剪后的预览图片，初始化为原图
},
showCropper: false,
cropOption: {
offset_x: 10,
offset_y: 10,
width: 750,
height: 420
},
step: 1,
needCheckField: false,
needShowAuditMsg: true,
needShowUploadProcess: false,
disabled: false,
formDataBase: {
checkStatus: 0,
courseCustomChapterModels: [
{
courseCustomLectureModelList: [],
id: null,
name: "视频课程"
}
],
courseCustomDoctorModels: [
{
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
}
],
courseId: null,
courseIntro: "",
courseIntroCheck: "",
courseIntroImage:
"https://test1-file.yunqueyi.com/image/png/common/202006201528136.png",
courseIntroImageCheck: "",
courseName: "",
courseNameCheck: "",
deleteCustomLectureIds: [],
difficultyLevel: 1,
shareType: 1,
subjectIdList: []
},
formData: {
checkStatus: 0,
courseCustomChapterModels: [
{
courseCustomLectureModelList: [],
id: null,
name: "视频课程"
}
],
courseCustomDoctorModels: [
{
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
}
],
courseId: null,
courseIntro: "",
courseIntroCheck: "",
courseIntroImage:
"https://test1-file.yunqueyi.com/image/png/common/202006201528136.png",
courseIntroImageCheck: "",
courseName: "",
courseNameCheck: "",
deleteCustomLectureIds: [],
difficultyLevel: 1,
shareType: 1,
subjectIdList: []
},
uploadImgMessage: false,
imgMouseOver: false,
rules: {
courseName: [
{ required: true, message: " " },
{ validator: checkCourseName }
],
subjectIdList: [
{ required: true, message: "请输入课程名称" }
],
shareType: [
{ required: true, message: "请选择开放范围" }
]
},
labelOptions: [],
isShowOtherContent: false,
fileList: [
],
projectBanner:
"https://file.yunqueyi.com/h5/images/cme/project-banner.png",
doctorHeader: "https://file.yunqueyi.com/h5/images/cme/doctor-header.png",
doctorNameList: [
{ courseDoctorName: "333", show: true, seleted: false },
{ courseDoctorName: "334", show: true, seleted: false },
{ courseDoctorName: "335", show: true, seleted: false },
{ courseDoctorName: "336", show: true, seleted: false }
],
isShowDoctorList: false,
isPreviewVideo: false,
videoUrl: "",
orgCourseInfo: {
defaultDoctor: {
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
},
doctorModelList: [
{
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
}
],
limitModel: {
maxLimitOneVideoSize: 2147483648,
maxLimitVideoCount: 100,
maxStorageSpace: 5368709120,
usedStorageSpace: 1021842989
}
},
uploadProgress: 0,
dialogObj: {
visible: false,
title: "确定取消吗？",
message: "发布后,项目将进入审核中,待审核完成后学员可在云鹊医App上参加培训学习",
tip: "",
confirmMsg: "取 消",
hideMsg: "确 定"
},
};
},
props: {
dialogVisible: {
type: Boolean,
default: false
},
courseId: {
type: String | Number,
default: 0
}
},
computed: {},
watch: {
dialogVisible(isVisible) {
this.formData = JSON.parse(JSON.stringify(this.formDataBase));
if (isVisible) {
if (this.courseId == 0) {
this.initAdd(this.courseId);
} else {
this.initModify(this.courseId);
}
}
},
},
components: {
PreviewVideo,
PreviewEditCourse,
DialogComponet,
CropperTwo
},
created() {
vm = this;
// this.initAdd();
},
mounted() {
this.getLabelList();
},
methods: {
...mapActions(['setKind']),
getCropImg (argument) {
this.showCropper = false;
console.log(argument[0], '#####', argument[1]);
this.slide2.preUrl = argument[0]
this.cropData = argument[1]
},
// 创建课程页面的初始信息
initOrgCourseInfo() {
vm.GET("contents/course/custom/info/init", { setEntry: true }).then(
res => {
if (res.code == "000000") {
this.orgCourseInfo = res.data;
this.formData.courseCustomDoctorModels[0] = this.orgCourseInfo.defaultDoctor;
this.formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl =
this.orgCourseInfo.defaultDoctor.courseDoctorAvatarUrl ||
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png";
this.doctorNameList = this.convertDNameToSelectOpt(
this.orgCourseInfo.doctorModelList
);
+this.courseId && this.getCourseInfoById(this.courseId);
}
}
);
},
// 将医生名称进行处理
convertDNameToSelectOpt(doctorModelList) {
doctorModelList.forEach(item => {
item.show = true;
item.seleted = false;
});
return doctorModelList;
},
// 添加时初始化
initAdd() {
console.log("in initAdd");
this.step = 1;
this.needShowAuditMsg = false;
this.initOrgCourseInfo();
},
initModify() {
this.needShowAuditMsg = true;
console.log("in initModify");
this.initOrgCourseInfo();
},
// 创建课程页面的初始信息
getCourseInfoById(courseId) {
vm.GET(`contents/course/custom/info/${courseId}`)
.then( res => {
if ( res.code == "000000") {
this.formData = res.data;
}
}
);
},
// 过滤医生信息
filterDoctorName(value) {
this.doctorNameList.forEach(item => {
if (value) {
if ((item.value + "").indexOf(value) == -1) {
item.show = false;
} else {
item.show = true;
}
if (item.value == value) {
item.seleted = true;
} else {
item.seleted = false;
}
} else {
item.show = true;
}
});
},
// 当选择医生的焦点失去时，要反选医生信息
doctorNameInputBlur() {
setTimeout(() => {
this.isShowDoctorList = false;
this.selectDoctorByName(
this.formData.courseCustomDoctorModels[0].courseDoctorName
);
}, 200);
},
// 根据姓名反选医生信息
// TODO 尝试找到完全匹配的医生
selectDoctorByName(name) {
},
// 选择其中一个
selectDoctor(name) {
console.log(name);
this.formData.courseCustomDoctorModels[0].courseDoctorName = name;
this.selectDoctorByName(name);
},
// 关闭当前弹框
close() {
this.$emit("close");
},
// 获取学科列表
getLabelList() {
let req = {};
this.GET("aggregate/content/labelList", req).then(res => {
if (res.code == "000000") {
this.convertLabelList(res.data);
}
});
},
// 将所有子分类中的“全部”去掉
convertLabelList(labelList) {
let newLabelList = [];
labelList.forEach(item => {
item.subList = item.subList.slice(1);
});
this.labelOptions = labelList;
},
// 上传视频（mp4）
beforeUploadVideo(file) {
// orgCourseInfo.limitModel: {
// maxLimitOneVideoSize: 2147483648,
// maxLimitVideoCount: 100,
// maxStorageSpace: 5368709120,
// usedStorageSpace: 1021842989
// }
console.log(file);
const isMP4 = file.type === "video/mp4";
const isGt = file.size > this.orgCourseInfo.limitModel.maxLimitOneVideoSize;
const isGtMaxNum = this.formData.courseCustomChapterModels[0].courseCustomLectureModelList.length >= 100;
const usedGtMaxStore = this.orgCourseInfo.limitModel.usedStorageSpace + file.size > this.orgCourseInfo.limitModel.maxStorageSpace;
if (isGt || !isMP4 || isGtMaxNum) {
this.$message.error("视频不符合规范，请根据规范上传视频");
return;
}
if(usedGtMaxStore) {
this.$message.error("个人存储空间已不够上传此视频");
return;
}
// 直接上传
this.needShowUploadProcess = true;
doUpload(
vm,
file,
getFilePath(file, null),
"preview4",
"progress",
""
).then(function(path) {
// closeLoading(vm);
console.log('vm.uploadProgress', vm.uploadProgress);
console.log(path);
let uploadResourceParam = {
formatType: path.ext,
name: path.name.substring(path.name.length - 25), //path.name,
qCloudUrl : path.fullPath,
size : path.size,
fileType : 1,
status : "success",
uid : new Date().getTime()
}
vm.needShowUploadProcess = false;
vm.uploadProgress = 0;
vm.insertResourceAction(uploadResourceParam);
});
},
// 上传资源（视频）后，生存对应的节
insertResourceAction(uploadResourceParam) {
this.POST("contents/course/custom/info/insertResource", [uploadResourceParam]).then(res => {
if (res.code == "000000") {
let cName = res.data.resourceModelList[0].name;
// cName = cName.substr(0, cName.lastIndexOf('.'));
let lectureObj = {
id: null,
name: cName,
nameCheck: "",
contentCheck: "",
resourceModel: {}
}
this.orgCourseInfo.limitModel = res.data.limitModel;
lectureObj.resourceModel = res.data && res.data.resourceModelList[0];
this.formData.courseCustomChapterModels[0].courseCustomLectureModelList.push(lectureObj);
}
});
},
//上传列表图片
beforeUploadListPic(file) {
let fileLimit = {
width: 230,
height: 172,
size: 0.5,
sizeText: "500K",
key: "attachmentUrl",
more: "attachmentMore1",
show: "uploadImgMessage"
};
vm.beforeAvatarUpload2(file, fileLimit);
// vm.beforeAvatarUpload(file, fileLimit);
},
//上传图片校验
beforeAvatarUpload2(file, fileLimit) {
console.log();
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
console.log("isJPG", isJPG, "isPNG", isPNG, "isLt2M", isLt2M);
// if (!isJPG && !isPNG) {
// vm.$message.error("图片不符合规范，请根据规范上传图片");
// return;
// }
// if (!isLt2M) {
// vm.$message.error("图片不符合规范，请根据规范上传图片 ");
// return;
// }
let _img = new FileReader();
_img.readAsDataURL(file);
console.log('readAsDataURL', _img, file);
_img.onload = function(theFile) {
let image = new Image();
image.src = theFile.target.result;
vm.slide2.oriUrl = theFile.target.result;
vm.showCropper = true;
console.log('readAsDataURL222', _img.width, file, theFile);
image.onload = function() {
console.log('image.onload', image);
let _vm = this;
if (
false
// true ||
// _vm.width != fileLimit.width ||
// _vm.height != fileLimit.height
) {
vm.$message.error("图片不符合规范，请根据规范上传图片");
} else {
// openLoading(vm);
// doUpload(
// vm,
// file,
// getFilePath(file, null),
// "preview4",
// "progress1",
// 1
// ).then(function(path) {
// closeLoading(vm);
// console.log(path);
// if (fileLimit.show == "uploadImgMessage") {
// vm.uploadImgMessage = false;
// }
// // else if (fileLimit.show == "uploadImgMessage2") {
// // vm.uploadImgMessage2 = false;
// // }
// vm.formData[fileLimit.key] = path.fullPath;
// vm.formData[fileLimit.more] = {
// attachmentName: path.name,
// attachmentExt: path.ext,
// attachmentSize: path.size
// };
// vm.$message.success("上传成功");
// });
}
};
};
return isJPG && isLt2M;
},
//上传图片校验
beforeAvatarUpload(file, fileLimit) {
console.log();
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
console.log("isJPG", isJPG, "isPNG", isPNG, "isLt2M", isLt2M);
// if (!isJPG && !isPNG) {
// vm.$message.error("图片不符合规范，请根据规范上传图片");
// return;
// }
// if (!isLt2M) {
// vm.$message.error("图片不符合规范，请根据规范上传图片 ");
// return;
// }
let _img = new FileReader();
_img.readAsDataURL(file);
_img.onload = function(theFile) {
let image = new Image();
image.src = theFile.target.result;
image.onload = function() {
let _vm = this;
if (
false
// true ||
// _vm.width != fileLimit.width ||
// _vm.height != fileLimit.height
) {
vm.$message.error("图片不符合规范，请根据规范上传图片");
} else {
openLoading(vm);
doUpload(
vm,
file,
getFilePath(file, null),
"preview4",
"progress1",
1
).then(function(path) {
closeLoading(vm);
console.log(path);
if (fileLimit.show == "uploadImgMessage") {
vm.uploadImgMessage = false;
}
// else if (fileLimit.show == "uploadImgMessage2") {
// vm.uploadImgMessage2 = false;
// }
vm.formData[fileLimit.key] = path.fullPath;
vm.formData[fileLimit.more] = {
attachmentName: path.name,
attachmentExt: path.ext,
attachmentSize: path.size
};
vm.$message.success("上传成功");
});
}
};
};
return isJPG && isLt2M;
},
// 展开/收起 更多信息
toggleOtherContent() {
this.isShowOtherContent = !this.isShowOtherContent;
},
// 限制选择文件个数
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 100 个文件，您已经共选择了 ${files.length + fileList.length} 个文件！`);
},
// 删除按钮
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`);
},
//表单校验
submitForm(formName) {
this.needShowAuditMsg = false;
this.$refs[formName].validate(valid => {
if (valid) {
this.insertOrUpdate();
} else {
console.log("error submit!!");
}
this.needShowAuditMsg = true;
});
},
// 添加或修改课程（kind = 3）
insertOrUpdate() {
this.POST("contents/course/custom/info/insertOrUpdate", this.formData).then(res => {
if (res.code == "000000") {
if(this.courseId == 'add') {
this.step = 2;
} else {
this.close();
this.setKind(3);
}
}
});
},
// 返回到课程选择页面（kind = 3）
backToOrgCourse() {
this.close();
this.setKind(3);
},
// 关闭（“取消”按钮弹出来的）弹框
hideCancleTips() {
this.dialogObj.visible = false;
this.close();
},
// 预览视频
previewVideoAction(lecture) {
this.videoUrl = lecture.resourceModel.filePath;
this.isPreviewVideo = true;
},
// 删除本节视频
// TODO 要将删除的节ID放在删除的节里
deleteLecture(index) {
this.formData.courseCustomChapterModels[0].courseCustomLectureModelList.splice(index, 1);
},
// 上传课程封面图片
beforeUpload1(file) {
// const isLt50kb = file.size / 1024 < 50;
const isJPG = file.type === 'image/jpeg'
if(!isJPG) {
this.$message.error('只支持jpeg格式')
return;
}
var _img = new FileReader()
_img.readAsDataURL(file)
_img.onload = function(theFile) {
let image = new Image()
image.src = theFile.target.result
image.onload = function() {
let _this = this
if(_this.width != 740 || _this.height != 420) {
vm.$message.info("上传图片尺寸大小不合适，请重新上传")
}else {
vm.doUploadOSS(file, 1); //封面图片
}
}
}
},
// 上传讲师图片
beforeUpload2(file) {
// const isLt50kb = file.size / 1024 < 50;
const isJPG = file.type === 'image/jpeg'
if(!isJPG) {
this.$message.error('只支持jpeg格式')
return;
}
var _img = new FileReader()
_img.readAsDataURL(file)
_img.onload = function(theFile) {
let image = new Image()
image.src = theFile.target.result
image.onload = function() {
let _this = this
if(_this.width != 88 || _this.height != 88) {
vm.$message.info("上传图片尺寸大小不合适，请重新上传")
}else {
vm.doUploadOSS(file, 2); //封面图片
}
}
}
},
// （调用OSS API）开始上传
doUploadOSS(file, index) {
let self = this;
//上传 指定文件名
ossUpload(self, file, getFilePathForOSS(file), null, null, null).
then(function(path) {
let list = [{}];
// list[0].name = file.name;
// list[0].url = localStorage.getItem("resource_url") + path;
if (index === 1) {
} else if (index === 2) {
}
self.$message.success("上传成功");
});
return false;
},
}
};
</script>
<style scoped lang="scss">
.edit-course-wrapper {
.course-content {
// color: red;
.basic-item-icon {
position: relative;
margin-top: 20px;
.require {
position: absolute;
left: 40px;
top: 11px;
color: #f56c6c;
}
.upload-message {
position: absolute;
left: 160px;
top: 105px;
font-size: 12px;
color: #f56c6c;
}
.img-delete {
position: absolute;
left: 0px;
top: 0px;
width: 84px;
height: 100px;
background: #000;
opacity: 0.7;
z-index: 999;
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
}
}
.upload-tips {
width: 100%;
position: relative;
top: -10px;
font-size: 12px;
color: #979899;
// display: inline-block;
}
.custom-list {
// width: 100%;
width: 480px;
display: flex;
flex-direction: column;
border-radius: 3px;
border: 1px solid rgba(228,231,237,1);
padding: 20px;
font-size: 14px;
& > li {
margin: 10px 0;
}
.video {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.title {
display: inline-block;
width: 70px;
text-align: right;
margin-right: 10px;
}
.name {
cursor: pointer;
color: #5890DD;
}
img {
width: 12px;
height: 12px;
}
.delete {
position: relative;
top: 4px;
cursor: pointer;
width: 16px;
height: 16px;
}
}
.video-name {
.title {
display: inline-block;
width: 70px;
text-align: right;
margin-right: 10px;
}
}
}
}
.word-num {
font-size: 12px;
color: #999;
padding-top: 5px;
}
.bg-uploader {
img {
float: left;
}
.bg-img-wrapper {
.bg-img {
display: block;
width: 160px;
height: 90px;
}
.bg-img-doctor {
display: block;
width: 88px;
height: 88px;
}
}
.bg-video {
float: left;
width: 84px;
height: 100px;
}
}
.limit-text {
position: absolute;
top: 86px;
left: 0px;
font-size: 12px;
color: #979899;
}
.separator-line {
width: 100%;
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: space-between;
.center {
cursor: pointer;
width: 130px;
color: #666666;
img {
width: 12px;
}
}
.line-left,
.line-right {
// display: inline-block;
// width: 100%;
flex: 1;
border-bottom: 1px dashed #e4e7ed;
}
}
.tips {
width: 100%;
height: 32px;
line-height: 32px;
padding-left: 12px;
background: rgba(254, 250, 245, 1);
border-radius: 3px;
color: #e6a23c;
}
.valid-msg {
position: relative;
.error {
width: 370px;
position: absolute;
display: flex;
justify-content: space-between;
top: 29px;
font-size: 13px;
color: #ed3131;
.text {
flex: 1;
}
.cancle {
cursor: pointer;
width: 20px;
}
}
.edit-wrapper {
color: #449284;
.edit-img {
position: relative;
top: 2px;
width: 12px;
margin: 0 2px 0 4px;
}
}
.doctor-select-list {
width: 200px;
// max-height: 100px;
position: absolute;
z-index: 100;
background: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
// margin: 10px;
li {
padding-left: 20px;
cursor: pointer;
&:hover {
background: #f4f7fd;
}
&.doctor-selected {
background: #f4f7fd;
}
}
}
}
.upload-process {
margin: 10px 0 10px 10px;
display: block;
// width: 310px;
height: 4px;
background: #449284;
border-radius: 2px;
}
}
.course-content-step2 {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
.success-img {
width: 60px;
height: 60px;
}
.tips-1 {
margin-top: 30px;
font-size: 18px;
color: #303133;
}
.tips-2 {
margin-top: 4px;
margin-bottom: 40px;
font-size: 14px;
color: #999999;
}
}
}
</style>
src/components/education/custom-resource/edit-course-dialog copy.vue 已删除 100644 → 0
浏览文件 @ 092152c4
<template>
<div class="edit-course-wrapper dialog-title-border">
<el-dialog
ref="testDialogRef"
title="上传课程"
:visible="dialogVisible"
@close="close"
center
:close-on-click-modal="false"
:close-on-press-escape="false"
width="800px"
>
<div slot="title" style="text-align: left;">
<span style="font-weight: 700;">上传课程</span>
<span style="font-size: 12px;color: #ED3131;margin-left: 4px;"> 请认真核对上传内容，一旦提交后将不能修改</span>
</div>
<div v-show="step == 1" class="course-content">
<el-form
ref="formDataRef"
:model="formData"
:rules="rules"
label-width="120px"
class="basic-form"
>
<el-form-item label="课程名称：" prop="courseName" class="valid-msg">
<el-col :span="20">
<el-input
size="small"
v-model="formData.courseName"
placeholder="请输入课程名称"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">
{{(formData.courseName || '').replace(/\s+/g,"").length}}/25
</span>
<div v-show="needShowAuditMsg && formData.courseNameCheck" class="error">
<span>{{formData.courseNameCheck}}</span>
</div>
</el-col>
</el-form-item>
<el-form-item label="学科分类：" prop="subjectIdList" class="valid-msg">
<el-col :span="18">
<!-- :props="{ expandTrigger: 'hover' }" -->
<el-cascader
style="width: 360px"
v-model="formData.subjectIdList"
:options="labelOptions"
:props="{ value: 'id', label: 'name', children: 'subList'}"
>
</el-cascader>
</el-col>
</el-form-item>
<el-form-item label="开放范围：" prop="shareType">
<el-radio-group v-model="formData.shareType">
<el-radio :label="1">机构共享</el-radio>
</el-radio-group>
</el-form-item>
<div class="basic-item-icon">
<span class="require">*</span>
<el-form-item label="课程视频：" prop="range" >
<el-upload
class="upload-video"
action="#"
:before-upload="beforeUploadVideo"
:limit="3"
:on-exceed="handleExceed"
:show-file-list="false"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
<span class="upload-tips">只支持MP4格式，课程视频最多上传100个，单文件最大2G</span>
<ul v-show="formData.courseCustomChapterModels[0].courseCustomLectureModelList.length" class="custom-list">
<li v-for="(lecture, index) in formData.courseCustomChapterModels[0].courseCustomLectureModelList" :key="index" class="valid-msg">
<ul class="video">
<li>
<span class="title">视频{{index + 1}}</span>
<img src="../../../assets/image/phrase3/icon-pin.png" />
<span class="name" @click="previewVideoAction(lecture)">{{lecture.resourceModel.name}}</span>
</li>
<li>
<img @click="deleteLecture(index)" class="delete" src="../../../assets/image/phrase3/close.png" />
</li>
</ul>
<div class="video-name">
<span class="title">
<span >*</span>
<span class="video-title">视频名称</span>
</span>
<el-input
size="small"
v-model="lecture.name"
placeholder="请输入课程名称"
style="width: 260px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">
{{(lecture.name || '').replace(/\s+/g,"").length}}/25
</span>
</div>
<div v-show="needShowAuditMsg && !formData.courseCustomChapterModels[0].courseCustomLectureModelList[index].nameCheck" class="error-video">
<span>11{{formData.courseCustomChapterModels[0].courseCustomLectureModelList[index].nameCheck}}</span>
</div>
</li>
<span v-show="needShowUploadProcess" class="upload-process" :style="{'width': (uploadProgress/100 * 340) + 'px'}"></span>
</ul>
<span v-if="!formData.courseCustomChapterModels[0].courseCustomLectureModelList.length" v-show="needShowUploadProcess" class="upload-process" :style="{'width': (uploadProgress/100 * 340) + 'px'}"></span>
</div>
</el-upload>
</el-form-item>
</div>
<div class="other-content valid-msg" v-show="isShowOtherContent">
<div class="tips">注：以下信息为非必填项，您也可以根据实际情况修改</div>
<div class="basic-item-icon">
<!-- <span class="require">*</span> -->
<el-form-item label="课程封面：">
<el-upload
v-model="formData.courseIntroImage"
class="bg-uploader"
action="#"
accept="image/*"
:show-file-list="false"
:before-upload="beforeUpload1"
:disabled="disabled"
>
<div class="bg-img-wrapper">
<img
v-if="formData.courseIntroImage"
@mouseover.stop="imgMouseOver=true"
:src="formData.courseIntroImage"
class="bg-img"
/>
<img
v-if="!formData.courseIntroImage"
class="bg-img"
src="../../../assets/image/small.png"
/>
</div>
</el-upload>
<div class="limit-text">尺寸：750*420，只支持jpeg格式</div>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="课程难度：">
<el-radio-group v-model="formData.difficultyLevel">
<el-radio :label="1">初级</el-radio>
<el-radio :label="2">中级</el-radio>
<el-radio :label="3">高级</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="讲师名称：" class="valid-msg">
<el-col :span="18">
<el-input
size="small"
v-model="formData.courseCustomDoctorModels[0].courseDoctorName"
placeholder="请输入讲师名称"
style="width: 360px"
maxlength="25"
@focus="isShowDoctorList=true"
@input="filterDoctorName"
@blur="doctorNameInputBlur"
:disabled="disabled"
></el-input>
<ul v-show="isShowDoctorList" class="doctor-select-list">
<li
v-for="(item, index) in doctorNameList"
:key="index"
@click="selectDoctor(item.courseDoctorName, index)"
:class="{'doctor-selected': item.seleted}"
>
<span v-show="item.show">{{item.courseDoctorName || '测试名'}}</span>
</li>
</ul>
<span
class="word-num"
>{{(formData.courseCustomDoctorModels[0] && formData.courseCustomDoctorModels[0].courseDoctorName || '').replace(/\s+/g,"").length}}/25</span>
</el-col>
</el-form-item>
<div class="basic-item-icon">
<el-form-item label="讲师头像：">
<el-upload
v-model="formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl"
class="bg-uploader"
action="#"
accept="image/*"
:show-file-list="false"
:before-upload="beforeUpload2"
:disabled="disabled"
>
<div class="bg-img-wrapper">
<img
v-if="formData.courseCustomDoctorModels && formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl || ''"
@mouseover.stop="imgMouseOver=true"
:src="formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl"
class="bg-img-doctor"
/>
<img
v-if="!(formData.courseCustomDoctorModels && formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl || '')"
class="bg-img-doctor"
src="../../../assets/image/small.png"
/>
</div>
</el-upload>
<div class="limit-text">尺寸：88*88，只支持jpeg格式</div>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="所属机构：">
<el-col :span="18">
<el-input
size="small"
v-model="formData.courseCustomDoctorModels[0].courseDoctorHospital"
placeholder="请输入所属机构"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span
class="word-num"
>{{(formData.courseCustomDoctorModels && formData.courseCustomDoctorModels[0].courseDoctorHospital || '').replace(/\s+/g,"").length}}/25</span>
</el-col>
</el-form-item>
<el-form-item label="课程简介：">
<el-col :span="18">
<el-input
size="small"
type="textarea"
maxlength="200"
:autosize="{ minRows: 5}"
placeholder="请输入课程简介"
v-model="formData.courseIntro"
style="width:90%;"
></el-input>
<span
class="word-num"
>{{(formData.courseIntro || '').replace(/\s+/g,"").length}}/200</span>
</el-col>
</el-form-item>
</div>
<!-- 更多信息 -->
<div class="separator-line">
<span class="line-left"></span>
<div @click="toggleOtherContent" class="center">
<span>展开更多信息</span>
<img v-show="isShowOtherContent" src="../../../assets/image/phrase3/arrow-up.png" />
<img v-show="!isShowOtherContent" src="../../../assets/image/phrase3/arrow-down.png" />
</div>
<span class="line-right"></span>
</div>
</el-form>
</div>
<div v-show="step == 2" class="course-content-step2">
<img class="success-img" src="../../../assets/image/phrase3/icon-audit-success.png" />
<span class="tips-1">您上传的课程已成功提交，预计在3-5个工作日内完成审核</span>
<span class="tips-2">审核通过后，您才可以选择课程完成项目配置。如有任何疑问可联系云鹊医400-920-8877</span>
<el-button type="primary" size="small" icon="el-icon-back" @click="backToOrgCourse">返回机构课程</el-button>
</div>
<div v-show="step == 1" slot="footer" class="dialog-footer">
<el-button @click="dialogObj.visible=true">取 消</el-button>
<el-button type="primary" @click="submitForm('formDataRef')">确 定</el-button>
</div>
</el-dialog>
<DialogComponet :dialogObj="dialogObj" @hide="hideCancleTips" @confirm="dialogObj.visible=false"></DialogComponet>
<PreviewVideo :dialogVisible="isPreviewVideo" :videoUrl="videoUrl" @close="isPreviewVideo=false"></PreviewVideo>
<el-dialog
title="拒绝原因"
:visible="showCropper"
width="1000px"
center>
<cropper-two
:cropOption="cropOption"
@getCropImg="getCropImg(arguments)"
:originImg="slide2.oriUrl"
:previewImg="slide2.preUrl"
/>
</el-dialog>
<!-- <button @click="previewVideoAction">test video</button> -->
</div>
</template>
<script>
import PreviewVideo from "@/components/education/custom-resource/preview-video";
import PreviewProtocol from "@/components/education/custom-resource/preview-protocol";
import PreviewEditCourse from "@/components/education/custom-resource/edit-course-dialog";
import DialogComponet from "@/components/education/template/dialog";
import CropperTwo from '@/components/common/cropper.two.vue'
import { doUpload, getFilePath } from "@/utils/qiniu-util";
import { openLoading, closeLoading, getQiniuToken1 } from "@/utils/utils";
import { isEmptyUtils } from "@/utils/index";
import { mapActions } from 'vuex';
import { ossUpload, getFilePathForOSS } from "@/utils/oss/ossUtil";
let vm = null;
export default {
data() {
let checkCourseName = (rule, value, callback) => {
// 如果有审核的信息，则直接报错
if (!value && this.needCheckField) {
callback(new Error("请输入课程名称"));
} else {
callback();
}
};
return {
slide2: {
oriUrl: 'https://avatars1.githubusercontent.com/u/23690568?s=460&v=4', // 原图
preUrl: 'https://avatars1.githubusercontent.com/u/23690568?s=460&v=4' // 裁剪后的预览图片，初始化为原图
},
showCropper: false,
cropOption: {
offset_x: 10,
offset_y: 10,
width: 750,
height: 420
},
step: 1,
needCheckField: false,
needShowAuditMsg: true,
needShowUploadProcess: false,
disabled: false,
formDataBase: {
checkStatus: 0,
courseCustomChapterModels: [
{
courseCustomLectureModelList: [],
id: null,
name: "视频课程"
}
],
courseCustomDoctorModels: [
{
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
}
],
courseId: null,
courseIntro: "",
courseIntroCheck: "",
courseIntroImage:
"https://test1-file.yunqueyi.com/image/png/common/202006201528136.png",
courseIntroImageCheck: "",
courseName: "",
courseNameCheck: "",
deleteCustomLectureIds: [],
difficultyLevel: 1,
shareType: 1,
subjectIdList: []
},
formData: {
checkStatus: 0,
courseCustomChapterModels: [
{
courseCustomLectureModelList: [],
id: null,
name: "视频课程"
}
],
courseCustomDoctorModels: [
{
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
}
],
courseId: null,
courseIntro: "",
courseIntroCheck: "",
courseIntroImage:
"https://test1-file.yunqueyi.com/image/png/common/202006201528136.png",
courseIntroImageCheck: "",
courseName: "",
courseNameCheck: "",
deleteCustomLectureIds: [],
difficultyLevel: 1,
shareType: 1,
subjectIdList: []
},
uploadImgMessage: false,
imgMouseOver: false,
rules: {
courseName: [
{ required: true, message: " " },
{ validator: checkCourseName }
],
subjectIdList: [
{ required: true, message: "请输入课程名称" }
],
shareType: [
{ required: true, message: "请选择开放范围" }
]
},
labelOptions: [],
isShowOtherContent: false,
fileList: [
],
projectBanner:
"https://file.yunqueyi.com/h5/images/cme/project-banner.png",
doctorHeader: "https://file.yunqueyi.com/h5/images/cme/doctor-header.png",
doctorNameList: [
{ courseDoctorName: "333", show: true, seleted: false },
{ courseDoctorName: "334", show: true, seleted: false },
{ courseDoctorName: "335", show: true, seleted: false },
{ courseDoctorName: "336", show: true, seleted: false }
],
isShowDoctorList: false,
isPreviewVideo: false,
videoUrl: "",
orgCourseInfo: {
defaultDoctor: {
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
},
doctorModelList: [
{
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
}
],
limitModel: {
maxLimitOneVideoSize: 2147483648,
maxLimitVideoCount: 100,
maxStorageSpace: 5368709120,
usedStorageSpace: 1021842989
}
},
uploadProgress: 0,
dialogObj: {
visible: false,
title: "确定取消吗？",
message: "发布后,项目将进入审核中,待审核完成后学员可在云鹊医App上参加培训学习",
tip: "",
confirmMsg: "取 消",
hideMsg: "确 定"
},
};
},
props: {
dialogVisible: {
type: Boolean,
default: false
},
courseId: {
type: String | Number,
default: 0
}
},
computed: {},
watch: {
dialogVisible(isVisible) {
this.formData = JSON.parse(JSON.stringify(this.formDataBase));
if (isVisible) {
if (this.courseId == 0) {
this.initAdd(this.courseId);
} else {
this.initModify(this.courseId);
}
}
},
},
components: {
PreviewVideo,
PreviewEditCourse,
DialogComponet,
CropperTwo
},
created() {
vm = this;
// this.initAdd();
},
mounted() {
this.getLabelList();
},
methods: {
...mapActions(['setKind']),
getCropImg (argument) {
this.showCropper = false;
console.log(argument[0], '#####', argument[1]);
this.slide2.preUrl = argument[0]
this.cropData = argument[1]
},
// 创建课程页面的初始信息
initOrgCourseInfo() {
vm.GET("contents/course/custom/info/init", { setEntry: true }).then(
res => {
if (res.code == "000000") {
this.orgCourseInfo = res.data;
this.formData.courseCustomDoctorModels[0] = this.orgCourseInfo.defaultDoctor;
this.formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl =
this.orgCourseInfo.defaultDoctor.courseDoctorAvatarUrl ||
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png";
this.doctorNameList = this.convertDNameToSelectOpt(
this.orgCourseInfo.doctorModelList
);
+this.courseId && this.getCourseInfoById(this.courseId);
}
}
);
},
// 将医生名称进行处理
convertDNameToSelectOpt(doctorModelList) {
doctorModelList.forEach(item => {
item.show = true;
item.seleted = false;
});
return doctorModelList;
},
// 添加时初始化
initAdd() {
console.log("in initAdd");
this.step = 1;
this.needShowAuditMsg = false;
this.initOrgCourseInfo();
},
initModify() {
this.needShowAuditMsg = true;
console.log("in initModify");
this.initOrgCourseInfo();
},
// 创建课程页面的初始信息
getCourseInfoById(courseId) {
vm.GET(`contents/course/custom/info/${courseId}`)
.then( res => {
if ( res.code == "000000") {
this.formData = res.data;
}
}
);
},
// 过滤医生信息
filterDoctorName(value) {
this.doctorNameList.forEach(item => {
if (value) {
if ((item.value + "").indexOf(value) == -1) {
item.show = false;
} else {
item.show = true;
}
if (item.value == value) {
item.seleted = true;
} else {
item.seleted = false;
}
} else {
item.show = true;
}
});
},
// 当选择医生的焦点失去时，要反选医生信息
doctorNameInputBlur() {
setTimeout(() => {
this.isShowDoctorList = false;
this.selectDoctorByName(
this.formData.courseCustomDoctorModels[0].courseDoctorName
);
}, 200);
},
// 根据姓名反选医生信息
// TODO 尝试找到完全匹配的医生
selectDoctorByName(name) {
},
// 选择其中一个
selectDoctor(name) {
console.log(name);
this.formData.courseCustomDoctorModels[0].courseDoctorName = name;
this.selectDoctorByName(name);
},
// 关闭当前弹框
close() {
this.$emit("close");
},
// 获取学科列表
getLabelList() {
let req = {};
this.GET("aggregate/content/labelList", req).then(res => {
if (res.code == "000000") {
this.convertLabelList(res.data);
}
});
},
// 将所有子分类中的“全部”去掉
convertLabelList(labelList) {
let newLabelList = [];
labelList.forEach(item => {
item.subList = item.subList.slice(1);
});
this.labelOptions = labelList;
},
// 上传视频（mp4）
beforeUploadVideo(file) {
// orgCourseInfo.limitModel: {
// maxLimitOneVideoSize: 2147483648,
// maxLimitVideoCount: 100,
// maxStorageSpace: 5368709120,
// usedStorageSpace: 1021842989
// }
console.log(file);
const isMP4 = file.type === "video/mp4";
const isGt = file.size > this.orgCourseInfo.limitModel.maxLimitOneVideoSize;
const isGtMaxNum = this.formData.courseCustomChapterModels[0].courseCustomLectureModelList.length >= 100;
const usedGtMaxStore = this.orgCourseInfo.limitModel.usedStorageSpace + file.size > this.orgCourseInfo.limitModel.maxStorageSpace;
if (isGt || !isMP4 || isGtMaxNum) {
this.$message.error("视频不符合规范，请根据规范上传视频");
return;
}
if(usedGtMaxStore) {
this.$message.error("个人存储空间已不够上传此视频");
return;
}
// 直接上传
this.needShowUploadProcess = true;
doUpload(
vm,
file,
getFilePath(file, null),
"preview4",
"progress",
""
).then(function(path) {
// closeLoading(vm);
console.log('vm.uploadProgress', vm.uploadProgress);
console.log(path);
let uploadResourceParam = {
formatType: path.ext,
name: path.name.substring(path.name.length - 25), //path.name,
qCloudUrl : path.fullPath,
size : path.size,
fileType : 1,
status : "success",
uid : new Date().getTime()
}
vm.needShowUploadProcess = false;
vm.uploadProgress = 0;
vm.insertResourceAction(uploadResourceParam);
});
},
// 上传资源（视频）后，生存对应的节
insertResourceAction(uploadResourceParam) {
this.POST("contents/course/custom/info/insertResource", [uploadResourceParam]).then(res => {
if (res.code == "000000") {
let cName = res.data.resourceModelList[0].name;
// cName = cName.substr(0, cName.lastIndexOf('.'));
let lectureObj = {
id: null,
name: cName,
nameCheck: "",
contentCheck: "",
resourceModel: {}
}
this.orgCourseInfo.limitModel = res.data.limitModel;
lectureObj.resourceModel = res.data && res.data.resourceModelList[0];
this.formData.courseCustomChapterModels[0].courseCustomLectureModelList.push(lectureObj);
}
});
},
//上传列表图片
beforeUploadListPic(file) {
let fileLimit = {
width: 230,
height: 172,
size: 0.5,
sizeText: "500K",
key: "attachmentUrl",
more: "attachmentMore1",
show: "uploadImgMessage"
};
vm.beforeAvatarUpload2(file, fileLimit);
// vm.beforeAvatarUpload(file, fileLimit);
},
//上传图片校验
beforeAvatarUpload2(file, fileLimit) {
console.log();
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
console.log("isJPG", isJPG, "isPNG", isPNG, "isLt2M", isLt2M);
// if (!isJPG && !isPNG) {
// vm.$message.error("图片不符合规范，请根据规范上传图片");
// return;
// }
// if (!isLt2M) {
// vm.$message.error("图片不符合规范，请根据规范上传图片 ");
// return;
// }
let _img = new FileReader();
_img.readAsDataURL(file);
console.log('readAsDataURL', _img, file);
_img.onload = function(theFile) {
let image = new Image();
image.src = theFile.target.result;
vm.slide2.oriUrl = theFile.target.result;
vm.showCropper = true;
console.log('readAsDataURL222', _img.width, file, theFile);
image.onload = function() {
console.log('image.onload', image);
let _vm = this;
if (
false
// true ||
// _vm.width != fileLimit.width ||
// _vm.height != fileLimit.height
) {
vm.$message.error("图片不符合规范，请根据规范上传图片");
} else {
// openLoading(vm);
// doUpload(
// vm,
// file,
// getFilePath(file, null),
// "preview4",
// "progress1",
// 1
// ).then(function(path) {
// closeLoading(vm);
// console.log(path);
// if (fileLimit.show == "uploadImgMessage") {
// vm.uploadImgMessage = false;
// }
// // else if (fileLimit.show == "uploadImgMessage2") {
// // vm.uploadImgMessage2 = false;
// // }
// vm.formData[fileLimit.key] = path.fullPath;
// vm.formData[fileLimit.more] = {
// attachmentName: path.name,
// attachmentExt: path.ext,
// attachmentSize: path.size
// };
// vm.$message.success("上传成功");
// });
}
};
};
return isJPG && isLt2M;
},
//上传图片校验
beforeAvatarUpload(file, fileLimit) {
console.log();
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
console.log("isJPG", isJPG, "isPNG", isPNG, "isLt2M", isLt2M);
// if (!isJPG && !isPNG) {
// vm.$message.error("图片不符合规范，请根据规范上传图片");
// return;
// }
// if (!isLt2M) {
// vm.$message.error("图片不符合规范，请根据规范上传图片 ");
// return;
// }
let _img = new FileReader();
_img.readAsDataURL(file);
_img.onload = function(theFile) {
let image = new Image();
image.src = theFile.target.result;
image.onload = function() {
let _vm = this;
if (
false
// true ||
// _vm.width != fileLimit.width ||
// _vm.height != fileLimit.height
) {
vm.$message.error("图片不符合规范，请根据规范上传图片");
} else {
openLoading(vm);
doUpload(
vm,
file,
getFilePath(file, null),
"preview4",
"progress1",
1
).then(function(path) {
closeLoading(vm);
console.log(path);
if (fileLimit.show == "uploadImgMessage") {
vm.uploadImgMessage = false;
}
// else if (fileLimit.show == "uploadImgMessage2") {
// vm.uploadImgMessage2 = false;
// }
vm.formData[fileLimit.key] = path.fullPath;
vm.formData[fileLimit.more] = {
attachmentName: path.name,
attachmentExt: path.ext,
attachmentSize: path.size
};
vm.$message.success("上传成功");
});
}
};
};
return isJPG && isLt2M;
},
// 展开/收起 更多信息
toggleOtherContent() {
this.isShowOtherContent = !this.isShowOtherContent;
},
// 限制选择文件个数
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 100 个文件，您已经共选择了 ${files.length + fileList.length} 个文件！`);
},
// 删除按钮
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`);
},
//表单校验
submitForm(formName) {
this.needShowAuditMsg = false;
this.$refs[formName].validate(valid => {
if (valid) {
this.insertOrUpdate();
} else {
console.log("error submit!!");
}
this.needShowAuditMsg = true;
});
},
// 添加或修改课程（kind = 3）
insertOrUpdate() {
this.POST("contents/course/custom/info/insertOrUpdate", this.formData).then(res => {
if (res.code == "000000") {
if(this.courseId == 'add') {
this.step = 2;
} else {
this.close();
this.setKind(3);
}
}
});
},
// 返回到课程选择页面（kind = 3）
backToOrgCourse() {
this.close();
this.setKind(3);
},
// 关闭（“取消”按钮弹出来的）弹框
hideCancleTips() {
this.dialogObj.visible = false;
this.close();
},
// 预览视频
previewVideoAction(lecture) {
this.videoUrl = lecture.resourceModel.filePath;
this.isPreviewVideo = true;
},
// 删除本节视频
// TODO 要将删除的节ID放在删除的节里
deleteLecture(index) {
this.formData.courseCustomChapterModels[0].courseCustomLectureModelList.splice(index, 1);
},
// 上传课程封面图片
beforeUpload1(file) {
// const isLt50kb = file.size / 1024 < 50;
const isJPG = file.type === 'image/jpeg'
if(!isJPG) {
this.$message.error('只支持jpeg格式')
return;
}
var _img = new FileReader()
_img.readAsDataURL(file)
_img.onload = function(theFile) {
let image = new Image()
image.src = theFile.target.result
image.onload = function() {
let _this = this
if(_this.width != 740 || _this.height != 420) {
vm.$message.info("上传图片尺寸大小不合适，请重新上传")
}else {
vm.doUploadOSS(file, 1); //封面图片
}
}
}
},
// 上传讲师图片
beforeUpload2(file) {
// const isLt50kb = file.size / 1024 < 50;
const isJPG = file.type === 'image/jpeg'
if(!isJPG) {
this.$message.error('只支持jpeg格式')
return;
}
var _img = new FileReader()
_img.readAsDataURL(file)
_img.onload = function(theFile) {
let image = new Image()
image.src = theFile.target.result
image.onload = function() {
let _this = this
if(_this.width != 88 || _this.height != 88) {
vm.$message.info("上传图片尺寸大小不合适，请重新上传")
}else {
vm.doUploadOSS(file, 2); //封面图片
}
}
}
},
// （调用OSS API）开始上传
doUploadOSS(file, index) {
let self = this;
//上传 指定文件名
ossUpload(self, file, getFilePathForOSS(file), null, null, null).
then(function(path) {
let list = [{}];
// list[0].name = file.name;
// list[0].url = localStorage.getItem("resource_url") + path;
if (index === 1) {
} else if (index === 2) {
}
self.$message.success("上传成功");
});
return false;
},
}
};
</script>
<style scoped lang="scss">
.edit-course-wrapper {
.course-content {
// color: red;
.basic-item-icon {
position: relative;
margin-top: 20px;
.require {
position: absolute;
left: 40px;
top: 11px;
color: #f56c6c;
}
.upload-message {
position: absolute;
left: 160px;
top: 105px;
font-size: 12px;
color: #f56c6c;
}
.img-delete {
position: absolute;
left: 0px;
top: 0px;
width: 84px;
height: 100px;
background: #000;
opacity: 0.7;
z-index: 999;
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
}
}
.upload-tips {
width: 100%;
position: relative;
top: -10px;
font-size: 12px;
color: #979899;
// display: inline-block;
}
.custom-list {
// width: 100%;
width: 480px;
display: flex;
flex-direction: column;
border-radius: 3px;
border: 1px solid rgba(228,231,237,1);
padding: 20px;
font-size: 14px;
& > li {
margin: 10px 0;
}
.video {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.title {
display: inline-block;
width: 70px;
text-align: right;
margin-right: 10px;
}
.name {
cursor: pointer;
color: #5890DD;
}
img {
width: 12px;
height: 12px;
}
.delete {
position: relative;
top: 4px;
cursor: pointer;
width: 16px;
height: 16px;
}
}
.video-name {
.title {
display: inline-block;
width: 70px;
text-align: right;
margin-right: 10px;
}
}
}
}
.word-num {
font-size: 12px;
color: #999;
padding-top: 5px;
}
.bg-uploader {
img {
float: left;
}
.bg-img-wrapper {
.bg-img {
display: block;
width: 160px;
height: 90px;
}
.bg-img-doctor {
display: block;
width: 88px;
height: 88px;
}
}
.bg-video {
float: left;
width: 84px;
height: 100px;
}
}
.limit-text {
position: absolute;
top: 86px;
left: 0px;
font-size: 12px;
color: #979899;
}
.separator-line {
width: 100%;
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: space-between;
.center {
cursor: pointer;
width: 130px;
color: #666666;
img {
width: 12px;
}
}
.line-left,
.line-right {
// display: inline-block;
// width: 100%;
flex: 1;
border-bottom: 1px dashed #e4e7ed;
}
}
.tips {
width: 100%;
height: 32px;
line-height: 32px;
padding-left: 12px;
background: rgba(254, 250, 245, 1);
border-radius: 3px;
color: #e6a23c;
}
.valid-msg {
position: relative;
.error {
width: 370px;
position: absolute;
display: flex;
justify-content: space-between;
top: 29px;
font-size: 13px;
color: #ed3131;
.text {
flex: 1;
}
.cancle {
cursor: pointer;
width: 20px;
}
}
.edit-wrapper {
color: #449284;
.edit-img {
position: relative;
top: 2px;
width: 12px;
margin: 0 2px 0 4px;
}
}
.doctor-select-list {
width: 200px;
// max-height: 100px;
position: absolute;
z-index: 100;
background: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
// margin: 10px;
li {
padding-left: 20px;
cursor: pointer;
&:hover {
background: #f4f7fd;
}
&.doctor-selected {
background: #f4f7fd;
}
}
}
}
.upload-process {
margin: 10px 0 10px 10px;
display: block;
// width: 310px;
height: 4px;
background: #449284;
border-radius: 2px;
}
}
.course-content-step2 {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
.success-img {
width: 60px;
height: 60px;
}
.tips-1 {
margin-top: 30px;
font-size: 18px;
color: #303133;
}
.tips-2 {
margin-top: 4px;
margin-bottom: 40px;
font-size: 14px;
color: #999999;
}
}
}
</style>
src/components/education/custom-resource/edit-course-dialog.vue
浏览文件 @ 25d8463d
...@@ -133,7 +133,7 @@ ...@@ -133,7 +133,7 @@
<img <img
v-if="formData.courseIntroImage" v-if="formData.courseIntroImage"
@mouseover.stop="imgMouseOver=true" @mouseover.stop="imgMouseOver=true"
:src="formData.courseIntroImage" :src="getOSSDomain(formData.courseIntroImage)"
class="bg-img" class="bg-img"
/> />
<img <img
...@@ -199,7 +199,7 @@ ...@@ -199,7 +199,7 @@
<img <img
v-if="formData.courseCustomDoctorModels && formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl || ''" v-if="formData.courseCustomDoctorModels && formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl || ''"
@mouseover.stop="imgMouseOver=true" @mouseover.stop="imgMouseOver=true"
:src="formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl" :src="getOSSDomain(formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl)"
class="bg-img-doctor" class="bg-img-doctor"
/> />
<img <img
...@@ -271,20 +271,6 @@ ...@@ -271,20 +271,6 @@
</el-dialog> </el-dialog>
<DialogComponet :dialogObj="dialogObj" @hide="hideCancleTips" @confirm="dialogObj.visible=false"></DialogComponet> <DialogComponet :dialogObj="dialogObj" @hide="hideCancleTips" @confirm="dialogObj.visible=false"></DialogComponet>
<PreviewVideo :dialogVisible="isPreviewVideo" :videoUrl="videoUrl" @close="isPreviewVideo=false"></PreviewVideo> <PreviewVideo :dialogVisible="isPreviewVideo" :videoUrl="videoUrl" @close="isPreviewVideo=false"></PreviewVideo>
<!-- <el-dialog
title="拒绝原因"
:visible="showCropper"
width="1000px"
center>
<cropper-two
:cropOption="cropOption"
@getCropImg="getCropImg(arguments)"
:originImg="slide2.oriUrl"
:previewImg="slide2.preUrl"
/>
</el-dialog> -->
<!-- <button @click="previewVideoAction">test video</button> -->
</div> </div>
</template> </template>
<script> <script>
...@@ -292,10 +278,9 @@ import PreviewVideo from "@/components/education/custom-resource/preview-video"; ...@@ -292,10 +278,9 @@ import PreviewVideo from "@/components/education/custom-resource/preview-video";
import PreviewProtocol from "@/components/education/custom-resource/preview-protocol"; import PreviewProtocol from "@/components/education/custom-resource/preview-protocol";
import PreviewEditCourse from "@/components/education/custom-resource/edit-course-dialog"; import PreviewEditCourse from "@/components/education/custom-resource/edit-course-dialog";
import DialogComponet from "@/components/education/template/dialog"; import DialogComponet from "@/components/education/template/dialog";
import CropperTwo from '@/components/common/cropper.two.vue'
import { doUpload, getFilePath } from "@/utils/qiniu-util"; import { doUpload, getFilePath } from "@/utils/qiniu-util";
import { openLoading, closeLoading, getQiniuToken1 } from "@/utils/utils"; import { openLoading, closeLoading, getQiniuToken1 } from "@/utils/utils";
import { isEmptyUtils } from "@/utils/index"; import { isEmptyUtils, getOSSImgUrl } from "@/utils/index";
import { mapActions } from 'vuex'; import { mapActions } from 'vuex';
import { ossUpload, getFilePathForOSS } from "@/utils/oss/ossUtil"; import { ossUpload, getFilePathForOSS } from "@/utils/oss/ossUtil";
let vm = null; let vm = null;
...@@ -310,10 +295,6 @@ export default { ...@@ -310,10 +295,6 @@ export default {
} }
}; };
return { return {
// slide2: {
// oriUrl: 'https://avatars1.githubusercontent.com/u/23690568?s=460&v=4', // 原图
// preUrl: 'https://avatars1.githubusercontent.com/u/23690568?s=460&v=4' // 裁剪后的预览图片，初始化为原图
// },
showCropper: false, showCropper: false,
cropOption: { cropOption: {
offset_x: 10, offset_x: 10,
...@@ -337,8 +318,7 @@ export default { ...@@ -337,8 +318,7 @@ export default {
], ],
courseCustomDoctorModels: [ courseCustomDoctorModels: [
{ {
courseDoctorAvatarUrl: courseDoctorAvatarUrl: "/h5/images/cme/doctor-header.png",
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "", courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "", courseDoctorHospital: "",
courseDoctorHospitalCheck: "", courseDoctorHospitalCheck: "",
...@@ -350,8 +330,7 @@ export default { ...@@ -350,8 +330,7 @@ export default {
courseId: null, courseId: null,
courseIntro: "", courseIntro: "",
courseIntroCheck: "", courseIntroCheck: "",
courseIntroImage: courseIntroImage: "/h5/images/cme/project-banner.png",
"https://test1-file.yunqueyi.com/image/png/common/202006201528136.png",
courseIntroImageCheck: "", courseIntroImageCheck: "",
courseName: "", courseName: "",
courseNameCheck: "", courseNameCheck: "",
...@@ -371,8 +350,7 @@ export default { ...@@ -371,8 +350,7 @@ export default {
], ],
courseCustomDoctorModels: [ courseCustomDoctorModels: [
{ {
courseDoctorAvatarUrl: courseDoctorAvatarUrl: "/h5/images/cme/doctor-header.png",
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "", courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "", courseDoctorHospital: "",
courseDoctorHospitalCheck: "", courseDoctorHospitalCheck: "",
...@@ -384,8 +362,7 @@ export default { ...@@ -384,8 +362,7 @@ export default {
courseId: null, courseId: null,
courseIntro: "", courseIntro: "",
courseIntroCheck: "", courseIntroCheck: "",
courseIntroImage: courseIntroImage: "/h5/images/cme/project-banner.png",
"https://test1-file.yunqueyi.com/image/png/common/202006201528136.png",
courseIntroImageCheck: "", courseIntroImageCheck: "",
courseName: "", courseName: "",
courseNameCheck: "", courseNameCheck: "",
...@@ -412,14 +389,8 @@ export default { ...@@ -412,14 +389,8 @@ export default {
isShowOtherContent: false, isShowOtherContent: false,
fileList: [ fileList: [
], ],
projectBanner:
"https://file.yunqueyi.com/h5/images/cme/project-banner.png",
doctorHeader: "https://file.yunqueyi.com/h5/images/cme/doctor-header.png",
doctorNameList: [ doctorNameList: [
{ courseDoctorName: "333", show: true, seleted: false }, // { courseDoctorName: "333", show: true, seleted: false },
{ courseDoctorName: "334", show: true, seleted: false },
{ courseDoctorName: "335", show: true, seleted: false },
{ courseDoctorName: "336", show: true, seleted: false }
], ],
isShowDoctorList: false, isShowDoctorList: false,
...@@ -428,8 +399,7 @@ export default { ...@@ -428,8 +399,7 @@ export default {
orgCourseInfo: { orgCourseInfo: {
defaultDoctor: { defaultDoctor: {
courseDoctorAvatarUrl: courseDoctorAvatarUrl: "/h5/images/cme/project-banner.png",
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "", courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "", courseDoctorHospital: "",
courseDoctorHospitalCheck: "", courseDoctorHospitalCheck: "",
...@@ -439,8 +409,7 @@ export default { ...@@ -439,8 +409,7 @@ export default {
}, },
doctorModelList: [ doctorModelList: [
{ {
courseDoctorAvatarUrl: courseDoctorAvatarUrl: "/h5/images/cme/doctor-header.png",
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "", courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "", courseDoctorHospital: "",
courseDoctorHospitalCheck: "", courseDoctorHospitalCheck: "",
...@@ -494,7 +463,6 @@ export default { ...@@ -494,7 +463,6 @@ export default {
PreviewVideo, PreviewVideo,
PreviewEditCourse, PreviewEditCourse,
DialogComponet, DialogComponet,
CropperTwo
}, },
created() { created() {
vm = this; vm = this;
...@@ -506,13 +474,6 @@ export default { ...@@ -506,13 +474,6 @@ export default {
methods: { methods: {
...mapActions(['setKind']), ...mapActions(['setKind']),
// getCropImg (argument) {
// this.showCropper = false;
// console.log(argument[0], '#####', argument[1]);
// this.slide2.preUrl = argument[0]
// this.cropData = argument[1]
// },
// 创建课程页面的初始信息 // 创建课程页面的初始信息
initOrgCourseInfo() { initOrgCourseInfo() {
vm.GET("contents/course/custom/info/init", { setEntry: true }).then( vm.GET("contents/course/custom/info/init", { setEntry: true }).then(
...@@ -521,8 +482,7 @@ export default { ...@@ -521,8 +482,7 @@ export default {
this.orgCourseInfo = res.data; this.orgCourseInfo = res.data;
this.formData.courseCustomDoctorModels[0] = this.orgCourseInfo.defaultDoctor; this.formData.courseCustomDoctorModels[0] = this.orgCourseInfo.defaultDoctor;
this.formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl = this.formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl =
this.orgCourseInfo.defaultDoctor.courseDoctorAvatarUrl || this.orgCourseInfo.defaultDoctor.courseDoctorAvatarUrl || "/h5/images/cme/doctor-header.png";
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png";
this.doctorNameList = this.convertDNameToSelectOpt( this.doctorNameList = this.convertDNameToSelectOpt(
this.orgCourseInfo.doctorModelList this.orgCourseInfo.doctorModelList
); );
...@@ -777,8 +737,6 @@ export default { ...@@ -777,8 +737,6 @@ export default {
this.$message.error('只支持jpeg格式') this.$message.error('只支持jpeg格式')
return; return;
} }
// vm.doUploadOSS(file, 1); //封面图片
// return;
var _img = new FileReader() var _img = new FileReader()
_img.readAsDataURL(file) _img.readAsDataURL(file)
...@@ -820,6 +778,10 @@ export default { ...@@ -820,6 +778,10 @@ export default {
} }
}, },
getOSSDomain(url) {
return getOSSImgUrl(url);
},
// （调用OSS API）开始上传 // （调用OSS API）开始上传
doUploadOSS(file, index) { doUploadOSS(file, index) {
let self = this; let self = this;
...@@ -830,10 +792,11 @@ export default { ...@@ -830,10 +792,11 @@ export default {
let list = [{}]; let list = [{}];
// list[0].name = file.name; // list[0].name = file.name;
// list[0].url = localStorage.getItem("resource_url") + path; // list[0].url = localStorage.getItem("resource_url") + path;
// getOSSImgUrl(path)
if (index === 1) { if (index === 1) {
self.formData.courseIntroImage = path;
} else if (index === 2) { } else if (index === 2) {
self.formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl = path;
} }
self.$message.success("上传成功"); self.$message.success("上传成功");
}); });
......
src/utils/env-config.js
浏览文件 @ 25d8463d
...@@ -38,7 +38,7 @@ export const envConfig = { ...@@ -38,7 +38,7 @@ export const envConfig = {
itemFileUrl: 'http://pica-test-huabei2.oss-cn-beijing.aliyuncs.com/File/template/portal/', itemFileUrl: 'http://pica-test-huabei2.oss-cn-beijing.aliyuncs.com/File/template/portal/',
cmsUrl: ' https://dev-cms.yunqueyi.com/', cmsUrl: ' https://dev-cms.yunqueyi.com/',
// resource_url: "https://test-file.yunqueyi.com", // resource_url: "https://test-file.yunqueyi.com",
ossImgUrl: 'https://test-file.yunqueyi.com/', ossImgUrl: 'https://test-file.yunqueyi.com',
stsUrl: "https://dev-api.yunqueyi.com/middle/oss/token/", //sts服务器 stsUrl: "https://dev-api.yunqueyi.com/middle/oss/token/", //sts服务器
bucketName: "pica-test-huabei2", bucketName: "pica-test-huabei2",
endpoint: "oss-cn-beijing.aliyuncs.com", endpoint: "oss-cn-beijing.aliyuncs.com",
...@@ -60,7 +60,7 @@ export const envConfig = { ...@@ -60,7 +60,7 @@ export const envConfig = {
excelUrl: 'https://test-file.yunqueyi.com/File/template/portal/', excelUrl: 'https://test-file.yunqueyi.com/File/template/portal/',
itemFileUrl: 'http://pica-test-huabei2.oss-cn-beijing.aliyuncs.com/File/template/portal/', itemFileUrl: 'http://pica-test-huabei2.oss-cn-beijing.aliyuncs.com/File/template/portal/',
cmsUrl: ' https://dev-cms.yunqueyi.com/', cmsUrl: ' https://dev-cms.yunqueyi.com/',
ossImgUrl: 'https://test-file.yunqueyi.com/', ossImgUrl: 'https://test-file.yunqueyi.com',
stsUrl: "https://dev-api.yunqueyi.com/middle/oss/token/", //sts服务器 stsUrl: "https://dev-api.yunqueyi.com/middle/oss/token/", //sts服务器
bucketName: "pica-test-huabei2", bucketName: "pica-test-huabei2",
endpoint: "oss-cn-beijing.aliyuncs.com", endpoint: "oss-cn-beijing.aliyuncs.com",
...@@ -82,7 +82,7 @@ export const envConfig = { ...@@ -82,7 +82,7 @@ export const envConfig = {
excelUrl: 'https://test-file.yunqueyi.com/File/template/portal/', excelUrl: 'https://test-file.yunqueyi.com/File/template/portal/',
itemFileUrl: 'http://pica-test-huabei2.oss-cn-beijing.aliyuncs.com/File/template/portal/', itemFileUrl: 'http://pica-test-huabei2.oss-cn-beijing.aliyuncs.com/File/template/portal/',
cmsUrl: ' https://test1-cms.yunqueyi.com/', cmsUrl: ' https://test1-cms.yunqueyi.com/',
ossImgUrl: 'https://test-file.yunqueyi.com/', ossImgUrl: 'https://test-file.yunqueyi.com',
stsUrl: "https://test1-api.yunqueyi.com/middle/oss/token/", //sts服务器 stsUrl: "https://test1-api.yunqueyi.com/middle/oss/token/", //sts服务器
bucketName: "pica-test-huabei2", bucketName: "pica-test-huabei2",
endpoint: "oss-cn-beijing.aliyuncs.com", endpoint: "oss-cn-beijing.aliyuncs.com",
...@@ -103,7 +103,7 @@ export const envConfig = { ...@@ -103,7 +103,7 @@ export const envConfig = {
excelUrl: 'https://test-file.yunqueyi.com/File/template/portal/', excelUrl: 'https://test-file.yunqueyi.com/File/template/portal/',
itemFileUrl: 'http://pica-test-huabei2.oss-cn-beijing.aliyuncs.com/File/template/portal/', itemFileUrl: 'http://pica-test-huabei2.oss-cn-beijing.aliyuncs.com/File/template/portal/',
cmsUrl: ' https://test2-cms.yunqueyi.com/', cmsUrl: ' https://test2-cms.yunqueyi.com/',
ossImgUrl: 'https://test-file.yunqueyi.com/', ossImgUrl: 'https://test-file.yunqueyi.com',
stsUrl: "https://test2-api.yunqueyi.com/middle/oss/token/", //sts服务器 stsUrl: "https://test2-api.yunqueyi.com/middle/oss/token/", //sts服务器
bucketName: "pica-test-huabei2", bucketName: "pica-test-huabei2",
endpoint: "oss-cn-beijing.aliyuncs.com", endpoint: "oss-cn-beijing.aliyuncs.com",
...@@ -125,7 +125,7 @@ export const envConfig = { ...@@ -125,7 +125,7 @@ export const envConfig = {
excelUrl: 'https://test-file.yunqueyi.com/File/template/portal/', excelUrl: 'https://test-file.yunqueyi.com/File/template/portal/',
itemFileUrl: 'http://pica-test-huabei2.oss-cn-beijing.aliyuncs.com/File/template/portal/', itemFileUrl: 'http://pica-test-huabei2.oss-cn-beijing.aliyuncs.com/File/template/portal/',
cmsUrl: ' https://uat-cms.yunqueyi.com/', cmsUrl: ' https://uat-cms.yunqueyi.com/',
ossImgUrl: 'https://file.yunqueyi.com/', ossImgUrl: 'https://file.yunqueyi.com',
stsUrl: "https://uat-api.yunqueyi.com/middle/oss/token/", //sts服务器 stsUrl: "https://uat-api.yunqueyi.com/middle/oss/token/", //sts服务器
bucketName: "pica-pro", bucketName: "pica-pro",
endpoint: "oss-cn-shanghai.aliyuncs.com", endpoint: "oss-cn-shanghai.aliyuncs.com",
...@@ -147,7 +147,7 @@ export const envConfig = { ...@@ -147,7 +147,7 @@ export const envConfig = {
excelUrl: 'https://file.yunqueyi.com/File/template/portal/', excelUrl: 'https://file.yunqueyi.com/File/template/portal/',
itemFileUrl: 'http://pica-test-huabei2.oss-cn-beijing.aliyuncs.com/File/template/portal/', itemFileUrl: 'http://pica-test-huabei2.oss-cn-beijing.aliyuncs.com/File/template/portal/',
cmsUrl: ' https://cms.yunqueyi.com/', cmsUrl: ' https://cms.yunqueyi.com/',
ossImgUrl: 'https://file.yunqueyi.com/', ossImgUrl: 'https://file.yunqueyi.com',
stsUrl: "https://api.yunqueyi.com/middle/oss/token/", //sts服务器 stsUrl: "https://api.yunqueyi.com/middle/oss/token/", //sts服务器
bucketName: "pica-pro", bucketName: "pica-pro",
endpoint: "oss-cn-shanghai.aliyuncs.com" endpoint: "oss-cn-shanghai.aliyuncs.com"
......
src/utils/index.js
浏览文件 @ 25d8463d
...@@ -205,8 +205,8 @@ export function getWorkDomain(url) { ...@@ -205,8 +205,8 @@ export function getWorkDomain(url) {
* OSS相关参数 * OSS相关参数
*/ */
// 获取OSS域名 // 获取OSS域名
export function getOSSImgUrl() { export function getOSSImgUrl(url = '') {
return getConfigByEnvType('ossImgUrl') return getConfigByEnvType('ossImgUrl') + url
} }
// 获取stsUrl域名 // 获取stsUrl域名
......
src/views/education/audit-custom-course copy 2.vue 已删除 100644 → 0
浏览文件 @ 092152c4
<template>
<div class="review-access-wrap">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<div class="edit-course-wrapper dialog-title-border">
<div class="course-content">
<el-form
ref="formDataRef"
:model="formData"
:rules="rules"
label-width="120px"
class="basic-form"
>
<el-form-item label="课程名称：" prop="courseName" class="valid-msg">
<el-col :span="20">
<el-input
size="small"
v-model="formData.courseName"
placeholder="请输入课程名称"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">
{{(formData.courseName).replace(/\s+/g,"").length}}/25
<span class="edit-wrapper"><img class="edit-img" src="../../assets/image/phrase3/icon-pin.png">修改信息</span>
</span>
<div class="error"><span>错误信息错误信息错误信息错误信息错误信息错误信息息</span><span class="cancle">X</span></div>
</el-col>
</el-form-item>
<el-form-item label="学科分类：" prop="subjectIdList" class="valid-msg">
<el-col :span="18">
<!-- :props="{ expandTrigger: 'hover' }" -->
<el-cascader
style="width: 360px"
v-model="formData.subjectIdList"
:options="labelOptions"
:props="{ value: 'id', label: 'name', children: 'subList'}"
@change="handleChange">
<!-- <template slot-scope="{ node, data }">
<span>{{ data.name }}</span>
</template> -->
</el-cascader>
</el-col>
</el-form-item>
<el-form-item label="开放范围：" prop="shareType" class="valid-msg">
<el-radio-group v-model="formData.shareType">
<el-radio :label="1">机构共享</el-radio>
</el-radio-group>
</el-form-item>
<div class="basic-item-icon">
<span class="require">*</span>
<el-form-item label="课程视频：" prop="range">
<!-- action="https://jsonplaceholder.typicode.com/posts/" -->
<!-- multiple -->
<!-- :on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove" -->
<el-upload
class="upload-demo"
action="#"
:before-upload="beforeUploadListPic"
:limit="3"
:on-exceed="handleExceed"
:show-file-list="false"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
<span >只支持MP4格式，课程视频最多上传100个，单文件最大2G</span>
<ul class="custom-list">
<li v-for="(file, index) in fileList" :key="index">
<span>{{file.name}}</span>
</li>
</ul>
</div>
</el-upload>
</el-form-item>
</div>
<div class="other-content valid-msg" v-show="isShowOtherContent">
<div class="tips">注：以下信息为非必填项，您也可以根据实际情况修改</div>
<div class="basic-item-icon">
<!-- <span class="require">*</span> -->
<el-form-item label="课程封面：">
<el-upload
v-model="formData.courseHeaderImage"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadListPic"
:disabled="disabled"
>
<div class="bg-img-wrapper">
<img v-if="formData.courseHeaderImage" @mouseover.stop="imgMouseOver=true" :src="formData.courseHeaderImage" class="bg-img">
<img v-if="!formData.courseHeaderImage" class="bg-img" src="../../assets/image/small.png">
</div>
</el-upload>
<div class="limit-text">
尺寸：750*420，只支持jpeg格式
</div>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="课程难度：">
<el-radio-group v-model="formData.difficultyLevel">
<el-radio :label="1">初级</el-radio>
<el-radio :label="2">中级</el-radio>
<el-radio :label="3">高级</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="讲师名称：" class="valid-msg">
<el-col :span="18">
<el-input
size="small"
v-model="formData.courseCustomDocterModel[0].courseDoctorName"
placeholder="请输入讲师名称"
style="width: 360px"
maxlength="25"
@focus="isShowDoctorList=true"
@input="filterDoctorName"
@blur="doctorNameInputBlur"
:disabled="disabled"
></el-input>
<ul v-show="isShowDoctorList" class="doctor-select-list">
<li
v-for="item in doctorNameList"
:key="item.value"
@click="selectDoctor(item.value)"
:class="{'doctor-selected': item.seleted}"
>
<span v-show="item.show">{{item.value}}</span>
</li>
</ul>
<span class="word-num">{{(formData.courseCustomDocterModel[0].courseDoctorName).replace(/\s+/g,"").length}}/25</span>
</el-col>
</el-form-item>
<div class="basic-item-icon">
<el-form-item label="讲师头像：">
<el-upload
v-model="formData.courseCustomDocterModel[0].courseDoctorAvatarUrl"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadListPic"
:disabled="disabled"
>
<div class="bg-img-wrapper">
<img v-if="formData.courseCustomDocterModel[0].courseDoctorAvatarUrl" @mouseover.stop="imgMouseOver=true" :src="formData.courseCustomDocterModel[0].courseDoctorAvatarUrl" class="bg-img-doctor">
<img v-if="!formData.courseCustomDocterModel[0].courseDoctorAvatarUrl" class="bg-img-doctor" src="../../assets/image/small.png">
</div>
</el-upload>
<div class="limit-text">
尺寸：88*88，只支持jpeg格式
</div>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="所属机构：">
<el-col :span="18">
<el-input
size="small"
v-model="formData.courseCustomDocterModel[0].courseDoctorHospital"
placeholder="请输入所属机构"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">{{(formData.courseCustomDocterModel[0].courseDoctorHospital).replace(/\s+/g,"").length}}/25</span>
</el-col>
</el-form-item>
<el-form-item label="课程简介：">
<el-col :span="22">
<el-input
size="small"
type="textarea"
:autosize="{ minRows: 5}"
placeholder="请输入课程简介"
v-model="formData.courseIntro"
style="width:90%;"
></el-input>
<span class="word-num">{{(formData.courseIntro).replace(/\s+/g,"").length}}/200</span>
</el-col>
</el-form-item>
</div>
<!-- 更多信息 -->
<div class="separator-line">
<span class="line-left"></span>
<div @click="toggleOtherContent" class="center">
<span>展开更多信息</span>
<img v-show="isShowOtherContent" src="../../assets/image/phrase3/arrow-up.png"/>
<img v-show="!isShowOtherContent" src="../../assets/image/phrase3/arrow-down.png"/>
</div>
<span class="line-right"></span>
</div>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="close">取 消</el-button>
<el-button type="primary" @click="submitForm('formDataRef')">确 定</el-button>
</div>
<!-- <PreviewVideo :dialogVisible="isPreviewVideo" :videoUrl="videoUrl" @close="closeVideo"></PreviewVideo> -->
<!-- <button @click="previewVideoAction">test video</button> -->
</div>
</div>
</template>
<script>
import PreviewVideo from "@/components/education/custom-resource/preview-video";
import PreviewProtocol from "@/components/education/custom-resource/preview-protocol";
import PreviewEditCourse from "@/components/education/custom-resource/edit-course-dialog";
import BreadCrumb from "../../components/breadcrumb.vue";
import { doUpload, getFilePath } from "@/utils/qiniu-util";
import { openLoading, closeLoading, getQiniuToken1 } from "@/utils/utils";
import * as commonUtil from "../../utils/utils";
let vm = null;
export default {
data() {
let checkCourseName = (rule, value, callback) => {
// 如果有审核的信息，则直接报错
// if(this.needShowAuditMsg && this.auditMsgMap.name.desc) {
// callback(new Error(this.auditMsgMap.name.desc));
// return;
// }
// if(!this.needShowAuditMsg && !value) {
// callback(new Error('请输入课程名称'));
// } else {
// callback();
// }
};
return {
curmbFirst: "CME",
curmbSecond: "外部资源管理",
needShowAuditMsg: true,
auditMsgMap: {
name: {
desc: '填写的课程名称不对'
}
},
disabled: false,
formData: {
checkStatus: 0,
courseCustomChapterModel: [{
courseCustomLectureModelList: [
{
contentCheck: '',
id: 0,
name: '',
nameCheck: '',
resourceModel: {
createdId: 0,
createdTime: '',
deleteFlag: 0,
filePath: '',
fileType: 0,
formatType: 0,
hospitalId: 0,
id: 0,
idType: 0,
lectureId: 0,
modifiedId: 0,
modifiedTime: '',
name: '',
operateKey: '',
page: 0,
resolutionRatio: '',
size: 0,
status: 0,
totalTime: 0,
type: 0,
videoType: 0
}
}
],
id: 0,
name: ''
}],
courseCustomDocterModel: [
{
courseDoctorAvatarUrl: 'https://file.yunqueyi.com/h5/images/cme/doctor-header.png',
courseDoctorHospital: '',
courseDoctorHospitalCheck: '',
courseDoctorName: '',
courseDoctorNameCheck: '',
id: 0
}
],
courseHeaderImage: 'https://file.yunqueyi.com/h5/images/cme/project-banner.png',
courseId: 0,
courseIntro: '',
courseIntroCheck: '',
courseName: '',
courseNameCheck: '',
difficultyLevel: 1,
shareType: 1,
subjectIdList: [410, 423]
},
uploadImgMessage: false,
imgMouseOver: false,
rules: {
courseName: [
{ required: true, message: "请输入课程名称"},
{ validator: checkCourseName }
],
subjectIdList: [
{ required: true, message: "请输入课程名称", trigger: "blur"},
],
shareType: [
{ required: true, message: "请选择开放范围", trigger: "blur"},
],
},
labelOptions: [],
isShowOtherContent: false,
fileList: [
{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
{name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
],
projectBanner: 'https://file.yunqueyi.com/h5/images/cme/project-banner.png',
doctorHeader: 'https://file.yunqueyi.com/h5/images/cme/doctor-header.png',
doctorNameList: [
{value: '333', show: true, seleted: false},
{value: '334', show: true, seleted: false},
{value: '335', show: true, seleted: false},
{value: '336', show: true, seleted: false},
],
isShowDoctorList: false,
isPreviewVideo: false,
videoUrl: '',
};
},
props: {
dialogVisible: {
type: Boolean,
default: false
},
addOrUpdate: {
type: String,
default: 'add'
}
},
computed: {
},
watch: {
dialogVisible(isVisible) {
if(isVisible) {
if(this.addOrUpdate == 'add') {
this.initAdd();
} else {
this.initModify();
}
}
}
},
components: {
PreviewVideo,
PreviewEditCourse,
BreadCrumb
},
created() {
vm = this;
this.initAdd();
},
mounted() {
commonUtil.resizeHeight();
this.getLabelList();
// setTimeout(() => {
// console.log(this.$refs.formDataRef);
// this.$refs['formDataRef'].validateField("name");
// }, 2000);
},
methods: {
// 添加时初始化
initAdd() {
console.log('in initAdd');
},
initModify() {
console.log('in initModify');
},
// 过滤医生信息
filterDoctorName(value) {
this.doctorNameList.forEach( item => {
if(value) {
if((item.value + '').indexOf(value) == -1) {
item.show = false;
} else {
item.show = true;
}
if(item.value == value) {
item.seleted = true;
} else {
item.seleted = false;
}
} else {
item.show = true;
}
})
},
// 当选择医生的焦点失去时，要反选医生信息
doctorNameInputBlur() {
setTimeout(() => {
this.isShowDoctorList = false;
this.selectDoctorByName(this.formData.courseCustomDocterModel[0].courseDoctorName);
}, 200);
},
// 根据姓名反选医生信息
// TODO
selectDoctorByName(name) {
},
// 选择其中一个
selectDoctor(name) {
console.log(name)
this.formData.courseCustomDocterModel[0].courseDoctorName = name;
this.selectDoctorByName(name);
},
close() {
this.$emit('close');
},
// 获取学科列表
getLabelList() {
let req = {};
this.GET("aggregate/content/labelList", req).then(res => {
if (res.code == '000000') {
this.convertLabelList(res.data);
}
});
},
// 将所有子分类中的“全部”去掉
convertLabelList(labelList) {
let newLabelList = [];
labelList.forEach( item => {
item.subList = item.subList.slice(1);
})
this.labelOptions = labelList;
},
//上传列表图片
beforeUploadListPic(file) {
let fileLimit = {
width: 230,
height: 172,
size: 0.5,
sizeText: "500K",
key: "attachmentUrl",
more: "attachmentMore1",
show: "uploadImgMessage"
};
vm.beforeAvatarUpload(file, fileLimit);
},
//上传图片校验
beforeAvatarUpload(file, fileLimit) {
console.log();
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
console.log('isJPG', isJPG, 'isPNG', isPNG, 'isLt2M', isLt2M);
// if (!isJPG && !isPNG) {
// vm.$message.error("图片不符合规范，请根据规范上传图片");
// return;
// }
// if (!isLt2M) {
// vm.$message.error("图片不符合规范，请根据规范上传图片 ");
// return;
// }
let _img = new FileReader();
_img.readAsDataURL(file);
_img.onload = function(theFile) {
let image = new Image();
image.src = theFile.target.result;
image.onload = function() {
let _vm = this;
if (
false
// true ||
// _vm.width != fileLimit.width ||
// _vm.height != fileLimit.height
) {
vm.$message.error("图片不符合规范，请根据规范上传图片");
} else {
openLoading(vm);
doUpload(
vm,
file,
getFilePath(file, null),
"preview4",
"progress1",
1
).then(function(path) {
closeLoading(vm);
console.log(path);
if (fileLimit.show == "uploadImgMessage") {
vm.uploadImgMessage = false;
}
// else if (fileLimit.show == "uploadImgMessage2") {
// vm.uploadImgMessage2 = false;
// }
vm.formData[fileLimit.key] = path.fullPath;
vm.formData[fileLimit.more] = {
attachmentName: path.name,
attachmentExt: path.ext,
attachmentSize: path.size
};
vm.$message.success("上传成功");
});
}
};
};
return isJPG && isLt2M;
},
toggleOtherContent() {
this.isShowOtherContent = !this.isShowOtherContent;
},
// 上传文件相关
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 100 个文件，您已经共选择了 ${files.length + fileList.length} 个文件！`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
},
//表单校验
submitForm(formName) {
console.log('this.formData', this.formData);
this.needShowAuditMsg = false;
let flag = null;
this.$refs[formName].validate(valid => {
if (valid) {
//console.log("success");
flag = true;
} else {
console.log("error submit!!");
flag = false;
}
});
return flag;
},
handleChange(value) {
console.log(value);
},
}
};
</script>
<style scoped lang="scss">
.edit-course-wrapper {
.course-content {
// color: red;
.basic-item-icon {
position: relative;
margin-top: 20px;
.require {
position: absolute;
left: 40px;
top: 11px;
color: #f56c6c;
}
.upload-message {
position: absolute;
left: 160px;
top: 105px;
font-size: 12px;
color: #f56c6c;
}
.img-delete {
position: absolute;
left: 0px;
top: 0px;
width: 84px;
height: 100px;
background: #000;
opacity: 0.7;
z-index: 999;
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
}
}
}
.word-num {
font-size: 12px;
color: #999;
padding-top: 5px;
}
.bg-uploader {
img {
float: left;
}
.bg-img-wrapper {
.bg-img {
display: block;
width: 160px;
height: 90px;
}
.bg-img-doctor {
display: block;
width: 88px;
height: 88px;
}
}
.bg-video {
float: left;
width: 84px;
height: 100px;
}
}
.limit-text {
position: absolute;
top: 86px;
left: 0px;
font-size: 12px;
color: #979899;
}
.separator-line {
width: 100%;
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: space-between;
.center {
cursor: pointer;
width: 130px;
color: #666666;
img {
width: 12px;
}
}
.line-left, .line-right {
// display: inline-block;
// width: 100%;
flex: 1;
border-bottom: 1px dashed #E4E7ED;
}
}
.tips {
width: 100%;
height:32px;
line-height: 32px;
padding-left: 12px;
background:rgba(254,250,245,1);
border-radius:3px;
color: #E6A23C;
}
.valid-msg {
position: relative;
.error {
width: 370px;
position: absolute;
display: flex;
justify-content: space-between;
top: 29px;
font-size: 13px;
color: #ED3131;
.text {
flex: 1;
}
.cancle {
cursor: pointer;
width: 20px;
}
}
.edit-wrapper {
color: #449284;
.edit-img {
position: relative;
top: 2px;
width: 12px;
margin: 0 2px 0 4px;
}
}
.doctor-select-list {
width: 200px;
// max-height: 100px;
position: absolute;
z-index: 100;
background: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
// margin: 10px;
li {
padding-left: 20px;
cursor: pointer;
&:hover {
background: #f4f7fD;
}
&.doctor-selected {
background: #f4f7fD;
}
}
}
}
}
}
</style>
src/views/education/audit-custom-course copy 3.vue 已删除 100644 → 0
浏览文件 @ 092152c4
<template>
<div class="review-access-wrap">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<div class="edit-course-wrapper review-access screenSet" id="screenSet">
<div class="course-content">
<el-form
ref="formDataRef"
:model="formData"
:rules="rules"
label-width="120px"
class="basic-form"
>
<el-form-item label="课程名称：" prop="courseName" class="valid-msg">
<el-col :span="20">
<el-input
size="small"
v-model="formData.courseName"
placeholder="请输入课程名称"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">
{{(formData.courseName || '').replace(/\s+/g,"").length}}/25
<span class="edit-wrapper">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息
</span>
</span>
<div v-show="needShowAuditMsg && formData.courseNameCheck" class="error">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
<span class="cancle">X</span>
</div>
</el-col>
</el-form-item>
<el-form-item label="学科分类：" prop="subjectIdList" class="valid-msg">
<el-col :span="18">
<!-- :props="{ expandTrigger: 'hover' }" -->
<el-cascader
style="width: 360px"
v-model="formData.subjectIdList"
:options="labelOptions"
:props="{ value: 'id', label: 'name', children: 'subList'}"
:disabled="disabled"
>
</el-cascader>
</el-col>
</el-form-item>
<el-form-item label="开放范围：" prop="shareType" class="valid-msg">
<el-radio-group v-model="formData.shareType">
<el-radio :label="1">机构共享</el-radio>
</el-radio-group>
</el-form-item>
<div class="basic-item-icon">
<ul v-show="formData.courseCustomChapterModels[0].courseCustomLectureModelList.length" class="custom-list">
<li v-for="(lecture, index) in formData.courseCustomChapterModels[0].courseCustomLectureModelList" :key="index" class="valid-msg">
<ul class="video">
<li class="video-wapper">
<span class="title">视频{{index + 1}}</span>
<img src="../../assets/image/phrase3/icon-pin.png" />
<span class="name" @click="previewVideoAction(lecture)">{{lecture.resourceModel.name}}</span>
</li>
<!-- <li>
<img @click="deleteLecture(index)" class="delete" src="../../assets/image/phrase3/close.png" />
</li> -->
</ul>
<div class="video-name">
<span class="title">
<span >*</span>
<span class="video-title">视频名称</span>
</span>
<el-input
size="small"
v-model="lecture.name"
placeholder="请输入课程名称"
style="width: 380px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">
{{(lecture.name || '').replace(/\s+/g,"").length}}/25
<span class="edit-wrapper">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息
</span>
</span>
<div v-show="needShowAuditMsg && formData.courseNameCheck" class="error-video">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
<span class="cancle">X</span>
</div>
</div>
</li>
<span v-show="needShowUploadProcess" class="upload-process" :style="{'width': (uploadProgress/100 * 340) + 'px'}"></span>
</ul>
</div>
<div class="other-content valid-msg">
<div class="tips">注：以下信息为非必填项，您也可以根据实际情况修改</div>
<div class="basic-item-icon">
<!-- <span class="require">*</span> -->
<el-form-item label="课程封面：">
<el-upload
v-model="formData.courseIntroImage"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadListPic"
:disabled="disabled"
>
<div class="bg-img-wrapper">
<img
v-if="formData.courseIntroImage"
@mouseover.stop="imgMouseOver=true"
:src="formData.courseIntroImage"
class="bg-img"
/>
<img
v-if="!formData.courseIntroImage"
class="bg-img"
src="../../assets/image/small.png"
/>
</div>
</el-upload>
<div class="limit-text">尺寸：750*420，只支持jpeg格式</div>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="课程难度：">
<el-radio-group v-model="formData.difficultyLevel" :disabled="disabled">
<el-radio :label="1">初级</el-radio>
<el-radio :label="2">中级</el-radio>
<el-radio :label="3">高级</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="讲师名称：" class="valid-msg">
<el-col :span="18">
<el-input
size="small"
v-model="formData.courseCustomDoctorModels[0].courseDoctorName"
placeholder="请输入讲师名称"
style="width: 360px"
maxlength="25"
@focus="isShowDoctorList=true"
@input="filterDoctorName"
@blur="doctorNameInputBlur"
:disabled="disabled"
></el-input>
<ul v-show="isShowDoctorList" class="doctor-select-list">
<li
v-for="(item, index) in doctorNameList"
:key="index"
@click="selectDoctor(item.courseDoctorName, index)"
:class="{'doctor-selected': item.seleted}"
>
<span v-show="item.show">{{item.courseDoctorName || '测试名'}}</span>
</li>
</ul>
<span class="word-num">
{{(formData.courseCustomDoctorModels[0] && formData.courseCustomDoctorModels[0].courseDoctorName || '').replace(/\s+/g,"").length}}/25
<span class="edit-wrapper">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息
</span>
</span>
<div v-show="needShowAuditMsg && formData.courseNameCheck" class="error">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
<span class="cancle">X</span>
</div>
</el-col>
</el-form-item>
<div class="basic-item-icon">
<el-form-item label="讲师头像：" class="valid-msg">
<el-upload
v-model="formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadListPic"
:disabled="disabled"
>
<div class="bg-img-wrapper">
<img
v-if="formData.courseCustomDoctorModels && formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl || ''"
@mouseover.stop="imgMouseOver=true"
:src="formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl"
class="bg-img-doctor"
/>
<img
v-if="!(formData.courseCustomDoctorModels && formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl || '')"
class="bg-img-doctor"
src="../../assets/image/small.png"
/>
</div>
</el-upload>
<!-- <span class="word-num">
<span class="edit-wrapper">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息
</span>
</span> -->
<!-- <div v-show="needShowAuditMsg && formData.courseNameCheck" class="error">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
<span class="cancle">X</span>
</div> -->
<!-- <div class="limit-text">尺寸：88*88，只支持jpeg格式</div> -->
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="所属机构：" class="valid-msg">
<el-col :span="18">
<el-input
size="small"
v-model="formData.courseCustomDoctorModels[0].courseDoctorHospital"
placeholder="请输入所属机构"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">
{{(formData.courseCustomDoctorModels && formData.courseCustomDoctorModels[0].courseDoctorHospital || '').replace(/\s+/g,"").length}}/25
<span class="edit-wrapper">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息
</span>
</span>
<div v-show="needShowAuditMsg && formData.courseNameCheck" class="error">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
<span class="cancle">X</span>
</div>
</el-col>
</el-form-item>
<el-form-item label="课程简介：" class="valid-msg">
<el-col :span="14">
<el-input
style="width:420px"
size="small"
type="textarea"
maxlength="200"
:autosize="{ minRows: 5}"
placeholder="请输入课程简介"
v-model="formData.courseIntro"
:disabled="disabled"
/>
<span class="word-num">
{{(formData.courseIntro || '').replace(/\s+/g,"").length}}/200
<span class="edit-wrapper">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息
</span>
</span>
<div v-show="needShowAuditMsg && formData.courseNameCheck" class="error-area">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
<span class="cancle">X</span>
</div>
</el-col>
</el-form-item>
</div>
</el-form>
</div>
<footer style="padding: 30px;padding-bottom: 50px;">
<el-button style="margin-left: 20px" @click="dialogObj.visible=true">返回列表</el-button>
<el-button style="margin-left: 100px" type="primary" @click="submitForm('formDataRef')">通 过</el-button>
<el-button type="primary" @click="submitForm('formDataRef')">拒 绝</el-button>
</footer>
</div>
<DialogComponet :dialogObj="dialogObj" @hide="hideCancleTips" @confirm="dialogObj.visible=false"></DialogComponet>
<PreviewVideo :dialogVisible="isPreviewVideo" :videoUrl="videoUrl" @close="isPreviewVideo=false"></PreviewVideo>
</div>
</template>
<script>
import PreviewVideo from "@/components/education/custom-resource/preview-video";
import PreviewProtocol from "@/components/education/custom-resource/preview-protocol";
import PreviewEditCourse from "@/components/education/custom-resource/edit-course-dialog";
import DialogComponet from "@/components/education/template/dialog";
import CropperTwo from '@/components/common/cropper.two.vue'
import { doUpload, getFilePath } from "@/utils/qiniu-util";
import { openLoading, closeLoading, getQiniuToken1 } from "@/utils/utils";
import { isEmptyUtils } from "@/utils/index";
import { mapActions } from 'vuex';
import { ossUpload, getFilePathForOSS } from "@/utils/oss/ossUtil";
import BreadCrumb from "../../components/breadcrumb.vue";
import * as commonUtil from "../../utils/utils";
let vm = null;
export default {
data() {
let checkCourseName = (rule, value, callback) => {
// 如果有审核的信息，则直接报错
if (!value && this.needCheckField) {
callback(new Error("请输入课程名称"));
} else {
callback();
}
};
return {
curmbFirst: "CME",
curmbSecond: "外部资源管理",
slide2: {
oriUrl: 'https://avatars1.githubusercontent.com/u/23690568?s=460&v=4', // 原图
preUrl: 'https://avatars1.githubusercontent.com/u/23690568?s=460&v=4' // 裁剪后的预览图片，初始化为原图
},
showCropper: false,
cropOption: {
offset_x: 30,
offset_y: 40,
width: 600,
height: 400
},
step: 1,
needCheckField: false,
needShowAuditMsg: false,
needShowUploadProcess: false,
disabled: true,
formDataBase: {
checkStatus: 0,
courseCustomChapterModels: [
{
courseCustomLectureModelList: [],
id: null,
name: "视频课程"
}
],
courseCustomDoctorModels: [
{
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
}
],
courseId: null,
courseIntro: "",
courseIntroCheck: "",
courseIntroImage:
"https://test1-file.yunqueyi.com/image/png/common/202006201528136.png",
courseIntroImageCheck: "",
courseName: "",
courseNameCheck: "",
deleteCustomLectureIds: [],
difficultyLevel: 1,
shareType: 1,
subjectIdList: []
},
formData: {
checkStatus: 0,
courseCustomChapterModels: [
{
courseCustomLectureModelList: [],
id: null,
name: "视频课程"
}
],
courseCustomDoctorModels: [
{
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
}
],
courseId: null,
courseIntro: "",
courseIntroCheck: "",
courseIntroImage:
"https://test1-file.yunqueyi.com/image/png/common/202006201528136.png",
courseIntroImageCheck: "",
courseName: "",
courseNameCheck: "",
deleteCustomLectureIds: [],
difficultyLevel: 1,
shareType: 1,
subjectIdList: []
},
uploadImgMessage: false,
imgMouseOver: false,
rules: {
courseName: [
{ required: true, message: " " },
{ validator: checkCourseName }
],
subjectIdList: [
{ required: true, message: "请输入课程名称" }
],
shareType: [
{ required: true, message: "请选择开放范围" }
]
},
labelOptions: [],
fileList: [
],
projectBanner:
"https://file.yunqueyi.com/h5/images/cme/project-banner.png",
doctorHeader: "https://file.yunqueyi.com/h5/images/cme/doctor-header.png",
doctorNameList: [
{ courseDoctorName: "333", show: true, seleted: false },
{ courseDoctorName: "334", show: true, seleted: false },
{ courseDoctorName: "335", show: true, seleted: false },
{ courseDoctorName: "336", show: true, seleted: false }
],
isShowDoctorList: false,
isPreviewVideo: false,
videoUrl: "",
orgCourseInfo: {
defaultDoctor: {
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
},
doctorModelList: [
{
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
}
],
limitModel: {
maxLimitOneVideoSize: 0,
maxLimitVideoCount: 0,
maxStorageSpace: 0,
usedStorageSpace: 0
}
},
uploadProgress: 0,
dialogObj: {
visible: false,
title: "确定取消吗？",
message: "发布后,项目将进入审核中,待审核完成后学员可在云鹊医App上参加培训学习",
tip: "",
confirmMsg: "取 消",
hideMsg: "确 定"
},
courseId: 0,
};
},
props: {
dialogVisible: {
type: Boolean,
default: false
},
// courseId: {
// type: String | Number,
// default: 0
// }
},
computed: {},
watch: {
// dialogVisible(isVisible) {
// this.formData = JSON.parse(JSON.stringify(this.formDataBase));
// if (isVisible) {
// if (this.courseId == 0) {
// this.initAdd(this.courseId);
// } else {
// this.initModify(this.courseId);
// }
// }
// },
},
components: {
BreadCrumb,
PreviewVideo,
PreviewEditCourse,
DialogComponet,
CropperTwo
},
created() {
vm = this;
this.courseId = this.$route && this.$route.query && this.$route.query.courseId || 0;
vm.initModify();
// this.initAdd();
},
mounted() {
this.getLabelList();
commonUtil.resizeHeight();
},
methods: {
...mapActions(['setKind']),
getCropImg (argument) {
console.log(argument);
this.slide2.preUrl = argument[0]
this.cropData = argument[1]
},
// 创建课程页面的初始信息
initOrgCourseInfo() {
vm.GET("contents/course/custom/info/init", { setEntry: true }).then(
res => {
if (res.code == "000000") {
this.orgCourseInfo = res.data;
this.formData.courseCustomDoctorModels[0] = this.orgCourseInfo.defaultDoctor;
this.formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl =
this.orgCourseInfo.defaultDoctor.courseDoctorAvatarUrl ||
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png";
this.doctorNameList = this.convertDNameToSelectOpt(
this.orgCourseInfo.doctorModelList
);
+this.courseId && this.getCourseInfoById(this.courseId);
}
}
);
},
// 将医生名称进行处理
convertDNameToSelectOpt(doctorModelList) {
doctorModelList.forEach(item => {
item.show = true;
item.seleted = false;
});
return doctorModelList;
},
// 添加时初始化
initAdd() {
console.log("in initAdd");
this.step = 1;
this.needShowAuditMsg = false;
this.initOrgCourseInfo();
},
initModify() {
this.needShowAuditMsg = true;
console.log("in initModify");
this.initOrgCourseInfo();
},
// 创建课程页面的初始信息
getCourseInfoById(courseId) {
vm.GET(`contents/course/custom/info/${courseId}`)
.then( res => {
if ( res.code == "000000") {
this.formData = res.data;
}
}
);
},
// 过滤医生信息
filterDoctorName(value) {
this.doctorNameList.forEach(item => {
if (value) {
if ((item.value + "").indexOf(value) == -1) {
item.show = false;
} else {
item.show = true;
}
if (item.value == value) {
item.seleted = true;
} else {
item.seleted = false;
}
} else {
item.show = true;
}
});
},
// 当选择医生的焦点失去时，要反选医生信息
doctorNameInputBlur() {
setTimeout(() => {
this.isShowDoctorList = false;
this.selectDoctorByName(
this.formData.courseCustomDoctorModels[0].courseDoctorName
);
}, 200);
},
// 根据姓名反选医生信息
// TODO 尝试找到完全匹配的医生
selectDoctorByName(name) {
},
// 选择其中一个
selectDoctor(name) {
console.log(name);
this.formData.courseCustomDoctorModels[0].courseDoctorName = name;
this.selectDoctorByName(name);
},
// 关闭当前弹框
close() {
this.$emit("close");
},
// 获取学科列表
getLabelList() {
let req = {};
this.GET("aggregate/content/labelList", req).then(res => {
if (res.code == "000000") {
this.convertLabelList(res.data);
}
});
},
// 将所有子分类中的“全部”去掉
convertLabelList(labelList) {
let newLabelList = [];
labelList.forEach(item => {
item.subList = item.subList.slice(1);
});
this.labelOptions = labelList;
},
// 上传视频（mp4）
beforeUploadVideo(file) {
console.log(file);
const isMP4 = file.type === "video/mp4";
const isLt = file.size / 1024 / 1024 / 1024 < 2;
if (!isLt) {
this.$message.error("视频不符合规范，请根据规范上传视频");
return;
}
if (!isMP4) {
this.$message.error("视频不符合规范，请根据规范上传视频");
} else {
// openLoading(vm);
this.needShowUploadProcess = true;
doUpload(
vm,
file,
getFilePath(file, null),
"preview4",
"progress",
""
).then(function(path) {
// closeLoading(vm);
console.log('vm.uploadProgress', vm.uploadProgress);
console.log(path);
let uploadResourceParam = {
formatType: path.ext,
name: path.name,
qCloudUrl : path.fullPath,
size : path.size,
fileType : 1,
status : "success",
uid : new Date().getTime()
}
vm.needShowUploadProcess = false;
vm.uploadProgress = 0;
vm.insertResourceAction(uploadResourceParam);
});
}
},
// 上传资源（视频）后，生存对应的节
insertResourceAction(uploadResourceParam) {
this.POST("contents/course/custom/info/insertResource", [uploadResourceParam]).then(res => {
if (res.code == "000000") {
let cName = res.data.resourceModelList[0].name;
cName = cName.substr(0, cName.lastIndexOf('.'));
let lectureObj = {
id: null,
name: cName,
nameCheck: "",
contentCheck: "",
resourceModel: {}
}
lectureObj.resourceModel = res.data && res.data.resourceModelList[0];
this.formData.courseCustomChapterModels[0].courseCustomLectureModelList.push(lectureObj);
}
});
},
//上传列表图片
beforeUploadListPic(file) {
return;
let fileLimit = {
width: 230,
height: 172,
size: 0.5,
sizeText: "500K",
key: "attachmentUrl",
more: "attachmentMore1",
show: "uploadImgMessage"
};
vm.beforeAvatarUpload(file, fileLimit);
},
//上传图片校验
beforeAvatarUpload2(file, fileLimit) {
console.log();
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
console.log("isJPG", isJPG, "isPNG", isPNG, "isLt2M", isLt2M);
// if (!isJPG && !isPNG) {
// vm.$message.error("图片不符合规范，请根据规范上传图片");
// return;
// }
// if (!isLt2M) {
// vm.$message.error("图片不符合规范，请根据规范上传图片 ");
// return;
// }
let _img = new FileReader();
_img.readAsDataURL(file);
console.log('readAsDataURL', _img, file);
_img.onload = function(theFile) {
let image = new Image();
image.src = theFile.target.result;
vm.slide2.oriUrl = theFile.target.result;
vm.showCropper = true;
console.log('readAsDataURL222', _img.width, file, theFile);
image.onload = function() {
console.log('image.onload', image);
let _vm = this;
if (
false
// true ||
// _vm.width != fileLimit.width ||
// _vm.height != fileLimit.height
) {
vm.$message.error("图片不符合规范，请根据规范上传图片");
} else {
// openLoading(vm);
// doUpload(
// vm,
// file,
// getFilePath(file, null),
// "preview4",
// "progress1",
// 1
// ).then(function(path) {
// closeLoading(vm);
// console.log(path);
// if (fileLimit.show == "uploadImgMessage") {
// vm.uploadImgMessage = false;
// }
// // else if (fileLimit.show == "uploadImgMessage2") {
// // vm.uploadImgMessage2 = false;
// // }
// vm.formData[fileLimit.key] = path.fullPath;
// vm.formData[fileLimit.more] = {
// attachmentName: path.name,
// attachmentExt: path.ext,
// attachmentSize: path.size
// };
// vm.$message.success("上传成功");
// });
}
};
};
return isJPG && isLt2M;
},
//上传图片校验
beforeAvatarUpload(file, fileLimit) {
console.log();
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
console.log("isJPG", isJPG, "isPNG", isPNG, "isLt2M", isLt2M);
// if (!isJPG && !isPNG) {
// vm.$message.error("图片不符合规范，请根据规范上传图片");
// return;
// }
// if (!isLt2M) {
// vm.$message.error("图片不符合规范，请根据规范上传图片 ");
// return;
// }
let _img = new FileReader();
_img.readAsDataURL(file);
_img.onload = function(theFile) {
let image = new Image();
image.src = theFile.target.result;
image.onload = function() {
let _vm = this;
if (
false
// true ||
// _vm.width != fileLimit.width ||
// _vm.height != fileLimit.height
) {
vm.$message.error("图片不符合规范，请根据规范上传图片");
} else {
openLoading(vm);
doUpload(
vm,
file,
getFilePath(file, null),
"preview4",
"progress1",
1
).then(function(path) {
closeLoading(vm);
console.log(path);
if (fileLimit.show == "uploadImgMessage") {
vm.uploadImgMessage = false;
}
// else if (fileLimit.show == "uploadImgMessage2") {
// vm.uploadImgMessage2 = false;
// }
vm.formData[fileLimit.key] = path.fullPath;
vm.formData[fileLimit.more] = {
attachmentName: path.name,
attachmentExt: path.ext,
attachmentSize: path.size
};
vm.$message.success("上传成功");
});
}
};
};
return isJPG && isLt2M;
},
// 限制选择文件个数
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 100 个文件，您已经共选择了 ${files.length + fileList.length} 个文件！`);
},
// 删除按钮
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`);
},
//表单校验
submitForm(formName) {
this.needShowAuditMsg = false;
this.$refs[formName].validate(valid => {
if (valid) {
this.insertOrUpdate();
} else {
console.log("error submit!!");
}
this.needShowAuditMsg = true;
});
},
// 添加或修改课程（kind = 3）
insertOrUpdate() {
this.POST("contents/course/custom/info/insertOrUpdate", this.formData).then(res => {
if (res.code == "000000") {
if(this.courseId == 'add') {
this.step = 2;
} else {
this.close();
this.setKind(3);
}
}
});
},
// 返回到课程选择页面（kind = 3）
backToOrgCourse() {
this.close();
this.setKind(3);
},
// 关闭（“取消”按钮弹出来的）弹框
hideCancleTips() {
this.dialogObj.visible = false;
this.close();
},
// 预览视频
previewVideoAction(lecture) {
this.videoUrl = lecture.resourceModel.filePath;
this.isPreviewVideo = true;
},
// 删除本节视频
// TODO 要将删除的节ID放在删除的节里
deleteLecture(index) {
this.formData.courseCustomChapterModels[0].courseCustomLectureModelList.splice(index, 1);
},
}
};
</script>
<style scoped lang="scss">
.edit-course-wrapper {
.course-content {
// color: red;
padding-top: 30px;
.basic-item-icon {
position: relative;
margin-top: 20px;
.require {
position: absolute;
left: 40px;
top: 11px;
color: #f56c6c;
}
.upload-message {
position: absolute;
left: 160px;
top: 105px;
font-size: 12px;
color: #f56c6c;
}
.img-delete {
position: absolute;
left: 0px;
top: 0px;
width: 84px;
height: 100px;
background: #000;
opacity: 0.7;
z-index: 999;
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
}
}
.upload-tips {
width: 100%;
position: relative;
top: -10px;
font-size: 12px;
color: #979899;
// display: inline-block;
}
.custom-list {
// width: 100%;
width: 800px;
display: flex;
flex-direction: column;
// border-radius: 3px;
// border: 1px solid rgba(228,231,237,1);
padding: 20px;
padding-top: 0px;
font-size: 12px;
color: #606266;
& > li {
margin: 10px 0;
}
.video {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.video-wapper {
height: 28px;
line-height: 28px;
.title {
display: inline-block;
width: 70px;
text-align: right;
margin-right: 10px;
}
.name {
cursor: pointer;
color: #5890DD;
}
img {
width: 12px;
height: 12px;
}
}
// .delete {
// position: relative;
// top: 4px;
// cursor: pointer;
// width: 16px;
// height: 16px;
// }
}
.video-name {
.title {
display: inline-block;
width: 70px;
text-align: right;
margin-right: 10px;
}
}
}
}
.word-num {
font-size: 12px;
color: #999;
padding-top: 5px;
}
.bg-uploader {
img {
float: left;
}
.bg-img-wrapper {
.bg-img {
display: block;
width: 160px;
height: 90px;
}
.bg-img-doctor {
display: block;
width: 88px;
height: 88px;
}
}
.bg-video {
float: left;
width: 84px;
height: 100px;
}
}
.limit-text {
position: absolute;
top: 86px;
left: 0px;
font-size: 12px;
color: #979899;
}
.separator-line {
width: 100%;
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: space-between;
.center {
cursor: pointer;
width: 130px;
color: #666666;
img {
width: 12px;
}
}
.line-left,
.line-right {
// display: inline-block;
// width: 100%;
flex: 1;
border-bottom: 1px dashed #e4e7ed;
}
}
.tips {
width: 500px;
height: 32px;
line-height: 32px;
margin-left: 38px;
padding-left: 12px;
background: rgba(254, 250, 245, 1);
border-radius: 3px;
color: #e6a23c;
}
.valid-msg {
position: relative;
.error {
width: 370px;
position: absolute;
display: flex;
justify-content: space-between;
top: 29px;
font-size: 13px;
color: #ed3131;
.text {
flex: 1;
}
.cancle {
width: 20px;
margin-left: 20px;
cursor: pointer;
}
}
.error-area {
position: absolute;
bottom: -32px;
font-size: 13px;
color: #ed3131;
.cancle {
width: 20px;
margin-left: 20px;
cursor: pointer;
}
}
.error-video {
position: absolute;
top: 64px;
left: 82px;
font-size: 13px;
color: #ed3131;
.cancle {
width: 20px;
margin-left: 20px;
cursor: pointer;
}
}
.edit-wrapper {
color: #449284;
.edit-img {
position: relative;
top: 2px;
width: 12px;
margin: 0 2px 0 4px;
}
}
.doctor-select-list {
width: 200px;
// max-height: 100px;
position: absolute;
z-index: 100;
background: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
// margin: 10px;
li {
padding-left: 20px;
cursor: pointer;
&:hover {
background: #f4f7fd;
}
&.doctor-selected {
background: #f4f7fd;
}
}
}
}
.upload-process {
margin: 10px 0 10px 10px;
display: block;
// width: 310px;
height: 4px;
background: #449284;
border-radius: 2px;
}
}
.course-content-step2 {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
.success-img {
width: 60px;
height: 60px;
}
.tips-1 {
margin-top: 30px;
font-size: 18px;
color: #303133;
}
.tips-2 {
margin-top: 4px;
margin-bottom: 40px;
font-size: 14px;
color: #999999;
}
}
}
</style>
<style scoped lang="scss">
.review-access-wrap {
.review-access {
padding: 10px;
background: #fff;
}
}
</style>
\ No newline at end of file
src/views/education/audit-custom-course copy 4.vue 已删除 100644 → 0
浏览文件 @ 092152c4
<template>
<div class="review-access-wrap">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<div class="edit-course-wrapper review-access screenSet" id="screenSet">
<div class="course-content">
<el-form
ref="formDataRef"
:model="formData"
:rules="rules"
label-width="120px"
class="basic-form"
>
<el-form-item label="课程名称：" prop="courseName" class="valid-msg">
<el-col :span="20">
<el-input
size="small"
v-model="formData.courseName"
placeholder="请输入课程名称"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">
{{(formData.courseName || '').replace(/\s+/g,"").length}}/25
<span class="edit-wrapper" @click="auditField(formData, 'courseNameCheck')">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息
</span>
</span>
<div v-show="needShowAuditMsg && formData.courseNameCheck" class="error">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
<span class="cancle">X</span>
</div>
</el-col>
</el-form-item>
<el-form-item label="学科分类：" prop="subjectIdList" class="valid-msg">
<el-col :span="18">
<el-cascader
style="width: 360px"
v-model="formData.subjectIdList"
:options="labelOptions"
:props="{ value: 'id', label: 'name', children: 'subList'}"
:disabled="disabled"
>
</el-cascader>
</el-col>
</el-form-item>
<el-form-item label="开放范围：" prop="shareType" class="valid-msg">
<el-radio-group v-model="formData.shareType">
<el-radio :label="1">机构共享</el-radio>
</el-radio-group>
</el-form-item>
<div class="basic-item-icon" style="margin-top: 0; padding-top: 0;">
<ul v-show="formData.courseCustomChapterModels[0].courseCustomLectureModelList.length" class="custom-list">
<li v-for="(lecture, index) in formData.courseCustomChapterModels[0].courseCustomLectureModelList" :key="index" class="valid-msg">
<ul class="video">
<li class="video-wapper">
<span class="title">视频{{index + 1}}</span>
<img src="../../assets/image/phrase3/icon-pin.png" />
<span class="name" @click="previewVideoAction(lecture)">{{lecture.resourceModel && lecture.resourceModel.name}}</span>
</li>
</ul>
<div class="video-name">
<span class="title">
<span >*</span>
<span class="video-title">视频名称</span>
</span>
<el-input
size="small"
v-model="lecture.name"
placeholder="请输入课程名称"
style="width: 380px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">
{{(lecture.name || '').replace(/\s+/g,"").length}}/25
<span class="edit-wrapper">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息
</span>
</span>
<div v-show="needShowAuditMsg && formData.courseNameCheck" class="error-video">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
<span class="cancle">X</span>
</div>
</div>
</li>
<span v-show="needShowUploadProcess" class="upload-process" :style="{'width': (uploadProgress/100 * 340) + 'px'}"></span>
</ul>
</div>
<div class="other-content valid-msg">
<div class="tips">注：以下信息为非必填项，您也可以根据实际情况修改</div>
<div class="basic-item-icon">
<!-- <span class="require">*</span> -->
<el-form-item label="课程封面：">
<el-upload
v-model="formData.courseIntroImage"
class="bg-uploader"
action="#"
:show-file-list="false"
:disabled="disabled"
>
<div class="bg-img-wrapper">
<img
v-if="formData.courseIntroImage"
@mouseover.stop="imgMouseOver=true"
:src="formData.courseIntroImage"
class="bg-img"
/>
<img
v-if="!formData.courseIntroImage"
class="bg-img"
src="../../assets/image/small.png"
/>
</div>
</el-upload>
<div class="limit-text">尺寸：750*420，只支持jpeg格式</div>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="课程难度：">
<el-radio-group v-model="formData.difficultyLevel" :disabled="disabled">
<el-radio :label="1">初级</el-radio>
<el-radio :label="2">中级</el-radio>
<el-radio :label="3">高级</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="讲师名称：" class="valid-msg">
<el-col :span="18">
<el-input
size="small"
v-model="formData.courseCustomDoctorModels[0].courseDoctorName"
placeholder="请输入讲师名称"
style="width: 360px"
maxlength="25"
@focus="isShowDoctorList=true"
@input="filterDoctorName"
@blur="doctorNameInputBlur"
:disabled="disabled"
></el-input>
<ul v-show="isShowDoctorList" class="doctor-select-list">
<li
v-for="(item, index) in doctorNameList"
:key="index"
@click="selectDoctor(item.courseDoctorName, index)"
:class="{'doctor-selected': item.seleted}"
>
<span v-show="item.show">{{item.courseDoctorName || '测试名'}}</span>
</li>
</ul>
<span class="word-num">
{{(formData.courseCustomDoctorModels[0] && formData.courseCustomDoctorModels[0].courseDoctorName || '').replace(/\s+/g,"").length}}/25
<span class="edit-wrapper">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息
</span>
</span>
<div v-show="needShowAuditMsg && formData.courseNameCheck" class="error">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
<span class="cancle">X</span>
</div>
</el-col>
</el-form-item>
<div class="basic-item-icon">
<el-form-item label="讲师头像：" class="valid-msg">
<el-upload
v-model="formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl"
class="bg-uploader"
action="#"
:show-file-list="false"
:disabled="disabled"
>
<div class="bg-img-wrapper">
<img
v-if="formData.courseCustomDoctorModels && formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl || ''"
@mouseover.stop="imgMouseOver=true"
:src="formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl"
class="bg-img-doctor"
/>
<img
v-if="!(formData.courseCustomDoctorModels && formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl || '')"
class="bg-img-doctor"
src="../../assets/image/small.png"
/>
</div>
</el-upload>
<!-- <span class="word-num">
<span class="edit-wrapper">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息
</span>
</span> -->
<!-- <div v-show="needShowAuditMsg && formData.courseNameCheck" class="error">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
<span class="cancle">X</span>
</div> -->
<!-- <div class="limit-text">尺寸：88*88，只支持jpeg格式</div> -->
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="所属机构：" class="valid-msg">
<el-col :span="18">
<el-input
size="small"
v-model="formData.courseCustomDoctorModels[0].courseDoctorHospital"
placeholder="请输入所属机构"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">
{{(formData.courseCustomDoctorModels && formData.courseCustomDoctorModels[0].courseDoctorHospital || '').replace(/\s+/g,"").length}}/25
<span class="edit-wrapper">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息
</span>
</span>
<div v-show="needShowAuditMsg && formData.courseNameCheck" class="error">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
<span class="cancle">X</span>
</div>
</el-col>
</el-form-item>
<el-form-item label="课程简介：" class="valid-msg">
<el-col :span="14">
<el-input
style="width:420px"
size="small"
type="textarea"
maxlength="200"
:autosize="{ minRows: 5}"
placeholder="请输入课程简介"
v-model="formData.courseIntro"
:disabled="disabled"
/>
<span class="word-num">
{{(formData.courseIntro || '').replace(/\s+/g,"").length}}/200
<span class="edit-wrapper">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息
</span>
</span>
<div v-show="needShowAuditMsg && formData.courseNameCheck" class="error-area">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
<span class="cancle">X</span>
</div>
</el-col>
</el-form-item>
</div>
</el-form>
</div>
<footer style="padding: 30px;padding-bottom: 50px;">
<el-button style="margin-left: 20px" @click="backToListPage">返回列表</el-button>
<el-button style="margin-left: 100px" type="primary" @click="insertOrUpdate(2)">通 过</el-button>
<el-button type="primary" @click="insertOrUpdate(1)">拒 绝</el-button>
</footer>
</div>
<DialogComponet :dialogObj="dialogObj" @hide="hideCancleTips" @confirm="dialogObj.visible=false"></DialogComponet>
<PreviewVideo :dialogVisible="isPreviewVideo" :videoUrl="videoUrl" @close="isPreviewVideo=false"></PreviewVideo>
</div>
</template>
<script>
import PreviewVideo from "@/components/education/custom-resource/preview-video";
import PreviewProtocol from "@/components/education/custom-resource/preview-protocol";
import DialogComponet from "@/components/education/template/dialog";
// reject-reason-dialog
import { openLoading, closeLoading } from "@/utils/utils";
import BreadCrumb from "../../components/breadcrumb.vue";
import * as commonUtil from "../../utils/utils";
let vm = null;
export default {
data() {
let checkCourseName = (rule, value, callback) => {
// 如果有审核的信息，则直接报错
if (!value && this.needCheckField) {
callback(new Error("请输入课程名称"));
} else {
callback();
}
};
return {
curmbFirst: "CME",
curmbSecond: "外部资源管理",
needCheckField: false,
needShowAuditMsg: false,
needShowUploadProcess: false,
disabled: true,
formData: {
checkStatus: 0,
courseCustomChapterModels: [
{
courseCustomLectureModelList: [],
id: null,
name: "视频课程"
}
],
courseCustomDoctorModels: [
{
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
}
],
courseId: null,
courseIntro: "",
courseIntroCheck: "",
courseIntroImage:
"https://test1-file.yunqueyi.com/image/png/common/202006201528136.png",
courseIntroImageCheck: "",
courseName: "",
courseNameCheck: "",
deleteCustomLectureIds: [],
difficultyLevel: 1,
shareType: 1,
subjectIdList: []
},
uploadImgMessage: false,
imgMouseOver: false,
rules: {
courseName: [
{ required: true, message: " " },
{ validator: checkCourseName }
],
subjectIdList: [
{ required: true, message: "请输入课程名称" }
],
shareType: [
{ required: true, message: "请选择开放范围" }
]
},
labelOptions: [],
fileList: [
],
projectBanner:
"https://file.yunqueyi.com/h5/images/cme/project-banner.png",
doctorHeader: "https://file.yunqueyi.com/h5/images/cme/doctor-header.png",
doctorNameList: [
{ courseDoctorName: "333", show: true, seleted: false },
{ courseDoctorName: "334", show: true, seleted: false },
{ courseDoctorName: "335", show: true, seleted: false },
{ courseDoctorName: "336", show: true, seleted: false }
],
isShowDoctorList: false,
isPreviewVideo: false,
videoUrl: "",
orgCourseInfo: {
defaultDoctor: {
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
},
doctorModelList: [
{
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
}
],
limitModel: {
maxLimitOneVideoSize: 0,
maxLimitVideoCount: 0,
maxStorageSpace: 0,
usedStorageSpace: 0
}
},
uploadProgress: 0,
dialogObj: {
visible: false,
title: "确定取消吗？",
message: "发布后,项目将进入审核中,待审核完成后学员可在云鹊医App上参加培训学习",
tip: "",
confirmMsg: "取 消",
hideMsg: "确 定"
},
courseId: 0,
currentModifiedOrg: {},
currentFieldName: ''
};
},
computed: {},
components: {
BreadCrumb,
PreviewVideo,
DialogComponet,
},
created() {
vm = this;
this.courseId = this.$route && this.$route.query && this.$route.query.courseId || 0;
vm.initModify();
},
mounted() {
this.getLabelList();
commonUtil.resizeHeight();
},
methods: {
backToListPage() {
this.$router.back(-1)
},
// 创建课程页面的初始信息
initOrgCourseInfo() {
vm.GET("contents/course/custom/info/init", { setEntry: true }).then(
res => {
if (res.code == "000000") {
this.orgCourseInfo = res.data;
this.formData.courseCustomDoctorModels[0] = this.orgCourseInfo.defaultDoctor;
this.formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl =
this.orgCourseInfo.defaultDoctor.courseDoctorAvatarUrl ||
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png";
this.doctorNameList = this.convertDNameToSelectOpt(
this.orgCourseInfo.doctorModelList
);
+this.courseId && this.getCourseInfoById(this.courseId);
}
}
);
},
// 将医生名称进行处理
convertDNameToSelectOpt(doctorModelList) {
doctorModelList.forEach(item => {
item.show = true;
item.seleted = false;
});
return doctorModelList;
},
// 初始化课程信息
initModify() {
this.needShowAuditMsg = true;
this.initOrgCourseInfo();
},
// 创建课程页面的初始信息
getCourseInfoById(courseId) {
vm.GET(`contents/course/custom/info/${courseId}`)
.then( res => {
if ( res.code == "000000") {
this.formData = res.data;
}
}
);
},
// 过滤医生信息
filterDoctorName(value) {
this.doctorNameList.forEach(item => {
if (value) {
if ((item.value + "").indexOf(value) == -1) {
item.show = false;
} else {
item.show = true;
}
if (item.value == value) {
item.seleted = true;
} else {
item.seleted = false;
}
} else {
item.show = true;
}
});
},
// 当选择医生的焦点失去时，要反选医生信息
doctorNameInputBlur() {
setTimeout(() => {
this.isShowDoctorList = false;
this.selectDoctorByName(
this.formData.courseCustomDoctorModels[0].courseDoctorName
);
}, 200);
},
// 根据姓名反选医生信息
// TODO 尝试找到完全匹配的医生
selectDoctorByName(name) {
},
// 选择其中一个
selectDoctor(name) {
console.log(name);
this.formData.courseCustomDoctorModels[0].courseDoctorName = name;
this.selectDoctorByName(name);
},
// 获取学科列表
getLabelList() {
let req = {};
this.GET("aggregate/content/labelList", req).then(res => {
if (res.code == "000000") {
this.convertLabelList(res.data);
}
});
},
// 将所有子分类中的“全部”去掉
convertLabelList(labelList) {
let newLabelList = [];
labelList.forEach(item => {
item.subList = item.subList.slice(1);
});
this.labelOptions = labelList;
},
// 添加或修改课程（kind = 3）
insertOrUpdate(checkStatus) {
// checkStatus 1：拒绝的话，要有理由；2：通过的话，没有拒绝理由
// TODO 判断
this.formData.checkStatus = checkStatus;
this.POST("contents/course/custom/check/v1/check", this.formData).then(res => {
if (res.code == "000000") {
this.backToListPage();
}
});
},
// 关闭（“取消”按钮弹出来的）弹框
hideCancleTips() {
this.dialogObj.visible = false;
},
// 预览视频
previewVideoAction(lecture) {
this.videoUrl = lecture.resourceModel.filePath;
this.isPreviewVideo = true;
},
// 对特定字段进行修改
auditField(modifiedOrg, fieldName) {
this.currentModifiedOrg = modifiedOrg;
this.currentFieldName = fieldName;
},
}
};
</script>
<style scoped lang="scss">
.edit-course-wrapper {
.course-content {
// color: red;
padding-top: 30px;
.basic-item-icon {
position: relative;
margin-top: 20px;
.require {
position: absolute;
left: 40px;
top: 11px;
color: #f56c6c;
}
.upload-message {
position: absolute;
left: 160px;
top: 105px;
font-size: 12px;
color: #f56c6c;
}
.img-delete {
position: absolute;
left: 0px;
top: 0px;
width: 84px;
height: 100px;
background: #000;
opacity: 0.7;
z-index: 999;
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
}
}
.upload-tips {
width: 100%;
position: relative;
top: -10px;
font-size: 12px;
color: #979899;
// display: inline-block;
}
.custom-list {
// width: 100%;
width: 800px;
display: flex;
flex-direction: column;
// border-radius: 3px;
// border: 1px solid rgba(228,231,237,1);
padding: 20px;
padding-top: 0px;
font-size: 12px;
color: #606266;
& > li {
margin: 10px 0;
}
.video {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.video-wapper {
height: 28px;
line-height: 28px;
.title {
display: inline-block;
width: 70px;
text-align: right;
margin-right: 10px;
}
.name {
cursor: pointer;
color: #5890DD;
}
img {
width: 12px;
height: 12px;
}
}
// .delete {
// position: relative;
// top: 4px;
// cursor: pointer;
// width: 16px;
// height: 16px;
// }
}
.video-name {
.title {
display: inline-block;
width: 70px;
text-align: right;
margin-right: 10px;
}
}
}
}
.word-num {
font-size: 12px;
color: #999;
padding-top: 5px;
}
.bg-uploader {
img {
float: left;
}
.bg-img-wrapper {
.bg-img {
display: block;
width: 160px;
height: 90px;
}
.bg-img-doctor {
display: block;
width: 88px;
height: 88px;
}
}
.bg-video {
float: left;
width: 84px;
height: 100px;
}
}
.limit-text {
position: absolute;
top: 86px;
left: 0px;
font-size: 12px;
color: #979899;
}
.separator-line {
width: 100%;
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: space-between;
.center {
cursor: pointer;
width: 130px;
color: #666666;
img {
width: 12px;
}
}
.line-left,
.line-right {
// display: inline-block;
// width: 100%;
flex: 1;
border-bottom: 1px dashed #e4e7ed;
}
}
.tips {
width: 500px;
height: 32px;
line-height: 32px;
margin-left: 38px;
padding-left: 12px;
background: rgba(254, 250, 245, 1);
border-radius: 3px;
color: #e6a23c;
}
.valid-msg {
position: relative;
.error {
width: 370px;
position: absolute;
display: flex;
justify-content: space-between;
top: 29px;
font-size: 13px;
color: #ed3131;
.text {
flex: 1;
}
.cancle {
width: 20px;
margin-left: 20px;
cursor: pointer;
}
}
.error-area {
position: absolute;
bottom: -32px;
font-size: 13px;
color: #ed3131;
.cancle {
width: 20px;
margin-left: 20px;
cursor: pointer;
}
}
.error-video {
position: absolute;
top: 64px;
left: 82px;
font-size: 13px;
color: #ed3131;
.cancle {
width: 20px;
margin-left: 20px;
cursor: pointer;
}
}
.edit-wrapper {
cursor: pointer;
color: #449284;
.edit-img {
position: relative;
top: 2px;
width: 12px;
margin: 0 2px 0 4px;
}
}
.doctor-select-list {
width: 200px;
// max-height: 100px;
position: absolute;
z-index: 100;
background: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
// margin: 10px;
li {
padding-left: 20px;
cursor: pointer;
&:hover {
background: #f4f7fd;
}
&.doctor-selected {
background: #f4f7fd;
}
}
}
}
.upload-process {
margin: 10px 0 10px 10px;
display: block;
// width: 310px;
height: 4px;
background: #449284;
border-radius: 2px;
}
}
}
</style>
<style scoped lang="scss">
.review-access-wrap {
.review-access {
padding: 10px;
background: #fff;
}
}
</style>
\ No newline at end of file
src/views/education/audit-custom-course copy.vue 已删除 100644 → 0
浏览文件 @ 092152c4
<template>
<div class="edit-course-wrapper dialog-title-border">
<div class="course-content">
<el-form
ref="formDataRef"
:model="formData"
:rules="rules"
label-width="120px"
class="basic-form"
>
<el-form-item label="课程名称：" prop="courseName" class="valid-msg">
<el-col :span="20">
<el-input
size="small"
v-model="formData.courseName"
placeholder="请输入课程名称"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">
{{(formData.courseName).replace(/\s+/g,"").length}}/25
<span class="edit-wrapper"><img class="edit-img" src="../../assets/image/phrase3/icon-pin.png">修改信息</span>
</span>
<div class="error"><span>错误信息错误信息错误信息错误信息错误信息错误信息息</span><span class="cancle">X</span></div>
</el-col>
</el-form-item>
<el-form-item label="学科分类：" prop="subjectIdList" class="valid-msg">
<el-col :span="18">
<!-- :props="{ expandTrigger: 'hover' }" -->
<el-cascader
style="width: 360px"
v-model="formData.subjectIdList"
:options="labelOptions"
:props="{ value: 'id', label: 'name', children: 'subList'}"
@change="handleChange">
<!-- <template slot-scope="{ node, data }">
<span>{{ data.name }}</span>
</template> -->
</el-cascader>
</el-col>
</el-form-item>
<el-form-item label="开放范围：" prop="shareType" class="valid-msg">
<el-radio-group v-model="formData.shareType">
<el-radio :label="1">机构共享</el-radio>
</el-radio-group>
</el-form-item>
<div class="basic-item-icon">
<span class="require">*</span>
<el-form-item label="课程视频：" prop="range">
<!-- action="https://jsonplaceholder.typicode.com/posts/" -->
<!-- multiple -->
<!-- :on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove" -->
<el-upload
class="upload-demo"
action="#"
:before-upload="beforeUploadListPic"
:limit="3"
:on-exceed="handleExceed"
:show-file-list="false"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
<span >只支持MP4格式，课程视频最多上传100个，单文件最大2G</span>
<ul class="custom-list">
<li v-for="(file, index) in fileList" :key="index">
<span>{{file.name}}</span>
</li>
</ul>
</div>
</el-upload>
</el-form-item>
</div>
<div class="other-content valid-msg" v-show="isShowOtherContent">
<div class="tips">注：以下信息为非必填项，您也可以根据实际情况修改</div>
<div class="basic-item-icon">
<!-- <span class="require">*</span> -->
<el-form-item label="课程封面：">
<el-upload
v-model="formData.courseHeaderImage"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadListPic"
:disabled="disabled"
>
<div class="bg-img-wrapper">
<img v-if="formData.courseHeaderImage" @mouseover.stop="imgMouseOver=true" :src="formData.courseHeaderImage" class="bg-img">
<img v-if="!formData.courseHeaderImage" class="bg-img" src="../../assets/image/small.png">
</div>
</el-upload>
<div class="limit-text">
尺寸：750*420，只支持jpeg格式
</div>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="课程难度：">
<el-radio-group v-model="formData.difficultyLevel">
<el-radio :label="1">初级</el-radio>
<el-radio :label="2">中级</el-radio>
<el-radio :label="3">高级</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="讲师名称：" class="valid-msg">
<el-col :span="18">
<el-input
size="small"
v-model="formData.courseCustomDocterModel[0].courseDoctorName"
placeholder="请输入讲师名称"
style="width: 360px"
maxlength="25"
@focus="isShowDoctorList=true"
@input="filterDoctorName"
@blur="doctorNameInputBlur"
:disabled="disabled"
></el-input>
<ul v-show="isShowDoctorList" class="doctor-select-list">
<li
v-for="item in doctorNameList"
:key="item.value"
@click="selectDoctor(item.value)"
:class="{'doctor-selected': item.seleted}"
>
<span v-show="item.show">{{item.value}}</span>
</li>
</ul>
<span class="word-num">{{(formData.courseCustomDocterModel[0].courseDoctorName).replace(/\s+/g,"").length}}/25</span>
</el-col>
</el-form-item>
<div class="basic-item-icon">
<el-form-item label="讲师头像：">
<el-upload
v-model="formData.courseCustomDocterModel[0].courseDoctorAvatarUrl"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadListPic"
:disabled="disabled"
>
<div class="bg-img-wrapper">
<img v-if="formData.courseCustomDocterModel[0].courseDoctorAvatarUrl" @mouseover.stop="imgMouseOver=true" :src="formData.courseCustomDocterModel[0].courseDoctorAvatarUrl" class="bg-img-doctor">
<img v-if="!formData.courseCustomDocterModel[0].courseDoctorAvatarUrl" class="bg-img-doctor" src="../../assets/image/small.png">
</div>
</el-upload>
<div class="limit-text">
尺寸：88*88，只支持jpeg格式
</div>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="所属机构：">
<el-col :span="18">
<el-input
size="small"
v-model="formData.courseCustomDocterModel[0].courseDoctorHospital"
placeholder="请输入所属机构"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">{{(formData.courseCustomDocterModel[0].courseDoctorHospital).replace(/\s+/g,"").length}}/25</span>
</el-col>
</el-form-item>
<el-form-item label="课程简介：">
<el-col :span="22">
<el-input
size="small"
type="textarea"
:autosize="{ minRows: 5}"
placeholder="请输入课程简介"
v-model="formData.courseIntro"
style="width:90%;"
></el-input>
<span class="word-num">{{(formData.courseIntro).replace(/\s+/g,"").length}}/200</span>
</el-col>
</el-form-item>
</div>
<!-- 更多信息 -->
<div class="separator-line">
<span class="line-left"></span>
<div @click="toggleOtherContent" class="center">
<span>展开更多信息</span>
<img v-show="isShowOtherContent" src="../../assets/image/phrase3/arrow-up.png"/>
<img v-show="!isShowOtherContent" src="../../assets/image/phrase3/arrow-down.png"/>
</div>
<span class="line-right"></span>
</div>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="close">取 消</el-button>
<el-button type="primary" @click="submitForm('formDataRef')">确 定</el-button>
</div>
<!-- <PreviewVideo :dialogVisible="isPreviewVideo" :videoUrl="videoUrl" @close="closeVideo"></PreviewVideo> -->
<!-- <button @click="previewVideoAction">test video</button> -->
</div>
</template>
<script>
import PreviewVideo from "@/components/education/custom-resource/preview-video";
import PreviewProtocol from "@/components/education/custom-resource/preview-protocol";
import PreviewEditCourse from "@/components/education/custom-resource/edit-course-dialog";
import { doUpload, getFilePath } from "@/utils/qiniu-util";
import { openLoading, closeLoading, getQiniuToken1 } from "@/utils/utils";
let vm = null;
export default {
data() {
let checkCourseName = (rule, value, callback) => {
// 如果有审核的信息，则直接报错
// if(this.needShowAuditMsg && this.auditMsgMap.name.desc) {
// callback(new Error(this.auditMsgMap.name.desc));
// return;
// }
// if(!this.needShowAuditMsg && !value) {
// callback(new Error('请输入课程名称'));
// } else {
// callback();
// }
};
return {
needShowAuditMsg: true,
auditMsgMap: {
name: {
desc: '填写的课程名称不对'
}
},
disabled: false,
formData: {
checkStatus: 0,
courseCustomChapterModel: [{
courseCustomLectureModelList: [
{
contentCheck: '',
id: 0,
name: '',
nameCheck: '',
resourceModel: {
createdId: 0,
createdTime: '',
deleteFlag: 0,
filePath: '',
fileType: 0,
formatType: 0,
hospitalId: 0,
id: 0,
idType: 0,
lectureId: 0,
modifiedId: 0,
modifiedTime: '',
name: '',
operateKey: '',
page: 0,
resolutionRatio: '',
size: 0,
status: 0,
totalTime: 0,
type: 0,
videoType: 0
}
}
],
id: 0,
name: ''
}],
courseCustomDocterModel: [
{
courseDoctorAvatarUrl: 'https://file.yunqueyi.com/h5/images/cme/doctor-header.png',
courseDoctorHospital: '',
courseDoctorHospitalCheck: '',
courseDoctorName: '',
courseDoctorNameCheck: '',
id: 0
}
],
courseHeaderImage: 'https://file.yunqueyi.com/h5/images/cme/project-banner.png',
courseId: 0,
courseIntro: '',
courseIntroCheck: '',
courseName: '',
courseNameCheck: '',
difficultyLevel: 1,
shareType: 1,
subjectIdList: [410, 423]
},
uploadImgMessage: false,
imgMouseOver: false,
rules: {
courseName: [
{ required: true, message: "请输入课程名称"},
{ validator: checkCourseName }
],
subjectIdList: [
{ required: true, message: "请输入课程名称", trigger: "blur"},
],
shareType: [
{ required: true, message: "请选择开放范围", trigger: "blur"},
],
},
labelOptions: [],
isShowOtherContent: false,
fileList: [
{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
{name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
],
projectBanner: 'https://file.yunqueyi.com/h5/images/cme/project-banner.png',
doctorHeader: 'https://file.yunqueyi.com/h5/images/cme/doctor-header.png',
doctorNameList: [
{value: '333', show: true, seleted: false},
{value: '334', show: true, seleted: false},
{value: '335', show: true, seleted: false},
{value: '336', show: true, seleted: false},
],
isShowDoctorList: false,
isPreviewVideo: false,
videoUrl: '',
};
},
props: {
dialogVisible: {
type: Boolean,
default: false
},
addOrUpdate: {
type: String,
default: 'add'
}
},
computed: {
},
watch: {
dialogVisible(isVisible) {
if(isVisible) {
if(this.addOrUpdate == 'add') {
this.initAdd();
} else {
this.initModify();
}
}
}
},
components: {
PreviewVideo,
PreviewEditCourse
},
created() {
vm = this;
this.initAdd();
},
mounted() {
this.getLabelList();
// setTimeout(() => {
// console.log(this.$refs.formDataRef);
// this.$refs['formDataRef'].validateField("name");
// }, 2000);
},
methods: {
// 添加时初始化
initAdd() {
console.log('in initAdd');
},
initModify() {
console.log('in initModify');
},
// 过滤医生信息
filterDoctorName(value) {
this.doctorNameList.forEach( item => {
if(value) {
if((item.value + '').indexOf(value) == -1) {
item.show = false;
} else {
item.show = true;
}
if(item.value == value) {
item.seleted = true;
} else {
item.seleted = false;
}
} else {
item.show = true;
}
})
},
// 当选择医生的焦点失去时，要反选医生信息
doctorNameInputBlur() {
setTimeout(() => {
this.isShowDoctorList = false;
this.selectDoctorByName(this.formData.courseCustomDocterModel[0].courseDoctorName);
}, 200);
},
// 根据姓名反选医生信息
// TODO
selectDoctorByName(name) {
},
// 选择其中一个
selectDoctor(name) {
console.log(name)
this.formData.courseCustomDocterModel[0].courseDoctorName = name;
this.selectDoctorByName(name);
},
close() {
this.$emit('close');
},
// 获取学科列表
getLabelList() {
let req = {};
this.GET("aggregate/content/labelList", req).then(res => {
if (res.code == '000000') {
this.convertLabelList(res.data);
}
});
},
// 将所有子分类中的“全部”去掉
convertLabelList(labelList) {
let newLabelList = [];
labelList.forEach( item => {
item.subList = item.subList.slice(1);
})
this.labelOptions = labelList;
},
//上传列表图片
beforeUploadListPic(file) {
let fileLimit = {
width: 230,
height: 172,
size: 0.5,
sizeText: "500K",
key: "attachmentUrl",
more: "attachmentMore1",
show: "uploadImgMessage"
};
vm.beforeAvatarUpload(file, fileLimit);
},
//上传图片校验
beforeAvatarUpload(file, fileLimit) {
console.log();
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
console.log('isJPG', isJPG, 'isPNG', isPNG, 'isLt2M', isLt2M);
// if (!isJPG && !isPNG) {
// vm.$message.error("图片不符合规范，请根据规范上传图片");
// return;
// }
// if (!isLt2M) {
// vm.$message.error("图片不符合规范，请根据规范上传图片 ");
// return;
// }
let _img = new FileReader();
_img.readAsDataURL(file);
_img.onload = function(theFile) {
let image = new Image();
image.src = theFile.target.result;
image.onload = function() {
let _vm = this;
if (
false
// true ||
// _vm.width != fileLimit.width ||
// _vm.height != fileLimit.height
) {
vm.$message.error("图片不符合规范，请根据规范上传图片");
} else {
openLoading(vm);
doUpload(
vm,
file,
getFilePath(file, null),
"preview4",
"progress1",
1
).then(function(path) {
closeLoading(vm);
console.log(path);
if (fileLimit.show == "uploadImgMessage") {
vm.uploadImgMessage = false;
}
// else if (fileLimit.show == "uploadImgMessage2") {
// vm.uploadImgMessage2 = false;
// }
vm.formData[fileLimit.key] = path.fullPath;
vm.formData[fileLimit.more] = {
attachmentName: path.name,
attachmentExt: path.ext,
attachmentSize: path.size
};
vm.$message.success("上传成功");
});
}
};
};
return isJPG && isLt2M;
},
toggleOtherContent() {
this.isShowOtherContent = !this.isShowOtherContent;
},
// 上传文件相关
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 100 个文件，您已经共选择了 ${files.length + fileList.length} 个文件！`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
},
//表单校验
submitForm(formName) {
console.log('this.formData', this.formData);
this.needShowAuditMsg = false;
let flag = null;
this.$refs[formName].validate(valid => {
if (valid) {
//console.log("success");
flag = true;
} else {
console.log("error submit!!");
flag = false;
}
});
return flag;
},
handleChange(value) {
console.log(value);
},
}
};
</script>
<style scoped lang="scss">
.edit-course-wrapper {
.course-content {
// color: red;
.basic-item-icon {
position: relative;
margin-top: 20px;
.require {
position: absolute;
left: 40px;
top: 11px;
color: #f56c6c;
}
.upload-message {
position: absolute;
left: 160px;
top: 105px;
font-size: 12px;
color: #f56c6c;
}
.img-delete {
position: absolute;
left: 0px;
top: 0px;
width: 84px;
height: 100px;
background: #000;
opacity: 0.7;
z-index: 999;
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
}
}
}
.word-num {
font-size: 12px;
color: #999;
padding-top: 5px;
}
.bg-uploader {
img {
float: left;
}
.bg-img-wrapper {
.bg-img {
display: block;
width: 160px;
height: 90px;
}
.bg-img-doctor {
display: block;
width: 88px;
height: 88px;
}
}
.bg-video {
float: left;
width: 84px;
height: 100px;
}
}
.limit-text {
position: absolute;
top: 86px;
left: 0px;
font-size: 12px;
color: #979899;
}
.separator-line {
width: 100%;
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: space-between;
.center {
cursor: pointer;
width: 130px;
color: #666666;
img {
width: 12px;
}
}
.line-left, .line-right {
// display: inline-block;
// width: 100%;
flex: 1;
border-bottom: 1px dashed #E4E7ED;
}
}
.tips {
width: 100%;
height:32px;
line-height: 32px;
padding-left: 12px;
background:rgba(254,250,245,1);
border-radius:3px;
color: #E6A23C;
}
.valid-msg {
position: relative;
.error {
width: 370px;
position: absolute;
display: flex;
justify-content: space-between;
top: 29px;
font-size: 13px;
color: #ED3131;
.text {
flex: 1;
}
.cancle {
cursor: pointer;
width: 20px;
}
}
.edit-wrapper {
color: #449284;
.edit-img {
position: relative;
top: 2px;
width: 12px;
margin: 0 2px 0 4px;
}
}
.doctor-select-list {
width: 200px;
// max-height: 100px;
position: absolute;
z-index: 100;
background: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
// margin: 10px;
li {
padding-left: 20px;
cursor: pointer;
&:hover {
background: #f4f7fD;
}
&.doctor-selected {
background: #f4f7fD;
}
}
}
}
}
}
</style>
src/views/education/audit-custom-course.vue
浏览文件 @ 25d8463d
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
<span class="word-num"> <span class="word-num">
{{(formData.courseName || '').replace(/\s+/g,"").length}}/25 {{(formData.courseName || '').replace(/\s+/g,"").length}}/25
<span v-show="formData.checkStatus == 0" class="edit-wrapper" @click="auditField(formData, 'courseNameCheck')"> <span v-show="formData.checkStatus == 0" class="edit-wrapper" @click="auditField(formData, 'courseNameCheck')">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息 <img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />拒绝原因
</span> </span>
</span> </span>
<div v-show="needShowAuditMsg && formData.courseNameCheck && formData.checkStatus != 2" class="error"> <div v-show="needShowAuditMsg && formData.courseNameCheck && formData.checkStatus != 2" class="error">
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
<span class="word-num"> <span class="word-num">
{{(lecture.name || '').replace(/\s+/g,"").length}}/25 {{(lecture.name || '').replace(/\s+/g,"").length}}/25
<span v-show="formData.checkStatus == 0" class="edit-wrapper" @click="auditField(formData.courseCustomChapterModels[0].courseCustomLectureModelList[index], 'nameCheck')"> <span v-show="formData.checkStatus == 0" class="edit-wrapper" @click="auditField(formData.courseCustomChapterModels[0].courseCustomLectureModelList[index], 'nameCheck')">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息 <img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />拒绝原因
</span> </span>
</span> </span>
<div v-show="needShowAuditMsg && formData.courseCustomChapterModels[0].courseCustomLectureModelList[index].nameCheck && formData.checkStatus != 2" class="error-video"> <div v-show="needShowAuditMsg && formData.courseCustomChapterModels[0].courseCustomLectureModelList[index].nameCheck && formData.checkStatus != 2" class="error-video">
...@@ -121,7 +121,7 @@ ...@@ -121,7 +121,7 @@
<div class="limit-text">尺寸：750*420，只支持jpeg格式</div> <div class="limit-text">尺寸：750*420，只支持jpeg格式</div>
<span class="word-num"> <span class="word-num">
<span v-show="formData.checkStatus == 0" class="edit-wrapper" @click="auditField(formData, 'courseIntroImageCheck')"> <span v-show="formData.checkStatus == 0" class="edit-wrapper" @click="auditField(formData, 'courseIntroImageCheck')">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息 <img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />拒绝原因
</span> </span>
</span> </span>
<div v-show="needShowAuditMsg && formData.courseIntroImageCheck" class="error" :class="{'top-124': formData.checkStatus == 0}" style="position:absolute;top:103px;"> <div v-show="needShowAuditMsg && formData.courseIntroImageCheck" class="error" :class="{'top-124': formData.checkStatus == 0}" style="position:absolute;top:103px;">
...@@ -165,7 +165,7 @@ ...@@ -165,7 +165,7 @@
<span class="word-num"> <span class="word-num">
{{(formData.courseCustomDoctorModels[0] && formData.courseCustomDoctorModels[0].courseDoctorName || '').replace(/\s+/g,"").length}}/25 {{(formData.courseCustomDoctorModels[0] && formData.courseCustomDoctorModels[0].courseDoctorName || '').replace(/\s+/g,"").length}}/25
<span v-show="formData.checkStatus == 0" class="edit-wrapper" @click="auditField(formData.courseCustomDoctorModels[0], 'courseDoctorNameCheck')"> <span v-show="formData.checkStatus == 0" class="edit-wrapper" @click="auditField(formData.courseCustomDoctorModels[0], 'courseDoctorNameCheck')">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息 <img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />拒绝原因
</span> </span>
</span> </span>
<div v-show="needShowAuditMsg && formData.courseCustomDoctorModels[0].courseDoctorNameCheck && formData.checkStatus != 2" class="error"> <div v-show="needShowAuditMsg && formData.courseCustomDoctorModels[0].courseDoctorNameCheck && formData.checkStatus != 2" class="error">
...@@ -201,7 +201,7 @@ ...@@ -201,7 +201,7 @@
<div class="limit-text">尺寸：88*88，只支持jpeg格式</div> <div class="limit-text">尺寸：88*88，只支持jpeg格式</div>
<span class="word-num"> <span class="word-num">
<span v-show="formData.checkStatus == 0" class="edit-wrapper" @click="auditField(formData.courseCustomDoctorModels[0], 'courseDoctorAvatarUrlCheck')"> <span v-show="formData.checkStatus == 0" class="edit-wrapper" @click="auditField(formData.courseCustomDoctorModels[0], 'courseDoctorAvatarUrlCheck')">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息 <img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />拒绝原因
</span> </span>
</span> </span>
<div v-show="needShowAuditMsg && formData.courseCustomDoctorModels[0].courseDoctorAvatarUrlCheck" class="error" :class="{'top-124': formData.checkStatus == 0}" style="position:absolute;top: 102px;"> <div v-show="needShowAuditMsg && formData.courseCustomDoctorModels[0].courseDoctorAvatarUrlCheck" class="error" :class="{'top-124': formData.checkStatus == 0}" style="position:absolute;top: 102px;">
...@@ -225,7 +225,7 @@ ...@@ -225,7 +225,7 @@
{{(formData.courseCustomDoctorModels && formData.courseCustomDoctorModels[0].courseDoctorHospital || '').replace(/\s+/g,"").length}}/25 {{(formData.courseCustomDoctorModels && formData.courseCustomDoctorModels[0].courseDoctorHospital || '').replace(/\s+/g,"").length}}/25
<!-- <span class="edit-wrapper"> --> <!-- <span class="edit-wrapper"> -->
<span v-show="formData.checkStatus == 0" class="edit-wrapper" @click="auditField(formData.courseCustomDoctorModels[0], 'courseDoctorHospitalCheck')"> <span v-show="formData.checkStatus == 0" class="edit-wrapper" @click="auditField(formData.courseCustomDoctorModels[0], 'courseDoctorHospitalCheck')">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息 <img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />拒绝原因
</span> </span>
</span> </span>
<div v-show="needShowAuditMsg && formData.courseCustomDoctorModels[0].courseDoctorHospitalCheck && formData.checkStatus != 2" class="error"> <div v-show="needShowAuditMsg && formData.courseCustomDoctorModels[0].courseDoctorHospitalCheck && formData.checkStatus != 2" class="error">
...@@ -249,7 +249,7 @@ ...@@ -249,7 +249,7 @@
<span class="word-num"> <span class="word-num">
{{(formData.courseIntro || '').replace(/\s+/g,"").length}}/200 {{(formData.courseIntro || '').replace(/\s+/g,"").length}}/200
<span v-show="formData.checkStatus == 0" class="edit-wrapper" @click="auditField(formData, 'courseIntroCheck')"> <span v-show="formData.checkStatus == 0" class="edit-wrapper" @click="auditField(formData, 'courseIntroCheck')">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息 <img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />拒绝原因
</span> </span>
</span> </span>
<div v-show="needShowAuditMsg && formData.courseIntroCheck && formData.checkStatus != 2" class="error-area"> <div v-show="needShowAuditMsg && formData.courseIntroCheck && formData.checkStatus != 2" class="error-area">
...@@ -435,6 +435,7 @@ export default { ...@@ -435,6 +435,7 @@ export default {
currentModifiedOrg: {}, currentModifiedOrg: {},
currentFieldName: '', currentFieldName: '',
refuseReasonList: [], refuseReasonList: [],
createdDoctorName: ''
}; };
}, },
computed: {}, computed: {},
...@@ -447,6 +448,7 @@ export default { ...@@ -447,6 +448,7 @@ export default {
created() { created() {
vm = this; vm = this;
this.courseId = this.$route && this.$route.query && this.$route.query.courseId || 0; this.courseId = this.$route && this.$route.query && this.$route.query.courseId || 0;
this.createdDoctorName = this.$route && this.$route.query && this.$route.query.createdDoctorName || '';
vm.initModify(); vm.initModify();
}, },
mounted() { mounted() {
...@@ -602,6 +604,7 @@ export default { ...@@ -602,6 +604,7 @@ export default {
// 点击拒绝按钮 // 点击拒绝按钮
if(checkStatus == 1) { if(checkStatus == 1) {
if(flag) { // 有拒绝原因 if(flag) { // 有拒绝原因
vm.statusObj.confirmRefuse.message = `确定“${this.createdDoctorName}”提交的「${this.formData.courseName}」课程审核为拒绝`,
vm.dialogObj = Object.assign( vm.dialogObj = Object.assign(
vm.dialogObj, vm.dialogObj,
vm.statusObj.confirmRefuse vm.statusObj.confirmRefuse
......
src/views/education/external-resource-manage.vue
浏览文件 @ 25d8463d
...@@ -228,7 +228,8 @@ ...@@ -228,7 +228,8 @@
this.$router.push({ this.$router.push({
path: 'audit-custom-course', path: 'audit-custom-course',
query: { query: {
courseId: row.courseId courseId: row.courseId,
createdDoctorName: row.createdDoctorName,
} }
}) })
}, },
......
src/views/layout/slidebar.vue
浏览文件 @ 25d8463d
...@@ -373,13 +373,26 @@ ...@@ -373,13 +373,26 @@
] ]
} }
const outResourceManage = { const outResourceManage = {
title: '外部资源管理', title: '外部资源管理',
icon: 'el-icon-document', icon: 'el-icon-reading',
index: 'external-resource-manage', index: 'external-resource-manage',
isMessageSend: false, subs: [
checkAuth: false, {
} title: '外部资源列表',
icon: 'el-icon-document',
index: 'external-resource-manage'
},
]
};
// const outResourceManage = {
// title: '外部资源管理',
// icon: 'el-icon-document',
// index: 'external-resource-manage',
// isMessageSend: false,
// checkAuth: false,
// }
vm.items[1].subs.push(itemComponent); vm.items[1].subs.push(itemComponent);
vm.items[1].subs.push(templateManager); vm.items[1].subs.push(templateManager);
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或