import { Component } from '@angular/core';
import { SFSchema, SFTreeSelectWidgetSchema } from '@delon/form';
import { NzMessageService } from 'ng-zorro-antd/message';
import { of, delay } from 'rxjs';
@Component({
selector: 'form-tree-select-simple',
template: ` <sf [schema]="schema" (formSubmit)="submit($event)"></sf> `,
})
export class FormTreeSelectSimpleComponent {
schema: SFSchema = {
properties: {
status1: {
type: 'string',
title: '基本',
enum: [
{ title: '待支付', key: 'WAIT_BUYER_PAY' },
{ title: '已支付', key: 'TRADE_SUCCESS' },
{ title: '交易完成', key: 'TRADE_FINISHED' },
],
default: 'WAIT_BUYER_PAY',
ui: {
widget: 'tree-select',
} as SFTreeSelectWidgetSchema,
},
status2: {
type: 'string',
title: '多选',
enum: [
{ title: '待支付', key: 'WAIT_BUYER_PAY' },
{ title: '已支付', key: 'TRADE_SUCCESS' },
{ title: '交易完成', key: 'TRADE_FINISHED' },
],
default: ['WAIT_BUYER_PAY', 'TRADE_SUCCESS'],
ui: {
widget: 'tree-select',
multiple: true,
} as SFTreeSelectWidgetSchema,
},
status3: {
type: 'string',
title: '可勾选',
default: ['WAIT_BUYER_PAY', 'TRADE_FINISHED'],
ui: {
widget: 'tree-select',
checkable: true,
asyncData: () =>
of([
{ title: '待支付', key: 'WAIT_BUYER_PAY' },
{ title: '已支付', key: 'TRADE_SUCCESS' },
{ title: '交易完成', key: 'TRADE_FINISHED' },
]).pipe(delay(10)),
} as SFTreeSelectWidgetSchema,
},
// 异步数据
async: {
type: 'string',
title: 'Async',
enum: [
{ title: '待支付', key: 'WAIT_BUYER_PAY' },
{ title: '已支付', key: 'TRADE_SUCCESS' },
{ title: '交易完成', key: 'TRADE_FINISHED' },
],
ui: {
widget: 'tree-select',
expandChange: () => {
return of([
{ title: '待支付', key: 'WAIT_BUYER_PAY' },
{ title: '已支付', key: 'TRADE_SUCCESS' },
{ title: '交易完成', key: 'TRADE_FINISHED' },
]).pipe(delay(10));
},
} as SFTreeSelectWidgetSchema,
},
},
};
constructor(private msg: NzMessageService) {}
submit(value: {}): void {
this.msg.success(JSON.stringify(value));
}
}