From 0076db342be986957d94666bb7adb89e95760f2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E8=96=AA=E5=90=8D?= <942005050@qq.com>
Date: Wed, 20 Mar 2024 17:54:41 +0800
Subject: [PATCH] =?UTF-8?q?dialog=20=E9=81=AE=E7=BD=A9=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BasicForm/src/BasicForm.vue |  4 ++-
 src/components/Dialog/src/Dialog.vue       | 31 +++++++++++++++++++++-
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/components/BasicForm/src/BasicForm.vue b/src/components/BasicForm/src/BasicForm.vue
index 4c96ef8e5..70695a55e 100644
--- a/src/components/BasicForm/src/BasicForm.vue
+++ b/src/components/BasicForm/src/BasicForm.vue
@@ -4,8 +4,9 @@
     v-model="dialogVisible"
     :width="dialogWidth"
     :close-on-click-modal="false"
-    v-loading="formLoading"
+    :vLoading="formLoading"
   >
+  
   <div 
     style="max-height: 60vh;overflow-y: auto;">
     <Form
@@ -106,6 +107,7 @@
     <template #footer>
       <ButtonBase :Butttondata="Butttondata" @button-base-click="buttonBaseClick" />
     </template>
+  
   </Dialog>
   <SearchTable ref="searchTableRef" @searchTableSuccess="searchTableSuccess" />
 </template>
diff --git a/src/components/Dialog/src/Dialog.vue b/src/components/Dialog/src/Dialog.vue
index a1eb550c8..69aba1b11 100644
--- a/src/components/Dialog/src/Dialog.vue
+++ b/src/components/Dialog/src/Dialog.vue
@@ -11,7 +11,8 @@ const props = defineProps({
   fullscreen: propTypes.bool.def(true),
   width: propTypes.oneOfType([String, Number]).def('40%'),
   scroll: propTypes.bool.def(false), // 是否开启滚动条。如果是的话，按照 maxHeight 设置最大高度
-  maxHeight: propTypes.oneOfType([String, Number]).def('400px')
+  maxHeight: propTypes.oneOfType([String, Number]).def('400px'),
+  vLoading:propTypes.bool.def(false)
 })
 
 const getBindValue = computed(() => {
@@ -50,11 +51,38 @@ watch(
   }
 )
 
+const demo = ref()
+watch(
+  () => props.vLoading,
+  async (val: boolean) => {
+    await nextTick()
+    if (val) {
+      initDialog()
+    } else {
+      demo.close()
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
 const dialogStyle = computed(() => {
   return {
     height: unref(dialogHeight)
   }
 })
+
+
+const initDialog = () => {
+  // 用服务生成一个el-loading实例，包括了自定义svg的指令如何在服务中使用
+  demo.value = ElLoading.service({ target: '.loading', text: '加载中...', background: 'rgba(246, 246, 246, 0.8)' })
+  // setTimeout(() => {
+  //   // 延时执行关闭，对应dom清除，如要再使用loading，需重新生成新实例
+  //   demo.close()
+  // }, 5000)
+}
+
 </script>
 
 <template>
@@ -68,6 +96,7 @@ const dialogStyle = computed(() => {
     draggable
     class="com-dialog"
     :show-close="false"
+    custom-class="loading"
   >
     <template #header="{ close }">
       <div class="relative h-54px flex items-center justify-between pl-15px pr-15px">