提交 d008398c 编写于 作者: Mosher's avatar Mosher

update:更新树导航部件、面板属性样式

上级 378884bc
......@@ -16,14 +16,6 @@ export class ExpBarControl extends MainControl {
*/
public declare state: ExpBarControlState;
/**
* 当前视图表格部件
*
* @type {IParam}
* @memberof GridView
*/
public declare xData: IParam;
/**
* 通知状态
*
......@@ -41,7 +33,6 @@ export class ExpBarControl extends MainControl {
* @memberof ExpBarControl
*/
protected useExpCtrlInit() {
this.xData = ref(null);
onMounted(() => {
const xDataControl = this.getXDataCtrl();
if (xDataControl) {
......@@ -111,16 +102,6 @@ export class ExpBarControl extends MainControl {
}
}
/**
* @description 获取多数据部件
* @private
* @return {*}
* @memberof ExpBarControl
*/
private getXDataCtrl() {
return unref(this.xData);
}
/**
* @description 安装部件所有功能模块的方法
* @return {*}
......@@ -131,7 +112,6 @@ export class ExpBarControl extends MainControl {
this.useExpCtrlInit();
return {
...superParams,
xData: this.xData,
onCtrlEvent: this.onCtrlEvent.bind(this)
};
}
......
......@@ -21,7 +21,7 @@ export class MainControl extends ControlBase {
* @type {IParam}
* @memberof MainControl
*/
private declare xData: IParam;
protected declare xData: IParam;
/**
* 界面行为服务
......@@ -72,8 +72,8 @@ export class MainControl extends ControlBase {
* @return {*}
* @memberof MainControl
*/
public getXDataCtrl() {
return this.xData;
protected getXDataCtrl() {
return unref(this.xData);
}
/**
......
......@@ -169,6 +169,37 @@ export class TreeControl extends MDControl {
return load;
}
/**
* 使用搜索模块
*
* @memberof TreeControl
*/
public useSearch() {
const { viewSubject, controlName } = this.state;
// 订阅viewSubject,监听search行为
if (viewSubject) {
let subscription = viewSubject.subscribe(({ tag, action, data }: IActionParam) => {
if (!Object.is(controlName, tag)) {
return;
}
if (Object.is("search", action)) {
this.state.srfnodefilter = data?.query;
this.load({}, true);
}
})
// 部件卸载时退订viewSubject
onUnmounted(() => {
subscription.unsubscribe();
})
}
}
/**
* 使用刷新模块
*
* @return {*}
* @memberof TreeControl
*/
public useRefresh() {
const { viewSubject, controlName } = this.state;
......@@ -209,6 +240,12 @@ export class TreeControl extends MDControl {
return refresh;
}
/**
* 刷新父节点
*
* @protected
* @memberof TreeControl
*/
protected refreshParent() {
const { currentSelectedNode } = this.state;
if (currentSelectedNode && currentSelectedNode.parentNodeId) {
......@@ -221,6 +258,12 @@ export class TreeControl extends MDControl {
}
}
/**
* 刷新全部节点
*
* @protected
* @memberof TreeControl
*/
protected refreshAll() {
const { currentSelectedNode } = this.state;
// this.load({}, true);
......@@ -478,6 +521,7 @@ export class TreeControl extends MDControl {
*/
public moduleInstall() {
const superParams = super.moduleInstall();
this.useSearch();
return {
...superParams,
onTreeNodeSelect: this.onTreeNodeSelect.bind(this),
......
import { deepCopy, ExpBarControl, IActionParam, IParam, UIUtil } from "@core";
import { TreeExpBarControlProps } from "./tree-exp-bar-control-prop";
import { TreeExpBarControlState } from "./tree-exp-bar-control-state";
/**
......@@ -15,6 +16,42 @@ export class TreeExpBarControl extends ExpBarControl {
*/
public declare state: TreeExpBarControlState;
/**
* 树导航部件输入参数
*
* @type {TreeExpBarControlProps}
* @memberof TreeExpBarControl
*/
public declare props: TreeExpBarControlProps;
/**
* 搜索
*
* @param {*} value
* @param {MouseEvent} event
* @memberof TreeExpBarControl
*/
public search(value: any, event: MouseEvent) { }
/**
* 使用搜索模块
*
* @protected
* @return {*}
* @memberof TreeExpBarControl
*/
protected useSearch() {
const search = (value: any, event: MouseEvent) => {
const { viewSubject } = this.state;
const xData = this.getXDataCtrl();
if (xData) {
viewSubject.next({ tag: xData.name, action: 'search', data: { query: value } });
}
}
this.search = search;
return search;
}
/**
* @description 选中数据变化
* @protected
......@@ -150,7 +187,8 @@ export class TreeExpBarControl extends ExpBarControl {
const superParams = super.moduleInstall();
this.useLoad();
return {
...superParams
...superParams,
search: this.useSearch()
};
}
}
\ No newline at end of file
......@@ -2,7 +2,7 @@
// 面板属性样式配置
.app-panel-field {
display: flex;
width: 100%;
padding: 0 6px;
}
.panel-field__label {
height: 32px;
......@@ -17,4 +17,10 @@
line-height: 32px;
flex-grow: 1;
}
// 面板容器
.panel-container-header {
height: 32px;
line-height: 32px;
padding: 0 6px;
}
}
\ No newline at end of file
......@@ -8,6 +8,27 @@
.app-split {
background: #fff;
}
// 搜索栏头部
.tree-exp-bar-header {
display: flex;
flex-direction: column;
padding-left: 12px;
padding-bottom: 6px;
padding: 0 6px 6px 12px;
// 标题
.title {
height: 32px;
line-height: 32px;
font-size: 16px;
font-weight: 600;
margin-bottom: 4px;
border-bottom: 1px solid var(--app-view-layout-header-border-bottom);
}
// 搜索栏
.search {
padding: 6px 0;
}
}
.tree-exp-bar-body {
padding: 6px 6px 6px 0;
}
......
......@@ -2,12 +2,23 @@ export const ctrlState = {
controlCodeName: '{{ctrl.codeName}}',
controlName: '{{ctrl.name}}',
counter: 0,
enableSearch: {{ctrl.enableSearch}},
xDataControlName: '{{ctrl.xDataControlName}}',
selection: {},
searchValue: '',
showTitleBar: {{#if ctrl.showTitleBar}}true{{else}}false{{/if}},
split: 0.2,
title: '{{ctrl.title}}',
titleRes: '{{#if ctrl.titlePSLanguageRes}}{{ctrl.titlePSLanguageRes.lanResTag}}{{/if}}',
{{#each ctrl.psControls as | childCtrl |}}
{{#eq childCtrl.controlType 'TOOLBAR'}}
toolbar: [
{{#childCtrl.psDEToolbarItems}}
{ name:'{{name}}',caption:'{{caption}}',groupExtractMode:'{{groupExtractMode}}',itemType:'{{itemType}}',noPrivDisplayMode:'{{noPrivDisplayMode}}',showIcon:{{showIcon}},showCaption:{{showCaption}},tooltip:'{{tooltip}}',disabled: false, visible: true, imgPath: '{{imgPath}}',iconClass: '{{iconClass}}',xDataControlName:'{{xDataControlName}}',{{#if uIAction}}uIAction:{codeName:'{{uIAction.codeName}}',fullCodeName:'{{uIAction.fullCodeName}}',uIActionMode:'{{uIAction.uIActionMode}}',actionTarget:'{{uIAction.actionTarget}}',uIActionTag:'{{uIAction.uIActionTag}}',dataAccessAction:'{{uIAction.dataAccessAction}}',uIActionType:'{{uIAction.uIActionType}}'}{{#if uIAction.counterId}},counterId: '{{uIAction.counterId}}'{{/if}}{{/if}} },
{{/childCtrl.psDEToolbarItems}}
],
{{/eq}}
{{/each}}
viewRefs: [
{{#each ctrl.psAppViewRefs as | viewRef |}}
{
......
......@@ -4,12 +4,31 @@ import { IActionParam, IParam, ControlAction, TreeExpBarControl, IContext } from
import { ctrlState } from './{{spinalCase ctrl.codeName}}-tree-exp-bar-state';
{{#ctrl.ctrls}}
{{#eq controlType "TREEVIEW"}}
import { {{codeName}}Tree} from '@widgets/{{spinalCase appEntity.codeName}}/{{spinalCase codeName}}-tree';
import { {{codeName}}Tree} from '@widgets/{{spinalCase psAppDataEntity.codeName}}/{{spinalCase codeName}}-tree';
{{/eq}}
{{/ctrl.ctrls}}
{{#each ctrl.appViewRefs as | viewRef |}}
{{#if viewRef.refPSAppView}}
{{#if
(or
(eq viewRef.refPSAppView.viewType 'APPINDEXVIEW')
(eq viewRef.refPSAppView.viewType 'APPPORTALVIEW')
(eq viewRef.refPSAppView.viewType 'DEEDITVIEW')
(eq viewRef.refPSAppView.viewType 'DEPANELVIEW')
(eq viewRef.refPSAppView.viewType 'DEGRIDVIEW')
(eq viewRef.refPSAppView.viewType 'DELISTVIEW')
(eq viewRef.refPSAppView.viewType 'DEMPICKUPVIEW')
(eq viewRef.refPSAppView.viewType 'DEPICKUPGRIDVIEW')
(eq viewRef.refPSAppView.viewType 'DEPICKUPVIEW')
(eq viewRef.refPSAppView.viewType 'DETREEVIEW')
(eq viewRef.refPSAppView.viewType 'DETREEEXPVIEW')
(eq viewRef.refPSAppView.viewType 'DETABEXPVIEW')
)
}}
import {{viewRef.refPSAppView.name}} from '@views/{{spinalCase viewRef.refPSAppView.psAppModule.codeName}}/{{spinalCase viewRef.refPSAppView.codeName}}';
{{else}}
//import {{viewRef.refPSAppView.name}} from '@views/{{spinalCase viewRef.refPSAppView.psAppModule.codeName}}/{{spinalCase viewRef.refPSAppView.codeName}}';
{{/if}}
{{/if}}
{{/each}}
......@@ -36,7 +55,7 @@ interface CtrlEmit {
const emit = defineEmits <CtrlEmit> ();
// 安装功能模块,提供状态和能力方法
const { name, state, onCtrlEvent, xData } = new TreeExpBarControl(ctrlState, props, emit).moduleInstall();
const { name, state, onCtrlEvent, xDataCtrl, search, onToolbarEvent } = new TreeExpBarControl(ctrlState, props, emit).moduleInstall();
// 暴露内部状态及能力
defineExpose({ name, state });
......@@ -46,14 +65,28 @@ defineExpose({ name, state });
<div class="app-tree-exp-bar{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}">
<AppSplit v-model="state.split">
<template #left>
<div v-if="state.showTitleBar" class="tree-exp-bar-title">
<span>\{{ state.title }}</span>
<div v-if="state.enableSearch || state.toolbar || state.showTitleBar" class="tree-exp-bar-header">
<div class="title" v-if="state.showTitleBar"><span>\{{ state.title }}</span></div>
{{~#if ctrl.enableSearch}}
<a-input-search class="tree-exp-bar__search" v-model:value="state.searchValue" @search="search" />
{{/if}}
{{#each ctrl.psControls as | childCtrl |}}
{{#eq childCtrl.controlType 'TOOLBAR'}}
{{!-- TODO 计数器 --}}
<AppToolbar
mode="button"
name="{{lowerCase childCtrl.codeName}}"
:actionModel="state.toolbar"
@onToolbarEvent="onToolbarEvent">
</AppToolbar>
{{/eq}}
{{/each}}
</div>
<div class="tree-exp-bar-body">
{{#ctrl.ctrls}}
{{#eq controlType "TREEVIEW"}}
<{{codeName}}Tree
ref="xData"
ref="xDataCtrl"
name="{{name}}"
:context="state.context"
:viewParams="state.viewParams"
......@@ -68,8 +101,24 @@ defineExpose({ name, state });
</div>
</template>
<template #right>
{{#each ctrl.psAppViewRefs as | viewRef |}}
{{#each ctrl.appViewRefs as | viewRef |}}
{{#if viewRef.refPSAppView}}
{{#if
(or
(eq viewRef.refPSAppView.viewType 'APPINDEXVIEW')
(eq viewRef.refPSAppView.viewType 'APPPORTALVIEW')
(eq viewRef.refPSAppView.viewType 'DEEDITVIEW')
(eq viewRef.refPSAppView.viewType 'DEPANELVIEW')
(eq viewRef.refPSAppView.viewType 'DEGRIDVIEW')
(eq viewRef.refPSAppView.viewType 'DELISTVIEW')
(eq viewRef.refPSAppView.viewType 'DEMPICKUPVIEW')
(eq viewRef.refPSAppView.viewType 'DEPICKUPGRIDVIEW')
(eq viewRef.refPSAppView.viewType 'DEPICKUPVIEW')
(eq viewRef.refPSAppView.viewType 'DETREEVIEW')
(eq viewRef.refPSAppView.viewType 'DETREEEXPVIEW')
(eq viewRef.refPSAppView.viewType 'DETABEXPVIEW')
)
}}
<{{viewRef.refPSAppView.name}}
v-if="state.selection.viewName && state.selection.viewName === '{{viewRef.refPSAppView.name}}'"
class="tree-exp__nav-view"
......@@ -77,6 +126,19 @@ defineExpose({ name, state });
:context="state.selection.context"
:viewParams="state.selection.viewParams">
</{{viewRef.refPSAppView.name}}>
{{else}}
<!-- <{{viewRef.refPSAppView.name}}
v-if="state.selection.viewName && state.selection.viewName === '{{viewRef.refPSAppView.name}}'"
class="tree-exp__nav-view"
:viewDefaultUsage="false"
:context="state.selection.context"
:viewParams="state.selection.viewParams">
</{{viewRef.refPSAppView.name}}> -->
{{/if}}
{{/if}}
{{/each}}
{{#each ctrl.psAppViewRefs as | viewRef |}}
{{#if viewRef.refPSAppView}}
{{/if}}
{{/each}}
</template>
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册