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.
570 lines
27 KiB
570 lines
27 KiB
<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"> |
|
<p class="addhr_tag"></p> |
|
<span>课程信息</span> |
|
</div> |
|
<div class="border-b-dashed"></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="预计课时"> |
|
<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 "> |
|
<p class="addhr_tag"></p> |
|
<span>练习配置</span> |
|
</div> |
|
<el-button @click="curVisible=true" icon="el-icon-plus" circle></el-button> |
|
</div> |
|
<div class="border-b-dashed"></div> |
|
<div> |
|
<el-table :data="curData" class="table" stripe header-align="center"> |
|
<el-table-column type="index" width="100" label="序号" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="name" label="项目名称" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="appName" 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.contral" |
|
: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-card shadow="hover" class="mgb20"> |
|
<div class="mgb20 flex-between"> |
|
<div class="flex-center "> |
|
<p class="addhr_tag"></p> |
|
<span>考核配置</span> |
|
</div> |
|
<el-button @click="showAssess=true" icon="el-icon-plus" circle></el-button> |
|
</div> |
|
<div class="border-b-dashed"></div> |
|
<!-- 实训配置 --> |
|
<div> |
|
<el-table :data="curData" class="table" stripe header-align="center"> |
|
<el-table-column type="index" width="100" label="序号" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="name" label="项目名称" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="appName" 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.contral" |
|
: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-card shadow="hover" class="mgb20"> |
|
<div class="mgb20 flex-between"> |
|
<div class="flex-center "> |
|
<p class="addhr_tag"></p> |
|
<span>资源配置</span> |
|
</div> |
|
<div class="flex-between"> |
|
<el-button type="primary" size="small" round class="mag" @click="getConfig">添加章节</el-button> |
|
<el-button type="primary" size="small" round class="mag" @click="getConfig">编辑顺序</el-button> |
|
</div> |
|
</div> |
|
<div class="border-b-dashed"></div> |
|
</el-card> --> |
|
|
|
<courseconfig></courseconfig> |
|
|
|
</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-dialog :visible.sync="showAssess" 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="showAssess = false">取 消</el-button> |
|
<el-button type="primary" v-preventReClick >确 定</el-button> |
|
</span> |
|
</el-dialog> |
|
</el-row> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import courseconfig from './courseconfig.vue' |
|
export default { |
|
components:{ |
|
courseconfig:courseconfig |
|
}, |
|
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,// 联系配置弹框 |
|
showAssess:false,// 考核配置弹框 |
|
curData: [ |
|
{name:'项目名称',appName:'应用',asset:false,switch:false,contral:false} |
|
], |
|
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; |
|
} |
|
.card-curriculum{ |
|
background: #fff; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
padding: 10px 120px; |
|
} |
|
</style> |