|
|
|
|
<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.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="5">
|
|
|
|
|
<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="5">
|
|
|
|
|
<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="5">
|
|
|
|
|
<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="4">
|
|
|
|
|
<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-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" round class="mag" @click="addcourse">新建课程</el-button>
|
|
|
|
|
<el-button type="primary" 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="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 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.isEnable"
|
|
|
|
|
:active-value="0"
|
|
|
|
|
:inactive-value="1"
|
|
|
|
|
@change="changeSwitch($event, 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="config(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 {
|
|
|
|
|
courseTypeStatus: {
|
|
|
|
|
0: "理论课程",
|
|
|
|
|
1: "实训课程"
|
|
|
|
|
},
|
|
|
|
|
name: localStorage.getItem("ms_username"),
|
|
|
|
|
courseData: [],
|
|
|
|
|
form: {
|
|
|
|
|
categoryId: "",
|
|
|
|
|
professionalCategoryId: "",
|
|
|
|
|
professionalId: "",
|
|
|
|
|
curriculumType: "",
|
|
|
|
|
curriculumName: ""
|
|
|
|
|
},
|
|
|
|
|
pageNo: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
totals: 1,
|
|
|
|
|
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() {
|
|
|
|
|
let data = {
|
|
|
|
|
...this.form,
|
|
|
|
|
pageNum: this.pageNo,
|
|
|
|
|
pageSize: this.pageSize
|
|
|
|
|
};
|
|
|
|
|
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.pageNo = 1;
|
|
|
|
|
this.getData();
|
|
|
|
|
},
|
|
|
|
|
// 获取学科类别
|
|
|
|
|
getSubject() {
|
|
|
|
|
this.$get(this.api.courseDiscipline).then(res => {
|
|
|
|
|
this.subjectList = res.list;
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 清除学科类别
|
|
|
|
|
clearClass() {
|
|
|
|
|
this.form.professionalCategoryId = "",
|
|
|
|
|
this.form.professionalId = "";
|
|
|
|
|
},
|
|
|
|
|
// 获取专业类
|
|
|
|
|
getProfessionalClass() {
|
|
|
|
|
this.clearClass();
|
|
|
|
|
this.getProfessionalClassData();
|
|
|
|
|
this.pageNo = 1;
|
|
|
|
|
this.getData();
|
|
|
|
|
},
|
|
|
|
|
getProfessionalClassData() {
|
|
|
|
|
let data = {
|
|
|
|
|
disciplineId: this.form.categoryId
|
|
|
|
|
};
|
|
|
|
|
this.$get(this.api.courseProfessionalClass, data).then(res => {
|
|
|
|
|
this.ProfessionalClassList = res.list;
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 清除专业类
|
|
|
|
|
clearProfess() {
|
|
|
|
|
this.form.professionalId = "";
|
|
|
|
|
},
|
|
|
|
|
// 获取专业
|
|
|
|
|
getProfessional() {
|
|
|
|
|
this.clearProfess();
|
|
|
|
|
this.getProfessionalData();
|
|
|
|
|
this.pageNo = 1;
|
|
|
|
|
this.getData();
|
|
|
|
|
},
|
|
|
|
|
getProfessionalData() {
|
|
|
|
|
let data = {
|
|
|
|
|
professionalClassId: this.form.professionalCategoryId
|
|
|
|
|
};
|
|
|
|
|
this.$get(this.api.courseProfessional, data).then(res => {
|
|
|
|
|
this.ProfessionalList = res.list;
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 新建课程
|
|
|
|
|
addcourse() {
|
|
|
|
|
this.$router.push("/addcurriculum");
|
|
|
|
|
},
|
|
|
|
|
// 编辑
|
|
|
|
|
edit(row) {
|
|
|
|
|
this.$router.push(`/addcurriculum?cid=${row.cid}`);
|
|
|
|
|
},
|
|
|
|
|
// 内容设置
|
|
|
|
|
config(row) {
|
|
|
|
|
this.$router.push(`/contentSettings?cid=${row.cid}`);
|
|
|
|
|
},
|
|
|
|
|
// 删除
|
|
|
|
|
handleDelete(row) {
|
|
|
|
|
this.$confirm("确定要删除吗？", "提示", {
|
|
|
|
|
type: "warning"
|
|
|
|
|
}).then(() => {
|
|
|
|
|
this.$post(`${this.api.delCourse}?cids=${row.cid}`).then(res => {
|
|
|
|
|
this.getData();
|
|
|
|
|
this.$message.success("删除成功");
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
});
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 处理多选
|
|
|
|
|
handleSelectionChange(val) {
|
|
|
|
|
this.multipleSelection = val;
|
|
|
|
|
},
|
|
|
|
|
// 批量删除
|
|
|
|
|
delAllSelection() {
|
|
|
|
|
if (this.multipleSelection.length) {
|
|
|
|
|
this.$confirm("确定要删除吗？", "提示", {
|
|
|
|
|
type: "warning"
|
|
|
|
|
}).then(() => {
|
|
|
|
|
let ids = this.multipleSelection.map(i => i.cid);
|
|
|
|
|
this.$post(`${this.api.delCourse}?cids=${ids.toString()}`).then(res => {
|
|
|
|
|
this.getData();
|
|
|
|
|
this.$message.success("删除成功");
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
});
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.warning("请先选择课程 ！");
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 处理页码切换
|
|
|
|
|
handleCurrentChange(val) {
|
|
|
|
|
this.pageNo = val;
|
|
|
|
|
this.getData();
|
|
|
|
|
},
|
|
|
|
|
// 课程名称条件搜索
|
|
|
|
|
onSearch() {
|
|
|
|
|
this.pageNo = 1;
|
|
|
|
|
this.getData();
|
|
|
|
|
},
|
|
|
|
|
// 上下架
|
|
|
|
|
changeSwitch(value, row) {
|
|
|
|
|
this.$post(`${this.api.isShelves}?cid=${row.cid}&isEnable=${value}`).then((res) => {
|
|
|
|
|
this.getData();
|
|
|
|
|
this.$message.success("修改上下架状态成功！");
|
|
|
|
|
}).catch((res) => {
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.mag {
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
