Skip to content

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

新建按钮相关

上级 7a1f8841
隐藏空白字符变更
内嵌 并排
正在显示 包含 2044 行增加 和 85 行删除
src/components/education/custom-resource/edit-course-dialog copy 2.vue 0 → 100644
浏览文件 @ 30ce6581
<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">
<el-col :span="18">
<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>
</el-col>
</el-form-item>
<el-form-item label="学科分类：" prop="subjectId">
<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">
<el-radio-group v-model="formData.shareType">
<el-radio :label="1">机构共享</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="课程视频：" prop="range">
<!-- action="https://jsonplaceholder.typicode.com/posts/" -->
<el-upload
class="upload-demo"
action="https://sc.yunqueyi.com/contents/admin/qiniu/token1"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="100"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</el-form-item>
<div class="other-content" 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>
<!-- <div class="img-delete" v-show="imgMouseOver && !disabled" @click.stop="deleteImg(1)" @mouseout.stop="imgMouseOver=false"><i class="el-icon-delete"></i></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="讲师名称：">
<el-col :span="18">
<el-input
size="small"
v-model="formData.courseCustomDocterModel[0].courseDoctorName"
placeholder="请输入讲师名称"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<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>
<!-- <div class="img-delete" v-show="imgMouseOver && !disabled" @click.stop="deleteImg(1)" @mouseout.stop="imgMouseOver=false"><i class="el-icon-delete"></i></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>
</el-dialog>
</div>
</template>
<script>
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"},
],
range: [
{ 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',
};
},
props: {
dialogVisible: {
type: Boolean,
default: false
}
},
computed: {
},
created() {
vm = this;
},
mounted() {
this.getLabelList();
// setTimeout(() => {
// console.log(this.$refs.formDataRef);
// this.$refs['formDataRef'].validateField("name");
// }, 2000);
},
methods: {
close() {
this.$emit('close');
},
// 获取学科列表
getLabelList() {
let req = {};
this.GET("aggregate/content/labelList", req).then(res => {
if (res.code == '000000') {
// TODO
this.convertLabelList(res.data);
// this.labelOptions = 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) {
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;
},
// 删除图片
deleteImg(type) {
if (type == 1) {
vm.formData.attachmentUrl = "";
vm.imgMouseOver = false;
} else {
// vm.formData.attachmentUrl2 = "";
// vm.imgMouseOver2 = false;
}
},
toggleOtherContent() {
this.isShowOtherContent = !this.isShowOtherContent;
},
// 上传文件相关
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${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;
}
}
}
</style>
src/components/education/custom-resource/edit-course-dialog copy 3.vue 0 → 100644
浏览文件 @ 30ce6581
<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">
<!-- <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/" -->
<el-upload
class="upload-demo"
action="https://sc.yunqueyi.com/contents/admin/qiniu/token1"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="100"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</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>
<!-- <div class="img-delete" v-show="imgMouseOver && !disabled" @click.stop="deleteImg(1)" @mouseout.stop="imgMouseOver=false"><i class="el-icon-delete"></i></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>
<!-- <div class="img-delete" v-show="imgMouseOver && !disabled" @click.stop="deleteImg(1)" @mouseout.stop="imgMouseOver=false"><i class="el-icon-delete"></i></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>
</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(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: {
},
components: {
PreviewVideo,
PreviewEditCourse
},
created() {
vm = this;
this.addInit();
},
mounted() {
this.getLabelList();
// setTimeout(() => {
// console.log(this.$refs.formDataRef);
// this.$refs['formDataRef'].validateField("name");
// }, 2000);
},
methods: {
// 添加时初始化
addInit() {
console.log('in addInit');
},
// 过滤医生信息
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;
}
})
console.log(value);
},
// 当选择医生的焦点失去时，要反选医生信息
doctorNameInputBlur() {
setTimeout(() => {
this.isShowDoctorList = false;
this.selectDoctorByName(this.formData.courseCustomDocterModel[0].courseDoctorName);
}, 100);
},
// 根据姓名反选医生信息
// TODO
selectDoctorByName() {
},
// 选择其中一个
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') {
// TODO
this.convertLabelList(res.data);
// this.labelOptions = 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) {
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;
},
// 删除图片
deleteImg(type) {
if (type == 1) {
vm.formData.attachmentUrl = "";
vm.imgMouseOver = false;
} else {
// vm.formData.attachmentUrl2 = "";
// vm.imgMouseOver2 = false;
}
},
toggleOtherContent() {
this.isShowOtherContent = !this.isShowOtherContent;
},
// 上传文件相关
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${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/components/education/custom-resource/edit-course-dialog.vue
浏览文件 @ 30ce6581
...@@ -21,8 +21,8 @@ ...@@ -21,8 +21,8 @@
label-width="120px" label-width="120px"
class="basic-form" class="basic-form"
> >
<el-form-item label="课程名称：" prop="courseName"> <el-form-item label="课程名称：" prop="courseName" class="valid-msg">
<el-col :span="18"> <el-col :span="20">
<el-input <el-input
size="small" size="small"
v-model="formData.courseName" v-model="formData.courseName"
...@@ -31,11 +31,15 @@ ...@@ -31,11 +31,15 @@
maxlength="25" maxlength="25"
:disabled="disabled" :disabled="disabled"
></el-input> ></el-input>
<span class="word-num">{{(formData.courseName).replace(/\s+/g,"").length}}/25</span> <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-col>
</el-form-item> </el-form-item>
<el-form-item label="学科分类：" prop="subjectId"> <el-form-item label="学科分类：" prop="subjectIdList" class="valid-msg">
<el-col :span="18"> <el-col :span="18">
<!-- :props="{ expandTrigger: 'hover' }" --> <!-- :props="{ expandTrigger: 'hover' }" -->
<el-cascader <el-cascader
...@@ -52,31 +56,33 @@ ...@@ -52,31 +56,33 @@
</el-form-item> </el-form-item>
<el-form-item label="开放范围：" prop="shareType"> <el-form-item label="开放范围：" prop="shareType" class="valid-msg">
<el-radio-group v-model="formData.shareType"> <el-radio-group v-model="formData.shareType">
<el-radio :label="1">机构共享</el-radio> <el-radio :label="1">机构共享</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="课程视频：" prop="range"> <div class="basic-item-icon">
<!-- action="https://jsonplaceholder.typicode.com/posts/" --> <span class="require">*</span>
<el-upload <el-form-item label="课程视频：" prop="range">
class="upload-demo" <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
action="https://sc.yunqueyi.com/contents/admin/qiniu/token1" <el-upload
:on-preview="handlePreview" class="upload-demo"
:on-remove="handleRemove" action="https://sc.yunqueyi.com/contents/admin/qiniu/token1"
:before-remove="beforeRemove" :on-preview="handlePreview"
multiple :on-remove="handleRemove"
:limit="100" :before-remove="beforeRemove"
:on-exceed="handleExceed" multiple
:file-list="fileList"> :limit="100"
<el-button size="small" type="primary">点击上传</el-button> :on-exceed="handleExceed"
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> :file-list="fileList">
</el-upload> <el-button size="small" type="primary">点击上传</el-button>
</el-form-item> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</el-form-item>
</div>
<div class="other-content" v-show="isShowOtherContent" > <div class="other-content valid-msg" v-show="isShowOtherContent">
<div class="tips">注：以下信息为非必填项，您也可以根据实际情况修改</div> <div class="tips">注：以下信息为非必填项，您也可以根据实际情况修改</div>
<div class="basic-item-icon"> <div class="basic-item-icon">
<!-- <span class="require">*</span> --> <!-- <span class="require">*</span> -->
...@@ -93,7 +99,6 @@ ...@@ -93,7 +99,6 @@
<img v-if="formData.courseHeaderImage" @mouseover.stop="imgMouseOver=true" :src="formData.courseHeaderImage" class="bg-img"> <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"> <img v-if="!formData.courseHeaderImage" class="bg-img" src="../../../assets/image/small.png">
</div> </div>
<!-- <div class="img-delete" v-show="imgMouseOver && !disabled" @click.stop="deleteImg(1)" @mouseout.stop="imgMouseOver=false"><i class="el-icon-delete"></i></div> -->
</el-upload> </el-upload>
<div class="limit-text"> <div class="limit-text">
尺寸：750*420，只支持jpeg格式 尺寸：750*420，只支持jpeg格式
...@@ -109,7 +114,7 @@ ...@@ -109,7 +114,7 @@
<el-radio :label="3">高级</el-radio> <el-radio :label="3">高级</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="讲师名称："> <el-form-item label="讲师名称：" class="valid-msg">
<el-col :span="18"> <el-col :span="18">
<el-input <el-input
size="small" size="small"
...@@ -117,8 +122,21 @@ ...@@ -117,8 +122,21 @@
placeholder="请输入讲师名称" placeholder="请输入讲师名称"
style="width: 360px" style="width: 360px"
maxlength="25" maxlength="25"
@focus="isShowDoctorList=true"
@input="filterDoctorName"
@blur="doctorNameInputBlur"
:disabled="disabled" :disabled="disabled"
></el-input> ></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> <span class="word-num">{{(formData.courseCustomDocterModel[0].courseDoctorName).replace(/\s+/g,"").length}}/25</span>
</el-col> </el-col>
</el-form-item> </el-form-item>
...@@ -137,7 +155,6 @@ ...@@ -137,7 +155,6 @@
<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" @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"> <img v-if="!formData.courseCustomDocterModel[0].courseDoctorAvatarUrl" class="bg-img-doctor" src="../../../assets/image/small.png">
</div> </div>
<!-- <div class="img-delete" v-show="imgMouseOver && !disabled" @click.stop="deleteImg(1)" @mouseout.stop="imgMouseOver=false"><i class="el-icon-delete"></i></div> -->
</el-upload> </el-upload>
<div class="limit-text"> <div class="limit-text">
尺寸：88*88，只支持jpeg格式 尺寸：88*88，只支持jpeg格式
...@@ -192,9 +209,14 @@ ...@@ -192,9 +209,14 @@
<el-button type="primary" @click="submitForm('formDataRef')">确 定</el-button> <el-button type="primary" @click="submitForm('formDataRef')">确 定</el-button>
</div> </div>
</el-dialog> </el-dialog>
<!-- <PreviewVideo :dialogVisible="isPreviewVideo" :videoUrl="videoUrl" @close="closeVideo"></PreviewVideo> -->
<!-- <button @click="previewVideoAction">test video</button> -->
</div> </div>
</template> </template>
<script> <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 { doUpload, getFilePath } from "@/utils/qiniu-util";
import { openLoading, closeLoading, getQiniuToken1 } from "@/utils/utils"; import { openLoading, closeLoading, getQiniuToken1 } from "@/utils/utils";
let vm = null; let vm = null;
...@@ -202,15 +224,15 @@ export default { ...@@ -202,15 +224,15 @@ export default {
data() { data() {
let checkCourseName = (rule, value, callback) => { let checkCourseName = (rule, value, callback) => {
// 如果有审核的信息，则直接报错 // 如果有审核的信息，则直接报错
if(this.needShowAuditMsg && this.auditMsgMap.name.desc) { // if(this.needShowAuditMsg && this.auditMsgMap.name.desc) {
callback(new Error(this.auditMsgMap.name.desc)); // callback(new Error(this.auditMsgMap.name.desc));
return; // return;
} // }
if(!this.needShowAuditMsg && !value) { // if(!this.needShowAuditMsg && !value) {
callback(new Error('请输入课程名称')); // callback(new Error('请输入课程名称'));
} else { // } else {
callback(); // callback();
} // }
}; };
return { return {
needShowAuditMsg: true, needShowAuditMsg: true,
...@@ -287,7 +309,7 @@ export default { ...@@ -287,7 +309,7 @@ export default {
subjectIdList: [ subjectIdList: [
{ required: true, message: "请输入课程名称", trigger: "blur"}, { required: true, message: "请输入课程名称", trigger: "blur"},
], ],
range: [ shareType: [
{ required: true, message: "请选择开放范围", trigger: "blur"}, { required: true, message: "请选择开放范围", trigger: "blur"},
], ],
}, },
...@@ -299,19 +321,50 @@ export default { ...@@ -299,19 +321,50 @@ export default {
], ],
projectBanner: 'https://file.yunqueyi.com/h5/images/cme/project-banner.png', projectBanner: 'https://file.yunqueyi.com/h5/images/cme/project-banner.png',
doctorHeader: 'https://file.yunqueyi.com/h5/images/cme/doctor-header.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: { props: {
dialogVisible: { dialogVisible: {
type: Boolean, type: Boolean,
default: false default: false
},
addOrUpdate: {
type: String,
default: 'add'
} }
}, },
computed: { computed: {
},
watch: {
dialogVisible(isVisible) {
if(isVisible) {
if(this.addOrUpdate == 'add') {
this.initAdd();
} else {
this.initModify();
}
}
}
},
components: {
PreviewVideo,
PreviewEditCourse
}, },
created() { created() {
vm = this; vm = this;
this.initAdd();
}, },
mounted() { mounted() {
this.getLabelList(); this.getLabelList();
...@@ -322,7 +375,56 @@ export default { ...@@ -322,7 +375,56 @@ export default {
}, },
methods: { 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() { close() {
this.$emit('close'); this.$emit('close');
}, },
...@@ -332,9 +434,7 @@ export default { ...@@ -332,9 +434,7 @@ export default {
let req = {}; let req = {};
this.GET("aggregate/content/labelList", req).then(res => { this.GET("aggregate/content/labelList", req).then(res => {
if (res.code == '000000') { if (res.code == '000000') {
// TODO
this.convertLabelList(res.data); this.convertLabelList(res.data);
// this.labelOptions = res.data;
} }
}); });
}, },
...@@ -422,16 +522,6 @@ export default { ...@@ -422,16 +522,6 @@ export default {
return isJPG && isLt2M; return isJPG && isLt2M;
}, },
// 删除图片
deleteImg(type) {
if (type == 1) {
vm.formData.attachmentUrl = "";
vm.imgMouseOver = false;
} else {
// vm.formData.attachmentUrl2 = "";
// vm.imgMouseOver2 = false;
}
},
toggleOtherContent() { toggleOtherContent() {
this.isShowOtherContent = !this.isShowOtherContent; this.isShowOtherContent = !this.isShowOtherContent;
}, },
...@@ -572,7 +662,56 @@ export default { ...@@ -572,7 +662,56 @@ export default {
background:rgba(254,250,245,1); background:rgba(254,250,245,1);
border-radius:3px; border-radius:3px;
color: #E6A23C; 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> </style>
src/components/education/custom-resource/preview-protocol.vue
浏览文件 @ 30ce6581
...@@ -12,9 +12,10 @@ ...@@ -12,9 +12,10 @@
<div slot="title" style="text-align: left;"> <div slot="title" style="text-align: left;">
<span style="font-weight: 700;">用户协议</span> <span style="font-weight: 700;">用户协议</span>
</div> </div>
<div v-html="protocolInfo.contents"></div> <div v-html="protocolContent"></div>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="close">确 定</el-button> <el-button @click="close">不同意</el-button>
<el-button type="primary" @click="signProtocol">同意</el-button>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
...@@ -23,9 +24,7 @@ ...@@ -23,9 +24,7 @@
export default { export default {
data() { data() {
return { return {
protocolInfo: {
contents: ''
}
}; };
}, },
props: { props: {
...@@ -35,35 +34,41 @@ export default { ...@@ -35,35 +34,41 @@ export default {
}, },
protocolId: { protocolId: {
type: String | Number, type: String | Number,
default: 0 default: 1
} },
}, protocolContent: {
watch: { type: String,
protocolId(newVal) { default: ''
if(newVal) {
this.getProtocolInfoById(newVal);
}
} }
}, },
computed: { computed: {
}, },
mounted() { mounted() {
// this.getProtocolInfoById();
}, },
methods: { methods: {
// 查询列表
getProtocolInfoById(protocolId) { // 签署协议
signProtocol() {
let req = { let req = {
protocolId: protocolId setEntry: true,
}; };
this.GET("smartcontract/protocolManage/protocol", req).then(res => { this.POST("smartcontract/protocol/sign?type=" + this.protocolId, req).then(res => {
if (res.code == "000000") { if (res.code == "000000") {
this.protocolInfo = res.data; this.close(true);
} else {
vm.$message.info(res.message);
this.close(false);
} }
}).catch(err => {
vm.$message.warning("请稍后重试");
this.close(false);
}); });
}, },
close() {
this.$emit('close'); close(status) {
this.$emit('close', status);
}, },
} }
}; };
......
src/components/education/custom/course-list copy.vue 0 → 100644
浏览文件 @ 30ce6581
<template>
<div class="course-list-wrapper">
<ul class="course-header">
<li class="title">
<span class="main">全部课程</span>
<span v-show="courseLimitCount != -1" class="sub">单个项目最多只能选择{{courseLimitCount}}个课程</span>
</li>
<li class="order">
<div class="num" @click="toggleOrder">
<span>学习人数</span>
<img v-show="!isRise" src="../../../assets/custom/icon/icon-rise.png" alt />
<img v-show="isRise" src="../../../assets/custom/icon/icon-drop.png" alt />
</div>
<div class="cart-wrapper">
<div class="cart" @click="toggleCart">
<span>已选课程</span>
<img src="../../../assets/custom/icon/icon-cart.png" alt />
<div class="count">
<span>{{cartList.length}}</span>
</div>
</div>
<div v-show="isShowCart" class="curt-position">
<ShoppingCart @close="toggleCart"></ShoppingCart>
</div>
</div>
</li>
</ul>
<div v-if="courseList && courseList.list && courseList.list.length" class="list-wrapper">
<ul class="list">
<li
class="course"
:class="{ 'course-checked': item.checked }"
v-for="(item, index) in courseList.list"
:key="index"
@click="toggleChecked(item)"
>
<div class="img">
<img :src="item.courseImageUrl" alt />
<span class="level">{{item.typeStr}}</span>
</div>
<div class="detail">
<span class="title">{{item.courseName | shortName}}</span>
<div class="chapter">
<span>{{item.docName | shortName(5)}}</span>
<span class="section-num">{{item.chapterSum}}章{{item.lectureNum}}节 {{item.totalTime}}分</span>
<span v-if="item.testCount" class="exam-num">{{item.testCount}}场考试</span>
</div>
<div class="cost">
<span class="no">免费</span>
<span class="num">{{item.joinNum}}人已学</span>
</div>
</div>
<img
v-show="item.checked"
class="course-selected"
src="../../../assets/custom/icon/icon-selected.png"
/>
</li>
</ul>
</div>
<div v-else class="no-list">
<img src="../../../assets/custom/icon/img-no-content.png" alt />
<span class="tips">没有找到相关结果，请重新查询</span>
</div>
<div class="page-wrapper">
<div class="page">
<el-pagination
background
:current-page="searchParam.pageNo"
:page-sizes="[10, 30, 50, 100]"
:page-size="searchParam.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="courseList.totalRows"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</div>
<!-- 弹框提示 -->
<dialog-componet :dialogObj="dialogObj"></dialog-componet>
</div>
</template>
<script>
import ShoppingCart from "@/components/education/custom/shopping-cart";
import dialog from "@/components/education/custom/dialog";
import { mapGetters, mapActions } from "vuex";
export default {
data() {
return {
isRise: true,
isRiseOrg: true,
isShowCart: false,
dialogObj: {
title: "课程数量已达上限",
visible: false,
message: '单个项目最多只能选择3个课程',
tip: "",
hideMsg: "我知道了"
}
};
},
computed: {
...mapGetters(["cartList", "courseList", "searchParam", "searchParamOrg", "courseLimitCount", "kind"])
},
components: {
ShoppingCart,
dialogComponet: dialog
},
methods: {
...mapActions(["setCartList", "setSearchParam", "setSearchParamOrg"]),
toggleOrder() {
this.isRise = !this.isRise;
let dir = this.isRise ? 1 : 2;
this.searchParam.dir = dir;
this.setSearchParam(this.searchParam);
},
toggleCart() {
this.isShowCart = !this.isShowCart;
},
// 选择当前分页个数
handleSizeChange(val) {
this.searchParam.pageSize = val;
this.setSearchParam(this.searchParam);
},
// 选择当前分页
handleCurrentChange(val) {
this.searchParam.pageNo = val;
this.setSearchParam(this.searchParam);
},
// 选择课程（并要处理过滤，删除等）
toggleChecked(item) {
item.checked = !item.checked;
if (item.checked) {
if (this.courseLimitCount != -1 && this.cartList.length >= this.courseLimitCount) {
item.checked = !item.checked;
this.dialogObj.message = '单个项目最多只能选择' + this.courseLimitCount + '个课程';
this.dialogObj.visible = true;
return;
}
this.cartList.unshift(item); // 倒序
} else {
let delItemIndex = this.cartList.findIndex(course => {
return course.courseId == item.courseId;
});
this.cartList.splice(delItemIndex, 1);
}
this.setCartList(this.cartList);
this.$forceUpdate();
}
}
};
</script>
<style lang="less" scoped>
.course-list-wrapper {
padding: 0 30px;
// min-width: 1180px;
min-width: 1136px;
// max-width: 1600px;
.course-header {
// position: relative;
// top: 0;
// left: 0;
display: flex;
flex-direction: row;
height: 78px;
// line-height: 78px;
align-items: center;
// margin-right: 100px;
justify-content: space-between;
.title {
.main {
margin-right: 6px;
font-size: 18px;
font-weight: 600;
color: #000;
}
.sub {
font-size: 14px;
font-weight: 400;
color: #676869;
}
}
.order {
// margin-right: 40px;
padding-right: 12px;
display: flex;
flex-direction: row;
align-items: center;
font-size: 14px;
color: #333333;
img {
position: relative;
top: 2px;
width: 14px;
height: 14px;
}
.num {
cursor: pointer;
margin-right: 30px;
}
.cart-wrapper {
position: relative;
.cart {
cursor: pointer;
position: relative;
.count {
position: absolute;
height: 20px;
top: -8px;
right: -12px;
display: inline-block;
span {
display: inline-block;
min-width: 18px;
text-align: center;
font-size: 12px;
padding: 2px;
background: red;
border-radius: 10px;
color: #fff;
}
}
}
.curt-position {
background: #fff;
position: absolute;
top: 30px;
right: 0px;
z-index: 100;
}
}
}
}
.list-wrapper {
// height: 500px;
overflow: auto;
.list {
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
overflow-y: auto;
.course {
user-select: none;
cursor: pointer;
position: relative;
top: 0;
left: 0;
z-index: 1;
display: flex;
flex-direction: row;
height: 120px;
width: 527px;
padding: 15px;
margin-bottom: 10px;
margin-right: 10px;
border-radius: 4px;
border: 1px solid rgba(228, 231, 237, 1);
&.course-checked {
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid #449284;
border-radius: 4px;
}
}
.img {
position: relative;
top: 0;
left: 0;
width: 160px;
height: 90px;
margin-right: 15px;
img {
width: 160px;
height: 90px;
border-radius: 4px;
}
.level {
position: absolute;
top: 0;
left: 0;
width: 44px;
height: 22px;
line-height: 22px;
text-align: center;
font-size: 14px;
font-weight: 500;
color: #fff;
background: rgba(0, 0, 0, 0.5);
border-radius: 4px 0px 4px 0px;
}
}
.detail {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
.title {
position: relative;
top: -3px;
left: 0;
font-size: 16px;
font-weight: 600;
color: #373839;
}
.chapter {
font-size: 14px;
font-weight: 400;
color: #999999;
.section-num::before,
.exam-num::before {
content: "";
position: relative;
top: 2.5px;
left: 0;
display: inline-block;
height: 14px;
line-height: 14px;
margin: 0 10px;
width: 1px;
background: #999999;
}
}
.cost {
position: absolute;
left: 0;
bottom: -5px;
.no {
font-size: 18px;
font-weight: 600;
margin-right: 4px;
color: #d82b2b;
}
.num {
font-size: 14px;
font-weight: 400;
color: #999999;
}
}
}
.course-selected {
position: absolute;
right: 0;
bottom: 0;
width: 44px;
height: 44px;
}
}
}
}
.page-wrapper {
// width: 1074px;
text-align: right;
.page {
// float: right;
margin: 20px 0;
}
}
.no-list {
position: relative;
top: 0;
left: 0;
z-index: 1;
display: flex;
flex-direction: column;
// padding: 30px 200px;
width: 1000px;
text-align: center;
margin-bottom: 100px;
align-items: center;
img {
width: 300px;
height: 300px;
}
.tips {
position: relative;
top: -30px;
left: 10px;
z-index: 2;
color: #999999;
}
}
}
</style>
src/components/education/custom/course-list.vue
浏览文件 @ 30ce6581
...@@ -61,7 +61,10 @@ ...@@ -61,7 +61,10 @@
<div v-else class="no-list"> <div v-else class="no-list">
<img src="../../../assets/custom/icon/img-no-content.png" alt /> <img src="../../../assets/custom/icon/img-no-content.png" alt />
<span class="tips">没有找到相关结果，请重新查询</span> <span class="tips">没有找到相关结果，请重新查询</span>
<el-button v-show="kind == 1" type="primary" icon="el-icon-plus" @click="showOrgCourse">创建机构课程</el-button>
</div> </div>
<el-button type="primary" icon="el-icon-plus" @click="showOrgCourse">创建机构课程</el-button>
<div class="page-wrapper"> <div class="page-wrapper">
<div class="page"> <div class="page">
...@@ -109,6 +112,7 @@ export default { ...@@ -109,6 +112,7 @@ export default {
}, },
methods: { methods: {
...mapActions(["setCartList", "setSearchParam", "setSearchParamOrg"]), ...mapActions(["setCartList", "setSearchParam", "setSearchParamOrg"]),
toggleOrder() { toggleOrder() {
this.isRise = !this.isRise; this.isRise = !this.isRise;
let dir = this.isRise ? 1 : 2; let dir = this.isRise ? 1 : 2;
...@@ -150,7 +154,10 @@ export default { ...@@ -150,7 +154,10 @@ export default {
} }
this.setCartList(this.cartList); this.setCartList(this.cartList);
this.$forceUpdate(); this.$forceUpdate();
} },
showOrgCourse() {
this.$emit('showOrgCourse', 'add');
},
} }
}; };
</script> </script>
......
src/components/education/custom/select-course-comp.vue
浏览文件 @ 30ce6581
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<div class="top-line" style="margin-top: 20px;"></div> <div class="top-line" style="margin-top: 20px;"></div>
<CourseList></CourseList> <CourseList @showOrgCourse="showOrgCourse"></CourseList>
</div> </div>
</template> </template>
<script> <script>
...@@ -36,7 +36,10 @@ export default { ...@@ -36,7 +36,10 @@ export default {
...mapActions(['setKind']), ...mapActions(['setKind']),
handleClick() { handleClick() {
this.setKind(this.activeName); this.setKind(this.activeName);
} },
showOrgCourse(type) {
this.$emit('showOrgCourse', type);
},
}, },
} }
</script> </script>
......
src/utils/fetch.js
浏览文件 @ 30ce6581
...@@ -54,21 +54,14 @@ service.interceptors.request.use(config => { ...@@ -54,21 +54,14 @@ service.interceptors.request.use(config => {
} }
if( process.env.BUILD_ENV == "development" ){ // 本地开发环境 if( process.env.BUILD_ENV == "development" ){ // 本地开发环境
// console.log('环境变量>>>> ', process.env.BUILD_ENV); // console.log('环境变量>>>> ', process.env.BUILD_ENV);
config.headers['token'] = 'F37DD4A8C9094A89A0C7EF84E4303CC9'; config.headers['token'] = 'BCBEB604699441FE86DDB0C5C19A852B';
// config.headers['token'] = localStorage.getItem('storageToken') // config.headers['token'] = localStorage.getItem('storageToken')
}else{ }else{
config.headers['token'] = localStorage.getItem('storageToken') config.headers['token'] = localStorage.getItem('storageToken')
} }
config.headers['deviceInfo'] = JSON.stringify({ "app_channel": "", "app_mac": "", "app_uuid": "", "app_version": "", "device_brand": "", "device_ip": "", "device_model": "", "device_net": "", "device_ops": "", "resolution_wh": "", "system_level": "", "device_type": '10' }) config.headers['deviceInfo'] = JSON.stringify({ "app_channel": "", "app_mac": "", "app_uuid": "", "app_version": "", "device_brand": "", "device_ip": "", "device_model": "", "device_net": "", "device_ops": "", "resolution_wh": "", "system_level": "", "device_type": '10' })
} }
// if (config.data && config.data.setEntry) {
// config.headers['sysCode'] = config.data.sysCode || 10
// if(config.data.token){
// config.headers['token'] = config.data.token || '63C3FA92AF8A45A48B31EB7FD97B95EB'
// }
// config.headers['deviceInfo'] = JSON.stringify({ "app_channel": "", "app_mac": "", "app_uuid": "", "app_version": "", "device_brand": "", "device_ip": "", "device_model": "", "device_net": "", "device_ops": "", "resolution_wh": "", "system_level": "", "device_type": '10' })
// }
return config return config
}, error => { }, error => {
// logger.debug('service.interceptors.request: ', error) // logger.debug('service.interceptors.request: ', error)
......
src/views/education/edit-custom.vue
浏览文件 @ 30ce6581
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
<!-- 选择课程 --> <!-- 选择课程 -->
<div v-if="active == 0" class="tpl-main"> <div v-if="active == 0" class="tpl-main">
<SelectCourseComp></SelectCourseComp> <SelectCourseComp @showOrgCourse="showOrgCourse"></SelectCourseComp>
</div> </div>
<!-- 填写项目信息--> <!-- 填写项目信息-->
...@@ -70,6 +70,17 @@ ...@@ -70,6 +70,17 @@
<dialog-componet :dialogObj="dialogObj" @hide="hide"></dialog-componet> <dialog-componet :dialogObj="dialogObj" @hide="hide"></dialog-componet>
<dialog-componet :dialogObj="sendObj" @hide="hidefn" @confirm="confirmFn"></dialog-componet> <dialog-componet :dialogObj="sendObj" @hide="hidefn" @confirm="confirmFn"></dialog-componet>
<PreviewEditCourse
:dialogVisible="isPreviewEditCourse"
:addOrUpdate="addOrUpdate"
@close="closeEditCourse"
/>
<PreviewProtocol
:dialogVisible="isPreviewProtocol"
:protocolId="protocolId"
:protocolContent="protocolContent"
@close="closeProtocol"
/>
</div> </div>
</template> </template>
...@@ -82,6 +93,8 @@ import selectRegion from "@/components/education/template/selectRegion"; ...@@ -82,6 +93,8 @@ import selectRegion from "@/components/education/template/selectRegion";
import setOrganization from "@/components/education/template/setOrganization"; import setOrganization from "@/components/education/template/setOrganization";
import SelectCourseComp from "@/components/education/custom/select-course-comp"; import SelectCourseComp from "@/components/education/custom/select-course-comp";
import dialog from "@/components/education/template/dialog"; import dialog from "@/components/education/template/dialog";
import PreviewEditCourse from "@/components/education/custom-resource/edit-course-dialog";
import PreviewProtocol from "@/components/education/custom-resource/preview-protocol";
import { openLoading, closeLoading, resizeHeight } from "@/utils/utils"; import { openLoading, closeLoading, resizeHeight } from "@/utils/utils";
import { mapGetters, mapActions } from "vuex"; import { mapGetters, mapActions } from "vuex";
...@@ -157,6 +170,13 @@ export default { ...@@ -157,6 +170,13 @@ export default {
isPreview: 0, // 1表示是查看信息 isPreview: 0, // 1表示是查看信息
maxLimitCreatedCustomProjectCountInYear: 20, // 同一个用户每年能够创建的项目数 maxLimitCreatedCustomProjectCountInYear: 20, // 同一个用户每年能够创建的项目数
allSubList: [], allSubList: [],
isPreviewEditCourse: false,
addOrUpdate: 'add',
isPreviewProtocol: false,
protocolId: 5,
protocolContent: '',
}; };
}, },
computed: { computed: {
...@@ -190,7 +210,9 @@ export default { ...@@ -190,7 +210,9 @@ export default {
selectRegion, selectRegion,
setOrganization, setOrganization,
dialogComponet: dialog, dialogComponet: dialog,
SelectCourseComp SelectCourseComp,
PreviewEditCourse,
PreviewProtocol
}, },
created() { created() {
vm = this; vm = this;
...@@ -399,6 +421,7 @@ export default { ...@@ -399,6 +421,7 @@ export default {
hidefn() { hidefn() {
vm.regionComplete(vm.changeStatus); vm.regionComplete(vm.changeStatus);
}, },
// 选择学元范围暂存 // 选择学元范围暂存
regionComplete(fishFn) { regionComplete(fishFn) {
let req = { let req = {
...@@ -553,9 +576,110 @@ export default { ...@@ -553,9 +576,110 @@ export default {
// 从子组件（项目信息）获取项目状态是否为上架 // 从子组件（项目信息）获取项目状态是否为上架
setStatus4Flag(s) { setStatus4Flag(s) {
vm.status4Flag = s; vm.status4Flag = s;
} },
/*
展示添加机构课程弹框
如果已经加入机构，1：没有同意过协议，则打开协议弹框；2：已经加入，时直接打开添加弹框
如果没有加入机构，则直接弹出提示（我知道了）
*/
showOrgCourse(addOrUpdate) {
// this.checkProtocol();
this.checkHospital();
this.addOrUpdate = addOrUpdate
},
// 创建机构课程前校验机构
// TODO 各个状态与数据结构
checkHospital() {
openLoading(vm);
let req = {
setEntry: true
}
vm.GET(`portal/portalCustom/checkHospital`, req)
.then(res => {
closeLoading(vm);
if (res.code == "000000") {
console.log(res);
if (res.data == 0) {
this.checkProtocol();
} else {
vm.dialogObj = Object.assign(
vm.dialogObj,
vm.statusObj[`status_${res.data}`]
);
vm.dialogObj.visible = true;
}
} else {
vm.$message.info(res.message);
}
})
.catch(err => {
closeLoading(vm);
vm.$message.warning("请稍后重试");
});
},
// 判断用户是否签署了最新版协议
// 如果没有签署，则打开协议签署弹框
checkProtocol() {
// openLoading(vm);
let req = {
setEntry: true,
type: this.protocolId
}
vm.GET(`smartcontract/protocol/sign/check`, req)
.then(res => {
// closeLoading(vm);
if (res.code == "000000") {
if(!res.data) { // 没有签署，打开协议签署弹框
this.getProtocolInfoById();
} else {
this.isPreviewEditCourse = true;
}
} else {
vm.$message.info(res.message);
}
})
.catch(err => {
closeLoading(vm);
vm.$message.warning("请稍后重试");
});
},
// 根据协议获取内容
getProtocolInfoById() {
let req = {
type: this.protocolId
};
// this.GET("smartcontract/protocolManage/protocol", req).then(res => {
this.GET("smartcontract/protocol/content", req).then(res => {
if (res.code == "000000") {
// this.protocolContent = res.data.contents;
this.protocolContent = res.data;
this.isPreviewProtocol = true;
} else {
vm.$message.info(res.message);
}
}).catch(err => {
vm.$message.warning("请稍后重试");
});
},
// 关闭编辑课程弹框
closeEditCourse() {
this.isPreviewEditCourse = false;
},
// 关闭预览协议弹框
closeProtocol(needShowAdd) {
if( needShowAdd ) {
this.isPreviewEditCourse = true;
}
this.isPreviewProtocol = false;
},
} }
}; }
</script> </script>
<style lang="scss"> <style lang="scss">
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或