@oinone/kunlun-vue-admin-base 6.3.9 → 6.4.0

package/src/view/popup/dialog/DefaultDialog.vue

@@ -1,15 +1,26 @@
 <script lang="ts">
 import { ViewType } from '@oinone/kunlun-meta';
-import { CastHelper, OioButton, OioModal, PropRecordHelper, StringHelper } from '@oinone/kunlun-vue-ui-antd';
+import {
+  CastHelper,
+  DrawerWidth,
+  ModalWidth,
+  OioButton,
+  OioModal,
+  PopupDisplayAs,
+  PropRecordHelper,
+  StringHelper
+} from '@oinone/kunlun-vue-ui-antd';
 import { onAllMounted } from '@oinone/kunlun-vue-widget';
-import { createVNode, defineComponent, PropType } from 'vue';
+import { computed, createVNode, defineComponent, PropType, ref } from 'vue';
+import { OioSimplePagination } from '../../../components';
 import { FooterProps, useFooter } from '../useFooter';
 
 export default defineComponent({
   name: 'DefaultDialog',
   components: {
     OioModal,
-    OioButton
+    OioButton,
+    OioSimplePagination
   },
   inheritAttrs: false,
   props: {
@@ -50,6 +61,9 @@ export default defineComponent({
     height: {
       type: [Number, String]
     },
+    defaultSize: {
+      type: String as PropType<keyof typeof ModalWidth>
+    },
     zIndex: {
       type: Number
     },
@@ -78,14 +92,84 @@ export default defineComponent({
     },
     allMounted: {
       type: Function
+    },
+    // 是否显示切换全屏按钮
+    enabledFullScreen: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示切换窗口类型按钮
+    showPopupToggle: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示上一条、下一条数据切换
+    showQuickToggle: {
+      type: Boolean,
+      default: false
+    },
+    // 列表视图总页数
+    listViewTotalPage: {
+      type: Number,
+      default: 0
+    },
+    // 列表视图当前行号
+    listViewRowNumber: {
+      type: Number,
+      default: 1
+    },
+    onChangeRowNumber: {
+      type: Function
     }
   },
   setup(props) {
+    const displayAs = ref(PopupDisplayAs.modal);
+
+    const width = computed(() => {
+      if (props.width == null) {
+        switch (displayAs.value) {
+          case PopupDisplayAs.drawer:
+            return DrawerWidth[props.defaultSize || 'medium'];
+          case PopupDisplayAs.modal:
+            return ModalWidth[props.defaultSize || 'medium'];
+        }
+      }
+      return props.width;
+    });
+
+    const isFullscreen = computed(() => {
+      return props.width === 'FULL' && props.height === 'FULL';
+    });
+
+    const enabledFullScreen = computed(() => {
+      if (isFullscreen.value) {
+        return false;
+      }
+      return props.enabledFullScreen;
+    });
+
+    const showPopupToggle = computed(() => {
+      if (isFullscreen.value) {
+        return false;
+      }
+      return props.showPopupToggle;
+    });
+
+    const onDisplayAsChange = (val: PopupDisplayAs) => {
+      displayAs.value = val;
+    };
+
     onAllMounted(() => {
       props.allMounted?.();
     });
 
-    return {};
+    return {
+      displayAs,
+      width,
+      enabledFullScreen,
+      showPopupToggle,
+      onDisplayAsChange
+    };
   },
   render() {
     const {
@@ -93,6 +177,8 @@ export default defineComponent({
       currentHandle,
       visible,
       onVisibleChange,
+      displayAs,
+      onDisplayAsChange,
       destroyOnClose,
       teleport,
       title,
@@ -108,7 +194,13 @@ export default defineComponent({
       footerInvisible,
       onOk,
       onCancel,
-      viewType
+      viewType,
+      showPopupToggle,
+      enabledFullScreen,
+      showQuickToggle,
+      listViewTotalPage,
+      listViewRowNumber,
+      onChangeRowNumber
     } = this;
     const children = PropRecordHelper.collectionSlots($slots, [
       { origin: 'default', isNotNull: true },
@@ -121,6 +213,31 @@ export default defineComponent({
       ];
     }
 
+    if (showQuickToggle) {
+      /**
+       * 上一条、下一条数据切换
+       */
+      const defaultFooterSlot = children.footer();
+      children.footer = () => [
+        createVNode(
+          'div',
+          {
+            class: 'default-dialog-pre-next-switch-footer'
+          },
+          {
+            default: () => [
+              createVNode(OioSimplePagination, {
+                total: listViewTotalPage,
+                current: listViewRowNumber,
+                onChange: onChangeRowNumber
+              }),
+              ...defaultFooterSlot
+            ]
+          }
+        )
+      ];
+    }
+
     return createVNode(
       OioModal,
       {
@@ -144,10 +261,14 @@ export default defineComponent({
         maskClosable,
         headerInvisible,
         footerInvisible,
+        displayAs,
         destroyOnClose,
+        enabledFullScreen,
+        showPopupToggle,
         enterCallback: onOk,
         cancelCallback: onCancel,
-        'onUpdate:visible': onVisibleChange
+        'onUpdate:visible': onVisibleChange,
+        'onUpdate:displayAs': onDisplayAsChange
       },
       children
     );

package/src/view/popup/dialog/DialogWidget.ts

@@ -1,11 +1,11 @@
 import { DEFAULT_SLOT_NAME } from '@oinone/kunlun-dsl';
+import { Expression, ExpressionRunParam } from '@oinone/kunlun-expression';
 import { BooleanHelper } from '@oinone/kunlun-shared';
-import { ModalWidth, OioModalProps } from '@oinone/kunlun-vue-ui-common';
+import { ModalWidth } from '@oinone/kunlun-vue-ui-common';
 import { Widget } from '@oinone/kunlun-vue-widget';
 import { PopupScene } from '../../../typing';
 import { PopupWidget, PopupWidgetProps } from '../PopupWidget';
 import DefaultDialog from './DefaultDialog.vue';
-import { Expression, ExpressionRunParam } from '@oinone/kunlun-expression';
 
 export type DialogWidgetProps = PopupWidgetProps;
 
@@ -29,8 +29,11 @@ export class DialogWidget<Props extends DialogWidgetProps = DialogWidgetProps> e
   }
 
   @Widget.Reactive()
-  public get title() {
-    const title = this.getDsl().title || OioModalProps.title.default;
+  public get title(): string | undefined {
+    const title = this.getDsl().title;
+    if (!title) {
+      return undefined;
+    }
 
     return Expression.run(
       {
@@ -57,12 +60,12 @@ export class DialogWidget<Props extends DialogWidgetProps = DialogWidgetProps> e
 
   @Widget.Reactive()
   protected get wrapperClassName(): string | undefined {
-    return this.getDsl()?.wrapperClassName;
+    return this.getDsl().wrapperClassName;
   }
 
   @Widget.Reactive()
   public get width() {
-    return this.getDsl().width || ModalWidth.medium;
+    return this.getDsl().width;
   }
 
   @Widget.Reactive()
@@ -70,6 +73,11 @@ export class DialogWidget<Props extends DialogWidgetProps = DialogWidgetProps> e
     return this.getDsl().height;
   }
 
+  @Widget.Reactive()
+  protected get defaultSize(): keyof typeof ModalWidth {
+    return 'medium';
+  }
+
   @Widget.Reactive()
   public get okText() {
     return this.getDsl().okText;

package/src/view/popup/dialog/StaticDialogWidget.ts

@@ -24,7 +24,7 @@ export class StaticDialogWidget extends StaticPopupWidget<DialogWidgetProps> imp
   private destroyOnClose = true;
 
   @Widget.Reactive()
-  private title: string | null = OioModalProps.title.default;
+  private title: string | undefined;
 
   @Widget.Reactive()
   private help: string | undefined;
@@ -76,7 +76,7 @@ export class StaticDialogWidget extends StaticPopupWidget<DialogWidgetProps> imp
     this.destroyOnClose = destroyOnClose;
   }
 
-  public setTitle(title: string | null) {
+  public setTitle(title: string | undefined) {
     this.title = title;
   }
 

package/src/view/popup/dialog/style/index.scss

@@ -3,12 +3,36 @@
 .default-dialog .ant-modal {
   .ant-modal-body {
     padding-bottom: 24px;
+
+    .oio-form {
+      & > .oio-row > .oio-col > .oio-default-group {
+        & > .oio-group-title-wrapper {
+          padding: var(--oio-padding) 0 0 0;
+        }
+        & > .oio-group-content {
+          padding: var(--oio-padding) 0;
+        }
+      }
+    }
   }
 
   .ant-modal-footer {
     padding: 0;
     border-top: 0;
 
+    .default-dialog-pre-next-switch-footer {
+      display: flex;
+      align-items: center;
+      border-top: 1px solid var(--oio-border-color);
+      .oio-simple-pagination {
+        padding-left: var($parameterPrefix + -margin-md);
+      }
+      .action-bar {
+        flex: 1;
+        border-top: 0;
+      }
+    }
+
     .action-bar {
       height: unset;
       padding: var($parameterPrefix + -margin-md);

package/src/view/popup/drawer/DefaultDrawer.vue

@@ -1,14 +1,27 @@
 <script lang="ts">
-import { CastHelper, OioButton, OioDrawer, PropRecordHelper, StringHelper } from '@oinone/kunlun-vue-ui-antd';
+import { ViewType } from '@oinone/kunlun-meta';
+import {
+  CastHelper,
+  DrawerHeight,
+  DrawerPlacement,
+  DrawerWidth,
+  ModalWidth,
+  OioButton,
+  OioDrawer,
+  PopupDisplayAs,
+  PropRecordHelper,
+  StringHelper
+} from '@oinone/kunlun-vue-ui-antd';
 import { onAllMounted } from '@oinone/kunlun-vue-widget';
-import { createVNode, defineComponent, PropType } from 'vue';
+import { computed, createVNode, defineComponent, PropType, ref } from 'vue';
+import { OioSimplePagination } from '../../../components';
 import { FooterProps, useFooter } from '../useFooter';
-import { ViewType } from '@oinone/kunlun-meta';
 
 export default defineComponent({
   components: {
     OioDrawer,
-    OioButton
+    OioButton,
+    OioSimplePagination
   },
   props: {
     ...FooterProps,
@@ -41,6 +54,9 @@ export default defineComponent({
     height: {
       type: [Number, String]
     },
+    defaultSize: {
+      type: String as PropType<keyof typeof DrawerHeight>
+    },
     zIndex: {
       type: Number
     },
@@ -73,20 +89,107 @@ export default defineComponent({
     },
     allMounted: {
       type: Function
+    },
+    // 是否显示切换全屏按钮
+    enabledFullScreen: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示切换窗口类型按钮
+    showPopupToggle: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示上一条、下一条数据切换
+    showQuickToggle: {
+      type: Boolean,
+      default: false
+    },
+    // 列表视图总页数
+    listViewTotalPage: {
+      type: Number,
+      default: 0
+    },
+    // 列表视图当前行号
+    listViewRowNumber: {
+      type: Number,
+      default: 1
+    },
+    onChangeRowNumber: {
+      type: Function
     }
   },
   setup(props) {
+    const displayAs = ref(PopupDisplayAs.drawer);
+
+    const width = computed(() => {
+      if (props.width == null) {
+        switch (displayAs.value) {
+          case PopupDisplayAs.drawer:
+            return DrawerWidth[props.defaultSize || 'medium'];
+          case PopupDisplayAs.modal:
+            return ModalWidth[props.defaultSize || 'medium'];
+        }
+      }
+      return props.width;
+    });
+
+    const isFullscreen = computed(() => {
+      const placement = props.placement || DrawerPlacement.right;
+      switch (placement) {
+        case DrawerPlacement.left:
+        case DrawerPlacement.right:
+          if (props.width === 'FULL') {
+            return true;
+          }
+          break;
+        case DrawerPlacement.top:
+        case DrawerPlacement.bottom:
+          if (props.height === 'FULL') {
+            return true;
+          }
+          break;
+      }
+      return false;
+    });
+
+    const enabledFullScreen = computed(() => {
+      if (isFullscreen.value) {
+        return false;
+      }
+      return props.enabledFullScreen;
+    });
+
+    const showPopupToggle = computed(() => {
+      if (isFullscreen.value) {
+        return false;
+      }
+      return props.showPopupToggle;
+    });
+
+    const onDisplayAsChange = (val: PopupDisplayAs) => {
+      displayAs.value = val;
+    };
+
     onAllMounted(() => {
       props.allMounted?.();
     });
 
-    return {};
+    return {
+      displayAs,
+      width,
+      enabledFullScreen,
+      showPopupToggle,
+      onDisplayAsChange
+    };
   },
   render() {
     const {
       $slots,
       visible,
       onVisibleChange,
+      displayAs,
+      onDisplayAsChange,
       destroyOnClose,
       teleport,
       title,
@@ -102,7 +205,13 @@ export default defineComponent({
       footerInvisible,
       onOk,
       onCancel,
-      viewType
+      viewType,
+      enabledFullScreen,
+      showPopupToggle,
+      showQuickToggle,
+      listViewTotalPage,
+      listViewRowNumber,
+      onChangeRowNumber
     } = this;
     const children = PropRecordHelper.collectionSlots($slots, [
       { origin: 'default', isNotNull: true },
@@ -116,6 +225,32 @@ export default defineComponent({
       ];
     }
 
+    if (showQuickToggle) {
+      /**
+       * 上一条、下一条数据切换
+       */
+      const defaultFooterSlot = children.footer();
+      children.footer = () => [
+        createVNode(
+          'div',
+          {
+            class: 'default-drawer-pre-next-switch-footer'
+          },
+          {
+            default: () => [
+              createVNode(OioSimplePagination, {
+                total: listViewTotalPage,
+                current: listViewRowNumber,
+                pageSize: 1,
+                onChange: onChangeRowNumber
+              }),
+              ...defaultFooterSlot
+            ]
+          }
+        )
+      ];
+    }
+
     return createVNode(
       OioDrawer,
       {
@@ -136,10 +271,14 @@ export default defineComponent({
         maskClosable,
         headerInvisible,
         footerInvisible,
+        displayAs,
         destroyOnClose,
+        enabledFullScreen,
+        showPopupToggle,
         enterCallback: onOk,
         cancelCallback: onCancel,
-        'onUpdate:visible': onVisibleChange
+        'onUpdate:visible': onVisibleChange,
+        'onUpdate:displayAs': onDisplayAsChange
       },
       children
     );

package/src/view/popup/drawer/DrawerWidget.ts

@@ -1,11 +1,10 @@
 import { DEFAULT_SLOT_NAME } from '@oinone/kunlun-dsl';
-import { BooleanHelper } from '@oinone/kunlun-shared';
-import { DrawerHeight, DrawerPlacement, DrawerWidth, OioDrawerProps } from '@oinone/kunlun-vue-ui-common';
+import { Expression, ExpressionRunParam } from '@oinone/kunlun-expression';
+import { DrawerHeight, DrawerPlacement } from '@oinone/kunlun-vue-ui-common';
 import { Widget } from '@oinone/kunlun-vue-widget';
 import { PopupScene } from '../../../typing';
 import { PopupWidget, PopupWidgetProps } from '../PopupWidget';
 import DefaultDrawer from './DefaultDrawer.vue';
-import { Expression, ExpressionRunParam } from '@oinone/kunlun-expression';
 
 export type DrawerWidgetProps = PopupWidgetProps;
 
@@ -29,8 +28,11 @@ export class DrawerWidget<Props extends DrawerWidgetProps = DrawerWidgetProps> e
   }
 
   @Widget.Reactive()
-  public get title() {
-    const title = this.getDsl().title || OioDrawerProps.title.default;
+  public get title(): string | undefined {
+    const title = this.getDsl().title;
+    if (!title) {
+      return undefined;
+    }
 
     return Expression.run(
       {
@@ -57,17 +59,22 @@ export class DrawerWidget<Props extends DrawerWidgetProps = DrawerWidgetProps> e
 
   @Widget.Reactive()
   protected get wrapperClassName(): string | undefined {
-    return this.getDsl()?.wrapperClassName;
+    return this.getDsl().wrapperClassName;
   }
 
   @Widget.Reactive()
   public get width() {
-    return this.getDsl().width || DrawerWidth.small;
+    return this.getDsl().width;
   }
 
   @Widget.Reactive()
   public get height() {
-    return this.getDsl().height || DrawerHeight.small;
+    return this.getDsl().height;
+  }
+
+  @Widget.Reactive()
+  protected get defaultSize(): keyof typeof DrawerHeight {
+    return 'medium';
   }
 
   @Widget.Reactive()

package/src/view/popup/drawer/StaticDrawerWidget.ts

@@ -24,7 +24,7 @@ export class StaticDrawerWidget extends StaticPopupWidget<DrawerWidgetProps> imp
   private destroyOnClose = true;
 
   @Widget.Reactive()
-  private title: string | null = OioDrawerProps.title.default;
+  private title: string | undefined;
 
   @Widget.Reactive()
   private help: string | undefined;
@@ -76,7 +76,7 @@ export class StaticDrawerWidget extends StaticPopupWidget<DrawerWidgetProps> imp
     this.destroyOnClose = destroyOnClose;
   }
 
-  public setTitle(title: string | null) {
+  public setTitle(title: string | undefined) {
     this.title = title;
   }