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

<template>
  <div class="right-click-menu">
    <el-popover
      placement="right-start"
      trigger="click"
      v-model="visible"
      popper-class="right-click-popper"
      :visible-arrow="false"
    >
      <div class="right-menu-body">
        <ul>
          <li @click="toEdit">编辑</li>
          <li @click="toDelete">删除</li>
          <li @click="toCopyChildren" v-if="IS_EXPLAIN_CHILDREN">
            新增<br />答题区
          </li>
          <li
            @click="toDeleteChildren"
            v-if="IS_EXPLAIN_CHILDREN && showDeleteChildBtn"
          >
            删除<br />答题区
          </li>
        </ul>
      </div>
      <el-button :style="styles" slot="reference"></el-button>
    </el-popover>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { fetchSameExplainNumberExplainChildernPositionInfo } from "../store";

export default {
  name: "right-click-menu",
  data() {
    return {
      visible: false,
      showDeleteChildBtn: false,
      IS_EXPLAIN_CHILDREN: false,
      styles: {
        padding: "10px",
        position: "fixed",
        visibility: "hidden",
        zIndex: 3000
      }
    };
  },
  computed: {
    ...mapState("card", ["curElement", "pages"])
  },
  mounted() {
    this.init();
  },
  methods: {
    ...mapMutations("card", ["setOpenElementEditDialog"]),
    ...mapActions("card", [
      "actElementById",
      "removeElement",
      "removeElementChild",
      "rebuildPages",
      "copyExplainChildren",
      "deleteExplainChildren"
    ]),
    init() {
      // 注册自定义右键事件菜单
      document.oncontextmenu = function() {
        return false;
      };
      document.addEventListener("mouseup", e => {
        if (e.button === 2) {
          this.visible = false;
          this.rightClick(e);
        }
      });
    },
    rightClick(e) {
      const id = this.getRelateElementId(e.target);
      if (!id) return;

      this.actElementById(id);
      this.styles = Object.assign({}, this.styles, {
        top: e.y + "px",
        left: e.x - 50 + "px"
      });
      const positionInfos = fetchSameExplainNumberExplainChildernPositionInfo(
        this.curElement,
        this.pages
      );
      this.showDeleteChildBtn = positionInfos.length >= 2;
      this.IS_EXPLAIN_CHILDREN = this.curElement.type === "EXPLAIN_CHILDREN";
      // 直接用了setTimeout，解决弹出框跟随延迟的问题，似乎粗暴了点。
      setTimeout(() => {
        this.visible = true;
      }, 100);
      // this.$nextTick(() => {
      // });
    },
    getRelateElementId(dom) {
      let parentNode = dom;
      while (
        !(
          (parentNode["id"] && parentNode["id"].includes("element-")) ||
          parentNode.className.includes("page-column-body")
        )
      ) {
        parentNode = parentNode.parentNode;
      }
      const elementType = parentNode.getAttribute("data-type");
      const unValidElement = ["TOPIC_HEAD", "CARD_HEAD"];

      return parentNode["id"] &&
        elementType &&
        !unValidElement.includes(elementType)
        ? parentNode["id"]
        : null;
    },
    toEdit() {
      this.visible = false;
      this.setOpenElementEditDialog(true);
    },
    toDelete() {
      this.visible = false;
      this.$confirm("确定要删除当前元素吗?", "提示", {
        cancelButtonClass: "el-button--danger is-plain",
        confirmButtonClass: "el-button--primary",
        type: "warning"
      })
        .then(() => {
          this.removeSelectElement();
        })
        .catch(() => {});
    },
    toCopyChildren() {
      this.visible = false;
      this.copyExplainChildren(this.curElement);
      this.$nextTick(() => {
        this.rebuildPages();
      });
    },
    toDeleteChildren() {
      // TODO:校验当前元件是否可以删除
      this.visible = false;
      this.deleteExplainChildren(this.curElement);
      this.$nextTick(() => {
        this.rebuildPages();
      });
    },
    removeSelectElement() {
      if (this.curElement["container"]) {
        this.removeElementChild(this.curElement);
      } else {
        this.removeElement(this.curElement);
      }

      // 作文题是个坑爹的设计，删除子元件之后会影响主体题卡布局，解答题小题不会
      if (
        !this.curElement["container"] ||
        this.curElement["container"].type === "COMPOSITION"
      )
        this.$nextTick(() => {
          this.rebuildPages();
        });
    }
  }
};
</script>