试卷属性新增

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

@@ -145,6 +145,91 @@
     padding: 6px 2px;
   }
 }
+// elem-paper-props
+.elem-paper-props {
+  display: table;
+  min-width: 80%;
+  max-width: 100%;
+  margin: 0 auto;
+  .paper-prop {
+    &-item {
+      display: table-cell;
+      vertical-align: middle;
+      padding: 6px 10px;
+      line-height: 20px;
+      font-size: 0;
+
+      &:first-child {
+        text-align: left !important;
+      }
+      &:nth-of-type(2) {
+        text-align: center;
+      }
+      &:last-child {
+        text-align: right;
+      }
+    }
+
+    &-label {
+      display: inline-block;
+      vertical-align: middle;
+      font-size: 14px;
+    }
+    &-content {
+      display: inline-block;
+      vertical-align: middle;
+      font-size: 0;
+
+      > span {
+        display: inline-block;
+        vertical-align: middle;
+        font-size: 14px;
+      }
+    }
+    &-option {
+      display: inline-block;
+      vertical-align: middle;
+      margin: 0 5px;
+      font-size: 0;
+
+      > span {
+        display: inline-block;
+        vertical-align: middle;
+        font-size: 14px;
+      }
+    }
+    &-checkbox {
+      width: 16px;
+      height: 16px;
+      border: 1px solid #000;
+      margin-left: 5px;
+      position: relative;
+
+      &.is-checked {
+        &::before {
+          content: "";
+          display: block;
+          position: absolute;
+          width: 5px;
+          height: 9px;
+          left: 4px;
+          top: 0;
+          border-right: 2px solid #000;
+          border-bottom: 2px solid #000;
+          transform: rotate(45deg);
+        }
+      }
+    }
+    &-val {
+      padding: 0 5px;
+      min-width: 30px;
+      height: 18px;
+      line-height: 18px;
+      margin-left: 5px;
+      border-bottom: 1px solid #000;
+    }
+  }
+}
 
 // paper-template-view
 .paper-template-view {

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

@@ -39,8 +39,9 @@ import EditGutter from "../../card/elements/gutter/EditGutter";
 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 EditPaneBox from "../elements/pane-box/EditPaneBox";
 import EditPaperStruct from "../elements/paper-struct/EditPaperStruct";
+import EditPaperProps from "../elements/paper-props/EditPaperProps";
 
 export default {
   name: "ElementPropEdit",
@@ -58,6 +59,7 @@ export default {
     EditFillPane,
     EditPaneBox,
     EditPaperStruct,
+    EditPaperProps,
   },
   data() {
     return {};

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

@@ -29,8 +29,9 @@ 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 EditPaperStruct from "../elements/paper-struct/ElemPaperStruct.vue";
 import EditScoreTable from "../elements/score-table/ElemScoreTable.vue";
+import EditPaperProps from "../elements/paper-props/ElemPaperProps.vue";
 
 import ElementResize from "../../card/components/common/ElementResize";
 import TopicNumber from "../../card/components/common/TopicNumber";
@@ -38,11 +39,12 @@ import TopicNumber from "../../card/components/common/TopicNumber";
 export default {
   name: "TopicElementEdit",
   components: {
+    ElementResize,
+    TopicNumber,
     EditPaneBox,
     EditPaperStruct,
     EditScoreTable,
-    ElementResize,
-    TopicNumber,
+    EditPaperProps,
   },
   props: {
     data: {

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

@@ -15,6 +15,7 @@
 import PreviewPaneBox from "../elements/pane-box/ElemPaneBox.vue";
 import PreviewPaperStruct from "../elements/paper-struct/ElemPaperStruct";
 import PreviewScoreTable from "../elements/score-table/ElemScoreTable.vue";
+import PreviewPaperProps from "../elements/paper-props/ElemPaperProps.vue";
 
 export default {
   name: "TopicElementPreview",
@@ -22,6 +23,7 @@ export default {
     PreviewPaneBox,
     PreviewPaperStruct,
     PreviewScoreTable,
+    PreviewPaperProps,
   },
   props: {
     data: {

src/modules/paper-export/elements/paper-props/EditPaperProps.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="edit-paper-props">
+    <el-form
+      v-if="modalForm"
+      ref="modalFormComp"
+      :key="modalForm.id"
+      :model="modalForm"
+      :rules="rules"
+      label-width="100px"
+    >
+      <el-form-item
+        v-for="item in instance.props"
+        :key="item.field"
+        :label="`${item.name}：`"
+        :prop="item.field"
+      >
+        <el-checkbox v-model="modalForm[item.field].enable"> 启用 </el-checkbox>
+        <el-input
+          v-if="modalForm[item.field].enable && item.field === 'paperType'"
+          v-model.trim="modalForm[item.field].optionContent"
+          maxlength="5"
+          placeholder="请输入分类信息"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "EditPaperProps",
+  props: {
+    instance: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      modalForm: null,
+      rules: {
+        paperType: {
+          validator: (rule, value, callback) => {
+            if (!this.modalForm.paperType.enable) return callback();
+
+            const optionContent = this.modalForm.paperType.optionContent;
+            if (optionContent && /^[A-Z]{1,5}$/.test(optionContent)) {
+              const optionSet = new Set(optionContent.split(""));
+              if (optionSet.size !== optionContent.length) {
+                return callback(new Error("试卷类型字母重复"));
+              } else {
+                return callback();
+              }
+            }
+
+            return callback(
+              new Error("试卷类型只能是大写字母，数量不能超过5个")
+            );
+          },
+          trigger: "change",
+        },
+      },
+    };
+  },
+  mounted() {
+    let modalForm = {};
+    this.instance.props.forEach((item) => {
+      modalForm[item.field] = {
+        ...item,
+        optionContent: item.options && item.options.join(""),
+      };
+    });
+    this.modalForm = modalForm;
+    console.log(this.modalForm);
+  },
+  methods: {
+    async submit() {
+      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
+      if (!valid) return;
+
+      let data = { ...this.instance };
+      data.props = data.props.map((item) => {
+        let nitem = this.$objAssign(item, this.modalForm[item.field]);
+        if (item.options)
+          nitem.options = this.modalForm[item.field].optionContent.split("");
+        return nitem;
+      });
+      this.$emit("modified", data);
+    },
+  },
+};
+</script>

src/modules/paper-export/elements/paper-props/ElemPaperProps.vue

@@ -3,8 +3,25 @@
     <div v-for="item in propList" :key="item.field" class="paper-prop-item">
       <span class="paper-prop-label">{{ item.name }}:</span>
       <div class="paper-prop-content">
-        <template v-if="item.options"> </template>
-        <template v-else></template>
+        <template v-if="item.options">
+          <div
+            v-for="option in item.options"
+            :key="option"
+            class="paper-prop-option"
+          >
+            <span>{{ option }}</span>
+            <span
+              :class="[
+                'paper-prop-checkbox',
+                { 'is-checked': item.value === option },
+              ]"
+            ></span>
+          </div>
+        </template>
+        <template v-else>
+          <span class="paper-prop-val">{{ item.value }}</span>
+          <span v-if="item.unit" class="paper-prop-unit">{{ item.unit }}</span>
+        </template>
       </div>
     </div>
   </div>

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

@@ -10,7 +10,7 @@ const MODEL = {
   x: 0,
   y: 0,
   w: 200,
-  h: 50,
+  h: 32,
   props: [
     {
       name: "试卷类型",

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

@@ -38,7 +38,6 @@ const initModalForm = {
 
 export default {
   name: "EditText",
-
   props: {
     instance: {
       type: Object,

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

@@ -10,7 +10,7 @@ const MODEL = {
   x: 0,
   y: 0,
   w: 200,
-  h: 50,
+  h: 30,
   textAlign: "left",
   paddingLeft: 0,
   structs: [