添加zorro,alain样例
This commit is contained in:
Taric Xin
@ -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>
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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();
|
||||
}
|
||||
}
|
||||
@ -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> 项 服务调用总计 <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,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());
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user