@kengic/vue 0.30.1-beta.96 → 0.31.0

package/component/KgSubmit/KgSubmit.tsx

@@ -1,1132 +0,0 @@
-import { Icon } from '@iconify/vue';
-import { Button, Divider, Menu, notification, Row, Spin } from 'ant-design-vue';
-import { Key } from 'ant-design-vue/es/_util/type';
-import { SelectInfo } from 'ant-design-vue/lib/menu/src/interface';
-import dayjs from 'dayjs';
-import { isFunction, sortBy } from 'lodash-es';
-import { computed, defineComponent, ExtractPropTypes, inject, nextTick, onUnmounted, PropType, ref, toRaw, watch } from 'vue';
-import { VarSubmitDetail } from '../../api/WMS/models';
-import { useKg } from '../../config';
-import { KG, KG__VAR_SUBMIT_CONFIG__DISPLAY_TYPE, KG__VAR_SUBMIT_CONFIG__LABEL_COLUMN_UNIT, KG__VAR_SUBMIT_CONFIG__LAYOUT, KG_FORM_CONTEXT } from '../../model';
-import { httpClient, IRequestConfig } from '../../service';
-import { KgUtil } from '../../util';
-import { KgForm, KgFormItem } from '../KgForm';
-import { IKgFormItemSlotControlParameter, IKgFormItemSlotControlRightParameter } from '../KgForm.Item/KgForm.Item.model';
-import { KgModal } from '../KgModal';
-import { useKgVar } from '../KgVar';
-import {
-    emit,
-    IKgSubmit$EventListenerParameter$onAfterValidate,
-    IKgSubmit$EventListenerParameter$onBeforeCancel,
-    IKgSubmit$EventListenerParameter$onBeforeOk,
-    IKgSubmit$EventListenerParameter$onBeforeOpen,
-    IKgSubmit$EventListenerParameter$onBeforeRequest,
-    IKgSubmit$EventListenerParameter$onCancel,
-    IKgSubmit$EventListenerParameter$onClose,
-    IKgSubmit$EventListenerParameter$onError,
-    IKgSubmit$EventListenerParameter$onOk,
-    IKgSubmit$EventListenerParameter$onOpen,
-} from './KgSubmit.event';
-import { SUBMIT_DEFAULT_MIN_WIDTH } from './KgSubmit.model';
-import { _useClass, _useDefaultWidth, _useResizeObserver, _useTitle, useFormModel } from './KgSubmit.service';
-import './KgSubmit.less';
-
-export const getProps = () => ({
-    /**
-     * 自定义的样式类名, 会附加到组件默认的样式类名后面.
-     */
-    kgClass: String as PropType<string>,
-});
-
-export type KgSubmitProps = Partial<ExtractPropTypes<ReturnType<typeof getProps>>>;
-
-// 表单提交弹窗
-export default defineComponent({
-    name: 'KgSubmit',
-    props: getProps(),
-    setup(props) {
-        const $dayjs = inject('$dayjs', dayjs);
-        const kgSlots = inject(KG.DI.KG_VAR.KG_SLOTS, null);
-        const kgProps = inject(KG.DI.KG_VAR.KG_PROPS, null);
-
-        const kg = useKg();
-        const kgVar = useKgVar();
-
-        kgVar.kgSubmit.onOkButtonClick(async () => {
-            await onOk();
-            return false;
-        });
-        kgVar.kgSubmit.onCancelButtonClick(async () => {
-            await onCancel();
-            return false;
-        });
-
-        useFormModel();
-
-        //region DATA
-        //----------------------------------------------------------------------------------------------------
-        const selectedData$$ = computed(() => {
-            if (kgVar.varGridConfig$Props$$.value?.componentVersion === '02') {
-                return kgVar.kgTable02.selectedData;
-            }
-
-            return kgVar.kgTable.selectedRow.value;
-        });
-
-        const selectedDataList$$ = computed(() => {
-            if (kgVar.varGridConfig$Props$$.value?.componentVersion === '02') {
-                return kgVar.kgTable02.selectedDataList;
-            }
-
-            return kgVar.kgTable.selectedRows.value;
-        });
-
-        /**
-         * <p>当前是否是「删除」操作, 并且没有表单字段.</p>
-         * <p>大多数情况下, 删除时只会有一个确认弹窗, 弹窗中显示提示消息'是否确认删除', 此时没有任何表单字段,</p>
-         * <p>但是有的时候, 删除时会有一些表单字段, 需要像「编辑」时一样, 填写一些数据然后提交,</p>
-         */
-        const isDeletingWithoutSubmitDetail = computed(() => kgVar.isDeleting.value && (kgVar.kgSubmit.currentVarSubmitDetailsForKey.value?.length ?? 0) === 0 && (kgVar.kgSubmit.currentVarSubmitDetailsForNotKey.value?.length ?? 0) === 0);
-
-        /**
-         * 是否正在请求接口.
-         */
-        const isRequesting = computed<boolean>(
-            () => kgVar.kgButton.isCurrentButtonRequesting || !!kgVar.isCreatingRequesting$$.value || !!kgVar.isUpdatingRequesting$$.value || !!kgVar.isCopyingRequesting$$.value || !!kgVar.isDeletingRequesting$$.value,
-        );
-
-        /** 取消按钮是否禁用. */
-        const isButtonCancelDisabled = computed<boolean>(() => kgVar.kgSubmit.isLoading.value || isRequesting.value);
-        /** 确定按钮是否禁用. */
-        const isButtonOkDisabled = computed<boolean>(() => kgVar.kgSubmit.isLoading.value || isRequesting.value);
-
-        /** 是否默认全屏. */
-        const isDefaultFullscreen = ref<boolean>(false);
-
-        const minWidth$$ = computed<number>(() => {
-            if (isDeletingWithoutSubmitDetail.value) {
-                return SUBMIT_DEFAULT_MIN_WIDTH;
-            }
-
-            return kgVar.kgSubmit.currentVarSubmitConfig.value?.min_width!;
-        });
-
-        const maxWidth$$ = computed<number | undefined>(() => {
-            if (isDeletingWithoutSubmitDetail.value) {
-                return SUBMIT_DEFAULT_MIN_WIDTH;
-            }
-
-            return kgVar.kgSubmit.currentVarSubmitConfig.value?.max_width ?? undefined;
-        });
-
-        const minHeight$$ = computed<number | undefined>(() => {
-            if (isDeletingWithoutSubmitDetail.value) {
-                return 154;
-            }
-
-            return undefined;
-        });
-
-        const maxHeight$$ = computed<number | undefined>(() => {
-            if (isDeletingWithoutSubmitDetail.value) {
-                return 154;
-            }
-
-            return undefined;
-        });
-
-        const getShowFullscreenButton = computed<boolean | undefined>(() => {
-            if (isDeletingWithoutSubmitDetail.value) {
-                return false;
-            }
-
-            return undefined;
-        });
-
-        const kgFormRef = ref<HTMLDivElement | null>(null);
-        _useResizeObserver(kgFormRef);
-        const { title } = _useTitle();
-
-        /**
-         * 宽度.
-         */
-        const width$$ = computed<string | number>(() => {
-            // 删除, 并且没有表单字段, 固定宽度
-            if (isDeletingWithoutSubmitDetail.value) {
-                return SUBMIT_DEFAULT_MIN_WIDTH;
-            }
-
-            return getDefaultWidth.value;
-        });
-
-        /**
-         * 是否显示提交弹窗.
-         */
-        const isVisible = computed<boolean>(() => {
-            // 宽度为 0 时隐藏, 避免屏闪
-            if (width$$.value === 0) {
-                return false;
-            }
-
-            return true;
-        });
-
-        const { class$$, wrapClass$$ } = _useClass(props);
-        const { getDefaultWidth } = _useDefaultWidth();
-
-        const labelCol$$ = computed(() => {
-            switch (kgVar.kgSubmit.currentVarSubmitConfig$Layout.value) {
-                case KG__VAR_SUBMIT_CONFIG__LAYOUT.HORIZONTAL: {
-                    switch (kgVar.kgSubmit.currentVarSubmitConfig.value?.label_col_unit) {
-                        case KG__VAR_SUBMIT_CONFIG__LABEL_COLUMN_UNIT.SPAN:
-                            return { span: kgVar.kgSubmit.currentVarSubmitConfig.value?.label_col! };
-
-                        case KG__VAR_SUBMIT_CONFIG__LABEL_COLUMN_UNIT.PX:
-                        default:
-                            return { style: { width: `${kgVar.kgSubmit.currentVarSubmitConfig.value?.label_col}px` } };
-                    }
-                }
-
-                default:
-                    return undefined;
-            }
-        });
-        const wrapperCol$$ = computed(() => {
-            switch (kgVar.kgSubmit.currentVarSubmitConfig$Layout.value) {
-                case KG__VAR_SUBMIT_CONFIG__LAYOUT.HORIZONTAL: {
-                    switch (kgVar.kgSubmit.currentVarSubmitConfig.value?.label_col_unit) {
-                        case KG__VAR_SUBMIT_CONFIG__LABEL_COLUMN_UNIT.SPAN:
-                            return { span: 24 - kgVar.kgSubmit.currentVarSubmitConfig.value?.label_col! };
-
-                        default:
-                            return undefined;
-                    }
-                }
-
-                default:
-                    return undefined;
-            }
-        });
-
-        /**
-         * 确定按钮上的文本.
-         */
-        const okButtonText$$ = computed<string>(() => {
-            if (kgVar.kgSubmit.currentVarSubmitConfig$Props.value.okButton?.textVarName) {
-                return kgVar.t2(kgVar.kgSubmit.currentVarSubmitConfig$Props.value.okButton?.textVarName);
-            }
-
-            return kg.t('kg.ok', {}, '确定');
-        });
-
-        /**
-         * 取消按钮上的文本.
-         */
-        const cancelButtonText$$ = computed<string>(() => {
-            if (kgVar.kgSubmit.currentVarSubmitConfig$Props.value.cancelButton?.textVarName) {
-                return kgVar.t2(kgVar.kgSubmit.currentVarSubmitConfig$Props.value.cancelButton?.textVarName);
-            }
-
-            return kg.t('kg.cancel', {}, '取消');
-        });
-
-        /** 当前选中的分组. */
-        const sectionSelectedKeys$$ = ref<Array<Key>>([kgVar.kgSubmit.currentVarSubmitDetailSectionsForVisible.value[0] ?? '']);
-
-        //endregion
-
-        //region WATCH
-        //----------------------------------------------------------------------------------------------------
-        //region isVisible
-        //----------------------------------------------------------------------------------------------------
-        watch(
-            isVisible,
-            (visible, oldVisible) => {
-                if (visible === true) {
-                    onOpen();
-                }
-
-                // oldVisible 为 true, 并且 visible 为 false, 才表示是由打开状态变成关闭状态
-                if (oldVisible === true && visible === false) {
-                    onClose();
-                }
-            },
-            { immediate: true },
-        );
-        //endregion
-        //endregion
-
-        //region FUNCTION
-        //----------------------------------------------------------------------------------------------------
-        function getContainer() {
-            if (kgVar.kgSubmit.currentVarSubmitConfig$DisplayType.value === KG__VAR_SUBMIT_CONFIG__DISPLAY_TYPE.INLINE) {
-                const target = kgVar.kgSubmit.currentVarSubmitConfig$Props.value.displayType?.INLINE?.target;
-                if (target) {
-                    return document.querySelector<HTMLElement>(target) ?? document.body;
-                }
-            }
-
-            return document.body;
-        }
-
-        /** 打开. */
-        async function onOpen(): Promise<void> {
-            const eventResult$onBeforeOpen = await emit<IKgSubmit$EventListenerParameter$onBeforeOpen>({
-                id: kgVar.fid,
-                event: 'onBeforeOpen',
-                parameter: {
-                    isCopying: kgVar.isCopying.value,
-                    isCreating: kgVar.isCreating.value,
-                    isDeleting: kgVar.isDeleting.value,
-                    isUpdating: kgVar.isUpdating.value,
-                    row: selectedData$$.value,
-                },
-            });
-            if (eventResult$onBeforeOpen) {
-                return;
-            }
-
-            return new Promise((resolve, reject) => {
-                // 弹窗打开之后, 等待表单数据对象初始完成, 然后触发 open 事件,
-                const stopWatch = watch(
-                    kgVar.kgSubmit.formModel,
-                    async (formModel) => {
-                        if (formModel && Object.keys(formModel).length > 0) {
-                            setTimeout(() => stopWatch());
-
-                            const eventResult$onOpen = await emit<IKgSubmit$EventListenerParameter$onOpen>({
-                                id: kgVar.fid,
-                                event: 'onOpen',
-                                parameter: {
-                                    isCopying: kgVar.isCopying.value,
-                                    isCreating: kgVar.isCreating.value,
-                                    isDeleting: kgVar.isDeleting.value,
-                                    isUpdating: kgVar.isUpdating.value,
-                                    model: kgVar.kgSubmit.formModel,
-                                    row: selectedData$$.value,
-                                },
-                            });
-
-                            resolve();
-                        }
-                    },
-                    { immediate: true },
-                );
-
-                // 全屏,
-                if (kgVar.kgSubmit.currentVarSubmitConfig.value?.dft_fullscreen_flg === 1 && !isDeletingWithoutSubmitDetail.value) {
-                    isDefaultFullscreen.value = true;
-                }
-
-                if (kgVar.kgSubmit.currentVarSubmitConfig$DisplayType.value === KG__VAR_SUBMIT_CONFIG__DISPLAY_TYPE.INLINE) {
-                    isDefaultFullscreen.value = true;
-                }
-            });
-        }
-
-        /** 关闭. */
-        async function onClose() {
-            await emit<IKgSubmit$EventListenerParameter$onClose>({ id: kgVar.fid, event: 'onClose', parameter: null });
-        }
-
-        /** 取消. */
-        async function onCancel() {
-            const eventResult$onBeforeCancel = await emit<IKgSubmit$EventListenerParameter$onBeforeCancel>({
-                id: kgVar.fid,
-                event: 'onBeforeCancel',
-                parameter: {},
-            });
-            if (eventResult$onBeforeCancel) {
-                return;
-            }
-
-            await kgVar.kgButton.setCurrentButton(null);
-
-            const eventResult$onCancel = await emit<IKgSubmit$EventListenerParameter$onCancel>({ id: kgVar.fid, event: 'onCancel', parameter: {} });
-        }
-
-        /** 提交. */
-        async function onOk() {
-            try {
-                // 表单尚未加载完成
-                if (!kgVar.kgSubmit.formRef.value) {
-                    return;
-                }
-
-                const eventResult$onBeforeOk = await emit<IKgSubmit$EventListenerParameter$onBeforeOk>({
-                    id: kgVar.fid,
-                    event: 'onBeforeOk',
-                    parameter: {
-                        model: kgVar.kgSubmit.formModel,
-                    },
-                });
-                if (eventResult$onBeforeOk) {
-                    return;
-                }
-
-                await nextTick();
-
-                // 如果在 beforeOk 事件回调中修改了表单数据, 则第一次表单验证会不通过, 因此需要重新验证一次
-                try {
-                    await kgVar.kgSubmit.formRef.value?.validate();
-                } catch (e) {
-                    KgUtil.throwNotFormValidationError({ error: e, formID: kgVar.fid, isShowFormValidationErrorMessage: false });
-                }
-
-                await kgVar.kgSubmit.formRef.value?.validate();
-
-                const eventResult$onAfterValidate = await emit<IKgSubmit$EventListenerParameter$onAfterValidate>({
-                    id: kgVar.fid,
-                    event: 'onAfterValidate',
-                    parameter: {
-                        isCopying: kgVar.isCopying.value,
-                        isCreating: kgVar.isCreating.value,
-                        isDeleting: kgVar.isDeleting.value,
-                        isUpdating: kgVar.isUpdating.value,
-                        model: kgVar.kgSubmit.formModel,
-                        row: selectedData$$.value,
-                        rows: selectedDataList$$.value,
-                    },
-                });
-                if (eventResult$onAfterValidate) {
-                    return;
-                }
-
-                switch (true) {
-                    case kgVar.isCreating.value:
-                        await doCreate();
-                        break;
-
-                    case kgVar.isUpdating.value:
-                        await doUpdate();
-                        break;
-
-                    case kgVar.isCopying.value:
-                        await doCopy();
-                        break;
-
-                    case kgVar.isDeleting.value:
-                        await doDelete();
-                        break;
-
-                    default: {
-                        await doOther();
-                        break;
-                    }
-                }
-            } catch (e) {
-                KgUtil.throwNotFormValidationError({ error: e, formID: kgVar.fid });
-            }
-        }
-
-        /** 创建. */
-        async function doCreate() {
-            kgVar.store.setIsCreatingRequesting(kgVar.fid, true);
-
-            try {
-                const requestUrl = kgVar.varButtonCreate.value?.cmd;
-
-                const requestMethod = (kgVar.varButtonCreate.value?.cmd_method as any) ?? 'POST';
-
-                let paramRecord$ = ref(KgUtil.parseParams(KgUtil.parseRequestParamsToJSON(kgVar.varButtonCreate.value?.cmd_prm ?? ''), kgVar.fid, $dayjs));
-                let data$ = ref<Record<string, any>>({
-                    ...KgUtil.parseParams(toRaw(kgVar.kgSubmit.formModel.value), kgVar.fid, $dayjs),
-                    // 将表格中当前勾选的行通过下面这个参数传给后端接口,
-                    selectedRows: selectedDataList$$.value ?? [],
-                });
-
-                const requestConfig: IRequestConfig = {
-                    url: requestUrl!,
-                    method: requestMethod,
-                    params: paramRecord$.value,
-                    data: data$.value,
-                    headers: {
-                        [KG.HTTP_HEADER__KG_BUTTON_VAR_NAME]: kgVar.varButtonCreate.value?.var_nam ?? '',
-                        [KG.HTTP_HEADER__KG_FORM_ID]: kgVar.fid,
-                    },
-                };
-
-                const eventResult$onBeforeRequest = await emit<IKgSubmit$EventListenerParameter$onBeforeRequest>({
-                    event: 'onBeforeRequest',
-                    id: kgVar.fid,
-                    parameter: {
-                        data: data$,
-                        isCopying: kgVar.isCopying.value,
-                        isCreating: kgVar.isCreating.value,
-                        isDeleting: kgVar.isDeleting.value,
-                        isUpdating: kgVar.isUpdating.value,
-                        model: kgVar.kgSubmit.formModel,
-                        params: paramRecord$,
-                        requestConfig: requestConfig,
-                        row: kgVar.kgTable.selectedFirstRow.value,
-                        rows: selectedDataList$$.value,
-                    },
-                });
-                if (eventResult$onBeforeRequest) {
-                    return;
-                }
-
-                if (!requestConfig.url) {
-                    notification.error({ message: kg.t('kg.KgButton.noApiUrl', {}, '按钮没有配置接口地址') });
-                    throw new Error('没有配置接口地址');
-                }
-
-                const result = await httpClient().request(requestConfig);
-                if (kgVar.varButtonCreate.value?.show_success_message_flg !== 0) {
-                    notification.success({ message: title.value + kg.t('kg.succeed', {}, '成功') });
-                }
-
-                await emit<IKgSubmit$EventListenerParameter$onOk>({
-                    id: kgVar.fid,
-                    event: 'onOk',
-                    parameter: {
-                        isCopying: false,
-                        isCreating: true,
-                        isDeleting: false,
-                        isUpdating: false,
-                        model: kgVar.kgSubmit.formModel,
-                        result: result,
-                        row: kgVar.kgTable.selectedFirstRow.value,
-                    },
-                });
-
-                // 关闭弹窗
-                if (kgVar.kgSubmit.currentVarSubmitConfig$Props.value.isCloseModalAfterOk !== false) {
-                    kgVar.kgButton.setCurrentButton(null);
-                }
-
-                // 重新查询列表数据
-                if (kgVar.varButtonCreate.value?.reload_all_after_done_flg !== 0) {
-                    kgVar.kgSearch.search({ isSearchFirstPage: true });
-                }
-            } catch (e) {
-                console.error(e);
-                emit<IKgSubmit$EventListenerParameter$onError>({
-                    id: kgVar.fid,
-                    event: 'onError',
-                    parameter: e as any,
-                });
-            } finally {
-                kgVar.store.setIsCreatingRequesting(kgVar.fid, false);
-            }
-        }
-
-        /** 更新. */
-        async function doUpdate() {
-            try {
-                kgVar.store.setIsUpdatingRequesting(kgVar.fid, true);
-
-                const requestUrl = kgVar.varButtonUpdate.value?.cmd;
-                const requestMethod = (kgVar.varButtonUpdate.value?.cmd_method as any) ?? 'POST';
-
-                let paramRecord$ = ref(KgUtil.parseParams(KgUtil.parseRequestParamsToJSON(kgVar.varButtonUpdate.value?.cmd_prm ?? ''), kgVar.fid, $dayjs));
-                let data$ = ref<Record<string, any>>({
-                    ...KgUtil.parseParams(toRaw(kgVar.kgSubmit.formModel.value), kgVar.fid, $dayjs),
-                    // 将表格中当前勾选的行通过下面这个参数传给后端接口,
-                    selectedRows: selectedDataList$$.value ?? [],
-                });
-
-                const requestConfig: IRequestConfig = {
-                    url: requestUrl!,
-                    method: requestMethod,
-                    params: paramRecord$.value,
-                    data: data$.value,
-                    headers: {
-                        [KG.HTTP_HEADER__KG_BUTTON_VAR_NAME]: kgVar.varButtonUpdate.value?.var_nam ?? '',
-                        [KG.HTTP_HEADER__KG_FORM_ID]: kgVar.fid,
-                    },
-                };
-
-                const eventResult$onBeforeRequest = await emit<IKgSubmit$EventListenerParameter$onBeforeRequest>({
-                    id: kgVar.fid,
-                    event: 'onBeforeRequest',
-                    parameter: {
-                        data: data$,
-                        isCopying: kgVar.isCopying.value,
-                        isCreating: kgVar.isCreating.value,
-                        isDeleting: kgVar.isDeleting.value,
-                        isUpdating: kgVar.isUpdating.value,
-                        model: kgVar.kgSubmit.formModel,
-                        params: paramRecord$,
-                        requestConfig: requestConfig,
-                        row: selectedData$$.value,
-                        rows: selectedDataList$$.value,
-                    },
-                });
-                if (eventResult$onBeforeRequest) {
-                    return;
-                }
-
-                if (!requestConfig.url) {
-                    notification.error({ message: kg.t('kg.KgButton.noApiUrl', {}, '按钮没有配置接口地址') });
-                    throw new Error('没有配置接口地址');
-                }
-
-                const result = await httpClient().request(requestConfig);
-
-                if (kgVar.varButtonUpdate.value?.show_success_message_flg !== 0) {
-                    notification.success({
-                        message:
-                            (() => {
-                                const text = kgVar.t2(kgVar.varButtonUpdate.value?.var_nam);
-
-                                if (text !== kgVar.varButtonUpdate.value?.var_nam) {
-                                    return text;
-                                } else {
-                                    return kg.t('kg.update', {}, '更新');
-                                }
-                            })() + kg.t('succeeded', {}, '成功'),
-                    });
-                }
-
-                await emit<IKgSubmit$EventListenerParameter$onOk>({
-                    id: kgVar.fid,
-                    event: 'onOk',
-                    parameter: {
-                        isCopying: false,
-                        isCreating: false,
-                        isDeleting: false,
-                        isUpdating: true,
-                        model: kgVar.kgSubmit.formModel,
-                        result: result,
-                        row: kgVar.kgTable.selectedFirstRow.value,
-                    },
-                });
-
-                if (kgVar.kgSubmit.currentVarSubmitConfig$Props.value.isCloseModalAfterOk !== false) {
-                    // 关闭弹窗
-                    kgVar.kgButton.setCurrentButton(null);
-                }
-
-                // 重新查询列表数据
-                if (kgVar.varButtonUpdate.value?.reload_all_after_done_flg !== 0) {
-                    kgVar.kgSearch.search({ isPreserveSelectedRows: true });
-                }
-            } catch (e) {
-                console.error(e);
-                emit<IKgSubmit$EventListenerParameter$onError>({ id: kgVar.fid, event: 'onError', parameter: e as any });
-            } finally {
-                kgVar.store.setIsUpdatingRequesting(kgVar.fid, false);
-            }
-        }
-
-        /** 复制. */
-        async function doCopy() {
-            try {
-                kgVar.store.setIsCopyingRequesting(kgVar.fid, true);
-
-                const requestUrl = kgVar.varButtonCopy.value?.cmd;
-                const requestMethod = (kgVar.varButtonCopy.value?.cmd_method as any) ?? 'POST';
-
-                let paramRecord$ = ref(KgUtil.parseParams(KgUtil.parseRequestParamsToJSON(kgVar.varButtonCopy.value?.cmd_prm ?? ''), kgVar.fid, $dayjs));
-                let data$ = ref<Record<string, any>>({
-                    ...KgUtil.parseParams({ ...(kgVar.kgTable.selectedFirstRow.value ?? {}), ...toRaw(kgVar.kgSubmit.formModel.value) }, kgVar.fid, $dayjs),
-                    // 将表格中当前勾选的行通过下面这个参数传给后端接口,
-                    selectedRows: selectedDataList$$.value ?? [],
-                });
-
-                // 清空 ID 字段
-                if (kgVar.kgSubmit.currentVarSubmitConfig.value?.set_id_to_null_flag !== 0) {
-                    delete data$.value.id;
-                }
-
-                const requestConfig: IRequestConfig = {
-                    url: requestUrl!,
-                    method: requestMethod,
-                    params: paramRecord$.value,
-                    data: data$.value,
-                    headers: {
-                        [KG.HTTP_HEADER__KG_BUTTON_VAR_NAME]: kgVar.varButtonCopy.value?.var_nam ?? '',
-                        [KG.HTTP_HEADER__KG_FORM_ID]: kgVar.fid,
-                    },
-                };
-                const eventResult$onBeforeRequest = await emit<IKgSubmit$EventListenerParameter$onBeforeRequest>({
-                    id: kgVar.fid,
-                    event: 'onBeforeRequest',
-                    parameter: {
-                        isCreating: kgVar.isCreating.value,
-                        isUpdating: kgVar.isUpdating.value,
-                        isCopying: kgVar.isCopying.value,
-                        isDeleting: kgVar.isDeleting.value,
-                        row: selectedData$$.value,
-                        rows: selectedDataList$$.value,
-                        model: kgVar.kgSubmit.formModel,
-                        params: paramRecord$,
-                        requestConfig: requestConfig,
-                        data: data$,
-                    },
-                });
-                if (eventResult$onBeforeRequest) {
-                    return;
-                }
-
-                if (!requestConfig.url) {
-                    notification.error({ message: kg.t('kg.KgButton.noApiUrl', {}, '按钮没有配置接口地址') });
-                    throw new Error('没有配置接口地址');
-                }
-
-                const result = await httpClient().request(requestConfig);
-
-                if (kgVar.varButtonCopy.value?.show_success_message_flg !== 0) {
-                    notification.success({ message: kg.t('kg.copySuccess', {}, '复制成功') });
-                }
-
-                await emit<IKgSubmit$EventListenerParameter$onOk>({
-                    id: kgVar.fid,
-                    event: 'onOk',
-                    parameter: {
-                        isCopying: true,
-                        isCreating: false,
-                        isDeleting: false,
-                        isUpdating: false,
-                        model: kgVar.kgSubmit.formModel,
-                        result: result,
-                        row: kgVar.kgTable.selectedFirstRow.value,
-                    },
-                });
-
-                if (kgVar.kgSubmit.currentVarSubmitConfig$Props.value.isCloseModalAfterOk !== false) {
-                    // 关闭弹窗
-                    kgVar.kgButton.setCurrentButton(null);
-                }
-
-                if (kgVar.varButtonCopy.value?.reload_all_after_done_flg !== 0) {
-                    // 重新查询列表数据
-                    kgVar.kgSearch.search({ isSearchFirstPage: true });
-                }
-            } catch (e) {
-                console.error(e);
-                emit<IKgSubmit$EventListenerParameter$onError>({ id: kgVar.fid, event: 'onError', parameter: e as any });
-            } finally {
-                kgVar.store.setIsCopyingRequesting(kgVar.fid, false);
-            }
-        }
-
-        /** 删除. */
-        async function doDelete() {
-            try {
-                kgVar.store.setIsDeletingRequesting(kgVar.fid, true);
-
-                const requestUrl = kgVar.varButtonDelete.value?.cmd;
-                const requestMethod = (kgVar.varButtonDelete.value?.cmd_method as any) ?? 'POST';
-
-                let paramRecord$ = ref(KgUtil.parseParams(KgUtil.parseRequestParamsToJSON(kgVar.varButtonDelete.value?.cmd_prm ?? ''), kgVar.fid, $dayjs));
-                let data$ = ref<Array<Record<string, any>>>(selectedDataList$$.value ?? []);
-
-                //region 如果 del_param_clm 为特殊值 '__kg__new_delete_param', 表示要将勾选的多行数据作为列表传给接口,
-                //       TODO 等到所有的删除接口的参数都改造成列表之后, 就可以删除 del_param_clm 字段, 以及下面这段代码,
-                //----------------------------------------------------------------------------------------------------
-                if (kgVar.varButtonDelete.value?.del_param_clm !== '__kg__new_delete_param') {
-                    paramRecord$ = ref({
-                        ids: selectedDataList$$.value?.map((i) => i[kgVar.varButtonDelete.value?.del_param_clm ?? 'id'] ?? '') ?? [],
-                    });
-                }
-                //endregion
-
-                const requestConfig: IRequestConfig = {
-                    url: requestUrl!,
-                    method: requestMethod,
-                    params: paramRecord$.value,
-                    data: data$.value,
-                    headers: {
-                        [KG.HTTP_HEADER__KG_BUTTON_VAR_NAME]: kgVar.varButtonDelete.value?.var_nam ?? '',
-                        [KG.HTTP_HEADER__KG_FORM_ID]: kgVar.fid,
-                    },
-                };
-
-                const eventResult$onBeforeRequest = await emit<IKgSubmit$EventListenerParameter$onBeforeRequest>({
-                    event: 'onBeforeRequest',
-                    id: kgVar.fid,
-                    parameter: {
-                        data: data$,
-                        isCopying: kgVar.isCopying.value,
-                        isCreating: kgVar.isCreating.value,
-                        isDeleting: kgVar.isDeleting.value,
-                        isUpdating: kgVar.isUpdating.value,
-                        model: kgVar.kgSubmit.formModel,
-                        params: paramRecord$,
-                        requestConfig: requestConfig,
-                        row: kgVar.kgTable.selectedFirstRow.value,
-                        rows: selectedDataList$$.value,
-                    },
-                });
-                if (eventResult$onBeforeRequest) {
-                    return;
-                }
-
-                if (!requestConfig.url) {
-                    notification.error({ message: kg.t('kg.KgButton.noApiUrl', {}, '按钮没有配置接口地址') });
-                    throw new Error('没有配置接口地址');
-                }
-
-                const result = await httpClient().request(requestConfig, { joinParamsToUrl: true });
-
-                if (kgVar.varButtonDelete.value?.show_success_message_flg !== 0) {
-                    notification.success({ message: kg.t('kg.deleteSuccess', {}, '删除成功') });
-                }
-
-                await emit<IKgSubmit$EventListenerParameter$onOk>({
-                    id: kgVar.fid,
-                    event: 'onOk',
-                    parameter: {
-                        isCopying: false,
-                        isCreating: false,
-                        isDeleting: true,
-                        isUpdating: false,
-                        model: kgVar.kgSubmit.formModel,
-                        result: result,
-                        row: kgVar.kgTable.selectedFirstRow.value,
-                    },
-                });
-
-                if (kgVar.kgSubmit.currentVarSubmitConfig$Props.value.isCloseModalAfterOk !== false) {
-                    // 关闭弹窗
-                    kgVar.kgButton.setCurrentButton(null);
-                }
-
-                // 重新查询表格数据
-                if (kgVar.varButtonDelete.value?.reload_all_after_done_flg !== 0) {
-                    kgVar.kgSearch.search({ isSearchFirstPage: true });
-                }
-            } catch (e) {
-                console.error(e);
-                emit<IKgSubmit$EventListenerParameter$onError>({
-                    id: kgVar.fid,
-                    event: 'onError',
-                    parameter: e as any,
-                });
-            } finally {
-                kgVar.store.setIsDeletingRequesting(kgVar.fid, false);
-            }
-        }
-
-        /** 其他按钮. */
-        async function doOther() {
-            try {
-                kgVar.kgButton.setIsCurrentButtonRequesting({ isRequesting: true });
-
-                const button = kgVar.kgButton.currentButton;
-
-                const requestUrl = button?.cmd;
-                const requestMethod = (button?.cmd_method as any) ?? 'POST';
-
-                let paramRecord$ = ref(KgUtil.parseParams(KgUtil.parseRequestParamsToJSON(button?.cmd_prm ?? ''), kgVar.fid, $dayjs));
-                let data$ = ref<Record<string, any>>({
-                    ...KgUtil.parseParams(toRaw(kgVar.kgSubmit.formModel.value), kgVar.fid, $dayjs),
-                    // 将表格中当前勾选的行通过下面这个参数传给后端接口,
-                    selectedRows: selectedDataList$$.value ?? [],
-                });
-
-                const requestConfig: IRequestConfig = {
-                    url: requestUrl!,
-                    method: requestMethod,
-                    params: paramRecord$.value,
-                    data: data$.value,
-                    headers: {
-                        [KG.HTTP_HEADER__KG_BUTTON_VAR_NAME]: button?.var_nam ?? '',
-                        [KG.HTTP_HEADER__KG_FORM_ID]: kgVar.fid,
-                    },
-                };
-
-                const eventResult$onBeforeRequest = await emit<IKgSubmit$EventListenerParameter$onBeforeRequest>({
-                    event: 'onBeforeRequest',
-                    id: kgVar.fid,
-                    parameter: {
-                        data: data$,
-                        isCopying: kgVar.isCopying.value,
-                        isCreating: kgVar.isCreating.value,
-                        isDeleting: kgVar.isDeleting.value,
-                        isUpdating: kgVar.isUpdating.value,
-                        model: kgVar.kgSubmit.formModel,
-                        params: paramRecord$,
-                        requestConfig: requestConfig,
-                        row: selectedData$$.value,
-                        rows: selectedDataList$$.value,
-                    },
-                });
-                if (eventResult$onBeforeRequest) {
-                    return;
-                }
-
-                if (!requestConfig.url) {
-                    notification.error({ message: kg.t('kg.KgButton.noApiUrl', {}, '按钮没有配置接口地址') });
-                    throw new Error('没有配置接口地址');
-                }
-
-                const result = await httpClient().request(requestConfig);
-
-                if (button?.show_success_message_flg !== 0) {
-                    notification.success({ message: kg.t('kg.executeSuccess', {}, '执行成功') });
-                }
-
-                await emit<IKgSubmit$EventListenerParameter$onOk>({
-                    id: kgVar.fid,
-                    event: 'onOk',
-                    parameter: {
-                        isCopying: false,
-                        isCreating: false,
-                        isDeleting: false,
-                        isUpdating: true,
-                        model: kgVar.kgSubmit.formModel,
-                        result: result,
-                        row: kgVar.kgTable.selectedFirstRow.value,
-                    },
-                });
-
-                if (kgVar.kgSubmit.currentVarSubmitConfig$Props.value.isCloseModalAfterOk !== false) {
-                    // 关闭弹窗
-                    kgVar.kgButton.setCurrentButton(null);
-                }
-
-                // 重新查询列表数据
-                if (button?.reload_all_after_done_flg !== 0) {
-                    kgVar.kgSearch.search({ isSearchFirstPage: true });
-                }
-            } catch (e) {
-                console.error(e);
-                emit<IKgSubmit$EventListenerParameter$onError>({ id: kgVar.fid, event: 'onError', parameter: e as any });
-            } finally {
-                kgVar.kgButton.setIsCurrentButtonRequesting({ isRequesting: false });
-            }
-        }
-
-        /**
-         * 渲染某个表单字段.
-         * @param varSubmitDetail
-         */
-        function renderFormItem(varSubmitDetail: VarSubmitDetail) {
-            const vname = varSubmitDetail.var_nam!;
-
-            const controlSlot = (kgSlots ?? kgVar.slots.value)?.KgSubmit?.['KgForm.Item.control']?.[vname];
-            const controlRightSlot = (kgSlots ?? kgVar.slots.value)?.KgSubmit?.['KgForm.Item.controlRight']?.[vname];
-
-            return (
-                <KgFormItem
-                    key={vname}
-                    kgVarName={vname}
-                    kgContext={KG_FORM_CONTEXT.SUBMIT}
-                    onKgSubmit={onOk}
-                >
-                    {{
-                        control: isFunction(controlSlot) ? (param: IKgFormItemSlotControlParameter) => controlSlot(param) : undefined,
-                        controlRight: isFunction(controlRightSlot) ? (param: IKgFormItemSlotControlRightParameter) => controlRightSlot(param) : undefined,
-                    }}
-                </KgFormItem>
-            );
-        }
-
-        /**
-         * <p>渲染所有表单字段: 根据字段所属分组.<p>
-         */
-        const renderFormItemsBySection = () => {
-            return (
-                <div class="section">
-                    <Menu
-                        mode={'inline'}
-                        selectedKeys={sectionSelectedKeys$$.value}
-                        onSelect={onSectionSelect}
-                    >
-                        {kgVar.kgSubmit.currentVarSubmitDetailSectionsForVisible.value.map((section) => (
-                            <Menu.Item key={section}>{kgVar.t(section).value}</Menu.Item>
-                        ))}
-                    </Menu>
-
-                    <div>
-                        {kgVar.kgSubmit.currentVarSubmitDetailSectionsForVisible.value.map((section: string) => {
-                            return (
-                                <>
-                                    <div
-                                        class="kg-section-header"
-                                        kg-section={section}
-                                    >
-                                        {kgVar.t(section).value}
-                                    </div>
-                                    <Row gutter={12}>{kgVar.kgSubmit.currentVarSubmitDetailsForVisible.value?.filter((i) => i.section === section)?.map(renderFormItem)}</Row>
-                                </>
-                            );
-                        })}
-                    </div>
-                </div>
-            );
-        };
-
-        /**
-         * <p>渲染所有表单字段: 根据字段是否关键.</p>
-         * <p>关键字段放前面, 非关键字段放后面, 中间有间隔线.</p>
-         */
-        const renderFormItemsByKey = () => (
-            <>
-                {(kgVar.kgSubmit.currentVarSubmitDetailsForKey.value?.length ?? 0) > 0 && <Row gutter={12}>{kgVar.kgSubmit.currentVarSubmitDetailsForKey.value?.map(renderFormItem)}</Row>}
-
-                {/* 关键字段和普通字段之间的分割线. */}
-                {(kgVar.kgSubmit.currentVarSubmitDetailsForKeyAndVisible.value?.length ?? 0) > 0 && (kgVar.kgSubmit.currentVarSubmitDetailsForNotKeyAndVisible.value?.length ?? 0) > 0 && <Divider />}
-
-                {(kgVar.kgSubmit.currentVarSubmitDetailsForNotKey.value?.length ?? 0) > 0 && <Row gutter={12}>{kgVar.kgSubmit.currentVarSubmitDetailsForNotKey.value?.map(renderFormItem)}</Row>}
-
-                {/* 删除时, 如果没有表单字段, 则显示提示文字. */}
-                {isDeletingWithoutSubmitDetail.value && <div style="text-align: center; padding: 6px 0 12px;">{kg.t('kg.confirmDelete', {}, '确认删除 ?')}</div>}
-            </>
-        );
-
-        /**
-         * <p>渲染所有表单字段.</p>
-         */
-        function renderFormItems() {
-            // 当定义了字段的分组时, 优先按照分组进行显示, 其次才根据字段是否关键进行显示,
-            if (kgVar.kgSubmit.currentVarSubmitDetailSectionsForVisible.value.length > 0) {
-                return renderFormItemsBySection();
-            } else {
-                return renderFormItemsByKey();
-            }
-        }
-
-        /**
-         * 渲染整个表单.
-         */
-        function renderDefault() {
-            return (
-                <Spin spinning={kgVar.kgSubmit.isLoading.value}>
-                    <KgForm
-                        ref={kgVar.kgSubmit.formRef}
-                        model={kgVar.kgSubmit.formModel.value ?? undefined}
-                        layout={kgVar.kgSubmit.currentVarSubmitConfig$Layout.value}
-                        labelCol={labelCol$$.value}
-                        wrapperCol={wrapperCol$$.value}
-                    >
-                        <div ref={kgFormRef}>{renderFormItems()}</div>
-                    </KgForm>
-                </Spin>
-            );
-        }
-
-        /**
-         * 渲染底部.
-         */
-        function renderFooter() {
-            return (
-                <div>
-                    {sortBy(['CANCEL', 'OK'], (buttonCode) => {
-                        // 排序
-                        switch (buttonCode) {
-                            case 'CANCEL':
-                                return kgVar.kgSubmit.currentVarSubmitConfig$Props.value.cancelButton?.sort ?? 1;
-                            case 'OK':
-                                return kgVar.kgSubmit.currentVarSubmitConfig$Props.value.okButton?.sort ?? 2;
-                            default:
-                                return 0;
-                        }
-                    }).map((buttonCode) => {
-                        switch (buttonCode) {
-                            case 'CANCEL': {
-                                if (kgVar.kgSubmit.currentVarSubmitConfig$Props.value.cancelButton?.isShow !== false) {
-                                    return (
-                                        <Button
-                                            type={'primary'}
-                                            ghost={!isButtonCancelDisabled.value}
-                                            disabled={isButtonCancelDisabled.value}
-                                            onClick={onCancel}
-                                        >
-                                            {cancelButtonText$$.value}
-                                        </Button>
-                                    );
-                                }
-
-                                return null;
-                            }
-
-                            case 'OK': {
-                                if (kgVar.kgSubmit.currentVarSubmitConfig$Props.value.okButton?.isShow !== false) {
-                                    return (
-                                        <Button
-                                            type={'primary'}
-                                            disabled={isButtonOkDisabled.value}
-                                            danger={!!kgVar.isDeleting.value}
-                                            onClick={onOk}
-                                        >
-                                            {isRequesting.value && (
-                                                <Icon
-                                                    icon="eos-icons:bubble-loading"
-                                                    width={14}
-                                                    height={14}
-                                                />
-                                            )}
-                                            {okButtonText$$.value}
-                                        </Button>
-                                    );
-                                }
-
-                                return null;
-                            }
-
-                            default:
-                                return null;
-                        }
-                    })}
-                </div>
-            );
-        }
-
-        /**
-         * 渲染标题.
-         */
-        function renderTitle() {
-            return (
-                <div
-                    title={title.value}
-                    innerHTML={title.value || '&nbsp;'}
-                />
-            );
-        }
-
-        /**
-         * 点击左侧分组菜单.
-         */
-        function onSectionSelect(selectInfo: SelectInfo) {
-            sectionSelectedKeys$$.value = selectInfo.selectedKeys;
-
-            const section = String(selectInfo.selectedKeys[0]);
-            kgFormRef.value?.querySelector(`div[kg-section="${section}"]`)?.scrollIntoView({ block: 'start' });
-        }
-        //endregion
-
-        //region LIFECYCLE
-        //----------------------------------------------------------------------------------------------------
-        onUnmounted(async () => {
-            kgVar.kgSubmit.store.dispose(kgVar.fid);
-            await onClose();
-        });
-        //endregion
-
-        return () => {
-            return (
-                <KgModal
-                    kg-form-id={kgVar.fid}
-                    visible={isVisible.value}
-                    mask={kgVar.kgSubmit.currentVarSubmitConfig$DisplayType.value === KG__VAR_SUBMIT_CONFIG__DISPLAY_TYPE.MODAL || kgVar.kgSubmit.currentVarSubmitConfig$DisplayType.value === KG__VAR_SUBMIT_CONFIG__DISPLAY_TYPE.DRAWER}
-                    maskClosable={false}
-                    keyboard={false}
-                    destroyOnClose={true}
-                    width={width$$.value}
-                    getContainer={getContainer}
-                    class={class$$.value}
-                    wrapClassName={wrapClass$$.value}
-                    kgFullHeight={false}
-                    kgMinWidth={minWidth$$.value}
-                    kgMaxWidth={maxWidth$$.value}
-                    kgMinHeight={minHeight$$.value}
-                    kgMaxHeight={maxHeight$$.value}
-                    kgIsDragToResize={kgVar.kgSubmit.currentVarSubmitConfig.value?.resizable_flg !== 0}
-                    kgIsShowFullscreenButton={getShowFullscreenButton.value}
-                    kgIsDefaultFullscreen={isDefaultFullscreen.value}
-                    onCancel={onCancel}
-                >
-                    {{
-                        default: renderDefault,
-                        footer: renderFooter,
-                        title: renderTitle,
-                    }}
-                </KgModal>
-            );
-        };
-    },
-});