union-question-web/src/modules/paper/components/ModifyAutoBuildPaperStruct.vue

<template>
  <div>
    <el-dialog
      :visible.sync="modalIsShow"
      title="编辑试卷结构"
      :modal="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      fullscreen
      :show-close="false"
    >
      <div slot="title" class="box-justify">
        <div>
          <h2>编辑试卷结构</h2>
          <span>{{ instance.structName }}</span>
        </div>
        <div>
          <el-button
            size="small"
            type="primary"
            :loading="loading"
            @click="confirm"
            >确定</el-button
          >
          <el-button size="small" @click="cancel">取消</el-button>
        </div>
      </div>

      <div class="build-paper part-box">
        <BuildPaperAuto
          v-if="modalIsShow"
          ref="BuildPaperAuto"
          :course-id="instance.courseId"
          :detail-source="instance.structInfo"
        />
      </div>

      <div slot="footer"></div>
    </el-dialog>
  </div>
</template>

<script>
import { autoBuildPaperStructSaveApi } from "../api";
import BuildPaperAuto from "./BuildPaperAuto.vue";

export default {
  name: "ModifyAutoBuildPaperStruct",
  components: { BuildPaperAuto },
  props: {
    instance: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      loading: false,
    };
  },
  methods: {
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async confirm() {
      const valid = await this.$refs.BuildPaperAuto.validate().catch(() => {});
      if (!valid) return;

      if (this.loading) return;
      this.loading = true;
      let questionInfo = this.$refs.BuildPaperAuto.getData();

      let datas = { ...this.instance };
      datas.structInfo = JSON.stringify(questionInfo.detailInfo);
      const res = await autoBuildPaperStructSaveApi(datas).catch(() => {});
      this.loading = false;

      if (!res) return;
      this.$message.success("修改成功");
      this.cancel();
      this.$emit("modified");
    },
  },
};
</script>