teachcloud-print-web/card/components/TopicElementEdit.vue

<template>
  <div class="topic-element">
    <div
      :class="classes"
      :id="data.id"
      :data-type="data.type"
      v-if="data.type === 'CARD_HEAD' || data.type === 'TOPIC_HEAD'"
    >
      <!-- card-head 和 topic-head不需要调整高度 -->
      <component :is="compName" :data="data"></component>
    </div>
    <element-resize
      v-model="elemData"
      :class="{ 'element-resize-act': curElement.id === data.id }"
      :active="['b']"
      :move="false"
      :min-height="data.minHeight"
      :fit-parent="['h']"
      @on-click="activeCurElement"
      @resize-over="resizeOver"
      @change="sizeChange"
      v-else
    >
      <div :class="classes" :id="data.id" :data-type="data.type">
        <component :is="compName" :data="data"></component>
      </div>
      <!-- topic-number -->
      <topic-number :data="data.topicNo"></topic-number>
    </element-resize>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { objAssign } from "../plugins/utils";

import EditCardHead from "../elements/card-head/CardHead";
import EditFillQuestion from "../elements/fill-question/ElemFillQuestion";
import EditFillLine from "../elements/fill-line/ElemFillLine";
import EditExplain from "../elements/explain/ElemExplainEdit";
import EditComposition from "../elements/composition/ElemCompositionEdit";
import EditTopicHead from "../elements/topic-head/TopicHead";
import ElementResize from "./common/ElementResize";
import TopicNumber from "./common/TopicNumber";

export default {
  name: "topic-design",
  components: {
    EditCardHead,
    EditTopicHead,
    EditFillQuestion,
    EditFillLine,
    EditExplain,
    EditComposition,
    ElementResize,
    TopicNumber
  },
  props: {
    data: {
      type: Object
    }
  },
  data() {
    return {
      elemData: {
        x: 0,
        y: 0,
        w: 0,
        h: 0,
        init: false
      }
    };
  },
  computed: {
    ...mapState("card", ["curElement"]),
    elementName() {
      return this.data.type.toLowerCase().replace("_", "-");
    },
    compName() {
      return `edit-${this.elementName}`;
    },
    classes() {
      return [
        "topic-design",
        "element-item",
        `element-item-${this.elementName}`,
        this.data["isLast"]
          ? `element-item-type-last`
          : "element-item-type-pre",
        {
          "element-item-error": this.data.isCovered
        }
      ];
    }
  },
  created() {
    this.init();
  },
  methods: {
    ...mapMutations("card", ["setCurElement"]),
    ...mapActions("card", ["modifyTopic", "rebuildPages"]),
    init() {
      this.elemData = objAssign(this.elemData, this.data);
    },
    activeCurElement() {
      this.setCurElement(this.data);
    },
    sizeChange() {
      const elementDom = document.getElementById(this.data.id);
      this.data.isCovered =
        elementDom.offsetHeight < elementDom.firstChild.offsetHeight;
    },
    resizeOver() {
      this.modifyTopic(Object.assign({}, this.curElement, this.elemData));
      // 注意：当前组件并没有实时更新元件的尺寸信息，只是在rebuildPages时统一更新。
      this.$nextTick(() => {
        this.rebuildPages();
      });
    }
  }
};
</script>