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