teachcloud-print-web/src/modules/card/components/CardBuildDialog.vue

<template>
  <el-dialog
    class="card-build-dialog opacity-dialog"
    :visible.sync="modalIsShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    append-to-body
    fullscreen
    @opened="initData"
  >
    <div slot="title"></div>
    <div slot="footer"></div>
    <div
      class="loading-tips"
      v-loading="loading"
      element-loading-text="生成题卡中"
    ></div>

    <div
      v-if="modalIsShow"
      id="card-build"
      class="card-build card-preview card-print"
    >
      <card-view
        v-if="pages.length"
        ref="CardView"
        class="preview-body"
        :pages="pages"
        :card-config="cardConfig"
      ></card-view>
      <!-- all topics -->
      <div v-else class="topic-list">
        <div :class="['page-box', `page-box-${cardConfig.pageSize}`]">
          <div class="page-main-inner">
            <div
              :class="['page-main', `page-main-${cardConfig.columnNumber}`]"
              :style="{ margin: `0 -${cardConfig.columnGap / 2}px` }"
            >
              <div
                class="page-column"
                :style="{ padding: `0 ${cardConfig.columnGap / 2}px` }"
              >
                <div class="page-column-main" id="topic-column">
                  <div class="page-column-body">
                    <!-- card-head-sample -->
                    <card-head-sample
                      :data="cardHeadSampleData"
                      id="simple-card-head"
                      v-if="topics.length && cardHeadSampleData"
                    ></card-head-sample>
                    <!-- topic element -->
                    <topic-element-preview
                      class="page-column-element"
                      v-for="element in topics"
                      :key="element.id"
                      :data="element"
                    ></topic-element-preview>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { saveCard, cardConfigInfos } from "../api";
import { tikuPaperDetail } from "../../exam/api";
import { getPaperJsonSimpleStructInfo } from "../autoBuild/paperStruct";
import { buildCardFromPaperSimpleStruct } from "../autoBuild/simplePaperCard";
// card components
import { getCardHeadModel } from "../../../../card/elementModel";
import TopicElementPreview from "../../../../card/components/TopicElementPreview";
import CardView from "../../../../card/components/CardView";
import CardHeadSample from "../../../../card/elements/card-head/CardHead";
// ceshi
// import paperData from "./paper.json";

export default {
  name: "CardBuild",
  components: { CardView, TopicElementPreview, CardHeadSample },
  props: {
    presetData: {
      type: Object,
      default() {
        return {
          paperId: "",
        };
      },
    },
  },
  data() {
    return {
      cardId: "",
      loading: false,
      modalIsShow: false,
      paperInfo: {},
    };
  },
  computed: {
    ...mapState("card", ["cardConfig", "topics", "pages"]),
    cardHeadSampleData() {
      if (!this.cardConfig["pageSize"]) return;
      const data = getCardHeadModel(this.cardConfig);
      data.isSimple = true;
      return data;
    },
  },
  methods: {
    ...mapMutations("card", ["setCardConfig", "setTopics", "initState"]),
    ...mapActions("card", ["resetTopicSeries", "rebuildPages"]),
    async initData() {
      this.loading = true;
      this.initState();

      // 题卡规则
      const cardConfig = await this.getCardConfig(
        this.presetData.cardRuleId
      ).catch(() => {});
      if (!cardConfig) {
        this.emitResult({ success: false, message: "题卡规则获取失败" });
        return;
      }
      this.setCardConfig(cardConfig);

      // 试卷信息
      const res = await tikuPaperDetail({
        examId: this.presetData.examId,
        paperId: this.presetData.paperId,
        uuid: this.presetData.uuid,
      }).catch(() => {});
      if (!res) {
        this.emitResult({ success: false, message: "试卷内容获取失败" });
        return;
      }
      // const res = paperData;
      // 构建题卡
      try {
        this.paperInfo = {
          uuid: this.presetData.uuid,
          attachmentId: res.attachmentId,
        };
        const paperJson = res.paperJson ? JSON.parse(res.paperJson) : {};
        const paperSimpleStruct = getPaperJsonSimpleStructInfo(paperJson);
        const elementTypePreSetInfo = {
          FILL_QUESTION: {
            pageSize: "A3",
            columnNumber: 2,
          },
        };
        const elements = buildCardFromPaperSimpleStruct(
          paperSimpleStruct,
          elementTypePreSetInfo
        );
        this.setTopics([getCardHeadModel(this.cardConfig), ...elements]);
        this.resetTopicSeries();
      } catch (error) {
        console.dir(error);
        this.emitResult({
          success: false,
          message: error.message || "数据构建错误",
        });
        return;
      }

      this.$nextTick(() => {
        this.rebuildPages();

        this.$nextTick(() => {
          this.buildData();
        });
      });
    },
    async getCardConfig(cardRuleId) {
      const data = await cardConfigInfos(cardRuleId);
      if (!data) {
        this.$message.error("找不到题卡规则！");
        return Promise.reject();
      }
      let config = {
        ...data,
        ...{
          pageSize: "A3",
          columnNumber: 2,
          columnGap: 20,
          showForbidArea: false,
          makeMethod: "SELF",
        },
      };
      config.fillNumber = data.examNumberDigit;
      config.aOrB = false;
      config.requiredFields = JSON.parse(config.requiredFields);
      config.extendFields = JSON.parse(config.extendFields);
      config.cardTitle = this.getCardTitle(config.titleRule);
      return config;
    },
    getCardTitle(titleRule) {
      const fieldMap = {
        courseCode: this.presetData.courseCode,
        courseName: this.presetData.courseName,
        schoolName: this.presetData.schoolName,
      };
      Object.entries(fieldMap).forEach(([key, val]) => {
        titleRule = titleRule.replace("${" + key + "}", val);
      });
      return titleRule;
    },
    async buildData() {
      const model = this.$refs.CardView.getPageModel({
        cardConfig: this.cardConfig,
        pages: this.pages,
      });
      const htmlContent = this.$refs.CardView.getPreviewTemp(
        document.getElementById("card-build").outerHTML
      );

      const datas = {
        content: model,
        htmlContent,
        title: this.presetData.paperName,
        status: "SUBMIT",
        ...this.presetData,
      };
      const result = await saveCard(datas).catch((error) => {
        this.emitResult({
          success: false,
          message: error.message || "保存题卡错误",
        });
      });
      if (!result) return;
      this.emitResult({
        success: true,
        data: { ...result, ...this.paperInfo },
      });
    },
    emitResult(data) {
      // console.log(data);
      this.loading = false;
      this.$emit("confirm", data);
      this.cancel();
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
  },
};
</script>