提交 6192ed43 编写于 作者: zhujiamin's avatar zhujiamin

update: 选择视图、选择表格视图串通逻辑、UI绘制快速分组等

上级 7c265aeb
...@@ -4,14 +4,21 @@ ...@@ -4,14 +4,21 @@
<template> <template>
<AppViewBaseLayout> <AppViewBaseLayout>
<template v-slot:header-top>
<slot name="topMessage" />
</template>
<template v-slot:header-left> <template v-slot:header-left>
<slot name="caption" /> <slot name="caption" />
</template> </template>
<template v-slot:header-content>
<slot name="quickGroupSearch" />
<slot name="quickSearch" />
</template>
<template v-slot:header-right> <template v-slot:header-right>
<slot name="toolbar" /> <slot name="toolbar" />
</template> </template>
<template v-slot:header-bottom> <template v-slot:header-bottom>
<slot name="topMessage" /> <slot name="quickSearchForm" />
<slot name="searchForm" /> <slot name="searchForm" />
</template> </template>
<template v-slot:body-top> <template v-slot:body-top>
......
import { IActionParam } from "@core"; import { IActionParam, IParam } from "@core";
import { PickupView } from "../pickup-view"; import { MDView } from "../md-view";
import { PickupGridViewProps } from "./pickup-grid-view-prop"; import { PickupGridViewProps } from "./pickup-grid-view-prop";
import { PickupGridViewState } from "./pickup-grid-view-state"; import { PickupGridViewState } from "./pickup-grid-view-state";
...@@ -9,7 +9,7 @@ import { PickupGridViewState } from "./pickup-grid-view-state"; ...@@ -9,7 +9,7 @@ import { PickupGridViewState } from "./pickup-grid-view-state";
* @class PickupGridView * @class PickupGridView
* @extends {MainView} * @extends {MainView}
*/ */
export class PickupGridView extends PickupView { export class PickupGridView extends MDView {
/** /**
* @description 视图状态 * @description 视图状态
...@@ -18,6 +18,24 @@ export class PickupGridView extends PickupView { ...@@ -18,6 +18,24 @@ export class PickupGridView extends PickupView {
*/ */
public declare state: PickupGridViewState; public declare state: PickupGridViewState;
/**
* 当前视图表格部件
*
* @type {IParam}
* @memberof PickupGridView
*/
public declare grid: IParam;
/**
* @description 处理视图初始化
*
* @memberof PickupGridView
*/
public useViewInit() {
super.useViewInit();
// 初始化搜索表格引用
this.grid = ref(null);
}
/** /**
* @description 使用加载功能模块 * @description 使用加载功能模块
...@@ -31,7 +49,6 @@ export class PickupGridView extends PickupView { ...@@ -31,7 +49,6 @@ export class PickupGridView extends PickupView {
}) })
} }
/** /**
* 部件事件 * 部件事件
* *
...@@ -44,11 +61,19 @@ export class PickupGridView extends PickupView { ...@@ -44,11 +61,19 @@ export class PickupGridView extends PickupView {
return; return;
} }
if (action === 'selectionChange') { if (action === 'selectionChange') {
this.selectData = data;
this.emit('viewEvent', actionParam) this.emit('viewEvent', actionParam)
} }
} }
/**
* 获取多数据部件
*
* @return {*} {*}
* @memberof PickupGridView
*/
public getMDCtrl(): any {
return unref(this.grid);
}
/** /**
* @description 安装视图所有功能模块的方法 * @description 安装视图所有功能模块的方法
...@@ -60,7 +85,8 @@ export class PickupGridView extends PickupView { ...@@ -60,7 +85,8 @@ export class PickupGridView extends PickupView {
public moduleInstall() { public moduleInstall() {
const superParams = super.moduleInstall(); const superParams = super.moduleInstall();
return { return {
...superParams ...superParams,
grid: this.grid
}; };
} }
} }
\ No newline at end of file
...@@ -73,6 +73,7 @@ export class PickupView extends MainView { ...@@ -73,6 +73,7 @@ export class PickupView extends MainView {
const superParams = super.moduleInstall(); const superParams = super.moduleInstall();
return { return {
...superParams, ...superParams,
selectData:this.selectData,
onCancel: this.onCancel.bind(this), onCancel: this.onCancel.bind(this),
onConfirm: this.onConfirm.bind(this) onConfirm: this.onConfirm.bind(this)
}; };
......
...@@ -55,16 +55,16 @@ export class GridControl extends MDControl { ...@@ -55,16 +55,16 @@ export class GridControl extends MDControl {
if (!rowEditState) { if (!rowEditState) {
selectedRowKeys.value = [record.srfkey]; selectedRowKeys.value = [record.srfkey];
if (!record.children) { if (!record.children) {
this.emit("ctrlEvent", { tag: this.props.name, action: "selectionChange", data: [deepCopy(record)] }) this.emit("ctrlEvent", { tag: 'grid', action: "selectionChange", data: [deepCopy(record)] })
if (Object.is(rowActiveMode, 1)) { if (Object.is(rowActiveMode, 1)) {
this.emit("ctrlEvent", { tag: this.props.name, action: "rowClick", data: [deepCopy(record)] }) this.emit("ctrlEvent", { tag: 'grid', action: "rowClick", data: [deepCopy(record)] })
} }
} }
} }
}, },
onDblclick: () => { onDblclick: () => {
if (!record.children && Object.is(rowActiveMode, 2)) { if (!record.children && Object.is(rowActiveMode, 2)) {
this.emit("ctrlEvent", { tag: this.props.name, action: "rowDbClick", data: [deepCopy(record)] }) this.emit("ctrlEvent", { tag: 'grid', action: "rowDbClick", data: [deepCopy(record)] })
} }
} }
}; };
...@@ -87,7 +87,7 @@ export class GridControl extends MDControl { ...@@ -87,7 +87,7 @@ export class GridControl extends MDControl {
selection.push(select); selection.push(select);
} }
}) })
this.emit("ctrlEvent", { tag: this.props.name, action: "selectionChange", data: selection }) this.emit("ctrlEvent", { tag: 'grid', action: "selectionChange", data: selection })
}, },
}; };
}); });
...@@ -191,7 +191,7 @@ export class GridControl extends MDControl { ...@@ -191,7 +191,7 @@ export class GridControl extends MDControl {
} else if (selectFirstDefault) { } else if (selectFirstDefault) {
if (items && items.length > 0) { if (items && items.length > 0) {
this.emit("ctrlEvent", { this.emit("ctrlEvent", {
tag: this.props.name, tag: 'grid',
action: "selectionChange", action: "selectionChange",
data: [deepCopy(items[0])], data: [deepCopy(items[0])],
}); });
......
...@@ -28,7 +28,7 @@ export class PickupViewPanelControl extends MainControl { ...@@ -28,7 +28,7 @@ export class PickupViewPanelControl extends MainControl {
if (viewSubject) { if (viewSubject) {
let subscription = viewSubject.subscribe(({ tag, action, data }: IActionParam) => { let subscription = viewSubject.subscribe(({ tag, action, data }: IActionParam) => {
if (Object.is(controlName, tag) && Object.is("load", action)) { if (Object.is(controlName, tag) && Object.is("load", action)) {
viewSubject.next({ tag: tag, action: "load", data: data });
} }
}) })
// 部件卸载时退订viewSubject // 部件卸载时退订viewSubject
...@@ -62,6 +62,7 @@ export class PickupViewPanelControl extends MainControl { ...@@ -62,6 +62,7 @@ export class PickupViewPanelControl extends MainControl {
const superParams = super.moduleInstall(); const superParams = super.moduleInstall();
return { return {
...superParams, ...superParams,
load:this.useLoad.bind(this),
onViewEvent: this.onViewEvent.bind(this) onViewEvent: this.onViewEvent.bind(this)
}; };
} }
......
export const viewState = { export const viewState = {
enableQuickSearch: {{#if page.enableQuickSearch}}{{page.enableQuickSearch}}{{else}}false{{/if}},
expandSearchForm: {{#if page.expandSearchForm}}{{page.expandSearchForm}}{{else}}false{{/if}},
{{> @macro/front-end/views/view-base-config.hbs}} {{> @macro/front-end/views/view-base-config.hbs}}
}; };
\ No newline at end of file
...@@ -4,10 +4,18 @@ import { PickupGridView, IActionParam, IParam, IContext } from '@core'; ...@@ -4,10 +4,18 @@ import { PickupGridView, IActionParam, IParam, IContext } from '@core';
import { viewState } from './{{spinalCase page.codeName}}-state'; import { viewState } from './{{spinalCase page.codeName}}-state';
// todo 表格部件拿不到目前导入固定表格 // todo 表格部件拿不到目前导入固定表格
import { MainGrid } from '@widgets/chart-data/main-grid'; import { MainGrid } from '@widgets/chart-data/main-grid';
import { DefaultSearchForm } from '@widgets/chart-data/default-search-form';
{{#each page.controls as |control|}} {{#each page.controls as |control|}}
{{#if (eq control.controlType 'GRID') }} {{#if (eq control.controlType 'GRID') }}
import { {{control.codeName}}Grid } from '@widgets/{{spinalCase appEntity.codeName}}/{{spinalCase codeName}}-grid'; import { {{control.codeName}}Grid } from '@widgets/{{spinalCase appEntity.codeName}}/{{spinalCase codeName}}-grid';
{{/if}} {{/if}}
{{#if (and (eq controlType "SEARCHFORM") (eq name 'searchform'))}}
import { {{codeName}}SearchForm } from '@widgets/{{spinalCase appEntity.codeName}}/{{spinalCase codeName}}-search-form';
{{/if}}
{{#if (and (eq controlType "SEARCHFORM") (eq name 'quicksearchform'))}}
import { {{codeName}}QuickSearchForm } from '@widgets/{{spinalCase appEntity.codeName}}/{{spinalCase codeName}}-quick-search-form';
{{/if}}
{{/each}} {{/each}}
...@@ -17,6 +25,7 @@ interface Props { ...@@ -17,6 +25,7 @@ interface Props {
viewParams?: IParam; viewParams?: IParam;
openType?: "ROUTE" | "MODAL" | "EMBED"; openType?: "ROUTE" | "MODAL" | "EMBED";
viewSubject?: Subject<IActionParam>; viewSubject?: Subject<IActionParam>;
selectedData?: string;
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
...@@ -32,7 +41,7 @@ interface ViewEmit { ...@@ -32,7 +41,7 @@ interface ViewEmit {
const emit = defineEmits<ViewEmit>(); const emit = defineEmits<ViewEmit>();
// 安装功能模块,提供状态和能力方法 // 安装功能模块,提供状态和能力方法
const { state, confirm, onCtrlEvent } = new PickupGridView(viewState, props, emit).moduleInstall(); const { state, grid, onCtrlEvent, onQuickGroupEvent, onQuickSearchEvent } = new PickupGridView(viewState, props, emit).moduleInstall();
</script> </script>
<template> <template>
...@@ -41,8 +50,53 @@ const { state, confirm, onCtrlEvent } = new PickupGridView(viewState, props, emi ...@@ -41,8 +50,53 @@ const { state, confirm, onCtrlEvent } = new PickupGridView(viewState, props, emi
<AppIconText class="app-view__caption" size="large" :text="state.viewCaption" /> <AppIconText class="app-view__caption" size="large" :text="state.viewCaption" />
</template> </template>
{{#page.ctrls}} {{#page.ctrls}}
{{#if (and (eq controlType "SEARCHFORM") (eq name 'searchform'))}}
{{#if page.enableFilter}}
<template v-slot:quickSearch>
<div class='app-quick-search'>
<a-input v-if="state.enableQuickSearch" @pressEnter="onQuickSearchEvent($event)" allowClear/>
<a-popover trigger="click" :overlayStyle="{width: '50%'}">
<template #content>
<{{codeName}}SearchForm
v-if="state.expandSearchForm"
:context="state.context"
:viewParams="state.viewParams"
:controlAction="state.{{camelCase name}}.action"
:viewSubject="state.viewSubject"
@ctrlEvent="onCtrlEvent"
></{{codeName}}SearchForm>
</template>
<a-button><filter-outlined /></a-button>
</a-popover>
</div>
</template>
{{else}}
<template v-slot:searchForm>
<{{codeName}}SearchForm
v-if="state.expandSearchForm"
:context="state.context"
:viewParams="state.viewParams"
:controlAction="state.{{camelCase name}}.action"
:viewSubject="state.viewSubject"
@ctrlEvent="onCtrlEvent"
></{{codeName}}SearchForm>
</template>
{{/if}}
{{/if}}
{{#if (and (eq controlType "SEARCHFORM") (eq name 'quicksearchform'))}}
<template v-slot:quickSearchForm>
<{{codeName}}QuickSearchForm
:context="state.context"
:viewParams="state.viewParams"
:controlAction="state.{{camelCase name}}.action"
:viewSubject="state.viewSubject"
@ctrlEvent="onCtrlEvent"
></{{codeName}}QuickSearchForm>
</template>
{{/if}}
{{#eq controlType "GRID"}} {{#eq controlType "GRID"}}
<{{codeName}}Grid <{{codeName}}Grid
ref="grid"
:context="state.context" :context="state.context"
:multiple="false" :multiple="false"
:rowEditState="state.rowEditState" :rowEditState="state.rowEditState"
...@@ -51,6 +105,7 @@ const { state, confirm, onCtrlEvent } = new PickupGridView(viewState, props, emi ...@@ -51,6 +105,7 @@ const { state, confirm, onCtrlEvent } = new PickupGridView(viewState, props, emi
:viewParams="state.viewParams" :viewParams="state.viewParams"
:controlAction="state.{{name}}.action" :controlAction="state.{{name}}.action"
:viewSubject="state.viewSubject" :viewSubject="state.viewSubject"
@ctrlEvent="onCtrlEvent"
></{{codeName}}Grid> ></{{codeName}}Grid>
{{/eq}} {{/eq}}
{{/page.ctrls}} {{/page.ctrls}}
......
...@@ -28,7 +28,7 @@ interface ViewEmit { ...@@ -28,7 +28,7 @@ interface ViewEmit {
const emit = defineEmits<ViewEmit>(); const emit = defineEmits<ViewEmit>();
// 安装功能模块,提供状态和能力方法 // 安装功能模块,提供状态和能力方法
const { state, onCancel, onConfirm, onCtrlEvent } = new PickupView(viewState, props, emit).moduleInstall(); const { state, onCancel, onConfirm, onCtrlEvent, selectData } = new PickupView(viewState, props, emit).moduleInstall();
</script> </script>
<template> <template>
...@@ -55,6 +55,7 @@ const { state, onCancel, onConfirm, onCtrlEvent } = new PickupView(viewState, pr ...@@ -55,6 +55,7 @@ const { state, onCancel, onConfirm, onCtrlEvent } = new PickupView(viewState, pr
:viewParams="state.viewParams" :viewParams="state.viewParams"
:controlAction="state.{{name}}.action" :controlAction="state.{{name}}.action"
:viewSubject="state.viewSubject" :viewSubject="state.viewSubject"
:selectData="selectData"
@onCtrlEvent="onCtrlEvent" @onCtrlEvent="onCtrlEvent"
></{{codeName}}PickupViewPanel> ></{{codeName}}PickupViewPanel>
{{/eq}} {{/eq}}
......
...@@ -33,7 +33,7 @@ interface CtrlEmit { ...@@ -33,7 +33,7 @@ interface CtrlEmit {
const emit = defineEmits <CtrlEmit> (); const emit = defineEmits <CtrlEmit> ();
// 安装功能模块,提供状态和能力方法 // 安装功能模块,提供状态和能力方法
const { state } = new PickupViewPanelControl(ctrlState, props, emit).moduleInstall(); const { state, onViewEvent } = new PickupViewPanelControl(ctrlState, props, emit).moduleInstall();
// 暴露内部状态及能力 // 暴露内部状态及能力
defineExpose({ state, name: '{{ctrl.name}}' }); defineExpose({ state, name: '{{ctrl.name}}' });
...@@ -46,6 +46,8 @@ defineExpose({ state, name: '{{ctrl.name}}' }); ...@@ -46,6 +46,8 @@ defineExpose({ state, name: '{{ctrl.name}}' });
<{{ctrl.embeddedPSAppDEView.codeName}} <{{ctrl.embeddedPSAppDEView.codeName}}
:isShowButton="state.isShowButton" :isShowButton="state.isShowButton"
:selectedData="state.selectedData" :selectedData="state.selectedData"
:viewSubject="state.viewSubject"
@viewEvent="onViewEvent"
/> />
{{else}} {{else}}
<div class="app-pickup-view-panel--empty">视图不存在,请配置选择视图</div> <div class="app-pickup-view-panel--empty">视图不存在,请配置选择视图</div>
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册