@oinone/kunlun-vue-admin-base 7.1.0 → 7.2.1

package/src/components/select/modal-select/ModalSelect.vue

@@ -2,6 +2,12 @@
   <div class="oio-modal-select-wrapper">
     <DefaultSelect v-bind="selectProps" />
     <oio-modal v-bind="modalProps">
+      <oio-input-search
+        :value="searchValue"
+        :placeholder="$translate('搜索')"
+        allow-clear
+        @update:value="onUpdateSearchValue"
+      />
       <oio-table v-bind="tableProps">
         <oio-column v-if="checkbox" type="checkbox" width="50" />
         <oio-column v-else type="radio" width="50" />
@@ -13,8 +19,10 @@
 <script lang="ts">
 import { ActiveRecordExtendKeys, ActiveRecords } from '@oinone/kunlun-engine';
 import { CheckedChangeEvent, OioColumn, OioTable, RadioChangeEvent } from '@oinone/kunlun-vue-ui';
-import { OioModal, PropRecordHelper, SelectMode, StringHelper } from '@oinone/kunlun-vue-ui-antd';
-import { computed, defineComponent, nextTick, reactive } from 'vue';
+import { OioInputSearch, OioModal, PropRecordHelper, SelectMode, StringHelper } from '@oinone/kunlun-vue-ui-antd';
+import { WritableComputedRef } from '@vue/reactivity';
+import { debounce } from 'lodash-es';
+import { computed, defineComponent, nextTick, reactive, ref, Ref } from 'vue';
 import { DefaultSelect, DefaultSelectProps } from '../base';
 import { DefaultTableSelectProps } from '../table-select';
 
@@ -28,7 +36,8 @@ export default defineComponent({
     DefaultSelect,
     OioModal,
     OioTable,
-    OioColumn
+    OioColumn,
+    OioInputSearch
   },
   inheritAttrs: false,
   props: {
@@ -37,7 +46,7 @@ export default defineComponent({
       type: String
     }
   },
-  setup(props, { attrs }) {
+  setup(props, { attrs, emit }) {
     const state: State = reactive({
       visible: false
     });
@@ -80,6 +89,7 @@ export default defineComponent({
         notFoundContent: null,
         loadMoreLoading: null,
         onClick: () => {
+          searchValue.value = undefined;
           state.records = null;
           state.visible = true;
         }
@@ -150,8 +160,17 @@ export default defineComponent({
       state.records = newRecord;
     };
 
+    /**
+     * 当 vxe-table 加载数据数量过多，scrollHeight 达到一定高度时，会出现 bodyHeight === scrollHeight 参数异常的问题
+     * 此参数用于保留第一次滚动的有效值
+     */
+    let bodyHeight: number | undefined;
+
     const onScroll = (e: { scrollHeight: number; scrollTop: number; bodyHeight: number }) => {
-      const { scrollHeight, scrollTop, bodyHeight } = e;
+      const { scrollHeight, scrollTop } = e;
+      if (bodyHeight == null) {
+        bodyHeight = e.bodyHeight;
+      }
       if (scrollHeight - scrollTop - 1 <= bodyHeight) {
         if (props.loadCompleted) {
           return;
@@ -160,12 +179,37 @@ export default defineComponent({
       }
     };
 
+    const $$searchValue: Ref<string | undefined> = ref();
+    const searchValue: WritableComputedRef<string | undefined> = computed({
+      get() {
+        if (props.searchValue === undefined) {
+          return $$searchValue.value;
+        }
+        return props.searchValue;
+      },
+      set(val) {
+        $$searchValue.value = val;
+        emit('update:search-value', val);
+        props.onUpdateSearchValue?.(val);
+      }
+    });
+
+    const onUpdateSearchValue = (keyword: string) => {
+      searchValue.value = keyword;
+      onSearch(keyword);
+    };
+
+    const onSearch = debounce(async (keyword: string) => {
+      await props.search?.(keyword);
+    }, 300);
+
     return {
       state,
       selectProps,
       modalProps,
       tableProps,
-      checkbox
+      checkbox,
+      onUpdateSearchValue
     };
   }
 });

package/src/components/select/modal-select/style/index.scss

@@ -0,0 +1,5 @@
+.oio-modal-select-modal-wrapper {
+  .ant-modal-body > .oio-input-search {
+    margin-bottom: var(--oio-margin-md);
+  }
+}

package/src/components/select/organizational-structure-tree/OrganizationalStructureTree.vue

@@ -2,13 +2,16 @@
 import {
   OrganizationalStructureType,
   type PamirsDepartment,
-  type PamirsOrganizationalStructure
+  type PamirsOrganizationalStructure,
+  type PamirsOrganizationalStructureService,
+  type QueryWrapper,
+  translateValueByKey
 } from '@oinone/kunlun-engine';
 import type { OioTreeNode } from '@oinone/kunlun-shared';
 import { OioCheckbox, OioIcon, OioTree, SelectMode } from '@oinone/kunlun-vue-ui-antd';
 import { Radio as ARadio } from 'ant-design-vue';
 import { computed, createVNode, defineComponent, onMounted, type PropType, type VNode } from 'vue';
-import type { TreeStateLoadFunction } from '../../quick-utils';
+import type { TreeState, TreeStateLoadFunction } from '../../quick-utils';
 import { useOrganizationalStructureTree } from './init';
 
 export default defineComponent({
@@ -73,6 +76,18 @@ export default defineComponent({
   },
   emits: ['update:loading', 'update:checkedKeys', 'update:selectedKeys', 'init', 'change'],
   setup(props, { emit, expose }) {
+    const defaultLoadFunction = ((
+      res: TreeState<PamirsOrganizationalStructure>,
+      service: PamirsOrganizationalStructureService,
+      queryWrapper: QueryWrapper
+    ) => {
+      return service.queryListByFilter({
+        model: props.model,
+        companyModel: props.companyModel,
+        rsql: queryWrapper.rsql
+      });
+    }) as TreeStateLoadFunction<PamirsOrganizationalStructure>;
+
     const {
       state,
       filterData,
@@ -86,7 +101,7 @@ export default defineComponent({
       mode: props.selectMode,
       getCheckedKeys: () => props.checkedKeys,
       getSearchValue: () => props.searchValue,
-      load: props.load
+      load: props.load || defaultLoadFunction
     });
 
     const loading = computed({
@@ -112,6 +127,14 @@ export default defineComponent({
       updateTreeData();
     };
 
+    const onSelected = ({ node }: { node: OioTreeNode<PamirsDepartment> }) => {
+      if (props.selectMode === SelectMode.multiple) {
+        onUpdateChecked(node, node.checked !== true);
+      } else if (node.selectable !== false && props.selectMode === SelectMode.single) {
+        onUpdateChecked(node, node.key !== state.checkedKeys[0]);
+      }
+    };
+
     const updateTreeData = () => {
       state.data = [...state.data];
       emit('update:checkedKeys', state.checkedKeys);
@@ -152,7 +175,8 @@ export default defineComponent({
       halfCheckedAll,
       onUpdateExpandedKeys,
       onUpdateCheckedAll,
-      onUpdateChecked
+      onUpdateChecked,
+      onSelected
     };
   },
   render() {
@@ -170,6 +194,7 @@ export default defineComponent({
       showCheckedAll,
       selectable,
       selectedKeys,
+      onSelected,
       onUpdateExpandedKeys,
       onUpdateCheckedAll,
       onUpdateChecked
@@ -182,6 +207,7 @@ export default defineComponent({
       selectable: selectable || false,
       selectedKeys,
       'onUpdate:selectedKeys': (val) => this.$emit('update:selectedKeys', val),
+      onSelected,
       expandedKeys: state.expandedKeys,
       'onUpdate:expandedKeys': onUpdateExpandedKeys
     };
@@ -237,7 +263,7 @@ export default defineComponent({
     if (!!filterData.length && selectMode === SelectMode.multiple && showCheckedAll) {
       return createVNode('div', { class: `${mainClassName}-wrapper oio-scrollbar` }, [
         createVNode('div', { class: `${mainClassName}-node ${mainClassName}-node-checked-all` }, [
-          createVNode('div', { class: `${mainClassName}-node-title` }, '全选'),
+          createVNode('div', { class: `${mainClassName}-node-title` }, translateValueByKey('全选')),
           createVNode(OioCheckbox, {
             checked: checkedAll,
             indeterminate: halfCheckedAll,

package/src/components/select/table-select/TableSelect.vue

@@ -130,8 +130,17 @@ export default defineComponent({
       props.change?.(newRecord);
     };
 
+    /**
+     * 当 vxe-table 加载数据数量过多，scrollHeight 达到一定高度时，会出现 bodyHeight === scrollHeight 参数异常的问题
+     * 此参数用于保留第一次滚动的有效值
+     */
+    let bodyHeight: number | undefined;
+
     const onScroll = (e: { scrollHeight: number; scrollTop: number; bodyHeight: number }) => {
-      const { scrollHeight, scrollTop, bodyHeight } = e;
+      const { scrollHeight, scrollTop } = e;
+      if (bodyHeight == null) {
+        bodyHeight = e.bodyHeight;
+      }
       if (scrollHeight - scrollTop - 1 <= bodyHeight) {
         if (props.loadCompleted) {
           return;

package/src/components/sortable-group/SortableGroup.vue

@@ -69,7 +69,7 @@
 </template>
 
 <script lang="ts">
-import type { RuntimeModelField } from '@oinone/kunlun-engine';
+import { RuntimeModelField } from '@oinone/kunlun-engine';
 import { EDirection } from '@oinone/kunlun-service';
 import { OioButton, OioIcon, OioInput } from '@oinone/kunlun-vue-ui-antd';
 import { computed, defineComponent, type PropType, ref, watch } from 'vue';

package/src/components/upload/UploadDraggable.vue

@@ -32,9 +32,9 @@
 </template>
 
 <script lang="ts">
+import { InboxOutlined } from '@ant-design/icons-vue';
 import { OioIcon } from '@oinone/kunlun-vue-ui-antd';
 import { defineComponent } from 'vue';
-import { InboxOutlined } from '@ant-design/icons-vue';
 import { UploadCommonProps } from '../prop';
 import UploadCom from './Upload.vue';
 

package/src/components/user-prefer/SimpleUserPreferSetting.vue

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { translateValueByKey } from '@oinone/kunlun-engine';
 import { OioCheckbox, OioEmptyData, OioIcon, OioInputSearch, PropRecordHelper } from '@oinone/kunlun-vue-ui-antd';
 import { Popover as APopover } from 'ant-design-vue';
 import { computed, createVNode, defineComponent, type PropType, ref, watch } from 'vue';
@@ -168,7 +169,7 @@ export default defineComponent({
           const contentChildren = [
             createVNode(OioInputSearch, {
               value: searchValue,
-              placeholder: '请输入关键字',
+              placeholder: translateValueByKey('请输入关键字'),
               'onUpdate:value': onUpdateSearchValue
             })
           ];

package/src/container/collapse/DefaultCollapsePanel.vue

@@ -93,6 +93,7 @@ export default defineComponent({
             [`${DEFAULT_PREFIX}-collapse-panel`],
             getCurrentInstance()?.parent?.attrs?.class as string
           ),
+          title: this.$translate((getCurrentInstance()?.parent?.attrs?.title as string) || ''),
           ref: 'origin',
           forceRender: this.forceRender,
           collapsible: this.collapsible,

package/src/container/group/DefaultGroup.vue

@@ -1,6 +1,5 @@
 <script lang="ts">
 import type { DslDefinition } from '@oinone/kunlun-dsl';
-import { translateValueByKey } from '@oinone/kunlun-engine';
 import type { CSSStyle } from '@oinone/kunlun-shared';
 import { FormLayout, OioGroup, PropRecordHelper, useOioFormLayoutContext } from '@oinone/kunlun-vue-ui-antd';
 import { createVNode, defineComponent, type PropType, type Slot, vShow, withDirectives } from 'vue';
@@ -19,7 +18,7 @@ export default defineComponent({
     },
     title: {
       type: String,
-      default: translateValueByKey('分组')
+      default: '分组'
     },
     description: {
       type: String,
@@ -97,7 +96,7 @@ export default defineComponent({
         OioGroup,
         {
           ...PropRecordHelper.collectionBasicProps($attrs, ['oio-default-group']),
-          title: !title && titleToolbarInvisible ? false : title,
+          title: !title && titleToolbarInvisible ? false : this.$translate(title),
           bizStyle,
           description,
           border,
@@ -105,7 +104,7 @@ export default defineComponent({
           wrapperStyle,
           toolbarClassName,
           toolbarStyle,
-          help
+          help: this.$translate(help)
         },
         children
       ),

package/src/container/tabs/DefaultTabWidget.ts

@@ -1,3 +1,4 @@
+import { translateValueByKey } from '@oinone/kunlun-engine';
 import { SPI } from '@oinone/kunlun-spi';
 import { BooleanHelper, CallChaining, DEFAULT_TAB_TITLE, useTabBar } from '@oinone/kunlun-vue-ui-antd';
 import { Widget } from '@oinone/kunlun-vue-widget';
@@ -92,7 +93,7 @@ export class DefaultTabWidget extends BasePackWidget {
       },
       {
         ...slots,
-        tab: () => [useTabBar(this.title, this.help)]
+        tab: () => [useTabBar(translateValueByKey(this.title), translateValueByKey(this.help as string))]
       }
     );
   }

package/src/field/detail/date/DetailWeekPickerFieldWidget.ts

@@ -0,0 +1,13 @@
+import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
+import { SPI } from '@oinone/kunlun-spi';
+import { FormFieldWidget } from '../../../basic';
+import { DetailDateFieldWidget } from './DetailDateFieldWidget';
+
+@SPI.ClassFactory(
+  FormFieldWidget.Token({
+    viewType: ViewType.Detail,
+    ttype: ModelFieldType.Date,
+    widget: 'WeekPicker'
+  })
+)
+export class DetailWeekPickerFieldWidget extends DetailDateFieldWidget {}

package/src/field/detail/date/index.ts

@@ -3,3 +3,4 @@ export * from './DetailDateTimeFieldWidget';
 export * from './DetailDateFieldWidget';
 export * from './DetailTimeFieldWidget';
 export * from './DetailYearFieldWidget';
+export * from './DetailWeekPickerFieldWidget';

package/src/field/detail/date/range/use-date-time-range-picker.ts

@@ -10,7 +10,7 @@ export function useDateTimeRangePicker(props) {
     } else if (isDate(value)) {
       dateValue = value;
     } else if (value) {
-      console.warn(`无法识别的日期值, 显示的值可能出现异常. value=${value}`);
+      console.warn(`Unrecognized date value, the displayed value may be abnormal. value =${ value}`);
       return toString(value);
     } else {
       return '';

package/src/field/detail/date/use-date-time-picker.ts

@@ -28,7 +28,7 @@ export function useDateTimePicker(props) {
       } else if (isDate(value)) {
         dateValue = value;
       } else {
-        console.warn(`无法识别的日期值, 显示的值可能出现异常. value=${value}`);
+        console.warn(`Unrecognized date value, the displayed value may be abnormal. value =${ value}`);
       }
       if (dateValue) {
         return dateValue;

package/src/field/detail/index.ts

@@ -2,6 +2,7 @@ export * from './date';
 export * from './m2m';
 export * from './o2m';
 export * from './map';
+export * from './number';
 export * from './string';
 
 export * from './common/DetailCommonFieldWidget';
@@ -14,4 +15,3 @@ export * from './html/DetailHtmlFieldWidget';
 export * from './m2o/DetailM2OSelectFieldWidget';
 export * from './m2o/upload/DetailM2OUploadWidget';
 export * from './o2o/DetailO2OSelectFieldWidget';
-export * from './number/DetailNumberWidget';

package/src/field/detail/m2m/table/DetailM2MTableFieldWidget.ts

@@ -20,6 +20,10 @@ export class DetailM2MTableFieldWidget extends FormSubviewListFieldWidget<Runtim
   }
 
   protected initSubviewData(): ReturnPromise<void> {
+    if (this.disabledRelationQuery) {
+      super.initSubviewData();
+      return;
+    }
     const view = this.runtimeSubviewContext.view;
     if (!view) {
       super.initSubviewData();

package/src/field/detail/number/DetailFloatFieldWidget.ts

@@ -0,0 +1,12 @@
+import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
+import { SPI } from '@oinone/kunlun-spi';
+import { BaseFieldWidget } from '../../../basic';
+import { DetailNumberWidget } from './DetailNumberWidget';
+
+@SPI.ClassFactory(
+  BaseFieldWidget.Token({
+    viewType: ViewType.Detail,
+    ttype: ModelFieldType.Float
+  })
+)
+export class DetailFloatFieldWidget extends DetailNumberWidget {}

package/src/field/detail/number/DetailIntegerFieldWidget.ts

@@ -0,0 +1,12 @@
+import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
+import { SPI } from '@oinone/kunlun-spi';
+import { BaseFieldWidget } from '../../../basic';
+import { DetailNumberWidget } from './DetailNumberWidget';
+
+@SPI.ClassFactory(
+  BaseFieldWidget.Token({
+    viewType: ViewType.Detail,
+    ttype: ModelFieldType.Integer
+  })
+)
+export class DetailIntegerFieldWidget extends DetailNumberWidget {}

package/src/field/detail/number/DetailMoneyFieldWidget.ts

@@ -0,0 +1,12 @@
+import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
+import { SPI } from '@oinone/kunlun-spi';
+import { BaseFieldWidget } from '../../../basic';
+import { DetailNumberWidget } from './DetailNumberWidget';
+
+@SPI.ClassFactory(
+  BaseFieldWidget.Token({
+    viewType: ViewType.Detail,
+    ttype: ModelFieldType.Currency
+  })
+)
+export class DetailMoneyFieldWidget extends DetailNumberWidget {}

package/src/field/detail/number/DetailNumberWidget.ts

@@ -1,18 +1,9 @@
-import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
-import { SPI } from '@oinone/kunlun-spi';
 import { Widget } from '@oinone/kunlun-vue-widget';
 import { toString } from 'lodash-es';
-import { FormFieldWidget } from '../../../basic/field';
 import { FormNumberAbstractFieldWidget } from '../../form/abstract/FormNumberAbstractFieldWidget';
 import { numberAddThousandth, numberZeroFill } from '../../util';
 import DetailString from '../string/default/DetailString.vue';
 
-@SPI.ClassFactory(
-  FormFieldWidget.Token({
-    viewType: ViewType.Detail,
-    ttype: [ModelFieldType.Integer, ModelFieldType.Long, ModelFieldType.Float, ModelFieldType.Currency]
-  })
-)
 export class DetailNumberWidget extends FormNumberAbstractFieldWidget {
   public initialize(props) {
     super.initialize(props);

package/src/field/detail/number/index.ts

@@ -0,0 +1,4 @@
+export * from './DetailFloatFieldWidget';
+export * from './DetailIntegerFieldWidget';
+export * from './DetailMoneyFieldWidget';
+export * from './DetailNumberWidget';

package/src/field/detail/o2m/table/DetailO2MTableFieldWidget.ts

@@ -21,6 +21,10 @@ export class DetailO2MTableFieldWidget extends FormSubviewListFieldWidget<Runtim
   }
 
   protected initSubviewData(): ReturnPromise<void> {
+    if (this.disabledRelationQuery) {
+      super.initSubviewData();
+      return;
+    }
     const view = this.runtimeSubviewContext.view;
     if (!view) {
       super.initSubviewData();

package/src/field/detail/string/color/DefaultColorPicker.vue

@@ -4,7 +4,7 @@
       :value="realValue"
       :default-value="defaultValue"
       :has-input="hasInput"
-      :input-placeholder="placeholder"
+      :input-placeholder="$translate(placeholder)"
       :disabled="disabled"
       readonly
       :predefine="predefine"
@@ -19,7 +19,6 @@
 import { ColorFormat, ColorInputPlacement, DEFAULT_PREDEFINE } from '@oinone/kunlun-vue-ui-common';
 import { OioColorPicker } from '@oinone/kunlun-vue-ui-el';
 import { defineComponent, type PropType } from 'vue';
-import { translateValueByKey } from '@oinone/kunlun-engine';
 import { OioCommonProps, OioMetadataProps, useMetadataProps } from '../../../../basic';
 import DetailCommonField from '../../common/DetailCommonField.vue';
 
@@ -49,7 +48,7 @@ export default defineComponent({
     },
     placeholder: {
       type: String,
-      default: translateValueByKey('请选择颜色')
+      default: '请选择颜色'
     },
     inputPlacement: {
       type: [String, Object] as PropType<ColorInputPlacement>,

package/src/field/eip/index.ts

@@ -1 +1,3 @@
+import './style/eip-global.scss';
+
 export * from './form';

package/src/field/eip/style/eip-global.scss

@@ -0,0 +1,17 @@
+.eip-runtime-error-text {
+  .detail-string-value {
+    color: var(--oio-error-color);
+  }
+}
+
+.eip-runtime-success-text {
+  .detail-string-value {
+    color: var(--oio-success-color);
+  }
+}
+
+.eip-runtime-warning-text {
+  .detail-string-value {
+    color: var(--oio-warning-color);
+  }
+}

package/src/field/form/abstract/department/AbstractFormDepartmentFieldWidget.ts

@@ -1,5 +1,6 @@
 import { PamirsDepartment, RuntimeRelationField } from '@oinone/kunlun-engine';
 import { BooleanHelper, StringHelper } from '@oinone/kunlun-shared';
+import { ValidateTrigger, WidgetTrigger } from '@oinone/kunlun-vue-ui-common';
 import { Widget } from '@oinone/kunlun-vue-widget';
 import { SelectFieldWidget } from '../../../../basic';
 import { DepartmentSelect } from '../../../../components';
@@ -9,6 +10,16 @@ export abstract class AbstractFormDepartmentFieldWidget<
   Value extends PamirsDepartment | PamirsDepartment[] = PamirsDepartment | PamirsDepartment[],
   Field extends RuntimeRelationField = RuntimeRelationField
 > extends SelectFieldWidget<Option, Value, Field> {
+  public defaultValidateTrigger: ValidateTrigger[] = [ValidateTrigger.change];
+
+  protected defaultConstructDataTrigger() {
+    return [WidgetTrigger.change];
+  }
+
+  protected defaultClearFieldsTrigger() {
+    return [WidgetTrigger.change];
+  }
+
   public initialize(props) {
     super.initialize(props);
     this.setComponent(DepartmentSelect);

package/src/field/form/abstract/employee/AbstractFormEmployeeFieldWidget.ts

@@ -1,5 +1,6 @@
 import { PamirsEmployee, RuntimeRelationField } from '@oinone/kunlun-engine';
 import { BooleanHelper, StringHelper } from '@oinone/kunlun-shared';
+import { ValidateTrigger, WidgetTrigger } from '@oinone/kunlun-vue-ui-common';
 import { Widget } from '@oinone/kunlun-vue-widget';
 import { SelectFieldWidget } from '../../../../basic';
 import { EmployeeSelect } from '../../../../components';
@@ -9,6 +10,16 @@ export abstract class AbstractFormEmployeeFieldWidget<
   Value extends PamirsEmployee | PamirsEmployee[] = PamirsEmployee | PamirsEmployee[],
   Field extends RuntimeRelationField = RuntimeRelationField
 > extends SelectFieldWidget<Option, Value, Field> {
+  public defaultValidateTrigger: ValidateTrigger[] = [ValidateTrigger.change];
+
+  protected defaultConstructDataTrigger() {
+    return [WidgetTrigger.change];
+  }
+
+  protected defaultClearFieldsTrigger() {
+    return [WidgetTrigger.change];
+  }
+
   public initialize(props) {
     super.initialize(props);
     this.setComponent(EmployeeSelect);

package/src/field/form/abstract/radio/FormRelationFieldRadioWidget.ts

@@ -9,7 +9,7 @@ import {
 } from '@oinone/kunlun-engine';
 import { Expression, type ExpressionRunParam } from '@oinone/kunlun-expression';
 import { BooleanHelper, NumberHelper } from '@oinone/kunlun-shared';
-import { type SelectItem, WidgetTrigger } from '@oinone/kunlun-vue-ui-common';
+import { type SelectItem, ValidateTrigger, WidgetTrigger } from '@oinone/kunlun-vue-ui-common';
 import { Widget } from '@oinone/kunlun-vue-widget';
 import { FormComplexFieldWidget } from '../../../../basic/field/complex/FormComplexFieldWidget';
 import { isValidatorSuccess, type ValidatorInfo } from '../../../../typing';
@@ -239,6 +239,8 @@ export abstract class FormRelationFieldRadioWidget<
     );
   }
 
+  public defaultValidateTrigger: ValidateTrigger[] = [ValidateTrigger.change];
+
   protected defaultConstructDataTrigger() {
     return [WidgetTrigger.CHANGE];
   }

package/src/field/form/abstract/role/AbstractFormRoleFieldWidget.ts

@@ -1,5 +1,6 @@
 import { AuthRole, RuntimeRelationField } from '@oinone/kunlun-engine';
 import { BooleanHelper, StringHelper } from '@oinone/kunlun-shared';
+import { ValidateTrigger, WidgetTrigger } from '@oinone/kunlun-vue-ui-common';
 import { Widget } from '@oinone/kunlun-vue-widget';
 import { SelectFieldWidget } from '../../../../basic';
 import { RoleSelect } from '../../../../components';
@@ -9,6 +10,16 @@ export abstract class AbstractFormRoleFieldWidget<
   Value extends AuthRole | AuthRole[] = AuthRole | AuthRole[],
   Field extends RuntimeRelationField = RuntimeRelationField
 > extends SelectFieldWidget<Option, Value, Field> {
+  public defaultValidateTrigger: ValidateTrigger[] = [ValidateTrigger.change];
+
+  protected defaultConstructDataTrigger() {
+    return [WidgetTrigger.change];
+  }
+
+  protected defaultClearFieldsTrigger() {
+    return [WidgetTrigger.change];
+  }
+
   public initialize(props) {
     super.initialize(props);
     this.setComponent(RoleSelect);

package/src/field/form/abstract/select/DefaultMultipleSelect.vue

@@ -12,6 +12,7 @@
     </div>
     <div v-else>
       <a-select
+        :id="id"
         ref="selectRef"
         mode="multiple"
         class="oio-select"

package/src/field/form/abstract/select/DefaultSingleSelect.vue

@@ -12,6 +12,7 @@
     </div>
     <div v-else>
       <a-select
+        :id="id"
         ref="selectRef"
         class="oio-select"
         label-in-value