From c4d0c3e55c20287b75ff86c47bf9ba27ac621406 Mon Sep 17 00:00:00 2001 From: zhangpingchuan <228939628@qq.com> Date: Tue, 28 Nov 2023 16:23:07 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=20=E6=96=B0=E5=A2=9E=E6=8A=A5?= =?UTF-8?q?=E8=A1=A8=E8=A7=86=E5=9B=BE=E3=80=81=E6=8A=A5=E8=A1=A8=E9=9D=A2?= =?UTF-8?q?=E6=9D=BF=E5=AE=9E=E7=8E=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 1 + src/control/index.ts | 1 + src/control/report-panel/index.ts | 15 ++ .../report-panel/report-detail/index.ts | 2 + .../report-detail/user-report-panel/index.ts | 9 + .../user-report-panel/user-report-panel.scss | 7 + .../user-report-panel/user-report-panel.tsx | 41 ++++ .../report-detail/user2-report-panel/index.ts | 9 + .../user2-report-panel.scss | 15 ++ .../user2-report-panel/user2-report-panel.tsx | 68 ++++++ .../report-panel/report-panel.provider.ts | 12 + src/control/report-panel/report-panel.scss | 4 + src/control/report-panel/report-panel.tsx | 59 +++++ src/index.ts | 2 + src/view-engine/index.ts | 5 + src/view-engine/report-view.engine.ts | 219 ++++++++++++++++++ 16 files changed, 469 insertions(+) create mode 100644 src/control/report-panel/index.ts create mode 100644 src/control/report-panel/report-detail/index.ts create mode 100644 src/control/report-panel/report-detail/user-report-panel/index.ts create mode 100644 src/control/report-panel/report-detail/user-report-panel/user-report-panel.scss create mode 100644 src/control/report-panel/report-detail/user-report-panel/user-report-panel.tsx create mode 100644 src/control/report-panel/report-detail/user2-report-panel/index.ts create mode 100644 src/control/report-panel/report-detail/user2-report-panel/user2-report-panel.scss create mode 100644 src/control/report-panel/report-detail/user2-report-panel/user2-report-panel.tsx create mode 100644 src/control/report-panel/report-panel.provider.ts create mode 100644 src/control/report-panel/report-panel.scss create mode 100644 src/control/report-panel/report-panel.tsx create mode 100644 src/view-engine/report-view.engine.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index a0d644d00..56a6fa6ba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ ### Added - 支持搜索表单保存条件 +- 新增报表视图、报表面板实现 ### Changed diff --git a/src/control/index.ts b/src/control/index.ts index 311fc8486..4bb09c1a9 100644 --- a/src/control/index.ts +++ b/src/control/index.ts @@ -22,3 +22,4 @@ export * from './tree-grid-ex'; export * from './tree-grid'; export * from './medit-view-panel'; export * from './map'; +export * from './report-panel'; diff --git a/src/control/report-panel/index.ts b/src/control/report-panel/index.ts new file mode 100644 index 000000000..3140a2b14 --- /dev/null +++ b/src/control/report-panel/index.ts @@ -0,0 +1,15 @@ +import { registerControlProvider, ControlType } from '@ibiz-template/runtime'; +import { withInstall } from '@ibiz-template/vue3-util'; +import { App } from 'vue'; +import { ReportPanelControl } from './report-panel'; +import { ReportPanelProvider } from './report-panel.provider'; +import { IBizUser2ReportPanel, IBizUserReportPanel } from './report-detail'; + +export const IBizReportPanelControl = withInstall(ReportPanelControl, function (v: App) { + v.use(IBizUserReportPanel); + v.use(IBizUser2ReportPanel) + v.component(ReportPanelControl.name, ReportPanelControl); + registerControlProvider(ControlType.REPORT_PANEL, () => new ReportPanelProvider()); +}); + +export default IBizReportPanelControl; \ No newline at end of file diff --git a/src/control/report-panel/report-detail/index.ts b/src/control/report-panel/report-detail/index.ts new file mode 100644 index 000000000..698ee2271 --- /dev/null +++ b/src/control/report-panel/report-detail/index.ts @@ -0,0 +1,2 @@ +export * from './user-report-panel/index' +export * from './user2-report-panel/index' \ No newline at end of file diff --git a/src/control/report-panel/report-detail/user-report-panel/index.ts b/src/control/report-panel/report-detail/user-report-panel/index.ts new file mode 100644 index 000000000..e3e08ed5d --- /dev/null +++ b/src/control/report-panel/report-detail/user-report-panel/index.ts @@ -0,0 +1,9 @@ +import { withInstall } from '@ibiz-template/vue3-util'; +import { App } from 'vue'; +import { UserReportPanel } from './user-report-panel'; + +export const IBizUserReportPanel = withInstall(UserReportPanel, function (v: App) { + v.component(UserReportPanel.name, UserReportPanel); +}); + +export default IBizUserReportPanel; \ No newline at end of file diff --git a/src/control/report-panel/report-detail/user-report-panel/user-report-panel.scss b/src/control/report-panel/report-detail/user-report-panel/user-report-panel.scss new file mode 100644 index 000000000..6c70c0564 --- /dev/null +++ b/src/control/report-panel/report-detail/user-report-panel/user-report-panel.scss @@ -0,0 +1,7 @@ +@include b(user-report-panel) { + + @include e(container) { + width: 100%; + height: 100%; + } +} \ No newline at end of file diff --git a/src/control/report-panel/report-detail/user-report-panel/user-report-panel.tsx b/src/control/report-panel/report-detail/user-report-panel/user-report-panel.tsx new file mode 100644 index 000000000..f7db6ceff --- /dev/null +++ b/src/control/report-panel/report-detail/user-report-panel/user-report-panel.tsx @@ -0,0 +1,41 @@ +import { defineComponent, PropType } from 'vue'; +import { ReportPanelController } from '@ibiz-template/runtime'; +import { useNamespace } from '@ibiz-template/vue3-util'; +import './user-report-panel.scss'; + +export const UserReportPanel = defineComponent({ + name: 'IBizUserReportPanel', + props: { + controller: { type: Object as PropType } + }, + setup(props) { + const c = props.controller; + const ns = useNamespace(`user-report-panel`); + const generator = c && c.generator; + return { + c, + ns, + generator + }; + }, + render() { + if (!this.c) { + return; + } + const state = this.c.state; + return ( +
+ { this.generator && this.generator.init(args)}} + > +
+ ); + }, +}); \ No newline at end of file diff --git a/src/control/report-panel/report-detail/user2-report-panel/index.ts b/src/control/report-panel/report-detail/user2-report-panel/index.ts new file mode 100644 index 000000000..ea96f63cf --- /dev/null +++ b/src/control/report-panel/report-detail/user2-report-panel/index.ts @@ -0,0 +1,9 @@ +import { withInstall } from '@ibiz-template/vue3-util'; +import { App } from 'vue'; +import { User2ReportPanel } from './user2-report-panel'; + +export const IBizUser2ReportPanel = withInstall(User2ReportPanel, function (v: App) { + v.component(User2ReportPanel.name, User2ReportPanel); +}); + +export default IBizUser2ReportPanel; \ No newline at end of file diff --git a/src/control/report-panel/report-detail/user2-report-panel/user2-report-panel.scss b/src/control/report-panel/report-detail/user2-report-panel/user2-report-panel.scss new file mode 100644 index 000000000..653310ca4 --- /dev/null +++ b/src/control/report-panel/report-detail/user2-report-panel/user2-report-panel.scss @@ -0,0 +1,15 @@ +@include b(user2-report-panel) { + + @include e(container) { + width: 100%; + height: 100%; + } + + @include e(empty) { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + } +} \ No newline at end of file diff --git a/src/control/report-panel/report-detail/user2-report-panel/user2-report-panel.tsx b/src/control/report-panel/report-detail/user2-report-panel/user2-report-panel.tsx new file mode 100644 index 000000000..bdb66624b --- /dev/null +++ b/src/control/report-panel/report-detail/user2-report-panel/user2-report-panel.tsx @@ -0,0 +1,68 @@ +import { computed, defineComponent, PropType } from 'vue'; +import { ReportPanelController, ScriptFactory } from '@ibiz-template/runtime'; +import { useNamespace } from '@ibiz-template/vue3-util'; +import './user2-report-panel.scss'; + +export const User2ReportPanel = defineComponent({ + name: 'IBizUser2ReportPanel', + props: { + controller: { type: Object as PropType } + }, + setup(props) { + const c = props.controller; + const ns = useNamespace(`user2-report-panel`); + (window as IData).handleCallClick = async ( + action: string + ) => { + if (!c) return; + const res = await ScriptFactory.execScriptFn( + { view: c.view, context: c.context, params: c.params, data: {} }, + action, + { + isAsync: true, + }, + ); + console.log('调用view.call返回数据', res); + }; + const generator = c && c.generator; + const computedValue = computed(() => { + if (!c) + return "" + const state = c.state; + // const curValue = state.data; + const curValue = '
涉案人王晓平李红梅
王晓平1111111
李红梅
'; + if (curValue) { + return curValue.replace( + /onClick="(.*?)"/g, + function (match: string, value: string): string { + return `onclick="handleCallClick('${value}')"`; + }, + ); + } + }); + return { + c, + ns, + generator, + computedValue + }; + }, + render() { + if (!this.c) { + return; + } + const state = this.c.state; + if (state.isLoaded) { + return ( +
+
+ ); + } else { + return ( +
+ 暂无数据 +
+ ); + } + }, +}); \ No newline at end of file diff --git a/src/control/report-panel/report-panel.provider.ts b/src/control/report-panel/report-panel.provider.ts new file mode 100644 index 000000000..6f09ddf17 --- /dev/null +++ b/src/control/report-panel/report-panel.provider.ts @@ -0,0 +1,12 @@ +import { IControlProvider } from '@ibiz-template/runtime'; + +/** + * 报表面板适配器 + * + * @export + * @class ReportPanelProvider + * @implements {IControlProvider} + */ +export class ReportPanelProvider implements IControlProvider { + component: string = 'IBizReportPanelControl'; +} diff --git a/src/control/report-panel/report-panel.scss b/src/control/report-panel/report-panel.scss new file mode 100644 index 000000000..cf5c000ed --- /dev/null +++ b/src/control/report-panel/report-panel.scss @@ -0,0 +1,4 @@ +@include b(control-reportpanel) { + width: 100%; + height: 100%; +} diff --git a/src/control/report-panel/report-panel.tsx b/src/control/report-panel/report-panel.tsx new file mode 100644 index 000000000..5beeeb9d1 --- /dev/null +++ b/src/control/report-panel/report-panel.tsx @@ -0,0 +1,59 @@ +import { IControlProvider, ReportPanelController } from '@ibiz-template/runtime'; +import { useControlController, useNamespace } from '@ibiz-template/vue3-util'; +import { defineComponent, PropType, VNode } from 'vue'; +import { IDEReportPanel } from '@ibiz/model-core'; +import './report-panel.scss'; + +export const ReportPanelControl = defineComponent({ + name: 'IBizReportPanelControl', + props: { + modelData: { type: Object as PropType, required: true }, + context: { type: Object as PropType, required: true }, + params: { type: Object as PropType, default: () => ({}) }, + provider: { type: Object as PropType }, + noLoadDefault: { type: Boolean, default: false }, + }, + setup() { + const c = useControlController( + (...args) => new ReportPanelController(...args), + ); + const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`); + const renderContent = (): VNode | false => { + // 未加载不显示无数据 + const { reportType } = c.state; + switch (reportType) { + case 'USER': + return ( + + ) + case 'USER2': + return ( + + ) + default: + return (
+ 暂未实现 +
); + } + }; + return { + c, + ns, + renderContent + }; + }, + render() { + if (!this.c.state.isCreated) { + return; + } + return ( + + {this.renderContent()} + + ); + }, +}); diff --git a/src/index.ts b/src/index.ts index 3a8b8ff83..506772a83 100644 --- a/src/index.ts +++ b/src/index.ts @@ -40,6 +40,7 @@ import { IBizMEditViewPanelControl, IBizChartExpBarControl, IBizMapControl, + IBizReportPanelControl, } from './control'; import IBizEditor from './editor'; import { IBizWFStepTraceView } from './view'; @@ -102,6 +103,7 @@ export default { v.use(IBizMEditViewPanelControl); v.use(IBizChartExpBarControl); v.use(IBizMapControl); + v.use(IBizReportPanelControl); // 编辑器 v.use(IBizEditor); }, diff --git a/src/view-engine/index.ts b/src/view-engine/index.ts index daa50734f..b13571e59 100644 --- a/src/view-engine/index.ts +++ b/src/view-engine/index.ts @@ -40,6 +40,7 @@ import { TreeGridViewEngine } from './tree-grid-view.engine'; import { MEditView9Engine } from './medit-view9.engine'; import { ChartExpViewEngine } from './chart-exp-view.engine'; import { MapViewEngine } from './map-view.engine'; +import { ReportViewEngine } from './report-view.engine'; export * from './grid-view.engine'; export * from './index-view.engine'; @@ -264,5 +265,9 @@ export const IBizViewEngine = { 'VIEW_DEMAPVIEW', (c: IViewController) => new MapViewEngine(c), ); + ibiz.engine.register( + 'VIEW_DEREPORTVIEW', + (c: IViewController) => new ReportViewEngine(c), + ); }, }; diff --git a/src/view-engine/report-view.engine.ts b/src/view-engine/report-view.engine.ts new file mode 100644 index 000000000..46c8e8fc8 --- /dev/null +++ b/src/view-engine/report-view.engine.ts @@ -0,0 +1,219 @@ +import { IReportPanelController, IReportViewEvent, IReportViewState, ISearchBarController, ISearchFormController, SysUIActionTag, ViewController, ViewEngineBase } from "@ibiz-template/runtime"; +import { IAppDEReportView } from '@ibiz/model-core'; + +export class ReportViewEngine extends ViewEngineBase { + + /** + * 视图控制器 + * + * @protected + * @type {ViewController< + * IAppDEReportView, + * IReportViewState, + * IReportViewEvent + * >} + * @memberof EditViewEngine + */ + protected declare view: ViewController< + IAppDEReportView, + IReportViewState, + IReportViewEvent + >; + + + /** + * 搜索表单控制器 + * + * @readonly + */ + protected get searchForm(): ISearchFormController { + return this.view.getController('searchform') as ISearchFormController; + } + + /** + * 搜索栏控制器 + * + * @readonly + */ + protected get searchBar(): ISearchBarController { + return this.view.getController('searchbar') as ISearchBarController; + } + + /** + * 报表部件 + * + * @readonly + */ + get reportpanel(): IReportPanelController { + return this.view.getController('reportpanel') as IReportPanelController; + } + + /** + * 初始化 + * + * @return {*} {Promise} + * @memberof ReportViewEngine + */ + async onCreated(): Promise { + await super.onCreated(); + const { childNames } = this.view; + childNames.push('searchform', 'searchbar', 'reportpanel'); + if (!this.view.slotProps.reportpanel) { + this.view.slotProps.reportpanel = {}; + } + } + + /** + * 挂载 + * + * @return {*} {Promise} + * @memberof ReportViewEngine + */ + async onMounted(): Promise { + await super.onMounted(); + const { model } = this.view; + + this.reportpanel.evt.on('onBeforeLoad', () => { + this.reportpanel.state.searchParams = this.getSearchParams(); + }); + + this.reportpanel.evt.on('onLoadSuccess', event => { + this.view.evt.emit('onDataChange', { ...event, actionType: 'LOAD' }); + }); + // 计算是否默认展开搜索表单 + const controller = this.viewLayoutPanel!.panelItems.view_searchform; + if (controller) { + const formExists = !!this.searchForm; + controller.state.keepAlive = formExists; + controller.state.visible = formExists && !!model.expandSearchForm; + } + + // 搜索表单搜索触发加载 + if (this.searchForm) { + this.searchForm.evt.on('onSearch', () => { + this.reLoad(); + }); + } + + // 搜索栏搜索触发加载 + if (this.searchBar) { + this.searchBar.evt.on('onSearch', () => { + this.reLoad(); + }); + } + + if (!this.view.state.noLoadDefault && model.loadDefault) { + this.load(); + } + } + + // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types + async call(key: string, args: any): Promise { + if (key === SysUIActionTag.REFRESH) { + await this.refresh(); + return null; + } + if (key === SysUIActionTag.SEARCH) { + await this.searchForm.search(); + return null; + } + if (key === SysUIActionTag.RESET) { + await this.searchForm.reset(); + return null; + } + return super.call(key, args); + } + + /** + * 获取数据 + * + * @return {*} {IData[]} + * @memberof ReportViewEngine + */ + getData(): IData[] { + return this.reportpanel.getData(); + } + + /** + * 加载数据 + * + * @return {*} {Promise} + * @memberof ReportViewEngine + */ + async load(): Promise { + return this.reportpanel.load(); + } + + /** + * 视图重新加载 + * + * @return {*} {Promise} + */ + protected async reLoad(): Promise { + await this.reportpanel.load({ isInitialLoad: true }); + } + + /** + * 刷新 + * + * @return {*} {Promise} + * @memberof ReportViewEngine + */ + async refresh(): Promise { + await this.load(); + } + + /** + * 获取搜索相关的查询参数 + * + * @return {*} {IParams} + */ + protected getSearchParams(): IParams { + const params: IParams = {}; + // 有搜索表单的整合相关参数 + if (this.searchForm) { + Object.assign(params, this.searchForm.getFilterParams()); + } + // 有搜索栏的整合相关参数 + if (this.searchBar) { + Object.assign(params, this.searchBar.getFilterParams()); + } + return params; + } + + /** + *计算视图头部实现是否显示 + * + * @protected + * @return {*} {boolean} + * @memberof ReportViewEngine + */ + protected calcViewHeaderVisible(): boolean { + let showHeader = super.calcViewHeaderVisible(); + // 搜索栏 + if (!this.searchBar || !this.searchBar.state.visible) { + const controller = this.viewLayoutPanel!.panelItems.view_searchbar; + if (controller) { + controller.state.visible = false; + } + } else { + showHeader = true; + } + return showHeader; + } + + /** + * 切换搜索表单的显示与否 + * + * @protected + */ + protected toggleFilter(): void { + if (this.searchForm) { + const searchformContainer = + this.viewLayoutPanel!.panelItems.view_searchform; + if (searchformContainer) { + searchformContainer.state.visible = !searchformContainer.state.visible; + } + } + } +} \ No newline at end of file -- Gitee From be2e81468d3b38e807a8fab1c269c345a42430f1 Mon Sep 17 00:00:00 2001 From: zhangpingchuan <228939628@qq.com> Date: Tue, 28 Nov 2023 16:26:48 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=20=E6=96=B0=E5=A2=9E=E6=8A=A5?= =?UTF-8?q?=E8=A1=A8=E8=A7=86=E5=9B=BE=E3=80=81=E6=8A=A5=E8=A1=A8=E9=9D=A2?= =?UTF-8?q?=E6=9D=BF=E5=AE=9E=E7=8E=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../report-detail/user2-report-panel/user2-report-panel.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/control/report-panel/report-detail/user2-report-panel/user2-report-panel.tsx b/src/control/report-panel/report-detail/user2-report-panel/user2-report-panel.tsx index bdb66624b..c0e8f2428 100644 --- a/src/control/report-panel/report-detail/user2-report-panel/user2-report-panel.tsx +++ b/src/control/report-panel/report-detail/user2-report-panel/user2-report-panel.tsx @@ -29,8 +29,7 @@ export const User2ReportPanel = defineComponent({ if (!c) return "" const state = c.state; - // const curValue = state.data; - const curValue = '
涉案人王晓平李红梅
王晓平1111111
李红梅
'; + const curValue = state.data; if (curValue) { return curValue.replace( /onClick="(.*?)"/g, -- Gitee