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

package/component/KgTable02/KgTable02.tsx

@@ -0,0 +1,865 @@
+import { Icon } from '@iconify/vue';
+import { ____DEBUG____, ____ERROR____, KgCoreUtil } from '@kengic/core.core';
+import { notification, Pagination } from 'ant-design-vue';
+import { AxiosResponse, Method } from 'axios';
+import dayjs from 'dayjs';
+import { cloneDeep, groupBy, isArrayLike, isNil, map } from 'lodash-es';
+import { computed, defineComponent, ExtractPropTypes, inject, nextTick, onMounted, onUnmounted, PropType, Ref, ref, toRaw, watch } from 'vue';
+import { Column, Table, type VxeColumnProps, VxeColumnSlotTypes, VxeTableDefines, type VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
+import { API } from '../../api';
+import { DescriptionBatchQuery } from '../../api/WMS/models';
+import { useKg } from '../../config';
+import { IKgVarGridDetailDisplayTypeProperties, KG, KG__VAR_GRID_DETAIL__DISPLAY_TYPE } from '../../model';
+import { httpClient } from '../../service';
+import { KgUtil } from '../../util';
+import { type IKgTableRequestParameter, KG_TABLE_TD_CHECK_WIDTH, KG_TABLE_TD_DEFAULT_WIDTH, KG_TABLE_TD_INDEX_WIDTH } from '../KgTable/KgTable.model';
+import { KgTableSetting } from '../KgTable/KgTable.Setting';
+import { useKgVar } from '../KgVar';
+import { KgTable02BodyCell } from './KgTable02.BodyCell';
+import {
+    emit,
+    IKgTable02$EventListenerParameter$onAfterRequest,
+    IKgTable02$EventListenerParameter$onAfterRequestResponse,
+    IKgTable02$EventListenerParameter$onBeforeParseRequestParameter,
+    IKgTable02$EventListenerParameter$onBeforeRequest,
+    IKgTable02$EventListenerParameter$onBeforeSetDatas,
+    IKgTable02$EventListenerParameter$onBeforeTransformDatas,
+    IKgTable02$EventListenerParameter$onReady,
+    IKgTable02$EventListenerParameter$onRequestError,
+} from './KgTable02.event';
+import './KgTable02.css';
+
+export const getProps = () => ({
+    /**
+     * 是否禁用某行的勾选框.
+     */
+    kgIsCheckboxDisable: Function as PropType<(row: any) => boolean>,
+
+    /**
+     * 是否禁用表格.
+     */
+    kgIsDisable: {
+        type: Boolean as PropType<boolean>,
+        default: undefined,
+    },
+});
+
+export type KgTable02Props = Partial<ExtractPropTypes<ReturnType<typeof getProps>>>;
+
+/**
+ * 表格.
+ */
+export const KgTable02 = defineComponent({
+    name: 'KgTable02',
+    props: getProps(),
+    setup(props) {
+        const $dayjs = inject('$dayjs', dayjs);
+
+        const kg = useKg();
+        const kgVar = useKgVar();
+
+        // 点击查询按钮,
+        kgVar.kgSearch.onSearch(async (param) => {
+            request(param);
+            return false;
+        });
+
+        // 点击重置按钮,
+        kgVar.kgSearch.onReset(async () => {
+            // 重置排序
+            sortParam$.value.field = '';
+            sortParam$.value.order = null;
+            tableRef.value?.setSort({ field: sortParam$.value.field, order: sortParam$.value.order });
+
+            // 点击「重置按钮」时, 只是清空查询条件, 不会触发新的查询,
+            return false;
+        });
+
+        kgVar.kgTable02.$onAction(async ({ name, args }) => {});
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        const kgTableRef = ref<HTMLDivElement>();
+        const tableRef = ref<VxeTableInstance>();
+
+        /**
+         * 分页参数.
+         */
+        const pageParam$ = ref({
+            pageIndex: 1,
+            pageSize: 10,
+            total: 0,
+        });
+
+        /**
+         * 排序参数.
+         */
+        const sortParam$ = ref({
+            field: '' as string,
+            order: null as VxeTablePropTypes.SortOrder,
+        });
+
+        /**
+         * 表格的列.
+         */
+        const columnList$$ = computed<Array<VxeColumnProps>>(() => {
+            const visibleVarGridDetailList = kgVar.store.getVisibleVarGridDetailList(kgVar.fid);
+
+            const _columnList: Array<VxeColumnProps> = [
+                ...(visibleVarGridDetailList?.map((varGridDetail) => {
+                    const vname: string | null | undefined = varGridDetail.var_nam;
+
+                    return {
+                        field: vname!,
+                        title: kgVar.t2(vname),
+                        width: (() => {
+                            if (varGridDetail.width === 'auto') {
+                                return varGridDetail.width;
+                            }
+
+                            if (varGridDetail.width === '') {
+                                return varGridDetail.width;
+                            }
+
+                            return Number(varGridDetail.width) || KG_TABLE_TD_DEFAULT_WIDTH;
+                        })(),
+                    };
+                }) ?? []),
+            ];
+
+            return _columnList;
+        });
+
+        /**
+         * 接口地址.
+         */
+        const requestUrl$$ = computed<string | null>(() => kgVar.varButtonSearch.value?.cmd ?? null);
+
+        /**
+         * 接口方法.
+         */
+        const requestMethod$$ = computed<Method>(() => (kgVar.varButtonSearch.value?.cmd_method as any) ?? 'GET');
+
+        /**
+         * 接口参数.
+         */
+        const requestParams$$ = computed<Record<string, any>>(() => {
+            let params: Record<string, any> = {
+                column: sortParam$.value?.field ?? undefined,
+                order: sortParam$.value?.order ?? undefined,
+
+                pageNo: pageParam$.value.pageIndex,
+                pageSize: pageParam$.value.pageSize,
+
+                // 查询条件,
+                ...(kgVar.kgSearch.formModel?.value ?? {}),
+
+                // 「查询按钮」中设置的查询参数,
+                ...KgUtil.parseRequestParamsToJSON(kgVar.varButtonSearch.value?.cmd_prm ?? ''),
+
+                // 「表格配置」中设置的查询参数,
+                ...KgUtil.parseRequestParamsToJSON(kgVar.varGridConfig.value?.cmd_prm ?? ''),
+
+                // 父亲界面接口参数,
+                ...parentRequestParams$$.value,
+            };
+
+            // 将排序字段转换为 snake_case 命名方式
+            if (kgVar.varGridConfig.value?.convert_sort_field_to_under_score_flg === 1 && params.column) {
+                params.column = KgUtil.snakeCase(params.column);
+            }
+
+            return params;
+        });
+
+        /**
+         * 父亲界面接口参数.
+         */
+        const parentRequestParams$$ = computed<Record<string, any>>(() => {
+            let params: Record<string, any> = {};
+
+            // 父子界面关联属性
+            if (kgVar.parentKgVar$$.value) {
+                const varChildDetail = kgVar.parentKgVar$$.value?.varChildDetails?.value?.find((i) => i.child_form_id === kgVar.fid);
+                const foreignKeyRecord = KgCoreUtil.tryParseJSON(varChildDetail?.foreign_keys);
+
+                Object.keys(foreignKeyRecord).forEach((key) => {
+                    // TODO LT 父子界面关联属性
+                    // params[foreignKeyRecord[key]] = kgVar.parent.value?.kgTable02?.selectedRow?.value?.[key] ?? KG.__KG__NULL__;
+                });
+            }
+
+            return params;
+        });
+
+        /**
+         * 组件参数「是否禁用表格」.
+         */
+        const kgIsDisable$$ = computed<boolean | undefined>(() => {
+            if (!isNil(kgVar.props.value?.KgTable02?.kgIsDisable)) {
+                return kgVar.props.value?.KgTable02?.kgIsDisable;
+            }
+
+            if (!isNil(props.kgIsDisable)) {
+                return props.kgIsDisable;
+            }
+
+            return undefined;
+        });
+
+        /**
+         * 组件参数「是否禁用某行的勾选框」.
+         */
+        const kgIsCheckboxDisable$$ = computed<((row: any) => boolean) | undefined>(() => {
+            if (!isNil(kgVar.props.value?.KgTable02?.kgIsCheckboxDisable)) {
+                return kgVar.props.value?.KgTable02?.kgIsCheckboxDisable;
+            }
+
+            if (!isNil(props.kgIsCheckboxDisable)) {
+                return props.kgIsCheckboxDisable;
+            }
+
+            if (kgVar.varGridConfig$Props$$.value?.isCheckboxDisabled) {
+                return new Function('row', `try{ ${kgVar.varGridConfig$Props$$.value?.isCheckboxDisabled} } catch (e) { console.error(e); }`) as any;
+            }
+
+            return undefined;
+        });
+
+        /**
+         * 表格是否正在加载.
+         */
+        const isLoading$$ = computed(() => {
+            if (kgVar.kgTable02.isRequesting) {
+                return true;
+            }
+
+            if (kgVar.isRetrieving.value) {
+                return true;
+            }
+
+            if (kgVar.isRetrievingVarGridMaster.value) {
+                return true;
+            }
+
+            return false;
+        });
+
+        const isBottomRightDisable$$ = computed<boolean>(
+            () => !!kgIsDisable$$.value || isLoading$$.value || !!kgVar.isCreating.value || !!kgVar.isUpdating.value || !!kgVar.isCopying.value || !!kgVar.isDeleting.value || pageParam$.value.total === 0,
+        );
+
+        /**
+         * 是否显示勾选框这一列.
+         */
+        const isShowCheckColumn$$ = computed<boolean>(() => kgVar.varGridConfig.value?.show_check_column_flg === 1);
+
+        const class$$ = computed(() => {
+            return {
+                'kg-table02': true,
+                'kg-table02--invisible': kgVar.varGridConfig$Props$$.value?.isVisible === false,
+            };
+        });
+
+        const kgTableButtomClass$$ = computed(() => {
+            return { 'kg-table02-bottom': true, 'kg-table02-bottom--border': kgVar.varGridConfig.value?.show_bottom_border_flg === 1 };
+        });
+
+        //endregion
+
+        //region WATCH
+        //----------------------------------------------------------------------------------------------------
+        //region 当前分页选项
+        //----------------------------------------------------------------------------------------------------
+        // 根据 VarGridConfig.pg_size_opt 设置 pageParam$.value.pageSize 的初始值
+        const stopWatchPageSizeOption = watch(
+            kgVar.kgTable02.pageSizeOption$$,
+            (pageSizeOption) => {
+                if (pageSizeOption) {
+                    setTimeout(() => stopWatchPageSizeOption());
+
+                    pageParam$.value.pageSize = pageSizeOption;
+                    emit<IKgTable02$EventListenerParameter$onReady>({ event: 'onReady', id: kgVar.fid, parameter: {} });
+                    kgVar.kgTable02.setIsReady(true);
+                }
+            },
+            { immediate: true },
+        );
+        //endregion
+
+        //region 所有分页选项
+        //----------------------------------------------------------------------------------------------------
+        // 当 VarGridConfig.pg_size_opts 发生变更, 并且当前的 pageParam$.value.pageSize 不在 pg_size_opts 列表中,
+        // 则更新 pageParam$.value.pageSize 为 VarGridConfig.pg_size_opt 的值
+        watch(kgVar.kgTable02.pageSizeOptionList$$, (pageSizeOptionList) => {
+            if (pageSizeOptionList.length > 0 && !pageSizeOptionList.includes(pageParam$.value.pageSize)) {
+                pageParam$.value.pageSize = kgVar.kgTable02.pageSizeOption$$.value;
+            }
+        });
+        //endregion
+
+        //region 自动查询
+        //----------------------------------------------------------------------------------------------------
+        // 启用了自动查询, 且尚未查询过, 则自动查询
+        watch(
+            [kgVar.kgTable02.isAutoRequest$$, kgVar.kgSearch.isReady, () => kgVar.kgTable02.isRequested],
+            ([isAutoRequest, isReady, isRequested]) => {
+                if (isAutoRequest && isReady && !isRequested) {
+                    request({ isSearchFirstPage: true });
+                }
+            },
+            { immediate: true },
+        );
+        //endregion
+
+        //region parentRequestParams$$
+        //----------------------------------------------------------------------------------------------------
+        // 父子界面关联属性发生变更, 触发查询,
+        watch(
+            () => JSON.stringify(parentRequestParams$$.value),
+            () => {
+                request({ isSearchFirstPage: true });
+            },
+        );
+        //endregion
+
+        //region 同步查询条件到状态管理
+        //----------------------------------------------------------------------------------------------------
+        watch(
+            requestParams$$,
+            (value) => {
+                kgVar.kgTable02.setRequestParamRecord(value);
+            },
+            { immediate: true },
+        );
+        //endregion
+
+        //endregion
+
+        //region FUNCTION
+        //----------------------------------------------------------------------------------------------------
+
+        /**
+         * 查询表格数据.
+         */
+        function request(param: IKgTableRequestParameter = {}) {
+            ____DEBUG____(`${kgVar.fid} | KgTable02 | request() | 进入方法`, { param });
+            const stopWatch = watch(
+                () => kgVar.kgTable02.isReady,
+                (isReady) => {
+                    if (isReady) {
+                        setTimeout(() => stopWatch());
+                        requestDataList();
+                    }
+                },
+                { immediate: true },
+            );
+
+            /**
+             * 查询表格数据.
+             */
+            async function requestDataList() {
+                ____DEBUG____(`${kgVar.fid} | KgTable02 | request().requestDataList() | 进入方法`);
+                if (param.isSearchFirstPage) {
+                    pageParam$.value.pageIndex = 1;
+                }
+
+                kgVar.kgTable02.setIsRequesting(true);
+
+                try {
+                    const response$ = ref<any>({});
+                    const unparsedRequestParams = cloneDeep(toRaw(requestParams$$.value));
+
+                    /**
+                     * 如果某个参数的值为 {@link KG.__KG__NULL__}, 表示需要清空表格数据.
+                     * 此时, 无需再请求后端接口, 直接清空表格数据即可.
+                     */
+                    if (map(unparsedRequestParams, (i: any) => String(i)).includes(KG.__KG__NULL__)) {
+                        kgVar.kgTable02.clearDataList();
+                        kgVar.kgTable02.setIsRequesting(false);
+                        return;
+                    }
+
+                    const dynamicQueryOperatorModel$ = ref(null);
+                    const eventResult$onBeforeParseRequestParameter = await emit<IKgTable02$EventListenerParameter$onBeforeParseRequestParameter>({
+                        event: 'onBeforeParseRequestParameter',
+                        id: kgVar.fid,
+                        parameter: { dynamicQueryOperatorModel$: dynamicQueryOperatorModel$, params: unparsedRequestParams },
+                    });
+
+                    const requestParamRecord = KgUtil.parseParams(unparsedRequestParams, kgVar.kgTable02.kgSearchFid$$.value, $dayjs);
+                    let requestHeaderRecord: Record<string, any> = {};
+
+                    const eventResult$onBeforeRequest = await emit<IKgTable02$EventListenerParameter$onBeforeRequest>({
+                        event: 'onBeforeRequest',
+                        id: kgVar.fid,
+                        parameter: { params: requestParamRecord, response$: response$ },
+                    });
+
+                    if (eventResult$onBeforeRequest) {
+                        // 表格数据由外部提供, 不需要调用查询接口去获取
+                    } else {
+                        if (!requestUrl$$.value) {
+                            ____ERROR____(`${kgVar.fid} | KgTable02 | request() | 查询按钮没有配置接口.`);
+                            throw new Error('查询按钮没有配置接口.');
+                        }
+
+                        // 是否启用高级查询
+                        const isDynamicQuery = kg.option.KgSearch?.dynamicQuery?.on === true && kgVar.kgSearch.currentVarProfileMaster.value?.dyn_flg === 1;
+
+                        const { whereSql, whereSql01, whereSql02, whereSql03, whereSql04, whereSql05, orderBySql, operatorObjectJSON, whereObjectJSON } = KgUtil.getQueryHeaders({
+                            $dayjs: $dayjs,
+                            dynamicQueryOperatorModel: dynamicQueryOperatorModel$.value,
+                            formID: kgVar.fid,
+                            kgSearchFormID: kgVar.kgTable02.kgSearchFid$$.value,
+                            params: unparsedRequestParams,
+                        });
+
+                        requestHeaderRecord = {
+                            [KG.HTTP_HEADER__KG_FORM_ID]: kgVar.fid,
+                            [KG.HTTP_HEADER__KG_IS_DYNAMIC_QUERY]: isDynamicQuery,
+                            [KG.HTTP_HEADER__KG_PAGE_INDEX]: requestParamRecord.pageNo,
+                            [KG.HTTP_HEADER__KG_PAGE_SIZE]: requestParamRecord.pageSize,
+                            [KG.HTTP_HEADER__KG_QUERY_OBJECT]: '{}',
+                            [KG.HTTP_HEADER__KG_QUERY_OPERATOR_OBJECT]: operatorObjectJSON,
+                            [KG.HTTP_HEADER__KG_QUERY_ORDER_BY_SQL]: orderBySql,
+                            [KG.HTTP_HEADER__KG_QUERY_WHERE_OBJECT]: whereObjectJSON,
+                            [KG.HTTP_HEADER__KG_QUERY_WHERE_SQL]: whereSql,
+                            [KG.HTTP_HEADER__KG_QUERY_WHERE_SQL_01]: whereSql01,
+                            [KG.HTTP_HEADER__KG_QUERY_WHERE_SQL_02]: whereSql02,
+                            [KG.HTTP_HEADER__KG_QUERY_WHERE_SQL_03]: whereSql03,
+                            [KG.HTTP_HEADER__KG_QUERY_WHERE_SQL_04]: whereSql04,
+                            [KG.HTTP_HEADER__KG_QUERY_WHERE_SQL_05]: whereSql05,
+                        };
+
+                        let axiosResponse: { value: AxiosResponse<any> } = { value: {} as AxiosResponse<any> };
+                        try {
+                            axiosResponse.value = await httpClient().request(
+                                {
+                                    data: requestParamRecord,
+                                    headers: requestHeaderRecord,
+                                    method: requestMethod$$.value,
+                                    params: { formId: kgVar.fid, ...requestParamRecord },
+                                    url: requestUrl$$.value,
+                                },
+                                {
+                                    isReturnNativeResponse: true,
+                                    successMessageMode: 'none',
+                                },
+                            );
+                        } catch (e) {
+                            const eventResult$onRequestError = await emit<IKgTable02$EventListenerParameter$onRequestError>({
+                                event: 'onRequestError',
+                                id: kgVar.fid,
+                                parameter: { axiosResponse: axiosResponse.value, e: e as Error },
+                            });
+                            if (eventResult$onRequestError) {
+                                // 继续后续逻辑,
+                            } else {
+                                // 重新抛出错误,
+                                throw e;
+                            }
+                        }
+
+                        const eventResult$onAfterRequestResponse = await emit<IKgTable02$EventListenerParameter$onAfterRequestResponse>({
+                            event: 'onAfterRequestResponse',
+                            id: kgVar.fid,
+                            parameter: { axiosResponse: axiosResponse },
+                        });
+
+                        // 请求没有返回数据
+                        if (!axiosResponse.value?.data) {
+                            notification.error({ message: kg.t('kg.KgTable.request-fail-no-data', {}, '请求失败, 响应内容为空') });
+                            throw new Error(kg.t('kg.KgTable.request-fail-no-data', {}, '请求失败, 响应内容为空'));
+                        }
+
+                        // 请求失败
+                        if (![0, 200].includes(axiosResponse.value.data.code ?? -1) || ('success' in axiosResponse.value.data && !axiosResponse.value.data.success)) {
+                            notification.error({ message: axiosResponse.value.data.message || kg.t('kg.KgTable.request-fail-error') });
+                            throw new Error(axiosResponse.value.data.message || kg.t('kg.KgTable.request-fail-error'));
+                        }
+
+                        if ('result' in axiosResponse.value.data) {
+                            response$.value = axiosResponse.value.data.result;
+                        } else if ('data' in axiosResponse.value.data) {
+                            response$.value = axiosResponse.value.data.data;
+                        }
+
+                        // prettier-ignore
+                        ____DEBUG____(`${kgVar.fid} | KgTable02 | request().requestDataList() | 查询成功`, { params: requestParamRecord, response: response$.value });
+                    }
+
+                    const eventResult$onBeforeTransformDatas = await emit<IKgTable02$EventListenerParameter$onBeforeTransformDatas>({
+                        event: 'onBeforeTransformDatas',
+                        id: kgVar.fid,
+                        parameter: { response: response$ },
+                    });
+                    if (eventResult$onBeforeTransformDatas) {
+                        return;
+                    }
+
+                    const { dataList$, total$ } = transformDataList(response$);
+
+                    const eventResult$onBeforeSetDatas = await emit<IKgTable02$EventListenerParameter$onBeforeSetDatas>({
+                        event: 'onBeforeSetDatas',
+                        id: kgVar.fid,
+                        parameter: { dataList$: dataList$, datas: dataList$, params: unparsedRequestParams, requestHeaderRecord: requestHeaderRecord, total: total$ },
+                    });
+                    if (eventResult$onBeforeSetDatas) {
+                        return;
+                    }
+
+                    // 设置表格列表数据
+                    kgVar.kgTable02.setDataList({ dataList: dataList$.value, isPreserveSelectedRows: true });
+                    // 设置表格数据总数
+                    pageParam$.value.total = total$.value;
+
+                    // 请求系统描述数据
+                    requestDescriptionList();
+
+                    // 清空过滤状态
+                    // filterInfo.value = {};
+                    // 清空勾选的行
+                    // onRowClick({ isContinueWhenKgDisabled: true });
+                    // 清空展开的行
+                    // expandedRowKeys.value = (() => {
+                    //     let _expandedRowKeys: Array<string> = [];
+                    //
+                    //     // 默认展开全部的行, TODO LT
+                    //     if (false) {
+                    //         const fn = (_datas: Array<any>) => {
+                    //             for (let data of _datas) {
+                    //                 _expandedRowKeys.push(data[kgVar.kgTable02.idKey.value]);
+                    //
+                    //                 if (data.children && data.children.length > 0) {
+                    //                     fn(data.children);
+                    //                 }
+                    //             }
+                    //         };
+                    //
+                    //         fn(datas.value);
+                    //     }
+                    //
+                    //     return _expandedRowKeys;
+                    // })();
+
+                    await nextTick();
+
+                    const eventResult$onAfterRequest = await emit<IKgTable02$EventListenerParameter$onAfterRequest>({
+                        event: 'onAfterRequest',
+                        id: kgVar.fid,
+                        parameter: {
+                            datas: dataList$,
+                            params: requestParamRecord,
+                            requestHeaderRecord: requestHeaderRecord,
+                            response: response$.value,
+                        },
+                    });
+
+                    kgVar.kgTable02.setIsRequested(true);
+                } catch (e) {
+                    throw e;
+                } finally {
+                    kgVar.kgTable02.setIsRequesting(false);
+                }
+            }
+        }
+
+        /** 分页参数发生变更. */
+        function onPageChange(pageIndex: number, pageSize: number) {
+            if (pageSize !== pageParam$.value.pageSize) {
+                pageParam$.value.pageIndex = 1;
+                pageParam$.value.pageSize = pageSize;
+            } else {
+                pageParam$.value.pageIndex = pageIndex;
+            }
+
+            request();
+        }
+
+        /**
+         * 处理表格数据.
+         *
+         * @param response$ 查询接口返回数据.
+         */
+        function transformDataList(response$: Ref<any>): { dataList$: Ref<Array<any>>; total$: Ref<number> } {
+            let _dataList$ = ref<Array<any>>([]);
+            let _total$ = ref<number>(0);
+
+            switch (true) {
+                case !response$.value:
+                    _dataList$.value = [];
+                    _total$.value = 0;
+                    break;
+
+                case isArrayLike(response$.value):
+                    _dataList$.value = response$.value;
+                    _total$.value = response$.value.length;
+                    break;
+
+                case 'total' in response$.value && 'records' in response$.value:
+                    _dataList$.value = response$.value.records ?? [];
+                    _total$.value = response$.value.total ?? 0;
+                    break;
+            }
+
+            _dataList$.value.forEach((row) => {
+                row.isCheck = false;
+
+                Object.keys(row).forEach((key) => {
+                    const varGridDetail = kgVar.getVarGridDetail({ varName: key });
+
+                    switch (varGridDetail?.display_type) {
+                        case KG__VAR_GRID_DETAIL__DISPLAY_TYPE.PROGRESS: {
+                            row[key] = row[key] ?? 0;
+                            break;
+                        }
+
+                        default: {
+                            row[key] = row[key];
+                            break;
+                        }
+                    }
+                });
+            });
+
+            return { dataList$: _dataList$, total$: _total$ };
+        }
+
+        /**
+         * 请求系统描述数据.
+         */
+        async function requestDescriptionList(): Promise<void> {
+            let descriptionBatchQueryList: Array<DescriptionBatchQuery & { codeValue: string }> = (kgVar.currentVarGridDetails.value
+                ?.map((varGridDetail) => {
+                    const properties = KgCoreUtil.tryParseJSON<IKgVarGridDetailDisplayTypeProperties['DESC']>(varGridDetail.display_type_properties);
+
+                    // 描述组名为空, 或者没有启用延迟请求,
+                    if (!properties.description?.codeName || properties.description?.isDefer !== true) {
+                        return null;
+                    }
+
+                    const vname = varGridDetail.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.kgTable02.dataList) {
+                for (let descriptionBatchQuery of descriptionBatchQueryList) {
+                    let codeName = descriptionBatchQuery.codeName;
+                    let codeValue = descriptionBatchQuery.codeValue;
+
+                    try {
+                        codeValue = eval(descriptionBatchQuery.codeValue);
+                    } catch {
+                        ____ERROR____('KgTable02.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] });
+                });
+            }
+        }
+
+        /**
+         * 排序发生变更.
+         */
+        function onSortChange(param: VxeTableDefines.SortChangeEventParams) {
+            sortParam$.value.field = param.field;
+            sortParam$.value.order = param.order;
+
+            request({ isSearchFirstPage: true });
+        }
+
+        /**
+         * 全选发生变更.
+         */
+        function onCheckboxAll(param: VxeTableDefines.CheckboxAllEventParams) {}
+
+        /**
+         * 勾选发生变更.
+         */
+        function onCheckboxChange(param: VxeTableDefines.CheckboxChangeEventParams) {}
+
+        /**
+         * 拖拽列宽发生变更.
+         */
+        function onColumnResizableChange(param: VxeTableDefines.ResizableChangeEventParams) {
+            kgVar.patchVarGridDetail({ properties: { width: param.resizeWidth.toFixed(0) }, varName: param.column.field });
+        }
+
+        //endregion
+
+        //region LIFECYCLE
+        //----------------------------------------------------------------------------------------------------
+        onMounted(() => {});
+
+        onUnmounted(() => {
+            kgVar.kgTable02.dispose();
+        });
+
+        //endregion
+
+        interface RowVO {
+            id: number;
+            [key: string]: string | number;
+        }
+
+        return () => {
+            return (
+                <div
+                    ref={kgTableRef}
+                    kg-form-id={kgVar.fid}
+                    class={class$$.value}
+                >
+                    <div class={'kg-table02-top'}>
+                        <Table
+                            ref={tableRef}
+                            border={'default'}
+                            cellConfig={{ height: 32, padding: false }}
+                            checkboxConfig={{ checkField: 'isCheck', highlight: true, trigger: 'default' }}
+                            columnConfig={{ resizable: true }}
+                            data={kgVar.kgTable02.dataList}
+                            footerMethod={(param) => {
+                                return [
+                                    param.columns.map((column, index) => {
+                                        const vname = column.field;
+                                        const varGridDetail = vname ? kgVar.getVarGridDetail({ varName: vname }) : null;
+
+                                        return kgVar.slots.value?.KgTable?.['summary.bodyCell']?.({
+                                            column: column,
+                                            index: index,
+                                            varGridDetail: varGridDetail,
+                                        });
+                                    }),
+                                ];
+                            }}
+                            height="100%"
+                            loading={kgVar.kgTable02.isRequesting}
+                            round={true}
+                            rowConfig={{ isHover: true }}
+                            showFooterOverflow={true}
+                            showFooter={!!kgVar.slots.value?.KgTable?.['summary.bodyCell']}
+                            showHeaderOverflow={true}
+                            showOverflow={'title'}
+                            size={'mini'}
+                            sortConfig={{ remote: true, trigger: 'cell' }}
+                            virtualXConfig={{ enabled: true, gt: 0 }}
+                            virtualYConfig={{ enabled: true, gt: 0 }}
+                            onCheckboxAll={onCheckboxAll}
+                            onCheckboxChange={onCheckboxChange}
+                            onColumnResizableChange={onColumnResizableChange}
+                            onSortChange={onSortChange}
+                        >
+                            {{
+                                default: () => {
+                                    return [
+                                        // 勾选列,
+                                        <Column
+                                            type={'checkbox'}
+                                            fixed={'left'}
+                                            align={'center'}
+                                            resizable={false}
+                                            width={KG_TABLE_TD_CHECK_WIDTH}
+                                        />,
+                                        // 序号列,
+                                        <Column
+                                            type={'seq'}
+                                            fixed={'left'}
+                                            align={'center'}
+                                            resizable={false}
+                                            width={KG_TABLE_TD_INDEX_WIDTH}
+                                        >
+                                            {{ header: () => <KgTableSetting kgIsDisable={props.kgIsDisable} /> }}
+                                        </Column>,
+                                        //
+                                        ...columnList$$.value.map((i) => {
+                                            return (
+                                                <Column
+                                                    field={i.field}
+                                                    title={i.title}
+                                                    width={i.width}
+                                                    sortable={true}
+                                                >
+                                                    {{
+                                                        default: (param: VxeColumnSlotTypes.DefaultSlotParams) => (
+                                                            <KgTable02BodyCell
+                                                                column={param.column}
+                                                                row={param.row}
+                                                            />
+                                                        ),
+                                                    }}
+                                                </Column>
+                                            );
+                                        }),
+                                    ];
+                                },
+                                loading: () => (
+                                    <div style={{ alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
+                                        <Icon
+                                            icon="eos-icons:bubble-loading"
+                                            width={22}
+                                            height={22}
+                                        />
+                                    </div>
+                                ),
+                            }}
+                        </Table>
+                    </div>
+
+                    <div class={kgTableButtomClass$$.value}>
+                        <div class="left"></div>
+
+                        <div class="right">
+                            <Pagination
+                                size={'default'}
+                                current={pageParam$.value.pageIndex}
+                                pageSize={pageParam$.value.pageSize}
+                                pageSizeOptions={kgVar.kgTable02.pageSizeOptionList$$.value.map((i) => String(i))}
+                                total={pageParam$.value.total}
+                                showSizeChanger={true}
+                                showQuickJumper={false}
+                                hideOnSinglePage={false}
+                                locale={{ page: '' }}
+                                disabled={isBottomRightDisable$$.value}
+                                showTotal={(total, range) =>
+                                    kg.t('kg.KgTable.totalText', {
+                                        from: range[0],
+                                        to: range[1],
+                                        total: total,
+                                    })
+                                }
+                                onChange={(pageIndex, pageSize) => onPageChange(pageIndex, pageSize)}
+                            />
+                        </div>
+                    </div>
+                </div>
+            );
+        };
+    },
+});