md

src/main.js

@@ -12,6 +12,7 @@ import "./directives/directives.js";
 import "./filters/filters.js";
 import "./assets/styles/index.scss";
 import "./modules/card/assets/styles/module.scss";
+import "./modules/paper-export/assets/styles/module.scss";
 
 import globalVuePlugins from "./plugins/globalVuePlugins";
 Vue.use(globalVuePlugins);

src/modules/card/components/common/ElementResize.vue

@@ -229,7 +229,10 @@ export default {
       if (this.fitParentTypeHeight) {
         if (this.positionType === "relative") {
           const elOffsetTop = this.$el.offsetTop;
-          if (this.sizePosOrigin.y - sizePos.y >= this.offsetTopOrigin) {
+          if (
+            this.sizePosOrigin.y - sizePos.y >= this.offsetTopOrigin &&
+            this.offsetTopOrigin
+          ) {
             sizePos.h = this.lastSizePos.h;
             sizePos.y = this.sizePosOrigin.y - this.offsetTopOrigin;
           }

src/modules/card/router/index.js

@@ -28,7 +28,7 @@ export const menuRoutes = [
   // }
 ];
 
-export const editRoutes = [
+export const otherRoutes = [
   {
     path: "/card/edit/:idType/:paperOrCardId",
     name: "CardEdit",

src/modules/paper-export/api.js

@@ -21,3 +21,21 @@ export const savePaperTemplateApi = (datas) => {
     datas
   );
 };
+export const paperTemplateEnableApi = ({ id, enable }) => {
+  return $httpWithMsg.post(
+    QUESTION_API + "/paper/template/toggle",
+    {},
+    {
+      params: { id, enable },
+    }
+  );
+};
+export const paperTemplateDeleteApi = (ids) => {
+  return $httpWithMsg.post(
+    QUESTION_API + "/paper/template/delete",
+    {},
+    {
+      params: { ids: ids.join() },
+    }
+  );
+};

src/modules/paper-export/assets/styles/module.scss

@@ -0,0 +1,2 @@
+@import "./paper-temp-preview.scss";
+@import "./paper-temp-design.scss";

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

@@ -0,0 +1,7 @@
+.paper-template-design {
+  .topic-element-edit:last-child {
+    .element-item::before {
+      border-bottom: 1px dashed #333;
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+.page-column-element .element-item::before {
+  border: 1px dashed #333;
+}
+
+// elem-pane-box
+.elem-pane-box {
+  .elem-body {
+    min-height: 60px;
+    position: relative;
+  }
+  .elem-pane-box-elements {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 8;
+  }
+  .elem-pane-box-element {
+    .pane-box-element-body {
+      position: absolute;
+    }
+  }
+}

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

@@ -82,7 +82,7 @@ export default {
     };
   },
   computed: {
-    ...mapState("free", ["curElement"]),
+    ...mapState("paper-export", ["curElement"]),
     elementName() {
       if (this.data.type.includes("LINE_")) return "line";
       return this.data.type.toLowerCase().replace("_", "-");
@@ -102,7 +102,7 @@ export default {
     this.init();
   },
   methods: {
-    ...mapMutations("free", ["setCurElement"]),
+    ...mapMutations("paper-export", ["setCurElement"]),
     init() {
       this.elemData = objAssign(this.elemData, this.data);
       this.styles = {

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

@@ -102,7 +102,7 @@ export default {
     };
   },
   computed: {
-    ...mapState("card", ["curPage"]),
+    ...mapState("paper-export", ["curPage"]),
   },
   watch: {
     curPage: {
@@ -117,8 +117,8 @@ export default {
     },
   },
   methods: {
-    ...mapMutations("card", ["setCurElement"]),
-    ...mapActions("card", [
+    ...mapMutations("paper-export", ["setCurElement"]),
+    ...mapActions("paper-export", [
       "modifyPagesInfo",
       "rebuildPages",
       "resetElementProp",

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

@@ -32,11 +32,11 @@ export default {
     return {};
   },
   computed: {
-    ...mapState("free", ["curDragElement", "curPage"]),
+    ...mapState("paper-export", ["curDragElement", "curPage"]),
   },
   methods: {
-    ...mapMutations("free", ["setCurDragElement", "setCurElement"]),
-    ...mapActions("free", ["addSideElement", "modifyElement"]),
+    ...mapMutations("paper-export", ["setCurDragElement", "setCurElement"]),
+    ...mapActions("paper-export", ["addSideElement", "modifyElement"]),
     dropInnerElement(e) {
       let { offsetX: x, offsetY: y } = e;
       const { offsetLeft, offsetTop } = this.getOffsetInfo(

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

@@ -76,6 +76,7 @@
       <!-- edit body -->
       <div class="design-body">
         <div
+          v-if="curPage.id"
           :class="[
             'page-box',
             `page-box-${curPage.pageSize}`,
@@ -243,12 +244,15 @@ export default {
     },
     initPageData() {
       this.setPages([getPageModel(), getPageModel()]);
-      this.setCurPageNo(0);
+      this.setCurPage(0);
     },
     addNewTopic(type) {
       let element = getElementModel(type);
       element.w = document.getElementById("topic-column").offsetWidth;
       this.addElement(element);
+      this.$nextTick(() => {
+        this.rebuildPages();
+      });
     },
     // 元件编辑
     dragstart(element) {

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

@@ -29,7 +29,7 @@
 
 <script>
 import { mapState, mapMutations, mapActions } from "vuex";
-import { deepCopy } from "../plugins/utils";
+import { deepCopy } from "../../card/plugins/utils";
 import Clickoutside from "element-ui/src/utils/clickoutside";
 
 export default {

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

@@ -8,7 +8,7 @@
       :min-height="data.minHeight"
       :fit-parent="['h']"
       @on-click="activeCurElement"
-      @resize-over="modifyElement"
+      @resize-over="resizeOver"
       @change="sizeChange"
     >
       <div :id="data.id" :class="classes" :data-type="data.type">
@@ -26,7 +26,7 @@
 <script>
 import { mapState, mapMutations, mapActions } from "vuex";
 import { objAssign } from "../../card/plugins/utils";
-import { checkElementisCovered } from "../store/paper-export";
+import { checkElementisCovered } from "../store";
 
 import EditPaneBox from "../elements/pane-box/ElemPaneBoxEdit.vue";
 
@@ -61,7 +61,7 @@ export default {
     };
   },
   computed: {
-    ...mapState("card", ["curElement"]),
+    ...mapState("paper-export", ["curElement"]),
     elementName() {
       return this.data.type.toLowerCase().replace("_", "-");
     },
@@ -83,8 +83,8 @@ export default {
     this.init();
   },
   methods: {
-    ...mapMutations("card", ["setCurElement"]),
-    ...mapActions("card", ["modifyTopic", "rebuildPages"]),
+    ...mapMutations("paper-export", ["setCurElement"]),
+    ...mapActions("paper-export", ["modifyElement", "rebuildPages"]),
     init() {
       this.elemData = objAssign(this.elemData, this.data);
     },
@@ -96,10 +96,10 @@ export default {
         this.data.id,
         this.data.type
       );
-      this.modifyElement();
+      this.modifyElement(Object.assign({}, this.curElement, this.elemData));
     },
-    modifyElement() {
-      this.modifyTopic(Object.assign({}, this.curElement, this.elemData));
+    resizeOver() {
+      this.modifyElement(Object.assign({}, this.curElement, this.elemData));
       // 注意：当前组件并没有实时更新元件的尺寸信息，只是在rebuildPages时统一更新。
       this.$nextTick(() => {
         this.rebuildPages();

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

@@ -12,12 +12,12 @@
 </template>
 
 <script>
-import ElemPaneBox from "../elements/pane-box/ElemPaneBox.vue";
+import PreviewPaneBox from "../elements/pane-box/ElemPaneBox.vue";
 
 export default {
   name: "TopicElementPreview",
   components: {
-    ElemPaneBox,
+    PreviewPaneBox,
   },
   props: {
     data: {

src/modules/paper-export/elements/pane-box/ElemPaneBox.vue

@@ -1,10 +1,26 @@
 <template>
-  <div class="elem-pane-box" :style="styles"></div>
+  <div class="elem-pane-box">
+    <div ref="ElemBody" class="elem-body">
+      <!-- 子元件区域 -->
+      <div class="elem-pane-box-elements">
+        <box-element-preview
+          v-for="element in data.elements"
+          :key="element.id"
+          :data="element"
+        ></box-element-preview>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import BoxElementPreview from "../../components/BoxElementPreview.vue";
+
 export default {
   name: "ElemPaneBox",
+  components: {
+    BoxElementPreview,
+  },
   props: {
     data: {
       type: Object,
@@ -16,15 +32,6 @@ export default {
   data() {
     return {};
   },
-  computed: {
-    styles() {
-      if (this.data.borderStyle === "none") return {};
-
-      return {
-        border: `1px ${this.data.borderStyle} #000`,
-      };
-    },
-  },
   methods: {},
 };
 </script>

src/modules/paper-export/elements/pane-box/ElemPaneBoxEdit.vue

@@ -17,7 +17,7 @@
           @resize-over="elementResizeOver"
         ></box-element-edit>
         <!-- guide-lines -->
-        <div class="element-guide-lines">
+        <div v-if="xLines.length && yLines.length" class="element-guide-lines">
           <div
             v-for="line in xLines"
             :key="`x-${line.top}`"
@@ -62,7 +62,8 @@ export default {
     ...mapState("paper-export", ["curDragElement"]),
   },
   watch: {
-    "data.parent": {
+    data: {
+      deep: true,
       handler() {
         this.modifyBodyStyle();
       },

src/modules/paper-export/menus.js

@@ -0,0 +1,22 @@
+export default [
+  {
+    id: 99,
+    code: "paper_export_manage",
+    name: "试卷导出模板管理",
+    parentId: 1,
+    hasPrivilege: true,
+    description: "",
+    updateTime: "2022-09-22 16:50:33",
+    creationTime: "2022-09-22 16:50:33",
+    seq: 4,
+    ext1: "menu",
+    ext2: "",
+    ext3: "",
+    ext4: "",
+    ext5: "/paper-template/manage",
+    nodeName: "试卷导出模板管理",
+    nodeId: "99",
+    parentNodeId: "1",
+    nodeCode: "paper_export_manage",
+  },
+];

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

@@ -9,16 +9,16 @@ export const menuRoutes = [
   },
 ];
 
-export const editRoutes = [
+export const otherRoutes = [
   {
-    path: "/paper-template/edit/:idType/:paperOrCardId",
+    path: "/paper-template/edit/:tid?",
     name: "PaperTemplateEdit",
     component: () =>
       import(/* webpackChunkName: "card" */ "../views/PaperTemplateEdit.vue"),
   },
   {
     // viewType::: view:预览,print:打印,frame:iframe嵌套
-    path: "/paper-template/preview/:cardId/:viewType",
+    path: "/paper-template/preview/:tid/:viewType",
     name: "PaperTemplatePreview",
     component: () =>
       import(

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

@@ -84,20 +84,25 @@ const findElementById = (id, topics) => {
 
 const checkElementisCovered = (id, type) => {
   const elementDom = document.getElementById(id);
+  if (!elementDom) return;
 
   if (type === "PANE_BOX") {
     const limitHeight = elementDom.offsetHeight;
 
     let elementHeights = [];
-    elementDom
-      .querySelector(".elem-pane-box-elements")
-      .childNodes.forEach((node) => {
-        if (!node.className.includes("elem-pane-box-element")) return;
+    const elementChildren = elementDom.querySelector(
+      ".elem-pane-box-elements"
+    ).childNodes;
 
-        elementHeights.push(
-          node.firstChild.offsetHeight + node.firstChild.offsetTop
-        );
-      });
+    if (!elementChildren) return;
+    elementChildren.forEach((node) => {
+      if (!node.className || !node.className.includes("elem-pane-box-element"))
+        return;
+
+      elementHeights.push(
+        node.firstChild.offsetHeight + node.firstChild.offsetTop
+      );
+    });
     return elementHeights.some((item) => item > limitHeight);
   }
 
@@ -141,6 +146,7 @@ const actions = {
   // 修改试题 --------------->
   modifyElement({ state }, element) {
     const pos = fetchElementPositionInfos(element, state.topics);
+    if (pos === -1) return;
     state.topics.splice(pos, 1, element);
   },
   // 修改试题包含元素

src/modules/paper-export/views/PaperTemplateBuild.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="paper-template-build">paper-template-build</div>
+</template>
+
+<script>
+export default {
+  name: "PaperTemplateBuild",
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>

src/modules/paper-export/views/PaperTemplateManage.vue

@@ -4,6 +4,13 @@
       <h2 class="part-box-title">试卷模板管理</h2>
       <!-- 搜索 -->
       <el-form class="part-filter-form" inline :model="searchForm">
+        <el-form-item label="版头名称">
+          <el-input
+            v-model="searchForm.name"
+            placeholder="请输入版头名称"
+            maxlength="50"
+          />
+        </el-form-item>
         <el-form-item>
           <el-button type="danger" @click="handleCurrentChange(1)">
             查询
@@ -12,8 +19,9 @@
       </el-form>
 
       <div class="part-box-action">
+        <div></div>
         <el-button type="primary" plain icon="icon icon-edit" @click="toCreate"
-          >新建模板
+          >新建
         </el-button>
       </div>
     </div>
@@ -21,7 +29,7 @@
     <div class="part-box">
       <!-- 页面列表 -->
       <el-table ref="table" :data="tableData">
-        <el-table-column prop="name" label="名称"> </el-table-column>
+        <el-table-column prop="name" label="模版名称"> </el-table-column>
         <el-table-column
           prop="createTime"
           label="创建时间"
@@ -54,6 +62,13 @@
         </el-table-column>
         <el-table-column width="170" label="操作">
           <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="primary"
+              plain
+              @click="toEdit(scope.row)"
+              >编辑
+            </el-button>
             <el-button
               v-if="!onlyAssignTeacher"
               size="mini"
@@ -63,31 +78,13 @@
             >
               {{ scope.row.enable ? "禁用" : "启用" }}
             </el-button>
-            <el-dropdown>
-              <el-button type="primary" plain size="mini">
-                更多<i class="el-icon-more el-icon--right"></i>
-              </el-button>
-              <el-dropdown-menu slot="dropdown" class="action-dropdown">
-                <el-dropdown-item>
-                  <el-button
-                    size="mini"
-                    type="primary"
-                    plain
-                    @click="toEdit(scope.row)"
-                    >编辑模板
-                  </el-button>
-                </el-dropdown-item>
-                <el-dropdown-item v-if="!onlyAssignTeacher">
-                  <el-button
-                    size="mini"
-                    type="danger"
-                    plain
-                    @click="toDelete(scope.row)"
-                    >删除
-                  </el-button>
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
+            <el-button
+              size="mini"
+              type="danger"
+              plain
+              @click="toDelete(scope.row)"
+              >删除
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -107,13 +104,18 @@
 </template>
 
 <script>
-import { paperTemplateListApi } from "../api";
+import {
+  paperTemplateListApi,
+  paperTemplateEnableApi,
+  paperTemplateDeleteApi,
+} from "../api";
 
 export default {
   name: "PaperTemplateManage",
   data() {
     return {
       loading: false,
+      searchForm: { name: "" },
       tableData: [],
       curRow: {},
       currentPage: 1,
@@ -121,12 +123,16 @@ export default {
       total: 10,
     };
   },
+  mounted() {
+    // this.search();
+  },
   methods: {
     async search() {
       if (this.loading) return;
       this.loading = true;
 
       const res = await paperTemplateListApi({
+        ...this.searchForm,
         pageNumber: this.currentPage,
         pageSize: this.pageSize,
       }).catch(() => {});
@@ -146,15 +152,48 @@ export default {
       this.pageSize = val;
       this.search();
     },
-    toCreate() {},
-    toEnable(row) {
-      console.log(row);
+    toCreate() {
+      this.$router.push({
+        name: "PaperTemplateEdit",
+      });
+    },
+    async toEnable(row) {
+      const action = row.enable ? "禁用" : "启用";
+      const confirm = await this.$confirm(
+        `确定要${action}该试卷模板吗?`,
+        "提示",
+        {
+          type: "warning",
+        }
+      ).catch(() => {});
+      if (confirm !== "confirm") return;
+
+      const enable = !row.enable;
+      await paperTemplateEnableApi({
+        id: row.id,
+        enable,
+      });
+      this.$message.success("操作成功！");
+      this.search();
     },
     toEdit(row) {
       console.log(row);
+      this.$router.push({
+        name: "PaperTemplateEdit",
+        params: {
+          tid: row.id,
+        },
+      });
     },
-    toDelete(row) {
-      console.log(row);
+    async toDelete(row) {
+      const confirm = await this.$confirm(`确定要删除该试卷模板吗?`, "提示", {
+        type: "warning",
+      }).catch(() => {});
+      if (confirm !== "confirm") return;
+
+      await paperTemplateDeleteApi([row.id]);
+      this.$message.success("删除成功！");
+      this.deletePageLastItem();
     },
   },
 };

src/modules/portal/views/home/HomeSide.vue

@@ -93,6 +93,7 @@ const MENU_ICONS = {
 import { mapMutations } from "vuex";
 import { UPDATE_CURRENT_PATHS } from "../../store/currentPaths";
 import { UPDATE_MENU_LIST } from "../../store/menuList";
+import paperMenus from "../../../paper-export/menus";
 
 export default {
   name: "HomeSide",
@@ -123,6 +124,7 @@ export default {
   async created() {
     this.group = routesToMenu.find((v) => this.$route.path.startsWith(v.path));
     this.menuList = await this.getUserPrivileges();
+    this.menuList.push(...paperMenus);
     this.UPDATE_MENU_LIST(this.menuList);
     this.updatePath();
   },

src/modules/questions/routes/routes.js

@@ -1,4 +1,3 @@
-import Home from "../../portal/views/home/Home.vue";
 import PaperStructure from "../views/PaperStructure.vue";
 import InsertPaperStructure from "../views/InsertPaperStructure.vue";
 import InsertPaperStructureInfo from "../views/InsertPaperStructureInfo.vue";
@@ -37,14 +36,12 @@ import ExamPaperPendingTrial from "../views/ExamPaperPendingTrial.vue";
 import CheckDuplicateList from "../views/CheckDuplicateList.vue";
 import CheckDuplicateInfo from "../views/CheckDuplicateInfo.vue";
 import License from "../views/License.vue";
+import QuestionHome from "../views/Home";
 
-import { menuRoutes, editRoutes } from "../../card/router";
-
-export default [
+export const menuRoutes = [
   {
     path: "/questions", //首页
-    meta: { auth: false },
-    component: Home,
+    component: QuestionHome,
     children: [
       {
         path: "tips", //模块说明
@@ -187,9 +184,11 @@ export default [
         path: "license", //授权管理
         component: License,
       },
-      ...menuRoutes,
     ],
   },
+];
+
+export const otherRoutes = [
   {
     path: "/edit_paper/:id/:parentView", //试卷编辑
     component: EditPaper,
@@ -210,5 +209,4 @@ export default [
     path: "/view_paper/:id", //试卷查看
     component: ViewPaper,
   },
-  ...editRoutes,
 ];

src/modules/questions/views/Home.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="question-home">
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "QuestionHome",
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>

src/router/index.js

@@ -1,8 +1,20 @@
 import Vue from "vue";
 import Router from "vue-router";
-import PortalRoutes from "../modules/portal/routes/routes";
-import QuestionsRoutes from "../modules/questions/routes/routes";
 import { QUESTION_API } from "@/constants/constants.js";
+import Home from "../modules/portal/views/home/Home.vue";
+import portalRoutes from "../modules/portal/routes/routes";
+import {
+  menuRoutes as qmenuRoutes,
+  otherRoutes as qotherRoutes,
+} from "../modules/questions/routes/routes";
+import {
+  menuRoutes as cmenuRoutes,
+  otherRoutes as cotherRoutes,
+} from "../modules/card/router";
+import {
+  menuRoutes as pmenuRoutes,
+  otherRoutes as potherRoutes,
+} from "../modules/paper-export/router";
 
 // ignore NavigationDuplicated. https://github.com/vuejs/vue-router/issues/2881
 // const originalPush = Router.prototype.push;
@@ -22,7 +34,18 @@ Vue.use(Router);
 let router = new Router({
   mode: "history",
   base: "/admin",
-  routes: [...PortalRoutes, ...QuestionsRoutes],
+  routes: [
+    {
+      path: "/home", //首页
+      meta: { auth: false },
+      component: Home,
+      children: [...qmenuRoutes, ...cmenuRoutes, ...pmenuRoutes],
+    },
+    ...qotherRoutes,
+    ...cotherRoutes,
+    ...potherRoutes,
+    ...portalRoutes,
+  ],
 });
 
 router.beforeEach((to, from, next) => {

src/store/index.js

@@ -5,6 +5,7 @@ import currentPaths from "../modules/portal/store/currentPaths";
 import menuList from "../modules/portal/store/menuList";
 import { card } from "../modules/card/store";
 import question from "../modules/question/store";
+import paperExport from "../modules/paper-export/store";
 
 Vue.use(Vuex);
 
@@ -18,5 +19,6 @@ export default new Vuex.Store({
     menuList,
     card,
     question,
+    "paper-export": paperExport,
   },
 });