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

package/component/KgSubmit/KgSubmit.tsx

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