优化

src/pages/Home/index.vue

@@ -145,7 +145,7 @@
                   }}
                 </template>
               </el-table-column>
-              <el-table-column label="得分" width="50px" align="center">
+              <el-table-column label="每题分数" align="center">
                 <template #default="scope">
                   {{ scope.row.customFrom.score }}
                 </template>
@@ -361,7 +361,7 @@
             </div>
           </div>
           <div>
-            <span>得分：</span>
+            <span>每题分数：</span>
             <div>
               <el-input-number
                 style="width: 164px"
@@ -469,7 +469,7 @@
             </div>
           </div>
           <div>
-            <span>得分：</span>
+            <span>每题分数：</span>
             <div>
               <el-input-number
                 v-model="drawerForm.subjective.score"
@@ -717,6 +717,7 @@ const templateInfo = reactive<any>({
   otherData: [],
 });
 const isLock = ref<boolean>(false);
+const currentNavListIndex = ref<number>(3);
 // 画布相关
 const ctx = ref<any>(null);
 const fabricGroup = ref<any>(null);
@@ -726,11 +727,12 @@ const currentFabric = ref<any>(null);
 onMounted(() => {
   GetOcrDetail(router.currentRoute.value.query.mid as string).then((res: any) => {
     if (res.code === 200) {
-      templateInfo.name = res.data.mainName;
+      const { mainName, hasPosition, paperType, detail } = res.data;
-      templateInfo.hasPosition = res.data.hasPosition;
+      templateInfo.name = mainName;
-      templateInfo.type = res.data.paperType === 1 ? "A3" : "A4";
+      templateInfo.hasPosition = hasPosition;
-      templateInfo.otherData = res.data.detail;
+      templateInfo.type = paperType === 1 ? "A3" : "A4";
-      res.data.detail.forEach((item: any, index: number) => {
+      templateInfo.otherData = detail.sort((a: any, b: any) => a.pageIndex - b.pageIndex);
+      templateInfo.otherData.forEach((item: any, index: number) => {
         templateInfo.imgSrc.push(item.tempPicture64);
         if (item.tempData) {
           index === 0
@@ -747,31 +749,37 @@ onMounted(() => {
         }
         setQuestionList(); //回显试题
         showFabricData(); //回显画布
+        setStepClick(currentNavListIndex.value, false); //设置步骤
         setNavTitle(); //设置导航栏文字
       });
     }
   });
 });
+
 watch(
   () => templateInfo,
   (_new, _old) => {
     if (!_new.headList[2].point.length && !_new.tailsList[2].point.length) {
       isLock.value = true;
+      currentNavListIndex.value = 2;
       return;
     }
     if (!_new.headList[1].point.length && !_new.tailsList[1].point.length) {
       isLock.value = true;
+      currentNavListIndex.value = 1;
       return;
     }
     if (_new.hasPosition) {
       if (_new.imgSrc.length === 2) {
         if (_new.headList[0].point.length !== 4 || _new.tailsList[0].point.length !== 4) {
           isLock.value = true;
+          currentNavListIndex.value = 0;
           return;
         }
       } else {
         if (_new.headList[0].point.length !== 4) {
           isLock.value = true;
+          currentNavListIndex.value = 0;
           return;
         }
       }
@@ -1094,14 +1102,18 @@ const createText = (
   text: string,
   left: number,
   top: number,
-  backgroundColor: string = "rgba(0,0,0,0.5)"
+  backgroundColor: string = "rgba(0,0,0,0.5)",
+  fill: string = "white",
+  fontSize: number = 16,
+  fontWeight: string = "normal"
 ): any => {
   return new fabric.Text(text, {
     left,
     top,
-    fontSize: 16,
+    fontSize,
-    fill: "white",
+    fill,
     backgroundColor,
+    fontWeight,
     fabricId: cteatedNumber(),
   });
 };
@@ -1177,13 +1189,14 @@ const createFabric = (): any[] => {
     case 1:
     case 5:
       return [titleText, deleteText];
+    case 3:
+      return [deleteText, editText];
     default:
       return [titleText, deleteText, editText];
   }
 };
-
 // 切换步骤
-const setStepClick = (index: number): void => {
+const setStepClick = (index: number, isElMessage: boolean = true): void => {
   if (navListIndex.value === index) {
     return;
   }
@@ -1222,7 +1235,7 @@ const setStepClick = (index: number): void => {
   checkTemplateInfo(index);
 
   if (msg) {
-    ElMessage.error(msg);
+    if (isElMessage) ElMessage.error(msg);
     return;
   }
   if (index === 1) {
@@ -1263,6 +1276,9 @@ const saveFabricData = (): void => {
           type: "text",
           text: child.get("text"),
           backgroundColor: child.get("backgroundColor"),
+          fill: child.get("fill"),
+          fontSize: child.get("fontSize"),
+          fontWeight: child.get("fontWeight"),
           ...childItem,
         });
       } else {
@@ -1566,11 +1582,12 @@ const showFabricData = (): void => {
             top: item.top,
             width: item.width,
             height: item.height,
-            fontSize: 16,
-            fill: "white",
             backgroundColor: item.backgroundColor,
+            fill: item.fill || "white",
+            fontSize: item.fontSize || 16,
             fabricId: cteatedNumber(),
             visible: !textFabricList.value.includes(item.text),
+            fontWeight: item.fontWeight || "normal",
           }).on("mousedown", (e: any) => {
             if (textFabricList.value.includes(item.text)) {
               addEventClick(e);
@@ -1715,7 +1732,8 @@ const changeFabricPosition = (value: number, str: string): void => {
           maxRect.set("top", value / 2 - value);
           currentFabric.value.target.set(str, value + textList[0].height * 2);
         }
-        let rectWidth, rectHeight;
+        let rectWidth = 0,
+          rectHeight = 0;
         switch (navListIndex.value) {
           // 考号
           case 2:
@@ -1745,17 +1763,25 @@ const changeFabricPosition = (value: number, str: string): void => {
             // 客观题
             let questionNumber = currentFabric.value.target.customFrom.questionNumber;
             let optionNumber = currentFabric.value.target.customFrom.optionNumber;
-            rectWidth = maxRect.get("width") / optionNumber;
+            let range = currentFabric.value.target.customFrom.range;
-            rectHeight = maxRect.get("height") / questionNumber;
+            rectWidth = maxRect.get("width") / (range ? questionNumber : optionNumber);
+            rectHeight = maxRect.get("height") / (range ? optionNumber : questionNumber);
             changeTextPosition();
             deleteSmallRect();
             for (let index = 0; index < optionNumber * questionNumber; index++) {
               currentFabric.value.target.add(
                 new fabric.Rect({
-                  left: maxRect.get("left") + (index % optionNumber) * rectWidth,
+                  left:
+                    maxRect.get("left") +
+                    (index % (range ? questionNumber : optionNumber)) * rectWidth,
                   top:
                     maxRect.get("top") +
-                    getOffsetTop(optionNumber, questionNumber, index, rectHeight),
+                    getOffsetTop(
+                      range ? questionNumber : optionNumber,
+                      range ? optionNumber : questionNumber,
+                      index,
+                      rectHeight
+                    ),
                   stroke: "red",
                   strokeWidth: 1,
                   fill: "transparent",
@@ -1765,6 +1791,35 @@ const changeFabricPosition = (value: number, str: string): void => {
                 })
               );
             }
+            // 修改题号位置
+            const questionNumberList = currentFabric.value.target
+              .getObjects()
+              .filter(
+                (item: any) =>
+                  item.get("type") === "text" &&
+                  !textFabricList.value.includes(item.get("text"))
+              );
+            questionNumberList.forEach((item: any, index: number) => {
+              if (range) {
+                item.set({
+                  left:
+                    maxRect.get("left") +
+                    rectWidth * index +
+                    rectWidth / 2 -
+                    (questionNumber + 1),
+                  top: maxRect.get("top") + 4,
+                });
+              } else {
+                item.set({
+                  top:
+                    maxRect.get("top") +
+                    rectHeight * index +
+                    rectHeight / 2 -
+                    (questionNumber + 1),
+                  left: maxRect.get("left") + 4,
+                });
+              }
+            });
             break;
           case 4:
             // 主观题
@@ -1998,12 +2053,11 @@ const changeFabricInfo = (bool: boolean): void => {
         case 3:
           // 客观题
           // 生成小格子
-          function createdObjectiveRect(): void {
+          function createdObjectiveRect(
-            let rect = fabricItem
+            rect: any,
-              .getObjects()
+            rectWidth: number,
-              .find((row: any) => row.get("type") === "rect");
+            rectHeight: number
-            let rectWidth = rect.get("width") / drawerForm.objective.optionNumber;
+          ): void {
-            let rectHeight = rect.get("height") / drawerForm.objective.questionNumber;
             for (
               let index = 0;
               index <
@@ -2014,12 +2068,20 @@ const changeFabricInfo = (bool: boolean): void => {
                 new fabric.Rect({
                   left:
                     rect.get("left") +
-                    (index % drawerForm.objective.optionNumber) * rectWidth,
+                    (index %
+                      (drawerForm.objective.range
+                        ? drawerForm.objective.questionNumber
+                        : drawerForm.objective.optionNumber)) *
+                      rectWidth,
                   top:
                     rect.get("top") +
                     getOffsetTop(
-                      drawerForm.objective.optionNumber,
+                      drawerForm.objective.range
-                      drawerForm.objective.questionNumber,
+                        ? drawerForm.objective.questionNumber
+                        : drawerForm.objective.optionNumber,
+                      drawerForm.objective.range
+                        ? drawerForm.objective.optionNumber
+                        : drawerForm.objective.questionNumber,
                       index,
                       rectHeight
                     ),
@@ -2037,11 +2099,21 @@ const changeFabricInfo = (bool: boolean): void => {
             ElMessage.error("题目重复！");
             return;
           } else {
-            deleteSmallRect();
+            let rect = fabricItem
-            createdObjectiveRect();
+              .getObjects()
-            textTitle.set({
+              .find((row: any) => row.get("type") === "rect");
-              text: `${drawerForm.objective.questionBefore}-${drawerForm.objective.questionAfter}`,
+            let rectWidth =
-            });
+              rect.get("width") /
+              (drawerForm.objective.range
+                ? drawerForm.objective.questionNumber
+                : drawerForm.objective.optionNumber);
+            let rectHeight =
+              rect.get("height") /
+              (drawerForm.objective.range
+                ? drawerForm.objective.optionNumber
+                : drawerForm.objective.questionNumber);
+            deleteSmallRect(navListIndex.value);
+            createdObjectiveRect(rect, rectWidth, rectHeight);
             fabricItem.set({
               customFrom: {
                 fabricAttribute: drawerForm.objective.questionTypeValue,
@@ -2054,6 +2126,7 @@ const changeFabricInfo = (bool: boolean): void => {
                 ...obj,
               },
             });
+            objectiveNumber(fabricItem, rect, rectWidth, rectHeight);
           }
 
           break;
@@ -2157,8 +2230,72 @@ const getOffsetTop = (
   return offsetTop * top;
 };
 
+// 客观题生成题号
+const objectiveNumber = (
+  fabricItem: any,
+  rect: any,
+  rectWidth: number,
+  rectHeight: number
+): void => {
+  // 边距
+  const obj = {
+    fontSize: 14,
+    fill: "black",
+    fontWeight: "bold",
+    fabricId: cteatedNumber(),
+    backgroundColor: "rgba(255,255,255,0.7)",
+  };
+  if (drawerForm.objective.range) {
+    // 竖向
+    for (let index = 0; index < drawerForm.objective.questionNumber; index++) {
+      let textNumber = 0 as any;
+      if (drawerForm.objective.questionBefore % 1 === 0) {
+        textNumber = drawerForm.objective.questionBefore++;
+      } else {
+        let before = drawerForm.objective.questionBefore.toString().split(".")[0] * 1;
+        let after = drawerForm.objective.questionBefore.toString().split(".")[1] * 1;
+        textNumber = `${before}.${after + index}`;
+      }
+      fabricItem.add(
+        new fabric.Text(`${textNumber}`, {
+          left:
+            rect.get("left") +
+            rectWidth * index +
+            rectWidth / 2 -
+            (drawerForm.objective.questionNumber + 1),
+          top: rect.get("top") + 4,
+          ...obj,
+        })
+      );
+    }
+  } else {
+    // 横向
+    for (let index = 0; index < drawerForm.objective.questionNumber; index++) {
+      let textNumber = 0 as any;
+      if (drawerForm.objective.questionBefore % 1 === 0) {
+        textNumber = drawerForm.objective.questionBefore++;
+      } else {
+        let before = drawerForm.objective.questionBefore.toString().split(".")[0] * 1;
+        let after = drawerForm.objective.questionBefore.toString().split(".")[1] * 1;
+        textNumber = `${before}.${after + index}`;
+      }
+      fabricItem.add(
+        new fabric.Text(`${textNumber}`, {
+          left: rect.get("left") + 4,
+          top:
+            rect.get("top") +
+            rectHeight * index +
+            rectHeight / 2 -
+            (drawerForm.objective.questionNumber + 1),
+          ...obj,
+        })
+      );
+    }
+  }
+};
+
 // 清空小矩形
-const deleteSmallRect = (): void => {
+const deleteSmallRect = (index?: number): void => {
   if (currentFabric.value) {
     const maxRect = currentFabric.value.target
       .getObjects()
@@ -2172,6 +2309,19 @@ const deleteSmallRect = (): void => {
           item.get("type") === "rect" && item.get("fabricId") !== maxRect.get("fabricId")
       );
     currentFabric.value.target.remove(...deleteRectArr);
+    switch (index) {
+      case 3:
+        // 客观题删除题号
+        const allDelText = currentFabric.value.target
+          .getObjects()
+          .filter(
+            (item: any) =>
+              item.get("type") === "text" &&
+              !textFabricList.value.includes(item.get("text"))
+          );
+        currentFabric.value.target.remove(...allDelText);
+        break;
+    }
   }
 };