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.

539 lines
25 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">
4 years ago
<p class="addhr_tag"></p>
<span>课程信息</span>
</div>
<div class="border-b-dashed"></div>
4 years ago
<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="预计课时">
4 years ago
<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 ">
4 years ago
<p class="addhr_tag"></p>
<span>练习配置</span>
4 years ago
</div>
<el-button icon="el-icon-plus" circle></el-button>
4 years ago
</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 icon="el-icon-plus" circle></el-button>
</div>
<div class="border-b-dashed"></div>
4 years ago
<!-- 实训配置 -->
<div>
<el-table :data="curData" class="table" stripe header-align="center">
4 years ago
<el-table-column type="index" width="100" label="序号" align="center">
</el-table-column>
<el-table-column prop="name" label="项目名称" align="center">
4 years ago
</el-table-column>
<el-table-column prop="appName" label="应用名称" align="center">
4 years ago
</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"
4 years ago
: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>
4 years ago
</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>
import courseconfig from './courseconfig.vue'
4 years ago
export default {
components:{
courseconfig:courseconfig
},
4 years ago
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: [
{name:'项目名称',appName:'应用',asset:false,switch:false,contral:false}
],
4 years ago
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;
}
4 years ago
</style>