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

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

@@ -0,0 +1,285 @@
+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

@@ -0,0 +1,377 @@
+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;
+                        }}
+                    />
+                )}
+            </>
+        );
+    },
+});