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.
289 lines
12 KiB
289 lines
12 KiB
<template> |
|
<div> |
|
<el-row :gutter="20"> |
|
<el-col :span="24"> |
|
<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="5"> |
|
<el-form-item label="学科类别"> |
|
<el-select v-model="form.subjectType" clearable placeholder="请选择学科类别" @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="5"> |
|
<el-form-item label="专业类"> |
|
<el-select v-model="form.professionalClass" clearable placeholder="请选择专业类" |
|
:disabled="form.subjectType ? 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="5"> |
|
<el-form-item label="专业"> |
|
<el-select v-model="form.professional" clearable placeholder="请选择专业" |
|
:disabled="form.professionalClass ? 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="5"> |
|
<el-form-item label="课程类型"> |
|
<el-select v-model="form.courseType" clearable placeholder="请选择课程类型" @change="getData()"> |
|
<el-option v-for="(item,index) in CourseTypeList" :key="index" :label="item.name" :value="item.value"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="4"> |
|
<el-form-item> |
|
<el-input placeholder="请输入课程名称" prefix-icon="el-icon-search" v-model="form.CustomerSearch" clearable @keyup.enter.native="onSearch"></el-input> |
|
</el-form-item> |
|
</el-col> |
|
</el-form> |
|
</div> |
|
</div> |
|
</el-card> |
|
</el-col> |
|
|
|
<el-col :span="24"> |
|
<el-card shadow="hover" class="mgb20"> |
|
<div class="flex-between mgb20"> |
|
<div class="flex-center"> |
|
<p class="hr_tag"></p> |
|
<span>课程列表</span> |
|
</div> |
|
<div> |
|
<el-button type="primary" size="small" round class="mag" @click="addcourse">新建课程</el-button> |
|
<el-button type="primary" size="small" round @click="delAllSelection">批量删除</el-button> |
|
</div> |
|
</div> |
|
<el-table v-loading="loading" :data="courseData" class="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="courseName" label="课程名称" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="courseType" label="课程类型" align="center"> |
|
</el-table-column> |
|
<el-table-column label="配置的实训应用" align="center"> |
|
<template slot-scope="scope"> |
|
<span class="ellipsis">{{scope.row.systemName}}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="courseHours" label="订单量量" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="courseHours" 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="0" |
|
:inactive-value="1" |
|
@change="changeSwitch(scope.row)"> |
|
</el-switch> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="操作" align="center"> |
|
<template slot-scope="scope"> |
|
<el-button type="text" @click="edit(scope.row)">编辑</el-button> |
|
<el-button type="text" @click="handleDelete(scope.row)">删除</el-button> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<div class="pagination"> |
|
<el-pagination background @current-change="handleCurrentChange" :current-page="pageNo" layout="total, prev, pager, next" :total="totals"> |
|
</el-pagination> |
|
</div> |
|
</el-card> |
|
</el-col> |
|
</el-row> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
name: 'customer', |
|
data() { |
|
return { |
|
name: localStorage.getItem('ms_username'), |
|
courseData:[], |
|
form: { |
|
courseType: '', |
|
subjectType: '', |
|
professionalClass: '', |
|
professional: '', |
|
CustomerSearch: '', |
|
}, |
|
pageNo: 1, |
|
pageSize: 10, |
|
totals: 1, |
|
subjectList: [], |
|
ProfessionalClassList: [], |
|
ProfessionalList: [], |
|
multipleSelection: [], |
|
CourseTypeList: [{ |
|
name: '实训课程', |
|
value: 1 |
|
}, |
|
{ |
|
name: '理论课程', |
|
value: 2 |
|
}], |
|
loading: true |
|
}; |
|
}, |
|
mounted() { |
|
this.getSubject() |
|
this.getData() |
|
}, |
|
methods: { |
|
getData() { |
|
let data = { |
|
courseType: this.form.courseType, |
|
disciplineId: this.form.subjectType, |
|
professionalClassId: this.form.professionalClass, |
|
professionalId: this.form.professional, |
|
searchContent: this.form.CustomerSearch, |
|
pageNo: this.pageNo, |
|
pageSize: this.pageSize, |
|
} |
|
this.$get(this.api.queryCourse,data).then(res => { |
|
res.message.rows.forEach(e => { |
|
e.courseType = this.courseTypeStatus(e.courseType) |
|
e.courseHours = this.hoursStatus(e.courseHours) |
|
}) |
|
this.courseData = res.message.rows |
|
this.totals = res.message.total |
|
this.loading = false |
|
}).catch(res => {}); |
|
}, |
|
// 获取学科类别 |
|
getSubject(){ |
|
this.$get(this.api.queryCourseDiscipline).then(res => { |
|
this.subjectList = res.message |
|
}).catch(res => {}); |
|
}, |
|
// 清除学科类别 |
|
clearClass(){ |
|
this.form.professionalClass = '', |
|
this.form.professional = '' |
|
}, |
|
// 获取专业类 |
|
getProfessionalClass(){ |
|
this.clearClass() |
|
this.getProfessionalClassData() |
|
this.pageNo = 1 |
|
this.getData() |
|
}, |
|
getProfessionalClassData(){ |
|
let data = { |
|
disciplineId: this.form.subjectType |
|
} |
|
this.$get(this.api.queryCourseProfessionalClass,data).then(res => { |
|
this.ProfessionalClassList = res.message |
|
}).catch(res => {}); |
|
}, |
|
// 清除专业类 |
|
clearProfess(){ |
|
this.form.professional = '' |
|
}, |
|
// 获取专业 |
|
getProfessional(){ |
|
this.clearProfess() |
|
this.getProfessionalData() |
|
this.pageNo = 1 |
|
this.getData() |
|
}, |
|
getProfessionalData(){ |
|
let data = { |
|
professionalClassId: this.form.professionalClass |
|
} |
|
this.$get(this.api.queryCourseProfessional,data).then(res => { |
|
this.ProfessionalList = res.message |
|
}).catch(res => {}); |
|
}, |
|
addcourse(){ |
|
this.$store.commit("courseData", { course_id : ''}); |
|
this.$router.push('/addcurriculum'); |
|
}, |
|
edit(row){ |
|
this.$store.commit("courseData", { course_id : row.courseId}); |
|
this.$router.push('/addcurriculum'); |
|
}, |
|
handleDelete(row) { |
|
this.$confirm('确定要删除吗？', '提示', { |
|
type: 'warning' |
|
}) |
|
.then(() => { |
|
let result = row.courseId |
|
var arr = [] |
|
arr.push(result) |
|
let data = arr |
|
this.$post(this.api.deleteCourse,data).then(res => { |
|
this.$message.success('删除成功'); |
|
this.getData() |
|
}).catch(res => {}); |
|
}) |
|
.catch(() => {}); |
|
}, |
|
handleSelectionChange(val) { |
|
this.multipleSelection = val; |
|
}, |
|
getRowKeys(row) { |
|
return row.courseId; |
|
}, |
|
// 批量删除 |
|
delAllSelection() { |
|
if(this.multipleSelection.length != ''){ |
|
let arr = this.multipleSelection |
|
let result = arr.map(e => e.courseId) |
|
this.$confirm('确定要删除吗？', '提示', { |
|
type: 'warning' |
|
}) |
|
.then(() => { |
|
let data = result |
|
this.$post(this.api.deleteCourse,data).then(res => { |
|
this.$message.success('删除成功'); |
|
this.getData() |
|
}).catch(res => {}); |
|
}).catch(() => {}); |
|
}else{ |
|
this.$message.error('请先选择课程 ！'); |
|
} |
|
}, |
|
handleCurrentChange(val) { |
|
this.pageNo = val; |
|
this.getData(); |
|
}, |
|
onSearch(){ |
|
this.pageNo = 1 |
|
this.getData() |
|
}, |
|
changeSwitch (row) { |
|
let data = { |
|
courseId: row.courseId, |
|
isShelves: row.isShelves |
|
} |
|
this.$post(this.api.isShelves,data).then((res) => { |
|
this.getData(); |
|
this.$message.success("修改成功！"); |
|
}).catch((res) => { |
|
}) |
|
}, |
|
} |
|
}; |
|
</script> |
|
|
|
<style scoped> |
|
.mag{ |
|
margin-right: 20px; |
|
} |
|
</style> |
|
|
|
|