Rainie/bbq
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

添加zorro,alain样例

Browse Source
This commit is contained in:
Taric Xin
2021-11-27 17:17:55 +08:00
parent 8e2bd3e502
commit d4bd35b9df
25 changed files with 803 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
_mock/_rule.ts
View File

@ -10,7 +10,7 @@ for (let i = 0; i < 46; i += 1) {
href: 'https://ant.design',
avatar: [
'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png'
][i % 2],
no: `TradeCode ${i}`,
title: `一个任务名称 ${i}`,
@ -20,11 +20,11 @@ for (let i = 0; i < 46; i += 1) {
status: Math.floor(Math.random() * 10) % 4,
updatedAt: new Date(`2017-07-${i < 18 ? '0' + (Math.floor(i / 2) + 1) : Math.floor(i / 2) + 1}`),
createdAt: new Date(`2017-07-${i < 18 ? '0' + (Math.floor(i / 2) + 1) : Math.floor(i / 2) + 1}`),
progress: Math.ceil(Math.random() * 100),
progress: Math.ceil(Math.random() * 100)
});
}
function getRule(params: any): any[] {
function getRule(params: any): any {
let ret = [...list];
if (params.sorter) {
const s = params.sorter.split('_');
@ -36,22 +36,23 @@ function getRule(params: any): any[] {
});
}
if (params.statusList && params.statusList.length > 0) {
ret = ret.filter((data) => params.statusList.indexOf(data.status) > -1);
ret = ret.filter(data => params.statusList.indexOf(data.status) > -1);
}
if (params.no) {
ret = ret.filter((data) => data.no.indexOf(params.no) > -1);
ret = ret.filter(data => data.no.indexOf(params.no) > -1);
}
return ret;
return { data: ret, success: true };
}
function removeRule(nos: string): boolean {
nos.split(',').forEach((no) => {
const idx = list.findIndex((w) => w.no === no);
function removeRule(nos: string): any {
nos.split(',').forEach(no => {
const idx = list.findIndex(w => w.no === no);
if (idx !== -1) {
list.splice(idx, 1);
}
});
return true;
return { data: true, success: true };
}
function saveRule(description: string): void {
@ -61,7 +62,7 @@ function saveRule(description: string): void {
href: 'https://ant.design',
avatar: [
'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png'
][i % 2],
no: `TradeCode ${i}`,
title: `一个任务名称 ${i}`,
@ -71,12 +72,12 @@ function saveRule(description: string): void {
status: Math.floor(Math.random() * 10) % 2,
updatedAt: new Date(),
createdAt: new Date(),
progress: Math.ceil(Math.random() * 100),
progress: Math.ceil(Math.random() * 100)
});
}
export const RULES = {
'/rule': (req: MockRequest) => getRule(req.queryString),
'DELETE /rule': (req: MockRequest) => removeRule(req.queryString.nos),
'POST /rule': (req: MockRequest) => saveRule(req.body.description),
'POST /rule': (req: MockRequest) => getRule(req.queryString),
'POST /delete/rule': (req: MockRequest) => removeRule(req.body.nos),
// 'POST /rule': (req: MockRequest) => saveRule(req.body.description)
};

4
src/app/app.module.ts
View File

@ -7,7 +7,8 @@ import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SimpleInterceptor } from '@delon/auth';
import { NzNotificationModule } from 'ng-zorro-antd/notification';
import zh from '@angular/common/locales/zh';
registerLocaleData(zh);
// #region global third module
import { BidiModule } from '@angular/cdk/bidi';
@ -50,6 +51,7 @@ import { RoutesModule } from './routes/routes.module';
import { SharedModule } from './shared/shared.module';
import { STWidgetModule } from './shared/widget/st-widget.module';
import { Observable } from 'rxjs';
import { registerLocaleData } from '@angular/common';
@NgModule({
declarations: [AppComponent],

116
src/app/routes/dashboard/dashboard.component.html
View File

@ -1,109 +1,9 @@
<page-header [title]="'查询表格'"></page-header>
<nz-card [nzBordered]="false">
<form nz-form [nzLayout]="'inline'" (ngSubmit)="getData()" class="search__form">
<div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
<div nz-col nzMd="8" nzSm="24">
<nz-form-item>
<nz-form-label nzFor="no">规则编号</nz-form-label>
<nz-form-control>
<input nz-input [(ngModel)]="q.no" name="no" placeholder="请输入" id="no" />
</nz-form-control>
</nz-form-item>
</div>
<div nz-col nzMd="8" nzSm="24">
<nz-form-item>
<nz-form-label nzFor="status">使用状态</nz-form-label>
<nz-form-control>
<nz-select [(ngModel)]="q.status" name="status" id="status" [nzPlaceHolder]="'请选择'" [nzShowSearch]="true">
<nz-option *ngFor="let i of status; let idx = index" [nzLabel]="i.text" [nzValue]="idx"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
</div>
<div nz-col nzMd="8" nzSm="24" *ngIf="expandForm">
<nz-form-item>
<nz-form-label nzFor="callNo">调用次数</nz-form-label>
<nz-form-control>
<input nz-input id="callNo" />
</nz-form-control>
</nz-form-item>
</div>
<div nz-col nzMd="8" nzSm="24" *ngIf="expandForm">
<nz-form-item>
<nz-form-label nzFor="updatedAt">更新日期</nz-form-label>
<nz-form-control>
<nz-date-picker id="updatedAt"></nz-date-picker>
</nz-form-control>
</nz-form-item>
</div>
<div nz-col nzMd="8" nzSm="24" *ngIf="expandForm">
<nz-form-item>
<nz-form-label nzFor="status2">使用状态</nz-form-label>
<nz-form-control>
<nz-select [nzPlaceHolder]="'请选择'" nzId="status2" [nzShowSearch]="true">
<nz-option *ngFor="let i of status; let idx = index" [nzLabel]="i.text" [nzValue]="idx"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
</div>
<div nz-col nzMd="8" nzSm="24" *ngIf="expandForm">
<nz-form-item>
<nz-form-label nzFor="status3">使用状态</nz-form-label>
<nz-form-control>
<nz-select [nzPlaceHolder]="'请选择'" nzId="status3" [nzShowSearch]="true">
<nz-option *ngFor="let i of status; let idx = index" [nzLabel]="i.text" [nzValue]="idx"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
</div>
<div nz-col [nzSpan]="expandForm ? 24 : 8" [class.text-right]="expandForm">
<button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading">查询</button>
<button nz-button type="reset" (click)="reset()" class="mx-sm">重置</button>
<a (click)="expandForm = !expandForm">
{{ expandForm ? '收起' : '展开' }}
<i nz-icon [nzType]="expandForm ? 'up' : 'down'"></i>
</a>
</div>
</div>
</form>
<button nz-button (click)="add(modalContent)" [nzType]="'primary'">
<i nz-icon nzType="plus"></i>
<span>新建</span>
</button>
<ng-container *ngIf="selectedRows.length > 0">
<button nz-button>批量操作</button>
<button nz-button nz-dropdown [nzDropdownMenu]="batchMenu" nzPlacement="bottomLeft">
更多操作
<i nz-icon nzType="down"></i>
</button>
<nz-dropdown-menu #batchMenu="nzDropdownMenu">
<ul nz-menu>
<li nz-menu-item (click)="remove()">删除</li>
<li nz-menu-item (click)="approval()">批量审批</li>
</ul>
</nz-dropdown-menu>
</ng-container>
<div class="my-md">
<nz-alert [nzType]="'info'" [nzShowIcon]="true" [nzMessage]="message">
<ng-template #message>
已选择
<strong class="text-primary">{{ selectedRows.length }}</strong> 项&nbsp;&nbsp; 服务调用总计 <strong>{{ totalCallNo
}}</strong> 万
<a *ngIf="totalCallNo > 0" (click)="st.clearCheck()" class="ml-lg">清空</a>
</ng-template>
</nz-alert>
<div class="modal-header">
<div class="modal-title">编辑 {{ record.id }} 信息</div>
</div>
<sf #sf mode="edit" [schema]="schema" [ui]="ui" [formData]="i" button="none">
<div class="modal-footer">
<button nz-button type="button" (click)="close()">关闭</button>
<button nz-button type="submit" nzType="primary" (click)="save(sf.value)" [disabled]="!sf.valid" [nzLoading]="http.loading">保存</button>
</div>
<st #st [columns]="columns" [data]="data" [loading]="loading" (change)="stChange($event)">
<ng-template st-row="status" let-i>
<nz-badge [nzStatus]="i.statusType" [nzText]="i.statusText"></nz-badge>
</ng-template>
</st>
</nz-card>
<ng-template #modalContent>
<nz-form-item>
<nz-form-label nzFor="no">描述</nz-form-label>
<nz-form-control>
<input nz-input [(ngModel)]="description" name="description" placeholder="请输入" id="no" />
</nz-form-control>
</nz-form-item>
</ng-template>
</sf>

176
src/app/routes/dashboard/dashboard.component.ts
View File

@ -1,9 +1,10 @@
import { Component, ChangeDetectionStrategy, ChangeDetectorRef, TemplateRef, ViewChild } from '@angular/core';
import { STComponent, STColumn, STData, STChange } from '@delon/abc/st';
import { SFSchema, SFUISchema } from '@delon/form';
import { _HttpClient } from '@delon/theme';
import { NzSafeAny } from 'ng-zorro-antd/core/types';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzModalService } from 'ng-zorro-antd/modal';
import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
import { map, tap } from 'rxjs/operators';
@Component({
@ -13,154 +14,53 @@ import { map, tap } from 'rxjs/operators';
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DashboardComponent {
q: {
pi: number;
ps: number;
no: string;
sorter: string;
status: number | null;
statusList: NzSafeAny[];
} = {
pi: 1,
ps: 10,
no: '',
sorter: '',
status: null,
statusList: []
@ViewChild('sf')
sf!: SFSchema;
record: any = {};
i: any;
schema: any = {
properties: {
no: { type: 'string', title: '编号' },
owner: { type: 'string', title: '姓名' },
callNo: { type: 'number', title: '调用次数' },
href: { type: 'string', title: '链接', format: 'uri', ui: { errors: { uri: '11' } } },
description: { type: 'string', title: '描述' }
},
required: ['owner', 'callNo', 'href', 'description']
};
data: any[] = [];
loading = false;
status = [
{ index: 0, text: '关闭', value: false, type: 'default', checked: false },
{
index: 1,
text: '运行中',
value: false,
type: 'processing',
checked: false
ui: SFUISchema = {
'*': {
spanLabelFixed: 100,
grid: { span: 12 }
},
{ index: 2, text: '已上线', value: false, type: 'success', checked: false },
{ index: 3, text: '异常', value: false, type: 'error', checked: false }
];
@ViewChild('st', { static: true })
st!: STComponent;
columns: STColumn[] = [
{ title: '', index: 'key', type: 'checkbox' },
{ title: '规则编号', index: 'no' },
{ title: '描述', index: 'description' },
{
title: '服务调用次数',
index: 'callNo',
type: 'number',
format: item => `${item.callNo} 万`,
sort: {
compare: (a, b) => a.callNo - b.callNo
}
$no: {
widget: 'text'
},
{
title: '状态',
index: 'status',
render: 'status',
filter: {
menus: this.status,
fn: (filter, record) => record.status === filter.index
}
$href: {
widget: 'string'
},
{
title: '更新时间',
index: 'updatedAt',
type: 'date',
sort: {
compare: (a, b) => a.updatedAt - b.updatedAt
}
},
{
title: '操作',
buttons: [
{
text: '配置',
click: item => this.msg.success(`配置${item.no}`)
},
{
text: '订阅警报',
click: item => this.msg.success(`订阅警报${item.no}`)
}
]
$description: {
widget: 'textarea',
grid: { span: 24 }
}
];
selectedRows: STData[] = [];
description = '';
totalCallNo = 0;
expandForm = false;
};
constructor(private http: _HttpClient, public msg: NzMessageService, private modalSrv: NzModalService, private cdr: ChangeDetectorRef) {}
constructor(private msgSrv: NzMessageService, public http: _HttpClient) {}
ngOnInit(): void {
this.getData();
// if (this.record.id > 0) this.http.get(`/user/${this.record.id}`).subscribe(res => (this.i = res));
}
getData(): void {
this.loading = true;
this.q.statusList = this.status.filter(w => w.checked).map(item => item.index);
if (this.q.status !== null && this.q.status > -1) {
this.q.statusList.push(this.q.status);
}
this.http
.get('/rule?_allow_anonymous=true', this.q)
.pipe(
map((list: Array<{ status: number; statusText: string; statusType: string }>) =>
list.map(i => {
const statusItem = this.status[i.status];
i.statusText = statusItem.text;
i.statusType = statusItem.type;
return i;
})
),
tap(() => (this.loading = false))
)
.subscribe(res => {
this.data = res;
this.cdr.detectChanges();
});
save(value: any): void {
console.log(this.sf.value);
// this.http.post(`/user/${this.record.id}`, value).subscribe(res => {
// this.msgSrv.success('保存成功');
// // this.modal.close(true);
// });
}
stChange(e: STChange): void {
switch (e.type) {
case 'checkbox':
this.selectedRows = e.checkbox!;
this.totalCallNo = this.selectedRows.reduce((total, cv) => total + cv.callNo, 0);
this.cdr.detectChanges();
break;
case 'filter':
this.getData();
break;
}
}
remove(): void {
this.http.delete('/rule', { nos: this.selectedRows.map(i => i.no).join(',') }).subscribe(() => {
this.getData();
this.st.clearCheck();
});
}
approval(): void {
this.msg.success(`审批了 ${this.selectedRows.length} 笔`);
}
add(tpl: TemplateRef<{}>): void {
this.modalSrv.create({
nzTitle: '新建规则',
nzContent: tpl,
nzOnOk: () => {
this.loading = true;
this.http.post('/rule', { description: this.description }).subscribe(() => this.getData());
}
});
}
reset(): void {
// wait form reset updated finished
setTimeout(() => this.getData());
close(): void {
// this.modal.destroy();
}
}

44
src/app/routes/demo/components/alian-demo/alian-demo.component.html Normal file
View File

@ -0,0 +1,44 @@
<page-header-wrapper title="Alain案例">
</page-header-wrapper>
<nz-card>
<div nz-row nzGutter="8">
<div nz-col [nzSpan]="_$expand ? 24 : 18">
<sf #sf [schema]="searchSchema" [ui]="ui" [compact]="true" [button]="'none'"></sf>
</div>
<div nz-col [nzSpan]="_$expand ? 24 : 6" [class.text-right]="_$expand">
<button nz-button nzType="primary" (click)="add()"> 新建</button>
<button nz-button nzType="primary" [nzLoading]="service.http.loading" (click)="st?.load(1)">查询</button>
<button nz-button (click)="resetSF()">重置</button>
<button nz-button nzType="link" (click)="expandToggle()">
{{ !_$expand ? '展开' : '收起' }}
<i nz-icon [nzType]="!_$expand ? 'down' : 'up'"></i>
</button>
</div>
</div>
<ng-container *ngIf="selectedRows.length > 0">
<button nz-button>批量操作</button>
<button nz-button nz-dropdown [nzDropdownMenu]="batchMenu" nzPlacement="bottomLeft">
更多操作
<i nz-icon nzType="down"></i>
</button>
<nz-dropdown-menu #batchMenu="nzDropdownMenu">
<ul nz-menu>
<li nz-menu-item (click)="remove()">删除</li>
<li nz-menu-item (click)="approval()">批量审批</li>
</ul>
</nz-dropdown-menu>
</ng-container>
<div class="my-md">
<nz-alert [nzType]="'info'" [nzShowIcon]="true" [nzMessage]="message">
<ng-template #message>
已选择
<strong class="text-primary">{{ selectedRows.length }}</strong> 项&nbsp;&nbsp; 服务调用总计 <strong>{{
totalCallNo }}</strong> 万
<a *ngIf="totalCallNo > 0" (click)="st.clearCheck()" class="ml-lg">清空</a>
</ng-template>
</nz-alert>
</div>
<st #st [data]="url" [columns]="columns" [req]="{method:'POST'}" [res]="{reName:{list:'data'}}"
(change)="stChange($event)"></st>
</nz-card>

5
src/app/routes/demo/components/alian-demo/alian-demo.component.less Normal file
View File

@ -0,0 +1,5 @@
:host::ng-deep {
nz-range-picker {
width: 100%;
}
}

206
src/app/routes/demo/components/alian-demo/alian-demo.component.ts Normal file
View File

@ -0,0 +1,206 @@
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { STComponent, STColumn, STChange } from '@delon/abc/st';
import { SFComponent, SFDateWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
import { _HttpClient, ModalHelper } from '@delon/theme';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzModalService } from 'ng-zorro-antd/modal';
import { DemoService } from '../../services/demo.service';
import { DemoEditComponent } from '../zorro-demo/edit/edit.component';
@Component({
selector: 'app-alian-demo',
templateUrl: './alian-demo.component.html',
styleUrls: ['./alian-demo.component.less']
})
export class AlianDemoComponent implements OnInit {
url = `/rule?_allow_anonymous=true`;
status = [
{ index: 0, text: '关闭', value: false, type: 'default', checked: false },
{
index: 1,
text: '运行中',
value: false,
type: 'processing',
checked: false
},
{ index: 2, text: '已上线', value: false, type: 'success', checked: false },
{ index: 3, text: '异常', value: false, type: 'error', checked: false }
];
@ViewChild('st', { static: true })
st!: STComponent;
@ViewChild('sf', { static: false })
sf!: SFComponent;
columns: STColumn[] = [
{ title: '', index: 'key', type: 'checkbox' },
{ title: '规则编号', index: 'no' },
{ title: '描述', index: 'description' },
{
title: '服务调用次数',
index: 'callNo',
type: 'number',
format: item => `${item.callNo} 万`,
sort: {
compare: (a, b) => a.callNo - b.callNo
}
},
{
title: '状态',
index: 'status',
render: 'status',
filter: {
menus: this.status,
fn: (filter, record) => record.status === filter.index
}
},
{
title: '更新时间',
index: 'updatedAt',
type: 'date',
sort: {
compare: (a, b) => a.updatedAt - b.updatedAt
}
},
{
title: '操作',
buttons: [
{
text: '修改',
click: item => this.edit(item)
},
{
text: '删除',
click: item => this.delete(item)
}
]
}
];
searchSchema: SFSchema = {
properties: {
expand: {
type: 'boolean',
ui: {
hidden: true
}
},
orderSn: {
type: 'string',
title: '订单号',
ui: {
autocomplete: 'off'
}
},
receiveName: {
type: 'string',
title: '收件人'
},
receiveMobile: {
type: 'string',
title: '收件人电话'
},
tenantName: {
type: 'string',
title: '下单商家',
ui: {
visibleIf: {
expand: (value: boolean) => value
}
}
},
createTime: {
title: '下单时间',
type: 'string',
ui: {
widget: 'date',
mode: 'range',
format: 'yyyy-MM-dd',
visibleIf: {
expand: (value: boolean) => value
}
} as SFDateWidgetSchema
}
}
};
ui: SFUISchema = {
'*': {
spanLabelFixed: 90,
grid: { span: 8, gutter: 4 }
},
$orderSn: {
grid: { span: 8 }
},
$receiveName: {
grid: { span: 8 }
},
$createTime: { grid: { span: 8 } }
};
_$expand = false;
selectedRows: any[] = [];
totalCallNo = 0;
constructor(public service: DemoService, public msg: NzMessageService, private modal: ModalHelper) {}
ngOnInit(): void {}
stChange(e: STChange): void {
switch (e.type) {
case 'checkbox':
this.selectedRows = e.checkbox!;
this.totalCallNo = this.selectedRows.reduce((total, cv) => total + cv.callNo, 0);
break;
case 'filter':
this.st.load();
break;
}
}
remove(): void {
this.service.request('/delete/rule?_allow_anonymous=true', { nos: this.selectedRows.map(i => i.no).join(',') }).subscribe(() => {
this.st.load();
this.st.clearCheck();
});
}
approval(): void {
this.msg.success(`审批了 ${this.selectedRows.length} 笔`);
}
add(): void {
this.modal.createStatic(DemoEditComponent, { i: { id: 0 } }).subscribe(res => {
if (res) {
console.log(res);
}
});
}
edit(item: any) {
this.modal
.createStatic(DemoEditComponent, { i: { no: 1, owner: '22222', callNo: 111, status: 1, description: '222' } })
.subscribe(res => {
if (res) {
this.st.setRow(item, res);
}
});
}
delete(item: any) {
this.st.removeRow(item);
}
/**
* 重置表单
*/
resetSF() {
this.sf.reset();
this._$expand = false;
}
/**
* 伸缩查询条件
*/
expandToggle() {
this._$expand = !this._$expand;
this.sf?.setValue('/expand', this._$expand);
}
}

10
src/app/routes/demo/components/zorro-demo/edit/edit.component.html Normal file
View File

@ -0,0 +1,10 @@
<div class="modal-header">
<div class="modal-title">编辑 {{ record.id }} 信息</div>
</div>
<nz-spin *ngIf="!i" class="modal-spin"></nz-spin>
<sf *ngIf="i" #sf mode="edit" [schema]="schema" [ui]="ui" [formData]="i" button="none">
<div class="modal-footer">
<button nz-button type="button" (click)="close()">关闭</button>
<button nz-button type="submit" nzType="primary" (click)="save(sf.value)" [disabled]="!sf.valid" [nzLoading]="http.loading">保存</button>
</div>
</sf>

24
src/app/routes/demo/components/zorro-demo/edit/edit.component.spec.ts Normal file
View File

@ -0,0 +1,24 @@
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
import { DemoEditComponent } from './edit.component';
describe('DemoEditComponent', () => {
let component: DemoEditComponent;
let fixture: ComponentFixture<DemoEditComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ DemoEditComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DemoEditComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

63
src/app/routes/demo/components/zorro-demo/edit/edit.component.ts Normal file
View File

@ -0,0 +1,63 @@
import { Component, OnInit } from '@angular/core';
import { SFSchema, SFUISchema } from '@delon/form';
import { _HttpClient } from '@delon/theme';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzModalRef } from 'ng-zorro-antd/modal';
@Component({
selector: 'app-demo-edit',
templateUrl: './edit.component.html',
})
export class DemoEditComponent implements OnInit {
record: any = {};
i: any;
schema: SFSchema = {
properties: {
no: { type: 'string', title: '编号' },
owner: { type: 'string', title: '姓名', maxLength: 15 },
callNo: { type: 'number', title: '调用次数' },
status: { type: 'number', title: '链接' },
description: { type: 'string', title: '描述', maxLength: 140 },
},
required: ['owner', 'callNo', 'description'],
};
ui: SFUISchema = {
'*': {
spanLabelFixed: 100,
grid: { span: 12 },
},
$no: {
widget: 'text'
},
$href: {
widget: 'string',
},
$description: {
widget: 'textarea',
grid: { span: 24 },
},
};
constructor(
private modal: NzModalRef,
private msgSrv: NzMessageService,
public http: _HttpClient,
) {}
ngOnInit(): void {
if (this.record.id > 0)
this.http.get(`/user/${this.record.id}`).subscribe(res => (this.i = res));
}
save(value: any): void {
this.modal.close(value);
// this.http.post(`/user/${this.record.id}`, value).subscribe(res => {
// this.msgSrv.success('保存成功');
// this.modal.close(true);
// });
}
close(): void {
this.modal.destroy();
}
}

129
src/app/routes/demo/components/zorro-demo/zorro-demo.component.html Normal file
View File

@ -0,0 +1,129 @@
<page-header-wrapper title="Zorro案例">
</page-header-wrapper>
<nz-card [nzBordered]="false">
<form nz-form (ngSubmit)="getData()" class="search__form">
<div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 24, lg: 24, xl: 48, xxl: 48 }">
<div nz-col nzMd="8" nzSm="24">
<nz-form-item>
<nz-form-label nzFor="no">规则编号</nz-form-label>
<nz-form-control>
<input nz-input [(ngModel)]="q.no" name="no" placeholder="请输入" id="no" />
</nz-form-control>
</nz-form-item>
</div>
<div nz-col nzMd="8" nzSm="24">
<nz-form-item>
<nz-form-label nzFor="status">使用状态</nz-form-label>
<nz-form-control>
<nz-select [(ngModel)]="q.status" name="status" id="status" [nzPlaceHolder]="'请选择'"
[nzShowSearch]="true">
<nz-option *ngFor="let i of status; let idx = index" [nzLabel]="i.text" [nzValue]="idx">
</nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
</div>
<div nz-col nzMd="8" nzSm="24" *ngIf="expandForm">
<nz-form-item>
<nz-form-label nzFor="callNo">调用次数</nz-form-label>
<nz-form-control>
<input nz-input id="callNo" />
</nz-form-control>
</nz-form-item>
</div>
<div nz-col nzMd="8" nzSm="24" *ngIf="expandForm">
<nz-form-item>
<nz-form-label nzFor="updatedAt">更新日期</nz-form-label>
<nz-form-control>
<nz-date-picker id="updatedAt" style="width: 100%;"></nz-date-picker>
</nz-form-control>
</nz-form-item>
</div>
<div nz-col nzMd="8" nzSm="24" *ngIf="expandForm">
<nz-form-item>
<nz-form-label nzFor="status2">使用状态</nz-form-label>
<nz-form-control>
<nz-select [nzPlaceHolder]="'请选择'" nzId="status2" [nzShowSearch]="true">
<nz-option *ngFor="let i of status; let idx = index" [nzLabel]="i.text" [nzValue]="idx">
</nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
</div>
<div nz-col [nzSpan]="8" [class.text-right]="expandForm">
<button nz-button type="button" [nzType]="'primary'" (click)="action(modalContent)">新增</button>
<button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading">查询</button>
<button nz-button type="reset" (click)="reset()" class="mx-sm">重置</button>
<a (click)="expandForm = !expandForm">
{{ expandForm ? '收起' : '展开' }}
<i nz-icon [nzType]="expandForm ? 'up' : 'down'"></i>
</a>
</div>
</div>
</form>
<ng-container *ngIf="selectedRows.length > 0">
<button nz-button class="mb-md">批量操作</button>
<button nz-button nz-dropdown [nzDropdownMenu]="batchMenu" nzPlacement="bottomLeft">
更多操作
<i nz-icon nzType="down"></i>
</button>
<nz-dropdown-menu #batchMenu="nzDropdownMenu">
<ul nz-menu>
<li nz-menu-item (click)="remove()">删除</li>
<li nz-menu-item (click)="approval()">批量审批</li>
</ul>
</nz-dropdown-menu>
</ng-container>
<div>
<nz-alert [nzType]="'info'" [nzShowIcon]="true" [nzMessage]="message">
<ng-template #message>
已选择
<strong class="text-primary">{{ selectedRows.length }}</strong> 项&nbsp;&nbsp; 服务调用总计 <strong>{{
totalCallNo }}</strong> 万
<a *ngIf="selectedRows.length > 0" (click)="clearCheck()" class="ml-lg">清空</a>
</ng-template>
</nz-alert>
</div>
<nz-table #rowSelectionTable nzShowPagination nzShowSizeChanger [nzData]="data">
<thead>
<tr>
<th [(nzChecked)]="checkedAll" [nzIndeterminate]="indeterminate"
(nzCheckedChange)="onAllChecked($event)">
</th>
<th>No</th>
<th>Name</th>
<th>Description</th>
<th>Option</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of rowSelectionTable.data">
<td [nzShowCheckbox]="true" [(nzChecked)]="data.checked" [nzDisabled]="data.disabled"
(nzCheckedChange)="onItemChecked($event,data)">
</td>
<td>{{ data.no }}</td>
<td>{{ data.callNo }}</td>
<td>{{ data.description }}</td>
<td>
<a (click)="action(modalContent,data)">Edit</a>
<nz-divider nzType="vertical"></nz-divider>
<a (click)="deleteAction(data)">Delete </a>
</td>
</tr>
</tbody>
</nz-table>
</nz-card>
<ng-template #modalContent>
<nz-form-item>
<nz-form-label nzFor="no">描述</nz-form-label>
<nz-form-control>
<input nz-input [(ngModel)]="description" name="description" placeholder="请输入" id="no" />
</nz-form-control>
</nz-form-item>
</ng-template>

0
src/app/routes/demo/components/zorro-demo/zorro-demo.component.less Normal file
View File

161
src/app/routes/demo/components/zorro-demo/zorro-demo.component.ts Normal file
View File

@ -0,0 +1,161 @@
import { ChangeDetectorRef, Component, OnInit, TemplateRef } from '@angular/core';
import { NzSafeAny } from 'ng-zorro-antd/core/types';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzModalService } from 'ng-zorro-antd/modal';
import { map, tap } from 'rxjs/operators';
import { DemoService } from '../../services/demo.service';
@Component({
selector: 'app-zorro-demo',
templateUrl: './zorro-demo.component.html',
styleUrls: ['./zorro-demo.component.less']
})
export class ZorroDemoComponent implements OnInit {
data: any[] = [];
loading = false;
expandForm = false;
q: {
pi: number;
ps: number;
no: string;
sorter: string;
status: number | null;
statusList: NzSafeAny[];
} = {
pi: 1,
ps: 10,
no: '',
sorter: '',
status: null,
statusList: []
};
status = [
{ index: 0, text: '关闭', value: false, type: 'default', checked: false },
{
index: 1,
text: '运行中',
value: false,
type: 'processing',
checked: false
},
{ index: 2, text: '已上线', value: false, type: 'success', checked: false },
{ index: 3, text: '异常', value: false, type: 'error', checked: false }
];
selectedRows: any[] = [];
totalCallNo = 0;
description: string = '';
checkedAll = false;
indeterminate = false;
constructor(
private service: DemoService,
public msg: NzMessageService,
private modalSrv: NzModalService,
private cdr: ChangeDetectorRef
) {}
ngOnInit(): void {
this.getData();
}
getData(): void {
this.loading = true;
this.q.statusList = this.status.filter(w => w.checked).map(item => item.index);
if (this.q.status !== null && this.q.status > -1) {
this.q.statusList.push(this.q.status);
}
this.service
.request('/rule?_allow_anonymous=true', this.q)
.pipe(
map((list: Array<{ status: number; statusText: string; statusType: string }>) =>
list.map(i => {
const statusItem = this.status[i.status];
i.statusText = statusItem.text;
i.statusType = statusItem.type;
return i;
})
),
tap(() => (this.loading = false))
)
.subscribe(res => {
this.data = res;
});
}
action(tpl: TemplateRef<{}>, data?: any): void {
if (data) {
this.description = data.description;
}
this.modalSrv.create({
nzTitle: '新建规则',
nzContent: tpl,
nzOnOk: () => {
this.loading = true;
// this.http.post('/rule', { description: this.description }).subscribe(() => this.getData());
if (data) {
Object.assign(data, { description: this.description });
} else {
this.data.push({
checked: false,
key: this.data.length,
callNo: 111,
description: this.description
});
this.data = [...this.data];
}
setTimeout(() => {
this.loading = false;
}, 1000);
}
});
}
remove(): void {
this.service.request('/delete/rule?_allow_anonymous=true', { nos: this.selectedRows.map((i: any) => i.no).join(',') }).subscribe(() => {
this.getData();
this.clearCheck();
});
}
deleteAction(item: any) {
this.data = this.data.filter(({ no }) => no !== item.no);
}
approval(): void {
this.msg.success(`审批了 ${this.selectedRows.length} 笔`);
}
onAllChecked(checked: boolean): void {
this.data.filter(({ disabled }) => !disabled).forEach(item => (item.checked = checked));
this.selectedRows = this.data.filter(({ checked }) => checked);
}
onItemChecked(checked: boolean, item: any): void {
if (checked) {
this.selectedRows.push(item);
} else {
this.selectedRows = this.selectedRows.filter(({ no }) => no !== item.no);
}
this.refreshCheckedStatus();
}
refreshCheckedStatus(): void {
this.checkedAll = this.data.every(item => item.checked);
this.indeterminate = this.data.some(item => item.checked) && !this.checkedAll;
}
clearCheck() {
this.data.forEach(item => (item.checked = false));
this.selectedRows = [];
this.checkedAll = false;
this.indeterminate = false;
}
reset(): void {
// wait form reset updated finished
setTimeout(() => this.getData());
}
}

15
src/app/routes/demo/demo-routing.module.ts Normal file
View File

@ -0,0 +1,15 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AlianDemoComponent } from './components/alian-demo/alian-demo.component';
import { ZorroDemoComponent } from './components/zorro-demo/zorro-demo.component';
const routes: Routes = [
{ path: 'zorro', component: ZorroDemoComponent },
{ path: 'alain', component: AlianDemoComponent },
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class DemoRoutingModule { }

15
src/app/routes/demo/demo.module.ts Normal file
View File

@ -0,0 +1,15 @@
import { NgModule, Type } from '@angular/core';
import { SharedModule } from '@shared';
import { AlianDemoComponent } from './components/alian-demo/alian-demo.component';
import { DemoEditComponent } from './components/zorro-demo/edit/edit.component';
import { ZorroDemoComponent } from './components/zorro-demo/zorro-demo.component';
import { DemoRoutingModule } from './demo-routing.module';
const COMPONENTS: Array<Type<void>> = [DemoEditComponent, ZorroDemoComponent, AlianDemoComponent];
@NgModule({
imports: [SharedModule, DemoRoutingModule],
declarations: COMPONENTS
})
export class DemoModule {}

11
src/app/routes/demo/services/demo.service.ts Normal file
View File

@ -0,0 +1,11 @@
import { Injectable, Injector } from '@angular/core';
import { BaseService } from 'src/app/shared/services';
@Injectable({
providedIn: 'root'
})
export class DemoService extends BaseService {
constructor(public injector: Injector) {
super(injector);
}
}

16
src/app/routes/routes-routing.module.ts
View File

@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router';
// layout
import { LayoutProComponent } from '@brand';
import { environment } from '@env/environment';
// dashboard pages
import { DashboardComponent } from './dashboard/dashboard.component';
@ -13,13 +14,14 @@ const routes: Routes = [
children: [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
],
{ path: 'demo', loadChildren: () => import('./demo/demo.module').then(m => m.DemoModule) }
]
},
// passport
{ path: '', loadChildren: () => import('./passport/passport.module').then((m) => m.PassportModule) },
{ path: 'exception', loadChildren: () => import('./exception/exception.module').then((m) => m.ExceptionModule) },
{ path: '', loadChildren: () => import('./passport/passport.module').then(m => m.PassportModule) },
{ path: 'exception', loadChildren: () => import('./exception/exception.module').then(m => m.ExceptionModule) },
// 单页不包裹Layout
{ path: '**', redirectTo: 'exception/404' },
{ path: '**', redirectTo: 'exception/404' }
];
@NgModule({
@ -28,9 +30,9 @@ const routes: Routes = [
useHash: environment.useHash,
// NOTICE: If you use `reuse-tab` component and turn on keepingScroll you can set to `disabled`
// Pls refer to https://ng-alain.com/components/reuse-tab
scrollPositionRestoration: 'top',
}),
scrollPositionRestoration: 'top'
})
],
exports: [RouterModule],
exports: [RouterModule]
})
export class RouteRoutingModule {}

8
src/app/routes/routes.module.ts
View File

@ -1,16 +1,16 @@
import { NgModule, Type } from '@angular/core';
import { SharedModule } from '@shared';
// dashboard pages
import { DashboardComponent } from './dashboard/dashboard.component';
import { RouteRoutingModule } from './routes-routing.module';
const COMPONENTS: Type<void>[] = [DashboardComponent];
const COMPONENTS_NOROUNT: Type<void>[] = [];
const COMPONENTS = [DashboardComponent];
const COMPONENTS_NOROUNT: Array<Type<void>> = [];
@NgModule({
imports: [SharedModule, RouteRoutingModule],
declarations: [...COMPONENTS, ...COMPONENTS_NOROUNT],
entryComponents: COMPONENTS_NOROUNT,
entryComponents: COMPONENTS_NOROUNT
})
export class RoutesModule {}

7
src/app/shared/services/business/sl-platform.service.ts
View File

@ -9,7 +9,6 @@ import { Injectable, Injector } from '@angular/core';
import { Observable, zip } from 'rxjs';
import { catchError, switchMap } from 'rxjs/operators';
import { CoreService } from 'src/app/core/core.service';
import { EAEncryptUtil } from '../../utils';
import { BaseService } from '../core/base.service';
@Injectable({
@ -61,7 +60,7 @@ export class EAPlatformService extends BaseService {
getPlatformStatus(): number {
const encryptStatus = this.coreSrv.cacheSrv.getNone<string>(this._cachePlatformStatusKey);
try {
const status = EAEncryptUtil.deencryptByDeAES(encryptStatus);
// const status = EAEncryptUtil.deencryptByDeAES(encryptStatus);
return +status;
} catch (error) {
return 0;
@ -118,8 +117,8 @@ export class EAPlatformService extends BaseService {
}
// 加密并保存平台状态
const ciphertext = EAEncryptUtil.encryptByEnAES(status.toString());
this.coreSrv.cacheSrv.set(this._cachePlatformStatusKey, ciphertext);
// const ciphertext = EAEncryptUtil.encryptByEnAES(status.toString());
// this.coreSrv.cacheSrv.set(this._cachePlatformStatusKey, ciphertext);
}
/**

4
src/app/shared/services/business/user.service.ts
View File

@ -101,7 +101,7 @@ export class EAUserService extends BaseService {
if (res?.token) {
this.cacheSrv.set(cacheConf.token, res.token);
this.doAfterLogin();
this.eventSrv.event.emit(eventConf.reflesh_login_status);
// this.eventSrv.event.emit(eventConf.reflesh_login_status);
this.router.navigate([this.ar.snapshot.queryParams.returnUrl || '/']);
}
});
@ -117,7 +117,7 @@ export class EAUserService extends BaseService {
if (res?.token) {
this.tokenSrv.set({ token: res.token });
this.doAfterLogin();
this.eventSrv.event.emit(eventConf.reflesh_login_status, this.ar.snapshot.queryParams.returnUrl || '/');
// this.eventSrv.event.emit(eventConf.reflesh_login_status, this.ar.snapshot.queryParams.returnUrl || '/');
}
});
}

15
src/app/shared/services/core/cache.service.ts
View File

@ -11,19 +11,19 @@ import { cacheConf } from '@conf/cache.conf';
import { CacheService } from '@delon/cache';
import { BehaviorSubject } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';
import { ICacheObj } from '../../interfaces/core/i-cache-obj';
import { EADateUtil } from '../../utils';
import { EAEncryptUtil } from '../../utils/encrypt.util';
@Injectable({
providedIn: 'root',
providedIn: 'root'
})
export class EACacheService {
// 监听最后操作时间值变化
private listen$ = new BehaviorSubject<number>(0);
private listen = this.listen$.asObservable();
constructor(private service: CacheService) {
this.listen.pipe(distinctUntilChanged()).subscribe((res) => {
this.listen.pipe(distinctUntilChanged()).subscribe(res => {
this.set(cacheConf.last_operation_time, res);
});
}
@ -44,11 +44,11 @@ export class EACacheService {
pd: new Date().getTime(),
data,
vld,
encrypt,
encrypt
};
if (encrypt) {
// 加密
cahceObj.data = EAEncryptUtil.encryptByEnAES(JSON.stringify(data));
// cahceObj.data = EAEncryptUtil.encryptByEnAES(JSON.stringify(data));
}
this.service.set(key, cahceObj);
// 更新系统最后操作时间
@ -86,10 +86,11 @@ export class EACacheService {
// 判断是否加密
if (cacheObj.encrypt) {
const encryptJson = EAEncryptUtil.deencryptByDeAES(cacheObj.data);
// const encryptJson = EAEncryptUtil.deencryptByDeAES(cacheObj.data);
// 更新系统最后操作时间
this.refleshLastOperationTime();
return JSON.parse(encryptJson);
// return JSON.parse(encryptJson);
return;
}
// 更新系统最后操作时间

2
src/app/shared/services/core/event.service.ts
View File

@ -12,8 +12,6 @@ import * as EventEmitter from 'eventemitter3';
providedIn: 'root',
})
export class EAEventService {
event: EventEmitter;
constructor() {
this.event = new EventEmitter();
}
}

6
src/app/shared/shared-zorro.module.ts
View File

@ -3,12 +3,14 @@ import { NzBadgeModule } from 'ng-zorro-antd/badge';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzCardModule } from 'ng-zorro-antd/card';
import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
import { NzDividerModule } from 'ng-zorro-antd/divider';
import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
import { NzFormModule } from 'ng-zorro-antd/form';
import { NzGridModule } from 'ng-zorro-antd/grid';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzSelectModule } from 'ng-zorro-antd/select';
import { NzSpinModule } from 'ng-zorro-antd/spin';
import { NzTableModule } from 'ng-zorro-antd/table';
export const SHARED_ZORRO_MODULES = [
@ -23,5 +25,7 @@ export const SHARED_ZORRO_MODULES = [
NzSelectModule,
NzDatePickerModule,
NzCardModule,
NzIconModule
NzIconModule,
NzSpinModule,
NzDividerModule,
];

26
src/assets/mocks/menu-data.json
View File

@ -1,22 +1,32 @@
{
"menu": [
{
"text": "主导航",
"group": true,
"text": "样例",
"hideInBreadcrumb": true,
"children": [
{
"text": "DEMO页面",
"text": "仪表盘",
"icon": "anticon anticon-dashboard",
"link": "/dashboard"
},
{
"text": "快捷菜单",
"icon": "anticon anticon-rocket",
"shortcutRoot": true,
"children": []
"text": "样例",
"icon": "anticon anticon-dashboard",
"group": true,
"children": [
{
"text": "Zorro案例",
"icon": "anticon anticon-dashboard",
"link": "/demo/zorro"
},
{
"text": "Alain案例",
"icon": "anticon anticon-dashboard",
"link": "/demo/alain"
}
]
}
]
}
]
}
}

6
src/styles.less
View File

@ -5,3 +5,9 @@
@import './styles/index';
@import './styles/theme';
// .page-header {
// margin-left: -24px;
// margin-top : -24px;
// }