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.
467 lines
22 KiB
467 lines
22 KiB
4 years ago
|
<template>
|
||
|
|
<div>
|
||
|
|
<el-row :gutter="20">
|
||
|
|
<el-col :span="24">
|
||
|
|
<el-card shadow="hover" class="mgb20">
|
||
|
|
<div class="flex-between">
|
||
|
|
<div class="per_title" v-preventReClick @click="goback()">
|
||
|
|
<i class="el-icon-arrow-left"></i>
|
||
|
|
<span class="per_back">返回</span>
|
||
|
|
<span class="per_school" v-text="form.courseId != '' ? '编辑课程' : '新建课程'"></span>
|
||
|
|
</div>
|
||
|
|
<el-button type="primary" size="small" round class="mag" v-preventReClick @click="saveAdd('form')">确定</el-button>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
|
||
|
|
<el-card shadow="hover" class="mgb20">
|
||
|
|
<div class="flex-center mgb20 user_header">
|
||
|
|
<p class="addhr_tag"></p>
|
||
|
|
<span>课程信息</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<el-form :model="form" :rules="rules" ref="form" label-width="80px">
|
||
|
|
<el-col :span="6" :offset="5">
|
||
|
|
<el-form-item label="课程名称" prop="courseName">
|
||
|
|
<el-input placeholder="请输入课程名称" v-model="form.courseName" @change="changeName"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<el-form-item label="学科类别" prop="disciplineId">
|
||
|
|
<el-select v-model="form.disciplineId" clearable placeholder="请选择学科类别"
|
||
|
|
@change="getProfessionalClass()" @clear="clearsubjectType()">
|
||
|
|
<el-option v-for="(item,index) in subjectList" :key="index" :label="item.disciplineName" :value="item.disciplineId"></el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<el-form-item label="专业" prop="professionalId">
|
||
|
|
<el-select v-model="form.professionalId" clearable placeholder="请选择专业"
|
||
|
|
:disabled="form.professionalClassId ? false : true">
|
||
|
|
<el-option v-for="(item,index) in ProfessionalList" :key="index" :label="item.professionalName" :value="item.professionalId"></el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<el-form-item label="市场价格" prop="marketPrice">
|
||
|
|
<el-input placeholder="请输入市场价格" v-model="form.marketPrice">
|
||
|
|
<template slot="append">万元/年</template>
|
||
|
|
</el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
|
||
|
|
<el-col :span="6" :offset="2">
|
||
|
|
<el-form-item label="预计课时" prop="courseHours">
|
||
|
|
<el-select v-model="form.courseHours" clearable placeholder="请选择预计课时">
|
||
|
|
<el-option v-for="(item,index) in hoursList" :key="index" :label="item.name" :value="item.value"></el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<el-form-item label="专业类" prop="professionalClassId">
|
||
|
|
<el-select v-model="form.professionalClassId" clearable placeholder="请选择专业类"
|
||
|
|
:disabled="form.disciplineId ? false : true" @change="getProfessional()" @clear="clearProfessionalClass()">
|
||
|
|
<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="courseType">
|
||
|
|
<el-select v-model="form.courseType" clearable placeholder="请选择课程类别">
|
||
|
|
<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="14" :offset="5">
|
||
|
|
<el-form-item label="课程简介" prop="courseIntroduction">
|
||
|
|
<el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入课程简介" v-model="form.courseIntroduction"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="教学目标" prop="teachingGoal">
|
||
|
|
<el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入教学目标" v-model="form.teachingGoal"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
|
||
|
|
<el-card shadow="hover" class="mgb20">
|
||
|
|
<div class="mgb20 flex-between">
|
||
|
|
<div class="flex-center user_header">
|
||
|
|
<p class="addhr_tag"></p>
|
||
|
|
<span>实训配置</span>
|
||
|
|
</div>
|
||
|
|
<el-button type="primary" size="small" round class="mag" @click="getConfig">添加配置</el-button>
|
||
|
|
</div>
|
||
|
|
<!-- 实训配置 -->
|
||
|
|
<div>
|
||
|
|
<el-table :data="curData" class="table" stripe header-align="center" height="600">
|
||
|
|
<el-table-column type="index" width="100" label="序号" align="center">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="projectName" label="项目名称" align="center">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="systemName" label="应用名称" align="center">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="资源配置" align="center">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-button @click="EditCur(scope.row)">编辑</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="展示控制" align="center">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-switch
|
||
|
|
v-model="scope.row.isShow"
|
||
|
|
:active-value="0"
|
||
|
|
:inactive-value="1">
|
||
|
|
</el-switch>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="添加控制" align="center">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-button @click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
</el-col>
|
||
|
|
|
||
|
|
<!-- 应用配置 -->
|
||
|
|
<el-dialog :visible.sync="curVisible" width="50%" center>
|
||
|
|
<div class="flex-between mgb20">
|
||
|
|
<div class="flex-center">
|
||
|
|
<p class="addhr_tag"></p>
|
||
|
|
<span>应用列表</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<el-input placeholder="请输入系统名称" prefix-icon="el-icon-search" v-model="configSearch" clearable></el-input>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<el-table :data="permissionData" class="table" stripe header-align="center" @selection-change="handleSelectionChange">
|
||
|
|
<el-table-column type="selection" width="55" align="center"></el-table-column>
|
||
|
|
<el-table-column type="index" width="100" label="序号" align="center">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="systemName" label="系统名称" align="center">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="systemAttribution" label="系统类型" align="center">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="systemType" label="系统归属" align="center">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="systemStatus" label="系统状态" align="center">
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<span slot="footer" class="dialog-footer">
|
||
|
|
<el-button @click="curVisible = false">取 消</el-button>
|
||
|
|
<el-button type="primary" v-preventReClick @click="addSystem()">确 定</el-button>
|
||
|
|
</span>
|
||
|
|
</el-dialog>
|
||
|
|
</el-row>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data (){
|
||
|
|
return {
|
||
|
|
form: {
|
||
|
|
courseName: '',
|
||
|
|
courseType: '',
|
||
|
|
disciplineId: '',
|
||
|
|
professionalClassId: '',
|
||
|
|
professionalId: '',
|
||
|
|
courseHours: '',
|
||
|
|
marketPrice: '',
|
||
|
|
courseIntroduction: '',
|
||
|
|
teachingGoal: '',
|
||
|
|
courseId : this.$store.state.courseId,
|
||
|
|
systemId: ''
|
||
|
|
},
|
||
|
|
rules: {
|
||
|
|
courseName: [
|
||
|
|
{ required: true, message: '请输入用户姓名', trigger: 'blur' }
|
||
|
|
],
|
||
|
|
disciplineId: [
|
||
|
|
{ required: true, message: '请选择学科类别', trigger: 'change' }
|
||
|
|
],
|
||
|
|
professionalId: [
|
||
|
|
{ required: true, message: '请选择专业', trigger: 'change' }
|
||
|
|
],
|
||
|
|
marketPrice: [
|
||
|
|
{ required: true, message: '请输入市场价格', trigger: 'blur' },
|
||
|
|
{ pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/, message: '请输入正确金额格式,可保留两位小数' }
|
||
|
|
],
|
||
|
|
courseHours: [
|
||
|
|
{ required: true, message: '请选择预计课时', trigger: 'change' }
|
||
|
|
],
|
||
|
|
professionalClassId: [
|
||
|
|
{ required: true, message: '请选择专业类', trigger: 'change' }
|
||
|
|
],
|
||
|
|
courseType: [
|
||
|
|
{ required: true, message: '请选择课程类别', trigger: 'change' }
|
||
|
|
],
|
||
|
|
courseIntroduction: [
|
||
|
|
{ required: true, message: '请输入课程简介', trigger: 'blur' }
|
||
|
|
],
|
||
|
|
teachingGoal: [
|
||
|
|
{ required: true, message: '请输入教学目标', trigger: 'blur' }
|
||
|
|
]
|
||
|
|
},
|
||
|
|
permissionData: [],
|
||
|
|
curVisible: false,
|
||
|
|
curData: [],
|
||
|
|
subjectList: [],
|
||
|
|
ProfessionalClassList: [],
|
||
|
|
ProfessionalList: [],
|
||
|
|
CourseTypeList: [{
|
||
|
|
name: '实训课程',
|
||
|
|
value: 1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '理论课程',
|
||
|
|
value: 2
|
||
|
|
}],
|
||
|
|
hoursList: [{
|
||
|
|
name: '32课时',
|
||
|
|
value: 1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '64课时',
|
||
|
|
value: 2
|
||
|
|
}],
|
||
|
|
configSearch: '',
|
||
|
|
multipleSelection: [],
|
||
|
|
NoAdd: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
configSearch(newVal){
|
||
|
|
this.getConfig()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
if(this.form.courseId){
|
||
|
|
let data = {
|
||
|
|
courseId: this.form.courseId
|
||
|
|
}
|
||
|
|
this.$get(this.api.queryCourseDetails,data).then((res) => {
|
||
|
|
this.form = {
|
||
|
|
courseName: res.message[0].course.courseName,
|
||
|
|
courseType: res.message[0].course.courseType,
|
||
|
|
disciplineId: res.message[0].course.disciplineId,
|
||
|
|
professionalClassId: res.message[0].course.professionalClassId,
|
||
|
|
professionalId: res.message[0].course.professionalId,
|
||
|
|
courseHours: res.message[0].course.courseHours,
|
||
|
|
marketPrice: res.message[0].course.marketPrice,
|
||
|
|
courseIntroduction: res.message[0].course.courseIntroduction,
|
||
|
|
teachingGoal: res.message[0].course.teachingGoal,
|
||
|
|
courseId : res.message[0].course.courseId,
|
||
|
|
systemId: res.message[0].course.systemId
|
||
|
|
}
|
||
|
|
this.getProfessionalClassData()
|
||
|
|
this.getProfessionalData()
|
||
|
|
this.curData = res.message[0].serviceConfigList
|
||
|
|
// let arr1 = this.curData
|
||
|
|
// let result1 = arr1.map(e => e.systemId)
|
||
|
|
// const set = new Set(result1);
|
||
|
|
// let set1 = [...set].join()
|
||
|
|
// this.form.systemId = this.form.systemId.concat(set1)
|
||
|
|
}).catch((res) => {
|
||
|
|
})
|
||
|
|
}
|
||
|
|
this.getSubject()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
saveAdd(form){
|
||
|
|
this.$refs[form].validate((valid) => {
|
||
|
|
if (valid) {
|
||
|
|
if(this.NoAdd){
|
||
|
|
if(this.curData.length != 0){
|
||
|
|
let data = {
|
||
|
|
course: this.form,
|
||
|
|
serviceConfigList: this.curData
|
||
|
|
}
|
||
|
|
if(this.form.courseId){
|
||
|
|
this.$post(this.api.updateCourse,data).then((res) => {
|
||
|
|
this.$message.success('编辑成功');
|
||
|
|
this.$router.replace('/curriculum')
|
||
|
|
}).catch((res) => {
|
||
|
|
})
|
||
|
|
}else{
|
||
|
|
this.$post(this.api.addCourse,data).then((res) => {
|
||
|
|
this.$message.success('添加成功');
|
||
|
|
this.$router.replace('/curriculum')
|
||
|
|
}).catch((res) => {
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}else{
|
||
|
|
this.$message.warning('请添加实训配置！');
|
||
|
|
}
|
||
|
|
}else{
|
||
|
|
this.$message.warning('该课程已存在');
|
||
|
|
}
|
||
|
|
}else{
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 获取应用配置
|
||
|
|
getConfig(){
|
||
|
|
let data = {
|
||
|
|
searchContent: this.configSearch,
|
||
|
|
systemId: this.form.systemId
|
||
|
|
}
|
||
|
|
this.$get(this.api.queryAppConfig,data).then((res) => {
|
||
|
|
this.curVisible = true
|
||
|
|
res.message.map(e => {
|
||
|
|
e.systemStatus = this.systemStatus(e.systemStatus)
|
||
|
|
e.systemType = this.systemAttributionStatus(e.systemType)
|
||
|
|
e.systemAttribution = this.systemTypeStatus(e.systemAttribution)
|
||
|
|
})
|
||
|
|
this.permissionData = res.message
|
||
|
|
}).catch((res) => {
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 获取学科类别
|
||
|
|
getSubject(){
|
||
|
|
this.$get(this.api.queryCourseDiscipline).then(res => {
|
||
|
|
this.subjectList = res.message
|
||
|
|
}).catch(res => {});
|
||
|
|
},
|
||
|
|
// 清空学科类别
|
||
|
|
clearsubjectType(){
|
||
|
|
this.form.professionalClassId = '',
|
||
|
|
this.form.professionalId = ''
|
||
|
|
},
|
||
|
|
// 获取专业类
|
||
|
|
getProfessionalClass(){
|
||
|
|
this.clearsubjectType()
|
||
|
|
this.getProfessionalClassData()
|
||
|
|
},
|
||
|
|
getProfessionalClassData(){
|
||
|
|
let data = {
|
||
|
|
disciplineId: this.form.disciplineId
|
||
|
|
}
|
||
|
|
this.$get(this.api.queryCourseProfessionalClass,data).then(res => {
|
||
|
|
this.ProfessionalClassList = res.message
|
||
|
|
}).catch(res => {});
|
||
|
|
},
|
||
|
|
// 清空专业类
|
||
|
|
clearProfessionalClass(){
|
||
|
|
this.form.professionalId = ''
|
||
|
|
},
|
||
|
|
// 获取专业
|
||
|
|
getProfessional(){
|
||
|
|
this.clearProfessionalClass()
|
||
|
|
this.getProfessionalData()
|
||
|
|
},
|
||
|
|
getProfessionalData(){
|
||
|
|
let data = {
|
||
|
|
professionalClassId: this.form.professionalClassId
|
||
|
|
}
|
||
|
|
this.$get(this.api.queryCourseProfessional,data).then(res => {
|
||
|
|
this.ProfessionalList = res.message
|
||
|
|
}).catch(res => {});
|
||
|
|
},
|
||
|
|
// 多选操作
|
||
|
|
handleSelectionChange(val) {
|
||
|
|
this.multipleSelection = val;
|
||
|
|
},
|
||
|
|
// 绑定实训配置
|
||
|
|
addSystem() {
|
||
|
|
let arr = this.multipleSelection
|
||
|
|
let result = arr.map(e => e.systemId).join()
|
||
|
|
this.form.systemId = this.form.systemId.concat(`,${result}`)
|
||
|
|
if (this.form.systemId.substr(0,1)==','){
|
||
|
|
this.form.systemId = this.form.systemId.substr(1);
|
||
|
|
}
|
||
|
|
this.curVisible = false
|
||
|
|
this.getTrianConfig()
|
||
|
|
},
|
||
|
|
// 查询实训配置
|
||
|
|
getTrianConfig(){
|
||
|
|
let data = {
|
||
|
|
systemId: this.form.systemId
|
||
|
|
}
|
||
|
|
this.$get(this.api.queryTrainingConfig,data).then((res) => {
|
||
|
|
var arritem = {
|
||
|
|
isShow: 0
|
||
|
|
}
|
||
|
|
let arryNew = []
|
||
|
|
res.message.map(item => {
|
||
|
|
arryNew.push(Object.assign({}, item, arritem))
|
||
|
|
})
|
||
|
|
this.curData = arryNew
|
||
|
|
}).catch((res) => {
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 编辑实训配置
|
||
|
|
EditCur(row){
|
||
|
|
if(this.form.courseId){
|
||
|
|
this.$store.commit("systemData", { system_id : row.projectId});
|
||
|
|
this.$router.push('/addlink');
|
||
|
|
}else{
|
||
|
|
this.$message.warning('请先保存课程再进行编辑项目！');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
handleDelete(index, row){
|
||
|
|
this.$confirm('此操作将删除该项目, 是否继续?', '提示', {
|
||
|
|
confirmButtonText: '确定',
|
||
|
|
cancelButtonText: '取消',
|
||
|
|
type: 'warning'
|
||
|
|
}).then(() => {
|
||
|
|
this.$message.success('删除成功');
|
||
|
|
this.curData.splice(index, 1);
|
||
|
|
let arr1 = this.curData
|
||
|
|
let result1 = arr1.map(e => e.systemId)
|
||
|
|
const set = new Set(result1);
|
||
|
|
let set1 = [...set].join()
|
||
|
|
this.form.systemId = set1
|
||
|
|
}).catch(() => {
|
||
|
|
this.$message.info("已取消删除");
|
||
|
|
});
|
||
|
|
},
|
||
|
|
goback(){
|
||
|
|
this.$router.go(-1)
|
||
|
|
},
|
||
|
|
// 查询课程是否存在
|
||
|
|
changeName(){
|
||
|
|
let data = {
|
||
|
|
courseName: this.form.courseName
|
||
|
|
}
|
||
|
|
this.$get(this.api.queryCourseNameIsExists,data).then((res) => {
|
||
|
|
if(res.message.length != 0){
|
||
|
|
this.$message.warning('该课程已存在');
|
||
|
|
this.NoAdd = false
|
||
|
|
}else{
|
||
|
|
this.NoAdd = true
|
||
|
|
}
|
||
|
|
}).catch((res) => {
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.border_lf{
|
||
|
|
border-left: 1px dashed #eee;
|
||
|
|
padding: 0 60px;
|
||
|
|
}
|
||
|
|
.border_lf label{
|
||
|
|
width: 120px;
|
||
|
|
}
|
||
|
|
.pad_none{
|
||
|
|
padding: 0 0 0 60px;
|
||
|
|
}
|
||
|
|
.mar_input{
|
||
|
|
margin-right: 80px;
|
||
|
|
}
|
||
|
|
.marb30{
|
||
|
|
margin-bottom: 30px;
|
||
|
|
}
|
||
|
|
.tab_temp label{
|
||
|
|
width: 60px;
|
||
|
|
}
|
||
|
|
.mar10{
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
.radio_icon{
|
||
|
|
font-size: 26px;
|
||
|
|
color: #9278FF;
|
||
|
|
}
|
||
|
|
</style>
|