RightClickMenu.vue 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
  1. <template>
  2. <div class="right-click-menu">
  3. <div
  4. ref="RightMenuBody"
  5. class="right-menu-body"
  6. :style="styles"
  7. v-clickoutside="close"
  8. v-if="visible"
  9. >
  10. <ul>
  11. <li @click="toEdit">
  12. <i class="el-icon-edit-outline"></i>
  13. {{ IS_CONTAINER_ELEMENT ? "编辑元素" : "编辑大题" }}
  14. </li>
  15. <li class="li-danger" @click="toDelete">
  16. <i class="el-icon-delete"></i>
  17. {{ IS_CONTAINER_ELEMENT ? "删除元素" : "删除大题" }}
  18. </li>
  19. <li
  20. v-if="IS_CONTAINER_ELEMENT && (IS_EXPLAIN || IS_COMPOSITION)"
  21. @click="toCopyExplainElement"
  22. >
  23. <i class="el-icon-copy-document"></i> 复制元素
  24. </li>
  25. <li
  26. v-if="(IS_EXPLAIN || IS_COMPOSITION) && curCopyElement"
  27. @click="toPasteExplainElement"
  28. >
  29. <i class="el-icon-document-copy"></i> 粘贴元素
  30. </li>
  31. <template v-if="IS_EXPLAIN || IS_COMPOSITION">
  32. <li @click="toCopyChildren">
  33. <i class="el-icon-circle-plus-outline"></i> 新增答题区
  34. </li>
  35. <li
  36. class="li-danger"
  37. @click="toDeleteChildren"
  38. v-if="showDeleteChildBtn"
  39. >
  40. <i class="el-icon-delete"></i> 删除答题区
  41. </li>
  42. </template>
  43. <li v-if="CAN_MOVE_UP" @click="toMoveUpTopic">
  44. <i class="el-icon-upload2"></i> 上移大题
  45. </li>
  46. <li v-if="CAN_MOVE_DOWN" @click="toMoveDownTopic">
  47. <i class="el-icon-download"></i> 下移大题
  48. </li>
  49. <li v-if="!IS_CONTAINER_ELEMENT" @click="toInsetTopic">
  50. <i class="el-icon-add-location"></i> 插入大题
  51. </li>
  52. </ul>
  53. </div>
  54. </div>
  55. </template>
  56. <script>
  57. import { mapState, mapMutations, mapActions } from "vuex";
  58. import { deepCopy } from "../plugins/utils";
  59. import { fetchSameSerialNumberChildrenPositionInfo } from "../store/card";
  60. import Clickoutside from "element-ui/src/utils/clickoutside";
  61. export default {
  62. name: "right-click-menu",
  63. directives: { Clickoutside },
  64. data() {
  65. return {
  66. visible: false,
  67. showDeleteChildBtn: false,
  68. curCopyElement: null,
  69. styles: {
  70. position: "fixed",
  71. zIndex: 3000,
  72. },
  73. };
  74. },
  75. computed: {
  76. ...mapState("card", ["curElement", "topics", "topicSeries"]),
  77. IS_CONTAINER_ELEMENT() {
  78. return !!this.curElement.container;
  79. },
  80. IS_EXPLAIN() {
  81. return (
  82. this.curElement.type === "EXPLAIN" ||
  83. (this.curElement.container &&
  84. this.curElement.container.type === "EXPLAIN")
  85. );
  86. },
  87. IS_COMPOSITION() {
  88. return (
  89. this.curElement.type === "COMPOSITION" ||
  90. (this.curElement.container &&
  91. this.curElement.container.type === "COMPOSITION")
  92. );
  93. },
  94. CAN_MOVE_UP() {
  95. if (this.IS_CONTAINER_ELEMENT) return false;
  96. const curTopicPos = this.topicSeries.findIndex(
  97. (item) => item.id === this.curElement.parent.id
  98. );
  99. return (
  100. curTopicPos &&
  101. this.topicSeries[curTopicPos - 1].sign ===
  102. this.topicSeries[curTopicPos].sign
  103. );
  104. },
  105. CAN_MOVE_DOWN() {
  106. if (this.IS_CONTAINER_ELEMENT) return false;
  107. const curTopicPos = this.topicSeries.findIndex(
  108. (item) => item.id === this.curElement.parent.id
  109. );
  110. return (
  111. curTopicPos !== this.topicSeries.length - 1 &&
  112. this.topicSeries[curTopicPos + 1].sign ===
  113. this.topicSeries[curTopicPos].sign
  114. );
  115. },
  116. },
  117. mounted() {
  118. this.init();
  119. },
  120. methods: {
  121. ...mapMutations("card", ["setOpenElementEditDialog"]),
  122. ...mapActions("card", [
  123. "actElementById",
  124. "removeElement",
  125. "removeElementChild",
  126. "pasteExplainElementChild",
  127. "rebuildPages",
  128. "copyExplainChildren",
  129. "deleteExplainChildren",
  130. "topicMoveUp",
  131. ]),
  132. init() {
  133. // 注册自定义右键事件菜单
  134. document.oncontextmenu = function () {
  135. return false;
  136. };
  137. document.addEventListener("mouseup", this.docMouseUp);
  138. },
  139. close() {
  140. this.visible = false;
  141. },
  142. show() {
  143. this.visible = true;
  144. },
  145. docMouseUp(e) {
  146. if (e.button === 2) {
  147. this.rightClick(e);
  148. }
  149. },
  150. rightClick(e) {
  151. const id = this.getRelateElementId(e.target);
  152. if (!id) return;
  153. this.actElementById(id);
  154. let curElement = this.curElement;
  155. const TYPES = ["EXPLAIN", "COMPOSITION"];
  156. if (
  157. TYPES.includes(curElement.type) ||
  158. (curElement.container && TYPES.includes(curElement.container.type))
  159. ) {
  160. if (curElement.container) {
  161. const pos = this.topics.findIndex(
  162. (item) => item.id === curElement.container.id
  163. );
  164. curElement = this.topics[pos];
  165. }
  166. const positionInfos = fetchSameSerialNumberChildrenPositionInfo(
  167. curElement,
  168. this.topics
  169. );
  170. this.showDeleteChildBtn = positionInfos.length >= 2;
  171. }
  172. this.show();
  173. this.$nextTick(() => {
  174. const { x: clickLeft, y: clickTop } = e;
  175. const { offsetWidth: menuWidth, offsetHeight: menuHeight } =
  176. this.$refs.RightMenuBody;
  177. const { innerWidth: wWidth, innerHeight: wHeight } = window;
  178. let menuLeft = clickLeft,
  179. menuTop = clickTop;
  180. if (menuWidth + clickLeft > wWidth) {
  181. menuLeft = clickLeft - menuWidth;
  182. }
  183. if (menuHeight + clickTop > wHeight) {
  184. menuTop = clickTop - menuHeight;
  185. }
  186. this.styles = Object.assign({}, this.styles, {
  187. top: menuTop + "px",
  188. left: menuLeft + "px",
  189. });
  190. });
  191. },
  192. getRelateElementId(dom) {
  193. let parentNode = dom;
  194. while (
  195. !(
  196. (parentNode["id"] && parentNode["id"].includes("element-")) ||
  197. parentNode.className.includes("page-column-body")
  198. )
  199. ) {
  200. parentNode = parentNode.parentNode;
  201. }
  202. const elementType = parentNode.getAttribute("data-type");
  203. const unValidElement = ["TOPIC_HEAD", "CARD_HEAD"];
  204. return parentNode["id"] &&
  205. elementType &&
  206. !unValidElement.includes(elementType)
  207. ? parentNode["id"]
  208. : null;
  209. },
  210. toEdit() {
  211. this.curElement._edit = true;
  212. this.close();
  213. this.setOpenElementEditDialog(true);
  214. },
  215. toDelete() {
  216. this.close();
  217. this.$confirm("确定要删除当前元素吗?", "提示", {
  218. type: "warning",
  219. })
  220. .then(() => {
  221. this.removeSelectElement();
  222. })
  223. .catch(() => {});
  224. },
  225. toCopyChildren() {
  226. this.close();
  227. this.copyExplainChildren(this.curElement);
  228. this.toRebuildPages();
  229. },
  230. toDeleteChildren() {
  231. this.close();
  232. this.deleteExplainChildren(this.curElement);
  233. this.toRebuildPages();
  234. },
  235. removeSelectElement() {
  236. if (this.curElement["container"]) {
  237. this.removeElementChild(this.curElement);
  238. } else {
  239. this.removeElement(this.curElement);
  240. }
  241. this.toRebuildPages();
  242. },
  243. toCopyExplainElement() {
  244. this.close();
  245. this.curCopyElement = deepCopy(this.curElement);
  246. },
  247. toPasteExplainElement() {
  248. this.close();
  249. const id = this.curElement.container
  250. ? this.curElement.container.id
  251. : this.curElement.id;
  252. const pasteElement =
  253. this.curCopyElement.container.id === id
  254. ? Object.assign({}, this.curCopyElement, {
  255. y: this.curCopyElement.y + 20,
  256. })
  257. : this.curCopyElement;
  258. this.pasteExplainElementChild({
  259. curElement: this.curElement,
  260. pasteElement,
  261. });
  262. this.toRebuildPages();
  263. },
  264. toMoveUpTopic() {
  265. this.close();
  266. this.topicMoveUp(this.curElement.parent.id);
  267. this.toRebuildPages();
  268. },
  269. toMoveDownTopic() {
  270. this.close();
  271. const curTopicPos = this.topicSeries.findIndex(
  272. (item) => item.id === this.curElement.parent.id
  273. );
  274. this.topicMoveUp(this.topicSeries[curTopicPos + 1].id);
  275. this.toRebuildPages();
  276. },
  277. toInsetTopic() {
  278. this.close();
  279. this.$emit("inset-topic", {
  280. id: this.curElement.parent.id,
  281. type: this.curElement.type,
  282. });
  283. },
  284. toRebuildPages() {
  285. this.$nextTick(() => {
  286. this.rebuildPages();
  287. });
  288. },
  289. },
  290. beforeDestroy() {
  291. document.oncontextmenu = null;
  292. document.removeEventListener("mouseup", this.docMouseUp);
  293. },
  294. };
  295. </script>