GCLS_Page_Learn/src/views/teacher/create_course/step_table/CourseInfo.vue

<template>
  <div class="course-info">
    <step-bar :step-number="0" />
    <div class="course-info-container">
      <el-form
        ref="form"
        :model="form"
        :rules="formRules"
        label-position="left"
        label-width="120px"
        hide-required-asterisk
      >
        <el-form-item label="课程封面" class="cover">
          <el-upload
            action="no"
            class="avatar-uploader"
            :http-request="upload"
            :before-upload="beforeUpload"
            :show-file-list="false"
            accept="image/*"
          >
            <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="课程名称" prop="name">
          <el-input v-model="form.name" type="text" class="name-input" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="课程介绍">
          <el-input
            v-model="form.intro"
            type="textarea"
            placeholder="请输入"
            resize="none"
            class="intro-input"
            rows="4"
          />
        </el-form-item>

        <el-form-item label="所属机构" placeholder="点击选择">
          <el-select v-model="form.org_id" class="org-list">
            <el-option
              v-for="item in orgList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="授课教师" class="teacher-tag">
          <el-tag
            v-for="(item, i) in user_list"
            :key="item.id"
            color="#fff"
            closable
            @close="tagClose(item.id, i)"
          >
            {{ item.real_name }}
          </el-tag>
          <el-button class="teacher" icon="el-icon-plus" circle @click="selectTeacher" />
        </el-form-item>

        <el-form-item label="课程周期">
          <el-date-picker
            v-model="form.date"
            type="daterange"
            range-separator="~"
            value-format="yyyy-MM-dd"
            unlink-panels
          />
        </el-form-item>

        <el-form-item label="学生数量">
          <el-input v-model.number.lazy="form.student_count_start" class="student-count" />
          <el-checkbox v-model="form.is_auto_close">报满后自动封班</el-checkbox>
        </el-form-item>

        <el-form-item label="加入方式">
          <el-radio v-model="form.student_enter_control_type" :label="0">公开</el-radio>
          <el-radio v-model="form.student_enter_control_type" :label="1">需要申请</el-radio>
        </el-form-item>

        <el-form-item label="价格">
          <el-input v-model="form.price" class="price" @input="price">
            <svg-icon slot="prepend" icon-class="dollar" />
          </el-input>
        </el-form-item>

        <el-form-item label="课后评价">
          <el-radio v-model="form.is_enable_KHPJ" :label="true">开启</el-radio>
          <el-radio v-model="form.is_enable_KHPJ" :label="false">关闭</el-radio>
          <span class="tip">每节课后学生可对课程及老师进行打分及评价</span>
        </el-form-item>

        <el-form-item label="学生自评">
          <el-radio v-model="form.is_enable_XYZP" :label="true">开启</el-radio>
          <el-radio v-model="form.is_enable_XYZP" :label="false">关闭</el-radio>
          <span class="tip">每节课后学生需对自己的课上表现进行打分及评价</span>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" class="next-step" @click.prevent="nextStep">
            下一步<i class="el-icon-right" />
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <select-teacher
      :dialog-visible="dialogVisible"
      :org-id="form.org_id"
      @dialogClose="dialogClose"
      @selectTeaher="selectTeaher"
    />
  </div>
</template>

<script>
import StepBar from '@/components/StepBar';
import SelectTeacher from '@/components/select/SelectTeacher.vue';
import { fileUpload } from '@/api/app';
import { CreateCourse, GetCourseInfo_ContainCSItem, UpdateCourse } from '@/api/course';
import { twoDecimal } from '@/utils/validate';
import { getMyOrgList } from '@/api/list';
import { GetUserListByIDList } from '@/api/user';

export default {
  name: 'CourseInfo',
  components: { StepBar, SelectTeacher },
  data() {
    return {
      id: this.$route.query.id,
      form: {
        imageUrl: '',
        picture_id: '',
        name: '',
        intro: '',
        org_id: '',
        teacher_id_list: [],
        date: [],
        begin_date: '',
        end_date: '',
        student_count_start: '',
        is_auto_close: false,
        student_enter_control_type: 0,
        price: '',
        is_enable_KHPJ: false,
        is_enable_XYZP: false
      },
      formRules: {
        name: { required: true, message: '课程名称不能为空', trigger: 'blur' }
      },
      orgList: [],
      user_list: [],
      dialogVisible: false
    };
  },
  created() {
    getMyOrgList().then(({ org_list }) => {
      this.orgList = org_list;
    });
    if (this.id) {
      GetCourseInfo_ContainCSItem({ id: this.id }).then(
        ({
          name,
          org_id,
          picture_id,
          picture_url,
          intro,
          begin_date,
          end_date,
          student_count_start,
          is_auto_close,
          student_enter_control_type,
          price,
          is_enable_KHPJ,
          is_enable_XYZP,
          teacher_list
        }) => {
          this.form.name = name;
          this.form.org_id = org_id;
          this.form.picture_id = picture_id;
          this.form.imageUrl = picture_url;
          this.form.intro = intro;
          this.form.date = [begin_date, end_date];
          this.form.student_count_start = student_count_start;
          this.form.is_auto_close = is_auto_close === 'true';
          this.form.student_enter_control_type = student_enter_control_type;
          this.form.price = price;
          this.form.is_enable_KHPJ = is_enable_KHPJ === 'true';
          this.form.is_enable_XYZP = is_enable_XYZP === 'true';
          teacher_list.forEach(item => {
            this.form.teacher_id_list.push(item.teacher_id);
            this.user_list.push({ id: item.teacher_id, real_name: item.teacher_name });
          });
        }
      );
    }
  },
  methods: {
    nextStep() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.begin_date = this.form.date[0];
          this.form.end_date = this.form.date[1];

          if (this.id) {
            this.form.id = this.id;
            UpdateCourse(this.form).then(() => {
              this.$message.success('修改课程成功！');
              this.$router.push({ path: `/create_course_step_table/select_book/${this.id}` });
            });
          } else {
            CreateCourse(this.form).then(res => {
              this.$message.success('创建课程成功！');
              this.$router.push({ path: `/create_course_step_table/select_book/${res.id}` });
            });
          }
        } else {
          return false;
        }
      });
    },
    beforeUpload(file) {
      let isImage = /^image/.test(file.type);
      if (!isImage) {
        this.$message.error('上传的文件不是图片，请重新上传！');
      }
      return isImage;
    },
    upload(file) {
      fileUpload('Open', file).then(response => {
        const { file_info_list } = response;
        if (file_info_list.length > 0) {
          const { file_url, file_id } = file_info_list[0];
          this.form.imageUrl = file_url;
          this.form.picture_id = file_id;
        }
      });
    },
    price(val) {
      this.form.price = twoDecimal(val);
    },
    // 对话框方法
    selectTeacher() {
      if (this.form.org_id) {
        this.dialogVisible = true;
      } else {
        this.$message.warning('请先选择所属机构！');
      }
    },
    dialogClose() {
      this.dialogVisible = false;
    },
    selectTeaher(teacherList) {
      this.form.teacher_id_list = this.form.teacher_id_list.concat(teacherList);
      this.dialogVisible = false;
      this.getUserList();
    },
    getUserList() {
      GetUserListByIDList({ id_list: this.form.teacher_id_list }).then(({ user_list }) => {
        this.user_list = user_list;
      });
    },
    // 授课教师 tag 删除事件
    tagClose(id, index) {
      this.user_list.splice(index, 1);

      let teacherList = this.form.teacher_id_list;
      teacherList.splice(teacherList.indexOf(id), 1);
    }
  }
};
</script>

<style lang="scss">
@import '~@/styles/mixin.scss';

.course-info {
  @include container;

  margin-top: $step-h;

  &-container {
    width: $basicWidth;
    min-width: $basicWidth;
    min-height: calc(100vh - #{$header-h} - #{$step-h} - 80px);
    padding: 48px 64px;
    background-color: #fff;
    border-radius: 8px;

    .el-form {
      .cover .el-form-item__label {
        line-height: 107px;
      }

      .name-input,
      .org-list,
      .intro-input {
        width: 600px;
      }

      .teacher-tag .el-tag {
        margin-right: 16px;
      }

      .teacher {
        border-width: 0;
        background-color: $basicColor;

        .el-icon-plus {
          color: #fff;
        }
      }

      .student-count {
        width: 120px;
        margin-right: 28px;
      }

      .price {
        width: 120px;

        .el-input-group__prepend {
          padding: 0 12.5px;
        }
      }

      .next-step .el-icon-right {
        margin-left: 12px;
      }
    }
  }
}
</style>