@kengic/vue 0.30.1-beta.96 → 0.31.1

package/component/KgTable/KgTable.service.tsx

@@ -1,781 +0,0 @@
-import { ____ERROR____, KgCoreUtil } from '@kengic/core.core';
-import { ColumnsType } from 'ant-design-vue/es/table';
-import { ColumnFilterItem, ColumnType, FilterValue, SorterResult } from 'ant-design-vue/es/table/interface';
-import { AlignType, FixedType } from 'ant-design-vue/es/vc-table/interface';
-import { toCanvas } from 'html-to-image';
-import { debounce, filter, groupBy, isArrayLike, isNil, uniqBy } from 'lodash-es';
-import { computed, ComputedRef, inject, nextTick, onActivated, onBeforeUnmount, onMounted, ref, Ref, toRaw, UnwrapRef, watch } from 'vue';
-import { API } from '../../api';
-import { DescriptionBatchQuery } from '../../api/WMS/models';
-import { useKg } from '../../config';
-import { IKgVarGridDetailDisplayTypeProperties, KG, KG__VAR_BUTTON__TYPE, KG__VAR_GRID_DETAIL__DISPLAY_TYPE, KG__VAR_SUBMIT_CONFIG__DISPLAY_TYPE } from '../../model';
-import { useKgVar } from '../KgVar';
-import { IKgTableProps } from './KgTable';
-import KgTableBodyCell from './KgTable.BodyCell';
-import { IKgTableRow, IKgTableSlotParams, KG_TABLE_CELL_CONTEXT, KG_TABLE_TD_CHECK_WIDTH, KG_TABLE_TD_DEFAULT_WIDTH, KG_TABLE_TD_INDEX_WIDTH, KG_TABLE_TD_MAX_WIDTH, KG_TABLE_TD_MIN_WIDTH } from './KgTable.model';
-
-//region _useRenderBodyCell 渲染表体的单元格
-//----------------------------------------------------------------------------------------------------
-export function _useRenderBodyCell() {
-    const kgSlots = inject(KG.DI.KG_VAR.KG_SLOTS, null);
-
-    const kgVar = useKgVar();
-
-    /**
-     * 点击链接, 打开更新弹窗.
-     * @param row
-     */
-    function onKgUpdateLinkClick(row: IKgTableRow) {
-        kgVar.kgTable.setSelectedRows({
-            selectedRows: [row]
-                .map((i) => {
-                    const idKey = kgVar.kgTable.idKey.value;
-                    const datas = kgVar.kgTable.dataList;
-                    return datas.find((j) => j[idKey] === i[idKey])!;
-                })
-                .filter((i) => !!i),
-        });
-
-        kgVar.kgButton.click({ type: KG__VAR_BUTTON__TYPE.UPDATE });
-    }
-
-    /**
-     * 渲染表体的单元格.
-     * @param args 参数.
-     * @param context 所处环境. {@link KG_TABLE_CELL_CONTEXT }.
-     */
-    function renderBodyCell(args: any, context: KG_TABLE_CELL_CONTEXT = KG_TABLE_CELL_CONTEXT.TABLE_CELL) {
-        const { column, index, record, text, value } = args;
-
-        const vname: string = column.dataIndex;
-        let _value = '';
-
-        if (column.customRender) {
-            _value = column.customRender({ index, record, column, text, value, renderIndex: index });
-        } else {
-            _value = value;
-        }
-
-        // 默认渲染
-        const defaultRender = (
-            <KgTableBodyCell
-                kgContext={context}
-                kgRow={record}
-                kgValue={_value}
-                kgVarName={vname}
-                onKgUpdateLinkClick={() => onKgUpdateLinkClick(record)}
-            />
-        );
-
-        // 使用默认渲染
-        if (!(kgSlots ?? kgVar.slots.value)?.KgTable?.bodyCell) {
-            return defaultRender;
-        }
-
-        // 使用自定义的渲染
-        const varGridDetail = vname ? kgVar.getVarGridDetail({ varName: vname }) : null;
-        return (kgSlots ?? kgVar.slots.value)?.KgTable?.bodyCell?.({
-            column,
-            index,
-            record,
-            text,
-            value,
-            row: record,
-            varGridDetail,
-            defaultRender,
-        } as IKgTableSlotParams['bodyCell']);
-    }
-
-    return { renderBodyCell: renderBodyCell };
-}
-//endregion
-
-//region _useColumns 表格的列
-//----------------------------------------------------------------------------------------------------
-export type IUseColumns = {
-    /** 表格的列. */
-    columns: ComputedRef<ColumnsType<IKgTableRow>>;
-
-    /** 当前过滤状态(哪些列有过滤, 哪些列没过滤). */
-    filterInfo: Ref<Record<string, any>>;
-
-    /** 横向滚动宽度. */
-    scrollX: ComputedRef<string>;
-
-    /** 当前排序状态. */
-    sorterInfo: Ref<SorterResult<any> | undefined>;
-};
-
-export function _useColumns(props: IKgTableProps): IUseColumns {
-    const kgProps = inject(KG.DI.KG_VAR.KG_PROPS, null);
-
-    const kgVar = useKgVar();
-
-    const { renderBodyCell } = _useRenderBodyCell();
-
-    const filterInfo = ref<Record<string, any>>({});
-    const sorterInfo = ref<SorterResult<any> | undefined>(undefined);
-
-    /** 是否显示勾选框列. */
-    const isShowCheckColumn = computed<boolean>(() => kgVar.store.getVarGridConfig(kgVar.fid)?.show_check_column_flg === 1);
-
-    /** 表格的列. */
-    const columns = computed<ColumnsType<IKgTableRow>>(
-        () => {
-            const kg = useKg();
-
-            const visibleVarGridDetailsTotalWidth = kgVar.store.getVisibleVarGridDetailListTotalWidth(kgVar.fid) ?? 0;
-            const visibleVarGridDetails = kgVar.store.getVisibleVarGridDetailList(kgVar.fid);
-
-            const _columns: ColumnsType<IKgTableRow> = [
-                {
-                    dataIndex: 'index',
-                    width: KG_TABLE_TD_INDEX_WIDTH,
-                    fixed: 'left',
-                    align: 'center',
-                    className: 'kg-table--body-cell--index',
-                    customRender: ({ index }) => index + 1,
-                },
-                ...(visibleVarGridDetails?.map((varGridDetail, index) => {
-                    const vname: string | null | undefined = varGridDetail.var_nam;
-
-                    /** 列的宽度. */
-                    function getWidth(): number | 'auto' {
-                        return varGridDetail.width === 'auto' ? 'auto' : Number(varGridDetail.width) || KG_TABLE_TD_DEFAULT_WIDTH;
-                    }
-
-                    /** 表头文本. */
-                    function title(): string {
-                        return kgVar.t2(vname);
-                    }
-
-                    function fixed(): FixedType | undefined {
-                        if (varGridDetail.fix_left_flg === 1) {
-                            return 'left';
-                        }
-
-                        if (varGridDetail.fix_right_flg === 1) {
-                            return 'right';
-                        }
-
-                        return undefined;
-                    }
-
-                    function sorter(): boolean {
-                        // 排序功能没有启用
-                        if (varGridDetail.ord_flg !== 1) {
-                            return false;
-                        }
-
-                        // 表格禁用
-                        if ((kgProps?.value ?? kgVar.props.value)?.KgTable?.kgDisabled) {
-                            return false;
-                        }
-
-                        // 表格禁用
-                        if (isNil((kgProps?.value ?? kgVar.props.value)?.KgTable?.kgDisabled) && props.kgDisabled) {
-                            return false;
-                        }
-
-                        // 正在创建/更新/复制/删除
-                        if (kgVar.isCreating.value || kgVar.isUpdating.value || kgVar.isCopying.value || kgVar.isDeleting.value) {
-                            return false;
-                        }
-
-                        // 数据为空
-                        if (kgVar.kgTable.dataList.length <= 0) {
-                            return false;
-                        }
-
-                        return true;
-                    }
-
-                    function filters(): Array<ColumnFilterItem> | undefined {
-                        // 过滤功能没有启用
-                        if (kg.option.KgTable?.filter?.on !== true) {
-                            return undefined;
-                        }
-
-                        // 过滤功能没有启用
-                        if (varGridDetail.filter_flag !== 1) {
-                            return undefined;
-                        }
-
-                        // 表格禁用
-                        if ((kgProps?.value ?? kgVar.props.value)?.KgTable?.kgDisabled) {
-                            return undefined;
-                        }
-
-                        // 表格禁用
-                        if (isNil((kgProps?.value ?? kgVar.props.value)?.KgTable?.kgDisabled) && props.kgDisabled) {
-                            return undefined;
-                        }
-
-                        // 正在创建/更新/复制/删除
-                        if (kgVar.isCreating.value || kgVar.isUpdating.value || kgVar.isCopying.value || kgVar.isDeleting.value) {
-                            return undefined;
-                        }
-
-                        // 数据为空
-                        if (kgVar.kgTable.dataList.length <= 0) {
-                            return undefined;
-                        }
-
-                        return uniqBy(
-                            toRaw(kgVar.kgTable.dataList).map((row) => {
-                                return {
-                                    value: row?.[vname!] ?? '',
-                                    text: renderBodyCell(
-                                        {
-                                            column: { dataIndex: vname } as ColumnType<any>,
-                                            index: index,
-                                            record: row,
-                                            value: row?.[vname!],
-                                        },
-                                        KG_TABLE_CELL_CONTEXT.TABLE_FILTER,
-                                    ),
-                                };
-                            }),
-                            'value',
-                        );
-                    }
-
-                    function filteredValue(): FilterValue | null {
-                        // 过滤功能没有启用
-                        if (kg.option.KgTable?.filter?.on !== true) {
-                            return null;
-                        }
-
-                        return filterInfo.value?.[vname!] || null;
-                    }
-
-                    function align(): AlignType {
-                        if (!['left', 'center', 'right'].includes(varGridDetail.align || '')) {
-                            return 'left';
-                        }
-
-                        return varGridDetail.align as AlignType;
-                    }
-
-                    const width = getWidth();
-
-                    // 列配置了默认排序
-                    switch (varGridDetail.ord) {
-                        // 正序
-                        case 0: {
-                            // 默认排序只能初始化一次, 后续的对排序的修改都肯定是手动触发的,
-                            if (!sorterInfo.value) {
-                                sorterInfo.value = { field: vname!, order: 'ascend' };
-                            }
-                            break;
-                        }
-
-                        // 倒序
-                        case 1: {
-                            // 默认排序只能初始化一次, 后续的对排序的修改都肯定是手动触发的,
-                            if (!sorterInfo.value) {
-                                sorterInfo.value = { field: vname!, order: 'descend' };
-                            }
-                            break;
-                        }
-                    }
-
-                    return {
-                        key: vname!,
-                        dataIndex: vname,
-                        title: title(),
-                        width,
-                        resizable: typeof width === 'number',
-                        minWidth: KG_TABLE_TD_MIN_WIDTH,
-                        maxWidth: KG_TABLE_TD_MAX_WIDTH,
-                        align: align(),
-                        fixed: fixed(),
-                        sorter: sorter(),
-                        sortOrder: sorterInfo.value?.field === vname ? (sorterInfo.value?.order ?? null) : null,
-                        filteredValue: filteredValue(),
-                        filters: filters(),
-                        onFilter: (value: string | number | boolean, record: any) => {
-                            // 过滤的值为 '' 时, 将 null/undefined 也匹配
-                            if (value === '') {
-                                return isNil(record?.[vname!]) || record?.[vname!] === '';
-                            }
-
-                            return record?.[vname!] === value;
-                        },
-                        customHeaderCell: () => {
-                            return { 'kg-form-id': kgVar.fid, 'kg-var-name': vname, draggable: true };
-                        },
-                        customCell: (row) => {
-                            // 表格内编辑时, 添加额外的样式
-
-                            // 当前行的 ID
-                            const currentRowId = row[kgVar.kgTable.idKey.value];
-                            // 选中行的 ID
-                            const selectedRowId = kgVar.kgTable.selectedRow.value?.[kgVar.kgTable.idKey.value];
-
-                            const displayType = kgVar.kgSubmit.currentVarSubmitConfig$DisplayType.value;
-
-                            const varSubmitDetail = kgVar.kgSubmit.getVarSubmitDetails({ buttonVarName: kgVar.kgButton.currentButton?.var_nam, varName: vname })?.[0] ?? null;
-
-                            return {
-                                'kg-form-id': kgVar.fid,
-                                'kg-var-name': vname,
-                                class: displayType === KG__VAR_SUBMIT_CONFIG__DISPLAY_TYPE.TABLE && currentRowId === selectedRowId && !!varSubmitDetail ? 'submitting' : '',
-                            };
-                        },
-                    } as ColumnType<IKgTableRow>;
-                }) ?? []),
-            ];
-
-            // 列的数据尚未加载完成, 或者没有可显示的列, 或者列的总宽小于表格宽度(并且没有宽度为 auto 的列),
-            // 此时需要额外添加一个特殊的列, 用来占据剩余的表格宽度, 避免勾选列和序号列被拉的太宽
-            if (visibleVarGridDetailsTotalWidth === 0 || (kgVar.kgTable.getTableWidth > visibleVarGridDetailsTotalWidth && !visibleVarGridDetails?.find((i) => i.width === 'auto'))) {
-                _columns.push({ width: 'auto', customRender: () => null });
-            }
-
-            return _columns;
-        },
-        {
-            onTrigger(e) {},
-        },
-    );
-
-    /** 横向滚动宽度. */
-    const scrollX = computed<string>(() => {
-        let width = 0;
-
-        // 勾选列
-        if (isShowCheckColumn.value) {
-            width += KG_TABLE_TD_CHECK_WIDTH;
-        }
-
-        // 序号列
-        width += KG_TABLE_TD_INDEX_WIDTH;
-
-        // 可显示的列的宽度之和
-        width += kgVar.store.getVisibleVarGridDetailListTotalWidth(kgVar.fid) ?? 0;
-
-        return `${width}px`;
-    });
-
-    let stopWatchSorterInfo: any = null;
-
-    //region WATCH
-    //----------------------------------------------------------------------------------------------------
-    watch(kgVar.currentVarGridMasteID, (value, newValue) => {
-        // 视图变更, 重置排序状态
-        sorterInfo.value = {};
-
-        // 排序状态发生变更, 说明新的视图中的某一列配置了默认排序, 因此需要重新查询表格数据
-        stopWatchSorterInfo?.();
-        stopWatchSorterInfo = watch(
-            sorterInfo,
-            () => {
-                stopWatchSorterInfo();
-                stopWatchSorterInfo = null;
-                kgVar.kgSearch.search({ isSearchFirstPage: true });
-            },
-            { deep: true },
-        );
-    });
-    //endregion
-
-    return {
-        /** 表格的列. */
-        columns: columns,
-
-        /** 当前过滤状态(哪些列有过滤, 哪些列没过滤). */
-        filterInfo: filterInfo,
-
-        /** 横向滚动宽度. */
-        scrollX: scrollX,
-
-        /** 当前排序状态. */
-        sorterInfo: sorterInfo,
-    };
-}
-//endregion
-
-//region _useLoading 加载状态
-//----------------------------------------------------------------------------------------------------
-export function _useLoading() {
-    const kgVar = useKgVar();
-
-    const isLoading = computed(() => {
-        if (kgVar.kgTable.isRetrieving.value) {
-            return true;
-        }
-
-        if (kgVar.isRetrieving.value) {
-            return true;
-        }
-
-        if (kgVar.isRetrievingVarGridMaster.value) {
-            return true;
-        }
-
-        return false;
-    });
-
-    return {
-        /** 是否显示加载状态. */
-        isLoading: isLoading,
-    };
-}
-//endregion
-
-//region _useResizeObserver 监控表格尺寸
-//----------------------------------------------------------------------------------------------------
-export function _useResizeObserver(kgTableRef: Ref<UnwrapRef<HTMLDivElement | null>>) {
-    const kgVar = useKgVar();
-
-    let resizeObserver: ResizeObserver | null = null;
-
-    onMounted(() => {
-        const antTableHeaderElement = kgTableRef.value?.querySelector('div.ant-table-header');
-        if (antTableHeaderElement) {
-            resizeObserver = new ResizeObserver((entries) => {
-                const width: number = entries[0].borderBoxSize[0]?.inlineSize ?? 0;
-                // 有一个特殊的列, 专门用来放滚动条, 获取它的宽度
-                const tableCellScrollbarWidth = antTableHeaderElement.querySelector('th.ant-table-cell-scrollbar')?.clientWidth ?? 0;
-                kgVar.kgTable.setTableWidth(Math.max(0, width - tableCellScrollbarWidth));
-            });
-            resizeObserver.observe(antTableHeaderElement);
-        }
-    });
-
-    onBeforeUnmount(() => {
-        resizeObserver?.disconnect();
-    });
-
-    return {};
-}
-//endregion
-
-//region _useCacheScrollState 缓存表格滚动状态
-//----------------------------------------------------------------------------------------------------
-export type ICacheScrollState = {};
-
-export function _useCacheScrollState(kgTableRef: Ref<UnwrapRef<HTMLDivElement | null>>): ICacheScrollState {
-    // 表格失活前记录滚动状态,
-    let scrollLeft: number = 0;
-    let scrollTop: number = 0;
-
-    // 监听表格滚动
-    let scrollEventListener = debounce(
-        (event: Event) => {
-            scrollLeft = (event.target as HTMLDivElement)?.scrollLeft ?? 0;
-            scrollTop = (event.target as HTMLDivElement)?.scrollTop ?? 0;
-        },
-        200,
-        { leading: false, trailing: true },
-    );
-
-    onActivated(() => {
-        // 表格激活后恢复滚动状态
-        const antTableBodyElement = kgTableRef.value?.querySelector('div.ant-table-body') as HTMLDivElement;
-        if (antTableBodyElement) {
-            antTableBodyElement.scrollLeft = scrollLeft;
-            antTableBodyElement.scrollTop = scrollTop;
-        }
-    });
-
-    onMounted(() => {
-        const antTableBodyElement = kgTableRef.value?.querySelector('div.ant-table-body') as HTMLDivElement;
-        antTableBodyElement?.addEventListener('scroll', scrollEventListener);
-    });
-
-    onBeforeUnmount(() => {
-        const antTableBodyElement = kgTableRef.value?.querySelector('div.ant-table-body') as HTMLDivElement;
-        antTableBodyElement?.removeEventListener('scroll', scrollEventListener);
-    });
-
-    return {};
-}
-//endregion
-
-//region _useDragColumn 拖拽修改列的顺序
-//----------------------------------------------------------------------------------------------------
-
-export function _useDragColumn(kgTableRef: Ref<UnwrapRef<HTMLDivElement | null>>, columns: ComputedRef<ColumnsType<IKgTableRow>>) {
-    const kgVar = useKgVar();
-
-    /** 所有表头. */
-    let ths: Array<HTMLTableCellElement> | null | undefined = null;
-    /** 正在被拖拽的表头. */
-    let thDrag: HTMLTableCellElement | null = null;
-
-    /**
-     * 注册事件.
-     */
-    function addEventListeners() {
-        ths = filter(kgTableRef.value?.querySelectorAll<HTMLTableCellElement>('div.ant-table-header > table > thead > tr >th'), (i) => i.hasAttribute('kg-var-name'));
-        if (ths) {
-            for (let th of ths) {
-                // ------------------------------------------------------------ dragstart
-                // @ts-ignore
-                th.__kg__dragstart__ = (event: DragEvent) => {
-                    thDrag = th;
-
-                    th.classList.add('dragging');
-                    th.parentElement!.classList.add('dragging');
-
-                    const span = document.createElement('span');
-                    span.setAttribute('id', '__kg_table_header_drag_image__');
-
-                    const { width, height } = th.getBoundingClientRect();
-                    if (width && height) {
-                        span.style.width = `${width + 2}px`;
-                        span.style.height = `${height + 2}px`;
-                    }
-
-                    event.dataTransfer?.setDragImage(span, -10, (height + 2) / 2);
-
-                    toCanvas(th).then((canvas) => {
-                        span.appendChild(canvas);
-                        document.body.appendChild(span);
-
-                        event.dataTransfer?.setDragImage(span, -10, (height + 2) / 2);
-                    });
-                };
-                // @ts-ignore
-                th.addEventListener('dragstart', th.__kg__dragstart__);
-
-                // ------------------------------------------------------------ dragend
-                // @ts-ignore
-                th.__kg__dragend__ = (event: DragEvent) => {
-                    th.classList.remove('dragging');
-                    th.parentElement!.classList.remove('dragging');
-
-                    const span = document.querySelector<HTMLSpanElement>('#__kg_table_header_drag_image__');
-                    if (span) {
-                        document.body.removeChild(span);
-                    }
-                };
-                // @ts-ignore
-                th.addEventListener('dragend', th.__kg__dragend__);
-
-                // ------------------------------------------------------------ drag
-                // @ts-ignore
-                th.__kg__drag__ = (event: DragEvent) => {
-                    event.preventDefault();
-
-                    const span = document.querySelector<HTMLSpanElement>('#__kg_table_header_drag_image__');
-                    if (span) {
-                        span.style.left = `${event.clientX + 10}px`;
-                        span.style.top = `${event.clientY - span.getBoundingClientRect().height / 2}px`;
-                    }
-                };
-                // @ts-ignore
-                th.addEventListener('drag', th.__kg__drag__, false);
-
-                // ------------------------------------------------------------ dragover
-                // @ts-ignore
-                th.__kg__dragover__ = (event: DragEvent) => {
-                    event.preventDefault();
-
-                    if (th.cellIndex > (thDrag?.cellIndex ?? -1)) {
-                        th.classList.add('dragover', 'dragover-right');
-                    } else if (th.cellIndex < (thDrag?.cellIndex ?? -1)) {
-                        th.classList.add('dragover', 'dragover-left');
-                    }
-                };
-                // @ts-ignore
-                th.addEventListener('dragover', th.__kg__dragover__, false);
-
-                // ------------------------------------------------------------ dragenter
-                // @ts-ignore
-                th.__kg__dragenter__ = (event: DragEvent) => {
-                    if (th.cellIndex > (thDrag?.cellIndex ?? -1)) {
-                        th.classList.add('dragover', 'dragover-right');
-                    } else if (th.cellIndex < (thDrag?.cellIndex ?? -1)) {
-                        th.classList.add('dragover', 'dragover-left');
-                    }
-                };
-                // @ts-ignore
-                th.addEventListener('dragenter', th.__kg__dragenter__);
-
-                // ------------------------------------------------------------ dragleave
-                // @ts-ignore
-                th.__kg__dragleave__ = (event: DragEvent) => {
-                    th.classList.remove('dragover', 'dragover-right', 'dragover-left');
-                };
-                // @ts-ignore
-                th.addEventListener('dragleave', th.__kg__dragleave__);
-
-                // ------------------------------------------------------------ drop
-                // @ts-ignore
-                th.__kg__drop__ = (event: DragEvent) => {
-                    event.preventDefault();
-                    th.classList.remove('dragover', 'dragover-right', 'dragover-left');
-
-                    const fromFid = thDrag?.getAttribute('kg-form-id');
-                    const toFid = th.getAttribute('kg-form-id');
-
-                    if (fromFid === toFid) {
-                        const fromVname = thDrag?.getAttribute('kg-var-name');
-                        const toVname = th.getAttribute('kg-var-name');
-
-                        if (fromVname !== toVname) {
-                            kgVar.store.dragSortCurrentVarGridDetails(kgVar.fid, fromVname, toVname);
-                        }
-                    }
-                };
-                // @ts-ignore
-                th.addEventListener('drop', th.__kg__drop__);
-            }
-        }
-    }
-
-    /**
-     * 移除事件.
-     */
-    function removeEventListeners() {
-        if (ths) {
-            for (let th of ths) {
-                ['dragstart', 'dragend', 'drag', 'dragover', 'dragenter', 'dragleave', 'drop'].forEach((event) => {
-                    const listener = `__kg__${event}__`;
-                    // @ts-ignore
-                    if (th[listener]) {
-                        // @ts-ignore
-                        th.removeEventListener(event, th[listener]);
-                        // @ts-ignore
-                        delete th[listener];
-                    }
-                });
-            }
-        }
-    }
-
-    watch(columns, async () => {
-        removeEventListeners();
-        await nextTick();
-        addEventListeners();
-    });
-
-    onBeforeUnmount(() => {
-        removeEventListeners();
-    });
-
-    return {};
-}
-//endregion
-
-//region _useDatas 表格数据
-//----------------------------------------------------------------------------------------------------
-export function _useDatas() {
-    const kg = useKg();
-    const kgVar = useKgVar();
-
-    /**
-     * 处理表格数据.
-     * @param response 查询接口返回数据.
-     */
-    function transformDatas(response: Ref<any>): { datas: Ref<Array<IKgTableRow>>; total: Ref<number> } {
-        let _datas = ref<Array<IKgTableRow>>([]);
-        let _total = ref<number>(0);
-
-        switch (true) {
-            case !response.value:
-                _datas.value = [];
-                _total.value = 0;
-                break;
-
-            case isArrayLike(response.value):
-                _datas.value = response.value;
-                _total.value = response.value.length;
-                break;
-
-            case 'total' in response.value && 'records' in response.value:
-                _datas.value = response.value.records ?? [];
-                _total.value = response.value.total ?? 0;
-                break;
-        }
-
-        _datas.value.forEach((row) => {
-            Object.keys(row).forEach((varName) => {
-                const varGridDetail = kgVar.getVarGridDetail({ varName: varName });
-
-                switch (varGridDetail?.display_type) {
-                    case KG__VAR_GRID_DETAIL__DISPLAY_TYPE.PROGRESS: {
-                        row[varName] = row[varName] ?? 0;
-                        break;
-                    }
-
-                    default: {
-                        row[varName] = row[varName];
-                        break;
-                    }
-                }
-            });
-        });
-
-        return { datas: _datas, total: _total };
-    }
-
-    /**
-     * 请求系统描述数据.
-     */
-    async function requestDescriptionList(): Promise<void> {
-        let descriptionBatchQueryList: Array<DescriptionBatchQuery & { codeValue: string }> = (kgVar.currentVarGridDetails.value
-            ?.map((i) => {
-                const properties = KgCoreUtil.tryParseJSON<IKgVarGridDetailDisplayTypeProperties['DESC']>(i.display_type_properties);
-
-                // 描述组名为空, 或者没有启用延迟请求,
-                if (!properties.description?.codeName || properties.description?.isDefer !== true) {
-                    return null;
-                }
-
-                const vname = i.var_nam ?? '';
-
-                return {
-                    codeName: properties.description?.codeName,
-                    codeValue: properties.description?.codeValue || '`${row.' + vname + '}`',
-                    codeValues: [],
-                };
-            })
-            ?.filter((i) => !!i) ?? []) as Array<DescriptionBatchQuery & { codeValue: string }>;
-
-        for (const row of kgVar.kgTable.dataList) {
-            for (let descriptionBatchQuery of descriptionBatchQueryList) {
-                let codeName = descriptionBatchQuery.codeName;
-                let codeValue = descriptionBatchQuery.codeValue;
-
-                try {
-                    codeValue = eval(descriptionBatchQuery.codeValue);
-                } catch {
-                    ____ERROR____('KgTable.requestDescriptionList() | 描述解析失败.', { codeValue: codeValue });
-                }
-
-                // 如果描述已经存在, 不再请求,
-                if (kg.getDescription({ codeName: codeName, codeValue: codeValue })) {
-                    continue;
-                }
-
-                if (!descriptionBatchQuery.codeValues!.includes(codeValue)) {
-                    descriptionBatchQuery.codeValues!.push(codeValue);
-                }
-            }
-        }
-
-        // 如果 codeValues 为空, 表示这些描述已经存在, 不再请求,
-        descriptionBatchQueryList = descriptionBatchQueryList.filter((i) => i.codeValues?.length);
-
-        if (descriptionBatchQueryList.length > 0) {
-            const descriptions = await API.WMS.DescriptionController.ListByCodeNamesAndCodeValues({
-                data: descriptionBatchQueryList.map((i) => new DescriptionBatchQuery(i)),
-            });
-
-            const group = groupBy(descriptions, (i) => i.codnam);
-            Object.keys(group).forEach((codeName) => {
-                kg.setDescriptionList({ codeName: codeName, descriptions: group[codeName] });
-            });
-        }
-    }
-
-    return {
-        transformDatas: transformDatas,
-        requestDescriptionList: requestDescriptionList,
-    };
-}
-//endregion