auseft.platform.datav/src/app/routes/data-v/lj-car-info-table/lj-car-info-table.component.ts

import { Component, Input, OnInit, ViewChild, inject } from '@angular/core';
import { STColumn, STComponent } from '@delon/abc/st';
import { SFSchema } from '@delon/form';
import { ModalHelper, _HttpClient } from '@delon/theme';
import { SHARED_IMPORTS } from '@shared';
import { AgGridAngular } from 'ag-grid-angular';
import { ColDef, GridApi } from 'ag-grid-community';

import { LjCarAgGridComponentComponent } from './lj-car-ag-grid-component/lj-car-ag-grid-component.component';
import { DataVCardComponent } from '../card/card.component';
import { LJDataVCardComponent } from '../lj-card/lj-card.component';
import { TableColumn, DataVLjTableComponent } from '../lj-table/lj-table.component';
import { GridButtonValueRenderer } from '../workstation/grid-button/grid-button';
import { LjAgGridComponentComponent } from '../workstation/lj-ag-grid-component/lj-ag-grid-component.component';

@Component({
  selector: 'app-data-v-lj-car-info-table',
  standalone: true,
  templateUrl: './lj-car-info-table.component.html',
  styleUrl: './lj-car-info-table.component.css',
  imports: [
    ...SHARED_IMPORTS,
    AgGridAngular,
    DataVCardComponent,
    DataVLjTableComponent,
    LjAgGridComponentComponent,

    LjCarAgGridComponentComponent
  ]
})
export class DataVLjCarInfoTableComponent implements OnInit {
  public gridThemedClass: string = 'ag-theme-quartz ag-theme-datav';
  [x: string]: any;
  @ViewChild('myGrid') grid!: AgGridAngular;
  @Input() title: string = '';
  public pageSize!: number;
  /**当前页 */
  public pageIndex!: number;
  /**总数 */
  public pageRowTotal!: number;

  //默认列配置
  @Input() defaultColDef: ColDef = {
    width: 130,
    editable: false,
    headerClass: 'ag-header-center',

    cellStyle: { 'font-weight': 'bold', textAlign: 'center', 'justify-content': 'center', 'line-height': '38px' }
  };
  /** 列头 */
  @Input() columnDefs: ColDef[] = [];
  /**行数据 */
  @Input() rowData: any[] = [];
  /**表格主题 */
  @Input() gridThemeClass: string = 'ag-theme-quartz';
  @Input() paginationThemeClass: string = 'ag-theme-quartz';
  /** 构造函数 */
  constructor() {}
  // 在父组件的类中
  tableColumns: TableColumn[] = [
    { key: 'sort', title: '序号' },
    { key: 'time', title: '时间' },
    { key: 'option', title: '操作' },
    { key: 'optionDesc', title: '操作描述' },
    { key: 'optionMan', title: '操作人员' },
    { key: 'mark', title: '备注' },
    { key: 'edit', title: '编辑' }

    // 其他列配置...
  ];

  colDefs1: ColDef[] = [
    {
      headerName: '序号',
      valueGetter: function (params: any) {
        return parseInt(params.node.id) + 1;
      },
      width: 90,
      // flex: 2,
      sortable: true,
      unSortIcon: true,
      field: 'xh'
    },

    { headerName: '任务名称', unSortIcon: true, width: 120, field: 'rwmc' },
    { headerName: '任务描述', unSortIcon: true, field: 'rwms', width: 120 },
    { headerName: '开始时间', headerClass: 'ag-header-center', unSortIcon: true, field: 'kssj', width: 180 },
    { headerName: '计划完成时间', unSortIcon: true, field: 'jhwcsj', width: 180 },
    { headerName: '超期', width: 70, field: 'sfcq' },
    { headerName: '操作', width: 90, field: 'cz', cellRenderer: GridButtonValueRenderer }
  ];
  tableData = [
    { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
    { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
    { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
    { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
    { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
    { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
    { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
    { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
    { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
    { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
    { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
    { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
    { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
    { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
    { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
    { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
    { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
    { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
    { sort: '1', time: '2024.1.12 18:23', option: '锁定', optionDesc: '锁定1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' },
    { sort: '1', time: '2024.1.12 18:23', option: '释放', optionDesc: '释放1号磅', optionMan: '张三', mark: '早晨', edit: '按钮' }

    // 其他数据...
  ];
  /**初始化 */
  ngOnInit() {
    for (var i = 1; i < 30; i++) {
      this.rowData.push({
        rwmc: `任务${i}`,
        rwms: `任务描述${i}`,
        kssj: `2024-1-${i} 13:38:${i * 11}`,
        jhwcsj: `2024-1-${i} 13:38:${i * 10}`,
        sfcq: '否',
        dqzt: '正常',
        dqjd: `节点${i}`,
        sjwcsj: `2024-1-${i} 13:38:${i * 27}`,
        bjmc: '报警5',
        bjms: '报警描述5',
        bjsj: `2024-1-${i} 13:38:${i * 12}`,
        gzyy: '-',
        clff: '-',
        tzsj: `2024-1-${i} 13:38:${i * 19}`,
        zycd: '一般',
        tzmc: '系统提示',
        tznr: '账户登录',
        fj: '-',
        cz: '操作'
      });
    }
    console.log('-----表格初始化-----');
    // this.title = '';
    this.pageSize = 5;
    this.pageIndex = 1;
    this.pageRowTotal = this.rowData.length;
  }
  //每页数
  nzPageSizeChange(_pageSize: any) {
    this.pageSize = _pageSize;
  }
  //当前页
  nzPageIndexChange(_pageIndex: any) {
    console.log(`nzPageIndexChange${_pageIndex}`);
    if (this.grid.api) {
      if (_pageIndex == 1) {
        /**去首页 */
        this.grid.api.paginationGoToFirstPage();
      } else {
        /** 页面跳转 */
        this.grid.api.paginationGoToPage(_pageIndex);
      }
    }
  }
}