Skip to content

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

请认真核对上传内容

上级 2f8f4156
隐藏空白字符变更
内嵌 并排
正在显示 包含 1790 行增加 和 336 行删除
src/components/education/custom-resource/edit-course-dialog copy 4.vue 0 → 100644
浏览文件 @ c99903c8
<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: #999;">请认真核对上传内容，一旦提交后将不能修改</span>
</div>
<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"
>
</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="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>只支持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.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">
<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="item.courseDoctorName"
@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="#"
: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>
<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="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>
</el-dialog>
<!-- <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 (!value) {
callback(new Error("请输入课程名称"));
} else {
callback();
}
};
return {
needShowAuditMsg: true,
disabled: false,
formData: {
checkStatus: 0,
courseCustomChapterModels: [
{
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: "",
shareType: 0,
size: 0,
status: 0,
totalTime: 0,
type: 0,
videoType: 0
}
}
],
id: 0,
name: ""
}
],
courseCustomDoctorModels: [
{
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: 0
}
],
courseId: 0,
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: "请输入课程名称", 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: [
{ 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: 0
},
doctorModelList: [
{
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: 0
}
],
limitModel: {
maxLimitOneVideoSize: 0,
maxLimitVideoCount: 0,
maxStorageSpace: 0,
usedStorageSpace: 0
}
}
};
},
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();
},
methods: {
// 创建课程页面的初始信息
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.formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl ||
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png";
this.doctorNameList = this.convertDNameToSelectOpt(
this.orgCourseInfo.doctorModelList
);
}
}
);
},
// 将医生名称进行处理
convertDNameToSelectOpt(doctorModelList) {
doctorModelList.forEach(item => {
item.show = true;
item.seleted = false;
});
return doctorModelList;
},
// 添加时初始化
initAdd() {
console.log("in initAdd");
this.initOrgCourseInfo();
},
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.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;
},
// 上传视频
beforeUploadVideo(file) {
let fileType = file.type;
// mp3: audio/mpeg; mp4: video/mp4;
console.log('fileType', file);
let fileLimit = {
size: 0.5,
};
// TODO 上传之前要有各种判断 个人最大5G 每个文件是2G limitModel
// if (!isJPG && !isPNG) {
// vm.$message.error("图片不符合规范，请根据规范上传图片");
// return;
// }
// if (!isLt2M) {
// vm.$message.error("图片不符合规范，请根据规范上传图片 ");
// return;
// }
// return;
openLoading(vm);
doUpload(vm, file, getFilePath(file, null), "preview4", "progress1").
then( path => {
closeLoading(vm);
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()
}
this.insertResourceAction(uploadResourceParam);
// vm.$message.success("上传成功");
});
},
insertResourceAction(uploadResourceParam) {
this.POST("contents/course/custom/info/insertResource", [uploadResourceParam]).then(res => {
if (res.code == "000000") {
console.log('insertResourceAction', res);
// 直接push到节里
// this.convertLabelList(res.data);
}
});
},
//上传列表图片
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 => {
console.log("valid", valid);
if (valid) {
//console.log("success");
flag = true;
} else {
console.log("error submit!!");
flag = false;
}
});
return flag;
},
handleChange(value) {
console.log(value);
},
insertOrUpdate() {}
}
};
</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/components/education/custom-resource/edit-course-dialog.vue
浏览文件 @ c99903c8
<template>
<div class="edit-course-wrapper dialog-title-border">
<el-dialog ref="testDialogRef"
<el-dialog
ref="testDialogRef"
title="上传课程"
:visible="dialogVisible"
@close="close"
......@@ -32,10 +33,17 @@
: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>
{{(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>
<div class="error">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
<span class="cancle">X</span>
</div>
</el-col>
</el-form-item>
......@@ -47,15 +55,11 @@
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>
......@@ -65,27 +69,23 @@
<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"
class="upload-video"
action="#"
:before-upload="beforeUploadListPic"
: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 >只支持MP4格式，课程视频最多上传100个，单文件最大2G</span>
<span>只支持MP4格式，课程视频最多上传100个，单文件最大2G</span>
<ul class="custom-list">
<li v-for="(file, index) in fileList" :key="index">
<span>{{file.name}}</span>
</li>
</ul>
</ul>
<span>{{uploadProgress}}</span>
</div>
</el-upload>
</el-form-item>
......@@ -97,7 +97,7 @@
<!-- <span class="require">*</span> -->
<el-form-item label="课程封面：">
<el-upload
v-model="formData.courseHeaderImage"
v-model="formData.courseIntroImage"
class="bg-uploader"
action="#"
:show-file-list="false"
......@@ -105,13 +105,20 @@
: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>
<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>
<div class="limit-text">尺寸：750*420，只支持jpeg格式</div>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
......@@ -127,7 +134,7 @@
<el-col :span="18">
<el-input
size="small"
v-model="formData.courseCustomDocterModel[0].courseDoctorName"
v-model="formData.courseCustomDoctorModels[0].courseDoctorName"
placeholder="请输入讲师名称"
style="width: 360px"
maxlength="25"
......@@ -137,23 +144,25 @@
: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)"
<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.value}}</span>
>
<span v-show="item.show">{{item.courseDoctorName || '测试名'}}</span>
</li>
</ul>
<span class="word-num">{{(formData.courseCustomDocterModel[0].courseDoctorName).replace(/\s+/g,"").length}}/25</span>
<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.courseCustomDocterModel[0].courseDoctorAvatarUrl"
v-model="formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl"
class="bg-uploader"
action="#"
:show-file-list="false"
......@@ -161,13 +170,20 @@
: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>
<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>
<div class="limit-text">尺寸：88*88，只支持jpeg格式</div>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
......@@ -175,15 +191,17 @@
<el-col :span="18">
<el-input
size="small"
v-model="formData.courseCustomDocterModel[0].courseDoctorHospital"
v-model="formData.courseCustomDoctorModels[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>
<span
class="word-num"
>{{(formData.courseCustomDoctorModels && formData.courseCustomDoctorModels[0].courseDoctorHospital || '').replace(/\s+/g,"").length}}/25</span>
</el-col>
</el-form-item>
</el-form-item>
<el-form-item label="课程简介：">
<el-col :span="22">
<el-input
......@@ -194,7 +212,9 @@
v-model="formData.courseIntro"
style="width:90%;"
></el-input>
<span class="word-num">{{(formData.courseIntro).replace(/\s+/g,"").length}}/200</span>
<span
class="word-num"
>{{(formData.courseIntro || '').replace(/\s+/g,"").length}}/200</span>
</el-col>
</el-form-item>
</div>
......@@ -204,14 +224,12 @@
<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"/>
<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>
......@@ -233,113 +251,122 @@ 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();
// }
if (!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: [
courseCustomChapterModels: [
{
courseCustomLectureModelList: [],
id: null,
name: "视频课程"
}
],
courseCustomDoctorModels: [
{
courseDoctorAvatarUrl: 'https://file.yunqueyi.com/h5/images/cme/doctor-header.png',
courseDoctorHospital: '',
courseDoctorHospitalCheck: '',
courseDoctorName: '',
courseDoctorNameCheck: '',
id: 0
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
}
],
courseHeaderImage: 'https://file.yunqueyi.com/h5/images/cme/project-banner.png',
courseId: 0,
courseIntro: '',
courseIntroCheck: '',
courseName: '',
courseNameCheck: '',
courseId: null,
courseIntro: "",
courseIntroCheck: "",
courseIntroImage:
"https://test1-file.yunqueyi.com/image/png/common/202006201528136.png",
courseIntroImageCheck: "",
courseName: "",
courseNameCheck: "",
deleteCustomLectureIds: [],
difficultyLevel: 1,
shareType: 1,
subjectIdList: [410, 423]
subjectIdList: []
},
uploadImgMessage: false,
imgMouseOver: false,
rules: {
courseName: [
{ required: true, message: "请输入课程名称"},
{ required: true, message: "请输入课程名称" },
{ validator: checkCourseName }
],
],
subjectIdList: [
{ required: true, message: "请输入课程名称", trigger: "blur"},
{ required: true, message: "请输入课程名称", trigger: "blur" }
],
shareType: [
{ required: true, message: "请选择开放范围", trigger: "blur"},
],
{ 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'}
{
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',
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},
{ 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: '',
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,
};
},
......@@ -350,16 +377,14 @@ export default {
},
addOrUpdate: {
type: String,
default: 'add'
default: "add"
}
},
computed: {
},
computed: {},
watch: {
dialogVisible(isVisible) {
if(isVisible) {
if(this.addOrUpdate == 'add') {
if (isVisible) {
if (this.addOrUpdate == "add") {
this.initAdd();
} else {
this.initModify();
......@@ -373,36 +398,59 @@ export default {
},
created() {
vm = this;
this.initAdd();
// this.initAdd();
},
mounted() {
this.getLabelList();
// setTimeout(() => {
// console.log(this.$refs.formDataRef);
// this.$refs['formDataRef'].validateField("name");
// }, 2000);
},
methods: {
// 创建课程页面的初始信息
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
);
}
}
);
},
// 将医生名称进行处理
convertDNameToSelectOpt(doctorModelList) {
doctorModelList.forEach(item => {
item.show = true;
item.seleted = false;
});
return doctorModelList;
},
// 添加时初始化
initAdd() {
console.log('in initAdd');
console.log("in initAdd");
this.initOrgCourseInfo();
},
initModify() {
console.log('in initModify');
console.log("in initModify");
},
// 过滤医生信息
filterDoctorName(value) {
this.doctorNameList.forEach( item => {
if(value) {
if((item.value + '').indexOf(value) == -1) {
this.doctorNameList.forEach(item => {
if (value) {
if ((item.value + "").indexOf(value) == -1) {
item.show = false;
} else {
item.show = true;
}
if(item.value == value) {
if (item.value == value) {
item.seleted = true;
} else {
item.seleted = false;
......@@ -410,39 +458,41 @@ export default {
} else {
item.show = true;
}
})
});
},
// 当选择医生的焦点失去时，要反选医生信息
doctorNameInputBlur() {
setTimeout(() => {
this.isShowDoctorList = false;
this.selectDoctorByName(this.formData.courseCustomDocterModel[0].courseDoctorName);
this.selectDoctorByName(
this.formData.courseCustomDoctorModels[0].courseDoctorName
);
}, 200);
},
// 根据姓名反选医生信息
// TODO
// TODO 尝试找到完全匹配的医生
selectDoctorByName(name) {
},
// 选择其中一个
selectDoctor(name) {
console.log(name)
this.formData.courseCustomDocterModel[0].courseDoctorName = name;
console.log(name);
this.formData.courseCustomDoctorModels[0].courseDoctorName = name;
this.selectDoctorByName(name);
},
close() {
this.$emit('close');
this.$emit("close");
},
// 获取学科列表
getLabelList() {
let req = {};
this.GET("aggregate/content/labelList", req).then(res => {
if (res.code == '000000') {
if (res.code == "000000") {
this.convertLabelList(res.data);
}
});
......@@ -451,12 +501,70 @@ export default {
// 将所有子分类中的“全部”去掉
convertLabelList(labelList) {
let newLabelList = [];
labelList.forEach( item => {
labelList.forEach(item => {
item.subList = item.subList.slice(1);
})
});
this.labelOptions = labelList;
},
// 上传视频
beforeUploadVideo(file) {
let fileType = file.type;
// mp3: audio/mpeg; mp4: video/mp4;
console.log('fileType', file);
let fileLimit = {
size: 0.5,
};
// TODO 上传之前要有各种判断 个人最大5G 每个文件是2G limitModel
// if (!isJPG && !isPNG) {
// vm.$message.error("图片不符合规范，请根据规范上传图片");
// return;
// }
// if (!isLt2M) {
// vm.$message.error("图片不符合规范，请根据规范上传图片 ");
// return;
// }
// return;
// openLoading(vm);
doUpload(vm, file, getFilePath(file, null), "preview4", "progress1").
then( 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()
}
this.insertResourceAction(uploadResourceParam);
// vm.$message.success("上传成功");
});
},
insertResourceAction(uploadResourceParam) {
this.POST("contents/course/custom/info/insertResource", [uploadResourceParam]).then(res => {
if (res.code == "000000") {
console.log('insertResourceAction', res);
let lectureObj = {
id: null,
name: res.data.name,
nameCheck: "",
contentCheck: "",
resourceModel: {}
}
lectureObj.resourceModel = res.data && res.data.resourceModelList[0];
this.formData.courseCustomChapterModels[0].courseCustomLectureModelList.push(lectureObj);
// 直接push到节里
// this.convertLabelList(res.data);
}
});
},
//上传列表图片
beforeUploadListPic(file) {
let fileLimit = {
......@@ -477,7 +585,7 @@ export default {
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);
console.log("isJPG", isJPG, "isPNG", isPNG, "isLt2M", isLt2M);
// if (!isJPG && !isPNG) {
// vm.$message.error("图片不符合规范，请根据规范上传图片");
// return;
......@@ -507,14 +615,14 @@ export default {
file,
getFilePath(file, null),
"preview4",
"progress1",
1
"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;
// }
......@@ -540,23 +648,31 @@ export default {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 100 个文件，您已经共选择了 ${files.length + fileList.length} 个文件！`);
this.$message.warning(
`当前限制选择 100 个文件，您已经共选择了 ${files.length +
fileList.length} 个文件！`
);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
return this.$confirm(`确定移除 ${file.name}？`);
},
//表单校验
submitForm(formName) {
console.log('this.formData', this.formData);
console.log("this.formData", this.formData);
this.needShowAuditMsg = false;
let flag = null;
this.$refs[formName].validate(valid => {
console.log("valid", valid);
if (valid) {
this.insertOrUpdate();
//console.log("success");
flag = true;
} else {
......@@ -566,162 +682,171 @@ export default {
});
return flag;
},
handleChange(value) {
console.log(value);
},
// 获取学科列表
insertOrUpdate() {
console.log('in insertOrUpdate', this.formData);
this.POST("contents/course/custom/info/insertOrUpdate", this.formData).then(res => {
console.log(res);
if (res.code == "000000") {
}
});
},
}
};
</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;
.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-message {
position: absolute;
left: 160px;
top: 105px;
font-size: 12px;
color: #f56c6c;
}
}
.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;
}
.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;
}
.bg-img-doctor {
display: block;
width: 88px;
height: 88px;
}
}
.word-num {
font-size: 12px;
color: #999;
padding-top: 5px;
.bg-video {
float: left;
width: 84px;
height: 100px;
}
.bg-uploader {
}
.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 {
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;
width: 12px;
}
}
.limit-text {
.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;
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%;
top: 29px;
font-size: 13px;
color: #ed3131;
.text {
flex: 1;
border-bottom: 1px dashed #E4E7ED;
}
.cancle {
cursor: pointer;
width: 20px;
}
}
.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;
}
.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-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;
}
&.doctor-selected {
background: #f4f7fd;
}
}
}
}
}
}
</style>
src/utils/fetch.js
浏览文件 @ c99903c8
......@@ -54,7 +54,7 @@ service.interceptors.request.use(config => {
}
if( process.env.BUILD_ENV == "development" ){ // 本地开发环境
// console.log('环境变量>>>> ', process.env.BUILD_ENV);
config.headers['token'] = '0BC342A9462E400FBEBBDAE1DB82C7DA';
config.headers['token'] = '17042AF4193B4398B3351AD1C92AC4DD';
// config.headers['token'] = localStorage.getItem('storageToken')
}else{
config.headers['token'] = localStorage.getItem('storageToken')
......
src/utils/qiniu-util copy.js 0 → 100644
浏览文件 @ c99903c8
import {isEmptyUtils, isNotEmptyUtils, subString} from "./utils";
import fetchQiniu from './fetch-qiniu.js';
import { getQiniuToken1, uploadVideo, uploadImg } from './index'
let fileApiUrl = getQiniuToken1()
//该对象有一个 unsubscribe 方法取消订阅，同时终止上传行为。
let subscription = null;
//上传返回结果
let result = {
key: null,//文件保存在空间中的资源名
path: null,//保存到db的路径(不带域名)
fullPath: null,//文件网络路径(文件url)
size: null,//资源尺寸，单位为字节
name: null,//原始文件名
ext: null//上传资源的后缀名，通过自动检测的mimeType 或者原文件的后缀来获取
};
//上传状态
// var status = false;
//FIXME 请注意vue里面不要使用全局变量
let domain = uploadVideo() // 视频
let domain1 = uploadImg() // 图片
let errorCode = new Map([
[298,'部分操作执行成功'],
[400,'请求报文格式错误'],
[401,'认证授权失败'],
[403,'权限不足，拒绝访问。'],
[404,'资源不存在'],
[405,'请求方式错误'],
[406,'上传的数据 CRC32 校验错误'],
[413,'请求资源大小大于指定的最大值'],
[419,'用户账号被冻结'],
[478,'镜像回源失败'],
[502,'错误网关'],
[503,'服务端不可用'],
[504,'服务端操作超时'],
[573,'单个资源访问频率过高'],
[579,'上传成功但是回调失败'],
[599,'服务端操作失败'],
[608,'资源内容被修改'],
[612,'指定资源不存在或已被删除'],
[614,'目标资源已存在'],
[630,'已创建的空间数量达到上限，无法创建新空间。'],
[631,'指定空间不存在'],
[640,'调用列举资源(list)接口时，指定非法的marker参数。'],
[701,'在断点续上传过程中，后续上传接收地址不正确或ctx信息已过期。']
]);
let qiniuErrorCheck = function (code) {
errorCode.forEach(function (value, key, map) {
if (code === key){
console.error(key+':'+value)
}
})
}
//用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
let mimeTypeArray = null;
export const createFilePath = (file, fileName) => {
if (isEmptyUtils(file)) {
return null;
}
let arr = fileName.split('_');
if(arr.length != 4){
alert('上传视频文件名格式不正确');
return null;
}
let arr4 = arr[3].split('.');
//文件全路径(文件路径 + 文件名) 扩展名​/年/月/日/
let filePath = arr[0] + "/" + arr[1] + "/" + arr[2] + "_" + arr4[0] + '.'+arr4[1];
console.log(filePath);
return filePath;
};
/**
* 获取七牛上传凭证
*
* @return {Promise} token 七牛上传凭证
* */
const doQiniuAction1 = (fileType) => {
console.log('send---'+fileApiUrl);
return new Promise(function (resolve, reject) {
// if(isEmptyUtils(localStorage.getItem('qiniuToken'))){
fetchQiniu(fileApiUrl, {"fileType": fileType}, 'GET').then(function (result) {
let token = null;
if (isNotEmptyUtils(result) && result.code == "000000") {
token = result.data.qiniuToken;
resolve(token);
console.log('七牛临时授权成功');
localStorage.setItem('qiniuToken',token);
} else {
reject(result);
console.error('七牛临时授权失败:', result);
}
}).catch(function (error) {
reject();
console.error('七牛临时授权失败:', error);
});
// }else{
// console.log('从localStorage获取token:'+localStorage.getItem('qiniuToken'))
// resolve(localStorage.getItem('qiniuToken'));
// }
});
};
/**
*
* @param self
* @param file
* @param filePath
* @param previewId
* @param progressId
* @returns {Promise}
*/
export const qiniuUpload = (self, file, filePath, previewId, progressId) => {
// var deferred = $q.defer();
return new Promise(function (resolve, reject) {
if (isEmptyUtils(file) || isEmptyUtils(filePath)) {
console.error('七牛上传失败:非法参数');
reject();
}
let key = filePath ? filePath : getFilePath(file);
//修改状态为上传
self.qiniuUploadStatus = true;
// let token = "BRVB4TpxVFA5Wo6lIpfltmWKOltzGar46tvC3BlR:UHn0LDElwjP4jEZTXdq_1qV6_hw=:eyJzY29wZSI6InBpY2EtdGVzdCIsInJldHVybkJvZHkiOiJ7XCJrZXlcIjpcIiQoa2V5KVwiLFwiaGFzaFwiOlwiJChldGFnKVwiLFwiYnVja2V0XCI6XCIkKGJ1Y2tldClcIixcImZzaXplXCI6JChmc2l6ZSksXCJmbmFtZVwiOiQoZm5hbWUpLFwiZXh0XCI6JChleHQpfSIsImRlYWRsaW5lIjoxNTI5NDk0MTc1fQ==";
doQiniuAction().then(function (token) {
let putExtra = {
fname: file.name, //原文件名
params: {}, //用来放置自定义变量
mimeType: mimeTypeArray || null //null || array，用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
};
let config = {
useCdnDomain: true, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
region: null //选择上传域名区域；当为 null 或 undefined 时，自动分析上传域名区域
};
/*
* qiniu.upload 返回一个 observable 对象用来控制上传行为，observable 对像通过 subscribe 方法可以被 observer 所订阅，
* 订阅同时会开始触发上传，同时返回一个 subscription 对象，该对象有一个 unsubscribe 方法取消订阅，同时终止上传行为。
* */
let observable = qiniu.upload(file, key, token, putExtra, config);
/**
* 接收上传进度信息，res 参数是一个带有 total 字段的 object，包含loaded、total、percent三个属性，提供上传进
* total.loaded: number，已上传大小，单位为字节。
* total.total: number，本次上传的总量控制信息，单位为字节，注意这里的 total 跟文件大小并不一致。
* total.percent: number，当前上传进度，范围：0～100
* */
let next = function (res) {
//res值{"total":{"loaded":18184,"size":18185,"percent":99.99450096233159}}
//获取百分比进度
let progress = res.total.percent.toFixed(2);
self.uploadProgress = Number(progress);
console.log('Progress: ' + progress);
//如果有进度条
/*if (isNotEmptyUtils(progressId)) {
let obj = $("#" + progressId);
//开始上传时,显示进度条
if (isNotEmptyUtils(obj.parent())) {
//修改状态为上传
// status = true;
self.qiniuUploadStatus = true;
obj.parent().removeClass("hidden");
obj.fadeIn("fast");
}
obj.css("width", progress + '%');
obj.text(progress + '%');
//上传完成,2秒后淡出进度条
if (progress === "100.00") {
//修改状态为非上传
// status = false;
self.qiniuUploadStatus = true;
obj.fadeOut(2000);
}
}*/
};
/**
* 接收上传完成后的后端返回信息，res 参数为一个 object， 为上传成功后后端返回的信息
* ，具体返回结构取决于后端sdk的配置，可参考上传策略(https://developer.qiniu.com/kodo/manual/1206/put-policy)
* */
let complete = function (res) {
console.log("七牛上传完成");
setTimeout(function(){
result.key = res.key;
result.path = '/' + res.key;
result.fullPath = domain + '/' + res.key + '?v=' + new Date().getTime();
result.size = res.fsize;
result.name = res.fname ;
result.ext = res.ext;
// deferred.resolve(result);
resolve(result);
// self.model.qCloudUrl = result.fullPath;
// $("#introVideoLecture").attr("src", self.model.qCloudUrl);
//修改状态为非上传
// status = false;
self.qiniuUploadStatus = false;
if (isNotEmptyUtils(previewId)) {
let address = domain + result.path;
console.log('文件路径: ' + address);
//显示图片
let $img = $('<img>').attr("src", address);
let obj = $("#" + previewId);
obj.empty().append($img);
obj.css('max-width', '100%');
}
},2000);
};
/**
* 上传错误后触发，当不是 xhr 请求错误时，会把当前错误产生原因直接抛出，诸如 JSON 解析异常等；当产生 xhr 请求错误时，参数 err 为一个包含 code、message、isRequestError 三个属性的 object：
* err.isRequestError: 用于区分是否 xhr 请求错误；当 xhr 请求出现错误并且后端通过 HTTP 状态码返回了错误信息时，该参数为 true；否则为 undefined 。
* err.reqId: string，xhr请求错误的 X-Reqid。
* err.code: number，请求错误状态码，只有在 err.isRequestError 为 true 的时候才有效，可查阅码值对应说明。
* err.message: string，错误信息，包含错误码，当后端返回提示信息时也会有相应的错误信息。
* */
let error = function (err) {
//修改状态为非上传
// status = false;
self.qiniuUploadStatus = false
localStorage.removeItem('qiniuToken');
console.log("七牛上传失败,详细信息请参考:https://developer.qiniu.com/kodo/api/3928/error-responses");
//输出简略错误信息
if (err.isRequestError){
qiniuErrorCheck(err.code)
}else {
console.error(err);
}
/*modalClick("提示", "上传失败！", "确定", function () {
$('#model-modify').modal('hide');
}, "", null);*/
// deferred.reject(new Error('七牛上传失败'));
// return deferred.promise;
return reject(new Error('七牛上传失败'));
};
// 上传开始
subscription = observable.subscribe(next, error, complete);
});
// return deferred.promise;
});
};
/**
* 获取时间戳
* @param {Date} [date]日期对象,为空时,返回当前时间戳
* @return {String} timeStamp时间戳 格式:yyyyMMddhhmmssS
*/
const timeStamp = (date) => {
if (isEmptyUtils(date)) {
return new Date().format('yyyyMMddhhmmssS');
}
return date.format('yyyyMMddhhmmssS');
}
/**
* 获取全局唯一标识符（GUID，Globally Unique Identifier）
* @return {String} guid
*/
const guid = () => {
/**
* @return {String}
*/
function S4() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
};
/**
* 文件重命名--七牛图片 2018 11
* @param {File} [file] 上传文件对象
* @param {String} [fileName] 指定文件名
* @param {String} [folder] 指定文件夹
* @return {String} fileName
*/
export const getFilePath = (file,fileName,folder) => {
if (isEmptyUtils(file)) {
return null;
}
//文件类型
var ext = file.type;
//后缀名
var suffix = file.name.substring(file.name.lastIndexOf(".") + 1);
//若为空则从name中获取---对wps格式的文件获取不到file.type
if (isEmptyUtils(ext)) {
ext = suffix;
}
//获取当前日期对象
var date = new Date();
if (isEmptyUtils(fileName)) {
//重命名后的文件名
fileName = timeStamp(date) + "-" + subString(guid(), 8) + "." + suffix;
}
//文件全路径(文件路径 + 文件名) 扩展名​/年/月/日/
// var filePath = ext + "/" + date.format('yyyy/MM/dd') + "/" + (isEmptyUtils(folder) ? "" : (folder + "/")) + fileName;
//var filePath = ext + "/" + "common/" + file.name.split('.')[0] + '-' + timeStamp(date) + "." + suffix;
var filePath = ext + "/" + "protal/project/" + timeStamp(date) + "." + suffix;
console.log('filePath==============',filePath);
return filePath;
}
/**
*七牛上传图片、视频、文件 2018 11 hws
* @param self
* @param file
* @param filePath
* @param previewId
* @param progressId
* @param fileType 1--图片和文件 空为视频
* @returns {Promise}
*/
export const doUpload = (self,file, filePath, previewId,progressId, fileType) => {
// var deferred = $q.defer();
return new Promise(function (resolve, reject) {
if (isEmptyUtils(file) || isEmptyUtils(filePath)) {
console.error('七牛上传失败:非法参数');
reject();
}
let key = filePath ? filePath : getFilePath(file);
//修改状态为上传
self.qiniuUploadStatus = true;
// let token = "BRVB4TpxVFA5Wo6lIpfltmWKOltzGar46tvC3BlR:UHn0LDElwjP4jEZTXdq_1qV6_hw=:eyJzY29wZSI6InBpY2EtdGVzdCIsInJldHVybkJvZHkiOiJ7XCJrZXlcIjpcIiQoa2V5KVwiLFwiaGFzaFwiOlwiJChldGFnKVwiLFwiYnVja2V0XCI6XCIkKGJ1Y2tldClcIixcImZzaXplXCI6JChmc2l6ZSksXCJmbmFtZVwiOiQoZm5hbWUpLFwiZXh0XCI6JChleHQpfSIsImRlYWRsaW5lIjoxNTI5NDk0MTc1fQ==";
doQiniuAction1(fileType).then(function (token) {
let putExtra = {
fname: file.name, //原文件名
params: {}, //用来放置自定义变量
mimeType: mimeTypeArray || null //null || array，用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
};
let config = {
useCdnDomain: true, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
region: null //选择上传域名区域；当为 null 或 undefined 时，自动分析上传域名区域
};
/*
* qiniu.upload 返回一个 observable 对象用来控制上传行为，observable 对像通过 subscribe 方法可以被 observer 所订阅，
* 订阅同时会开始触发上传，同时返回一个 subscription 对象，该对象有一个 unsubscribe 方法取消订阅，同时终止上传行为。
* */
let observable = qiniu.upload(file, key, token, putExtra, config);
/**
* 接收上传进度信息，res 参数是一个带有 total 字段的 object，包含loaded、total、percent三个属性，提供上传进
* total.loaded: number，已上传大小，单位为字节。
* total.total: number，本次上传的总量控制信息，单位为字节，注意这里的 total 跟文件大小并不一致。
* total.percent: number，当前上传进度，范围：0～100
* */
let next = function (res) {
//res值{"total":{"loaded":18184,"size":18185,"percent":99.99450096233159}}
//获取百分比进度
let progress = res.total.percent.toFixed(2);
self.uploadProgress = Number(progress);
if(progressId == 'uploadProgress1') {
self.uploadProgress1 = Number(progress);
}
if(progressId == 'uploadProgress2') {
self.uploadProgress2 = Number(progress);
}
console.log('Progress: ' + progress);
//如果有进度条
/*if (isNotEmptyUtils(progressId)) {
let obj = $("#" + progressId);
//开始上传时,显示进度条
if (isNotEmptyUtils(obj.parent())) {
//修改状态为上传
// status = true;
self.qiniuUploadStatus = true;
obj.parent().removeClass("hidden");
obj.fadeIn("fast");
}
obj.css("width", progress + '%');
obj.text(progress + '%');
//上传完成,2秒后淡出进度条
if (progress === "100.00") {
//修改状态为非上传
// status = false;
self.qiniuUploadStatus = true;
obj.fadeOut(2000);
}
}*/
};
/**
* 接收上传完成后的后端返回信息，res 参数为一个 object， 为上传成功后后端返回的信息
* ，具体返回结构取决于后端sdk的配置，可参考上传策略(https://developer.qiniu.com/kodo/manual/1206/put-policy)
* */
let complete = function (res) {
console.log("七牛上传完成");
setTimeout(function(){
result.key = res.key;
result.path = '/' + res.key;
// result.fullPath = domain + '/' + res.key + '_' + new Date().getTime();
if(!fileType) { // 图片 文件
console.log('---domain-------',domain)
result.fullPath = domain + '/' + res.key;
}else{ // 视频
console.log('----domain1------',domain1)
result.fullPath = domain1 + '/' + res.key;
}
result.size = res.fsize;
result.name = res.fname ;
result.ext = res.ext;
// deferred.resolve(result);
resolve(result);
// self.model.qCloudUrl = result.fullPath;
// $("#introVideoLecture").attr("src", self.model.qCloudUrl);
//修改状态为非上传
// status = false;
self.qiniuUploadStatus = false;
// if (isNotEmptyUtils(previewId)) {
// let address = domain + result.path;
// console.log('文件路径: ' + address);
// //显示图片
// let uplodImg = $('<img>').attr("src", address);
// let obj = $("#" + previewId);
// obj.empty().append(uplodImg);
// obj.css('max-width', '100%');
// }
},500);
};
/**
* 上传错误后触发，当不是 xhr 请求错误时，会把当前错误产生原因直接抛出，诸如 JSON 解析异常等；当产生 xhr 请求错误时，参数 err 为一个包含 code、message、isRequestError 三个属性的 object：
* err.isRequestError: 用于区分是否 xhr 请求错误；当 xhr 请求出现错误并且后端通过 HTTP 状态码返回了错误信息时，该参数为 true；否则为 undefined 。
* err.reqId: string，xhr请求错误的 X-Reqid。
* err.code: number，请求错误状态码，只有在 err.isRequestError 为 true 的时候才有效，可查阅码值对应说明。
* err.message: string，错误信息，包含错误码，当后端返回提示信息时也会有相应的错误信息。
* */
let error = function (err) {
//修改状态为非上传
// status = false;
self.qiniuUploadStatus = false
localStorage.removeItem('qiniuToken');
console.log("七牛上传失败,详细信息请参考:https://developer.qiniu.com/kodo/api/3928/error-responses");
//输出简略错误信息
if (err.isRequestError){
qiniuErrorCheck(err.code)
}else {
console.error(err);
}
/*modalClick("提示", "上传失败！", "确定", function () {
$('#model-modify').modal('hide');
}, "", null);*/
// deferred.reject(new Error('七牛上传失败'));
// return deferred.promise;
return reject(new Error('七牛上传失败'));
};
// 上传开始
subscription = observable.subscribe(next, error, complete);
});
// return deferred.promise;
});
};
src/utils/qiniu-util.js
浏览文件 @ c99903c8
......@@ -166,7 +166,7 @@ export const qiniuUpload = (self, file, filePath, previewId, progressId) => {
//获取百分比进度
let progress = res.total.percent.toFixed(2);
self.uploadProgress = Number(progress);
console.log('Progress: ' + progress);
console.log('Progress1: ' + progress);
//如果有进度条
/*if (isNotEmptyUtils(progressId)) {
let obj = $("#" + progressId);
......@@ -338,7 +338,7 @@ export const getFilePath = (file,fileName,folder) => {
* @param fileType 1--图片和文件 空为视频
* @returns {Promise}
*/
export const doUpload = (self,file, filePath, previewId,progressId, fileType) => {
export const doUpload = (self, file, filePath, previewId, progressId, fileType) => {
// var deferred = $q.defer();
......@@ -386,13 +386,14 @@ export const doUpload = (self,file, filePath, previewId,progressId, fileType) =>
//获取百分比进度
let progress = res.total.percent.toFixed(2);
self.uploadProgress = Number(progress);
if(progressId == 'uploadProgress1') {
self.uploadProgress1 = Number(progress);
}
if(progressId == 'uploadProgress2') {
self.uploadProgress2 = Number(progress);
}
console.log('Progress: ' + progress);
console.log('Progress2: ' + progress);
//如果有进度条
/*if (isNotEmptyUtils(progressId)) {
let obj = $("#" + progressId);
......
src/views/education/edit-custom.vue
浏览文件 @ c99903c8
......@@ -177,34 +177,6 @@ export default {
isPreviewProtocol: false,
protocolId: 5,
protocolContent: '',
orgCourseInfo: {
defaultDoctor: {
courseDoctorAvatarUrl: '',
courseDoctorAvatarUrlCheck: '',
courseDoctorHospital: '',
courseDoctorHospitalCheck: '',
courseDoctorName: '',
courseDoctorNameCheck: '',
id: 0
},
doctorModelList: [
{
courseDoctorAvatarUrl: '',
courseDoctorAvatarUrlCheck: '',
courseDoctorHospital: '',
courseDoctorHospitalCheck: '',
courseDoctorName: '',
courseDoctorNameCheck: '',
id: 0
}
],
limitModel: {
maxLimitOneVideoSize: 0,
maxLimitVideoCount: 0,
maxStorageSpace: 0,
usedStorageSpace: 0
}
},
};
},
computed: {
......@@ -275,16 +247,6 @@ export default {
this.setAllLabelListOrg([]);
this.setSubLabelListOrg([]);
this.courseLimitCount();
this.initOrgCourseInfo();
},
// 创建课程页面的初始信息
initOrgCourseInfo() {
vm.GET("contents/course/custom/info/init", {setEntry: true}).then(res => {
if (res.code == "000000") {
this.orgCourseInfo = res.data;
}
});
},
// 自定义项目--选择课程个数限制(-1表示不限制)
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或