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

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

import { Component } from '@angular/core';
import { EColType, EProgressStatus, EStatus, ICols, IRows } from '@bixi/core/table';
import { BehaviorSubject } from 'rxjs';


@Component({
  selector: 'apps-idea-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.less']
})
export class IdeaTableComponent {
  time = (new Date()).getTime() / 1000;
  radio = 1000;
  loading = false;
  rows: IRows = [{
    name: 'loooooooooooooooooooongtext',
    created_at: 1592997888072,
    blog: 'http://baidu.com',
    status: 0,
    progress: 0.3,
    rate: 3,
    bbb: 2
  }, {
    name: '222',
    created_at: 1592997888072,
    blog: 'http://sina.com',
    progress: 0.7,
    status: 1,
    bbb: 2
  }, {
    name: '333',
    created_at: (new Date()).getTime(),
    blog: 'http://datagrand.com',
    progress: 1,
    status: 2,
    rate: 5,
    online: true,
    bbb: 2
  }, {
    name: '333',
    created_at: (new Date()).getTime(),
    blog: 'http://datagrand.com',
    progress: 0.6,
    status: 'success',
    rate: 5,
    online: true,
    bbb: 2
  }];

  cols: ICols = [
    {
      name: 'text_01',
      key: 'name',
      keyAlias: 'name_01',
      fixed: 'left',
      width: '100px',
      ellipsis: true,
      tooltip: true
    },
    {
      name: 'text_02',
      key: 'name',
      keyAlias: 'name_02',
      fixed: 'left',
      width: '100px',
      ellipsis: true,
      tooltip: true
    },
    {
      name: 'text_03',
      key: 'name',
      keyAlias: 'name_03',
      fixed: 'left',
      width: '100px',
      ellipsis: true,
      tooltip: true
    },
    {
      name: 'text_04',
      key: 'name',
      keyAlias: 'name_04',
      fixed: 'left',
      width: '100px',
      ellipsis: true,
      tooltip: true
    },
    {
      name: 'time',
      key: 'created_at',
      type: EColType.time,
      fixed: 'left',
      width: '100px',
      value(val) {
        return val * 1;
      },
      sort: {
        key: 'created_at'
      }
    },
    {
      name: 'status',
      key: 'status',
      type: EColType.status,
      tooltip(val) {
        return val;
      },
      options: [{
        value: 0,
        text: '上线',
        type: EStatus.success
      }, {
        value: 1,
        text: 'token测试_style',
        type: 'typeA'
      }, {
        value: 2,
        text: 'token测试_class',
        type: 'typeB'
      }, {
        value: 3,
        type: EStatus.success
      }],
      filter: {
        key: 'status',
        multiple: true,
        options: this.getStatusOptions()
      },
      sort: {
        key: 'status_sort'
      }
    },
    {
      name: 'link',
      key: 'blog',
      type: EColType.link,
      href: false,
      tooltip: true,
      ellipsis: true,
      nameRef: 'headerRef'
    },
    {
      name: 'progress',
      key: 'progress',
      type: EColType.progress,
      tooltip(val: number) {
        return `${(val * 100)}%`;
      },
      status: (val) => {
        if (val === 0) {
          return EProgressStatus.starting;
        }

        if (val === 0.3) {
          return EProgressStatus.stop;
        }

        if (val === 1) {
          return EProgressStatus.success;
        }

        if (val === 0.6) {
          return EProgressStatus.failed;
        }

        return EProgressStatus.processing;
      }
    },
    {
      name: 'Template',
      key: 'bbb',
      type: EColType.template,
      ref: 'ref'
    },
    {
      name: 'operations',
      key: 'ope',
      fixed: 'right',
      width: '240px',
      type: EColType.operations,
      operations() {
        return [
          {
            name: `查看`,
            disabled: true,
            visible: true,
            onClick: (row, index) => {
              console.log(row, index);
            }
          },
          {
            name: `编辑`,
            // tslint:disable-next-line: no-any
            tooltip(row: any) {
              return `${row.name}_tooltip`;
            },
            disabled(_row, index) {
              return index === 1;
            },
            onClick(row, index) {
              console.log('xoxo', row, index);
            },
            children: []
          },
          {
            name: `删除`,
            visible: true,
            children: []
          },
          // 允许是一个组，会以 '...' 的图标显示
          {
            name: '',
            children: [
              {
                name: '删除',
                disabled: false,
                visible: true,
                // tslint:disable-next-line: no-any
                tooltip(row: any) {
                  return row.name;
                }
              },
              {
                name: '下线',
                children: [
                  {
                    name: '立即上线',
                    // tslint:disable-next-line: no-any
                    tooltip(row: any) {
                      return row.name;
                    },
                    onClick: (row, index) => {
                      console.log(row, index);
                    }
                  },
                  {
                    name: '10小时候上线',
                    onClick: (row, index) => {
                      console.log(row, index);
                    }
                  }
                ]
              }
            ]
          }
        ];
      }
    }
  ];
  queryParams = {
    status: '1',
    status_sort: 'descend'
  };

  // tslint:disable-next-line:no-any
  onQueryParamsChange(val: any) {
    console.log('onQueryParamsChange', val);
    console.log(val);
  }

  // tslint:disable-next-line:no-any
  onSearch(value: any) {
    console.log('onSearch', value);
    // this.loading = true;
    // setTimeout(() => {
    //   this.rows = Math.random() > 0.5 ? [] : [{
    //     name: 'loooooooooooooooooooongtext',
    //     created_at: 1592997888072,
    //     blog: 'http://baidu.com',
    //     status: 0,
    //     progress: 0.34,
    //     rate: 3,
    //     bbb: 2
    //   }, {
    //     name: '222',
    //     created_at: 1592997888072,
    //     blog: 'http://sina.com',
    //     progress: 0.76,
    //     status: 1,
    //     bbb: 2
    //   }, {
    //     name: '333',
    //     created_at: (new Date()).getTime(),
    //     blog: 'http://datagrand.com',
    //     progress: 1,
    //     status: 2,
    //     rate: 5,
    //     bbb: 2
    //   }];
    //   this.loading = false;
    // }, 1000);
  }

  getStatusOptions() {
    return new BehaviorSubject([
      {
        text: '已上线',
        value: '1'
      },
      {
        text: '等待上线',
        value: '2'
      }
    ]);
  }

}