From 10effb54e0bf5de2538543a203388cc10691f735 Mon Sep 17 00:00:00 2001
From: ocean-gao <gaopandyx@163.com>
Date: Mon, 18 Sep 2023 19:40:30 +0800
Subject: [PATCH] =?UTF-8?q?feat(drawer):=20=E5=A2=9E=E5=8A=A0=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C=E6=8C=89=E9=92=AEloading=E5=92=8C=E6=98=AF=E5=90=A6?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E5=8F=96=E6=B6=88=E7=9A=84=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/drawer/drawer.tsx                  |  14 +-
 .../components/drawer/asyncSubmit.vue         | 150 ++++++++++++++++++
 docs/.vitepress/components/drawer/index.md    |   6 +
 .../components/modal/asyncSubmit.vue          |   4 +-
 4 files changed, 169 insertions(+), 5 deletions(-)
 create mode 100644 docs/.vitepress/components/drawer/asyncSubmit.vue

diff --git a/components/drawer/drawer.tsx b/components/drawer/drawer.tsx
index b21d3f70..051ebfee 100644
--- a/components/drawer/drawer.tsx
+++ b/components/drawer/drawer.tsx
@@ -53,10 +53,15 @@ export const drawerProps = {
         type: String,
         default: '确定',
     },
+    okLoading: Boolean,
     cancelText: {
         type: String,
         default: '取消',
     },
+    showCancel: {
+        type: Boolean,
+        default: true,
+    },
     width: {
         type: [String, Number] as PropType<string | number>,
         default: 520,
@@ -153,12 +158,15 @@ const Drawer = defineComponent({
                             class="btn-margin"
                             size="middle"
                             onClick={handleOk}
+                            loading={props.okLoading}
                         >
                             {props.okText}
                         </FButton>
-                        <FButton size="middle" onClick={handleCancel}>
-                            {props.cancelText}
-                        </FButton>
+                        {props.showCancel && (
+                            <FButton size="middle" onClick={handleCancel}>
+                                {props.cancelText}
+                            </FButton>
+                        )}
                     </>
                 );
             }
diff --git a/docs/.vitepress/components/drawer/asyncSubmit.vue b/docs/.vitepress/components/drawer/asyncSubmit.vue
new file mode 100644
index 00000000..4124d5b8
--- /dev/null
+++ b/docs/.vitepress/components/drawer/asyncSubmit.vue
@@ -0,0 +1,150 @@
+<template>
+    <FForm>
+        <FFormItem label="是否展示取消按钮:">
+            <FRadioGroup
+                v-model="showCancel"
+                :options="[
+                    { label: '是(默认)', value: true },
+                    { label: '否', value: false },
+                ]"
+            />
+        </FFormItem>
+    </FForm>
+
+    <FDivider></FDivider>
+
+    <FSpace>
+        <FButton @click="() => (normalShow = true)">常规</FButton>
+        <FButton @click="() => (customShow = true)">自定义页脚</FButton>
+    </FSpace>
+
+    <FDrawer
+        v-model:show="normalShow"
+        title="常规"
+        displayDirective="if"
+        :footer="true"
+        :okLoading="normalOkLoading"
+        :okText="normalOkText"
+        :showCancel="showCancel"
+        @ok="() => handleNormalOk()"
+        @cancel="normalShow = false"
+    >
+        <div style="height: 1000px">我是内容...</div>
+        <div>我是内容...</div>
+        <div>我是内容...</div>
+    </FDrawer>
+
+    <FDrawer
+        v-model:show="customShow"
+        displayDirective="if"
+        :footer="true"
+        title="自定义页脚"
+    >
+        <div style="height: 1000px">我是内容...</div>
+        <div>我是内容...</div>
+        <div>我是内容...</div>
+        <template #footer>
+            <FSpace justify="end">
+                <FButton
+                    v-show="showCancel"
+                    type="warning"
+                    :loading="customCancelLoading"
+                    @click="handleCustomCancel"
+                >
+                    {{ customCancelText }}
+                </FButton>
+                <FButton
+                    type="primary"
+                    :loading="customOkLoading"
+                    @click="handleCustomOk"
+                >
+                    {{ customOkText }}
+                </FButton>
+            </FSpace>
+        </template>
+    </FDrawer>
+</template>
+
+<script>
+import { ref, nextTick } from 'vue';
+
+function sleep(time) {
+    return new Promise((resolve) => setTimeout(resolve, time));
+}
+
+function useDrawer() {
+    const show = ref(false);
+    const okLoading = ref(false);
+    const cancelLoading = ref(false);
+    const okText = ref('提交更新');
+    const cancelText = ref('数据还原');
+
+    const handleCancel = async () => {
+        cancelLoading.value = true;
+        cancelText.value = '3s后自动关闭';
+        await sleep(3000);
+        cancelLoading.value = false;
+        show.value = false;
+        await nextTick();
+        cancelText.value = '数据还原';
+    };
+    const handleOk = async () => {
+        okLoading.value = true;
+        okText.value = '2s后自动关闭';
+        await sleep(2000);
+        okLoading.value = false;
+        show.value = false;
+        await nextTick();
+        okText.value = '提交更新';
+    };
+
+    return {
+        show,
+        okLoading,
+        cancelLoading,
+        handleCancel,
+        handleOk,
+        okText,
+        cancelText,
+    };
+}
+
+export default {
+    setup() {
+        const showCancel = ref(true);
+
+        const {
+            show: normalShow,
+            okLoading: normalOkLoading,
+            handleOk: handleNormalOk,
+            okText: normalOkText,
+        } = useDrawer();
+
+        const {
+            show: customShow,
+            cancelLoading: customCancelLoading,
+            okLoading: customOkLoading,
+            handleCancel: handleCustomCancel,
+            handleOk: handleCustomOk,
+            okText: customOkText,
+            cancelText: customCancelText,
+        } = useDrawer();
+
+        return {
+            normalShow,
+            normalOkLoading,
+            handleNormalOk,
+            normalOkText,
+            showCancel,
+
+            customShow,
+            customCancelLoading,
+            customOkLoading,
+            handleCustomCancel,
+            handleCustomOk,
+            customOkText,
+            customCancelText,
+        };
+    },
+};
+</script>
diff --git a/docs/.vitepress/components/drawer/index.md b/docs/.vitepress/components/drawer/index.md
index b9efe972..bd39f977 100644
--- a/docs/.vitepress/components/drawer/index.md
+++ b/docs/.vitepress/components/drawer/index.md
@@ -40,6 +40,12 @@ app.use(FDrawer);
 
 --CUSTOMFOOTER
 
+### 异步提交
+
+针对抽屉确认提交操作。
+
+--ASYNCSUBMIT
+
 --CODE
 
 ## Drawer Props
diff --git a/docs/.vitepress/components/modal/asyncSubmit.vue b/docs/.vitepress/components/modal/asyncSubmit.vue
index dff665df..e27c1223 100644
--- a/docs/.vitepress/components/modal/asyncSubmit.vue
+++ b/docs/.vitepress/components/modal/asyncSubmit.vue
@@ -65,7 +65,7 @@ function useModal() {
     const handleCancel = async () => {
         cancelLoading.value = true;
         cancelText.value = '3s后自动关闭';
-        await sleep(2000);
+        await sleep(3000);
         cancelLoading.value = false;
         show.value = false;
         await nextTick();
@@ -74,7 +74,7 @@ function useModal() {
     const handleOk = async () => {
         okLoading.value = true;
         okText.value = '2s后自动关闭';
-        await sleep(3000);
+        await sleep(2000);
         okLoading.value = false;
         show.value = false;
         await nextTick();