@kengic/vue 0.30.1-beta.82 → 0.30.1-beta.85

package/component/KgResizable/KgResizable.service.tsx

@@ -0,0 +1,41 @@
+import { onBeforeUnmount, onMounted, Ref, ref } from 'vue';
+
+/**
+ * <p>监测父元素的尺寸, 动态计算最大高度以及最大宽度.</p>
+ *
+ * @param param
+ */
+export function _useObserveParentSize(param: { kgResizableRef: Ref<HTMLDivElement | null> }) {
+    const { kgResizableRef } = param ?? {};
+
+    // 手柄的外边距
+    const HANDLE_MARGIN = 6;
+
+    // 组件的父元素的宽度
+    const parentWidth = ref<number>(0);
+
+    // 组件的父元素的高度
+    const parentHeight = ref<number>(0);
+
+    let resizeObserver: ResizeObserver | null = null;
+
+    onMounted(() => {
+        const parentElement = kgResizableRef.value?.parentElement;
+        if (parentElement) {
+            parentWidth.value = Math.max((parentElement.clientWidth ?? 0) - 1 - HANDLE_MARGIN, 0);
+            parentHeight.value = Math.max((parentElement.clientHeight ?? 0) - 1 - HANDLE_MARGIN, 0);
+
+            resizeObserver = new ResizeObserver(() => {
+                parentWidth.value = Math.max((parentElement.clientWidth ?? 0) - 1 - HANDLE_MARGIN, 0);
+                parentHeight.value = Math.max((parentElement.clientHeight ?? 0) - 1 - HANDLE_MARGIN, 0);
+            });
+            resizeObserver.observe(parentElement);
+        }
+    });
+
+    onBeforeUnmount(() => {
+        resizeObserver?.disconnect();
+    });
+
+    return { parentWidth: parentWidth, parentHeight: parentHeight };
+}

package/component/KgResizable/KgResizable.tsx

@@ -0,0 +1,239 @@
+import { ____ERROR____ } from '@kengic/core.core';
+import { computed, CSSProperties, defineComponent, ExtractPropTypes, onUnmounted, PropType, ref } from 'vue';
+import './KgResizable.less';
+import { _useObserveParentSize } from './KgResizable.service';
+
+export const getProps = () => ({
+    /** 样式. */
+    kgClass: String as PropType<string>,
+
+    /** 是否禁用. */
+    kgDisabled: Boolean as PropType<boolean>,
+
+    /**
+     * 是否显示拖拽手柄.
+     *
+     * @default true
+     */
+    kgResizeHandleVisible: { type: Boolean as PropType<boolean>, default: true },
+
+    /** 当前高度. */
+    kgHeight: { type: Number as PropType<number>, default: 0 },
+
+    /** 最大高度. */
+    kgMaxHeight: { type: Number as PropType<number>, default: undefined },
+
+    /** 最小高度. */
+    kgMinHeight: { type: Number as PropType<number>, default: 0 },
+
+    /** 拖拽条的位置. */
+    kgType: { type: String as PropType<'top' | 'bottom' | 'left' | 'right'>, default: 'bottom' },
+
+    'onUpdate:kgHeight': Function as PropType<(value: number) => void>,
+});
+
+export type IKgResizableProps = Partial<ExtractPropTypes<ReturnType<typeof getProps>>>;
+
+// 拖动缩放尺寸
+export default defineComponent({
+    name: 'KgResizable',
+    props: getProps(),
+    emits: ['update:kgHeight'],
+    setup(props, { emit, slots }) {
+        if (props.kgMaxHeight && props.kgMaxHeight < props.kgMinHeight) {
+            ____ERROR____('KgResizable | kgMaxHeight 不能小于 kgMinHeight.', { kgMaxHeight: props.kgMaxHeight, kgMinHeight: props.kgMinHeight });
+        }
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        const kgResizableRef = ref<HTMLDivElement | null>(null);
+
+        const { parentWidth, parentHeight } = _useObserveParentSize({ kgResizableRef: kgResizableRef });
+
+        /** 开始拖拽时的宽度. */
+        let fromWidth: number = 0;
+        /** 开始拖拽时的高度. */
+        let fromHeight: number = 0;
+        /** 开始拖拽时鼠标的横向位置. */
+        let fromPageX: number = 0;
+        /** 开始拖拽时鼠标的纵向位置. */
+        let fromPageY: number = 0;
+
+        let mouseupEventListener = {
+            remove: () => {},
+        };
+
+        let mousemoveEventListener = {
+            remove: () => {},
+        };
+
+        const style$$ = computed<CSSProperties>(() => {
+            switch (props.kgType) {
+                case 'top':
+                case 'bottom':
+                    return { height: Math.min(maxHeight$$.value, Math.max(minHeight$$.value, props.kgHeight)) + 'px' };
+
+                case 'left':
+                case 'right':
+                    return { width: Math.min(maxHeight$$.value, Math.max(minHeight$$.value, props.kgHeight)) + 'px' };
+            }
+        });
+
+        const class$$ = computed(() => {
+            let _class = '';
+
+            if (props.kgClass) {
+                _class += `${props.kgClass} `;
+            }
+
+            _class += 'kg-resizable';
+
+            if (props.kgDisabled) {
+                _class += ' kg-resizable--disabled';
+            }
+
+            if (!props.kgResizeHandleVisible) {
+                _class += ' kg-resizable--resize-handle-hide';
+            }
+
+            switch (props.kgType) {
+                case 'left':
+                    _class += ' kg-resizable--left';
+                    break;
+
+                case 'right':
+                    _class += ' kg-resizable--right';
+                    break;
+
+                case 'top':
+                    _class += ' kg-resizable--top';
+                    break;
+
+                case 'bottom':
+                    _class += ' kg-resizable--bottom';
+                    break;
+            }
+
+            return _class;
+        });
+
+        /**
+         * 最大高度.
+         */
+        const maxHeight$$ = computed<number>(() => {
+            switch (props.kgType) {
+                case 'top':
+                case 'bottom':
+                    return Math.min(parentHeight.value, props.kgMaxHeight ?? Number.MAX_VALUE);
+
+                case 'left':
+                case 'right':
+                    return Math.min(parentWidth.value, props.kgMaxHeight ?? Number.MAX_VALUE);
+            }
+        });
+
+        /**
+         * 最小高度.
+         */
+        const minHeight$$ = computed<number>(() => Math.min(maxHeight$$.value, props.kgMinHeight ?? 0));
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        //region FUNCTION
+        //----------------------------------------------------------------------------------------------------
+        function removeEventListeners() {
+            mouseupEventListener.remove();
+            mousemoveEventListener.remove();
+        }
+
+        const update = (event: MouseEvent) => {
+            switch (props.kgType) {
+                case 'top':
+                    emit('update:kgHeight', Math.min(maxHeight$$.value, Math.max(minHeight$$.value, fromHeight - (event.pageY - fromPageY))));
+                    break;
+
+                case 'bottom':
+                    emit('update:kgHeight', Math.min(maxHeight$$.value, Math.max(minHeight$$.value, fromHeight + (event.pageY - fromPageY))));
+                    break;
+
+                case 'left':
+                    emit('update:kgHeight', Math.min(maxHeight$$.value, Math.max(minHeight$$.value, fromWidth - (event.pageX - fromPageX))));
+                    break;
+
+                case 'right':
+                    emit('update:kgHeight', Math.min(maxHeight$$.value, Math.max(minHeight$$.value, fromWidth + (event.pageX - fromPageX))));
+                    break;
+            }
+        };
+
+        function onMouseMove(event: MouseEvent) {
+            update(event);
+        }
+
+        function onMouseUp(event: MouseEvent) {
+            update(event);
+            removeEventListeners();
+        }
+
+        function onMouseDown(event: MouseEvent) {
+            event.stopPropagation();
+            event.preventDefault();
+
+            removeEventListeners();
+
+            if (event instanceof MouseEvent && event.which !== 1) {
+                return;
+            }
+
+            fromPageX = event.pageX;
+            fromPageY = event.pageY;
+
+            fromWidth = props.kgHeight;
+            fromHeight = props.kgHeight;
+
+            mouseupEventListener = addEventListener(document.documentElement, 'mouseup', onMouseUp);
+            mousemoveEventListener = addEventListener(document.documentElement, 'mousemove', onMouseMove);
+        }
+
+        function addEventListener<K extends keyof HTMLElementEventMap>(target: HTMLElement, event: K, listener: (this: HTMLElement, event: HTMLElementEventMap[K]) => any): { remove: () => void } {
+            target.addEventListener(event, listener);
+
+            return {
+                remove: () => target.removeEventListener(event, listener),
+            };
+        }
+
+        function onClick(event: MouseEvent) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        //region LIFECYCLE
+        //----------------------------------------------------------------------------------------------------
+        onUnmounted(() => {
+            removeEventListeners();
+        });
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        return () => (
+            <div
+                ref={kgResizableRef}
+                class={class$$.value}
+                style={style$$.value}
+            >
+                <div
+                    class="kg-resizable-handle"
+                    onClick={onClick}
+                    onMousedown={onMouseDown}
+                >
+                    <div class="kg-resizable-handle-line"></div>
+                </div>
+
+                {slots.default?.()}
+            </div>
+        );
+    },
+});

package/component/KgSearch/KgSearch.event.ts

@@ -0,0 +1,78 @@
+import { IKgEventListener, kgEmit } from '@kengic/core.core';
+import { values } from 'lodash-es';
+import { IKgTableRequestParameter } from '../KgTable';
+import { useKgVar } from '../KgVar';
+
+/**
+ * 事件类型.
+ */
+export type IKgSearchEvent =
+    // 查询字段初始完成, 组件渲染完成, 查询表单对象已经有值
+    | 'onReady'
+
+    // 点击查询按钮, 并且表单验证通过
+    | 'onSearch'
+
+    // 点击重置按钮
+    | 'onReset';
+
+//region 事件 onReady
+//----------------------------------------------------------------------------------------------------
+export type IKgSearch$EventListenerParameter$onReady = {};
+export type IKgSearch$EventListener$onReady = ((param: IKgSearch$EventListenerParameter$onReady) => Promise<boolean>) & IKgEventListener;
+//endregion
+
+//region 事件 onSearch
+//----------------------------------------------------------------------------------------------------
+export type IKgSearch$EventListenerParameter$onSearch = {} & IKgTableRequestParameter;
+export type IKgSearch$EventListener$onSearch = ((param: IKgSearch$EventListenerParameter$onSearch) => Promise<boolean>) & IKgEventListener;
+//endregion
+
+//region 事件 onReset
+//----------------------------------------------------------------------------------------------------
+export type IKgSearch$EventListenerParameter$onReset = {};
+export type IKgSearch$EventListener$onReset = ((param: IKgSearch$EventListenerParameter$onReset) => Promise<boolean>) & IKgEventListener;
+//endregion
+
+export type IKgSearch$EventListenerParameter = IKgSearch$EventListenerParameter$onReady | IKgSearch$EventListenerParameter$onSearch | IKgSearch$EventListenerParameter$onReset;
+export type IKgSearch$EventListener = IKgSearch$EventListener$onReady | IKgSearch$EventListener$onSearch | IKgSearch$EventListener$onReset;
+
+export const eventListeners: Record<
+    string,
+    {
+        onReady: Array<IKgSearch$EventListener$onReady>;
+        onReset: Array<IKgSearch$EventListener$onReset>;
+        onSearch: Array<IKgSearch$EventListener$onSearch>;
+    }
+> = {};
+
+/**
+ * 触发事件.
+ *
+ * @param param.event 事件名称.
+ * @param param.id 唯一标识.
+ * @param param.parameter 事件参数.
+ */
+export async function emit<P extends IKgSearch$EventListenerParameter>(param: { event: IKgSearchEvent; id?: string | undefined; parameter: P }): Promise<boolean> {
+    const { event, id = '', parameter } = param ?? {};
+
+    // 其他页面可能使用了该页面的查询条件, 找出这些其他页面的界面标识,
+    const kgVar = useKgVar(id);
+    const childFidList = [...values(kgVar.store.getVarGridConfigMap)]
+        .filter((i) => i?.prf_frm_id === id)
+        .map((i) => i?.frm_id)
+        .filter((i) => !!i) as Array<string>;
+
+    await Promise.all(
+        [id, ...childFidList].map((i) =>
+            kgEmit<IKgSearchEvent, P, IKgSearch$EventListener>({
+                event: event,
+                eventListeners: eventListeners,
+                id: i,
+                parameter: parameter,
+            }),
+        ),
+    );
+
+    return Promise.resolve(true);
+}

package/component/KgSearch/KgSearch.hooks.ts

@@ -0,0 +1,160 @@
+import { ____ERROR____, ____WARN_____, IRemoveEventListener } from '@kengic/core.core';
+import { computed, ComputedRef, watch } from 'vue';
+import { VarProfileDetail, VarProfileMasterDTO } from '../../api/WMS/models';
+import { pinia } from '../../config';
+import { kgOnEventFactory } from '../../util';
+import { IKgTableRequestParameter } from '../KgTable';
+import { useKgVar } from '../KgVar';
+import { eventListeners, IKgSearch$EventListener$onReady, IKgSearch$EventListener$onReset, IKgSearch$EventListener$onSearch, IKgSearchEvent } from './KgSearch.event';
+import { buildKgSearchStore, useKgSearchStore } from './KgSearch.store';
+
+export type IUseKgSearch = {
+    /**
+     * 当前查询字段列表.
+     */
+    currentVarProfileDetails: ComputedRef<Array<VarProfileDetail>>;
+
+    /**
+     * 当前查询字段列表(可见的).
+     */
+    currentVarProfileDetailsForVisible: ComputedRef<Array<VarProfileDetail>>;
+
+    currentVarProfileMaster: ComputedRef<VarProfileMasterDTO | null>;
+
+    /**
+     * 高级查询的操作符表单数据对象.
+     */
+    dynamicQueryOperatorModel: ComputedRef<Record<string, string>>;
+
+    /**
+     * 所有事件监听函数.
+     */
+    eventListeners: typeof eventListeners;
+
+    /**
+     * 界面标识.
+     */
+    formID: string;
+
+    /**
+     * 表单数据对象.
+     */
+    formModel: ComputedRef<Record<string, any> | null>;
+
+    /** 是否就绪: 查询字段初始完成, 组件渲染完成. */
+    isReady: ComputedRef<boolean>;
+
+    /** @deprecated 请使用 {@link formModel} */
+    model: ComputedRef<Record<string, any> | null>;
+
+    /**
+     * 监听事件: 查询字段初始完成, 组件渲染完成, 查询表单对象已经有值.
+     *
+     * @param listener 事件监听函数.
+     * @param isOnce 是否只会触发一次. 默认为 undefined.
+     */
+    onReady(listener: IKgSearch$EventListener$onReady, isOnce?: boolean): IRemoveEventListener;
+
+    /**
+     * 监听事件: reset, 点击重置按钮.
+     * @param listener 事件监听函数.
+     * @param isOnce 是否只会触发一次. 默认为 undefined.
+     */
+    onReset(listener: IKgSearch$EventListener$onReset, isOnce?: boolean): IRemoveEventListener;
+
+    /**
+     * 监听事件: search, 点击查询按钮, 并且表单验证通过.
+     * @param listener 事件监听函数.
+     * @param isOnce 是否只会触发一次. 默认为 undefined.
+     */
+    onSearch(listener: IKgSearch$EventListener$onSearch, isOnce?: boolean): IRemoveEventListener;
+
+    /**
+     * 重置.
+     */
+    reset(): void;
+
+    /**
+     * 查询.
+     */
+    search(param?: boolean | IKgTableRequestParameter): void;
+
+    // TODO LT 废弃移除
+    /**
+     * 状态数据.
+     */
+    store: ReturnType<typeof useKgSearchStore>;
+};
+
+/**
+ * @param fid 界面标识.
+ */
+export function useKgSearch(fid?: string | null): IUseKgSearch {
+    const kgVar = useKgVar(fid);
+
+    const store = buildKgSearchStore(fid)(pinia);
+    // TODO LT 废弃移除
+    const storeOld = useKgSearchStore(pinia);
+
+    return new Proxy(
+        {
+            currentVarProfileDetails: computed(() => storeOld.getCurrentVarProfileMaster(kgVar.fid)?.varProfileDetails ?? []),
+            currentVarProfileDetailsForVisible: computed(
+                () =>
+                    storeOld.getCurrentVarProfileMaster(kgVar.fid)?.varProfileDetails?.filter((i) => {
+                        const varSubmitDetail = kgVar.kgSubmit.getVarSubmitDetailByVarProfileDetail({ varProfileDetail: i });
+                        return varSubmitDetail?.visible_flag !== 0;
+                    }) ?? [],
+            ),
+            currentVarProfileMaster: computed(() => storeOld.getCurrentVarProfileMaster(kgVar.fid)),
+            dynamicQueryOperatorModel: computed(() => storeOld.getDynamicQueryOperatorModel(kgVar.fid)),
+            eventListeners: eventListeners,
+            formID: kgVar.fid,
+            formModel: computed(() => storeOld.getFormModel(kgVar.fid)),
+            isReady: computed(() => storeOld.getIsReady(kgVar.fid)),
+            model: computed(() => storeOld.getFormModel(kgVar.fid)),
+            onReady: kgOnEventFactory<IKgSearchEvent, IKgSearch$EventListener$onReady>({ eventListeners: eventListeners, event: 'onReady', id: kgVar.fid }),
+            onReset: kgOnEventFactory<IKgSearchEvent, IKgSearch$EventListener$onReset>({ eventListeners: eventListeners, event: 'onReset', id: kgVar.fid }),
+            onSearch: kgOnEventFactory<IKgSearchEvent, IKgSearch$EventListener$onSearch>({ eventListeners: eventListeners, event: 'onSearch', id: kgVar.fid }),
+            reset() {
+                return storeOld.getResetFn(kgVar.fid)?.();
+            },
+            search(args?: boolean | IKgTableRequestParameter) {
+                const stopWatch = watch(
+                    () => storeOld.getIsReady(kgVar.fid),
+                    async (isReady) => {
+                        if (isReady) {
+                            setTimeout(() => stopWatch());
+
+                            const fn = storeOld.getSearchFn(kgVar.fid);
+                            if (!fn) {
+                                ____ERROR____(`${kgVar.fid} | useKgSearch | search() | 查询函数为空.`);
+                                return;
+                            }
+
+                            if (typeof args === 'boolean') {
+                                ____WARN_____(`${kgVar.fid} | useKgSearch | search() | 旧的参数格式已弃用, 请使用新的参数格式.`);
+                                fn({ isSearchFirstPage: args });
+                            } else {
+                                fn(args);
+                            }
+                        }
+                    },
+                    { immediate: true },
+                );
+            },
+            // TODO LT 废弃移除
+            store: storeOld,
+        } as IUseKgSearch,
+        {
+            get(target, p): any {
+                // 将部分属性直接代理给状态管理对象(store), 这样就可以直接访问 store 上的所有属性和方法,
+                if (!(p in target) && p in store) {
+                    return Reflect.get(store, p);
+                }
+
+                return Reflect.get(target, p);
+            },
+        },
+    );
+}