Branch_d40a2540
yujialong 2 years ago
parent d5f8a827dd
commit 16206af273
  1. BIN
      src/assets/img/product/1.png
  2. BIN
      src/assets/img/product/2.png
  3. BIN
      src/assets/img/product/3.png
  4. BIN
      src/assets/img/product/4.png
  5. BIN
      src/assets/img/product/5.png
  6. 1191
      src/pages/product/list/index.vue
  7. 920
      src/pages/product/show/index.vue
  8. 1447
      src/pages/project/add/index.vue
  9. 884
      src/pages/project/list/index.vue
  10. 203
      src/pages/station/list/index.vue
  11. 1703
      src/pages/station/preview/index.vue

Binary file not shown.

After

Width:  |  Height:  |  Size: 667 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 451 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 581 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 490 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 585 B

File diff suppressed because it is too large Load Diff

@ -2,52 +2,97 @@
<div class="wrap"> <div class="wrap">
<div class="inner"> <div class="inner">
<div class="top"> <div class="top">
<div v-if="form.interfaceDiagrams" class="pics"> <div v-if="form.interfaceDiagrams && height"
<img v-for="(pic, i) in form.interfaceDiagrams" :key="i" :src="pic" alt=""> class="pics"
:style="{height: form.interfaceDiagrams.length === 1 ? height: 'auto'}">
<img v-for="(pic, i) in form.interfaceDiagrams"
:key="i"
:src="pic"
alt="">
</div> </div>
<div class="right"> <div class="right"
id="fields">
<h6>{{ form.mall.productName }}</h6> <h6>{{ form.mall.productName }}</h6>
<div v-if="isCourse" class="meta"> <div v-if="isCourse"
class="meta">
<span class="val">{{ form.numberOfExperimentalItems }}</span> 个实验项目&emsp;&emsp; <span class="val">{{ form.numberOfExperimentalItems }}</span> 个实验项目&emsp;&emsp;
已有 <span class="val">{{ form.goodsRes.learningCount }}</span>人学过 已有 <span class="val">{{ form.goodsRes.learningCount }}</span>人学过
</div> </div>
<div class="des" v-html="form.mall.productIntroduction"></div> <div class="des"
<div class="field">适用专业{{ form.goodsRes.professionalName }}</div> v-html="form.mall.productIntroduction"></div>
<div class="fields"> <div class="fields">
<div v-if="form.mall.applicationScenario" class="field"><span class="label">适用场景</span>{{ form.mall.applicationScenario }}</div> <div class="field"><img src="@/assets/img/product/1.png"
<div v-if="form.mall.matchingCourse" class="field"><span class="label">匹配课程</span>{{ form.mall.matchingCourse }}</div> alt=""> 适用专业{{ form.goodsRes.professionalName }}</div>
<div v-if="form.mall.courseHours" class="field"><span class="label">预计课时</span>{{ form.mall.courseHours }}</div> <div v-if="form.mall.applicationScenario"
<div v-if="form.goodsRes.typeName" class="field"><span class="label">产品类型</span>{{ form.goodsRes.typeName }}</div> class="field"><span class="label"><img src="@/assets/img/product/2.png"
alt=""> 适用场景</span>{{ form.mall.applicationScenario }}</div>
<div v-if="form.mall.matchingCourse"
class="field"><span class="label"><img src="@/assets/img/product/3.png"
alt=""> 匹配课程</span>{{ form.mall.matchingCourse }}</div>
<div v-if="form.mall.courseHours"
class="field"><span class="label"><img src="@/assets/img/product/4.png"
alt=""> 预计课时</span>{{ form.mall.courseHours }}</div>
<div v-if="form.goodsRes.typeName"
class="field"><span class="label"><img src="@/assets/img/product/5.png"
alt=""> 产品类型</span>{{ form.goodsRes.typeName }}</div>
</div> </div>
<button v-if="!form.goodsRes.logoOfOurSchool" class="btn" @click="toTrail">试用体验</button> <button v-if="!form.goodsRes.logoOfOurSchool"
<button v-else-if="isCourse || withLink" class="btn entry" @click="toStation">进入实验</button> class="btn"
@click="toTrail">试用体验</button>
<button v-else-if="isCourse || withLink"
class="btn entry"
@click="toStation">进入实验</button>
</div> </div>
</div> </div>
<div class="course"> <div class="course">
<div class="detail"> <div class="detail">
<ul class="tab"> <ul class="tab">
<li v-for="(tab, i) in tabs" :key="i" :class="{active: curTab === tab.id}" @click="tabChange(tab)">{{ tab.name }}</li> <li v-for="(tab, i) in tabs"
:key="i"
:class="{active: curTab === tab.id}"
@click="tabChange(tab)">{{ tab.name }}</li>
</ul> </ul>
<div class="courses"> <div class="courses">
<template v-if="!curTab"> <template v-if="!curTab">
<div class="des" v-html="form.mall.detailedIntroduction"></div> <div class="des"
v-html="form.mall.detailedIntroduction"></div>
</template> </template>
<template v-else> <template v-else>
<div class="chapter" v-for="(item, i) in chapterList" :key="i"> <div class="chapter"
v-for="(item, i) in chapterList"
:key="i">
<div class="chapterName">{{ item.name }}</div> <div class="chapterName">{{ item.name }}</div>
<div class="section" v-if="item.subsectionList.length"> <div class="section"
<div v-for="(section, j) in item.subsectionList" :key="j" @click="toPreview(i, j)"> v-if="item.subsectionList.length">
<div class="sectionName" :title="section.name" :class="{active: curLink === `${item.name}${section.name}`}"> <div v-for="(section, j) in item.subsectionList"
:key="j"
@click="toPreview(i, j)">
<div class="sectionName"
:title="section.name"
:class="{active: curLink === `${item.name}${section.name}`}">
<div class="val"> <div class="val">
<img v-if="section.fileType === 'pptx'" src="@/assets/img/exts/ppt.png" alt=""> <img v-if="section.fileType === 'pptx'"
<img v-else-if="section.fileType === 'mp4'" src="@/assets/img/exts/video.png" alt=""> src="@/assets/img/exts/ppt.png"
<img v-else-if="section.fileType === 'doc' || section.fileType === 'docx'" src="@/assets/img/exts/word.png" alt=""> alt="">
<img v-else-if="section.fileType === 'txt'" src="@/assets/img/exts/txt.png" alt=""> <img v-else-if="section.fileType === 'mp4'"
<img v-else-if="section.fileType === 'pdf'" src="@/assets/img/exts/pdf.png" alt=""> src="@/assets/img/exts/video.png"
<img v-else src="@/assets/img/exts/pic.png" alt=""> alt="">
<img v-else-if="section.fileType === 'doc' || section.fileType === 'docx'"
src="@/assets/img/exts/word.png"
alt="">
<img v-else-if="section.fileType === 'txt'"
src="@/assets/img/exts/txt.png"
alt="">
<img v-else-if="section.fileType === 'pdf'"
src="@/assets/img/exts/pdf.png"
alt="">
<img v-else
src="@/assets/img/exts/pic.png"
alt="">
{{ section.name }} {{ section.name }}
</div> </div>
<i v-if="!form.goodsRes.logoOfOurSchool" class="icon el-icon-lock"></i> <i v-if="!form.goodsRes.logoOfOurSchool"
class="icon el-icon-lock"></i>
</div> </div>
</div> </div>
</div> </div>
@ -58,23 +103,33 @@
<div class="products"> <div class="products">
<h6>热门产品推荐</h6> <h6>热门产品推荐</h6>
<ul class="product"> <ul class="product">
<li v-for="(item, i) in hots" :key="i" @click="toDetail(item.mallId)"> <li v-for="(item, i) in hots"
<img :src="item.coverDrawing" alt="" /> :key="i"
<img v-if="item.logoOfOurSchool" class="my-school" src="@/assets/img/my-school.png" alt=""> @click="toDetail(item.mallId)">
<img :src="item.coverDrawing"
alt="" />
<img v-if="item.logoOfOurSchool"
class="my-school"
src="@/assets/img/my-school.png"
alt="">
<div class="texts"> <div class="texts">
<div class="title">{{ item.productName }}</div> <div class="title">{{ item.productName }}</div>
<div :class="['desc', {'not-tag': !item.tagsName}]" v-html="item.productIntroduction"></div> <div :class="['desc', {'not-tag': !item.tagsName}]"
<div v-if="item.tagsName" class="tags"> v-html="item.productIntroduction"></div>
<el-tag v-for="(tag, i) in item.tagsName.split(',')" :key="i" class="tag">{{ tag }}</el-tag> <div v-if="item.tagsName"
class="tags">
<el-tag v-for="(tag, i) in item.tagsName.split(',')"
:key="i"
class="tag">{{ tag }}</el-tag>
</div> </div>
<div class="metas"> <div class="metas">
<el-tag <el-tag v-if="item.selected"
v-if="item.selected" type="danger"
type="danger" effect="dark">
effect="dark">
官方精选 官方精选
</el-tag> </el-tag>
<div v-if="item.isCourse" class="meta">{{ item.learningCount }}人学过</div> <div v-if="item.isCourse"
class="meta">{{ item.learningCount }}人学过</div>
</div> </div>
</div> </div>
</li> </li>
@ -84,11 +139,20 @@
</div> </div>
<!-- 选择链接 --> <!-- 选择链接 -->
<el-dialog title="请选择链接" :visible.sync="linkVisible" width="420px" center :close-on-click-modal="false"> <el-dialog title="请选择链接"
<div v-if="withLink" class="buy"> :visible.sync="linkVisible"
<div v-for="(link, i) in form.mallNonAssociatedLinks" :key="i" class="link-line"> width="420px"
center
:close-on-click-modal="false">
<div v-if="withLink"
class="buy">
<div v-for="(link, i) in form.mallNonAssociatedLinks"
:key="i"
class="link-line">
{{ link.urlName }} {{ link.urlName }}
<a class="url" :href="link.url" target="_blank">{{ link.url }}</a> <a class="url"
:href="link.url"
target="_blank">{{ link.url }}</a>
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
@ -99,412 +163,426 @@
import Util from "@/libs/util" import Util from "@/libs/util"
import Setting from "@/setting" import Setting from "@/setting"
export default { export default {
data() { data () {
return { return {
id: this.$route.query.id, id: this.$route.query.id,
curTab: 0, curTab: 0,
tabs: [ tabs: [
{ {
id: 0, id: 0,
name: '详情介绍' name: '详情介绍'
}, },
], ],
form: { form: {
classificationIds: [], classificationIds: [],
mall: {}, mall: {},
goodsRes: {} goodsRes: {}
},
chapterList: [],
hots: [],
linkVisible: false,
height: ''
};
},
computed: {
//
withLink () {
const links = this.form.mallNonAssociatedLinks
return this.form.mall.isAssociatedProduct && links && links.length
},
//
isCourse () {
let id = this.form.classificationIds
if (id) {
id = id[0]
const isCourse = (id == 1 || id == 2) && this.form.mall.isAssociatedProduct === 0
this.tabs = [
{
id: 0,
name: '详情介绍'
}, },
chapterList: [], ]
hots: [], isCourse && this.tabs.push({
linkVisible: false id: 1,
}; name: '课程目录'
})
return isCourse
}
return false
}
},
mounted () {
this.getData()
this.getHot()
},
methods: {
//
getData () {
this.$get(`${this.api.detailsOfGoods}?mallId=${this.id}`).then(res => {
const e = res.orderDetails
// +
e.interfaceDiagrams = [e.mall.coverDrawing]
if (e.mall.interfaceDiagram) e.interfaceDiagrams.push(...e.mall.interfaceDiagram.split(',').slice(0, 3))
this.form = e
this.chapterList = ''
e.mall.associatedProduct && this.getChapter()
this.$nextTick(() => {
this.height = document.querySelector('#fields').clientHeight + 'px'
})
}).catch(err => { })
}, },
computed: { //
// async getChapter () {
withLink() { let res = await this.$get(this.api.curriculumChapter + '/' + this.form.mall.associatedProduct)
const links = this.form.mallNonAssociatedLinks this.chapterList = res.chapterList
return this.form.mall.isAssociatedProduct && links && links.length },
}, // tab
// tabChange ({ id }) {
isCourse() { this.curTab = id
let id = this.form.classificationIds },
if (id) { //
id = id[0] toPreview (i, j) {
const isCourse = (id == 1 || id == 2) && this.form.mall.isAssociatedProduct === 0 this.form.goodsRes.logoOfOurSchool ?
this.tabs = [ this.$router.push(`/station/preview?courseId=${this.form.mall.associatedProduct}&curriculumName=${this.form.mall.associatedProductName}&mallId=${this.id}&chapter=${i}&section=${j}&admin=1`) :
{ this.toTrail()
id: 0, },
name: '详情介绍' // /
}, studySection (item) {
] item.whetherToStudyOrNot ?
isCourse && this.tabs.push({ this.$post(`${this.api.deleteLearningProgress}?id=${item.learningProgressId}`).then(res => {
id: 1, this.getChapter()
name: '课程目录' }).catch(res => { }) :
}) this.$post(this.api.saveLearningProgress, {
return isCourse cid: this.form.mall.associatedProduct,
} projectId: item.projectId,
return false }).then(res => {
this.getChapter()
}).catch(res => { })
},
//
toTrail () {
window.open('https://f.wps.cn/g/VekixBcm/')
},
//
toStation () {
if (this.isCourse) { //
this.$post(`${this.api.addLearningRecord}?mallId=${this.id}`).then(res => {
this.$router.push('/station/preview?courseId=' + this.form.mall.associatedProduct + '&curriculumName=' + this.form.mall.associatedProductName + '&mallId=' + this.id)
}).catch(res => { })
} else if (this.withLink) { //
this.linkVisible = true
} }
}, },
mounted() { //
getHot () {
this.$post(this.api.listOfGoods, {
hotTag: 1,
sort: 1,
pageNum: 1,
pageSize: 2,
}).then(({ page }) => {
const list = page.records
list.forEach(e => {
//
const el = document.createElement('div')
el.innerHTML = e.productIntroduction
e.productIntroduction = el.innerText
const cid = e.classificationId
e.isCourse = (cid === 1 || cid === 2) && !e.isAssociatedProduct
})
this.hots = list
}).catch(res => { })
},
//
toDetail (id) {
this.$router.push(`show?id=${id}`)
this.id = id
this.getData() this.getData()
this.getHot()
}, },
methods: { }
//
getData() {
this.$get(`${this.api.detailsOfGoods}?mallId=${this.id}`).then(res => {
const e = res.orderDetails
// +
e.interfaceDiagrams = [e.mall.coverDrawing]
if (e.mall.interfaceDiagram) e.interfaceDiagrams.push(...e.mall.interfaceDiagram.split(',').slice(0, 3))
this.form = e
this.chapterList = ''
e.mall.associatedProduct && this.getChapter()
}).catch(err => {})
},
//
async getChapter() {
let res = await this.$get(this.api.curriculumChapter + '/' + this.form.mall.associatedProduct)
this.chapterList = res.chapterList
},
// tab
tabChange({ id }) {
this.curTab = id
},
//
toPreview(i, j) {
this.form.goodsRes.logoOfOurSchool ?
this.$router.push(`/station/preview?courseId=${this.form.mall.associatedProduct}&curriculumName=${this.form.mall.associatedProductName}&mallId=${this.id}&chapter=${i}&section=${j}`) :
this.toTrail()
},
// /
studySection(item) {
item.whetherToStudyOrNot ?
this.$post(`${this.api.deleteLearningProgress}?id=${item.learningProgressId}`).then(res => {
this.getChapter()
}).catch(res => {}) :
this.$post(this.api.saveLearningProgress, {
cid: this.form.mall.associatedProduct,
projectId: item.projectId,
}).then(res => {
this.getChapter()
}).catch(res => {})
},
//
toTrail() {
window.open('https://f.wps.cn/g/VekixBcm/')
},
//
toStation() {
if (this.isCourse) { //
this.$post(`${this.api.addLearningRecord}?mallId=${this.id}`).then(res => {
this.$router.push('/station/preview?courseId=' + this.form.mall.associatedProduct + '&curriculumName=' + this.form.mall.associatedProductName + '&mallId=' + this.id)
}).catch(res => {})
} else if (this.withLink) { //
this.linkVisible = true
}
},
//
getHot() {
this.$post(this.api.listOfGoods, {
hotTag: 1,
sort: 1,
pageNum: 1,
pageSize: 2,
}).then(({ page }) => {
const list = page.records
list.forEach(e => {
//
const el = document.createElement('div')
el.innerHTML = e.productIntroduction
e.productIntroduction = el.innerText
const cid = e.classificationId
e.isCourse = (cid === 1 || cid === 2) && !e.isAssociatedProduct
})
this.hots = list
}).catch(res => {})
},
//
toDetail(id) {
this.$router.push(`show?id=${id}`)
this.id = id
this.getData()
},
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap { .wrap {
background: #F3F6FA; background: #f3f6fa;
.inner { .inner {
width: 1154px; width: 1154px;
margin: 0 auto; margin: 0 auto;
} }
.top { .top {
display: flex; display: flex;
padding: 24px; padding: 24px;
background-color: #fff; background-color: #fff;
border-radius: 10px; border-radius: 10px;
.pics { .pics {
width: 436px; width: 436px;
margin-right: 24px; margin-right: 24px;
img { img {
width: 140px; width: 140px;
height: 62px; height: 62px;
margin-right: 8px; margin-right: 8px;
border-radius: 8px; border-radius: 8px;
&:first-child { &:first-child {
width: 100%; width: 100%;
height: 192px; height: 192px;
margin-bottom: 12px; margin-bottom: 12px;
}
&:last-child {
margin-right: 0;
}
&:only-child {
// max-height: 266px;
// height: auto;
height: 100%;
margin: 0;
}
}
} }
&:last-child { .right {
margin-right: 0; width: 646px;
overflow: hidden;
}
h6 {
font-size: 24px;
font-weight: 600;
color: #2e2d31;
}
.meta {
margin: 10px 0;
font-size: 12px;
color: #2e2d31;
.val {
color: #007eff;
}
}
.des {
margin-bottom: 15px;
font-size: 14px;
color: #666;
line-height: 20px;
@include mul-ellipsis(3);
}
.field {
font-size: 14px;
color: #2e2d31;
.label {
color: #333;
}
}
.fields {
display: flex;
// justify-content: space-between;
flex-wrap: wrap;
height: 60px;
margin: 10px 0 10px;
overflow: hidden;
.field {
margin-right: 40px;
margin-bottom: 10px;
}
}
.btn {
width: 119px;
height: 46px;
color: #fff;
background: #64c25a;
border-radius: 6px;
border: 0;
cursor: pointer;
&:hover {
opacity: 0.9;
}
&:first-child {
margin-left: 11px;
}
}
.entry {
background: #007eff;
} }
}
}
.right {
width: 646px;
overflow: hidden;
}
h6 {
font-size: 24px;
font-weight: 600;
color: #2E2D31;
}
.meta {
margin: 10px 0;
font-size: 12px;
color: #2E2D31;
.val {
color: #007EFF;
}
}
.des {
margin-bottom: 15px;
font-size: 14px;
color: #666;
line-height: 20px;
}
.field {
font-size: 14px;
color: #2E2D31;
.label {
color: #333;
}
}
.fields {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 10px 0 10px;
.field {
margin-bottom: 10px;
}
}
.btn {
width: 119px;
height: 46px;
color: #fff;
background: #64C25A;
border-radius: 6px;
border: 0;
cursor: pointer;
&:hover {
opacity: .9;
}
&:first-child {
margin-left: 11px;
}
}
.entry {
background: #007EFF;
}
}
.tab {
display: inline-flex;
margin-left: 10px;
li {
position: relative;
margin-right: 20px;
font-size: 18px;
line-height: 25px;
color: #0B1D30;
cursor: pointer;
&:after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
width: 53px;
height: 4px;
transform: translateX(-50%);
}
&.active:after {
background-color: #007EFF;
}
}
}
.course {
display: flex;
margin-top: 20px;
.detail {
width: 835px;
padding: 20px 24px;
background-color: #fff;
border-radius: 10px;
}
}
.courses {
margin-top: 40px;
.chapters{
margin-top: 16px;
max-height: calc(100% - 53px);
overflow: auto;
}
.chapter{
margin-bottom: 20px;
} }
.chapterName{ .tab {
padding: 0 12px; display: inline-flex;
margin-bottom: 15px; margin-left: 10px;
color: #333; li {
font-size: 14px; position: relative;
margin-right: 20px;
font-size: 18px;
line-height: 25px;
color: #0b1d30;
cursor: pointer;
&:after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
width: 53px;
height: 4px;
transform: translateX(-50%);
}
&.active:after {
background-color: #007eff;
}
}
} }
.sectionName{ .course {
position: relative;
display: flex; display: flex;
justify-content: space-between; margin-top: 20px;
padding: 12px; .detail {
font-size: 14px; width: 835px;
color: #666; padding: 20px 24px;
cursor: pointer; background-color: #fff;
border-radius: 8px; border-radius: 10px;
@include ellipsis;
img {
margin-right: 8px;
} }
&:hover { }
color: #007EFF; .courses {
background: #F6FBFF; margin-top: 40px;
.chapters {
margin-top: 16px;
max-height: calc(100% - 53px);
overflow: auto;
} }
.val { .chapter {
display: inline-flex; margin-bottom: 20px;
align-items: center;
} }
.icon { .chapterName {
font-size: 18px; padding: 0 12px;
color: #666; margin-bottom: 15px;
color: #333;
font-size: 14px;
}
.sectionName {
position: relative;
display: flex;
justify-content: space-between;
padding: 12px;
font-size: 14px;
color: #666;
cursor: pointer;
border-radius: 8px;
@include ellipsis;
img {
margin-right: 8px;
}
&:hover {
color: #007eff;
background: #f6fbff;
}
.val {
display: inline-flex;
align-items: center;
}
.icon {
font-size: 18px;
color: #666;
}
} }
} }
} .products {
.products { width: 295px;
width: 295px; margin-left: 24px;
margin-left: 24px; & > h6 {
&>h6 { font-size: 14px;
font-size: 14px; color: #0b1d30;
color: #0B1D30;
}
}
.product {
margin-top: 11px;
li {
position: relative;
margin-bottom: 15px;
cursor: pointer;
border-radius: 10px;
background-color: #fff;
transition: all 0.3s;
overflow: hidden;
img {
width: 100%;
height: 140px;
transition: .3s;
}
.my-school {
position: absolute;
top: 0;
right: 0;
width: 57px;
height: 22px;
}
.texts {
padding: 10px;
}
.title {
margin-bottom: 10px;
color: #0B1D30;
font-size: 14px;
font-weight: 600;
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.desc {
min-height: 34px;
color: #757F92;
font-size: 12px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
&.not-tag {
-webkit-line-clamp: 3;
} }
} }
.tags { .product {
margin-top: 10px; margin-top: 11px;
} li {
.tag { position: relative;
margin-right: 8px; margin-bottom: 15px;
color: #007EFF; cursor: pointer;
background-color: #F9F9F9; border-radius: 10px;
border: 0; background-color: #fff;
} transition: all 0.3s;
.type { overflow: hidden;
display: inline-block; img {
padding: 4px 11px; width: 100%;
font-size: 12px; height: 140px;
color: #666; transition: 0.3s;
border: 1px solid #DADADA; }
border-radius: 20px; .my-school {
} position: absolute;
.metas { top: 0;
display: flex; right: 0;
justify-content: space-between; width: 57px;
align-items: center; height: 22px;
margin-top: 10px; }
} .texts {
.meta { padding: 10px;
display: inline-flex; }
align-items: center; .title {
color: #B5BFD5; margin-bottom: 10px;
font-size: 12px; color: #0b1d30;
.icon { font-size: 14px;
width: 14px; font-weight: 600;
max-height: 14px; word-wrap: break-word;
margin-right: 3px; word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.desc {
min-height: 34px;
color: #757f92;
font-size: 12px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
&.not-tag {
-webkit-line-clamp: 3;
}
}
.tags {
margin-top: 10px;
}
.tag {
margin-right: 8px;
color: #007eff;
background-color: #f9f9f9;
border: 0;
}
.type {
display: inline-block;
padding: 4px 11px;
font-size: 12px;
color: #666;
border: 1px solid #dadada;
border-radius: 20px;
}
.metas {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.meta {
display: inline-flex;
align-items: center;
color: #b5bfd5;
font-size: 12px;
.icon {
width: 14px;
max-height: 14px;
margin-right: 3px;
}
}
&:hover {
box-shadow: 0px 5px 12px 4px rgba(142, 123, 253, 0.09), 0px 3px 6px 0px rgba(142, 123, 253, 0.12),
0px 1px 2px -2px rgba(142, 123, 253, 0.16);
img {
transform: scale(1.05);
}
}
} }
}
&:hover {
box-shadow: 0px 5px 12px 4px rgba(142, 123, 253, 0.09), 0px 3px 6px 0px rgba(142, 123, 253, 0.12), 0px 1px 2px -2px rgba(142, 123, 253, 0.16);
img {
transform: scale(1.05);
}
}
} }
}
} }
.link-line { .link-line {
margin: 5px 0; margin: 5px 0;
.url { .url {
color: #007EFF; color: #007eff;
text-decoration: underline; text-decoration: underline;
} }
} }
</style> </style>

File diff suppressed because it is too large Load Diff

@ -1,55 +1,58 @@
<template> <template>
<div> <div>
<el-card v-if="showBack" shadow="hover" class="m-b-20"> <el-card v-if="showBack"
<el-page-header content="实验项目管理" @back="goBack"></el-page-header> shadow="hover"
</el-card> class="m-b-20">
<div class="page"> <el-page-header content="实验项目管理"
<h6 class="p-title">筛选</h6> @back="goBack"></el-page-header>
<div class="tool mul"> </el-card>
<ul class="filter"> <div class="page">
<li> <h6 class="p-title">筛选</h6>
<label>创建人</label> <div class="tool mul">
<el-select v-model="queryData.founder" placeholder="请选择创建人" @change="founderChange"> <ul class="filter">
<el-option <li>
v-for="(item,index) in founderList" <label>创建人</label>
:key="index" <el-select v-model="queryData.founder"
:label="item.label" placeholder="请选择创建人"
:value="item.value" @change="founderChange">
></el-option> <el-option v-for="(item,index) in founderList"
</el-select> :key="index"
</li> :label="item.label"
<li> :value="item.value"></el-option>
<label>状态</label> </el-select>
<el-select v-model="queryData.state" clearable placeholder="请选择状态" @change="initData"> </li>
<el-option <li>
v-for="(item,index) in stateList" <label>状态</label>
:key="index" <el-select v-model="queryData.state"
:label="item.label" clearable
:value="item.value" placeholder="请选择状态"
></el-option> @change="initData">
</el-select> <el-option v-for="(item,index) in stateList"
</li> :key="index"
<li> :label="item.label"
<label>权限</label> :value="item.value"></el-option>
<el-select v-model="queryData.permissions" placeholder="请选择" @change="initData"> </el-select>
<el-option </li>
v-for="item in permissionsList" <li>
:key="item.value" <label>权限</label>
:label="item.label" <el-select v-model="queryData.permissions"
:value="item.value" placeholder="请选择"
></el-option> @change="initData">
</el-select> <el-option v-for="item in permissionsList"
</li> :key="item.value"
<li> :label="item.label"
<label>课程</label> :value="item.value"></el-option>
<el-cascader </el-select>
v-model="cid" </li>
:options="curs" <li>
:props="{ checkStrictly: true, value: 'id' }" <label>课程</label>
popper-class="course-cas" <el-cascader v-model="cid"
@expand-change="curChange" :options="curs"
@change="curChange"></el-cascader> :props="{ checkStrictly: true, value: 'id' }"
<!-- <el-select v-model="queryData.cid" @change="courseChange"> popper-class="course-cas"
@expand-change="curChange"
@change="curChange"></el-cascader>
<!-- <el-select v-model="queryData.cid" @change="courseChange">
<el-option <el-option
v-for="item in curriculumList" v-for="item in curriculumList"
:key="item.cid" :key="item.cid"
@ -57,8 +60,8 @@
:value="item.cid"> :value="item.cid">
</el-option> </el-option>
</el-select> --> </el-select> -->
</li> </li>
<!-- <li> <!-- <li>
<label>系统</label> <label>系统</label>
<el-select v-model="systemId" placeholder="请选择" @change="initData"> <el-select v-model="systemId" placeholder="请选择" @change="initData">
<el-option <el-option
@ -69,388 +72,437 @@
></el-option> ></el-option>
</el-select> </el-select>
</li> --> </li> -->
<li> <li>
<el-input placeholder="请输入项目名称" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input> <el-input placeholder="请输入项目名称"
</li> prefix-icon="el-icon-search"
</ul> v-model="keyword"
<div> clearable></el-input>
<el-button v-auth type="info" @click="add">新增项目</el-button> </li>
<el-button v-auth type="primary" @click="delAllData">批量删除</el-button> </ul>
</div> <div>
</div> <el-button v-auth
type="info"
@click="add">新增项目</el-button>
<el-button v-auth
type="primary"
@click="delAllData">批量删除</el-button>
</div>
</div>
<el-table :data="listData" class="table" ref="table" stripe header-align="center" <el-table :data="listData"
@selection-change="handleSelectionChange"> class="table"
<el-table-column type="selection" width="55" align="center" :selectable="disabledSelection"></el-table-column> ref="table"
<el-table-column type="index" width="100" label="序号" align="center"> stripe
<template slot-scope="scope">{{ scope.$index + (page - 1) * pageSize + 1 }}</template> header-align="center"
</el-table-column> @selection-change="handleSelectionChange">
<el-table-column prop="projectName" label="实验项目名称" min-width="400" align="center" show-overflow-tooltip></el-table-column> <el-table-column type="selection"
<el-table-column prop="founder" label="创建人" min-width="150" align="center"> width="55"
<template slot-scope="scope"> align="center"
{{ founderKeys[scope.row.founder] }} :selectable="disabledSelection"></el-table-column>
</template> <el-table-column type="index"
</el-table-column> width="100"
<el-table-column label="权限" min-width="120" align="center"> label="序号"
<template slot-scope="scope"> align="center">
{{ permissionsKeys[scope.row.permissions] }} <template slot-scope="scope">{{ scope.$index + (page - 1) * pageSize + 1 }}</template>
</template> </el-table-column>
</el-table-column> <el-table-column prop="projectName"
<el-table-column prop="createTime" label="创建时间" min-width="150" align="center"></el-table-column> label="实验项目名称"
<el-table-column prop="status" label="状态" min-width="100" align="center"> min-width="400"
<template slot-scope="scope"> align="center"
{{ stateKeys[scope.row.state] }} show-overflow-tooltip></el-table-column>
</template> <el-table-column prop="founder"
</el-table-column> label="创建人"
<el-table-column label="操作" width="300" align="center"> min-width="150"
<template slot-scope="scope"> align="center">
<el-button type="text" @click="edit(scope.row, 1)">查看</el-button> <template slot-scope="scope">
<el-button v-if="scope.row.founder && (roleName.includes('超级') || roleName === scope.row.roleName || (roleName === '管理员' && !scope.row.roleName.includes('超级')))" type="text" @click="edit(scope.row)">编辑</el-button> {{ founderKeys[scope.row.founder] }}
<el-button v-if="scope.row.founder && (roleName.includes('超级') || roleName === scope.row.roleName || (roleName === '管理员' && !scope.row.roleName.includes('超级')))" type="text" @click="handleDelete(scope.row.projectId)">删除</el-button> </template>
<el-button v-auth type="text" @click="copyData(scope.row.projectId)">复制</el-button> </el-table-column>
<el-switch <el-table-column label="权限"
v-auth="'禁用'" min-width="120"
v-if="scope.row.state" align="center">
v-model="scope.row.ccupationlabOpen" <template slot-scope="scope">
:active-text="scope.row.ccupationlabOpen ? '关闭' : '启用'" {{ permissionsKeys[scope.row.permissions] }}
:active-value="0" </template>
:inactive-value="1" </el-table-column>
style="margin: 0 10px 0 10px" <el-table-column prop="createTime"
@change="switchOff(scope.row)" label="创建时间"
></el-switch> min-width="150"
</template> align="center"></el-table-column>
</el-table-column> <el-table-column prop="status"
</el-table> label="状态"
<div class="pagination"> min-width="100"
<el-pagination background @current-change="handleCurrentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination> align="center">
</div> <template slot-scope="scope">
{{ stateKeys[scope.row.state] }}
</template>
</el-table-column>
<el-table-column label="操作"
width="300"
align="center">
<template slot-scope="scope">
<el-button type="text"
@click="edit(scope.row, 1)">查看</el-button>
<el-button v-if="scope.row.founder && (roleName.includes('超级') || roleName === scope.row.roleName || (roleName === '管理员' && !scope.row.roleName.includes('超级')))"
type="text"
@click="edit(scope.row)">编辑</el-button>
<el-button v-if="scope.row.founder && (roleName.includes('超级') || roleName === scope.row.roleName || (roleName === '管理员' && !scope.row.roleName.includes('超级')))"
type="text"
@click="handleDelete(scope.row.projectId)">删除</el-button>
<el-button v-auth
type="text"
@click="copyData(scope.row.projectId)">复制</el-button>
<el-switch v-auth="'禁用'"
v-if="scope.row.state"
v-model="scope.row.ccupationlabOpen"
:active-text="scope.row.ccupationlabOpen ? '关闭' : '启用'"
:active-value="0"
:inactive-value="1"
style="margin: 0 10px 0 10px"
@change="switchOff(scope.row)"></el-switch>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination background
@current-change="handleCurrentChange"
:current-page="page"
layout="total, prev, pager, next"
:total="total"></el-pagination>
</div>
<el-dialog title="复制" :visible.sync="copyVisible" width="24%" center :close-on-click-modal="false"> <el-dialog title="复制"
<el-form> :visible.sync="copyVisible"
<el-form-item> width="24%"
<!--前端不用做名称判重了@change='projectNameExistis'--> center
<el-input placeholder="请输入项目名称" v-model="projectName"></el-input> :close-on-click-modal="false">
</el-form-item> <el-form>
</el-form> <el-form-item>
<span slot="footer" class="dialog-footer"> <!--前端不用做名称判重了@change='projectNameExistis'-->
<el-button @click="copyVisible = false"> </el-button> <el-input placeholder="请输入项目名称"
<el-button type="primary" @click="copySubmit"> </el-button> v-model="projectName"></el-input>
</span> </el-form-item>
</el-dialog> </el-form>
</div> <span slot="footer"
class="dialog-footer">
<el-button @click="copyVisible = false"> </el-button>
<el-button type="primary"
@click="copySubmit"> </el-button>
</span>
</el-dialog>
</div> </div>
</div>
</template> </template>
<script> <script>
import { mapState, mapActions, mapMutations } from "vuex"; import { mapState, mapActions, mapMutations } from "vuex";
import util from "@/libs/util"; import util from "@/libs/util";
export default { export default {
data() { data () {
return { return {
showBack: Boolean(this.$route.query.show), showBack: Boolean(this.$route.query.show),
cid: [], cid: [],
curs: [], curs: [],
systemId: "", systemId: "",
systemList: [], systemList: [],
systemListAll: [], systemListAll: [],
curriculumId: '', curriculumId: '',
curriculumList: [], curriculumList: [],
queryData: { queryData: {
platformId: 1, // :1 :3 platformId: 1, // :1 :3
founder: +this.$route.query.founder || 2, // (0: 1: 2:) founder: +this.$route.query.founder || 2, // (0: 1: 2:)
state: "", // (0:稿 1:) state: "", // (0:稿 1:)
permissions: "", // (0: 1: 2:) permissions: "", // (0: 1: 2:)
cid: '' cid: ''
}, },
keyword: "", keyword: "",
status: "", status: "",
listData: [], listData: [],
total: 0, total: 0,
permissionsList: [ permissionsList: [
{ {
value: "", value: "",
label: "不限" label: "不限"
}, { }, {
value: 0, value: 0,
label: "练习" label: "练习"
}, { }, {
value: 1, value: 1,
label: "考核" label: "考核"
}, { }, {
value: 2, value: 2,
label: "竞赛" label: "竞赛"
} }
], ],
permissionsKeys: { permissionsKeys: {
0: "练习", 0: "练习",
1: "考核", 1: "考核",
2: "竞赛" 2: "竞赛"
}, },
founderList: [ founderList: [
{ {
value: 2, value: 2,
label: "全部" label: "全部"
}, { }, {
value: 0, value: 0,
label: "系统" label: "系统"
}, { }, {
value: 1, value: 1,
label: "老师" label: "老师"
} }
], ],
founderKeys: { founderKeys: {
0: "系统", 0: "系统",
1: "老师" 1: "老师"
}, },
stateList: [ stateList: [
{ {
value: "", value: "",
label: "不限" label: "不限"
}, { }, {
value: 0, value: 0,
label: "草稿箱" label: "草稿箱"
}, { }, {
value: 1, value: 1,
label: "已发布" label: "已发布"
} }
], ],
stateKeys: { stateKeys: {
0: "草稿箱", 0: "草稿箱",
1: "已发布" 1: "已发布"
}, },
page: +this.$route.query.page || 1, page: +this.$route.query.page || 1,
pageSize: 10, pageSize: 10,
multipleSelection: [], multipleSelection: [],
copyVisible: false, copyVisible: false,
projectName: "", projectName: "",
currentRow: {}, // currentRow: {}, //
listDataAll: [], listDataAll: [],
isFirst: true isFirst: true
}; };
},
computed: {
...mapState("user", [
"userId", "roleId", 'roleName'
]),
...mapState("project", [
"lastSystemId",
"assFields",
"queryDataStatus",
])
},
watch: {
keyword: function (val) {
clearTimeout(this.searchTimer);
this.searchTimer = setTimeout(() => {
this.initData();
}, 500);
}, },
computed: { queryData: {
...mapState("user", [ handler: function (newVal) {
"userId", "roleId", 'roleName' this.setQueryStatus({ ...newVal })
]), },
...mapState("project", [ deep: true
"lastSystemId", }
"assFields", },
"queryDataStatus", mounted () {
]) this.getSystemData()
this.getData()
if (this.queryDataStatus.platformId) {
this.queryData = this.queryDataStatus
}
},
methods: {
...mapActions("project", [
"setSystemId"
]),
...mapMutations({
setQueryStatus: "project/SET_QUERYDATASTATUS"
}),
getData () {
this.setSystemId(this.systemId);
if (this.isFirst) this.page = +this.$route.query.page || 1
let data = {
...this.queryData,
projectName: this.keyword,
pageNum: this.page,
pageSize: this.pageSize,
systemId: this.systemId
};
this.$post(this.api.queryProjectManage, data).then(res => {
this.isFirst = false
this.listData = res.data.records;
this.total = res.data.total;
}).catch(err => {
});
}, },
watch: { //
keyword: function(val) { getSystemData () {
clearTimeout(this.searchTimer); this.$get(this.api.getSystemIdBySchool).then(({ data }) => {
this.searchTimer = setTimeout(() => { this.systemListAll = data
this.initData(); this.getschoolCourse()
}, 500); }).catch(err => { })
}, },
queryData: { //
handler: function(newVal) { getschoolCourse () {
this.setQueryStatus({...newVal}) this.$get(this.api.getSchoolEffectiveCourse).then(({ data }) => {
}, this.curriculumList = data
deep: true const { cid } = this.queryData
if (data.length) {
this.cid = [cid || data[0].cid]
const all = this.systemListAll
data.map(e => {
e.id = e.cid
e.label = e.curriculumName
e.children = all.filter(n => e.systemId.split(',').includes(n.id + '')) //
})
this.curs = data
this.curChange(this.cid)
} }
}).catch(err => { })
},
//
curChange (val) {
const cid = val[0]
if (val.length === 1) {
//
this.cid = [cid, this.curs.find(e => e.id === cid).children[0].id]
}
this.queryData.cid = cid
this.systemId = this.cid[1]
this.initData()
}, },
mounted() { //
this.getSystemData() founderChange (val) {
this.getData() this.$router.push({
if(this.queryDataStatus.platformId) { path: 'list',
this.queryData = this.queryDataStatus query: {
...this.$route.query,
founder: val
} }
})
this.initData()
},
initData () {
this.page = 1;
this.getData();
},
disabledSelection (row, index) { //
const roleName = this.roleName
if (row.founder && (roleName.includes('超级') || roleName === row.roleName || (roleName === '管理员' && !row.roleName.includes('超级')))) return true
return false
},
handleCurrentChange (val) { //
this.page = val;
// this.$router.push({
// path: '/project/list',
// query: {
// ...this.$route.query,
// page: val
// }
// })
this.getData();
},
add () { //
this.setSystemId(this.systemId);
this.$router.push(`/project/add?founder=${this.queryData.founder}`);
},
edit (row, show) { //
this.setSystemId(row.systemId);
this.$router.push(`/project/add?projectId=${row.projectId}&founder=${this.queryData.founder}${show ? `&show=1` : ''}`);
},
handleSelectionChange (val) { //
this.multipleSelection = val;
},
delAllData () { //
if (this.multipleSelection.length) {
let ids = this.multipleSelection.map(item => {
return item.projectId;
});
let strIds = ids.toString();
this.handleDelete(strIds);
} else {
util.errorMsg("请先选择项目");
}
}, },
methods: { handleDelete (ids) { //
...mapActions("project", [ this.$confirm("确定要删除吗?", "提示", {
"setSystemId" type: "warning"
]), }).then(() => {
...mapMutations({ this.$post(`${this.api.deleteProjectManage}?projectIds=${ids}&platformId=${this.queryData.platformId}`).then(res => {
setQueryStatus: "project/SET_QUERYDATASTATUS" util.successMsg("删除成功");
}), this.$refs.table.clearSelection()
getData() { this.getData();
this.setSystemId(this.systemId); }).catch(err => {
if (this.isFirst) this.page = +this.$route.query.page || 1 console.log(err);
let data = { });
...this.queryData, }).catch(() => {
projectName: this.keyword, this.$message.info("已取消删除");
pageNum: this.page, });
pageSize: this.pageSize, },
systemId: this.systemId switchOff (row) { //
}; this.$get(`${this.api.updateIsOpen}?isOpen=${row.ccupationlabOpen}&projectId=${row.projectId}&platformId=${this.queryData.platformId}`).then(res => {
this.$post(this.api.queryProjectManage, data).then(res => { util.successMsg("更新启用状态成功");
this.isFirst = false this.getData();
this.listData = res.data.records; }).catch(err => {
this.total = res.data.total; console.log(err);
}).catch(err => { });
}); },
}, projectNameExistis () { //
// if (this.projectName) {
getSystemData() { this.$post(this.api.queryNameIsExist, { projectName: this.projectName }).then(res => {
this.$get(this.api.getSystemIdBySchool).then(({ data }) => { if (res.status === 200) {
this.systemListAll = data this.projectNameRepeat = false;
this.getschoolCourse()
}).catch(err => {})
},
//
getschoolCourse() {
this.$get(this.api.getSchoolEffectiveCourse).then(({ data }) => {
this.curriculumList = data
const { cid } = this.queryData
if (data.length) {
this.cid = [cid || data[0].cid]
const all = this.systemListAll
data.map(e => {
e.id = e.cid
e.label = e.curriculumName
e.children = all.filter(n => e.systemId.split(',').includes(n.id + '')) //
})
this.curs = data
this.curChange(this.cid)
}
}).catch(err => {})
},
//
curChange(val) {
const cid = val[0]
if (val.length === 1) {
//
this.cid = [cid, this.curs.find(e => e.id === cid).children[0].id]
} }
this.queryData.cid = cid }).catch(err => {
this.systemId = this.cid[1] this.projectNameRepeat = true;
this.initData() });
}, } else {
// this.projectNameRepeat = false;
founderChange(val) { }
this.$router.push({ },
path: 'list', copyData (projectId) { // id
query: { this.copyVisible = true;
...this.$route.query, this.$get(`${this.api.getProjectDetail}?projectId=${projectId}`).then(res => {
founder: val this.projectName = res.projectManage.projectName;
} this.currentRow = {
}) projectManage: res.projectManage,
this.initData() projectJudgmentList: res.projectJudgmentVos
}, };
initData() { }).catch(err => {
this.page = 1; console.log(err);
this.getData(); });
}, },
disabledSelection(row, index) { // copySubmit () {
const roleName = this.roleName if (!this.projectName) {
if (row.founder && (roleName.includes('超级') || roleName === row.roleName || (roleName === '管理员' && !row.roleName.includes('超级')))) return true util.warningMsg("请输入项目名称");
return false return;
}, }
handleCurrentChange(val) { // ;
this.page = val; if (this.projectNameRepeat) {
// this.$router.push({ util.warningMsg("该项目名称已存在");
// path: '/project/list', return;
// query: { }
// ...this.$route.query, this.currentRow.projectManage.projectName = this.projectName;
// page: val this.currentRow.projectManage.projectId = "";
// } this.currentRow.projectManage.founder = 1
// }) this.currentRow.projectJudgmentList.forEach(i => {
this.getData(); i.projectId = "";
}, });
add() { // this.$post(`${this.api.copyProjectManage}`, this.currentRow).then(res => {
this.setSystemId(this.systemId); this.initData();
this.$router.push(`/project/add?founder=${this.queryData.founder}`); util.successMsg("复制实验项目成功");
}, this.copyVisible = false;
edit(row, show) { // }).catch(err => {
this.setSystemId(row.systemId); console.log(err);
this.$router.push(`/project/add?projectId=${row.projectId}&founder=${this.queryData.founder}${show ? `&show=1` : ''}`); });
}, },
handleSelectionChange(val) { // goBack () { //
this.multipleSelection = val; this.$router.back();
},
delAllData() { //
if (this.multipleSelection.length) {
let ids = this.multipleSelection.map(item => {
return item.projectId;
});
let strIds = ids.toString();
this.handleDelete(strIds);
} else {
util.errorMsg("请先选择项目");
}
},
handleDelete(ids) { //
this.$confirm("确定要删除吗?", "提示", {
type: "warning"
}).then(() => {
this.$post(`${this.api.deleteProjectManage}?projectIds=${ids}&platformId=${this.queryData.platformId}`).then(res => {
util.successMsg("删除成功");
this.$refs.table.clearSelection()
this.getData();
}).catch(err => {
console.log(err);
});
}).catch(() => {
this.$message.info("已取消删除");
});
},
switchOff(row) { //
this.$get(`${this.api.updateIsOpen}?isOpen=${row.ccupationlabOpen}&projectId=${row.projectId}&platformId=${this.queryData.platformId}`).then(res => {
util.successMsg("更新启用状态成功");
this.getData();
}).catch(err => {
console.log(err);
});
},
projectNameExistis() { //
if (this.projectName) {
this.$post(this.api.queryNameIsExist, { projectName: this.projectName }).then(res => {
if (res.status === 200) {
this.projectNameRepeat = false;
}
}).catch(err => {
this.projectNameRepeat = true;
});
} else {
this.projectNameRepeat = false;
}
},
copyData(projectId) { // id
this.copyVisible = true;
this.$get(`${this.api.getProjectDetail}?projectId=${projectId}`).then(res => {
this.projectName = res.projectManage.projectName;
this.currentRow = {
projectManage: res.projectManage,
projectJudgmentList: res.projectJudgmentVos
};
}).catch(err => {
console.log(err);
});
},
copySubmit() {
if (!this.projectName) {
util.warningMsg("请输入项目名称");
return;
}
;
if (this.projectNameRepeat) {
util.warningMsg("该项目名称已存在");
return;
}
this.currentRow.projectManage.projectName = this.projectName;
this.currentRow.projectManage.projectId = "";
this.currentRow.projectManage.founder = 1
this.currentRow.projectJudgmentList.forEach(i => {
i.projectId = "";
});
this.$post(`${this.api.copyProjectManage}`, this.currentRow).then(res => {
this.initData();
util.successMsg("复制实验项目成功");
this.copyVisible = false;
}).catch(err => {
console.log(err);
});
},
goBack() { //
this.$router.back();
}
} }
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
</style> </style>

@ -1,89 +1,104 @@
<template> <template>
<!-- 实验台 --> <!-- 实验台 -->
<div class="wrap"> <div class="wrap">
<div class="search"> <div class="search">
<h6>创新实验智能教学</h6> <h6>创新实验智能教学</h6>
<div class="input" v-auth="'搜索'"> <div class="input"
<img src="@/assets/img/search.png" alt=""> v-auth="'搜索'">
<input type="text" placeholder="请输入关键词" v-model="keyword"> <img src="@/assets/img/search.png"
</div> alt="">
<input type="text"
placeholder="请输入关键词"
v-model="keyword">
</div>
</div>
<div class="station">
<div class="inner">
<div class="tab">
<a class="item"
v-for="(item, i) in tabs"
:key="i"
:class="{active: item.id == active}"
@click="tabChange(item)">{{ item.name }}</a>
</div> </div>
<div class="station"> <div class="curs">
<div class="inner"> <template v-if="curriculumList.length">
<div class="tab"> <template v-for="(item,index) in curriculumList">
<a class="item" v-for="(item, i) in tabs" :key="i" :class="{active: item.id == active}" @click="tabChange(item)">{{ item.name }}</a> <div class="item"
</div> :title="item.curriculumName"
<div class="curs"> @click="goPreview(item)"
<template v-if="curriculumList.length"> :key="index"
<template v-for="(item,index) in curriculumList"> v-if="!keyword || item.curriculumName.includes(keyword)">
<div class="item" :title="item.curriculumName" @click="goPreview(item)" :key="index" v-if="!keyword || item.curriculumName.includes(keyword)"> <img :src="item.coverUrl"
<img :src="item.coverUrl" alt=""> alt="">
<div class="bottom"> <div class="bottom">
<p class="text"><span>{{ item.goodsName || item.curriculumName }}</span></p> <p class="text"><span>{{ item.goodsName || item.curriculumName }}</span></p>
<a>进入实验</a> <a>进入实验</a>
</div>
</div>
</template>
</template>
<div class="empty flex-1" v-else>
<div>
<img src="@/assets/img/none.png" alt="">
<p>暂无数据</p>
</div> </div>
</div> </div>
</template>
</template>
<div class="empty flex-1"
v-else>
<div>
<img src="@/assets/img/none.png"
alt="">
<p>暂无数据</p>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
name: "backstage", name: "backstage",
data() { data () {
return { return {
keyword: "", keyword: "",
active: 0, active: 0,
tabs: [ tabs: [
{ {
id: 0, id: 0,
name: '实验课程' name: '实验课程'
}, },
{ {
id: 1, id: 1,
name: '最近使用' name: '最近使用'
}
],
curriculumList: []
} }
],
curriculumList: []
}
},
mounted () {
this.getschoolCourse();
},
methods: {
getschoolCourse () { //
this.active ?
this.$post(this.api.recentUse, {
pageNum: 1,
pageSize: 100
}).then(({ page }) => {
this.curriculumList = page.records
}).catch(err => { }) :
this.$get(this.api.schoolCourse).then(res => {
this.curriculumList = res.data;
}).catch(err => {
console.log(err);
});
}, },
mounted() { goPreview (item) {
this.getschoolCourse(); this.$router.push(`/station/preview?courseId=${item.cid}&curriculumName=${item.curriculumName}&mallId=${item.mallId || ''}&admin=1`);
}, },
methods: { // tab
getschoolCourse() { // tabChange (item) {
this.active ? this.active = item.id
this.$post(this.api.recentUse, { this.getschoolCourse()
pageNum: 1, },
pageSize: 100 }
}).then(({ page }) => {
this.curriculumList = page.records
}).catch(err => {}) :
this.$get(this.api.schoolCourse).then(res => {
this.curriculumList = res.data;
}).catch(err => {
console.log(err);
});
},
goPreview(item) {
this.$router.push(`/station/preview?courseId=${item.cid}&curriculumName=${item.curriculumName}&mallId=${item.mallId || ''}`);
},
// tab
tabChange(item) {
this.active = item.id
this.getschoolCourse()
},
}
}; };
</script> </script>
@ -138,18 +153,18 @@ export default {
border-bottom: 3px solid transparent; border-bottom: 3px solid transparent;
cursor: pointer; cursor: pointer;
&.active { &.active {
color: #007EFF; color: #007eff;
border-color: #007EFF; border-color: #007eff;
} }
} }
} }
.station { .station {
min-height: calc(100vh - 520px); min-height: calc(100vh - 520px);
background: url(../../../assets/img/station1.png) (top left)/auto no-repeat, background: url(../../../assets/img/station1.png) (top left) / auto no-repeat,
url(../../../assets/img/station2.png) bottom right/auto no-repeat; url(../../../assets/img/station2.png) bottom right/auto no-repeat;
.inner { .inner {
width: 1072px; width: 1072px;
margin: 0 auto; margin: 0 auto;
} }
.curs { .curs {
display: flex; display: flex;
@ -166,7 +181,7 @@ export default {
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
opacity: .9; opacity: 0.9;
} }
img { img {
width: 215px; width: 215px;
@ -197,26 +212,26 @@ export default {
padding: 0 8px; padding: 0 8px;
line-height: 28px; line-height: 28px;
font-size: 14px; font-size: 14px;
color: #7A7A7A; color: #7a7a7a;
border-radius: 20px; border-radius: 20px;
border: 1px solid #DADADA; border: 1px solid #dadada;
} }
} }
} }
} }
.empty{ .empty {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 50px 0; padding: 50px 0;
text-align: center; text-align: center;
img{ img {
width: 471px; width: 471px;
} }
p{ p {
margin-top: 40px; margin-top: 40px;
font-size: 18px; font-size: 18px;
color: rgba(0, 0, 0, 0.25); color: rgba(0, 0, 0, 0.25);
} }
} }
</style> </style>

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save