Skip to content

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

自定义课程

上级 def33f99
隐藏空白字符变更
内嵌 并排
正在显示 包含 2522 行增加 和 70 行删除
package.json
浏览文件 @ 5af7db42
...@@ -36,6 +36,7 @@ ...@@ -36,6 +36,7 @@
"vue-infinite-scroll": "^2.0.2", "vue-infinite-scroll": "^2.0.2",
"vue-router": "^2.1.1", "vue-router": "^2.1.1",
"vue-ueditor-wrap": "^2.4.1", "vue-ueditor-wrap": "^2.4.1",
"vuedraggable": "^2.23.2",
"vuex": "^2.0.0" "vuex": "^2.0.0"
}, },
"devDependencies": { "devDependencies": {
......
src/components/education/custom/course-list.vue 0 → 100644
浏览文件 @ 5af7db42
<template>
<div class="course-list-wrapper">
<ul class="course-header">
<li class="title">
<span class="main">全部课程</span>
<span class="sub">单个项目最多只能选择30个课程</span>
</li>
<li class="order">
<div class="num" @click="toggleOrder">
<span>学习人数</span>
<img v-show="isRise" src="../../../assets/custom/icon/icon-rise.png" alt />
<img v-show="!isRise" src="../../../assets/custom/icon/icon-drop.png" alt />
</div>
<div class="cart-wrapper">
<div class="cart" @click="toggleCart">
<span>已选课程</span>
<img src="../../../assets/custom/icon/icon-cart.png" alt />
<div class="count">
<span>{{cartList.length}}</span>
</div>
</div>
<div v-show="isShowCart" class="curt-position">
<ShoppingCart @close="toggleCart"></ShoppingCart>
</div>
</div>
</li>
</ul>
<div class="list-wrapper">
<ul class="list">
<li
class="course"
v-for="(item, index) in courseList.list"
:key="index"
@click="toggleChecked(item)"
>
<div class="img">
<img src="../../../assets/custom/test.png" alt />
<span class="level">{{item.typeStr}}</span>
</div>
<div class="detail">
<span class="title">{{item.courseName | shortName}}</span>
<div class="chapter">
<span>{{item.docName}}</span><span class="section-num">{{item.chapterSum}}章{{item.lectureNum}}节 {{item.totalTime}}分</span><span v-if="true" class="exam-num">5场考试</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" alt />
</li>
</ul>
</div>
<div class="page-wrapper">
<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>
<!-- 弹框提示 -->
<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,
isShowCart: false,
dialogObj: {
title: '课程数量已达上限',
visible: false,
message: '单个项目最多只能选择30个课程',
// tip: '单个项目最多只能选择30个课程',
hideMsg: '我知道了'
}
};
},
computed: {
...mapGetters(['cartList', 'courseList', 'searchParam'])
},
components: {
ShoppingCart,
dialogComponet: dialog,
},
methods: {
...mapActions(['setCartList', 'setSeachParam']),
toggleOrder() {
this.isRise = !this.isRise;
let dir = this.isRise ? 1 : 2;
this.searchParam.dir = dir;
this.setSeachParam(this.searchParam);
},
toggleCart() {
this.isShowCart = !this.isShowCart;
},
// 选择当前分页个数
handleSizeChange(val) {
this.searchParam.pageSize = val;
this.setSeachParam(this.searchParam);
},
// 选择当前分页
handleCurrentChange(val) {
this.searchParam.pageNo = val;
this.setSeachParam(this.searchParam);
},
// 选择课程（并要处理过滤，删除等）
toggleChecked(item) {
item.checked = !item.checked;
if(item.checked) {
if(this.cartList.length >= 30) {
item.checked = !item.checked;
this.dialogObj.visible = true;
return;
}
this.cartList.push(item);
} else {
let delItemIndex = this.cartList.findIndex( course => {
return course.courseId == item.courseId;
})
this.cartList.splice(delItemIndex, 1);
}
},
}
};
</script>
<style lang="less" scoped>
.course-list-wrapper {
padding: 0 30px;
min-width: 1180px;
max-width: 1600px;
.course-header {
display: flex;
flex-direction: row;
height: 78px;
// line-height: 78px;
align-items: center;
margin-right: 30px;
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 {
display: flex;
flex-direction: row;
align-items: center;
font-size: 14px;
color: #333333;
img {
position: relative;
top: 2px;
width: 14px;
height: 14px;
}
.num {
margin-right: 30px;
}
.cart-wrapper {
position: relative;
.cart {
position: relative;
.count {
position: absolute;
height: 20px;
top: -8px;
right: -12px;
display: inline-block;
span {
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: space-between;
justify-content: flex-start;
flex-wrap: wrap;
padding-bottom: 30px;
// min-height: 1200px;
// max-height: 1200px;
overflow-y: auto;
.course {
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);
.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 {
float: right;
margin: 10px 0;
margin-right: 230px;
}
}
</style>
\ No newline at end of file
src/components/education/custom/custom-select.vue → src/components/education/custom/course-select.vue
浏览文件 @ 5af7db42
...@@ -2,14 +2,14 @@ ...@@ -2,14 +2,14 @@
<div class="custom-select-wrapper"> <div class="custom-select-wrapper">
<div class="department-label"> <div class="department-label">
<span <span
v-for="(item, index) in dataList" v-for="(item, index) in allLabelList"
:key="index" :key="index"
class="item" class="item"
:class="{checked: item.checked}" :class="{checked: item.checked}"
@click="selectLabel(index)" @click="selectLabel(index)"
> >
<span class="split" :class="{acitve: item.checked}"></span>
{{item.name}} {{item.name}}
<span class="split"></span>
</span> </span>
</div> </div>
...@@ -20,10 +20,13 @@ ...@@ -20,10 +20,13 @@
<span class="name active">全部</span> <span class="name active">全部</span>
</div> </div>
<div class="check-list"> <div class="check-list">
<el-checkbox-group v-model="checkList" @change="handleClassChange"> <el-checkbox-group v-model="checkList" @change="handleClassChange">
<el-checkbox v-for="(item, index) in courseLevel" :label="item.name" :key="index">{{item.name}}</el-checkbox> <el-checkbox
v-for="(item, index) in subLabelList"
:label="item.id"
:key="index"
>{{item.name}}</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
<!-- <el-checkbox-group v-model="checkList"> <!-- <el-checkbox-group v-model="checkList">
...@@ -53,17 +56,17 @@ ...@@ -53,17 +56,17 @@
<el-checkbox label="复选框 C"></el-checkbox> <el-checkbox label="复选框 C"></el-checkbox>
<el-checkbox label="禁用"></el-checkbox> <el-checkbox label="禁用"></el-checkbox>
<el-checkbox label="选中且禁用"></el-checkbox> <el-checkbox label="选中且禁用"></el-checkbox>
</el-checkbox-group> --> </el-checkbox-group>-->
</div> </div>
<div class="right"></div> <div class="right"></div>
</div> </div>
<!-- 课程等级 --> <!-- 课程等级 -->
<div class="course-level"> <div class="course-level">
<span class="title">课程等级</span> <span class="title">课程等级</span>
<span <span
class="item" class="item"
v-for="(item, index) in courseLevel" v-for="(item, index) in courseLevel"
:key="index" :key="index"
@click="selectLevel(index)" @click="selectLevel(index)"
> >
...@@ -73,12 +76,12 @@ ...@@ -73,12 +76,12 @@
<div class="button-wrapper"> <div class="button-wrapper">
<el-button class="add-button" size="small" type="primary">查 询</el-button> <el-button class="add-button" size="small" type="primary">查 询</el-button>
<el-button class="add-button" size="small">重 置</el-button> <el-button class="add-button" plain size="small">重 置</el-button>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { mapGetters, mapActions } from 'vuex'
export default { export default {
data() { data() {
return { return {
...@@ -88,7 +91,7 @@ export default { ...@@ -88,7 +91,7 @@ export default {
{ name: "中级", value: 2, checked: false }, { name: "中级", value: 2, checked: false },
{ name: "高级", value: 3, checked: false } { name: "高级", value: 3, checked: false }
], ],
checkList: [] checkList: [431, 441]
}; };
}, },
props: { props: {
...@@ -152,12 +155,19 @@ export default { ...@@ -152,12 +155,19 @@ export default {
} }
} }
}, },
computed: {
...mapGetters(['allLabelList', 'subLabelList'])
},
components: {},
methods: { methods: {
...mapActions(['setSubLabelList']),
selectLabel(index) { selectLabel(index) {
this.dataList.forEach(element => { this.allLabelList.forEach(element => {
element.checked = false; element.checked = false;
}); });
this.dataList[index].checked = true; this.allLabelList[index].checked = true;
let subLabelList = this.allLabelList[index].subList;
this.setSubLabelList(subLabelList);
}, },
selectLevel(index) { selectLevel(index) {
this.courseLevel.forEach(element => { this.courseLevel.forEach(element => {
...@@ -168,7 +178,7 @@ export default { ...@@ -168,7 +178,7 @@ export default {
handleClassChange() { handleClassChange() {
// let checkedCount = value.length; // let checkedCount = value.length;
// this.checkAll = checkedCount === this.cities.length; // this.checkAll = checkedCount === this.cities.length;
// this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length; // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
} }
} }
}; };
...@@ -183,6 +193,7 @@ export default { ...@@ -183,6 +193,7 @@ export default {
border-bottom: 2px solid #449284; border-bottom: 2px solid #449284;
border-radius: 6px 6px 0px 0px; border-radius: 6px 6px 0px 0px;
.item { .item {
cursor: pointer;
position: relative; position: relative;
z-index: 1; z-index: 1;
display: inline-block; display: inline-block;
...@@ -198,16 +209,21 @@ export default { ...@@ -198,16 +209,21 @@ export default {
border-radius: 6px 0px 0px 0px; border-radius: 6px 0px 0px 0px;
} }
} }
// .split { .split {
// position: absolute; position: absolute;
// top: 4px; top: 14px;
// right: 0px; left: 0px;
// z-index: 2; z-index: 2;
// display: inline-block; display: inline-block;
// height: 20px; height: 20px;
// width: 1px; width: 1px;
// background: #C7C8C9; background: #c7c8c9;
// } }
.item:nth-child(1) > .split,
.item.checked + .item > .split,
.split.acitve {
display: none;
}
} }
} }
.course-level { .course-level {
...@@ -218,13 +234,14 @@ export default { ...@@ -218,13 +234,14 @@ export default {
line-height: 56px; line-height: 56px;
padding-left: 20px; padding-left: 20px;
// margin: 16px 0 16px 20px; // margin: 16px 0 16px 20px;
border-bottom: 1px dotted #E4E7ED; border-bottom: 1px dotted #e4e7ed;
.title { .title {
display: inline-block; display: inline-block;
padding: 0 10px; padding: 0 10px;
color: #999999; color: #999999;
} }
.item { .item {
cursor: pointer;
display: inline-block; display: inline-block;
margin: 0 5px; margin: 0 5px;
color: #333333; color: #333333;
...@@ -233,13 +250,12 @@ export default { ...@@ -233,13 +250,12 @@ export default {
line-height: 26px; line-height: 26px;
display: inline-block; display: inline-block;
padding: 0px 10px; padding: 0px 10px;
border-radius:2px; border-radius: 2px;
&.active { &.active {
color: #fff; color: #fff;
background: #449284; background: #449284;
} }
} }
} }
} }
...@@ -250,7 +266,7 @@ export default { ...@@ -250,7 +266,7 @@ export default {
padding: 10px 0; padding: 10px 0;
padding-left: 20px; padding-left: 20px;
// margin: 16px 0 16px 20px; // margin: 16px 0 16px 20px;
border-bottom: 1px dashed #E4E7ED; border-bottom: 1px dashed #e4e7ed;
.title { .title {
height: 56px; height: 56px;
line-height: 56px; line-height: 56px;
...@@ -259,6 +275,7 @@ export default { ...@@ -259,6 +275,7 @@ export default {
color: #999999; color: #999999;
} }
.item { .item {
cursor: pointer;
height: 56px; height: 56px;
line-height: 56px; line-height: 56px;
display: inline-block; display: inline-block;
...@@ -269,17 +286,16 @@ export default { ...@@ -269,17 +286,16 @@ export default {
line-height: 26px; line-height: 26px;
display: inline-block; display: inline-block;
padding: 0px 10px; padding: 0px 10px;
border-radius:2px; border-radius: 2px;
margin-right: 16px; margin-right: 16px;
&.active { &.active {
color: #fff; color: #fff;
background: #449284; background: #449284;
} }
} }
} }
.check-list { .check-list {
margin-top: 14px;; margin-top: 14px;
margin-right: 80px; margin-right: 80px;
flex: 1; flex: 1;
} }
......
src/components/education/custom/custom-baseinfo-templateMessage.vue 0 → 100644
浏览文件 @ 5af7db42
<!--基础信息-->
<template>
<div class="base-message-wrap">
<el-form
ref="formData"
:model="formData"
:rules="rules"
label-width="150px"
class="basic-form"
>
<el-form-item label="项目名称：" prop="projectName">
<el-col :span="13">
<el-input
size="small"
v-model="formData.projectName"
placeholder="请输入项目名称"
style="width:70%;"
ref="projectName"
maxlength="24"
:disabled="isPreview==1"
></el-input>
<span class="word-num">{{(formData.projectName).replace(/\s+/g,"").length}}/24</span>
</el-col>
</el-form-item>
<el-form-item label="发起机构名称：">
<el-col :span="13" v-for="(item, index) in formData.organizationNameList" :key="index">
<el-input
size="small"
v-model="formData.organizationNameList[index]"
placeholder="请输入发起机构名称"
style="width:70%;"
maxlength=16
@input="changeOrganizationName"
@blur = "blurName"
@focus = "focusName(index)"
:disabled="isPreview==1"
></el-input>
<span class="word-num">{{(formData.organizationNameList[index]).replace(/\s+/g,"").length}}/16</span>
<img @click="plusOrg(index)" class="edit-img" src="../../../assets/image/plus.png" v-if="isPreview!=1"/>
<img @click="deleteOrg(index)" v-if="index >= 1 && isPreview!=1" class="edit-img" src="../../../assets/image/trash.png" />
</el-col>
<el-popover
v-if="formData.creatorOrganizationName"
class="popover-content" :style="{'top': orgListIndex * 41 + 'px'}"
placement="bottom"
:content="organizationContent"
v-model="visibleName"
@click="checkDefault">
<p @click="checkDefault"> 我的机构： {{ formData.creatorOrganizationName }} </p>
</el-popover>
</el-form-item>
<div>
<el-form-item label="项目时间：" required>
<el-col :span="5">
<el-form-item prop="projectBegintime">
<el-date-picker
v-model="formData.projectBegintime"
size="small"
type="datetime"
placeholder="请选择开始时间"
value-format="yyyy/MM/dd HH:mm:ss"
format="yyyy/MM/dd HH:mm:ss"
:picker-options="pickerOptions0"
style="width: 100%;"
:disabled="formData.status4Flag == 1 || isPreview==1"
></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="1">~</el-col>
<el-col :span="5">
<el-form-item label prop="projectEndtime">
<el-date-picker
v-model="formData.projectEndtime"
size="small"
type="datetime"
placeholder="请选择结束时间"
value-format="yyyy/MM/dd HH:mm:ss"
format="yyyy/MM/dd HH:mm:ss"
:picker-options="pickerOptions1"
default-time="00:00:00"
style="width: 100%;"
:disabled="isPreview==1"
></el-date-picker>
</el-form-item>
</el-col>
</el-form-item>
<p class="time-message"><i class="el-icon-warning-outline"></i>项目有效期为{{formData.expireDay}}天,选择项目起止时间须在有效期内</p>
</div>
<div class="basic-item-icon">
<span class="require">*</span>
<el-form-item label="列表图片：">
<el-upload
v-model="formData.attachmentUrl1"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadListPic"
disabled
>
<img v-if="formData.attachmentUrl1" @mouseover.stop="imgMouseOver=true" :src="formData.attachmentUrl1" class="bg-img">
<img
v-if="!formData.attachmentUrl1"
class="bg-img"
src="../../../assets/image/small.png"
>
<div class="img-delete" v-show="imgMouseOver && false" @click.stop="deleteImg(1)" @mouseout.stop="imgMouseOver=false"><i class="el-icon-delete"></i></div>
<div class="limit-text">
<p>尺寸:230*172</p>
<p>限制大小: 500Kb</p>
<p>支持.jpg,.png格式</p>
</div>
</el-upload>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="封面类型：">
<el-radio-group
size="small"
v-model="formData.type"
@change="changeCover"
disabled
>
<el-radio :label="1">图片</el-radio>
<el-radio :label="2">视频</el-radio>
</el-radio-group>
</el-form-item>
<div class="basic-item-icon">
<span class="require">*</span>
<el-form-item label="封面文件：">
<el-upload
v-model="formData.attachmentUrl2"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadCoverPic"
disabled
>
<img
v-if="formData.type == 1 && formData.attachmentUrl2"
:src="formData.attachmentUrl2"
@mouseover.stop="imgMouseOver2=true"
class="bg-img"
>
<video
v-if="formData.type == 2 && formData.attachmentUrl2"
width="100"
controls
class="bg-video"
@mouseover.stop="imgMouseOver2=true"
>
<source :src="formData.attachmentUrl2" type="video/mp4">浏览器不支持mp4
</video>
<img
v-if="!formData.attachmentUrl2"
class="bg-img"
src="../../../assets/image/small.png"
>
<div class="img-delete" v-show="imgMouseOver2 && false" @click.stop="deleteImg(2)" @mouseout.stop="imgMouseOver2=false"><i class="el-icon-delete"></i></div>
<div v-show="formData.type == 1" class="limit-text">
<p>尺寸:750*420</p>
<p>限制大小: 2.0 Mb</p>
<p>支持.jpg,.png格式</p>
</div>
<div v-show="formData.type == 2" class="limit-text">
<p></p>
<p>限制大小: 500 Mb</p>
<p>支持.mp4</p>
</div>
</el-upload>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage2">请选择封面</p>
</div>
<el-form-item label="项目简介：" prop="projectIntro">
<el-col :span="13">
<el-input
size="small"
type="textarea"
:autosize="{ minRows: 5}"
placeholder="请输入项目简介"
v-model="formData.projectIntro"
style="width:83%;"
:disabled="isPreview==1"
></el-input>
<span class="word-num">{{(formData.projectIntro).replace(/\s+/g,"").length}}/200</span>
</el-col>
</el-form-item>
</el-form>
<dialog-componet :dialogObj="dialogObj" @confirm="confirm" @hide="hide"></dialog-componet>
</div>
</template>
<script>
import { doUpload, getFilePath } from "../../../utils/qiniu-util";
import { openLoading, closeLoading } from "../../../utils/utils";
import { convertTime } from "../../../utils";
import dialog from "./dialog";
let vm = null;
export default {
props: {
openTemplateId: {
type: String | Number,
default: ''
},
projectId: {
type: String | Number,
default: ''
},
editor: {
type: Boolean,
default: false
}
},
data() {
let checkProjectStr = (rule, value, callback) => {
if (value.indexOf("\\") != -1) {
//存在
callback(new Error("请勿输入字符“ \\ ”"));
} else if (value.indexOf(".") != -1) {
callback(new Error("请勿输入字符“ . ”"));
} else {
callback();
}
};
let checkUserTime= (rule, value, callback) => {
if (value> 1000 || value < 1) {
callback(new Error("输入长度为1-1000的有效期"));
} else {
callback();
}
};
return {
visibleName: false, //是否显示机构提示
orgListIndex: 1,
organizationContent: '',//机构名称
formData: {
id: "", //项目 id 26
projectName: "", //开放模板名称
projectBegintime: "", //模板开始时间
projectEndtime: "", //模板结束时间
projectIntro: "", //开放模板简介
projectType: 3, //类型
type: 1, //封面类型 1图片2视频
projectStatus: 1, //1.草稿 2.未上架 3.审核中/待审核 4.已上架 5.已下架 6.已拒绝/未上架
expireDay: 1, //模板有效期（天）
status4Flag: 0, //0表示没有上过架，1表示上过架
attachmentUrl1: "",
attachmentUrl2: "",
attachmentUrl3: "",
attachmentMore1: {
attachmentExt: "",
attachmentName: "",
attachmentSize: 0
},
attachmentMore2: {
attachmentExt: "",
attachmentName: "",
attachmentSize: 0
},
organizationName: "", // 发起机构名称（多个机构拼接
organizationNameList: [''] //发起机构列表
},
attachmentModel:[ //基础信息的图片视频
{
attachmentExt: '',// 附件格式
attachmentName: '',//附件名称
attachmentSize:'',//附件大小,
attachmentType: 1,//1：图片 2：视频 3：pdf
attachmentUrl: '',//附件链接
id: '', //关联唯一ID
kind: 1, //1：列表图片 2：封面配置 3：附件配置
openTemplateId: ''//开放模板id
},
{
attachmentExt: '',// 附件格式
attachmentName: '',//附件名称
attachmentSize:'',//附件大小,
attachmentType: 1,//1：图片 2：视频 3：pdf
attachmentUrl: '',//附件链接
id: '', //关联唯一ID
kind: 1, //1：列表图片 2：封面配置 3：附件配置
openTemplateId: ''//开放模板id
}
],
pickerOptions0: {
disabledDate: time => {
if (
vm.formData.projectEndtime != "" &&
vm.formData.projectEndtime != null
) {
return (
time.getTime() > new Date(vm.formData.projectEndtime).getTime()
);
}
}
},
pickerOptions1: {
disabledDate: time => {
return (
// time.getTime() < new Date((vm.formData.projectBegintime).replace(/\-/g, '/')).getTime() || time.getTime() > new Date((vm.formData.projectBegintime).replace(/\-/g, '/')).getTime() + 1000 * 60 * 60 * 24 * vm.formData.expireDay
time.getTime() < new Date(vm.formData.projectBegintime).getTime() || time.getTime() > new Date(vm.formData.projectBegintime).getTime() + 1000 * 60 * 60 * 24 * vm.formData.expireDay
); //减去一天的时间代表可以选择同一天;
}
},
imgMouseOver: false,
imgMouseOver2: false,
uploadImgMessage: false,
uploadImgMessage2: false,
rules: {
projectName: [
{ required: true, message: "请输入项目名称" },
{
min: 2,
max: 24,
message: "输入长度为2-24的内容，可包含中英文、数字及特殊符号",
trigger: "blur"
},
{ validator: checkProjectStr, trigger: "blur" }
],
projectBegintime: [
{
required: true,
message: "请选择时间",
trigger: "change"
}
],
projectEndtime: [
{
required: true,
message: "请选择时间",
trigger: "change"
}
],
projectIntro: [
{ required: true, message: "请填写项目简介", trigger: "blur" },
{ min: 1, max: 200, message: "超出可输入的最大长度", trigger: "blur" }
]
},
disabled: true,
dialogObj: {
visible: false,
title: '该项目模版已下架',
tip: '',
message: '模版已下架，请重新选择其他项目模版',
confirmMsg: '取消',
hideMsg: '重新选择'
},
isPreview: 0
}
},
components: {
dialogComponet:dialog
},
created() {
vm = this;
vm.isPreview = vm.$route.query.isPreview ? vm.$route.query.isPreview : 0;
if (vm.editor) {
// 编辑时
vm.disabled = false;
vm.getEditorMessage()
} else{
// 创建时
vm.disabled = true;
vm.getMessage();
}
},
methods: {
// 设置已有的基本信息
setBaseMessage(data) {
data.projectData.projectBegintime = convertTime(data.projectData.projectBegintime);
data.projectData.projectEndtime = convertTime(data.projectData.projectEndtime);
vm.formData = Object.assign(vm.formData, data.projectData);
vm.formData.attachmentUrl1 = data.attachmentData[0].attachmentUrl;
vm.formData.attachmentMore1 = Object.assign(vm.formData.attachmentMore1, data.attachmentData[0]);
// 暂存为1 下一步为3
vm.formData.projectType = vm.formData.projectType == 0 ? 3 : vm.formData.projectType;
vm.formData.projectBegintime = vm.formData.projectBegintime ? new Date(vm.formData.projectBegintime) : '';
vm.formData.projectEndtime = vm.formData.projectBegintime ? new Date(vm.formData.projectEndtime) : '';
if (data.attachmentData[1]) {
vm.formData.attachmentUrl2 = data.attachmentData[1].attachmentUrl;
vm.formData.type = data.attachmentData[1].attachmentType;
vm.formData.attachmentMore2 = Object.assign(vm.formData.attachmentMore2, data.attachmentData[1]);
}
vm.$emit('setStatus4Flag',data.projectData.status4Flag)
},
// 获取选择模板后的基本信息
getMessage() {
openLoading(vm);
vm.GET(`portal/openTemplateProject/getOpenTemplateInfoForCreate/${vm.openTemplateId}`)
.then(res => {
closeLoading(vm);
if (res.code == "000000") {
let data = res.data;
data.projectData.organizationNameList = [data.projectData.creatorOrganizationName]
this.$emit('hideSave',res.data.projectData.projectStatus)
vm.setBaseMessage(res.data);
} else {
vm.$message.info(res.message);
}
})
.catch((err) => {
closeLoading(vm);
vm.$message.warning('请稍后重试');
});
},
// 获取编辑时的信息
getEditorMessage() {
openLoading(vm);
vm.GET(`portal/portalInfo/getProjectInfo/${vm.projectId}`)
.then(res => {
closeLoading(vm);
if (res.code == "000000") {
this.$emit('hideSave',res.data.projectData.projectStatus)
vm.setBaseMessage(res.data)
} else {
vm.$message.info(res.message);
}
})
.catch((err) => {
closeLoading(vm);
vm.$message.warning('请稍后重试');
});
},
// 增加发起机构
plusOrg(index) {
vm.formData.organizationNameList.splice(index + 1, 0, '');
},
// 删除发起机构
deleteOrg(index) {
vm.formData.organizationNameList.splice(index, 1);
},
// 机构名称输入
changeOrganizationName() {
let textLength = vm.formData.organizationName.length;
// 机构输入提示显示与否
vm.visibleName = textLength == 0;
},
// 离开机构名称焦点
blurName() {
vm.visibleName = false;
setTimeout(() => {
vm.submitForm("formData");
}, 200);
},
// 机构名称聚焦
focusName(index) {
let textLength = vm.formData.organizationNameList[index].length;
if (textLength == 0) {
vm.orgListIndex = index + 1;
vm.visibleName = true;
} else {
vm.visibleName = false;
}
},
// 机构选择默认值
checkDefault() {
vm.organizationContent = vm.formData.creatorOrganizationName;
vm.formData.organizationNameList.splice(vm.orgListIndex-1, 1, vm.organizationContent);
vm.visibleName = false;
},
//上传列表图片
beforeUploadListPic(file) {
let fileLimit = {
width: 230,
height: 172,
size: 0.5,
sizeText: "500K",
key: "attachmentUrl1",
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;
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 (
_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.attachmentUrl1 = "";
vm.imgMouseOver = false;
} else {
vm.formData.attachmentUrl2 = "";
vm.imgMouseOver2 = false;
}
},
//改变封面类型
changeCover(radio) {
vm.formData.attachmentUrl2 = "";
},
//上传封面图片
beforeUploadCoverPic(file) {
let fileLimit = {
width: 750,
height: 420,
size: 2,
sizeText: "2.0M",
key: "attachmentUrl2",
more: "attachmentMore2",
show: "uploadImgMessage2"
};
if (vm.formData.type == 1) {
vm.beforeAvatarUpload(file, fileLimit);
} else {
vm.beforeUploadMp4(file);
}
},
//上传mp4
beforeUploadMp4(file) {
console.log(file);
const isMP4 = file.type === "video/mp4";
const isLt = file.size / 1024 / 1024 < 500;
if (!isLt) {
vm.$message.error("视频不符合规范，请根据规范上传视频");
return;
}
if (!isMP4) {
vm.$message.error("视频不符合规范，请根据规范上传视频");
} else {
openLoading(vm);
doUpload(
vm,
file,
getFilePath(file, null),
"preview4",
"progress1",
""
).then(function(path) {
closeLoading(vm);
console.log(path);
vm.uploadImgMessage2 = false;
vm.formData.attachmentUrl2 = path.fullPath;
vm.$message.success("上传成功");
});
}
},
// 点击下一步
nextStep() {
let flag = true;
if (!vm.formData.attachmentUrl1) {
vm.uploadImgMessage = true;
flag = false;
} else {
vm.uploadImgMessage = false;
}
if (!vm.formData.attachmentUrl2) {
vm.uploadImgMessage2 = true;
flag = false;
} else {
vm.uploadImgMessage2 = false;
}
if (vm.submitForm('formData') && flag) {
vm.insertOrupdate();
}
},
// 暂存
save() {
if (vm.$refs['formData'].projectName == '') {
vm.$refs['formData'].validateField('projectName')
} else {
vm.insertOrupdate(1);
};
},
// 新增或者更新基本信息
insertOrupdate(status) {
if(new Date(vm.formData.projectEndtime).getTime() > new Date(vm.formData.projectBegintime).getTime() + 1000 * 60 * 60 * 24 * vm.formData.expireDay) {
vm.$message.warning('项目结束时间应在有效期内');
return;
}
if(new Date(vm.formData.projectEndtime).getTime() <= new Date(vm.formData.projectBegintime).getTime()) {
vm.$message.warning('项目结束时间应大于开始时间');
return;
}
vm.formData.projectBegintime = convertTime(vm.formData.projectBegintime, false);
vm.formData.projectEndtime = convertTime(vm.formData.projectEndtime, false);
if (status) {
vm.formData.projectStatus = status;
}
// 图片或者视频地址
vm.formData.attachmentMore1.attachmentUrl = vm.formData.attachmentUrl1;
vm.formData.attachmentMore2.attachmentUrl = vm.formData.attachmentUrl2;
// 封面类型
vm.formData.attachmentMore2.attachmentType = vm.formData.type;
vm.formData.attachmentMore2.kind = 2;
//整合图片视频
vm.attachmentModel[0] = Object.assign(vm.attachmentModel[0],vm.formData.attachmentMore1);
vm.attachmentModel[1] = Object.assign(vm.attachmentModel[1],vm.formData.attachmentMore2);
let baseobj = {};
baseobj.projectModel = JSON.stringify(vm.formData);
baseobj.attachmentModel = JSON.stringify(vm.attachmentModel);
baseobj.attachmentPDFModel= null;
baseobj.notifyData= null;
openLoading(vm);
vm.POST("portal/portalInfo/insertOrUpdate", baseobj)
.then(res => {
closeLoading(vm);
if (res.code == "000000") {
// 暂存不会跳到下一页
if (status == 1) {
vm.$message.info('成功');
return;
}
// 下一步,并将项目id传递给父组件
vm.$emit('next',res.data.id);
} else if (res.code == "213061") {
vm.dialogObj.visible = true;
} else {
vm.$message.warning(res.message);
}
})
.catch((err) => {
vm.$message({
type: "warning",
message: res.message
});
})
},
//表单校验
submitForm(formName) {
let flag = null;
vm.$refs[formName].validate(valid => {
if (valid) {
flag = true;
} else {
flag = false;
}
});
return flag;
},
// 取消
confirm() {
vm.dialogObj.visible = false;
},
// 确定
hide() {
vm.dialogObj.visible = false;
vm.$emit('backSelectVue')
}
}
}
</script>
<style >
.subject-slelct .el-input__inner {
height: 32px;
line-height: 32px;
}
</style>
<style lang="scss" scoped>
.base-message-wrap {
padding-top: 80px;
.p_label {
margin-left: 56px;
font-size: 12px;
color: #606266;
}
.edit-img {
width: 20px;
height: 20px;
vertical-align: middle;
margin-left: 10px;
}
.day-btn {
display: inline-block;
width: 50px;
height: 32px;
line-height: 32px;
background: #838683;
text-align: center;
margin-left: -3px;
border-radius: 0 4px 4px 0;
z-index: 100;
}
.basic-item-icon {
position: relative;
.require {
position: absolute;
left: 67px;
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;
}
.line {
margin-left: 10px;
width: 20px;
}
.bg-uploader {
img {
float: left;
}
.bg-img {
width: 84px;
height: 100px;
}
.bg-video {
float: left;
width: 84px;
height: 100px;
}
.limit-text {
float: left;
margin-left: 10px;
margin-top: -10px;
p {
font-size: 12px;
color: #999;
}
}
}
.el-upload__tip {
position: absolute;
top: -6px;
left: 130px;
}
.choose-button {
background: #fff;
color: #409eff;
border: 1px solid #409eff;
}
.el-popover--plain {
padding: 18px 20px;
top: 40px;
}
.ueitem {
position: relative;
}
.ue-warp {
position: absolute;
width: 80%;
height: 100%;
background: #F5F7FA;
opacity: 0.5;
top: 0;
z-index: 1000;
}
}
.el-form-item__content {
width: 100%;
height: 100%;
background: red;
}
.popover-content {
position: relative;
top: 0;
left: 0;
}
.time-message {
margin: -6px 0 20px 150px;
font-size: 14px;
}
</style>
\ No newline at end of file
src/components/education/custom/custom-baseinfo.vue 0 → 100644
浏览文件 @ 5af7db42
<!--基础信息-->
<template>
<div class="base-message-wrap">
<el-form
ref="formData"
:model="formData"
:rules="rules"
label-width="150px"
class="basic-form"
>
<el-form-item label="项目名称：" prop="projectName">
<el-col :span="13">
<el-input
size="small"
v-model="formData.projectName"
placeholder="请输入项目名称"
style="width:70%;"
ref="projectName"
maxlength="24"
:disabled="isPreview==1"
></el-input>
<span class="word-num">{{(formData.projectName).replace(/\s+/g,"").length}}/24</span>
</el-col>
</el-form-item>
<el-form-item label="发起机构名称：">
<el-col :span="13" v-for="(item, index) in formData.organizationNameList" :key="index">
<el-input
size="small"
v-model="formData.organizationNameList[index]"
placeholder="请输入发起机构名称"
style="width:70%;"
maxlength=16
@input="changeOrganizationName"
@blur = "blurName"
@focus = "focusName(index)"
:disabled="isPreview==1"
></el-input>
<span class="word-num">{{(formData.organizationNameList[index]).replace(/\s+/g,"").length}}/16</span>
<img @click="plusOrg(index)" class="edit-img" src="../../../assets/image/plus.png" v-if="isPreview!=1"/>
<img @click="deleteOrg(index)" v-if="index >= 1 && isPreview!=1" class="edit-img" src="../../../assets/image/trash.png" />
</el-col>
<el-popover
v-if="formData.creatorOrganizationName"
class="popover-content" :style="{'top': orgListIndex * 41 + 'px'}"
placement="bottom"
:content="organizationContent"
v-model="visibleName"
@click="checkDefault">
<p @click="checkDefault"> 我的机构： {{ formData.creatorOrganizationName }} </p>
</el-popover>
</el-form-item>
<div>
<el-form-item label="项目时间：" required>
<el-col :span="5">
<el-form-item prop="projectBegintime">
<el-date-picker
v-model="formData.projectBegintime"
size="small"
type="datetime"
placeholder="请选择开始时间"
value-format="yyyy/MM/dd HH:mm:ss"
format="yyyy/MM/dd HH:mm:ss"
:picker-options="pickerOptions0"
style="width: 100%;"
:disabled="formData.status4Flag == 1 || isPreview==1"
></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="1">~</el-col>
<el-col :span="5">
<el-form-item label prop="projectEndtime">
<el-date-picker
v-model="formData.projectEndtime"
size="small"
type="datetime"
placeholder="请选择结束时间"
value-format="yyyy/MM/dd HH:mm:ss"
format="yyyy/MM/dd HH:mm:ss"
:picker-options="pickerOptions1"
default-time="00:00:00"
style="width: 100%;"
:disabled="isPreview==1"
></el-date-picker>
</el-form-item>
</el-col>
</el-form-item>
<p class="time-message"><i class="el-icon-warning-outline"></i>项目有效期为{{formData.expireDay}}天,选择项目起止时间须在有效期内</p>
</div>
<div class="basic-item-icon">
<span class="require">*</span>
<el-form-item label="列表图片：">
<el-upload
v-model="formData.attachmentUrl1"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadListPic"
disabled
>
<img v-if="formData.attachmentUrl1" @mouseover.stop="imgMouseOver=true" :src="formData.attachmentUrl1" class="bg-img">
<img
v-if="!formData.attachmentUrl1"
class="bg-img"
src="../../../assets/image/small.png"
>
<div class="img-delete" v-show="imgMouseOver && false" @click.stop="deleteImg(1)" @mouseout.stop="imgMouseOver=false"><i class="el-icon-delete"></i></div>
<div class="limit-text">
<p>尺寸:230*172</p>
<p>限制大小: 500Kb</p>
<p>支持.jpg,.png格式</p>
</div>
</el-upload>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="封面类型：">
<el-radio-group
size="small"
v-model="formData.type"
@change="changeCover"
disabled
>
<el-radio :label="1">图片</el-radio>
<el-radio :label="2">视频</el-radio>
</el-radio-group>
</el-form-item>
<div class="basic-item-icon">
<span class="require">*</span>
<el-form-item label="封面文件：">
<el-upload
v-model="formData.attachmentUrl2"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadCoverPic"
disabled
>
<img
v-if="formData.type == 1 && formData.attachmentUrl2"
:src="formData.attachmentUrl2"
@mouseover.stop="imgMouseOver2=true"
class="bg-img"
>
<video
v-if="formData.type == 2 && formData.attachmentUrl2"
width="100"
controls
class="bg-video"
@mouseover.stop="imgMouseOver2=true"
>
<source :src="formData.attachmentUrl2" type="video/mp4">浏览器不支持mp4
</video>
<img
v-if="!formData.attachmentUrl2"
class="bg-img"
src="../../../assets/image/small.png"
>
<div class="img-delete" v-show="imgMouseOver2 && false" @click.stop="deleteImg(2)" @mouseout.stop="imgMouseOver2=false"><i class="el-icon-delete"></i></div>
<div v-show="formData.type == 1" class="limit-text">
<p>尺寸:750*420</p>
<p>限制大小: 2.0 Mb</p>
<p>支持.jpg,.png格式</p>
</div>
<div v-show="formData.type == 2" class="limit-text">
<p></p>
<p>限制大小: 500 Mb</p>
<p>支持.mp4</p>
</div>
</el-upload>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage2">请选择封面</p>
</div>
<el-form-item label="项目简介：" prop="projectIntro">
<el-col :span="13">
<el-input
size="small"
type="textarea"
:autosize="{ minRows: 5}"
placeholder="请输入项目简介"
v-model="formData.projectIntro"
style="width:83%;"
:disabled="isPreview==1"
></el-input>
<span class="word-num">{{(formData.projectIntro).replace(/\s+/g,"").length}}/200</span>
</el-col>
</el-form-item>
</el-form>
<dialog-componet :dialogObj="dialogObj" @confirm="confirm" @hide="hide"></dialog-componet>
</div>
</template>
<script>
import { doUpload, getFilePath } from "../../../utils/qiniu-util";
import { openLoading, closeLoading } from "../../../utils/utils";
import { convertTime } from "../../../utils";
import dialog from "./dialog";
let vm = null;
export default {
props: {
openTemplateId: {
type: String | Number,
default: ''
},
projectId: {
type: String | Number,
default: ''
},
editor: {
type: Boolean,
default: false
}
},
data() {
let checkProjectStr = (rule, value, callback) => {
if (value.indexOf("\\") != -1) {
//存在
callback(new Error("请勿输入字符“ \\ ”"));
} else if (value.indexOf(".") != -1) {
callback(new Error("请勿输入字符“ . ”"));
} else {
callback();
}
};
let checkUserTime= (rule, value, callback) => {
if (value> 1000 || value < 1) {
callback(new Error("输入长度为1-1000的有效期"));
} else {
callback();
}
};
return {
visibleName: false, //是否显示机构提示
orgListIndex: 1,
organizationContent: '',//机构名称
formData: {
id: "", //项目 id 26
projectName: "", //开放模板名称
projectBegintime: "", //模板开始时间
projectEndtime: "", //模板结束时间
projectIntro: "", //开放模板简介
projectType: 3, //类型
type: 1, //封面类型 1图片2视频
projectStatus: 1, //1.草稿 2.未上架 3.审核中/待审核 4.已上架 5.已下架 6.已拒绝/未上架
expireDay: 1, //模板有效期（天）
status4Flag: 0, //0表示没有上过架，1表示上过架
attachmentUrl1: "",
attachmentUrl2: "",
attachmentUrl3: "",
attachmentMore1: {
attachmentExt: "",
attachmentName: "",
attachmentSize: 0
},
attachmentMore2: {
attachmentExt: "",
attachmentName: "",
attachmentSize: 0
},
organizationName: "", // 发起机构名称（多个机构拼接
organizationNameList: [''] //发起机构列表
},
attachmentModel:[ //基础信息的图片视频
{
attachmentExt: '',// 附件格式
attachmentName: '',//附件名称
attachmentSize:'',//附件大小,
attachmentType: 1,//1：图片 2：视频 3：pdf
attachmentUrl: '',//附件链接
id: '', //关联唯一ID
kind: 1, //1：列表图片 2：封面配置 3：附件配置
openTemplateId: ''//开放模板id
},
{
attachmentExt: '',// 附件格式
attachmentName: '',//附件名称
attachmentSize:'',//附件大小,
attachmentType: 1,//1：图片 2：视频 3：pdf
attachmentUrl: '',//附件链接
id: '', //关联唯一ID
kind: 1, //1：列表图片 2：封面配置 3：附件配置
openTemplateId: ''//开放模板id
}
],
pickerOptions0: {
disabledDate: time => {
if (
vm.formData.projectEndtime != "" &&
vm.formData.projectEndtime != null
) {
return (
time.getTime() > new Date(vm.formData.projectEndtime).getTime()
);
}
}
},
pickerOptions1: {
disabledDate: time => {
return (
// time.getTime() < new Date((vm.formData.projectBegintime).replace(/\-/g, '/')).getTime() || time.getTime() > new Date((vm.formData.projectBegintime).replace(/\-/g, '/')).getTime() + 1000 * 60 * 60 * 24 * vm.formData.expireDay
time.getTime() < new Date(vm.formData.projectBegintime).getTime() || time.getTime() > new Date(vm.formData.projectBegintime).getTime() + 1000 * 60 * 60 * 24 * vm.formData.expireDay
); //减去一天的时间代表可以选择同一天;
}
},
imgMouseOver: false,
imgMouseOver2: false,
uploadImgMessage: false,
uploadImgMessage2: false,
rules: {
projectName: [
{ required: true, message: "请输入项目名称" },
{
min: 2,
max: 24,
message: "输入长度为2-24的内容，可包含中英文、数字及特殊符号",
trigger: "blur"
},
{ validator: checkProjectStr, trigger: "blur" }
],
projectBegintime: [
{
required: true,
message: "请选择时间",
trigger: "change"
}
],
projectEndtime: [
{
required: true,
message: "请选择时间",
trigger: "change"
}
],
projectIntro: [
{ required: true, message: "请填写项目简介", trigger: "blur" },
{ min: 1, max: 200, message: "超出可输入的最大长度", trigger: "blur" }
]
},
disabled: true,
dialogObj: {
visible: false,
title: '该项目模版已下架',
tip: '',
message: '模版已下架，请重新选择其他项目模版',
confirmMsg: '取消',
hideMsg: '重新选择'
},
isPreview: 0
}
},
components: {
dialogComponet:dialog
},
created() {
vm = this;
vm.isPreview = vm.$route.query.isPreview ? vm.$route.query.isPreview : 0;
if (vm.editor) {
// 编辑时
vm.disabled = false;
vm.getEditorMessage()
} else{
// 创建时
vm.disabled = true;
vm.getMessage();
}
},
methods: {
// 设置已有的基本信息
setBaseMessage(data) {
data.projectData.projectBegintime = convertTime(data.projectData.projectBegintime);
data.projectData.projectEndtime = convertTime(data.projectData.projectEndtime);
vm.formData = Object.assign(vm.formData, data.projectData);
vm.formData.attachmentUrl1 = data.attachmentData[0].attachmentUrl;
vm.formData.attachmentMore1 = Object.assign(vm.formData.attachmentMore1, data.attachmentData[0]);
// 暂存为1 下一步为3
vm.formData.projectType = vm.formData.projectType == 0 ? 3 : vm.formData.projectType;
vm.formData.projectBegintime = vm.formData.projectBegintime ? new Date(vm.formData.projectBegintime) : '';
vm.formData.projectEndtime = vm.formData.projectBegintime ? new Date(vm.formData.projectEndtime) : '';
if (data.attachmentData[1]) {
vm.formData.attachmentUrl2 = data.attachmentData[1].attachmentUrl;
vm.formData.type = data.attachmentData[1].attachmentType;
vm.formData.attachmentMore2 = Object.assign(vm.formData.attachmentMore2, data.attachmentData[1]);
}
vm.$emit('setStatus4Flag',data.projectData.status4Flag)
},
// 获取选择模板后的基本信息
getMessage() {
openLoading(vm);
vm.GET(`portal/openTemplateProject/getOpenTemplateInfoForCreate/${vm.openTemplateId}`)
.then(res => {
closeLoading(vm);
if (res.code == "000000") {
let data = res.data;
data.projectData.organizationNameList = [data.projectData.creatorOrganizationName]
this.$emit('hideSave',res.data.projectData.projectStatus)
vm.setBaseMessage(res.data);
} else {
vm.$message.info(res.message);
}
})
.catch((err) => {
closeLoading(vm);
vm.$message.warning('请稍后重试');
});
},
// 获取编辑时的信息
getEditorMessage() {
openLoading(vm);
vm.GET(`portal/portalInfo/getProjectInfo/${vm.projectId}`)
.then(res => {
closeLoading(vm);
if (res.code == "000000") {
this.$emit('hideSave',res.data.projectData.projectStatus)
vm.setBaseMessage(res.data)
} else {
vm.$message.info(res.message);
}
})
.catch((err) => {
closeLoading(vm);
vm.$message.warning('请稍后重试');
});
},
// 增加发起机构
plusOrg(index) {
vm.formData.organizationNameList.splice(index + 1, 0, '');
},
// 删除发起机构
deleteOrg(index) {
vm.formData.organizationNameList.splice(index, 1);
},
// 机构名称输入
changeOrganizationName() {
let textLength = vm.formData.organizationName.length;
// 机构输入提示显示与否
vm.visibleName = textLength == 0;
},
// 离开机构名称焦点
blurName() {
vm.visibleName = false;
setTimeout(() => {
vm.submitForm("formData");
}, 200);
},
// 机构名称聚焦
focusName(index) {
let textLength = vm.formData.organizationNameList[index].length;
if (textLength == 0) {
vm.orgListIndex = index + 1;
vm.visibleName = true;
} else {
vm.visibleName = false;
}
},
// 机构选择默认值
checkDefault() {
vm.organizationContent = vm.formData.creatorOrganizationName;
vm.formData.organizationNameList.splice(vm.orgListIndex-1, 1, vm.organizationContent);
vm.visibleName = false;
},
//上传列表图片
beforeUploadListPic(file) {
let fileLimit = {
width: 230,
height: 172,
size: 0.5,
sizeText: "500K",
key: "attachmentUrl1",
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;
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 (
_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.attachmentUrl1 = "";
vm.imgMouseOver = false;
} else {
vm.formData.attachmentUrl2 = "";
vm.imgMouseOver2 = false;
}
},
//改变封面类型
changeCover(radio) {
vm.formData.attachmentUrl2 = "";
},
//上传封面图片
beforeUploadCoverPic(file) {
let fileLimit = {
width: 750,
height: 420,
size: 2,
sizeText: "2.0M",
key: "attachmentUrl2",
more: "attachmentMore2",
show: "uploadImgMessage2"
};
if (vm.formData.type == 1) {
vm.beforeAvatarUpload(file, fileLimit);
} else {
vm.beforeUploadMp4(file);
}
},
//上传mp4
beforeUploadMp4(file) {
console.log(file);
const isMP4 = file.type === "video/mp4";
const isLt = file.size / 1024 / 1024 < 500;
if (!isLt) {
vm.$message.error("视频不符合规范，请根据规范上传视频");
return;
}
if (!isMP4) {
vm.$message.error("视频不符合规范，请根据规范上传视频");
} else {
openLoading(vm);
doUpload(
vm,
file,
getFilePath(file, null),
"preview4",
"progress1",
""
).then(function(path) {
closeLoading(vm);
console.log(path);
vm.uploadImgMessage2 = false;
vm.formData.attachmentUrl2 = path.fullPath;
vm.$message.success("上传成功");
});
}
},
// 点击下一步
nextStep() {
let flag = true;
if (!vm.formData.attachmentUrl1) {
vm.uploadImgMessage = true;
flag = false;
} else {
vm.uploadImgMessage = false;
}
if (!vm.formData.attachmentUrl2) {
vm.uploadImgMessage2 = true;
flag = false;
} else {
vm.uploadImgMessage2 = false;
}
if (vm.submitForm('formData') && flag) {
vm.insertOrupdate();
}
},
// 暂存
save() {
if (vm.$refs['formData'].projectName == '') {
vm.$refs['formData'].validateField('projectName')
} else {
vm.insertOrupdate(1);
};
},
// 新增或者更新基本信息
insertOrupdate(status) {
if(new Date(vm.formData.projectEndtime).getTime() > new Date(vm.formData.projectBegintime).getTime() + 1000 * 60 * 60 * 24 * vm.formData.expireDay) {
vm.$message.warning('项目结束时间应在有效期内');
return;
}
if(new Date(vm.formData.projectEndtime).getTime() <= new Date(vm.formData.projectBegintime).getTime()) {
vm.$message.warning('项目结束时间应大于开始时间');
return;
}
vm.formData.projectBegintime = convertTime(vm.formData.projectBegintime, false);
vm.formData.projectEndtime = convertTime(vm.formData.projectEndtime, false);
if (status) {
vm.formData.projectStatus = status;
}
// 图片或者视频地址
vm.formData.attachmentMore1.attachmentUrl = vm.formData.attachmentUrl1;
vm.formData.attachmentMore2.attachmentUrl = vm.formData.attachmentUrl2;
// 封面类型
vm.formData.attachmentMore2.attachmentType = vm.formData.type;
vm.formData.attachmentMore2.kind = 2;
//整合图片视频
vm.attachmentModel[0] = Object.assign(vm.attachmentModel[0],vm.formData.attachmentMore1);
vm.attachmentModel[1] = Object.assign(vm.attachmentModel[1],vm.formData.attachmentMore2);
let baseobj = {};
baseobj.projectModel = JSON.stringify(vm.formData);
baseobj.attachmentModel = JSON.stringify(vm.attachmentModel);
baseobj.attachmentPDFModel= null;
baseobj.notifyData= null;
openLoading(vm);
vm.POST("portal/portalInfo/insertOrUpdate", baseobj)
.then(res => {
closeLoading(vm);
if (res.code == "000000") {
// 暂存不会跳到下一页
if (status == 1) {
vm.$message.info('成功');
return;
}
// 下一步,并将项目id传递给父组件
vm.$emit('next',res.data.id);
} else if (res.code == "213061") {
vm.dialogObj.visible = true;
} else {
vm.$message.warning(res.message);
}
})
.catch((err) => {
vm.$message({
type: "warning",
message: res.message
});
})
},
//表单校验
submitForm(formName) {
let flag = null;
vm.$refs[formName].validate(valid => {
if (valid) {
flag = true;
} else {
flag = false;
}
});
return flag;
},
// 取消
confirm() {
vm.dialogObj.visible = false;
},
// 确定
hide() {
vm.dialogObj.visible = false;
vm.$emit('backSelectVue')
}
}
}
</script>
<style >
.subject-slelct .el-input__inner {
height: 32px;
line-height: 32px;
}
</style>
<style lang="scss" scoped>
.base-message-wrap {
padding-top: 80px;
.p_label {
margin-left: 56px;
font-size: 12px;
color: #606266;
}
.edit-img {
width: 20px;
height: 20px;
vertical-align: middle;
margin-left: 10px;
}
.day-btn {
display: inline-block;
width: 50px;
height: 32px;
line-height: 32px;
background: #838683;
text-align: center;
margin-left: -3px;
border-radius: 0 4px 4px 0;
z-index: 100;
}
.basic-item-icon {
position: relative;
.require {
position: absolute;
left: 67px;
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;
}
.line {
margin-left: 10px;
width: 20px;
}
.bg-uploader {
img {
float: left;
}
.bg-img {
width: 84px;
height: 100px;
}
.bg-video {
float: left;
width: 84px;
height: 100px;
}
.limit-text {
float: left;
margin-left: 10px;
margin-top: -10px;
p {
font-size: 12px;
color: #999;
}
}
}
.el-upload__tip {
position: absolute;
top: -6px;
left: 130px;
}
.choose-button {
background: #fff;
color: #409eff;
border: 1px solid #409eff;
}
.el-popover--plain {
padding: 18px 20px;
top: 40px;
}
.ueitem {
position: relative;
}
.ue-warp {
position: absolute;
width: 80%;
height: 100%;
background: #F5F7FA;
opacity: 0.5;
top: 0;
z-index: 1000;
}
}
.el-form-item__content {
width: 100%;
height: 100%;
background: red;
}
.popover-content {
position: relative;
top: 0;
left: 0;
}
.time-message {
margin: -6px 0 20px 150px;
font-size: 14px;
}
</style>
\ No newline at end of file
src/components/education/custom/dialog.vue 0 → 100644
浏览文件 @ 5af7db42
<template>
<div class="dialog">
<el-dialog
:title="dialogObj.title"
:show-close=false
:visible.sync="dialogObj.visible"
:close-on-click-modal="false"
width="600px"
center>
<p style="text-align: center;">{{dialogObj.message}}</p>
<p class="tip" v-if="dialogObj.tip">{{dialogObj.tip}}</p>
<span slot="footer" class="dialog-footer">
<el-button @click="confirm" v-if="dialogObj.confirmMsg">{{dialogObj.confirmMsg}}</el-button>
<el-button type="primary" @click="hide" v-if="dialogObj.hideMsg">{{dialogObj.hideMsg}}</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
props: {
dialogObj: {
type: Object,
default: () => {
return null;
}
}
},
data() {
return {
}
},
created() {},
methods: {
confirm() {
this.$emit('confirm');
},
hide() {
// this.$emit('hide');
this.dialogObj.visible = false;
}
}
}
</script>
<style lang="scss" scoped>
.tip {
margin-top: 20px;
text-align: center;
color: #C0C0C0;
}
</style>
src/components/education/custom/select-course.vue → src/components/education/custom/select-course-comp.vue
浏览文件 @ 5af7db42
<template> <template>
<div class="select-course-wrapper"> <div class="select-course-wrapper">
<div class="top-line"></div> <div class="top-line"></div>
<CustomSelect></CustomSelect> <CourseSelect></CourseSelect>
<div class="top-line" style="margin-top: 70px;"></div> <div class="top-line" style="margin-top: 70px;"></div>
<CourseList></CourseList>
</div> </div>
</template> </template>
<script> <script>
import CustomSelect from '@/components/education/custom/custom-select' import CourseSelect from '@/components/education/custom/course-select'
import CourseList from '@/components/education/custom/course-list'
export default { export default {
data() { data() {
return { return {
...@@ -14,7 +16,8 @@ export default { ...@@ -14,7 +16,8 @@ export default {
} }
}, },
components: { components: {
CustomSelect CourseSelect,
CourseList,
} }
} }
</script> </script>
......
src/components/education/custom/shopping-cart.vue
浏览文件 @ 5af7db42
<template>
<div class="cart-list-wrapper">
<div class="cart-header">
<span class="title">已选项目课程（共{{this.cartList.length}}节）</span>
<img @click="close" src="../../../assets/custom/icon/close.png" alt />
</div>
<ul class="cart-list">
<li
class="cart-course"
v-for="item in cartList"
:key="item.courseId"
>
<div class="img">
<img src="../../../assets/custom/test.png" alt />
<span class="level">{{item.typeStr}}</span>
</div>
<div class="detail">
<span class="title">{{item.courseName | shortName}}</span>
<span class="cost">免费</span>
</div>
<div class="delete" @click="deleteCart(item)">
<img src="../../../assets/custom/icon/icon-delete.png" alt />
</div>
</li>
</ul>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
data() {
return {};
},
computed: {
...mapGetters(["cartList", 'courseList'])
},
methods: {
close() {
this.$emit("close");
},
deleteCart(item) {
// 先删除够物车中的课程
let delItemIndex = this.cartList.findIndex( course => {
return course.courseId == item.courseId;
})
this.cartList.splice(delItemIndex, 1);
// 再查找当前课程列表中是否有，如果有，则将其置为不选中状态
let courseIndex = this.courseList.list.findIndex( course => {
return course.courseId == item.courseId;
})
if(courseIndex >= 0) {
this.courseList.list[courseIndex].checked = false;
}
}
}
};
</script>
<style lang="less" scoped>
.cart-list-wrapper {
font-family: PingFang SC !important;
width: 440px;
height: 550px;
background: #fff;
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
border-radius: 4px;
.cart-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 50px;
line-height: 50px;
padding: 0 15px;
font-size: 18px;
font-weight: 700;
color: #000000;
background: #f9f9f9;
img {
width: 15px;
height: 15px;
}
}
// .list {
// padding: 15px;
// height: 480px;
// overflow: auto;
// }
.cart-list {
display: flex;
flex-direction: column;
justify-content: flex-start;
// flex-wrap: wrap;
height: 490px;
overflow: auto;
.cart-course {
position: relative;
display: flex;
flex-direction: row;
// height: 83px;
width: 410px;
margin: 15px;
align-items: center;
border-radius: 4px;
&::after {
position: absolute;
left: 0;
bottom: -15px;
z-index: 1;
content: "";
width: 410px;
height: 1px;
background: #e4e7ed;
}
.img {
position: relative;
top: 0;
left: 0;
width: 120;
height: 68px;
margin-right: 15px;
img {
width: 120;
height: 68px;
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;
height: 60px;
.title {
position: relative;
top: -7px;
left: 0;
font-size: 16px;
font-weight: 600;
color: #373839;
}
.cost {
position: absolute;
bottom: -7px;
left: 0;
font-size: 18px;
font-weight: 600;
margin-right: 4px;
color: #d82b2b;
}
}
.delete {
width: 35px;
img {
cursor: pointer;
width: 20px;
height: 20px;
float: right;
}
}
}
}
}
</style>
\ No newline at end of file
src/store/custom/customStore.js 0 → 100644
浏览文件 @ 5af7db42
const customStore = {
// namespaced: true,
state: {
searchParam: {
orderBy: 2,
dir: 1,
grade: 0,
pageNo: 1,
pageSize: 10,
labelIdList: []
},
cartList: [],
courseList: [],
allLabelList: [],
subLabelList: [],
},
mutations: {
SET_SEARCH_PARAM: (state, searchParam) => {
state.searchParam = searchParam;
},
SET_CART_LIST: (state, cartList) => {
state.cartList = cartList;
},
SET_COURSE_LIST: (state, courseList) => {
state.courseList = courseList;
},
SET_ALL_LABEL_LIST: (state, allLabelList) => {
state.allLabelList = allLabelList;
},
SET_SUB_LABEL_LIST: (state, subLabelList) => {
state.subLabelList = subLabelList;
},
},
actions: {
setSeachParam({ commit }, searchParam) {
commit('SET_SEARCH_PARAM', searchParam);
},
setCartList({ commit }, cartList) {
commit('SET_CART_LIST', cartList);
},
setCourseList({ commit }, courseList) {
commit('SET_COURSE_LIST', courseList);
},
setAllLabelList({ commit }, allLabelList) {
commit('SET_ALL_LABEL_LIST', allLabelList);
},
setSubLabelList({ commit }, subLabelList) {
commit('SET_SUB_LABEL_LIST', subLabelList);
},
}
}
export default customStore;
\ No newline at end of file
src/store/custom/getters.js 0 → 100644
浏览文件 @ 5af7db42
const getters = {
searchParam: state => state.customStore.searchParam,
cartList: state => state.customStore.cartList,
courseList: state => state.customStore.courseList,
allLabelList: state => state.customStore.allLabelList,
subLabelList: state => state.customStore.subLabelList,
}
export default getters
src/store/getters.js
浏览文件 @ 5af7db42
import education from './education/getters' import education from './education/getters'
import custom from './custom/getters'
import { containObject } from '../utils/utils' // import { containObject } from '../utils/utils'
// let getters = containObject(education)
const getters = containObject(education)
const getters = Object.assign(education, custom)
export default getters export default getters
\ No newline at end of file
src/store/index.js
浏览文件 @ 5af7db42
...@@ -9,7 +9,8 @@ import patientsDiagnose from './patientsManage/patientsDiagnose'; ...@@ -9,7 +9,8 @@ import patientsDiagnose from './patientsManage/patientsDiagnose';
// cme // cme
import cmeStore from './cme/cmeStore'; import cmeStore from './cme/cmeStore';
// custom
import customStore from './custom/customStore';
Vue.use(Vuex) Vue.use(Vuex)
...@@ -19,6 +20,7 @@ export default new Vuex.Store({ ...@@ -19,6 +20,7 @@ export default new Vuex.Store({
...followModules, ...followModules,
patientsDiagnose, patientsDiagnose,
cmeStore, cmeStore,
customStore
}, },
getters getters
}) })
......
src/style/global.scss
浏览文件 @ 5af7db42
...@@ -138,3 +138,27 @@ ...@@ -138,3 +138,27 @@
border-color: #449284; border-color: #449284;
} }
} }
.custom-select-wrapper {
// .el-button:focus, .el-button:hover {
// color: #449284;
// border-color: #449284;
// // background-color: #449284;
// }
.el-button.is-plain, .el-button.is-plain {
background: #fff !important;
border-color: #449284 !important;
color: #449284 !important;
}
.el-button.is-plain:focus, .el-button.is-plain:hover {
background: #fff !important;
border-color: #449284 !important;
color: #449284 !important;
}
.el-button--mini, .el-button--small {
font-size: 14px;
border-radius: 3px;
}
}
src/utils/filter.js
浏览文件 @ 5af7db42
...@@ -413,9 +413,9 @@ const vueFilter = { ...@@ -413,9 +413,9 @@ const vueFilter = {
} else if (value == 2) { } else if (value == 2) {
return '未上架'; return '未上架';
} else if (value == 300) { } else if (value == 300) {
return '审核中'; return '审核中';
} else if (value == 3) { } else if (value == 3) {
return '待审核'; return '待审核';
} else if (value == 4) { } else if (value == 4) {
return '已上架'; return '已上架';
} else if (value == 5) { } else if (value == 5) {
...@@ -437,6 +437,14 @@ const vueFilter = { ...@@ -437,6 +437,14 @@ const vueFilter = {
} else { } else {
return value return value
} }
} },
// 将字符串截短至指定长度，并用在最后追加特定字符串（例如：...）
shortName: (value, length = 24, append = '...') => {
if (value && value.length > length) {
return value.substring(0, length) + append
} else {
return value
}
},
} }
export default vueFilter export default vueFilter
\ No newline at end of file
src/utils/utils.js
浏览文件 @ 5af7db42
import axios from 'axios'; import axios from 'axios';
// 对象的合并 // 对象的合并
export const containObject = function(...obj1) { // export const containObject = function(...obj1) {
let obj = Object.assign(...obj1) // let obj = Object.assign(...obj1)
return obj // return obj
} // }
// 获取页面自适应高度 // 获取页面自适应高度
export function resizeHeight(cMinusHeight = 152, iMinuxHeight = 210, refHeightId = 'slidebar-container', export function resizeHeight(cMinusHeight = 152, iMinuxHeight = 210, refHeightId = 'slidebar-container',
containerHeightId = 'screenSet'){ containerHeightId = 'screenSet'){
......
src/views/education/edit-custom.vue
浏览文件 @ 5af7db42
...@@ -27,15 +27,15 @@ ...@@ -27,15 +27,15 @@
<template-list @checkFn="checkFn"></template-list> <template-list @checkFn="checkFn"></template-list>
</div> --> </div> -->
<!-- 模板列表 --> <!-- 选择课程 -->
<div v-if="active == 0" class="tpl-main"> <div v-if="active == 0" class="tpl-main">
<!-- <template-list @checkFn="checkFn"></template-list> --> <SelectCourseComp></SelectCourseComp>
<selectCourse ></selectCourse>
</div> </div>
<!-- 填写项目信息--> <!-- 填写项目信息-->
<template-message <!-- <template-message -->
ref="templateMessage" <custom-baseinfo
ref="CustomBaseinfo"
v-if="active == 1" v-if="active == 1"
:openTemplateId="openTemplateId" :openTemplateId="openTemplateId"
:projectId="projectId" :projectId="projectId"
...@@ -61,24 +61,44 @@ ...@@ -61,24 +61,44 @@
<dialog-componet :dialogObj="dialogObj" @hide="hide"></dialog-componet> <dialog-componet :dialogObj="dialogObj" @hide="hide"></dialog-componet>
<dialog-componet :dialogObj="sendObj" @hide="hidefn" @confirm="confirmFn"></dialog-componet> <dialog-componet :dialogObj="sendObj" @hide="hidefn" @confirm="confirmFn"></dialog-componet>
<!-- <draggable v-model="myArray">
<transition-group>
<div v-for="element in myArray" :key="element.id">
{{element.name}}
</div>
</transition-group>
</draggable> -->
</div> </div>
</template> </template>
<script> <script>
import BreadCrumb from "../../components/breadcrumb.vue"; import BreadCrumb from "@/components/breadcrumb.vue";
import templateMessage from "../../components/education/template/templateMessage"; // import CustomBaseinfo from "@/components/education/template/CustomBaseinfo";
import selectTemplate from "../../components/education/template/selectTemplate"; import CustomBaseinfo from "@/components/education/custom/custom-baseinfo";
import selectRegion from "../../components/education/template/selectRegion"; import selectTemplate from "@/components/education/template/selectTemplate";
import setOrganization from "../../components/education/template/setOrganization"; import selectRegion from "@/components/education/template/selectRegion";
// import templateList from "../../components/education/template/templateList"; import setOrganization from "@/components/education/template/setOrganization";
import selectCourse from "../../components/education/custom/select-course"; import SelectCourseComp from "@/components/education/custom/select-course-comp";
import dialog from "../../components/education/template/dialog"; import dialog from "@/components/education/template/dialog";
import { openLoading, closeLoading } from "../../utils/utils"; import { openLoading, closeLoading, resizeHeight } from "@/utils/utils";
import * as commonUtil from "../../utils/utils"; import draggable from 'vuedraggable'
import { mapGetters, mapActions } from 'vuex'
let vm = null; let vm = null;
export default { export default {
data() { data() {
return { return {
myArray: [
{id: 1, name: '教培项目1'},
{id: 1, name: '教培项目2'},
{id: 1, name: '教培项目3'},
{id: 1, name: '教培项目4'},
{id: 1, name: '教培项目5'},
{id: 1, name: '教培项目6'},
{id: 1, name: '教培项目7'},
],
curmbFirst: "教培项目", curmbFirst: "教培项目",
curmbSecond: "项目管理", curmbSecond: "项目管理",
jumPathThird: 'edit-custom', jumPathThird: 'edit-custom',
...@@ -140,20 +160,31 @@ export default { ...@@ -140,20 +160,31 @@ export default {
confirmMsg: '取消', confirmMsg: '取消',
hideMsg: '确定发布' hideMsg: '确定发布'
}, },
projectStatus: 1, //1.草稿 2.未上架 3.审核中/待审核 4.已上架 5.已下架 6.已拒绝/未上架 projectStatus: 1, //1.草稿 2.未上架 3.审核中/待审核 4.已上架 5.已下架 6.已拒绝/未上架
status4Flag: 0,//0表示没有上过架，1表示上过架 status4Flag: 0, //0表示没有上过架，1表示上过架
isPreview: 0 // 1表示是查看信息 isPreview: 0, // 1表示是查看信息
}
},
computed: {
...mapGetters(['searchParam'])
},
watch: {
searchParam: {
handler(val) {
this.getCourseList(val);
},
deep: true
} }
}, },
components: { components: {
BreadCrumb, BreadCrumb,
templateMessage, CustomBaseinfo,
selectTemplate, selectTemplate,
selectRegion, selectRegion,
setOrganization, setOrganization,
// templateList,
dialogComponet:dialog, dialogComponet:dialog,
selectCourse SelectCourseComp,
draggable
}, },
created() { created() {
vm = this; vm = this;
...@@ -161,9 +192,68 @@ export default { ...@@ -161,9 +192,68 @@ export default {
vm.isPreviewFn(); vm.isPreviewFn();
}, },
mounted() { mounted() {
commonUtil.resizeHeight(); resizeHeight();
this.getLabelList();
this.getCourseList(this.searchParam);
}, },
methods: { methods: {
...mapActions(['setCourseList', 'setAllLabelList', 'setSubLabelList']),
getLabelList() {
vm.GET("/contents/diseases/labelList", {}).then(res => {
if (res.code == "000000") {
// 先将所有的标签添加checked字段
let labelList = res.data;
let allSubList = [];
labelList.forEach( (item, index) => {
item.checked = false;
item.subList.forEach( (sub, subIndex) => {
if(subIndex == 0) {
sub.id = `subid-${index}`;
}
sub.parentIndex = index;
sub.checked = false;
if(index == 0) {
allSubList.push(sub);
} else if(sub.id != 0){
allSubList.push(sub);
}
})
})
allSubList[0].checked = true;
// allSubList[0].id = 'parentid-0'; // 一级的“全部”标签的id
// 添加一级的“全部”标签，并构建其子标签
labelList.unshift({
name: '全部',
checked: true,
subList: allSubList
})
this.setAllLabelList(labelList);
this.setSubLabelList(allSubList);
}
});
},
// （根据条件）查询课程
getCourseList(searchParam) {
// let param = {
// orderBy: 2,
// grade: 0,
// pageNo: 1,
// pageSize: 10,
// orderBy: 2,
// labelIdList: [441, 442]
// }
vm.GET("/contents/diseases/courseListForPortal", searchParam).then(res => {
if (res.code == "000000") {
let courseList = res.data;
courseList.list.forEach( (item) => {
item.checked = false;
});
this.setCourseList(courseList);
}
});
},
// 判断是否为编辑状态 // 判断是否为编辑状态
isEditorFn(){ isEditorFn(){
if(vm.$route.query.projectId) { if(vm.$route.query.projectId) {
...@@ -194,7 +284,7 @@ export default { ...@@ -194,7 +284,7 @@ export default {
return; return;
} }
// 调用项目信息中的下一步操作 // 调用项目信息中的下一步操作
vm.$refs.templateMessage.nextStep(); vm.$refs.CustomBaseinfo.nextStep();
return; return;
} }
}, },
...@@ -206,7 +296,7 @@ export default { ...@@ -206,7 +296,7 @@ export default {
// 暂存 // 暂存
save() { save() {
if (vm.active == 1) { if (vm.active == 1) {
vm.$refs.templateMessage.save(); vm.$refs.CustomBaseinfo.save();
} else if (vm.active == 2) { } else if (vm.active == 2) {
vm.regionComplete(); vm.regionComplete();
} }
...@@ -305,6 +395,7 @@ export default { ...@@ -305,6 +395,7 @@ export default {
vm.canNext = true; vm.canNext = true;
vm.openTemplateId = id; vm.openTemplateId = id;
}, },
//选中模板后点击下一步时检测(机构和进行中的项目) //选中模板后点击下一步时检测(机构和进行中的项目)
checkSelectTemplate() { checkSelectTemplate() {
openLoading(vm); openLoading(vm);
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或