<template> <el-dialog :title="dialogObj.title" :visible.sync="dialogObj.show" > <el-form ref="form" :model="form" label-width="120px"> <el-form-item label="期数" v-if="this.dialogObj.type !==1"> <el-cascader :options="goodsList" :props="{value:'id',label:'name'}" @active-item-change="handleItemChange" @change="changePeriods" > </el-cascader> </el-form-item> <el-form-item label="老师"> <el-select v-model="form.teacher_id" placeholder="请选择"> <el-option v-for="(data,index) in teacherList" :key="index" :label="data.name" :value="data.id"> </el-option> </el-select> </el-form-item> <el-form-item label="最大学员"> <el-input-number v-model="form.max_join_num"></el-input-number> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="dialogObj.show = false">取 消</el-button> <el-button type="primary" @click="onSave">确 定</el-button> </span> </el-dialog> </template> <script> import {getTeacherListApi,getClassDetailApi,editClassApi,addClassApi,getPeriodsApi,getGoodsListApi} from "../../service/api"; export default { props:[ 'dialogObj' ], data(){ return{ form:{ teacher_id:'', max_join_num:'' }, teacherList:[], goodsList: [], periods: {} } }, methods:{ initPage(){ getTeacherListApi().then(res=>{ this.teacherList = res.list }); switch (this.dialogObj.type) { case 0: this.getPeriodList(); this.form = { teacher_id:'', max_join_num:'' }; break; case 1: getClassDetailApi(this.dialogObj.id).then(res=>{ this.form = { teacher_id:res.teacher_id, max_join_num:res.max_join_num }; }) } }, getPeriodList(){ getGoodsListApi().then(res=>{ res.list.forEach(i=>{ i.children = []; }); this.goodsList = res.list; if(!this.periods) { getPeriodsApi({goods_id:this.goodsList[0].id}).then(res=>{ res.list.forEach(i=>{i.name = i.title}); this.goodsList[0].children = res.list; this.periods = res.list[0] }) } }); }, onSave(){ switch (this.dialogObj.type) { case 0: addClassApi(this.periods.id,this.form).then(res=>{ this.$message({ type: 'success', message: '添加成功!' }); this.$emit("reflash"); this.dialogObj.show = false; }); break; case 1: editClassApi(this.dialogObj.id,this.form).then(res=>{ this.$message({ type: 'success', message: '修改成功!' }); this.$emit("reflash"); this.dialogObj.show = false; }) } }, handleItemChange(val){ getPeriodsApi({goods_id:val[0]}).then(res=>{ res.list.forEach(i=>{i.name = i.title}); this.goodsList.find(i=>{return i.id === val[0]}).children = res.list }) }, changePeriods(data){ if(data.length>1){ let nowGoods = this.goodsList.find(i=>{return i.id === data[0]}); this.periods = nowGoods.children.find(i=>{return i.id === data[1]}); this.getTeacher() } } }, watch:{ 'dialogObj'(value){ this.initPage() } } } </script> <style scoped> </style>