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

package/src/field/detail/enum/Enum.vue

@@ -1,14 +1,17 @@
 <template>
-  <div v-if="realOptions.length > 0 && optionColor" class="detail-multi-select">
-    <div class="detail-multi-select-item" v-for="item in realOptions" :key="item.key" :style="computeStyle(item)">
-      <div class="detail-multi-select-item-font" :title="item.label">
-        {{ item.label }}
+  <detail-common-field
+    :is-empty="!realOptions.length || !optionColor"
+    :empty-style="emptyStyle"
+    :value="displayNameListStr"
+  >
+    <div class="detail-multi-select">
+      <div class="detail-multi-select-item" v-for="item in realOptions" :key="item.key" :style="computeStyle(item)">
+        <div class="detail-multi-select-item-font" :title="item.label">
+          {{ item.label }}
+        </div>
       </div>
     </div>
-  </div>
-  <div v-else>
-    <detail-common-field :empty-style="emptyStyle" :value="displayNameListStr" />
-  </div>
+  </detail-common-field>
 </template>
 <script lang="ts">
 import { EnumOptionState } from '@oinone/kunlun-meta';

package/src/field/detail/map/DefaultReadonlyMap.vue

@@ -0,0 +1,33 @@
+<template>
+  <detail-common-field class="default-map" :is-empty="isEmpty">
+    <div v-for="item in items" :key="item.name" class="default-map-item default-map-item-readonly">
+      <span class="default-map-item-name-readonly">{{ item.name || '' }}</span>
+      <span class="default-map-item-separator">{{ ': ' }}</span>
+      <span class="default-map-item-value-readonly">{{ item.value || '' }}</span>
+    </div>
+  </detail-common-field>
+</template>
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue';
+import { MapItem } from '../../form/map/typing';
+import { DetailCommonField } from '../common';
+
+export default defineComponent({
+  name: 'DefaultReadonlyMap',
+  components: { DetailCommonField },
+  inheritAttrs: false,
+  props: {
+    items: {
+      type: Array as PropType<MapItem[]>,
+      default: () => []
+    }
+  },
+  setup(props) {
+    const isEmpty = computed(() => !props.items?.length);
+
+    return {
+      isEmpty
+    };
+  }
+});
+</script>

package/src/field/detail/map/DetailMapFieldWidget.ts

@@ -2,6 +2,7 @@ import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
 import { SPI } from '@oinone/kunlun-spi';
 import { FormFieldWidget } from '../../../basic';
 import { FormMapFieldWidget } from '../../form';
+import DefaultReadonlyMap from './DefaultReadonlyMap.vue';
 
 @SPI.ClassFactory(
   FormFieldWidget.Token({
@@ -9,4 +10,10 @@ import { FormMapFieldWidget } from '../../form';
     ttype: ModelFieldType.Map
   })
 )
-export class DetailMapFieldWidget extends FormMapFieldWidget {}
+export class DetailMapFieldWidget extends FormMapFieldWidget {
+  public initialize(props) {
+    super.initialize(props);
+    this.setComponent(DefaultReadonlyMap);
+    return this;
+  }
+}

package/src/field/detail/o2m/select/Select.vue

@@ -1,14 +1,13 @@
 <template>
-  <div v-if="currentValue.length > 0" class="detail-multi-select">
-    <div class="detail-multi-select-item" v-for="item in currentValue" :key="item.value">
-      <div class="detail-multi-select-item-font" :title="item.label">
-        {{ item.label }}
+  <detail-common-field :is-empty="!currentValue.length" :empty-style="emptyStyle">
+    <div class="detail-multi-select">
+      <div class="detail-multi-select-item" v-for="item in currentValue" :key="item.value">
+        <div class="detail-multi-select-item-font" :title="item.label">
+          {{ item.label }}
+        </div>
       </div>
     </div>
-  </div>
-  <div v-else>
-    <detail-common-field :empty-style="emptyStyle" />
-  </div>
+  </detail-common-field>
 </template>
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';

package/src/field/detail/string/string-with-copy/String.vue

@@ -18,8 +18,8 @@
   </div>
 </template>
 <script lang="ts">
+import { OioIcon, useCopy } from '@oinone/kunlun-vue-ui-antd';
 import { defineComponent } from 'vue';
-import { OioIcon, OioNotification } from '@oinone/kunlun-vue-ui-antd';
 
 export default defineComponent({
   props: {
@@ -31,28 +31,10 @@ export default defineComponent({
   components: { OioIcon },
   inheritAttrs: false,
   setup(props) {
-    const onCopy = () => {
-      // 创建一个临时的textarea元素
-      let textarea = document.createElement('textarea');
-      textarea.value = props.value!;
-      textarea.setAttribute('readonly', '');
-      textarea.style.position = 'absolute';
-      textarea.style.left = '-9999px';
-      document.body.appendChild(textarea);
-
-      // 选中textarea的文本
-      textarea.select();
-      textarea.setSelectionRange(0, textarea.value.length);
-
-      // 复制文本
-      document.execCommand('copy');
+    const { browserCopyAndNotify } = useCopy();
 
-      // 移除临时的textarea元素
-      document.body.removeChild(textarea);
-
-      OioNotification.success('复制', '复制成功');
-
-      textarea = null as any;
+    const onCopy = () => {
+      browserCopyAndNotify(props.value || '');
     };
 
     return { onCopy };

package/src/field/detail/string/tag/DetailTag.vue

@@ -1,12 +1,11 @@
 <template>
-  <div v-if="list.length > 0" class="detail-multi-select">
-    <div class="detail-multi-select-item" v-for="item in list" :key="item">
-      <div class="detail-multi-select-item-font" :title="item" v-html="item"></div>
+  <detail-common-field :is-empty="!list.length" :empty-style="emptyStyle">
+    <div class="detail-multi-select">
+      <div class="detail-multi-select-item" v-for="item in list" :key="item">
+        <div class="detail-multi-select-item-font" :title="item" v-html="item"></div>
+      </div>
     </div>
-  </div>
-  <div v-else>
-    <detail-common-field :empty-style="emptyStyle" />
-  </div>
+  </detail-common-field>
 </template>
 <script lang="ts">
 import { defineComponent, PropType, computed } from 'vue';

package/src/field/eip/form/work-scope/service.ts

@@ -29,4 +29,3 @@ export async function queryOpenInterface() {
   const result = await http.mutate(SYSTEM_MODULE_NAME.EIP, body);
   return result.data.eipOpenInterfaceQuery.queryListByWrapper as unknown as any[];
 }
-

package/src/field/form/{m2m/select/SelectWidget.vue → abstract/select/DefaultMultipleSelect.vue}

@@ -2,10 +2,10 @@
   <div class="form-multi-select" :class="[!allowClear && 'hide-clear']">
     <div class="readonly" v-if="innerReadonly && !innerDisabled">
       <a-select
+        mode="multiple"
+        label-in-value
         :max-tag-count="maxTagCount"
         :placeholder="placeholder"
-        label-in-value
-        mode="multiple"
         :value="currentValue"
         :options="optionList"
       />
@@ -15,26 +15,43 @@
         ref="selectRef"
         mode="multiple"
         class="oio-select"
-        show-search
         label-in-value
+        :show-search="selectShowSearch"
         :max-tag-count="maxTagCount"
-        :allowClear="allowClear"
+        :allow-clear="allowClear"
+        show-arrow
         :disabled="innerDisabled"
-        :value="currentValue"
+        :value="currentValue === null ? undefined : currentValue"
         :filter-option="false"
         :default-active-first-option="false"
         :options="optionList"
         :placeholder="placeholder"
+        :open="dropdownOpen"
         :get-popup-container="getTriggerContainer"
         :dropdownClassName="dropdownClassName"
         @change="innerChange"
         @search="search"
-        @blur="blur"
-        @focus="focus"
+        @focus="onFocus"
+        @blur="onBlur"
         @popupScroll="slipSelect"
         @dropdownVisibleChange="dropdownVisibleChange"
+        @keydown="onKeydown"
       >
         <template #dropdownRender="{ menuNode: menu }">
+          <oio-input
+            v-if="inputShowSearch"
+            ref="dropdownInputRef"
+            :placeholder="placeholder"
+            :value="searchValue"
+            @update:value="search"
+            @focus="onSearchInputFocus"
+            @blur="onSearchInputBlur"
+            @keydown="onSearchInputKeydown"
+          >
+            <template #prefix>
+              <oio-icon icon="oinone-sousuo2" size="16" />
+            </template>
+          </oio-input>
           <v-nodes :vnodes="menu" />
           <div class="form-relation-select-dropdown-spin">
             <oio-spin v-if="loadMoreLoading" size="small" loading />
@@ -48,27 +65,35 @@
   </div>
 </template>
 <script lang="ts">
-import { OioSpin, OioEmptyData } from '@oinone/kunlun-vue-ui-antd';
-import { defineComponent, PropType, ref, watch } from 'vue';
+import { TableKeyboardConfig } from '@oinone/kunlun-engine';
+import { OioEmptyData, OioIcon, OioInput, OioSpin, useInjectOioDefaultFormContext } from '@oinone/kunlun-vue-ui-antd';
 import { Select as ASelect } from 'ant-design-vue';
+import { defineComponent, PropType, ref, watch } from 'vue';
 import { RelationSelectProps, relationSelectSetup } from '../../../prop';
-import { useInjectOioDefaultFormContext } from '../../../../basic';
 
 export default defineComponent({
-  props: {
-    ...RelationSelectProps,
-    value: {
-      type: Array as PropType<Record<string, unknown>[]>
-    },
-    generatorSelectOption: Function
-  },
+  name: 'DefaultMultipleSelect',
   components: {
     VNodes: (_, { attrs }) => {
       return attrs.vnodes;
     },
     OioSpin,
     OioEmptyData,
-    ASelect
+    ASelect,
+    OioInput,
+    OioIcon
+  },
+  props: {
+    ...RelationSelectProps,
+    value: {
+      type: Array as PropType<Record<string, unknown>[]>
+    },
+    generatorSelectOption: {
+      type: Function
+    },
+    tableKeyboardConfig: {
+      type: Object as PropType<TableKeyboardConfig>
+    }
   },
   setup(props) {
     const optionList = ref<Record<string, unknown>[]>([]);
@@ -101,7 +126,7 @@ export default defineComponent({
     const formContext = useInjectOioDefaultFormContext();
 
     return {
-      ...relationSelectSetup(props),
+      ...relationSelectSetup(props, true),
       optionList,
       getTriggerContainer: props.getPopupContainer || formContext.getTriggerContainer
     };

package/src/field/form/{m2o/select/SelectWidget.vue → abstract/select/DefaultSingleSelect.vue}

@@ -6,17 +6,16 @@
         dropdown-class-name="oio-select-dropdown"
         label-in-value
         :placeholder="placeholder"
-        :getPopupContainer="getTriggerContainer"
         :value="currentValue"
         :options="optionList"
       />
     </div>
-
     <div v-else>
       <a-select
+        ref="selectRef"
         class="oio-select"
         label-in-value
-        :show-search="showSearch"
+        :show-search="selectShowSearch"
         :allow-clear="allowClear"
         :disabled="innerDisabled"
         :value="currentValue"
@@ -24,17 +23,33 @@
         :default-active-first-option="false"
         :options="optionList"
         :placeholder="placeholder"
+        :open="dropdownOpen"
         :getPopupContainer="getTriggerContainer"
         :dropdownClassName="dropdownClassName"
         @change="change"
         @search="search"
         @select="innerSelect"
-        @blur="blur"
+        @focus="onFocus"
+        @blur="onBlur"
         @dropdownVisibleChange="dropdownVisibleChange"
-        @focus="focus"
         @popup-scroll="slipSelect"
+        @keydown="onKeydown"
       >
         <template #dropdownRender="{ menuNode: menu }">
+          <oio-input
+            v-if="inputShowSearch"
+            ref="dropdownInputRef"
+            :placeholder="placeholder"
+            :value="searchValue"
+            @update:value="search"
+            @focus="onSearchInputFocus"
+            @blur="onSearchInputBlur"
+            @keydown="onSearchInputKeydown"
+          >
+            <template #prefix>
+              <oio-icon icon="oinone-sousuo2" size="16" />
+            </template>
+          </oio-input>
           <v-nodes :vnodes="menu" />
           <div class="form-relation-select-dropdown-spin">
             <oio-spin v-if="loadMoreLoading" size="small" loading />
@@ -52,21 +67,15 @@
 </template>
 <script lang="ts">
 import { CheckOutlined } from '@ant-design/icons-vue';
-import { OioSpin, OioEmptyData } from '@oinone/kunlun-vue-ui-antd';
-import { computed, defineComponent, ref, watch } from 'vue';
+import { TableKeyboardConfig } from '@oinone/kunlun-engine';
+import { OioEmptyData, OioIcon, OioInput, OioSpin, useInjectOioDefaultFormContext } from '@oinone/kunlun-vue-ui-antd';
 import { Select as ASelect } from 'ant-design-vue';
-import { useInjectOioDefaultFormContext } from '../../../../basic';
+import { computed, defineComponent, PropType, ref, watch } from 'vue';
 import { RelationSelectProps, relationSelectSetup } from '../../../prop';
 
 export default defineComponent({
+  name: 'DefaultSingleSelect',
   inheritAttrs: false,
-  props: {
-    ...RelationSelectProps,
-    value: Object,
-    currentValueLabel: String,
-    handleSelectedValueLabel: Function,
-    generatorSelectOption: Function
-  },
   components: {
     VNodes: (_, { attrs }) => {
       return attrs.vnodes;
@@ -74,7 +83,21 @@ export default defineComponent({
     CheckOutlined,
     OioEmptyData,
     OioSpin,
-    ASelect
+    ASelect,
+    OioInput,
+    OioIcon
+  },
+  props: {
+    ...RelationSelectProps,
+    value: Object,
+    currentValueLabel: String,
+    handleSelectedValueLabel: Function,
+    generatorSelectOption: {
+      type: Function
+    },
+    tableKeyboardConfig: {
+      type: Object as PropType<TableKeyboardConfig>
+    }
   },
   setup(props) {
     const optionList = ref<Record<string, unknown>[]>([]);
@@ -86,7 +109,6 @@ export default defineComponent({
       if (props.value && props.value[props.relationFieldKey]) {
         return { value: props.value[props.relationFieldKey] };
       }
-
       return null;
     });
 

package/src/field/form/date/DefaultDatePicker.vue

@@ -33,12 +33,11 @@
   </oio-date-picker>
 </template>
 <script lang="ts">
-import { OioDatePicker } from '@oinone/kunlun-vue-ui-antd';
-import { OioDatePickerProps } from '@oinone/kunlun-vue-ui-common';
+import { OioDatePicker, OioDatePickerProps, useInjectOioDefaultFormContext } from '@oinone/kunlun-vue-ui-antd';
 import { defineComponent, PropType } from 'vue';
-import { OioCommonProps, OioMetadataProps, useInjectOioDefaultFormContext } from '../../../basic';
-import { useDateTimePickerProps } from './use-date-time-picker-props';
+import { OioCommonProps, OioMetadataProps } from '../../../basic';
 import { DateQuickOption } from './date-common';
+import { useDateTimePickerProps } from './use-date-time-picker-props';
 
 export default defineComponent({
   name: 'DefaultDatePicker',

package/src/field/form/date/DefaultDateTimePicker.vue

@@ -37,13 +37,12 @@
   </oio-date-time-picker>
 </template>
 <script lang="ts">
-import { OioDateTimePicker } from '@oinone/kunlun-vue-ui-antd';
-import { OioDateTimePickerProps } from '@oinone/kunlun-vue-ui-common';
+import { OioDateTimePicker, OioDateTimePickerProps, useInjectOioDefaultFormContext } from '@oinone/kunlun-vue-ui-antd';
 import { Moment } from 'moment';
 import { defineComponent, PropType } from 'vue';
-import { OioCommonProps, OioMetadataProps, useInjectOioDefaultFormContext } from '../../../basic';
-import { useDateTimePickerProps } from './use-date-time-picker-props';
+import { OioCommonProps, OioMetadataProps } from '../../../basic';
 import { DateQuickOption } from './date-common';
+import { useDateTimePickerProps } from './use-date-time-picker-props';
 
 export default defineComponent({
   name: 'DefaultDateTimePicker',

package/src/field/form/date/DefaultTimePicker.vue

@@ -18,10 +18,9 @@
   />
 </template>
 <script lang="ts">
-import { OioTimePicker } from '@oinone/kunlun-vue-ui-antd';
-import { OioTimePickerProps } from '@oinone/kunlun-vue-ui-common';
+import { OioTimePicker, OioTimePickerProps, useInjectOioDefaultFormContext } from '@oinone/kunlun-vue-ui-antd';
 import { defineComponent } from 'vue';
-import { OioCommonProps, OioMetadataProps, useInjectOioDefaultFormContext } from '../../../basic';
+import { OioCommonProps, OioMetadataProps } from '../../../basic';
 import { useDateTimePickerProps } from './use-date-time-picker-props';
 
 export default defineComponent({

package/src/field/form/date/DefaultYearPicker.vue

@@ -15,10 +15,9 @@
   />
 </template>
 <script lang="ts">
-import { OioYearPicker } from '@oinone/kunlun-vue-ui-antd';
-import { OioYearPickerProps } from '@oinone/kunlun-vue-ui-common';
+import { OioYearPicker, OioYearPickerProps, useInjectOioDefaultFormContext } from '@oinone/kunlun-vue-ui-antd';
 import { defineComponent } from 'vue';
-import { OioCommonProps, OioMetadataProps, useInjectOioDefaultFormContext } from '../../../basic';
+import { OioCommonProps, OioMetadataProps } from '../../../basic';
 import { useDateTimePickerProps } from './use-date-time-picker-props';
 
 export default defineComponent({

package/src/field/form/date/FormDateTimeFieldWidget.ts

@@ -108,13 +108,6 @@ export class FormDateTimeFieldWidget extends FormFieldWidget<string> {
     );
   }
 
-  @Widget.Reactive()
-  protected get allowClear(): boolean {
-    return Optional.ofNullable(this.getDsl().allowClear)
-      .map((v) => BooleanHelper.toBoolean(v))
-      .orElse(true)!;
-  }
-
   @Widget.Reactive()
   protected get quickOptions(): DateQuickOption[] {
     const _quickOptions = this.getDsl().quickOptions;

package/src/field/form/date/range/DefaultDateRangePicker.vue

@@ -1,5 +1,7 @@
 <template>
   <default-form-item
+    :class="$attrs.class"
+    :style="$attrs.style"
     :name="itemName"
     :invisible="invisible"
     :colon="colon"
@@ -32,16 +34,13 @@
   </default-form-item>
 </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 {
-  BaseFormItemProps,
-  DefaultFormItem,
-  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 './props';
 
 export default defineComponent({

package/src/field/form/date/range/DefaultDateTimeRangePicker.vue

@@ -1,5 +1,7 @@
 <template>
   <default-form-item
+    :class="$attrs.class"
+    :style="$attrs.style"
     :name="itemName"
     :invisible="invisible"
     :colon="colon"
@@ -34,17 +36,14 @@
   </default-form-item>
 </template>
 <script lang="ts">
-import { OioDateTimeRangePicker } from '@oinone/kunlun-vue-ui-antd';
-import { OioDateTimeRangePickerProps } from '@oinone/kunlun-vue-ui-common';
-import { Moment } from 'moment';
-import { defineComponent, PropType } from 'vue';
 import {
-  BaseFormItemProps,
-  DefaultFormItem,
-  OioCommonProps,
-  OioMetadataProps,
+  OioDateTimeRangePicker,
+  OioDateTimeRangePickerProps,
   useInjectOioDefaultFormContext
-} from '../../../../basic';
+} from '@oinone/kunlun-vue-ui-antd';
+import { Moment } from 'moment';
+import { defineComponent, PropType } from 'vue';
+import { BaseFormItemProps, DefaultFormItem, OioCommonProps, OioMetadataProps } from '../../../../basic';
 import { DefaultDateTimeRangePickerProps, useDateTimeRangePickerProps } from './props';
 
 export default defineComponent({

package/src/field/form/date/range/DefaultTimeRangePicker.vue

@@ -1,5 +1,7 @@
 <template>
   <default-form-item
+    :class="$attrs.class"
+    :style="$attrs.style"
     :name="itemName"
     :invisible="invisible"
     :colon="colon"
@@ -32,16 +34,13 @@
   </default-form-item>
 </template>
 <script lang="ts">
-import { OioTimeRangePicker } from '@oinone/kunlun-vue-ui-antd';
-import { OioTimeRangePickerProps } from '@oinone/kunlun-vue-ui-common';
-import { defineComponent } from 'vue';
 import {
-  BaseFormItemProps,
-  DefaultFormItem,
-  OioCommonProps,
-  OioMetadataProps,
+  OioTimeRangePicker,
+  OioTimeRangePickerProps,
   useInjectOioDefaultFormContext
-} from '../../../../basic';
+} from '@oinone/kunlun-vue-ui-antd';
+import { defineComponent } from 'vue';
+import { BaseFormItemProps, DefaultFormItem, OioCommonProps, OioMetadataProps } from '../../../../basic';
 import { DefaultDateTimeRangePickerProps, useDateTimeRangePickerProps } from './props';
 
 export default defineComponent({

package/src/field/form/date/range/DefaultYearRangePicker.vue

@@ -1,5 +1,7 @@
 <template>
   <default-form-item
+    :class="$attrs.class"
+    :style="$attrs.style"
     :name="itemName"
     :invisible="invisible"
     :colon="colon"
@@ -31,16 +33,13 @@
   </default-form-item>
 </template>
 <script lang="ts">
-import { OioYearRangePicker } from '@oinone/kunlun-vue-ui-antd';
-import { OioYearRangePickerProps } from '@oinone/kunlun-vue-ui-common';
-import { defineComponent } from 'vue';
 import {
-  BaseFormItemProps,
-  DefaultFormItem,
-  OioCommonProps,
-  OioMetadataProps,
+  OioYearRangePicker,
+  OioYearRangePickerProps,
   useInjectOioDefaultFormContext
-} from '../../../../basic';
+} from '@oinone/kunlun-vue-ui-antd';
+import { defineComponent } from 'vue';
+import { BaseFormItemProps, DefaultFormItem, OioCommonProps, OioMetadataProps } from '../../../../basic';
 import { DefaultDateTimeRangePickerProps, useDateTimeRangePickerProps } from './props';
 
 export default defineComponent({

package/src/field/form/enum/radio/FormEnumRadioWidget.ts

@@ -1,5 +1,5 @@
 import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
-import { BooleanHelper, EnumerationValue, Optional } from '@oinone/kunlun-shared';
+import { BooleanHelper, EnumerationValue } from '@oinone/kunlun-shared';
 import { SPI } from '@oinone/kunlun-spi';
 import { Widget } from '@oinone/kunlun-vue-widget';
 import { FormFieldWidget } from '../../../../basic';
@@ -39,15 +39,13 @@ export class FormEnumRadioWidget extends FormEnumFieldAbstractWidget<Enumeration
   }
 
   @Widget.Reactive()
-  protected get allowClear() {
-    return Optional.ofNullable(this.getDsl().allowClear).orElse(false);
+  protected get allowClear(): boolean {
+    return BooleanHelper.toBoolean(this.getDsl().allowClear) || false;
   }
 
   @Widget.Reactive()
   protected get autocorrection() {
-    return Optional.ofNullable(this.getDsl().autocorrection)
-      .map((v) => BooleanHelper.toBoolean(v))
-      .orElse(false);
+    return BooleanHelper.toBoolean(this.getDsl().autocorrection) || false;
   }
 
   @Widget.Reactive()