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

package/src/basic/table-column/BaseTableFieldWidget.ts

@@ -12,9 +12,8 @@ import { isEmptyValue, ViewMode, ViewType } from '@oinone/kunlun-meta';
 import { BooleanHelper, Optional, StringHelper } from '@oinone/kunlun-shared';
 import { DEFAULT_PREFIX } from '@oinone/kunlun-theme';
 import type { ActiveEditorContext, RenderCellContext, RowContext } from '@oinone/kunlun-vue-ui';
-import { StyleHelper } from '@oinone/kunlun-vue-ui-common';
 import { type ActiveRecordsWidgetProps, InnerWidgetType, Widget } from '@oinone/kunlun-vue-widget';
-import { isBoolean, isFunction, isNaN, isNil, isNumber, isPlainObject, isString, toString } from 'lodash-es';
+import { isBoolean, isFunction, isNaN, isNil, isPlainObject, isString, toString } from 'lodash-es';
 import { createVNode, type VNode, withModifiers } from 'vue';
 import type { VxeTableDefines } from 'vxe-table';
 import { ActionWidget } from '../../action/component/action/ActionWidget';
@@ -22,12 +21,6 @@ import type { RowActionBarWidget } from '../../action/component/action-bar/RowAc
 import { EditorField } from '../../tags/internal';
 import type { UserTablePrefer } from '../../typing';
 import { getTableColumnFixed, getTableColumnWidth } from '../../util';
-import {
-  defaultTableColumnMinWidthCompute,
-  defaultTableColumnMinWidthComputeContext,
-  getTableThemeConfig,
-  type TableColumnMinWidthComputeConfigContext
-} from '../theme';
 import { BaseTableQuickOperationColumnWidget } from './BaseTableQuickOperationColumnWidget';
 import DefaultGroupCell from './DefaultGroupCell.vue';
 
@@ -83,12 +76,6 @@ export class BaseTableFieldWidget<
     return super.columnType;
   }
 
-  @Widget.Inject()
-  protected cellWidth: number | undefined;
-
-  @Widget.Inject()
-  protected cellMinWidth: number | undefined;
-
   @Widget.Reactive()
   public get minWidth() {
     return Optional.ofNullable(this.getDsl().minWidth).orElseGet(() => this.computeDefaultMinWidth());
@@ -115,78 +102,6 @@ export class BaseTableFieldWidget<
     return this.expandOperationField === this.itemData;
   }
 
-  protected getTableAutoWidth() {
-    const firstWidth = super.width || this.cellWidth;
-    if (firstWidth === 'auto') {
-      const { label, sortable } = this;
-      const themeConfig = getTableThemeConfig();
-      let rest = { ...defaultTableColumnMinWidthComputeContext, sortable };
-      if (themeConfig) {
-        rest = {
-          ...rest,
-          ...themeConfig
-        };
-      }
-      rest.min = this.cellMinWidth || rest.min;
-      return defaultTableColumnMinWidthCompute(label, rest);
-    }
-  }
-
-  protected getTableForCellMinWidth() {
-    const autoCellWidth = this.getTableAutoWidth();
-    if (!isNil(this.cellMinWidth) && autoCellWidth) {
-      return Math.max(this.cellMinWidth, autoCellWidth);
-    }
-    if (!isNil(this.cellMinWidth)) {
-      return this.cellMinWidth;
-    }
-    if (autoCellWidth) {
-      return autoCellWidth;
-    }
-    return undefined;
-  }
-
-  protected computeDefaultMinWidth(): string | number | undefined {
-    const tableForCellMinWidth = this.getTableForCellMinWidth();
-    if (tableForCellMinWidth) {
-      return tableForCellMinWidth;
-    }
-    let minWidthConfig = getTableThemeConfig()?.column?.minWidth;
-    if (minWidthConfig == null) {
-      return defaultTableColumnMinWidthComputeContext.min;
-    }
-    if (isBoolean(minWidthConfig)) {
-      if (!minWidthConfig) {
-        return defaultTableColumnMinWidthComputeContext.min;
-      }
-      minWidthConfig = undefined;
-    }
-    if (isString(minWidthConfig) || isNumber(minWidthConfig)) {
-      return StyleHelper.px(minWidthConfig);
-    }
-    const { label, sortable } = this;
-    if (isFunction(minWidthConfig)) {
-      return minWidthConfig(label, {
-        ...defaultTableColumnMinWidthComputeContext,
-        sortable
-      });
-    }
-    let autoComputeMinWidthConfigContext: TableColumnMinWidthComputeConfigContext;
-    if (minWidthConfig == null) {
-      autoComputeMinWidthConfigContext = {
-        ...defaultTableColumnMinWidthComputeContext,
-        sortable
-      };
-    } else {
-      autoComputeMinWidthConfigContext = {
-        ...defaultTableColumnMinWidthComputeContext,
-        ...minWidthConfig,
-        sortable
-      };
-    }
-    return defaultTableColumnMinWidthCompute(label, autoComputeMinWidthConfigContext);
-  }
-
   @Widget.Method()
   public className(context: RenderCellContext): string | string[] | undefined {
     const { field } = this;

package/src/basic/table-column/DefaultGroupCell.vue

@@ -235,53 +235,43 @@ export default defineComponent({
     const convertStatisticsValue = (value: string | number): string => {
       switch (selectValue.value) {
         case GroupStatisticsEnum.COUNT:
-          // 总数量
-          return `${value} ${translateValueByKey('条记录')}`;
+          return translateValueByKey('${value} 条记录', { value });
         case GroupStatisticsEnum.NOT_NULL:
-          // 已填写
-          return `${translateValueByKey('已填写')} ${value}`;
+          return translateValueByKey('已填写 ${value}', { value });
         case GroupStatisticsEnum.NULL:
-          // 未填写
-          return `${translateValueByKey('未填写')} ${value}`;
+          return translateValueByKey('未填写 ${value}', { value });
         case GroupStatisticsEnum.UNIQUE:
-          // 唯一值
-          return `${translateValueByKey('唯一值')} ${value}`;
+          return translateValueByKey('唯一值 ${value}', { value });
         case GroupStatisticsEnum.NOT_NULL_PERCENT:
-          // 已填写占比
-          return `${translateValueByKey('已填写占比')} ${value}%`;
+          return translateValueByKey('已填写占比 ${value}%', { value });
         case GroupStatisticsEnum.NULL_PERCENT:
-          // 未填写占比
-          return `${translateValueByKey('未填写占比')} ${value}%`;
+          return translateValueByKey('未填写占比 ${value}%', { value });
         case GroupStatisticsEnum.UNIQUE_PERCENT:
-          // 唯一值占比
-          return `${translateValueByKey('唯一值占比')} ${value}%`;
+          return translateValueByKey('唯一值占比 ${value}%', { value });
         case GroupStatisticsEnum.EARLIEST_TIME: {
-          const v = dayjs(normalizeDateTime(value));
-          return `${translateValueByKey('最早时间')} ${dayjs(normalizeDateTime(value)).format(dateFormat.value)}`;
+          const val = dayjs(normalizeDateTime(value)).format(dateFormat.value);
+          return translateValueByKey('最早时间 ${value}', { value: val });
+        }
+        case GroupStatisticsEnum.LATEST_TIME: {
+          const val = dayjs(normalizeDateTime(value)).format(dateFormat.value);
+          return translateValueByKey('最晚时间 ${value}', { value: val });
         }
-        case GroupStatisticsEnum.LATEST_TIME:
-          return `${translateValueByKey('最晚时间')} ${dayjs(normalizeDateTime(value)).format(dateFormat.value)}`;
         case GroupStatisticsEnum.TIME_RANGE_DAY:
-          return `${translateValueByKey('时间范围')} ${value} ${translateValueByKey('天')}`;
+          return translateValueByKey('时间范围 ${value} 天', { value });
         case GroupStatisticsEnum.TIME_RANGE_MONTH:
-          return `${translateValueByKey('时间范围')} ${value} ${translateValueByKey('月')}`;
+          return translateValueByKey('时间范围 ${value} 月', { value });
         case GroupStatisticsEnum.TIME_RANGE_YEAR:
-          return `${translateValueByKey('时间范围')} ${value}  ${translateValueByKey('年')}`;
+          return translateValueByKey('时间范围 ${value} 年', { value });
         case GroupStatisticsEnum.SUM:
-          // 求和
-          return `${translateValueByKey('求和')} ${value}`;
+          return translateValueByKey('求和 ${value}', { value });
         case GroupStatisticsEnum.AVERAGE:
-          // 平均值
-          return `${translateValueByKey('平均值')} ${value}`;
+          return translateValueByKey('平均值 ${value}', { value });
         case GroupStatisticsEnum.MEDIAN:
-          // 中位数
-          return `${translateValueByKey('中位数')} ${value}`;
+          return translateValueByKey('中位数 ${value}', { value });
         case GroupStatisticsEnum.MAX:
-          // 最大值
-          return `${translateValueByKey('最大值')} ${value}`;
+          return translateValueByKey('最大值 ${value}', { value });
         case GroupStatisticsEnum.MIN:
-          // 最小值
-          return `${translateValueByKey('最小值')} ${value}`;
+          return translateValueByKey('最小值 ${value}', { value });
         default:
           return translateValueByKey('统计');
       }

package/src/basic/token/BaseFieldWidget.ts

@@ -1,8 +1,12 @@
 import {
+  type ActiveRecord,
   CommonPatternMap,
   type FieldPattern,
+  isRelation2OField,
   type RuntimeModelField,
+  RuntimeRelationField,
   SubmitHandler,
+  SubmitRelationHandler,
   SubmitRelationValue,
   SubmitValue,
   translateValueByKey
@@ -187,7 +191,34 @@ export class BaseFieldWidget<
   @Widget.Method()
   public change(val: Value | null | undefined) {
     super.change(val);
-    this.notify(LifeCycleTypes.ON_FIELD_CHANGE);
+    if (isRelation2OField(this.field) && (val == null || isPlainObject(val))) {
+      this.updateX2OValue(val as ActiveRecord).then(() => {
+        this.notify(LifeCycleTypes.ON_FIELD_CHANGE);
+      });
+    } else {
+      this.notify(LifeCycleTypes.ON_FIELD_CHANGE);
+    }
+  }
+
+  protected async updateX2OValue(selectedValue: ActiveRecord | null | undefined) {
+    const submitValue = new SubmitValue({
+      [this.itemData]: selectedValue
+    });
+    const { field, itemName, viewMode, submitCache, submitType, relationUpdateType } = this;
+    const updateValue = await SubmitRelationHandler.M2O(
+      field as unknown as RuntimeRelationField,
+      itemName,
+      submitValue,
+      selectedValue,
+      viewMode,
+      submitCache,
+      submitType,
+      relationUpdateType
+    );
+    if (updateValue instanceof SubmitRelationValue) {
+      return;
+    }
+    Object.assign(this.formData, updateValue);
   }
 
   @Widget.Method()

package/src/basic/token/BaseView.ts

@@ -296,6 +296,7 @@ export abstract class BaseView<Props extends BaseViewProps = BaseViewProps> exte
     const { globalState, createViewState } = useOioState(this.currentHandle);
     const state = createViewState();
     state.viewType = this.viewType!;
+    this.globalState = globalState;
     this.viewState = state;
     if (!this.inline && this.viewType && this.viewType !== ViewType.Search) {
       globalState.mainViewHandle = this.currentHandle;

package/src/components/index.scss

@@ -1,5 +1,6 @@
 @import './common/countdown/style/index.scss';
 @import './common/inline-form/style/index.scss';
 @import './common/inline-table/style/index.scss';
+@import './select/modal-select/style/index.scss';
 @import './oio-manage-group/style/index.scss';
 @import './user-prefer/style/index.scss';

package/src/components/oio-manage-group/OioManageGroup.vue

@@ -111,6 +111,7 @@
 </template>
 <script lang="ts">
 import { PlusOutlined } from '@ant-design/icons-vue';
+import { translateValueByKey } from '@oinone/kunlun-engine';
 import { OioButton, OioModal, OioNotification } from '@oinone/kunlun-vue-ui-antd';
 import { OioIcon } from '@oinone/kunlun-vue-ui-common';
 import { computed, defineComponent, nextTick, ref, type Ref, watch } from 'vue';
@@ -223,7 +224,7 @@ export default defineComponent({
     const handleModifyGroup = async (paramGroup) => {
       try {
         if (!paramGroup.refName) {
-          OioNotification.error('失败', '分组名称不能为空');
+          OioNotification.error(translateValueByKey('失败'), translateValueByKey('分组名称不能为空'));
         } else {
           if (paramGroup.refName !== (paramGroup.displayName || paramGroup.name)) {
             if (!props.onModifyGroup || typeof props.onModifyGroup !== 'function') {
@@ -256,7 +257,7 @@ export default defineComponent({
         groupTagcreateInputValue.value = '';
         // detectShowModal();
       } else {
-        OioNotification.error('失败', '分组名称不能为空');
+        OioNotification.error(translateValueByKey('失败'), translateValueByKey('分组名称不能为空'));
       }
       addGroupInputVisible.value = false;
     };

package/src/components/select/base/BaseSelect.vue

@@ -27,6 +27,7 @@ import {
 } from 'vue';
 import { useMetadataProps } from '../../../basic';
 import { BaseSelectProps } from './props';
+import { useSelectId } from './useSelectId';
 
 interface SelectedOption {
   key: string;
@@ -51,6 +52,7 @@ export default defineComponent({
     }
   },
   setup(props, { emit }) {
+    const id = useSelectId();
     const origin = ref();
     const dropdownInputRef = ref();
     const formContext = useInjectOioDefaultFormContext();
@@ -245,7 +247,37 @@ export default defineComponent({
       e.preventDefault();
     };
 
+    const $$onClear = () => {
+      props.change?.(null);
+      props.search?.('');
+    };
+
     const onGlobalMouseDown = (e: MouseEvent) => {
+      let antSelectClearDom: HTMLElement | undefined;
+      let target = e.target as HTMLElement | null | undefined;
+      if (target) {
+        for (let i = 0; i < 5; i++) {
+          if (target.nodeType && target.classList.contains('ant-select-clear')) {
+            antSelectClearDom = target;
+            break;
+          }
+          target = target.parentElement;
+          if (!target) {
+            break;
+          }
+        }
+      }
+      if (
+        antSelectClearDom &&
+        document
+          .querySelector(`#${id}`)
+          ?.parentElement?.parentElement?.parentElement?.getElementsByClassName('ant-select-clear')
+          .item(0) === antSelectClearDom
+      ) {
+        e.preventDefault();
+        e.stopPropagation();
+        $$onClear();
+      }
       focusSearchInput = e.target === dropdownInputRef.value?.originInput?.input;
     };
 
@@ -259,6 +291,7 @@ export default defineComponent({
 
     return {
       ...useMaxTagPlaceholder(),
+      id,
       origin,
       dropdownInputRef,
       readonly,
@@ -287,6 +320,7 @@ export default defineComponent({
       $slots,
       $attrs,
 
+      id,
       mode,
       value,
       options,
@@ -319,13 +353,15 @@ export default defineComponent({
       onSearchInputKeydown,
       onClickStop
     } = this;
-    const selectClassNames = ['oio-select', 'oio-basic-select'];
+    const selectClassNames = ['oio-select', 'oio-base-select'];
     const props: Record<string, unknown> = {
       ref: 'origin',
+      id,
       class: selectClassNames,
-      dropdownClassName: StringHelper.append(['oio-select-dropdown oio-basic-select-dropdown'], dropdownClassName).join(
-        ' '
-      ),
+      dropdownClassName: StringHelper.append(
+        ['oio-select-dropdown oio-base-select-dropdown vxe-table--ignore-clear'],
+        dropdownClassName
+      ).join(' '),
       labelInValue: true,
       filterOption: false,
       defaultActiveFirstOption: false,
@@ -471,7 +507,7 @@ export default defineComponent({
       slotNames.push('default');
     }
     const selectVNode = createVNode(ASelect, props, PropRecordHelper.collectionSlots($slots, slotNames));
-    const classNames = ['oio-basic-select-wrapper'];
+    const classNames = ['oio-base-select-wrapper'];
     if (prefix || suffix) {
       return createVNode(OioInputGroup, PropRecordHelper.collectionBasicProps($attrs, classNames), {
         default: () => {
@@ -492,15 +528,15 @@ export default defineComponent({
 });
 </script>
 <style lang="scss">
-.oio-basic-select-wrapper {
+.oio-base-select-wrapper {
   &.oio-input-group {
-    .oio-basic-select {
+    .oio-base-select {
       flex: 1;
     }
   }
 }
 
-.oio-basic-select-dropdown {
+.oio-base-select-dropdown {
   .oio-select-dropdown-spin {
     height: 28px;
     padding: 5px 12px;

package/src/components/select/base/index.ts

@@ -1,4 +1,5 @@
 export * from './props';
 export * from './typing';
+export * from './useSelectId';
 export { default as BaseSelect } from './BaseSelect.vue';
 export { default as DefaultSelect } from './DefaultSelect.vue';

package/src/components/select/base/useSelectId.ts

@@ -0,0 +1,7 @@
+let retId = 0;
+
+export function useSelectId() {
+  const uuid = retId;
+  retId += 1;
+  return `oio_select_${uuid}`;
+}

package/src/components/select/company-select/CompanySelect.vue

@@ -79,6 +79,7 @@ export default defineComponent({
     .oio-company-select-option-logo {
       text-align: center;
       color: #ffffff;
+      flex-shrink: 0;
     }
 
     .oio-company-select-option-label {

package/src/components/select/department-select/DepartmentModal.vue

@@ -2,8 +2,8 @@
 import {
   OrganizationalStructureType,
   type PamirsDepartment,
-  type PamirsDepartmentService,
   type PamirsOrganizationalStructure,
+  type PamirsOrganizationalStructureService,
   QueryWrapper
 } from '@oinone/kunlun-engine';
 import {
@@ -142,13 +142,14 @@ export default defineComponent({
     });
 
     const load = async (
-      res: TreeState<PamirsDepartment>,
-      service: PamirsDepartmentService,
+      res: TreeState<PamirsOrganizationalStructure>,
+      service: PamirsOrganizationalStructureService,
       queryWrapper: QueryWrapper
     ) => {
       try {
         return await service.queryListByFilter({
           model: props.model,
+          companyModel: props.companyModel,
           rsql: queryWrapper.rsql,
           departmentCodes: props.departmentCodes,
           userCompanyDept: props.userCompanyDept,
@@ -190,8 +191,8 @@ export default defineComponent({
     });
 
     const userDepartmentTreeLoad = async (
-      res: TreeState<PamirsDepartment>,
-      service: PamirsDepartmentService,
+      res: TreeState<PamirsOrganizationalStructure>,
+      service: PamirsOrganizationalStructureService,
       queryWrapper: QueryWrapper
     ) => {
       try {
@@ -203,6 +204,7 @@ export default defineComponent({
         }
         return await service.queryListByFilter({
           model: props.model,
+          companyModel: props.companyModel,
           rsql: queryWrapper.rsql,
           userCompanyDept,
           userDept,

package/src/components/select/department-select/DepartmentTree.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { PamirsDepartment } from '@oinone/kunlun-engine';
+import { PamirsDepartment, 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';
@@ -211,7 +211,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/employee-select/DepartmentEmployeeSelectPanel.vue

@@ -187,7 +187,6 @@ export default defineComponent({
       mode,
       initCheckedKeys,
       onInit,
-      model,
       companyModel,
       departmentModel,
       domain,

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);
+  }
+}