试卷结构元素新增

src/modules/card/elements/text/model.js

@@ -7,7 +7,7 @@ const MODEL = {
   w: 200,
   h: 50,
   sign: "",
-  textAlign: null,
+  textAlign: "left",
   fontWeight: 400,
   fontFamily: "宋体",
   fontSize: "14px",

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

@@ -40,6 +40,7 @@ import EditFillField from "../elements/fill-field/EditFillField";
 import EditFillTable from "../../card/elements/fill-table/EditFillTable";
 import EditFillPane from "../../card/elements/fill-pane/EditFillPane";
 import EditPaneBox from "../elements/pane-box/EditPaneBox.vue";
+import EditPaperStruct from "../elements/paper-struct/EditPaperStruct";
 
 export default {
   name: "ElementPropEdit",
@@ -56,6 +57,7 @@ export default {
     EditFillTable,
     EditFillPane,
     EditPaneBox,
+    EditPaperStruct,
   },
   data() {
     return {};

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

@@ -19,13 +19,16 @@
         <div class="action-part-title"><h2>编辑结构</h2></div>
         <div class="action-part-body">
           <div class="type-list">
-            <div class="type-item">
-              <el-button @click="addNewTopic('PANE_BOX')"
-                ><i class="el-icon-plus"></i>编辑框</el-button
-              >
+            <div
+              v-for="(item, index) in TOPIC_LIST"
+              :key="index"
+              class="type-item"
+              @click="addNewTopic(item.type)"
+            >
+              <el-button><i class="el-icon-plus"></i>{{ item.name }}</el-button>
             </div>
           </div>
-          <p class="tips-info">提示：点击创建编辑框</p>
+          <p class="tips-info">提示：点击创建编辑结构</p>
         </div>
       </div>
       <div class="action-part">
@@ -179,7 +182,12 @@
 
 <script>
 import { mapState, mapMutations, mapActions } from "vuex";
-import { getElementModel, ELEMENT_LIST, PAGE_CONFIG } from "../elementModel";
+import {
+  getElementModel,
+  ELEMENT_LIST,
+  TOPIC_LIST,
+  PAGE_CONFIG,
+} from "../elementModel";
 import { getModel as getPageModel, PAGE_TYPE } from "../elements/page/model";
 
 import PagePropEdit from "./PagePropEdit";
@@ -214,6 +222,7 @@ export default {
   data() {
     return {
       ELEMENT_LIST,
+      TOPIC_LIST,
       PAGE_TYPE,
       isSubmit: false,
     };
@@ -294,6 +303,7 @@ export default {
       this.changePage(0);
     },
     addNewTopic(type) {
+      // if (type === 'PAGE')
       let element = getElementModel(type);
       element.w = document.getElementById("topic-column").offsetWidth;
       this.addElement(element);

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

@@ -29,6 +29,7 @@ import { objAssign } from "../../card/plugins/utils";
 import { checkElementisCovered } from "../store";
 
 import EditPaneBox from "../elements/pane-box/ElemPaneBoxEdit.vue";
+import EditPaperStruct from "../elements/paper-struct/ElemPaperStruct";
 
 import ElementResize from "../../card/components/common/ElementResize";
 import TopicNumber from "../../card/components/common/TopicNumber";
@@ -37,6 +38,7 @@ export default {
   name: "TopicElementEdit",
   components: {
     EditPaneBox,
+    EditPaperStruct,
     ElementResize,
     TopicNumber,
   },

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

@@ -13,11 +13,13 @@
 
 <script>
 import PreviewPaneBox from "../elements/pane-box/ElemPaneBox.vue";
+import PreviewPaperStruct from "../elements/paper-struct/ElemPaperStruct";
 
 export default {
   name: "TopicElementPreview",
   components: {
     PreviewPaneBox,
+    PreviewPaperStruct,
   },
   props: {
     data: {

src/modules/paper-export/elementModel.js

@@ -11,6 +11,7 @@ import { getModel as createFillTable } from "../card/elements/fill-table/model";
 import { getModel as createFillPane } from "../card/elements/fill-pane/model";
 import { getModel as createPaneBox } from "./elements/pane-box/model";
 import { getModel as createFieldText } from "./elements/field-text/model";
+import { getModel as createPaperStruct } from "./elements/paper-struct/model";
 
 // available infos
 const EDITABLE_ELEMENT = [
@@ -27,6 +28,7 @@ const EDITABLE_ELEMENT = [
   "FILL_TABLE",
   "FILL_PANE",
 ];
+const EDITABLE_TOPIC = ["PANE_BOX", "PAPER_STRUCT"];
 
 const ELEMENT_INFOS = {
   LINES: {
@@ -81,6 +83,10 @@ const ELEMENT_INFOS = {
     name: "字段文本",
     getModel: createFieldText,
   },
+  PAPER_STRUCT: {
+    name: "试卷结构",
+    getModel: createPaperStruct,
+  },
 };
 
 const ELEMENT_LIST = EDITABLE_ELEMENT.map((type) => {
@@ -89,6 +95,12 @@ const ELEMENT_LIST = EDITABLE_ELEMENT.map((type) => {
     type,
   };
 });
+const TOPIC_LIST = EDITABLE_TOPIC.map((type) => {
+  return {
+    ...ELEMENT_INFOS[type],
+    type,
+  };
+});
 
 // 获取元件默认数据结构
 const getElementModel = (type, optionData = {}) => {
@@ -108,4 +120,10 @@ const PAGE_CONFIG = {
   showCover: false,
 };
 
-export { getElementModel, getElementName, PAGE_CONFIG, ELEMENT_LIST };
+export {
+  getElementModel,
+  getElementName,
+  PAGE_CONFIG,
+  ELEMENT_LIST,
+  TOPIC_LIST,
+};

src/modules/paper-export/elements/field-text/model.js

@@ -11,7 +11,7 @@ const MODEL = {
   w: 200,
   h: 30,
   sign: "",
-  textAlign: null,
+  textAlign: "left",
   fontWeight: 400,
   fontFamily: "宋体",
   fontSize: "14px",

src/modules/paper-export/elements/paper-struct/EditPaperStruct.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="edit-text">
+    <el-form
+      ref="modalFormComp"
+      :key="modalForm.id"
+      :model="modalForm"
+      label-width="100px"
+    >
+      <el-form-item label="对齐：">
+        <el-radio-group v-model="modalForm.textAlign">
+          <el-radio-button label="left">左</el-radio-button>
+          <el-radio-button label="center">居中</el-radio-button>
+          <el-radio-button label="right">右</el-radio-button>
+          <el-radio-button label="justify">两端</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="缩进：">
+        <el-input-number
+          v-model="modalForm.paddingLeft"
+          style="width: 125px"
+          :min="0"
+          :max="200"
+          :step="1"
+          step-strictly
+          :controls="false"
+        ></el-input-number>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+const initModalForm = {
+  id: "",
+  paddingLeft: 0,
+  textAlign: "left",
+};
+
+export default {
+  name: "EditText",
+
+  props: {
+    instance: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      modalForm: { ...initModalForm },
+    };
+  },
+  mounted() {
+    this.initData(this.instance);
+  },
+  methods: {
+    initData(val) {
+      this.modalForm = { ...val };
+    },
+    submit() {
+      this.$emit("modified", this.modalForm);
+    },
+  },
+};
+</script>

src/modules/paper-export/elements/paper-struct/ElemPaperStruct.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="elem-paper-struct" :style="elemStyles">
+    <ol>
+      <li v-for="(item, index) in data.structs" :key="index">
+        {{ item.detailName }}，{{ item.questionCount }}题，共{{
+          item.totalScore
+        }}分
+      </li>
+    </ol>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ElemPaperStruct",
+  props: {
+    data: {
+      type: Object,
+      default() {
+        return {
+          structs: [],
+        };
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    elemStyles() {
+      return {
+        paddingLeft: this.data.paddingLeft + "px",
+        textAlign: this.data.textAlign || null,
+      };
+    },
+  },
+  methods: {},
+};
+</script>

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

@@ -0,0 +1,32 @@
+import {
+  getElementId,
+  randomCode,
+  deepCopy,
+  objAssign,
+} from "../../../card/plugins/utils";
+
+const MODEL = {
+  type: "PAPER_STRUCT",
+  x: 0,
+  y: 0,
+  w: 200,
+  h: 50,
+  textAlign: "left",
+  paddingLeft: 0,
+  structs: [
+    {
+      detailName: "选择题",
+      questionCount: 10,
+      totalScore: 20,
+    },
+  ],
+};
+
+const getModel = (presetData) => {
+  const model = objAssign(deepCopy(MODEL), presetData);
+  model.id = getElementId();
+  model.key = randomCode();
+  return model;
+};
+
+export { MODEL, getModel };