You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
377 lines
13 KiB
377 lines
13 KiB
<template> |
|
<div> |
|
<el-card shadow="hover" |
|
class="mgb20"> |
|
<div> |
|
<div class="flex-center mgb20"> |
|
<p class="hr_tag"></p> |
|
<span>筛选</span> |
|
</div> |
|
<div> |
|
<el-form label-width="80px"> |
|
<el-col :span="4"> |
|
<el-form-item label="学科类别"> |
|
<el-select v-model="form.categoryId" |
|
clearable |
|
@change="getProfessionalClass()" |
|
@clear="clearClass()"> |
|
<el-option v-for="(item,index) in subjectList" |
|
:key="index" |
|
:label="item.disciplineName" |
|
:value="item.disciplineId"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="4"> |
|
<el-form-item label="专业类"> |
|
<el-select v-model="form.professionalCategoryId" |
|
clearable |
|
:disabled="form.categoryId ? false : true" |
|
@change="getProfessional()" |
|
@clear="clearProfess()"> |
|
<el-option v-for="(item,index) in ProfessionalClassList" |
|
:key="index" |
|
:label="item.professionalClassName" |
|
:value="item.professionalClassId"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="4"> |
|
<el-form-item label="专业"> |
|
<el-select v-model="form.professionalId" |
|
clearable |
|
:disabled="form.professionalCategoryId ? false : true" |
|
@change="getData()"> |
|
<el-option v-for="(item,index) in ProfessionalList" |
|
:key="index" |
|
:label="item.professionalName" |
|
:value="item.professionalId"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="4"> |
|
<el-form-item label="课程类别"> |
|
<el-select v-model="form.curriculumType" |
|
clearable |
|
@change="getData()"> |
|
<el-option label="理论课程" |
|
:value="0"></el-option> |
|
<el-option label="实训课程" |
|
:value="1"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-form-item> |
|
<el-input placeholder="请输入课程名称" |
|
prefix-icon="el-icon-search" |
|
v-model="form.curriculumName" |
|
clearable |
|
@keyup.enter.native="onSearch"></el-input> |
|
</el-form-item> |
|
</el-col> |
|
</el-form> |
|
</div> |
|
</div> |
|
</el-card> |
|
|
|
<el-card shadow="hover" |
|
class="card"> |
|
<div class="flex-between mgb20"> |
|
<div class="flex-center"> |
|
<p class="hr_tag"></p> |
|
<span>课程列表</span> |
|
</div> |
|
<div> |
|
<el-button type="primary" |
|
round |
|
@click="addcourse" |
|
v-auth>新增课程</el-button> |
|
<el-button type="primary" |
|
round |
|
@click="delAllSelection" |
|
v-auth>批量删除</el-button> |
|
</div> |
|
</div> |
|
<el-table v-loading="loading" |
|
:data="courseData" |
|
class="table" |
|
ref="table" |
|
stripe |
|
header-align="center" |
|
@selection-change="handleSelectionChange" |
|
:row-key="getRowKeys"> |
|
<el-table-column type="selection" |
|
width="55" |
|
align="center" |
|
:reserve-selection="true"></el-table-column> |
|
<el-table-column type="index" |
|
width="100" |
|
label="序号" |
|
align="center"></el-table-column> |
|
<el-table-column prop="curriculumName" |
|
label="课程名称" |
|
align="center"></el-table-column> |
|
<el-table-column prop="curriculumType" |
|
label="课程类型" |
|
align="center"> |
|
<template slot-scope="scope"> |
|
<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> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="orderVolume" |
|
label="订单量" |
|
align="center"></el-table-column> |
|
<el-table-column prop="expectedCourse" |
|
label="预计课时" |
|
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"> |
|
<template slot-scope="scope"> |
|
<el-button type="text" |
|
@click="edit(scope.row)" |
|
v-auth>编辑</el-button> |
|
<el-button type="text" |
|
@click="config(scope.row)" |
|
v-auth>内容设置</el-button> |
|
<el-button type="text" |
|
@click="handleDelete(scope.row)" |
|
v-auth>删除</el-button> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<div class="pagination"> |
|
<el-pagination background |
|
@current-change="handleCurrentChange" |
|
:current-page="page" |
|
layout="total, prev, pager, next" |
|
:total="totals"></el-pagination> |
|
</div> |
|
</el-card> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import qs from 'qs' |
|
export default { |
|
data () { |
|
return { |
|
courseTypeStatus: { |
|
0: "理论课程", |
|
1: "实训课程" |
|
}, |
|
name: localStorage.getItem("ms_username"), |
|
courseData: [], |
|
form: { |
|
categoryId: +this.$route.query.categoryId || '', |
|
professionalCategoryId: +this.$route.query.professionalCategoryId || '', |
|
professionalId: +this.$route.query.professionalId || '', |
|
curriculumType: this.$route.query.curriculumType ? +this.$route.query.curriculumType : '', |
|
curriculumName: this.$route.query.curriculumName || '' |
|
}, |
|
page: +this.$route.query.page || 1, |
|
pageSize: 10, |
|
totals: 0, |
|
subjectList: [], // 学科类别 |
|
ProfessionalClassList: [], // 专业类 |
|
ProfessionalList: [], // 专业 |
|
multipleSelection: [], |
|
loading: false, |
|
searchTimer: null |
|
}; |
|
}, |
|
watch: { |
|
"form.curriculumName": function (val) { |
|
clearTimeout(this.searchTimer); |
|
this.searchTimer = setTimeout(() => { |
|
this.initData(); |
|
}, 500); |
|
} |
|
}, |
|
mounted () { |
|
this.getSubject(); |
|
this.getData(); |
|
}, |
|
methods: { |
|
getRowKeys (row) { |
|
return row.cid; |
|
}, |
|
// 获取列表数据 |
|
getData () { |
|
const sid = this.$store.state.dataPer.find(e => e.permissionName === '课程管理') |
|
let data = { |
|
...this.form, |
|
pageNum: this.page, |
|
pageSize: this.pageSize, |
|
supplierId: sid ? sid.supplierId : '' |
|
}; |
|
this.$post(this.api.curriculumList, data).then(res => { |
|
this.courseData = res.page.records; |
|
this.totals = res.page.total; |
|
this.loading = false; |
|
}).catch(err => { }); |
|
}, |
|
initData () { |
|
this.page = 1; |
|
this.getData(); |
|
}, |
|
// 获取学科类别 |
|
async getSubject () { |
|
const { list } = await this.$get(this.api.courseDiscipline) |
|
this.subjectList = list |
|
this.form.professionalCategoryId && this.getProfessionalClassData() |
|
}, |
|
// 清除学科类别 |
|
clearClass () { |
|
this.form.professionalCategoryId = '' |
|
this.form.professionalId = '' |
|
}, |
|
// 获取专业类 |
|
getProfessionalClass () { |
|
this.clearClass(); |
|
this.getProfessionalClassData(); |
|
this.page = 1; |
|
this.getData(); |
|
}, |
|
async getProfessionalClassData () { |
|
const { list } = await this.$get(this.api.courseProfessionalClass, { |
|
disciplineId: this.form.categoryId |
|
}) |
|
this.ProfessionalClassList = list |
|
this.form.professionalId && this.getProfessionalData() |
|
}, |
|
// 清除专业类 |
|
clearProfess () { |
|
this.form.professionalId = '' |
|
}, |
|
// 获取专业 |
|
getProfessional () { |
|
this.clearProfess(); |
|
this.getProfessionalData(); |
|
this.page = 1; |
|
this.getData(); |
|
}, |
|
async getProfessionalData () { |
|
const { list } = await this.$get(this.api.courseProfessional, { |
|
professionalClassId: this.form.professionalCategoryId |
|
}) |
|
this.ProfessionalList = list |
|
}, |
|
// 缓存当前页面和参数，详情页返回到列表的时候直接取该url |
|
setReferrer () { |
|
this.$store.commit('setReferrer', `${this.$route.path}?${qs.stringify(this.form)}&page=${this.page}`) |
|
}, |
|
// 新建课程 |
|
addcourse () { |
|
this.setReferrer() |
|
this.$router.push("/addcurriculum"); |
|
}, |
|
// 编辑 |
|
edit (row) { |
|
this.setReferrer() |
|
this.$router.push(`/addcurriculum?cid=${row.cid}`); |
|
}, |
|
// 内容设置 |
|
config (row) { |
|
this.setReferrer() |
|
this.$router.push(`/contentSettings?cid=${row.cid}&name=${row.curriculumName}`); |
|
}, |
|
// 删除 |
|
handleDelete (row) { |
|
this.$post(`${this.api.deleteCoursePrompt}?cids=${row.cid}`).then(({ status }) => { |
|
if (status === 200) { |
|
this.$confirm("确定要删除吗？", "提示", { |
|
type: "warning" |
|
}).then(() => { |
|
this.$post(`${this.api.delCourse}?cids=${row.cid}`).then(res => { |
|
this.getData(); |
|
this.$message.success("删除成功"); |
|
}).catch(err => { }) |
|
}).catch(() => { |
|
}); |
|
} |
|
}).catch(err => { }) |
|
}, |
|
// 处理多选 |
|
handleSelectionChange (val) { |
|
this.multipleSelection = val; |
|
}, |
|
// 批量删除 |
|
delAllSelection () { |
|
if (this.multipleSelection.length) { |
|
let cids = [] |
|
this.multipleSelection.forEach(i => { |
|
cids.push('cids=' + i.cid) |
|
}); |
|
this.$post(`${this.api.deleteCoursePrompt}?${cids.join('&')}`).then(({ status }) => { |
|
if (status === 200) { |
|
this.$confirm("确定要删除吗？", "提示", { |
|
type: "warning" |
|
}).then(() => { |
|
let ids = this.multipleSelection.map(i => i.cid); |
|
this.$post(`${this.api.delCourse}?cids=${ids.toString()}`).then(res => { |
|
if (ids.length == this.courseData.length) { |
|
if (this.page > 1) { |
|
this.page = this.page - 1 |
|
} |
|
} |
|
this.getData(); |
|
this.$message.success("删除成功"); |
|
this.$refs.table.clearSelection() |
|
}).catch(err => { }) |
|
}).catch(() => { }) |
|
} |
|
}).catch(err => { }) |
|
} else { |
|
this.$message.warning("请先选择课程 ！"); |
|
} |
|
}, |
|
// 处理页码切换 |
|
handleCurrentChange (val) { |
|
this.page = val; |
|
this.$router.push(`/curriculum?page=${val}`) |
|
this.getData(); |
|
}, |
|
// 课程名称条件搜索 |
|
onSearch () { |
|
this.page = 1; |
|
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 scoped> |
|
.card { |
|
min-height: calc(100vh - 300px); |
|
} |
|
</style> |
|
|
|
|