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

package/src/action/component/action-bar/DefaultMoreActionItem.vue

@@ -0,0 +1,172 @@
+<script lang="ts">
+import { DEFAULT_PREFIX } from '@oinone/kunlun-theme';
+import { ObjectUtils, OioButton, OioPopconfirm } from '@oinone/kunlun-vue-ui-antd';
+import { ButtonType } from '@oinone/kunlun-vue-ui-common';
+import { useOioState, Widget } from '@oinone/kunlun-vue-widget';
+import { computed, createVNode, defineComponent, ref, VNode } from 'vue';
+import type { ActionWidget } from '../action';
+import MenuItem from '../action/MenuItem.vue';
+
+export default defineComponent({
+  name: 'DefaultMoreActionItem',
+  components: {},
+  inheritAttrs: false,
+  props: {
+    model: {
+      type: String,
+      required: true
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    rowIndex: {
+      type: Number
+    }
+  },
+  setup(props) {
+    // 二次确认的显示和隐藏不同步 ActionWidget，否则页面会出现多个二次确认弹出层
+    const visibleConfirm = ref(false);
+    const actionBarState = useOioState().viewState?.getActionBarState(props.rowIndex);
+
+    const actionWidget = computed<ActionWidget | undefined>(() => {
+      const actionHandles = actionBarState?.actions;
+      if (!actionHandles) {
+        return undefined;
+      }
+      for (const actionHandle of actionHandles) {
+        const widget = Widget.select<ActionWidget>(actionHandle)?.getOperator<ActionWidget>();
+        if (!widget) {
+          continue;
+        }
+        const action = widget.action;
+        if (!action) {
+          continue;
+        }
+        if (action.model === props.model && action.name === props.name) {
+          return widget;
+        }
+      }
+      return undefined;
+    });
+
+    const actionProps = computed<ActionWidget['actionProps']>(() => {
+      const widget = actionWidget.value;
+      if (!widget) {
+        return {} as ActionWidget['actionProps'];
+      }
+      return widget.actionProps;
+    });
+
+    const title = computed(() => {
+      const widget = actionWidget.value;
+      if (!widget) {
+        return undefined;
+      }
+      if (widget.disabled) {
+        return widget.disabledTitle;
+      }
+      return widget.actionProps.label;
+    });
+
+    const disabled = computed(() => {
+      const widget = actionWidget.value;
+      if (!widget) {
+        return false;
+      }
+      return widget.disabled;
+    });
+
+    const condition = async () => {
+      if (ObjectUtils.isNotEmpty(actionProps.value.confirm)) {
+        if (actionProps.value.validatorForm) {
+          if (!(await actionProps.value.validatorForm?.())) {
+            return undefined;
+          }
+        }
+        return true;
+      }
+      return false;
+    };
+
+    const onUpdateVisibleConfirm = (val: boolean) => {
+      visibleConfirm.value = val;
+    };
+
+    return {
+      visibleConfirm,
+      title,
+      disabled,
+      actionProps,
+      condition,
+      onUpdateVisibleConfirm
+    };
+  },
+  render() {
+    const { visibleConfirm, title, disabled, actionProps, condition, onUpdateVisibleConfirm } = this;
+    if (actionProps.invisible) {
+      return [];
+    }
+    return createVNode(
+      MenuItem,
+      {
+        class: `${DEFAULT_PREFIX}-more-action-item`,
+        disabled,
+        title
+      },
+      {
+        default: () => {
+          let contentVNode: VNode | undefined;
+          if (!actionProps.labelInvisible && actionProps.label) {
+            contentVNode = createVNode('span', { class: `${DEFAULT_PREFIX}-action-content` }, actionProps.label);
+          }
+          const attrs: Record<string, unknown> = {
+            ref: 'origin',
+            type: ButtonType.link,
+            bizStyle: actionProps.bizStyle,
+            loading: actionProps.loading,
+            disabled: actionProps.disabled,
+            title: actionProps.disabled
+              ? actionProps.disabledTitle || actionProps.help || actionProps.label
+              : actionProps.help || actionProps.label,
+            icon: actionProps.icon,
+            'data-action-name': actionProps.action?.name
+          };
+          if (!actionProps.enableConfirm) {
+            attrs.onClick = () => actionProps.validateAndClick?.(actionProps.action, true);
+          }
+          const btn = createVNode(OioButton, attrs, () => {
+            if (contentVNode) {
+              return [contentVNode];
+            }
+            return [];
+          });
+          if (actionProps.enableConfirm) {
+            return [
+              createVNode(
+                OioPopconfirm,
+                {
+                  title: actionProps.confirmTitle,
+                  placement: actionProps.confirmPosition,
+                  text: actionProps.confirm,
+                  enterText: actionProps.enterText,
+                  cancelText: actionProps.cancelText,
+                  visible: visibleConfirm,
+                  'onUpdate:visible': onUpdateVisibleConfirm,
+                  condition,
+                  confirmCallback: () => actionProps.validateAndClick?.(actionProps.action, true)
+                },
+                {
+                  default: () => [btn]
+                }
+              )
+            ];
+          }
+          return [btn];
+        }
+      }
+    );
+  }
+});
+</script>
+<style lang="scss"></style>

package/src/action/component/action-bar/RowActionBarWidget.ts

@@ -1,6 +1,6 @@
 import { Optional } from '@oinone/kunlun-shared';
 import { SPI } from '@oinone/kunlun-spi';
-import { Widget } from '@oinone/kunlun-vue-widget';
+import { hasRowActionBarViewState, OioAnyViewState, Widget } from '@oinone/kunlun-vue-widget';
 import { isNil } from 'lodash-es';
 import { BaseElementWidget } from '../../../basic';
 import { ActionBarWidget, ActionBarWidgetProps } from './ActionBarWidget';
@@ -76,4 +76,33 @@ export class RowActionBarWidget<
   protected get buttonType(): string | undefined {
     return Optional.ofNullable(super.buttonType).orElse(this.operatorColumnButtonType?.toLowerCase?.());
   }
+
+  protected $$initViewStatePosition(state: OioAnyViewState): void {
+    state.__position.push({ handle: this.currentHandle, slotName: this.getSlotName(), rowIndex: this.rowIndex });
+  }
+
+  protected $$initViewState(state: OioAnyViewState): void {
+    const { currentHandle, rowIndex } = this;
+    if (hasRowActionBarViewState(state)) {
+      if (!state.inlineActionBars) {
+        state.inlineActionBars = [];
+      }
+      state.inlineActionBars[rowIndex] = state.createActionBarState({
+        handle: currentHandle,
+        inline: true
+      });
+    }
+  }
+
+  protected $$unmounted() {
+    super.$$unmounted();
+    const { viewState, rowIndex } = this;
+    if (viewState && hasRowActionBarViewState(viewState)) {
+      const { inlineActionBars } = viewState;
+      if (inlineActionBars) {
+        inlineActionBars.splice(rowIndex, 1);
+        viewState.inlineActionBars = [...inlineActionBars];
+      }
+    }
+  }
 }

package/src/action/component/action-bar/style/index.scss

@@ -16,68 +16,27 @@
     flex-flow: row nowrap;
   }
 
+  .more-action-invisible-render-wrapper {
+    display: none;
+  }
+
   .more-action-selector {
     vertical-align: 0;
-
-    &.oio-button.ant-btn {
-      &.oio-button-default {
-        .oio-icon {
-          color: var(--oio-button-text-color);
-        }
-
-        &:hover {
-          .oio-icon {
-            color: var(--oio-button-text-color-hover);
-          }
-        }
-      }
-
-      &.oio-button-primary {
-        .oio-icon {
-          color: var(--oio-button-primary-text-color);
-        }
-
-        &:hover {
-          .oio-icon {
-            color: var(--oio-button-primary-text-color-hover);
-          }
-        }
-      }
-
-      &.oio-button-link {
-        .oio-icon {
-          color: var(--oio-button-link-text-color);
-        }
-
-        &:hover {
-          .oio-icon {
-            color: var(--oio-button-link-text-color-hover);
-          }
-        }
-      }
-
-      &.oio-button-icon-after .oio-icon {
-        font-size: calc(var(--oio-font-size) - 2px);
-        margin-left: 2px;
-      }
-    }
   }
 
   .gallery-action-bar-operators {
     display: flex;
     align-items: center;
-    column-gap: 16px;
+    column-gap: var(--oio-row-gap);
   }
 
   .gallery-action-bar-batch-selected {
-    width: 159px;
-    height: 40px;
     background-color: transparent;
-    border-radius: 4px;
+    border-radius: var(--oio-border-radius-sm);
     display: flex;
     align-items: center;
     justify-content: center;
-    column-gap: 16px;
+    column-gap: var(--oio-row-gap);
   }
 
   .oio-checkbox {

package/src/action/component/dropdown/DefaultDropdown.vue

@@ -103,6 +103,8 @@ export default defineComponent({
             }
           } else if ((vnode.type as { name: string })?.name?.toLowerCase?.() === InternalWidget.Action) {
             children.push(vnode);
+          } else if ((vnode.type as { name: string })?.name?.toLowerCase?.() === InternalWidget.Action) {
+            children.push(vnode);
           }
         }
         return true;
@@ -184,101 +186,3 @@ export default defineComponent({
   }
 });
 </script>
-<style lang="scss">
-.default-dropdown-overlay {
-  min-width: 96px;
-  max-width: 160px;
-  z-index: 999;
-
-  .default-dropdown-menu {
-    background-color: var(--oio-background);
-    border: 1px solid var(--oio-border-color);
-    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.05);
-    border-radius: 4px;
-    position: unset;
-    padding: 7px 0;
-
-    .ant-dropdown-menu-title-content {
-      position: unset;
-
-      .ant-modal-root {
-        position: fixed;
-        top: 0;
-        left: 0;
-      }
-    }
-
-    & > button {
-      display: block;
-      border: 0;
-      border-bottom: 1px solid var(--oio-border-color);
-      color: var(--oio-primary-color);
-      border-radius: 0;
-
-      &:hover {
-        background: var(--oio-hover-background-color);
-        border: 0;
-        border-bottom: 1px solid var(--oio-border-color);
-      }
-
-      &:first-child {
-        border-radius: 4px 4px 0 0;
-      }
-
-      &:last-child {
-        border-radius: 0 0 4px 4px;
-        border: 0;
-
-        &:hover {
-          border: 0;
-        }
-      }
-    }
-
-    .ant-dropdown-menu-item {
-      padding: 6px 12px;
-
-      &:not(:first-child) {
-        margin-top: 7px;
-      }
-
-      &:not(:last-child) {
-        margin-bottom: 7px;
-
-        &:after {
-          content: '';
-          height: 1px;
-          width: calc(100% - 16px);
-          position: absolute;
-          background-color: var(--oio-border-color);
-          bottom: -4px;
-          left: 8px;
-        }
-      }
-
-      .oio-button {
-        width: 100%;
-
-        &.oio-button-icon-before,
-        &.oio-button-icon-after {
-          .oio-action-content {
-            max-width: calc(100% - 18px);
-          }
-        }
-
-        .oio-action-content {
-          max-width: 100%;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          vertical-align: middle;
-        }
-      }
-
-      &.ant-dropdown-menu-item-disabled:hover {
-        background: var(--oio-disabled-color);
-      }
-    }
-  }
-}
-</style>

package/src/action/component/dropdown/style/index.scss

@@ -0,0 +1,99 @@
+.default-dropdown-overlay {
+  min-width: 96px;
+  max-width: 160px;
+  z-index: 999;
+
+  .default-dropdown-menu {
+    background-color: var(--oio-background);
+    border: 1px solid var(--oio-border-color);
+    box-shadow: var(--oio-box-shadow);
+    border-radius: var(--oio-border-radius);
+    position: unset;
+    padding: 4px;
+
+    .ant-dropdown-menu-title-content {
+      position: unset;
+
+      .ant-modal-root {
+        position: fixed;
+        top: 0;
+        left: 0;
+      }
+    }
+
+    & > button {
+      display: block;
+      border: 0;
+      border-bottom: 1px solid var(--oio-border-color);
+      color: var(--oio-primary-color);
+      border-radius: 0;
+
+      &:hover {
+        background: var(--oio-hover-background-color);
+        border: 0;
+        border-bottom: 1px solid var(--oio-border-color);
+      }
+
+      &:first-child {
+        border-radius: 4px 4px 0 0;
+      }
+
+      &:last-child {
+        border-radius: 0 0 4px 4px;
+        border: 0;
+
+        &:hover {
+          border: 0;
+        }
+      }
+    }
+
+    .ant-dropdown-menu-item {
+      padding: 5px 10px;
+
+      &:not(:first-child) {
+        margin-top: 7px;
+      }
+
+      &:not(:last-child) {
+        margin-bottom: 7px;
+
+        &:after {
+          content: '';
+          height: 1px;
+          width: calc(100% - 16px);
+          position: absolute;
+          background-color: var(--oio-border-color);
+          bottom: -4px;
+          left: 8px;
+        }
+      }
+
+      .oio-button {
+        width: 100%;
+        color: var(--oio-dropdown-button-text-color);
+
+        & &.oio-button-icon-before,
+        &.oio-button-icon-after {
+          .oio-action-content {
+            max-width: calc(100% - 18px);
+          }
+        }
+
+        .oio-action-content {
+          max-width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          vertical-align: middle;
+        }
+      }
+
+      &.ant-dropdown-menu-item-disabled {
+        .oio-button {
+          color: var(--oio-dropdown-color-disabled);
+        }
+      }
+    }
+  }
+}

package/src/action/component/index.ts

@@ -2,3 +2,4 @@ export * from './action';
 export * from './action-bar';
 export * from './context';
 export * from './dropdown';
+export * from './typing';

package/src/action/component/typing/action-bar.ts

@@ -0,0 +1,10 @@
+export enum ActionBarBizStyle {
+  /**
+   * 经典风格
+   */
+  style1 = 'style1',
+  /**
+   * 突出首个按钮
+   */
+  style2 = 'style2'
+}

package/src/action/component/typing/index.ts

@@ -0,0 +1 @@
+export * from './action-bar';

package/src/action/index.scss

@@ -1 +1,2 @@
 @import './component/action-bar/style/index.scss';
+@import './component/dropdown/style/index.scss';

package/src/action/view-actions/biz-audit/BizAuditRecordDetail.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="biz-audit-record-detail" v-if="realData.fieldRecordList || realData.oneList || realData.manyList">
     <div class="common-field-list">
-      <oio-group v-if="realData.fieldRecordList" :border="false" :title="translateValueByKey('基础信息')">
+      <oio-group v-if="realData.fieldRecordList" :border="false" :title="$translate('基础信息')">
         <div v-for="item in realData.fieldRecordList" :key="item.fieldCode" class="single-field-data">
           <div class="field-info field-label">{{ item.fieldName }}</div>
           <div class="field-info field-origin-value" :title="item.originFieldVal">{{ item.originFieldVal }}</div>
@@ -11,13 +11,13 @@
       </oio-group>
     </div>
     <div class="one-field-list" v-if="realData.oneList && realData.oneList.length">
-      <oio-group :border="false" :title="translateValueByKey('关联信息') + '-' + translateValueByKey('单值')">
+      <oio-group :border="false" :title="$translate('关联信息') + '-' + $translate('单值')">
         <a-table :columns="oneFieldsColumns" :data-source="realData.oneList">
           <template #bodyCell="context">
             <template v-if="context.column.key === 'fieldList'">
               <biz-audit-record-detail-field-value
                 :field-list="context.record.fieldList"
-                :title="translateValueByKey('关联数据')"
+                :title="$translate('关联数据')"
                 width="300px"
               />
             </template>
@@ -26,13 +26,13 @@
       </oio-group>
     </div>
     <div class="many-field-list" v-if="realData.manyList && realData.manyList.length">
-      <oio-group :border="false" :title="translateValueByKey('关联信息') + '-' + translateValueByKey('多值')">
+      <oio-group :border="false" :title="$translate('关联信息') + '-' + $translate('多值')">
         <a-table :columns="manyFieldsColumns" :data-source="realData.manyList">
           <template #bodyCell="context">
             <template v-if="context.column.key === 'fieldList'">
               <biz-audit-record-detail-field-value
                 :field-list="context.record.fieldList"
-                :title="translateValueByKey('关联数据')"
+                :title="$translate('关联数据')"
                 width="300px"
               />
             </template>
@@ -46,10 +46,9 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue';
 import { translateValueByKey } from '@oinone/kunlun-engine';
-import { OioIcon } from '@oinone/kunlun-vue-ui-common';
 import { OioGroup } from '@oinone/kunlun-vue-ui-antd';
+import { computed, defineComponent } from 'vue';
 import BizAuditRecordDetailFieldValue from './BizAuditRecordDetailFieldValue.vue';
 
 const commonColumns = [
@@ -115,20 +114,26 @@ const manyFieldsColumns = [
     ellipsis: true
   }
 ];
+
 export default defineComponent({
   name: 'BizAuditRecordDetail',
-  components: { BizAuditRecordDetailFieldValue, OioIcon, OioGroup },
+  components: { BizAuditRecordDetailFieldValue, OioGroup },
   props: {
     data: {
-      type: Array,
-      default: () => []
+      type: [Object, Array]
     }
   },
-
   setup(props) {
     const realData = computed(() => {
-      return props.data[0] || props.data || {};
+      if (props.data == null) {
+        return {};
+      }
+      if (Array.isArray(props.data)) {
+        return props.data[0];
+      }
+      return props.data;
     });
+
     return {
       commonColumns,
       oneFieldsColumns,
@@ -139,7 +144,6 @@ export default defineComponent({
   }
 });
 </script>
-
 <style lang="scss">
 .biz-audit-record-detail {
   .common-field-list {
@@ -208,12 +212,6 @@ export default defineComponent({
     font-size: 14px;
     color: var(--oio-text-color);
     font-weight: 400;
-
-    &:before {
-      content: '';
-      border-left: 2px solid var(--oio-primary-color);
-      margin-right: 6px;
-    }
   }
 
   .oio-group {
@@ -253,6 +251,7 @@ export default defineComponent({
 
   .ant-table {
     background: var(--oio-background);
+
     .ant-table-tbody > tr > td {
       border-color: var(--oio-border-color);
       color: var(--oio-text-color);