md

card/assets/styles/card-temp.css

@@ -26,6 +26,9 @@
 .card-print .card-head-body .head-dynamic-rect {
   border-width: 0.5pt;
 }
+.card-print .package-number {
+  display: block;
+}
 
 .page-box {
   position: relative;
@@ -34,6 +37,27 @@
   font-weight: normal;
   font-family: "Times New Roman", "宋体", "宋体-简", Arial, sans-serif;
 }
+.page-box .package-number {
+  position: absolute;
+  width: 200px;
+  height: 40px;
+  top: 10px;
+  right: 25%;
+  margin-left: -100px;
+  text-align: center;
+  z-index: 99;
+  display: none;
+}
+.page-box .package-number img {
+  display: block;
+  height: 28px;
+  width: 100%;
+}
+.page-box .package-number p {
+  line-height: 1;
+  font-size: 12px;
+  margin: 0;
+}
 .page-box .page-main {
   height: 100%;
   position: relative;

src/components/base/StatusSelect.vue

@@ -10,9 +10,9 @@
   >
     <el-option
       v-for="item in optionList"
-      :key="item.name"
-      :value="item.name"
-      :label="item.desc"
+      :key="item.code"
+      :value="item.code"
+      :label="item.name"
     >
     </el-option>
   </el-select>
@@ -54,13 +54,20 @@ export default {
     async search() {
       if (!this.type) return;
       const res = await getEnums(this.type);
-      this.optionList = res;
+      this.optionList = res.map((item, index) => {
+        return {
+          code: item.code,
+          name: item.name,
+          ordinal: item.ordinal || index,
+        };
+      });
+      this.optionList.sort((a, b) => a.ordinal - b.ordinal);
     },
     select() {
       this.$emit("input", this.selected);
       this.$emit(
         "change",
-        this.optionList.find((item) => item.name === this.selected)
+        this.optionList.find((item) => item.code === this.selected)
       );
     },
   },

src/modules/mark/components/ModifyMarkSetting.vue

@@ -1,99 +1,121 @@
 <template>
-  <el-dialog
-    class="modify-mark-setting"
-    :visible.sync="modalIsShow"
-    title="评卷设置"
-    top="10px"
-    width="660px"
-    :close-on-click-modal="false"
-    :close-on-press-escape="false"
-    append-to-body
-    destroy-on-close
-    @open="visibleChange"
-  >
-    <el-form
-      ref="modalFormComp"
-      :model="modalForm"
-      :rules="rules"
-      :key="modalForm.paperNumber"
-      label-width="160px"
+  <div>
+    <el-dialog
+      class="modify-mark-setting"
+      :visible.sync="modalIsShow"
+      title="评卷设置"
+      top="10px"
+      width="660px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      append-to-body
+      destroy-on-close
+      @open="visibleChange"
     >
-      <el-form-item prop="markMode" label="评卷模式：">
-        <el-select v-model="modalForm.markMode">
-          <el-option
-            v-for="(val, key) in MARK_MODE_TYPE"
-            :key="key"
-            :value="key"
-            :label="val"
-          ></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item prop="markStartTime" label="评卷时间：">
-        <el-date-picker
-          v-model="markTime"
-          type="datetimerange"
-          :picker-options="pickerOptions"
-          range-separator="至"
-          start-placeholder="评卷开始日期"
-          end-placeholder="评卷结束日期"
-          value-format="timestamp"
-          align="right"
-          unlink-panels
-          @change="dateChange"
-        >
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="小助手原卷：">
-        <el-checkbox v-model="modalForm.sheetView"></el-checkbox>
-      </el-form-item>
-      <el-form-item label="评卷是否显示客观分：">
-        <el-checkbox v-model="modalForm.showObjectScore"></el-checkbox>
-      </el-form-item>
-      <el-form-item label="评卷提交自动定位：">
-        <el-checkbox v-model="modalForm.autoScroll"></el-checkbox>
-      </el-form-item>
-      <el-form-item prop="passScore" label="及格分：">
-        <el-input-number
-          style="width: 125px"
-          v-model="modalForm.passScore"
-          :min="1"
-          :max="100"
-          :step="1"
-          step-strictly
-          :controls="false"
-        ></el-input-number>
-        <span style="margin-left: 5px">%</span>
-      </el-form-item>
-      <el-form-item prop="excellentScore" label="优秀分：">
-        <el-input-number
-          style="width: 125px"
-          v-model="modalForm.excellentScore"
-          :min="1"
-          :max="100"
-          :step="1"
-          step-strictly
-          :controls="false"
-        ></el-input-number>
-        <span style="margin-left: 5px">%</span>
-      </el-form-item>
-      <el-form-item prop="pictureConfig" label="原图遮盖：">
-        <el-button class="btn-primary" type="text" @click="toSetPictureConfig"
-          >设置</el-button
-        >
-      </el-form-item>
-    </el-form>
-    <div slot="footer">
-      <el-button type="primary" :disabled="isSubmit" @click="submit"
-        >确认</el-button
+      <el-form
+        ref="modalFormComp"
+        :model="modalForm"
+        :rules="rules"
+        :key="modalForm.paperNumber"
+        label-width="160px"
       >
-      <el-button @click="cancel">取消</el-button>
-    </div>
-  </el-dialog>
+        <el-form-item prop="markMode" label="评卷模式：">
+          <el-select v-model="modalForm.markMode">
+            <el-option
+              v-for="(val, key) in MARK_MODE_TYPE"
+              :key="key"
+              :value="key"
+              :label="val"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="markStartTime" label="评卷时间：">
+          <el-date-picker
+            v-model="markTime"
+            type="datetimerange"
+            :picker-options="pickerOptions"
+            range-separator="至"
+            start-placeholder="评卷开始日期"
+            end-placeholder="评卷结束日期"
+            value-format="timestamp"
+            align="right"
+            unlink-panels
+            @change="dateChange"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="小助手原卷：">
+          <el-checkbox v-model="modalForm.sheetView"></el-checkbox>
+        </el-form-item>
+        <el-form-item label="评卷是否显示客观分：">
+          <el-checkbox v-model="modalForm.showObjectScore"></el-checkbox>
+        </el-form-item>
+        <el-form-item label="评卷提交自动定位：">
+          <el-checkbox v-model="modalForm.autoScroll"></el-checkbox>
+        </el-form-item>
+        <el-form-item prop="passScore" label="及格分：">
+          <el-input-number
+            style="width: 125px"
+            v-model="modalForm.passScore"
+            :min="1"
+            :max="100"
+            :step="1"
+            step-strictly
+            :controls="false"
+          ></el-input-number>
+          <span class="ml-1">%</span>
+        </el-form-item>
+        <el-form-item prop="excellentScore" label="优秀分：">
+          <el-input-number
+            style="width: 125px"
+            v-model="modalForm.excellentScore"
+            :min="1"
+            :max="100"
+            :step="1"
+            step-strictly
+            :controls="false"
+          ></el-input-number>
+          <span class="ml-1">%</span>
+        </el-form-item>
+        <el-form-item prop="pictureConfig" label="原图遮盖：">
+          <el-button
+            class="btn-act-primary"
+            type="text"
+            @click="toSetPictureConfig"
+            >设置</el-button
+          >
+          <i
+            v-if="modalForm.pictureConfig.length"
+            class="el-icon-success color-success ml-1"
+          ></i>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button type="primary" :disabled="isSubmit" @click="submit"
+          >确认</el-button
+        >
+        <el-button @click="cancel">取消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- ModifyPaperArea -->
+    <modify-paper-area
+      ref="ModifyPaperArea"
+      :areaConfigs="modalForm.pictureConfig"
+      :paperList="paperList"
+      @modified="areaModified"
+    ></modify-paper-area>
+  </div>
 </template>
 
 <script>
-import { markSettingSave, markSettingDetail } from "../api";
+import {
+  markSettingSave,
+  markSettingDetail,
+  examStructureFindJpg,
+} from "../api";
 import { MARK_MODE_TYPE } from "@/constants/enumerate";
+import ModifyPaperArea from "./ModifyPaperArea.vue";
 import pickerOptions from "@/constants/datePickerOptions";
 
 const initModalForm = {
@@ -107,11 +129,12 @@ const initModalForm = {
   autoScroll: "",
   passScore: 60,
   excellentScore: 80,
-  pictureConfig: "",
+  pictureConfig: [],
 };
 
 export default {
   name: "modify-mark-setting",
+  components: { ModifyPaperArea },
   props: {
     instance: {
       type: Object,
@@ -126,6 +149,7 @@ export default {
       isSubmit: false,
       MARK_MODE_TYPE,
       modalForm: { ...initModalForm },
+      paperList: [],
       rules: {
         markMode: [
           {
@@ -162,16 +186,35 @@ export default {
     };
   },
   methods: {
+    async getPaperList() {
+      this.paperList = [];
+      const data = await examStructureFindJpg({
+        examId: this.instance.examId,
+        courseCode: this.instance.courseCode,
+        paperNumber: this.instance.paperNumber,
+        paperType: this.instance.paperType,
+      });
+      const papers = data || [];
+      papers.sort((a, b) => a.index - b.index);
+      this.paperList = papers.map((paper) => {
+        return {
+          imgUrl: paper.path,
+          areas: [],
+        };
+      });
+    },
     async initData(val) {
+      await this.getPaperList();
       const res = await markSettingDetail({
         examId: this.instance.examId,
         paperNumber: this.instance.paperNumber,
       });
       this.modalForm = this.$objAssign(initModalForm, res || {});
       this.markTime = [
-        this.modalForm.markStartTime,
-        this.modalForm.markEndTime,
+        this.modalForm.markStartTime || undefined,
+        this.modalForm.markEndTime || undefined,
       ];
+      this.modalForm.pictureConfig = this.modalForm.pictureConfig || [];
       this.modalForm.passScore = this.modalForm.passScore || 60;
       this.modalForm.excellentScore = this.modalForm.excellentScore || 80;
     },
@@ -193,8 +236,11 @@ export default {
         this.modalForm.markEndTime = "";
       }
     },
+    areaModified(areas) {
+      this.modalForm.pictureConfig = areas;
+    },
     toSetPictureConfig() {
-      // TODO:
+      this.$refs.ModifyPaperArea.open();
     },
     async submit() {
       const valid = await this.$refs.modalFormComp.validate().catch(() => {});

src/modules/mark/components/ModifyPaperArea.vue

@@ -0,0 +1,149 @@
+<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 papers"
+        :id="`area-cropper-${index}`"
+        :imgUrl="paper.imgUrl"
+        ref="AreaCropper"
+        :key="paper.imgUrl"
+        :paper="paper"
+        @curarea-change="cropperCurareaChange"
+        @change="(areas) => areaChange(index, areas)"
+        @paper-load="() => areaPaperLoaded(index)"
+      ></area-cropper>
+    </div>
+
+    <div slot="footer"></div>
+  </el-dialog>
+</template>
+
+<script>
+import AreaCropper from "./markParam//areaCropper/AreaCropper.vue";
+
+export default {
+  name: "modify-paper-area",
+  components: { AreaCropper },
+  props: {
+    areaConfigs: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    paperList: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      modalIsShow: false,
+      papers: [],
+      paperLoadedList: [],
+    };
+  },
+  methods: {
+    visibleChange() {
+      this.paperLoadedList = [];
+      this.papers = this.paperList.map((paper) => {
+        let npaper = { ...paper };
+        npaper.areas = [];
+        return npaper;
+      });
+      this.areaConfigs.forEach((config) => {
+        const index = config.i - 1;
+        this.papers[index].areas.push({ ...config });
+      });
+    },
+    areaPaperLoaded(paperIndex) {
+      if (this.paperLoadedList.includes(paperIndex)) return;
+      this.paperLoadedList.push(paperIndex);
+      if (this.paperLoadedList.length === this.paperList.length) {
+        this.scrollToFirstArea();
+      }
+    },
+    scrollToFirstArea() {
+      if (!this.areaConfigs.length) return;
+      let paperIndexs = this.areaConfigs.map((item) => item.i - 1);
+      paperIndexs.sort((a, b) => a - b);
+      const firstPaperIndex = paperIndexs[0];
+
+      this.$nextTick(() => {
+        const areaCropperDom = document.getElementById(
+          `area-cropper-${firstPaperIndex}`
+        );
+        let areaItems = areaCropperDom.querySelectorAll(".element-resize");
+        let firstAreaItem = null;
+        let topNum = 9999;
+        for (let i = 0; i < areaItems.length; i++) {
+          const element = areaItems[i];
+          if (element.offsetTop < topNum) {
+            topNum = element.offsetTop;
+            firstAreaItem = element;
+          }
+        }
+        // console.log(firstAreaItem);
+        const scrollTop =
+          areaCropperDom.offsetTop + firstAreaItem.offsetTop - 100;
+        this.$el.querySelector(".el-dialog").scrollTop = scrollTop;
+      });
+    },
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    areaChange(index, areas) {
+      this.papers[index].areas = areas;
+    },
+    cropperCurareaChange(area) {
+      this.$refs.AreaCropper.forEach((cropper) => {
+        cropper.curareaChange(area);
+      });
+    },
+    confirm() {
+      let areas = [];
+      this.papers.forEach((paper, pindex) => {
+        if (!paper.areas.length) return;
+        paper.areas.forEach((area) => {
+          const narea = {
+            i: pindex + 1,
+            x: area.x,
+            y: area.y,
+            w: area.w,
+            h: area.h,
+          };
+          areas.push(narea);
+        });
+      });
+      this.$emit("modified", areas);
+      this.cancel();
+    },
+  },
+};
+</script>