<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>