订单、商城、课程新迭代开发

dev_202304
yujialong 2 years ago
parent 5d1f3e98b1
commit 4864873fb0
  1. 5
      src/components/Sidebar.vue
  2. 8
      src/router/index.js
  3. 0
      src/utils/editor.js
  4. 1
      src/views/course/Curriculum.vue
  5. 840
      src/views/order/AddOrder.vue
  6. 2
      src/views/parnerOperation/learnMg.vue
  7. 2
      src/views/parnerOperation/schemeSet.vue
  8. 778
      src/views/shop/addProduct/index.vue
  9. 54
      src/views/shop/list/index.vue
  10. 273
      src/views/shop/list/market/index.vue
  11. 272
      src/views/shop/list/product/index.vue

@ -117,6 +117,11 @@ export default {
index: '/parnerOperation',
title: '合伙运营'
},
{
icon: 'el-icon-s-shop',
index: '/shop',
title: '商城管理'
},
],
menus: [],
onRoutes: this.$route.path

@ -229,6 +229,14 @@ let router = new Router({
path: '/schemeSet',
component: () => import('../views/parnerOperation/schemeSet'),
},
{
path: '/shop',
component: () => import('../views/shop/list'),
},
{
path: '/shop/addProduct',
component: () => import('../views/shop/addProduct'),
},
{
path: '/404',
component: () => import('../views/404.vue'),

@ -83,6 +83,7 @@
<span class="ellipsis">{{ courseTypeStatus[scope.row.curriculumType] }}</span>
</template>
</el-table-column>
<el-table-column prop="userName" label="创建人" align="center"></el-table-column>
<el-table-column label="配置的实训应用" align="center">
<template slot-scope="scope">
<span class="ellipsis">{{ scope.row.sysName }}</span>

File diff suppressed because it is too large Load Diff

@ -230,7 +230,7 @@ import Setting from '@/setting'
import Util from '@/libs/util'
import { mapState } from 'vuex'
import Editor from '@tinymce/tinymce-vue'
import editorConfig from './editor'
import editorConfig from '@/utils/editor'
import Cropper from '@/components/img-upload/Cropper'
import Axios from 'axios'
export default {

@ -120,7 +120,7 @@
import Setting from '@/setting'
import Util from '@/libs/util'
import Editor from '@tinymce/tinymce-vue'
import editorConfig from './editor'
import editorConfig from '@/utils/editor'
import Cropper from '@/components/img-upload/Cropper'
import Axios from 'axios'
export default {

@ -0,0 +1,778 @@
<template>
<div>
<el-card shadow="hover" class="m-b-20">
<div class="flex-between">
<el-page-header @back="back" :content="form.id ? '编辑产品' : '新增产品'"></el-page-header>
</div>
</el-card>
<el-card shadow="hover" class="m-b-20">
<el-form :model="form" :rules="rules" ref="form" label-width="100px">
<el-col :span="6" :offset="5">
<el-form-item label="关联产品" prop="curriculumName">
<el-input placeholder="请输入课程名称" v-model.trim="form.curriculumName"></el-input>
</el-form-item>
<el-form-item label="产品名称" prop="categoryId">
<el-input placeholder="请输入产品名称" v-model.trim="form.curriculumName"></el-input>
</el-form-item>
<el-form-item label="分类标签" prop="professionalId">
<el-select style="width: 234px;" v-model="form.classificationId">
<template v-for="item in classifications">
<el-option
v-if="item.id"
:key="item.id"
:label="item.classificationName"
:value="item.id">
</el-option>
</template>
</el-select>
<el-button style="margin-left: 5px" type="primary" @click="setClass">自定义</el-button>
</el-form-item>
</el-col>
<el-col :span="6" :offset="2">
<el-form-item label="产品分类">
<el-select v-model="form.curriculumType" clearable placeholder="请选择产品分类">
<el-option label="理论课程" :value="0"></el-option>
<el-option label="实训课程" :value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="产品类型" prop="professionalCategoryId">
<el-select v-model="form.professionalCategoryId" clearable placeholder="请选择产品类型">
<el-option v-for="(item,index) in ProfessionalClassList" :key="index"
:label="item.professionalClassName"
:value="item.professionalClassId"></el-option>
</el-select>
</el-form-item>
<el-form-item label="供应厂商" prop="supplier">
<el-select v-model="form.supplier" clearable placeholder="请选择供应厂商" multiple>
<el-option v-for="(item, i) in suppliers" :key="i" :label="item.supplierName" :value="item.supplierId"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="14" :offset="5">
<div class="subject" style="display: flex;">
<el-form-item label="学科类别" prop="supplier">
<el-select
v-model="form.disciplineId"
placeholder="选择专业学科"
@change="id => getItemProfessionalClass(id,index)"
@clear="() => clearItemClass(index)"
>
<el-option
v-for="item in subjectList"
:key="item.value"
:label="item.disciplineName"
:value="item.disciplineId"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="专业类" prop="supplier">
<el-select
v-model="form.professionalClassId"
placeholder="选择专业类"
:disabled="form.disciplineId ? false : true"
@change="id => getItemProfessional(id,index)"
@clear="() => clearItemProfess(index)"
>
<el-option
v-for="item in ProfessionalClassList"
:key="item.professionalClassId"
:label="item.professionalClassName"
:value="item.professionalClassId"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="专业类" prop="supplier">
<el-select
v-model="form.professionalId"
placeholder="选择专业"
:disabled="form.professionalClassId ? false : true"
@change="getItemStuGrade"
>
<el-option
v-for="item in ProfessionalList"
:key="item.professionalId"
:label="item.professionalName"
:value="item.professionalId"
></el-option>
</el-select>
</el-form-item>
</div>
</el-col>
<el-col :span="6" :offset="5">
<el-form-item label="匹配课程" prop="briefIntroduction">
<el-input placeholder="请输入匹配课程"
v-model.trim="form.briefIntroduction"></el-input>
</el-form-item>
</el-col>
<el-col :span="6" :offset="2">
<el-form-item label="预计课时" prop="briefIntroduction">
<el-select v-model="form.supplier" clearable placeholder="请选择预计课时" multiple>
<el-option label="48" value="48"></el-option>
<el-option label="64" value="64"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="14" :offset="5">
<el-form-item label="适用场景" prop="briefIntroduction">
<el-input placeholder="请输入适用场景"
v-model.trim="form.briefIntroduction"></el-input>
</el-form-item>
<el-form-item label="课程封面" prop="coverUrl">
<el-upload
class="avatar-uploader"
accept=".jpg,.png,.jpeg"
:on-remove="handleRemove"
:on-error="uploadError"
:on-success="uploadSuccess"
:before-remove="beforeRemove"
:limit="1"
:on-exceed="handleExceed"
:action="this.api.fileupload"
:headers="headers"
name="file"
>
<img v-if="form.coverUrl" :src="form.coverUrl" class="avatar">
<div class="uploader-default" v-else>
<i class="el-icon-plus"></i>
<p>上传封面</p>
</div>
<div slot="tip" class="el-upload__tip">
<p>只能上传jpg/png文件</p>
<p>课程封面图将按1:1显示最佳分辨率80*80</p>
</div>
</el-upload>
</el-form-item>
<el-form-item label="界面图" prop="miniProgramPictureAddress">
<el-upload
class="avatar-uploader"
accept=".jpg,.png,.jpeg"
:on-remove="handleRemoveMini"
:on-error="uploadError"
:on-success="uploadSuccessMini"
:before-remove="beforeRemove"
:limit="1"
:on-exceed="handleExceed"
:action="this.api.fileupload"
:headers="headers"
name="file"
>
<img v-if="form.miniProgramPictureAddress" :src="form.miniProgramPictureAddress" class="avatar">
<div class="uploader-default" v-else>
<i class="el-icon-plus"></i>
<p>上传界面图</p>
</div>
<div slot="tip" class="el-upload__tip">
<p>只能上传jpg/png文件</p>
</div>
</el-upload>
</el-form-item>
<el-form-item label="小程序图标" prop="miniProgramPictureAddress">
<el-upload
class="avatar-uploader"
accept=".jpg,.png,.jpeg"
:on-remove="handleRemoveMini"
:on-error="uploadError"
:on-success="uploadSuccessMini"
:before-remove="beforeRemove"
:limit="1"
:on-exceed="handleExceed"
:action="this.api.fileupload"
:headers="headers"
name="file"
>
<img v-if="form.miniProgramPictureAddress" :src="form.miniProgramPictureAddress" class="avatar">
<div class="uploader-default" v-else>
<i class="el-icon-plus"></i>
<p>上传封面</p>
</div>
<div slot="tip" class="el-upload__tip">
<p>只能上传jpg/png文件</p>
<p>课程封面图将按1:1显示最佳分辨率80*80</p>
</div>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="14" :offset="5">
<el-form-item label="市场建议单价" prop="briefIntroduction">
<el-input style="width: 250px" placeholder="请输入市场建议单价" v-model.trim="form.briefIntroduction">
<template slot="append">/</template>
</el-input>
</el-form-item>
<el-form-item label="厂商结算价" prop="briefIntroduction">
<div class="flex">
普适地区
<el-select style="width: 250px;margin: 0 10px;" v-model="form.supplier" clearable placeholder="请选择">
<el-option label="手动录入" value="48"></el-option>
<el-option label="按折扣" value="64"></el-option>
</el-select>
<el-input style="width: 250px" v-model.trim="form.settlementPrice">
<template slot="append">/</template>
</el-input>
</div>
</el-form-item>
<el-form-item label="产品简介" prop="briefIntroduction">
<el-input type="textarea" placeholder="请输入产品简介" v-model.trim="form.briefIntroduction"></el-input>
</el-form-item>
<el-form-item label="详情介绍" prop="briefIntroduction">
<Editor api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda' v-model="form.mainBody" :init="editorConfig" />
</el-form-item>
<el-form-item prop="file" label="产品参数">
<el-upload
:before-upload="fileBeforeUpload"
:on-remove="handleRemove"
:on-success="uploadSuccessFile"
:action="this.api.fileUploadNakadai"
:file-list="form.fileList"
:headers="headers"
>
<el-button>上传文件</el-button>
</el-upload>
</el-form-item>
</el-col>
</el-form>
</el-card>
<el-dialog title="请勾选院校" :visible.sync="rangeVisible" width="580px" custom-class="range-dia" :close-on-click-modal="false">
<div class="range-wrap">
<el-cascader
ref="range"
class="range-cas"
key="range"
v-model="range"
:props="props"
:show-all-levels="false"
clearable
filterable
:before-filter="beforeFilter"
:options="rangeList"
@change="rangeChange"
@visible-change="rangeViChange"
@input.native="rangeSearch"></el-cascader>
<el-tag
v-for="(tag, i) in rangeChecked"
:key="tag.value"
class="range-check"
closable
:disable-transitions="false"
@close="val => closeRange(i)">
{{tag.label}}
</el-tag>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="rangeVisible = false"> </el-button>
<el-button size="small" type="primary" @click="rangeSubmit"> </el-button>
</span>
</el-dialog>
<el-dialog title="所属分类设置" :visible.sync="classVisible" width="500px" :close-on-click-modal="false" class="manage-dia" :before-close="closeClass">
<div class="plus">
<i class="el-icon-circle-plus-outline" @click="addClass"></i>
</div>
<el-table :data="classifications" ref="table" header-align="center" row-key="id">
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
<el-table-column prop="classificationName" label="分类名称" align="center" min-width="130">
<template slot-scope="scope">
<el-input
v-if="scope.row.edit"
placeholder="请输入分类名称"
v-model="scope.row.classificationName"
clearable
maxlength="30"
></el-input>
<span v-else>{{ scope.row.classificationName }}</span>
</template>
</el-table-column>
<el-table-column prop="updateTime1" label="是否引用" align="center" min-width="60"></el-table-column>
<el-table-column label="操作" align="center" min-width="60">
<template slot-scope="scope">
<i v-if="scope.row.edit" class="el-icon-check edit" @click="submitClass(scope.row)"></i>
<i v-else class="el-icon-edit edit" @click="editClass(scope.row)"></i>
<i class="el-icon-delete del" @click="delClass(scope.row, scope.$index)"></i>
</template>
</el-table-column>
</el-table>
<span slot="footer">
<el-button @click="closeClass">返回</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import util from "@/libs/util";
import Setting from "@/setting";
import quill from "@/components/quill";
import Editor from '@tinymce/tinymce-vue'
import editorConfig from '@/utils/editor'
export default {
name: "courseAddEdit",
data() {
const that = this
return {
headers: {
token: sessionStorage.getItem("token")
},
isDetail: Boolean(this.$route.query.show),
form: {
id: this.$route.query.id,
courseIntroduction: '',
courseName: '',
courseType: 0,
coverUrl: '',
platformSource: Setting.platformSource,
platformClassificationIds: [],
schoolClassificationsIds: [],
visibleRange: 1
},
rules: {
courseName: [
{ required: true, message: '请输入课程名称', trigger: 'blur' }
],
platformClassificationIds: [
{ required: true, message: '请选择课程分类', trigger: 'change' }
],
coverUrl: [
{ required: true, message: '请选择课程封面', trigger: 'change' }
],
courseType: [
{ required: true, message: '请选择课程类型', trigger: 'change' }
],
visibleRange: [
{ required: true, message: '请选择可见范围', trigger: 'change' }
],
courseIntroduction: [
{ required: true, message: '请输入课程介绍', trigger: 'blur' }
]
},
subjectList: [], //
ProfessionalClassList: [], //
ProfessionalList: [], //
classificationList: [],
uploadList: [],
submiting: false,
updateTime: 0,
rangeVisible: false,
range: [],
rangeInit: [],
rangeName: '',
rangeChecked: [],
schools: [],
rangeList: [],
rangeTimer: null,
//
props: {
multiple: true,
checkStrictly: true,
lazy: true,
lazyLoad (node, resolve) {
//
const input = document.querySelector('.el-cascader__search-input')
const checked = that.rangeChecked
if (input && input.value.trim()) {
const val = input.value.trim()
return that.schools.filter(e => e.label.includes(val))
}
const { level, value } = node
//
if (!level) {
that.$get(that.api.queryProvince).then(({ list }) => {
const data = []
list.map(e => {
e.value = e.provinceId
e.label = e.provinceName
e.children = []
e.disabled = !!checked.find(n => n.provinceId == e.provinceId && !n.cityId)
data.push(e)
})
resolve(data)
}).catch(res => {})
} else if (level === 1) {
//
that.$get(that.api.queryCity, {
provinceId: value
}).then(({ list }) => {
const data = []
list.map(e => {
e.value = e.cityId
e.label = e.cityName
e.children = []
e.disabled = !!checked.find(n => n.cityId == e.cityId && n.provinceId == e.provinceId && !n.schoolId)
data.push(e)
})
resolve(data)
}).catch(res => {})
} else if (level === 2) {
//
that.$get(that.api.getSchoolsByProvince, {
provinceId: node.data.provinceId,
cityId: value,
schoolName: ''
}).then(({ list }) => {
const data = []
list.map(e => {
e.value = e.schoolId
e.label = e.schoolName
e.leaf = true
e.disabled = !!checked.find(n => n.schoolId == e.schoolId && n.cityId == e.cityId && n.provinceId == e.provinceId)
data.push(e)
})
resolve(data)
}).catch(res => {})
} else {
resolve([])
}
}
},
nameRepeat: false
};
},
watch: {
// ,
form: {
handler(val){
this.updateTime++
},
deep:true
}
},
mounted() {
this.getClassification();
this.form.id && this.getData();
this.getSchool()
},
components: {
Editor
},
methods: {
getClassification() {
this.$post(this.api.listClassification, {
pageNum: 1,
pageSize: 1000,
platformSource: Setting.platformSource
}).then(({ page }) => {
this.classificationList = page.records
}).catch(res => {})
},
getData() {
this.$post(`${this.api.findTheoreticalCourse}?id=${this.form.id}`).then(({ data }) => {
// id
if (data.platformClassificationList) {
data.platformClassificationIds = data.platformClassificationList.map(e => e.classificationId)
delete data.platformClassificationList
}
this.form = data
// name
const rangeName = data.courseRangeList
if (rangeName) {
const range = []
const rangeChecked = []
rangeName.map(e => {
const name = e.type ? (e.cityName || e.provinceName) : e.schoolName
range.push(name)
rangeChecked.push({
value: e.type ? (e.cityId || e.provinceId) : e.schoolId,
label: name,
cityId: e.cityId,
provinceId: e.provinceId,
schoolId: e.schoolId,
})
})
this.rangeName = range.join(',')
this.rangeChecked = rangeChecked
}
this.uploadList.push({
name: "cover.jpg",
url: data.coverUrl
})
}).catch(err => {})
},
//
showRange() {
this.rangeVisible = true
},
//
rangeChange(val, e) {
const checked = this.$refs.range.getCheckedNodes()
const name = []
const { rangeChecked } = this
checked.map(e => {
rangeChecked.find(n => n.value === e.value && n.label == e.label) || name.push(e.data) // push
})
this.rangeChecked.push(...name)
console.log("🚀 ~ file: index.vue:306 ~ rangeChange ~ this.rangeChecked", this.rangeChecked)
},
//
rangeViChange(e) {
//
if (e) {
this.rangeList = []
}
},
//
getSchool() {
this.$get(this.api.querySchoolData).then(({ list }) => {
const result = []
list.map(e => {
e.value = e.schoolId
e.label = e.schoolName
e.leaf = true
result.push(e)
})
this.schools = result
}).catch(res => {})
},
//
beforeFilter() {
return false
},
//
rangeSearch(el) {
const val = el.target.value.trim()
const checked = this.rangeChecked
if (!val) {
this.rangeList = []
return false
}
clearTimeout(this.rangeTimer)
this.rangeTimer = setTimeout(() => {
let result = this.schools.filter(e => {
if (e.label.includes(val)) {
e.disabled = !!checked.find(n => n.schoolId == e.schoolId)
return e
}
}) //
this.rangeList = result
}, 100)
},
closeRange(i) {
this.rangeChecked.splice(i, 1)
},
//
rangeSubmit() {
// id
const data = []
const checked = this.rangeChecked
const promises = []
checked.map(e => {
if (e.cityId && !e.schoolId) {
promises.push(new Promise((resolve, reject) => {
this.$get(this.api.getSchoolsByProvince, {
provinceId: e.provinceId,
cityId: e.cityId,
schoolName: ''
}).then(({ list }) => {
list.map(e => {
data.push({
provinceId: e.provinceId || '',
cityId: e.cityId || '',
schoolId: e.schoolId || '',
type: e.schoolId ? 0 : 1
})
})
resolve()
}).catch(res => {})
}))
} else {
data.push({
provinceId: e.provinceId || '',
cityId: e.cityId || '',
schoolId: e.schoolId || '',
type: e.schoolId ? 0 : 1
})
}
})
Promise.all(promises).then(_ => {
this.form.courseRangeList = data
console.log("🚀 ~ file: index.vue ~ line 343 ~ rangeSubmit ~ data", data)
// name
const name = []
checked.map(e => {
name.push(e.label)
})
this.rangeName = name.join('、')
this.rangeVisible = false
})
},
//
nameChange(val) {
this.$post(this.api.checkRepeatTheoreticalCourse, {
id: this.form.id,
courseName: val,
platformSource: this.form.platformSource
}).then(res => {
this.nameRepeat = false
}).catch(err => {
this.nameRepeat = true
})
},
handleExceed(files, fileList) { //
util.warningMsg("当前限制选择 1 个文件,如需更换,请删除上一个文件再重新选择!");
},
uploadSuccess(res, file, fileList) {
this.form.coverUrl = res.data.filesResult.fileUrl
},
uploadError(err, file, fileList) {
this.$message({
message: "上传出错,请重试!",
type: "error",
center: true
});
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}`);
},
handleRemove(file, fileList) {
let fileName = this.form.coverUrl.replace('https://huoran.oss-cn-shenzhen.aliyuncs.com/', "");
this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => {
this.form.coverUrl = ''
}).catch(res => {});
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.nameRepeat) return util.errorMsg('当前课程名已存在!')
if (this.submiting) return false
const { form } = this
this.submiting = true
if (form.id) {
form.courseId = form.id
this.$post(this.api.updateTheoreticalCourse, form).then(res => {
this.submiting = false;
util.successMsg("修改成功");
this.$router.back();
}).catch(err => {
this.submiting = false;
});
} else {
this.$post(this.api.saveTheoreticalCourse, form).then(({ courseId }) => {
this.submiting = false;
this.$confirm("课程创建成功,是否马上进行课程内容设置?", "提示", {
type: "success",
confirmButtonText: "马上设置",
cancelButtonText: "稍后操作"
}).then(() => {
this.$router.replace(`/setTheoreticalCourse?id=${courseId}`);
}).catch(() => {
this.$router.back();
});
}).catch(err => {
this.submiting = false;
});
}
}
})
},
//
backPage() {
this.$router.back()
},
back() {
const { id } = this.form
const updateTime = this.updateTime
//
if ((id && updateTime > 2) || (!id && updateTime)) {
this.$confirm(`编辑的内容未保存,是否保存?`, '提示', {
type: 'warning'
}).then(() => {
this.save()
}).catch(() => {
this.backPage()
})
} else {
this.backPage()
}
}
}
};
</script>
<style lang="scss" scoped>
$avatar-width: 104px;
/deep/ .avatar-uploader {
.el-upload {
position: relative;
width: $avatar-width;
border: 1px dashed #d9d9d9;
border-radius: 2px;
cursor: pointer;
overflow: hidden;
&:hover {
border-color: #409EFF;
}
.uploader-default {
display: flex;
flex-direction: column;
justify-content: center;
width: $avatar-width !important;
height: $avatar-width;
text-align: center;
background: rgba(0, 0, 0, 0.04);
i {
font-size: 20px;
font-weight: bold;
color: #8c939d;
}
p {
margin-top: 10px;
font-size: 14px;
color: rgba(0, 0, 0, 0.65);
line-height: 1;
}
}
.avatar {
width: $avatar-width;
height: $avatar-width;
display: block;
}
}
.el-upload__tip {
margin-top: 0;
p {
font-size: 14px;
color: rgba(0, 0, 0, 0.45);
line-height: 1;
&:first-child {
margin-bottom: 5px;
}
}
}
}
/deep/ .d-inline-block {
width: 216px;
.el-select, .el-input {
width: 100%;
}
}
.range-check {
display: inline-block;
margin: 0 0 10px 10px;
}
/deep/.range-cas {
.el-tag {
display: none;
}
}
</style>

@ -0,0 +1,54 @@
<template>
<!-- 理论课程管理 -->
<div class="page">
<div class="tabs">
<a class="item" v-for="(item,index) in tabs" :key="index" :class="{active: index == active}" @click="tabChange(index)">{{ item }}</a>
</div>
<div class="page-content">
<product v-if="active == 'first'" />
<market v-if="active == 'second'" />
</div>
</div>
</template>
<script>
import Setting from "@/setting";
import product from "./product";
import market from "./market";
export default {
name: "course",
components: {
product,
market,
},
data() {
return {
active: "first", //
tabs: {
first: "产品管理",
second: "营销推广管理",
},
showTabs: true
};
},
mounted() {
Setting.dynamicRoute && this.initTabs();
},
methods: {
tabChange(index) {
this.active = index;
},
initTabs() {
const { btns } = this.$store.state
const tab1 = btns.includes('/shop:产品管理')
const tab2 = btns.includes('/shop:营销推广管理')
tab1 || delete this.tabs.first
tab2 || delete this.tabs.second
}
}
};
</script>
<style lang="scss" scoped>
</style>

@ -0,0 +1,273 @@
<template>
<!-- 产品管理 -->
<div style="padding-top: 24px">
<div class="tool">
<ul class="filter" style="align-items: flex-start">
<li>
<label>学科类</label>
<el-select v-model="form.visibleRange" clearable placeholder="请选择可见范围" @change="getData">
<el-option v-for="(item,index) in regions" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
</li>
<li>
<label>专业</label>
<el-select v-model="form.categoryId" clearable placeholder="请选择课程分类" @change="getData">
<el-option label="不限" value=""></el-option>
<el-option label="暂无分类" value="0"></el-option>
<el-option v-for="(item,index) in classificationList" :key="index" :label="item.classificationName" :value="item.id"></el-option>
</el-select>
</li>
<li>
<label>产品分类</label>
<el-select v-model="form.courseType" clearable placeholder="请选择课程类型" @change="getData">
<el-option v-for="(item,index) in types" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
</li>
<li>
<label>搜索</label>
<el-input placeholder="请输入" suffix-icon="el-icon-search" v-model="keyword" clearable size="small"></el-input>
</li>
</ul>
<div>
<el-button v-auth="'平台自建:新增'" type="primary" round @click="addCourse">新增</el-button>
<el-button v-auth="'平台自建:批量删除'" type="primary" round @click="delAllData">批量删除</el-button>
</div>
</div>
<el-table :data="list" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id">
<el-table-column type="selection" width="80" align="center" :reserve-selection="true"></el-table-column>
<el-table-column type="index" width="100" label="序号" align="center">
<template slot-scope="scope">
{{ scope.$index + (page - 1) * pageSize + 1 }}
</template>
</el-table-column>
<el-table-column prop="courseName" label="产品名称" min-width="150" align="center"></el-table-column>
<el-table-column prop="courseName" label="厂商" min-width="150" align="center"></el-table-column>
<el-table-column prop="courseName" label="产品类型" min-width="150" align="center"></el-table-column>
<el-table-column prop="courseName" label="关联产品" min-width="150" align="center"></el-table-column>
<el-table-column prop="courseName" label="状态" min-width="150" align="center"></el-table-column>
<el-table-column prop="courseName" label="订单量" min-width="150" align="center"></el-table-column>
<el-table-column prop="courseName" label="最近编辑人" min-width="150" align="center"></el-table-column>
<el-table-column prop="courseName" label="精选" min-width="150" align="center"></el-table-column>
<el-table-column label="上架/下架" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.isShelves"
:active-value="1"
:inactive-value="0"
@change="changeSwitch($event, scope.row)"
v-auth="'/curriculum:上下架'">
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="250">
<template slot-scope="scope">
<el-button v-auth="'平台自建:编辑信息'" type="text" @click="editCourse(scope.row)">编辑</el-button>
<el-button v-auth="'平台自建:删除'" type="text" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :current-page="page">
</el-pagination>
</div>
</div>
</template>
<script>
import util from "@/libs/util";
import Setting from '@/setting'
export default {
data() {
return {
timer: null,
regionName: ['本校内', '全平台可见', '指定院校区域'],
regions: [
{
id: '',
name: '不限'
},
{
id: 1,
name: '全平台'
},
{
id: 2,
name: '指定院校区域'
}
],
types: [
{
id: '',
name: '不限'
},
{
id: 1,
name: '付费'
},
{
id: 0,
name: '免费'
}
],
form: {
visibleRange: '',
categoryId: '',
courseType: ''
},
keyword: "",
classificationId: "",
list: [],
multipleSelection: [],
classificationList: [],
page: +this.$route.query.page || 1, //
pageSize: 10,
total: 0
};
},
watch: {
keyword: function(val) {
clearTimeout(this.searchTimer);
this.searchTimer = setTimeout(() => {
this.initData();
}, 500);
}
},
mounted() {
this.getClassification();
this.getData();
this.$once('hook:beforeDestroy', function() {
clearInterval(this.timer)
})
},
methods: {
//:
//
// 使
//1.
getList() {
this.$post(this.api.listTheoreticalCourse, {
pageNum: this.page,
pageSize: this.pageSize,
keyWord: this.keyword,
createPlatform: 0,
platformSource: Setting.platformSource,
...this.form
}).then(({ page }) => {
this.list = page.records;
this.total = page.total;
if (!this.list.length && this.total) {
this.page--;
this.getData();
}
}).catch(res => {
});
},
// redis
getRedis() {
this.$post(this.api.getRedisCache).then(({ data }) => {
data && this.getList()
}).catch(res => {})
},
getData() {
this.getList()
if (!Setting.isDev) {
clearInterval(this.timer)
this.timer = setInterval(this.getRedis, 1000)
}
},
initData() {
this.page = 1;
this.getData();
},
getClassification() {
this.$post(this.api.listClassification, {
pageNum: 1,
pageSize: 1000,
platformSource: Setting.platformSource
}).then(({ page }) => {
this.classificationList = page.records
}).catch(res => {})
},
changeType(type) {
this.classificationId = type;
this.initData();
},
preview(row) {
this.$router.push(`/previewTheoreticalCourse?id=${row.id}`);
},
config(row) {
this.$router.push(`/setTheoreticalCourse?id=${row.id}`);
},
addCourse() {
this.$router.push("/addTheoreticalCourse");
},
editCourse(row) {
this.$router.push(`/addTheoreticalCourse?id=${row.id}`);
},
handleDelete(row) {
this.$confirm("此删除操作不可逆,是否确认删除选中项?", "提示", {
type: "warning"
})
.then(() => {
this.$post(`${this.api.delTheoreticalCourse}?ids=${row.id}`).then(res => {
util.successMsg("删除成功");
this.initData();
}).catch(res => {
});
})
.catch(() => {
});
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
delAllData() {
const list = this.multipleSelection
if (list.length != "") {
this.$confirm(`确定要删除吗?`, "提示", {
type: "warning"
})
.then(() => {
const data = []
list.map(e => {
data.push('ids=' + e.id)
})
this.$post(`${this.api.delTheoreticalCourse}?${data.join('&')}`).then(res => {
this.$refs.table.clearSelection();
util.successMsg("删除成功");
this.initData();
}).catch(res => {
});
}).catch(() => {
});
} else {
util.errorMsg("请先选择数据 !");
}
},
handleCurrentChange(val) {
this.page = val;
this.getData();
},
switchOff(val, row) {
this.$post(this.api.disabledTheoreticalCourse, {
courseId: row.id,
isOpen: val,
type: 0 // (01)
}).then(res => {
val == 1 ? util.warningMsg('禁用成功') : util.successMsg('启用成功')
}).catch(err => {})
}
}
};
</script>
<style lang="scss" scoped>
/deep/ .tool {
.filter {
.el-input {
min-width: 215px;
}
}
}
</style>

@ -0,0 +1,272 @@
<template>
<!-- 产品管理 -->
<div style="padding-top: 24px">
<div class="tool">
<ul class="filter" style="align-items: flex-start">
<li>
<label>学科类</label>
<el-select v-model="form.visibleRange" clearable placeholder="请选择可见范围" @change="getData">
<el-option v-for="(item,index) in regions" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
</li>
<li>
<label>专业</label>
<el-select v-model="form.categoryId" clearable placeholder="请选择课程分类" @change="getData">
<el-option label="不限" value=""></el-option>
<el-option label="暂无分类" value="0"></el-option>
<el-option v-for="(item,index) in classificationList" :key="index" :label="item.classificationName" :value="item.id"></el-option>
</el-select>
</li>
<li>
<label>产品分类</label>
<el-select v-model="form.courseType" clearable placeholder="请选择课程类型" @change="getData">
<el-option v-for="(item,index) in types" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
</li>
<li>
<label>搜索</label>
<el-input placeholder="请输入" suffix-icon="el-icon-search" v-model="keyword" clearable size="small"></el-input>
</li>
</ul>
<div>
<el-button v-auth="'平台自建:新增'" type="primary" round @click="addCourse">新增</el-button>
<el-button v-auth="'平台自建:批量删除'" type="primary" round @click="delAllData">批量删除</el-button>
</div>
</div>
<el-table :data="list" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id">
<el-table-column type="selection" width="80" align="center" :reserve-selection="true"></el-table-column>
<el-table-column type="index" width="100" label="序号" align="center">
<template slot-scope="scope">
{{ scope.$index + (page - 1) * pageSize + 1 }}
</template>
</el-table-column>
<el-table-column prop="courseName" label="产品名称" min-width="150" align="center"></el-table-column>
<el-table-column prop="courseName" label="厂商" min-width="150" align="center"></el-table-column>
<el-table-column prop="courseName" label="产品类型" min-width="150" align="center"></el-table-column>
<el-table-column prop="courseName" label="关联产品" min-width="150" align="center"></el-table-column>
<el-table-column prop="courseName" label="状态" min-width="150" align="center"></el-table-column>
<el-table-column prop="courseName" label="订单量" min-width="150" align="center"></el-table-column>
<el-table-column prop="courseName" label="最近编辑人" min-width="150" align="center"></el-table-column>
<el-table-column prop="courseName" label="精选" min-width="150" align="center"></el-table-column>
<el-table-column label="上架/下架" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.isShelves"
:active-value="1"
:inactive-value="0"
@change="changeSwitch($event, scope.row)"
v-auth="'/curriculum:上下架'">
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="250">
<template slot-scope="scope">
<el-button v-auth="'平台自建:编辑信息'" type="text" @click="editCourse(scope.row)">编辑</el-button>
<el-button v-auth="'平台自建:删除'" type="text" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :current-page="page">
</el-pagination>
</div>
</div>
</template>
<script>
import util from "@/libs/util";
import Setting from '@/setting'
export default {
data() {
return {
timer: null,
regionName: ['本校内', '全平台可见', '指定院校区域'],
regions: [
{
id: '',
name: '不限'
},
{
id: 1,
name: '全平台'
},
{
id: 2,
name: '指定院校区域'
}
],
types: [
{
id: '',
name: '不限'
},
{
id: 1,
name: '付费'
},
{
id: 0,
name: '免费'
}
],
form: {
visibleRange: '',
categoryId: '',
courseType: ''
},
keyword: "",
classificationId: "",
list: [],
multipleSelection: [],
classificationList: [],
page: +this.$route.query.page || 1, //
pageSize: 10,
total: 0
};
},
watch: {
keyword: function(val) {
clearTimeout(this.searchTimer);
this.searchTimer = setTimeout(() => {
this.initData();
}, 500);
}
},
mounted() {
this.getClassification();
this.getData();
this.$once('hook:beforeDestroy', function() {
clearInterval(this.timer)
})
},
methods: {
//:
//
// 使
//1.
getList() {
this.$post(this.api.listTheoreticalCourse, {
pageNum: this.page,
pageSize: this.pageSize,
keyWord: this.keyword,
createPlatform: 0,
platformSource: Setting.platformSource,
...this.form
}).then(({ page }) => {
this.list = page.records;
this.total = page.total;
if (!this.list.length && this.total) {
this.page--;
this.getData();
}
}).catch(res => {
});
},
// redis
getRedis() {
this.$post(this.api.getRedisCache).then(({ data }) => {
data && this.getList()
}).catch(res => {})
},
getData() {
this.getList()
if (!Setting.isDev) {
clearInterval(this.timer)
this.timer = setInterval(this.getRedis, 1000)
}
},
initData() {
this.page = 1;
this.getData();
},
getClassification() {
this.$post(this.api.listClassification, {
pageNum: 1,
pageSize: 1000,
platformSource: Setting.platformSource
}).then(({ page }) => {
this.classificationList = page.records
}).catch(res => {})
},
changeType(type) {
this.classificationId = type;
this.initData();
},
preview(row) {
this.$router.push(`/previewTheoreticalCourse?id=${row.id}`);
},
config(row) {
this.$router.push(`/setTheoreticalCourse?id=${row.id}`);
},
addCourse() {
this.$router.push("/shop/addProduct");
},
editCourse(row) {
this.$router.push(`/addTheoreticalCourse?id=${row.id}`);
},
handleDelete(row) {
this.$confirm("此删除操作不可逆,是否确认删除选中项?", "提示", {
type: "warning"
})
.then(() => {
this.$post(`${this.api.delTheoreticalCourse}?ids=${row.id}`).then(res => {
util.successMsg("删除成功");
this.initData();
}).catch(res => {
});
})
.catch(() => {
});
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
delAllData() {
const list = this.multipleSelection
if (list.length != "") {
this.$confirm(`确定要删除吗?`, "提示", {
type: "warning"
})
.then(() => {
const data = []
list.map(e => {
data.push('ids=' + e.id)
})
this.$post(`${this.api.delTheoreticalCourse}?${data.join('&')}`).then(res => {
this.$refs.table.clearSelection();
util.successMsg("删除成功");
this.initData();
}).catch(res => {
});
}).catch(() => {
});
} else {
util.errorMsg("请先选择数据 !");
}
},
handleCurrentChange(val) {
this.page = val;
this.getData();
},
//
changeSwitch(value, row) {
this.$post(`${this.api.isShelves}?cid=${row.cid}&isShelves=${value}`).then((res) => {
this.getData();
this.$message.success("修改上下架状态成功!");
}).catch((res) => {
});
}
}
};
</script>
<style lang="scss" scoped>
/deep/ .tool {
.filter {
.el-input {
min-width: 215px;
}
}
}
</style>
Loading…
Cancel
Save