teachcloud-print-web/card/modules/free/views/CardFreeDesign.vue

<template>
  <div class="card-design card-free-design">
    <div class="design-header">
      <div class="design-header-cont box-justify">
        <div></div>
        <el-button
          class="btn-help"
          icon="el-icon-question"
          type="text"
          @click="showHelp"
        ></el-button>
      </div>
    </div>

    <!-- actions -->
    <div class="design-action">
      <div class="design-logo">
        <h1>
          <i class="el-icon-d-arrow-left" @click="toExit" title="退出"></i>
          答题卡制作
        </h1>
      </div>

      <div class="action-part">
        <div class="action-part-title"><h2>基本设置</h2></div>
        <div class="action-part-body">
          <page-prop-edit></page-prop-edit>
        </div>
      </div>
      <div class="action-part">
        <div class="action-part-title"><h2>当前页面设置</h2></div>
        <div class="action-part-body">
          <edit-page></edit-page>
        </div>
      </div>
      <div class="action-part">
        <div class="action-part-title"><h2>复杂元素</h2></div>
        <div class="action-part-body">
          <div class="type-list">
            <div
              class="type-item"
              v-for="(item, index) in TOPIC_LIST"
              :key="index"
              draggable="true"
              @dragstart="dragstart(item)"
            >
              <el-button><i class="el-icon-plus"></i>{{ item.name }}</el-button>
            </div>
          </div>
          <p class="tips-info">提示：拖动插入元素</p>
        </div>
      </div>
      <div class="action-part">
        <div class="action-part-title"><h2>简单元素</h2></div>
        <div class="action-part-body">
          <div class="type-list">
            <div
              class="type-item"
              v-for="(item, index) in ELEMENT_LIST"
              :key="index"
              draggable="true"
              @dragstart="dragstart(item)"
            >
              <el-button><i class="el-icon-plus"></i>{{ item.name }}</el-button>
            </div>
            <p class="tips-info">提示：拖动插入元素</p>
          </div>
        </div>
      </div>
      <div class="action-part">
        <div class="action-part-title"><h2>元素面板</h2></div>
        <div class="action-part-body">
          <!-- element-tier-edit -->
          <element-tier-edit ref="ElementTierEdit"></element-tier-edit>
        </div>
      </div>
    </div>

    <div class="design-main">
      <!-- menus -->
      <div class="design-control">
        <div class="control-left tab-btns">
          <el-button
            v-for="(page, pageNo) in pages"
            :key="pageNo"
            :type="curPageNo === pageNo ? 'primary' : 'default'"
            @click="swithPage(pageNo)"
          >
            <span>第{{ pageNo + 1 }}页</span>
            <span class="page-delete" @click.stop="toDeletePage(page)"
              ><i class="el-icon-error"></i
            ></span>
          </el-button>
          <el-button icon="el-icon-plus" @click="toAddPage"></el-button>
        </div>
        <div class="control-right">
          <el-button
            type="success"
            :loading="isSubmit"
            :disabled="!pages.length"
            @click="toPreview"
            >预览</el-button
          >
          <el-button
            type="primary"
            :loading="isSubmit"
            :disabled="canSave || !pages.length"
            @click="toSave"
            >暂存</el-button
          >
          <el-button type="primary" :loading="isSubmit" @click="toSubmit"
            >提交</el-button
          >
        </div>
      </div>

      <!-- edit body -->
      <div class="design-body">
        <div
          :class="[
            'page-box',
            `page-box-${curPage.pageSize}`,
            `page-box-${curPageNo % 2}`
          ]"
          v-if="curPage.id"
        >
          <div
            :class="[
              'page-locators',
              `page-locators-${curPage.locators.length}`
            ]"
          >
            <ul
              class="page-locator-group"
              v-for="(locator, iind) in curPage.locators"
              :key="iind"
            >
              <li
                v-for="(elem, eindex) in locator"
                :key="eindex"
                :id="elem.id"
              ></li>
            </ul>
          </div>
          <!-- inner edit area -->
          <div class="page-main-inner">
            <div
              :class="['page-main', `page-main-${curPage.columns.length}`]"
              :style="{ margin: `0 -${curPage.columnGap / 2}px` }"
            >
              <div
                class="page-column"
                v-for="(column, columnNo) in curPage.columns"
                :key="columnNo"
                :style="{ padding: `0 ${curPage.columnGap / 2}px` }"
              >
                <topic-column-edit
                  class="page-column-main"
                  :data="column"
                ></topic-column-edit>
              </div>
            </div>
          </div>
          <!-- outer edit area -->
          <div class="page-main-outer">
            <page-number
              type="rect"
              :total="pages.length"
              :current="curPageNo + 1"
            ></page-number>
            <page-number
              type="text"
              :total="pages.length"
              :current="curPageNo + 1"
            ></page-number>
          </div>
        </div>
      </div>
    </div>

    <!-- element-prop-edit -->
    <element-prop-edit ref="ElementPropEdit"></element-prop-edit>
    <!-- right-click-menu -->
    <right-click-menu></right-click-menu>
    <!-- shortcut-key -->
    <shortcut-key
      @sk-save="skSave"
      @sk-submit="skSubmit"
      @sk-preview="skPreview"
    ></shortcut-key>
    <!-- help-dialog -->
    <help-dialog ref="HelpDialog"></help-dialog>
    <!-- card-view-frame -->
    <div class="design-preview-frame" v-if="cardPreviewUrl">
      <iframe :src="cardPreviewUrl" frameborder="0"></iframe>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { cardConfigInfos, cardDetail, saveCard } from "../../../api";
import { getElementModel, ELEMENT_LIST, TOPIC_LIST } from "../elements/model";
import { getModel as getPageModel } from "../../../elements/page/model";
import { CARD_VERSION } from "../../../enumerate";

import TopicColumnEdit from "../components/TopicColumnEdit";
import ElementPropEdit from "../components/ElementPropEdit";
import ElementTierEdit from "../components/ElementTierEdit";
import PagePropEdit from "../components/PagePropEdit";
import RightClickMenu from "../components/RightClickMenu";
import ShortcutKey from "../components/ShortcutKey";
import HelpDialog from "../components/HelpDialog";
import EditPage from "../../../elements/page/EditPage";

import PageNumber from "../../../components/PageNumber";

export default {
  name: "card-free-design",
  components: {
    TopicColumnEdit,
    PagePropEdit,
    EditPage,
    ElementPropEdit,
    ElementTierEdit,
    RightClickMenu,
    ShortcutKey,
    HelpDialog,
    PageNumber
  },
  data() {
    return {
      cardId: this.$route.params.cardId || this.$ls.get("cardId"),
      prepareTcPCard: this.$ls.get("prepareTcPCard", {
        examTaskId: "",
        courseCode: "",
        courseName: "",
        makeMethod: "SELF",
        cardRuleId: ""
      }),
      ELEMENT_LIST,
      TOPIC_LIST,
      topicList: [],
      columnWidth: 0,
      cardPreviewUrl: "",
      isSubmit: false,
      canSave: false
    };
  },
  computed: {
    ...mapState("free", [
      "cardConfig",
      "pages",
      "curElement",
      "curPage",
      "curPageNo",
      "curDragElement",
      "curColumnId"
    ]),
    isEdit() {
      return !!this.cardId;
    }
  },
  mounted() {
    // if (!this.prepareTcPCard.examTaskId && !this.isEdit) {
    //   this.$message.error("找不到命题任务，请退出题卡制作！");
    //   return;
    // }
    this.initCard();
    this.registWindowSubmit();
  },
  methods: {
    ...mapMutations("free", [
      "setCurPageNo",
      "setCurElement",
      "setCardConfig",
      "setOpenElementEditDialog",
      "setCurDragElement",
      "setPages",
      "initState"
    ]),
    ...mapActions("free", [
      "addPage",
      "removePage",
      "addElement",
      "modifyElement"
    ]),
    async initCard() {
      if (this.isEdit) {
        await this.getCardTempDetail();
      } else {
        await this.getCardConfig();
        this.initPageData();
      }
    },
    getCardTitle(titleRule) {
      const fieldMap = {
        courseCode: this.prepareTcPCard.courseCode,
        courseName: this.prepareTcPCard.courseName,
        schoolName: this.prepareTcPCard.schoolName
      };
      Object.entries(fieldMap).forEach(([key, val]) => {
        titleRule = titleRule.replace("${" + key + "}", val);
      });
      return titleRule;
    },
    async getCardTempDetail() {
      const detData = await cardDetail(this.cardId);
      // this.canSave = !detData.operateStatus;

      // 可能存在题卡内容没有记录的情况
      if (detData.content) {
        const cont = JSON.parse(detData.content);
        this.setPages(cont.pages);
        this.setCardConfig(cont.cardConfig);
        this.setCurPageNo(0);
      } else {
        await this.getCardConfig();
        // 没有题卡内容时，直接创建新的内容
        if (detData.makeMethod === "CUST") {
          this.setCardConfig({ cardTitle: detData.title });
        }

        this.initPageData();
      }
    },
    initPageData() {
      const page = getPageModel(this.cardConfig);
      this.addPage(page);
      this.setCurPageNo(0);
    },
    toAddPage() {
      const page = getPageModel(this.cardConfig);
      this.addPage(page);
    },
    async getCardConfig() {
      const data = await cardConfigInfos(this.prepareTcPCard.cardRuleId);
      if (!data) {
        this.$message.error("找不到题卡规则！");
        return;
      }
      let config = {
        ...data,
        ...{
          pageSize: "A3",
          columnNumber: 2,
          columnGap: 20,
          showForbidArea: true,
          cardDesc: "",
          makeMethod: this.prepareTcPCard.makeMethod
        }
      };
      config.aOrB = true; // 默认开启A/B卷型
      config.requiredFields = JSON.parse(config.requiredFields);
      config.extendFields = JSON.parse(config.extendFields);
      config.cardTitle = this.getCardTitle(config.titleRule);
      this.setCardConfig(config);
    },
    addNewTopic(item) {
      let element = getElementModel(item.type);

      this.setCurElement(element);
      this.$refs.ElementPropEdit.open();
      // to elementPropEdit/ElementPropEdit open topic edit dialog
    },
    // 元件编辑
    dragstart(element) {
      this.setCurDragElement(getElementModel(element.type));
    },
    // 操作
    skSave() {
      this.toSave();
    },
    skSubmit() {
      this.toSubmit();
    },
    skPreview() {
      this.toPreview();
    },
    async toPreview() {
      if (this.isSubmit) return;
      this.isSubmit = true;
      const result = await this.save().catch(() => {});
      this.isSubmit = false;
      if (!result) return;
      const { href } = this.$router.resolve({
        name: "CardFreePreview",
        params: {
          cardId: this.cardId,
          viewType: "view"
        }
      });
      window.open(href);
    },
    swithPage(pindex) {
      if (this.curPageNo === pindex) return;
      this.setCurPageNo(pindex);
      this.setCurElement({});
    },
    toDeletePage(page) {
      if (this.pages.length === 1) {
        this.$message.error("只剩最后一页，不能再删除了");
        return;
      }
      this.removePage(page);
    },
    // save
    getCardData(htmlContent = "", model = "") {
      let data = {
        title: this.cardConfig.cardTitle,
        content: model,
        htmlContent,
        type: "CUSTOM",
        ...this.prepareTcPCard
      };
      if (this.cardId) data.id = this.cardId;
      return data;
    },
    getRequestConfig() {
      return this.prepareTcPCard.makeMethod === "CUST"
        ? {
            headers: {
              schoolId: this.prepareTcPCard.schoolId
            }
          }
        : {};
    },
    getCardJson() {
      // 防止页面未渲染完成，各试题高度未及时更新，保存数据有误的问题
      return new Promise(resolve => {
        setTimeout(() => {
          const data = JSON.stringify(
            {
              version: CARD_VERSION,
              cardConfig: this.cardConfig,
              paperParams: this.paperParams,
              pages: this.pages
            },
            (k, v) => (k.startsWith("_") ? undefined : v)
          );
          resolve(data);
        }, 100);
      });
    },
    async save() {
      const cardJson = await this.getCardJson();
      let datas = this.getCardData("", cardJson);
      datas.status = "STAGE";
      const result = await saveCard(datas, this.getRequestConfig());
      this.cardId = result;
      this.$ls.set("cardId", this.cardId);
      return true;
    },
    async toSave() {
      if (this.isSubmit) return;
      this.isSubmit = true;
      const result = await this.save().catch(() => {});
      this.isSubmit = false;
      if (result) this.$message.success("保存成功！");
    },
    toSubmit() {
      if (this.isSubmit) return;

      if (this.pages.length % 2) {
        this.$message.error("请确保题卡页数是偶数");
        return;
      }

      this.$confirm("确定要提交当前题卡吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          window.cardData = {
            cardConfig: this.cardConfig,
            pages: this.pages,
            paperParams: this.paperParams
          };
          this.isSubmit = true;
          const { href } = this.$router.resolve({
            name: "CardPreview",
            params: {
              cardId: 1,
              viewType: "frame"
            }
          });
          this.cardPreviewUrl = href;
        })
        .catch(() => {});
    },
    registWindowSubmit() {
      window.submitCardTemp = async (htmlContent, model) => {
        const datas = this.getCardData(htmlContent, model);
        datas.status = "SUBMIT";
        const result = await saveCard(
          datas,
          this.getRequestConfig()
        ).catch(() => {});
        this.cardPreviewUrl = "";
        this.isSubmit = false;
        window.cardData = null;
        if (result) {
          this.cardId = result;
          this.$ls.set("cardId", this.cardId);
          this.canSave = false;
          this.$message.success("提交成功！");
          this.goback();
        } else {
          this.$message.error("提交失败，请重新尝试！");
        }
      };
    },
    toExit() {
      this.$confirm(
        "请确保当前题卡已经正常保存，确定要退出当前题卡编辑吗?",
        "提示",
        {
          type: "warning"
        }
      )
        .then(() => {
          this.goback();
        })
        .catch(() => {});
    },
    showHelp() {
      this.$refs.HelpDialog.open();
    }
  },
  beforeDestroy() {
    this.$ls.remove("cardId");
    this.$ls.remove("prepareTcPCard");
    this.initState();
    delete window.submitCardTemp;
  }
};
</script>