Skip to content

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

三期部分页面

上级 559652f6
隐藏空白字符变更
内嵌 并排
正在显示 包含 2795 行增加 和 218 行删除
src/components/education/custom-resource/edit-course-dialog copy.vue 0 → 100644
浏览文件 @ 7a1f8841
<template>
<div class="edit-course-wrapper dialog-title-border">
<el-dialog ref="testDialogRef"
title="上传课程"
:visible="dialogVisible"
@close="close"
center
:close-on-click-modal="false"
:close-on-press-escape="false"
width="800px"
>
<div slot="title" style="text-align: left;">
<span style="font-weight: 700;">上传课程</span>
<span style="font-size: 12px;color: #999;">请认真核对上传内容，一旦提交后将不能修改</span>
</div>
<div class="course-content">
<el-form
ref="formDataRef"
:model="formData"
:rules="rules"
label-width="120px"
class="basic-form"
>
<el-form-item label="课程名称：" prop="courseName">
<el-col :span="18">
<el-input
size="small"
v-model="formData.courseName"
placeholder="请输入课程名称"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">{{(formData.courseName).replace(/\s+/g,"").length}}/25</span>
</el-col>
</el-form-item>
<el-form-item label="学科分类：" prop="subjectId">
<el-col :span="18">
<!-- :props="{ expandTrigger: 'hover' }" -->
<el-cascader
style="width: 360px"
v-model="formData.subjectIdList"
:options="labelOptions"
:props="{ value: 'id', label: 'name', children: 'subList'}"
@change="handleChange">
<!-- <template slot-scope="{ node, data }">
<span>{{ data.name }}</span>
</template> -->
</el-cascader>
</el-col>
</el-form-item>
<el-form-item label="开放范围：" prop="shareType">
<el-radio-group v-model="formData.shareType">
<el-radio :label="1">机构共享</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="课程视频：" prop="range">
<!-- action="https://jsonplaceholder.typicode.com/posts/" -->
<el-upload
class="upload-demo"
action="https://sc.yunqueyi.com/contents/admin/qiniu/token1"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="100"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</el-form-item>
<div class="other-content" v-show="isShowOtherContent" >
<div class="tips">注：以下信息为非必填项，您也可以根据实际情况修改</div>
<div class="basic-item-icon">
<!-- <span class="require">*</span> -->
<el-form-item label="课程封面：">
<el-upload
v-model="formData.courseHeaderImage"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadListPic"
:disabled="disabled"
>
<div class="bg-img-wrapper">
<img v-if="formData.courseHeaderImage" @mouseover.stop="imgMouseOver=true" :src="formData.courseHeaderImage" class="bg-img">
<img v-if="!formData.courseHeaderImage" class="bg-img" src="../../../assets/image/small.png">
</div>
<!-- <div class="img-delete" v-show="imgMouseOver && !disabled" @click.stop="deleteImg(1)" @mouseout.stop="imgMouseOver=false"><i class="el-icon-delete"></i></div> -->
</el-upload>
<div class="limit-text">
尺寸：750*420，只支持jpeg格式
</div>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="课程难度：">
<el-radio-group v-model="formData.difficultyLevel">
<el-radio :label="1">初级</el-radio>
<el-radio :label="2">中级</el-radio>
<el-radio :label="3">高级</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="讲师名称：">
<el-col :span="18">
<el-input
size="small"
v-model="formData.courseCustomDocterModel[0].courseDoctorName"
placeholder="请输入讲师名称"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">{{(formData.courseCustomDocterModel[0].courseDoctorName).replace(/\s+/g,"").length}}/25</span>
</el-col>
</el-form-item>
<div class="basic-item-icon">
<el-form-item label="讲师头像：">
<el-upload
v-model="formData.courseCustomDocterModel[0].courseDoctorAvatarUrl"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadListPic"
:disabled="disabled"
>
<div class="bg-img-wrapper">
<img v-if="formData.courseCustomDocterModel[0].courseDoctorAvatarUrl" @mouseover.stop="imgMouseOver=true" :src="formData.courseCustomDocterModel[0].courseDoctorAvatarUrl" class="bg-img-doctor">
<img v-if="!formData.courseCustomDocterModel[0].courseDoctorAvatarUrl" class="bg-img-doctor" src="../../../assets/image/small.png">
</div>
<!-- <div class="img-delete" v-show="imgMouseOver && !disabled" @click.stop="deleteImg(1)" @mouseout.stop="imgMouseOver=false"><i class="el-icon-delete"></i></div> -->
</el-upload>
<div class="limit-text">
尺寸：88*88，只支持jpeg格式
</div>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="所属机构：">
<el-col :span="18">
<el-input
size="small"
v-model="formData.courseCustomDocterModel[0].courseDoctorHospital"
placeholder="请输入所属机构"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">{{(formData.courseCustomDocterModel[0].courseDoctorHospital).replace(/\s+/g,"").length}}/25</span>
</el-col>
</el-form-item>
<el-form-item label="课程简介：">
<el-col :span="22">
<el-input
size="small"
type="textarea"
:autosize="{ minRows: 5}"
placeholder="请输入课程简介"
v-model="formData.courseIntro"
style="width:90%;"
></el-input>
<span class="word-num">{{(formData.courseIntro).replace(/\s+/g,"").length}}/200</span>
</el-col>
</el-form-item>
</div>
<!-- 更多信息 -->
<div class="separator-line">
<span class="line-left"></span>
<div @click="toggleOtherContent" class="center">
<span>展开更多信息</span>
<img v-show="isShowOtherContent" src="../../../assets/image/phrase3/arrow-up.png"/>
<img v-show="!isShowOtherContent" src="../../../assets/image/phrase3/arrow-down.png"/>
</div>
<span class="line-right"></span>
</div>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="close">取 消</el-button>
<el-button type="primary" @click="submitForm('formDataRef')">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { doUpload, getFilePath } from "@/utils/qiniu-util";
import { openLoading, closeLoading, getQiniuToken1 } from "@/utils/utils";
let vm = null;
export default {
data() {
let checkCourseName = (rule, value, callback) => {
// 如果有审核的信息，则直接报错
if(this.needShowAuditMsg && this.auditMsgMap.name.desc) {
callback(new Error(this.auditMsgMap.name.desc));
return;
}
if(!this.needShowAuditMsg && !value) {
callback(new Error('请输入课程名称'));
} else {
callback();
}
};
return {
needShowAuditMsg: true,
auditMsgMap: {
name: {
desc: '填写的课程名称不对'
}
},
disabled: false,
formData: {
checkStatus: 0,
courseCustomChapterModel: [{
courseCustomLectureModelList: [
{
contentCheck: '',
id: 0,
name: '',
nameCheck: '',
resourceModel: {
createdId: 0,
createdTime: '',
deleteFlag: 0,
filePath: '',
fileType: 0,
formatType: 0,
hospitalId: 0,
id: 0,
idType: 0,
lectureId: 0,
modifiedId: 0,
modifiedTime: '',
name: '',
operateKey: '',
page: 0,
resolutionRatio: '',
size: 0,
status: 0,
totalTime: 0,
type: 0,
videoType: 0
}
}
],
id: 0,
name: ''
}],
courseCustomDocterModel: [
{
courseDoctorAvatarUrl: 'https://file.yunqueyi.com/h5/images/cme/doctor-header.png',
courseDoctorHospital: '',
courseDoctorHospitalCheck: '',
courseDoctorName: '',
courseDoctorNameCheck: '',
id: 0
}
],
courseHeaderImage: 'https://file.yunqueyi.com/h5/images/cme/project-banner.png',
courseId: 0,
courseIntro: '',
courseIntroCheck: '',
courseName: '',
courseNameCheck: '',
difficultyLevel: 1,
shareType: 1,
subjectIdList: [
0
]
},
uploadImgMessage: false,
imgMouseOver: false,
rules: {
name: [
{ required: true, message: "请输入课程名称"},
{ validator: checkCourseName }
],
subjectId: [
{ required: true, message: "请输入课程名称", trigger: "blur"},
],
range: [
{ required: true, message: "请选择开放范围", trigger: "blur"},
],
},
labelOptions: [],
isShowOtherContent: false,
fileList: [
{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
{name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
],
projectBanner: 'https://file.yunqueyi.com/h5/images/cme/project-banner.png',
doctorHeader: 'https://file.yunqueyi.com/h5/images/cme/doctor-header.png',
};
},
props: {
dialogVisible: {
type: Boolean,
default: false
}
},
computed: {
},
created() {
vm = this;
},
mounted() {
this.getLabelList();
// setTimeout(() => {
// console.log(this.$refs.formDataRef);
// this.$refs['formDataRef'].validateField("name");
// }, 2000);
},
methods: {
close() {
this.$emit('close');
},
// 获取学科列表
getLabelList() {
let req = {};
this.GET("aggregate/content/labelList", req).then(res => {
if (res.code == '000000') {
// TODO
this.convertLabelList(res.data);
// this.labelOptions = res.data;
}
});
},
// 将所有子分类中的“全部”去掉
convertLabelList(labelList) {
let newLabelList = [];
labelList.forEach( item => {
item.subList = item.subList.slice(1);
})
this.labelOptions = labelList;
},
//上传列表图片
beforeUploadListPic(file) {
let fileLimit = {
width: 230,
height: 172,
size: 0.5,
sizeText: "500K",
key: "attachmentUrl",
more: "attachmentMore1",
show: "uploadImgMessage"
};
vm.beforeAvatarUpload(file, fileLimit);
},
//上传图片校验
beforeAvatarUpload(file, fileLimit) {
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
console.log('isJPG', isJPG, 'isPNG', isPNG, 'isLt2M', isLt2M);
if (!isJPG && !isPNG) {
vm.$message.error("图片不符合规范，请根据规范上传图片");
return;
}
if (!isLt2M) {
vm.$message.error("图片不符合规范，请根据规范上传图片 ");
return;
}
let _img = new FileReader();
_img.readAsDataURL(file);
_img.onload = function(theFile) {
let image = new Image();
image.src = theFile.target.result;
image.onload = function() {
let _vm = this;
if (
false
// true ||
// _vm.width != fileLimit.width ||
// _vm.height != fileLimit.height
) {
vm.$message.error("图片不符合规范，请根据规范上传图片");
} else {
openLoading(vm);
doUpload(
vm,
file,
getFilePath(file, null),
"preview4",
"progress1",
1
).then(function(path) {
closeLoading(vm);
console.log(path);
if (fileLimit.show == "uploadImgMessage") {
vm.uploadImgMessage = false;
}
// else if (fileLimit.show == "uploadImgMessage2") {
// vm.uploadImgMessage2 = false;
// }
vm.formData[fileLimit.key] = path.fullPath;
vm.formData[fileLimit.more] = {
attachmentName: path.name,
attachmentExt: path.ext,
attachmentSize: path.size
};
vm.$message.success("上传成功");
});
}
};
};
return isJPG && isLt2M;
},
// 删除图片
deleteImg(type) {
if (type == 1) {
vm.formData.attachmentUrl = "";
vm.imgMouseOver = false;
} else {
// vm.formData.attachmentUrl2 = "";
// vm.imgMouseOver2 = false;
}
},
toggleOtherContent() {
this.isShowOtherContent = !this.isShowOtherContent;
},
// 上传文件相关
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
},
//表单校验
submitForm(formName) {
console.log('this.formData', this.formData);
this.needShowAuditMsg = false;
let flag = null;
this.$refs[formName].validate(valid => {
if (valid) {
//console.log("success");
flag = true;
} else {
console.log("error submit!!");
flag = false;
}
});
return flag;
},
handleChange(value) {
console.log(value);
},
}
};
</script>
<style scoped lang="scss">
.edit-course-wrapper {
.course-content {
// color: red;
.basic-item-icon {
position: relative;
margin-top: 20px;
.require {
position: absolute;
left: 40px;
top: 11px;
color: #f56c6c;
}
.upload-message {
position: absolute;
left: 160px;
top: 105px;
font-size: 12px;
color: #f56c6c;
}
.img-delete {
position: absolute;
left: 0px;
top: 0px;
width: 84px;
height: 100px;
background: #000;
opacity: 0.7;
z-index: 999;
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
}
}
}
.word-num {
font-size: 12px;
color: #999;
padding-top: 5px;
}
.bg-uploader {
img {
float: left;
}
.bg-img-wrapper {
.bg-img {
display: block;
width: 160px;
height: 90px;
}
.bg-img-doctor {
display: block;
width: 88px;
height: 88px;
}
}
.bg-video {
float: left;
width: 84px;
height: 100px;
}
}
.limit-text {
position: absolute;
top: 86px;
left: 0px;
font-size: 12px;
color: #979899;
}
.separator-line {
width: 100%;
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: space-between;
.center {
cursor: pointer;
width: 130px;
color: #666666;
img {
width: 12px;
}
}
.line-left, .line-right {
// display: inline-block;
// width: 100%;
flex: 1;
border-bottom: 1px dashed #E4E7ED;
}
}
.tips {
width: 100%;
height:32px;
line-height: 32px;
padding-left: 12px;
background:rgba(254,250,245,1);
border-radius:3px;
color: #E6A23C;
}
}
}
</style>
src/components/education/custom-resource/edit-course-dialog.vue
浏览文件 @ 7a1f8841
......@@ -21,17 +21,17 @@
label-width="120px"
class="basic-form"
>
<el-form-item label="课程名称：" prop="name">
<el-form-item label="课程名称：" prop="courseName">
<el-col :span="18">
<el-input
size="small"
v-model="formData.name"
v-model="formData.courseName"
placeholder="请输入课程名称"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">{{(formData.name).replace(/\s+/g,"").length}}/25</span>
<span class="word-num">{{(formData.courseName).replace(/\s+/g,"").length}}/25</span>
</el-col>
</el-form-item>
......@@ -40,7 +40,7 @@
<!-- :props="{ expandTrigger: 'hover' }" -->
<el-cascader
style="width: 360px"
v-model="formData.subjectId"
v-model="formData.subjectIdList"
:options="labelOptions"
:props="{ value: 'id', label: 'name', children: 'subList'}"
@change="handleChange">
......@@ -52,8 +52,8 @@
</el-form-item>
<el-form-item label="开放范围：" prop="range">
<el-radio-group v-model="formData.range">
<el-form-item label="开放范围：" prop="shareType">
<el-radio-group v-model="formData.shareType">
<el-radio :label="1">机构共享</el-radio>
</el-radio-group>
</el-form-item>
......@@ -82,7 +82,7 @@
<!-- <span class="require">*</span> -->
<el-form-item label="课程封面：">
<el-upload
v-model="formData.attachmentUrl"
v-model="formData.courseHeaderImage"
class="bg-uploader"
action="#"
:show-file-list="false"
......@@ -90,10 +90,10 @@
:disabled="disabled"
>
<div class="bg-img-wrapper">
<img v-if="formData.attachmentUrl" @mouseover.stop="imgMouseOver=true" :src="formData.attachmentUrl" class="bg-img">
<img v-if="!formData.attachmentUrl" class="bg-img" src="../../../assets/image/small.png">
<img v-if="formData.courseHeaderImage" @mouseover.stop="imgMouseOver=true" :src="formData.courseHeaderImage" class="bg-img">
<img v-if="!formData.courseHeaderImage" class="bg-img" src="../../../assets/image/small.png">
</div>
<div class="img-delete" v-show="imgMouseOver && !disabled" @click.stop="deleteImg(1)" @mouseout.stop="imgMouseOver=false"><i class="el-icon-delete"></i></div>
<!-- <div class="img-delete" v-show="imgMouseOver && !disabled" @click.stop="deleteImg(1)" @mouseout.stop="imgMouseOver=false"><i class="el-icon-delete"></i></div> -->
</el-upload>
<div class="limit-text">
尺寸：750*420，只支持jpeg格式
......@@ -103,7 +103,7 @@
</div>
<el-form-item label="课程难度：">
<el-radio-group v-model="formData.range">
<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>
......@@ -113,33 +113,20 @@
<el-col :span="18">
<el-input
size="small"
v-model="formData.lectureName"
v-model="formData.courseCustomDocterModel[0].courseDoctorName"
placeholder="请输入讲师名称"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">{{(formData.name).replace(/\s+/g,"").length}}/25</span>
<span class="word-num">{{(formData.courseCustomDocterModel[0].courseDoctorName).replace(/\s+/g,"").length}}/25</span>
</el-col>
</el-form-item>
<el-form-item label="所属机构：">
<el-col :span="18">
<el-input
size="small"
v-model="formData.lectureName"
placeholder="请输入所属机构"
style="width: 360px"
maxlength="25"
:disabled="disabled"
></el-input>
<span class="word-num">{{(formData.name).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.attachmentUrl"
v-model="formData.courseCustomDocterModel[0].courseDoctorAvatarUrl"
class="bg-uploader"
action="#"
:show-file-list="false"
......@@ -147,17 +134,30 @@
:disabled="disabled"
>
<div class="bg-img-wrapper">
<img v-if="formData.attachmentUrl" @mouseover.stop="imgMouseOver=true" :src="formData.attachmentUrl" class="bg-img">
<img v-if="!formData.attachmentUrl" class="bg-img" src="../../../assets/image/small.png">
<img v-if="formData.courseCustomDocterModel[0].courseDoctorAvatarUrl" @mouseover.stop="imgMouseOver=true" :src="formData.courseCustomDocterModel[0].courseDoctorAvatarUrl" class="bg-img-doctor">
<img v-if="!formData.courseCustomDocterModel[0].courseDoctorAvatarUrl" class="bg-img-doctor" src="../../../assets/image/small.png">
</div>
<div class="img-delete" v-show="imgMouseOver && !disabled" @click.stop="deleteImg(1)" @mouseout.stop="imgMouseOver=false"><i class="el-icon-delete"></i></div>
<!-- <div class="img-delete" v-show="imgMouseOver && !disabled" @click.stop="deleteImg(1)" @mouseout.stop="imgMouseOver=false"><i class="el-icon-delete"></i></div> -->
</el-upload>
<div class="limit-text">
尺寸：80*80，只支持jpeg格式
尺寸：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
......@@ -173,16 +173,17 @@
</el-form-item>
</div>
<!-- 更多信息 -->
<div class="separator-line">
<span class="line-left"></span>
<div @click="toggleOtherContent" class="center">
<span>展开更多信息</span>
<img src="../../../assets/image/plus.png"/>
<img v-show="isShowOtherContent" src="../../../assets/image/phrase3/arrow-up.png"/>
<img v-show="!isShowOtherContent" src="../../../assets/image/phrase3/arrow-down.png"/>
</div>
<span class="line-right"></span>
</div>
</el-form>
</div>
......@@ -220,20 +221,70 @@ export default {
},
disabled: false,
formData: {
name: '',
subjectId: '',
range: 1,
attachmentUrl: '',
courseIntro: ''
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: {
name: [
courseName: [
{ required: true, message: "请输入课程名称"},
{ validator: checkCourseName }
],
subjectId: [
subjectIdList: [
{ required: true, message: "请输入课程名称", trigger: "blur"},
],
range: [
......@@ -245,7 +296,9 @@ export default {
fileList: [
{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
{name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
]
],
projectBanner: 'https://file.yunqueyi.com/h5/images/cme/project-banner.png',
doctorHeader: 'https://file.yunqueyi.com/h5/images/cme/doctor-header.png',
};
},
props: {
......@@ -262,12 +315,14 @@ export default {
},
mounted() {
this.getLabelList();
setTimeout(() => {
console.log(this.$refs.formDataRef);
this.$refs['formDataRef'].validateField("name");
}, 2000);
// setTimeout(() => {
// console.log(this.$refs.formDataRef);
// this.$refs['formDataRef'].validateField("name");
// }, 2000);
},
methods: {
close() {
this.$emit('close');
},
......@@ -468,6 +523,11 @@ export default {
width: 160px;
height: 90px;
}
.bg-img-doctor {
display: block;
width: 88px;
height: 88px;
}
}
.bg-video {
float: left;
......@@ -477,8 +537,8 @@ export default {
}
.limit-text {
position: absolute;
top: 80px;
left: 10px;
top: 86px;
left: 0px;
font-size: 12px;
color: #979899;
}
......@@ -490,6 +550,7 @@ export default {
align-items: center;
justify-content: space-between;
.center {
cursor: pointer;
width: 130px;
color: #666666;
img {
......
src/components/education/custom-resource/preview-protocol.vue
浏览文件 @ 7a1f8841
<template>
<el-dialog
title="预览协议"
:visible="dialogVisible"
@close="close"
center
:close-on-click-modal="false"
:close-on-press-escape="false"
width="800px"
>
<div v-html="protocolInfo.contents"></div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="close">确 定</el-button>
</div>
</el-dialog>
<div class="preview-protocol-wrapper dialog-title-border">
<el-dialog
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>
</div>
<div v-html="protocolInfo.contents"></div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="close">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
......
src/components/education/custom-resource/preview-video.vue
浏览文件 @ 7a1f8841
<template>
<el-dialog
title="预览课程"
:visible="dialogVisible"
@close="close"
center
:close-on-click-modal="false"
:close-on-press-escape="false"
width="800px"
>
<video-player
class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
@pause="onPlayerPause($event)"
/>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="close">确 定</el-button>
</div>
</el-dialog>
<div class="preview-video-wrapper dialog-title-border">
<el-dialog
title="预览课程"
:visible="dialogVisible"
@close="close"
center
:close-on-click-modal="false"
:close-on-press-escape="false"
width="800px"
>
<video-player
class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
@pause="onPlayerPause($event)"
/>
<div slot="title" style="text-align: left;">
<span style="font-weight: 700;">预览课程</span>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="close">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
// import video from '@/assets/test.mp4'
......
src/components/education/custom/course-list.vue
浏览文件 @ 7a1f8841
......@@ -89,6 +89,7 @@ export default {
data() {
return {
isRise: true,
isRiseOrg: true,
isShowCart: false,
dialogObj: {
title: "课程数量已达上限",
......@@ -100,14 +101,14 @@ export default {
};
},
computed: {
...mapGetters(["cartList", "courseList", "searchParam", "courseLimitCount"])
...mapGetters(["cartList", "courseList", "searchParam", "searchParamOrg", "courseLimitCount", "kind"])
},
components: {
ShoppingCart,
dialogComponet: dialog
},
methods: {
...mapActions(["setCartList", "setSearchParam"]),
...mapActions(["setCartList", "setSearchParam", "setSearchParamOrg"]),
toggleOrder() {
this.isRise = !this.isRise;
let dir = this.isRise ? 1 : 2;
......
src/components/education/custom/course-select copy 2.vue 0 → 100644
浏览文件 @ 7a1f8841
<template>
<div class="custom-over">
<!-- <div class="custom-select-wrapper" style="overflow:auto;">
<div class="department-label" style="width: 1200px;"> -->
<!-- <div class="custom-select-wrapper">
<div class="department-label" style="min-width:1420px;">
<span
v-for="(item, index) in allLabelList"
:key="index"
class="item"
:class="{checked: item.checked}"
@click="selectLabel(index)"
>
<span class="split" :class="{acitve: item.checked}"></span>
{{item.name}}
</span>
</div>
</div> -->
<div class="custom-select-wrapper">
<!-- 学科分类 -->
<div class="subject-level">
<span class="title">学科分类</span>
<span
v-for="(item, index) in allLabelList"
:key="index"
class="item"
:class="{active: item.checked}"
@click="selectLabel(index)"
>
<!-- <span
class="item"
v-for="(item, index) in courseLevel"
:key="index"
@click="selectLevel(index)"
> -->
<span class="name" :class="{active: item.checked}">{{item.name}}</span>
</span>
</div>
<!-- 课程分类 -->
<div class="course-class">
<div class="title">课程分类</div>
<div v-if="subLabelList.length" class="item" @click="selectSubLabel(subLabelList[0], 1)">
<span class="name" :class="{'active': subLabelList[0].checked}">全部</span>
</div>
<ul class="check-list">
<li
class="sub-item"
:class="{'active': item.checked}"
v-for="(item, index) in subLabelList.slice(1)"
:key="index"
@click="selectSubLabel(item, 2)"
>
<img v-show="item.checked" src="../../../assets/custom/icon/label-sel.png" alt />
<img v-show="!item.checked" src="../../../assets/custom/icon/label-sel-no.png" alt />
{{item.name}}
</li>
</ul>
<div class="right"></div>
</div>
<!-- 课程等级 -->
<div class="course-level">
<span class="title">课程等级</span>
<span
class="item"
v-for="(item, index) in courseLevel"
:key="index"
@click="selectLevel(index)"
>
<span class="name" :class="{active: item.checked}">{{item.name}}</span>
</span>
</div>
<div class="button-wrapper">
<el-button class="add-button" plain size="small" @click="resetCond">重 置</el-button>
<el-button class="add-button" size="small" type="primary" @click="search">查 询</el-button>
</div>
</div>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
data() {
return {
courseLevel: [
{ name: "全部", value: 0, checked: true },
{ name: "初级", value: 1, checked: false },
{ name: "中级", value: 2, checked: false },
{ name: "高级", value: 3, checked: false }
],
checkList: [431, 441]
};
},
props: {
dataList: {
type: Array,
default: () => {
return [
{
name: "全部",
checked: true
},
{
name: "内科",
checked: false
},
{
name: "神经科",
checked: false
},
{
name: "肿瘤科",
checked: false
},
{
name: "妇产科",
checked: false
},
{
name: "内科",
checked: false
},
{
name: "神经科",
checked: false
},
{
name: "肿瘤科",
checked: false
},
{
name: "妇产科",
checked: false
},
{
name: "内科",
checked: false
},
{
name: "神经科",
checked: false
},
{
name: "肿瘤科",
checked: false
},
{
name: "妇产科",
checked: false
}
];
}
}
},
computed: {
...mapGetters(['searchParam', 'allLabelList', 'subLabelList'])
},
components: {},
methods: {
...mapActions(['setSubLabelList', 'setSearchParam']),
// 选择一级
selectLabel(index) {
this.allLabelList.forEach(element => {
element.checked = false;
});
this.allLabelList[index].checked = true;
let subLabelList = this.allLabelList[index].subList;
this.setSubLabelList(subLabelList);
},
// 选择二级
selectSubLabel(item, type) {
item.checked = !item.checked;
console.log('selectSubLabel', item);
// 如果被选中
if(item.checked) {
// 是全部按钮 第一个全部：parentid-0
if(type == 1) {
let labelArr = item.id.split('-'), labelType = labelArr[0], labelIndex = labelArr[1] - 0;
labelArr = item.id.split('-');
if(labelType == 'parentid') {
// 将所有子项目选中
this.allLabelList[0].subList.forEach( (item, index) => {
if(index != 0) { // 第一个不用
item.checked = true;
}
})
// 将其它所有全部置为选中
this.allLabelList.forEach( (item, index) => {
index != 0 && (item.subList[0].checked = true);
})
} else {
this.allLabelList[labelIndex + 1].subList.forEach( (item, index) => {
if(index != 0) { // 第一个不用
item.checked = true;
}
})
}
}
// 末被选中
} else {
// 是全部按钮 第一个全部：parentid-0
if(type == 1) {
let labelArr = item.id.split('-'), labelType = labelArr[0], labelIndex = labelArr[1] - 0;
labelArr = item.id.split('-');
if(labelType == 'parentid') {
// 将所有子项目选中
this.allLabelList[0].subList.forEach( (item, index) => {
if(index != 0) { // 第一个不用
item.checked = false;
}
})
// 将其它所有全部置为选中
this.allLabelList.forEach( (item, index) => {
index != 0 && (item.subList[0].checked = false);
})
} else {
this.allLabelList[labelIndex + 1].subList.forEach( (item, index) => {
if(index != 0) { // 第一个不用
item.checked = false;
}
})
}
}
}
// 无论哪种操作，都要重置各个“全部”按钮
this.allLabelList.forEach( (parent, index) => {
let needhecked = true, subList = parent.subList;
for(let i = 1; i < subList.length; i ++) {
if(!subList[i].checked) {
needhecked = false;
break;
}
}
this.allLabelList[index].subList[0].checked = needhecked;
})
this.$forceUpdate();
},
// 选中等级
selectLevel(index) {
this.courseLevel.forEach(element => {
element.checked = false;
});
this.courseLevel[index].checked = true;
},
// 重置按钮
resetCond() {
this.allLabelList.forEach((item, index) => {
item.checked = false;
item.subList.forEach((sub, subIndex) => {
sub.checked = true;
});
});
this.setSubLabelList(this.allLabelList[0].subList);
this.allLabelList[0].checked = true;
this.selectLevel(0);
},
search() {
let allSelectedLabel = [];
this.allLabelList[0].subList.forEach( (item, index) => {
index && item.checked && allSelectedLabel.push(item.id);
})
this.searchParam.labelIdList = allSelectedLabel;
this.courseLevel.forEach( item => {
if(item.checked) {
this.searchParam.grade = item.value;
}
})
this.searchParam.pageNo = 1;
this.setSearchParam(this.searchParam);
console.log(allSelectedLabel);
}
}
};
</script>
<style lang="less" scoped>
.custom-select-wrapper {
// width: 1090px;
user-select: none;
.department-label {
display: flex;
flex-direction: row;
height: 48px;
line-height: 48px;
border-bottom: 2px solid #449284;
border-radius: 6px 6px 0px 0px;
.item {
cursor: pointer;
position: relative;
z-index: 1;
display: inline-block;
padding: 0 22px;
font-size: 16px;
color: #666666;
// &::after {
// position: absolute;
// content: "";
// top: 14px;
// left: 0px;
// height: 20px;
// border-left: 1px solid #c7c8c9;
// }
&.checked {
color: #fff;
z-index: 3;
background: #449284;
}
&:first-child {
border-radius: 6px 0px 0px 0px;
}
}
.split {
flex-shrink: 0;
position: absolute;
top: 14px;
left: 0px;
z-index: 2;
display: inline-block;
height: 20px;
// width: 1px;
// background: #c7c8c9;
border-left: 1px solid #c7c8c9;
}
.item:nth-child(1) > .split,
.item.checked + .item > .split,
.split.acitve {
display: none;
}
}
}
.subject-level {
display: flex;
flex-direction: row;
box-sizing: content-box;
height: 56px;
line-height: 56px;
padding-left: 20px;
// margin: 16px 0 16px 20px;
border-bottom: 1px dotted #e4e7ed;
.title {
display: inline-block;
padding: 0 10px;
color: #999999;
}
.item {
cursor: pointer;
display: inline-block;
margin: 0 5px;
color: #333333;
margin-bottom: -1px;
&.active {
border-bottom: 2px solid #449284;
}
.name {
height: 26px;
line-height: 26px;
display: inline-block;
padding: 0px 10px;
border-radius: 2px;
&.active {
color: #449284;
font-weight: 700;
// background: #449284;
}
}
}
}
.course-level {
display: flex;
flex-direction: row;
box-sizing: content-box;
height: 56px;
line-height: 56px;
padding-left: 20px;
// margin: 16px 0 16px 20px;
border-bottom: 1px dotted #e4e7ed;
.title {
display: inline-block;
padding: 0 10px;
color: #999999;
}
.item {
cursor: pointer;
display: inline-block;
margin: 0 5px;
color: #333333;
.name {
height: 26px;
line-height: 26px;
display: inline-block;
padding: 0px 10px;
border-radius: 2px;
&.active {
color: #fff;
background: #449284;
}
}
}
}
.course-class {
display: flex;
flex-direction: row;
box-sizing: content-box;
padding: 10px 20px;
// padding-left: 20px;
// margin: 16px 0 16px 20px;
border-bottom: 1px dashed #e4e7ed;
.title {
height: 56px;
line-height: 56px;
display: inline-block;
padding: 0 10px;
color: #999999;
}
.item {
cursor: pointer;
height: 56px;
line-height: 56px;
display: inline-block;
margin: 0 5px;
color: #333333;
.name {
height: 26px;
line-height: 26px;
display: inline-block;
padding: 0px 10px;
border-radius: 2px;
margin-right: 16px;
&.active {
color: #fff;
background: #449284;
}
}
}
.check-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 14px;
margin-right: 40px;
flex: 1;
.sub-item {
cursor: pointer;
display: flex;
flex-direction: row;
align-items: center;
height: 30px;
line-height: 30px;
font-size: 14px;
color: #333333;
margin-right: 30px;
img {
width: 16px;
height: 16px;
margin-right: 5px;
}
&.active {
color: #449284;
}
}
}
.el-checkbox {
height: 30px;
line-height: 30px;
}
}
.button-wrapper {
display: flex;
flex-direction: row;
justify-content: flex-end;
margin-top: 20px;
// margin-right: 30px;
padding-right: 30px;
min-width: 1125px;
}
</style>
src/components/education/custom/course-select copy 3.vue 0 → 100644
浏览文件 @ 7a1f8841
<template>
<div class="custom-over">
<div class="custom-select-wrapper">
<!-- 学科分类 -->
<div class="subject-level">
<span class="title">学科分类</span>
<span
v-for="(item, index) in allLabelList"
:key="index"
class="item"
:class="{active: item.checked}"
@click="selectLabel(index)"
>
<span class="name" :class="{active: item.checked}">{{item.name}}</span>
</span>
</div>
<!-- 课程分类 -->
<div class="course-class">
<div class="title">课程分类</div>
<div v-if="subLabelList.length" class="item" @click="selectSubLabel(subLabelList[0], 1)">
<span class="name" :class="{'active': subLabelList[0].checked}">全部</span>
</div>
<ul class="check-list">
<li
class="sub-item"
:class="{'active': item.checked}"
v-for="(item, index) in subLabelList.slice(1)"
:key="index"
@click="selectSubLabel(item, 2)"
>
<img v-show="item.checked" src="../../../assets/custom/icon/label-sel.png" alt />
<img v-show="!item.checked" src="../../../assets/custom/icon/label-sel-no.png" alt />
{{item.name}}
</li>
</ul>
<div class="right"></div>
</div>
<!-- 课程等级 -->
<div class="course-level">
<span class="title">课程等级</span>
<span
class="item"
v-for="(item, index) in courseLevel"
:key="index"
@click="selectLevel(index)"
>
<span class="name" :class="{active: item.checked}">{{item.name}}</span>
</span>
</div>
<div class="button-wrapper">
<el-button class="add-button" plain size="small" @click="resetCond">重 置</el-button>
<el-button class="add-button" size="small" type="primary" @click="search">查 询</el-button>
</div>
</div>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
data() {
return {
courseLevel: [
{ name: "全部", value: 0, checked: true },
{ name: "初级", value: 1, checked: false },
{ name: "中级", value: 2, checked: false },
{ name: "高级", value: 3, checked: false }
],
checkList: [431, 441]
};
},
props: {
dataList: {
type: Array,
default: () => {
return [
{
name: "全部",
checked: true
},
{
name: "内科",
checked: false
},
{
name: "神经科",
checked: false
},
{
name: "肿瘤科",
checked: false
},
{
name: "妇产科",
checked: false
},
{
name: "内科",
checked: false
},
{
name: "神经科",
checked: false
},
{
name: "肿瘤科",
checked: false
},
{
name: "妇产科",
checked: false
},
{
name: "内科",
checked: false
},
{
name: "神经科",
checked: false
},
{
name: "肿瘤科",
checked: false
},
{
name: "妇产科",
checked: false
}
];
}
}
},
computed: {
...mapGetters(['searchParam', 'allLabelList', 'subLabelList'])
},
components: {},
methods: {
...mapActions(['setSubLabelList', 'setSearchParam']),
// 选择一级
selectLabel(index) {
this.allLabelList.forEach(element => {
element.checked = false;
});
this.allLabelList[index].checked = true;
let subLabelList = this.allLabelList[index].subList;
this.setSubLabelList(subLabelList);
},
// 选择二级
selectSubLabel(item, type) {
item.checked = !item.checked;
console.log('selectSubLabel', item);
// 如果被选中
if(item.checked) {
// 是全部按钮 第一个全部：parentid-0
if(type == 1) {
let labelArr = item.id.split('-'), labelType = labelArr[0], labelIndex = labelArr[1] - 0;
labelArr = item.id.split('-');
if(labelType == 'parentid') {
// 将所有子项目选中
this.allLabelList[0].subList.forEach( (item, index) => {
if(index != 0) { // 第一个不用
item.checked = true;
}
})
// 将其它所有全部置为选中
this.allLabelList.forEach( (item, index) => {
index != 0 && (item.subList[0].checked = true);
})
} else {
this.allLabelList[labelIndex + 1].subList.forEach( (item, index) => {
if(index != 0) { // 第一个不用
item.checked = true;
}
})
}
}
// 末被选中
} else {
// 是全部按钮 第一个全部：parentid-0
if(type == 1) {
let labelArr = item.id.split('-'), labelType = labelArr[0], labelIndex = labelArr[1] - 0;
labelArr = item.id.split('-');
if(labelType == 'parentid') {
// 将所有子项目选中
this.allLabelList[0].subList.forEach( (item, index) => {
if(index != 0) { // 第一个不用
item.checked = false;
}
})
// 将其它所有全部置为选中
this.allLabelList.forEach( (item, index) => {
index != 0 && (item.subList[0].checked = false);
})
} else {
this.allLabelList[labelIndex + 1].subList.forEach( (item, index) => {
if(index != 0) { // 第一个不用
item.checked = false;
}
})
}
}
}
// 无论哪种操作，都要重置各个“全部”按钮
this.allLabelList.forEach( (parent, index) => {
let needhecked = true, subList = parent.subList;
for(let i = 1; i < subList.length; i ++) {
if(!subList[i].checked) {
needhecked = false;
break;
}
}
this.allLabelList[index].subList[0].checked = needhecked;
})
this.$forceUpdate();
},
// 选中等级
selectLevel(index) {
this.courseLevel.forEach(element => {
element.checked = false;
});
this.courseLevel[index].checked = true;
},
// 重置按钮
resetCond() {
this.allLabelList.forEach((item, index) => {
item.checked = false;
item.subList.forEach((sub, subIndex) => {
sub.checked = true;
});
});
this.setSubLabelList(this.allLabelList[0].subList);
this.allLabelList[0].checked = true;
this.selectLevel(0);
},
search() {
let allSelectedLabel = [];
this.allLabelList[0].subList.forEach( (item, index) => {
index && item.checked && allSelectedLabel.push(item.id);
})
this.searchParam.labelIdList = allSelectedLabel;
this.courseLevel.forEach( item => {
if(item.checked) {
this.searchParam.grade = item.value;
}
})
this.searchParam.pageNo = 1;
this.setSearchParam(this.searchParam);
console.log(allSelectedLabel);
}
}
};
</script>
<style lang="less" scoped>
.custom-select-wrapper {
// width: 1090px;
user-select: none;
.department-label {
display: flex;
flex-direction: row;
height: 48px;
line-height: 48px;
border-bottom: 2px solid #449284;
border-radius: 6px 6px 0px 0px;
.item {
cursor: pointer;
position: relative;
z-index: 1;
display: inline-block;
padding: 0 22px;
font-size: 16px;
color: #666666;
// &::after {
// position: absolute;
// content: "";
// top: 14px;
// left: 0px;
// height: 20px;
// border-left: 1px solid #c7c8c9;
// }
&.checked {
color: #fff;
z-index: 3;
background: #449284;
}
&:first-child {
border-radius: 6px 0px 0px 0px;
}
}
.split {
flex-shrink: 0;
position: absolute;
top: 14px;
left: 0px;
z-index: 2;
display: inline-block;
height: 20px;
// width: 1px;
// background: #c7c8c9;
border-left: 1px solid #c7c8c9;
}
.item:nth-child(1) > .split,
.item.checked + .item > .split,
.split.acitve {
display: none;
}
}
}
.subject-level {
display: flex;
flex-direction: row;
box-sizing: content-box;
height: 56px;
line-height: 56px;
padding-left: 20px;
// margin: 16px 0 16px 20px;
border-bottom: 1px dotted #e4e7ed;
.title {
display: inline-block;
padding: 0 10px;
color: #999999;
}
.item {
cursor: pointer;
display: inline-block;
margin: 0 5px;
color: #333333;
margin-bottom: -1px;
&.active {
border-bottom: 2px solid #449284;
}
.name {
height: 26px;
line-height: 26px;
display: inline-block;
padding: 0px 10px;
border-radius: 2px;
&.active {
color: #449284;
font-weight: 700;
// background: #449284;
}
}
}
}
.course-level {
display: flex;
flex-direction: row;
box-sizing: content-box;
height: 56px;
line-height: 56px;
padding-left: 20px;
// margin: 16px 0 16px 20px;
border-bottom: 1px dotted #e4e7ed;
.title {
display: inline-block;
padding: 0 10px;
color: #999999;
}
.item {
cursor: pointer;
display: inline-block;
margin: 0 5px;
color: #333333;
.name {
height: 26px;
line-height: 26px;
display: inline-block;
padding: 0px 10px;
border-radius: 2px;
&.active {
color: #fff;
background: #449284;
}
}
}
}
.course-class {
display: flex;
flex-direction: row;
box-sizing: content-box;
padding: 10px 20px;
// padding-left: 20px;
// margin: 16px 0 16px 20px;
border-bottom: 1px dashed #e4e7ed;
.title {
height: 56px;
line-height: 56px;
display: inline-block;
padding: 0 10px;
color: #999999;
}
.item {
cursor: pointer;
height: 56px;
line-height: 56px;
display: inline-block;
margin: 0 5px;
color: #333333;
.name {
height: 26px;
line-height: 26px;
display: inline-block;
padding: 0px 10px;
border-radius: 2px;
margin-right: 16px;
&.active {
color: #fff;
background: #449284;
}
}
}
.check-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 14px;
margin-right: 40px;
flex: 1;
.sub-item {
cursor: pointer;
display: flex;
flex-direction: row;
align-items: center;
height: 30px;
line-height: 30px;
font-size: 14px;
color: #333333;
margin-right: 30px;
img {
width: 16px;
height: 16px;
margin-right: 5px;
}
&.active {
color: #449284;
}
}
}
.el-checkbox {
height: 30px;
line-height: 30px;
}
}
.button-wrapper {
display: flex;
flex-direction: row;
justify-content: flex-end;
margin-top: 20px;
// margin-right: 30px;
padding-right: 30px;
min-width: 1125px;
}
</style>
src/components/education/custom/course-select-org.vue 0 → 100644
浏览文件 @ 7a1f8841
<template>
<div class="custom-over">
<div class="custom-select-wrapper">
<!-- 学科分类 -->
<div class="subject-level">
<span class="title">学科分类</span>
<span
v-for="(item, index) in allLabelListOrg"
:key="index"
class="item"
:class="{active: item.checked}"
@click="selectLabel(index)"
>
<span class="name" :class="{active: item.checked}">{{item.name}}</span>
</span>
</div>
<!-- 课程分类 -->
<div class="course-class">
<div class="title">课程分类</div>
<div v-if="subLabelListOrg.length" class="item" @click="selectSubLabel(subLabelListOrg[0], 1)">
<span class="name" :class="{'active': subLabelListOrg[0].checked}">全部</span>
</div>
<ul class="check-list">
<li
class="sub-item"
:class="{'active': item.checked}"
v-for="(item, index) in subLabelListOrg.slice(1)"
:key="index"
@click="selectSubLabel(item, 2)"
>
<img v-show="item.checked" src="../../../assets/custom/icon/label-sel.png" alt />
<img v-show="!item.checked" src="../../../assets/custom/icon/label-sel-no.png" alt />
{{item.name}}
</li>
</ul>
<div class="right"></div>
</div>
<!-- 课程等级 -->
<div class="course-level">
<span class="title">课程等级</span>
<span
class="item"
v-for="(item, index) in courseLevel"
:key="index"
@click="selectLevel(index)"
>
<span class="name" :class="{active: item.checked}">{{item.name}}</span>
</span>
</div>
<div class="button-wrapper">
<el-button class="add-button" plain size="small" @click="resetCond">重 置</el-button>
<el-button class="add-button" size="small" type="primary" @click="search">查 询</el-button>
</div>
</div>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
data() {
return {
courseLevel: [
{ name: "全部", value: 0, checked: true },
{ name: "初级", value: 1, checked: false },
{ name: "中级", value: 2, checked: false },
{ name: "高级", value: 3, checked: false }
],
checkList: [431, 441]
};
},
props: {
dataList: {
type: Array,
default: () => {
return [
{
name: "全部",
checked: true
},
{
name: "内科",
checked: false
},
{
name: "神经科",
checked: false
},
{
name: "肿瘤科",
checked: false
},
{
name: "妇产科",
checked: false
},
{
name: "内科",
checked: false
},
{
name: "神经科",
checked: false
},
{
name: "肿瘤科",
checked: false
},
{
name: "妇产科",
checked: false
},
{
name: "内科",
checked: false
},
{
name: "神经科",
checked: false
},
{
name: "肿瘤科",
checked: false
},
{
name: "妇产科",
checked: false
}
];
}
}
},
computed: {
...mapGetters(['searchParamOrg', 'allLabelListOrg', 'subLabelListOrg'])
},
components: {},
methods: {
...mapActions(['setSubLabelListOrg', 'setSearchParamOrg']),
// 选择一级
selectLabel(index) {
this.allLabelListOrg.forEach(element => {
element.checked = false;
});
this.allLabelListOrg[index].checked = true;
let subLabelListOrg = this.allLabelListOrg[index].subList;
this.setSubLabelListOrg(subLabelListOrg);
},
// 选择二级
selectSubLabel(item, type) {
item.checked = !item.checked;
console.log('selectSubLabel', item);
// 如果被选中
if(item.checked) {
// 是全部按钮 第一个全部：parentid-0
if(type == 1) {
let labelArr = item.id.split('-'), labelType = labelArr[0], labelIndex = labelArr[1] - 0;
labelArr = item.id.split('-');
if(labelType == 'parentid') {
// 将所有子项目选中
this.allLabelListOrg[0].subList.forEach( (item, index) => {
if(index != 0) { // 第一个不用
item.checked = true;
}
})
// 将其它所有全部置为选中
this.allLabelListOrg.forEach( (item, index) => {
index != 0 && (item.subList[0].checked = true);
})
} else {
this.allLabelListOrg[labelIndex + 1].subList.forEach( (item, index) => {
if(index != 0) { // 第一个不用
item.checked = true;
}
})
}
}
// 末被选中
} else {
// 是全部按钮 第一个全部：parentid-0
if(type == 1) {
let labelArr = item.id.split('-'), labelType = labelArr[0], labelIndex = labelArr[1] - 0;
labelArr = item.id.split('-');
if(labelType == 'parentid') {
// 将所有子项目选中
this.allLabelListOrg[0].subList.forEach( (item, index) => {
if(index != 0) { // 第一个不用
item.checked = false;
}
})
// 将其它所有全部置为选中
this.allLabelListOrg.forEach( (item, index) => {
index != 0 && (item.subList[0].checked = false);
})
} else {
this.allLabelListOrg[labelIndex + 1].subList.forEach( (item, index) => {
if(index != 0) { // 第一个不用
item.checked = false;
}
})
}
}
}
// 无论哪种操作，都要重置各个“全部”按钮
this.allLabelListOrg.forEach( (parent, index) => {
let needhecked = true, subList = parent.subList;
for(let i = 1; i < subList.length; i ++) {
if(!subList[i].checked) {
needhecked = false;
break;
}
}
this.allLabelListOrg[index].subList[0].checked = needhecked;
})
this.$forceUpdate();
},
// 选中等级
selectLevel(index) {
this.courseLevel.forEach(element => {
element.checked = false;
});
this.courseLevel[index].checked = true;
},
// 重置按钮
resetCond() {
this.allLabelListOrg.forEach((item, index) => {
item.checked = false;
item.subList.forEach((sub, subIndex) => {
sub.checked = true;
});
});
this.setSubLabelListOrg(this.allLabelListOrg[0].subList);
this.allLabelListOrg[0].checked = true;
this.selectLevel(0);
},
search() {
let allSelectedLabelOrg = [];
this.allLabelListOrg[0].subList.forEach( (item, index) => {
index && item.checked && allSelectedLabelOrg.push(item.id);
})
this.searchParamOrg.labelIdList = allSelectedLabelOrg;
this.courseLevel.forEach( item => {
if(item.checked) {
this.searchParamOrg.grade = item.value;
}
})
this.searchParamOrg.pageNo = 1;
this.setSearchParamOrg(this.searchParamOrg);
console.log(allSelectedLabelOrg);
}
}
};
</script>
<style lang="less" scoped>
.custom-select-wrapper {
// width: 1090px;
user-select: none;
.department-label {
display: flex;
flex-direction: row;
height: 48px;
line-height: 48px;
border-bottom: 2px solid #449284;
border-radius: 6px 6px 0px 0px;
.item {
cursor: pointer;
position: relative;
z-index: 1;
display: inline-block;
padding: 0 22px;
font-size: 16px;
color: #666666;
// &::after {
// position: absolute;
// content: "";
// top: 14px;
// left: 0px;
// height: 20px;
// border-left: 1px solid #c7c8c9;
// }
&.checked {
color: #fff;
z-index: 3;
background: #449284;
}
&:first-child {
border-radius: 6px 0px 0px 0px;
}
}
.split {
flex-shrink: 0;
position: absolute;
top: 14px;
left: 0px;
z-index: 2;
display: inline-block;
height: 20px;
// width: 1px;
// background: #c7c8c9;
border-left: 1px solid #c7c8c9;
}
.item:nth-child(1) > .split,
.item.checked + .item > .split,
.split.acitve {
display: none;
}
}
}
.subject-level {
display: flex;
flex-direction: row;
box-sizing: content-box;
height: 56px;
line-height: 56px;
padding-left: 20px;
// margin: 16px 0 16px 20px;
border-bottom: 1px dotted #e4e7ed;
.title {
display: inline-block;
padding: 0 10px;
color: #999999;
}
.item {
cursor: pointer;
display: inline-block;
margin: 0 5px;
color: #333333;
margin-bottom: -1px;
&.active {
border-bottom: 2px solid #449284;
}
.name {
height: 26px;
line-height: 26px;
display: inline-block;
padding: 0px 10px;
border-radius: 2px;
&.active {
color: #449284;
font-weight: 700;
// background: #449284;
}
}
}
}
.course-level {
display: flex;
flex-direction: row;
box-sizing: content-box;
height: 56px;
line-height: 56px;
padding-left: 20px;
// margin: 16px 0 16px 20px;
border-bottom: 1px dotted #e4e7ed;
.title {
display: inline-block;
padding: 0 10px;
color: #999999;
}
.item {
cursor: pointer;
display: inline-block;
margin: 0 5px;
color: #333333;
.name {
height: 26px;
line-height: 26px;
display: inline-block;
padding: 0px 10px;
border-radius: 2px;
&.active {
color: #fff;
background: #449284;
}
}
}
}
.course-class {
display: flex;
flex-direction: row;
box-sizing: content-box;
padding: 10px 20px;
// padding-left: 20px;
// margin: 16px 0 16px 20px;
border-bottom: 1px dashed #e4e7ed;
.title {
height: 56px;
line-height: 56px;
display: inline-block;
padding: 0 10px;
color: #999999;
}
.item {
cursor: pointer;
height: 56px;
line-height: 56px;
display: inline-block;
margin: 0 5px;
color: #333333;
.name {
height: 26px;
line-height: 26px;
display: inline-block;
padding: 0px 10px;
border-radius: 2px;
margin-right: 16px;
&.active {
color: #fff;
background: #449284;
}
}
}
.check-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 14px;
margin-right: 40px;
flex: 1;
.sub-item {
cursor: pointer;
display: flex;
flex-direction: row;
align-items: center;
height: 30px;
line-height: 30px;
font-size: 14px;
color: #333333;
margin-right: 30px;
img {
width: 16px;
height: 16px;
margin-right: 5px;
}
&.active {
color: #449284;
}
}
}
.el-checkbox {
height: 30px;
line-height: 30px;
}
}
.button-wrapper {
display: flex;
flex-direction: row;
justify-content: flex-end;
margin-top: 20px;
// margin-right: 30px;
padding-right: 30px;
min-width: 1125px;
}
</style>
src/components/education/custom/course-select.vue
浏览文件 @ 7a1f8841
<template>
<div class="custom-over">
<!-- <div class="custom-select-wrapper" style="overflow:auto;">
<div class="department-label" style="width: 1200px;"> -->
<!-- <div class="custom-select-wrapper">
<div class="department-label" style="min-width:1420px;">
<span
v-for="(item, index) in allLabelList"
:key="index"
class="item"
:class="{checked: item.checked}"
@click="selectLabel(index)"
>
<span class="split" :class="{acitve: item.checked}"></span>
{{item.name}}
</span>
</div>
</div> -->
<div class="custom-select-wrapper">
<!-- 学科分类 -->
<div class="subject-level">
......@@ -27,12 +11,6 @@
:class="{active: item.checked}"
@click="selectLabel(index)"
>
<!-- <span
class="item"
v-for="(item, index) in courseLevel"
:key="index"
@click="selectLevel(index)"
> -->
<span class="name" :class="{active: item.checked}">{{item.name}}</span>
</span>
</div>
......
src/components/education/custom/select-course-comp.vue
浏览文件 @ 7a1f8841
......@@ -2,32 +2,40 @@
<div class="select-course-wrapper">
<div class="top-line"></div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="公共课程" name="first">
<el-tab-pane label="公共课程" name="0">
<CourseSelect></CourseSelect>
</el-tab-pane>
<el-tab-pane label="我的课程" name="second">
<el-tab-pane label="机构课程" name="1">
<CourseSelectOrg></CourseSelectOrg>
</el-tab-pane>
</el-tabs>
<CourseSelect></CourseSelect>
<div class="top-line" style="margin-top: 20px;"></div>
<CourseList></CourseList>
</div>
</template>
<script>
import CourseSelect from '@/components/education/custom/course-select'
import CourseList from '@/components/education/custom/course-list'
import CourseSelect from '@/components/education/custom/course-select';
import CourseSelectOrg from '@/components/education/custom/course-select-org';
import CourseList from '@/components/education/custom/course-list';
import { mapActions, mapGetters } from 'vuex';
export default {
data() {
return {
activeName: 'second'
activeName: '1'
}
},
computed: {
...mapGetters(['kind'])
},
components: {
CourseSelect,
CourseSelectOrg,
CourseList,
},
methods: {
...mapActions(['setKind']),
handleClick() {
this.setKind(this.activeName);
}
},
}
......
src/store/custom/customStore.js
浏览文件 @ 7a1f8841
const customStore = {
// namespaced: true,
state: {
kind: 0,
searchParam: {
kind: 0,
orderBy: 2,
dir: 1,
grade: 0,
pageNo: 1,
pageSize: 10,
labelIdList: []
},
searchParamOrg: {
kind: 1,
orderBy: 2,
dir: 1,
grade: 0,
......@@ -13,12 +24,20 @@ const customStore = {
courseList: [],
allLabelList: [],
subLabelList: [],
allLabelListOrg: [],
subLabelListOrg: [],
courseLimitCount: -1 // -1: 不限制; 其它值: 限制的个数
},
mutations: {
SET_KIND: (state, kind) => {
state.kind = kind;
},
SET_SEARCH_PARAM: (state, searchParam) => {
state.searchParam = searchParam;
},
SET_SEARCH_PARAM_ORG: (state, searchParamOrg) => {
state.searchParamOrg = searchParamOrg;
},
SET_CART_LIST: (state, cartList) => {
state.cartList = cartList;
},
......@@ -31,14 +50,26 @@ const customStore = {
SET_SUB_LABEL_LIST: (state, subLabelList) => {
state.subLabelList = subLabelList;
},
SET_ALL_LABEL_LIST_ORG: (state, allLabelListOrg) => {
state.allLabelListOrg = allLabelListOrg;
},
SET_SUB_LABEL_LIST_ORG: (state, subLabelListOrg) => {
state.subLabelListOrg = subLabelListOrg;
},
SET_COURSE_LIMIT_COUNT: (state, courseLimitCount) => {
state.courseLimitCount = courseLimitCount;
},
},
actions: {
setKind({ commit }, kind) {
commit('SET_KIND', kind);
},
setSearchParam({ commit }, searchParam) {
commit('SET_SEARCH_PARAM', searchParam);
},
setSearchParamOrg({ commit }, searchParamOrg) {
commit('SET_SEARCH_PARAM_ORG', searchParamOrg);
},
setCartList({ commit }, cartList) {
commit('SET_CART_LIST', cartList);
},
......@@ -51,6 +82,12 @@ const customStore = {
setSubLabelList({ commit }, subLabelList) {
commit('SET_SUB_LABEL_LIST', subLabelList);
},
setAllLabelListOrg({ commit }, allLabelListOrg) {
commit('SET_ALL_LABEL_LIST_ORG', allLabelListOrg);
},
setSubLabelListOrg({ commit }, subLabelListOrg) {
commit('SET_SUB_LABEL_LIST_ORG', subLabelListOrg);
},
setCourseLimitCount({ commit }, courseLimitCount) {
commit('SET_COURSE_LIMIT_COUNT', courseLimitCount);
},
......
src/store/custom/getters.js
浏览文件 @ 7a1f8841
const getters = {
kind: state => state.customStore.kind,
searchParam: state => state.customStore.searchParam,
searchParamOrg: state => state.customStore.searchParamOrg,
cartList: state => state.customStore.cartList,
courseList: state => state.customStore.courseList,
allLabelList: state => state.customStore.allLabelList,
subLabelList: state => state.customStore.subLabelList,
allLabelListOrg: state => state.customStore.allLabelListOrg,
subLabelListOrg: state => state.customStore.subLabelListOrg,
courseLimitCount: state => state.customStore.courseLimitCount,
}
......
src/utils/fetch.js
浏览文件 @ 7a1f8841
......@@ -54,7 +54,7 @@ service.interceptors.request.use(config => {
}
if( process.env.BUILD_ENV == "development" ){ // 本地开发环境
// console.log('环境变量>>>> ', process.env.BUILD_ENV);
config.headers['token'] = '37683A493D6B497AB152D87EA731CF35';
config.headers['token'] = 'F37DD4A8C9094A89A0C7EF84E4303CC9';
// config.headers['token'] = localStorage.getItem('storageToken')
}else{
config.headers['token'] = localStorage.getItem('storageToken')
......
src/views/education/edit-custom.vue
浏览文件 @ 7a1f8841
......@@ -160,15 +160,25 @@ export default {
};
},
computed: {
...mapGetters(["searchParam", "cartList"])
...mapGetters(["searchParam", "searchParamOrg", "cartList", "kind"])
},
watch: {
kind(newKind) {
let searchParam = newKind == 0 ? this.searchParam : this.searchParamOrg;
this.getCourseList(searchParam);
},
searchParam: {
handler(val) {
this.getCourseList(val);
},
deep: true
},
searchParamOrg: {
handler(val) {
this.getCourseList(val);
},
deep: true
},
cartList(val) {
this.canNext = val.length > 0;
}
......@@ -196,22 +206,26 @@ export default {
methods: {
...mapActions([
"setSearchParam",
"setSearchParamOrg",
"setCartList",
"setCourseList",
"setAllLabelList",
"setSubLabelList",
"setAllLabelListOrg",
"setSubLabelListOrg",
"setCourseLimitCount",
]),
initPageParams(labelIdList) {
let searchParam = {
orderBy: 2,
dir: 1,
grade: 0,
pageNo: 1,
pageSize: 10,
labelIdList: labelIdList || []
};
// let searchParam = {
// kind: 0,
// orderBy: 2,
// dir: 1,
// grade: 0,
// pageNo: 1,
// pageSize: 10,
// labelIdList: labelIdList || []
// };
this.setCartList([]);
this.setCourseList([]);
this.setAllLabelList([]);
......@@ -231,13 +245,17 @@ export default {
},
// 获取所有标签（一级及二级）,交做相应处理
// TODO
getLabelList() {
vm.GET("contents/diseases/labelList", {}).then(res => {
if (res.code == "000000") {
// 先将所有的标签添加checked字段
let labelList = res.data;
// let labelListOrg = res.data;
let allSubList = [];
let allSubListOrg = [];
let labelIdList = [];
let labelIdListOrg = [];
labelList.forEach((item, index) => {
item.checked = false;
item.subList.forEach((sub, subIndex) => {
......@@ -263,19 +281,24 @@ export default {
checked: true,
subList: allSubList
});
// this.initPageParams(labelIdList);
this.setAllLabelList(labelList);
this.setSubLabelList(allSubList);
this.setAllLabelListOrg(JSON.parse(JSON.stringify(labelList)));
this.setSubLabelListOrg(JSON.parse(JSON.stringify(allSubList)));
let searchParam = {
kind: 0,
orderBy: 2,
dir: 1,
grade: 0,
pageNo: 1,
pageSize: 10,
labelIdList: labelIdList || []
};
this.setSearchParam(searchParam);
};
this.setSearchParam(Object.assign({}, searchParam));
searchParam.kind = 1;
this.setSearchParamOrg(Object.assign({}, searchParam));
}
});
},
......
src/views/education/external-resource-manage copy 2.vue 0 → 100644
浏览文件 @ 7a1f8841
<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.doctorName" size="small" class="form-width" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="资源类型：" class="search-item">
<el-select v-model="searchForm.status" placeholder="请选择" size="small" class="form-width">
<el-option v-for="(item, index) in statusList" :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.doctorName" size="small" class="form-width" placeholder="请输入姓名"></el-input>
</el-form-item>
<!-- <el-form-item label="创建日期：" class="search-item" >
<el-input v-model="searchForm.doctorName" size="small" class="form-width" placeholder="请输入姓名"></el-input>
</el-form-item> -->
<el-form-item label="创建日期：" class="search-item">
<el-date-picker
v-model="searchForm.beginTime"
type="datetime"
size="small"
value-format="yyyy-MM-dd HH:mm:ss"
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="goToSearch(1)" type="primary" size="small">查询</el-button>
<el-button @click="goToReset" size="small">重置</el-button>
</el-form-item>
</el-row>
</el-form>
<!-- <div>
<el-button @click="goToAdd" type="primary" size="small" class="new-add">新增</el-button>
</div> -->
<el-table :data="tableData" border style="width: 100%">
<el-table-column align="center" prop="seq" label="资源名称"></el-table-column>
<el-table-column align="center" prop="doctorName" label="资源类型" ></el-table-column>
<el-table-column align="center" prop="doctorName" label="创建人" ></el-table-column>
<el-table-column align="center" prop="doctorName" label="创建日期" ></el-table-column>
<el-table-column align="center" prop="authName" label="状态" ></el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button @click="goToEdit(scope.row)" type="text" size="small"><span style="color: #449284;">查看</span></el-button>
<!-- <el-button @click="goToDelete(scope.row)" type="text" size="small">删除</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="hideAddEditForm"
:visible.sync="addEditVisible"
:close-on-click-modal="false"
width="600px"
center>
<el-form ref="addEditForm" :rules="rules" :model="addEditForm" label-width="120px">
<el-form-item label="拒绝原因：">
<el-radio-group v-model="addEditForm.doctorId">
<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="addEditForm.desc" maxlength="25" style="width: 310px;margin-top: 10px;"></el-input>
<span class="word-num">{{(addEditForm.desc).replace(/\s+/g,"").length}}/25</span>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="hideAddEditForm">取 消</el-button>
<el-button type="primary" @click="submitForm('addEditForm')">确 定</el-button>
</span>
</el-dialog>
<!-- 删除 弹窗 -->
<el-dialog
title="删除"
@close="hideDeleteFrom"
:visible.sync="deleteVisible"
:close-on-click-modal="false"
width="600px"
center>
<p style="text-align: center;">确定删除该权限？</p>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="confirmDelete">确 定</el-button>
<el-button @click="hideDeleteFrom">取 消</el-button>
</span>
</el-dialog>
<PreviewVideo :dialogVisible="isPreviewVideo" :videoUrl="videoUrl" @close="closeVideo"></PreviewVideo>
<PreviewPDF :dialogVisible="isPreviewPDF" :pdfUrl="pdfUrl" @close="closePDF"></PreviewPDF>
<PreviewProtocol :dialogVisible="isPreviewProtocol" :protocolId="protocolId" @close="closeProtocol"></PreviewProtocol>
<PreviewEditCourse :dialogVisible="isPreviewEditCourse" @close="closeEditCourse"></PreviewEditCourse>
<button @click="previewVideoAction">test video</button>
<button @click="previewPDFAction">test pdf</button>
<button @click="previewProtocolAction">test protocol</button>
<button @click="previewEditCourseAction">test course</button>
</div>
</template>
<script>
import { openLoading, closeLoading } from "../../utils/utils";
import BreadCrumb from "../../components/breadcrumb.vue";
import PreviewVideo from "@/components/education/custom-resource/preview-video";
import PreviewPDF from "@/components/education/custom-resource/preview-pdf";
import PreviewProtocol from "@/components/education/custom-resource/preview-protocol";
import PreviewEditCourse from "@/components/education/custom-resource/edit-course-dialog";
import * as commonUtil from "../../utils/utils";
import {
getAuthTableReq,
getUserListReq,
handleSaveEditReq,
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: {
doctorName: '',
status: '',
beginTime: '',
endTime: '',
pageNo: 1,
pageSize: 15,
},
addEditForm: {
desc: '',
doctorId: '',
status: '',
},
statusList: [{
name: '全部状态',
value: ''
},{
name: '待审核',
value: '1'
},{
name: '通过',
value: '2'
},{
name: '拒绝',
value: '3'
}], // 权限列表
tableData: [],
nameList: [],
rules: {
doctorId: [{ required: true, message: '请选择', trigger: 'blur' }],
status: [{ required: true, message: '请选择', trigger: 'blur' }],
},
isPreviewVideo: false,
videoUrl: '',
isPreviewPDF: false,
pdfUrl: '',
isPreviewProtocol: false,
protocolId: 0,
isPreviewEditCourse: false,
}
},
components: {
BreadCrumb,
PreviewVideo,
PreviewPDF,
PreviewProtocol,
PreviewEditCourse
},
created() {
this.goToSearch(1);
this.getUserList();
},
mounted() {
commonUtil.resizeHeight();
},
methods: {
// 打开预览课程弹框
previewVideoAction(videoUrl) {
this.videoUrl = 'http://10.177.11.169:9000/1584002682204479.mp4';
this.isPreviewVideo = true;
},
// 关闭预览课程弹框
closeVideo() {
this.isPreviewVideo = false;
},
// 打开预览PDF弹框
previewPDFAction(videoUrl) {
this.pdfUrl = 'http://10.177.11.169:9000/test.pdf';
this.isPreviewPDF = true;
},
// 关闭预览PDF弹框
closePDF() {
this.isPreviewPDF = false;
},
// 打开预览PDF弹框
previewProtocolAction() {
this.protocolId = 5;
this.isPreviewProtocol = true;
},
// 关闭预览协议弹框
closeProtocol() {
this.isPreviewProtocol = false;
},
// 打开编辑课程弹框
previewEditCourseAction() {
this.isPreviewEditCourse = true;
},
// 关闭编辑课程弹框
closeEditCourse() {
this.isPreviewEditCourse = false;
},
// 搜索
goToSearch(pageNo) {
if(pageNo){ // 自定义第几页，不传则表示当前页
this.searchForm.pageNo = pageNo;
}
this.getAuthTable();
},
getAuthTable() {
let req = this.searchForm;
getAuthTableReq(req).then(res => {
if (res.code == "000000") {
// console.log('表格列表 ', res)
this.tableData = res.data.contentList;
this.totalRows = res.data.total;
} else {
this.$message(res.message);
}
}).catch(err => {
this.$message.error('请求失败');
});
},
// 重置
goToReset() {
this.searchForm = {
doctorName: '',
status: '',
pageNo: 1,
pageSize: 15,
};
},
// 新增
goToAdd() {
this.isAdd = true;
this.addEditVisible = true;
},
// 编辑
goToEdit(row) {
this.isAdd = false;
this.currentRow = row;
// console.log('编辑 ', row)
this.addEditVisible = true;
// 编辑回显状态
this.addEditForm = {
desc: '',
status: row.status,
doctorId: row.doctorId,
};
},
// 获取新增、编辑的用户列表
getUserList() {
let req = {};
getUserListReq(req).then(res => {
if (res.code == "000000") {
// console.log('获取用户列表 ', res)
this.nameList = res.data;
} else {
this.$message(res.message);
}
}).catch(err => {
this.$message.error('请求失败');
});
},
goToDelete(row) {
this.deleteVisible = true;
this.currentRow = row;
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
// alert('submit!');
this.handleSaveEdit();
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
handleSaveEdit() {
// 新增、编辑传参不同
// debugger;
let req = {};
if (this.isAdd) {
req = {
status: this.addEditForm.status,
doctorId: this.addEditForm.doctorId,
}
} else {
req = {
status: this.addEditForm.status,
doctorId: this.addEditForm.doctorId,
id: this.currentRow.id,
};
}
handleSaveEditReq(req).then(res => {
if (res.code == "000000") {
this.addEditVisible = false;
this.goToSearch();
// console.log('新增/编辑权限 ', res)
} else {
this.$message(res.message);
}
}).catch(err => {
this.$message.error('请求失败');
});
},
hideAddEditForm() {
this.addEditVisible = false;
this.resetForm('addEditForm');
this.addEditForm = {
desc: '',
doctorId: '',
status: '',
};
},
confirmDelete() {
// 调接口
let req = {
id: this.currentRow.id,
};
handleDeleteReq(req).then(res => {
if (res.code == "000000") {
// console.log('删除用户列表 ', res)
this.goToSearch();
this.deleteVisible = false;
} else {
this.$message(res.message);
}
}).catch(err => {
this.$message.error('请求失败');
});
},
hideDeleteFrom() {
this.deleteVisible = false;
},
handleSizeChange(val){
// console.log('handleSizeChange>>>')
this.searchForm.pageSize = val;
this.goToSearch(1);
},
handleCurrentChange(val){
// 切换当前页
this.searchForm.pageNo = val;
this.getAuthTable();
},
},
}
</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
浏览文件 @ 7a1f8841
......@@ -6,38 +6,36 @@
<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.doctorName" size="small" class="form-width" placeholder="请输入姓名"></el-input>
<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.status" placeholder="请选择" size="small" class="form-width">
<el-option v-for="(item, index) in statusList" :key="index" :label="item.name" :value="item.value"></el-option>
<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.doctorName" size="small" class="form-width" placeholder="请输入姓名"></el-input>
<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-input v-model="searchForm.doctorName" size="small" class="form-width" placeholder="请输入姓名"></el-input>
</el-form-item> -->
<el-form-item label="创建日期：" class="search-item">
<el-date-picker
v-model="searchForm.beginTime"
v-model="searchForm.createdTime"
type="datetime"
size="small"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择开始日期">
class="form-width"
value-format="yyyy-MM-dd"
placeholder="请选择创建日期">
</el-date-picker>
<span style="color: #DCDFE6;">—</span>
<!-- <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>
placeholder="请选择结束时间">
</el-date-picker> -->
</el-form-item>
<el-form-item class="btn-list">
<el-button @click="goToSearch(1)" type="primary" size="small">查询</el-button>
......@@ -49,11 +47,12 @@
<el-button @click="goToAdd" type="primary" size="small" class="new-add">新增</el-button>
</div> -->
<el-table :data="tableData" border style="width: 100%">
<el-table-column align="center" prop="seq" label="资源名称"></el-table-column>
<el-table-column align="center" prop="doctorName" label="资源类型" ></el-table-column>
<el-table-column align="center" prop="doctorName" label="创建人" ></el-table-column>
<el-table-column align="center" prop="doctorName" label="创建日期" ></el-table-column>
<el-table-column align="center" prop="authName" label="状态" ></el-table-column>
<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="goToEdit(scope.row)" type="text" size="small"><span style="color: #449284;">查看</span></el-button>
......@@ -130,11 +129,9 @@
</el-dialog>
<PreviewVideo :dialogVisible="isPreviewVideo" :videoUrl="videoUrl" @close="closeVideo"></PreviewVideo>
<PreviewPDF :dialogVisible="isPreviewPDF" :pdfUrl="pdfUrl" @close="closePDF"></PreviewPDF>
<PreviewProtocol :dialogVisible="isPreviewProtocol" :protocolId="protocolId" @close="closeProtocol"></PreviewProtocol>
<PreviewEditCourse :dialogVisible="isPreviewEditCourse" @close="closeEditCourse"></PreviewEditCourse>
<button @click="previewVideoAction">test video</button>
<button @click="previewPDFAction">test pdf</button>
<button @click="previewProtocolAction">test protocol</button>
<button @click="previewEditCourseAction">test course</button>
</div>
......@@ -144,13 +141,12 @@
import { openLoading, closeLoading } from "../../utils/utils";
import BreadCrumb from "../../components/breadcrumb.vue";
import PreviewVideo from "@/components/education/custom-resource/preview-video";
import PreviewPDF from "@/components/education/custom-resource/preview-pdf";
import PreviewProtocol from "@/components/education/custom-resource/preview-protocol";
import PreviewEditCourse from "@/components/education/custom-resource/edit-course-dialog";
import * as commonUtil from "../../utils/utils";
import {
getAuthTableReq,
getUserListReq,
// getUserListReq,
handleSaveEditReq,
handleDeleteReq,
} from '@/utils/cme/cmeApi'
......@@ -165,12 +161,13 @@
isAdd: true, // 新增或编辑状态：新增 true; 编辑 false
deleteVisible: false,
currentRow: null, // 当前行数据
searchForm: {
doctorName: '',
status: '',
beginTime: '',
endTime: '',
courseName: '',
checkStatus: '',
createdDoctorName: '',
createdTime: '',
// createdHospitalName: '',
// subjectName: '',
pageNo: 1,
pageSize: 15,
},
......@@ -179,19 +176,19 @@
doctorId: '',
status: '',
},
statusList: [{
checkStatusList: [{
name: '全部状态',
value: ''
value: '-1'
},{
name: '待审核',
value: '1'
value: '0'
},{
name: '通过',
value: '2'
value: '1'
},{
name: '拒绝',
value: '3'
}], // 权限列表
value: '2'
}],
tableData: [],
nameList: [],
rules: {
......@@ -202,9 +199,6 @@
isPreviewVideo: false,
videoUrl: '',
isPreviewPDF: false,
pdfUrl: '',
isPreviewProtocol: false,
protocolId: 0,
......@@ -215,20 +209,28 @@
components: {
BreadCrumb,
PreviewVideo,
PreviewPDF,
PreviewProtocol,
PreviewEditCourse
},
created() {
this.goToSearch(1);
this.getUserList();
// this.getUserList();
},
mounted() {
commonUtil.resizeHeight();
},
methods: {
// 查询列表
goToSearch() {
this.GET("contents/course/custom/check/v1/list", this.searchForm).then(res => {
if (res.code == "000000") {
// this.protocolInfo = res.data;
}
});
},
// 打开预览课程弹框
previewVideoAction(videoUrl) {
this.videoUrl = 'http://10.177.11.169:9000/1584002682204479.mp4';
......@@ -240,18 +242,7 @@
this.isPreviewVideo = false;
},
// 打开预览PDF弹框
previewPDFAction(videoUrl) {
this.pdfUrl = 'http://10.177.11.169:9000/test.pdf';
this.isPreviewPDF = true;
},
// 关闭预览PDF弹框
closePDF() {
this.isPreviewPDF = false;
},
// 打开预览PDF弹框
// 打开预览协议弹框
previewProtocolAction() {
this.protocolId = 5;
this.isPreviewProtocol = true;
......@@ -273,31 +264,32 @@
},
// 搜索
goToSearch(pageNo) {
if(pageNo){ // 自定义第几页，不传则表示当前页
this.searchForm.pageNo = pageNo;
}
this.getAuthTable();
},
getAuthTable() {
let req = this.searchForm;
getAuthTableReq(req).then(res => {
if (res.code == "000000") {
// console.log('表格列表 ', res)
this.tableData = res.data.contentList;
this.totalRows = res.data.total;
} else {
this.$message(res.message);
}
}).catch(err => {
this.$message.error('请求失败');
});
},
// goToSearch(pageNo) {
// if(pageNo){ // 自定义第几页，不传则表示当前页
// this.searchForm.pageNo = pageNo;
// }
// this.getAuthTable();
// },
// getAuthTable() {
// let req = this.searchForm;
// getAuthTableReq(req).then(res => {
// if (res.code == "000000") {
// // console.log('表格列表 ', res)
// this.tableData = res.data.contentList;
// this.totalRows = res.data.total;
// } else {
// this.$message(res.message);
// }
// }).catch(err => {
// this.$message.error('请求失败');
// });
// },
// 重置
goToReset() {
this.searchForm = {
doctorName: '',
courseName: '',
status: '',
pageNo: 1,
pageSize: 15,
......@@ -321,22 +313,21 @@
status: row.status,
doctorId: row.doctorId,
};
},
// 获取新增、编辑的用户列表
getUserList() {
let req = {};
getUserListReq(req).then(res => {
if (res.code == "000000") {
// console.log('获取用户列表 ', res)
this.nameList = res.data;
} else {
this.$message(res.message);
}
}).catch(err => {
this.$message.error('请求失败');
});
},
// // 获取新增、编辑的用户列表
// getUserList() {
// let req = {};
// getUserListReq(req).then(res => {
// if (res.code == "000000") {
// this.nameList = res.data;
// } else {
// this.$message(res.message);
// }
// }).catch(err => {
// this.$message.error('请求失败');
// });
// },
goToDelete(row) {
this.deleteVisible = true;
......@@ -377,7 +368,7 @@
handleSaveEditReq(req).then(res => {
if (res.code == "000000") {
this.addEditVisible = false;
this.goToSearch();
// this.goToSearch();
// console.log('新增/编辑权限 ', res)
} else {
this.$message(res.message);
......@@ -403,7 +394,7 @@
handleDeleteReq(req).then(res => {
if (res.code == "000000") {
// console.log('删除用户列表 ', res)
this.goToSearch();
// this.goToSearch();
this.deleteVisible = false;
} else {
this.$message(res.message);
......@@ -418,7 +409,7 @@
handleSizeChange(val){
// console.log('handleSizeChange>>>')
this.searchForm.pageSize = val;
this.goToSearch(1);
// this.goToSearch(1);
},
handleCurrentChange(val){
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或