优化

src/pages/Home/components/LockList.vue

@@ -53,33 +53,7 @@ const activeNames = ref([
   "otherPoint",
 ]);
 const list = ref<any>([]);
-const getData = (data: any, templateInfo: any): void => {
+const getData = (data: any): void => {
-  // 效验
-  let msg = "";
-  if (!templateInfo.headList[2].point.length && !templateInfo.tailsList[2].point.length) {
-    msg = "考号未框选！";
-  }
-  if (!templateInfo.headList[1].point.length && !templateInfo.tailsList[1].point.length) {
-    msg = "学科未框选！";
-  }
-  if (templateInfo.hasPosition) {
-    if (templateInfo.imgSrc.length === 2) {
-      if (
-        templateInfo.headList[0].point.length !== 4 ||
-        templateInfo.tailsList[0].point.length !== 4
-      ) {
-        msg = "定位点未框选完成！";
-      }
-    } else {
-      if (templateInfo.headList[0].point.length !== 4) {
-        msg = "定位点未框选完成！";
-      }
-    }
-  }
-  if (msg) {
-    ElMessage.error(msg);
-    return;
-  }
   // 修改数据
   changeData(data);
   // 显示弹窗内容

src/pages/Home/index.vue

@@ -163,7 +163,11 @@
             <el-button type="primary" size="large" @click="btnClick('save')"
               >保 存</el-button
             >
-            <el-button type="primary" size="large" @click="btnClick('lock')"
+            <el-button
+              type="primary"
+              size="large"
+              @click="btnClick('lock')"
+              :disabled="isLock"
               >锁 定</el-button
             >
           </div>
@@ -503,7 +507,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, reactive, ref, nextTick } from "vue";
+import { onMounted, reactive, ref, nextTick, watch } from "vue";
 import { fabric } from "fabric";
 import { createWorker } from "tesseract.js";
 import html2canvas from "html2canvas";
@@ -712,6 +716,7 @@ const templateInfo = reactive<any>({
   questionList: [],
   otherData: [],
 });
+const isLock = ref<boolean>(false);
 // 画布相关
 const ctx = ref<any>(null);
 const fabricGroup = ref<any>(null);
@@ -747,7 +752,34 @@ onMounted(() => {
     }
   });
 });
-
+watch(
+  () => templateInfo,
+  (_new, _old) => {
+    if (!_new.headList[2].point.length && !_new.tailsList[2].point.length) {
+      isLock.value = true;
+      return;
+    }
+    if (!_new.headList[1].point.length && !_new.tailsList[1].point.length) {
+      isLock.value = true;
+      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;
+          return;
+        }
+      } else {
+        if (_new.headList[0].point.length !== 4) {
+          isLock.value = true;
+          return;
+        }
+      }
+    }
+    isLock.value = false;
+  },
+  { deep: true }
+);
 // 初始化画布并添加事件
 const initCanvas = (): void => {
   imgDom.value = document.getElementById("picture-img");
@@ -1311,6 +1343,7 @@ const boxSelectAfter = async (): Promise<void> => {
         lock: true,
         text: `识别中...`,
         background: "rgba(0, 0, 0, 0.7)",
+        body: true,
       });
       const canvas = await html2canvas(imgDom.value, {
         scale: 4,
@@ -2714,7 +2747,7 @@ const btnClick = (str: string): void => {
   if (str === "save") {
     save(true);
   } else {
-    LockListRef.value.getData(data, templateInfo);
+    LockListRef.value.getData(data);
   }
 };
 

src/utils/request/request.ts

@@ -101,7 +101,8 @@ class Request {
     return new Promise((resolve, reject) => {
       loading = ElLoading.service({
         lock: true,
-        background: 'rgba(255,255, 255, 0.3)',
+        background: 'rgba(0,0, 0, 0.7)',
+        text: `加载中...`,
         body: true
       })
       if (config.interceptors?.requestInterceptors) {