添加zorro,alain样例

src/app/routes/dashboard/dashboard.component.ts

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