@kengic/vue 0.30.1-beta.96 → 0.31.0

package/component/KgTable/KgTable.Setting.service.tsx

@@ -1,285 +0,0 @@
-import { toCanvas } from 'html-to-image';
-import { filter } from 'lodash-es';
-import { nextTick, onBeforeUnmount, Ref, watch } from 'vue';
-import { VarGridDetail } from '../../api/WMS/models';
-import { KgUtil } from '../../util';
-import { useKgVar } from '../KgVar';
-
-export type IUseServices = {
-    /**
-     * 用于表格的列下拉列表, 根据关键字搜索某列, 如果匹配就显示该列, 否则隐藏该列.
-     * 匹配时忽略大小写.
-     * @param varGridDetail
-     * @param key 关键字.
-     */
-    filterVarGridDetailByKey: (varGridDetail: VarGridDetail, key?: string | null) => boolean;
-};
-
-//region _useServices
-//----------------------------------------------------------------------------------------------------
-export function _useServices(): IUseServices {
-    const kgVar = useKgVar();
-
-    function filterVarGridDetailByKey(varGridDetail: VarGridDetail, key?: string | null): boolean {
-        if (!key) {
-            return true;
-        }
-
-        let _key = key.toLowerCase();
-
-        if (kgVar.t2(varGridDetail.var_nam).toLowerCase().includes(_key)) {
-            return true;
-        }
-
-        if (varGridDetail.var_nam?.toLowerCase()?.includes(_key)) {
-            return true;
-        }
-
-        return false;
-    }
-
-    return { filterVarGridDetailByKey };
-}
-//endregion
-
-//region _useObserveMenuItemColumns()
-//----------------------------------------------------------------------------------------------------
-/** 监控表格列的下拉列表的尺寸变化, 从而调整位置, 防止遮盖.  */
-export function _useObserveMenuItemColumns(isMenuItemColumnsVisible: Ref<boolean>) {
-    let resizeObserver: ResizeObserver | null = null;
-
-    watch(
-        isMenuItemColumnsVisible,
-        async (visible) => {
-            if (visible) {
-                await nextTick();
-
-                setTimeout(() => {
-                    const element = document.querySelector<HTMLDivElement>('div.kg-table--setting--submenu-popup--columns');
-                    if (element) {
-                        resizeObserver = new ResizeObserver(() => {
-                            const viewportHeight: number = window.visualViewport?.height ?? 0;
-                            const bottom = element.getBoundingClientRect().bottom;
-
-                            // 需要调整位置, 防止底部被遮盖了
-                            if (bottom > viewportHeight) {
-                                const parentElement = element.parentElement?.parentElement;
-                                if (parentElement) {
-                                    parentElement.style.top = `${viewportHeight - bottom}px`;
-                                }
-                            }
-                        });
-                        resizeObserver.observe(element);
-                    }
-                });
-            } else {
-                resizeObserver?.disconnect();
-            }
-        },
-        { immediate: true, flush: 'post' },
-    );
-}
-//endregion
-
-//region _useDragToSortRow 拖拽修改列的顺序
-//----------------------------------------------------------------------------------------------------
-/**
- *
- * @param param.columnsRef 宿主页面标识.
- * @param param.varGridDetails 字段列表.
- */
-export function _useDragToSortRow(param: { columnsRef: Ref<HTMLUListElement | null> }) {
-    const { columnsRef } = param ?? {};
-
-    const kgVar = useKgVar();
-
-    /** 所有的行. */
-    let lis: Array<HTMLLIElement> | null | undefined = null;
-    /** 所有拖拽手柄. */
-    let handlers: Array<HTMLSpanElement> | null | undefined = null;
-    /** 正在被拖拽的行. */
-    let liDrag: HTMLLIElement | null = null;
-
-    /**
-     * 注册事件.
-     */
-    function addEventListeners() {
-        handlers = filter(columnsRef.value?.querySelectorAll<HTMLSpanElement>(`& > li > span`), () => true);
-        if (handlers) {
-            for (let td of handlers) {
-                // ------------------------------------------------------------ dragstart
-                // @ts-ignore
-                td.__kg__dragstart__ = async (event: DragEvent) => {
-                    liDrag = td.parentElement as HTMLLIElement;
-
-                    td.classList.add('dragging');
-                    td.parentElement!.classList.add('dragging');
-
-                    const span = document.createElement('span');
-                    span.setAttribute('id', '__kg_table__setting__columns__drag_image__');
-
-                    const { width, height } = td.parentElement!.getBoundingClientRect();
-                    if (width && height) {
-                        span.style.width = `${width + 2}px`;
-                        span.style.height = `${height + 2}px`;
-                    }
-
-                    event.dataTransfer?.setDragImage(span, -10, (height + 2) / 2);
-
-                    const canvas = await toCanvas(td.parentElement!);
-
-                    span.appendChild(canvas);
-                    document.body.appendChild(span);
-
-                    event.dataTransfer?.setDragImage(span, -10, (height + 2) / 2);
-                };
-                // @ts-ignore
-                td.addEventListener('dragstart', td.__kg__dragstart__);
-
-                // ------------------------------------------------------------ dragend
-                // @ts-ignore
-                td.__kg__dragend__ = (event: DragEvent) => {
-                    td.classList.remove('dragging');
-                    td.parentElement!.classList.remove('dragging');
-
-                    const span = document.querySelector<HTMLSpanElement>('#__kg_table__setting__columns__drag_image__');
-                    if (span) {
-                        document.body.removeChild(span);
-                    }
-                };
-                // @ts-ignore
-                td.addEventListener('dragend', td.__kg__dragend__);
-
-                // ------------------------------------------------------------ drag
-                // @ts-ignore
-                td.__kg__drag__ = (event: DragEvent) => {
-                    event.preventDefault();
-
-                    const span = document.querySelector<HTMLSpanElement>('#__kg_table__setting__columns__drag_image__');
-                    if (span) {
-                        span.style.left = `${event.clientX + 10}px`;
-                        span.style.top = `${event.clientY - span.getBoundingClientRect().height / 2}px`;
-                    }
-                };
-                // @ts-ignore
-                td.addEventListener('drag', td.__kg__drag__, false);
-            }
-        }
-
-        lis = filter(columnsRef.value?.querySelectorAll<HTMLLIElement>(`& > li`), () => true);
-        if (lis) {
-            for (let li of lis) {
-                // ------------------------------------------------------------ dragover
-                // @ts-ignore
-                li.__kg__dragover__ = (event: DragEvent) => {
-                    event.preventDefault();
-
-                    if (Number(li.getAttribute('kg-index')) > (Number(liDrag?.getAttribute('kg-index')) ?? -1)) {
-                        li.classList.add('dragover', 'dragover-right');
-                    } else if (Number(li.getAttribute('kg-index')) < (Number(liDrag?.getAttribute('kg-index')) ?? -1)) {
-                        li.classList.add('dragover', 'dragover-left');
-                    }
-                };
-                // @ts-ignore
-                li.addEventListener('dragover', li.__kg__dragover__, false);
-
-                // ------------------------------------------------------------ dragenter
-                // @ts-ignore
-                li.__kg__dragenter__ = (event: DragEvent) => {
-                    if (Number(li.getAttribute('kg-index')) > (Number(liDrag?.getAttribute('kg-index')) ?? -1)) {
-                        li.classList.add('dragover', 'dragover-right');
-                    } else if (Number(li.getAttribute('kg-index')) < (Number(liDrag?.getAttribute('kg-index')) ?? -1)) {
-                        li.classList.add('dragover', 'dragover-left');
-                    }
-                };
-                // @ts-ignore
-                li.addEventListener('dragenter', li.__kg__dragenter__);
-
-                // ------------------------------------------------------------ dragleave
-                // @ts-ignore
-                li.__kg__dragleave__ = (event: DragEvent) => {
-                    li.classList.remove('dragover', 'dragover-right', 'dragover-left');
-                };
-                // @ts-ignore
-                li.addEventListener('dragleave', li.__kg__dragleave__);
-
-                // ------------------------------------------------------------ drop
-                // @ts-ignore
-                li.__kg__drop__ = (event: DragEvent) => {
-                    event.preventDefault();
-
-                    KgUtil.showLoading();
-
-                    const span = document.querySelector<HTMLSpanElement>('#__kg_table__setting__columns__drag_image__');
-                    if (span) {
-                        document.body.removeChild(span);
-                    }
-
-                    li.classList.remove('dragover', 'dragover-right', 'dragover-left');
-
-                    const fromVname = liDrag?.getAttribute('kg-var-name');
-                    const toVname = li.getAttribute('kg-var-name');
-
-                    if (fromVname !== toVname) {
-                        kgVar.store.dragSortCurrentVarGridDetails(kgVar.fid, fromVname, toVname);
-                        nextTick().finally(() => {
-                            KgUtil.hideLoading();
-                        });
-                    }
-                };
-                // @ts-ignore
-                li.addEventListener('drop', li.__kg__drop__);
-            }
-        }
-    }
-
-    /**
-     * 移除事件.
-     */
-    function removeEventListeners() {
-        if (handlers) {
-            for (let td of handlers) {
-                ['dragstart', 'dragend', 'drag'].forEach((event) => {
-                    const listener = `__kg__${event}__`;
-                    // @ts-ignore
-                    if (td[listener]) {
-                        // @ts-ignore
-                        td.removeEventListener(event, td[listener]);
-                        // @ts-ignore
-                        delete td[listener];
-                    }
-                });
-            }
-        }
-        if (lis) {
-            for (let li of lis) {
-                ['dragover', 'dragenter', 'dragleave', 'drop'].forEach((event) => {
-                    const listener = `__kg__${event}__`;
-                    // @ts-ignore
-                    if (li[listener]) {
-                        // @ts-ignore
-                        li.removeEventListener(event, li[listener]);
-                        // @ts-ignore
-                        delete li[listener];
-                    }
-                });
-            }
-        }
-    }
-
-    watch(columnsRef, async (columnsRef) => {
-        removeEventListeners();
-
-        if (columnsRef) {
-            await nextTick();
-            addEventListeners();
-        }
-    });
-
-    onBeforeUnmount(() => {
-        removeEventListeners();
-    });
-
-    return {};
-}
-//endregion

package/component/KgTable/KgTable.Setting.tsx

@@ -1,377 +0,0 @@
-import { Icon } from '@iconify/vue';
-import { Checkbox, Dropdown, Input, Menu, notification } from 'ant-design-vue';
-import { isNil } from 'lodash-es';
-import { computed, defineComponent, PropType, ref, watch } from 'vue';
-import { API } from '../../api';
-import { UpdateVarGridMasterQuery, VarGridDetail, VarGridMasterDTO } from '../../api/WMS/models';
-import { useKg } from '../../config';
-import { KG_CUSTOM_LEVEL } from '../../model';
-import { KgUtil } from '../../util';
-import { useKgVar } from '../KgVar';
-import { KG_VAR_CONFIG_MODAL__CONTEXT } from '../KgVarConfig/components/KgVarConfigModal';
-import { _useDragToSortRow, _useObserveMenuItemColumns, _useServices } from './KgTable.Setting.service';
-import { KgTableSettingVarGridMasterSaveAs } from './KgTable.Setting.VarGridMaster.SaveAs';
-
-export const getProps = () => ({
-    kgIsDisable: {
-        type: Boolean as PropType<boolean>,
-        default: undefined,
-    },
-});
-
-// 表格:设置按钮
-export const KgTableSetting = defineComponent({
-    name: 'KgTableSetting',
-    props: getProps(),
-    setup(props, { slots, emit }) {
-        const kg = useKg();
-        const kgVar = useKgVar();
-
-        const { filterVarGridDetailByKey } = _useServices();
-
-        //region DATA
-        //----------------------------------------------------------------------------------------------------
-        /** 打开的子菜单. */
-        const openKeys = ref<Array<string>>([]);
-        /** 子菜单'字段'是否打开了. */
-        const isMenuColumnsVisible = computed<boolean>(() => openKeys.value.includes('1'));
-        /** 过滤列的关键字. */
-        const columnFilterKey = ref('');
-        const kgTableSettingVarGridMasterSaveAsProp = ref<any>({
-            visible: false,
-        });
-
-        /**
-         * 是否禁用.
-         */
-        const isDisable$$ = computed<boolean>(() => {
-            if (!isNil(props.kgIsDisable)) {
-                return props.kgIsDisable;
-            } else {
-                return !!kgVar.isCreating.value || !!kgVar.isCreating.value || !!kgVar.isCreating.value || !!kgVar.isCreating.value;
-            }
-        });
-
-        const columnsRef = ref<HTMLUListElement | null>(null);
-
-        _useObserveMenuItemColumns(isMenuColumnsVisible);
-        if (kg.option?.KgTable?.Setting?.columns?.dragToSort?.isOn === true) {
-            _useDragToSortRow({ columnsRef: columnsRef });
-        }
-        //endregion
-
-        //region WATCH
-        //----------------------------------------------------------------------------------------------------
-        watch(
-            isMenuColumnsVisible,
-            (visible) => {
-                // 关闭子菜单'字段'时, 清空过滤的关键字
-                if (!visible) {
-                    columnFilterKey.value = '';
-                }
-            },
-            { immediate: true },
-        );
-        //endregion
-
-        //region FUNCTION
-        //----------------------------------------------------------------------------------------------------
-        /** 切换列的显示隐藏. */
-        function toggleColumnVisible(detail: VarGridDetail) {
-            kgVar.patchVarGridDetail({ varName: detail.var_nam, properties: { vis_flg: detail.vis_flg === 1 ? 0 : 1 } });
-        }
-
-        /**
-         * 当前视图发生变更.
-         * @param varGridMaster 新的当前视图.
-         */
-        function onCurrentVarGridMasterChange(varGridMaster: VarGridMasterDTO) {
-            kgVar.store.setCurrentVarGridMasterID(kgVar.fid, varGridMaster.id!);
-        }
-
-        /** 保存视图. */
-        async function saveVarGridMaster() {
-            // 保存'系统视图'时, 提示用户: 系统视图不允许被修改, 将基于它复制一个新的视图
-            if (kgVar.currentVarGridMaster.value?.cust_lvl === KG_CUSTOM_LEVEL.L0) {
-                KgUtil.confirm({
-                    content: kg.t('kg.KgVarConfig.canNotUpdateSystemVarGridMaster'),
-                    okButtonProps: { danger: false },
-                    onOk: async () => {
-                        kgTableSettingVarGridMasterSaveAsProp.value.visible = true;
-                    },
-                });
-
-                return;
-            }
-
-            KgUtil.showLoading();
-            await API.WMS.VarGridMasterController.Update({
-                data: new UpdateVarGridMasterQuery({ ...kgVar.currentVarGridMaster.value }),
-            });
-            KgUtil.hideLoading();
-
-            notification.success({ message: kg.t('kg.KgTable.saveVarGridMasterSuccessMessage') });
-        }
-
-        /** 另存视图. */
-        async function saveVarGridMasterAs() {
-            kgTableSettingVarGridMasterSaveAsProp.value.visible = true;
-        }
-
-        /** 渲染菜单:字段. */
-        function renderMenuItemColumns() {
-            return (
-                <Menu.SubMenu
-                    key={'columns'}
-                    title={kg.t('kg.KgTable.column')}
-                    popupClassName={'kg-table--setting--submenu-popup--columns'}
-                >
-                    {{
-                        default: () => (
-                            <div class={'columns'}>
-                                <Input
-                                    value={columnFilterKey.value}
-                                    onUpdate:value={(value) => (columnFilterKey.value = value)}
-                                    allowClear={true}
-                                />
-
-                                <ul
-                                    ref={columnsRef}
-                                    class="ant-dropdown-menu ant-dropdown-menu-vertical"
-                                >
-                                    {kgVar.currentVarGridDetails.value?.map((detail, index) => (
-                                        <li
-                                            class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
-                                            onClick={(event) => {
-                                                event.preventDefault();
-                                                event.stopPropagation();
-                                                toggleColumnVisible(detail);
-                                            }}
-                                            style={{
-                                                display: filterVarGridDetailByKey(detail, columnFilterKey.value) ? 'flex' : 'none',
-                                            }}
-                                            kg-index={index}
-                                            kg-var-name={detail.var_nam}
-                                        >
-                                            <Checkbox
-                                                checked={detail.vis_flg === 1}
-                                                disabled={true}
-                                            >
-                                                <pre>{kgVar.t2(detail.var_nam)}</pre>
-                                            </Checkbox>
-
-                                            <span
-                                                draggable={true}
-                                                onClick={(event: any) => {
-                                                    event.preventDefault();
-                                                    event.stopPropagation();
-                                                }}
-                                            >
-                                                <Icon icon="ant-design:holder-outlined" />
-                                            </span>
-                                        </li>
-                                    ))}
-                                </ul>
-                            </div>
-                        ),
-                        expandIcon: () => <Icon icon="ant-design:caret-right-outlined" />,
-                    }}
-                </Menu.SubMenu>
-            );
-        }
-
-        /** 渲染菜单:视图. */
-        function renderMenuItemVarGridMasters() {
-            return (
-                <Menu.SubMenu
-                    key={'var-grid-masters'}
-                    title={kg.t('kg.KgTable.varGridMasters')}
-                    popupClassName={'kg-table--setting--submenu-popup--var-grid-masters'}
-                >
-                    {{
-                        default: () => (
-                            <>
-                                {kgVar.varGridMasters.value?.map((varGridMaster) => (
-                                    <Menu.Item
-                                        key={varGridMaster.id!}
-                                        class={varGridMaster.id === kgVar.currentVarGridMaster.value?.id ? 'selected' : ''}
-                                        kg-var-name={varGridMaster.grd_var_nam}
-                                        onClick={() => onCurrentVarGridMasterChange(varGridMaster)}
-                                    >
-                                        {kgVar.t2(varGridMaster.grd_var_nam)}
-                                    </Menu.Item>
-                                ))}
-                                <Menu.Divider />
-                                <Menu.Item
-                                    key="save-grid-view"
-                                    onClick={saveVarGridMaster}
-                                    icon={<Icon icon="material-symbols:save-outline-rounded" />}
-                                >
-                                    {kg.t('kg.KgTable.saveVarGridMaster')}
-                                </Menu.Item>
-                                <Menu.Item
-                                    key="save-grid-view-as"
-                                    onClick={saveVarGridMasterAs}
-                                    icon={
-                                        <Icon
-                                            icon="material-symbols:save-as-outline-rounded"
-                                            style={{ fontsize: '18px' }}
-                                        />
-                                    }
-                                >
-                                    {kg.t('kg.KgTable.saveVarGridMasterAs')}
-                                </Menu.Item>
-                            </>
-                        ),
-                        expandIcon: () => <Icon icon="ant-design:caret-right-outlined" />,
-                    }}
-                </Menu.SubMenu>
-            );
-        }
-
-        /** 渲染菜单:行高. */
-        function renderMenuItemRowHeight() {
-            if (kg.option.KgTable?.Setting?.rowHeight?.on !== true) {
-                return null;
-            }
-
-            return (
-                <Menu.SubMenu
-                    key={'row-height'}
-                    title={kg.t('kg.KgTable.rowHeight')}
-                    popupClassName={'kg-table--setting--submenu-popup--row-height'}
-                >
-                    {{
-                        default: () => (
-                            <>
-                                <Menu.Item
-                                    key={'L'}
-                                    class={kgVar.kgTable.getRowHeight === 'L' ? 'selected' : ''}
-                                    onClick={() => kgVar.kgTable.setRowHeight('L')}
-                                >
-                                    {kg.t('kg.KgTable.rowHeightL')}
-                                </Menu.Item>
-                                <Menu.Item
-                                    key={'M'}
-                                    class={kgVar.kgTable.getRowHeight === 'M' ? 'selected' : ''}
-                                    onClick={() => kgVar.kgTable.setRowHeight('M')}
-                                >
-                                    {kg.t('kg.KgTable.rowHeightM')}
-                                </Menu.Item>
-                                <Menu.Item
-                                    key={'H'}
-                                    class={kgVar.kgTable.getRowHeight === 'H' ? 'selected' : ''}
-                                    onClick={() => kgVar.kgTable.setRowHeight('H')}
-                                >
-                                    {kg.t('kg.KgTable.rowHeightH')}
-                                </Menu.Item>
-                            </>
-                        ),
-                        expandIcon: () => <Icon icon="ant-design:caret-right-outlined" />,
-                    }}
-                </Menu.SubMenu>
-            );
-        }
-
-        /**
-         * 渲染菜单:其他.
-         */
-        function renderMenuItemOther() {
-            return (
-                <Menu.SubMenu
-                    key={'other'}
-                    title={kg.t('kg.KgTable.other')}
-                    popupClassName={'kg-table--setting--submenu-popup--other'}
-                >
-                    {{
-                        default: () => (
-                            <>
-                                <Menu.Item key="is-show-description">
-                                    <Checkbox
-                                        checked={kgVar.kgTable.isShowDescription.value}
-                                        onUpdate:checked={(value) => kgVar.kgTable.setIsShowDescription(value)}
-                                        onClick={(event) => {
-                                            event.stopPropagation();
-                                        }}
-                                    >
-                                        <div
-                                            onClick={(event) => {
-                                                event.stopPropagation();
-                                            }}
-                                        >
-                                            {kg.t('kg.KgTable.isShowDescription')}
-                                        </div>
-                                    </Checkbox>
-                                </Menu.Item>
-                            </>
-                        ),
-                        expandIcon: () => <Icon icon="ant-design:caret-right-outlined" />,
-                    }}
-                </Menu.SubMenu>
-            );
-        }
-
-        /**
-         * 渲染菜单:配置.
-         */
-        function renderMenuItemConfig() {
-            // 「表格配置弹窗」中所有的表格都不能渲染「配置」菜单, 以避免组件的嵌套,
-            if (kgVar.fid?.startsWith('KgVarConfig.')) {
-                return null;
-            }
-
-            return (
-                <Menu.Item
-                    key="config-var-grid-master"
-                    onClick={() => {
-                        kgVar.kgVarConfig.open({ hostFormID: kgVar.fid, kgContext: KG_VAR_CONFIG_MODAL__CONTEXT.TABLE });
-                    }}
-                >
-                    {kg.t('kg.KgTable.config')}
-                </Menu.Item>
-            );
-        }
-        //endregion
-
-        return () => (
-            <>
-                <Dropdown
-                    disabled={isDisable$$.value}
-                    class={'kg-table--setting'}
-                    overlayClassName={'kg-table--setting--dropdown'}
-                    trigger={'click'}
-                >
-                    {{
-                        default: () => (
-                            <span>
-                                <Icon icon="ant-design:setting-outlined" />
-                            </span>
-                        ),
-                        overlay: () => (
-                            <Menu
-                                triggerSubMenuAction={'click'}
-                                openKeys={openKeys.value}
-                                onUpdate:openKeys={(value) => (openKeys.value = value as any)}
-                                selectable={false}
-                            >
-                                {renderMenuItemColumns()}
-                                {renderMenuItemRowHeight()}
-                                {renderMenuItemVarGridMasters()}
-                                {renderMenuItemOther()}
-                                {renderMenuItemConfig()}
-                            </Menu>
-                        ),
-                    }}
-                </Dropdown>
-
-                {kgTableSettingVarGridMasterSaveAsProp.value.visible && (
-                    <KgTableSettingVarGridMasterSaveAs
-                        onKgClose={() => {
-                            kgTableSettingVarGridMasterSaveAsProp.value.visible = false;
-                        }}
-                    />
-                )}
-            </>
-        );
-    },
-});