评卷区域修改

src/modules/stmms/components/markParam/ModifyMarkArea.vue

@@ -1,130 +1,127 @@
-<template>
-  <el-dialog
-    class="modify-mark-area"
-    :visible.sync="modalIsShow"
-    top="0"
-    :close-on-click-modal="false"
-    :close-on-press-escape="false"
-    append-to-body
-    fullscreen
-    :show-close="false"
-    @open="visibleChange"
-  >
-    <div class="box-justify" slot="title">
-      <h2 class="el-dialog__title">设置分组评卷区域</h2>
-      <div>
-        <el-button type="success" @click="confirm">确定</el-button>
-        <el-button @click="cancel">取消</el-button>
-      </div>
-    </div>
-    <div class="tips-info">
-      <i class="el-icon-warning"></i>
-      按住鼠标左键拖动，框选评卷区域。可以设置多个评卷区域。当不设置评卷区域时，评卷时将展示答题卡所有答题区。
-    </div>
-    <div v-if="modalIsShow" class="area-container">
-      <area-cropper
-        v-for="(paper, index) in paperList"
-        :imgUrl="paper.imgUrl"
-        ref="AreaCropper"
-        :key="paper.imgUrl"
-        :paper="paper"
-        @curarea-change="cropperCurareaChange"
-        @change="areas => areaChange(index, areas)"
-      ></area-cropper>
-    </div>
-
-    <div slot="footer"></div>
-  </el-dialog>
-</template>
-
-<script>
-import AreaCropper from "./areaCropper/AreaCropper.vue";
-import { examStructureFindJpg } from "../../api";
-
-export default {
-  name: "modify-mark-area",
-  components: { AreaCropper },
-  props: {
-    baseInfo: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    group: {
-      type: Object,
-      default() {
-        return {};
-      }
-    }
-  },
-  data() {
-    return {
-      modalIsShow: false,
-      paperList: [
-        { imgUrl: "/img/card-001.jpeg", areas: [] },
-        { imgUrl: "/img/card-002.jpeg", areas: [] }
-      ]
-    };
-  },
-  mounted() {
-    this.getPaperList();
-  },
-  methods: {
-    visibleChange() {
-      this.paperList.forEach(paper => (paper.areas = []));
-      this.group.pictureConfigList.forEach(config => {
-        const index = config.i - 1;
-        this.paperList[index].areas.push({ ...config });
-      });
-    },
-    cancel() {
-      this.modalIsShow = false;
-    },
-    open() {
-      this.modalIsShow = true;
-    },
-    async getPaperList() {
-      const data = await examStructureFindJpg({
-        examId: this.baseInfo.examId,
-        courseCode: this.baseInfo.courseCode,
-        paperNumber: this.baseInfo.paperNumber
-      });
-      const papers = data || [];
-      papers.sort((a, b) => a.index - b.index);
-      this.paperList = papers.map(paper => {
-        return {
-          imgUrl: paper.path,
-          areas: []
-        };
-      });
-    },
-    areaChange(index, areas) {
-      this.paperList[index].areas = areas;
-    },
-    cropperCurareaChange(area) {
-      this.$refs.AreaCropper.forEach(cropper => {
-        cropper.curareaChange(area);
-      });
-    },
-    confirm() {
-      let areas = [];
-      this.paperList.forEach((paper, pindex) => {
-        if (!paper.areas.length) return;
-        paper.areas.forEach(area => {
-          let narea = { i: pindex + 1 };
-          if (!area.isFull) {
-            narea = { ...narea, x: area.x, y: area.y, w: area.w, h: area.h };
-          }
-          areas.push(narea);
-        });
-      });
-      this.$emit(
-        "modified",
-        Object.assign({}, this.group, { pictureConfigList: areas })
-      );
-      this.cancel();
-    }
-  }
-};
-</script>
+<template>
+  <el-dialog
+    class="modify-mark-area"
+    :visible.sync="modalIsShow"
+    top="0"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+    fullscreen
+    :show-close="false"
+    @open="visibleChange"
+  >
+    <div class="box-justify" slot="title">
+      <h2 class="el-dialog__title">设置分组评卷区域</h2>
+      <div>
+        <el-button type="success" @click="confirm">确定</el-button>
+        <el-button @click="cancel">取消</el-button>
+      </div>
+    </div>
+    <div class="tips-info">
+      <i class="el-icon-warning"></i>
+      按住鼠标左键拖动，框选评卷区域。可以设置多个评卷区域。当不设置评卷区域时，评卷时将展示答题卡所有答题区。
+    </div>
+    <div v-if="modalIsShow" class="area-container">
+      <area-cropper
+        v-for="(paper, index) in paperList"
+        :imgUrl="paper.imgUrl"
+        ref="AreaCropper"
+        :key="paper.imgUrl"
+        :paper="paper"
+        @curarea-change="cropperCurareaChange"
+        @change="areas => areaChange(index, areas)"
+      ></area-cropper>
+    </div>
+
+    <div slot="footer"></div>
+  </el-dialog>
+</template>
+
+<script>
+import AreaCropper from "./areaCropper/AreaCropper.vue";
+import { examStructureFindJpg } from "../../api";
+
+export default {
+  name: "modify-mark-area",
+  components: { AreaCropper },
+  props: {
+    baseInfo: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    group: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      modalIsShow: false,
+      paperList: []
+    };
+  },
+  mounted() {
+    this.getPaperList();
+  },
+  methods: {
+    visibleChange() {
+      this.paperList.forEach(paper => (paper.areas = []));
+      this.group.pictureConfigList.forEach(config => {
+        const index = config.i - 1;
+        this.paperList[index].areas.push({ ...config });
+      });
+    },
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    async getPaperList() {
+      const data = await examStructureFindJpg({
+        examId: this.baseInfo.examId,
+        courseCode: this.baseInfo.courseCode,
+        paperNumber: this.baseInfo.paperNumber
+      });
+      const papers = data || [];
+      papers.sort((a, b) => a.index - b.index);
+      this.paperList = papers.map(paper => {
+        return {
+          imgUrl: paper.path,
+          areas: []
+        };
+      });
+    },
+    areaChange(index, areas) {
+      this.paperList[index].areas = areas;
+    },
+    cropperCurareaChange(area) {
+      this.$refs.AreaCropper.forEach(cropper => {
+        cropper.curareaChange(area);
+      });
+    },
+    confirm() {
+      let areas = [];
+      this.paperList.forEach((paper, pindex) => {
+        if (!paper.areas.length) return;
+        paper.areas.forEach(area => {
+          let narea = { i: pindex + 1 };
+          if (!area.isFull) {
+            narea = { ...narea, x: area.x, y: area.y, w: area.w, h: area.h };
+          }
+          areas.push(narea);
+        });
+      });
+      this.$emit(
+        "modified",
+        Object.assign({}, this.group, { pictureConfigList: areas })
+      );
+      this.cancel();
+    }
+  }
+};
+</script>