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

package/component/KgWarehouse/KgWarehouse.hooks.ts

@@ -0,0 +1,92 @@
+import { ____DEBUG____, IRemoveEventListener } from '@kengic/core.core';
+import { computed, ComputedRef, inject } from 'vue';
+import { WarehouseDTO } from '../../api/WMS/models';
+import { pinia, useKg } from '../../config';
+import { KG } from '../../model';
+import { kgOnEventFactory } from '../../util';
+import { eventListeners, IKgWarehouse$Event, IKgWarehouse$EventListener$onCancel, IKgWarehouse$EventListener$onMounted, IKgWarehouse$EventListener$onOk } from './KgWarehouse.event';
+import { buildKgWarehouseStore } from './KgWarehouse.store';
+
+export type IUseKgWarehouse = {
+    /**
+     * 监听事件: 点击取消按钮.
+     *
+     * @param listener 事件监听函数.
+     * @param isOnce 是否只会触发一次. 默认为 undefined.
+     */
+    onCancel(listener: IKgWarehouse$EventListener$onCancel, isOnce?: boolean): IRemoveEventListener;
+
+    /**
+     * 监听事件: 组件加载完成.
+     *
+     * @param listener 事件监听函数.
+     * @param isOnce 是否只会触发一次. 默认为 undefined.
+     */
+    onMounted(listener: IKgWarehouse$EventListener$onMounted, isOnce?: boolean): IRemoveEventListener;
+
+    /**
+     * 监听事件: 点击确定按钮.
+     *
+     * @param listener 事件监听函数.
+     * @param isOnce 是否只会触发一次. 默认为 undefined.
+     */
+    onOk(listener: IKgWarehouse$EventListener$onOk, isOnce?: boolean): IRemoveEventListener;
+
+    store: ReturnType<ReturnType<typeof buildKgWarehouseStore>>;
+
+    /**
+     * 是否显示弹窗.
+     */
+    visible: ComputedRef<boolean>;
+
+    /**
+     * 当前仓库.
+     */
+    warehouse: ComputedRef<WarehouseDTO | null>;
+};
+
+/**
+ *
+ */
+export function useKgWarehouse(): IUseKgWarehouse {
+    // 因为仓库选择是一个全局的功能, 因此标识固定不可修改,
+    let ID: string = '';
+
+    const kg = useKg();
+
+    const store = buildKgWarehouseStore(ID)(pinia);
+
+    return {
+        onCancel: kgOnEventFactory<IKgWarehouse$Event, IKgWarehouse$EventListener$onCancel>({ eventListeners: eventListeners, event: 'onCancel', id: ID }),
+        onMounted: kgOnEventFactory<IKgWarehouse$Event, IKgWarehouse$EventListener$onMounted>({ eventListeners: eventListeners, event: 'onMounted', id: ID }),
+        onOk: kgOnEventFactory<IKgWarehouse$Event, IKgWarehouse$EventListener$onOk>({ eventListeners: eventListeners, event: 'onOk', id: ID }),
+        store: store,
+        visible: computed(() => store.getVisible),
+        warehouse: computed<WarehouseDTO | null>(() => {
+            if (!store.getWarehouse) {
+                return null;
+            }
+
+            //region 如果当前仓库(可能来自浏览器的缓存)不在仓库列表中, 比如切换登录用户, 或者用户可访问的仓库发生变更, 则返回 null, 表示需要重新选择仓库
+            //----------------------------------------------------------------------------------------------------
+
+            // 当前仓库编号
+            const currentWarehouseID = store.getWarehouse?.whId;
+            // 用户仓库列表
+            const userWarehouseList = kg.useUserStore?.(pinia)?.getUserWarehouses;
+
+            ____DEBUG____(`useKgWarehouse() | warehouse | 当前仓库: ${currentWarehouseID}`);
+            ____DEBUG____(`useKgWarehouse() | warehouse | 用户所有仓库:`, { userWarehouses: userWarehouseList });
+            // 如果 userWarehouseList 为 undefined, 表示 userWarehouseList 数据尚未完成初始化,
+            if (userWarehouseList !== undefined && !userWarehouseList?.find((i) => i.wh_id === currentWarehouseID)) {
+                ____DEBUG____(`useKgWarehouse() | warehouse | 需要重新选择仓库.`);
+                return null;
+            }
+
+            //----------------------------------------------------------------------------------------------------
+            //endregion
+
+            return store.getWarehouse;
+        }),
+    };
+}

package/component/KgWarehouse/KgWarehouse.less

@@ -0,0 +1,78 @@
+.kg-warehouse {
+    font-size: 14px !important;
+    padding: 0 6px !important;
+    border-right: 1px dashed #f0f0f0;
+
+    &.kg-warehouse--invisible {
+        display: none !important;
+    }
+}
+
+.kg-warehouse-modal {
+    .ant-input-affix-wrapper {
+        border-radius: 3px;
+        padding-right: 4px;
+        margin: 1px;
+        width: calc(100% - 2px);
+    }
+
+    .kg-flex-table {
+        border: none;
+        border-radius: 0px;
+
+        .ant-empty-normal {
+            margin: 0;
+            height: 36.75px;
+
+            .ant-empty-image {
+                display: none !important;
+            }
+
+            .ant-empty-description {
+                margin: 0 !important;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        }
+
+        .ant-table-body {
+            overflow: hidden !important;
+        }
+
+        tr.ant-table-row {
+            cursor: pointer;
+
+            div.address {
+                color: rgba(0, 0, 0, 0.45);
+            }
+
+            img {
+                display: inline-block;
+                width: 32px;
+                height: 32px;
+                margin-top: -8px;
+                padding-right: 2px;
+            }
+
+            &.selected {
+                background-color: #e6f7ff !important;
+                color: #1890ff !important;
+
+                &:hover,
+                &:focus,
+                &:active {
+                    > td {
+                        background-color: #e6f7ff !important;
+                        color: #1890ff !important;
+                    }
+                }
+
+                div.address {
+                    color: #1890ff !important;
+                }
+            }
+        }
+    }
+}

package/component/KgWarehouse/KgWarehouse.store.ts

@@ -0,0 +1,135 @@
+import { isArray } from 'lodash-es';
+import { defineStore } from 'pinia';
+import storejs from 'store';
+import { computed, ref, toRaw, unref } from 'vue';
+import { WarehouseDTO } from '../../api/WMS/models';
+import { pinia, useKg } from '../../config';
+import { IKgStoreDefinition } from '../../model';
+
+const STORE_KEY = 'KgWarehouse.warehouse';
+
+export interface IUseKgWarehouseStoreGetters {
+    /**
+     * 是否显示弹窗.
+     */
+    getVisible: boolean;
+
+    /**
+     * 当前仓库.
+     */
+    getWarehouse: WarehouseDTO | null;
+}
+
+export interface IUseKgWarehouseStoreActions {
+    /**
+     * 设置是否显示弹窗.
+     *
+     * @param value 是否显示.
+     */
+    setVisible(value: boolean): void;
+
+    /**
+     * 设置当前仓库.
+     *
+     * @param value 当前仓库.
+     */
+    setWarehouse(value?: WarehouseDTO | null): void;
+}
+
+/**
+ * key 为界面标识, value 为该界面的状态管理定义.
+ */
+const storeDefinitionRecord: Record<string, IKgStoreDefinition<IUseKgWarehouseStoreGetters, IUseKgWarehouseStoreActions>> = {};
+
+export function buildKgWarehouseStore(id: string | null | undefined): IKgStoreDefinition<IUseKgWarehouseStoreGetters, IUseKgWarehouseStoreActions> {
+    const ID = id ?? '';
+
+    if (!storeDefinitionRecord[ID]) {
+        storeDefinitionRecord[ID] = defineStore(`KgWarehouse[${id}]`, () => {
+            //region DATA
+            //----------------------------------------------------------------------------------------------------
+            //----------------------------------------------------------------------------------------------------
+            //endregion
+
+            //region STATE
+            //----------------------------------------------------------------------------------------------------
+            const visible$ = ref<boolean>(false);
+            const warehouse$ = ref<WarehouseDTO | null>(null);
+            //----------------------------------------------------------------------------------------------------
+            //endregion
+
+            //region GETTERS
+            //----------------------------------------------------------------------------------------------------
+            const getVisible$$ = computed<boolean>(() => visible$.value);
+            const getWarehouse$$ = computed<WarehouseDTO | null>(() => warehouse$.value);
+            //----------------------------------------------------------------------------------------------------
+            //endregion
+
+            //region FUNCTION
+            //----------------------------------------------------------------------------------------------------
+
+            //----------------------------------------------------------------------------------------------------
+            //endregion
+
+            //region ACTIONS
+            //----------------------------------------------------------------------------------------------------
+            function setVisible(value: boolean): void {
+                visible$.value = value;
+            }
+
+            function setWarehouse(value?: WarehouseDTO | null): void {
+                const kg = useKg();
+
+                const username = kg.useUserStore?.(pinia)?.userInfo?.username;
+
+                let storeWarehouseList = storejs.get(STORE_KEY, null);
+
+                // 本地存储中是旧的数据格式
+                if (!isArray(storeWarehouseList)) {
+                    storeWarehouseList = [];
+                    storejs.set(STORE_KEY, []);
+                }
+
+                const storeWarehouse = storeWarehouseList.find((i: any) => i.username === username);
+
+                // 未选择仓库
+                if (!value) {
+                    warehouse$.value = null;
+
+                    if (storeWarehouse) {
+                        storeWarehouse.warehouse = null;
+                        storejs.set(STORE_KEY, storeWarehouseList);
+                    }
+                }
+                // 有选择仓库
+                else {
+                    warehouse$.value = toRaw(unref(value));
+
+                    // 已经缓存过仓库, 直接更新,
+                    if (storeWarehouse) {
+                        storeWarehouse.warehouse = warehouse$.value;
+                    }
+                    // 尚未缓存过仓库, 添加缓存,
+                    else {
+                        storeWarehouseList.push({ username: username, warehouse: warehouse$.value });
+                    }
+
+                    storejs.set(STORE_KEY, storeWarehouseList);
+                }
+            }
+            //----------------------------------------------------------------------------------------------------
+            //endregion
+
+            return {
+                getVisible: getVisible$$,
+                getWarehouse: getWarehouse$$,
+                setVisible: setVisible,
+                setWarehouse: setWarehouse,
+                visible$: visible$,
+                warehouse$: warehouse$,
+            };
+        }) as any;
+    }
+
+    return storeDefinitionRecord[ID];
+}

package/component/KgWarehouse/KgWarehouse.tsx

@@ -0,0 +1,321 @@
+import { Icon } from '@iconify/vue';
+import { ____DEBUG____ } from '@kengic/core.core';
+import { Checkbox, Input, Table, Tooltip } from 'ant-design-vue';
+import { ColumnsType } from 'ant-design-vue/es/table';
+import { computed, defineComponent, ExtractPropTypes, onMounted, PropType, reactive, ref, watch } from 'vue';
+import { API } from '../../api';
+import { SysUserWarehouseDTO, WarehouseDTO } from '../../api/WMS/models';
+import IMG_WAREHOUSE_000000 from '../../asset/images/warehouse.000000.svg';
+import IMG_WAREHOUSE_1890ff from '../../asset/images/warehouse.1890ff.svg';
+import { pinia, useKg } from '../../config';
+import { KgUtil } from '../../util';
+import { KgModal } from '../KgModal';
+import { emit, IKgWarehouse$EventListenerParameter$onCancel, IKgWarehouse$EventListenerParameter$onMounted, IKgWarehouse$EventListenerParameter$onOk } from './KgWarehouse.event';
+import { useKgWarehouse } from './KgWarehouse.hooks';
+import './KgWarehouse.less';
+
+export const getProps = () => ({
+    /**
+     * <p>是否隐藏.</p>
+     * <p>此组件需要在不同的地方使用,</p>
+     * <ul>
+     *     <li>在有的地方需要显示当前选择的仓库, 并且可以通过点击打开弹窗, 比如顶部导航栏,</li>
+     *     <li>在有的地方, 不需要显示此组件, 用户通过参数控制是否打开弹窗, 比如登录页,</li>
+     * </ul>
+     *
+     * @default undefined
+     */
+    kgInvisible: Boolean as PropType<boolean>,
+
+    /** @deprecated 已弃用, 请使用 {@link IUseKgWarehouse.onOk} */
+    onKgOk: Function as PropType<() => void>,
+});
+
+export type IKgWarehouseProps = Partial<ExtractPropTypes<ReturnType<typeof getProps>>>;
+
+// 仓库选择
+export default defineComponent({
+    emits: ['kgOk'],
+    name: 'KgWarehouse',
+    props: getProps(),
+    setup(props, { emit: _emit }) {
+        const kg = useKg();
+        const kgWarehouse = useKgWarehouse();
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        const getClass = computed(() => {
+            let _class = 'jeecg-layout-header-action__item kg-warehouse';
+
+            if (!isOn.value || props.kgInvisible) {
+                _class += ' kg-warehouse--invisible';
+            }
+
+            return _class;
+        });
+        /** 查询关键字. */
+        const key = ref<string>('');
+        /** 当前勾选的仓库. */
+        const currentWarehouse = ref<WarehouseDTO | null>(null);
+        /** 正在查询. */
+        const isRequesting = ref<boolean>(false);
+        const columns = reactive<ColumnsType>([
+            {
+                title: '',
+                width: 40,
+                align: 'center',
+                customRender: ({ record }) => {
+                    const row = record as WarehouseDTO;
+
+                    return <Checkbox checked={row.whId === currentWarehouse.value?.whId}></Checkbox>;
+                },
+            },
+            {
+                width: 46,
+                align: 'center',
+                customRender: ({ record }) => {
+                    const row = record as WarehouseDTO;
+                    if (row.whId === currentWarehouse.value?.whId) {
+                        return <img src={IMG_WAREHOUSE_1890ff} />;
+                    } else {
+                        return <img src={IMG_WAREHOUSE_000000} />;
+                    }
+                },
+            },
+            {
+                customRender: ({ record }) => {
+                    const row = record as WarehouseDTO;
+                    return (
+                        <div>
+                            <div>
+                                {row.whDsc ?? ' '} - {row.whId ?? ' '}
+                            </div>
+                            <div class="address">{row.adrnam ?? ' '}</div>
+                        </div>
+                    );
+                },
+            },
+        ]);
+        /** 所有仓库. */
+        const warehouses = ref<Array<WarehouseDTO>>([]);
+        /** 根据搜索关键字过滤后的仓库. */
+        const filteredDatas = computed(() => {
+            const _key = key.value?.toUpperCase();
+            return warehouses.value.filter((i) => i.whDsc?.toUpperCase()?.includes(_key) || i.whId?.toUpperCase()?.includes(_key) || i.adrId?.toUpperCase()?.includes(_key));
+        });
+        /** 是否启用仓库选择功能. */
+        const isOn = computed(() => kg.option.KgWarehouse?.on !== false);
+        /** 用户仓库列表. */
+        const userWarehouses = computed<Array<SysUserWarehouseDTO>>(() => kg.useUserStore?.(pinia)?.getUserWarehouses ?? []);
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        //region WATCH
+        //----------------------------------------------------------------------------------------------------
+        watch(
+            kgWarehouse.visible,
+            (visible) => {
+                if (!isOn.value) {
+                    return;
+                }
+
+                if (visible) {
+                    onOpen();
+                } else {
+                    onClose();
+                }
+            },
+            { immediate: true },
+        );
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        //region FUNCTION
+        //----------------------------------------------------------------------------------------------------
+        function onClick() {
+            if (!isOn.value) {
+                return;
+            }
+
+            kgWarehouse.store.setVisible(true);
+        }
+
+        /**
+         * 打开弹窗.
+         */
+        function onOpen() {
+            requestWarehouseList();
+        }
+
+        /**
+         * 关闭弹窗.
+         */
+        function onClose() {
+            key.value = '';
+            warehouses.value = [];
+            currentWarehouse.value = null;
+        }
+
+        /**
+         * 确定.
+         */
+        function onOk() {
+            if (!currentWarehouse.value) {
+                return;
+            }
+
+            if (props.kgInvisible) {
+                kgWarehouse.store.setWarehouse(currentWarehouse.value);
+                _emit('kgOk');
+                emit<IKgWarehouse$EventListenerParameter$onOk>({ event: 'onOk', id: '', parameter: {} });
+            } else {
+                if (currentWarehouse.value.whId !== kgWarehouse.warehouse.value?.whId) {
+                    kgWarehouse.store.setWarehouse(currentWarehouse.value);
+                    KgUtil.confirm({
+                        content: kg.t('kg.KgWarehouse.reloadMessage'),
+                        kgHideCancelButton: true,
+                        okButtonProps: { danger: false },
+                        okText: kg.t('kg.refresh'),
+                        onOk: () => {
+                            window.location.reload();
+                        },
+                    });
+                }
+            }
+
+            kgWarehouse.store.setVisible(false);
+        }
+
+        /**
+         * 取消.
+         */
+        function onCancel() {
+            kgWarehouse.store.setVisible(false);
+            emit<IKgWarehouse$EventListenerParameter$onCancel>({ event: 'onCancel', id: '', parameter: {} });
+        }
+
+        /**
+         * 获取仓库列表.
+         */
+        async function requestWarehouseList(): Promise<void> {
+            isRequesting.value = true;
+
+            try {
+                const { records } = await API.WMS.WarehouseController.ListVO({ params: { pageNo: 1, pageSize: 999 } });
+                warehouses.value = (records ?? []).filter((i) => {
+                    // 管理员拥有所有仓库
+                    if (KgUtil.isAdminUser()) {
+                        return true;
+                    }
+
+                    return userWarehouses.value?.find((j) => j.wh_id === i.whId);
+                });
+
+                currentWarehouse.value = warehouses.value.find((i) => i.whId === kgWarehouse.warehouse.value?.whId) ?? null;
+            } catch (e) {
+                console.error(e);
+            } finally {
+                isRequesting.value = false;
+            }
+        }
+
+        function onRowClick(event: MouseEvent, row: WarehouseDTO) {
+            switch (event.detail) {
+                case 1:
+                    if (currentWarehouse.value?.whId === row.whId) {
+                        currentWarehouse.value = null;
+                    } else {
+                        currentWarehouse.value = row;
+                    }
+                    break;
+
+                case 2:
+                    currentWarehouse.value = row;
+                    onOk();
+                    break;
+            }
+        }
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        //region LIFECYCLE
+        //----------------------------------------------------------------------------------------------------
+        onMounted(() => {
+            ____DEBUG____(`KgWarehouse | onMounted()`);
+            emit<IKgWarehouse$EventListenerParameter$onMounted>({ event: 'onMounted', parameter: {} });
+        });
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        return () => {
+            if (!isOn.value) {
+                return null;
+            }
+
+            return (
+                <div
+                    class={getClass.value}
+                    onClick={onClick}
+                >
+                    <Tooltip
+                        title={kg.t('kg.KgWarehouse.warehouse')}
+                        placement={'bottomRight'}
+                    >
+                        {kgWarehouse.warehouse.value?.whDsc || kgWarehouse.warehouse.value?.whId || kg.t('kg.KgWarehouse.selectWarehouse')}
+                    </Tooltip>
+
+                    <KgModal
+                        visible={kgWarehouse.visible.value}
+                        onUpdate:visible={(value) => kgWarehouse.store.setVisible(value)}
+                        title={kg.t('kg.KgWarehouse.title')}
+                        width={'500px'}
+                        kgFullHeight={false}
+                        wrapClassName={'kg-warehouse-modal'}
+                        closable={!props.kgInvisible && !isRequesting.value && !!currentWarehouse.value}
+                        kgShowCancelButton={!props.kgInvisible && !!currentWarehouse.value}
+                        cancelButtonProps={{
+                            disabled: isRequesting.value,
+                        }}
+                        okButtonProps={{
+                            disabled: isRequesting.value || !currentWarehouse.value,
+                        }}
+                        onOk={onOk}
+                        onCancel={onCancel}
+                    >
+                        <Input
+                            value={key.value}
+                            onUpdate:value={(value) => (key.value = value)}
+                            allowClear={true}
+                            disabled={isRequesting.value}
+                            placeholder={kg.t('kg.search')}
+                        />
+                        <Table
+                            size={'small'}
+                            scroll={{ x: '400px', y: 'auto' }}
+                            showHeader={false}
+                            pagination={false}
+                            bordered={false}
+                            loading={{
+                                spinning: isRequesting.value,
+                                indicator: () => (
+                                    <Icon
+                                        icon="eos-icons:bubble-loading"
+                                        width={22}
+                                        height={22}
+                                    />
+                                ),
+                            }}
+                            dataSource={filteredDatas.value}
+                            columns={columns}
+                            class={'kg-flex-table'}
+                            customRow={(row) => ({
+                                class: row.whId === currentWarehouse.value?.whId ? 'selected' : '',
+                                onClick: (event) => onRowClick(event, row),
+                            })}
+                        />
+                    </KgModal>
+                </div>
+            );
+        };
+    },
+});

package/component/KgWarehouse/index.ts

@@ -0,0 +1,5 @@
+export { default as KgWarehouse } from './KgWarehouse';
+
+export * from './KgWarehouse.guard';
+export * from './KgWarehouse.hooks';
+export * from './KgWarehouse.store';

package/component/KgWorkStation/KgWorkStation.css

@@ -0,0 +1,8 @@
+.kg-work-station {
+    font-size: 14px !important;
+    padding: 0 6px !important;
+
+    &.kg-work-station--invisible {
+        display: none !important;
+    }
+}