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

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();
}
}