Skip to content

Commit

Permalink
feat:add tabs widget
Browse files Browse the repository at this point in the history
  • Loading branch information
vellengs committed Jun 20, 2018
1 parent 191447f commit 2fecca7
Show file tree
Hide file tree
Showing 7 changed files with 184 additions and 50 deletions.
51 changes: 26 additions & 25 deletions packages/client/src/app/core/startup/startup.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { ACLService } from '@delon/acl';
import { TranslateService } from '@ngx-translate/core';
import { I18NService } from '../i18n/i18n.service';
import { CoreService } from 'generated';
import * as treeify from 'array-to-tree';
/**
* 用于应用启动时
* 一般用来获取应用所需要的基础数据等
Expand All @@ -32,14 +33,14 @@ export class StartupService {
zip(
this.httpClient.get(`assets/i18n/${this.i18n.defaultLang}.json`),
this.coreService.settingGetSettingsByName('main'),
// this.coreService.menuGetUserMenus(),
this.coreService.menuGetUserMenus(),
).pipe(
// 接收其他拦截器后产生的异常消息
catchError(([langData, settingsData]) => {
catchError(([langData, settingsData, menuData]) => {
resolve(null);
return [langData, settingsData];
return [langData, settingsData, menuData];
})
).subscribe(([langData, settings]) => {
).subscribe(([langData, settings, menuData]) => {
// setting language data
this.translate.setTranslation(this.i18n.defaultLang, langData);
this.translate.setDefaultLang(this.i18n.defaultLang);
Expand All @@ -53,29 +54,29 @@ export class StartupService {
// 设置页面标题的后缀
this.titleService.suffix = settings.name;

// if (menuData && Array.isArray(menuData)) {
// const menus = menuData.map((item) => {
// return {
// id: item.id,
// text: item.name,
// group: item.group,
// icon: item.icon,
// link: item.link,
// parent: item.parent
// };
// });
if (menuData && Array.isArray(menuData)) {
const menus = menuData.map((item) => {
return {
id: item.id,
text: item.name,
group: item.group,
icon: item.icon,
link: item.link,
parent: item.parent
};
});

// const tree = treeify(menus, {
// parentProperty: 'parent',
// customID: 'id'
// });
const tree = treeify(menus, {
parentProperty: 'parent',
customID: 'id'
});

// this.menuService.add([{
// text: '主导航',
// group: true,
// children: tree
// }]);
// }
this.menuService.add([{
text: '主导航',
group: true,
children: tree
}]);
}
},
() => { },
() => {
Expand Down
50 changes: 27 additions & 23 deletions packages/client/src/app/layout/default/header/header.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Component, ViewChild, OnInit } from '@angular/core';
import { SettingsService, MenuService } from '@delon/theme';
import { CoreService } from 'generated';
import * as treeify from 'array-to-tree';
import { StartupService } from '@core/startup/startup.service';

@Component({
selector: 'app-header',
Expand All @@ -15,33 +16,36 @@ export class HeaderComponent implements OnInit {
public settings: SettingsService,
public menuService: MenuService,
public coreService: CoreService,
public startupService: StartupService,

) { }
async ngOnInit() {
this.menuService.clear();
const menuData = await this.coreService.menuGetUserMenus().toPromise();
if (menuData && Array.isArray(menuData)) {
const menus = menuData.map((item) => {
return {
id: item.id,
text: item.name,
group: item.group,
icon: item.icon,
link: item.link,
parent: item.parent
};
});
const tree = treeify(menus, {
parentProperty: 'parent',
customID: 'id'
});
// this.menuService.clear();
// this.startupService.load();
// this.menuService.clear();
// const menuData = await this.coreService.menuGetUserMenus().toPromise();
// if (menuData && Array.isArray(menuData)) {
// const menus = menuData.map((item) => {
// return {
// id: item.id,
// text: item.name,
// group: item.group,
// icon: item.icon,
// link: item.link,
// parent: item.parent
// };
// });
// const tree = treeify(menus, {
// parentProperty: 'parent',
// customID: 'id'
// });

this.menuService.add([{
text: '主导航',
group: true,
children: tree
}]);
}
// this.menuService.add([{
// text: '主导航',
// group: true,
// children: tree
// }]);
// }
}
toggleCollapsedSidebar() {
this.settings.setLayout('collapsed', !this.settings.layout.collapsed);
Expand Down
5 changes: 4 additions & 1 deletion packages/client/src/app/pages/login/login.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { SettingsService } from '@delon/theme';
import { NzMessageService } from 'ng-zorro-antd';
import { SocialService, DA_SERVICE_TOKEN, ITokenService } from '@delon/auth';
import { UserService } from '../../services/user.service';
import { StartupService } from '@core/startup/startup.service';

@Component({
selector: 'app-pages-login',
Expand All @@ -26,7 +27,7 @@ export class CustomLoginComponent implements OnDestroy {
private router: Router,
public msg: NzMessageService,
public userService: UserService,
private settingsService: SettingsService
private start: StartupService
) {
this.form = fb.group({
userName: [null, [Validators.required, Validators.minLength(5)]],
Expand All @@ -47,6 +48,8 @@ export class CustomLoginComponent implements OnDestroy {
password: this.password.value
});

this.start.load();

if (res) {
this.router.navigate(['/']);
} else {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { ChoicesWidgetComponent } from '@shared/json-schema/widgets/choices/choi
import { ImageWidgetComponent } from '@shared/json-schema/widgets/image/image.widget';
import { AvatarWidgetComponent } from '@shared/json-schema/widgets/avatar/avatar.widget';
import { UmeditorWidget } from '@shared/json-schema/widgets/umeditor/umeditor.widget';
import { TabsWidgetComponent } from '@shared/json-schema/widgets/tabs/tabs.widget';

export const SCHEMA_THIRDS_COMPONENTS = [
TinymceWidget,
Expand All @@ -24,6 +25,7 @@ export const SCHEMA_THIRDS_COMPONENTS = [
ChoicesWidgetComponent,
ImageWidgetComponent,
AvatarWidgetComponent,
TabsWidgetComponent,
];

@NgModule({
Expand All @@ -49,5 +51,6 @@ export class JsonSchemaModule {
widgetRegistry.register(ImageWidgetComponent.KEY, ImageWidgetComponent);
widgetRegistry.register(AvatarWidgetComponent.KEY, AvatarWidgetComponent);
widgetRegistry.register(UmeditorWidget.KEY, UmeditorWidget);
widgetRegistry.register(TabsWidgetComponent.KEY, TabsWidgetComponent);
}
}
101 changes: 101 additions & 0 deletions packages/client/src/app/shared/json-schema/widgets/tabs/tabs.widget.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import { Component, OnInit, ChangeDetectorRef, Inject } from '@angular/core';
import { ControlWidget, SFSchemaEnum, SFSchema, SFUISchemaItem, SFComponent, SFSchemaEnumType, SFGridSchema, ObjectLayoutWidget, FormProperty } from '@delon/form';
import { getData } from './../../util';
// tslint:disable-next-line:import-blacklist
import { of, Observable } from 'rxjs';
import { delay } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

@Component({
selector: 'sf-tabs',
template:
`
<nz-tabset (nzSelectChange)="queryChange([$event])">
<nz-tab *ngFor="let tab of tabs" [nzTitle]="titleTemplate">
<ng-template #titleTemplate>
{{tab.title}}
</ng-template>
</nz-tab>
</nz-tabset>
<div>
<div nz-row [nzGutter]="16">
<ng-container *ngIf="grid; else noGrid">
<nz-row [nzGutter]="grid.gutter">
<ng-container *ngFor="let i of props[currentIndex]">
<ng-container *ngIf="i.property.visible">
<nz-col
[nzSpan]="i.grid.span" [nzOffset]="i.grid.offset"
[nzXs]="i.grid.xs" [nzSm]="i.grid.sm" [nzMd]="i.grid.md"
[nzLg]="i.grid.lg" [nzXl]="i.grid.xl" [nzXXl]="i.grid.xxl">
<sf-item [formProperty]="i.property" [fixed-label]="i.spanLabelFixed"></sf-item>
</nz-col>
</ng-container>
</ng-container>
</nz-row>
</ng-container>
<ng-template #noGrid>
<ng-container *ngFor="let i of props[currentIndex]">
<ng-container *ngIf="i.property.visible">
<sf-item [formProperty]="i.property" [fixed-label]="i.spanLabelFixed"></sf-item>
</ng-container>
</ng-container>
</ng-template>
</div>
</div>
`,
preserveWhitespaces: false,

})
export class TabsWidgetComponent extends ObjectLayoutWidget implements OnInit {

grid: SFGridSchema;
tabs: any = [];
static readonly KEY = 'tabs';
currentIndex = 0;
props: any = {};

constructor(
@Inject(ChangeDetectorRef) public readonly cd: ChangeDetectorRef,
@Inject(SFComponent) public readonly sfComp: SFComponent,
public client: HttpClient,
) {
super(cd, sfComp);
}

ngOnInit(): void {
this.grid = this.ui.grid;
this.tabs = this.ui.tabs || [];
this.tabs.forEach((tab, index) => {
this.props[index] = this.props[index] || [];
if (Array.isArray(tab.fields)) {
tab.fields.forEach(element => {
const item = this.getFormProperty(element);
this.props[index].push(item);
});
}
});

}

getFormProperty(key) {
const property = this.formProperty.properties[key] as FormProperty;
property.ui = property.ui || {};

// to fixed ui widget default set by parent.
if (property.ui.widget === this.ui.widget) {
property.ui.widget = property.type;
}

const item = {
property: property,
grid: property.ui.grid || this.grid || {},
spanLabelFixed: property.ui.spanLabelFixed,
};
return item;
}


queryChange(list: any) {
this.currentIndex = list[0].index;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ const profile: SFSchema = {
}
},
},
avatar2: {
title: '头像',
type: t.string
},
nick: {
title: '昵称',
type: t.string,
Expand Down Expand Up @@ -63,10 +67,27 @@ const profile: SFSchema = {
},
required: ['nick', 'email', 'mobile'],
ui: {
widget: w.tabs,
spanLabelFixed: 100,
grid: {
span: 8
}
},
tabs: [{
title: '基本信息',
fields: [
'avatar',
'nick',
]
}, {
title: '联系信息',
fields: [
'email',
'mobile',
'siteUrl',
'company',
'address',
]
}]
}
};

Expand Down
1 change: 1 addition & 0 deletions packages/server/src/types/appearance.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export enum WidgetTypes {
choices = 'choices',
image = 'image',
avatar = 'avatar',
tabs = 'tabs',
}

export interface ColumnSets {
Expand Down

0 comments on commit 2fecca7

Please sign in to comment.