newDialog.vue

<template>
  <div>
    <el-dialog
      :title="dialogObj.title"
      center
      append-to-body
      :visible.sync="dialogObj.show"
      width="800px">
      <div v-loading="loading">
        <el-form ref="form" :model="form" label-width="120px" :rules="rules">
          <el-row>
            <el-col :span="10">
              <el-form-item label="商品名称" prop="goods_id">
                <el-select v-model="form.goods_id" placeholder="请选择" clearable @change="onOptionChange">
                  <el-option
                    v-for="(data,index) in goodList"
                    :key="index"
                    :label="data | filterGoods"
                    :value="data.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="期数名称" prop="title">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="开始主题" prop="start_num">
            <el-select v-model="form.start_num"  clearable placeholder="请选择">
              <el-option
                v-for="item in itemOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始上课时间" prop="start_at">
            <el-date-picker
              v-model="form.start_at"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              type="date"
              :picker-options="pickerOptions1"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="带班老师" prop="teacherList">
            <el-select v-model="form.teacherList" multiple placeholder="请选择">
              <el-option
                v-for="item in teacherOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="观摩老师" prop="viewTeacher">
            <el-select v-model="form.viewTeacher" placeholder="请选择">
              <el-option
                v-for="item in teacherOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="不上课日期">
            <el-select v-model="form.rest_week_day" multiple placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogObj.show = false">取 消</el-button>
        <el-button type="primary" @click="sub">确 定</el-button>
      </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getGoodsListApi,getAddPeriodsApi,getTeacherListApi,getEditPeriodsApi,getLessonDetailApi} from "../../service/api";
  import {ISORNOT,GOODSTYPE,LESSONTYPE,GOODSSTATUS} from "../../util/wordbook";
  import goodDialog from './dialog'
  export default {
    props:[
      'dialogObj'
    ],
    data(){
      return{
        loading: false,
        form: {},
        teacherList: [],
        viewTeacher: '',
        pickerOptions1: {
          disabledDate(time) {
            return !(time.getTime() > Date.now());
          }
        },
        options: [
          {
            value: 0,
            label: '周日'
          },
          {
            value: 1,
            label: '周一'
          },
          {
            value: 2,
            label: '周二'
          },
          {
            value: 3,
            label: '周三'
          },
          {
            value: 4,
            label: '周四'
          },
          {
            value: 5,
            label: '周五'
          },
          {
            value: 6,
            label: '周六'
          }
        ],
        teacherOptions: [],
        goodList: [],
        itemOptions: [],
        rules:{
          title:[
            { required: true, message: '请输入名称', trigger: 'change' }
          ],
          start_num:[
            { required: true, message: '请输入开始主题', trigger: 'change' }
          ],
          start_at:[
            { required: true, message: '请选择开始上课时间', trigger: 'change' }
          ],
          rest_week_day:[
            { required: true, message: '请选择周几不上课', trigger: 'change' }
          ],
          teacher_ids:[
            { required: true, message: '请选择老师ID', trigger: 'change' }
          ],
          goods_id: [
            { required: true, message: '商品ID不能为空', trigger: 'change' }
          ],
          teacherList: [
            { required: true, message: '带班老师不能为空', trigger: 'change' }
          ],
          viewTeacher: [
            { required: true, message: '观摩老师不能为空', trigger: 'change' }
          ]
        }
      }
    },
    components:{
      goodDialog
    },
    filters: {
      isOrNot(value){
        return ISORNOT[value]
      },
      goodsType(value){
        return GOODSTYPE[value]
      },
      lessonType(value){
        return LESSONTYPE[value]
      },
      goodsStatus(value){
        return GOODSSTATUS[value]
      },
      filterGoods(val){
        return val.name + '[' +val.current_price / 100 + '元]'
      }
    },
    methods:{
      sub(){
//        if (!this.teacherList) {
//          this.$message.error('请选择老师ID');
//          return;
//        }
//        if (!this.viewTeacher) {
//          this.$message.error('请选择观摩老师');
//          return;
//        }
        this.$refs['form'].validate((valid) => {
          if(valid){
            let _id = this.form.goods_id;
            let json = {
              title: this.form.title,
              start_num: this.form.start_num,
              start_at: this.form.start_at,
              rest_week_day: this.form.rest_week_day ? this.form.rest_week_day.join(',') : '',
              teacher_ids: this.form.teacherList.join(','),
              view_teacher_id: parseInt(this.form.viewTeacher)
            }
            if (this.form.id) {
              getEditPeriodsApi(this.form.id,json).then(res=>{
                this.$message({
                  type: 'success',
                  message: '添加成功!'
                });
                this.$emit("reflash");
              })
            } else {
              getAddPeriodsApi(_id,json).then(res=>{
                this.$message({
                  type: 'success',
                  message: '添加成功!'
                });
                this.$emit("reflash");
              })
            }
          }
        });
      },
      getTeachers(){
        getTeacherListApi().then((res)=>{
          this.teacherOptions = res.list;
        })
      },
      onOptionChange(id){
        let index = this.goodList.findIndex((val)=>{ return val.id = id});
        if(index >-1){
            this.getLessonDetail(this.goodList[index].course_id);
        }
      },
      getLessonDetail(id){
        console.log('getLessonDetail', id);
        this.form.start_num=''
        getLessonDetailApi(id,{}).then((res) => {
          this.itemOptions = res.detail[res.type]
        })
      },
      getGoodsOption(){
        let json = {
          page: 1,
          limit: 100
        };
        getGoodsListApi(json).then(res=>{
          this.goodList = res.list;
        })
      }
    },
    mounted(){
//      this.initPage()
      this.getTeachers();
      this.getGoodsOption();
      if(this.dialogObj.form.course_id){
        this.getLessonDetail(this.dialogObj.form.course_id);
      }
      this.form = this.dialogObj.form;
      this.teacherList = this.dialogObj.form.teacher_ids;
    }
  }
</script>

<style scoped>

</style>