From e0ee5f415ab6dacf1614220d3c098a5bc63b3441 Mon Sep 17 00:00:00 2001
From: "xinxin.wu" <xinxin.wu@fit2cloud.com>
Date: Tue, 22 Aug 2023 15:21:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=B3=BB=E7=BB=9F=E8=AE=BE=E7=BD=AE):=20?=
 =?UTF-8?q?=E5=85=AC=E5=85=B1=E7=BB=84=E4=BB=B6dialog=E5=B0=81=E8=A3=85?=
 =?UTF-8?q?=E5=92=8C=E5=BC=82=E6=AD=A5=E5=A4=84=E7=90=86=E5=87=BD=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/pure/ms-dialog/index.vue   | 129 ++++++++++++++++++
 .../components/pure/ms-dialog/locale/en-US.ts |   5 +
 .../components/pure/ms-dialog/locale/zh-CN.ts |   5 +
 frontend/src/hooks/useAsyncFun.ts             |  23 ++++
 4 files changed, 162 insertions(+)
 create mode 100644 frontend/src/components/pure/ms-dialog/index.vue
 create mode 100644 frontend/src/components/pure/ms-dialog/locale/en-US.ts
 create mode 100644 frontend/src/components/pure/ms-dialog/locale/zh-CN.ts
 create mode 100644 frontend/src/hooks/useAsyncFun.ts

diff --git a/frontend/src/components/pure/ms-dialog/index.vue b/frontend/src/components/pure/ms-dialog/index.vue
new file mode 100644
index 0000000000..096d467ac2
--- /dev/null
+++ b/frontend/src/components/pure/ms-dialog/index.vue
@@ -0,0 +1,129 @@
+<template>
+  <a-modal
+    v-model:visible="dialogVisible"
+    title-align="start"
+    :class="['ms-modal-form', `ms-modal-${props.dialogSize}`]"
+    v-bind="attrs"
+    :footer="props.showfooter"
+    :mask-closable="false"
+    @close="handleCancel"
+  >
+    <template #title>
+      {{ t(props.title) }}
+    </template>
+    <slot></slot>
+    <!-- 自定义footer -->
+    <slot name="self-footer"></slot>
+    <!-- 默认footer -->
+    <template #footer>
+      <div class="flex" :class="[props.showSwitch ? 'justify-between' : 'justify-end']">
+        <div v-if="props.showSwitch" class="flex flex-row items-center justify-center">
+          <a-switch v-model="switchEnable" class="mr-1" size="small" />
+          <a-tooltip v-if="props.showSwitchTooltip" :content="t(props.showSwitchTooltip)">
+            <span class="flex items-center"
+              ><span class="mr-2">{{ props.switchName }}</span>
+              <span><svg-icon width="16px" height="16px" :name="'infotip'" /></span
+            ></span>
+          </a-tooltip>
+        </div>
+        <div class="flex justify-end">
+          <a-space>
+            <a-button v-if="showCancel" type="secondary" @click="handleCancel">{{
+              props.cancelText ? t(props.cancelText) : $t('ms.dialog.cancel')
+            }}</a-button>
+            <!-- 自定义确认与取消之间其他按钮可以直接使用loading按钮插槽 -->
+            <slot name="self-button"></slot>
+            <a-button type="primary" :loading="props.loading" :disabled="props.disabledOk" @click="confirmHandler">
+              {{ props.okText ? t(props.okText) : t('ms.dialog.ok') }}
+            </a-button>
+          </a-space>
+        </div>
+      </div>
+    </template>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+  import { ref, useAttrs, watch } from 'vue';
+  import { useI18n } from '@/hooks/useI18n';
+  import { FormInstance } from '@arco-design/web-vue/es/form';
+
+  const { t } = useI18n();
+
+  export type buttontype = 'text' | 'dashed' | 'outline' | 'primary' | 'secondary' | undefined;
+  export type SizeType = 'medium' | 'large' | 'small';
+  export type DialogType = Partial<{
+    dialogSize: SizeType; // 弹窗的宽度尺寸 medium large small
+    showfooter: boolean; // 是否展示footer
+    title: string; // 标题
+    showCancel: boolean; // 是否显示取消按钮
+    okText: string; // 确定按钮的文本
+    cancelText: string; // 取消按钮的文本
+    showSwitchTooltip: string; // 展示开关提示信息描述
+    showSwitch: boolean; // 是否展示开关
+    visible: boolean;
+    confirm: (enable: boolean | undefined) => void; // 确定
+    formRef: FormInstance | null; // 表单ref传入校验
+    disabledOk: boolean; // 确认按钮禁用
+    close: () => void;
+    enable: boolean | undefined; // 开关禁用
+    switchName: string; // 开关后边的名称
+    loading: boolean;
+  }>;
+
+  const props = withDefaults(defineProps<DialogType>(), {
+    showfooter: true,
+    showSwitch: false,
+    showCancel: true,
+    title: '',
+    disabledOk: false,
+    close: Function,
+    enable: undefined,
+  });
+  const emits = defineEmits<{
+    (event: 'close'): void;
+    (event: 'update:visible', visible: boolean): void;
+    (event: 'update:enable', enable: boolean): void;
+  }>();
+
+  const attrs = useAttrs();
+
+  // 单独的开关
+  const switchEnable = ref<boolean>(false);
+  const dialogVisible = ref<boolean>(props.visible);
+
+  watch(
+    () => props.visible,
+    (val) => {
+      dialogVisible.value = val;
+    }
+  );
+
+  watch(
+    () => props.enable,
+    (val) => {
+      switchEnable.value = val;
+    }
+  );
+
+  watch(
+    () => switchEnable.value,
+    (val) => {
+      emits('update:enable', val);
+    }
+  );
+
+  const handleCancel = () => {
+    dialogVisible.value = false;
+    emits('update:visible', false);
+    props?.close();
+  };
+
+  const confirmHandler = async () => {
+    if (props.confirm) {
+      props.confirm(switchEnable.value);
+    }
+  };
+</script>
+
+<style scoped></style>
diff --git a/frontend/src/components/pure/ms-dialog/locale/en-US.ts b/frontend/src/components/pure/ms-dialog/locale/en-US.ts
new file mode 100644
index 0000000000..0f3a789c1f
--- /dev/null
+++ b/frontend/src/components/pure/ms-dialog/locale/en-US.ts
@@ -0,0 +1,5 @@
+export default {
+  'ms.dialog.cancel': 'Cancel',
+  'ms.dialog.ok': 'Confirm',
+  'ms.dialog.saveContinue': 'Save & Continue',
+};
diff --git a/frontend/src/components/pure/ms-dialog/locale/zh-CN.ts b/frontend/src/components/pure/ms-dialog/locale/zh-CN.ts
new file mode 100644
index 0000000000..434c473df6
--- /dev/null
+++ b/frontend/src/components/pure/ms-dialog/locale/zh-CN.ts
@@ -0,0 +1,5 @@
+export default {
+  'ms.dialog.cancel': '取消',
+  'ms.dialog.ok': '确认',
+  'ms.dialog.saveContinue': '保存并继续添加',
+};
diff --git a/frontend/src/hooks/useAsyncFun.ts b/frontend/src/hooks/useAsyncFun.ts
new file mode 100644
index 0000000000..b4860725b5
--- /dev/null
+++ b/frontend/src/hooks/useAsyncFun.ts
@@ -0,0 +1,23 @@
+import { ref } from 'vue';
+
+export default function useAsyncHandler() {
+  const confirmLoading = ref<boolean>(false);
+
+  async function handleAsyncProcess<T>(reqFun: T): Promise<any> {
+    confirmLoading.value = true;
+    try {
+      await reqFun;
+    } catch (error) {
+      console.log(error);
+      confirmLoading.value = false;
+      return new Promise(() => {});
+    } finally {
+      confirmLoading.value = false;
+    }
+  }
+
+  return {
+    confirmLoading,
+    handleAsyncProcess,
+  };
+}