From 931571cf9f01c18c06b53688eee11ee80ba668df Mon Sep 17 00:00:00 2001
From: lizijiee <562949697@qq.com>
Date: Tue, 26 Mar 2024 00:08:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=88=9B=E5=BB=BA?=
 =?UTF-8?q?=E6=9F=A5=E9=87=8D=E4=BB=BB=E5=8A=A1loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/content/Content.vue            |  8 ++-
 .../content/modal/QueryRepeatedTasksModal.vue | 50 +++++++++++++++++++
 2 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 src/views/home/content/modal/QueryRepeatedTasksModal.vue

diff --git a/src/views/home/content/Content.vue b/src/views/home/content/Content.vue
index 1574f02..665bc0b 100644
--- a/src/views/home/content/Content.vue
+++ b/src/views/home/content/Content.vue
@@ -18,6 +18,7 @@ import { computed, nextTick, onMounted, onUnmounted, onUpdated, reactive, ref, u
 import GeneratePackageModal from './modal/GeneratePackageModal.vue'
 import LoginSuccessModal from './modal/LoginSuccessModal.vue'
 import PackageSettingsModal from './modal/PackageSettingsModal.vue'
+import QueryRepeatedTasksModal from './modal/QueryRepeatedTasksModal.vue'
 import type { PictureSortParam } from "/#/api"
 
 const deviceHeight = ref(600)
@@ -33,6 +34,7 @@ const pagination = reactive({
 const configStore = useConfig()
 const packageModalRef = ref(null)
 const generateModalRef = ref(null)
+const queryRepeatedTasksModalRef = ref(null)
 const LoginSuccessModalRef = ref(null)
 const loading = ref(false)
 const message = useMessage()
@@ -196,6 +198,7 @@ const gridHeight = computed(() => {
 async function oneCheck() {
   const asideVal = cloneDeep(configStore.getAsideValue)
   asideVal.izyear = dayjs(asideVal.izyear[0]).format("YYYY/MM/DD") + '-' + dayjs(asideVal.izyear[1]).format("YYYY/MM/DD")
+  const tasksLoadingModal = queryRepeatedTasksModalRef.value as any
   delete asideVal.izsimilarity
   if (checkDuplicateNo.value) {
     getCheckDuplicateStatus(checkDuplicateNo.value).then((res) => {
@@ -213,14 +216,14 @@ async function oneCheck() {
           reset()
           loadMore()
         } else if (checkTaskStatus.value === 1) {
-          message.success("请等待，查重任务正在创建中...");
+          tasksLoadingModal.showModal()
           return
         }
       }
     })
     return
   }
-  message.success("请等待，查重任务正在创建中...");
+  tasksLoadingModal.showModal()
   oneClickCheckTaskPackage(asideVal).then((res) => {
     if (res.code === "OK") {
       checkDuplicateNo.value = res.data.checkDuplicateNo
@@ -458,6 +461,7 @@ function previewHandler(index: number, event: MouseEvent) {
     </div>
     <PackageSettingsModal ref="packageModalRef" @commit="commitHandler" />
     <GeneratePackageModal ref="generateModalRef" />
+    <QueryRepeatedTasksModal ref="queryRepeatedTasksModalRef" />
     <LoginSuccessModal ref="LoginSuccessModalRef" />
   </div>
 </template>
diff --git a/src/views/home/content/modal/QueryRepeatedTasksModal.vue b/src/views/home/content/modal/QueryRepeatedTasksModal.vue
new file mode 100644
index 0000000..f0f2a4a
--- /dev/null
+++ b/src/views/home/content/modal/QueryRepeatedTasksModal.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const show = ref(false)
+
+const stys = {
+  'width': '424px',
+  'height': '192px',
+  '--n-padding-bottom': '0px',
+  '--n-padding-left': '0px',
+  'background': 'linear-gradient(132deg, rgba(255, 255, 255, 0.32) 21%, rgba(152, 172, 255, 0.14) 100%)',
+  'border-radius': '4px',
+  'box-shadow': '0px 12px 48px 16px rgba(0, 0, 0, 0.03)',
+  'backdrop-filter': ' blur(10px)',
+}
+
+function showModal() {
+  show.value = true
+}
+
+function closeModal() {
+  show.value = false
+}
+
+defineExpose({
+  showModal,
+  closeModal,
+})
+</script>
+
+<template>
+  <n-modal v-model:show="show" :mask-closable="false" transform-origin="center">
+    <n-card :style="stys" :bordered="false" role="dialog" aria-modal="true">
+      <div class="wrapper">
+        <svg-icon size="90" name="robot2" />
+        <span style="margin-top: 24px;">正在查重中</span>
+      </div>
+    </n-card>
+  </n-modal>
+</template>
+
+<style lang="less" scoped>
+.wrapper {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+</style>