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

package/src/basic/token/BaseElementWidget.ts

@@ -1,7 +1,7 @@
 import { ViewType } from '@oinone/kunlun-meta';
 import { Constructor } from '@oinone/kunlun-shared';
 import { SPI, SPIOptions, SPISingleSelector, SPITokenFactory } from '@oinone/kunlun-spi';
-import { ActiveRecordsWidgetProps, InnerWidgetType, Widget } from '@oinone/kunlun-vue-widget';
+import { ActiveRecordsWidgetProps, InnerWidgetType, OioAnyViewState, Widget } from '@oinone/kunlun-vue-widget';
 import { BaseRuntimePropertiesWidget } from '../common';
 
 /**

package/src/basic/token/BaseFieldWidget.ts

@@ -84,6 +84,10 @@ export class BaseFieldWidget<
     return field;
   }
 
+  @Widget.Reactive()
+  @Widget.Inject()
+  protected rowIndex: number | undefined;
+
   @Widget.Reactive()
   public get label(): string | undefined {
     const label = super.label;
@@ -264,6 +268,7 @@ export class BaseFieldWidget<
 
   protected $$mounted() {
     super.$$mounted();
+    this.viewState?.pushField(this.currentHandle, this.rowIndex);
     this.fieldWidgetMounted?.(this);
     this.notify(LifeCycleTypes.ON_FIELD_MOUNTED);
   }
@@ -285,14 +290,21 @@ export class BaseFieldWidget<
 
   protected $$unmounted() {
     super.$$unmounted();
+    this.viewState?.popField(this.currentHandle, this.rowIndex);
     this.fieldWidgetUnmounted?.(this);
     this.notify(LifeCycleTypes.ON_FIELD_UNMOUNTED);
   }
 
+  /**
+   * @deprecated widget finder please this.viewState.fields
+   */
   @Widget.Method()
   @Widget.Inject()
   protected fieldWidgetMounted: ((widget: PathWidget) => void) | undefined;
 
+  /**
+   * @deprecated widget finder please this.viewState.fields
+   */
   @Widget.Method()
   @Widget.Inject()
   protected fieldWidgetUnmounted: ((widget: PathWidget) => void) | undefined;
@@ -367,7 +379,7 @@ export class BaseFieldWidget<
         LifeCycleHeart.publish<BaseFieldWidget>(type, `${view.name}:${field.name}`, this);
       }
     } catch (error) {
-      console.log(error);
+      console.error(error);
     }
   }
 }

package/src/basic/token/BaseView.ts

@@ -10,9 +10,16 @@ import { createVisibleArea, useEnv } from '@oinone/kunlun-environment';
 import { ViewMode, ViewType } from '@oinone/kunlun-meta';
 import { CallChaining, Constructor } from '@oinone/kunlun-shared';
 import { SPI, SPIOptions, SPISingleSelector, SPITokenFactory } from '@oinone/kunlun-spi';
-import { ActiveRecordsWidgetProps, InnerWidgetType, Widget } from '@oinone/kunlun-vue-widget';
+import {
+  ActiveRecordsWidgetProps,
+  InnerWidgetType,
+  OioAnyViewState,
+  useOioState,
+  Widget
+} from '@oinone/kunlun-vue-widget';
 import { cloneDeep } from 'lodash-es';
 import { getCurrentInstance } from 'vue';
+import { ViewBizStyle } from '../../typing';
 import DefaultView from '../../view/view/DefaultView.vue';
 import { BaseRuntimePropertiesWidget } from '../common';
 import { validatorCallChainingCallAfterFn, VIEW_WIDGET_PRIORITY } from '../constant';
@@ -72,6 +79,11 @@ export abstract class BaseView<Props extends BaseViewProps = BaseViewProps> exte
 
   protected defaultAllInvisible = true;
 
+  @Widget.Reactive()
+  protected get bizStyle(): ViewBizStyle | undefined {
+    return this.getDsl().bizStyle;
+  }
+
   @Widget.Reactive()
   @Widget.Provide()
   protected viewType: ViewType | undefined;
@@ -268,6 +280,24 @@ export abstract class BaseView<Props extends BaseViewProps = BaseViewProps> exte
     env.visibleArea.delete(currentHandle);
   }
 
+  protected $$initViewStatePosition(state: OioAnyViewState): void {
+    state.__position.push({ handle: this.currentHandle, slotName: this.getSlotName() });
+  }
+
+  protected $$clearViewStatePosition(state: OioAnyViewState) {
+    const index = state.__position.findIndex((v) => v.handle === this.currentHandle);
+    if (index !== -1) {
+      state.__position.splice(index, 1);
+    }
+  }
+
+  protected $$created() {
+    super.$$created();
+    const state = useOioState(this.currentHandle).createViewState();
+    state.viewType = this.viewType!;
+    this.viewState = state;
+  }
+
   protected $$beforeMount() {
     super.$$beforeMount();
     this.currentMountedCallChaining = new CallChaining();
@@ -351,6 +381,7 @@ export abstract class BaseView<Props extends BaseViewProps = BaseViewProps> exte
     this.parentSubmitCallChaining?.unhook(this.path);
     this.parentValidatorCallChaining?.unhook(this.path);
     this.clearVisibleArea();
+    useOioState(this.currentHandle).clearViewState();
   }
 
   protected $$unmountedAfterProperties() {

package/src/basic/token/extend/EditorFieldWidget.ts

@@ -6,7 +6,7 @@ import { BaseFieldOptions, BaseFieldWidget } from '../BaseFieldWidget';
 /**
  * 编辑字段组件注册Token
  */
-@SPI.Base('EditorField', ['viewType', 'widget', 'ttype', 'multi', 'model', 'name'])
+@SPI.Base('EditorField', ['viewType', 'ttype', 'multi', { key: 'widget', weight: 999 }, 'model', 'viewName', 'name'])
 export class EditorFieldWidget extends VueWidget {
   public static Token: SPITokenFactory<BaseFieldOptions>;
 

package/src/basic/types/typing.ts

@@ -58,6 +58,15 @@ export interface UrlQueryParameters extends Record<string, string | null | undef
    */
   direction?: string | null;
 
+  /**
+   * 分组参数 - 分许字段 使用{@link URL_SPLIT_SEPARATOR}分割
+   */
+  groupField?: string | null;
+  /**
+   * 分许参数 - 分许方向 使用{@link URL_SPLIT_SEPARATOR}分割
+   */
+  groupDirection?: string | null;
+
   context?: string | null;
 
   /**

package/src/basic/view/MetadataView.vue

@@ -1,7 +1,6 @@
 <script lang="ts">
-import { DslRender } from '@oinone/kunlun-vue-widget';
+import { DslRender, useInjectMetaContext, useProviderMetaContext } from '@oinone/kunlun-vue-widget';
 import { computed, createVNode, defineComponent, Fragment, VNode } from 'vue';
-import { useInjectMetaContext, useProviderMetaContext } from '../../tags/context';
 import { MetadataViewProps } from './props';
 
 export default defineComponent({

package/src/components/common/close-icon/CloseIcon.vue

@@ -15,7 +15,6 @@ export default defineComponent({
 .default-close-icon {
   width: 24px;
   height: 24px;
-  background: var(--oio-close-icon-background);
   color: var(--oio-icon-color);
   border-radius: 50%;
   display: flex;

package/src/components/index.ts

@@ -4,3 +4,11 @@ export * from './oio-manage-group';
 export * from './upload';
 export * from './user-prefer';
 export * from './prop';
+export * from './quick-utils';
+export * from './select';
+export * from './oio-simple-pagination';
+export * from './table-line-height';
+export * from './oio-full-screen';
+export * from './sortable-group';
+export * from './select-table';
+export * from './select-modal';

package/src/components/oio-full-screen/OioFullScreen.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="default-view-control-item default-view-control-full-screen">
+    <oio-tooltip v-model:visible="visible" placement="bm" :title="$translate('全屏')">
+      <oio-icon size="16" :icon="icon" @click="onChange" />
+    </oio-tooltip>
+  </div>
+</template>
+
+<script lang="ts">
+import { OioIcon, OioTooltip } from '@oinone/kunlun-vue-ui-antd';
+import { computed, defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  components: {
+    OioIcon,
+    OioTooltip
+  },
+  emits: ['update:value', 'change'],
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, { emit }) {
+    const visible = ref(false);
+
+    const icon = computed(() => {
+      return props.value ? 'oinone-fullscreen-exit-outlined' : 'oinone-fullscreen-outlined';
+    });
+
+    const onChange = () => {
+      visible.value = false;
+      emit('update:value', !props.value);
+      emit('change', !props.value);
+    };
+
+    return {
+      visible,
+      icon,
+      onChange
+    };
+  }
+});
+</script>

package/src/components/oio-full-screen/index.ts

@@ -0,0 +1 @@
+export { default as OioFullScreen } from './OioFullScreen.vue';

package/src/components/oio-manage-group/index.ts

@@ -1,2 +1,2 @@
-export { default as OioManageGroup } from './oio-manage-group.vue';
+export { default as OioManageGroup } from './OioManageGroup.vue';
 export * from './props';

package/src/components/oio-simple-pagination/OioSimplePagination.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="oio-simple-pagination">
+    <oio-icon
+      icon="oinone-zuofanye"
+      :class="[disablePre && 'oio-icon-disabled']"
+      :color="disablePre ? 'rgba(0, 0, 0, 0.25)' : undefined"
+      :size="16"
+      @click="onChange('pre')"
+    ></oio-icon>
+    <span>
+      <span>{{ current }}</span>
+      <span>/</span>
+      <span>{{ total }}</span>
+    </span>
+    <oio-icon
+      icon="oinone-youfanye"
+      :class="[disableNext && 'oio-icon-disabled']"
+      :color="disableNext ? 'rgba(0, 0, 0, 0.25)' : undefined"
+      :size="16"
+      @click="onChange('next')"
+    ></oio-icon>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+import { OioIcon } from '@oinone/kunlun-vue-ui-antd';
+
+export default defineComponent({
+  name: 'OioSimplePagination',
+  components: {
+    OioIcon
+  },
+  props: {
+    total: {
+      type: Number,
+      default: 0
+    },
+    pageSize: {
+      type: Number,
+      default: 1
+    },
+    current: {
+      type: Number,
+      default: 1
+    }
+  },
+  emits: ['change', 'update:current'],
+
+  setup(props, { emit }) {
+    const disablePre = computed(() => {
+      return props.current <= 1;
+    });
+
+    const disableNext = computed(() => {
+      return props.current >= props.total;
+    });
+
+    const onChange = (type: 'pre' | 'next') => {
+      if (type === 'pre' && props.current > 1) {
+        const val = props.current - 1;
+        emit('change', val);
+        emit('update:current', val);
+      } else if (type === 'next' && props.current < props.total) {
+        const val = props.current + 1;
+        emit('change', val);
+        emit('update:current', val);
+      }
+    };
+
+    return { disablePre, disableNext, onChange };
+  }
+});
+</script>
+
+<style lang="scss">
+.oio-simple-pagination {
+  display: flex;
+  column-gap: 8px;
+  align-items: center;
+  .oio-icon {
+    cursor: pointer;
+
+    &.oio-icon-disabled {
+      cursor: not-allowed;
+    }
+  }
+}
+</style>

package/src/components/oio-simple-pagination/index.ts

@@ -0,0 +1 @@
+export { default as OioSimplePagination } from './OioSimplePagination.vue';

package/src/components/prop/UploadProps.ts

@@ -1,4 +1,3 @@
-import { defaultMultiPartConfig } from '@oinone/kunlun-vue-ui-common';
 import { PropType } from 'vue';
 
 export const UploadCommonProps = {

package/src/components/quick-utils/CheckedHelper.ts

@@ -0,0 +1,77 @@
+import { OioListItem, OioTreeNode } from '@oinone/kunlun-shared';
+
+export class CheckedHelper {
+  public static diffListCheckedKeys(
+    originStorage: Record<string, OioListItem>,
+    targetStorage: Record<string, OioListItem>,
+    checkedKeys: string[],
+    changedCheckedKeys: string[]
+  ): string[] {
+    changedCheckedKeys = [...changedCheckedKeys];
+    const finalCheckedKeys: string[] = [];
+    for (const checkedKey of checkedKeys) {
+      if (targetStorage[checkedKey]) {
+        const index = changedCheckedKeys.indexOf(checkedKey);
+        if (index !== -1) {
+          changedCheckedKeys.splice(index, 1);
+          finalCheckedKeys.push(checkedKey);
+        }
+      } else if (originStorage[checkedKey]) {
+        finalCheckedKeys.push(checkedKey);
+      }
+    }
+    finalCheckedKeys.push(...changedCheckedKeys);
+    return finalCheckedKeys;
+  }
+
+  public static diffTreeCheckedKeys(
+    originStorage: Record<string, OioTreeNode>,
+    targetStorage: Record<string, OioTreeNode>,
+    checkedKeys: string[],
+    changedCheckedKeys: string[]
+  ): string[] {
+    changedCheckedKeys = [...changedCheckedKeys];
+    const finalCheckedKeys: string[] = [];
+    const deleteKeys: string[] = [];
+    const repeatKeys = new Set<string>();
+    const push = (checkedKey: string) => {
+      const node = originStorage[checkedKey];
+      if (!node) {
+        return;
+      }
+      if (!repeatKeys.has(checkedKey)) {
+        repeatKeys.add(checkedKey);
+        finalCheckedKeys.push(checkedKey);
+      }
+      node.children.map((v) => v.key).forEach((v) => push(v));
+    };
+    for (const checkedKey of checkedKeys) {
+      if (targetStorage[checkedKey]) {
+        const index = changedCheckedKeys.indexOf(checkedKey);
+        if (index === -1) {
+          deleteKeys.push(checkedKey);
+        } else {
+          changedCheckedKeys.splice(index, 1);
+          push(checkedKey);
+        }
+      } else if (!repeatKeys.has(checkedKey)) {
+        repeatKeys.add(checkedKey);
+        finalCheckedKeys.push(checkedKey);
+      }
+    }
+    changedCheckedKeys.forEach((v) => push(v));
+    const deleteKey = (checkedKey: string) => {
+      const node = originStorage[checkedKey];
+      if (!node) {
+        return;
+      }
+      const index = finalCheckedKeys.indexOf(checkedKey);
+      if (index !== -1) {
+        finalCheckedKeys.splice(index, 1);
+      }
+      node.children.map((v) => v.key).forEach((v) => deleteKey(v));
+    };
+    deleteKeys.forEach((v) => deleteKey(v));
+    return finalCheckedKeys;
+  }
+}

package/src/components/quick-utils/index.ts

@@ -0,0 +1,5 @@
+export * from './CheckedHelper';
+export * from './useListChecked';
+export * from './useListState';
+export * from './useTreeChecked';
+export * from './useTreeState';

package/src/components/quick-utils/useListChecked.ts

@@ -0,0 +1,230 @@
+import { OioListItem } from '@oinone/kunlun-shared';
+import { SelectMode } from '@oinone/kunlun-vue-ui-common';
+
+type Options = {
+  isDiff?: () => boolean | undefined;
+};
+
+export function useListChecked(
+  state: {
+    mode: SelectMode;
+  } & InitState,
+  options?: Options
+) {
+  if (state.mode === SelectMode.single) {
+    return useSingleListChecked(state);
+  }
+  return useMultipleListChecked(state, options);
+}
+
+type InitState = {
+  storage: Record<string, OioListItem>;
+} & State;
+
+type State = {
+  checkedKeys: string[];
+  checkedItems: OioListItem[];
+  lastCheckedKeys?: string[];
+  lastCheckedItems?: OioListItem[];
+  submitCheckedKeys?: string[];
+  submitCheckedItems?: OioListItem[];
+};
+
+function useMultipleListChecked(initState: InitState, options?: Options) {
+  const onChecked = (item: OioListItem, checked: boolean) => {
+    const { lastCheckedKeys, lastCheckedItems } = initState;
+    if (lastCheckedKeys && lastCheckedItems) {
+      $$updateCheckedByLastCheckedKeys(lastCheckedKeys, lastCheckedItems, [item], checked);
+    } else {
+      $$updateChecked(initState, item, checked);
+      initState.checkedKeys = [...initState.checkedKeys];
+    }
+  };
+
+  const $$updateChecked = (state: State, item: OioListItem, checked: boolean) => {
+    if (item.checked === checked) {
+      return;
+    }
+    item.checked = checked;
+    if (checked) {
+      state.checkedKeys.push(item.key);
+      state.checkedItems.push(item);
+    } else {
+      const index = state.checkedKeys.indexOf(item.key);
+      if (index > -1) {
+        state.checkedKeys.splice(index, 1);
+        state.checkedItems.splice(index, 1);
+      }
+    }
+  };
+
+  const $$updateCheckedByLastCheckedKeys = (
+    lastCheckedKeys: string[],
+    lastCheckedItems: OioListItem[],
+    items: OioListItem[],
+    checked: boolean
+  ) => {
+    const nextState: State = { checkedKeys: [...initState.checkedKeys], checkedItems: [...initState.checkedItems] };
+    for (const item of items) {
+      $$updateChecked(nextState, item, checked);
+    }
+    const searchStorage = { ...initState.storage };
+    const submitCheckedKeys = [...lastCheckedKeys];
+    const submitCheckedItems = [...lastCheckedItems];
+    for (let i = 0; i < nextState.checkedKeys.length; i++) {
+      const checkedKey = nextState.checkedKeys[i];
+      if (lastCheckedKeys.indexOf(checkedKey) === -1) {
+        submitCheckedKeys.push(checkedKey);
+        submitCheckedItems.push(nextState.checkedItems[i]);
+      }
+      delete searchStorage[checkedKey];
+    }
+    for (const key of Object.keys(searchStorage)) {
+      const index = submitCheckedKeys.indexOf(key);
+      if (index > -1) {
+        submitCheckedKeys.splice(index, 1);
+        submitCheckedItems.splice(index, 1);
+      }
+    }
+    initState.submitCheckedKeys = submitCheckedKeys;
+    initState.submitCheckedItems = submitCheckedItems;
+  };
+
+  const onCheckedAll = (items: OioListItem[], checked: boolean) => {
+    const { lastCheckedKeys, lastCheckedItems } = initState;
+    if (lastCheckedKeys && lastCheckedItems) {
+      $$updateCheckedByLastCheckedKeys(lastCheckedKeys, lastCheckedItems, items, checked);
+      return;
+    }
+    const isDiff = options?.isDiff?.();
+    if (isDiff) {
+      $$diffCheckedAll(initState, items, checked);
+      initState.checkedKeys = [...initState.checkedKeys];
+      return;
+    }
+    $$checkedAll(initState, items, checked);
+  };
+
+  const $$diffCheckedAll = (state: State, items: OioListItem[], checked: boolean) => {
+    if (checked) {
+      const nextState: State = { checkedKeys: [], checkedItems: [] };
+      $$updateCheckedAll(items, nextState);
+      for (let i = 0; i < nextState.checkedKeys.length; i++) {
+        const checkedKey = nextState.checkedKeys[i];
+        if (state.checkedKeys.indexOf(checkedKey) <= -1) {
+          state.checkedKeys.push(checkedKey);
+          state.checkedItems.push(nextState.checkedItems[i]);
+        }
+      }
+    } else {
+      const uncheckedKeys: string[] = [];
+      $$updateUncheckedAll(items, uncheckedKeys);
+      for (const checkedKey of uncheckedKeys) {
+        const index = state.checkedKeys.indexOf(checkedKey);
+        if (index !== -1) {
+          state.checkedKeys.splice(index, 1);
+          state.checkedItems.splice(index, 1);
+        }
+      }
+    }
+  };
+
+  const $$checkedAll = (state: State, items: OioListItem[], checked: boolean) => {
+    if (checked) {
+      const nextState: State = { checkedKeys: [], checkedItems: [] };
+      $$updateCheckedAll(items, nextState);
+      state.checkedKeys = nextState.checkedKeys;
+      state.checkedItems = nextState.checkedItems;
+    } else {
+      $$updateUncheckedAll(items);
+      state.checkedKeys = [];
+      state.checkedItems = [];
+    }
+  };
+
+  const $$updateCheckedAll = (items: OioListItem[], nextState: State) => {
+    for (const item of items) {
+      nextState.checkedKeys.push(item.key);
+      nextState.checkedItems.push(item);
+      item.checked = true;
+    }
+  };
+
+  const $$updateUncheckedAll = (items: OioListItem[], uncheckedKeys?: string[]) => {
+    for (const item of items) {
+      uncheckedKeys?.push(item.key);
+      item.checked = false;
+    }
+  };
+
+  const onRefreshCheckedState = (items: OioListItem[], checkedKeys: string[]) => {
+    const nextState: State = { checkedKeys: [], checkedItems: [] };
+    $$refreshCheckedState(items, checkedKeys, nextState);
+    initState.checkedKeys = nextState.checkedKeys;
+    initState.checkedItems = nextState.checkedItems;
+  };
+
+  const $$refreshCheckedState = (items: OioListItem[], checkedKeys: string[], newState: State) => {
+    for (const item of items) {
+      const checked = checkedKeys.includes(item.key);
+      item.checked = checked;
+      if (checked) {
+        newState.checkedKeys.push(item.key);
+        newState.checkedItems.push(item);
+      }
+    }
+  };
+
+  return {
+    onChecked,
+    $$updateChecked,
+    onCheckedAll,
+    onRefreshCheckedState
+  };
+}
+
+function useSingleListChecked(initState: State) {
+  const onChecked = (item: OioListItem, checked: boolean) => {
+    $$updateChecked(initState, item, checked);
+  };
+
+  const $$updateChecked = (state: State, item: OioListItem, checked: boolean) => {
+    if (item.key === state.checkedKeys[0]) {
+      return;
+    }
+    if (checked) {
+      state.checkedKeys = [item.key];
+      state.checkedItems = [item];
+    }
+  };
+
+  const onCheckedAll = (items: OioListItem[], checked: boolean) => {
+    console.error('this method is unsupported. cause: mode is single.');
+  };
+
+  const onRefreshCheckedState = (items: OioListItem[], checkedKeys: string[]) => {
+    const nextState: State = { checkedKeys: [], checkedItems: [] };
+    $$refreshCheckedState(items, checkedKeys?.[0], nextState);
+    initState.checkedKeys = nextState.checkedKeys;
+    initState.checkedItems = nextState.checkedItems;
+  };
+
+  const $$refreshCheckedState = (items: OioListItem[], checkedKey: string, newState: State) => {
+    for (const item of items) {
+      const checked = item.key === checkedKey;
+      item.checked = checked;
+      if (checked) {
+        newState.checkedKeys.push(item.key);
+        newState.checkedItems.push(item);
+        return;
+      }
+    }
+  };
+
+  return {
+    onChecked,
+    $$updateChecked,
+    onCheckedAll,
+    onRefreshCheckedState
+  };
+}