优化

src/pages/Home/components/LockList.vue

@@ -9,7 +9,7 @@
   >
     <div>
       <div style="font-size: 20px; margin-bottom: 20px; font-weight: bold">
-        锁定模板后，无法修改，请确认模板信息后操作：
+        锁定模板后，仅可调整位置和大小，无法增删题目，请确认模板信息后操作：
       </div>
       <div style="height: 70vh; overflow-y: auto">
         <el-collapse v-model="activeNames">
@@ -17,7 +17,7 @@
             <div v-if="item.key !== 'otherPoint'">
               <div v-if="item.data.length">
                 <div v-for="row in item.data">
-                  {{ row.questionBefore }}-{{ row.questionAfter }}题 总分{{ row.score }}分
+                  {{ row.questionBefore }}-{{ row.questionAfter }}题 每题{{ row.score }}分
                 </div>
               </div>
               <div v-else>

src/pages/Home/index.vue

@@ -24,7 +24,12 @@
             <img src="@/assets/image/icon1.png" alt="" v-if="item.index !== 5" />
           </div>
         </div>
-        <div class="warp-nav-tab-delete" title="清空全部痕迹" @click="clearFabricGroup">
+        <div
+          class="warp-nav-tab-delete"
+          title="清空全部痕迹"
+          @click="clearFabricGroup"
+          v-if="!isLockStatus"
+        >
           <img src="@/assets/image/icon2.png" alt="" />
           <span>清空全部痕迹</span>
         </div>
@@ -168,8 +173,8 @@
               type="primary"
               size="large"
               @click="btnClick('lock')"
-              :disabled="isLock"
-              >锁 定</el-button
+              :disabled="isLockStatus || isLockDisabled"
+              >{{ isLockStatus ? "已锁定" : "锁 定" }}</el-button
             >
           </div>
         </div>
@@ -237,6 +242,7 @@
             <span>考号长度：</span>
             <div>
               <el-input-number
+                :disabled="isLockStatus"
                 :min="4"
                 :max="12"
                 v-model="drawerForm.examId.examIdLength"
@@ -273,7 +279,7 @@
           <FabricSize
             :change="changeFabricPositionNumber"
             ref="FabricSizeRef"
-            v-if="ctx.getActiveObject()"
+            v-if="currentFabric"
           />
         </div>
         <div class="drawer-custom-style-body-footer">
@@ -311,7 +317,10 @@
           <div>
             <span>排列：</span>
             <div>
-              <el-radio-group v-model="drawerForm.objective.range">
+              <el-radio-group
+                v-model="drawerForm.objective.range"
+                :disabled="isLockStatus"
+              >
                 <el-radio :value="0">横向</el-radio>
                 <el-radio :value="1">竖向</el-radio>
               </el-radio-group>
@@ -324,7 +333,7 @@
                 style="width: 164px"
                 v-model="drawerForm.objective.optionNumber"
                 :min="2"
-                :disabled="drawerForm.objective.questionTypeValue === 2"
+                :disabled="drawerForm.objective.questionTypeValue === 2 || isLockStatus"
                 :step-strictly="true"
                 :max="24"
               />
@@ -334,6 +343,7 @@
             <span>题量：</span>
             <div>
               <el-input-number
+                :disabled="isLockStatus"
                 style="width: 164px"
                 v-model="drawerForm.objective.questionNumber"
                 :min="1"
@@ -346,6 +356,7 @@
             <span>题号：</span>
             <div>
               <el-input-number
+                :disabled="isLockStatus"
                 v-model="drawerForm.objective.questionBefore"
                 :min="1"
                 :controls="false"
@@ -365,6 +376,7 @@
             <span>每题分数：</span>
             <div>
               <el-input-number
+                :disabled="isLockStatus"
                 style="width: 164px"
                 v-model="drawerForm.objective.score"
                 :min="0"
@@ -405,7 +417,7 @@
           <FabricSize
             :change="changeFabricPositionNumber"
             ref="FabricSizeRef"
-            v-if="ctx.getActiveObject()"
+            v-if="currentFabric"
           />
         </div>
         <div class="drawer-custom-style-body-footer">
@@ -450,6 +462,7 @@
             <div>
               <el-input-number
                 v-model="drawerForm.subjective.questionBefore"
+                :disabled="isLockStatus"
                 :min="1"
                 :controls="false"
                 :step-strictly="true"
@@ -462,6 +475,7 @@
               ——
               <el-input-number
                 v-model="drawerForm.subjective.questionAfter"
+                :disabled="isLockStatus"
                 :min="1"
                 :controls="false"
                 :step-strictly="true"
@@ -474,6 +488,7 @@
             <div>
               <el-input-number
                 v-model="drawerForm.subjective.score"
+                :disabled="isLockStatus"
                 style="width: 152px"
                 :min="0"
                 :precision="1"
@@ -484,7 +499,7 @@
           <FabricSize
             :change="changeFabricPositionNumber"
             ref="FabricSizeRef"
-            v-if="ctx.getActiveObject()"
+            v-if="currentFabric"
           />
         </div>
         <div class="drawer-custom-style-body-footer">
@@ -717,7 +732,8 @@ const templateInfo = reactive<any>({
   questionList: [],
   otherData: [],
 });
-const isLock = ref<boolean>(false);
+const isLockStatus = ref<boolean>(false);
+const isLockDisabled = ref<boolean>(false);
 const currentNavListIndex = ref<number>(3);
 // 画布相关
 const ctx = ref<any>(null);
@@ -728,7 +744,8 @@ const currentFabric = ref<any>(null);
 onMounted(() => {
   GetOcrDetail(router.currentRoute.value.query.mid as string).then((res: any) => {
     if (res.code === 200) {
-      const { mainName, hasPosition, paperType, detail } = res.data;
+      const { mainName, hasPosition, paperType, detail, isLock } = res.data;
+      isLockStatus.value = isLock;
       templateInfo.name = mainName;
       templateInfo.hasPosition = hasPosition;
       templateInfo.type = paperType === 1 ? "A3" : "A4";
@@ -749,31 +766,31 @@ watch(
   () => templateInfo,
   (_new, _old) => {
     if (!_new.headList[2].point.length && !_new.tailsList[2].point.length) {
-      isLock.value = true;
+      isLockDisabled.value = true;
       currentNavListIndex.value = 2;
       return;
     }
     if (!_new.headList[1].point.length && !_new.tailsList[1].point.length) {
-      isLock.value = true;
+      isLockDisabled.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;
+          isLockDisabled.value = true;
           currentNavListIndex.value = 0;
           return;
         }
       } else {
         if (_new.headList[0].point.length !== 4) {
-          isLock.value = true;
+          isLockDisabled.value = true;
           currentNavListIndex.value = 0;
           return;
         }
       }
     }
-    isLock.value = false;
+    isLockDisabled.value = false;
   },
   { deep: true }
 );
@@ -802,6 +819,10 @@ const initCanvas = (): void => {
     height: imgDom.value.clientHeight,
   });
   ctx.value.on("mouse:down", (e: any) => {
+    if (isLockStatus.value && !e.target) {
+      ElMessage.error("已锁定，无法新增！");
+      return;
+    }
     const templateInfoItem = getTemplateInfo(true);
     if (templateInfoItem[0].point.length === 4) {
       if (isMoveOutView()) {
@@ -818,6 +839,9 @@ const initCanvas = (): void => {
         }
       }
     }
+    if (e.target) {
+      setStepClick(e.target.get("fabricType"));
+    }
     canvasMouseDown(e.e, e.target, e.subTargets);
   });
   ctx.value.on("mouse:move", (e: any) => {
@@ -906,9 +930,15 @@ const canvasMouseDown = (e: MouseEvent, target: any, subTargets: any): void => {
             const itemTarget = target
               .getObjects()
               .find((i: any) => i.fabricId === row.fabricId);
-            itemTarget && row.fabricId === itemTarget.fabricId
-              ? itemTarget.set({ visible: true })
-              : row.set({ visible: false });
+            if (itemTarget && row.fabricId === itemTarget.fabricId) {
+              if (isLockStatus.value && itemTarget.get("text") === "删除") {
+                row.set({ visible: false });
+              } else {
+                itemTarget.set({ visible: true });
+              }
+            } else {
+              row.set({ visible: false });
+            }
           } else {
             row.set({ visible: false });
           }
@@ -974,7 +1004,7 @@ const canvasMouseUp = async (): Promise<void> => {
       hasControls: false,
       subTargetCheck: true,
       borderColor: "transparent",
-      selectionBackgroundColor: "transparent",
+      selectionBackgroundColor: "red",
       fabricType: navListIndex.value,
       fabricId: cteatedNumber(),
     }).on("mousemove", (e: any) => {
@@ -1017,9 +1047,13 @@ const canvasMouseUp = async (): Promise<void> => {
       }).then((res) => {
         if (res.code === 200) {
           const rectTitle = ["右上角", "右下角"];
+          const rectFooterTitle = ["左下角", "右下角"];
           if (rectTitle.includes(getCurrentText())) {
             res.data.x = res.data.x + res.data.width;
           }
+          if (rectFooterTitle.includes(getCurrentText())) {
+            res.data.y = res.data.y - res.data.height;
+          }
           addFabric(
             "rect",
             { ...obj, title: getTextTitle(), rectPosition: res.data },
@@ -1027,7 +1061,9 @@ const canvasMouseUp = async (): Promise<void> => {
               left: rectTitle.includes(getCurrentText())
                 ? res.data.x - res.data.width
                 : res.data.x,
-              top: res.data.y,
+              top: rectFooterTitle.includes(getCurrentText())
+                ? res.data.y + res.data.height
+                : res.data.y,
               width: res.data.width,
               height: res.data.height,
               stroke: "red",
@@ -1450,7 +1486,7 @@ const isDisabledDraw = (): boolean => {
         fabricItem.forEach((item: any) => {
           let row = item.getObjects().filter((obj: any) => obj.get("text") === "缺考");
           if (row) {
-            hasQueKao.push(row);
+            hasQueKao.push(...row);
           }
         });
         isDisabledDrawStatus = hasQueKao.length === 0;
@@ -1611,7 +1647,7 @@ const showFabricData = (): void => {
           hasControls: false,
           subTargetCheck: true,
           borderColor: "transparent",
-          selectionBackgroundColor: "transparent",
+          selectionBackgroundColor: "rgba(255,0,0,0.5)",
           fabricType: item.fabricType,
           left: item.left,
           top: item.top,
@@ -2261,11 +2297,11 @@ const objectiveNumber = (
 ): void => {
   // 边距
   const obj = {
-    fontSize: 14,
+    fontSize: 12,
     fill: "black",
-    fontWeight: "bold",
+    fontWeight: "normal",
     fabricId: cteatedNumber(),
-    backgroundColor: "rgba(255,255,255,0.7)",
+    backgroundColor: "transparent",
   };
   if (drawerForm.objective.range) {
     // 竖向
@@ -2498,6 +2534,10 @@ const isQuestionNumerRepeat = (): boolean => {
 
 // 修改考试类型
 const changeExamType = (type: number): void => {
+  if (isLockStatus.value) {
+    ElMessage.error("已锁定，无法修改！");
+    return;
+  }
   drawerForm.examId.examType = type;
 };
 
@@ -2538,6 +2578,10 @@ const changeQuestion = (e?: any): void => {
 
 // 修改客观题题型
 const changeObjectiveQuestionType = (item: { value: number; text: string }): void => {
+  if (isLockStatus.value) {
+    ElMessage.error("已锁定，无法修改！");
+    return;
+  }
   if (navListIndex.value === 3) {
     drawerForm.objective.questionTypeValue = item.value;
     drawerForm.objective.optionNumber =
@@ -2892,7 +2936,7 @@ const changeData = (): any => {
       return {
         ...row.customFrom,
         width: row.width,
-        height: row.height,
+        height: row.height - 36.16 / 2,
         top: row.top + 17,
         left: row.left,
       };