initial commit

src/components/Drawer/index.ts

@@ -0,0 +1,4 @@
+export { default as BasicDrawer } from './src/BasicDrawer';
+
+export { useDrawer, useDrawerInner } from './src/useDrawer';
+export * from './src/types';

src/components/Drawer/src/BasicDrawer.tsx

@@ -0,0 +1,279 @@
+import { Drawer, Row, Col, Button } from 'ant-design-vue';
+import {
+  defineComponent,
+  ref,
+  computed,
+  watchEffect,
+  watch,
+  unref,
+  getCurrentInstance,
+  nextTick,
+  toRaw,
+} from 'vue';
+import { BasicTitle } from '/@/components/Basic';
+import { ScrollContainer, ScrollContainerOptions } from '/@/components/Container/index';
+import { FullLoading } from '/@/components/Loading/index';
+
+import { getSlot } from '/@/utils/helper/tsxHelper';
+
+import { DrawerInstance, DrawerProps, DrawerType } from './types';
+
+import { basicProps } from './props';
+import { isFunction, isNumber } from '/@/utils/is';
+import { LeftOutlined } from '@ant-design/icons-vue';
+// import { appStore } from '/@/store/modules/app';
+// import { useRouter } from 'vue-router';
+import { buildUUID } from '/@/utils/uuid';
+import { deepMerge } from '/@/utils';
+import './index.less';
+
+const prefixCls = 'basic-drawer';
+export default defineComponent({
+  // inheritAttrs: false,
+  props: basicProps,
+  emits: ['visible-change', 'ok', 'close', 'register'],
+  setup(props, { slots, emit, attrs }) {
+    // const { currentRoute } = useRouter();
+    const scrollRef = ref<any>(null);
+    /**
+     * @description: 获取配置ScrollContainer
+     */
+    const getScrollOptions = computed(
+      (): ScrollContainerOptions => {
+        return {
+          ...(props.scrollOptions as any),
+        };
+      }
+    );
+
+    const visibleRef = ref(false);
+    const propsRef = ref<Partial<DrawerProps> | null>(null);
+
+    // 自定义title组件：获得title
+    const getMergeProps = computed((): any => {
+      return deepMerge(toRaw(props), unref(propsRef));
+    });
+
+    const getProps = computed(() => {
+      const opt: any = {
+        // @ts-ignore
+        placement: 'right',
+        ...attrs,
+        ...props,
+        ...(unref(propsRef) as any),
+        visible: unref(visibleRef),
+      };
+      opt.title = undefined;
+
+      if (opt.drawerType === DrawerType.DETAIL) {
+        if (!opt.width) {
+          opt.width = '100%';
+        }
+        opt.wrapClassName = opt.wrapClassName
+          ? `${opt.wrapClassName} ${prefixCls}__detail`
+          : `${prefixCls}__detail`;
+        // opt.maskClosable = false;
+        if (!opt.getContainer) {
+          opt.getContainer = `.default-layout__main`;
+        }
+      }
+      return opt;
+    });
+    watchEffect(() => {
+      visibleRef.value = props.visible;
+    });
+    watch(
+      () => visibleRef.value,
+      (visible) => {
+        // appStore.commitLockMainScrollState(visible);
+        nextTick(() => {
+          emit('visible-change', visible);
+        });
+      },
+      {
+        immediate: false,
+      }
+    );
+
+    // watch(
+    //   () => currentRoute.value.path,
+    //   () => {
+    //     if (unref(visibleRef)) {
+    //       visibleRef.value = false;
+    //     }
+    //   }
+    // );
+    function scrollBottom() {
+      const scroll = unref(scrollRef);
+      if (scroll) {
+        scroll.scrollBottom();
+      }
+    }
+    function scrollTo(to: number) {
+      const scroll = unref(scrollRef);
+      if (scroll) {
+        scroll.scrollTo(to);
+      }
+    }
+    function getScrollWrap() {
+      const scroll = unref(scrollRef);
+      if (scroll) {
+        return scroll.getScrollWrap();
+      }
+      return null;
+    }
+    // 取消事件
+    async function onClose(e: any) {
+      const { closeFunc } = unref(getProps);
+      emit('close', e);
+      if (closeFunc && isFunction(closeFunc)) {
+        const res = await closeFunc();
+        res && (visibleRef.value = false);
+        return;
+      }
+      visibleRef.value = false;
+    }
+
+    function setDrawerProps(props: Partial<DrawerProps>): void {
+      // 保留上一次的setDrawerProps
+      propsRef.value = deepMerge(unref(propsRef) || {}, props);
+      if (Reflect.has(props, 'visible')) {
+        visibleRef.value = !!props.visible;
+      }
+    }
+
+    // 底部按钮自定义实现,
+    const getFooterHeight = computed(() => {
+      const { footerHeight, showFooter }: DrawerProps = unref(getProps);
+      if (showFooter && footerHeight) {
+        return isNumber(footerHeight) ? `${footerHeight}px` : `${footerHeight.replace('px', '')}px`;
+      }
+      return 0;
+    });
+    function renderFooter() {
+      const {
+        showCancelBtn,
+        cancelButtonProps,
+        cancelText,
+        showOkBtn,
+        okType,
+        okText,
+        okButtonProps,
+        confirmLoading,
+        showFooter,
+      }: DrawerProps = unref(getProps);
+
+      return (
+        getSlot(slots, 'footer') ||
+        (showFooter && (
+          <div class={`${prefixCls}__footer`}>
+            {getSlot(slots, 'insertFooter')}
+
+            {showCancelBtn && (
+              <Button {...cancelButtonProps} onClick={onClose} class="mr-2">
+                {() => cancelText}
+              </Button>
+            )}
+            {getSlot(slots, 'centerFooter')}
+            {showOkBtn && (
+              <Button
+                type={okType}
+                {...okButtonProps}
+                loading={confirmLoading}
+                onClick={() => {
+                  emit('ok');
+                }}
+              >
+                {() => okText}
+              </Button>
+            )}
+
+            {getSlot(slots, 'appendFooter')}
+          </div>
+        ))
+      );
+    }
+
+    function renderHeader() {
+      const { title } = unref(getMergeProps);
+      return props.drawerType === DrawerType.DETAIL ? (
+        getSlot(slots, 'title') || (
+          <Row type="flex" align="middle" class={`${prefixCls}__detail-header`}>
+            {() => (
+              <>
+                {props.showDetailBack && (
+                  <Col class="mx-2">
+                    {() => (
+                      <Button size="small" type="link" onClick={onClose}>
+                        {() => <LeftOutlined />}
+                      </Button>
+                    )}
+                  </Col>
+                )}
+                {title && (
+                  <Col style="flex:1" class={[`${prefixCls}__detail-title`, 'ellipsis', 'px-2']}>
+                    {() => title}
+                  </Col>
+                )}
+                {getSlot(slots, 'titleToolbar')}
+              </>
+            )}
+          </Row>
+        )
+      ) : (
+        <BasicTitle>{() => title || getSlot(slots, 'title')}</BasicTitle>
+      );
+    }
+
+    const currentInstance = getCurrentInstance() as any;
+    if (getCurrentInstance()) {
+      currentInstance.scrollBottom = scrollBottom;
+      currentInstance.scrollTo = scrollTo;
+      currentInstance.getScrollWrap = getScrollWrap;
+    }
+    const drawerInstance: DrawerInstance = {
+      setDrawerProps: setDrawerProps,
+    };
+
+    const uuid = buildUUID();
+    emit('register', drawerInstance, uuid);
+
+    return () => {
+      const footerHeight = unref(getFooterHeight);
+
+      return (
+        <Drawer
+          class={prefixCls}
+          onClose={onClose}
+          {...{
+            ...attrs,
+            ...unref(getProps),
+          }}
+        >
+          {{
+            title: () => renderHeader(),
+            default: () => (
+              <>
+                <FullLoading
+                  absolute
+                  class={[!unref(getProps).loading ? 'hidden' : '']}
+                  tip="加载中..."
+                />
+                <ScrollContainer
+                  ref={scrollRef}
+                  {...{ ...attrs, ...unref(getScrollOptions) }}
+                  style={{
+                    height: `calc(100% - ${footerHeight})`,
+                  }}
+                >
+                  {() => getSlot(slots, 'default')}
+                </ScrollContainer>
+                {renderFooter()}
+              </>
+            ),
+          }}
+        </Drawer>
+      );
+    };
+  },
+});

src/components/Drawer/src/index.less

@@ -0,0 +1,63 @@
+@import (reference) '../../../design/index.less';
+@header-height: 50px;
+@footer-height: 60px;
+
+.basic-drawer {
+  .ant-drawer-wrapper-body {
+    overflow: hidden;
+  }
+
+  .ant-drawer-close {
+    &:hover {
+      color: @error-color;
+    }
+  }
+
+  .ant-drawer-body {
+    height: calc(100% - @header-height);
+    padding: 0;
+    background-color: @background-color-dark;
+
+    .scrollbar__wrap {
+      padding: 16px;
+    }
+  }
+
+  &__detail {
+    position: absolute;
+
+    &-header {
+      height: 100%;
+    }
+
+    .ant-drawer-header {
+      width: 100%;
+      height: @header-height;
+      padding: 0;
+      border-top: 1px solid @border-color-base;
+      box-sizing: border-box;
+    }
+
+    .ant-drawer-title {
+      height: 100%;
+    }
+
+    .ant-drawer-close {
+      height: @header-height;
+      line-height: @header-height;
+    }
+
+    .scrollbar__wrap {
+      padding: 0;
+    }
+  }
+
+  &__footer {
+    height: @footer-height;
+    padding: 0 26px;
+    line-height: @footer-height;
+    text-align: right;
+    background: #fff;
+    border-top: 1px solid @border-color-base;
+  }
+}

src/components/Drawer/src/props.ts

@@ -0,0 +1,85 @@
+import type { PropType } from 'vue';
+import { DrawerType } from './types';
+// import {DrawerProps} from './types'
+export const footerProps = {
+  confirmLoading: Boolean as PropType<boolean>,
+  /**
+   * @description: 显示关闭按钮
+   */
+  showCancelBtn: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
+  cancelButtonProps: Object as PropType<any>,
+  cancelText: {
+    type: String as PropType<string>,
+    default: '关闭',
+  },
+  /**
+   * @description: 显示确认按钮
+   */
+  showOkBtn: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
+  okButtonProps: Object as PropType<any>,
+  okText: {
+    type: String as PropType<string>,
+    default: '保存',
+  },
+  okType: {
+    type: String as PropType<string>,
+    default: 'primary',
+  },
+  showFooter: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+  footerHeight: {
+    type: [String, Number] as PropType<string | number>,
+    default: 60,
+  },
+};
+export const basicProps = {
+  drawerType: {
+    type: Number as PropType<number>,
+    default: DrawerType.DEFAULT,
+  },
+  title: {
+    type: String as PropType<string>,
+    default: '',
+  },
+  showDetailBack: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
+  visible: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+  loading: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+  maskClosable: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
+  getContainer: {
+    type: [Object, String] as PropType<any>,
+  },
+  scrollOptions: {
+    type: Object as PropType<any>,
+    default: null,
+  },
+  closeFunc: {
+    type: [Function, Object] as PropType<any>,
+    default: null,
+  },
+  triggerWindowResize: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+  destroyOnClose: Boolean as PropType<boolean>,
+  ...footerProps,
+};

src/components/Drawer/src/types.ts

@@ -0,0 +1,194 @@
+import type { Button } from 'ant-design-vue/types/button/button';
+import type { CSSProperties, VNodeChild } from 'vue';
+import type { ScrollContainerOptions } from '/@/components/Container/index';
+
+export interface DrawerInstance {
+  setDrawerProps: (props: Partial<DrawerProps> | boolean) => void;
+}
+export interface ReturnMethods extends DrawerInstance {
+  openDrawer: (visible?: boolean) => void;
+  transferDrawerData: (data: any) => void;
+}
+export type RegisterFn = (drawerInstance: DrawerInstance, uuid?: string) => void;
+
+export interface ReturnInnerMethods extends DrawerInstance {
+  closeDrawer: () => void;
+  changeLoading: (loading: boolean) => void;
+  changeOkLoading: (loading: boolean) => void;
+  receiveDrawerDataRef: any;
+}
+
+export type UseDrawerReturnType = [RegisterFn, ReturnMethods];
+export type UseDrawerInnerReturnType = [RegisterFn, ReturnInnerMethods];
+export enum DrawerType {
+  DETAIL,
+  DEFAULT,
+}
+
+export interface DrawerFooterProps {
+  showOkBtn: boolean;
+  showCancelBtn: boolean;
+  /**
+   * Text of the Cancel button
+   * @default 'cancel'
+   * @type string
+   */
+  cancelText: string;
+  /**
+   * Text of the OK button
+   * @default 'OK'
+   * @type string
+   */
+  okText: string;
+
+  /**
+   * Button type of the OK button
+   * @default 'primary'
+   * @type string
+   */
+  okType: 'primary' | 'danger' | 'dashed' | 'ghost' | 'default';
+  /**
+   * The ok button props, follow jsx rules
+   * @type object
+   */
+  okButtonProps: { props: Button; on: {} };
+
+  /**
+   * The cancel button props, follow jsx rules
+   * @type object
+   */
+  cancelButtonProps: { props: Button; on: {} };
+  /**
+   * Whether to apply loading visual effect for OK button or not
+   * @default false
+   * @type boolean
+   */
+  confirmLoading: boolean;
+
+  showFooter: boolean;
+  footerHeight: string | number;
+}
+export interface DrawerProps extends DrawerFooterProps {
+  drawerType: DrawerType;
+  loading?: boolean;
+  showDetailBack?: boolean;
+  visible?: boolean;
+  /**
+   * 内置的ScrollContainer组件配置
+   * @type ScrollContainerOptions
+   */
+  scrollOptions?: ScrollContainerOptions;
+  closeFunc?: () => Promise<void>;
+  triggerWindowResize?: boolean;
+  /**
+   * Whether a close (x) button is visible on top right of the Drawer dialog or not.
+   * @default true
+   * @type boolean
+   */
+  closable?: boolean;
+
+  /**
+   * Whether to unmount child components on closing drawer or not.
+   * @default false
+   * @type boolean
+   */
+  destroyOnClose?: boolean;
+
+  /**
+   * Return the mounted node for Drawer.
+   * @default 'body'
+   * @type any ( HTMLElement| () => HTMLElement | string)
+   */
+  getContainer?: () => HTMLElement | string;
+
+  /**
+   * Whether to show mask or not.
+   * @default true
+   * @type boolean
+   */
+  mask?: boolean;
+
+  /**
+   * Clicking on the mask (area outside the Drawer) to close the Drawer or not.
+   * @default true
+   * @type boolean
+   */
+  maskClosable?: boolean;
+
+  /**
+   * Style for Drawer's mask element.
+   * @default {}
+   * @type object
+   */
+  maskStyle?: CSSProperties;
+
+  /**
+   * The title for Drawer.
+   * @type any (string | slot)
+   */
+  title?: VNodeChild | JSX.Element;
+
+  /**
+   * The class name of the container of the Drawer dialog.
+   * @type string
+   */
+  wrapClassName?: string;
+
+  /**
+   * Style of wrapper element which **contains mask** compare to `drawerStyle`
+   * @type object
+   */
+  wrapStyle?: CSSProperties;
+
+  /**
+   * Style of the popup layer element
+   * @type object
+   */
+  drawerStyle?: CSSProperties;
+
+  /**
+   * Style of floating layer, typically used for adjusting its position.
+   * @type object
+   */
+  bodyStyle?: CSSProperties;
+  headerStyle?: CSSProperties;
+
+  /**
+   * Width of the Drawer dialog.
+   * @default 256
+   * @type string | number
+   */
+  width?: string | number;
+
+  /**
+   * placement is top or bottom, height of the Drawer dialog.
+   * @type string | number
+   */
+  height?: string | number;
+
+  /**
+   * The z-index of the Drawer.
+   * @default 1000
+   * @type number
+   */
+  zIndex?: number;
+
+  /**
+   * The placement of the Drawer.
+   * @default 'right'
+   * @type string
+   */
+  placement?: 'top' | 'right' | 'bottom' | 'left';
+  afterVisibleChange?: (visible?: boolean) => void;
+  keyboard?: boolean;
+
+  /**
+   * Specify a callback that will be called when a user clicks mask, close button or Cancel button.
+   */
+  onClose?: (e?: Event) => void;
+}
+export interface DrawerActionType {
+  scrollBottom: () => void;
+  scrollTo: (to: number) => void;
+  getScrollWrap: () => Element | null;
+}

src/components/Drawer/src/useDrawer.ts

@@ -0,0 +1,100 @@
+import type {
+  UseDrawerReturnType,
+  DrawerInstance,
+  ReturnMethods,
+  DrawerProps,
+  UseDrawerInnerReturnType,
+} from './types';
+import { ref, getCurrentInstance, onUnmounted, unref, reactive, computed } from 'vue';
+import { isProdMode } from '/@/utils/env';
+
+const dataTransferRef = reactive<any>({});
+/**
+ * @description: 适用于将drawer独立出去,外面调用
+ */
+export function useDrawer(): UseDrawerReturnType {
+  if (!getCurrentInstance()) {
+    throw new Error('Please put useDrawer function in the setup function!');
+  }
+  const drawerRef = ref<DrawerInstance | null>(null);
+  const loadedRef = ref<boolean | null>(false);
+  const uidRef = ref<string>('');
+
+  function getDrawer(drawerInstance: DrawerInstance, uuid: string) {
+    uidRef.value = uuid;
+    isProdMode() &&
+      onUnmounted(() => {
+        drawerRef.value = null;
+        loadedRef.value = null;
+        dataTransferRef[unref(uidRef)] = null;
+      });
+    if (unref(loadedRef) && isProdMode() && drawerInstance === unref(drawerRef)) {
+      return;
+    }
+    drawerRef.value = drawerInstance;
+    loadedRef.value = true;
+  }
+  const getInstance = () => {
+    const instance = unref(drawerRef);
+    if (!instance) {
+      throw new Error('instance is undefined!');
+    }
+    return instance;
+  };
+  const methods: ReturnMethods = {
+    setDrawerProps: (props: Partial<DrawerProps>): void => {
+      getInstance().setDrawerProps(props);
+    },
+    openDrawer: (visible = true): void => {
+      getInstance().setDrawerProps({
+        visible: visible,
+      });
+    },
+    transferDrawerData(val: any) {
+      dataTransferRef[unref(uidRef)] = val;
+    },
+  };
+
+  return [getDrawer, methods];
+}
+export const useDrawerInner = (): UseDrawerInnerReturnType => {
+  const drawerInstanceRef = ref<DrawerInstance | null>(null);
+  const currentInstall = getCurrentInstance();
+  const uidRef = ref<string>('');
+
+  if (!currentInstall) {
+    throw new Error('instance is undefined!');
+  }
+  const getInstance = () => {
+    const instance = unref(drawerInstanceRef);
+    if (!instance) {
+      throw new Error('instance is undefined!');
+    }
+    return instance;
+  };
+  const register = (modalInstance: DrawerInstance, uuid: string) => {
+    uidRef.value = uuid;
+    drawerInstanceRef.value = modalInstance;
+    currentInstall.emit('register', modalInstance);
+  };
+  return [
+    register,
+    {
+      receiveDrawerDataRef: computed(() => {
+        return dataTransferRef[unref(uidRef)];
+      }),
+      changeLoading: (loading = true) => {
+        getInstance().setDrawerProps({ loading });
+      },
+      changeOkLoading: (loading = true) => {
+        getInstance().setDrawerProps({ confirmLoading: loading });
+      },
+      closeDrawer: () => {
+        getInstance().setDrawerProps({ visible: false });
+      },
+      setDrawerProps: (props: Partial<DrawerProps>) => {
+        getInstance().setDrawerProps(props);
+      },
+    },
+  ];
+};