fix: fix message type error

Author: anncwb

CHANGELOG.zh_CN.md

@@ -23,6 +23,7 @@
 - 修复表格开启搜索表单折叠问题
 - 修复表格 size 为 samll 时候，fixed 列样式问题
 - 修复多标签页关闭报错问题
+- 修复 message 类型错误
 
 ## 2.0.0-rc.7 (2020-10-31)
 

src/components/Container/src/collapse/CollapseHeader.vue

@@ -11,22 +11,15 @@
 
     <div class="collapse-container__action">
       <slot name="action" />
-      <BasicArrow v-if="$attrs.canExpan" :expand="$attrs.show" @click="handleExpand" />
+      <BasicArrow v-if="$attrs.canExpan" :expand="$attrs.show" @click="$emit('expand')" />
     </div>
   </div>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
-  import { BasicArrow } from '/@/components/Basic';
-  import { BasicTitle } from '/@/components/Basic';
+  import { BasicArrow, BasicTitle } from '/@/components/Basic';
   export default defineComponent({
     inheritAttrs: false,
     components: { BasicArrow, BasicTitle },
-    setup(_, { emit }) {
-      function handleExpand() {
-        emit('expand');
-      }
-      return { handleExpand };
-    },
   });
 </script>

src/hooks/core/asyncComputed.ts

@@ -0,0 +1,56 @@
+import { ref, watchEffect, Ref } from 'vue';
+
+/**
+ * Handle overlapping async evaluations
+ *
+ * @param cancelCallback The provided callback is invoked when a re-evaluation of the computed value is triggered before the previous one finished
+ */
+export type AsyncComputedOnCancel = (cancelCallback: () => void) => void;
+
+/**
+ * A two-item tuple with the first item being a ref to the computed value and the second item holding a boolean ref, indicating whether the async computed value is currently (re-)evaluated
+ */
+export type AsyncComputedResult<T> = [Ref<T>, Ref<boolean>];
+
+/**
+ * Create an asynchronous computed dependency
+ *
+ * @param evaluationCallback     The promise-returning callback which generates the computed value
+ * @param defaultValue           A default value, used until the first evaluation finishes
+ */
+export function asyncComputed<T>(
+  evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>,
+  defaultValue?: T
+): AsyncComputedResult<T> {
+  let counter = 0;
+  const current = ref(defaultValue) as Ref<T>;
+  const evaluating = ref<boolean>(false);
+
+  watchEffect(async (onInvalidate: Fn) => {
+    counter++;
+    const counterAtBeginning = counter;
+    let hasFinished = false;
+
+    try {
+      // Defer initial setting of `evaluating` ref
+      // to avoid having it as a dependency
+      Promise.resolve().then(() => {
+        evaluating.value = true;
+      });
+
+      const result = await evaluationCallback((cancelCallback) => {
+        onInvalidate(() => {
+          evaluating.value = false;
+          if (!hasFinished) cancelCallback();
+        });
+      });
+
+      if (counterAtBeginning === counter) current.value = result;
+    } finally {
+      evaluating.value = false;
+      hasFinished = true;
+    }
+  });
+
+  return [current, evaluating];
+}

src/hooks/core/types.ts

@@ -1,5 +1,5 @@
 import type { VNode, Ref } from 'vue';
-import type { ModalOptions } from 'ant-design-vue/types/modal';
+import type { ModalFuncProps } from 'ant-design-vue/lib/modal/index';
 
 export type Fn<T> = () => T;
 export type AnyFn<T> = (...arg: any) => T;
@@ -86,7 +86,7 @@ export interface MessageOptions {
   /** Set the distance to the top of viewport. Default is 20 px. */
   offset?: number;
 }
-export interface ModalOptionsEx extends Omit<ModalOptions, 'iconType'> {
+export interface ModalOptionsEx extends Omit<ModalFuncProps, 'iconType'> {
   iconType: 'warning' | 'success' | 'error' | 'info';
 }
 export type ModalOptionsPartial = Partial<ModalOptionsEx> & Pick<ModalOptionsEx, 'content'>;

src/hooks/web/useMessage.tsx

@@ -1,11 +1,19 @@
 import type { ModalOptionsEx, ModalOptionsPartial } from '/@/hooks/core/types';
+import type { ModalFunc, ModalFuncProps } from 'ant-design-vue/lib/modal/Modal';
 
 import { Modal, message as Message, notification } from 'ant-design-vue';
 import { InfoCircleFilled, CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons-vue';
-import { ModalOptions, ModalConfirm } from 'ant-design-vue/types/modal';
 
 import { useSetting } from '/@/hooks/core/useSetting';
 
+interface ConfirmOptions {
+  info: ModalFunc;
+  success: ModalFunc;
+  error: ModalFunc;
+  warn: ModalFunc;
+  warning: ModalFunc;
+}
+
 const { projectSetting } = useSetting();
 
 function getIcon(iconType: string) {
@@ -20,22 +28,22 @@ function getIcon(iconType: string) {
   }
 }
 function renderContent({ content }: Pick<ModalOptionsEx, 'content'>) {
-  return <div innerHTML={`<div>${content}</div>`}></div>;
+  return <div innerHTML={`<div>${content as string}</div>`}></div>;
 }
 
 /**
  * @description: Create confirmation box
  */
-function createConfirm(options: ModalOptionsEx): ModalConfirm {
+function createConfirm(options: ModalOptionsEx): ConfirmOptions {
   const iconType = options.iconType || 'warning';
   Reflect.deleteProperty(options, 'iconType');
-  const opt: ModalOptions = {
+  const opt: ModalFuncProps = {
     centered: true,
     icon: getIcon(iconType),
     ...projectSetting.messageSetting,
     ...options,
   };
-  return Modal.confirm(opt);
+  return Modal.confirm(opt) as any;
 }
 const baseOptions = {
   okText: '确定',

src/utils/index.ts

@@ -1,3 +1,7 @@
+export const timestamp = () => +Date.now();
+export const clamp = (n: number, min: number, max: number) => Math.min(max, Math.max(min, n));
+export const noop = () => {};
+export const now = () => Date.now();
 /**
  * @description:  Set ui mount node
  */