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

package/component/KgSearch/KgSearch.tsx

@@ -0,0 +1,506 @@
+import { Icon } from '@iconify/vue';
+import { ____DEBUG____ } from '@kengic/core.core';
+import { Button, Row, Select, Spin } from 'ant-design-vue';
+import { FormInstance } from 'ant-design-vue/lib/form/Form';
+import { isNil } from 'lodash-es';
+import { computed, defineComponent, ExtractPropTypes, inject, onUnmounted, PropType, ref, watch } from 'vue';
+import { useKg } from '../../config';
+import { KG, KG__VAR_BUTTON__TYPE, KG__VAR_SUBMIT_CONFIG__LABEL_COLUMN_UNIT, KG__VAR_SUBMIT_CONFIG__LAYOUT, KG_FORM_CONTEXT } from '../../model';
+import { KgUtil } from '../../util';
+import { KgButtonItem } from '../KgButton';
+import { KgForm, KgFormItem } from '../KgForm';
+import { IKgResizableProps, KgResizable } from '../KgResizable';
+import { IKgTableRequestParameter } from '../KgTable';
+import { useKgVar } from '../KgVar';
+import { KG_VAR_CONFIG_MODAL__CONTEXT } from '../KgVarConfig/components/KgVarConfigModal';
+import { emit, IKgSearch$EventListenerParameter$onReset, IKgSearch$EventListenerParameter$onSearch } from './KgSearch.event';
+import { _useCommon, _useHeight, BORDER_BOTTOM_WIDTH, HEADER_HEIGHT, useFormModel } from './KgSearch.service';
+import './KgSearch.less';
+
+export const getProps = () => ({
+    /** 是否禁用. */
+    kgDisabled: {
+        type: Boolean as PropType<boolean>,
+        default: undefined,
+    },
+});
+
+export type IKgSearchProps = Partial<ExtractPropTypes<ReturnType<typeof getProps>>>;
+
+// 查询条件
+export default defineComponent({
+    name: 'KgSearch',
+    props: getProps(),
+    setup(props) {
+        const kgSlots = inject(KG.DI.KG_VAR.KG_SLOTS, null);
+        const kgProps = inject(KG.DI.KG_VAR.KG_PROPS, null);
+
+        const kg = useKg();
+        const kgVar = useKgVar();
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        const { isVisible } = _useCommon();
+
+        const formRef$ = ref<FormInstance | null>(null);
+        const kgResizableRef$ = ref<any | null>(null);
+        const formContainerRef$ = ref<HTMLDivElement | null>(null);
+
+        const { initFormModel } = useFormModel({ kgResizableRef$: kgResizableRef$, formRef$: formRef$ });
+        const { defaultHeight, maxHeight, minHeight } = _useHeight({ formContainerRef: formContainerRef$ });
+
+        const kgResizableProps = ref<IKgResizableProps>({ kgHeight: minHeight.value });
+
+        /**
+         * 组件参数「是否禁用」.
+         */
+        const kgDisabled = computed<boolean | undefined>(() => {
+            if (!isNil((kgProps?.value ?? kgVar.props.value)?.KgSearch?.kgDisabled)) {
+                return (kgProps?.value ?? kgVar.props.value)?.KgSearch?.kgDisabled;
+            }
+
+            if (!isNil(props.kgDisabled)) {
+                return props.kgDisabled;
+            }
+
+            return undefined;
+        });
+
+        /**
+         * 拖拽是否禁用.
+         */
+        const isKgResizableDisabled = computed<boolean>(() => {
+            if (kgVar.varProfileConfig$$.value?.resizable_flg === 0) {
+                return true;
+            }
+
+            if (defaultHeight.value <= HEADER_HEIGHT + BORDER_BOTTOM_WIDTH) {
+                return true;
+            }
+
+            return false;
+        });
+
+        /**
+         * 重置按钮是否禁用.
+         */
+        const isResetButtonDisabled = computed(() => {
+            if (kgDisabled.value) {
+                return true;
+            }
+
+            // 正在查询表格数据
+            if (kgVar.kgTable.isRetrieving.value || kgVar.kgTable02.isRequesting) {
+                return true;
+            }
+
+            // 没有权限
+            if (KgUtil.getPermissionType(kgVar.varButtonSearch.value?.permission_code) === 2 && !kg.p(kgVar.varButtonSearch.value?.permission_code)) {
+                return true;
+            }
+
+            // 正在创建/更新/复制/删除
+            if (kgVar.isCreating.value || kgVar.isUpdating.value || kgVar.isCopying.value || kgVar.isDeleting.value) {
+                return true;
+            }
+
+            return false;
+        });
+
+        /**
+         * 下拉列表是否禁用.
+         */
+        const isVarProfileMasterSelectDisabled = computed(() => {
+            if (kgDisabled.value) {
+                return true;
+            }
+
+            // 正在查询表格数据
+            if (kgVar.kgTable.isRetrieving.value || kgVar.kgTable02.isRequesting) {
+                return true;
+            }
+
+            // 正在创建/更新/复制/删除
+            if (kgVar.isCreating.value || kgVar.isUpdating.value || kgVar.isCopying.value || kgVar.isDeleting.value) {
+                return true;
+            }
+
+            return false;
+        });
+
+        /** 查询按钮是否处于加载状态. */
+        const isButtonSearchLoading = computed(() => {
+            // 正在查询表格数据
+            if (kgVar.kgTable.isRetrieving.value || kgVar.kgTable02.isRequesting) {
+                return true;
+            }
+
+            return false;
+        });
+
+        /** 是否处于收起状态, 否则处于展开状态. */
+        const isCollapsed = computed(() => kgResizableProps.value.kgHeight === minHeight.value);
+
+        /**
+         * 查询按钮文本.
+         */
+        const searchButtonText = computed<string | undefined>(() => {
+            // 没有配置查询按钮
+            if (!kgVar.varButtonSearch.value) {
+                return undefined;
+            }
+
+            const buttonVname = kgVar.varButtonSearch.value?.var_nam;
+            const buttonText = kgVar.t(buttonVname).value;
+
+            if (!!buttonText && !!buttonVname && buttonText !== buttonVname) {
+                return buttonText;
+            }
+
+            return undefined;
+        });
+
+        /** 查询按钮是否使用主要按钮样式. */
+        const isSearchButtonPrimary = computed<boolean | undefined>(() => {
+            switch (kgVar.varButtonSearch.value?.primary_flg) {
+                case 1:
+                    return true;
+                case 0:
+                    return false;
+
+                // 默认为 true
+                default:
+                    return true;
+            }
+        });
+
+        /** 头部是否显示加载状态. */
+        const isHeaderLoading = computed(() => {
+            if (kgVar.isRetrieving.value) {
+                return true;
+            }
+
+            if (kgVar.isRetrievingVarProfileMaster.value) {
+                return true;
+            }
+
+            return false;
+        });
+        /** 表单是否显示加载状态. */
+        const isFormLoading = computed(() => !!kgVar.isRetrieving.value || !!kgVar.isRetrievingVarProfileMaster.value);
+        /** 样式. */
+        const getClass = computed(() => {
+            let _class = 'kg-search';
+
+            if (isVisible.value) {
+                _class += ' kg-search--visible';
+            }
+
+            return _class;
+        });
+
+        const getLabelCol = computed(() => {
+            switch (kgVar.kgSubmit.searchVarSubmitConfig$Layout.value) {
+                case KG__VAR_SUBMIT_CONFIG__LAYOUT.HORIZONTAL: {
+                    switch (kgVar.kgSubmit.searchVarSubmitConfig$LabelColumnUnit.value) {
+                        case KG__VAR_SUBMIT_CONFIG__LABEL_COLUMN_UNIT.SPAN:
+                            return { span: kgVar.kgSubmit.searchVarSubmitConfig$LabelColumn.value };
+
+                        case KG__VAR_SUBMIT_CONFIG__LABEL_COLUMN_UNIT.PX:
+                        default:
+                            return { style: { width: `${kgVar.kgSubmit.searchVarSubmitConfig$LabelColumn.value}px` } };
+                    }
+                }
+
+                default:
+                    return undefined;
+            }
+        });
+        const getWrapperCol = computed(() => {
+            switch (kgVar.kgSubmit.searchVarSubmitConfig$Layout.value) {
+                case KG__VAR_SUBMIT_CONFIG__LAYOUT.HORIZONTAL: {
+                    switch (kgVar.kgSubmit.searchVarSubmitConfig$LabelColumnUnit.value) {
+                        case KG__VAR_SUBMIT_CONFIG__LABEL_COLUMN_UNIT.SPAN:
+                            return { span: 24 - kgVar.kgSubmit.searchVarSubmitConfig$LabelColumn.value };
+
+                        default:
+                            return undefined;
+                    }
+                }
+
+                default:
+                    return undefined;
+            }
+        });
+        //endregion
+
+        //region WATCH
+        //----------------------------------------------------------------------------------------------------
+        watch(
+            defaultHeight,
+            (defaultHeight) => {
+                kgResizableProps.value.kgHeight = defaultHeight;
+            },
+            { immediate: true },
+        );
+        //endregion
+
+        //region FUNCTION
+        //----------------------------------------------------------------------------------------------------
+        /**
+         * 查询.
+         */
+        async function onSearch(param: IKgTableRequestParameter = {}): Promise<void> {
+            ____DEBUG____(`${kgVar.fid} | KgSearch | onSearch() | 进入方法`);
+            // 正在查询
+            if (kgVar.kgTable.isRetrieving.value || kgVar.kgTable02.isRequesting) {
+                ____DEBUG____(`${kgVar.fid} | KgSearch | onSearch() | 正在查询.`);
+                return;
+            }
+
+            // 没有权限
+            if (KgUtil.getPermissionType(kgVar.varButtonSearch.value?.permission_code) === 2 && !kg.p(kgVar.varButtonSearch.value?.permission_code)) {
+                ____DEBUG____(`${kgVar.fid} | KgSearch | onSearch() | 没有权限.`);
+                return;
+            }
+
+            // 正在执行按钮操作(创建/更新/...)
+            if (kgVar.isCreating.value || kgVar.isUpdating.value || kgVar.isCopying.value || kgVar.isDeleting.value) {
+                ____DEBUG____(`${kgVar.fid} | KgSearch | onSearch() | 正在创建/更新/复制/删除.`);
+                return;
+            }
+
+            // 要显示时, 触发查询事件之前, 先要验证表单
+            if (isVisible.value) {
+                ____DEBUG____(`${kgVar.fid} | KgSearch | onSearch() | 显示查询条件组件.`);
+                if (formRef$.value) {
+                    formRef$.value
+                        .validate()
+                        .then(async () => {
+                            await emit<IKgSearch$EventListenerParameter$onSearch>({ event: 'onSearch', id: kgVar.fid, parameter: param });
+                        })
+                        .catch((e) => {
+                            ____DEBUG____(`${kgVar.fid} | KgSearch | onSearch() | 表单验证失败.`, { e });
+                        });
+                }
+            }
+            // 不显示时, 无需验证表单
+            else {
+                ____DEBUG____(`${kgVar.fid} | KgSearch | onSearch() | 隐藏查询条件组件.`);
+                await emit<IKgSearch$EventListenerParameter$onSearch>({ event: 'onSearch', id: kgVar.fid, parameter: param });
+            }
+        }
+        kgVar.kgSearch.store.setSearchFn(kgVar.fid, onSearch);
+
+        /**
+         * 重置.
+         */
+        async function onReset(): Promise<void> {
+            initFormModel();
+
+            // 组件显示, 发出 onReset 事件之前, 先要验证表单,
+            if (isVisible.value) {
+                if (formRef$.value) {
+                    formRef$.value
+                        .validate()
+                        .then(async () => {
+                            await emit<IKgSearch$EventListenerParameter$onReset>({ event: 'onReset', id: kgVar.fid, parameter: {} });
+                        })
+                        .catch((e) => {
+                            ____DEBUG____(`${kgVar.fid} | KgSearch | onReset() | 表单验证失败.`, { e });
+                        });
+                }
+            }
+            // 组件隐藏, 不必验证表单
+            else {
+                await emit<IKgSearch$EventListenerParameter$onReset>({ event: 'onReset', id: kgVar.fid, parameter: {} });
+            }
+        }
+        kgVar.kgSearch.store.setResetFn(kgVar.fid, onReset);
+
+        /**
+         * 点击查询按钮.
+         */
+        function onKgButtonSearchClick(): Promise<boolean> {
+            onSearch({ isSearchFirstPage: true });
+            return Promise.resolve(true);
+        }
+
+        /** 渲染标题. */
+        function renderTitle() {
+            const leftSlot = kgSlots?.KgSearch?.left ?? kgVar.slots.value?.KgSearch?.left;
+
+            return (
+                <div
+                    class="title"
+                    onClick={onHeaderClick}
+                >
+                    {leftSlot && (
+                        <div
+                            class={'kg-search-title-left'}
+                            onClick={(event) => {
+                                event.stopPropagation();
+                                event.preventDefault();
+                            }}
+                        >
+                            {leftSlot()}
+                        </div>
+                    )}
+                    {isCollapsed.value ? <Icon icon="ant-design:caret-up-outlined" /> : <Icon icon="ant-design:caret-down-outlined" />}
+                    <span>{kg.t('kg.KgSearch.title')}</span>
+                </div>
+            );
+        }
+
+        /** 渲染查询视图下拉列表. */
+        function renderVarProfileMasterSelect() {
+            if ((kgVar.varProfileMasters.value?.length ?? 0) === 0) {
+                return null;
+            }
+
+            if (kgVar.varProfileConfig$$.value?.show_config_button_flag === 0) {
+                return null;
+            }
+
+            return (
+                <>
+                    <Select
+                        value={kgVar.currentVarProfileMasterID.value ?? undefined}
+                        onUpdate:value={(value) => kgVar.store.setCurrentVarProfileMasterID(kgVar.fid, value as any)}
+                        disabled={isVarProfileMasterSelectDisabled.value}
+                        class={'kg-search-profile-master-select'}
+                    >
+                        {{
+                            default: () => kgVar.varProfileMasters?.value?.map((varProfileMaster) => <Select.Option value={varProfileMaster.id}>{kgVar.t(varProfileMaster?.prf_var_nam).value}</Select.Option>),
+                            suffixIcon: () => <Icon icon="ant-design:caret-down-outlined" />,
+                        }}
+                    </Select>
+                    <Button
+                        disabled={isVarProfileMasterSelectDisabled.value}
+                        onClick={() => {
+                            kgVar.kgVarConfig.open({ hostFormID: kgVar.fid, kgContext: KG_VAR_CONFIG_MODAL__CONTEXT.SEARCH });
+                        }}
+                        class={'kg-search-profile-master-btn'}
+                    >
+                        <Icon icon="ant-design:setting-outlined" />
+                    </Button>
+                </>
+            );
+        }
+
+        /**
+         * 渲染右上角的按钮.
+         */
+        function renderButtons() {
+            return (
+                <>
+                    {renderVarProfileMasterSelect()}
+                    <Button
+                        type="primary"
+                        ghost={!isResetButtonDisabled.value}
+                        disabled={isResetButtonDisabled.value}
+                        onClick={onReset}
+                        class="kg-search-btn-reset"
+                    >
+                        <Icon icon="ant-design:reload-outlined" />
+                        {kg.t('kg.reset')}
+                    </Button>
+                    <KgButtonItem
+                        kgType={KG__VAR_BUTTON__TYPE.SEARCH}
+                        kgVarName={kgVar.varButtonSearch.value?.var_nam}
+                        kgIcon={kgVar.varButtonSearch.value?.icon}
+                        kgText={searchButtonText.value}
+                        kgColor={kgVar.varButtonSearch.value?.color as any}
+                        kgPrimary={isSearchButtonPrimary.value}
+                        kgDisabled={isResetButtonDisabled.value}
+                        kgLoading={isButtonSearchLoading.value}
+                        onKgClick={onKgButtonSearchClick}
+                    />
+                </>
+            );
+        }
+
+        /**
+         * 渲染查询表单.
+         */
+        function renderForm() {
+            return (
+                <Spin spinning={isFormLoading.value}>
+                    <KgForm
+                        ref={formRef$}
+                        model={kgVar.kgSearch.formModel.value ?? {}}
+                        layout={kgVar.kgSubmit.searchVarSubmitConfig$Layout.value}
+                        labelCol={getLabelCol.value}
+                        wrapperCol={getWrapperCol.value}
+                    >
+                        <Row gutter={6}>
+                            {kgVar.kgSearch.currentVarProfileDetails.value.map((varProfileDetail) => (
+                                <KgFormItem
+                                    key={varProfileDetail.var_nam!}
+                                    kgVarName={varProfileDetail.var_nam!}
+                                    kgContext={KG_FORM_CONTEXT.SEARCH}
+                                    onKgSubmit={() => onSearch({ isSearchFirstPage: true })}
+                                />
+                            ))}
+                        </Row>
+                    </KgForm>
+                </Spin>
+            );
+        }
+
+        /**
+         * 单击头部.
+         */
+        function onHeaderClick() {
+            if (isCollapsed.value) {
+                kgResizableProps.value.kgHeight = defaultHeight.value;
+            } else {
+                kgResizableProps.value.kgHeight = minHeight.value;
+            }
+        }
+        //endregion
+
+        //region LIFECYCLE
+        //----------------------------------------------------------------------------------------------------
+        onUnmounted(async () => {
+            kgVar.kgSearch.store.dispose(kgVar.fid);
+        });
+        //endregion
+
+        return () => (
+            <KgResizable
+                kg-form-id={kgVar.fid}
+                ref={kgResizableRef$}
+                kgHeight={kgResizableProps.value.kgHeight}
+                onUpdate:kgHeight={(value) => (kgResizableProps.value.kgHeight = value)}
+                kgMinHeight={minHeight.value}
+                kgMaxHeight={maxHeight.value}
+                kgDisabled={isKgResizableDisabled.value}
+                kgClass={getClass.value}
+            >
+                {isVisible.value && (
+                    <>
+                        <div class="ant-collapse ant-collapse-icon-position-left">
+                            <div class="ant-collapse-item ant-collapse-item-active ant-collapse-no-arrow">
+                                <div class="ant-collapse-header">
+                                    <Spin spinning={isHeaderLoading.value}>
+                                        {renderTitle()}
+                                        <div class="ant-collapse-extra">{renderButtons()}</div>
+                                    </Spin>
+                                </div>
+                                <div class="ant-collapse-content ant-collapse-content-active">
+                                    <div
+                                        class="ant-collapse-content-box"
+                                        ref={formContainerRef$}
+                                    >
+                                        {renderForm()}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </>
+                )}
+            </KgResizable>
+        );
+    },
+});

package/component/KgSearch/index.ts

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

package/component/KgSimulator/KgSimulator.Canvas.Title.tsx

@@ -0,0 +1,71 @@
+import { computed, defineComponent, ExtractPropTypes, inject } from 'vue';
+import './KgSimulator.css';
+import './KgSimulator.icons';
+import { KG } from '../../model';
+import { useKgSimulator } from './KgSimulator.hooks';
+
+export const getProps = () => ({}) as any;
+
+export type IKgSimulatorCanvasTitleProps = Partial<ExtractPropTypes<ReturnType<typeof getProps>>>;
+
+/**
+ * 模拟器--画布--标题.
+ */
+export const KgSimulatorCanvasTitle = defineComponent({
+    name: 'KgSimulatorCanvasTitle',
+    props: getProps(),
+    setup(props) {
+        const ID = inject(KG.DI.ID, '');
+
+        const kgSimulator = useKgSimulator();
+
+        //region DATA
+        // ----------------------------------------------------------------------------------------------------
+        /**
+         * 标题文本.
+         */
+        const titleText$$ = computed<string>(() => {
+            let title = '';
+
+            switch (true) {
+                case kgSimulator.$Config$Env$IsCircularConveyor: {
+                    title = kgSimulator.$Env$CircularConveyor$CurrentScene?.name ?? '[NULL]';
+                    break;
+                }
+
+                case kgSimulator.$Config$Env$IsCircularShuttle: {
+                    // TODO LT 环形穿梭车
+                    break;
+                }
+
+                default: {
+                    break;
+                }
+            }
+
+            return title;
+        });
+        // ----------------------------------------------------------------------------------------------------
+        //endregion
+
+        //region WATCH
+        // ----------------------------------------------------------------------------------------------------
+        // ----------------------------------------------------------------------------------------------------
+        //endregion
+
+        //region FUNCTION
+        // ----------------------------------------------------------------------------------------------------
+
+        // ----------------------------------------------------------------------------------------------------
+        //endregion
+
+        return () => (
+            <div class="kg-simulator--canvas--title">
+                <div class="kg-simulator--canvas--title--text">{titleText$$.value}</div>
+                {((kgSimulator.$Config$Env$IsCircularConveyor && !kgSimulator.$Env$CircularConveyor$CurrentScene$IsSave) || (kgSimulator.$Config$Env$IsCircularShuttle && !kgSimulator.$Env$CircularShuttle$CurrentScene$IsSave)) && (
+                    <div class="kg-simulator--canvas--title--unsave-badge"></div>
+                )}
+            </div>
+        );
+    },
+});