,
+ required: true,
+ },
+ },
+ setup(props, { slots }) {
+ const ns = useNamespace('control-navigation');
+
+ const {
+ style,
+ enableNav,
+ splitMode,
+ splitValue,
+ showNavView,
+ showNavIcon,
+ navViewMsg,
+ } = useControlNav(props.controller);
+
+ const onViewCreated = (event: EventBase): void => {
+ ibiz.log.debug(props.controller.name, 'onViewCreated', event);
+ };
+
+ const onShowViewChange = (event: MouseEvent) => {
+ event.stopPropagation();
+ event.preventDefault();
+ showNavView.value = !showNavView.value;
+ };
+
+ const renderNavControl = () => {
+ return (
+
+ {slots.default?.()}
+ {showNavIcon.value ? (
+
+ {!showNavView.value ? (
+
+ ) : (
+
+ )}
+
+ ) : null}
+
+ );
+ };
+
+ const renderNavView = () => {
+ if (navViewMsg.value) {
+ return h(resolveComponent('IBizViewShell'), {
+ ...navViewMsg.value,
+ class: ns.e('nav-view'),
+ onCreated: onViewCreated,
+ });
+ }
+ };
+
+ return {
+ ns,
+ style,
+ enableNav,
+ splitMode,
+ splitValue,
+ navViewMsg,
+ showNavView,
+ renderNavView,
+ renderNavControl,
+ };
+ },
+ render() {
+ return (
+
+ {this.enableNav ? (
+ this.showNavView ? (
+
+ {{
+ left: () => this.renderNavControl(),
+ right: () => this.renderNavView(),
+ top: () => this.renderNavControl(),
+ bottom: () => this.renderNavView(),
+ }}
+
+ ) : (
+ this.renderNavControl()
+ )
+ ) : (
+ this.$slots.default?.()
+ )}
+
+ );
+ },
+});
diff --git a/src/common/control-navigation/control-navigation.util.ts b/src/common/control-navigation/control-navigation.util.ts
new file mode 100644
index 000000000..0546c38be
--- /dev/null
+++ b/src/common/control-navigation/control-navigation.util.ts
@@ -0,0 +1,326 @@
+import {
+ IDER1N,
+ IDETree,
+ IDETreeNode,
+ INavigatable,
+ IControlNavigatable,
+} from '@ibiz/model-core';
+import {
+ INavViewMsg,
+ calcNavParams,
+ IMDControlEvent,
+ MDControlController,
+ calcDeCodeNameById,
+} from '@ibiz-template/runtime';
+import { CSSProperties, Ref, ref } from 'vue';
+import { RuntimeError } from '@ibiz-template/core';
+
+/**
+ * 获取导航视图样式
+ *
+ * @param {IControlNavigatable} control
+ * @return {*} {CSSProperties}
+ */
+function getNavViewStyle(control: IControlNavigatable): CSSProperties {
+ const {
+ navViewWidth,
+ navViewHeight,
+ navViewMinWidth,
+ navViewMaxWidth,
+ navViewMinHeight,
+ navViewMaxHeight,
+ } = control;
+ return {
+ width: navViewWidth ? `${navViewWidth}px` : undefined,
+ height: navViewHeight ? `${navViewHeight}px` : undefined,
+ minWidth: navViewMinWidth ? `${navViewMinWidth}px` : undefined,
+ maxWidth: navViewMaxWidth ? `${navViewMaxWidth}px` : undefined,
+ minHeight: navViewMinHeight ? `${navViewMinHeight}px` : undefined,
+ maxHeight: navViewMaxHeight ? `${navViewMaxHeight}px` : undefined,
+ };
+}
+
+/**
+ * 解析导航参数
+ *
+ * @param {(INavigatable & { appDataEntityId?: string })} XDataModel
+ * @param {IData} data
+ * @param {IContext} context
+ * @param {IParams} params
+ * @return {*} {{ context: IContext; params: IParams }}
+ */
+function prepareNavParams(
+ XDataModel: INavigatable & { appDataEntityId?: string },
+ data: IData,
+ context: IContext,
+ params: IParams,
+): { context: IContext; params: IParams } {
+ const {
+ navDER,
+ navFilter,
+ navigateContexts,
+ navigateParams,
+ appDataEntityId,
+ } = XDataModel;
+ const model = {
+ deName: appDataEntityId ? calcDeCodeNameById(appDataEntityId) : undefined,
+ navFilter,
+ pickupDEFName: (navDER as IDER1N)?.pickupDEFName,
+ navContexts: navigateContexts,
+ navParams: navigateParams,
+ };
+ const originParams = {
+ context,
+ params,
+ data,
+ };
+ const { resultContext, resultParams } = calcNavParams(model, originParams);
+ const tempContext = Object.assign(context.clone(), resultContext);
+ const tempParams = { ...resultParams };
+ return { context: tempContext, params: tempParams };
+}
+
+/**
+ * 获取树节点模型
+ *
+ * @param {string} nodeId
+ * @param {IDETree} model
+ * @return {*} {(IDETreeNode | undefined)}
+ */
+function getNodeModel(nodeId: string, model: IDETree): IDETreeNode | undefined {
+ const { detreeNodes } = model;
+ let nodeModel: IDETreeNode | undefined;
+ if (detreeNodes) {
+ detreeNodes.forEach(node => {
+ if (node.id === nodeId) {
+ nodeModel = node;
+ }
+ });
+ }
+ return nodeModel;
+}
+
+/**
+ * 获取有导航视图的节点模型标识集合
+ *
+ * @param {IDETree} model
+ * @return {*} {string[]}
+ */
+function getNavNodeModelIds(model: IDETree): string[] {
+ const { detreeNodes } = model;
+ const navNodeModelIds: string[] = [];
+ detreeNodes?.forEach(node => {
+ if (node.navAppViewId) {
+ navNodeModelIds.push(node.id!);
+ }
+ });
+ return navNodeModelIds;
+}
+
+/**
+ * 获取导航视图信息
+ *
+ * @param {(INavigatable & { appDataEntityId?: string })} model
+ * @param {IData} data
+ * @param {IContext} context
+ * @param {IParams} params
+ * @param {string} viewModelId
+ * @param {string} [keyName='srfkey']
+ * @return {*} {INavViewMsg}
+ */
+function getNavViewMsg(
+ model: INavigatable & { appDataEntityId?: string },
+ data: IData,
+ context: IContext,
+ params: IParams,
+ viewModelId: string,
+ keyName: string = 'srfkey',
+): INavViewMsg {
+ const result = prepareNavParams(model, data, context, params);
+ return {
+ key: data[keyName],
+ context: result.context,
+ params: result.params,
+ viewId: viewModelId,
+ };
+}
+
+/**
+ * 部件导航
+ *
+ * @export
+ * @param {MDControlController} controller
+ * @return {*} {({
+ * style: CSSProperties;
+ * splitMode: Ref<'horizontal' | 'vertical'>;
+ * splitValue: Ref;
+ * showNavView: Ref;
+ * showNavIcon: Ref;
+ * navViewMsg: Ref;
+ * })}
+ */
+export function useControlNav(controller: MDControlController): {
+ enableNav: Ref;
+ style: CSSProperties;
+ splitMode: Ref<'horizontal' | 'vertical'>;
+ splitValue: Ref;
+ showNavView: Ref;
+ showNavIcon: Ref;
+ navViewMsg: Ref;
+} {
+ const { navViewPos, navViewShowMode } =
+ controller.model as IControlNavigatable;
+ /**
+ * 启用内置导航
+ */
+ const enableNav: Ref = ref(
+ navViewShowMode !== undefined &&
+ ![undefined, 'NONE'].includes('navViewPos'),
+ );
+ /**
+ * 导航样式
+ */
+ const style = getNavViewStyle(controller.model);
+ /**
+ * 分割值
+ */
+ const splitValue: Ref = ref(0.5);
+ /**
+ * 是否显示导航视图
+ */
+ const showNavView: Ref = ref(navViewShowMode !== 1);
+ /**
+ * 是否显示导航图标
+ */
+ const showNavIcon: Ref = ref(navViewShowMode !== 2);
+ /**
+ * 分割模式
+ */
+ const splitMode: Ref<'horizontal' | 'vertical'> = ref(
+ ['BOTTOM', 'ANY_BOTTOM'].includes(navViewPos!) ? 'vertical' : 'horizontal',
+ );
+ /**
+ * 导航视图信息
+ */
+ const navViewMsg: Ref = ref();
+ /**
+ * 有导航视图的节点模型标识集合
+ */
+ const navNodeModelIds: string[] =
+ controller.model.controlType === 'TREEVIEW'
+ ? getNavNodeModelIds(controller.model)
+ : [];
+ /**
+ * 导航栈数据
+ */
+ const navStack: string[] = [];
+
+ /**
+ * 导航数据改变
+ *
+ * @param {IMDControlEvent['onNavDataChange']['event']} event
+ */
+ const onNavDataChange = (
+ event: IMDControlEvent['onNavDataChange']['event'],
+ ) => {
+ const { navData, context, params } = event;
+ let keyName = 'srfkey';
+ // 设置导航视图信息
+ if (['GRID', 'DATAVIEW', 'LIST'].includes(controller.model.controlType!)) {
+ const viewModelId = (controller.model as INavigatable).navAppViewId;
+ if (viewModelId) {
+ navViewMsg.value = getNavViewMsg(
+ controller.model,
+ navData,
+ context,
+ params,
+ viewModelId,
+ keyName,
+ );
+ }
+ } else if (controller.model.controlType === 'TREEVIEW') {
+ keyName = '_id';
+ const nodeModel = getNodeModel(navData._nodeId, controller.model);
+ if (!nodeModel) {
+ throw new RuntimeError(
+ ibiz.i18n.t('runtime.controller.control.expBar.noFindNodeModel', {
+ nodeId: navData._nodeId,
+ }),
+ );
+ }
+ if (nodeModel.navAppViewId) {
+ const deData = navData._deData || navData;
+ navViewMsg.value = getNavViewMsg(
+ nodeModel,
+ deData,
+ context,
+ params,
+ nodeModel.navAppViewId,
+ keyName,
+ );
+ }
+ }
+ // 添加栈数据
+ navStack.unshift(navData[keyName]);
+ };
+
+ /**
+ * 设置默认导航
+ *
+ */
+ const setDefaultNavData = () => {
+ const { items } = controller.state;
+ const setNavData = (data: IData | undefined) => {
+ if (data) {
+ controller.setSelection([data]);
+ controller.setNavData(data);
+ } else {
+ navViewMsg.value = undefined;
+ }
+ };
+ const getStackData = (keyName: string = 'srfkey') => {
+ const preNav = navStack.find(nav =>
+ items.find(item => nav === item[keyName]),
+ );
+ return preNav ? items.find(item => preNav === item[keyName]) : items[0];
+ };
+
+ if (['GRID', 'DATAVIEW', 'LIST'].includes(controller.model.controlType!)) {
+ const stack = getStackData();
+ setNavData(stack);
+ } else if (controller.model.controlType === 'TREEVIEW') {
+ const data = controller.state.items.find(node => {
+ return navNodeModelIds.includes(node._nodeId);
+ });
+ setNavData(data);
+ }
+ };
+
+ controller.evt.on('onNavDataChange', evt => {
+ if (enableNav.value) {
+ onNavDataChange(evt);
+ }
+ });
+
+ controller.evt.on('onLoadSuccess', () => {
+ if (enableNav.value) {
+ setDefaultNavData();
+ }
+ });
+
+ controller.evt.on('onRemoveSuccess', () => {
+ if (enableNav.value) {
+ setDefaultNavData();
+ }
+ });
+
+ return {
+ enableNav,
+ style,
+ splitMode,
+ splitValue,
+ showNavView,
+ showNavIcon,
+ navViewMsg,
+ };
+}
diff --git a/src/common/index.ts b/src/common/index.ts
index af17f22a1..c95c3a121 100644
--- a/src/common/index.ts
+++ b/src/common/index.ts
@@ -36,6 +36,7 @@ import { IBizPqlEditor } from './pql-editor/pql-editor';
import { IBizCustomFilterCondition } from './custom-filter-condition/custom-filter-condition';
import { IBizAnchorContainer } from './anchor-container/anchor-container';
import { IBizButtonList } from './button-list/button-list';
+import { IBizControlNavigation } from './control-navigation/control-navigation';
export * from './col/col';
export * from './row/row';
@@ -90,6 +91,7 @@ export const IBizCommonComponents = {
v.component(IBizCustomFilterCondition.name, IBizCustomFilterCondition);
v.component(IBizAnchorContainer.name, IBizAnchorContainer);
v.component(IBizButtonList.name, IBizButtonList);
+ v.component(IBizControlNavigation.name, IBizControlNavigation);
},
};
diff --git a/src/control/grid/grid/grid.tsx b/src/control/grid/grid/grid.tsx
index fd9cb197e..5f88c0655 100644
--- a/src/control/grid/grid/grid.tsx
+++ b/src/control/grid/grid/grid.tsx
@@ -410,10 +410,9 @@ export const GridControl = defineComponent({
controller={this.c}
style={this.headerCssVars}
>
- {
+
- }
+ {this.c.model.enableCustomized && !this.c.state.hideHeader && (
+
+
+
+ )}
+ {this.renderBatchToolBar()}
+
{this.c.state.enablePagingBar && (
)}
- {this.c.model.enableCustomized && !this.c.state.hideHeader && (
-
-
-
- )}
- {this.renderBatchToolBar()}
);
},
--
Gitee