Lesson.vue

<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-09-22 10:59:44
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2023-02-01 15:21:15
 * @FilePath: /danger-manage-web/src/views/lessonsProgram/components/Lession.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="form-wrapper">
    <el-form
      class="form"
      ref="form"
      :model="form"
      label-width="auto"
      :rules="rules"
    >
      <div class="top flex">
        <el-form-item label="课程标题" prop="courseName">
          <el-input style="width: 568px" v-model="form.courseName" :disabled="checkLock"></el-input>
        </el-form-item>

        <!--<el-form-item label="培训计划" prop="courseType">-->
        <!--<el-select-->
        <!--v-model="form.courseType"-->
        <!--placeholder="请选择培训计划"-->
        <!--clearable-->
        <!--size="small"-->
        <!--&gt;-->
        <!--<el-option-->
        <!--v-for="course in courseOptions"-->
        <!--:key="course.planId"-->
        <!--:label="course.planName"-->
        <!--:value="course.planId"-->
        <!--/>-->
        <!--</el-select>-->
        <!--</el-form-item>-->
      </div>
      <div class="flex">
        <el-form-item label="培训计划" prop="courseType">
          <el-select
            v-model="form.courseType"
            placeholder="请选择培训计划"
            clearable
            size="small"
            :disabled="checkLock"
            style="width:215px"
          >
            <el-option
              v-for="course in courseOptions"
              :key="course.planId"
              :label="course.planName"
              :value="course.planId"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="培训时长"
          prop="duration"
          style="margin-left: 55px"
        >
          <el-input
            style="width: 180px"
            placeholder="分钟"
            type="number"
            v-model="form.duration"
            :disabled="checkLock"
          ></el-input>
          <el-label>
          (分钟)
          </el-label>
        </el-form-item>
      </div>
      <div class="flex">
        <el-form-item label="开始时间" prop="testStartTime">
          <el-date-picker
            style="margin-right: 50px"
            v-model="form.testStartTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间"
            default-time="00:00:00"
            :disabled="checkLock"
          />
        </el-form-item>
        <el-form-item label="结束时间" prop="testEndTime">
          <el-date-picker
            v-model="form.testEndTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间"
            default-time="00:00:00"
            :disabled="checkLock"
          />
        </el-form-item>
        <el-form-item label="是否人脸认证" prop="isVeriftyFace" style="margin-left: 50px">
          <el-radio v-model="form.isVeriftyFace" label="1">是</el-radio>
          <el-radio v-model="form.isVeriftyFace" label="2">否</el-radio>
        </el-form-item>
      </div>
      <!-- </div> -->
      <el-form-item label="课程内容" prop="courseConent">
        <Editor v-model="form.courseConent" :min-height="192" :readOnly="checkLock"/>
        <el-input
          v-show="false"
          disabled
          v-model="form.courseConent"
        ></el-input>
      </el-form-item>

      <div class="flex">
        <el-form-item label="视频上传" v-if="!readOnly"  prop="video">
          <FileUpload
            listType="picture"
            @resFun="getFileInfoVideo"
            @remove="listRemoveVideo"
            :fileArr="fileListVideo"
            :fileSize="500"
            :fileType="['mp4']"
            :disabled="checkLock"
          />
          <el-input v-show="false" disabled v-model="form.video"></el-input>
        </el-form-item>
        <el-form-item label="附件上传" v-if="!readOnly" prop="enclosure">
          <FileUpload
            listType="picture"
            @resFun="getFileInfoFile"
            @remove="listRemoveFile"
            :fileArr="fileListFile"
            :fileType="fileType"
            :disabled="checkLock"
          />
          <el-input v-show="false" disabled v-model="form.enclosure"></el-input>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import Editor from "./Editor";
import FileUpload from "@/components/FileUpload";
import uploadfile from "@/assets/uploadfile.png";
import { mapGetters } from "vuex";
import {
  addLessons,
  getLessonById,
  changeLesson,
} from "@/api/educationPlanExam/lessonsProgram";

export default {
  name: "",
  props: {
    courseId: {
      type: Number,
    },
    checkLock:{
      type:Boolean,
    }
  },
  components: {
    Editor,
    FileUpload,
  },
  data() {
    return {
      form: {
        courseName: "",
        courseType: "",
        courseConent: "",
        video: "",
        enclosure: "",
        isVeriftyFace: "2"
      },
      fileType: ["doc", "docx", "xls", "xlsx", "ppt", "txt", "pdf"],
      fileListVideo: [],
      fileListFile: [],
      readOnly: false,
      rules: {
        courseName: [
          { required: true, trigger: "blur", message: "课程标题不能为空" },
        ],
        courseType: [
          { required: true, trigger: "change", message: "课程类型不能为空" },
        ],
        courseConent: [
          { required: true, trigger: "blur", message: "课程内容不能为空" },
        ],
        // video: [{ required: true, trigger: "blue", message: "视频不能为空" }],
        enclosure: [
          { required: true, trigger: "blur", message: "附件不能为空" },
        ],
        duration: [
          { required: true, trigger: "blur", message: "培训时长不能为空" },
        ],
        testStartTime: [
          { required: true, trigger: "blur", message: "开始时间不能为空" },
        ],
        testEndTime: [
          { required: true, trigger: "blur", message: "结束时间不能为空" },
        ],
      },
    };
  },
  computed: {
    // 获取课程类型
    ...mapGetters(["courseOptions"]),
  },
  created() {
    if (this.courseId) {
      this.getLessonById();
    }
  },
  mounted() {},
  methods: {
    // 添加课程
    addLessons(data) {
      console.log("this.courseId", this.courseId);
      if (!this.courseId) {
        console.log("添加");
        return addLessons(data);
      } else {
        console.log("修改");
        return changeLesson({ courseId: this.courseId, ...data });
      }
    },
    // 复现
    getLessonById() {
      getLessonById(this.courseId).then((res) => {
        if (res.code == 200) {
          res.data.duration=res.data.duration/60;
          const data = res.data;
          const {
            courseName,
            courseType,
            courseConent,
            video,
            enclosure,
            duration,
            testStartTime,
            testEndTime,
            isVeriftyFace,
          } = data;
          this.form = {
            courseName,
            courseType,
            courseConent,
            video,
            enclosure,
            duration,
            testStartTime,
            testEndTime,
            isVeriftyFace,
          };
          console.log('video',video)
          this.fileListVideo = video? [
            {
              name: courseName + "视频",
              url: uploadfile,
            },
          ]:[];
          this.fileListFile = [
            {
              name: courseName + "附件",
              url: uploadfile,
            },
          ];
          console.log("--", this.fileListFile);
        }
      });
    },
    getFileInfoVideo(res) {
      this.form.video = res.url;
      // this.form.videoName = res.fileName;
      this.fileListVideo = [
        {
          name: res.fileName,
          url: uploadfile,
        },
      ];
    },
    listRemoveVideo(e) {
      this.fileListVideo = [];
      this.form.video = "";
      // this.form.videoName = null;
    },
    getFileInfoFile(res) {
      this.form.enclosure = res.url;
      // this.form.enclosureName = res.fileName;
      this.fileListFile = [
        {
          name: res.fileName,
          url: uploadfile,
        },
      ];
    },
    listRemoveFile(e) {
      this.fileListFild = [];
      this.form.enclosure = "";
      // this.form.fileName = null;
    },
    save(num = 2) {
      // 因为富文本编辑器会残留<p><br></p>，所以要清空
      if (this.form.courseConent === "<p><br></p>") {
        this.form.courseConent = "";
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          // console.log(this.form);
          this.addLessons({ ...this.form }).then((res) => {
            // 如果添加会传回来，就用传回来的，如果是修改本身就有，就用本身的
            const courseId = res.data || this.courseId;
            if (res.code == 200) {
              // 这样调比较纯函数一点
              if (num == 2) {
                this.$message({
                  message: "保存课程成功",
                  type: "success",
                });
                // 隐藏dia
                this.$parent.$parent.dialogCancel()
              } else if (num == 3) {
                this.$message({
                  message: "保存课程成功,请开始录入题目",
                  type: "success",
                });
                // 跳转动态路由，并且把ID改变添加用
                this.$parent.$parent.componentsNumChange(num);
                this.$parent.$parent.changeCourseId(courseId);
              }

              this.$parent.$parent.$parent.getList();

              return true;
            }
          });
        }
      });
    },
    // 保存并进入题目
    saveAndNext() {
      this.save(3);
    },
  },
};
</script>
<style lang="scss" scoped>
.form-wrapper {
  padding-top: 22px;
  width: 100%;
  height: 680px;
  overflow: hidden;
  // padding-bottom: 10px;
  margin-bottom: 20px;

  border-bottom: 1px solid #bbbbbb;
  .top {
    width: 100%;
    justify-content: space-between;
  }
}
</style>