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

package/src/field/form/enum/select/multi/MultiEnumSelect.vue

@@ -8,14 +8,20 @@
         dropdownClassName="oio-select-dropdown"
         :placeholder="placeholder"
         :allowClear="allowClear"
+        show-arrow
+        :open="dropdownOpen"
+        max-tag-count="responsive"
+        :max-tag-placeholder="defaultMaxTagPlaceholder"
         :filter-option="false"
         :not-found-content="null"
         :default-active-first-option="false"
-        :value="realValue"
+        :value="realValue === null ? undefined : realValue"
         :disabled="readonly && !disabled ? false : disabled"
         :get-popup-container="getPopupContainer"
         @change="multiSelectChange"
         @blur="blur"
+        @dropdownVisibleChange="dropdownVisibleChange"
+        @keydown="onKeydown"
       >
         <a-select-option
           v-for="item in realOptions"
@@ -30,19 +36,19 @@
   </div>
 </template>
 <script lang="ts">
-import { RuntimeEnumerationOption } from '@oinone/kunlun-engine';
-import { SelectItem } from '@oinone/kunlun-vue-ui-common';
-import { computed, defineComponent, PropType, ref } from 'vue';
+import { RuntimeEnumerationOption, TableKeyboardConfig } from '@oinone/kunlun-engine';
+import { SelectItem, useInjectOioDefaultFormContext, useMaxTagPlaceholder } from '@oinone/kunlun-vue-ui-antd';
 import { Select as ASelect } from 'ant-design-vue';
-import {
-  OioCommonProps,
-  OioMetadataProps,
-  useInjectOioDefaultFormContext,
-  useMetadataProps
-} from '../../../../../basic';
+import { computed, defineComponent, nextTick, PropType, ref } from 'vue';
+import { OioCommonProps, OioMetadataProps, useMetadataProps } from '../../../../../basic';
 import { optionsConvertSelectItem } from '../../../../util';
 
 export default defineComponent({
+  inheritAttrs: false,
+  components: {
+    ASelect,
+    ASelectOption: ASelect.Option
+  },
   props: {
     ...OioCommonProps,
     ...OioMetadataProps,
@@ -60,12 +66,11 @@ export default defineComponent({
     },
     allowClear: {
       type: Boolean
+    },
+    tableKeyboardConfig: {
+      type: Object as PropType<TableKeyboardConfig>
     }
   },
-  components: {
-    ASelect,
-    ASelectOption: ASelect.Option
-  },
   setup(props) {
     const { realValue, readonly, disabled, placeholder } = useMetadataProps(props);
 
@@ -75,6 +80,8 @@ export default defineComponent({
 
     const selectRef = ref();
 
+    const dropdownOpen = ref(false);
+
     const multiSelectChange = (val) => {
       realValue.value = val;
       if (props.change) {
@@ -82,15 +89,35 @@ export default defineComponent({
       }
       selectRef.value.focus();
     };
+
+    const dropdownVisibleChange = (val: boolean) => {
+      // 延迟响应下拉框显隐状态值，保证在键盘按下Enter时可以正常判断
+      nextTick(() => {
+        dropdownOpen.value = val;
+      });
+    };
+
+    const onKeydown = (e: KeyboardEvent) => {
+      // 当键盘数据提交快捷键与下拉框内置选中快捷键冲突时，保证行内编辑态不丢失
+      if (e.key === 'Enter' && e.key === props.tableKeyboardConfig?.enter?.key && dropdownOpen.value) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+
     return {
+      ...useMaxTagPlaceholder(),
       placeholder,
       realValue,
       readonly,
       disabled,
+      dropdownOpen,
       realOptions,
       selectRef,
       multiSelectChange,
-      getPopupContainer: props.getPopupContainer || formContext.getTriggerContainer
+      getPopupContainer: props.getPopupContainer || formContext.getTriggerContainer,
+      dropdownVisibleChange,
+      onKeydown
     };
   }
 });

package/src/field/form/enum/select/single/EnumSelect.vue

@@ -12,32 +12,36 @@
     <oio-select
       v-else
       dropdownClassName="oio-ant-select-dropdown-global"
+      show-search
       :value="realValue"
+      :dropdown-visible="dropdownVisible"
       :options="realOptions"
       :properties="properties"
       :get-trigger-container="getTriggerContainer"
       :allowClear="allowClear"
-      :filter-option="false"
+      :filter-option="filterOption"
       :not-found-content="null"
       :default-active-first-option="false"
       :disabled="disabled"
       :placeholder="placeholder"
+      @update:dropdown-visible="onUpdateDropdownVisible"
       @change="selectChange"
       @blur="blur"
       @focus="focus"
+      @keydown="onKeydown"
     />
   </div>
 </template>
 <script lang="ts">
-import { RuntimeEnumerationOption } from '@oinone/kunlun-engine';
-import { defaultSelectProperties, OioSelect, SelectItem } from '@oinone/kunlun-vue-ui-antd';
-import { computed, defineComponent, PropType } from 'vue';
+import { RuntimeEnumerationOption, TableKeyboardConfig } from '@oinone/kunlun-engine';
 import {
-  OioCommonProps,
-  OioMetadataProps,
-  useInjectOioDefaultFormContext,
-  useMetadataProps
-} from '../../../../../basic';
+  defaultSelectProperties,
+  OioSelect,
+  SelectItem,
+  useInjectOioDefaultFormContext
+} from '@oinone/kunlun-vue-ui-antd';
+import { computed, defineComponent, nextTick, PropType, ref } from 'vue';
+import { OioCommonProps, OioMetadataProps, useMetadataProps } from '../../../../../basic';
 import { optionsConvertSelectItem } from '../../../../util';
 
 export default defineComponent({
@@ -64,11 +68,16 @@ export default defineComponent({
     },
     placeholder: {
       type: String
+    },
+    tableKeyboardConfig: {
+      type: Object as PropType<TableKeyboardConfig>
     }
   },
   setup(props) {
     const { realValue, readonly, disabled, placeholder } = useMetadataProps(props);
 
+    const dropdownVisible = ref(false);
+
     const realOptions = computed<SelectItem<RuntimeEnumerationOption>[]>(() =>
       optionsConvertSelectItem(props.options).map((opt) => {
         return {
@@ -86,15 +95,60 @@ export default defineComponent({
       }
       props.blur && props.blur();
     };
+
+    const filterOption = (val: string, option: SelectItem) => {
+      return option.label.includes(val);
+    };
+
+    /**
+     * 在单选状态，下拉框聚焦时，点击回车会出现调用两次 onDropdownVisibleChange 方法的现象
+     * 该计数器用于判定此时是否正处于回车事件，且需要进行数据提交的情况
+     */
+    let count = 0;
+
+    const onUpdateDropdownVisible = (val: boolean) => {
+      if (val) {
+        if (count === 0) {
+          count++;
+          setTimeout(() => (count = 0));
+        }
+        dropdownVisible.value = true;
+      } else {
+        if (count === 1) {
+          count++;
+        }
+        nextTick(() => {
+          dropdownVisible.value = false;
+        });
+      }
+    };
+
+    const onKeydown = (e: KeyboardEvent) => {
+      // 当键盘数据提交快捷键与下拉框内置选中快捷键冲突时，保证行内编辑态不丢失
+      if (e.key === 'Enter' && e.key === props.tableKeyboardConfig?.enter?.key) {
+        if (dropdownVisible.value) {
+          if (count === 2) {
+            return;
+          }
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      }
+    };
+
     return {
       placeholder,
       properties: defaultSelectProperties,
       realValue,
       readonly,
       disabled,
+      dropdownVisible,
       realOptions,
       selectChange,
-      getTriggerContainer: props.getPopupContainer || formContext.getTriggerContainer
+      filterOption,
+      getTriggerContainer: props.getPopupContainer || formContext.getTriggerContainer,
+      onUpdateDropdownVisible,
+      onKeydown
     };
   }
 });

package/src/field/form/enum/thumbnail/FormEnumThumbnailFieldWidget.ts

@@ -1,7 +1,7 @@
 import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
+import { BooleanHelper } from '@oinone/kunlun-shared';
 import { SPI } from '@oinone/kunlun-spi';
 import { Widget } from '@oinone/kunlun-vue-widget';
-import { isNil } from 'lodash-es';
 import { FormFieldWidget } from '../../../../basic';
 import { FormEnumFieldAbstractWidget } from '../FormEnumFieldAbstractWidget';
 import FormEnumThumbnail from './FormEnumThumbnail.vue';
@@ -22,11 +22,7 @@ export class FormEnumThumbnailFieldWidget extends FormEnumFieldAbstractWidget {
 
   @Widget.Reactive()
   protected get allowClear() {
-    const { allowClear } = this.getDsl();
-    if (isNil(allowClear)) {
-      return false;
-    }
-    return allowClear;
+    return BooleanHelper.toBoolean(this.getDsl().allowClear) || false;
   }
 }
 

package/src/field/form/float/Plat.vue

@@ -1,14 +1,10 @@
 <template>
-  <div
-    class="plat_map_container"
-    ref="mapContainerRef"
-    :class="[disabled && 'location_map_container-disabled']"
-    :style="styles"
-  ></div>
+  <div v-bind="basicProps"></div>
 </template>
 <script lang="ts">
-import { defineComponent, PropType, ref, onBeforeUnmount, computed, onMounted, watch, nextTick } from 'vue';
 import { ViewType } from '@oinone/kunlun-meta';
+import { PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { computed, defineComponent, onBeforeUnmount, PropType, ref, watch } from 'vue';
 import { BaseFormItemProps, OioCommonProps, OioMetadataProps } from '../../../basic';
 
 const loadBaiDuMap = (cb) => {
@@ -78,7 +74,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  setup(props) {
+  setup(props, { attrs }) {
     const defaultCoords = {
       longitude: 116.404,
       latitude: 39.915
@@ -102,6 +98,17 @@ export default defineComponent({
       };
     });
 
+    const basicProps = computed(() => {
+      const classList = ['plat_map_container'];
+      if (props.disabled) {
+        classList.push('location_map_container-disabled');
+      }
+      return {
+        ...PropRecordHelper.collectionBasicProps(attrs, classList, styles.value),
+        ref: 'mapContainerRef'
+      };
+    });
+
     const setCoordValue = () => {
       const [lng, lat] = props.value as [number, number];
 
@@ -256,7 +263,10 @@ export default defineComponent({
       }
     });
 
-    return { mapContainerRef, styles };
+    return {
+      mapContainerRef,
+      basicProps
+    };
   }
 });
 </script>
@@ -264,6 +274,7 @@ export default defineComponent({
 #plat_map_container {
   border: 1px solid #e8eaec;
   border-radius: 10px;
+
   .anchorBL {
     display: none;
   }
@@ -277,6 +288,7 @@ export default defineComponent({
 
 .location_map_container-disabled {
   position: relative;
+
   &::after {
     position: absolute;
     display: block;

package/src/field/form/index.ts

@@ -12,7 +12,6 @@ export * from './o2o';
 export * from './map';
 export * from './string';
 export * from './text';
-export * from './metadata-area';
 
 export * from './abstract/FormNumberAbstractFieldWidget';
 export * from './abstract/FormInputAbstractFieldWidget';

package/src/field/form/m2m/company/FormM2MCompanyFieldWidget.ts

@@ -1,8 +1,11 @@
+import { PamirsCompany, RuntimeM2MField, SubmitRelationHandler, SubmitValue } from '@oinone/kunlun-engine';
 import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
+import { Optional } from '@oinone/kunlun-shared';
 import { SPI } from '@oinone/kunlun-spi';
-import { FormFieldWidget } from '../../../../basic';
-import { generatorDefaultCompanyTreeDefinition } from '../../../../util/default-tree-definition';
-import { FormM2MTreeSelectFieldWidget } from '../tree-select/FormM2MTreeSelectFieldWidget';
+import { SelectMode } from '@oinone/kunlun-vue-ui-common';
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { FormFieldWidget, SelectFieldWidget } from '../../../../basic';
+import { CompanySelect, CompanySelectBizStyle } from '../../../../components';
 
 @SPI.ClassFactory(
   FormFieldWidget.Token({
@@ -11,8 +14,32 @@ import { FormM2MTreeSelectFieldWidget } from '../tree-select/FormM2MTreeSelectFi
     widget: 'Company'
   })
 )
-export class FormM2MCompanyFieldWidget extends FormM2MTreeSelectFieldWidget {
-  protected generatorDefaultTreeDefinition(props) {
-    return generatorDefaultCompanyTreeDefinition();
+export class FormM2MCompanyFieldWidget extends SelectFieldWidget<PamirsCompany, PamirsCompany[], RuntimeM2MField> {
+  @Widget.Reactive()
+  protected mode: SelectMode = SelectMode.multiple;
+
+  public initialize(props) {
+    super.initialize(props);
+    this.setComponent(CompanySelect);
+    return this;
+  }
+
+  @Widget.Reactive()
+  protected get bizStyle(): string | undefined {
+    return Optional.ofNullable(super.bizStyle).orElse(CompanySelectBizStyle.style2);
+  }
+
+  public async submit(submitValue: SubmitValue) {
+    const { field, itemName, value, viewMode, submitCache, submitType, relationUpdateType } = this;
+    return SubmitRelationHandler.M2M(
+      field,
+      itemName,
+      submitValue,
+      value,
+      viewMode,
+      submitCache,
+      submitType,
+      relationUpdateType
+    );
   }
 }

package/src/field/form/m2m/department/FormM2MDepartmentFieldWidget.ts

@@ -1,8 +1,11 @@
+import { PamirsDepartment, RuntimeM2MField, SubmitRelationHandler, SubmitValue } from '@oinone/kunlun-engine';
 import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
+import { BooleanHelper, StringHelper } from '@oinone/kunlun-shared';
 import { SPI } from '@oinone/kunlun-spi';
-import { FormFieldWidget } from '../../../../basic';
-import { generatorDefaultDepartmentTreeDefinition } from '../../../../util/default-tree-definition';
-import { FormM2MTreeSelectFieldWidget } from '../tree-select/FormM2MTreeSelectFieldWidget';
+import { SelectMode } from '@oinone/kunlun-vue-ui-common';
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { FormFieldWidget, SelectFieldWidget } from '../../../../basic';
+import { DepartmentSelect } from '../../../../components';
 
 @SPI.ClassFactory(
   FormFieldWidget.Token({
@@ -11,8 +14,55 @@ import { FormM2MTreeSelectFieldWidget } from '../tree-select/FormM2MTreeSelectFi
     widget: 'Department'
   })
 )
-export class FormM2MDepartmentFieldWidget extends FormM2MTreeSelectFieldWidget {
-  protected generatorDefaultTreeDefinition(props) {
-    return generatorDefaultDepartmentTreeDefinition();
+export class FormM2MDepartmentFieldWidget extends SelectFieldWidget<
+  PamirsDepartment,
+  PamirsDepartment[],
+  RuntimeM2MField
+> {
+  @Widget.Reactive()
+  protected mode: SelectMode = SelectMode.multiple;
+
+  public initialize(props) {
+    super.initialize(props);
+    this.setComponent(DepartmentSelect);
+    return this;
+  }
+
+  @Widget.Reactive()
+  protected get departmentCodes(): string[] | undefined {
+    return StringHelper.convertArray(this.getDsl().departmentCodes);
+  }
+
+  @Widget.Reactive()
+  protected get userCompanyDept(): boolean | undefined {
+    return BooleanHelper.toBoolean(this.getDsl().userCompanyDept);
+  }
+
+  @Widget.Reactive()
+  protected get userDept(): boolean | undefined {
+    return BooleanHelper.toBoolean(this.getDsl().userDept);
+  }
+
+  @Widget.Reactive()
+  protected get userDeptAndChildren(): boolean | undefined {
+    return BooleanHelper.toBoolean(this.getDsl().userDeptAndChildren);
+  }
+
+  protected generatorSelectItemKey(value: PamirsDepartment): string {
+    return value.code || super.generatorSelectItemKey(value);
+  }
+
+  public async submit(submitValue: SubmitValue) {
+    const { field, itemName, value, viewMode, submitCache, submitType, relationUpdateType } = this;
+    return SubmitRelationHandler.M2M(
+      field,
+      itemName,
+      submitValue,
+      value,
+      viewMode,
+      submitCache,
+      submitType,
+      relationUpdateType
+    );
   }
 }

package/src/field/form/m2m/employee/FormM2MEmployeeFieldWidget.ts

@@ -1,8 +1,11 @@
+import { PamirsEmployee, RuntimeM2MField, SubmitRelationHandler, SubmitValue } from '@oinone/kunlun-engine';
 import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
+import { BooleanHelper, Optional, StringHelper } from '@oinone/kunlun-shared';
 import { SPI } from '@oinone/kunlun-spi';
-import { FormFieldWidget } from '../../../../basic';
-import { generatorDefaultEmployeeTreeDefinition } from '../../../../util/default-tree-definition';
-import { FormM2MTreeSelectFieldWidget } from '../tree-select/FormM2MTreeSelectFieldWidget';
+import { SelectMode } from '@oinone/kunlun-vue-ui-common';
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { FormFieldWidget, SelectFieldWidget } from '../../../../basic';
+import { EmployeeSelect } from '../../../../components';
 
 @SPI.ClassFactory(
   FormFieldWidget.Token({
@@ -11,8 +14,61 @@ import { FormM2MTreeSelectFieldWidget } from '../tree-select/FormM2MTreeSelectFi
     widget: 'Employee'
   })
 )
-export class FormM2MEmployeeFieldWidget extends FormM2MTreeSelectFieldWidget {
-  protected generatorDefaultTreeDefinition(props) {
-    return generatorDefaultEmployeeTreeDefinition();
+export class FormM2MEmployeeFieldWidget extends SelectFieldWidget<PamirsEmployee, PamirsEmployee[], RuntimeM2MField> {
+  @Widget.Reactive()
+  protected mode: SelectMode = SelectMode.multiple;
+
+  public initialize(props) {
+    super.initialize(props);
+    this.setComponent(EmployeeSelect);
+    return this;
+  }
+
+  @Widget.Reactive()
+  protected get employeeCodes(): string[] | undefined {
+    return StringHelper.convertArray(this.getDsl().employeeCodes);
+  }
+
+  @Widget.Reactive()
+  protected get departmentCodes(): string[] | undefined {
+    return StringHelper.convertArray(this.getDsl().departmentCodes);
+  }
+
+  @Widget.Reactive()
+  protected get roleCodes(): string[] | undefined {
+    return StringHelper.convertArray(this.getDsl().roleCodes);
+  }
+
+  @Widget.Reactive()
+  protected get userEmployee(): boolean | undefined {
+    return BooleanHelper.toBoolean(this.getDsl().userEmployee);
+  }
+
+  @Widget.Reactive()
+  protected get userDept(): boolean | undefined {
+    return BooleanHelper.toBoolean(this.getDsl().userDept);
+  }
+
+  @Widget.Reactive()
+  protected get userDeptAndChildren(): boolean | undefined {
+    return BooleanHelper.toBoolean(this.getDsl().userDeptAndChildren);
+  }
+
+  protected generatorSelectItemKey(value: PamirsEmployee): string {
+    return value.code || super.generatorSelectItemKey(value);
+  }
+
+  public async submit(submitValue: SubmitValue) {
+    const { field, itemName, value, viewMode, submitCache, submitType, relationUpdateType } = this;
+    return SubmitRelationHandler.M2M(
+      field,
+      itemName,
+      submitValue,
+      value,
+      viewMode,
+      submitCache,
+      submitType,
+      relationUpdateType
+    );
   }
 }

package/src/field/form/m2m/index.ts

@@ -3,7 +3,8 @@ export * from './checkbox';
 export * from './company/FormM2MCompanyFieldWidget';
 export * from './department/FormM2MDepartmentFieldWidget';
 export * from './employee/FormM2MEmployeeFieldWidget';
-export * from './select/FormM2MFieldSelectWidget';
+export * from './role/FormM2MRoleFieldWidget';
+export * from './select';
 export * from './table/FormM2MTableFieldWidget';
 export * from './tree';
 export * from './tree-select';

package/src/field/form/m2m/role/FormM2MRoleFieldWidget.ts

@@ -0,0 +1,54 @@
+import { AuthRole, RuntimeM2MField, SubmitRelationHandler, SubmitValue } from '@oinone/kunlun-engine';
+import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
+import { BooleanHelper, StringHelper } from '@oinone/kunlun-shared';
+import { SPI } from '@oinone/kunlun-spi';
+import { SelectMode } from '@oinone/kunlun-vue-ui-common';
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { FormFieldWidget, SelectFieldWidget } from '../../../../basic';
+import { RoleSelect } from '../../../../components';
+
+@SPI.ClassFactory(
+  FormFieldWidget.Token({
+    viewType: [ViewType.Form, ViewType.Search],
+    ttype: ModelFieldType.ManyToMany,
+    widget: 'Role'
+  })
+)
+export class FormM2MRoleFieldWidget extends SelectFieldWidget<AuthRole, AuthRole[], RuntimeM2MField> {
+  @Widget.Reactive()
+  protected mode: SelectMode = SelectMode.multiple;
+
+  public initialize(props) {
+    super.initialize(props);
+    this.setComponent(RoleSelect);
+    return this;
+  }
+
+  @Widget.Reactive()
+  protected get roleCodes(): string[] | undefined {
+    return StringHelper.convertArray(this.getDsl().roleCodes);
+  }
+
+  @Widget.Reactive()
+  protected get userRole(): boolean | undefined {
+    return BooleanHelper.toBoolean(this.getDsl().userRole);
+  }
+
+  protected generatorSelectItemKey(value: AuthRole): string {
+    return value.code || super.generatorSelectItemKey(value);
+  }
+
+  public async submit(submitValue: SubmitValue) {
+    const { field, itemName, value, viewMode, submitCache, submitType, relationUpdateType } = this;
+    return SubmitRelationHandler.M2M(
+      field,
+      itemName,
+      submitValue,
+      value,
+      viewMode,
+      submitCache,
+      submitType,
+      relationUpdateType
+    );
+  }
+}

package/src/field/form/m2m/select/FormM2MSelectFieldWidget.ts

@@ -0,0 +1,37 @@
+import { ActiveRecord, RuntimeM2MField, SubmitHandler, SubmitValue } from '@oinone/kunlun-engine';
+import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
+import { SPI } from '@oinone/kunlun-spi';
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { FormFieldWidget, FormSelectComplexFieldWidget } from '../../../../basic';
+import DefaultMultipleSelect from '../../abstract/select/DefaultMultipleSelect.vue';
+
+@SPI.ClassFactory(
+  FormFieldWidget.Token({
+    viewType: [ViewType.Form, ViewType.Search],
+    ttype: ModelFieldType.ManyToMany
+  })
+)
+export class FormM2MSelectFieldWidget extends FormSelectComplexFieldWidget<ActiveRecord[], RuntimeM2MField> {
+  public initialize(props) {
+    super.initialize(props);
+    this.setComponent(DefaultMultipleSelect);
+    return this;
+  }
+
+  @Widget.Method()
+  public change(value) {
+    this.x2mChange(value);
+  }
+
+  public async submit(submitValue: SubmitValue) {
+    const { field, itemName, value } = this;
+    return SubmitHandler.M2M(field, itemName, submitValue, value);
+  }
+
+  protected async mounted() {
+    await super.mounted();
+    await this.loadOriginValue();
+  }
+}
+
+export const FormM2MFieldSelectWidget = FormM2MSelectFieldWidget;

package/src/field/form/m2m/select/FormM2MSelectModalFieldWidget.ts

@@ -0,0 +1,33 @@
+import { ActiveRecord, RuntimeM2MField, SubmitHandler, SubmitValue } from '@oinone/kunlun-engine';
+import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
+import { SPI } from '@oinone/kunlun-spi';
+import { SelectMode } from '@oinone/kunlun-vue-ui-common';
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { FormFieldWidget, SelectModalFieldWidget } from '../../../../basic';
+
+@SPI.ClassFactory(
+  FormFieldWidget.Token({
+    viewType: [ViewType.Form, ViewType.Search],
+    ttype: ModelFieldType.ManyToMany,
+    widget: 'SelectModal'
+  })
+)
+export class FormM2MSelectModalFieldWidget extends SelectModalFieldWidget<ActiveRecord[], RuntimeM2MField> {
+  @Widget.Reactive()
+  protected get selectMode() {
+    return SelectMode.multiple;
+  }
+
+  public async submit(submitValue: SubmitValue) {
+    const { field, itemName, value } = this;
+    return SubmitHandler.M2M(field, itemName, submitValue, value);
+  }
+
+  protected filterX2mChangeValue(value: any) {
+    return value;
+  }
+
+  protected async mounted() {
+    await this.loadOriginValue();
+  }
+}