parent
5d1f3e98b1
commit
4864873fb0
11 changed files with 2177 additions and 74 deletions
File diff suppressed because it is too large
Load Diff
@ -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 // 禁用平台来源(0中台,1职站) |
||||||
|
}).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…
Reference in new issue