Dia.vue

<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-09-22 10:38:49
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2023-02-01 17:34:25
 * @FilePath: /danger-manage-web/src/views/lessonsProgram/components/addLesson.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog
    class="add-lession"
    :title="title"
    :visible.sync="visible"
    width="1020px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="dialogCancel"
    @closed="closeFinished"
    destroy-on-close
  >
    <div v-if="visible" ref="myBody" class="body">
      <transition name="fade" mode="out-in">
        <component
          :is="currentComponent"
          :courseId.sync="courseId"
          :topicId.sync="topicId"
          :checkLock="checkLock"
          ref="current"
        ></component>
      </transition>
      <!-- <Lesson ref='lesson'/> -->
      <!-- <AddQuestion />
      <QuestionList/> -->
    </div>

    <!-- <div slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        v-if="this.componentsNum == 2"
        @click="componentsNumChange(4)"
        >从题库选择</el-button
      >

      <el-button
        type="primary"
        v-if="this.componentsNum == 1 || this.componentsNum == 3"
        @click="save"
        >保存</el-button
      >
      <el-button
        type="primary"
        v-if="this.componentsNum == 4"
        @click="componentsNumChange(2)"
        >返回题目列表</el-button
      >
      <el-button type="primary" @click="saveAndNext">{{
        saveNextText
      }}</el-button>
      <el-button
        v-if="this.componentsNum == 2"
        type="primary"
        @click="dialogCancel"
        >{{ "确认" }}</el-button
      >
      <el-button @click="dialogCancel">取消</el-button>
    </div> -->
    <div slot="footer" class="dialog-footer" v-if="!checkLock">
      <el-button
        type="primary"
        v-if="this.componentsNum == 2 && !checkLock"
        @click="componentsNumChange(4)"
        >从题库选择</el-button
      >
      <el-button
        type="primary"
        v-if="this.componentsNum == 4 || this.componentsNum == 3"
        @click="componentsNumChange(2)"
        >返回题目列表</el-button
      >
      <el-button
        type="primary"
        v-if="
          this.componentsNum == 1 ||
          this.componentsNum == 3 ||
          this.componentsNum == 4
        "
        @click="save"
        >保存</el-button
      >

      <el-button type="primary" @click="saveAndNext" v-if="!checkLock">{{
        saveNextText
      }}</el-button>
      <el-button
        v-if="this.componentsNum == 2"
        type="primary"
        @click="dialogCancel"
        >{{ "确认" }}</el-button
      >
      <el-button @click="dialogCancel">取消</el-button>
    </div>
    <div slot="footer" class="dialog-footer" v-else>
      <el-button
        type="primary"
        v-if="this.componentsNum == 3 && checkLock"
        @click="componentsNumChange(2)"
        >返回题目列表</el-button
      >
      <el-button type="primary" @click="dialogCancel">{{ "确认" }}</el-button>
      <el-button @click="dialogCancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Lesson from "./Lesson";
import AddQuestion from "./AddQuestion";
import QuestionList from "./QuestionList";
import ChangeQuestion from "./ChangeQuestion";

export default {
  name: "AnswerLesson",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    componentsNum: {
      type: Number,
      default: 1,
    },
    courseId: {
      type: Number,
    },
    checkLock: {
      type: Boolean,
    },
  },
  // components: {
  //   Lesson,
  //   AddQuestion,
  //   QuestionList,
  // },

  data() {
    return {
      title: "录入课程",
      currentComponent: Lesson,
      // 当前题目查看
      topicId: null,
    };
  },
  watch: {
    componentsNum: {
      handler(num) {
        if (num === 1) {
          this.currentComponent = Lesson;
          if (this.courseId) {
            this.title = "修改课程";
          } else {
            this.title = "新增课程";
          }
        } else if (num === 2) {
          this.currentComponent = QuestionList;

          this.title = "题目列表";
        } else if (num === 3) {
          this.currentComponent = AddQuestion;
          if (this.topicId) {
            this.title = "修改题目";
          } else {
            this.title = "新增题目";
          }
        } else if (num == 4) {
          this.currentComponent = ChangeQuestion;
          this.title = "从题库选题";
        }
      },
      deep: true,
    },
  },
  computed: {
    saveNextText() {
      let text;
      if (this.componentsNum == 1) {
        text = "保存并录入题目";
      } else if (this.componentsNum == 2) {
        text = "录入考题";
      } else  {
        text = "保存并录入下一题";
      } 
      return text;
    },
  },
  methods: {
    saveBody() {
      this.startHeight = this.$refs.myBody.offsetHeight - 55 + "px";
    },

    closeFinished() {},
    // 关闭之后
    // 只保存
    save() {
      // this.answerClear();
      this.$refs.current.save();
    },
    // 保存并录入
    saveAndNext() {
      this.$refs.current.saveAndNext();
    },
    // 隐藏与显示dialog
    dialogCancel() {
      // 录入考题的时候不会有修改的缓存
      if (this.topicId) {
        this.topicId = null;
      }
      this.$emit("update:visible", false);
      this.$emit("update:checkLock", false);
    },
    // 把ID改变了
    changeCourseId(courseId) {
      this.$emit("update:courseId", courseId);
    },
    // 改变当前组件
    componentsNumChange(num) {
      this.$emit("update:componentsNum", num);
    },

    answerClear() {
      this.answerArr = [];
      this.changeCourseId(null);
    },
  },
};
</script>
<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100%;
  padding-right: 40px;
  padding-left: 36px;
}
</style>