Skip to content

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

oss上传文件等

上级 c99903c8
隐藏空白字符变更
内嵌 并排
正在显示 包含 7564 行增加 和 587 行删除
src/components/common/cropper.two.vue 0 → 100755
浏览文件 @ 98299d6d
<template>
<div class="rc-cropper" v-if="originImg">
<el-row>
<el-col :span="12">
<div class="rc-cropper__canvasCrop2">
<img :src="originImg" v-if="!cropper">
<canvas :id="originImg" ref="canvas"/>
<div class="rc-cropper__iconCrop">
<el-tooltip content="确认裁剪" placement="right" v-if="cropper">
<el-button type="success" size="mini" @click="sureCropper()"><i class="el-icon-check"></i></el-button>
</el-tooltip>
</div>
</div>
</el-col>
<el-col :span="10">
<div class="rc-cropper__previewImg">
<img :src="previewImg" id="previewImg"/>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.min.css'
export default {
name: 'rc-cropper2',
props: {
cropOption: {
type: Object,
required: true,
default: () => {}
},
originImg: {
required: true
},
previewImg: {
type: String
}
},
data () {
return {
cropper: null,
croppShow: false
}
},
mounted () {
this.drawImg()
},
methods: {
// 在canvas上绘制图片
drawImg () {
const _this = this
this.$nextTick(() => {
let canvas = document.getElementById(this.originImg)
if (canvas) {
canvas.width = 720
canvas.height = 480
let ctx = canvas.getContext('2d')
ctx.clearRect(0, 0, canvas.width, canvas.height)
let img = new Image()
img.crossOrigin = 'Anonymous'
img.src = this.originImg
img.onload = function () {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
_this.initCropper()
}
}
})
},
// 显示裁剪框
initCropper () {
this.croppShow = true
this.cropper = new Cropper(this.$refs.canvas, {
checkCrossOrigin: true,
viewMode: 3,
zoomOnWheel: false, // 是否可以通过移动鼠标来放大图像
aspectRatio: 3 / 2,
ready: () => {
this.cropper.setData({
x: this.cropOption.offset_x,
y: this.cropOption.offset_y,
width: this.cropOption.width,
height: this.cropOption.height
})
}
})
// this.cropper = cropper
},
// 确认裁剪
sureCropper () {
let _this = this
const cropParam = this.cropper.getData()
this.cropper.getCroppedCanvas().toBlob(function (blob) {
let oFileReader = new FileReader()
oFileReader.onloadend = function (e) {
let base64 = e.target.result
_this.$emit('getCropImg', base64, cropParam)
}
oFileReader.readAsDataURL(blob)
}, 'image/jpeg')
}
}
}
</script>
<style >
.rc-cropper {
position: relative;
margin-top: 20px;
}
/* img {
width: 100%;
height: 100%;
} */
.rc-cropper__canvasCrop2 {
width: 720px;
height: 480px;
}
.rc-cropper__iconCrop {
position: absolute;
left: 45%;
top: 0%;
}
.el-tooltip {
margin: 20px 4px;
display: block;
z-index: 10000;
}
.rc-cropper__previewImg {
width: 600px;
height: 400px;
}
</style>
src/components/education/custom-resource/edit-course-dialog copy 5.vue 0 → 100644
浏览文件 @ 98299d6d
<template>
<div class="edit-course-wrapper dialog-title-border">
<el-dialog
ref="testDialogRef"
title="上传课程"
:visible="dialogVisible"
@close="close"
center
:close-on-click-modal="false"
:close-on-press-escape="false"
width="800px"
>
<div slot="title" style="text-align: left;">
<span style="font-weight: 700;">上传课程</span>
<span style="font-size: 12px;color: #ED3131;margin-left: 4px;"> 请认真核对上传内容，一旦提交后将不能修改</span>
</div>
<div v-show="step == 1" class="course-content">
<el-form
ref="formDataRef"
:model="formData"
:rules="rules"
label-width="120px"
class="basic-form"
>
<el-form-item label="课程名称：" prop="courseName" class="valid-msg">
<el-col :span="20">
<el-input
size="small"
v-model="formData.courseName"
placeholder="请输入课程名称"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">
{{(formData.courseName || '').replace(/\s+/g,"").length}}/25
<!-- <span class="edit-wrapper">
<img class="edit-img" src="../../../assets/image/phrase3/icon-pz.png" />修改信息
</span> -->
</span>
<div v-show="needShowAuditMsg && formData.courseNameCheck" class="error">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
<span class="cancle">X</span>
</div>
</el-col>
</el-form-item>
<el-form-item label="学科分类：" prop="subjectIdList" class="valid-msg">
<el-col :span="18">
<!-- :props="{ expandTrigger: 'hover' }" -->
<el-cascader
style="width: 360px"
v-model="formData.subjectIdList"
:options="labelOptions"
:props="{ value: 'id', label: 'name', children: 'subList'}"
>
</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">
<el-upload
class="upload-video"
action="#"
:before-upload="beforeUploadVideo"
:limit="3"
:on-exceed="handleExceed"
:show-file-list="false"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
<span class="upload-tips">只支持MP4格式，课程视频最多上传100个，单文件最大2G</span>
<ul v-show="formData.courseCustomChapterModels[0].courseCustomLectureModelList.length" class="custom-list">
<li v-for="(lecture, index) in formData.courseCustomChapterModels[0].courseCustomLectureModelList" :key="index">
<ul class="video">
<li>
<span class="title">视频{{index + 1}}</span>
<img src="../../../assets/image/phrase3/icon-pin.png" />
<span class="name" @click="previewVideoAction(lecture)">{{lecture.resourceModel.name}}</span>
</li>
<li>
<img @click="deleteLecture(index)" class="delete" src="../../../assets/image/phrase3/close.png" />
</li>
</ul>
<div class="video-name">
<span class="title">
<span >*</span>
<span class="video-title">视频名称</span>
</span>
<el-input
size="small"
v-model="lecture.name"
placeholder="请输入课程名称"
style="width: 260px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">
{{(lecture.name || '').replace(/\s+/g,"").length}}/25
</span>
</div>
</li>
<span v-show="needShowUploadProcess" class="upload-process" :style="{'width': (uploadProgress/100 * 340) + 'px'}"></span>
</ul>
<span v-if="!formData.courseCustomChapterModels[0].courseCustomLectureModelList.length" v-show="needShowUploadProcess" class="upload-process" :style="{'width': (uploadProgress/100 * 340) + 'px'}"></span>
</div>
</el-upload>
</el-form-item>
</div>
<div class="other-content valid-msg" v-show="isShowOtherContent">
<div class="tips">注：以下信息为非必填项，您也可以根据实际情况修改</div>
<div class="basic-item-icon">
<!-- <span class="require">*</span> -->
<el-form-item label="课程封面：">
<el-upload
v-model="formData.courseIntroImage"
class="bg-uploader"
action="#"
: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="index"
@click="selectDoctor(item.courseDoctorName, index)"
:class="{'doctor-selected': item.seleted}"
>
<span v-show="item.show">{{item.courseDoctorName || '测试名'}}</span>
</li>
</ul>
<span
class="word-num"
>{{(formData.courseCustomDoctorModels[0] && formData.courseCustomDoctorModels[0].courseDoctorName || '').replace(/\s+/g,"").length}}/25</span>
</el-col>
</el-form-item>
<div class="basic-item-icon">
<el-form-item label="讲师头像：">
<el-upload
v-model="formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl"
class="bg-uploader"
action="#"
: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="18">
<el-input
size="small"
type="textarea"
maxlength="200"
:autosize="{ minRows: 5}"
placeholder="请输入课程简介"
v-model="formData.courseIntro"
style="width:90%;"
></el-input>
<span
class="word-num"
>{{(formData.courseIntro || '').replace(/\s+/g,"").length}}/200</span>
</el-col>
</el-form-item>
</div>
<!-- 更多信息 -->
<div class="separator-line">
<span class="line-left"></span>
<div @click="toggleOtherContent" class="center">
<span>展开更多信息</span>
<img v-show="isShowOtherContent" src="../../../assets/image/phrase3/arrow-up.png" />
<img v-show="!isShowOtherContent" src="../../../assets/image/phrase3/arrow-down.png" />
</div>
<span class="line-right"></span>
</div>
</el-form>
</div>
<div v-show="step == 2" class="course-content-step2">
<img class="success-img" src="../../../assets/image/phrase3/icon-audit-success.png" />
<span class="tips-1">您上传的课程已成功提交，预计在3-5个工作日内完成审核</span>
<span class="tips-2">审核通过后，您才可以选择课程完成项目配置。如有任何疑问可联系云鹊医400-920-8877</span>
<el-button type="primary" size="small" icon="el-icon-back" @click="backToOrgCourse">返回机构课程</el-button>
</div>
<div v-show="step == 1" slot="footer" class="dialog-footer">
<el-button @click="dialogObj.visible=true">取 消</el-button>
<el-button type="primary" @click="submitForm('formDataRef')">确 定</el-button>
</div>
</el-dialog>
<DialogComponet :dialogObj="dialogObj" @hide="hideCancleTips" @confirm="dialogObj.visible=false"></DialogComponet>
<PreviewVideo :dialogVisible="isPreviewVideo" :videoUrl="videoUrl" @close="isPreviewVideo=false"></PreviewVideo>
<!-- <button @click="previewVideoAction">test video</button> -->
</div>
</template>
<script>
import PreviewVideo from "@/components/education/custom-resource/preview-video";
import PreviewProtocol from "@/components/education/custom-resource/preview-protocol";
import PreviewEditCourse from "@/components/education/custom-resource/edit-course-dialog";
import DialogComponet from "@/components/education/template/dialog";
import { doUpload, getFilePath } from "@/utils/qiniu-util";
import { openLoading, closeLoading, getQiniuToken1 } from "@/utils/utils";
import { mapActions } from 'vuex';
let vm = null;
export default {
data() {
let checkCourseName = (rule, value, callback) => {
// 如果有审核的信息，则直接报错
if (!value && this.needCheckField) {
callback(new Error("请输入课程名称"));
} else {
callback();
}
};
return {
step: 1,
needCheckField: false,
needShowAuditMsg: false,
needShowUploadProcess: false,
disabled: false,
formDataBase: {
checkStatus: 0,
courseCustomChapterModels: [
{
courseCustomLectureModelList: [],
id: null,
name: "视频课程"
}
],
courseCustomDoctorModels: [
{
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
}
],
courseId: null,
courseIntro: "",
courseIntroCheck: "",
courseIntroImage:
"https://test1-file.yunqueyi.com/image/png/common/202006201528136.png",
courseIntroImageCheck: "",
courseName: "",
courseNameCheck: "",
deleteCustomLectureIds: [],
difficultyLevel: 1,
shareType: 1,
subjectIdList: []
},
formData: {
checkStatus: 0,
courseCustomChapterModels: [
{
courseCustomLectureModelList: [],
id: null,
name: "视频课程"
}
],
courseCustomDoctorModels: [
{
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
}
],
courseId: null,
courseIntro: "",
courseIntroCheck: "",
courseIntroImage:
"https://test1-file.yunqueyi.com/image/png/common/202006201528136.png",
courseIntroImageCheck: "",
courseName: "",
courseNameCheck: "",
deleteCustomLectureIds: [],
difficultyLevel: 1,
shareType: 1,
subjectIdList: []
},
uploadImgMessage: false,
imgMouseOver: false,
rules: {
courseName: [
{ required: true, message: " " },
{ validator: checkCourseName }
],
subjectIdList: [
{ required: true, message: "请输入课程名称" }
],
shareType: [
{ required: true, message: "请选择开放范围" }
]
},
labelOptions: [],
isShowOtherContent: false,
fileList: [
],
projectBanner:
"https://file.yunqueyi.com/h5/images/cme/project-banner.png",
doctorHeader: "https://file.yunqueyi.com/h5/images/cme/doctor-header.png",
doctorNameList: [
{ courseDoctorName: "333", show: true, seleted: false },
{ courseDoctorName: "334", show: true, seleted: false },
{ courseDoctorName: "335", show: true, seleted: false },
{ courseDoctorName: "336", show: true, seleted: false }
],
isShowDoctorList: false,
isPreviewVideo: false,
videoUrl: "",
orgCourseInfo: {
defaultDoctor: {
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
},
doctorModelList: [
{
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
}
],
limitModel: {
maxLimitOneVideoSize: 0,
maxLimitVideoCount: 0,
maxStorageSpace: 0,
usedStorageSpace: 0
}
},
uploadProgress: 0,
dialogObj: {
// 发布
visible: false,
title: "确定取消吗?",
message: "发布后,项目将进入审核中,待审核完成后学员可在云鹊医App上参加培训学习",
tip: "",
confirmMsg: "取 消",
hideMsg: "确 定"
},
};
},
props: {
dialogVisible: {
type: Boolean,
default: false
},
courseId: {
type: String | Number,
default: 0
}
},
computed: {},
watch: {
dialogVisible(isVisible) {
this.formData = JSON.parse(JSON.stringify(this.formDataBase));
if (isVisible) {
if (this.courseId == 0) {
this.initAdd(this.courseId);
} else {
this.initModify(this.courseId);
}
}
},
},
components: {
PreviewVideo,
PreviewEditCourse,
DialogComponet,
},
created() {
vm = this;
// this.initAdd();
},
mounted() {
this.getLabelList();
},
methods: {
...mapActions(['setKind']),
// 创建课程页面的初始信息
initOrgCourseInfo() {
vm.GET("contents/course/custom/info/init", { setEntry: true }).then(
res => {
if (res.code == "000000") {
this.orgCourseInfo = res.data;
this.formData.courseCustomDoctorModels[0] = this.orgCourseInfo.defaultDoctor;
this.formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl =
this.orgCourseInfo.defaultDoctor.courseDoctorAvatarUrl ||
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png";
this.doctorNameList = this.convertDNameToSelectOpt(
this.orgCourseInfo.doctorModelList
);
+this.courseId && this.getCourseInfoById(this.courseId);
}
}
);
},
// 将医生名称进行处理
convertDNameToSelectOpt(doctorModelList) {
doctorModelList.forEach(item => {
item.show = true;
item.seleted = false;
});
return doctorModelList;
},
// 添加时初始化
initAdd() {
console.log("in initAdd");
this.step = 1;
this.needShowAuditMsg = false;
this.initOrgCourseInfo();
},
initModify() {
this.needShowAuditMsg = true;
console.log("in initModify");
this.initOrgCourseInfo();
},
// 创建课程页面的初始信息
getCourseInfoById(courseId) {
vm.GET(`contents/course/custom/info/${courseId}`)
.then( res => {
if ( res.code == "000000") {
this.formData = res.data;
}
}
);
},
// 过滤医生信息
filterDoctorName(value) {
this.doctorNameList.forEach(item => {
if (value) {
if ((item.value + "").indexOf(value) == -1) {
item.show = false;
} else {
item.show = true;
}
if (item.value == value) {
item.seleted = true;
} else {
item.seleted = false;
}
} else {
item.show = true;
}
});
},
// 当选择医生的焦点失去时，要反选医生信息
doctorNameInputBlur() {
setTimeout(() => {
this.isShowDoctorList = false;
this.selectDoctorByName(
this.formData.courseCustomDoctorModels[0].courseDoctorName
);
}, 200);
},
// 根据姓名反选医生信息
// TODO 尝试找到完全匹配的医生
selectDoctorByName(name) {
},
// 选择其中一个
selectDoctor(name) {
console.log(name);
this.formData.courseCustomDoctorModels[0].courseDoctorName = name;
this.selectDoctorByName(name);
},
// 关闭当前弹框
close() {
this.$emit("close");
},
// 获取学科列表
getLabelList() {
let req = {};
this.GET("aggregate/content/labelList", req).then(res => {
if (res.code == "000000") {
this.convertLabelList(res.data);
}
});
},
// 将所有子分类中的“全部”去掉
convertLabelList(labelList) {
let newLabelList = [];
labelList.forEach(item => {
item.subList = item.subList.slice(1);
});
this.labelOptions = labelList;
},
// 上传视频
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);
this.needShowUploadProcess = true;
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.needShowUploadProcess = false;
this.uploadProgress = 0;
this.insertResourceAction(uploadResourceParam);
// vm.$message.success("上传成功");
});
},
// 上传资源（视频）后，生存对应的节
insertResourceAction(uploadResourceParam) {
this.POST("contents/course/custom/info/insertResource", [uploadResourceParam]).then(res => {
if (res.code == "000000") {
let cName = res.data.resourceModelList[0].name;
cName = cName.substr(0, cName.lastIndexOf('.'));
let lectureObj = {
id: null,
name: cName,
nameCheck: "",
contentCheck: "",
resourceModel: {}
}
lectureObj.resourceModel = res.data && res.data.resourceModelList[0];
this.formData.courseCustomChapterModels[0].courseCustomLectureModelList.push(lectureObj);
}
});
},
//上传列表图片
beforeUploadListPic(file) {
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;
},
// 限制选择文件个数
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) {
this.insertOrUpdate();
//console.log("success");
flag = true;
} else {
console.log("error submit!!");
flag = false;
}
});
return flag;
},
// 添加或修改课程
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") {
if(this.courseId == 'add') {
this.step = 2;
} else {
this.close();
this.setKind(3);
}
}
});
},
// 返回到
backToOrgCourse() {
this.close();
this.setKind(3);
},
hideCancleTips() {
this.dialogObj.visible = false;
this.close();
},
// 预览视频
previewVideoAction(lecture) {
this.videoUrl = lecture.resourceModel.filePath;
this.isPreviewVideo = true;
},
// 删除本节视频
deleteLecture(index) {
this.formData.courseCustomChapterModels[0].courseCustomLectureModelList.splice(index, 1);
}
}
};
</script>
<style scoped lang="scss">
.edit-course-wrapper {
.course-content {
// color: red;
.basic-item-icon {
position: relative;
margin-top: 20px;
.require {
position: absolute;
left: 40px;
top: 11px;
color: #f56c6c;
}
.upload-message {
position: absolute;
left: 160px;
top: 105px;
font-size: 12px;
color: #f56c6c;
}
.img-delete {
position: absolute;
left: 0px;
top: 0px;
width: 84px;
height: 100px;
background: #000;
opacity: 0.7;
z-index: 999;
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
}
}
.upload-tips {
width: 100%;
position: relative;
top: -10px;
font-size: 12px;
color: #979899;
// display: inline-block;
}
.custom-list {
// width: 100%;
width: 480px;
display: flex;
flex-direction: column;
border-radius: 3px;
border: 1px solid rgba(228,231,237,1);
padding: 20px;
font-size: 14px;
& > li {
margin: 10px 0;
}
.video {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.title {
display: inline-block;
width: 70px;
text-align: right;
margin-right: 10px;
}
.name {
cursor: pointer;
color: #5890DD;
}
img {
width: 12px;
height: 12px;
}
.delete {
position: relative;
top: 4px;
cursor: pointer;
width: 16px;
height: 16px;
}
}
.video-name {
.title {
display: inline-block;
width: 70px;
text-align: right;
margin-right: 10px;
}
}
}
}
.word-num {
font-size: 12px;
color: #999;
padding-top: 5px;
}
.bg-uploader {
img {
float: left;
}
.bg-img-wrapper {
.bg-img {
display: block;
width: 160px;
height: 90px;
}
.bg-img-doctor {
display: block;
width: 88px;
height: 88px;
}
}
.bg-video {
float: left;
width: 84px;
height: 100px;
}
}
.limit-text {
position: absolute;
top: 86px;
left: 0px;
font-size: 12px;
color: #979899;
}
.separator-line {
width: 100%;
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: space-between;
.center {
cursor: pointer;
width: 130px;
color: #666666;
img {
width: 12px;
}
}
.line-left,
.line-right {
// display: inline-block;
// width: 100%;
flex: 1;
border-bottom: 1px dashed #e4e7ed;
}
}
.tips {
width: 100%;
height: 32px;
line-height: 32px;
padding-left: 12px;
background: rgba(254, 250, 245, 1);
border-radius: 3px;
color: #e6a23c;
}
.valid-msg {
position: relative;
.error {
width: 370px;
position: absolute;
display: flex;
justify-content: space-between;
top: 29px;
font-size: 13px;
color: #ed3131;
.text {
flex: 1;
}
.cancle {
cursor: pointer;
width: 20px;
}
}
.edit-wrapper {
color: #449284;
.edit-img {
position: relative;
top: 2px;
width: 12px;
margin: 0 2px 0 4px;
}
}
.doctor-select-list {
width: 200px;
// max-height: 100px;
position: absolute;
z-index: 100;
background: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
// margin: 10px;
li {
padding-left: 20px;
cursor: pointer;
&:hover {
background: #f4f7fd;
}
&.doctor-selected {
background: #f4f7fd;
}
}
}
}
.upload-process {
margin: 10px 0 10px 10px;
display: block;
// width: 310px;
height: 4px;
background: #449284;
border-radius: 2px;
}
}
.course-content-step2 {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
.success-img {
width: 60px;
height: 60px;
}
.tips-1 {
margin-top: 30px;
font-size: 18px;
color: #303133;
}
.tips-2 {
margin-top: 4px;
margin-bottom: 40px;
font-size: 14px;
color: #999999;
}
}
}
</style>
src/components/education/custom-resource/edit-course-dialog copy 6.vue 0 → 100644
浏览文件 @ 98299d6d
<template>
<div class="edit-course-wrapper dialog-title-border">
<el-dialog
ref="testDialogRef"
title="上传课程"
:visible="dialogVisible"
@close="close"
center
:close-on-click-modal="false"
:close-on-press-escape="false"
width="800px"
>
<div slot="title" style="text-align: left;">
<span style="font-weight: 700;">上传课程</span>
<span style="font-size: 12px;color: #ED3131;margin-left: 4px;"> 请认真核对上传内容，一旦提交后将不能修改</span>
</div>
<div v-show="step == 1" class="course-content">
<el-form
ref="formDataRef"
:model="formData"
:rules="rules"
label-width="120px"
class="basic-form"
>
<el-form-item label="课程名称：" prop="courseName" class="valid-msg">
<el-col :span="20">
<el-input
size="small"
v-model="formData.courseName"
placeholder="请输入课程名称"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">
{{(formData.courseName || '').replace(/\s+/g,"").length}}/25
<!-- <span class="edit-wrapper">
<img class="edit-img" src="../../../assets/image/phrase3/icon-pz.png" />修改信息
</span> -->
</span>
<div v-show="needShowAuditMsg && formData.courseNameCheck" class="error">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
<span class="cancle">X</span>
</div>
</el-col>
</el-form-item>
<el-form-item label="学科分类：" prop="subjectIdList" class="valid-msg">
<el-col :span="18">
<!-- :props="{ expandTrigger: 'hover' }" -->
<el-cascader
style="width: 360px"
v-model="formData.subjectIdList"
:options="labelOptions"
:props="{ value: 'id', label: 'name', children: 'subList'}"
>
</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">
<el-upload
class="upload-video"
action="#"
:before-upload="beforeUploadVideo"
:limit="3"
:on-exceed="handleExceed"
:show-file-list="false"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
<span class="upload-tips">只支持MP4格式，课程视频最多上传100个，单文件最大2G</span>
<ul v-show="formData.courseCustomChapterModels[0].courseCustomLectureModelList.length" class="custom-list">
<li v-for="(lecture, index) in formData.courseCustomChapterModels[0].courseCustomLectureModelList" :key="index">
<ul class="video">
<li>
<span class="title">视频{{index + 1}}</span>
<img src="../../../assets/image/phrase3/icon-pin.png" />
<span class="name" @click="previewVideoAction(lecture)">{{lecture.resourceModel.name}}</span>
</li>
<li>
<img @click="deleteLecture(index)" class="delete" src="../../../assets/image/phrase3/close.png" />
</li>
</ul>
<div class="video-name">
<span class="title">
<span >*</span>
<span class="video-title">视频名称</span>
</span>
<el-input
size="small"
v-model="lecture.name"
placeholder="请输入课程名称"
style="width: 260px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">
{{(lecture.name || '').replace(/\s+/g,"").length}}/25
</span>
</div>
</li>
<span v-show="needShowUploadProcess" class="upload-process" :style="{'width': (uploadProgress/100 * 340) + 'px'}"></span>
</ul>
<span v-if="!formData.courseCustomChapterModels[0].courseCustomLectureModelList.length" v-show="needShowUploadProcess" class="upload-process" :style="{'width': (uploadProgress/100 * 340) + 'px'}"></span>
</div>
</el-upload>
</el-form-item>
</div>
<div class="other-content valid-msg" v-show="isShowOtherContent">
<div class="tips">注：以下信息为非必填项，您也可以根据实际情况修改</div>
<div class="basic-item-icon">
<!-- <span class="require">*</span> -->
<el-form-item label="课程封面：">
<el-upload
v-model="formData.courseIntroImage"
class="bg-uploader"
action="#"
: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="index"
@click="selectDoctor(item.courseDoctorName, index)"
:class="{'doctor-selected': item.seleted}"
>
<span v-show="item.show">{{item.courseDoctorName || '测试名'}}</span>
</li>
</ul>
<span
class="word-num"
>{{(formData.courseCustomDoctorModels[0] && formData.courseCustomDoctorModels[0].courseDoctorName || '').replace(/\s+/g,"").length}}/25</span>
</el-col>
</el-form-item>
<div class="basic-item-icon">
<el-form-item label="讲师头像：">
<el-upload
v-model="formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl"
class="bg-uploader"
action="#"
: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="18">
<el-input
size="small"
type="textarea"
maxlength="200"
:autosize="{ minRows: 5}"
placeholder="请输入课程简介"
v-model="formData.courseIntro"
style="width:90%;"
></el-input>
<span
class="word-num"
>{{(formData.courseIntro || '').replace(/\s+/g,"").length}}/200</span>
</el-col>
</el-form-item>
</div>
<!-- 更多信息 -->
<div class="separator-line">
<span class="line-left"></span>
<div @click="toggleOtherContent" class="center">
<span>展开更多信息</span>
<img v-show="isShowOtherContent" src="../../../assets/image/phrase3/arrow-up.png" />
<img v-show="!isShowOtherContent" src="../../../assets/image/phrase3/arrow-down.png" />
</div>
<span class="line-right"></span>
</div>
</el-form>
</div>
<div v-show="step == 2" class="course-content-step2">
<img class="success-img" src="../../../assets/image/phrase3/icon-audit-success.png" />
<span class="tips-1">您上传的课程已成功提交，预计在3-5个工作日内完成审核</span>
<span class="tips-2">审核通过后，您才可以选择课程完成项目配置。如有任何疑问可联系云鹊医400-920-8877</span>
<el-button type="primary" size="small" icon="el-icon-back" @click="backToOrgCourse">返回机构课程</el-button>
</div>
<div v-show="step == 1" slot="footer" class="dialog-footer">
<el-button @click="dialogObj.visible=true">取 消</el-button>
<el-button type="primary" @click="submitForm('formDataRef')">确 定</el-button>
</div>
</el-dialog>
<DialogComponet :dialogObj="dialogObj" @hide="hideCancleTips" @confirm="dialogObj.visible=false"></DialogComponet>
<PreviewVideo :dialogVisible="isPreviewVideo" :videoUrl="videoUrl" @close="isPreviewVideo=false"></PreviewVideo>
<!-- <button @click="previewVideoAction">test video</button> -->
</div>
</template>
<script>
import PreviewVideo from "@/components/education/custom-resource/preview-video";
import PreviewProtocol from "@/components/education/custom-resource/preview-protocol";
import PreviewEditCourse from "@/components/education/custom-resource/edit-course-dialog";
import DialogComponet from "@/components/education/template/dialog";
import { doUpload, getFilePath } from "@/utils/qiniu-util";
import { openLoading, closeLoading, getQiniuToken1 } from "@/utils/utils";
import { isEmptyUtils } from "@/utils/index";
import { mapActions } from 'vuex';
import { ossUpload, getFilePathForOSS } from "@/utils/oss/ossUtil";
let vm = null;
export default {
data() {
let checkCourseName = (rule, value, callback) => {
// 如果有审核的信息，则直接报错
if (!value && this.needCheckField) {
callback(new Error("请输入课程名称"));
} else {
callback();
}
};
return {
step: 1,
needCheckField: false,
needShowAuditMsg: false,
needShowUploadProcess: false,
disabled: false,
formDataBase: {
checkStatus: 0,
courseCustomChapterModels: [
{
courseCustomLectureModelList: [],
id: null,
name: "视频课程"
}
],
courseCustomDoctorModels: [
{
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
}
],
courseId: null,
courseIntro: "",
courseIntroCheck: "",
courseIntroImage:
"https://test1-file.yunqueyi.com/image/png/common/202006201528136.png",
courseIntroImageCheck: "",
courseName: "",
courseNameCheck: "",
deleteCustomLectureIds: [],
difficultyLevel: 1,
shareType: 1,
subjectIdList: []
},
formData: {
checkStatus: 0,
courseCustomChapterModels: [
{
courseCustomLectureModelList: [],
id: null,
name: "视频课程"
}
],
courseCustomDoctorModels: [
{
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
}
],
courseId: null,
courseIntro: "",
courseIntroCheck: "",
courseIntroImage:
"https://test1-file.yunqueyi.com/image/png/common/202006201528136.png",
courseIntroImageCheck: "",
courseName: "",
courseNameCheck: "",
deleteCustomLectureIds: [],
difficultyLevel: 1,
shareType: 1,
subjectIdList: []
},
uploadImgMessage: false,
imgMouseOver: false,
rules: {
courseName: [
{ required: true, message: " " },
{ validator: checkCourseName }
],
subjectIdList: [
{ required: true, message: "请输入课程名称" }
],
shareType: [
{ required: true, message: "请选择开放范围" }
]
},
labelOptions: [],
isShowOtherContent: false,
fileList: [
],
projectBanner:
"https://file.yunqueyi.com/h5/images/cme/project-banner.png",
doctorHeader: "https://file.yunqueyi.com/h5/images/cme/doctor-header.png",
doctorNameList: [
{ courseDoctorName: "333", show: true, seleted: false },
{ courseDoctorName: "334", show: true, seleted: false },
{ courseDoctorName: "335", show: true, seleted: false },
{ courseDoctorName: "336", show: true, seleted: false }
],
isShowDoctorList: false,
isPreviewVideo: false,
videoUrl: "",
orgCourseInfo: {
defaultDoctor: {
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
},
doctorModelList: [
{
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
}
],
limitModel: {
maxLimitOneVideoSize: 0,
maxLimitVideoCount: 0,
maxStorageSpace: 0,
usedStorageSpace: 0
}
},
uploadProgress: 0,
dialogObj: {
visible: false,
title: "确定取消吗？",
message: "发布后,项目将进入审核中,待审核完成后学员可在云鹊医App上参加培训学习",
tip: "",
confirmMsg: "取 消",
hideMsg: "确 定"
},
};
},
props: {
dialogVisible: {
type: Boolean,
default: false
},
courseId: {
type: String | Number,
default: 0
}
},
computed: {},
watch: {
dialogVisible(isVisible) {
this.formData = JSON.parse(JSON.stringify(this.formDataBase));
if (isVisible) {
if (this.courseId == 0) {
this.initAdd(this.courseId);
} else {
this.initModify(this.courseId);
}
}
},
},
components: {
PreviewVideo,
PreviewEditCourse,
DialogComponet,
},
created() {
vm = this;
// this.initAdd();
},
mounted() {
this.getLabelList();
},
methods: {
...mapActions(['setKind']),
// 创建课程页面的初始信息
initOrgCourseInfo() {
vm.GET("contents/course/custom/info/init", { setEntry: true }).then(
res => {
if (res.code == "000000") {
this.orgCourseInfo = res.data;
this.formData.courseCustomDoctorModels[0] = this.orgCourseInfo.defaultDoctor;
this.formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl =
this.orgCourseInfo.defaultDoctor.courseDoctorAvatarUrl ||
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png";
this.doctorNameList = this.convertDNameToSelectOpt(
this.orgCourseInfo.doctorModelList
);
+this.courseId && this.getCourseInfoById(this.courseId);
}
}
);
},
// 将医生名称进行处理
convertDNameToSelectOpt(doctorModelList) {
doctorModelList.forEach(item => {
item.show = true;
item.seleted = false;
});
return doctorModelList;
},
// 添加时初始化
initAdd() {
console.log("in initAdd");
this.step = 1;
this.needShowAuditMsg = false;
this.initOrgCourseInfo();
},
initModify() {
this.needShowAuditMsg = true;
console.log("in initModify");
this.initOrgCourseInfo();
},
// 创建课程页面的初始信息
getCourseInfoById(courseId) {
vm.GET(`contents/course/custom/info/${courseId}`)
.then( res => {
if ( res.code == "000000") {
this.formData = res.data;
}
}
);
},
// 过滤医生信息
filterDoctorName(value) {
this.doctorNameList.forEach(item => {
if (value) {
if ((item.value + "").indexOf(value) == -1) {
item.show = false;
} else {
item.show = true;
}
if (item.value == value) {
item.seleted = true;
} else {
item.seleted = false;
}
} else {
item.show = true;
}
});
},
// 当选择医生的焦点失去时，要反选医生信息
doctorNameInputBlur() {
setTimeout(() => {
this.isShowDoctorList = false;
this.selectDoctorByName(
this.formData.courseCustomDoctorModels[0].courseDoctorName
);
}, 200);
},
// 根据姓名反选医生信息
// TODO 尝试找到完全匹配的医生
selectDoctorByName(name) {
},
// 选择其中一个
selectDoctor(name) {
console.log(name);
this.formData.courseCustomDoctorModels[0].courseDoctorName = name;
this.selectDoctorByName(name);
},
// 关闭当前弹框
close() {
this.$emit("close");
},
// 获取学科列表
getLabelList() {
let req = {};
this.GET("aggregate/content/labelList", req).then(res => {
if (res.code == "000000") {
this.convertLabelList(res.data);
}
});
},
// 将所有子分类中的“全部”去掉
convertLabelList(labelList) {
let newLabelList = [];
labelList.forEach(item => {
item.subList = item.subList.slice(1);
});
this.labelOptions = labelList;
},
// 上传视频（mp4）
beforeUploadVideo(file) {
console.log(file);
const isMP4 = file.type === "video/mp4";
const isLt = file.size / 1024 / 1024 / 1024 < 2;
if (!isLt) {
this.$message.error("视频不符合规范，请根据规范上传视频");
return;
}
if (!isMP4) {
this.$message.error("视频不符合规范，请根据规范上传视频");
} else {
// openLoading(vm);
this.needShowUploadProcess = true;
doUpload(
vm,
file,
getFilePath(file, null),
"preview4",
"progress",
""
).then(function(path) {
// closeLoading(vm);
console.log('vm.uploadProgress', vm.uploadProgress);
console.log(path);
let uploadResourceParam = {
formatType: path.ext,
name: path.name,
qCloudUrl : path.fullPath,
size : path.size,
fileType : 1,
status : "success",
uid : new Date().getTime()
}
vm.needShowUploadProcess = false;
vm.uploadProgress = 0;
vm.insertResourceAction(uploadResourceParam);
});
}
},
// 上传视频
beforeUploadVideo1(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);
this.needShowUploadProcess = true;
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.needShowUploadProcess = false;
this.uploadProgress = 0;
this.insertResourceAction(uploadResourceParam);
// vm.$message.success("上传成功");
});
},
// 上传资源（视频）后，生存对应的节
insertResourceAction(uploadResourceParam) {
this.POST("contents/course/custom/info/insertResource", [uploadResourceParam]).then(res => {
if (res.code == "000000") {
let cName = res.data.resourceModelList[0].name;
cName = cName.substr(0, cName.lastIndexOf('.'));
let lectureObj = {
id: null,
name: cName,
nameCheck: "",
contentCheck: "",
resourceModel: {}
}
lectureObj.resourceModel = res.data && res.data.resourceModelList[0];
this.formData.courseCustomChapterModels[0].courseCustomLectureModelList.push(lectureObj);
}
});
},
//上传列表图片
beforeUploadListPic(file) {
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;
},
// 限制选择文件个数
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 100 个文件，您已经共选择了 ${files.length + fileList.length} 个文件！`);
},
// 删除按钮
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`);
},
//表单校验
submitForm(formName) {
this.needShowAuditMsg = false;
this.$refs[formName].validate(valid => {
if (valid) {
this.insertOrUpdate();
} else {
console.log("error submit!!");
}
this.needShowAuditMsg = true;
});
},
// 添加或修改课程（kind = 3）
insertOrUpdate() {
this.POST("contents/course/custom/info/insertOrUpdate", this.formData).then(res => {
if (res.code == "000000") {
if(this.courseId == 'add') {
this.step = 2;
} else {
this.close();
this.setKind(3);
}
}
});
},
// 返回到课程选择页面（kind = 3）
backToOrgCourse() {
this.close();
this.setKind(3);
},
// 关闭（“取消”按钮弹出来的）弹框
hideCancleTips() {
this.dialogObj.visible = false;
this.close();
},
// 预览视频
previewVideoAction(lecture) {
this.videoUrl = lecture.resourceModel.filePath;
this.isPreviewVideo = true;
},
// 删除本节视频
// TODO 要将删除的节ID放在删除的节里
deleteLecture(index) {
this.formData.courseCustomChapterModels[0].courseCustomLectureModelList.splice(index, 1);
},
// 上传课程封面图片
beforeUpload1(file) {
const isLt50kb = file.size / 1024 < 50;
// if (!isLt50kb) {
// this.$message.error("上传的图片大小不能超过 50kb");
// return;
// }
vm.doUploadOSS(file, 1); //评价图片
},
// 上传讲师图片
beforeUpload2(file) {
const isLt50kb = file.size / 1024 < 50;
// if (!isLt50kb) {
// this.$message.error("上传的图片大小不能超过 50kb");
// return;
// }
this.doUploadOSS(file, 2); //web端课程覆盖图片
},
// （调用OSS API）开始上传
doUploadOSS(file, index) {
let self = this;
//如果没有选择文件,返回
// if (isEmptyUtils(file)) {
// return;
// }
// self.$message.info("开始上传");
//上传 指定文件名
ossUpload(self, file, getFilePathForOSS(file), null, null, null).
then(function(path) {
let list = [{}];
list[0].name = file.name;
list[0].url = localStorage.getItem("resource_url") + path;
if (index === 1) {
self.fileList1 = Object.assign([], list);
self.model.courseInfoUrl = path;
} else if (index === 2) {
self.fileList2 = Object.assign([], list);
self.model.appCourseUrl = path;
}
self.$message.success("上传成功");
});
return false;
},
}
};
</script>
<style scoped lang="scss">
.edit-course-wrapper {
.course-content {
// color: red;
.basic-item-icon {
position: relative;
margin-top: 20px;
.require {
position: absolute;
left: 40px;
top: 11px;
color: #f56c6c;
}
.upload-message {
position: absolute;
left: 160px;
top: 105px;
font-size: 12px;
color: #f56c6c;
}
.img-delete {
position: absolute;
left: 0px;
top: 0px;
width: 84px;
height: 100px;
background: #000;
opacity: 0.7;
z-index: 999;
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
}
}
.upload-tips {
width: 100%;
position: relative;
top: -10px;
font-size: 12px;
color: #979899;
// display: inline-block;
}
.custom-list {
// width: 100%;
width: 480px;
display: flex;
flex-direction: column;
border-radius: 3px;
border: 1px solid rgba(228,231,237,1);
padding: 20px;
font-size: 14px;
& > li {
margin: 10px 0;
}
.video {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.title {
display: inline-block;
width: 70px;
text-align: right;
margin-right: 10px;
}
.name {
cursor: pointer;
color: #5890DD;
}
img {
width: 12px;
height: 12px;
}
.delete {
position: relative;
top: 4px;
cursor: pointer;
width: 16px;
height: 16px;
}
}
.video-name {
.title {
display: inline-block;
width: 70px;
text-align: right;
margin-right: 10px;
}
}
}
}
.word-num {
font-size: 12px;
color: #999;
padding-top: 5px;
}
.bg-uploader {
img {
float: left;
}
.bg-img-wrapper {
.bg-img {
display: block;
width: 160px;
height: 90px;
}
.bg-img-doctor {
display: block;
width: 88px;
height: 88px;
}
}
.bg-video {
float: left;
width: 84px;
height: 100px;
}
}
.limit-text {
position: absolute;
top: 86px;
left: 0px;
font-size: 12px;
color: #979899;
}
.separator-line {
width: 100%;
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: space-between;
.center {
cursor: pointer;
width: 130px;
color: #666666;
img {
width: 12px;
}
}
.line-left,
.line-right {
// display: inline-block;
// width: 100%;
flex: 1;
border-bottom: 1px dashed #e4e7ed;
}
}
.tips {
width: 100%;
height: 32px;
line-height: 32px;
padding-left: 12px;
background: rgba(254, 250, 245, 1);
border-radius: 3px;
color: #e6a23c;
}
.valid-msg {
position: relative;
.error {
width: 370px;
position: absolute;
display: flex;
justify-content: space-between;
top: 29px;
font-size: 13px;
color: #ed3131;
.text {
flex: 1;
}
.cancle {
cursor: pointer;
width: 20px;
}
}
.edit-wrapper {
color: #449284;
.edit-img {
position: relative;
top: 2px;
width: 12px;
margin: 0 2px 0 4px;
}
}
.doctor-select-list {
width: 200px;
// max-height: 100px;
position: absolute;
z-index: 100;
background: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
// margin: 10px;
li {
padding-left: 20px;
cursor: pointer;
&:hover {
background: #f4f7fd;
}
&.doctor-selected {
background: #f4f7fd;
}
}
}
}
.upload-process {
margin: 10px 0 10px 10px;
display: block;
// width: 310px;
height: 4px;
background: #449284;
border-radius: 2px;
}
}
.course-content-step2 {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
.success-img {
width: 60px;
height: 60px;
}
.tips-1 {
margin-top: 30px;
font-size: 18px;
color: #303133;
}
.tips-2 {
margin-top: 4px;
margin-bottom: 40px;
font-size: 14px;
color: #999999;
}
}
}
</style>
src/components/education/custom-resource/edit-course-dialog.vue
浏览文件 @ 98299d6d
...@@ -12,9 +12,9 @@ ...@@ -12,9 +12,9 @@
> >
<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>
<span style="font-size: 12px;color: #999;">请认真核对上传内容，一旦提交后将不能修改</span> <span style="font-size: 12px;color: #ED3131;margin-left: 4px;"> 请认真核对上传内容，一旦提交后将不能修改</span>
</div> </div>
<div class="course-content"> <div v-show="step == 1" class="course-content">
<el-form <el-form
ref="formDataRef" ref="formDataRef"
:model="formData" :model="formData"
...@@ -34,13 +34,11 @@ ...@@ -34,13 +34,11 @@
></el-input> ></el-input>
<span class="word-num"> <span class="word-num">
{{(formData.courseName || '').replace(/\s+/g,"").length}}/25 {{(formData.courseName || '').replace(/\s+/g,"").length}}/25
<span <!-- <span class="edit-wrapper">
class="edit-wrapper" <img class="edit-img" src="../../../assets/image/phrase3/icon-pz.png" />修改信息
> </span> -->
<img class="edit-img" src="../../../assets/image/phrase3/icon-pin.png" />修改信息
</span>
</span> </span>
<div class="error"> <div v-show="needShowAuditMsg && formData.courseNameCheck" class="error">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span> <span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
<span class="cancle">X</span> <span class="cancle">X</span>
</div> </div>
...@@ -79,13 +77,40 @@ ...@@ -79,13 +77,40 @@
> >
<el-button size="small" type="primary">点击上传</el-button> <el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip"> <div slot="tip" class="el-upload__tip">
<span>只支持MP4格式，课程视频最多上传100个，单文件最大2G</span> <span class="upload-tips">只支持MP4格式，课程视频最多上传100个，单文件最大2G</span>
<ul class="custom-list"> <ul v-show="formData.courseCustomChapterModels[0].courseCustomLectureModelList.length" class="custom-list">
<li v-for="(file, index) in fileList" :key="index"> <li v-for="(lecture, index) in formData.courseCustomChapterModels[0].courseCustomLectureModelList" :key="index">
<span>{{file.name}}</span> <ul class="video">
<li>
<span class="title">视频{{index + 1}}</span>
<img src="../../../assets/image/phrase3/icon-pin.png" />
<span class="name" @click="previewVideoAction(lecture)">{{lecture.resourceModel.name}}</span>
</li>
<li>
<img @click="deleteLecture(index)" class="delete" src="../../../assets/image/phrase3/close.png" />
</li>
</ul>
<div class="video-name">
<span class="title">
<span >*</span>
<span class="video-title">视频名称</span>
</span>
<el-input
size="small"
v-model="lecture.name"
placeholder="请输入课程名称"
style="width: 260px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">
{{(lecture.name || '').replace(/\s+/g,"").length}}/25
</span>
</div>
</li> </li>
<span v-show="needShowUploadProcess" class="upload-process" :style="{'width': (uploadProgress/100 * 340) + 'px'}"></span>
</ul> </ul>
<span>{{uploadProgress}}</span> <span v-if="!formData.courseCustomChapterModels[0].courseCustomLectureModelList.length" v-show="needShowUploadProcess" class="upload-process" :style="{'width': (uploadProgress/100 * 340) + 'px'}"></span>
</div> </div>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
...@@ -101,7 +126,7 @@ ...@@ -101,7 +126,7 @@
class="bg-uploader" class="bg-uploader"
action="#" action="#"
:show-file-list="false" :show-file-list="false"
:before-upload="beforeUploadListPic" :before-upload="beforeUpload1"
:disabled="disabled" :disabled="disabled"
> >
<div class="bg-img-wrapper"> <div class="bg-img-wrapper">
...@@ -166,7 +191,7 @@ ...@@ -166,7 +191,7 @@
class="bg-uploader" class="bg-uploader"
action="#" action="#"
:show-file-list="false" :show-file-list="false"
:before-upload="beforeUploadListPic" :before-upload="beforeUpload2"
:disabled="disabled" :disabled="disabled"
> >
<div class="bg-img-wrapper"> <div class="bg-img-wrapper">
...@@ -203,10 +228,11 @@ ...@@ -203,10 +228,11 @@
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item label="课程简介："> <el-form-item label="课程简介：">
<el-col :span="22"> <el-col :span="18">
<el-input <el-input
size="small" size="small"
type="textarea" type="textarea"
maxlength="200"
:autosize="{ minRows: 5}" :autosize="{ minRows: 5}"
placeholder="请输入课程简介" placeholder="请输入课程简介"
v-model="formData.courseIntro" v-model="formData.courseIntro"
...@@ -231,12 +257,20 @@ ...@@ -231,12 +257,20 @@
</div> </div>
</el-form> </el-form>
</div> </div>
<div slot="footer" class="dialog-footer"> <div v-show="step == 2" class="course-content-step2">
<el-button @click="close">取 消</el-button> <img class="success-img" src="../../../assets/image/phrase3/icon-audit-success.png" />
<span class="tips-1">您上传的课程已成功提交，预计在3-5个工作日内完成审核</span>
<span class="tips-2">审核通过后，您才可以选择课程完成项目配置。如有任何疑问可联系云鹊医400-920-8877</span>
<el-button type="primary" size="small" icon="el-icon-back" @click="backToOrgCourse">返回机构课程</el-button>
</div>
<div v-show="step == 1" slot="footer" class="dialog-footer">
<el-button @click="dialogObj.visible=true">取 消</el-button>
<el-button type="primary" @click="submitForm('formDataRef')">确 定</el-button> <el-button type="primary" @click="submitForm('formDataRef')">确 定</el-button>
</div> </div>
</el-dialog> </el-dialog>
<!-- <PreviewVideo :dialogVisible="isPreviewVideo" :videoUrl="videoUrl" @close="closeVideo"></PreviewVideo> --> <DialogComponet :dialogObj="dialogObj" @hide="hideCancleTips" @confirm="dialogObj.visible=false"></DialogComponet>
<PreviewVideo :dialogVisible="isPreviewVideo" :videoUrl="videoUrl" @close="isPreviewVideo=false"></PreviewVideo>
<cropper-two v-if="showCropper" :cropOption="cropOption" @getCropImg="getCropImg(arguments)" :originImg="slide2.oriUrl" :previewImg="slide2.preUrl"/>
<!-- <button @click="previewVideoAction">test video</button> --> <!-- <button @click="previewVideoAction">test video</button> -->
</div> </div>
</template> </template>
...@@ -244,22 +278,75 @@ ...@@ -244,22 +278,75 @@
import PreviewVideo from "@/components/education/custom-resource/preview-video"; import PreviewVideo from "@/components/education/custom-resource/preview-video";
import PreviewProtocol from "@/components/education/custom-resource/preview-protocol"; import PreviewProtocol from "@/components/education/custom-resource/preview-protocol";
import PreviewEditCourse from "@/components/education/custom-resource/edit-course-dialog"; import PreviewEditCourse from "@/components/education/custom-resource/edit-course-dialog";
import DialogComponet from "@/components/education/template/dialog";
import CropperTwo from '@/components/common/cropper.two.vue'
import { doUpload, getFilePath } from "@/utils/qiniu-util"; import { doUpload, getFilePath } from "@/utils/qiniu-util";
import { openLoading, closeLoading, getQiniuToken1 } from "@/utils/utils"; import { openLoading, closeLoading, getQiniuToken1 } from "@/utils/utils";
import { isEmptyUtils } from "@/utils/index";
import { mapActions } from 'vuex';
import { ossUpload, getFilePathForOSS } from "@/utils/oss/ossUtil";
let vm = null; let vm = null;
export default { export default {
data() { data() {
let checkCourseName = (rule, value, callback) => { let checkCourseName = (rule, value, callback) => {
// 如果有审核的信息，则直接报错 // 如果有审核的信息，则直接报错
if (!value) { if (!value && this.needCheckField) {
callback(new Error("请输入课程名称")); callback(new Error("请输入课程名称"));
} else { } else {
callback(); callback();
} }
}; };
return { return {
needShowAuditMsg: true, slide2: {
oriUrl: 'https://avatars1.githubusercontent.com/u/23690568?s=460&v=4', // 原图
preUrl: 'https://avatars1.githubusercontent.com/u/23690568?s=460&v=4' // 裁剪后的预览图片，初始化为原图
},
showCropper: false,
cropOption: {
offset_x: 30,
offset_y: 40,
width: 600,
height: 400
},
step: 1,
needCheckField: false,
needShowAuditMsg: false,
needShowUploadProcess: false,
disabled: false, disabled: false,
formDataBase: {
checkStatus: 0,
courseCustomChapterModels: [
{
courseCustomLectureModelList: [],
id: null,
name: "视频课程"
}
],
courseCustomDoctorModels: [
{
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
}
],
courseId: null,
courseIntro: "",
courseIntroCheck: "",
courseIntroImage:
"https://test1-file.yunqueyi.com/image/png/common/202006201528136.png",
courseIntroImageCheck: "",
courseName: "",
courseNameCheck: "",
deleteCustomLectureIds: [],
difficultyLevel: 1,
shareType: 1,
subjectIdList: []
},
formData: { formData: {
checkStatus: 0, checkStatus: 0,
courseCustomChapterModels: [ courseCustomChapterModels: [
...@@ -298,29 +385,19 @@ export default { ...@@ -298,29 +385,19 @@ export default {
imgMouseOver: false, imgMouseOver: false,
rules: { rules: {
courseName: [ courseName: [
{ required: true, message: "请输入课程名称" }, { required: true, message: " " },
{ validator: checkCourseName } { validator: checkCourseName }
], ],
subjectIdList: [ subjectIdList: [
{ required: true, message: "请输入课程名称", trigger: "blur" } { required: true, message: "请输入课程名称" }
], ],
shareType: [ shareType: [
{ required: true, message: "请选择开放范围", trigger: "blur" } { required: true, message: "请选择开放范围" }
] ]
}, },
labelOptions: [], labelOptions: [],
isShowOtherContent: false, isShowOtherContent: false,
fileList: [ 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: projectBanner:
"https://file.yunqueyi.com/h5/images/cme/project-banner.png", "https://file.yunqueyi.com/h5/images/cme/project-banner.png",
...@@ -367,7 +444,14 @@ export default { ...@@ -367,7 +444,14 @@ export default {
} }
}, },
uploadProgress: 0, uploadProgress: 0,
dialogObj: {
visible: false,
title: "确定取消吗？",
message: "发布后,项目将进入审核中,待审核完成后学员可在云鹊医App上参加培训学习",
tip: "",
confirmMsg: "取 消",
hideMsg: "确 定"
},
}; };
}, },
props: { props: {
...@@ -375,26 +459,29 @@ export default { ...@@ -375,26 +459,29 @@ export default {
type: Boolean, type: Boolean,
default: false default: false
}, },
addOrUpdate: { courseId: {
type: String, type: String | Number,
default: "add" default: 0
} }
}, },
computed: {}, computed: {},
watch: { watch: {
dialogVisible(isVisible) { dialogVisible(isVisible) {
this.formData = JSON.parse(JSON.stringify(this.formDataBase));
if (isVisible) { if (isVisible) {
if (this.addOrUpdate == "add") { if (this.courseId == 0) {
this.initAdd(); this.initAdd(this.courseId);
} else { } else {
this.initModify(); this.initModify(this.courseId);
} }
} }
} },
}, },
components: { components: {
PreviewVideo, PreviewVideo,
PreviewEditCourse PreviewEditCourse,
DialogComponet,
CropperTwo
}, },
created() { created() {
vm = this; vm = this;
...@@ -404,6 +491,14 @@ export default { ...@@ -404,6 +491,14 @@ export default {
this.getLabelList(); this.getLabelList();
}, },
methods: { methods: {
...mapActions(['setKind']),
getCropImg (argument) {
console.log(argument);
this.slide2.preUrl = argument[0]
this.cropData = argument[1]
},
// 创建课程页面的初始信息 // 创建课程页面的初始信息
initOrgCourseInfo() { initOrgCourseInfo() {
vm.GET("contents/course/custom/info/init", { setEntry: true }).then( vm.GET("contents/course/custom/info/init", { setEntry: true }).then(
...@@ -417,6 +512,7 @@ export default { ...@@ -417,6 +512,7 @@ export default {
this.doctorNameList = this.convertDNameToSelectOpt( this.doctorNameList = this.convertDNameToSelectOpt(
this.orgCourseInfo.doctorModelList this.orgCourseInfo.doctorModelList
); );
+this.courseId && this.getCourseInfoById(this.courseId);
} }
} }
); );
...@@ -434,11 +530,26 @@ export default { ...@@ -434,11 +530,26 @@ export default {
// 添加时初始化 // 添加时初始化
initAdd() { initAdd() {
console.log("in initAdd"); console.log("in initAdd");
this.step = 1;
this.needShowAuditMsg = false;
this.initOrgCourseInfo(); this.initOrgCourseInfo();
}, },
initModify() { initModify() {
this.needShowAuditMsg = true;
console.log("in initModify"); console.log("in initModify");
this.initOrgCourseInfo();
},
// 创建课程页面的初始信息
getCourseInfoById(courseId) {
vm.GET(`contents/course/custom/info/${courseId}`)
.then( res => {
if ( res.code == "000000") {
this.formData = res.data;
}
}
);
}, },
// 过滤医生信息 // 过滤医生信息
...@@ -484,6 +595,7 @@ export default { ...@@ -484,6 +595,7 @@ export default {
this.selectDoctorByName(name); this.selectDoctorByName(name);
}, },
// 关闭当前弹框
close() { close() {
this.$emit("close"); this.$emit("close");
}, },
...@@ -507,60 +619,63 @@ export default { ...@@ -507,60 +619,63 @@ export default {
this.labelOptions = labelList; 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("上传成功");
}); // 上传视频（mp4）
beforeUploadVideo(file) {
console.log(file);
const isMP4 = file.type === "video/mp4";
const isLt = file.size / 1024 / 1024 / 1024 < 2;
if (!isLt) {
this.$message.error("视频不符合规范，请根据规范上传视频");
return;
}
if (!isMP4) {
this.$message.error("视频不符合规范，请根据规范上传视频");
} else {
// openLoading(vm);
this.needShowUploadProcess = true;
doUpload(
vm,
file,
getFilePath(file, null),
"preview4",
"progress",
""
).then(function(path) {
// closeLoading(vm);
console.log('vm.uploadProgress', vm.uploadProgress);
console.log(path);
let uploadResourceParam = {
formatType: path.ext,
name: path.name,
qCloudUrl : path.fullPath,
size : path.size,
fileType : 1,
status : "success",
uid : new Date().getTime()
}
vm.needShowUploadProcess = false;
vm.uploadProgress = 0;
vm.insertResourceAction(uploadResourceParam);
});
}
}, },
// 上传资源（视频）后，生存对应的节
insertResourceAction(uploadResourceParam) { insertResourceAction(uploadResourceParam) {
this.POST("contents/course/custom/info/insertResource", [uploadResourceParam]).then(res => { this.POST("contents/course/custom/info/insertResource", [uploadResourceParam]).then(res => {
if (res.code == "000000") { if (res.code == "000000") {
console.log('insertResourceAction', res); let cName = res.data.resourceModelList[0].name;
cName = cName.substr(0, cName.lastIndexOf('.'));
let lectureObj = { let lectureObj = {
id: null, id: null,
name: res.data.name, name: cName,
nameCheck: "", nameCheck: "",
contentCheck: "", contentCheck: "",
resourceModel: {} resourceModel: {}
} }
lectureObj.resourceModel = res.data && res.data.resourceModelList[0]; lectureObj.resourceModel = res.data && res.data.resourceModelList[0];
this.formData.courseCustomChapterModels[0].courseCustomLectureModelList.push(lectureObj); this.formData.courseCustomChapterModels[0].courseCustomLectureModelList.push(lectureObj);
// 直接push到节里
// this.convertLabelList(res.data);
} }
}); });
}, },
...@@ -579,6 +694,73 @@ export default { ...@@ -579,6 +694,73 @@ export default {
vm.beforeAvatarUpload(file, fileLimit); vm.beforeAvatarUpload(file, fileLimit);
}, },
//上传图片校验
beforeAvatarUpload2(file, fileLimit) {
console.log();
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
console.log("isJPG", isJPG, "isPNG", isPNG, "isLt2M", isLt2M);
// if (!isJPG && !isPNG) {
// vm.$message.error("图片不符合规范，请根据规范上传图片");
// return;
// }
// if (!isLt2M) {
// vm.$message.error("图片不符合规范，请根据规范上传图片 ");
// return;
// }
let _img = new FileReader();
_img.readAsDataURL(file);
console.log('readAsDataURL', _img, file);
_img.onload = function(theFile) {
let image = new Image();
image.src = theFile.target.result;
vm.slide2.oriUrl = theFile.target.result;
vm.showCropper = true;
console.log('readAsDataURL222', _img.width, file, theFile);
image.onload = function() {
console.log('image.onload', image);
let _vm = this;
if (
false
// true ||
// _vm.width != fileLimit.width ||
// _vm.height != fileLimit.height
) {
vm.$message.error("图片不符合规范，请根据规范上传图片");
} else {
// openLoading(vm);
// doUpload(
// vm,
// file,
// getFilePath(file, null),
// "preview4",
// "progress1",
// 1
// ).then(function(path) {
// closeLoading(vm);
// console.log(path);
// if (fileLimit.show == "uploadImgMessage") {
// vm.uploadImgMessage = false;
// }
// // else if (fileLimit.show == "uploadImgMessage2") {
// // vm.uploadImgMessage2 = false;
// // }
// vm.formData[fileLimit.key] = path.fullPath;
// vm.formData[fileLimit.more] = {
// attachmentName: path.name,
// attachmentExt: path.ext,
// attachmentSize: path.size
// };
// vm.$message.success("上传成功");
// });
}
};
};
return isJPG && isLt2M;
},
//上传图片校验 //上传图片校验
beforeAvatarUpload(file, fileLimit) { beforeAvatarUpload(file, fileLimit) {
console.log(); console.log();
...@@ -615,8 +797,8 @@ export default { ...@@ -615,8 +797,8 @@ export default {
file, file,
getFilePath(file, null), getFilePath(file, null),
"preview4", "preview4",
"progress1" "progress1",
// 1 1
).then(function(path) { ).then(function(path) {
closeLoading(vm); closeLoading(vm);
console.log(path); console.log(path);
...@@ -640,59 +822,118 @@ export default { ...@@ -640,59 +822,118 @@ export default {
return isJPG && isLt2M; return isJPG && isLt2M;
}, },
// 展开/收起 更多信息
toggleOtherContent() { toggleOtherContent() {
this.isShowOtherContent = !this.isShowOtherContent; this.isShowOtherContent = !this.isShowOtherContent;
}, },
// 上传文件相关 // 限制选择文件个数
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) { handleExceed(files, fileList) {
this.$message.warning( this.$message.warning(`当前限制选择 100 个文件，您已经共选择了 ${files.length + fileList.length} 个文件！`);
`当前限制选择 100 个文件，您已经共选择了 ${files.length +
fileList.length} 个文件！`
);
}, },
// 删除按钮
beforeRemove(file, fileList) { beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`); return this.$confirm(`确定移除 ${file.name}？`);
}, },
//表单校验 //表单校验
submitForm(formName) { submitForm(formName) {
console.log("this.formData", this.formData);
this.needShowAuditMsg = false; this.needShowAuditMsg = false;
let flag = null;
this.$refs[formName].validate(valid => { this.$refs[formName].validate(valid => {
console.log("valid", valid);
if (valid) { if (valid) {
this.insertOrUpdate(); this.insertOrUpdate();
//console.log("success");
flag = true;
} else { } else {
console.log("error submit!!"); console.log("error submit!!");
flag = false;
} }
this.needShowAuditMsg = true;
}); });
return flag;
}, },
// 获取学科列表 // 添加或修改课程（kind = 3）
insertOrUpdate() { insertOrUpdate() {
console.log('in insertOrUpdate', this.formData);
this.POST("contents/course/custom/info/insertOrUpdate", this.formData).then(res => { this.POST("contents/course/custom/info/insertOrUpdate", this.formData).then(res => {
console.log(res);
if (res.code == "000000") { if (res.code == "000000") {
if(this.courseId == 'add') {
this.step = 2;
} else {
this.close();
this.setKind(3);
}
}
});
},
// 返回到课程选择页面（kind = 3）
backToOrgCourse() {
this.close();
this.setKind(3);
},
// 关闭（“取消”按钮弹出来的）弹框
hideCancleTips() {
this.dialogObj.visible = false;
this.close();
},
// 预览视频
previewVideoAction(lecture) {
this.videoUrl = lecture.resourceModel.filePath;
this.isPreviewVideo = true;
},
// 删除本节视频
// TODO 要将删除的节ID放在删除的节里
deleteLecture(index) {
this.formData.courseCustomChapterModels[0].courseCustomLectureModelList.splice(index, 1);
},
// 上传课程封面图片
beforeUpload1(file) {
const isLt50kb = file.size / 1024 < 50;
// if (!isLt50kb) {
// this.$message.error("上传的图片大小不能超过 50kb");
// return;
// }
vm.doUploadOSS(file, 1); //评价图片
},
// 上传讲师图片
beforeUpload2(file) {
const isLt50kb = file.size / 1024 < 50;
// if (!isLt50kb) {
// this.$message.error("上传的图片大小不能超过 50kb");
// return;
// }
this.doUploadOSS(file, 2); //web端课程覆盖图片
},
// （调用OSS API）开始上传
doUploadOSS(file, index) {
let self = this;
//如果没有选择文件,返回
// if (isEmptyUtils(file)) {
// return;
// }
// self.$message.info("开始上传");
//上传 指定文件名
ossUpload(self, file, getFilePathForOSS(file), null, null, null).
then(function(path) {
let list = [{}];
list[0].name = file.name;
list[0].url = localStorage.getItem("resource_url") + path;
if (index === 1) {
self.fileList1 = Object.assign([], list);
self.model.courseInfoUrl = path;
} else if (index === 2) {
self.fileList2 = Object.assign([], list);
self.model.appCourseUrl = path;
} }
self.$message.success("上传成功");
}); });
}, return false;
},
} }
}; };
</script> </script>
...@@ -731,6 +972,62 @@ export default { ...@@ -731,6 +972,62 @@ export default {
margin-left: 0px; margin-left: 0px;
} }
} }
.upload-tips {
width: 100%;
position: relative;
top: -10px;
font-size: 12px;
color: #979899;
// display: inline-block;
}
.custom-list {
// width: 100%;
width: 480px;
display: flex;
flex-direction: column;
border-radius: 3px;
border: 1px solid rgba(228,231,237,1);
padding: 20px;
font-size: 14px;
& > li {
margin: 10px 0;
}
.video {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.title {
display: inline-block;
width: 70px;
text-align: right;
margin-right: 10px;
}
.name {
cursor: pointer;
color: #5890DD;
}
img {
width: 12px;
height: 12px;
}
.delete {
position: relative;
top: 4px;
cursor: pointer;
width: 16px;
height: 16px;
}
}
.video-name {
.title {
display: inline-block;
width: 70px;
text-align: right;
margin-right: 10px;
}
}
}
} }
.word-num { .word-num {
font-size: 12px; font-size: 12px;
...@@ -847,6 +1144,35 @@ export default { ...@@ -847,6 +1144,35 @@ export default {
} }
} }
} }
.upload-process {
margin: 10px 0 10px 10px;
display: block;
// width: 310px;
height: 4px;
background: #449284;
border-radius: 2px;
}
}
.course-content-step2 {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
.success-img {
width: 60px;
height: 60px;
}
.tips-1 {
margin-top: 30px;
font-size: 18px;
color: #303133;
}
.tips-2 {
margin-top: 4px;
margin-bottom: 40px;
font-size: 14px;
color: #999999;
}
} }
} }
</style> </style>
src/components/education/custom/course-list copy 2.vue 0 → 100644
浏览文件 @ 98299d6d
<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>
<span v-show="kind == 0">
<img v-show="!isRise" src="../../../assets/custom/icon/icon-rise.png" alt />
<img v-show="isRise" src="../../../assets/custom/icon/icon-drop.png" alt />
</span>
<span v-show="kind == 1">
<img v-show="!isRiseOrg" src="../../../assets/custom/icon/icon-rise.png" alt />
<img v-show="isRiseOrg" src="../../../assets/custom/icon/icon-drop.png" alt />
</span>
</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>
<el-button v-show="kind == 1" type="primary" icon="el-icon-plus" @click="showOrgCourse">创建机构课程</el-button>
</div>
<el-button type="primary" icon="el-icon-plus" @click="showOrgCourse">创建机构课程</el-button>
<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() {
if(this.kind == 0) {
this.isRise = !this.isRise;
let dir = this.isRise ? 1 : 2;
this.searchParam.dir = dir;
this.setSearchParam(this.searchParam);
} else {
this.isRiseOrg = !this.isRiseOrg;
let dir = this.isRiseOrg ? 1 : 2;
this.searchParamOrg.dir = dir;
this.setSearchParamOrg(this.searchParamOrg);
}
},
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();
},
// 通知父组件，打开创建资源（课程）弹框
showOrgCourse() {
this.$emit('showOrgCourse', 'add');
},
}
};
</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
浏览文件 @ 98299d6d
...@@ -33,9 +33,13 @@ ...@@ -33,9 +33,13 @@
</ul> </ul>
<div v-if="courseList && courseList.list && courseList.list.length" class="list-wrapper"> <div v-if="courseList && courseList.list && courseList.list.length" class="list-wrapper">
<ul class="list"> <ul class="list">
<li class="course create-btn" @click="showOrgCourse(0)">
<img src="../../../assets/image/phrase3/plus-icon.png">
<span>创建机构课程</span>
</li>
<li <li
class="course" class="course"
:class="{ 'course-checked': item.checked }" :class="{ 'course-checked': item.checked, 'cursor': kind == 0 }"
v-for="(item, index) in courseList.list" v-for="(item, index) in courseList.list"
:key="index" :key="index"
@click="toggleChecked(item)" @click="toggleChecked(item)"
...@@ -51,10 +55,17 @@ ...@@ -51,10 +55,17 @@
<span class="section-num">{{item.chapterSum}}章{{item.lectureNum}}节 {{item.totalTime}}分</span> <span class="section-num">{{item.chapterSum}}章{{item.lectureNum}}节 {{item.totalTime}}分</span>
<span v-if="item.testCount" class="exam-num">{{item.testCount}}场考试</span> <span v-if="item.testCount" class="exam-num">{{item.testCount}}场考试</span>
</div> </div>
<div class="cost"> <div v-if="item.checkStatus == 2 || kind == 0" class="cost">
<span class="no">免费</span> <span class="no">免费</span>
<span class="num">{{item.joinNum}}人已学</span> <span class="num">{{item.joinNum}}人已学</span>
</div> </div>
<div v-else class="cost audit">
<span class="no">{{item.checkStatus == 0 ? '审核中' : '审核失败'}}</span>
<div v-show="item.checkStatus == 1" class="edit" @click="showOrgCourse(item.courseId)">
<span>查看详情</span>
<img src="../../../assets/image/phrase3/arrow-right.png">
</div>
</div>
</div> </div>
<img <img
v-show="item.checked" v-show="item.checked"
...@@ -67,11 +78,8 @@ ...@@ -67,11 +78,8 @@
<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> <el-button v-show="kind == 1" type="primary" icon="el-icon-plus" @click="showOrgCourse(0)">创建机构课程</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">
<el-pagination <el-pagination
...@@ -150,6 +158,7 @@ export default { ...@@ -150,6 +158,7 @@ export default {
// 选择课程（并要处理过滤，删除等） // 选择课程（并要处理过滤，删除等）
toggleChecked(item) { toggleChecked(item) {
if(item.checkStatus != 2 && this.kind == 1) return;
item.checked = !item.checked; item.checked = !item.checked;
if (item.checked) { if (item.checked) {
if (this.courseLimitCount != -1 && this.cartList.length >= this.courseLimitCount) { if (this.courseLimitCount != -1 && this.cartList.length >= this.courseLimitCount) {
...@@ -170,8 +179,8 @@ export default { ...@@ -170,8 +179,8 @@ export default {
}, },
// 通知父组件，打开创建资源（课程）弹框 // 通知父组件，打开创建资源（课程）弹框
showOrgCourse() { showOrgCourse(courseId) {
this.$emit('showOrgCourse', 'add'); this.$emit('showOrgCourse', courseId ? courseId : 0);
}, },
} }
}; };
...@@ -267,8 +276,6 @@ export default { ...@@ -267,8 +276,6 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
overflow-y: auto; overflow-y: auto;
.course { .course {
user-select: none;
cursor: pointer;
position: relative; position: relative;
top: 0; top: 0;
left: 0; left: 0;
...@@ -282,6 +289,11 @@ export default { ...@@ -282,6 +289,11 @@ export default {
margin-right: 10px; margin-right: 10px;
border-radius: 4px; border-radius: 4px;
border: 1px solid rgba(228, 231, 237, 1); border: 1px solid rgba(228, 231, 237, 1);
user-select: none;
// cursor: pointer;
&.cursor {
cursor: pointer;
}
&.course-checked { &.course-checked {
&::before { &::before {
content: ""; content: "";
...@@ -367,6 +379,24 @@ export default { ...@@ -367,6 +379,24 @@ export default {
font-weight: 400; font-weight: 400;
color: #999999; color: #999999;
} }
&.audit {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.edit {
cursor: pointer;
span {
font-size: 14px;
color: #449284;
}
img {
width: 10px;
height: 10px;
}
}
}
} }
} }
.course-selected { .course-selected {
...@@ -376,6 +406,24 @@ export default { ...@@ -376,6 +406,24 @@ export default {
width: 44px; width: 44px;
height: 44px; height: 44px;
} }
&.create-btn {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background:rgba(248,249,250,1);
border-radius:4px;
border:1px solid rgba(228,231,237,1);
img {
width: 16px;
height: 16px;
}
span {
margin-top: 10px;
font-size: 12px;
color: #979899;
}
}
} }
} }
} }
......
src/components/education/custom/select-course-comp.vue
浏览文件 @ 98299d6d
...@@ -21,7 +21,7 @@ import { mapActions, mapGetters } from 'vuex'; ...@@ -21,7 +21,7 @@ import { mapActions, mapGetters } from 'vuex';
export default { export default {
data() { data() {
return { return {
activeName: '1' activeName: '0'
} }
}, },
computed: { computed: {
...@@ -37,8 +37,8 @@ export default { ...@@ -37,8 +37,8 @@ export default {
handleClick() { handleClick() {
this.setKind(this.activeName); this.setKind(this.activeName);
}, },
showOrgCourse(type) { showOrgCourse(courseId) {
this.$emit('showOrgCourse', type); this.$emit('showOrgCourse', courseId);
}, },
}, },
} }
......
src/style/global.scss
浏览文件 @ 98299d6d
...@@ -181,5 +181,12 @@ ...@@ -181,5 +181,12 @@
padding: 25px 5px 30px; padding: 25px 5px 30px;
border-top: 1px solid #E4E7ED; border-top: 1px solid #E4E7ED;
} }
.dialog {
.el-dialog__body {
margin: 0;
padding: 25px 5px 30px;
border-top: 0px solid #E4E7ED;
}
}
} }
src/utils/env-config.js
浏览文件 @ 98299d6d
...@@ -37,6 +37,7 @@ export const envConfig = { ...@@ -37,6 +37,7 @@ export const envConfig = {
excelUrl: 'https://dev-file.yunqueyi.com/File/template/portal/', excelUrl: 'https://dev-file.yunqueyi.com/File/template/portal/',
itemFileUrl: 'http://pica-test-huabei2.oss-cn-beijing.aliyuncs.com/File/template/portal/', itemFileUrl: 'http://pica-test-huabei2.oss-cn-beijing.aliyuncs.com/File/template/portal/',
cmsUrl: ' https://dev-cms.yunqueyi.com/', cmsUrl: ' https://dev-cms.yunqueyi.com/',
ossImgUrl: 'https://test-file.yunqueyi.com/',
}, },
dev: { dev: {
baseUrl: 'https://dev-sc.yunqueyi.com/', baseUrl: 'https://dev-sc.yunqueyi.com/',
...@@ -55,6 +56,7 @@ export const envConfig = { ...@@ -55,6 +56,7 @@ export const envConfig = {
excelUrl: 'https://test-file.yunqueyi.com/File/template/portal/', excelUrl: 'https://test-file.yunqueyi.com/File/template/portal/',
itemFileUrl: 'http://pica-test-huabei2.oss-cn-beijing.aliyuncs.com/File/template/portal/', itemFileUrl: 'http://pica-test-huabei2.oss-cn-beijing.aliyuncs.com/File/template/portal/',
cmsUrl: ' https://dev-cms.yunqueyi.com/', cmsUrl: ' https://dev-cms.yunqueyi.com/',
ossImgUrl: 'https://test-file.yunqueyi.com/',
}, },
test: { test: {
baseUrl: 'https://test1-sc.yunqueyi.com/', baseUrl: 'https://test1-sc.yunqueyi.com/',
...@@ -73,6 +75,7 @@ export const envConfig = { ...@@ -73,6 +75,7 @@ export const envConfig = {
excelUrl: 'https://test-file.yunqueyi.com/File/template/portal/', excelUrl: 'https://test-file.yunqueyi.com/File/template/portal/',
itemFileUrl: 'http://pica-test-huabei2.oss-cn-beijing.aliyuncs.com/File/template/portal/', itemFileUrl: 'http://pica-test-huabei2.oss-cn-beijing.aliyuncs.com/File/template/portal/',
cmsUrl: ' https://test1-cms.yunqueyi.com/', cmsUrl: ' https://test1-cms.yunqueyi.com/',
ossImgUrl: 'https://test-file.yunqueyi.com/',
}, },
test2: { test2: {
baseUrl: 'https://test2-work.yunqueyi.com/sc/', baseUrl: 'https://test2-work.yunqueyi.com/sc/',
...@@ -90,6 +93,7 @@ export const envConfig = { ...@@ -90,6 +93,7 @@ export const envConfig = {
excelUrl: 'https://test-file.yunqueyi.com/File/template/portal/', excelUrl: 'https://test-file.yunqueyi.com/File/template/portal/',
itemFileUrl: 'http://pica-test-huabei2.oss-cn-beijing.aliyuncs.com/File/template/portal/', itemFileUrl: 'http://pica-test-huabei2.oss-cn-beijing.aliyuncs.com/File/template/portal/',
cmsUrl: ' https://test2-cms.yunqueyi.com/', cmsUrl: ' https://test2-cms.yunqueyi.com/',
ossImgUrl: 'https://test-file.yunqueyi.com/',
}, },
uat: { uat: {
baseUrl: 'https://uat-sc.yunqueyi.com/', baseUrl: 'https://uat-sc.yunqueyi.com/',
...@@ -108,6 +112,7 @@ export const envConfig = { ...@@ -108,6 +112,7 @@ export const envConfig = {
excelUrl: 'https://test-file.yunqueyi.com/File/template/portal/', excelUrl: 'https://test-file.yunqueyi.com/File/template/portal/',
itemFileUrl: 'http://pica-test-huabei2.oss-cn-beijing.aliyuncs.com/File/template/portal/', itemFileUrl: 'http://pica-test-huabei2.oss-cn-beijing.aliyuncs.com/File/template/portal/',
cmsUrl: ' https://uat-cms.yunqueyi.com/', cmsUrl: ' https://uat-cms.yunqueyi.com/',
ossImgUrl: 'https://test-file.yunqueyi.com/',
}, },
pro: { pro: {
baseUrl: 'https://sc.yunqueyi.com/', baseUrl: 'https://sc.yunqueyi.com/',
...@@ -126,5 +131,6 @@ export const envConfig = { ...@@ -126,5 +131,6 @@ export const envConfig = {
excelUrl: 'https://file.yunqueyi.com/File/template/portal/', excelUrl: 'https://file.yunqueyi.com/File/template/portal/',
itemFileUrl: 'http://pica-test-huabei2.oss-cn-beijing.aliyuncs.com/File/template/portal/', itemFileUrl: 'http://pica-test-huabei2.oss-cn-beijing.aliyuncs.com/File/template/portal/',
cmsUrl: ' https://cms.yunqueyi.com/', cmsUrl: ' https://cms.yunqueyi.com/',
ossImgUrl: 'https://file.yunqueyi.com/',
} }
} }
src/utils/fetch.js
浏览文件 @ 98299d6d
...@@ -54,7 +54,7 @@ service.interceptors.request.use(config => { ...@@ -54,7 +54,7 @@ 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'] = '17042AF4193B4398B3351AD1C92AC4DD'; config.headers['token'] = '4C431D1F183E43EBA7AD7EC094753882';
// 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')
......
src/utils/index.js
浏览文件 @ 98299d6d
...@@ -250,4 +250,36 @@ export function convertTime(time, isToSlash = true) { ...@@ -250,4 +250,36 @@ export function convertTime(time, isToSlash = true) {
} }
} }
} }
} }
\ No newline at end of file
//截位
export function subString(obj, int) {
if (isEmptyUtils(obj) || isEmptyUtils(int)) {
return "";
}
if (obj.length <= int) {
return obj;
} else {
obj = obj.substring(0, int);
}
return obj;
};
/**
* 校验对象是否为空
* */
export function isNotEmptyUtils(obj) {
if ("" == obj || null == obj || undefined == obj || "null" == obj) {
return false;
}
return true;
};
/**
* 校验对象是否为空
* */
export function isEmptyUtils (obj) {
return !isNotEmptyUtils(obj);
};
src/utils/oss/fetch.js 0 → 100644
浏览文件 @ 98299d6d
//api路径
import { isNotEmptyUtils } from "@/utils/index";
export default async(url = '', data = {}, type = 'POST', method = 'fetch',server='CONTENT') => {
type = type.toUpperCase();
// url = (server==='WECHAT'?wechatUrl:baseUrl) + url;
if (url.match("^http") == null){
url = localStorage.getItem("Url") + url;
}
// url =
console.log('@@@@@@@@@@@@@in oss fetch' , url);
// @@@@@@@@@@@@@in oss fetch null/5DF4291EDDA34BA08AD234C6BB7BE65D
// https://dev-api.yunqueyi.com/middle/oss/token/B1A7745D85D74EB4966125A4E0979ACE
console.log("完整url:",url)
if (type == 'GET' && data) {
let dataStr = ''; //数据拼接字符串
Object.keys(data).forEach(key => {
dataStr += key + '=' + data[key] + '&';
})
if (dataStr !== '') {
dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
url = url + '?' + dataStr;
// url = encodeURI(url + '?' + dataStr, true);
}
}
if (window.fetch && method == 'fetch') {
let requestConfig = {
credentials: 'include',
method: type,
// mode: "cors",
headers: {
// 'Access-Control-Allow-Origin': '*',
'Accept': '*',
'Content-Type': 'application/json',
// 'token': localStorage.getItem('token') || null, //固定传header：
// 'system_code': 'todo' //固定传header：系统编号
},
}
if (type == 'POST' || type === 'PUT' || type === 'PATCH' || type === 'DELETE' && data) {
Object.defineProperty(requestConfig, 'body', {
value: JSON.stringify(data)
})
}
try {
const response = await fetch(url, requestConfig);
const responseJson = await response.json();
return responseJson
} catch (error) {
throw new Error(error)
}
} else {
return new Promise((resolve, reject) => {
let requestObj;
if (window.XMLHttpRequest) {
requestObj = new XMLHttpRequest();
} else {
requestObj = new ActiveXObject;
}
let sendData = '';
if (type == 'POST' || type == 'DELETE' || type == 'PUT') {
sendData = JSON.stringify(data);
}
requestObj.open(type, url, true);
requestObj.setRequestHeader("Content-Type", "application/json");
requestObj.send(sendData);
requestObj.onreadystatechange = () => {
if (requestObj.readyState == 4) {
if (requestObj.status == 200) {
let obj = requestObj.response
if (typeof obj !== 'object' && isNotEmptyUtils(obj)) {
obj = JSON.parse(obj);
}
resolve(obj)
} else {
reject(requestObj)
}
}
}
})
}
}
src/utils/oss/ossUtil.js 0 → 100644
浏览文件 @ 98299d6d
import {isEmptyUtils, isNotEmptyUtils, subString} from "@/utils/index";
import fetch from './fetch.js';
/**
* OSS工具类
*/
// let OSS = require('ali-oss');
// 文件扩展名(图片以外的文件如果需要下载,需要在此处添加文件扩展名)
let contentTypeMap = new Map();
contentTypeMap.set("xlsx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel");
// PICA_DEV_APP.service('ossUtil', function ($rootScope, $q) {
//获取OSS客户端
let bucketName = localStorage.getItem("bucketName");
let endpoint = localStorage.getItem("endpoint");
// //上传状态
// let status = false;
//
// /**
// * 文件上传状态
// * */
// export const isUpload = () => {
// return status;
// };
/**
* 获取OSS客户端对象
*
* @return {Object} client OSS客户端对象
* */
const doOSSAction = () => {
//sts服务器
// let stsUrl = localStorage.getItem("stsUrl") + "/" + localStorage.getItem("token");
// let stsUrl = 'https://dev-api.yunqueyi.com/middle/oss/token/' + localStorage.getItem("token");
let stsUrl = 'https://dev-api.yunqueyi.com/middle/oss/token/B1A7745D85D74EB4966125A4E0979ACE'
return new Promise(function (resolve, reject) {
fetch(stsUrl, {}, 'GET').then(function (result) {
let client = null;
if (isNotEmptyUtils(result) && result.StatusCode == "200") {
//获取client对象
client = new OSS.Wrapper({
accessKeyId: result.AccessKeyId,
accessKeySecret: result.AccessKeySecret,
stsToken: result.SecurityToken,
endpoint: endpoint,
bucket: bucketName
});
resolve(client);
console.log('STS临时授权成功');
} else {
reject(result);
console.error('STS临时授权失败:', result);
}
}).catch(function (error) {
reject();
console.error('STS临时授权失败:', error);
});
});
};
/**
* 获取OSS上的文件路径
*
* @param {String} [filePath] 文件路径
* @return {String} address 网络路径(默认有效时间半个小时)
* */
export const downloadOSSFile = (filePath) => {
let deferred = $q.defer();
if (isEmptyUtils(filePath)) {
return null;
}
let suffix = filePath.substring(filePath.lastIndexOf(".") + 1);
// return client.signatureUrl(filePath);
//默认下载图片
let content_type = "image/png";
if (isNotEmptyUtils(suffix) && contentTypeMap.has(suffix)) {
content_type = contentTypeMap.get(suffix);
}
doOSSAction().then(function (client) {
let address = client.signatureUrl(filePath, {
expires: 1800,
response: {
'content-type': content_type,
'content-disposition': 'attachment'
}
});
deferred.resolve(address);
}
);
return deferred.promise;
};
/**
* 文件重命名
* @param {File} [file] 上传文件对象
* @param {String} [fileName] 指定文件名
* @param {String} [folder] 指定文件夹
* @return {String} fileName
* modified by Anndy Yang
*/
export const getFilePathForOSS = (file, fileName, folder) => {
if (isEmptyUtils(file)) {
return null;
}
//文件类型
let ext = file.type;
//后缀名
let suffix = file.name.substring(file.name.lastIndexOf(".") + 1);
//若为空则从name中获取---对wps格式的文件获取不到file.type
if (isEmptyUtils(ext)) {
ext = suffix;
}
//获取当前日期对象
let date = new Date();
if (isEmptyUtils(fileName)) {
//重命名后的文件名
fileName = timeStamp(date) + "-" + subString(guid(), 8) + "." + suffix;
}
//文件全路径(文件路径 + 文件名) 扩展名​/年/月/日/
let filePath = ext + "/" + date.format('yyyy/MM/dd') + "/" + (isEmptyUtils(folder) ? "" : (folder + "/")) + fileName;
console.log(filePath);
return filePath;
};
/**
* oss上传
*
* @param {Vue} [self] vue实例
* @param {File} [file] 上传文件对象
* @param {String} [filePath] 文件全路径(文件路径 + 文件名)
* @param {String} [previewId] 显示图片的元素Id
* @param {String} [progressId] 显示上传进度的进度条id
* @param {Object} [imageAction] 图片操作
* @return {Promise} [dbFilePath] 存到数据库的文件路径
* */
export const ossUpload = (self, file, filePath, previewId, progressId, imageAction) => {
return new Promise(function (resolve, reject) {
if (isEmptyUtils(file) || isEmptyUtils(filePath)) {
console.error('OSS上传失败:非法参数');
reject();
}
//修改状态为上传
self.uploadStatus = true;
doOSSAction().then(function (client) {
//分片上传
client.multipartUpload(filePath, file, {
progress: function* (p) {
//获取百分比进度
self.uploadProgress = getPercentage(p, 2);
if (p == 1) {
//修改状态为非上传
self.uploadStatus = false;
}
console.log('uploadProgress: ' + self.uploadProgress);
},
headers: {
'Access-Control-Allow-Origin': '*'
}
}).then(function (r1) {
resolve('/' + filePath);
//修改状态为非上传
self.uploadStatus = false;
console.log('上传成功', r1);
// let address = getOSSFilePath(filePath, imageAction);
// //显示图片
// if (isNotEmptyUtils(previewId) && isNotEmptyUtils(address)) {
// console.log('图片路径: ' + address);
//
// let $img = $('<img>').attr("src", address);
// let obj = $("#" + previewId);
// obj.empty().append($img);
// obj.css('max-width', '100%');
// }
}).catch(function (err) {
reject(err);
//修改状态为非上传
self.uploadStatus = false;
console.error('OSS上传失败:', err);
// modalClick("提示", "上传失败！", "确定", function () {
// $('#model-modify').modal('hide');
// }, "", null);
});
}
);
});
};
/**
* OSS获取图片的参数模型
*
* @return {Object} [imageAction] 图片的参数模型
* */
export const getImageAction = () => {
return {
'resize': {
'width': null,
'height': null
},
'rotate': {
'angle': null //角度
}
};
};
//OSS获取图片的参数模型,转换为url路径参数
let imageActionParam = function (action) {
//有参数为true
let haveParamFlag = false;
let param = [];
if (isNotEmptyUtils(action)) {
// 缩放
if (isNotEmptyUtils(action.resize)) {
let width = isNotEmptyUtils(action.resize.width) ? ("w_" + action.resize.width) : null;
let height = isNotEmptyUtils(action.resize.height) ? ("h_" + action.resize.height) : null;
if (isNotEmptyUtils(width) || isNotEmptyUtils(height)) {
let resize = [];
if (isNotEmptyUtils(width)) {
resize.push(width);
}
if (isNotEmptyUtils(height)) {
resize.push(height);
}
param.push(['resize', resize]);
haveParamFlag = true;
}
}
//旋转
if (isNotEmptyUtils(action.rotate)) {
if (isNotEmptyUtils(action.rotate.angle)) {
param.push(['rotate', [action.rotate.angle]]);
haveParamFlag = true;
}
}
}
//如果有参数
if (haveParamFlag) {
let ParamStr = "?x-oss-process=image";
let paramMap = new Map(param);
//Map的回调函数参数依次为value、key和map本身：
paramMap.forEach(function (value, key, map) {
ParamStr = ParamStr + '/' + key;
for (let i = 0; i < value.length; i++) {
ParamStr = ParamStr + ',' + value[i];
}
});
return ParamStr;
}
return null;
};
/**
* 获取OSS上的文件路径
*
* @param {String} [filePath] 文件路径
* @param {String} [param] 参数字符串
* @return {String} address 网络路径
* */
export const getOSSFilePath = (filePath, param) => {
if (isEmptyUtils(filePath)) {
return null;
}
let paramStr = imageActionParam(param);
// http://bucket.<endpoint>/object?x-oss-process=image/action,parame_value
let str = "http://" + bucketName + "." + endpoint + "/" + filePath;
return isNotEmptyUtils(paramStr) ? (str + paramStr) : str;
};
// });
/**
* 获取全局唯一标识符（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());
};
/**
* 获取时间戳
* @param {Date} [date]日期对象,为空时,返回当前时间戳
* @return {String} timeStamp时间戳 格式:yyyyMMddhhmmssS
*/
const timeStamp = (date) => {
if (isEmptyUtils(date)) {
return new Date().format('yyyyMMddhhmmssS');
}
return date.format('yyyyMMddhhmmssS');
}
/**
* 保留precision位小数(四舍五入)后百分比显示
* @param {Number} [input] 要四舍五入的对象
* @param {Number} [precision] 要保留的小数位(默认2位)
* @return {Number} 例如:98.22
*/
const getPercentage = (input, precision) => {
if (isEmptyUtils(input)) {
return 0;
}
return Number((input * 100).toFixed(isEmptyUtils(precision) ? 2 : precision));
};
/**
* 从dataURL获取文件对象
*
* @param {String} [dataurl] 文件路径
* @param {String} [filename] 参数字符串
* @return {File} file 文件
* */
const dataURLtoFile = (dataurl, filename) => {
let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type: mime});
};
src/views/education/audit-custom-course copy 2.vue 0 → 100644
浏览文件 @ 98299d6d
<template>
<div class="review-access-wrap">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<div class="edit-course-wrapper dialog-title-border">
<div class="course-content">
<el-form
ref="formDataRef"
:model="formData"
:rules="rules"
label-width="120px"
class="basic-form"
>
<el-form-item label="课程名称：" prop="courseName" class="valid-msg">
<el-col :span="20">
<el-input
size="small"
v-model="formData.courseName"
placeholder="请输入课程名称"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">
{{(formData.courseName).replace(/\s+/g,"").length}}/25
<span class="edit-wrapper"><img class="edit-img" src="../../assets/image/phrase3/icon-pin.png">修改信息</span>
</span>
<div class="error"><span>错误信息错误信息错误信息错误信息错误信息错误信息息</span><span class="cancle">X</span></div>
</el-col>
</el-form-item>
<el-form-item label="学科分类：" prop="subjectIdList" class="valid-msg">
<el-col :span="18">
<!-- :props="{ expandTrigger: 'hover' }" -->
<el-cascader
style="width: 360px"
v-model="formData.subjectIdList"
:options="labelOptions"
:props="{ value: 'id', label: 'name', children: 'subList'}"
@change="handleChange">
<!-- <template slot-scope="{ node, data }">
<span>{{ data.name }}</span>
</template> -->
</el-cascader>
</el-col>
</el-form-item>
<el-form-item label="开放范围：" prop="shareType" class="valid-msg">
<el-radio-group v-model="formData.shareType">
<el-radio :label="1">机构共享</el-radio>
</el-radio-group>
</el-form-item>
<div class="basic-item-icon">
<span class="require">*</span>
<el-form-item label="课程视频：" prop="range">
<!-- action="https://jsonplaceholder.typicode.com/posts/" -->
<!-- multiple -->
<!-- :on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove" -->
<el-upload
class="upload-demo"
action="#"
:before-upload="beforeUploadListPic"
:limit="3"
:on-exceed="handleExceed"
:show-file-list="false"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
<span >只支持MP4格式，课程视频最多上传100个，单文件最大2G</span>
<ul class="custom-list">
<li v-for="(file, index) in fileList" :key="index">
<span>{{file.name}}</span>
</li>
</ul>
</div>
</el-upload>
</el-form-item>
</div>
<div class="other-content valid-msg" v-show="isShowOtherContent">
<div class="tips">注：以下信息为非必填项，您也可以根据实际情况修改</div>
<div class="basic-item-icon">
<!-- <span class="require">*</span> -->
<el-form-item label="课程封面：">
<el-upload
v-model="formData.courseHeaderImage"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadListPic"
:disabled="disabled"
>
<div class="bg-img-wrapper">
<img v-if="formData.courseHeaderImage" @mouseover.stop="imgMouseOver=true" :src="formData.courseHeaderImage" class="bg-img">
<img v-if="!formData.courseHeaderImage" class="bg-img" src="../../assets/image/small.png">
</div>
</el-upload>
<div class="limit-text">
尺寸：750*420，只支持jpeg格式
</div>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="课程难度：">
<el-radio-group v-model="formData.difficultyLevel">
<el-radio :label="1">初级</el-radio>
<el-radio :label="2">中级</el-radio>
<el-radio :label="3">高级</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="讲师名称：" class="valid-msg">
<el-col :span="18">
<el-input
size="small"
v-model="formData.courseCustomDocterModel[0].courseDoctorName"
placeholder="请输入讲师名称"
style="width: 360px"
maxlength="25"
@focus="isShowDoctorList=true"
@input="filterDoctorName"
@blur="doctorNameInputBlur"
:disabled="disabled"
></el-input>
<ul v-show="isShowDoctorList" class="doctor-select-list">
<li
v-for="item in doctorNameList"
:key="item.value"
@click="selectDoctor(item.value)"
:class="{'doctor-selected': item.seleted}"
>
<span v-show="item.show">{{item.value}}</span>
</li>
</ul>
<span class="word-num">{{(formData.courseCustomDocterModel[0].courseDoctorName).replace(/\s+/g,"").length}}/25</span>
</el-col>
</el-form-item>
<div class="basic-item-icon">
<el-form-item label="讲师头像：">
<el-upload
v-model="formData.courseCustomDocterModel[0].courseDoctorAvatarUrl"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadListPic"
:disabled="disabled"
>
<div class="bg-img-wrapper">
<img v-if="formData.courseCustomDocterModel[0].courseDoctorAvatarUrl" @mouseover.stop="imgMouseOver=true" :src="formData.courseCustomDocterModel[0].courseDoctorAvatarUrl" class="bg-img-doctor">
<img v-if="!formData.courseCustomDocterModel[0].courseDoctorAvatarUrl" class="bg-img-doctor" src="../../assets/image/small.png">
</div>
</el-upload>
<div class="limit-text">
尺寸：88*88，只支持jpeg格式
</div>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="所属机构：">
<el-col :span="18">
<el-input
size="small"
v-model="formData.courseCustomDocterModel[0].courseDoctorHospital"
placeholder="请输入所属机构"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">{{(formData.courseCustomDocterModel[0].courseDoctorHospital).replace(/\s+/g,"").length}}/25</span>
</el-col>
</el-form-item>
<el-form-item label="课程简介：">
<el-col :span="22">
<el-input
size="small"
type="textarea"
:autosize="{ minRows: 5}"
placeholder="请输入课程简介"
v-model="formData.courseIntro"
style="width:90%;"
></el-input>
<span class="word-num">{{(formData.courseIntro).replace(/\s+/g,"").length}}/200</span>
</el-col>
</el-form-item>
</div>
<!-- 更多信息 -->
<div class="separator-line">
<span class="line-left"></span>
<div @click="toggleOtherContent" class="center">
<span>展开更多信息</span>
<img v-show="isShowOtherContent" src="../../assets/image/phrase3/arrow-up.png"/>
<img v-show="!isShowOtherContent" src="../../assets/image/phrase3/arrow-down.png"/>
</div>
<span class="line-right"></span>
</div>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="close">取 消</el-button>
<el-button type="primary" @click="submitForm('formDataRef')">确 定</el-button>
</div>
<!-- <PreviewVideo :dialogVisible="isPreviewVideo" :videoUrl="videoUrl" @close="closeVideo"></PreviewVideo> -->
<!-- <button @click="previewVideoAction">test video</button> -->
</div>
</div>
</template>
<script>
import PreviewVideo from "@/components/education/custom-resource/preview-video";
import PreviewProtocol from "@/components/education/custom-resource/preview-protocol";
import PreviewEditCourse from "@/components/education/custom-resource/edit-course-dialog";
import BreadCrumb from "../../components/breadcrumb.vue";
import { doUpload, getFilePath } from "@/utils/qiniu-util";
import { openLoading, closeLoading, getQiniuToken1 } from "@/utils/utils";
import * as commonUtil from "../../utils/utils";
let vm = null;
export default {
data() {
let checkCourseName = (rule, value, callback) => {
// 如果有审核的信息，则直接报错
// if(this.needShowAuditMsg && this.auditMsgMap.name.desc) {
// callback(new Error(this.auditMsgMap.name.desc));
// return;
// }
// if(!this.needShowAuditMsg && !value) {
// callback(new Error('请输入课程名称'));
// } else {
// callback();
// }
};
return {
curmbFirst: "CME",
curmbSecond: "外部资源管理",
needShowAuditMsg: true,
auditMsgMap: {
name: {
desc: '填写的课程名称不对'
}
},
disabled: false,
formData: {
checkStatus: 0,
courseCustomChapterModel: [{
courseCustomLectureModelList: [
{
contentCheck: '',
id: 0,
name: '',
nameCheck: '',
resourceModel: {
createdId: 0,
createdTime: '',
deleteFlag: 0,
filePath: '',
fileType: 0,
formatType: 0,
hospitalId: 0,
id: 0,
idType: 0,
lectureId: 0,
modifiedId: 0,
modifiedTime: '',
name: '',
operateKey: '',
page: 0,
resolutionRatio: '',
size: 0,
status: 0,
totalTime: 0,
type: 0,
videoType: 0
}
}
],
id: 0,
name: ''
}],
courseCustomDocterModel: [
{
courseDoctorAvatarUrl: 'https://file.yunqueyi.com/h5/images/cme/doctor-header.png',
courseDoctorHospital: '',
courseDoctorHospitalCheck: '',
courseDoctorName: '',
courseDoctorNameCheck: '',
id: 0
}
],
courseHeaderImage: 'https://file.yunqueyi.com/h5/images/cme/project-banner.png',
courseId: 0,
courseIntro: '',
courseIntroCheck: '',
courseName: '',
courseNameCheck: '',
difficultyLevel: 1,
shareType: 1,
subjectIdList: [410, 423]
},
uploadImgMessage: false,
imgMouseOver: false,
rules: {
courseName: [
{ required: true, message: "请输入课程名称"},
{ validator: checkCourseName }
],
subjectIdList: [
{ required: true, message: "请输入课程名称", trigger: "blur"},
],
shareType: [
{ required: true, message: "请选择开放范围", trigger: "blur"},
],
},
labelOptions: [],
isShowOtherContent: false,
fileList: [
{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
{name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
],
projectBanner: 'https://file.yunqueyi.com/h5/images/cme/project-banner.png',
doctorHeader: 'https://file.yunqueyi.com/h5/images/cme/doctor-header.png',
doctorNameList: [
{value: '333', show: true, seleted: false},
{value: '334', show: true, seleted: false},
{value: '335', show: true, seleted: false},
{value: '336', show: true, seleted: false},
],
isShowDoctorList: false,
isPreviewVideo: false,
videoUrl: '',
};
},
props: {
dialogVisible: {
type: Boolean,
default: false
},
addOrUpdate: {
type: String,
default: 'add'
}
},
computed: {
},
watch: {
dialogVisible(isVisible) {
if(isVisible) {
if(this.addOrUpdate == 'add') {
this.initAdd();
} else {
this.initModify();
}
}
}
},
components: {
PreviewVideo,
PreviewEditCourse,
BreadCrumb
},
created() {
vm = this;
this.initAdd();
},
mounted() {
commonUtil.resizeHeight();
this.getLabelList();
// setTimeout(() => {
// console.log(this.$refs.formDataRef);
// this.$refs['formDataRef'].validateField("name");
// }, 2000);
},
methods: {
// 添加时初始化
initAdd() {
console.log('in initAdd');
},
initModify() {
console.log('in initModify');
},
// 过滤医生信息
filterDoctorName(value) {
this.doctorNameList.forEach( item => {
if(value) {
if((item.value + '').indexOf(value) == -1) {
item.show = false;
} else {
item.show = true;
}
if(item.value == value) {
item.seleted = true;
} else {
item.seleted = false;
}
} else {
item.show = true;
}
})
},
// 当选择医生的焦点失去时，要反选医生信息
doctorNameInputBlur() {
setTimeout(() => {
this.isShowDoctorList = false;
this.selectDoctorByName(this.formData.courseCustomDocterModel[0].courseDoctorName);
}, 200);
},
// 根据姓名反选医生信息
// TODO
selectDoctorByName(name) {
},
// 选择其中一个
selectDoctor(name) {
console.log(name)
this.formData.courseCustomDocterModel[0].courseDoctorName = name;
this.selectDoctorByName(name);
},
close() {
this.$emit('close');
},
// 获取学科列表
getLabelList() {
let req = {};
this.GET("aggregate/content/labelList", req).then(res => {
if (res.code == '000000') {
this.convertLabelList(res.data);
}
});
},
// 将所有子分类中的“全部”去掉
convertLabelList(labelList) {
let newLabelList = [];
labelList.forEach( item => {
item.subList = item.subList.slice(1);
})
this.labelOptions = labelList;
},
//上传列表图片
beforeUploadListPic(file) {
let fileLimit = {
width: 230,
height: 172,
size: 0.5,
sizeText: "500K",
key: "attachmentUrl",
more: "attachmentMore1",
show: "uploadImgMessage"
};
vm.beforeAvatarUpload(file, fileLimit);
},
//上传图片校验
beforeAvatarUpload(file, fileLimit) {
console.log();
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
console.log('isJPG', isJPG, 'isPNG', isPNG, 'isLt2M', isLt2M);
// if (!isJPG && !isPNG) {
// vm.$message.error("图片不符合规范，请根据规范上传图片");
// return;
// }
// if (!isLt2M) {
// vm.$message.error("图片不符合规范，请根据规范上传图片 ");
// return;
// }
let _img = new FileReader();
_img.readAsDataURL(file);
_img.onload = function(theFile) {
let image = new Image();
image.src = theFile.target.result;
image.onload = function() {
let _vm = this;
if (
false
// true ||
// _vm.width != fileLimit.width ||
// _vm.height != fileLimit.height
) {
vm.$message.error("图片不符合规范，请根据规范上传图片");
} else {
openLoading(vm);
doUpload(
vm,
file,
getFilePath(file, null),
"preview4",
"progress1",
1
).then(function(path) {
closeLoading(vm);
console.log(path);
if (fileLimit.show == "uploadImgMessage") {
vm.uploadImgMessage = false;
}
// else if (fileLimit.show == "uploadImgMessage2") {
// vm.uploadImgMessage2 = false;
// }
vm.formData[fileLimit.key] = path.fullPath;
vm.formData[fileLimit.more] = {
attachmentName: path.name,
attachmentExt: path.ext,
attachmentSize: path.size
};
vm.$message.success("上传成功");
});
}
};
};
return isJPG && isLt2M;
},
toggleOtherContent() {
this.isShowOtherContent = !this.isShowOtherContent;
},
// 上传文件相关
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 100 个文件，您已经共选择了 ${files.length + fileList.length} 个文件！`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
},
//表单校验
submitForm(formName) {
console.log('this.formData', this.formData);
this.needShowAuditMsg = false;
let flag = null;
this.$refs[formName].validate(valid => {
if (valid) {
//console.log("success");
flag = true;
} else {
console.log("error submit!!");
flag = false;
}
});
return flag;
},
handleChange(value) {
console.log(value);
},
}
};
</script>
<style scoped lang="scss">
.edit-course-wrapper {
.course-content {
// color: red;
.basic-item-icon {
position: relative;
margin-top: 20px;
.require {
position: absolute;
left: 40px;
top: 11px;
color: #f56c6c;
}
.upload-message {
position: absolute;
left: 160px;
top: 105px;
font-size: 12px;
color: #f56c6c;
}
.img-delete {
position: absolute;
left: 0px;
top: 0px;
width: 84px;
height: 100px;
background: #000;
opacity: 0.7;
z-index: 999;
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
}
}
}
.word-num {
font-size: 12px;
color: #999;
padding-top: 5px;
}
.bg-uploader {
img {
float: left;
}
.bg-img-wrapper {
.bg-img {
display: block;
width: 160px;
height: 90px;
}
.bg-img-doctor {
display: block;
width: 88px;
height: 88px;
}
}
.bg-video {
float: left;
width: 84px;
height: 100px;
}
}
.limit-text {
position: absolute;
top: 86px;
left: 0px;
font-size: 12px;
color: #979899;
}
.separator-line {
width: 100%;
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: space-between;
.center {
cursor: pointer;
width: 130px;
color: #666666;
img {
width: 12px;
}
}
.line-left, .line-right {
// display: inline-block;
// width: 100%;
flex: 1;
border-bottom: 1px dashed #E4E7ED;
}
}
.tips {
width: 100%;
height:32px;
line-height: 32px;
padding-left: 12px;
background:rgba(254,250,245,1);
border-radius:3px;
color: #E6A23C;
}
.valid-msg {
position: relative;
.error {
width: 370px;
position: absolute;
display: flex;
justify-content: space-between;
top: 29px;
font-size: 13px;
color: #ED3131;
.text {
flex: 1;
}
.cancle {
cursor: pointer;
width: 20px;
}
}
.edit-wrapper {
color: #449284;
.edit-img {
position: relative;
top: 2px;
width: 12px;
margin: 0 2px 0 4px;
}
}
.doctor-select-list {
width: 200px;
// max-height: 100px;
position: absolute;
z-index: 100;
background: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
// margin: 10px;
li {
padding-left: 20px;
cursor: pointer;
&:hover {
background: #f4f7fD;
}
&.doctor-selected {
background: #f4f7fD;
}
}
}
}
}
}
</style>
src/views/education/audit-custom-course copy 3.vue 0 → 100644
浏览文件 @ 98299d6d
<template>
<div class="review-access-wrap">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<div class="edit-course-wrapper review-access screenSet" id="screenSet">
<div class="course-content">
<el-form
ref="formDataRef"
:model="formData"
:rules="rules"
label-width="120px"
class="basic-form"
>
<el-form-item label="课程名称：" prop="courseName" class="valid-msg">
<el-col :span="20">
<el-input
size="small"
v-model="formData.courseName"
placeholder="请输入课程名称"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">
{{(formData.courseName || '').replace(/\s+/g,"").length}}/25
<span class="edit-wrapper">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息
</span>
</span>
<div v-show="needShowAuditMsg && formData.courseNameCheck" class="error">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
<span class="cancle">X</span>
</div>
</el-col>
</el-form-item>
<el-form-item label="学科分类：" prop="subjectIdList" class="valid-msg">
<el-col :span="18">
<!-- :props="{ expandTrigger: 'hover' }" -->
<el-cascader
style="width: 360px"
v-model="formData.subjectIdList"
:options="labelOptions"
:props="{ value: 'id', label: 'name', children: 'subList'}"
:disabled="disabled"
>
</el-cascader>
</el-col>
</el-form-item>
<el-form-item label="开放范围：" prop="shareType" class="valid-msg">
<el-radio-group v-model="formData.shareType">
<el-radio :label="1">机构共享</el-radio>
</el-radio-group>
</el-form-item>
<div class="basic-item-icon">
<ul v-show="formData.courseCustomChapterModels[0].courseCustomLectureModelList.length" class="custom-list">
<li v-for="(lecture, index) in formData.courseCustomChapterModels[0].courseCustomLectureModelList" :key="index" class="valid-msg">
<ul class="video">
<li class="video-wapper">
<span class="title">视频{{index + 1}}</span>
<img src="../../assets/image/phrase3/icon-pin.png" />
<span class="name" @click="previewVideoAction(lecture)">{{lecture.resourceModel.name}}</span>
</li>
<!-- <li>
<img @click="deleteLecture(index)" class="delete" src="../../assets/image/phrase3/close.png" />
</li> -->
</ul>
<div class="video-name">
<span class="title">
<span >*</span>
<span class="video-title">视频名称</span>
</span>
<el-input
size="small"
v-model="lecture.name"
placeholder="请输入课程名称"
style="width: 380px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">
{{(lecture.name || '').replace(/\s+/g,"").length}}/25
<span class="edit-wrapper">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息
</span>
</span>
<div v-show="needShowAuditMsg && formData.courseNameCheck" class="error-video">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
<span class="cancle">X</span>
</div>
</div>
</li>
<span v-show="needShowUploadProcess" class="upload-process" :style="{'width': (uploadProgress/100 * 340) + 'px'}"></span>
</ul>
</div>
<div class="other-content valid-msg">
<div class="tips">注：以下信息为非必填项，您也可以根据实际情况修改</div>
<div class="basic-item-icon">
<!-- <span class="require">*</span> -->
<el-form-item label="课程封面：">
<el-upload
v-model="formData.courseIntroImage"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadListPic"
:disabled="disabled"
>
<div class="bg-img-wrapper">
<img
v-if="formData.courseIntroImage"
@mouseover.stop="imgMouseOver=true"
:src="formData.courseIntroImage"
class="bg-img"
/>
<img
v-if="!formData.courseIntroImage"
class="bg-img"
src="../../assets/image/small.png"
/>
</div>
</el-upload>
<div class="limit-text">尺寸：750*420，只支持jpeg格式</div>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="课程难度：">
<el-radio-group v-model="formData.difficultyLevel" :disabled="disabled">
<el-radio :label="1">初级</el-radio>
<el-radio :label="2">中级</el-radio>
<el-radio :label="3">高级</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="讲师名称：" class="valid-msg">
<el-col :span="18">
<el-input
size="small"
v-model="formData.courseCustomDoctorModels[0].courseDoctorName"
placeholder="请输入讲师名称"
style="width: 360px"
maxlength="25"
@focus="isShowDoctorList=true"
@input="filterDoctorName"
@blur="doctorNameInputBlur"
:disabled="disabled"
></el-input>
<ul v-show="isShowDoctorList" class="doctor-select-list">
<li
v-for="(item, index) in doctorNameList"
:key="index"
@click="selectDoctor(item.courseDoctorName, index)"
:class="{'doctor-selected': item.seleted}"
>
<span v-show="item.show">{{item.courseDoctorName || '测试名'}}</span>
</li>
</ul>
<span class="word-num">
{{(formData.courseCustomDoctorModels[0] && formData.courseCustomDoctorModels[0].courseDoctorName || '').replace(/\s+/g,"").length}}/25
<span class="edit-wrapper">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息
</span>
</span>
<div v-show="needShowAuditMsg && formData.courseNameCheck" class="error">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
<span class="cancle">X</span>
</div>
</el-col>
</el-form-item>
<div class="basic-item-icon">
<el-form-item label="讲师头像：" class="valid-msg">
<el-upload
v-model="formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadListPic"
:disabled="disabled"
>
<div class="bg-img-wrapper">
<img
v-if="formData.courseCustomDoctorModels && formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl || ''"
@mouseover.stop="imgMouseOver=true"
:src="formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl"
class="bg-img-doctor"
/>
<img
v-if="!(formData.courseCustomDoctorModels && formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl || '')"
class="bg-img-doctor"
src="../../assets/image/small.png"
/>
</div>
</el-upload>
<!-- <span class="word-num">
<span class="edit-wrapper">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息
</span>
</span> -->
<!-- <div v-show="needShowAuditMsg && formData.courseNameCheck" class="error">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
<span class="cancle">X</span>
</div> -->
<!-- <div class="limit-text">尺寸：88*88，只支持jpeg格式</div> -->
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="所属机构：" class="valid-msg">
<el-col :span="18">
<el-input
size="small"
v-model="formData.courseCustomDoctorModels[0].courseDoctorHospital"
placeholder="请输入所属机构"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">
{{(formData.courseCustomDoctorModels && formData.courseCustomDoctorModels[0].courseDoctorHospital || '').replace(/\s+/g,"").length}}/25
<span class="edit-wrapper">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息
</span>
</span>
<div v-show="needShowAuditMsg && formData.courseNameCheck" class="error">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
<span class="cancle">X</span>
</div>
</el-col>
</el-form-item>
<el-form-item label="课程简介：" class="valid-msg">
<el-col :span="14">
<el-input
style="width:420px"
size="small"
type="textarea"
maxlength="200"
:autosize="{ minRows: 5}"
placeholder="请输入课程简介"
v-model="formData.courseIntro"
:disabled="disabled"
/>
<span class="word-num">
{{(formData.courseIntro || '').replace(/\s+/g,"").length}}/200
<span class="edit-wrapper">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息
</span>
</span>
<div v-show="needShowAuditMsg && formData.courseNameCheck" class="error-area">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
<span class="cancle">X</span>
</div>
</el-col>
</el-form-item>
</div>
</el-form>
</div>
<footer style="padding: 30px;padding-bottom: 50px;">
<el-button style="margin-left: 20px" @click="dialogObj.visible=true">返回列表</el-button>
<el-button style="margin-left: 100px" type="primary" @click="submitForm('formDataRef')">通 过</el-button>
<el-button type="primary" @click="submitForm('formDataRef')">拒 绝</el-button>
</footer>
</div>
<DialogComponet :dialogObj="dialogObj" @hide="hideCancleTips" @confirm="dialogObj.visible=false"></DialogComponet>
<PreviewVideo :dialogVisible="isPreviewVideo" :videoUrl="videoUrl" @close="isPreviewVideo=false"></PreviewVideo>
</div>
</template>
<script>
import PreviewVideo from "@/components/education/custom-resource/preview-video";
import PreviewProtocol from "@/components/education/custom-resource/preview-protocol";
import PreviewEditCourse from "@/components/education/custom-resource/edit-course-dialog";
import DialogComponet from "@/components/education/template/dialog";
import CropperTwo from '@/components/common/cropper.two.vue'
import { doUpload, getFilePath } from "@/utils/qiniu-util";
import { openLoading, closeLoading, getQiniuToken1 } from "@/utils/utils";
import { isEmptyUtils } from "@/utils/index";
import { mapActions } from 'vuex';
import { ossUpload, getFilePathForOSS } from "@/utils/oss/ossUtil";
import BreadCrumb from "../../components/breadcrumb.vue";
import * as commonUtil from "../../utils/utils";
let vm = null;
export default {
data() {
let checkCourseName = (rule, value, callback) => {
// 如果有审核的信息，则直接报错
if (!value && this.needCheckField) {
callback(new Error("请输入课程名称"));
} else {
callback();
}
};
return {
curmbFirst: "CME",
curmbSecond: "外部资源管理",
slide2: {
oriUrl: 'https://avatars1.githubusercontent.com/u/23690568?s=460&v=4', // 原图
preUrl: 'https://avatars1.githubusercontent.com/u/23690568?s=460&v=4' // 裁剪后的预览图片，初始化为原图
},
showCropper: false,
cropOption: {
offset_x: 30,
offset_y: 40,
width: 600,
height: 400
},
step: 1,
needCheckField: false,
needShowAuditMsg: false,
needShowUploadProcess: false,
disabled: true,
formDataBase: {
checkStatus: 0,
courseCustomChapterModels: [
{
courseCustomLectureModelList: [],
id: null,
name: "视频课程"
}
],
courseCustomDoctorModels: [
{
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
}
],
courseId: null,
courseIntro: "",
courseIntroCheck: "",
courseIntroImage:
"https://test1-file.yunqueyi.com/image/png/common/202006201528136.png",
courseIntroImageCheck: "",
courseName: "",
courseNameCheck: "",
deleteCustomLectureIds: [],
difficultyLevel: 1,
shareType: 1,
subjectIdList: []
},
formData: {
checkStatus: 0,
courseCustomChapterModels: [
{
courseCustomLectureModelList: [],
id: null,
name: "视频课程"
}
],
courseCustomDoctorModels: [
{
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
}
],
courseId: null,
courseIntro: "",
courseIntroCheck: "",
courseIntroImage:
"https://test1-file.yunqueyi.com/image/png/common/202006201528136.png",
courseIntroImageCheck: "",
courseName: "",
courseNameCheck: "",
deleteCustomLectureIds: [],
difficultyLevel: 1,
shareType: 1,
subjectIdList: []
},
uploadImgMessage: false,
imgMouseOver: false,
rules: {
courseName: [
{ required: true, message: " " },
{ validator: checkCourseName }
],
subjectIdList: [
{ required: true, message: "请输入课程名称" }
],
shareType: [
{ required: true, message: "请选择开放范围" }
]
},
labelOptions: [],
fileList: [
],
projectBanner:
"https://file.yunqueyi.com/h5/images/cme/project-banner.png",
doctorHeader: "https://file.yunqueyi.com/h5/images/cme/doctor-header.png",
doctorNameList: [
{ courseDoctorName: "333", show: true, seleted: false },
{ courseDoctorName: "334", show: true, seleted: false },
{ courseDoctorName: "335", show: true, seleted: false },
{ courseDoctorName: "336", show: true, seleted: false }
],
isShowDoctorList: false,
isPreviewVideo: false,
videoUrl: "",
orgCourseInfo: {
defaultDoctor: {
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
},
doctorModelList: [
{
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
}
],
limitModel: {
maxLimitOneVideoSize: 0,
maxLimitVideoCount: 0,
maxStorageSpace: 0,
usedStorageSpace: 0
}
},
uploadProgress: 0,
dialogObj: {
visible: false,
title: "确定取消吗？",
message: "发布后,项目将进入审核中,待审核完成后学员可在云鹊医App上参加培训学习",
tip: "",
confirmMsg: "取 消",
hideMsg: "确 定"
},
courseId: 0,
};
},
props: {
dialogVisible: {
type: Boolean,
default: false
},
// courseId: {
// type: String | Number,
// default: 0
// }
},
computed: {},
watch: {
// dialogVisible(isVisible) {
// this.formData = JSON.parse(JSON.stringify(this.formDataBase));
// if (isVisible) {
// if (this.courseId == 0) {
// this.initAdd(this.courseId);
// } else {
// this.initModify(this.courseId);
// }
// }
// },
},
components: {
BreadCrumb,
PreviewVideo,
PreviewEditCourse,
DialogComponet,
CropperTwo
},
created() {
vm = this;
this.courseId = this.$route && this.$route.query && this.$route.query.courseId || 0;
vm.initModify();
// this.initAdd();
},
mounted() {
this.getLabelList();
commonUtil.resizeHeight();
},
methods: {
...mapActions(['setKind']),
getCropImg (argument) {
console.log(argument);
this.slide2.preUrl = argument[0]
this.cropData = argument[1]
},
// 创建课程页面的初始信息
initOrgCourseInfo() {
vm.GET("contents/course/custom/info/init", { setEntry: true }).then(
res => {
if (res.code == "000000") {
this.orgCourseInfo = res.data;
this.formData.courseCustomDoctorModels[0] = this.orgCourseInfo.defaultDoctor;
this.formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl =
this.orgCourseInfo.defaultDoctor.courseDoctorAvatarUrl ||
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png";
this.doctorNameList = this.convertDNameToSelectOpt(
this.orgCourseInfo.doctorModelList
);
+this.courseId && this.getCourseInfoById(this.courseId);
}
}
);
},
// 将医生名称进行处理
convertDNameToSelectOpt(doctorModelList) {
doctorModelList.forEach(item => {
item.show = true;
item.seleted = false;
});
return doctorModelList;
},
// 添加时初始化
initAdd() {
console.log("in initAdd");
this.step = 1;
this.needShowAuditMsg = false;
this.initOrgCourseInfo();
},
initModify() {
this.needShowAuditMsg = true;
console.log("in initModify");
this.initOrgCourseInfo();
},
// 创建课程页面的初始信息
getCourseInfoById(courseId) {
vm.GET(`contents/course/custom/info/${courseId}`)
.then( res => {
if ( res.code == "000000") {
this.formData = res.data;
}
}
);
},
// 过滤医生信息
filterDoctorName(value) {
this.doctorNameList.forEach(item => {
if (value) {
if ((item.value + "").indexOf(value) == -1) {
item.show = false;
} else {
item.show = true;
}
if (item.value == value) {
item.seleted = true;
} else {
item.seleted = false;
}
} else {
item.show = true;
}
});
},
// 当选择医生的焦点失去时，要反选医生信息
doctorNameInputBlur() {
setTimeout(() => {
this.isShowDoctorList = false;
this.selectDoctorByName(
this.formData.courseCustomDoctorModels[0].courseDoctorName
);
}, 200);
},
// 根据姓名反选医生信息
// TODO 尝试找到完全匹配的医生
selectDoctorByName(name) {
},
// 选择其中一个
selectDoctor(name) {
console.log(name);
this.formData.courseCustomDoctorModels[0].courseDoctorName = name;
this.selectDoctorByName(name);
},
// 关闭当前弹框
close() {
this.$emit("close");
},
// 获取学科列表
getLabelList() {
let req = {};
this.GET("aggregate/content/labelList", req).then(res => {
if (res.code == "000000") {
this.convertLabelList(res.data);
}
});
},
// 将所有子分类中的“全部”去掉
convertLabelList(labelList) {
let newLabelList = [];
labelList.forEach(item => {
item.subList = item.subList.slice(1);
});
this.labelOptions = labelList;
},
// 上传视频（mp4）
beforeUploadVideo(file) {
console.log(file);
const isMP4 = file.type === "video/mp4";
const isLt = file.size / 1024 / 1024 / 1024 < 2;
if (!isLt) {
this.$message.error("视频不符合规范，请根据规范上传视频");
return;
}
if (!isMP4) {
this.$message.error("视频不符合规范，请根据规范上传视频");
} else {
// openLoading(vm);
this.needShowUploadProcess = true;
doUpload(
vm,
file,
getFilePath(file, null),
"preview4",
"progress",
""
).then(function(path) {
// closeLoading(vm);
console.log('vm.uploadProgress', vm.uploadProgress);
console.log(path);
let uploadResourceParam = {
formatType: path.ext,
name: path.name,
qCloudUrl : path.fullPath,
size : path.size,
fileType : 1,
status : "success",
uid : new Date().getTime()
}
vm.needShowUploadProcess = false;
vm.uploadProgress = 0;
vm.insertResourceAction(uploadResourceParam);
});
}
},
// 上传资源（视频）后，生存对应的节
insertResourceAction(uploadResourceParam) {
this.POST("contents/course/custom/info/insertResource", [uploadResourceParam]).then(res => {
if (res.code == "000000") {
let cName = res.data.resourceModelList[0].name;
cName = cName.substr(0, cName.lastIndexOf('.'));
let lectureObj = {
id: null,
name: cName,
nameCheck: "",
contentCheck: "",
resourceModel: {}
}
lectureObj.resourceModel = res.data && res.data.resourceModelList[0];
this.formData.courseCustomChapterModels[0].courseCustomLectureModelList.push(lectureObj);
}
});
},
//上传列表图片
beforeUploadListPic(file) {
return;
let fileLimit = {
width: 230,
height: 172,
size: 0.5,
sizeText: "500K",
key: "attachmentUrl",
more: "attachmentMore1",
show: "uploadImgMessage"
};
vm.beforeAvatarUpload(file, fileLimit);
},
//上传图片校验
beforeAvatarUpload2(file, fileLimit) {
console.log();
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
console.log("isJPG", isJPG, "isPNG", isPNG, "isLt2M", isLt2M);
// if (!isJPG && !isPNG) {
// vm.$message.error("图片不符合规范，请根据规范上传图片");
// return;
// }
// if (!isLt2M) {
// vm.$message.error("图片不符合规范，请根据规范上传图片 ");
// return;
// }
let _img = new FileReader();
_img.readAsDataURL(file);
console.log('readAsDataURL', _img, file);
_img.onload = function(theFile) {
let image = new Image();
image.src = theFile.target.result;
vm.slide2.oriUrl = theFile.target.result;
vm.showCropper = true;
console.log('readAsDataURL222', _img.width, file, theFile);
image.onload = function() {
console.log('image.onload', image);
let _vm = this;
if (
false
// true ||
// _vm.width != fileLimit.width ||
// _vm.height != fileLimit.height
) {
vm.$message.error("图片不符合规范，请根据规范上传图片");
} else {
// openLoading(vm);
// doUpload(
// vm,
// file,
// getFilePath(file, null),
// "preview4",
// "progress1",
// 1
// ).then(function(path) {
// closeLoading(vm);
// console.log(path);
// if (fileLimit.show == "uploadImgMessage") {
// vm.uploadImgMessage = false;
// }
// // else if (fileLimit.show == "uploadImgMessage2") {
// // vm.uploadImgMessage2 = false;
// // }
// vm.formData[fileLimit.key] = path.fullPath;
// vm.formData[fileLimit.more] = {
// attachmentName: path.name,
// attachmentExt: path.ext,
// attachmentSize: path.size
// };
// vm.$message.success("上传成功");
// });
}
};
};
return isJPG && isLt2M;
},
//上传图片校验
beforeAvatarUpload(file, fileLimit) {
console.log();
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
console.log("isJPG", isJPG, "isPNG", isPNG, "isLt2M", isLt2M);
// if (!isJPG && !isPNG) {
// vm.$message.error("图片不符合规范，请根据规范上传图片");
// return;
// }
// if (!isLt2M) {
// vm.$message.error("图片不符合规范，请根据规范上传图片 ");
// return;
// }
let _img = new FileReader();
_img.readAsDataURL(file);
_img.onload = function(theFile) {
let image = new Image();
image.src = theFile.target.result;
image.onload = function() {
let _vm = this;
if (
false
// true ||
// _vm.width != fileLimit.width ||
// _vm.height != fileLimit.height
) {
vm.$message.error("图片不符合规范，请根据规范上传图片");
} else {
openLoading(vm);
doUpload(
vm,
file,
getFilePath(file, null),
"preview4",
"progress1",
1
).then(function(path) {
closeLoading(vm);
console.log(path);
if (fileLimit.show == "uploadImgMessage") {
vm.uploadImgMessage = false;
}
// else if (fileLimit.show == "uploadImgMessage2") {
// vm.uploadImgMessage2 = false;
// }
vm.formData[fileLimit.key] = path.fullPath;
vm.formData[fileLimit.more] = {
attachmentName: path.name,
attachmentExt: path.ext,
attachmentSize: path.size
};
vm.$message.success("上传成功");
});
}
};
};
return isJPG && isLt2M;
},
// 限制选择文件个数
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 100 个文件，您已经共选择了 ${files.length + fileList.length} 个文件！`);
},
// 删除按钮
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`);
},
//表单校验
submitForm(formName) {
this.needShowAuditMsg = false;
this.$refs[formName].validate(valid => {
if (valid) {
this.insertOrUpdate();
} else {
console.log("error submit!!");
}
this.needShowAuditMsg = true;
});
},
// 添加或修改课程（kind = 3）
insertOrUpdate() {
this.POST("contents/course/custom/info/insertOrUpdate", this.formData).then(res => {
if (res.code == "000000") {
if(this.courseId == 'add') {
this.step = 2;
} else {
this.close();
this.setKind(3);
}
}
});
},
// 返回到课程选择页面（kind = 3）
backToOrgCourse() {
this.close();
this.setKind(3);
},
// 关闭（“取消”按钮弹出来的）弹框
hideCancleTips() {
this.dialogObj.visible = false;
this.close();
},
// 预览视频
previewVideoAction(lecture) {
this.videoUrl = lecture.resourceModel.filePath;
this.isPreviewVideo = true;
},
// 删除本节视频
// TODO 要将删除的节ID放在删除的节里
deleteLecture(index) {
this.formData.courseCustomChapterModels[0].courseCustomLectureModelList.splice(index, 1);
},
}
};
</script>
<style scoped lang="scss">
.edit-course-wrapper {
.course-content {
// color: red;
padding-top: 30px;
.basic-item-icon {
position: relative;
margin-top: 20px;
.require {
position: absolute;
left: 40px;
top: 11px;
color: #f56c6c;
}
.upload-message {
position: absolute;
left: 160px;
top: 105px;
font-size: 12px;
color: #f56c6c;
}
.img-delete {
position: absolute;
left: 0px;
top: 0px;
width: 84px;
height: 100px;
background: #000;
opacity: 0.7;
z-index: 999;
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
}
}
.upload-tips {
width: 100%;
position: relative;
top: -10px;
font-size: 12px;
color: #979899;
// display: inline-block;
}
.custom-list {
// width: 100%;
width: 800px;
display: flex;
flex-direction: column;
// border-radius: 3px;
// border: 1px solid rgba(228,231,237,1);
padding: 20px;
padding-top: 0px;
font-size: 12px;
color: #606266;
& > li {
margin: 10px 0;
}
.video {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.video-wapper {
height: 28px;
line-height: 28px;
.title {
display: inline-block;
width: 70px;
text-align: right;
margin-right: 10px;
}
.name {
cursor: pointer;
color: #5890DD;
}
img {
width: 12px;
height: 12px;
}
}
// .delete {
// position: relative;
// top: 4px;
// cursor: pointer;
// width: 16px;
// height: 16px;
// }
}
.video-name {
.title {
display: inline-block;
width: 70px;
text-align: right;
margin-right: 10px;
}
}
}
}
.word-num {
font-size: 12px;
color: #999;
padding-top: 5px;
}
.bg-uploader {
img {
float: left;
}
.bg-img-wrapper {
.bg-img {
display: block;
width: 160px;
height: 90px;
}
.bg-img-doctor {
display: block;
width: 88px;
height: 88px;
}
}
.bg-video {
float: left;
width: 84px;
height: 100px;
}
}
.limit-text {
position: absolute;
top: 86px;
left: 0px;
font-size: 12px;
color: #979899;
}
.separator-line {
width: 100%;
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: space-between;
.center {
cursor: pointer;
width: 130px;
color: #666666;
img {
width: 12px;
}
}
.line-left,
.line-right {
// display: inline-block;
// width: 100%;
flex: 1;
border-bottom: 1px dashed #e4e7ed;
}
}
.tips {
width: 500px;
height: 32px;
line-height: 32px;
margin-left: 38px;
padding-left: 12px;
background: rgba(254, 250, 245, 1);
border-radius: 3px;
color: #e6a23c;
}
.valid-msg {
position: relative;
.error {
width: 370px;
position: absolute;
display: flex;
justify-content: space-between;
top: 29px;
font-size: 13px;
color: #ed3131;
.text {
flex: 1;
}
.cancle {
width: 20px;
margin-left: 20px;
cursor: pointer;
}
}
.error-area {
position: absolute;
bottom: -32px;
font-size: 13px;
color: #ed3131;
.cancle {
width: 20px;
margin-left: 20px;
cursor: pointer;
}
}
.error-video {
position: absolute;
top: 64px;
left: 82px;
font-size: 13px;
color: #ed3131;
.cancle {
width: 20px;
margin-left: 20px;
cursor: pointer;
}
}
.edit-wrapper {
color: #449284;
.edit-img {
position: relative;
top: 2px;
width: 12px;
margin: 0 2px 0 4px;
}
}
.doctor-select-list {
width: 200px;
// max-height: 100px;
position: absolute;
z-index: 100;
background: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
// margin: 10px;
li {
padding-left: 20px;
cursor: pointer;
&:hover {
background: #f4f7fd;
}
&.doctor-selected {
background: #f4f7fd;
}
}
}
}
.upload-process {
margin: 10px 0 10px 10px;
display: block;
// width: 310px;
height: 4px;
background: #449284;
border-radius: 2px;
}
}
.course-content-step2 {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
.success-img {
width: 60px;
height: 60px;
}
.tips-1 {
margin-top: 30px;
font-size: 18px;
color: #303133;
}
.tips-2 {
margin-top: 4px;
margin-bottom: 40px;
font-size: 14px;
color: #999999;
}
}
}
</style>
<style scoped lang="scss">
.review-access-wrap {
.review-access {
padding: 10px;
background: #fff;
}
}
</style>
\ No newline at end of file
src/views/education/audit-custom-course copy.vue 0 → 100644
浏览文件 @ 98299d6d
<template>
<div class="edit-course-wrapper dialog-title-border">
<div class="course-content">
<el-form
ref="formDataRef"
:model="formData"
:rules="rules"
label-width="120px"
class="basic-form"
>
<el-form-item label="课程名称：" prop="courseName" class="valid-msg">
<el-col :span="20">
<el-input
size="small"
v-model="formData.courseName"
placeholder="请输入课程名称"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">
{{(formData.courseName).replace(/\s+/g,"").length}}/25
<span class="edit-wrapper"><img class="edit-img" src="../../assets/image/phrase3/icon-pin.png">修改信息</span>
</span>
<div class="error"><span>错误信息错误信息错误信息错误信息错误信息错误信息息</span><span class="cancle">X</span></div>
</el-col>
</el-form-item>
<el-form-item label="学科分类：" prop="subjectIdList" class="valid-msg">
<el-col :span="18">
<!-- :props="{ expandTrigger: 'hover' }" -->
<el-cascader
style="width: 360px"
v-model="formData.subjectIdList"
:options="labelOptions"
:props="{ value: 'id', label: 'name', children: 'subList'}"
@change="handleChange">
<!-- <template slot-scope="{ node, data }">
<span>{{ data.name }}</span>
</template> -->
</el-cascader>
</el-col>
</el-form-item>
<el-form-item label="开放范围：" prop="shareType" class="valid-msg">
<el-radio-group v-model="formData.shareType">
<el-radio :label="1">机构共享</el-radio>
</el-radio-group>
</el-form-item>
<div class="basic-item-icon">
<span class="require">*</span>
<el-form-item label="课程视频：" prop="range">
<!-- action="https://jsonplaceholder.typicode.com/posts/" -->
<!-- multiple -->
<!-- :on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove" -->
<el-upload
class="upload-demo"
action="#"
:before-upload="beforeUploadListPic"
:limit="3"
:on-exceed="handleExceed"
:show-file-list="false"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
<span >只支持MP4格式，课程视频最多上传100个，单文件最大2G</span>
<ul class="custom-list">
<li v-for="(file, index) in fileList" :key="index">
<span>{{file.name}}</span>
</li>
</ul>
</div>
</el-upload>
</el-form-item>
</div>
<div class="other-content valid-msg" v-show="isShowOtherContent">
<div class="tips">注：以下信息为非必填项，您也可以根据实际情况修改</div>
<div class="basic-item-icon">
<!-- <span class="require">*</span> -->
<el-form-item label="课程封面：">
<el-upload
v-model="formData.courseHeaderImage"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadListPic"
:disabled="disabled"
>
<div class="bg-img-wrapper">
<img v-if="formData.courseHeaderImage" @mouseover.stop="imgMouseOver=true" :src="formData.courseHeaderImage" class="bg-img">
<img v-if="!formData.courseHeaderImage" class="bg-img" src="../../assets/image/small.png">
</div>
</el-upload>
<div class="limit-text">
尺寸：750*420，只支持jpeg格式
</div>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="课程难度：">
<el-radio-group v-model="formData.difficultyLevel">
<el-radio :label="1">初级</el-radio>
<el-radio :label="2">中级</el-radio>
<el-radio :label="3">高级</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="讲师名称：" class="valid-msg">
<el-col :span="18">
<el-input
size="small"
v-model="formData.courseCustomDocterModel[0].courseDoctorName"
placeholder="请输入讲师名称"
style="width: 360px"
maxlength="25"
@focus="isShowDoctorList=true"
@input="filterDoctorName"
@blur="doctorNameInputBlur"
:disabled="disabled"
></el-input>
<ul v-show="isShowDoctorList" class="doctor-select-list">
<li
v-for="item in doctorNameList"
:key="item.value"
@click="selectDoctor(item.value)"
:class="{'doctor-selected': item.seleted}"
>
<span v-show="item.show">{{item.value}}</span>
</li>
</ul>
<span class="word-num">{{(formData.courseCustomDocterModel[0].courseDoctorName).replace(/\s+/g,"").length}}/25</span>
</el-col>
</el-form-item>
<div class="basic-item-icon">
<el-form-item label="讲师头像：">
<el-upload
v-model="formData.courseCustomDocterModel[0].courseDoctorAvatarUrl"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadListPic"
:disabled="disabled"
>
<div class="bg-img-wrapper">
<img v-if="formData.courseCustomDocterModel[0].courseDoctorAvatarUrl" @mouseover.stop="imgMouseOver=true" :src="formData.courseCustomDocterModel[0].courseDoctorAvatarUrl" class="bg-img-doctor">
<img v-if="!formData.courseCustomDocterModel[0].courseDoctorAvatarUrl" class="bg-img-doctor" src="../../assets/image/small.png">
</div>
</el-upload>
<div class="limit-text">
尺寸：88*88，只支持jpeg格式
</div>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="所属机构：">
<el-col :span="18">
<el-input
size="small"
v-model="formData.courseCustomDocterModel[0].courseDoctorHospital"
placeholder="请输入所属机构"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">{{(formData.courseCustomDocterModel[0].courseDoctorHospital).replace(/\s+/g,"").length}}/25</span>
</el-col>
</el-form-item>
<el-form-item label="课程简介：">
<el-col :span="22">
<el-input
size="small"
type="textarea"
:autosize="{ minRows: 5}"
placeholder="请输入课程简介"
v-model="formData.courseIntro"
style="width:90%;"
></el-input>
<span class="word-num">{{(formData.courseIntro).replace(/\s+/g,"").length}}/200</span>
</el-col>
</el-form-item>
</div>
<!-- 更多信息 -->
<div class="separator-line">
<span class="line-left"></span>
<div @click="toggleOtherContent" class="center">
<span>展开更多信息</span>
<img v-show="isShowOtherContent" src="../../assets/image/phrase3/arrow-up.png"/>
<img v-show="!isShowOtherContent" src="../../assets/image/phrase3/arrow-down.png"/>
</div>
<span class="line-right"></span>
</div>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="close">取 消</el-button>
<el-button type="primary" @click="submitForm('formDataRef')">确 定</el-button>
</div>
<!-- <PreviewVideo :dialogVisible="isPreviewVideo" :videoUrl="videoUrl" @close="closeVideo"></PreviewVideo> -->
<!-- <button @click="previewVideoAction">test video</button> -->
</div>
</template>
<script>
import PreviewVideo from "@/components/education/custom-resource/preview-video";
import PreviewProtocol from "@/components/education/custom-resource/preview-protocol";
import PreviewEditCourse from "@/components/education/custom-resource/edit-course-dialog";
import { doUpload, getFilePath } from "@/utils/qiniu-util";
import { openLoading, closeLoading, getQiniuToken1 } from "@/utils/utils";
let vm = null;
export default {
data() {
let checkCourseName = (rule, value, callback) => {
// 如果有审核的信息，则直接报错
// if(this.needShowAuditMsg && this.auditMsgMap.name.desc) {
// callback(new Error(this.auditMsgMap.name.desc));
// return;
// }
// if(!this.needShowAuditMsg && !value) {
// callback(new Error('请输入课程名称'));
// } else {
// callback();
// }
};
return {
needShowAuditMsg: true,
auditMsgMap: {
name: {
desc: '填写的课程名称不对'
}
},
disabled: false,
formData: {
checkStatus: 0,
courseCustomChapterModel: [{
courseCustomLectureModelList: [
{
contentCheck: '',
id: 0,
name: '',
nameCheck: '',
resourceModel: {
createdId: 0,
createdTime: '',
deleteFlag: 0,
filePath: '',
fileType: 0,
formatType: 0,
hospitalId: 0,
id: 0,
idType: 0,
lectureId: 0,
modifiedId: 0,
modifiedTime: '',
name: '',
operateKey: '',
page: 0,
resolutionRatio: '',
size: 0,
status: 0,
totalTime: 0,
type: 0,
videoType: 0
}
}
],
id: 0,
name: ''
}],
courseCustomDocterModel: [
{
courseDoctorAvatarUrl: 'https://file.yunqueyi.com/h5/images/cme/doctor-header.png',
courseDoctorHospital: '',
courseDoctorHospitalCheck: '',
courseDoctorName: '',
courseDoctorNameCheck: '',
id: 0
}
],
courseHeaderImage: 'https://file.yunqueyi.com/h5/images/cme/project-banner.png',
courseId: 0,
courseIntro: '',
courseIntroCheck: '',
courseName: '',
courseNameCheck: '',
difficultyLevel: 1,
shareType: 1,
subjectIdList: [410, 423]
},
uploadImgMessage: false,
imgMouseOver: false,
rules: {
courseName: [
{ required: true, message: "请输入课程名称"},
{ validator: checkCourseName }
],
subjectIdList: [
{ required: true, message: "请输入课程名称", trigger: "blur"},
],
shareType: [
{ required: true, message: "请选择开放范围", trigger: "blur"},
],
},
labelOptions: [],
isShowOtherContent: false,
fileList: [
{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
{name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
],
projectBanner: 'https://file.yunqueyi.com/h5/images/cme/project-banner.png',
doctorHeader: 'https://file.yunqueyi.com/h5/images/cme/doctor-header.png',
doctorNameList: [
{value: '333', show: true, seleted: false},
{value: '334', show: true, seleted: false},
{value: '335', show: true, seleted: false},
{value: '336', show: true, seleted: false},
],
isShowDoctorList: false,
isPreviewVideo: false,
videoUrl: '',
};
},
props: {
dialogVisible: {
type: Boolean,
default: false
},
addOrUpdate: {
type: String,
default: 'add'
}
},
computed: {
},
watch: {
dialogVisible(isVisible) {
if(isVisible) {
if(this.addOrUpdate == 'add') {
this.initAdd();
} else {
this.initModify();
}
}
}
},
components: {
PreviewVideo,
PreviewEditCourse
},
created() {
vm = this;
this.initAdd();
},
mounted() {
this.getLabelList();
// setTimeout(() => {
// console.log(this.$refs.formDataRef);
// this.$refs['formDataRef'].validateField("name");
// }, 2000);
},
methods: {
// 添加时初始化
initAdd() {
console.log('in initAdd');
},
initModify() {
console.log('in initModify');
},
// 过滤医生信息
filterDoctorName(value) {
this.doctorNameList.forEach( item => {
if(value) {
if((item.value + '').indexOf(value) == -1) {
item.show = false;
} else {
item.show = true;
}
if(item.value == value) {
item.seleted = true;
} else {
item.seleted = false;
}
} else {
item.show = true;
}
})
},
// 当选择医生的焦点失去时，要反选医生信息
doctorNameInputBlur() {
setTimeout(() => {
this.isShowDoctorList = false;
this.selectDoctorByName(this.formData.courseCustomDocterModel[0].courseDoctorName);
}, 200);
},
// 根据姓名反选医生信息
// TODO
selectDoctorByName(name) {
},
// 选择其中一个
selectDoctor(name) {
console.log(name)
this.formData.courseCustomDocterModel[0].courseDoctorName = name;
this.selectDoctorByName(name);
},
close() {
this.$emit('close');
},
// 获取学科列表
getLabelList() {
let req = {};
this.GET("aggregate/content/labelList", req).then(res => {
if (res.code == '000000') {
this.convertLabelList(res.data);
}
});
},
// 将所有子分类中的“全部”去掉
convertLabelList(labelList) {
let newLabelList = [];
labelList.forEach( item => {
item.subList = item.subList.slice(1);
})
this.labelOptions = labelList;
},
//上传列表图片
beforeUploadListPic(file) {
let fileLimit = {
width: 230,
height: 172,
size: 0.5,
sizeText: "500K",
key: "attachmentUrl",
more: "attachmentMore1",
show: "uploadImgMessage"
};
vm.beforeAvatarUpload(file, fileLimit);
},
//上传图片校验
beforeAvatarUpload(file, fileLimit) {
console.log();
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
console.log('isJPG', isJPG, 'isPNG', isPNG, 'isLt2M', isLt2M);
// if (!isJPG && !isPNG) {
// vm.$message.error("图片不符合规范，请根据规范上传图片");
// return;
// }
// if (!isLt2M) {
// vm.$message.error("图片不符合规范，请根据规范上传图片 ");
// return;
// }
let _img = new FileReader();
_img.readAsDataURL(file);
_img.onload = function(theFile) {
let image = new Image();
image.src = theFile.target.result;
image.onload = function() {
let _vm = this;
if (
false
// true ||
// _vm.width != fileLimit.width ||
// _vm.height != fileLimit.height
) {
vm.$message.error("图片不符合规范，请根据规范上传图片");
} else {
openLoading(vm);
doUpload(
vm,
file,
getFilePath(file, null),
"preview4",
"progress1",
1
).then(function(path) {
closeLoading(vm);
console.log(path);
if (fileLimit.show == "uploadImgMessage") {
vm.uploadImgMessage = false;
}
// else if (fileLimit.show == "uploadImgMessage2") {
// vm.uploadImgMessage2 = false;
// }
vm.formData[fileLimit.key] = path.fullPath;
vm.formData[fileLimit.more] = {
attachmentName: path.name,
attachmentExt: path.ext,
attachmentSize: path.size
};
vm.$message.success("上传成功");
});
}
};
};
return isJPG && isLt2M;
},
toggleOtherContent() {
this.isShowOtherContent = !this.isShowOtherContent;
},
// 上传文件相关
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 100 个文件，您已经共选择了 ${files.length + fileList.length} 个文件！`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
},
//表单校验
submitForm(formName) {
console.log('this.formData', this.formData);
this.needShowAuditMsg = false;
let flag = null;
this.$refs[formName].validate(valid => {
if (valid) {
//console.log("success");
flag = true;
} else {
console.log("error submit!!");
flag = false;
}
});
return flag;
},
handleChange(value) {
console.log(value);
},
}
};
</script>
<style scoped lang="scss">
.edit-course-wrapper {
.course-content {
// color: red;
.basic-item-icon {
position: relative;
margin-top: 20px;
.require {
position: absolute;
left: 40px;
top: 11px;
color: #f56c6c;
}
.upload-message {
position: absolute;
left: 160px;
top: 105px;
font-size: 12px;
color: #f56c6c;
}
.img-delete {
position: absolute;
left: 0px;
top: 0px;
width: 84px;
height: 100px;
background: #000;
opacity: 0.7;
z-index: 999;
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
}
}
}
.word-num {
font-size: 12px;
color: #999;
padding-top: 5px;
}
.bg-uploader {
img {
float: left;
}
.bg-img-wrapper {
.bg-img {
display: block;
width: 160px;
height: 90px;
}
.bg-img-doctor {
display: block;
width: 88px;
height: 88px;
}
}
.bg-video {
float: left;
width: 84px;
height: 100px;
}
}
.limit-text {
position: absolute;
top: 86px;
left: 0px;
font-size: 12px;
color: #979899;
}
.separator-line {
width: 100%;
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: space-between;
.center {
cursor: pointer;
width: 130px;
color: #666666;
img {
width: 12px;
}
}
.line-left, .line-right {
// display: inline-block;
// width: 100%;
flex: 1;
border-bottom: 1px dashed #E4E7ED;
}
}
.tips {
width: 100%;
height:32px;
line-height: 32px;
padding-left: 12px;
background:rgba(254,250,245,1);
border-radius:3px;
color: #E6A23C;
}
.valid-msg {
position: relative;
.error {
width: 370px;
position: absolute;
display: flex;
justify-content: space-between;
top: 29px;
font-size: 13px;
color: #ED3131;
.text {
flex: 1;
}
.cancle {
cursor: pointer;
width: 20px;
}
}
.edit-wrapper {
color: #449284;
.edit-img {
position: relative;
top: 2px;
width: 12px;
margin: 0 2px 0 4px;
}
}
.doctor-select-list {
width: 200px;
// max-height: 100px;
position: absolute;
z-index: 100;
background: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
// margin: 10px;
li {
padding-left: 20px;
cursor: pointer;
&:hover {
background: #f4f7fD;
}
&.doctor-selected {
background: #f4f7fD;
}
}
}
}
}
}
</style>
src/views/education/audit-custom-course.vue
浏览文件 @ 98299d6d
<template> <template>
<div class="edit-course-wrapper dialog-title-border"> <div class="review-access-wrap">
<div class="course-content"> <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<el-form <div class="edit-course-wrapper review-access screenSet" id="screenSet">
ref="formDataRef" <div class="course-content">
:model="formData" <el-form
:rules="rules" ref="formDataRef"
label-width="120px" :model="formData"
class="basic-form" :rules="rules"
> label-width="120px"
<el-form-item label="课程名称：" prop="courseName" class="valid-msg"> class="basic-form"
<el-col :span="20"> >
<el-input <el-form-item label="课程名称：" prop="courseName" class="valid-msg">
size="small" <el-col :span="20">
v-model="formData.courseName"
placeholder="请输入课程名称"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">
{{(formData.courseName).replace(/\s+/g,"").length}}/25
<span class="edit-wrapper"><img class="edit-img" src="../../assets/image/phrase3/icon-pin.png">修改信息</span>
</span>
<div class="error"><span>错误信息错误信息错误信息错误信息错误信息错误信息息</span><span class="cancle">X</span></div>
</el-col>
</el-form-item>
<el-form-item label="学科分类：" prop="subjectIdList" class="valid-msg">
<el-col :span="18">
<!-- :props="{ expandTrigger: 'hover' }" -->
<el-cascader
style="width: 360px"
v-model="formData.subjectIdList"
:options="labelOptions"
:props="{ value: 'id', label: 'name', children: 'subList'}"
@change="handleChange">
<!-- <template slot-scope="{ node, data }">
<span>{{ data.name }}</span>
</template> -->
</el-cascader>
</el-col>
</el-form-item>
<el-form-item label="开放范围：" prop="shareType" class="valid-msg">
<el-radio-group v-model="formData.shareType">
<el-radio :label="1">机构共享</el-radio>
</el-radio-group>
</el-form-item>
<div class="basic-item-icon">
<span class="require">*</span>
<el-form-item label="课程视频：" prop="range">
<!-- action="https://jsonplaceholder.typicode.com/posts/" -->
<!-- multiple -->
<!-- :on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove" -->
<el-upload
class="upload-demo"
action="#"
:before-upload="beforeUploadListPic"
:limit="3"
:on-exceed="handleExceed"
:show-file-list="false"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
<span >只支持MP4格式，课程视频最多上传100个，单文件最大2G</span>
<ul class="custom-list">
<li v-for="(file, index) in fileList" :key="index">
<span>{{file.name}}</span>
</li>
</ul>
</div>
</el-upload>
</el-form-item>
</div>
<div class="other-content valid-msg" v-show="isShowOtherContent">
<div class="tips">注：以下信息为非必填项，您也可以根据实际情况修改</div>
<div class="basic-item-icon">
<!-- <span class="require">*</span> -->
<el-form-item label="课程封面：">
<el-upload
v-model="formData.courseHeaderImage"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadListPic"
:disabled="disabled"
>
<div class="bg-img-wrapper">
<img v-if="formData.courseHeaderImage" @mouseover.stop="imgMouseOver=true" :src="formData.courseHeaderImage" class="bg-img">
<img v-if="!formData.courseHeaderImage" class="bg-img" src="../../assets/image/small.png">
</div>
</el-upload>
<div class="limit-text">
尺寸：750*420，只支持jpeg格式
</div>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="课程难度：">
<el-radio-group v-model="formData.difficultyLevel">
<el-radio :label="1">初级</el-radio>
<el-radio :label="2">中级</el-radio>
<el-radio :label="3">高级</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="讲师名称：" class="valid-msg">
<el-col :span="18">
<el-input <el-input
size="small" size="small"
v-model="formData.courseCustomDocterModel[0].courseDoctorName" v-model="formData.courseName"
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"> <span class="word-num">
<li {{(formData.courseName || '').replace(/\s+/g,"").length}}/25
v-for="item in doctorNameList" <span class="edit-wrapper">
:key="item.value" <img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息
@click="selectDoctor(item.value)" </span>
:class="{'doctor-selected': item.seleted}" </span>
> <div v-show="needShowAuditMsg && formData.courseNameCheck" class="error">
<span v-show="item.show">{{item.value}}</span> <span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
</li> <span class="cancle">X</span>
</ul> </div>
<span class="word-num">{{(formData.courseCustomDocterModel[0].courseDoctorName).replace(/\s+/g,"").length}}/25</span>
</el-col> </el-col>
</el-form-item> </el-form-item>
<div class="basic-item-icon"> <el-form-item label="学科分类：" prop="subjectIdList" class="valid-msg">
<el-form-item label="讲师头像：">
<el-upload
v-model="formData.courseCustomDocterModel[0].courseDoctorAvatarUrl"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadListPic"
:disabled="disabled"
>
<div class="bg-img-wrapper">
<img v-if="formData.courseCustomDocterModel[0].courseDoctorAvatarUrl" @mouseover.stop="imgMouseOver=true" :src="formData.courseCustomDocterModel[0].courseDoctorAvatarUrl" class="bg-img-doctor">
<img v-if="!formData.courseCustomDocterModel[0].courseDoctorAvatarUrl" class="bg-img-doctor" src="../../assets/image/small.png">
</div>
</el-upload>
<div class="limit-text">
尺寸：88*88，只支持jpeg格式
</div>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="所属机构：">
<el-col :span="18"> <el-col :span="18">
<el-input <!-- :props="{ expandTrigger: 'hover' }" -->
size="small" <el-cascader
v-model="formData.courseCustomDocterModel[0].courseDoctorHospital"
placeholder="请输入所属机构"
style="width: 360px" style="width: 360px"
maxlength="25" v-model="formData.subjectIdList"
:options="labelOptions"
:props="{ value: 'id', label: 'name', children: 'subList'}"
:disabled="disabled" :disabled="disabled"
></el-input> >
<span class="word-num">{{(formData.courseCustomDocterModel[0].courseDoctorHospital).replace(/\s+/g,"").length}}/25</span> </el-cascader>
</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-col>
</el-form-item> </el-form-item>
</div>
<el-form-item label="开放范围：" prop="shareType" class="valid-msg">
<!-- 更多信息 --> <el-radio-group v-model="formData.shareType">
<div class="separator-line"> <el-radio :label="1">机构共享</el-radio>
<span class="line-left"></span> </el-radio-group>
<div @click="toggleOtherContent" class="center"> </el-form-item>
<span>展开更多信息</span>
<img v-show="isShowOtherContent" src="../../assets/image/phrase3/arrow-up.png"/> <div class="basic-item-icon">
<img v-show="!isShowOtherContent" src="../../assets/image/phrase3/arrow-down.png"/> <ul v-show="formData.courseCustomChapterModels[0].courseCustomLectureModelList.length" class="custom-list">
<li v-for="(lecture, index) in formData.courseCustomChapterModels[0].courseCustomLectureModelList" :key="index" class="valid-msg">
<ul class="video">
<li class="video-wapper">
<span class="title">视频{{index + 1}}</span>
<img src="../../assets/image/phrase3/icon-pin.png" />
<span class="name" @click="previewVideoAction(lecture)">{{lecture.resourceModel.name}}</span>
</li>
<!-- <li>
<img @click="deleteLecture(index)" class="delete" src="../../assets/image/phrase3/close.png" />
</li> -->
</ul>
<div class="video-name">
<span class="title">
<span >*</span>
<span class="video-title">视频名称</span>
</span>
<el-input
size="small"
v-model="lecture.name"
placeholder="请输入课程名称"
style="width: 380px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">
{{(lecture.name || '').replace(/\s+/g,"").length}}/25
<span class="edit-wrapper">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息
</span>
</span>
<div v-show="needShowAuditMsg && formData.courseNameCheck" class="error-video">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
<span class="cancle">X</span>
</div>
</div>
</li>
<span v-show="needShowUploadProcess" class="upload-process" :style="{'width': (uploadProgress/100 * 340) + 'px'}"></span>
</ul>
</div> </div>
<span class="line-right"></span>
</div>
</el-form> <div class="other-content valid-msg">
<div class="tips">注：以下信息为非必填项，您也可以根据实际情况修改</div>
<div class="basic-item-icon">
<!-- <span class="require">*</span> -->
<el-form-item label="课程封面：">
<el-upload
v-model="formData.courseIntroImage"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadListPic"
:disabled="disabled"
>
<div class="bg-img-wrapper">
<img
v-if="formData.courseIntroImage"
@mouseover.stop="imgMouseOver=true"
:src="formData.courseIntroImage"
class="bg-img"
/>
<img
v-if="!formData.courseIntroImage"
class="bg-img"
src="../../assets/image/small.png"
/>
</div>
</el-upload>
<div class="limit-text">尺寸：750*420，只支持jpeg格式</div>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="课程难度：">
<el-radio-group v-model="formData.difficultyLevel" :disabled="disabled">
<el-radio :label="1">初级</el-radio>
<el-radio :label="2">中级</el-radio>
<el-radio :label="3">高级</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="讲师名称：" class="valid-msg">
<el-col :span="18">
<el-input
size="small"
v-model="formData.courseCustomDoctorModels[0].courseDoctorName"
placeholder="请输入讲师名称"
style="width: 360px"
maxlength="25"
@focus="isShowDoctorList=true"
@input="filterDoctorName"
@blur="doctorNameInputBlur"
:disabled="disabled"
></el-input>
<ul v-show="isShowDoctorList" class="doctor-select-list">
<li
v-for="(item, index) in doctorNameList"
:key="index"
@click="selectDoctor(item.courseDoctorName, index)"
:class="{'doctor-selected': item.seleted}"
>
<span v-show="item.show">{{item.courseDoctorName || '测试名'}}</span>
</li>
</ul>
<span class="word-num">
{{(formData.courseCustomDoctorModels[0] && formData.courseCustomDoctorModels[0].courseDoctorName || '').replace(/\s+/g,"").length}}/25
<span class="edit-wrapper">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息
</span>
</span>
<div v-show="needShowAuditMsg && formData.courseNameCheck" class="error">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
<span class="cancle">X</span>
</div>
</el-col>
</el-form-item>
<div class="basic-item-icon">
<el-form-item label="讲师头像：" class="valid-msg">
<el-upload
v-model="formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadListPic"
:disabled="disabled"
>
<div class="bg-img-wrapper">
<img
v-if="formData.courseCustomDoctorModels && formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl || ''"
@mouseover.stop="imgMouseOver=true"
:src="formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl"
class="bg-img-doctor"
/>
<img
v-if="!(formData.courseCustomDoctorModels && formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl || '')"
class="bg-img-doctor"
src="../../assets/image/small.png"
/>
</div>
</el-upload>
<!-- <span class="word-num">
<span class="edit-wrapper">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息
</span>
</span> -->
<!-- <div v-show="needShowAuditMsg && formData.courseNameCheck" class="error">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
<span class="cancle">X</span>
</div> -->
<!-- <div class="limit-text">尺寸：88*88，只支持jpeg格式</div> -->
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="所属机构：" class="valid-msg">
<el-col :span="18">
<el-input
size="small"
v-model="formData.courseCustomDoctorModels[0].courseDoctorHospital"
placeholder="请输入所属机构"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">
{{(formData.courseCustomDoctorModels && formData.courseCustomDoctorModels[0].courseDoctorHospital || '').replace(/\s+/g,"").length}}/25
<span class="edit-wrapper">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息
</span>
</span>
<div v-show="needShowAuditMsg && formData.courseNameCheck" class="error">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
<span class="cancle">X</span>
</div>
</el-col>
</el-form-item>
<el-form-item label="课程简介：" class="valid-msg">
<el-col :span="14">
<el-input
style="width:420px"
size="small"
type="textarea"
maxlength="200"
:autosize="{ minRows: 5}"
placeholder="请输入课程简介"
v-model="formData.courseIntro"
:disabled="disabled"
/>
<span class="word-num">
{{(formData.courseIntro || '').replace(/\s+/g,"").length}}/200
<span class="edit-wrapper">
<img class="edit-img" src="../../assets/image/phrase3/icon-pz.png" />修改信息
</span>
</span>
<div v-show="needShowAuditMsg && formData.courseNameCheck" class="error-area">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
<span class="cancle">X</span>
</div>
</el-col>
</el-form-item>
</div>
</el-form>
</div>
<footer style="padding: 30px;padding-bottom: 50px;">
<el-button style="margin-left: 20px" @click="dialogObj.visible=true">返回列表</el-button>
<el-button style="margin-left: 100px" type="primary" @click="submitForm('formDataRef')">通 过</el-button>
<el-button type="primary" @click="submitForm('formDataRef')">拒 绝</el-button>
</footer>
</div> </div>
<div slot="footer" class="dialog-footer"> <DialogComponet :dialogObj="dialogObj" @hide="hideCancleTips" @confirm="dialogObj.visible=false"></DialogComponet>
<el-button @click="close">取 消</el-button> <PreviewVideo :dialogVisible="isPreviewVideo" :videoUrl="videoUrl" @close="isPreviewVideo=false"></PreviewVideo>
<el-button type="primary" @click="submitForm('formDataRef')">确 定</el-button>
</div>
<!-- <PreviewVideo :dialogVisible="isPreviewVideo" :videoUrl="videoUrl" @close="closeVideo"></PreviewVideo> -->
<!-- <button @click="previewVideoAction">test video</button> -->
</div> </div>
</template> </template>
<script> <script>
import PreviewVideo from "@/components/education/custom-resource/preview-video"; import PreviewVideo from "@/components/education/custom-resource/preview-video";
import PreviewProtocol from "@/components/education/custom-resource/preview-protocol"; import PreviewProtocol from "@/components/education/custom-resource/preview-protocol";
import PreviewEditCourse from "@/components/education/custom-resource/edit-course-dialog"; import PreviewEditCourse from "@/components/education/custom-resource/edit-course-dialog";
import DialogComponet from "@/components/education/template/dialog";
import CropperTwo from '@/components/common/cropper.two.vue'
import { doUpload, getFilePath } from "@/utils/qiniu-util"; import { doUpload, getFilePath } from "@/utils/qiniu-util";
import { openLoading, closeLoading, getQiniuToken1 } from "@/utils/utils"; import { openLoading, closeLoading, getQiniuToken1 } from "@/utils/utils";
import { isEmptyUtils } from "@/utils/index";
import { mapActions } from 'vuex';
import { ossUpload, getFilePathForOSS } from "@/utils/oss/ossUtil";
import BreadCrumb from "../../components/breadcrumb.vue";
import * as commonUtil from "../../utils/utils";
let vm = null; let vm = null;
export default { export default {
data() { data() {
let checkCourseName = (rule, value, callback) => { let checkCourseName = (rule, value, callback) => {
// 如果有审核的信息，则直接报错 // 如果有审核的信息，则直接报错
// if(this.needShowAuditMsg && this.auditMsgMap.name.desc) { if (!value && this.needCheckField) {
// callback(new Error(this.auditMsgMap.name.desc)); callback(new Error("请输入课程名称"));
// return; } else {
// } callback();
// if(!this.needShowAuditMsg && !value) { }
// callback(new Error('请输入课程名称'));
// } else {
// callback();
// }
}; };
return { return {
needShowAuditMsg: true, curmbFirst: "CME",
auditMsgMap: { curmbSecond: "外部资源管理",
name: { slide2: {
desc: '填写的课程名称不对' oriUrl: 'https://avatars1.githubusercontent.com/u/23690568?s=460&v=4', // 原图
} preUrl: 'https://avatars1.githubusercontent.com/u/23690568?s=460&v=4' // 裁剪后的预览图片，初始化为原图
},
showCropper: false,
cropOption: {
offset_x: 30,
offset_y: 40,
width: 600,
height: 400
},
step: 1,
needCheckField: false,
needShowAuditMsg: false,
needShowUploadProcess: false,
disabled: true,
formDataBase: {
checkStatus: 0,
courseCustomChapterModels: [
{
courseCustomLectureModelList: [],
id: null,
name: "视频课程"
}
],
courseCustomDoctorModels: [
{
courseDoctorAvatarUrl:
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseDoctorAvatarUrlCheck: "",
courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
}
],
courseId: null,
courseIntro: "",
courseIntroCheck: "",
courseIntroImage:
"https://test1-file.yunqueyi.com/image/png/common/202006201528136.png",
courseIntroImageCheck: "",
courseName: "",
courseNameCheck: "",
deleteCustomLectureIds: [],
difficultyLevel: 1,
shareType: 1,
subjectIdList: []
}, },
disabled: false,
formData: { formData: {
checkStatus: 0, checkStatus: 0,
courseCustomChapterModel: [{ 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: '',
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', courseCustomLectureModelList: [],
courseDoctorHospital: '', id: null,
courseDoctorHospitalCheck: '', name: "视频课程"
courseDoctorName: '',
courseDoctorNameCheck: '',
id: 0
} }
], ],
courseHeaderImage: 'https://file.yunqueyi.com/h5/images/cme/project-banner.png', courseCustomDoctorModels: [
courseId: 0, {
courseIntro: '', courseDoctorAvatarUrl:
courseIntroCheck: '', "https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png",
courseName: '', courseDoctorAvatarUrlCheck: "",
courseNameCheck: '', courseDoctorHospital: "",
courseDoctorHospitalCheck: "",
courseDoctorName: "",
courseDoctorNameCheck: "",
id: null
}
],
courseId: null,
courseIntro: "",
courseIntroCheck: "",
courseIntroImage:
"https://test1-file.yunqueyi.com/image/png/common/202006201528136.png",
courseIntroImageCheck: "",
courseName: "",
courseNameCheck: "",
deleteCustomLectureIds: [],
difficultyLevel: 1, difficultyLevel: 1,
shareType: 1, shareType: 1,
subjectIdList: [410, 423] subjectIdList: []
}, },
uploadImgMessage: false, uploadImgMessage: false,
imgMouseOver: false, imgMouseOver: false,
rules: { rules: {
courseName: [ courseName: [
{ required: true, message: "请输入课程名称"}, { required: true, message: " " },
{ validator: checkCourseName } { validator: checkCourseName }
], ],
subjectIdList: [ subjectIdList: [
{ required: true, message: "请输入课程名称", trigger: "blur"}, { required: true, message: "请输入课程名称" }
], ],
shareType: [ shareType: [
{ required: true, message: "请选择开放范围", trigger: "blur"}, { required: true, message: "请选择开放范围" }
], ]
}, },
labelOptions: [], labelOptions: [],
isShowOtherContent: false,
fileList: [ 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', projectBanner:
doctorHeader: 'https://file.yunqueyi.com/h5/images/cme/doctor-header.png', "https://file.yunqueyi.com/h5/images/cme/project-banner.png",
doctorHeader: "https://file.yunqueyi.com/h5/images/cme/doctor-header.png",
doctorNameList: [ doctorNameList: [
{value: '333', show: true, seleted: false}, { courseDoctorName: "333", show: true, seleted: false },
{value: '334', show: true, seleted: false}, { courseDoctorName: "334", show: true, seleted: false },
{value: '335', show: true, seleted: false}, { courseDoctorName: "335", show: true, seleted: false },
{value: '336', show: true, seleted: false}, { courseDoctorName: "336", show: true, seleted: false }
], ],
isShowDoctorList: false, isShowDoctorList: false,
isPreviewVideo: 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,
dialogObj: {
visible: false,
title: "确定取消吗？",
message: "发布后,项目将进入审核中,待审核完成后学员可在云鹊医App上参加培训学习",
tip: "",
confirmMsg: "取 消",
hideMsg: "确 定"
},
courseId: 0,
}; };
}, },
props: { props: {
...@@ -334,61 +458,113 @@ export default { ...@@ -334,61 +458,113 @@ export default {
type: Boolean, type: Boolean,
default: false default: false
}, },
addOrUpdate: { // courseId: {
type: String, // type: String | Number,
default: 'add' // default: 0
} // }
},
computed: {
}, },
computed: {},
watch: { watch: {
dialogVisible(isVisible) { // dialogVisible(isVisible) {
if(isVisible) { // this.formData = JSON.parse(JSON.stringify(this.formDataBase));
if(this.addOrUpdate == 'add') { // if (isVisible) {
this.initAdd(); // if (this.courseId == 0) {
} else { // this.initAdd(this.courseId);
this.initModify(); // } else {
} // this.initModify(this.courseId);
} // }
} // }
// },
}, },
components: { components: {
BreadCrumb,
PreviewVideo, PreviewVideo,
PreviewEditCourse PreviewEditCourse,
DialogComponet,
CropperTwo
}, },
created() { created() {
vm = this; vm = this;
this.initAdd(); this.courseId = this.$route && this.$route.query && this.$route.query.courseId || 0;
vm.initModify();
// this.initAdd();
}, },
mounted() { mounted() {
this.getLabelList(); this.getLabelList();
// setTimeout(() => { commonUtil.resizeHeight();
// console.log(this.$refs.formDataRef);
// this.$refs['formDataRef'].validateField("name");
// }, 2000);
}, },
methods: { methods: {
...mapActions(['setKind']),
getCropImg (argument) {
console.log(argument);
this.slide2.preUrl = argument[0]
this.cropData = argument[1]
},
// 创建课程页面的初始信息
initOrgCourseInfo() {
vm.GET("contents/course/custom/info/init", { setEntry: true }).then(
res => {
if (res.code == "000000") {
this.orgCourseInfo = res.data;
this.formData.courseCustomDoctorModels[0] = this.orgCourseInfo.defaultDoctor;
this.formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl =
this.orgCourseInfo.defaultDoctor.courseDoctorAvatarUrl ||
"https://test1-file.yunqueyi.com/image/png/common/2020062015265063.png";
this.doctorNameList = this.convertDNameToSelectOpt(
this.orgCourseInfo.doctorModelList
);
+this.courseId && this.getCourseInfoById(this.courseId);
}
}
);
},
// 将医生名称进行处理
convertDNameToSelectOpt(doctorModelList) {
doctorModelList.forEach(item => {
item.show = true;
item.seleted = false;
});
return doctorModelList;
},
// 添加时初始化 // 添加时初始化
initAdd() { initAdd() {
console.log('in initAdd'); console.log("in initAdd");
this.step = 1;
this.needShowAuditMsg = false;
this.initOrgCourseInfo();
}, },
initModify() { initModify() {
console.log('in initModify'); this.needShowAuditMsg = true;
console.log("in initModify");
this.initOrgCourseInfo();
},
// 创建课程页面的初始信息
getCourseInfoById(courseId) {
vm.GET(`contents/course/custom/info/${courseId}`)
.then( res => {
if ( res.code == "000000") {
this.formData = res.data;
}
}
);
}, },
// 过滤医生信息 // 过滤医生信息
filterDoctorName(value) { filterDoctorName(value) {
this.doctorNameList.forEach( item => { this.doctorNameList.forEach(item => {
if(value) { if (value) {
if((item.value + '').indexOf(value) == -1) { if ((item.value + "").indexOf(value) == -1) {
item.show = false; item.show = false;
} else { } else {
item.show = true; item.show = true;
} }
if(item.value == value) { if (item.value == value) {
item.seleted = true; item.seleted = true;
} else { } else {
item.seleted = false; item.seleted = false;
...@@ -396,39 +572,42 @@ export default { ...@@ -396,39 +572,42 @@ export default {
} else { } else {
item.show = true; item.show = true;
} }
}) });
}, },
// 当选择医生的焦点失去时，要反选医生信息 // 当选择医生的焦点失去时，要反选医生信息
doctorNameInputBlur() { doctorNameInputBlur() {
setTimeout(() => { setTimeout(() => {
this.isShowDoctorList = false; this.isShowDoctorList = false;
this.selectDoctorByName(this.formData.courseCustomDocterModel[0].courseDoctorName); this.selectDoctorByName(
this.formData.courseCustomDoctorModels[0].courseDoctorName
);
}, 200); }, 200);
}, },
// 根据姓名反选医生信息 // 根据姓名反选医生信息
// TODO // TODO 尝试找到完全匹配的医生
selectDoctorByName(name) { selectDoctorByName(name) {
}, },
// 选择其中一个 // 选择其中一个
selectDoctor(name) { selectDoctor(name) {
console.log(name) console.log(name);
this.formData.courseCustomDocterModel[0].courseDoctorName = name; this.formData.courseCustomDoctorModels[0].courseDoctorName = name;
this.selectDoctorByName(name); this.selectDoctorByName(name);
}, },
// 关闭当前弹框
close() { close() {
this.$emit('close'); this.$emit("close");
}, },
// 获取学科列表 // 获取学科列表
getLabelList() { getLabelList() {
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") {
this.convertLabelList(res.data); this.convertLabelList(res.data);
} }
}); });
...@@ -437,14 +616,76 @@ export default { ...@@ -437,14 +616,76 @@ export default {
// 将所有子分类中的“全部”去掉 // 将所有子分类中的“全部”去掉
convertLabelList(labelList) { convertLabelList(labelList) {
let newLabelList = []; let newLabelList = [];
labelList.forEach( item => { labelList.forEach(item => {
item.subList = item.subList.slice(1); item.subList = item.subList.slice(1);
}) });
this.labelOptions = labelList; this.labelOptions = labelList;
}, },
// 上传视频（mp4）
beforeUploadVideo(file) {
console.log(file);
const isMP4 = file.type === "video/mp4";
const isLt = file.size / 1024 / 1024 / 1024 < 2;
if (!isLt) {
this.$message.error("视频不符合规范，请根据规范上传视频");
return;
}
if (!isMP4) {
this.$message.error("视频不符合规范，请根据规范上传视频");
} else {
// openLoading(vm);
this.needShowUploadProcess = true;
doUpload(
vm,
file,
getFilePath(file, null),
"preview4",
"progress",
""
).then(function(path) {
// closeLoading(vm);
console.log('vm.uploadProgress', vm.uploadProgress);
console.log(path);
let uploadResourceParam = {
formatType: path.ext,
name: path.name,
qCloudUrl : path.fullPath,
size : path.size,
fileType : 1,
status : "success",
uid : new Date().getTime()
}
vm.needShowUploadProcess = false;
vm.uploadProgress = 0;
vm.insertResourceAction(uploadResourceParam);
});
}
},
// 上传资源（视频）后，生存对应的节
insertResourceAction(uploadResourceParam) {
this.POST("contents/course/custom/info/insertResource", [uploadResourceParam]).then(res => {
if (res.code == "000000") {
let cName = res.data.resourceModelList[0].name;
cName = cName.substr(0, cName.lastIndexOf('.'));
let lectureObj = {
id: null,
name: cName,
nameCheck: "",
contentCheck: "",
resourceModel: {}
}
lectureObj.resourceModel = res.data && res.data.resourceModelList[0];
this.formData.courseCustomChapterModels[0].courseCustomLectureModelList.push(lectureObj);
}
});
},
//上传列表图片 //上传列表图片
beforeUploadListPic(file) { beforeUploadListPic(file) {
return;
let fileLimit = { let fileLimit = {
width: 230, width: 230,
height: 172, height: 172,
...@@ -457,13 +698,80 @@ export default { ...@@ -457,13 +698,80 @@ export default {
vm.beforeAvatarUpload(file, fileLimit); vm.beforeAvatarUpload(file, fileLimit);
}, },
//上传图片校验
beforeAvatarUpload2(file, fileLimit) {
console.log();
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
console.log("isJPG", isJPG, "isPNG", isPNG, "isLt2M", isLt2M);
// if (!isJPG && !isPNG) {
// vm.$message.error("图片不符合规范，请根据规范上传图片");
// return;
// }
// if (!isLt2M) {
// vm.$message.error("图片不符合规范，请根据规范上传图片 ");
// return;
// }
let _img = new FileReader();
_img.readAsDataURL(file);
console.log('readAsDataURL', _img, file);
_img.onload = function(theFile) {
let image = new Image();
image.src = theFile.target.result;
vm.slide2.oriUrl = theFile.target.result;
vm.showCropper = true;
console.log('readAsDataURL222', _img.width, file, theFile);
image.onload = function() {
console.log('image.onload', image);
let _vm = this;
if (
false
// true ||
// _vm.width != fileLimit.width ||
// _vm.height != fileLimit.height
) {
vm.$message.error("图片不符合规范，请根据规范上传图片");
} else {
// openLoading(vm);
// doUpload(
// vm,
// file,
// getFilePath(file, null),
// "preview4",
// "progress1",
// 1
// ).then(function(path) {
// closeLoading(vm);
// console.log(path);
// if (fileLimit.show == "uploadImgMessage") {
// vm.uploadImgMessage = false;
// }
// // else if (fileLimit.show == "uploadImgMessage2") {
// // vm.uploadImgMessage2 = false;
// // }
// vm.formData[fileLimit.key] = path.fullPath;
// vm.formData[fileLimit.more] = {
// attachmentName: path.name,
// attachmentExt: path.ext,
// attachmentSize: path.size
// };
// vm.$message.success("上传成功");
// });
}
};
};
return isJPG && isLt2M;
},
//上传图片校验 //上传图片校验
beforeAvatarUpload(file, fileLimit) { beforeAvatarUpload(file, fileLimit) {
console.log(); console.log();
const isJPG = file.type === "image/jpeg"; const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png"; const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < fileLimit.size; 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) { // if (!isJPG && !isPNG) {
// vm.$message.error("图片不符合规范，请根据规范上传图片"); // vm.$message.error("图片不符合规范，请根据规范上传图片");
// return; // return;
...@@ -500,7 +808,7 @@ export default { ...@@ -500,7 +808,7 @@ export default {
console.log(path); console.log(path);
if (fileLimit.show == "uploadImgMessage") { if (fileLimit.show == "uploadImgMessage") {
vm.uploadImgMessage = false; vm.uploadImgMessage = false;
} }
// else if (fileLimit.show == "uploadImgMessage2") { // else if (fileLimit.show == "uploadImgMessage2") {
// vm.uploadImgMessage2 = false; // vm.uploadImgMessage2 = false;
// } // }
...@@ -518,196 +826,351 @@ export default { ...@@ -518,196 +826,351 @@ export default {
return isJPG && isLt2M; return isJPG && isLt2M;
}, },
toggleOtherContent() { // 限制选择文件个数
this.isShowOtherContent = !this.isShowOtherContent;
},
// 上传文件相关
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) { handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 100 个文件，您已经共选择了 ${files.length + fileList.length} 个文件！`); this.$message.warning(`当前限制选择 100 个文件，您已经共选择了 ${files.length + fileList.length} 个文件！`);
}, },
// 删除按钮
beforeRemove(file, fileList) { beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`); return this.$confirm(`确定移除 ${file.name}？`);
}, },
//表单校验 //表单校验
submitForm(formName) { submitForm(formName) {
console.log('this.formData', this.formData);
this.needShowAuditMsg = false; this.needShowAuditMsg = false;
let flag = null;
this.$refs[formName].validate(valid => { this.$refs[formName].validate(valid => {
if (valid) { if (valid) {
//console.log("success"); this.insertOrUpdate();
flag = true;
} else { } else {
console.log("error submit!!"); console.log("error submit!!");
flag = false;
} }
this.needShowAuditMsg = true;
}); });
return flag;
}, },
handleChange(value) {
console.log(value); // 添加或修改课程（kind = 3）
insertOrUpdate() {
this.POST("contents/course/custom/info/insertOrUpdate", this.formData).then(res => {
if (res.code == "000000") {
if(this.courseId == 'add') {
this.step = 2;
} else {
this.close();
this.setKind(3);
}
}
});
},
// 返回到课程选择页面（kind = 3）
backToOrgCourse() {
this.close();
this.setKind(3);
},
// 关闭（“取消”按钮弹出来的）弹框
hideCancleTips() {
this.dialogObj.visible = false;
this.close();
},
// 预览视频
previewVideoAction(lecture) {
this.videoUrl = lecture.resourceModel.filePath;
this.isPreviewVideo = true;
},
// 删除本节视频
// TODO 要将删除的节ID放在删除的节里
deleteLecture(index) {
this.formData.courseCustomChapterModels[0].courseCustomLectureModelList.splice(index, 1);
}, },
} }
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.edit-course-wrapper { .edit-course-wrapper {
.course-content { .course-content {
// color: red; // color: red;
.basic-item-icon { padding-top: 30px;
.basic-item-icon {
position: relative;
margin-top: 20px;
.require {
position: absolute;
left: 40px;
top: 11px;
color: #f56c6c;
}
.upload-message {
position: absolute;
left: 160px;
top: 105px;
font-size: 12px;
color: #f56c6c;
}
.img-delete {
position: absolute;
left: 0px;
top: 0px;
width: 84px;
height: 100px;
background: #000;
opacity: 0.7;
z-index: 999;
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
}
}
.upload-tips {
width: 100%;
position: relative; position: relative;
margin-top: 20px; top: -10px;
.require { font-size: 12px;
position: absolute; color: #979899;
left: 40px; // display: inline-block;
top: 11px; }
color: #f56c6c; .custom-list {
// width: 100%;
width: 800px;
display: flex;
flex-direction: column;
// border-radius: 3px;
// border: 1px solid rgba(228,231,237,1);
padding: 20px;
padding-top: 0px;
font-size: 12px;
color: #606266;
& > li {
margin: 10px 0;
} }
.upload-message { .video {
position: absolute; display: flex;
left: 160px; flex-direction: row;
top: 105px; justify-content: space-between;
font-size: 12px; align-items: center;
color: #f56c6c; .video-wapper {
height: 28px;
line-height: 28px;
.title {
display: inline-block;
width: 70px;
text-align: right;
margin-right: 10px;
}
.name {
cursor: pointer;
color: #5890DD;
}
img {
width: 12px;
height: 12px;
}
}
// .delete {
// position: relative;
// top: 4px;
// cursor: pointer;
// width: 16px;
// height: 16px;
// }
} }
.img-delete { .video-name {
position: absolute; .title {
left: 0px; display: inline-block;
top: 0px; width: 70px;
width: 84px; text-align: right;
height: 100px; margin-right: 10px;
background: #000;
opacity: 0.7;
z-index: 999;
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
} }
} }
} }
.word-num { }
font-size: 12px; .word-num {
color: #999; font-size: 12px;
padding-top: 5px; color: #999;
padding-top: 5px;
}
.bg-uploader {
img {
float: left;
} }
.bg-uploader { .bg-img-wrapper {
img { .bg-img {
float: left; display: block;
width: 160px;
height: 90px;
} }
.bg-img-wrapper { .bg-img-doctor {
.bg-img { display: block;
display: block; width: 88px;
width: 160px; height: 88px;
height: 90px;
}
.bg-img-doctor {
display: block;
width: 88px;
height: 88px;
}
} }
.bg-video { }
float: left; .bg-video {
width: 84px; float: left;
height: 100px; 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;
} }
} }
.limit-text { .line-left,
.line-right {
// display: inline-block;
// width: 100%;
flex: 1;
border-bottom: 1px dashed #e4e7ed;
}
}
.tips {
width: 500px;
height: 32px;
line-height: 32px;
margin-left: 38px;
padding-left: 12px;
background: rgba(254, 250, 245, 1);
border-radius: 3px;
color: #e6a23c;
}
.valid-msg {
position: relative;
.error {
width: 370px;
position: absolute; position: absolute;
top: 86px;
left: 0px;
font-size: 12px;
color: #979899;
}
.separator-line {
width: 100%;
display: flex; display: flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: space-between; justify-content: space-between;
.center { top: 29px;
font-size: 13px;
color: #ed3131;
.text {
flex: 1;
}
.cancle {
width: 20px;
margin-left: 20px;
cursor: pointer; cursor: pointer;
width: 130px;
color: #666666;
img {
width: 12px;
}
} }
.line-left, .line-right { }
// display: inline-block; .error-area {
// width: 100%; position: absolute;
flex: 1; bottom: -32px;
border-bottom: 1px dashed #E4E7ED; font-size: 13px;
color: #ed3131;
.cancle {
width: 20px;
margin-left: 20px;
cursor: pointer;
} }
} }
.tips { .error-video {
width: 100%; position: absolute;
height:32px; top: 64px;
line-height: 32px; left: 82px;
padding-left: 12px; font-size: 13px;
background:rgba(254,250,245,1); color: #ed3131;
border-radius:3px; .cancle {
color: #E6A23C; width: 20px;
margin-left: 20px;
cursor: pointer;
}
} }
.valid-msg { .edit-wrapper {
position: relative; color: #449284;
.error { .edit-img {
width: 370px; position: relative;
position: absolute; top: 2px;
display: flex; width: 12px;
justify-content: space-between; margin: 0 2px 0 4px;
top: 29px;
font-size: 13px;
color: #ED3131;
.text {
flex: 1;
}
.cancle {
cursor: pointer;
width: 20px;
}
} }
.edit-wrapper { }
color: #449284; .doctor-select-list {
.edit-img { width: 200px;
position: relative; // max-height: 100px;
top: 2px; position: absolute;
width: 12px; z-index: 100;
margin: 0 2px 0 4px; 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 {
.doctor-select-list { background: #f4f7fd;
width: 200px;
// max-height: 100px;
position: absolute;
z-index: 100;
background: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
// margin: 10px;
li {
padding-left: 20px;
cursor: pointer;
&:hover {
background: #f4f7fD;
}
&.doctor-selected {
background: #f4f7fD;
}
} }
} }
} }
} }
.upload-process {
margin: 10px 0 10px 10px;
display: block;
// width: 310px;
height: 4px;
background: #449284;
border-radius: 2px;
}
} }
.course-content-step2 {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
.success-img {
width: 60px;
height: 60px;
}
.tips-1 {
margin-top: 30px;
font-size: 18px;
color: #303133;
}
.tips-2 {
margin-top: 4px;
margin-bottom: 40px;
font-size: 14px;
color: #999999;
}
}
}
</style> </style>
<style scoped lang="scss">
.review-access-wrap {
.review-access {
padding: 10px;
background: #fff;
}
}
</style>
\ No newline at end of file
src/views/education/edit-custom.vue
浏览文件 @ 98299d6d
...@@ -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 @showOrgCourse="showOrgCourse"></SelectCourseComp> <SelectCourseComp @showOrgCourse="showOrgCourse" :activeName="kind"></SelectCourseComp>
</div> </div>
<!-- 填写项目信息--> <!-- 填写项目信息-->
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
<dialog-componet :dialogObj="sendObj" @hide="hidefn" @confirm="confirmFn"></dialog-componet> <dialog-componet :dialogObj="sendObj" @hide="hidefn" @confirm="confirmFn"></dialog-componet>
<PreviewEditCourse <PreviewEditCourse
:dialogVisible="isPreviewEditCourse" :dialogVisible="isPreviewEditCourse"
:addOrUpdate="addOrUpdate" :courseId="courseId"
@close="closeEditCourse" @close="closeEditCourse"
/> />
<PreviewProtocol <PreviewProtocol
...@@ -172,11 +172,12 @@ export default { ...@@ -172,11 +172,12 @@ export default {
allSubList: [], allSubList: [],
isPreviewEditCourse: false, isPreviewEditCourse: false,
addOrUpdate: 'add', courseId: '0',
isPreviewProtocol: false, isPreviewProtocol: false,
protocolId: 5, protocolId: 5,
protocolContent: '', protocolContent: '',
isFirst: true, // 是否是第一次（不做更新）
}; };
}, },
computed: { computed: {
...@@ -185,8 +186,12 @@ export default { ...@@ -185,8 +186,12 @@ export default {
watch: { watch: {
kind(newKind) { kind(newKind) {
let searchParam = newKind == 0 ? this.searchParam : this.searchParamOrg; let searchParam = newKind == 0 ? this.searchParam : this.searchParamOrg;
this.setKind(newKind); if(newKind <= 1) {
this.getCourseList(searchParam); this.getCourseList(searchParam);
} else {
newKind = newKind == 0 ? 0 : 1; // 将大于1的情况也置为1
this.setKind(newKind);
}
}, },
searchParam: { searchParam: {
handler(val) { handler(val) {
...@@ -196,7 +201,10 @@ export default { ...@@ -196,7 +201,10 @@ export default {
}, },
searchParamOrg: { searchParamOrg: {
handler(val) { handler(val) {
this.getCourseList(val); if(!this.isFirst) {
this.isFirst = false
this.getCourseList(val);
}
}, },
deep: true deep: true
}, },
...@@ -592,9 +600,9 @@ export default { ...@@ -592,9 +600,9 @@ export default {
如果已经加入机构，1：没有同意过协议，则打开协议弹框；2：已经加入，时直接打开添加弹框 如果已经加入机构，1：没有同意过协议，则打开协议弹框；2：已经加入，时直接打开添加弹框
如果没有加入机构，则直接弹出提示（我知道了） 如果没有加入机构，则直接弹出提示（我知道了）
*/ */
showOrgCourse(addOrUpdate) { showOrgCourse(courseId) {
this.checkHospital(); this.checkHospital();
this.addOrUpdate = addOrUpdate this.courseId = courseId
}, },
// 创建机构课程前校验机构 // 创建机构课程前校验机构
......
src/views/education/external-resource-manage copy 4.vue 0 → 100644
浏览文件 @ 98299d6d
<template>
<div class="review-access-wrap">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<div class="review-access screenSet" id="screenSet">
<div class="header-title">外部资源管理</div>
<el-form ref="form" :model="searchForm" label-width="100px" class="search-form-wrap">
<el-row>
<el-form-item label="课程名称：" class="search-item" >
<el-input v-model="searchForm.courseName" size="small" class="form-width" placeholder="请输入课程名称"></el-input>
</el-form-item>
<el-form-item label="状态：" class="search-item">
<el-select v-model="searchForm.checkStatus" placeholder="请选择" size="small" class="form-width">
<el-option v-for="(item, index) in checkStatusList" :key="index" :label="item.name" :value="item.value"></el-option>
</el-select>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="创建人：" class="search-item" >
<el-input v-model="searchForm.createdDoctorName" size="small" class="form-width" placeholder="请输入创建人"></el-input>
</el-form-item>
<el-form-item label="创建日期：" class="search-item">
<el-date-picker
v-model="searchForm.createdTime"
type="date"
size="small"
class="form-width"
value-format="yyyy-MM-dd"
placeholder="请选择创建日期">
</el-date-picker>
<!-- <span style="color: #DCDFE6;">～</span>
<el-date-picker
v-model="searchForm.endTime"
type="datetime"
size="small"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择结束时间">
</el-date-picker> -->
</el-form-item>
<el-form-item class="btn-list">
<el-button @click="search()" type="primary" size="small">查询</el-button>
<el-button @click="reset" size="small">重置</el-button>
</el-form-item>
</el-row>
</el-form>
<el-table :data="tableList" border style="width: 100%">
<el-table-column align="center" prop="courseName" label="课程名称"></el-table-column>
<el-table-column align="center" prop="subjectName" label="课程分类" ></el-table-column>
<el-table-column align="center" prop="createdDoctorName" label="创建人" ></el-table-column>
<el-table-column align="center" prop="createdHospitalName" label="所属机构" ></el-table-column>
<el-table-column align="center" prop="createdTime" label="创建日期" ></el-table-column>
<el-table-column align="center" prop="checkStatus" label="审核状态" ></el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button @click="viewOrAudit(scope.row)" type="text" size="small"><span style="color: #449284;">查看</span></el-button>
</template>
</el-table-column>
<div slot="empty">
<div class="table-empty">
<img src="../../assets/image/no-content1.png">
<p>没有查询到外部资源</p>
</div>
</div>
</el-table>
<div class="pagination">
<el-pagination
class="pagination-style"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:total="totalRows"
:current-page="searchForm.pageNo"
:page-sizes="[15, 30, 50, 100]"
:page-size="searchForm.pageSize"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
</div>
<!-- 拒绝原因 -->
<el-dialog
title="拒绝原因"
@close="hideAuditForm"
:visible.sync="addEditVisible"
:close-on-click-modal="false"
width="600px"
center>
<el-form ref="auditForm" :model="auditForm" label-width="120px">
<el-form-item label="拒绝原因：">
<el-radio-group v-model="auditForm.auditRadio">
<div style="padding-top: 12px;">
<el-radio label="含有政治类、医疗健康、社会事件类不实信息" value="1"></el-radio>
</div>
<div style="padding-top: 16px;">
<el-radio label="含有欺诈，色情，诱导、违法犯罪非法字符" value="2"></el-radio>
</div>
<div style="padding-top: 16px;">
<el-radio label="其他" value="3"></el-radio>
</div>
</el-radio-group>
<el-input type="textarea" v-model="auditForm.desc" maxlength="25" style="width: 310px;margin-top: 10px;"></el-input>
<span class="word-num">{{(auditForm.desc).replace(/\s+/g,"").length}}/25</span>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="hideAuditForm">取 消</el-button>
<el-button type="primary" @click="auditAction()">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { openLoading, closeLoading } from "../../utils/utils";
import BreadCrumb from "../../components/breadcrumb.vue";
import * as commonUtil from "../../utils/utils";
import {
handleDeleteReq,
} from '@/utils/cme/cmeApi'
export default {
data() {
return {
curmbFirst: "CME",
curmbSecond: "外部资源管理",
totalRows: 0,
addEditVisible: false,
isAdd: true, // 新增或编辑状态：新增 true; 编辑 false
deleteVisible: false,
currentRow: null, // 当前行数据
searchForm: {
courseName: '',
checkStatus: -1,
createdDoctorName: '',
createdTime: '',
// createdHospitalName: '',
// subjectName: '',
pageNo: 1,
pageSize: 15,
},
auditForm: {
auditRadio: '',
desc: '',
},
checkStatusList: [
{
name: '全部状态',
value: -1
},{
name: '待审核',
value: 0
},{
name: '通过',
value: 1
},{
name: '拒绝',
value: 2
}
],
tableList: [],
}
},
components: {
BreadCrumb,
},
created() {
this.search();
},
mounted() {
commonUtil.resizeHeight();
},
methods: {
// 查询列表
search() {
let searchForm = Object.assign({}, this.searchForm);
let createdTime = searchForm.createdTime;
if(createdTime) {
searchForm.createdTime = new Date(searchForm.createdTime).getTime();
} else {
searchForm.createdTime = '';
}
this.GET("contents/course/custom/check/v1/list", searchForm).then(res => {
if (res.code == "000000") {
this.tableList = res.data && res.data.courseList || [];
this.totalRows = res.data.totalSize || 0;
// this.protocolInfo = res.data;
}
});
},
// 重置
reset() {
this.searchForm = {
courseName: '',
checkStatus: -1,
createdDoctorName: '',
createdTime: '',
// createdHospitalName: '',
// subjectName: '',
pageNo: 1,
pageSize: 15,
};
},
// 查看 每种查看的方式不一样
viewOrAudit(row) {
console.log(row);
this.$router.push({
path: 'audit-custom-course',
query: {
courseId: row.courseId
}
})
},
auditAction() {
console.log(row);
},
// 重置
resetForm(formName) {
this.$refs[formName].resetFields();
},
hideAuditForm() {
this.addEditVisible = false;
this.resetForm('auditForm');
this.auditForm = {
auditRadio: '',
desc: '',
};
},
handleSizeChange(val){
this.searchForm.pageSize = val;
this.search();
},
// 切换当前页
handleCurrentChange(val){
this.searchForm.pageNo = val;
this.search();
},
},
}
</script>
<style lang="scss">
.review-access-wrap{
.review-access{
padding: 10px;
background: #fff;
.el-button--small{
font-size: 14px;
}
.header-title {
padding: 10px 12px 20px;
font-size: 14px;
color: #606266;
border-bottom: 1px solid #efefef;
}
.search-form-wrap{
padding: 25px 0 20px;
overflow: hidden;
// border-bottom: 1px dashed #efefef;
}
.search-item{
float: left;
}
.btn-list{
float: right;
.el-form-item__content{
margin-left: 0 !important;
}
}
.new-add{
float: right;
margin: 10px 0 20px;
}
.table-empty {
img {
width: 100px;
}
p {
margin-top: -50px;
}
}
}
}
</style>
\ No newline at end of file
src/views/education/external-resource-manage.vue
浏览文件 @ 98299d6d
...@@ -49,7 +49,11 @@ ...@@ -49,7 +49,11 @@
<el-table-column align="center" prop="createdDoctorName" label="创建人" ></el-table-column> <el-table-column align="center" prop="createdDoctorName" label="创建人" ></el-table-column>
<el-table-column align="center" prop="createdHospitalName" label="所属机构" ></el-table-column> <el-table-column align="center" prop="createdHospitalName" label="所属机构" ></el-table-column>
<el-table-column align="center" prop="createdTime" label="创建日期" ></el-table-column> <el-table-column align="center" prop="createdTime" label="创建日期" ></el-table-column>
<el-table-column align="center" prop="checkStatus" label="审核状态" ></el-table-column> <el-table-column align="center" prop="checkStatus" label="审核状态" >
<template slot-scope="scope">
<span v-html="getHtmlCheckStatus(scope.row.checkStatus)"></span>
</template>
</el-table-column>
<el-table-column align="center" label="操作"> <el-table-column align="center" label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button @click="viewOrAudit(scope.row)" type="text" size="small"><span style="color: #449284;">查看</span></el-button> <el-button @click="viewOrAudit(scope.row)" type="text" size="small"><span style="color: #449284;">查看</span></el-button>
...@@ -174,6 +178,18 @@ ...@@ -174,6 +178,18 @@
}, },
methods: { methods: {
getHtmlCheckStatus(checkStatus) {
if(checkStatus == 0) {
return `<span style="color:#666666;">待审核</span>`;
} else if(checkStatus == 1) {
return `<span style="color:#D0021B;">拒绝</span>`;
} else if(checkStatus == 2) {
return `<span style="color:#417505;">通过</span>`;
} else {
return ''
}
},
// 查询列表 // 查询列表
search() { search() {
let searchForm = Object.assign({}, this.searchForm); let searchForm = Object.assign({}, this.searchForm);
......
src/views/layout/footer.vue
浏览文件 @ 98299d6d
...@@ -22,6 +22,7 @@ export default { ...@@ -22,6 +22,7 @@ export default {
} }
img { img {
width: 12px; width: 12px;
height: 12px;
padding-right: 5px; padding-right: 5px;
} }
} }
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或