bixi/src/app/routes/idea/pages/ts/ts.component.ts

企业级中后台前端解决方案

import { Component } from '@angular/core';
import { ITag } from '@bixi/core/tag-select';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'idea-ts',
  templateUrl: './ts.component.html',
  styles: [`
  bixi-tag-select {
    width: 304px;
  }
  `]
})
export class IdeaTsComponent {

  constructor(
    private message: NzMessageService
  ) { }

  tags = ['1', '2', '3'];
  presetColors = ['#3FA9FF', '#9AE396', '#EE5144', '#EE5144'];

  color = {
    r: 16,
    g: 124,
    b: 238,
    a: 0.5
  };

  options: ITag[] = [{
    color: 'blue',
    value: '1',
    label: 'React'
  }, {
    color: 'cyan',
    value: '2',
    label: 'Redux'
  }, {
    color: 'orange',
    value: '3',
    label: 'Angular'
  }, {
    color: 'purple',
    value: '4',
    label: 'Rxjs'
  }, {
    color: 'green',
    value: '5',
    label: 'Vue'
  }, {
    color: 'lime',
    value: '6',
    label: 'Vuex'
  }, {
    color: 'gold',
    value: '7',
    label: 'Svelte'
  }, {
    color: 'pink',
    value: '8',
    label: 'Nodejs'
  }, {
    color: '#107CEE',
    value: '9',
    label: 'Express'
  }];

  largeOptions = new Array(2000).fill(0).map((_v, i) => {
    return {
      color: 'pink',
      value: `${i}`,
      label: `${i}`
    };
  });


  confirmLoading = false;

  onColorChange(color: string) {
    console.log('color change', color);
  }

  onClose() {
    console.log('close');
    this.confirmLoading = false;
  }

  onScrollToBottom() {
    console.log('onScrollToBottom');
  }

  onConfirm = (option: ITag) => {

    this.confirmLoading = true;
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (~this.options.findIndex(o => o.label === option.label)) {
          this.message.error(`标签名“${option.label}”已经被占用`);
          this.confirmLoading = false;
          return reject();
        }
        if (!this.confirmLoading) return;
        this.confirmLoading = false;
        this.options = [...this.options, option];
        this.tags = [...this.tags, option.value];
        resolve();
      }, 2000);
    });
  }

  onColorPickerClose() {
    console.warn('close');
  }
}