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

package/component/KgTable02/index.ts

@@ -0,0 +1,5 @@
+export { KgTable02 } from './KgTable02';
+
+export * from './KgTable02.hooks';
+export * from './KgTable02.store';
+export * from './KgTable02.model';

package/component/KgVar/KgVar.Factory.tsx

@@ -0,0 +1,146 @@
+import { TabPane, Tabs } from 'ant-design-vue';
+import { computed, defineComponent, h, ref } from 'vue';
+import { VarChildDetail } from '../../api/WMS/models';
+import { IKgResizableProps, IKgVarProps, KgResizable, useKgVar } from '../index';
+import KgVar, { getProps } from './KgVar';
+
+/**
+ * 工厂方法, 用于构造 KgVar 组件.
+ *
+ * @param param
+ * @param param.formID 界面标识.
+ * @param param.level 界面层级.
+ */
+export function KgVarFactory(param?: {
+    fid?: string | null | undefined;
+    /** @deprecated 已废弃, 请使用 fid */
+    formID?: string | null | undefined;
+    level?: number | null | undefined;
+}) {
+    return defineComponent({
+        name: param?.fid || param?.formID || 'KgVarFactory',
+        props: getProps(),
+        setup(props) {
+            const fid = param?.fid || param?.formID || props.id || props.kgFormID;
+
+            const kgVar = useKgVar(fid);
+
+            //region DATA
+            //----------------------------------------------------------------------------------------------------
+            const currentTab = ref<string>('0');
+            const kgResizableProps = ref<IKgResizableProps>({ kgHeight: 340, kgMinHeight: 42 });
+
+            /**
+             * <p>子页面的组件定义.</p>
+             * <p>其中的 key 表示「子页面的界面标识」, 其中的 value 表示「子页面的组件定义」,</p>
+             */
+            const kgVarFactoryRecord$$ = computed<Record<string, any>>(() => {
+                const record: Record<string, any> = {};
+
+                kgVar.varChildDetails.value.forEach((varChildDetail) => {
+                    const fid$Child = varChildDetail.child_form_id;
+
+                    if (fid$Child && !record[fid$Child]) {
+                        record[fid$Child] = KgVarFactory({ fid: fid$Child, level: props.kgLevel });
+                    }
+                });
+
+                return record;
+            });
+
+            /**
+             * 组件参数.
+             */
+            const props$$ = computed(() => {
+                const _props = { ...props } as IKgVarProps;
+
+                _props.id = fid;
+
+                if (_props.kgBackgroundGray === undefined) {
+                    _props.kgBackgroundGray = true;
+                }
+
+                return _props;
+            });
+            //----------------------------------------------------------------------------------------------------
+            //endregion
+
+            //region FUNCTION
+            //----------------------------------------------------------------------------------------------------
+            /**
+             * 渲染子页面的标签.
+             *
+             * @param param
+             * @param param.varChildDetail 父子关系.
+             * @param param.index 子页面的标签索引.
+             */
+            function renderChildTab(param: { varChildDetail: VarChildDetail; index: number }) {
+                const { varChildDetail, index } = param ?? {};
+
+                if (!varChildDetail?.child_form_id) {
+                    return null;
+                }
+
+                if (varChildDetail?.available_flag === 0) {
+                    return null;
+                }
+
+                const kgVar$Child = useKgVar(varChildDetail?.child_form_id);
+
+                return (
+                    <TabPane
+                        key={String(index)}
+                        tab={kgVar$Child.t2(kgVar$Child.varDda.value?.frm_nam)}
+                    >
+                        {{
+                            default: () => {
+                                if ((props.kgSlots ?? kgVar.slots.value)?.children?.[kgVar$Child.fid]) {
+                                    return (props.kgSlots ?? kgVar.slots.value)?.children?.[kgVar$Child.fid]?.();
+                                }
+
+                                return h(kgVarFactoryRecord$$.value[kgVar$Child.fid], { id: kgVar$Child.fid, key: kgVar$Child.fid, kgLevel: props.kgLevel });
+                            },
+                        }}
+                    </TabPane>
+                );
+            }
+            //----------------------------------------------------------------------------------------------------
+            //endregion
+
+            // TODO LT 移除废弃的样式类名 kg-var-container, 只保留新的样式类名 kg-var02,
+            return () => (
+                <div
+                    class="kg-var02 kg-var-container"
+                    kg-form-id={kgVar.fid}
+                >
+                    <KgVar {...props$$.value} />
+
+                    {/* <!--孩子界面--> */}
+                    {kgVar.varChildDetails.value.length > 0 ? (
+                        <KgResizable
+                            kgHeight={kgResizableProps.value.kgHeight}
+                            onUpdate:kgHeight={(value) => (kgResizableProps.value.kgHeight = value)}
+                            kgMinHeight={kgResizableProps.value.kgMinHeight}
+                            kgType={'top'}
+                        >
+                            <Tabs
+                                activeKey={currentTab.value}
+                                onUpdate:activeKey={(value) => (currentTab.value = value as any)}
+                            >
+                                {kgVar.varChildDetails.value.map((varChildDetail, index) => renderChildTab({ varChildDetail: varChildDetail, index: index }))}
+                            </Tabs>
+                        </KgResizable>
+                    ) : null}
+                </div>
+            );
+        },
+    });
+}
+
+/**
+ * 默认的 KgVar 组件.
+ */
+export const KgVar02 = KgVarFactory();
+
+/** @deprecated 已废弃, 请使用 KgVar02 */
+export const KgVar2 = KgVarFactory();

package/component/KgVar/KgVar.css

@@ -0,0 +1,125 @@
+.kg-var {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+}
+
+.kg-var > .ant-spin-nested-loading {
+    width: 100%;
+    height: 100%;
+}
+
+.kg-var > .ant-spin-nested-loading > .ant-spin-container {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    padding: 6px 6px 6px 6px;
+    background: #ffffff;
+}
+
+.kg-var > .ant-spin-nested-loading > .ant-spin-container > * {
+    width: 100%;
+}
+
+.kg-var.kg-var--bg-gray {
+    background: #f3f3f3;
+}
+
+.kg-var.kg-var--bg-gray > .ant-spin-nested-loading > .ant-spin-container {
+    background: #f3f3f3;
+}
+
+.kg-var.kg-var--empty {
+    width: 0px;
+    height: 0px;
+}
+
+.kg-var02 {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: flex-start;
+    width: 100%;
+}
+
+.kg-var02 > .kg-var {
+    flex: 1;
+    min-height: 0;
+}
+
+.kg-var02 > .kg-var > .ant-spin-nested-loading > .ant-spin-container {
+    padding: 6px 6px 6px 6px !important;
+}
+
+.kg-var02 > .kg-resizable {
+    height: 478px;
+    background: #fff;
+    margin: 6px;
+    border: 1px solid #888;
+    border-radius: 4px;
+    z-index: 1;
+}
+
+.kg-var02 > .kg-resizable > .ant-tabs .ant-tabs-nav {
+    margin: 0 0 0px 0;
+}
+
+.kg-var02 > .kg-resizable > .ant-tabs .ant-tabs-nav .ant-tabs-nav-list > .ant-tabs-tab {
+    padding: 9px 14px;
+    margin: 0;
+}
+
+.kg-var02 > .kg-resizable > .ant-tabs .ant-tabs-content {
+    height: 100%;
+    padding: 0;
+}
+
+.kg-var02 > .kg-resizable > .ant-tabs .kg-var {
+    border-radius: 0 0 3px 3px;
+}
+
+.kg-var02 > .kg-resizable > .ant-tabs .kg-var.kg-var--bg-gray > .ant-spin-nested-loading > .ant-spin-container {
+    background: #fff;
+}
+
+.kg-var02 > .kg-resizable > .ant-tabs .kg-var > .ant-spin-nested-loading > .ant-spin-container {
+    border-radius: 0 0 4px 4px;
+}
+
+.kg-var02 > .kg-resizable > .ant-tabs .kg-var > .ant-spin-nested-loading > .ant-spin-container > .kg-search {
+    margin-top: 0px;
+}
+
+.kg-submit--default-inline-target {
+    flex: 1;
+    min-height: 0;
+}
+
+.kg-submit--default-inline-target > div {
+    height: 100%;
+}
+
+.kg-submit--default-inline-target > div > div.ant-modal-root {
+    height: 100%;
+}
+
+.kg-submit--default-inline-target > div > div.ant-modal-root > div.kg-modal {
+    height: 100%;
+}
+
+.kg-submit--default-inline-target.kg-submit--default-inline-target--fullscreen {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+}

package/component/KgVar/KgVar.event.ts

@@ -0,0 +1,122 @@
+import { IKgEventListener, kgEmit, kgEmitSync } from '@kengic/core.core';
+import { ComputedRef } from 'vue';
+
+/**
+ * 事件类型.
+ */
+export type IKgVar$Event =
+    // 变量配置查询之前,
+    | 'onBeforeRequest'
+
+    // 变量配置查询完成,
+    | 'onAfterRequest'
+
+    // 页面创建,
+    | 'onSetup'
+
+    // 页面卸载,
+    | 'onUnmounted';
+
+//region 事件 onBeforeRequest
+//----------------------------------------------------------------------------------------------------
+export type IKgVar$EventListenerParameter$onBeforeRequest = {
+    /**
+     * 界面标识.
+     */
+    id: string;
+
+    /**
+     * <p>模拟请求返回数据.</p>
+     * <p>用户可以修改该属性, 如果该属性的值不为 undefined, 则不会请求变量配置数据, 而是直接使用该属性值作为变量配置数据,</p>
+     */
+    mock: any | undefined;
+};
+export type IKgVar$EventListener$onBeforeRequest = ((param: IKgVar$EventListenerParameter$onBeforeRequest) => Promise<boolean>) & IKgEventListener;
+//endregion
+
+//region 事件 onAfterRequest
+//----------------------------------------------------------------------------------------------------
+export type IKgVar$EventListenerParameter$onAfterRequest = {
+    /**
+     * 界面标识.
+     */
+    formID: string;
+};
+export type IKgVar$EventListener$onAfterRequest = ((param: IKgVar$EventListenerParameter$onAfterRequest) => Promise<boolean>) & IKgEventListener;
+//endregion
+
+//region 事件 onSetup
+//----------------------------------------------------------------------------------------------------
+export type IKgVar$EventListenerParameter$onSetup = {
+    /**
+     * 界面标识.
+     */
+    fid: string;
+
+    /**
+     * 获取组件参数.
+     */
+    props$$: ComputedRef<any>;
+};
+export type IKgVar$EventListener$onSetup = ((param: IKgVar$EventListenerParameter$onSetup) => void) & IKgEventListener;
+//endregion
+
+//region 事件 onUnmounted
+//----------------------------------------------------------------------------------------------------
+export type IKgVar$EventListenerParameter$onUnmounted = {
+    /**
+     * 界面标识.
+     */
+    formID: string;
+};
+export type IKgVar$EventListener$onUnmounted = ((param: IKgVar$EventListenerParameter$onUnmounted) => Promise<boolean>) & IKgEventListener;
+//endregion
+
+export type IKgVar$EventListenerParameter = IKgVar$EventListenerParameter$onBeforeRequest | IKgVar$EventListenerParameter$onAfterRequest | IKgVar$EventListenerParameter$onSetup | IKgVar$EventListenerParameter$onUnmounted;
+export type IKgVar$EventListener = IKgVar$EventListener$onBeforeRequest | IKgVar$EventListener$onAfterRequest | IKgVar$EventListener$onSetup | IKgVar$EventListener$onUnmounted;
+
+export const eventListeners: Record<
+    string,
+    {
+        onAfterRequest: Array<IKgVar$EventListener$onAfterRequest>;
+        onBeforeRequest: Array<IKgVar$EventListener$onBeforeRequest>;
+        onSetup: Array<IKgVar$EventListener$onSetup>;
+        onUnmounted: Array<IKgVar$EventListener$onUnmounted>;
+    }
+> = {};
+
+/**
+ * 触发事件.
+ *
+ * @param param.event 事件名称.
+ * @param param.id 唯一标识.
+ * @param param.parameter 事件参数.
+ */
+export function emit<P extends IKgVar$EventListenerParameter>(param: { event: IKgVar$Event; id?: string | undefined; parameter: P }): Promise<boolean> {
+    const { event, id = '', parameter } = param ?? {};
+
+    return kgEmit<IKgVar$Event, P, IKgVar$EventListener>({
+        event: event,
+        eventListeners: eventListeners,
+        id: id,
+        parameter: parameter,
+    });
+}
+
+/**
+ * 触发事件--同步.
+ *
+ * @param param.event 事件名称.
+ * @param param.id 唯一标识.
+ * @param param.parameter 事件参数.
+ */
+export function emitSync<P extends IKgVar$EventListenerParameter>(param: { event: IKgVar$Event; id?: string | undefined; parameter: P }): void {
+    const { event, id = '', parameter } = param ?? {};
+
+    return kgEmitSync<IKgVar$Event, P, IKgVar$EventListener>({
+        event: event,
+        eventListeners: eventListeners,
+        id: id,
+        parameter: parameter,
+    });
+}