newDialog.vue

<template>
  <div>
    <el-dialog
      :title="dialogObj.title"
      center
      append-to-body
      :visible.sync="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="请选择" @change="onOptionChange" :disabled="form.id ? true : false">
                  <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="startNum">
            <el-select v-model="form.startNum"  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" v-if = "!form.id">
            <el-select v-model="form.teacherList"  placeholder="请选择" @change="onTeacher1Change" filterable multiple>
              <el-option
                v-for="item in teacher1Options"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="观摩老师" prop="viewTeacher" v-if = "!form.id">
            <el-select v-model="form.viewTeacher" placeholder="请选择" @change="onTeacher2Change" filterable>
              <el-option
                v-for="item in teacher2Options"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="将带班老师加入观摩班"  v-if = "!form.id" label-width="200">
            <el-switch
              v-model="form.is_add_teacher_to_class"
              active-color="#13ce66"
              inactive-color="#eee">
            </el-switch>
          </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="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,getPeriodsApi} from "../../service/api";
  import {ISORNOT,GOODSTYPE,LESSONTYPE,GOODSSTATUS} from "../../util/wordbook";
  import goodDialog from './dialog'
  export default {
    props:[
      'dialogObj'
    ],
    data(){
      return{
        loading: false,
        form: {
          is_add_teacher_to_class: false,
          teacherList:[],
          viewTeacher:'',
          rest_week_day:[],
          title:"",
          goods_id:"",
        },
        show: false,
        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: [],
        teacher1Options: [],
        teacher2Options: [],
        goodList: [],
        itemOptions: [],
        rules:{
          title:[
            { required: true, message: '请输入名称', trigger: 'change' }
          ],
          startNum:[
            { 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' }
          ]
        },
        periodsList:[],
        selectedGoods:[],
      }
    },
    components:{
      goodDialog
    },
    watch:{
      'dialogObj.show'(val){
        if(val){
          this.getTeachers();
          this.getGoodsOption();
        }
      },
      show(value){
        this.$emit("changeShow",value);
      }
    },
    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.id+'][' + GOODSTYPE[val.goods_type] + ']' + '【' +val.current_price / 100 + '元】' + val.name
      }
    },
    methods:{
      sub(){
        this.$refs['form'].validate((valid) => {
          if(valid){
            let _id = this.form.goods_id;
            let json = {
              title: this.form.title,
              start_num: this.form.startNum,
              start_at: this.form.start_at,
              rest_week_day: this.form.rest_week_day ? this.form.rest_week_day.join(',') : ''
            }
            json.is_add_teacher_to_class = this.form.is_add_teacher_to_class ? 1 : 0;
            if (this.form.id) {
              getEditPeriodsApi(this.form.id,json).then(res=>{
                this.$message({
                  type: 'success',
                  message: '编辑成功!'
                });
                this.$emit("reflash");
              })
            } else {
              json.teacher_ids = this.form.teacherList.join(',');
              json.view_teacher_id = parseInt(this.form.viewTeacher);
              getAddPeriodsApi(_id,json).then(res=>{
                this.$message({
                  type: 'success',
                  message: '添加成功!'
                });
                this.$emit("reflash");
              })
            }
                this.show=false;
          }
        });
      },
      getTeachers(){
        let json1 = {
          page: 1,
          limit: 100,
          status:0
        };
        getTeacherListApi(json1).then((res)=>{
          this.teacherOptions = res.list;
          this.teacher1Options = res.list;
          this.teacher2Options = res.list;
        })
      },
      findDifferentArray(array1, array2){
        let newArray = []
        array1.forEach((val)=>{
          let index = array1.findIndex((item)=>{
            return val.id == item
          })
          if (index === -1) {
            newArray.push(val)
          }
        })
        return newArray
      },
      onTeacher1Change(ids){
        if(ids){
          this.teacher2Options = this.findDifferentArray(this.teacherOptions, ids)
        } else {
          this.teacher2Options = this.teacherOptions
        }
      },
      onTeacher2Change(id){
        if(id){
          this.teacher1Options = this.findDifferentArray(this.teacherOptions, [id])
        } else {
          this.teacher1Options = this.teacherOptions
        }
      },
      onOptionChange(id){
        let index = this.goodList.findIndex((val)=>{ return val.id === id});
        if(index >-1){
          this.getLessonDetail(this.goodList[index].course_id);
        }
        delete this.form.startNum
      },
      getLessonDetail(id){
        getLessonDetailApi(id,{}).then((res) => {
          this.itemOptions = res.detail[res.type]
        })
      },
      getGoodsOption(){
        let json = {
          page: 1,
          goods_type:'1,2',
          limit: 100,
        };
        getGoodsListApi(json).then(res=>{
          this.goodList = res.list;
          if (this.dialogObj.form.id){
            this.form = this.dialogObj.form;
          } else {
            this.form = {
              rest_week_day:[],
              is_add_teacher_to_class: false,
              teacherList:[],
              viewTeacher:'',
              title:"",
              goods_id:"",
            };
          }
          if(this.dialogObj.form.course_id){
            this.getLessonDetail(this.dialogObj.form.course_id);
          }
          this.show = this.dialogObj.show
        })
      },
      changePeriods(data){
        if(data.length>1){
          this.form.title=String(data[1]);
        }
      },
      handleItemChange(val){
        getPeriodsApi({goods_id:val[0]}).then(res=>{
          res.list.forEach(i=>{i.name = i.title});
          this.periodsList.find(i=>{return i.id === val[0]}).children = res.list
        })
      },
    },
    // mounted(){
    //   this.getTeachers();
    //   this.getGoodsOption();
    // },
  }
</script>

<style scoped>

</style>