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

package/component/KgAppSelect/KgAppSelect.store.ts

@@ -0,0 +1,162 @@
+import { ____DEBUG____, ____ERROR____ } from '@kengic/core.core';
+import { notification } from 'ant-design-vue';
+import { defineStore } from 'pinia';
+import { computed, ref, unref } from 'vue';
+import { useKg } from '../../config';
+import { IKgStoreDefinition } from '../../model';
+import { Menu } from '../../project/src/router/types';
+import { KgUtil } from '../../util';
+import { emit, IKgAppSelectOnGotoAppEventListenerParameter, IKgAppSelectOnGotoPathEventListenerParameter } from './KgAppSelect.event';
+
+export interface IUseKgAppSelectStoreGetters {
+    currentApp: string | null;
+}
+
+export interface IUseKgAppSelectStoreActions {
+    /**
+     * 进入某个模块.
+     *
+     * @param app 要进入的模块.
+     */
+    gotoApp(app: string): Promise<void>;
+
+    /**
+     * 进入某个地址.
+     * 如果该地址不属于当前模块, 则先切换到对应的模块, 再进入该地址.
+     *
+     * @param path 要进入的地址.
+     */
+    gotoPath(path: string): Promise<void>;
+
+    /**
+     * 初始化.
+     *   1. 需要根据当前地址设置当前模块.
+     */
+    init(): void;
+
+    /**
+     * 判断某个菜单是否属于当前模块.
+     *
+     * @param menu 菜单.
+     * @return {} 如果菜单属于当前模块则返回 true, 否则返回 false.
+     */
+    isMenuInCurrentApp(menu: Menu): boolean;
+}
+
+// @ts-ignore
+export const useKgAppSelectStore: IKgStoreDefinition<IUseKgAppSelectStoreGetters, IUseKgAppSelectStoreActions> = defineStore('KgAppSelect', () => {
+    //region STATE
+    //----------------------------------------------------------------------------------------------------
+    /**
+     * 当前模块.
+     */
+    const currentApp$ = ref<string | null>(null);
+    //----------------------------------------------------------------------------------------------------
+    //endregion
+
+    //region GETTERS
+    //----------------------------------------------------------------------------------------------------
+    const currentApp$$ = computed<string | null>(() => currentApp$.value);
+    //----------------------------------------------------------------------------------------------------
+    //endregion
+
+    //region FUNCTION
+    //----------------------------------------------------------------------------------------------------
+    async function gotoApp(app: string): Promise<void> {
+        const kg = useKg();
+        if (!kg.router) {
+            ____ERROR____('KgAppSelect | kg.router 为空.');
+            return;
+        }
+
+        currentApp$.value = app;
+
+        // 获取模块首页地址
+        let toPath: string | undefined = KgUtil.getAppIndexPath(app);
+
+        if (!toPath || !KgUtil.isPathAuthenticated(toPath)) {
+            ____DEBUG____(`KgAppSelect | gotoApp() | 模块首页没有访问权限.`, { app, path: toPath });
+            toPath = KgUtil.getFirstLeafMenu(app)?.path;
+        }
+
+        if (!toPath || !KgUtil.isPathAuthenticated(toPath)) {
+            ____DEBUG____(`KgAppSelect | gotoApp() | 该模块下没有可访问的菜单.`, { app, path: toPath });
+            notification.error({ message: '该模块下没有可访问的菜单.' });
+            return;
+        }
+
+        // 当前地址不是要进入的模块首页, 则先关闭所有的标签页, 再进入模块首页
+        const { path } = unref(kg.router?.currentRoute);
+        if (toPath !== path) {
+            try {
+                await emit<IKgAppSelectOnGotoAppEventListenerParameter>({ event: 'onGotoApp', parameter: { app: app } });
+                await kg.router?.push(toPath);
+            } catch (e) {
+                ____ERROR____(`KgAppSelect | gotoApp() | 进入模块失败.`, { app, path: toPath });
+            }
+        }
+    }
+
+    async function gotoPath(path: string): Promise<void> {
+        const kg = useKg();
+        if (!kg.router) {
+            ____ERROR____('KgAppSelect | kg.router 为空.');
+            return;
+        }
+
+        const app = KgUtil.getAppByPath(path);
+
+        // 需要切换模块, 然后进入地址
+        if (app !== currentApp$.value) {
+            currentApp$.value = app;
+
+            const currentPath = unref(kg.router?.currentRoute)?.path;
+            if (path !== currentPath) {
+                await emit<IKgAppSelectOnGotoPathEventListenerParameter>({ event: 'onGotoPath', parameter: { path: path } });
+                await kg.router?.push(path);
+            }
+        }
+        // 不用切换模块, 直接进入地址
+        else {
+            const currentPath = unref(kg.router?.currentRoute)?.path;
+            if (path !== currentPath) {
+                await kg.router?.push(path);
+            }
+        }
+    }
+
+    function isMenuInCurrentApp(menu: Menu): boolean {
+        // 每个模块都需要显示首页, 因此首页始终属于当前模块
+        if (menu.path === '/home') {
+            return true;
+        }
+
+        // 始终隐藏 PDA 的菜单
+        if (menu.app === 'PDA') {
+            return false;
+        }
+
+        return KgUtil.isPathInApp(menu.path, currentApp$.value);
+    }
+
+    function init(): void {
+        const kg = useKg();
+        if (!kg.router) {
+            ____ERROR____('kg.router 为空.');
+            return;
+        }
+
+        const { path } = unref(kg.router?.currentRoute);
+
+        // 设置当前模块
+        const app = KgUtil.getAppByPath(path);
+        if (app !== currentApp$.value) {
+            currentApp$.value = app;
+        }
+    }
+
+    //----------------------------------------------------------------------------------------------------
+    //endregion
+
+    return { currentApp: currentApp$$, currentApp$: currentApp$, gotoApp: gotoApp, gotoPath: gotoPath, init: init, isMenuInCurrentApp: isMenuInCurrentApp };
+});

package/component/KgAppSelect/KgAppSelect.tsx

@@ -0,0 +1,60 @@
+import { Icon } from '@iconify/vue';
+import { Select, SelectOption, Tooltip } from 'ant-design-vue';
+import { defineComponent, PropType } from 'vue';
+import { useKg } from '../../config';
+import { KG_APP } from '../../model';
+import { KgUtil } from '../../util';
+import { useKgAppSelect } from './KgAppSelect.hooks';
+import './KgAppSelect.less';
+
+export const getProps = () => ({
+    /** 模块列表. */
+    kgApps: {
+        type: Array as PropType<Array<{ id: string; i18n: string }>>,
+        default: (): Array<{ id: string; i18n: string }> => {
+            return [
+                { id: KG_APP.WMS_DATA_MANAGER, i18n: 'kg.KgAppSelect.dataManager' },
+                { id: KG_APP.WMS_BUSINESS_MANAGER, i18n: 'kg.KgAppSelect.businessManager' },
+                { id: KG_APP.SYS, i18n: 'kg.KgAppSelect.sys' },
+            ];
+        },
+    },
+});
+
+// 模块切换
+export default defineComponent({
+    name: 'KgAppSelect',
+    props: getProps(),
+    setup(props) {
+        const kg = useKg();
+        const kgAppSelect = useKgAppSelect();
+
+        return () => (
+            <Tooltip
+                title={kg.t('kg.KgAppSelect.tooltip')}
+                placement="right"
+            >
+                <Select
+                    value={kgAppSelect.currentApp ?? undefined}
+                    onChange={(value) => kgAppSelect.gotoApp(value as any)}
+                    dropdownClassName="kg-app-select--dropdown"
+                    class="kg-app-select"
+                    style="width: 100%"
+                >
+                    {{
+                        default: () => (
+                            <>
+                                {props.kgApps
+                                    .filter((i) => KgUtil.isAppAuthenticated(i.id))
+                                    .map(({ id, i18n }) => (
+                                        <SelectOption value={id}>{kg.t(i18n)}</SelectOption>
+                                    ))}
+                            </>
+                        ),
+                        suffixIcon: () => <Icon icon="ant-design:caret-down-outlined" />,
+                    }}
+                </Select>
+            </Tooltip>
+        );
+    },
+});

package/component/KgAppSelect/index.ts

@@ -0,0 +1,4 @@
+export { default as KgAppSelect } from './KgAppSelect';
+
+export * from './KgAppSelect.hooks';
+export * from './KgAppSelect.store';

package/component/KgButton/KgButton.Copy.tsx

@@ -0,0 +1,143 @@
+import { Icon } from '@iconify/vue';
+import { Button, notification } from 'ant-design-vue';
+import { isNil } from 'lodash-es';
+import { computed, defineComponent } from 'vue';
+import { useKg } from '../../config';
+import { KG__VAR_BUTTON__TYPE } from '../../model';
+import { KgUtil } from '../../util';
+import { useKgVar } from '../KgVar';
+import { getProps } from './KgButton.model';
+
+// 按钮:复制
+export default defineComponent({
+    name: 'KgButtonCopy',
+    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.COPY) {
+                        await onClick();
+                    }
+                    break;
+            }
+        });
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        const varButton = computed(() => kgVar.store.getVarButton(kgVar.fid, props.kgVarName));
+
+        const isCopyButtonDisabled = computed<boolean>(() => {
+            // 参数 kgDisabled 的优先级最高
+            if (!isNil(props.kgDisabled)) {
+                return props.kgDisabled;
+            }
+
+            if (kgVar.isCreating.value || kgVar.isUpdating.value || kgVar.isDeleting.value) {
+                return true;
+            }
+
+            // 正在查询表格数据
+            if (kgVar.kgTable.isRetrieving.value || kgVar.kgTable02.isRequesting) {
+                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;
+        });
+        //----------------------------------------------------------------------------------------------------
+        //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.COPY, isIntercepted: true });
+                    return;
+                } else {
+                    kgVar.kgButton.setIsClickIntercepted({ type: KG__VAR_BUTTON__TYPE.COPY, isIntercepted: false });
+                }
+            } else {
+                kgVar.kgButton.setIsClickIntercepted({ type: KG__VAR_BUTTON__TYPE.COPY, isIntercepted: false });
+            }
+
+            // 必须配置「提交表单配置」
+            if (!kgVar.kgSubmit.getVarSubmitConfig({ buttonVarName: props.kgVarName })) {
+                notification.error({ message: kg.t('kg.KgButton.noVarSubmitConfig') });
+                return;
+            }
+
+            kgVar.kgButton.setCurrentButton({ type: KG__VAR_BUTTON__TYPE.COPY });
+        }
+
+        /** 渲染图标. */
+        function renderIcon() {
+            if (props.kgIcon) {
+                return (
+                    <span class="icon">
+                        <Icon icon={props.kgIcon} />
+                    </span>
+                );
+            }
+
+            // 默认图标
+            return (
+                <span class="icon">
+                    <Icon icon="ant-design:copy-outlined" />
+                </span>
+            );
+        }
+
+        /** 渲染文本. */
+        function renderText() {
+            if (props.kgText) {
+                return props.kgText;
+            }
+
+            // 默认文本
+            return kg.t('kg.copy');
+        }
+        //----------------------------------------------------------------------------------------------------
+        //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={isCopyButtonDisabled.value}
+                ghost={!props.kgPrimary && !isCopyButtonDisabled.value}
+                onClick={onClick}
+                class={attrs.class}
+            >
+                {renderIcon()}
+                {renderText()}
+            </Button>
+        );
+    },
+});

package/component/KgButton/KgButton.Create.tsx

@@ -0,0 +1,208 @@
+import { Icon } from '@iconify/vue';
+import { Button, notification } from 'ant-design-vue';
+import { isNil } from 'lodash-es';
+import { computed, defineComponent } from 'vue';
+import { useKg } from '../../config';
+import { KG__VAR_BUTTON__COLOR, KG__VAR_BUTTON__TYPE, KG__VAR_SUBMIT_CONFIG__DISPLAY_TYPE } from '../../model';
+import { KgUtil } from '../../util';
+import { useKgVar } from '../KgVar';
+import { getProps } from './KgButton.model';
+
+// 按钮:创建
+export default defineComponent({
+    name: 'KgButtonCreate',
+    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.CREATE) {
+                        await onClick();
+                    }
+                    break;
+            }
+        });
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        const varButton = computed(() => kgVar.store.getVarButton(kgVar.fid, props.kgVarName));
+
+        /** 创建按钮是否禁用. */
+        const isCreateButtonDisabled = 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 (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 isButtonCancelDisabled = computed<boolean>(() => !!kgVar.isCreatingRequesting$$.value);
+        //endregion
+
+        //region FUNCTION
+        //----------------------------------------------------------------------------------------------------
+        /**
+         * 点击按钮.
+         */
+        async function onClick(): Promise<void> {
+            // 如果参数 onKgClick 不为空, 并且它的返回结果为 true, 表示由调用者自己处理单击事件,
+            if (props.onKgClick) {
+                const onKgClick$Result = await props.onKgClick();
+                if (onKgClick$Result) {
+                    kgVar.kgButton.setIsClickIntercepted({ type: KG__VAR_BUTTON__TYPE.CREATE, isIntercepted: true });
+                    return;
+                } else {
+                    kgVar.kgButton.setIsClickIntercepted({ type: KG__VAR_BUTTON__TYPE.CREATE, isIntercepted: false });
+                }
+            } else {
+                kgVar.kgButton.setIsClickIntercepted({ type: KG__VAR_BUTTON__TYPE.CREATE, isIntercepted: false });
+            }
+
+            // 必须配置「提交表单配置」
+            if (!kgVar.kgSubmit.getVarSubmitConfig({ buttonVarName: props.kgVarName })) {
+                notification.error({ message: kg.t('kg.KgButton.noVarSubmitConfig') });
+                return;
+            }
+
+            kgVar.kgButton.setCurrentButton({ type: KG__VAR_BUTTON__TYPE.CREATE });
+        }
+
+        /** 保存. */
+        function onSave() {
+            kgVar.kgSubmit.clickOk();
+        }
+
+        /** 取消. */
+        function onCancel() {
+            kgVar.kgSubmit.clickCancel();
+        }
+
+        /** 渲染图标. */
+        function renderIcon() {
+            if (props.kgIcon) {
+                return (
+                    <span class="icon">
+                        <Icon icon={props.kgIcon} />
+                    </span>
+                );
+            }
+
+            // 默认图标
+            return (
+                <span class="icon">
+                    <Icon icon="ant-design:plus-outlined" />
+                </span>
+            );
+        }
+
+        /** 渲染文本. */
+        function renderText() {
+            if (props.kgText) {
+                return props.kgText;
+            }
+
+            // 默认文本
+            return kg.t('kg.create', {}, '创建');
+        }
+
+        /** 渲染创建按钮. */
+        function renderCreateButton() {
+            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={isCreateButtonDisabled.value}
+                    danger={props.kgColor === KG__VAR_BUTTON__COLOR.RED}
+                    ghost={props.kgPrimary === false && !isCreateButtonDisabled.value}
+                    onClick={onClick}
+                    class={attrs.class}
+                >
+                    {renderIcon()}
+                    {renderText()}
+                </Button>
+            );
+        }
+
+        /** 渲染保存按钮. */
+        function renderSaveButton() {
+            // 如果表单的显示方式不为 TABLE, 或者不是正在创建, 则不显示保存和取消按钮,
+            if (kgVar.kgSubmit.currentVarSubmitConfig$DisplayType.value !== KG__VAR_SUBMIT_CONFIG__DISPLAY_TYPE.TABLE || !kgVar.isCreating.value) {
+                return null;
+            }
+
+            return (
+                <>
+                    <Button
+                        type={'primary'}
+                        onClick={onSave}
+                        disabled={!!kgVar.isCreatingRequesting$$.value}
+                    >
+                        {kgVar.isCreatingRequesting$$.value ? (
+                            <Icon
+                                icon="eos-icons:bubble-loading"
+                                width={14}
+                                height={14}
+                            />
+                        ) : (
+                            <Icon icon="ant-design:check-outlined" />
+                        )}
+                        {kg.t('kg.save')}
+                    </Button>
+                    <Button
+                        type={'primary'}
+                        ghost={!isButtonCancelDisabled.value}
+                        disabled={isButtonCancelDisabled.value}
+                        onClick={onCancel}
+                    >
+                        <Icon icon="ant-design:stop-outlined" />
+                        {kg.t('kg.cancel')}
+                    </Button>
+                </>
+            );
+        }
+        //endregion
+
+        return () => (
+            <>
+                {renderCreateButton()}
+                {renderSaveButton()}
+            </>
+        );
+    },
+});