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

package/src/field/gallery/string/tag/GalleryStringTagFieldWidget.ts

@@ -1,6 +1,7 @@
 import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
 import { SPI } from '@oinone/kunlun-spi';
-import { Widget } from '@oinone/kunlun-vue-widget';
+import { OioCardScope, useInjectOioCardContext } from '@oinone/kunlun-vue-ui-common';
+import { isGalleryViewState, Widget } from '@oinone/kunlun-vue-widget';
 import { FormFieldWidget } from '../../../../basic';
 import { DetailStringTagFieldWidget } from '../../../detail';
 import GalleryTag from './GalleryTag.vue';
@@ -13,6 +14,13 @@ import GalleryTag from './GalleryTag.vue';
   })
 )
 export class GalleryStringTagFieldWidget extends DetailStringTagFieldWidget {
+  @Widget.Reactive()
+  protected scope: string | undefined;
+
+  @Widget.Reactive()
+  @Widget.Inject()
+  protected rowIndex: number | undefined;
+
   public initialize(props) {
     super.initialize(props);
     this.setComponent(GalleryTag);
@@ -31,6 +39,29 @@ export class GalleryStringTagFieldWidget extends DetailStringTagFieldWidget {
     }
     return tags;
   }
+
+  @Widget.Reactive()
+  protected get wrap(): boolean {
+    return this.scopeProps?.textWrap === 'wrap';
+  }
+
+  @Widget.Reactive()
+  protected get scopeProps(): Record<string, unknown> | undefined {
+    const { viewState, scope, rowIndex } = this;
+    if (viewState && scope && rowIndex != null && isGalleryViewState(viewState)) {
+      if (scope === OioCardScope.title) {
+        return viewState.cards?.[rowIndex]?.titleProps;
+      }
+      if (scope === OioCardScope.content) {
+        return viewState.cards?.[rowIndex]?.contentProps;
+      }
+    }
+  }
+
+  protected $$beforeMount() {
+    super.$$beforeMount();
+    this.scope = useInjectOioCardContext().scope;
+  }
 }
 
 /**

package/src/field/gallery/string/tag/GalleryTag.vue

@@ -1,39 +1,58 @@
 <template>
   <gallery-common-field
+    class="gallery-tag-common-item"
     :value="!optionColor ? displayNameListStr : displayNameList.length ? displayNameList : undefined"
     :justify-content="justifyContent"
     :empty-style="emptyStyle"
   >
     <template #default>
       <div v-if="optionColor" class="gallery-tag">
-        <div
-          class="tag"
-          v-for="(item, index) in showTags"
-          :key="item"
-          :style="{
-            width: displayNameList.length > 1 ? '25%' : 'unset',
-            color: item.color,
-            'background-color': item.backgroundColor
-          }"
-        >
-          <div class="content" v-if="index < 3" :title="item.label">
-            {{ item.label }}
+        <template v-for="item in showTags" :key="item">
+          <div
+            v-if="item.label"
+            class="tag"
+            :style="{
+              color: item.color,
+              'background-color': item.backgroundColor
+            }"
+          >
+            <div class="content" :title="item.label">
+              {{ item.label }}
+            </div>
           </div>
-          <div class="content hideTags" v-if="index === 3" :title="hideTags">
-            <oio-icon icon="oinone-gengduo1" color="var(--oio-primary-color)" />
+          <div v-else class="tag-blank"></div>
+        </template>
+        <oio-tooltip v-if="hideTags" placement="tm" :title="hideTags">
+          <div
+            class="tag"
+            :style="{
+              width: displayNameList.length > 1 ? '25%' : 'unset'
+            }"
+          >
+            <div class="content hideTags">
+              <oio-icon icon="oinone-gengduo1" color="var(--oio-primary-color)" />
+            </div>
           </div>
-        </div>
+        </oio-tooltip>
       </div>
       <span v-else>{{ displayNameListStr }}</span>
     </template>
   </gallery-common-field>
 </template>
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
+import { OioTooltip } from '@oinone/kunlun-vue-ui-antd';
 import { OioIcon } from '@oinone/kunlun-vue-ui-common';
+import { computed, defineComponent, PropType } from 'vue';
 import GalleryCommonField from '../../common/GalleryCommonField.vue';
 
 export default defineComponent({
+  name: 'GalleryTag',
+  inheritAttrs: false,
+  components: {
+    GalleryCommonField,
+    OioTooltip,
+    OioIcon
+  },
   props: {
     displayNameList: {
       type: Array as PropType<Record<string, string>[]>,
@@ -50,29 +69,43 @@ export default defineComponent({
     },
     optionColor: {
       type: Boolean
+    },
+    wrap: {
+      type: Boolean
     }
   },
-  components: { GalleryCommonField, OioIcon },
-  inheritAttrs: false,
   setup(props) {
     const tagsLength = computed(() => {
       return props.displayNameList.length;
     });
+
     const showTags = computed(() => {
-      const tags = [] as Record<string, string>[];
-      if (tagsLength.value > 3) {
-        tags.push(...props.displayNameList.slice(0, 3));
-        tags.push({ label: '...', color: 'unset', 'background-color': 'unset' });
-        return tags;
+      if (props.wrap) {
+        return props.displayNameList;
+      }
+      if (tagsLength.value > 4) {
+        return props.displayNameList.slice(0, 3);
+      }
+      const tags = [...props.displayNameList];
+      for (let i = tags.length; i < 4; i++) {
+        tags.push({ label: '' });
       }
-      return props.displayNameList;
+      return tags;
     });
+
     const hideTags = computed(() => {
-      if (tagsLength.value > 3) {
-        return props.displayNameList.slice(3, tagsLength.value).map((i) => i.label);
+      if (props.wrap) {
+        return '';
+      }
+      if (tagsLength.value > 4) {
+        return props.displayNameList
+          .slice(3, tagsLength.value)
+          .map((i) => i.label)
+          .join(',');
       }
-      return [];
+      return '';
     });
+
     return {
       tagsLength,
       showTags,
@@ -82,35 +115,50 @@ export default defineComponent({
 });
 </script>
 <style lang="scss">
-.gallery-tag {
-  display: flex;
-  width: 100%;
-  overflow: hidden;
-  position: relative;
-  justify-content: inherit;
-
-  .tag {
-    height: 28px;
-    background: var(--oio-input-tag-background);
-    border-radius: 4px;
-    width: 25%;
+.gallery-tag-common-item {
+  .gallery-tag {
     display: flex;
-    justify-content: center;
-    color: var(--oio-primary-color);
-    margin-right: 4%;
+    width: 100%;
+    overflow: hidden;
+    margin: 0 -4px;
+    position: relative;
+    justify-content: inherit;
+
+    .tag {
+      height: 28px;
+      background: var(--oio-input-tag-background);
+      border-radius: 4px;
+      flex-basis: calc(25% - 8px);
+      display: flex;
+      justify-content: center;
+      color: var(--oio-primary-color);
+      margin: 0 4px;
 
-    .content {
-      font-size: var(--oio-font-size-sm);
-      font-weight: var(--oio-font-weight);
-      padding: 4px 4px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+      .content {
+        font-size: var(--oio-font-size-sm);
+        font-weight: var(--oio-font-weight);
+        padding: 4px 4px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
 
-      &.hideTags {
-        text-align: center;
+        &.hideTags {
+          text-align: center;
+        }
       }
     }
+
+    .tag-blank {
+      flex-basis: calc(25% - 8px);
+    }
+  }
+}
+
+.default-card-title-wrap,
+.default-card-content-wrap {
+  .gallery-tag-common-item .gallery-tag {
+    row-gap: 8px;
+    flex-wrap: wrap;
   }
 }
 </style>

package/src/field/prop/RelationSelectProps.ts

@@ -1,5 +1,7 @@
+import { SelectSearchArea } from '@oinone/kunlun-engine';
 import { BooleanHelper } from '@oinone/kunlun-shared';
-import { computed, PropType, ref } from 'vue';
+import { delay } from 'lodash-es';
+import { computed, nextTick, onBeforeUnmount, onMounted, PropType, ref } from 'vue';
 import { usePlaceholderProps } from '../../basic';
 
 export const RelationSelectProps = {
@@ -52,6 +54,9 @@ export const RelationSelectProps = {
   options: {
     type: Array as PropType<Record<string, unknown>[]>
   },
+  searchValue: {
+    type: String
+  },
   change: {
     type: Function,
     default: () => ({})
@@ -86,14 +91,25 @@ export const RelationSelectProps = {
   },
   getPopupContainer: {
     type: Function
+  },
+  searchArea: {
+    type: String as PropType<SelectSearchArea>,
+    default: SelectSearchArea.default
   }
 };
 
-export function relationSelectSetup(props) {
+export function relationSelectSetup(props, multi?: boolean) {
+  const selectRef = ref();
+  const dropdownInputRef = ref();
+  const dropdownOpen = ref(false);
   const innerReadonly = computed(() => BooleanHelper.toBoolean(props.readonly));
 
   const innerDisabled = computed(() => BooleanHelper.toBoolean(props.disabled));
 
+  const selectShowSearch = computed(() => props.showSearch && props.searchArea === SelectSearchArea.default);
+
+  const inputShowSearch = computed(() => props.showSearch && props.searchArea === SelectSearchArea.dropdown);
+
   const currentValue = computed(() => {
     const values: any[] = [];
     (Array.isArray(props.value) ? props.value : []).forEach((item) => {
@@ -104,7 +120,7 @@ export function relationSelectSetup(props) {
     });
     return values;
   });
-  const selectRef = ref();
+
   const innerChange = (e) => {
     if (props.change) {
       props.change(e);
@@ -113,6 +129,66 @@ export function relationSelectSetup(props) {
     selectRef.value.focus();
   };
 
+  let focusSearchInput = false;
+
+  /**
+   * 在单选状态，下拉框聚焦时，点击回车会出现调用两次 onDropdownVisibleChange 方法的现象
+   * 该计时器用于判定此时是否正处于回车事件，且需要进行数据提交的情况
+   * 如果在计时器创建后立即关闭，则认为此时正处于回车事件，需要进行数据提交
+   */
+  let t;
+
+  const dropdownVisibleChange = (val: boolean) => {
+    if (props.showSearch && props.searchArea === SelectSearchArea.dropdown) {
+      if (focusSearchInput) {
+        return;
+      }
+      if (!focusSearchInput && !val && !multi && dropdownOpen.value) {
+        // 按下 Enter 时，下拉单选框无法正常展开，此时进行数据提交
+        dropdownOpen.value = false;
+        selectRef.value.focus();
+        return;
+      }
+      if (val) {
+        // 延迟响应下拉框显隐状态值，保证在键盘按下Enter时可以正常判断
+        t = setTimeout(() => {
+          dropdownOpen.value = true;
+          props.dropdownVisibleChange(true);
+          focusSearchInput = true;
+          delay(() => {
+            dropdownInputRef.value?.focus();
+          }, 200);
+          clearTimeout(t);
+          t = null;
+        });
+      } else if (t != null) {
+        clearTimeout(t);
+        t = null;
+      } else {
+        dropdownOpen.value = false;
+        props.dropdownVisibleChange(false);
+        if (!multi) {
+          selectRef.value.focus();
+        }
+      }
+    } else if (val) {
+      t = setTimeout(() => {
+        dropdownOpen.value = true;
+        props.dropdownVisibleChange(true);
+        clearTimeout(t);
+        t = null;
+      });
+    } else if (t != null) {
+      clearTimeout(t);
+      t = null;
+    } else {
+      nextTick(() => {
+        dropdownOpen.value = false;
+        props.dropdownVisibleChange(false);
+      });
+    }
+  };
+
   // 后于change执行
   const innerSelect = (e) => {
     props.onSelect(e);
@@ -125,15 +201,84 @@ export function relationSelectSetup(props) {
       props.loadMore();
     }
   };
+
   const { placeholder } = usePlaceholderProps(props);
+
+  const onKeydown = (e: KeyboardEvent) => {
+    // 当键盘数据提交快捷键与下拉框内置选中快捷键冲突时，保证行内编辑态不丢失
+    if (e.key === 'Enter' && e.key === props.tableKeyboardConfig?.enter?.key && dropdownOpen.value) {
+      if (!multi) {
+        focusSearchInput = false;
+        dropdownOpen.value = false;
+        props.dropdownVisibleChange(false);
+        selectRef.value.focus();
+      }
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+
+  const onFocus = (e) => {
+    props.focus?.(e);
+  };
+
+  const onBlur = (e) => {
+    if (focusSearchInput) {
+      return;
+    }
+    props.blur?.(e);
+  };
+
+  const onSearchInputFocus = (e) => {
+    focusSearchInput = true;
+  };
+
+  const onSearchInputBlur = (e) => {
+    if (focusSearchInput) {
+      focusSearchInput = false;
+      if (!multi) {
+        dropdownVisibleChange(false);
+      }
+    }
+  };
+
+  const onSearchInputKeydown = (e: KeyboardEvent) => {
+    if (e.key === 'Backspace') {
+      e.stopPropagation();
+    }
+  };
+
+  const onGlobalMouseDown = (e: MouseEvent) => {
+    focusSearchInput = e.target === dropdownInputRef.value?.originInput?.input;
+  };
+
+  onMounted(() => {
+    window.addEventListener('mousedown', onGlobalMouseDown, true);
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('mousedown', onGlobalMouseDown);
+  });
+
   return {
     placeholder,
     innerReadonly,
     innerDisabled,
+    selectShowSearch,
+    inputShowSearch,
     selectRef,
     currentValue,
+    dropdownOpen,
+    dropdownInputRef,
     innerChange,
     innerSelect,
-    slipSelect
+    slipSelect,
+    dropdownVisibleChange,
+    onKeydown,
+    onFocus,
+    onBlur,
+    onSearchInputFocus,
+    onSearchInputBlur,
+    onSearchInputKeydown
   };
 }

package/src/field/range/SearchRangeFieldWidget.ts

@@ -1,5 +1,4 @@
 import { RuntimeModelField, RuntimeSearchField, translateValueByKey } from '@oinone/kunlun-engine';
-import { BooleanHelper, Optional, RSQLCompositeOperators } from '@oinone/kunlun-shared';
 import { Widget, WidgetComponent } from '@oinone/kunlun-vue-widget';
 import { FormFieldWidget } from '../../basic';
 
@@ -30,13 +29,6 @@ export abstract class SearchRangeFieldWidget<
     return this.field.operator;
   }
 
-  @Widget.Reactive()
-  protected get allowClear(): boolean {
-    return Optional.ofNullable(this.getDsl().allowClear)
-      .map((v) => BooleanHelper.toBoolean(v))
-      .orElse(true)!;
-  }
-
   @Widget.Reactive()
   protected get startDefaultValue() {
     return this.getDsl().startDefaultValue;

package/src/field/resource/language-badge/FormResourceLangBadge.vue

@@ -50,10 +50,9 @@
 </template>
 <script lang="ts">
 import { CheckOutlined } from '@ant-design/icons-vue';
-import { OioSpin, OioEmptyData, OioIcon } from '@oinone/kunlun-vue-ui-antd';
-import { computed, defineComponent, ref, watch } from 'vue';
+import { OioEmptyData, OioIcon, OioSpin, useInjectOioDefaultFormContext } from '@oinone/kunlun-vue-ui-antd';
 import { Select as ASelect, SelectOption as ASelectOption } from 'ant-design-vue';
-import { useInjectOioDefaultFormContext } from '../../../basic';
+import { computed, defineComponent, ref, watch } from 'vue';
 import { RelationSelectProps, relationSelectSetup } from '../../prop';
 
 export default defineComponent({
@@ -130,6 +129,7 @@ export default defineComponent({
   .lang-badge-selection-opt {
     display: flex;
     align-items: center;
+
     .oio-icon {
       margin-right: 5px;
     }

package/src/field/search/enum/TabSelect.vue

@@ -1,9 +1,9 @@
 <script lang="ts">
 import { deepClone } from '@oinone/kunlun-meta';
-import { OioSelect, SelectItem } from '@oinone/kunlun-vue-ui-antd';
+import { OioSelect, SelectItem, useInjectOioDefaultFormContext } from '@oinone/kunlun-vue-ui-antd';
 import { RadioButton as ARadioButton, RadioGroup as ARadioGroup } from 'ant-design-vue';
 import { computed, createVNode, defineComponent } from 'vue';
-import { OioCommonProps, OioMetadataProps, useInjectOioDefaultFormContext, useMetadataProps } from '../../../basic';
+import { OioCommonProps, OioMetadataProps, useMetadataProps } from '../../../basic';
 
 export default defineComponent({
   name: 'TabSelect',

package/src/field/search/enum/TagSelect.vue

@@ -1,9 +1,9 @@
 <script lang="ts">
 import { deepClone } from '@oinone/kunlun-meta';
-import { OioSelect, SelectItem } from '@oinone/kunlun-vue-ui-antd';
+import { OioSelect, SelectItem, useInjectOioDefaultFormContext } from '@oinone/kunlun-vue-ui-antd';
 import { RadioButton as ARadioButton, RadioGroup as ARadioGroup } from 'ant-design-vue';
 import { computed, createVNode, defineComponent } from 'vue';
-import { OioCommonProps, OioMetadataProps, useInjectOioDefaultFormContext, useMetadataProps } from '../../../basic';
+import { OioCommonProps, OioMetadataProps, useMetadataProps } from '../../../basic';
 
 export default defineComponent({
   name: 'TagSelect',

package/src/field/search/m2o/SearchM2OMultiSelectFieldWidget.ts

@@ -2,7 +2,7 @@ import { SubmitHandler, SubmitValue } from '@oinone/kunlun-engine';
 import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
 import { SPI } from '@oinone/kunlun-spi';
 import { FormFieldWidget } from '../../../basic';
-import { FormM2MFieldSelectWidget } from '../../form';
+import { FormM2MSelectFieldWidget } from '../../form';
 
 @SPI.ClassFactory(
   FormFieldWidget.Token({
@@ -11,7 +11,7 @@ import { FormM2MFieldSelectWidget } from '../../form';
     widget: 'MultiSelect'
   })
 )
-export class SearchM2OMultiSelectFieldWidget extends FormM2MFieldSelectWidget {
+export class SearchM2OMultiSelectFieldWidget extends FormM2MSelectFieldWidget {
   public async submit(submitValue: SubmitValue) {
     const { field, itemName, value } = this;
     return SubmitHandler.O2M(field, itemName, submitValue, value);

package/src/field/table/boolean/TableBooleanSwitchFieldWidget.ts

@@ -1,4 +1,4 @@
-import { FunctionService, RuntimeServerAction } from '@oinone/kunlun-engine';
+import { FunctionService, RuntimeServerAction, translateValueByKey } from '@oinone/kunlun-engine';
 import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
 import { SPI } from '@oinone/kunlun-spi';
 import { RowContext } from '@oinone/kunlun-vue-ui';
@@ -35,6 +35,18 @@ export class TableBooleanSwitchFieldWidget extends BaseTableFieldWidget<boolean>
   @Widget.Reactive()
   private visiblePopconfirm = false;
 
+  @Widget.Method()
+  public onAutofocus(params: { cell: HTMLElement }) {
+    const { cell } = params;
+    if (!cell) {
+      return;
+    }
+    const input = cell.querySelector('.oio-switch') as HTMLElement;
+    if (input) {
+      input.focus();
+    }
+  }
+
   @Widget.Method()
   public renderDefaultSlot(context: RowContext): VNode[] {
     const value = this.compute(context) === true;
@@ -96,7 +108,7 @@ export class TableBooleanSwitchFieldWidget extends BaseTableFieldWidget<boolean>
               default: () =>
                 createVNode(OioSwitch, {
                   checked: value,
-                  disabled: disabled
+                  disabled
                 })
             }
           )
@@ -104,4 +116,12 @@ export class TableBooleanSwitchFieldWidget extends BaseTableFieldWidget<boolean>
       )
     ];
   }
+
+  public renderGroupTitleSlot(context: RowContext): VNode[] | string {
+    const value = this.compute(context) === true;
+    if (value) {
+      return translateValueByKey('是');
+    }
+    return translateValueByKey('否');
+  }
 }

package/src/field/table/date/range/TableDateTimeRangeFieldWidget.ts

@@ -1,7 +1,14 @@
 import { RuntimeModelField } from '@oinone/kunlun-engine';
 import { ViewType } from '@oinone/kunlun-meta';
 import { isDev } from '@oinone/kunlun-router';
-import { DateFormatMap, DateTimeFormatMap, DateUtil, defaultFormat, Optional, TimeFormatMap } from '@oinone/kunlun-shared';
+import {
+  DateFormatMap,
+  DateTimeFormatMap,
+  DateUtil,
+  defaultFormat,
+  Optional,
+  TimeFormatMap
+} from '@oinone/kunlun-shared';
 import { SPI } from '@oinone/kunlun-spi';
 import { RowContext } from '@oinone/kunlun-vue-ui';
 import { Widget } from '@oinone/kunlun-vue-widget';
@@ -186,20 +193,28 @@ export class TableDateTimeRangeFieldWidget extends BaseTableQuickOperationColumn
 
   protected $$mounted() {
     super.$$mounted();
+    this.viewState?.pushField(this.currentHandle);
     this.fieldWidgetMounted?.(this);
     // this.notify(LifeCycleTypes.ON_FIELD_BEFORE_UNMOUNT);
   }
 
   protected $$unmounted() {
     super.$$unmounted();
+    this.viewState?.popField(this.currentHandle);
     this.fieldWidgetUnmounted?.(this);
     // this.notify(LifeCycleTypes.ON_FIELD_UNMOUNTED);
   }
 
+  /**
+   * @deprecated widget finder please this.viewState.fields
+   */
   @Widget.Method()
   @Widget.Inject()
   protected fieldWidgetMounted: ((widget: BaseTableColumnWidget) => void) | undefined;
 
+  /**
+   * @deprecated widget finder please this.viewState.fields
+   */
   @Widget.Method()
   @Widget.Inject()
   protected fieldWidgetUnmounted: ((widget: BaseTableColumnWidget) => void) | undefined;

package/src/field/table/date/range/editor/DefaultEditorDateRangePicker.vue

@@ -17,16 +17,13 @@
   />
 </template>
 <script lang="ts">
-import { OioDateRangePicker } from '@oinone/kunlun-vue-ui-antd';
-import { OioDateRangePickerProps } from '@oinone/kunlun-vue-ui-common';
-import { defineComponent } from 'vue';
 import {
-  DefaultFormItem,
-  BaseFormItemProps,
-  OioCommonProps,
-  OioMetadataProps,
+  OioDateRangePicker,
+  OioDateRangePickerProps,
   useInjectOioDefaultFormContext
-} from '../../../../../basic';
+} from '@oinone/kunlun-vue-ui-antd';
+import { defineComponent } from 'vue';
+import { BaseFormItemProps, DefaultFormItem, OioCommonProps, OioMetadataProps } from '../../../../../basic';
 import { DefaultDateTimeRangePickerProps, useDateTimeRangePickerProps } from '../../../../form/date/range/props';
 
 export default defineComponent({

package/src/field/table/date/range/editor/DefaultEditorDateTimeRangePicker.vue

@@ -18,16 +18,13 @@
   />
 </template>
 <script lang="ts">
-import { OioDateTimeRangePicker } from '@oinone/kunlun-vue-ui-antd';
-import { OioDateTimeRangePickerProps } from '@oinone/kunlun-vue-ui-common';
-import { defineComponent } from 'vue';
 import {
-  DefaultFormItem,
-  BaseFormItemProps,
-  OioCommonProps,
-  OioMetadataProps,
+  OioDateTimeRangePicker,
+  OioDateTimeRangePickerProps,
   useInjectOioDefaultFormContext
-} from '../../../../../basic';
+} from '@oinone/kunlun-vue-ui-antd';
+import { defineComponent } from 'vue';
+import { BaseFormItemProps, DefaultFormItem, OioCommonProps, OioMetadataProps } from '../../../../../basic';
 import { DefaultDateTimeRangePickerProps, useDateTimeRangePickerProps } from '../../../../form/date/range/props';
 
 export default defineComponent({