pbl-teacher-table/src/components/pages/testStudent/view/preview.vue

<template>
  <div class="pb_content" style="background: #F0F2F5;" v-loading="loading">
    <div class="pb_content_body" style="position: relative; margin: 0">
      <div class="right">
        <div class="courseTop">
          <div class="stepsNav">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{
                path:
                  '/testStudent?userid=' +
                  userid +
                  '&oid=' +
                  oid +
                  '&org=' +
                  org +
                  '&role=' +
                  role,
              }">评测中心</el-breadcrumb-item>
              <el-breadcrumb-item>
                <span style="color: rgb(15, 126, 255)">{{ title }}</span>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="r_pub_button_retrun" @click="retrunCourse">返回</div>
        </div>
        <div class="step_box">
          <div class="edit_top">
            <div class="op_btn">
              <el-button type="primary" size="small" @click="save">保存</el-button>
              <el-button type="primary" size="small" @click="publish">提交</el-button>
            </div>
          </div>
          <topicVue :cJson="cJson" :title="title"></topicVue>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topicVue from './component/topic.vue';
export default {
  components: {
    topicVue
  },
  data() {
    return {
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      org: this.$route.query.org,
      role: this.$route.query.role,
      cid: this.$route.query.cid,
      steps: 1,
      title: "",
      testType: [],
      see: false,
      cJson: [],
      loading: false,
      look: "",
    }
  },
  methods: {
    retrunCourse() {
      this
        .$confirm("是否确认返回？", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          distinguishCancelAndClose: true,
          type: "warning",
        })
        .then(() => {
          this.goTo(
            "/testStudent?userid=" +
            this.userid +
            "&oid=" +
            this.oid +
            "&org=" +
            this.org +
            "&role=" +
            this.role
          );
        })
        .catch((v) => {

        });
    },
    goTo(path) {
      this.$router.push(path);
    },

    getData() {
      this.loading = true
      let params = {
        cid: this.cid,
      };
      this.ajax
        .get(this.$store.state.api + "getTestCourseDetail", params)
        .then((res) => {
          this.cJson = JSON.parse(res.data[0][0].chapters);
          this.$forceUpdate();
          this.title = res.data[0][0].title;

          this.see = res.data[0][0].open == 1 ? true : false;


          this.testType = [];
          for (var i = 0; i < res.data[1].length; i++) {
            this.testType.push(res.data[1][i].typeid);
          }
          console.log(this.testType);
          this.look = res.data[0][0].look
          this.loading = false

        })
        .catch((err) => {
          console.error(err);
        });
    },
    save(){
      this.$message.success('保存成功')
      this.goTo(
            "/testStudent?userid=" +
            this.userid +
            "&oid=" +
            this.oid +
            "&org=" +
            this.org +
            "&role=" +
            this.role
          );
    },
    publish(){
      this.$message.success('提交成功')
      this.goTo(
            "/testStudent?userid=" +
            this.userid +
            "&oid=" +
            this.oid +
            "&org=" +
            this.org +
            "&role=" +
            this.role
          );
    },

  },
  mounted() {
    this.getData();
  },
}
</script>

<style scoped>
.pb_content {
  height: 100% !important;
  /* margin: 0 20px 0 20px; */
}

.pb_content_body {
  width: 100% !important;
  height: 100%;
}

.right {
  height: 100%;
  width: 100%;
  display: flex;
  overflow: hidden;
  flex-direction: column;
}

.basic_box {
  margin: 0 auto;
  position: relative;
  padding: 0 20px 0 20px;
}

.courseTop {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 40px);
  margin: 0 auto;
  padding: 10px 0;
}

.stepsNav {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.step_box {
  width: calc(100%);
  margin: 0 auto;
  height: calc(100% - 38px);
}

.edit_top {
  height: 50px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  padding: 0 30px;
  border-top: 2px solid #eee;
  border-bottom: 2px solid #eee;
}
</style>