@kengic/vue 0.30.1-beta.93 → 0.30.1-beta.95

package/component/KgButton/KgButton.ImportTemplate.tsx

@@ -0,0 +1,214 @@
+import { Icon } from '@iconify/vue';
+import { ____ERROR____, KgCoreUtil } from '@kengic/core.core';
+import { Button } from 'ant-design-vue';
+import { Method } from 'axios';
+import { isNil } from 'lodash-es';
+import { computed, defineComponent, ref } from 'vue';
+import { useKg } from '../../config';
+import { KG__VAR_BUTTON__TYPE } from '../../model';
+import { httpClient } from '../../service';
+import { KgUtil } from '../../util';
+import { useKgVar } from '../KgVar';
+import { emit, IKgButton$EventListenerParameter$onError } from './KgButton.event';
+import { getProps } from './KgButton.model';
+
+// 按钮:下载导入模板
+export default defineComponent({
+    name: 'KgButtonImportTemplate',
+    props: getProps(),
+    inheritAttrs: false,
+    setup(props, { attrs }) {
+        const kg = useKg();
+        const kgVar = useKgVar();
+
+        kgVar.kgButton.$onAction(async ({ name, args }) => {
+            switch (name) {
+                case 'click':
+                    if (args[0].type === KG__VAR_BUTTON__TYPE.IMPORT_TEMPLATE) {
+                        // TODO
+                    }
+                    break;
+            }
+        });
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        const varButton = computed(() => kgVar.store.getVarButton(kgVar.fid, props.kgVarName));
+
+        /** 接口地址. */
+        const requestUrl = computed<string | null>(() => {
+            if (varButton.value) {
+                return varButton.value?.cmd ?? '';
+            }
+
+            return null;
+        });
+
+        /** 接口方法. */
+        const requestMethod = computed<Method>(() => (varButton.value?.cmd_method as any) ?? 'GET');
+
+        /** 接口参数. */
+        const requestParams = computed<Record<string, any>>(() => {
+            let params: Record<string, any> = {
+                ...((kgVar.varGridConfig$Props$$.value?.componentVersion ?? '01') === '01' ? kgVar.kgTable.requestParams.value : {}),
+                ...(kgVar.varGridConfig$Props$$.value?.componentVersion === '02' ? kgVar.kgTable02.requestParamRecord : {}),
+            };
+
+            // 「下载导入模板」按钮中设置的查询参数
+            if (varButton.value) {
+                params = { ...params, ...KgUtil.parseRequestParamsToJSON(varButton.value?.cmd_prm ?? '') };
+            }
+
+            return params;
+        });
+
+        const isImportTemplateButtonDisabled = computed<boolean>(() => {
+            // 参数 kgDisabled 的优先级最高
+            if (!isNil(props.kgDisabled)) {
+                return props.kgDisabled;
+            }
+
+            if (kgVar.isCreating.value || kgVar.isUpdating.value || kgVar.isCopying.value || kgVar.isDeleting.value) {
+                return true;
+            }
+
+            // 正在查询表格数据
+            if (kgVar.kgTable.isRetrieving.value || kgVar.kgTable02.isRequesting) {
+                return true;
+            }
+
+            // 正在下载,
+            if (isImportTemplateDownloading.value) {
+                return true;
+            }
+
+            // 未勾选行
+            if (varButton.value?.dis_no_select_flg === 1 && (kgVar.kgTable.selectedRows.value?.length ?? 0) === 0) {
+                return true;
+            }
+
+            // 勾选多行
+            if (varButton.value?.dis_mult_select_flg === 1 && (kgVar.kgTable.selectedRows.value?.length ?? 0) > 1) {
+                return true;
+            }
+
+            // 没有权限
+            if (KgUtil.getPermissionType(varButton.value?.permission_code) === 2 && !kg.p(varButton.value?.permission_code)) {
+                return true;
+            }
+
+            return false;
+        });
+
+        /** 正在下载导入模板. */
+        const isImportTemplateDownloading = ref<boolean>(false);
+        //endregion
+
+        //region FUNCTION
+        //----------------------------------------------------------------------------------------------------
+        /** 点击按钮. */
+        async function onClick() {
+            // 如果该函数不为空, 并且该函数返回 true, 表示由调用者自己处理单击事件
+            if (props.onKgClick) {
+                const onKgClick$Result = await props.onKgClick();
+                if (onKgClick$Result) {
+                    kgVar.kgButton.setIsClickIntercepted({ type: KG__VAR_BUTTON__TYPE.IMPORT_TEMPLATE, isIntercepted: true });
+                    return;
+                } else {
+                    kgVar.kgButton.setIsClickIntercepted({ type: KG__VAR_BUTTON__TYPE.IMPORT_TEMPLATE, isIntercepted: false });
+                }
+            } else {
+                kgVar.kgButton.setIsClickIntercepted({ type: KG__VAR_BUTTON__TYPE.IMPORT_TEMPLATE, isIntercepted: false });
+            }
+
+            if (!requestUrl.value) {
+                ____ERROR____("[KgButton] '下载导入模板按钮'没有配置接口地址.", { VarButton: varButton.value });
+                return;
+            }
+
+            isImportTemplateDownloading.value = true;
+
+            try {
+                const data = await httpClient().request(
+                    {
+                        url: requestUrl.value!,
+                        method: requestMethod.value,
+                        params: requestParams.value,
+                        responseType: 'blob',
+                    },
+                    { joinParamsToUrl: true, isTransformResponse: false },
+                );
+
+                const export_excel_filename = varButton.value?.export_excel_filename;
+                KgCoreUtil.downloadFile(data, `${export_excel_filename ? kgVar.t2(export_excel_filename) : kg.t('kg.importTemplate')}.${varButton.value?.export_excel_suffix?.toLowerCase()}`);
+            } catch (e) {
+                const eventResult$onError = await emit<IKgButton$EventListenerParameter$onError>({
+                    event: 'onError',
+                    id: kgVar.fid,
+                    parameter: { button: varButton.value, e: e },
+                });
+
+                throw e;
+            } finally {
+                isImportTemplateDownloading.value = false;
+            }
+        }
+
+        /** 渲染图标. */
+        function renderIcon() {
+            if (isImportTemplateDownloading.value) {
+                return (
+                    <Icon
+                        icon="eos-icons:bubble-loading"
+                        width={14}
+                        height={14}
+                    />
+                );
+            }
+
+            if (props.kgIcon) {
+                return (
+                    <span class="icon">
+                        <Icon icon={props.kgIcon} />
+                    </span>
+                );
+            }
+
+            // 默认图标
+            return (
+                <span class="icon">
+                    <Icon icon="ant-design:download-outlined" />
+                </span>
+            );
+        }
+
+        /** 渲染文本. */
+        function renderText() {
+            if (props.kgText) {
+                return props.kgText;
+            }
+
+            // 默认文本
+            return kg.t('kg.import-template');
+        }
+        //endregion
+
+        return () => (
+            <Button
+                kg-id={varButton.value?.id}
+                kg-form-id={varButton.value?.frm_id}
+                kg-var-name={varButton.value?.var_nam}
+                kg-cmd={varButton.value?.cmd}
+                kg-permission={varButton.value?.permission_code ?? ''}
+                type={'primary'}
+                disabled={isImportTemplateButtonDisabled.value}
+                ghost={!props.kgPrimary && !isImportTemplateButtonDisabled.value}
+                onClick={onClick}
+                class={attrs.class}
+            >
+                {renderIcon()}
+                {renderText()}
+            </Button>
+        );
+    },
+});

package/component/KgButton/KgButton.Item.tsx

@@ -0,0 +1,128 @@
+import { KgCoreUtil } from '@kengic/core.core';
+import { ConfigProvider, Tooltip } from 'ant-design-vue';
+import { computed, defineComponent } from 'vue';
+import { useKg } from '../../config';
+import { IKgVarButtonProperties, KG__VAR_BUTTON__COLOR, KG__VAR_BUTTON__TYPE } from '../../model';
+import { KgUtil } from '../../util';
+import { useKgVar } from '../KgVar';
+import KgButtonCopy from './KgButton.Copy';
+import KgButtonCreate from './KgButton.Create';
+import KgButtonDelete from './KgButton.Delete';
+import KgButtonExport from './KgButton.Export';
+import KgButtonImport from './KgButton.Import';
+import KgButtonImportTemplate from './KgButton.ImportTemplate';
+import { getProps, IKgButtonItemProps } from './KgButton.model';
+import KgButtonOther from './KgButton.Other';
+import KgButtonSearch from './KgButton.Search';
+import KgButtonUpdate from './KgButton.Update';
+
+// 单个按钮
+export const KgButtonItem = defineComponent({
+    name: 'KgButtonItem',
+    props: getProps(),
+    setup(props) {
+        const kg = useKg();
+        const kgVar = useKgVar();
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        const varButton = computed(() => kgVar.store.getVarButton(kgVar.fid, props.kgVarName));
+        const varButton$Properties = computed(() => KgCoreUtil.tryParseJSON<IKgVarButtonProperties>(varButton.value?.props));
+
+        /**
+         * 样式.
+         */
+        const class$$ = computed<string>(() => {
+            let _class: string = 'kg-button-item';
+
+            // 没有权限, 隐藏按钮,
+            if (KgUtil.getPermissionType(varButton.value?.permission_code) !== 2 && !kg.p(varButton.value?.permission_code)) {
+                _class += ' kg-button-item--no-auth';
+            }
+
+            // 隐藏按钮,
+            if (varButton$Properties.value?.isVisible === false) {
+                _class += ' kg-button-item--invisible';
+            }
+
+            switch (props.kgColor) {
+                case KG__VAR_BUTTON__COLOR.YELLOW:
+                    _class += ' kg-button-item--yellow';
+                    break;
+
+                default:
+                    break;
+            }
+
+            return _class;
+        });
+
+        /**
+         * 组件参数.
+         */
+        const props$$ = computed<IKgButtonItemProps>(() => {
+            const _props = { ...props, class: class$$.value };
+
+            return _props;
+        });
+        //endregion
+
+        //region FUNCTION
+        //----------------------------------------------------------------------------------------------------
+        /**
+         * 渲染文本提示.
+         */
+        function renderTooltip() {
+            if (!varButton$Properties.value?.tooltip || !varButton$Properties.value?.tooltip?.title) {
+                return renderButton();
+            }
+
+            return (
+                <Tooltip
+                    title={kgVar.t2(varButton$Properties.value.tooltip.title)}
+                    placement={varButton$Properties.value.tooltip.placement || undefined}
+                >
+                    {renderButton()}
+                </Tooltip>
+            );
+        }
+
+        /**
+         * 渲染按钮.
+         */
+        function renderButton() {
+            switch (props.kgType) {
+                case KG__VAR_BUTTON__TYPE.SEARCH:
+                    return <KgButtonSearch {...props$$.value} />;
+
+                case KG__VAR_BUTTON__TYPE.CREATE:
+                    return <KgButtonCreate {...props$$.value} />;
+
+                case KG__VAR_BUTTON__TYPE.UPDATE:
+                    return <KgButtonUpdate {...props$$.value} />;
+
+                case KG__VAR_BUTTON__TYPE.COPY:
+                    return <KgButtonCopy {...props$$.value} />;
+
+                case KG__VAR_BUTTON__TYPE.DELETE:
+                    return <KgButtonDelete {...props$$.value} />;
+
+                case KG__VAR_BUTTON__TYPE.EXPORT:
+                    return <KgButtonExport {...props$$.value} />;
+
+                case KG__VAR_BUTTON__TYPE.IMPORT:
+                    return <KgButtonImport {...props$$.value} />;
+
+                case KG__VAR_BUTTON__TYPE.IMPORT_TEMPLATE:
+                    return <KgButtonImportTemplate {...props$$.value} />;
+
+                case KG__VAR_BUTTON__TYPE.OTHER:
+                default:
+                    return <KgButtonOther {...props$$.value} />;
+            }
+        }
+        //endregion
+
+        return () => <ConfigProvider autoInsertSpaceInButton={false}>{renderTooltip()}</ConfigProvider>;
+    },
+});

package/component/KgButton/KgButton.Other.tsx

@@ -0,0 +1,292 @@
+import { Icon } from '@iconify/vue';
+import { KgCoreUtil } from '@kengic/core.core';
+import { Button, notification } from 'ant-design-vue';
+import dayjs from 'dayjs';
+import { isNil } from 'lodash-es';
+import { computed, defineComponent, inject } from 'vue';
+import { useKg } from '../../config';
+import { IKgVarButtonModalProperties, KG, KG__VAR_BUTTON__COLOR } from '../../model';
+import { httpClient, IRequestConfig, IRequestOption } from '../../service';
+import { KgUtil, ModalFunc } from '../../util';
+import { useKgVar } from '../KgVar';
+import { emit, IKgButton$EventListenerParameter$onAfterRequest, IKgButton$EventListenerParameter$onBeforeRequest, IKgButton$EventListenerParameter$onError } from './KgButton.event';
+import { getProps } from './KgButton.model';
+
+// 按钮:其他
+export default defineComponent({
+    name: 'KgButtonOther',
+    props: getProps(),
+    inheritAttrs: false,
+    setup(props, { attrs }) {
+        const $dayjs = inject('$dayjs', dayjs);
+
+        const kg = useKg();
+        const kgVar = useKgVar();
+
+        kgVar.kgButton.$onAction(async ({ name, args }) => {
+            switch (name) {
+                case 'click':
+                    if (args[0].varName === props.kgVarName) {
+                        await onClick();
+                    }
+                    break;
+            }
+        });
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        const varButton = computed(() => kgVar.store.getVarButton(kgVar.fid, props.kgVarName));
+
+        const selectedDataList$$ = computed(() => {
+            if (kgVar.varGridConfig$Props$$.value?.componentVersion === '02') {
+                return kgVar.kgTable02.selectedDataList;
+            }
+
+            return kgVar.kgTable.selectedRows.value;
+        });
+
+        const isOtherButtonDisabled = computed<boolean>(() => {
+            // 参数 kgDisabled 的优先级最高
+            if (!isNil(props.kgDisabled)) {
+                return props.kgDisabled;
+            }
+
+            // 处于加载状态
+            if (props.kgLoading) {
+                return true;
+            }
+
+            // 正在查询表格数据
+            if (kgVar.kgTable.isRetrieving.value || kgVar.kgTable02.isRequesting) {
+                return true;
+            }
+
+            // 未勾选行
+            if (varButton.value?.dis_no_select_flg === 1 && (selectedDataList$$.value?.length ?? 0) === 0) {
+                return true;
+            }
+
+            // 勾选多行
+            if (varButton.value?.dis_mult_select_flg === 1 && (selectedDataList$$.value?.length ?? 0) > 1) {
+                return true;
+            }
+
+            // 没有权限
+            if (KgUtil.getPermissionType(varButton.value?.permission_code) === 2 && !kg.p(varButton.value?.permission_code)) {
+                return true;
+            }
+
+            // 正在创建/更新/复制/删除
+            if (kgVar.isCreating.value || kgVar.isUpdating.value || kgVar.isCopying.value || kgVar.isDeleting.value) {
+                return true;
+            }
+
+            return false;
+        });
+        //endregion
+
+        //region FUNCTION
+        //----------------------------------------------------------------------------------------------------
+        /**
+         * 点击按钮.
+         */
+        async function onClick() {
+            // 如果该函数不为空, 并且该函数返回 true, 表示由调用者自己处理单击事件
+            if (props.onKgClick) {
+                const onKgClick$Result = await props.onKgClick();
+                if (onKgClick$Result) {
+                    kgVar.kgButton.setIsClickIntercepted({ isIntercepted: true, varName: props.kgVarName });
+                    return;
+                } else {
+                    kgVar.kgButton.setIsClickIntercepted({ isIntercepted: false, varName: props.kgVarName });
+                }
+            } else {
+                kgVar.kgButton.setIsClickIntercepted({ isIntercepted: false, varName: props.kgVarName });
+            }
+
+            // 打开提交弹窗. 当前按钮配置了「提交表单配置」, 则打开提交弹窗,
+            if (!!kgVar.kgSubmit.getVarSubmitConfig({ buttonVarName: props.kgVarName })) {
+                kgVar.kgButton.setCurrentButton({ varName: props.kgVarName });
+                return;
+            }
+            // 直接调用接口,
+            else {
+                const requestUrl = props.kgButton?.cmd;
+                if (!requestUrl) {
+                    notification.error({ message: kg.t('kg.KgButton.noApiUrl', {}, '按钮没有配置接口地址') });
+                    return;
+                }
+
+                kgVar.kgButton.setIsClickIntercepted({ varName: props.kgVarName, isIntercepted: false });
+
+                let modalRef: ModalFunc | null = null;
+
+                // 需要显示弹窗
+                if (props.kgButton?.show_modal_flg === 1) {
+                    const kgButtonModalProps = KgCoreUtil.tryParseJSON<IKgVarButtonModalProperties>(props.kgButton?.modal_props);
+                    if (kgButtonModalProps.content) {
+                        kgButtonModalProps.content = kgVar.t2(String(kgButtonModalProps.content));
+                    } else {
+                        // 弹窗的提示消息, 默认为「确认<按钮文本> ?」,
+                        kgButtonModalProps.content = kg.t('kg.confirm') + renderText() + ' ?';
+                    }
+
+                    modalRef = KgUtil.confirm({ onOk: () => doRequest({ modalRef: modalRef, requestUrl: requestUrl! }), ...kgButtonModalProps });
+                }
+                // 不要显示弹窗,
+                else {
+                    doRequest({ modalRef: modalRef, requestUrl: requestUrl! });
+                }
+            }
+        }
+
+        /**
+         * 发起请求.
+         *
+         * @param param 参数.
+         * @param param.modalRef 弹窗对象.
+         * @param param.requestUrl 请求地址.
+         */
+        async function doRequest(param: { modalRef: ModalFunc | null; requestUrl: string }) {
+            const { modalRef, requestUrl } = param ?? {};
+
+            modalRef?.showLoading();
+            kgVar.store.setIsOtherRequesting(kgVar.fid, true);
+
+            try {
+                const requestParamRecord = KgUtil.parseParams(KgUtil.parseRequestParamsToJSON(props.kgButton?.cmd_prm ?? ''), kgVar.fid, $dayjs);
+
+                const requestMethod = (props.kgButton?.cmd_method as any) ?? 'POST';
+
+                const requestConfig: IRequestConfig = {
+                    url: requestUrl,
+                    method: requestMethod,
+                    params: requestParamRecord,
+                    data: selectedDataList$$.value ?? [],
+                    headers: {
+                        [KG.HTTP_HEADER__KG_FORM_ID]: kgVar.fid,
+                        [KG.HTTP_HEADER__KG_BUTTON_VAR_NAME]: props.kgButton?.var_nam ?? '',
+                    },
+                };
+
+                const requestOption: IRequestOption = {};
+
+                const eventResult$onBeforeRequest = await emit<IKgButton$EventListenerParameter$onBeforeRequest>({
+                    event: 'onBeforeRequest',
+                    id: kgVar.fid,
+                    parameter: {
+                        requestConfig: requestConfig,
+                        requestOptions: requestOption,
+                        varButton: varButton.value!,
+                    },
+                });
+                if (eventResult$onBeforeRequest) {
+                    return;
+                }
+
+                const result = await httpClient().request(requestConfig, requestOption);
+
+                const eventResult$onAfterRequest = await emit<IKgButton$EventListenerParameter$onAfterRequest>({
+                    event: 'onAfterRequest',
+                    id: kgVar.fid,
+                    parameter: {
+                        requestConfig: requestConfig,
+                        result: result,
+                        varButton: varButton.value!,
+                    },
+                });
+                if (eventResult$onAfterRequest) {
+                    return;
+                }
+
+                if (props.kgButton?.reload_all_after_done_flg === 1) {
+                    if (props.kgButton?.show_success_message_flg !== 0) {
+                        notification.success({ message: kg.t('kg.executeSuccess') });
+                    }
+
+                    kgVar.kgSearch.search({
+                        isPreserveSelectedRows: props.kgButton?.re_select_after_reload_flg !== 0,
+                        isSearchFirstPage: props.kgButton?.re_select_after_reload_flg === 0,
+                    });
+                } else {
+                    if (props.kgButton?.show_success_message_flg !== 0) {
+                        notification.success({ message: kg.t('kg.executeSuccess') });
+                    }
+                }
+            } catch (e) {
+                const eventResult$onError = await emit<IKgButton$EventListenerParameter$onError>({
+                    event: 'onError',
+                    id: kgVar.fid,
+                    parameter: { button: varButton.value, e: e },
+                });
+                console.error(e);
+            } finally {
+                kgVar.store.setIsOtherRequesting(kgVar.fid, false);
+                modalRef?.hideLoading();
+            }
+        }
+
+        /**
+         * 渲染图标.
+         */
+        function renderIcon() {
+            // 正在加载, 显示加载图标
+            if (props.kgLoading) {
+                return (
+                    <Icon
+                        icon="eos-icons:bubble-loading"
+                        width={14}
+                        height={14}
+                    />
+                );
+            }
+
+            if (props.kgIcon) {
+                return (
+                    <span class="icon">
+                        <Icon icon={props.kgIcon} />
+                    </span>
+                );
+            }
+
+            // 默认图标
+            return (
+                <span class="icon">
+                    <Icon icon="ant-design:info-circle-outlined" />
+                </span>
+            );
+        }
+
+        /**
+         * 渲染文本.
+         */
+        function renderText() {
+            if (props.kgText) {
+                return props.kgText;
+            }
+
+            // 默认文本
+            return props.kgVarName;
+        }
+        //endregion
+
+        return () => (
+            <Button
+                kg-id={varButton.value?.id}
+                kg-form-id={varButton.value?.frm_id}
+                kg-var-name={varButton.value?.var_nam}
+                kg-cmd={varButton.value?.cmd}
+                kg-permission={varButton.value?.permission_code ?? ''}
+                type={'primary'}
+                disabled={isOtherButtonDisabled.value}
+                danger={props.kgColor === KG__VAR_BUTTON__COLOR.RED}
+                ghost={!props.kgPrimary && !isOtherButtonDisabled.value}
+                onClick={onClick}
+                class={attrs.class}
+            >
+                {renderIcon()}
+                {renderText()}
+            </Button>
+        );
+    },
+});