1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
import { ModelTool, Util, MobMDCtrlViewInterface } from 'ibiz-core';
import { IPSDESearchForm, IPSSearchBar, IPSAppDEMultiDataView, IPSAppCodeList, IPSCodeItem, IPSAppDEField, IPSDEMobMDCtrl, IPSDEListItem, IPSDEListDataItem, IPSAppDataEntity } from '@ibiz/dynamic-model-api';
import { MainViewBase } from "./main-view-base";
/**
* 多数据视图基类
*
* @export
* @class MDViewBase
* @extends {MainViewBase}
*/
export class MDViewBase extends MainViewBase implements MobMDCtrlViewInterface {
/**
* 视图实例
*
* @memberof MDViewBase
*/
public declare viewInstance: any;
/**
* 多数据部件是否单选
*
* @type {boolean}
* @memberof MDViewBase
*/
public isSingleSelect?: boolean;
/**
* 搜索参数
*
* @memberof MDViewBase
*/
public queryParams = {
// 快速搜索
query: '',
// 快速分组数据对象
quickGroupData: {},
// 分类值
categoryValue: {},
// 排序值
sortValue: {}
}
/**
* 快速分组相关参数
*
* @type {*}
* @memberof MDViewBase
*/
public quickGroupParam: any = {
// 是否启用快速分组
isEnableQuickGroup: false,
// 快速分组是否有抛值
isEmitQuickGroupValue: false,
// 快速分组代码表
quickGroupCodeList: null,
}
/**
* 排序相关参数
*
* @memberof MDViewBase
*/
public sortParam = {
// 排序缓存
sortCache: { asc: "", desc: "" },
// 点击优先级加主题色
active: false
}
/**
* 搜索表单实例
*
* @type {IBizMobSearchFormModel}
* @memberof MDViewBase
*/
public searchFormInstance !: IPSDESearchForm;
/**
* 快速搜索表单实例
*
* @type {IBizMobSearchFormModel}
* @memberof MDViewBase
*/
public quickSearchFormInstance !: IPSDESearchForm;
/**
* 搜索栏实例
*
* @type {IBizSearchBarModel}
* @memberof MDViewBase
*/
public searchBarInstance!: IPSSearchBar;
/**
* 是否展开搜索表单
*
* @type {boolean}
* @memberof MDViewBase
*/
public isExpandSearchForm: boolean = false;
/**
* 部件计数
*
* @memberof MDViewBase
*/
public pageTotal: number = 0;
/**
* 视图实体对象
*
* @memberof MobMDViewBase
*/
get appDataEntity(){
return (this.viewInstance?.getPSAppDataEntity() as IPSAppDataEntity);
}
/**
* 初始化多数据视图实例
*
* @param opts
* @memberof MDViewBase
*/
public async viewModelInit() {
await super.viewModelInit();
this.searchFormInstance = ModelTool.findPSControlByName('searchform', this.viewInstance.getPSControls() || []) as IPSDESearchForm;
this.quickSearchFormInstance = ModelTool.findPSControlByName('quicksearchform', this.viewInstance.getPSControls() || []) as IPSDESearchForm;
this.searchBarInstance = ModelTool.findPSControlByType('SEARCHBAR', this.viewInstance.getPSControls() || []) as IPSSearchBar;
this.quickGroupParam.isEnableQuickGroup = this.viewInstance?.enableQuickGroup;
this.quickGroupParam.quickGroupCodeList = (this.viewInstance as IPSAppDEMultiDataView).getQuickGroupPSCodeList();
}
/**
* 多数据视图初始化
*
* @memberof MDViewBase
*/
public async viewInit() {
super.viewInit();
// 初始化属性值
this.queryParams.query = '';
this.quickGroupParam.isEnableQuickGroup = this.viewInstance?.enableQuickGroup;
}
/**
* 渲染快速搜索
*
* @memberof MDViewBase
*/
public renderQuickSearch() {
if (!this.viewInstance.enableQuickSearch) {
return;
}
return this.model && this.enableControlUIAuth ? <app-search-history appDataEntity={this.appDataEntity} on-quickValueChange={this.MDViewEvent.bind(this)} parentModel={this.viewInstance} slot="quicksearch"></app-search-history> : null;
}
/**
* 视图事件
*
* @param {string} tag
* @param {*} data
* @memberof MDViewBase
*/
public MDViewEvent($event: any) {
const { tag, value } = $event;
if (!tag) {
console.log('视图事件tag 异常');
return;
}
this.engine.onViewEvent(tag, value);
}
/**
* 渲染快速分组
*
* @memberof MDViewBase
*/
public renderQuickGroup() {
if (!this.quickGroupParam.isEnableQuickGroup) {
return;
}
const codeList = (this.viewInstance as IPSAppDEMultiDataView).getQuickGroupPSCodeList?.();
return <app-quick-group ref="quickGroup" context={this.context} viewparams={this.viewparams} codeList={codeList} on-valueChange={this.MDViewEvent.bind(this)} slot="quickGroupSearch"></app-quick-group>;
}
/**
* 渲染搜索表单
*
* @memberof MDViewBase
*/
public renderSearchForm() {
if (!this.searchFormInstance) {
return;
}
return this.renderSearchFormContent();
}
/**
* 渲染搜索表单内容区
*
* @memberof MobMDViewBase
*/
public renderSearchFormContent() {
let { targetCtrlName, targetCtrlParam, targetCtrlEvent }: { targetCtrlName: string, targetCtrlParam: any, targetCtrlEvent: any } = this.computeTargetCtrlData(this.searchFormInstance);
return this.$createElement(targetCtrlName, { props: targetCtrlParam, ref: this.searchFormInstance.name, on: targetCtrlEvent, slot: 'searchForm' });
}
/**
* 渲染多数据工具
*
* @memberof MDViewBase
*/
public renderViewHeaderButton() {
const controlClassNames: any = {
'default-sort': true,
[`${Util.srfFilePath2(this.viewInstance.codeName)}-toolbar`]: true,
};
const mdctrl = ModelTool.findPSControlByName('mdctrl', this.viewInstance.getPSControls()) as IPSDEMobMDCtrl;
const listItems = mdctrl?.getPSDEListItems();
const listDataItems = mdctrl?.getPSDEListDataItems();
return <div class="mdview-tools" slot="mdviewtools">
<div class={controlClassNames}>
<div class="view-tool">
<div class="view-tool-sorts">
{listItems && listItems.map((item: IPSDEListItem) => {
if (item.enableSort && item.itemType == 'ACTIONITEM') {
return <div class="view-tool-sorts-item">
<span class={{ text: true, active: this.sortParam.active }} on-click={() => this.MDViewEvent({ tag: 'onsort', value: item?.name })}>{item?.caption}</span>
<span class="sort-icon" on-click={() => this.MDViewEvent({ tag: 'onsort', value: item?.name })}>
<ion-icon class={{ 'ios': true, 'hydrated': true, 'sort-select': this.sortParam.sortCache.asc == item?.name }} name="chevron-up-outline" ></ion-icon>
<ion-icon class={{ 'ios': true, 'hydrated': true, 'sort-select': this.sortParam.sortCache.desc == item?.name }} name="chevron-down-outline" ></ion-icon>
</span>
</div>
}
})}
</div>
</div>
</div>
<div class="mdview-tools-select">
{listItems && listItems.map((item: IPSDEListItem) => {
// 列表项需要代码表,需要根据key去数据项中找到对应的然后去取代码表
const dataItem = listDataItems?.find((dataItem: IPSDEListDataItem) => {
return dataItem.name == item.name.toLowerCase();
})
const codelist = dataItem?.getFrontPSCodeList?.() as IPSAppCodeList;
let items: Array<any> = [];
if (codelist && codelist?.getPSCodeItems?.()) {
const codeItems = codelist?.getPSCodeItems() as IPSCodeItem[];
codeItems.forEach((codeitem: IPSCodeItem) => {
items.push({
value: codeitem?.value,
label: codeitem?.text
})
})
}
if (codelist?.codeListType == 'STATIC' && item.itemType == 'TEXTITEM') {
return <app-van-select name={'n_' + item.name.toLowerCase() + '_eq'} title={item?.caption} items={items} on-onConfirm={this.MDViewEvent.bind(this)}></app-van-select>
}
})}
</div>
</div>
}
}