侧边编辑完成

src/modules/paper-export/assets/styles/paper-temp-design.scss

@@ -5,7 +5,7 @@
     }
   }
 
-  .page-main-side {
+  .page-column-side {
     &::before {
       content: "";
       display: block;

src/modules/paper-export/assets/styles/paper-temp-preview.scss

@@ -10,7 +10,7 @@
         .page-main-inner {
           padding: 60px 160px 60px 40px;
         }
-        .page-main-side {
+        .page-column-side {
           right: 40px;
           left: auto;
         }
@@ -18,7 +18,7 @@
     }
 
     &-8K {
-      .page-main-side {
+      .page-column-side {
         top: 40px;
         bottom: 40px;
         width: 110px;
@@ -34,7 +34,7 @@
         .page-main-inner {
           padding: 40px 130px 40px 20px;
         }
-        .page-main-side {
+        .page-column-side {
           right: 20px;
           top: 40px;
           left: auto;
@@ -42,7 +42,7 @@
       }
     }
   }
-  .page-main-side {
+  .page-column-side {
     position: absolute;
     top: 60px;
     bottom: 60px;
@@ -50,7 +50,7 @@
     left: 40px;
     z-index: 10;
 
-    .paper-side-body {
+    .column-side-body {
       position: absolute;
       top: 0;
       bottom: 0;
@@ -63,13 +63,16 @@
       position: absolute;
     }
 
+    .elem-text {
+      writing-mode: vertical-rl;
+      transform: rotate(180deg);
+      text-orientation: sideways;
+      height: 100%;
+    }
+
     // .element-item-gutter {
     //   height: 100% !important;
     // }
-    // .element-item-fill-field {
-    //   transform: rotate(-90deg);
-    //   transform-origin: 0 0;
-    // }
   }
 
   .page-column-element .element-item::before {

src/modules/paper-export/components/ElementPropEdit.vue

@@ -76,6 +76,7 @@ export default {
     ...mapMutations("paper-export", ["setOpenElementEditDialog"]),
     ...mapActions("paper-export", [
       "modifyElement",
+      "modifySideElement",
       "modifyElementChild",
       "rebuildPages",
     ]),
@@ -89,6 +90,11 @@ export default {
       this.$refs.ComponentForm.submit();
     },
     modified(element) {
+      if (this.curElement["_side"]) {
+        this.modifySideElement(element);
+        this.cancel();
+        return;
+      }
       if (this.curElement["_edit"]) {
         if (element["container"]) {
           this.modifyElementChild(element);

src/modules/paper-export/components/PaperSideEdit.vue

@@ -5,11 +5,12 @@
     @dragover.prevent
     @dragleave.prevent
   >
-    <div class="paper-side-body">
+    <div class="column-side-body">
       <box-element-edit
         v-for="element in data"
         :key="element.key"
         :data="element"
+        @resize-over="elementResizeOver"
       ></box-element-edit>
     </div>
   </div>
@@ -34,11 +35,11 @@ export default {
     return {};
   },
   computed: {
-    ...mapState("paper-export", ["curDragElement", "curPage"]),
+    ...mapState("paper-export", ["curDragElement"]),
   },
   methods: {
-    ...mapMutations("paper-export", ["setCurDragElement", "setCurElement"]),
-    ...mapActions("paper-export", ["addSideElement", "modifyElement"]),
+    ...mapMutations("paper-export", ["setCurDragElement"]),
+    ...mapActions("paper-export", ["addSideElement", "modifySideElement"]),
     dropInnerElement(e) {
       let { offsetY: y } = e;
       const { offsetTop } = this.getOffsetInfo(e.target || e.srcElement);
@@ -70,7 +71,7 @@ export default {
       };
     },
     elementResizeOver(element) {
-      this.modifyElement(element);
+      this.modifySideElement(element);
     },
   },
 };

src/modules/paper-export/components/PaperTemplateDesign.vue

@@ -120,7 +120,7 @@
           </div>
           <!-- side edit   -->
           <paper-side-edit
-            class="page-main-side"
+            class="page-column-side"
             :data="curPage.sides"
           ></paper-side-edit>
         </div>

src/modules/paper-export/components/PaperTemplateView.vue

@@ -43,8 +43,8 @@
           </div>
         </div>
         <!-- side edit erea -->
-        <div class="page-main-side">
-          <div class="paper-side-body">
+        <div class="page-column-side">
+          <div class="column-side-body">
             <box-element-preview
               v-for="element in page.sides"
               :key="element.id"

src/modules/paper-export/components/RightClickMenu.vue

@@ -7,7 +7,17 @@
       class="right-menu-body"
       :style="styles"
     >
-      <ul>
+      <ul v-if="isClickSide">
+        <li @click="toEdit">
+          <i class="el-icon-edit-outline"></i>
+          编辑元素
+        </li>
+        <li class="li-danger" @click="toDelete">
+          <i class="el-icon-delete"></i>
+          删除元素
+        </li>
+      </ul>
+      <ul v-else>
         <li @click="toEdit">
           <i class="el-icon-edit-outline"></i>
           {{ IS_CONTAINER_ELEMENT ? "编辑元素" : "编辑编辑框" }}
@@ -31,6 +41,7 @@
 import { mapState, mapMutations, mapActions } from "vuex";
 import { deepCopy } from "../../card/plugins/utils";
 import Clickoutside from "element-ui/src/utils/clickoutside";
+import { findElementById } from "../store";
 
 export default {
   name: "RightClickMenu",
@@ -43,10 +54,11 @@ export default {
         position: "fixed",
         zIndex: 3000,
       },
+      isClickSide: false,
     };
   },
   computed: {
-    ...mapState("paper-export", ["curElement", "topics"]),
+    ...mapState("paper-export", ["curElement", "topics", "curPage"]),
     IS_CONTAINER_ELEMENT() {
       return !!this.curElement.container;
     },
@@ -66,11 +78,14 @@ export default {
     document.removeEventListener("mouseup", this.docMouseUp);
   },
   methods: {
-    ...mapMutations("paper-export", ["setOpenElementEditDialog"]),
+    ...mapMutations("paper-export", [
+      "setOpenElementEditDialog",
+      "setCurElement",
+    ]),
     ...mapActions("paper-export", [
-      "actElementById",
       "removeElement",
       "removeElementChild",
+      "removeSideElement",
       "pasteElementChild",
       "rebuildPages",
     ]),
@@ -96,19 +111,18 @@ export default {
       const id = this.getRelateElementId(e.target);
       if (!id) return;
 
-      this.actElementById(id);
-      let curElement = this.curElement;
-      const TYPES = ["PANE_BOX"];
-      if (
-        TYPES.includes(curElement.type) ||
-        (curElement.container && TYPES.includes(curElement.container.type))
-      ) {
-        if (curElement.container) {
-          const pos = this.topics.findIndex(
-            (item) => item.id === curElement.container.id
-          );
-          curElement = this.topics[pos];
+      let curElement = findElementById(id, this.topics);
+      if (!curElement) {
+        curElement = this.curPage.sides.find((item) => item.id === id);
+        if (curElement) {
+          this.setCurElement(curElement);
+          this.isClickSide = true;
+        } else {
+          this.isClickSide = false;
+          return;
         }
+      } else {
+        this.isClickSide = false;
       }
       this.show();
 
@@ -151,6 +165,7 @@ export default {
     },
     toEdit() {
       this.curElement._edit = true;
+      this.curElement._side = this.isClickSide;
       this.close();
       this.setOpenElementEditDialog(true);
     },
@@ -165,6 +180,10 @@ export default {
         .catch(() => {});
     },
     removeSelectElement() {
+      if (this.isClickSide) {
+        this.removeSideElement(this.curElement);
+        return;
+      }
       if (this.curElement["container"]) {
         this.removeElementChild(this.curElement);
       } else {

src/modules/paper-export/store/index.js

@@ -133,25 +133,47 @@ const actions = {
 
     commit("setCurElement", curElement);
   },
-  // 新增试题 --------------->
-  addElement({ state, commit }, element) {
-    state.topics.push(element);
-    commit("setCurElement", element);
-  },
+  // side   --------->
+  // 新增元素
   addSideElement({ state, commit }, element) {
     state.pages[state.curPageNo].sides.push(element);
     state.curPage = state.pages[state.curPageNo];
     commit("setCurElement", element);
   },
-  // 修改试题 --------------->
+  // 修改元素
+  modifySideElement({ state }, element) {
+    const pos = fetchElementPositionInfos(
+      element,
+      state.pages[state.curPageNo].sides
+    );
+    if (pos === -1) return;
+    state.pages[state.curPageNo].sides.splice(pos, 1, element);
+  },
+  // 删除元素
+  removeSideElement({ state, commit }, element) {
+    const pos = fetchElementPositionInfos(
+      element,
+      state.pages[state.curPageNo].sides
+    );
+    if (pos === -1) return;
+    state.pages[state.curPageNo].sides.splice(pos, 1);
+
+    commit("setCurElement", {});
+  },
+  // column --------->
+  // 新增元素
+  addElement({ state, commit }, element) {
+    state.topics.push(element);
+    commit("setCurElement", element);
+  },
+  // 修改元素
   modifyElement({ state }, element) {
     const pos = fetchElementPositionInfos(element, state.topics);
     if (pos === -1) return;
     state.topics.splice(pos, 1, element);
   },
-  // 修改试题包含元素
+  // 修改编辑框包含元素
   modifyElementChild({ state, commit }, element) {
-    // 修改解答题小题
     const pos = fetchElementPositionInfos(element.container, state.topics);
     const columnElements = state.topics[pos].elements;
     const childIndex = columnElements.findIndex(
@@ -166,7 +188,7 @@ const actions = {
 
     commit("setCurElement", element);
   },
-  // 粘贴试题内的元素
+  // 粘贴编辑框内的元素
   pasteElementChild({ state }, { curElement, pasteElement }) {
     let element = {
       id: curElement.container ? curElement.container.id : curElement.id,
@@ -184,14 +206,14 @@ const actions = {
     });
     element.elements.push(newElement);
   },
-  // 删除试题 --------------->
+  // 删除编辑框 --------------->
   removeElement({ state, commit }, element) {
     const pos = fetchElementPositionInfos(element, state.topics);
     state.topics.splice(pos, 1);
 
     commit("setCurElement", {});
   },
-  // 删除试题包含元素 --------------->
+  // 删除编辑框包含元素 --------------->
   removeElementChild({ state, commit }, element) {
     const pos = fetchElementPositionInfos(element.container, state.topics);
     const columnElements = state.topics[pos].elements;
@@ -288,7 +310,7 @@ const actions = {
   },
 };
 
-export { checkElementisCovered };
+export { checkElementisCovered, findElementById };
 
 export default {
   namespaced: true,