sz-kjsxy-web/src/views/course/components/editClass.vue

<template>
  <div>
    <xy-dialog ref="dialog" :width="70" :is-show.sync="isShow" :type="'form'" :title="type === 'add' ? '新增课表' : '编辑课表'"
      :form="form" :rules='rules' @submit="submit">
      <template v-slot:date>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>日期：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.date" placeholder="请输入日期" clearable style="width: 100%;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:period>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>时间：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.period" placeholder="请输入时间" clearable style="width: 100%;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:teacher_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>授课老师：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.teacher_id" @change="changeTeacher" style="width:100%" placeholder="请选择授课老师"
              clearable>
              <el-option v-for="item in teacher_options" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:theme>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>课程主题：
          </div>
          <div class="xy-table-item-content">
            <el-input style="width: 100%;" v-model="form.theme" placeholder="请输入课程主题" clearable></el-input>
          </div>
        </div>
      </template>
      <template v-slot:address>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>上课地点：
          </div>
          <div class="xy-table-item-content">
            <el-input style="width: 100%;" v-model="form.address" placeholder="请输入上课地点" clearable></el-input>
          </div>
        </div>
      </template>
      <template v-slot:introduce>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>老师简介：
          </div>
          <div class="xy-table-item-content">
            <el-input style="width: 100%;" v-model="form.introduce" placeholder="请输入老师简介" clearable></el-input>
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
  import myMixins from "@/mixin/selectMixin.js";
  import {
    show,
    save
  } from '@/api/course/courseContent.js'
  import {
    save as saveTeacher
  } from "@/api/info/teachers.js"
  export default {
    mixins: [myMixins],
    components: {},
    data() {
      return {
        isShow: false,
        type: 'add',
        id: '',
        teacher_options: [],
        form: {
          date: '',
          period: '',
          teacher_id: "",
          theme: '',
          address: '',
          introduce: '',
        },
        rules: {

        },
      }
    },
    created() {},
    methods: {
      setTeachers(e) {
        this.teacher_options = e
      },
      changeTeacher(e) {
        if (e) {
          this.teacher_options.map(item => {
            if (e === item.id) {
              this.form.teacher_id = item.id
              this.form.introduce = item.introduce
            }
          })
        }
        console.log("e", e)
      },
      submit() {
        if (this.id) {
          this.form.id = this.id
        }else{
          this.form.id = ''
        }

        save({
          ...this.form
        }).then(res => {
          this.$message({
            type: 'success',
            message: '保存课表成功'
          })
          saveTeacher({
            id: this.form.teacher_id,
            introduce: this.form.introduce
          }).then(res => {

          })
          this.isShow = false
          this.$emit('refresh')
          // this.active = 1
        })

      },
      getDetail() {
        show({
          id: this.id,
          show_relation: ['teacher']
        }).then(res => {
          this.form = this.base.deepCopy(res)
          this.form.introduce = res.teacher.introduce
        })
      },


    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if (this.type === 'editor') {
            this.getDetail()
          }
        } else {
          this.id = ''
          this.form = {
            date: '',
            period: '',
            teacher_id: "",
            theme: '',
            address: '',
            introduce: '',
          }
          this.$refs['dialog'].reset()
        }
      },
    }

  }
</script>

<style scoped lang="scss">

</style>