@kengic/vue 0.30.1-beta.83 → 0.30.1-beta.87

package/component/KgSubmit/KgSubmit.hooks.ts

@@ -0,0 +1,662 @@
+import { IRemoveEventListener, KgCoreUtil } from '@kengic/core.core';
+import { FormInstance } from 'ant-design-vue';
+import { RuleObject } from 'ant-design-vue/es/form';
+import { compact, isNil, uniq } from 'lodash-es';
+import { computed, ComputedRef, Ref } from 'vue';
+import { VarButton, VarProfileDetail, VarSubmitConfig, VarSubmitDetail } from '../../api/WMS/models';
+import { pinia } from '../../config';
+import { IKgVarSubmitConfigProperties, KG__VAR_BUTTON__TYPE, KG__VAR_SUBMIT_CONFIG__DISPLAY_TYPE, KG__VAR_SUBMIT_CONFIG__LABEL_COLUMN_UNIT, KG__VAR_SUBMIT_CONFIG__LAYOUT } from '../../model';
+import { kgOnEventFactory } from '../../util';
+import { useKgVar } from '../KgVar';
+import {
+    emit,
+    eventListeners,
+    IKgSubmit$EventListener$onAfterSetFormModel,
+    IKgSubmit$EventListener$onAfterValidate,
+    IKgSubmit$EventListener$onBeforeCancel,
+    IKgSubmit$EventListener$onBeforeOk,
+    IKgSubmit$EventListener$onBeforeOpen,
+    IKgSubmit$EventListener$onBeforeRequest,
+    IKgSubmit$EventListener$onCancel,
+    IKgSubmit$EventListener$onClose,
+    IKgSubmit$EventListener$onError,
+    IKgSubmit$EventListener$onOk,
+    IKgSubmit$EventListener$onOpen,
+    IKgSubmit$EventListener$onSubmitCancel,
+    IKgSubmit$EventListener$onSubmitSave,
+    IKgSubmit$EventListenerParameter$onSubmitCancel,
+    IKgSubmit$EventListenerParameter$onSubmitSave,
+    IKgSubmitEvent,
+} from './KgSubmit.event';
+import { SUBMIT_DEFAULT_LABEL_COL_FOR_PX, SUBMIT_DEFAULT_LABEL_COL_FOR_SPAN } from './KgSubmit.model';
+import { useKgSubmitStore } from './KgSubmit.store';
+
+export interface IUseKgSubmit {
+    /**
+     * 手动点击取消按钮.
+     */
+    clickCancel(): Promise<boolean>;
+
+    /**
+     * 手动点击确定按钮.
+     */
+    clickOk(): Promise<boolean>;
+
+    /**
+     * <p>添加一个「提交表单字段」.</p>
+     * <p>使用场景: 一般用于开发自定义页面时, 需要动态添加变量配置数据.</p>
+     *
+     * @param varSubmitDetail 要添加的「提交表单字段」.
+     */
+    createVarSubmitDetail(varSubmitDetail: VarSubmitDetail): void;
+
+    /**
+     * <p>「当前按钮」的「提交表单配置」.</p>
+     */
+    currentVarSubmitConfig: ComputedRef<VarSubmitConfig | null>;
+
+    /**
+     * <p>「当前按钮」的「提交表单配置」的显示方式.</p>
+     */
+    currentVarSubmitConfig$DisplayType: ComputedRef<KG__VAR_SUBMIT_CONFIG__DISPLAY_TYPE>;
+
+    /**
+     * <p>「当前按钮」的「提交表单配置」的布局.</p>
+     */
+    currentVarSubmitConfig$Layout: ComputedRef<KG__VAR_SUBMIT_CONFIG__LAYOUT>;
+
+    /**
+     * <p>「当前按钮」的「提交表单配置」的配置属性.</p>
+     */
+    currentVarSubmitConfig$Props: ComputedRef<IKgVarSubmitConfigProperties>;
+
+    /**
+     * <p>「当前按钮」的「提交表单字段」的所属分组(可见的).</p>
+     */
+    currentVarSubmitDetailSectionsForVisible: ComputedRef<string[]>;
+
+    /**
+     * <p>「当前按钮」的「提交表单字段」.</p>
+     */
+    currentVarSubmitDetails: ComputedRef<VarSubmitDetail[] | null>;
+
+    /**
+     * <p>「当前按钮」的「提交表单字段」(关键的).</p>
+     */
+    currentVarSubmitDetailsForKey: ComputedRef<VarSubmitDetail[] | null>;
+
+    /**
+     * <p>「当前按钮」的「提交表单字段」(关键的, 可见的).</p>
+     */
+    currentVarSubmitDetailsForKeyAndVisible: ComputedRef<VarSubmitDetail[] | null>;
+
+    /**
+     * <p>「当前按钮」的「提交表单字段」(非关键的).</p>
+     */
+    currentVarSubmitDetailsForNotKey: ComputedRef<VarSubmitDetail[] | null>;
+
+    /**
+     * <p>「当前按钮」的「提交表单字段」(非关键的, 可见的).</p>
+     */
+    currentVarSubmitDetailsForNotKeyAndVisible: ComputedRef<VarSubmitDetail[] | null>;
+
+    /**
+     * <p>「当前按钮」的「提交表单字段」(可见的).</p>
+     */
+    currentVarSubmitDetailsForVisible: ComputedRef<VarSubmitDetail[] | null>;
+
+    /**
+     * 所有事件监听函数.
+     */
+    eventListeners: typeof eventListeners;
+
+    /**
+     * 界面标识.
+     */
+    formID: string;
+
+    /**
+     * 表单数据对象.
+     */
+    formModel: ComputedRef<Record<string, any>>;
+
+    /**
+     * 表单组件.
+     */
+    formRef: Ref<FormInstance | null>;
+
+    /**
+     * 自定义的表单验证规则.
+     */
+    formRules: Ref<Record<string, RuleObject[]>>;
+
+    /**
+     * <p>获取「提交表单配置」, 根据所传参数进行过滤.</p>
+     *
+     * <ul>
+     *     <li>
+     *         <p>如果参数 {@link param} 不传或者 {@link param} === undefined, 表示获取「当前按钮」的「提交表单配置」.</p>
+     *     </li>
+     *     <li>
+     *         <p>如果参数 param.buttonVarName !== <code>undefined</code>, 则忽略参数 param.buttonType, 根据 param.buttonVarName 和 {@link VarSubmitConfig.button_var_name} 是否匹配进行过滤.</p>
+     *     </li>
+     *     <li>
+     *         <p>如果参数 param.buttonVarName === <code>undefined</code> && param.buttonType !== <code>undefined</code>, 则先根据参数 param.buttonType 获取按钮, 然后根据 VarButton.var_nam 和 {@link VarSubmitConfig.button_var_name} 是否匹配进行过滤.</p>
+     *     </li>
+     * </ul>
+     *
+     * @param param.buttonType <p>按钮的类型, 对应的是 VarButton.typ 属性, 取值请参考 {@link KG__VAR_BUTTON__TYPE}.</p>
+     * @param param.buttonVarName <p>按钮的变量名称, 对应的是 VarButton.var_nam 属性.</p>
+     */
+    getVarSubmitConfig(param?: { buttonType?: string; buttonVarName?: string | null }): VarSubmitConfig | null;
+
+    /**
+     * 根据「查询条件视图明细」获取「提交表单字段」.
+     *
+     * @param param.varProfileDetail 查询条件视图明细.
+     */
+    getVarSubmitDetailByVarProfileDetail(param?: { varProfileDetail: VarProfileDetail | null }): VarSubmitDetail | null;
+
+    /**
+     * <p>获取提交表单字段, 根据所传参数进行过滤.</p>
+     *
+     * <ul>
+     *     <li>
+     *         <p>如果参数 {@link param} === null || {@link param} === undefined, 表示获取所有的提交表单字段.</p>
+     *     </li>
+     *     <li>
+     *         <p>如果参数 param.buttonVarName !== <code>undefined</code>, 则忽略参数 param.buttonType, 根据 param.buttonVarName 和 {@link VarSubmitDetail.button_var_name} 是否匹配进行过滤.</p>
+     *     </li>
+     *     <li>
+     *         <p>如果参数 param.buttonVarName === <code>undefined</code> && param.buttonType !== <code>undefined</code>, 则先根据参数 param.buttonType 获取按钮, 然后根据 VarButton.var_nam 和 {@link VarSubmitDetail.button_var_name} 是否匹配进行过滤.</p>
+     *     </li>
+     *     <li>
+     *         <p>如果参数 {@link param.varName} !== <code>undefined</code> , 则根据 {@link param.varName} 和 {@link VarSubmitDetail.var_nam} 是否匹配进行过滤.</p>
+     *     </li>
+     *     <li>
+     *         <p>如果参数 {@link param.searchProfileVarName} !== <code>undefined</code> , 则根据 {@link param.searchProfileVarName} 和 {@link VarSubmitDetail.prf_var_nam} 是否匹配进行过滤.</p>
+     *     </li>
+     *     <li>
+     *         <p>如果参数 {@link param.isKey} !== <code>undefined</code> , 则根据 {@link param.isKey} 和 {@link VarSubmitDetail.key_flg} 是否匹配进行过滤.</p>
+     *     </li>
+     *     <li>
+     *         <p>如果参数 {@link param.isVisible} !== <code>undefined</code> , 则根据 {@link param.isVisible} 和 {@link VarSubmitDetail.visible_flag} 是否匹配进行过滤.</p>
+     *     </li>
+     * </ul>
+     *
+     * @param param.buttonType <p>按钮的类型, 对应的是 VarButton.typ 属性, 取值请参考 {@link KG__VAR_BUTTON__TYPE}.</p>
+     * @param param.buttonVarName <p>按钮的变量名称, 对应的是 VarButton.var_nam 属性.</p>
+     * @param param.isKey 提交表单字段是否可见, 对应的是 {@link VarSubmitDetail.key_flg} 属性.
+     * @param param.isVisible 提交表单字段是否可见, 对应的是 {@link VarSubmitDetail.visible_flag} 属性.
+     * @param param.searchProfileVarName 提交表单字段的所属查询条件视图的变量名称, 对应的是 {@link VarSubmitDetail.prf_var_nam} 属性.
+     * @param param.varName 提交表单字段的变量名, 对应的是 {@link VarSubmitDetail.var_nam} 属性.
+     */
+    getVarSubmitDetails(
+        param?: {
+            buttonType?: string;
+            buttonVarName?: string | null;
+            isKey?: 0 | 1 | null;
+            isVisible?: 0 | 1 | null;
+            searchProfileVarName?: string | null;
+            varName?: string | null;
+        } | null,
+    ): Array<VarSubmitDetail> | null;
+
+    /**
+     * 是否处于加载状态.
+     */
+    isLoading: ComputedRef<boolean>;
+
+    /** @deprecated 请使用 {@link formModel} */
+    model: ComputedRef<Record<string, any>>;
+
+    /**
+     * <p>监听事件: 表单对象设置完成.</p>
+     * @param listener 事件监听函数.
+     * @param isOnce 是否只会触发一次. 默认为 undefined.
+     * @return {} 移除事件监听函数.
+     */
+    onAfterSetFormModel(listener: IKgSubmit$EventListener$onAfterSetFormModel, isOnce?: boolean): IRemoveEventListener;
+
+    /**
+     * <p>监听事件: 点击确认按钮之后, 表单验证完成.</p>
+     * <p>回调函数如果返回 true, 则不会再执行后面的代码.</p>
+     *
+     * @param listener 事件监听函数.
+     * @param isOnce 是否只会触发一次. 默认为 undefined.
+     * @return {} 移除事件监听函数.
+     */
+    onAfterValidate(listener: IKgSubmit$EventListener$onAfterValidate, isOnce?: boolean): IRemoveEventListener;
+
+    /**
+     * <p>监听事件: 点击取消按钮, 或者点击右上角的关闭按钮, 尚未关闭弹窗.</p>
+     * @param listener 事件监听函数.
+     * @param isOnce 是否只会触发一次. 默认为 undefined.
+     * @return {} 移除事件监听函数.
+     */
+    onBeforeCancel(listener: IKgSubmit$EventListener$onBeforeCancel, isOnce?: boolean): IRemoveEventListener;
+
+    /**
+     * <p>监听事件: 点击确认按钮之后, 执行默认逻辑之前.</p>
+     * <ul>
+     *     <li>可以在此时修改表单数据对象,</li>
+     *     <li>可以在此时修改表单验证规则,</li>
+     * </ul>
+     * <p>回调函数如果返回 true, 则不会再执行后面的代码.</p>
+     *
+     * @param listener 事件监听函数.
+     * @param isOnce 是否只会触发一次. 默认为 undefined.
+     * @return {} 移除事件监听函数.
+     */
+    onBeforeOk(listener: IKgSubmit$EventListener$onBeforeOk, isOnce?: boolean): IRemoveEventListener;
+
+    /**
+     * <p>监听事件: 打开提交弹窗之前.</p>
+     * @param listener 事件监听函数.
+     * @param isOnce 是否只会触发一次. 默认为 undefined.
+     * @return {} 移除事件监听函数.
+     */
+    onBeforeOpen(listener: IKgSubmit$EventListener$onBeforeOpen, isOnce?: boolean): IRemoveEventListener;
+
+    /**
+     * <p>监听事件: 发起接口请求之前. 表单验证完成, 参数解析完成.</p>
+     * <p>回调函数如果返回 true, 则不会再执行后面的代码.</p>
+     *
+     * @param listener 事件监听函数.
+     * @param isOnce 是否只会触发一次. 默认为 undefined.
+     * @return {} 移除事件监听函数.
+     */
+    onBeforeRequest(listener: IKgSubmit$EventListener$onBeforeRequest, isOnce?: boolean): IRemoveEventListener;
+
+    /**
+     * <p>监听事件: 点击取消按钮, 或者点击右上角的关闭按钮, 已经关闭弹窗.</p>
+     * @param listener 事件监听函数.
+     * @param isOnce 是否只会触发一次. 默认为 undefined.
+     * @return {} 移除事件监听函数.
+     */
+    onCancel(listener: IKgSubmit$EventListener$onCancel, isOnce?: boolean): IRemoveEventListener;
+
+    /**
+     * 监听事件: 手动点击取消按钮.
+     *
+     * @param listener 事件监听函数.
+     * @param isOnce 是否只会触发一次. 默认为 undefined.
+     */
+    onCancelButtonClick(listener: IKgSubmit$EventListener$onSubmitCancel, isOnce?: boolean): IRemoveEventListener;
+
+    /**
+     * <p>监听事件: 关闭提交弹窗. 下面几种场景都会触发此事件:</p>
+     * <ul>
+     *     <li>点击右上角的关闭按钮,</li>
+     *     <li>点击取消按钮,</li>
+     *     <li>点击保存按钮之后, 调用接口成功, 关闭弹窗,</li>
+     * </ul>
+     * @param listener 事件监听函数.
+     * @param isOnce 是否只会触发一次. 默认为 undefined.
+     * @return {} 移除事件监听函数.
+     */
+    onClose(listener: IKgSubmit$EventListener$onClose, isOnce?: boolean): IRemoveEventListener;
+
+    /**
+     * <p>监听事件: 请求失败. 请求失败了, 或者请求返回了错误消息.</p>
+     * @param listener 事件监听函数.
+     * @param isOnce 是否只会触发一次. 默认为 undefined.
+     * @return {} 移除事件监听函数.
+     */
+    onError(listener: IKgSubmit$EventListener$onError, isOnce?: boolean): IRemoveEventListener;
+
+    /**
+     * <p>监听事件: 点击保存按钮之后, 执行默认逻辑之后, 调用接口成功, 关闭提交弹窗之后.</p>
+     * @param listener 事件监听函数.
+     * @param isOnce 是否只会触发一次. 默认为 undefined.
+     * @return {} 移除事件监听函数.
+     */
+    onOk(listener: IKgSubmit$EventListener$onOk, isOnce?: boolean): IRemoveEventListener;
+
+    /**
+     * 监听事件: 手动点击确定按钮.
+     *
+     * @param listener 事件监听函数.
+     * @param isOnce 是否只会触发一次. 默认为 undefined.
+     */
+    onOkButtonClick(listener: IKgSubmit$EventListener$onSubmitSave, isOnce?: boolean): IRemoveEventListener;
+
+    /**
+     * <p>监听事件: 打开提交弹窗.</p>
+     * @param listener 事件监听函数.
+     * @param isOnce 是否只会触发一次. 默认为 undefined.
+     * @return {} 移除事件监听函数.
+     */
+    onOpen(listener: IKgSubmit$EventListener$onOpen, isOnce?: boolean): IRemoveEventListener;
+
+    /**
+     * <p>修改某个「提交表单字段」的部分属性.</p>
+     *
+     * <p>由于提交表单肯定是关联某个按钮的, 因此需要先确认是哪个按钮, 确认逻辑如下:</p>
+     * <ul>
+     *     <li>
+     *         <p>如果参数 param.buttonVarName === <code>undefined</code> && param.buttonType === <code>undefined</code>, 表示修改的是「当前按钮」.</p>
+     *     </li>
+     *    <li>
+     *         <p>如果参数 param.buttonVarName !== <code>undefined</code>, 则忽略参数 param.buttonType, 根据 param.buttonVarName 和 VarButton.var_nam 是否匹配来确认按钮.</p>
+     *     </li>
+     *    <li>
+     *         <p>如果参数 param.buttonType !== <code>undefined</code> && param.buttonType !== <code>OTHER</code>, 根据 param.buttonType 和 VarButton.typ 是否匹配来确认按钮.</p>
+     *     </li>
+     * </ul>
+     *
+     * @param param.buttonType <p>按钮的类型, 对应的是 VarButton.typ 属性, 取值请参考 {@link KG__VAR_BUTTON__TYPE}.</p>
+     * @param param.buttonVarName <p>按钮的变量名称, 对应的是 VarButton.var_nam 属性.</p>
+     * @param param.properties 要修改的部分属性.
+     * @param param.varName 「提交表单字段」的变量名称, 对应的是 {@link VarSubmitDetail.var_nam} 属性.
+     */
+    patchVarSubmitDetail(param: { buttonType?: string; buttonVarName?: string | null; properties: VarSubmitDetail; varName: string | null | undefined }): Promise<void>;
+
+    /**
+     * <p>修改某些「提交表单字段」的部分属性.</p>
+     *
+     * <p>由于提交表单肯定是关联某个按钮的, 因此需要先确认是哪个按钮, 确认逻辑如下:</p>
+     * <ul>
+     *     <li>
+     *         <p>如果参数 param.buttonVarName === <code>undefined</code> && param.buttonType === <code>undefined</code>, 表示修改的是「当前按钮」.</p>
+     *     </li>
+     *    <li>
+     *         <p>如果参数 param.buttonVarName !== <code>undefined</code>, 则忽略参数 param.buttonType, 根据 param.buttonVarName 和 VarButton.var_nam 是否匹配来确认按钮.</p>
+     *     </li>
+     *    <li>
+     *         <p>如果参数 param.buttonType !== <code>undefined</code> && param.buttonType !== <code>OTHER</code>, 根据 param.buttonType 和 VarButton.typ 是否匹配来确认按钮.</p>
+     *     </li>
+     * </ul>
+     *
+     * @param param.buttonType <p>按钮的类型, 对应的是 {@link VarButton#typ} 属性, 取值请参考 {@link KG__VAR_BUTTON__TYPE}.</p>
+     * @param param.buttonVarName <p>按钮的变量名称, 对应的是 VarButton.var_nam 属性.</p>
+     * @param param.varSubmitDetailList 要修改的「提交表单字段」列表, 列表中的每个对象只需要包含要修改的属性, 注意 VarSubmitDetail.frm_id 和 VarSubmitDetail.var_nam 必须包含.
+     */
+    patchVarSubmitDetailList(param: { buttonType?: string; buttonVarName?: string | null; varSubmitDetailList: Array<VarSubmitDetail> }): Promise<void>;
+
+    /** @deprecated 请使用 {@link formRules}. */
+    rules: Ref<Record<string, RuleObject[]>>;
+
+    /**
+     * <p>「查询按钮」的「提交表单配置」.</p>
+     */
+    searchVarSubmitConfig: ComputedRef<VarSubmitConfig | null>;
+
+    /**
+     * <p>「查询按钮」的「提交表单配置」的文本宽度.</p>
+     */
+    searchVarSubmitConfig$LabelColumn: ComputedRef<number>;
+
+    /**
+     * <p>「查询按钮」的「提交表单配置」的文本宽度单位.</p>
+     */
+    searchVarSubmitConfig$LabelColumnUnit: ComputedRef<KG__VAR_SUBMIT_CONFIG__LABEL_COLUMN_UNIT>;
+
+    /**
+     * <p>「查询按钮」的「提交表单配置」的布局.</p>
+     */
+    searchVarSubmitConfig$Layout: ComputedRef<KG__VAR_SUBMIT_CONFIG__LAYOUT>;
+
+    /**
+     * 设置「是否处于加载状态」.
+     */
+    setIsLoading(param: { value: boolean }): void;
+
+    /**
+     * 状态数据.
+     */
+    store: ReturnType<typeof useKgSubmitStore>;
+
+    varSubmitConfigs: ComputedRef<Array<VarSubmitConfig>>;
+}
+
+/**
+ * @param fid 界面标识.
+ */
+export function useKgSubmit(fid?: string | null): IUseKgSubmit {
+    const kgVar = useKgVar(fid);
+
+    const store = useKgSubmitStore(pinia);
+
+    return {
+        clickCancel: () =>
+            emit<IKgSubmit$EventListenerParameter$onSubmitCancel>({
+                id: kgVar.fid,
+                event: 'onCancelButtonClick',
+                parameter: {},
+            }),
+        clickOk: () => emit<IKgSubmit$EventListenerParameter$onSubmitSave>({ id: kgVar.fid, event: 'onOkButtonClick', parameter: {} }),
+        createVarSubmitDetail: (varSubmitDetail: VarSubmitDetail): void => store.createVarSubmitDetail(kgVar.fid, varSubmitDetail),
+        currentVarSubmitConfig: computed(() => {
+            if (!kgVar.kgButton.currentButton) {
+                return null;
+            }
+
+            return store.getVarSubmitConfig(kgVar.fid);
+        }),
+        currentVarSubmitConfig$DisplayType: computed(() => {
+            if (!kgVar.kgButton.currentButton) {
+                return KG__VAR_SUBMIT_CONFIG__DISPLAY_TYPE.MODAL;
+            }
+
+            return (store.getVarSubmitConfig(kgVar.fid)?.display_type ?? KG__VAR_SUBMIT_CONFIG__DISPLAY_TYPE.MODAL) as KG__VAR_SUBMIT_CONFIG__DISPLAY_TYPE;
+        }),
+        currentVarSubmitConfig$Layout: computed(() => {
+            if (!kgVar.kgButton.currentButton) {
+                return KG__VAR_SUBMIT_CONFIG__LAYOUT.VERTICAL;
+            }
+
+            return (store.getVarSubmitConfig(kgVar.fid)?.layout ?? KG__VAR_SUBMIT_CONFIG__LAYOUT.VERTICAL) as KG__VAR_SUBMIT_CONFIG__LAYOUT;
+        }),
+        currentVarSubmitConfig$Props: computed(() => {
+            if (!kgVar.kgButton.currentButton) {
+                return {};
+            }
+
+            return KgCoreUtil.tryParseJSON<IKgVarSubmitConfigProperties>(store.getVarSubmitConfig(kgVar.fid)?.props);
+        }),
+        currentVarSubmitDetailSectionsForVisible: computed(() => {
+            if (!kgVar.kgButton.currentButton) {
+                return [];
+            }
+
+            return uniq(
+                compact(
+                    store
+                        .getVarSubmitDetails(kgVar.fid, {
+                            buttonVarName: kgVar.kgButton.currentButton?.var_nam,
+                            isVisible: 1,
+                        })
+                        ?.map((i) => i.section),
+                ),
+            );
+        }),
+        currentVarSubmitDetails: computed(() => {
+            if (!kgVar.kgButton.currentButton) {
+                return null;
+            }
+
+            return store.getVarSubmitDetails(kgVar.fid, { buttonVarName: kgVar.kgButton.currentButton?.var_nam });
+        }),
+        currentVarSubmitDetailsForKey: computed(() => {
+            if (!kgVar.kgButton.currentButton) {
+                return null;
+            }
+
+            return store.getVarSubmitDetails(kgVar.fid, { buttonVarName: kgVar.kgButton.currentButton?.var_nam, isKey: 1 });
+        }),
+        currentVarSubmitDetailsForKeyAndVisible: computed(() => {
+            if (!kgVar.kgButton.currentButton) {
+                return null;
+            }
+
+            return store.getVarSubmitDetails(kgVar.fid, { buttonVarName: kgVar.kgButton.currentButton?.var_nam, isKey: 1, isVisible: 1 });
+        }),
+        currentVarSubmitDetailsForNotKey: computed(() => {
+            if (!kgVar.kgButton.currentButton) {
+                return null;
+            }
+
+            const varSubmitDetails01 = store.getVarSubmitDetails(kgVar.fid, { buttonVarName: kgVar.kgButton.currentButton?.var_nam, isKey: 0 });
+            const varSubmitDetails02 = store.getVarSubmitDetails(kgVar.fid, { buttonVarName: kgVar.kgButton.currentButton?.var_nam, isKey: null });
+
+            if (!varSubmitDetails01 && !varSubmitDetails02) {
+                return null;
+            }
+
+            return [...(varSubmitDetails01 ?? []), ...(varSubmitDetails02 ?? [])].sort((x, y) => x.srtseq! - y.srtseq!);
+        }),
+        currentVarSubmitDetailsForNotKeyAndVisible: computed(() => {
+            if (!kgVar.kgButton.currentButton) {
+                return null;
+            }
+
+            const varSubmitDetails01 = store.getVarSubmitDetails(kgVar.fid, {
+                buttonVarName: kgVar.kgButton.currentButton?.var_nam,
+                isKey: 0,
+                isVisible: 1,
+            });
+            const varSubmitDetails02 = store.getVarSubmitDetails(kgVar.fid, {
+                buttonVarName: kgVar.kgButton.currentButton?.var_nam,
+                isKey: null,
+                isVisible: 1,
+            });
+
+            if (!varSubmitDetails01 && !varSubmitDetails02) {
+                return null;
+            }
+
+            return [...(varSubmitDetails01 ?? []), ...(varSubmitDetails02 ?? [])].sort((x, y) => x.srtseq! - y.srtseq!);
+        }),
+        currentVarSubmitDetailsForVisible: computed(() => {
+            if (!kgVar.kgButton.currentButton) {
+                return null;
+            }
+
+            return store.getVarSubmitDetails(kgVar.fid, { buttonVarName: kgVar.kgButton.currentButton?.var_nam, isVisible: 1 });
+        }),
+        eventListeners: eventListeners,
+        formID: kgVar.fid,
+        formModel: computed(() => store.getFormModel(kgVar.fid) ?? {}),
+        formRef: store.getFormRef(kgVar.fid),
+        formRules: store.getFormRules(kgVar.fid),
+        getVarSubmitConfig: (param?: { buttonType?: string; buttonVarName?: string | null }): VarSubmitConfig | null => store.getVarSubmitConfig(kgVar.fid, param),
+        getVarSubmitDetailByVarProfileDetail: (param?: { varProfileDetail: VarProfileDetail | null }): VarSubmitDetail | null => store.getVarSubmitDetailByVarProfileDetail(kgVar.fid, param),
+        getVarSubmitDetails: (
+            param?: {
+                buttonType?: string;
+                buttonVarName?: string | null;
+                isKey?: 0 | 1 | null;
+                isVisible?: 0 | 1 | null;
+                searchProfileVarName?: string | null;
+                varName?: string | null;
+            } | null,
+        ): Array<VarSubmitDetail> | null => store.getVarSubmitDetails(kgVar.fid, param),
+        isLoading: computed(() => store.getIsLoading(kgVar.fid)),
+        model: computed(() => store.getFormModel(kgVar.fid) ?? {}),
+        onAfterSetFormModel: kgOnEventFactory<IKgSubmitEvent, IKgSubmit$EventListener$onAfterSetFormModel>({ id: kgVar.fid, eventListeners: eventListeners, event: 'onAfterSetFormModel' }),
+        onAfterValidate: kgOnEventFactory<IKgSubmitEvent, IKgSubmit$EventListener$onAfterValidate>({
+            event: 'onAfterValidate',
+            eventListeners: eventListeners,
+            id: kgVar.fid,
+        }),
+        onBeforeCancel: kgOnEventFactory<IKgSubmitEvent, IKgSubmit$EventListener$onBeforeCancel>({
+            event: 'onBeforeCancel',
+            eventListeners: eventListeners,
+            id: kgVar.fid,
+        }),
+        onBeforeOk: kgOnEventFactory<IKgSubmitEvent, IKgSubmit$EventListener$onBeforeOk>({ id: kgVar.fid, eventListeners: eventListeners, event: 'onBeforeOk' }),
+        onBeforeOpen: kgOnEventFactory<IKgSubmitEvent, IKgSubmit$EventListener$onBeforeOpen>({ id: kgVar.fid, eventListeners: eventListeners, event: 'onBeforeOpen' }),
+        onBeforeRequest: kgOnEventFactory<IKgSubmitEvent, IKgSubmit$EventListener$onBeforeRequest>({
+            event: 'onBeforeRequest',
+            eventListeners: eventListeners,
+            id: kgVar.fid,
+        }),
+        onCancel: kgOnEventFactory<IKgSubmitEvent, IKgSubmit$EventListener$onCancel>({ id: kgVar.fid, eventListeners: eventListeners, event: 'onCancel' }),
+        onCancelButtonClick: kgOnEventFactory<IKgSubmitEvent, IKgSubmit$EventListener$onSubmitCancel>({
+            event: 'onCancelButtonClick',
+            eventListeners: eventListeners,
+            id: kgVar.fid,
+        }),
+        onClose: kgOnEventFactory<IKgSubmitEvent, IKgSubmit$EventListener$onClose>({ id: kgVar.fid, eventListeners: eventListeners, event: 'onClose' }),
+        onError: kgOnEventFactory<IKgSubmitEvent, IKgSubmit$EventListener$onError>({ id: kgVar.fid, eventListeners: eventListeners, event: 'onError' }),
+        onOk: kgOnEventFactory<IKgSubmitEvent, IKgSubmit$EventListener$onOk>({ id: kgVar.fid, eventListeners: eventListeners, event: 'onOk' }),
+        onOkButtonClick: kgOnEventFactory<IKgSubmitEvent, IKgSubmit$EventListener$onSubmitSave>({ id: kgVar.fid, eventListeners: eventListeners, event: 'onOkButtonClick' }),
+        onOpen: kgOnEventFactory<IKgSubmitEvent, IKgSubmit$EventListener$onOpen>({ id: kgVar.fid, eventListeners: eventListeners, event: 'onOpen' }),
+        patchVarSubmitDetail: (param: { buttonType?: string; buttonVarName?: string | null; properties: VarSubmitDetail; varName: string | null | undefined }): Promise<void> => store.patchVarSubmitDetail(kgVar.fid, param),
+        patchVarSubmitDetailList: (param: { buttonType?: string; buttonVarName?: string | null; varSubmitDetailList: Array<VarSubmitDetail> }): Promise<void> => store.patchVarSubmitDetailList(param),
+        rules: store.getFormRules(kgVar.fid),
+        searchVarSubmitConfig: computed(() => {
+            if (!kgVar.varButtonSearch.value) {
+                return null;
+            }
+
+            return store.getVarSubmitConfig(kgVar.fid, { buttonVarName: kgVar.varButtonSearch.value?.var_nam });
+        }),
+        searchVarSubmitConfig$LabelColumn: computed(() => {
+            // 文本宽度单位, 默认为 PX
+            const labelColumnUnit = (() => {
+                if (!kgVar.varButtonSearch.value) {
+                    return KG__VAR_SUBMIT_CONFIG__LABEL_COLUMN_UNIT.PX;
+                }
+
+                return (store.getVarSubmitConfig(kgVar.fid, { buttonVarName: kgVar.varButtonSearch.value?.var_nam })?.label_col_unit ?? KG__VAR_SUBMIT_CONFIG__LABEL_COLUMN_UNIT.PX) as KG__VAR_SUBMIT_CONFIG__LABEL_COLUMN_UNIT;
+            })();
+
+            const labelColumn = store.getVarSubmitConfig(kgVar.fid, { buttonVarName: kgVar.varButtonSearch.value?.var_nam })?.label_col;
+
+            switch (labelColumnUnit) {
+                case KG__VAR_SUBMIT_CONFIG__LABEL_COLUMN_UNIT.PX: {
+                    switch (true) {
+                        case isNil(labelColumn): {
+                            return SUBMIT_DEFAULT_LABEL_COL_FOR_PX;
+                        }
+
+                        case Number.isNaN(Number(labelColumn)) || Number(labelColumn) <= 0: {
+                            return SUBMIT_DEFAULT_LABEL_COL_FOR_PX;
+                        }
+
+                        default: {
+                            return Number(labelColumn);
+                        }
+                    }
+                }
+
+                case KG__VAR_SUBMIT_CONFIG__LABEL_COLUMN_UNIT.SPAN:
+                default: {
+                    switch (true) {
+                        case isNil(labelColumn): {
+                            return SUBMIT_DEFAULT_LABEL_COL_FOR_SPAN;
+                        }
+
+                        case Number.isNaN(Number(labelColumn)) || Number(labelColumn) > 24 || Number(labelColumn) < 1: {
+                            return SUBMIT_DEFAULT_LABEL_COL_FOR_SPAN;
+                        }
+
+                        default: {
+                            // 取整
+                            return Math.floor(Number(labelColumn));
+                        }
+                    }
+                }
+            }
+        }),
+        searchVarSubmitConfig$LabelColumnUnit: computed(() => {
+            if (!kgVar.varButtonSearch.value) {
+                return KG__VAR_SUBMIT_CONFIG__LABEL_COLUMN_UNIT.PX;
+            }
+
+            return (store.getVarSubmitConfig(kgVar.fid, { buttonVarName: kgVar.varButtonSearch.value?.var_nam })?.label_col_unit ?? KG__VAR_SUBMIT_CONFIG__LABEL_COLUMN_UNIT.PX) as KG__VAR_SUBMIT_CONFIG__LABEL_COLUMN_UNIT;
+        }),
+        searchVarSubmitConfig$Layout: computed(() => {
+            if (!kgVar.varButtonSearch.value) {
+                return KG__VAR_SUBMIT_CONFIG__LAYOUT.HORIZONTAL;
+            }
+
+            return (store.getVarSubmitConfig(kgVar.fid, { buttonVarName: kgVar.varButtonSearch.value?.var_nam })?.layout ?? KG__VAR_SUBMIT_CONFIG__LAYOUT.HORIZONTAL) as KG__VAR_SUBMIT_CONFIG__LAYOUT;
+        }),
+        setIsLoading: (param: { value: boolean }): void => store.setIsLoading(kgVar.fid, param.value),
+        store: store,
+        varSubmitConfigs: computed(() => store.getVarSubmitConfigs(kgVar.fid)),
+    };
+}