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

<template>
  <div>
    <xy-dialog ref="dialog" :width="35" :is-show.sync="isShow" :type="'form'" title="更改课程" :form="form" :rules='rules'
      @submit="submit">
      <template v-slot:name>
        <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="submitObj.name" @change="changeName" placeholder="请选择课时" clearable style="width: 300px;">
              <el-option v-for="item in type_options" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:teacher>
        <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="submitObj.teacher" @change="changeTeacher" placeholder="请选择授课老师" clearable
              style="width: 300px;">
              <el-option v-for="item in teacher_options" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:room>
        <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 type="textarea" v-model="submitObj.room" placeholder="请选择授课教室"></el-input>
          </div>
        </div>
      </template>


      <template v-slot:footerContent>
        <el-button type="primary" style='margin-left:5px;margin-bottom:5px;' @click="submit">确认</el-button>
        <el-button plain type="primary" ghost style='margin-left:5px;margin-bottom:5px;'
          @click="isShow=false">取消</el-button>
      </template>

    </xy-dialog>

  </div>
</template>

<script>
  import { deepCopy } from "@/utils";
  export default {
    components: {

    },
    data() {
      return {
        isShow: false,
        type_options: [{
          id: 0,
          value: '管理'
        }, {
          id: 1,
          value: '实践'
        }],
        teacher_options: [{
          id: 0,
          value: '王老师'
        }, {
          id: 1,
          value: '李老师'
        }],
        submitObj:{
          name: '',
          name_value: '',
          teacher: '',
          teacher_value: '',
          room: '',
          index: 0,
          prop: ''
        },
        form: {
          name: '',
          teacher: '',
          room: '',
        },
        rules: {}
      }
    },
    created() {},
    methods: {
      setIndex(index, prop, form) {
        this.submitObj = deepCopy(form)
        this.submitObj.prop = prop
        this.submitObj.index = index
        console.log("this.submitObj", this.submitObj)
      },

      changeTeacher(e) {
        this.teacher_options.map(item => {
          if (item.id === e) {
            this.submitObj.teacher_value = item.value
            this.submitObj.teacher = item.id
          }
        })

      },
      changeName(e) {
        this.type_options.map(item => {
          if (item.id === e) {
            this.submitObj.name_value = item.value
            this.submitObj.name = item.id
          }
        })
      },
      submit() {
        if (!this.submitObj.name_value) {
          this.$message({
            type: 'warning',
            message: '请选择课时'
          })
          return
        }
        if (!this.submitObj.teacher_value) {
          this.$message({
            type: 'warning',
            message: '请选择授课老师'
          })
          return
        }
        if (!this.submitObj.room) {
          this.$message({
            type: 'warning',
            message: '请输入授课教室'
          })
          return
        }
        console.log("this.form111", this.submitObj)
        this.$emit("refresh", this.submitObj)
        this.isShow = false
      }
    },
    watch: {
      isShow(newVal) {
        // if(!){}
      },
    }

  }
</script>

<style scoped lang="scss">
  ::v-deep .name,
  ::v-deep .teacher,
  ::v-deep .room {
    flex-basis: 100%;
  }
</style>