封面编辑

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

@@ -37,12 +37,17 @@
         </el-button>
       </el-form-item> -->
       <el-form-item label="页码">
-        <el-checkbox v-model="form.showPageNo" @change="pageChange"
+        <el-checkbox v-model="form.showPageNo" @change="configChange"
           >显示</el-checkbox
         >
       </el-form-item>
       <el-form-item v-if="form.pageSize !== 'A4'" label="侧边栏">
-        <el-checkbox v-model="form.showSide" @change="pageChange"
+        <el-checkbox v-model="form.showSide" @change="configChange"
+          >显示</el-checkbox
+        >
+      </el-form-item>
+      <el-form-item label="封面">
+        <el-checkbox v-model="form.showCover" @change="coverConfigChange"
           >显示</el-checkbox
         >
       </el-form-item>
@@ -53,6 +58,7 @@
 <script>
 import { mapState, mapMutations, mapActions } from "vuex";
 import { objAssign } from "../../card/plugins/utils";
+import { getModel as getPageModel } from "../elements/page/model";
 
 const COLUMN_OPTIONS = [
   {
@@ -110,16 +116,17 @@ export default {
         columnNumber: 2,
         columnGap: 20,
         showPageNo: true,
+        showCover: false,
         showSide: true,
       },
       prePageSize: "A3",
     };
   },
   computed: {
-    ...mapState("paper-export", ["curPage"]),
+    ...mapState("paper-export", ["pageConfig", "pages"]),
   },
   watch: {
-    curPage: {
+    pageConfig: {
       immediate: true,
       handler(val) {
         this.form = objAssign(this.form, val);
@@ -131,11 +138,18 @@ export default {
     },
   },
   methods: {
-    ...mapMutations("paper-export", ["setCurElement", "setPages", "setTopics"]),
+    ...mapMutations("paper-export", [
+      "setCurElement",
+      "setPages",
+      "setTopics",
+      "setPageConfig",
+    ]),
     ...mapActions("paper-export", [
       "modifyPagesInfo",
       "rebuildPages",
       "resetElementProp",
+      "changePage",
+      "directChangePage",
     ]),
     modifyColumnNum(item) {
       this.$confirm(
@@ -152,11 +166,13 @@ export default {
     },
     columnNumChange(val) {
       this.form.columnNumber = val;
+      this.setPageConfig(this.form);
       this.setPages([]);
       this.setTopics([]);
-      this.$emit("init-page", this.form);
+      this.$emit("init-page");
     },
-    pageChange() {
+    configChange() {
+      this.setPageConfig(this.form);
       this.modifyPagesInfo(this.form);
       this.$nextTick(() => {
         this.rebuildPages();
@@ -166,6 +182,19 @@ export default {
         });
       });
     },
+    coverConfigChange(val) {
+      this.setPageConfig(this.form);
+      if (val) {
+        this.pages.unshift(
+          getPageModel({ ...this.pageConfig, pageType: "cover" })
+        );
+        this.setPages(this.pages);
+        this.changePage();
+      } else {
+        this.setPages(this.pages.slice(1));
+        this.directChangePage(0);
+      }
+    },
     modifyPageSize() {
       this.$confirm("此操作将会重置当前页面所有元素信息, 是否继续?", "提示", {
         type: "warning",
@@ -176,9 +205,10 @@ export default {
             this.form,
             PAGE_SIZE_OPTIONS[this.form.pageSize]
           );
+          this.setPageConfig(this.form);
           this.setPages([]);
           this.setTopics([]);
-          this.$emit("init-page", this.form);
+          this.$emit("init-page");
         })
         .catch(() => {
           this.form.pageSize = this.prePageSize;

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

@@ -56,7 +56,7 @@
             :key="pageNo"
             :type="curPageNo === pageNo ? 'primary' : 'default'"
             @click="swithPage(pageNo)"
-            >{{ !pageNo ? "正面" : "反面" }}</el-button
+            >{{ PAGE_TYPE[page.pageType] }}</el-button
           >
         </div>
         <div class="control-right">
@@ -80,14 +80,17 @@
           :class="[
             'page-box',
             `page-box-${curPage.pageSize}`,
-            `page-box-${curPageNo % 2}`,
+            `page-box-${pageTypeType(curPage.pageType)}`,
           ]"
         >
           <!-- inner edit area -->
           <div
             :class="[
               'page-main-inner',
-              { 'page-main-noside': !curPage.showSide },
+              {
+                'page-main-noside':
+                  !curPage.showSide || curPage.pageType === 'cover',
+              },
             ]"
           >
             <div
@@ -115,17 +118,17 @@
                   </div>
                 </div>
                 <page-number
-                  v-if="curPage.showPageNo"
+                  v-if="curPage.showPageNo && curPage.pageType !== 'cover'"
                   type="text"
-                  :total="pages.length * curPage.columns.length"
-                  :current="curPageNo * curPage.columns.length + columnNo + 1"
+                  :total="getTotalPage()"
+                  :current="getPageNumber(curPageNo, columnNo)"
                 ></page-number>
               </div>
             </div>
           </div>
           <!-- side edit   -->
           <paper-side-edit
-            v-if="curPage.showSide"
+            v-if="curPage.showSide && curPage.pageType !== 'cover'"
             class="page-column-side"
             :data="curPage.sides"
           ></paper-side-edit>
@@ -176,8 +179,8 @@
 
 <script>
 import { mapState, mapMutations, mapActions } from "vuex";
-import { getElementModel, ELEMENT_LIST } from "../elementModel";
-import { getModel as getPageModel } from "../elements/page/model";
+import { getElementModel, ELEMENT_LIST, PAGE_CONFIG } from "../elementModel";
+import { getModel as getPageModel, PAGE_TYPE } from "../elements/page/model";
 
 import PagePropEdit from "./PagePropEdit";
 import ElementPropEdit from "./ElementPropEdit";
@@ -211,12 +214,14 @@ export default {
   data() {
     return {
       ELEMENT_LIST,
+      PAGE_TYPE,
       isSubmit: false,
     };
   },
   computed: {
     ...mapState("paper-export", [
       "topics",
+      "pageConfig",
       "pages",
       "curElement",
       "curPage",
@@ -232,33 +237,61 @@ export default {
   methods: {
     ...mapMutations("paper-export", [
       "addPage",
-      "setCurPage",
       "setCurElement",
       "setOpenElementEditDialog",
       "setCurDragElement",
       "setPages",
-      "setTopics",
+      "setPageConfig",
       "initState",
     ]),
     ...mapActions("paper-export", [
       "addElement",
       "modifyElement",
       "rebuildPages",
-      "initTopicsFromPages",
+      "changePage",
     ]),
+    pageTypeType(pageType) {
+      const types = {
+        cover: 0,
+        front: 0,
+        back: 1,
+      };
+      return types[pageType];
+    },
+    getPageNumber(curPageNo, columnNo) {
+      let pageNo = this.pageConfig.showCover ? curPageNo - 1 : curPageNo;
+      return pageNo * this.curPage.columns.length + columnNo + 1;
+    },
+    getTotalPage() {
+      let pageCount = this.pageConfig.showCover
+        ? this.pages.length - 1
+        : this.pages.length;
+      return pageCount * this.pageConfig.columnNumber;
+    },
     initCard() {
-      const { pages } = this.content;
+      let { pages, pageConfig } = this.content;
+      if (!pageConfig) {
+        pageConfig = { ...PAGE_CONFIG };
+      }
+      this.setPageConfig(pageConfig);
+
       if (pages && pages.length) {
         this.setPages(pages);
-        this.initTopicsFromPages();
-        this.setCurPage(0);
+        this.changePage(0);
       } else {
-        this.initPageData();
+        this.initPageData(pageConfig);
       }
     },
-    initPageData(pageInfo = {}) {
-      this.setPages([getPageModel(pageInfo), getPageModel(pageInfo)]);
-      this.setCurPage(0);
+    initPageData() {
+      let pages = [
+        getPageModel({ ...this.pageConfig, pageType: "front" }),
+        getPageModel({ ...this.pageConfig, pageType: "back" }),
+      ];
+      if (this.pageConfig.showCover) {
+        pages.unshift(getPageModel({ ...this.pageConfig, pageType: "cover" }));
+      }
+      this.setPages(pages);
+      this.changePage(0);
     },
     addNewTopic(type) {
       let element = getElementModel(type);
@@ -275,8 +308,8 @@ export default {
     // 切换正反页
     swithPage(pindex) {
       if (this.curPageNo === pindex) return;
-      this.setCurPage(pindex);
       this.setCurElement({});
+      this.changePage(pindex);
     },
     getTemplateJson() {
       return new Promise((resolve) => {

src/modules/paper-export/elementModel.js

@@ -99,4 +99,13 @@ const getElementName = (type) => {
   return ELEMENT_INFOS[type].name;
 };
 
-export { getElementModel, getElementName, ELEMENT_LIST };
+const PAGE_CONFIG = {
+  pageSize: "A3",
+  columnNumber: 2,
+  columnGap: 40,
+  showPageNo: true,
+  showSide: true,
+  showCover: false,
+};
+
+export { getElementModel, getElementName, PAGE_CONFIG, ELEMENT_LIST };

src/modules/paper-export/elements/page/model.js

@@ -8,11 +8,13 @@ import {
 
 const MODEL = {
   type: "PAGE",
+  pageType: "front", // front:正面,back:反面,cover:封面
   pageSize: "A3",
   columnNumber: 2,
   columnGap: 40,
   showPageNo: true,
   showSide: true,
+  showCover: false,
   sides: [],
   columns: [],
 };
@@ -27,6 +29,12 @@ const COLUMN = {
   elements: [],
 };
 
+const PAGE_TYPE = {
+  cover: "封面",
+  front: "正面",
+  back: "反面",
+};
+
 const getModel = (datas = {}) => {
   let npage = deepCopy(MODEL);
   npage = objAssign(npage, datas);
@@ -39,4 +47,4 @@ const getModel = (datas = {}) => {
   return npage;
 };
 
-export { MODEL, getModel };
+export { MODEL, getModel, PAGE_TYPE };

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

@@ -7,6 +7,7 @@ import {
 } from "../../card/plugins/utils";
 
 const state = {
+  pageConfig: {},
   curElement: {},
   curDragElement: {},
   curPage: {},
@@ -15,9 +16,13 @@ const state = {
   topics: [],
   insetTarget: {},
   openElementEditDialog: false,
+  cover: [],
 };
 
 const mutations = {
+  setPageConfig(state, pageConfig) {
+    state.pageConfig = Object.assign({}, state.pageConfig, pageConfig);
+  },
   setCurElement(state, curElement) {
     state.curElement = curElement;
   },
@@ -38,6 +43,23 @@ const mutations = {
   setTopics(state, topics) {
     state.topics = topics;
   },
+  switchTopics(state, pageType) {
+    let topics = [];
+    if (pageType === "cover") {
+      state.pages[0].columns.forEach((column) => {
+        topics.push(...column.elements);
+      });
+    } else {
+      state.pages
+        .filter((p) => p.pageType !== "cover")
+        .forEach((page) => {
+          page.columns.forEach((column) => {
+            topics.push(...column.elements);
+          });
+        });
+    }
+    state.topics = topics;
+  },
   setInsetTarget(state, insetTarget) {
     state.insetTarget = insetTarget;
   },
@@ -121,16 +143,18 @@ const checkElementisCovered = (id, type) => {
 };
 
 const actions = {
-  initTopicsFromPages({ state, commit }) {
-    let topics = [];
-    state.pages.forEach((page) => {
-      page.columns.forEach((column) => {
-        column.elements.forEach((element) => {
-          topics.push(element);
-        });
-      });
-    });
-    commit("setTopics", topics);
+  changePage({ state, commit }, pageNo) {
+    const lastPageType = state.pages[state.curPageNo].pageType;
+    commit("setCurPage", pageNo);
+
+    if (!state.pageConfig.showCover) return;
+    if (lastPageType !== "cover" && state.curPage.pageType !== "cover") return;
+
+    commit("switchTopics", state.curPage.pageType);
+  },
+  directChangePage({ state, commit }, pageNo) {
+    commit("setCurPage", pageNo);
+    commit("switchTopics", state.curPage.pageType);
   },
   modifyPagesInfo({ state, commit }, data) {
     for (let i = 0; i < state.pages.length; i++) {
@@ -316,15 +340,26 @@ const actions = {
 
     // 最后一栏的处理。
     columns.push([...curColumnElements]);
-    // 更新pages，只能有两页
-    columns = columns.slice(0, 2 * columnNumber);
-    for (let i = 0; i < 2 * columnNumber; i++) {
-      const pageNo = Math.floor(i / columnNumber);
-      const columnNo = i % columnNumber;
-      state.pages[pageNo].columns[columnNo].elements = columns[i] || [];
+    if (state.curPage.pageType === "cover") {
+      // 封面只能有一页
+      columns = columns.slice(0, 1 * columnNumber);
+      for (let i = 0; i < columnNumber; i++) {
+        state.pages[0].columns[i].elements = columns[i] || [];
+      }
+    } else {
+      // 正文只能有两页
+      columns = columns.slice(0, 2 * columnNumber);
+      let cno = 0;
+      for (let pNo = 0; pNo < 2; pNo++) {
+        let pageNo = state.pageConfig.showCover ? pNo + 1 : pNo;
+        for (let columnNo = 0; columnNo < columnNumber; columnNo++) {
+          state.pages[pageNo].columns[columnNo].elements = columns[cno++] || [];
+        }
+      }
     }
 
     commit("setCurPage", state.curPageNo);
+    commit("switchTopics", state.curPage.pageType);
   },
 };