fix:AG Grid 学习

src/App.vue

@@ -7,6 +7,11 @@ import { defineComponent } from 'vue';
 import 'swiper/css';
 import '@quasar/quasar-ui-qmediaplayer/src/index.sass';
 
+// Ag Grid
+import 'ag-grid-community/styles/ag-grid.css'; // Core grid CSS, always needed
+import 'ag-grid-community/styles/ag-theme-alpine.css'; // Optional theme CSS
+import 'ag-grid-enterprise';
+
 export default defineComponent({
   name: 'App',
 });

src/components/ag-grid/LoadingOverlayComponent.vue

+<!--
+ * Ag Grid 加载中蒙版自定义组件
+  -->
+<script setup lang="ts">
+defineProps<{
+  params: any;
+}>();
+</script>
+<template>
+  <div class="my-ag-grid-loading-overlay-component">
+    <div class="my-ag-grid-loading-overlay-component-conten">
+      <q-spinner-clock size="3em" style="color: rgb(166, 150, 200)" />
+      <span>加载中...</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.my-ag-grid-loading-overlay-component {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  .my-ag-grid-loading-overlay-component-conten {
+    box-sizing: border-box;
+    width: 100%;
+    height: calc(100% - 50px);
+    color: rgb(166, 150, 200);
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    > span {
+      margin-top: 5px;
+    }
+  }
+}
+</style>

src/components/ag-grid/NoRowsOverlayComponent.vue

@@ -56,9 +56,8 @@ defineProps<{
       left: 50%;
       transform: translate(-50px, 38px);
       box-sizing: border-box;
-      color: rgba(0, 0, 0, 0.45);
+      color: rgb(166, 150, 200);
     }
   }
 }
 </style>
-<style lang="scss" scoped></style>

src/components/index.ts

@@ -7,6 +7,7 @@ import ChartCarouselWarp from './chart-carousel-warp/ChartCarouselWarp.vue';
 import TitlePage from './title-page/TitlePage.vue';
 import UpLoader from './uploader-page/UpLoader.vue';
 import AgGridNoRowsComponent from './ag-grid/NoRowsOverlayComponent.vue';
+import AgGridLoadingOverlayComponent from './ag-grid/LoadingOverlayComponent.vue';
 
 export {
   DateTimePick as ComDateTimePick,
@@ -18,6 +19,7 @@ export {
   TitlePage as ComTitlePage,
   UpLoader as ComUpLoader,
   AgGridNoRowsComponent as ComAgGridNoRowsComponent,
+  AgGridLoadingOverlayComponent as ComAgGridLoadingOverlayComponent,
 };
 
 export default {
@@ -30,4 +32,5 @@ export default {
   TitlePage,
   UpLoader,
   AgGridNoRowsComponent,
+  AgGridLoadingOverlayComponent,
 };

src/config/ag-grid-locale.ts

+// Example locale file for English, give this to your locale team to translate
+
+export default {
+  // Set Filter
+  selectAll: '(Select All)',
+  selectAllSearchResults: '(Select All Search Results)',
+  searchOoo: '搜索...',
+  blanks: '(Blanks)',
+  noMatches: 'No matches',
+
+  // Number Filter & Text Filter
+  filterOoo: 'Filter...',
+  equals: 'Equals',
+  notEqual: 'Not equal',
+  blank: 'Blank',
+  notBlank: 'Not blank',
+  empty: 'Choose One',
+
+  // Number Filter
+  lessThan: 'Less than',
+  greaterThan: 'Greater than',
+  lessThanOrEqual: 'Less than or equal',
+  greaterThanOrEqual: 'Greater than or equal',
+  inRange: 'In range',
+  inRangeStart: 'from',
+  inRangeEnd: 'to',
+
+  // Text Filter
+  contains: 'Contains',
+  notContains: 'Not contains',
+  startsWith: 'Starts with',
+  endsWith: 'Ends with',
+
+  // Date Filter
+  dateFormatOoo: 'yyyy-mm-dd',
+
+  // Filter Conditions
+  andCondition: 'AND',
+  orCondition: 'OR',
+
+  // Filter Buttons
+  applyFilter: 'Apply',
+  resetFilter: 'Reset',
+  clearFilter: 'Clear',
+  cancelFilter: 'Cancel',
+
+  // Filter Titles
+  textFilter: 'Text Filter',
+  numberFilter: 'Number Filter',
+  dateFilter: 'Date Filter',
+  setFilter: 'Set Filter',
+
+  // Side Bar
+  columns: 'Columns',
+  filters: 'Filters',
+
+  // columns tool panel
+  pivotMode: 'Pivot Mode',
+  groups: 'Row Groups',
+  rowGroupColumnsEmptyMessage: 'Drag here to set row groups',
+  values: 'Values',
+  valueColumnsEmptyMessage: 'Drag here to aggregate',
+  pivots: 'Column Labels',
+  pivotColumnsEmptyMessage: 'Drag here to set column labels',
+
+  // Header of the Default Group Column
+  group: 'Group',
+
+  // Row Drag
+  rowDragRow: 'row',
+  rowDragRows: 'rows',
+
+  // Other
+  loadingOoo: '加载中...',
+  loadingError: 'ERR',
+  noRowsToShow: 'No Rows To Show',
+  enabled: 'Enabled',
+
+  // Menu
+  pinColumn: '固定列',
+  pinLeft: '钉在左',
+  pinRight: '钉在右',
+  noPin: '无',
+  valueAggregation: 'Value Aggregation',
+  autosizeThiscolumn: '自动调整此列大小',
+  autosizeAllColumns: '自动调整所有列大小',
+  groupBy: 'Group by',
+  ungroupBy: 'Un-Group by',
+  addToValues: 'Add ${variable} to values',
+  removeFromValues: 'Remove ${variable} from values',
+  addToLabels: 'Add ${variable} to labels',
+  removeFromLabels: 'Remove ${variable} from labels',
+  resetColumns: '重置列',
+  expandAll: 'Expand All',
+  collapseAll: 'Close All',
+  copy: '复制',
+  ctrlC: 'Ctrl+C',
+  copyWithHeaders: '带标题的复制',
+  copyWithGroupHeaders: '带组标题的复制',
+  paste: '粘贴',
+  ctrlV: 'Ctrl+V',
+  export: '导出',
+  csvExport: 'CSV 导出',
+  excelExport: 'Excel 导出',
+
+  // Enterprise Menu Aggregation and Status Bar
+  sum: 'Sum',
+  min: 'Min',
+  max: 'Max',
+  none: 'None',
+  count: 'Count',
+  avg: 'Average',
+  filteredRows: 'Filtered',
+  selectedRows: 'Selected',
+  totalRows: 'Total Rows',
+  totalAndFilteredRows: 'Rows',
+  more: 'More',
+  to: '到',
+  of: '共',
+  page: '页',
+  nextPage: 'Next Page',
+  lastPage: 'Last Page',
+  firstPage: 'First Page',
+  previousPage: 'Previous Page',
+
+  // Pivoting
+  pivotColumnGroupTotals: 'Total',
+
+  // Enterprise Menu (Charts)
+  pivotChartAndPivotMode: 'Pivot Chart & Pivot Mode',
+  pivotChart: 'Pivot Chart',
+  chartRange: 'Chart Range',
+
+  columnChart: 'Column',
+  groupedColumn: 'Grouped',
+  stackedColumn: 'Stacked',
+  normalizedColumn: '100% Stacked',
+
+  barChart: 'Bar',
+  groupedBar: 'Grouped',
+  stackedBar: 'Stacked',
+  normalizedBar: '100% Stacked',
+
+  pieChart: 'Pie',
+  pie: 'Pie',
+  doughnut: 'Doughnut',
+
+  line: 'Line',
+
+  xyChart: 'X Y (Scatter)',
+  scatter: 'Scatter',
+  bubble: 'Bubble',
+
+  areaChart: 'Area',
+  area: 'Area',
+  stackedArea: 'Stacked',
+  normalizedArea: '100% Stacked',
+
+  histogramChart: 'Histogram',
+  histogramFrequency: 'Frequency',
+
+  combinationChart: 'Combination',
+  columnLineCombo: 'Column & Line',
+  AreaColumnCombo: 'Area & Column',
+
+  // Charts
+  pivotChartTitle: 'Pivot Chart',
+  rangeChartTitle: 'Range Chart',
+  settings: 'Settings',
+  data: 'Data',
+  format: 'Format',
+  categories: 'Categories',
+  defaultCategory: '(None)',
+  series: 'Series',
+  xyValues: 'X Y Values',
+  paired: 'Paired Mode',
+  axis: 'Axis',
+  navigator: 'Navigator',
+  color: 'Color',
+  thickness: 'Thickness',
+  xType: 'X Type',
+  automatic: 'Automatic',
+  category: 'Category',
+  number: 'Number',
+  time: 'Time',
+  autoRotate: 'Auto Rotate',
+  xRotation: 'X Rotation',
+  yRotation: 'Y Rotation',
+  ticks: 'Ticks',
+  width: 'Width',
+  height: 'Height',
+  length: 'Length',
+  padding: 'Padding',
+  spacing: 'Spacing',
+  chart: 'Chart',
+  title: 'Title',
+  titlePlaceholder: 'Chart title - double click to edit',
+  background: 'Background',
+  font: 'Font',
+  top: 'Top',
+  right: 'Right',
+  bottom: 'Bottom',
+  left: 'Left',
+  labels: 'Labels',
+  size: 'Size',
+  minSize: 'Minimum Size',
+  maxSize: 'Maximum Size',
+  legend: 'Legend',
+  position: 'Position',
+  markerSize: 'Marker Size',
+  markerStroke: 'Marker Stroke',
+  markerPadding: 'Marker Padding',
+  itemSpacing: 'Item Spacing',
+  itemPaddingX: 'Item Padding X',
+  itemPaddingY: 'Item Padding Y',
+  layoutHorizontalSpacing: 'Horizontal Spacing',
+  layoutVerticalSpacing: 'Vertical Spacing',
+  strokeWidth: 'Stroke Width',
+  lineDash: 'Line Dash',
+  offset: 'Offset',
+  offsets: 'Offsets',
+  tooltips: 'Tooltips',
+  callout: 'Callout',
+  markers: 'Markers',
+  shadow: 'Shadow',
+  blur: 'Blur',
+  xOffset: 'X Offset',
+  yOffset: 'Y Offset',
+  lineWidth: 'Line Width',
+  normal: 'Normal',
+  bold: 'Bold',
+  italic: 'Italic',
+  boldItalic: 'Bold Italic',
+  predefined: 'Predefined',
+  fillOpacity: 'Fill Opacity',
+  strokeOpacity: 'Line Opacity',
+  histogramBinCount: 'Bin count',
+  columnGroup: 'Column',
+  barGroup: 'Bar',
+  pieGroup: 'Pie',
+  lineGroup: 'Line',
+  scatterGroup: 'X Y (Scatter)',
+  areaGroup: 'Area',
+  histogramGroup: 'Histogram',
+  combinationGroup: 'Combination',
+  groupedColumnTooltip: 'Grouped',
+  stackedColumnTooltip: 'Stacked',
+  normalizedColumnTooltip: '100% Stacked',
+  groupedBarTooltip: 'Grouped',
+  stackedBarTooltip: 'Stacked',
+  normalizedBarTooltip: '100% Stacked',
+  pieTooltip: 'Pie',
+  doughnutTooltip: 'Doughnut',
+  lineTooltip: 'Line',
+  groupedAreaTooltip: 'Area',
+  stackedAreaTooltip: 'Stacked',
+  normalizedAreaTooltip: '100% Stacked',
+  scatterTooltip: 'Scatter',
+  bubbleTooltip: 'Bubble',
+  histogramTooltip: 'Histogram',
+  columnLineComboTooltip: 'Column & Line',
+  areaColumnComboTooltip: 'Area & Column',
+  customComboTooltip: 'Custom Combination',
+  noDataToChart: 'No data available to be charted.',
+  pivotChartRequiresPivotMode: 'Pivot Chart requires Pivot Mode enabled.',
+  chartSettingsToolbarTooltip: 'Menu',
+  chartLinkToolbarTooltip: 'Linked to Grid',
+  chartUnlinkToolbarTooltip: 'Unlinked from Grid',
+  chartDownloadToolbarTooltip: 'Download Chart',
+  seriesChartType: 'Series Chart Type',
+  seriesType: 'Series Type',
+  secondaryAxis: 'Secondary Axis',
+
+  // ARIA
+  ariaChecked: 'checked',
+  ariaColumn: 'Column',
+  ariaColumnGroup: 'Column Group',
+  ariaColumnList: 'Column List',
+  ariaColumnSelectAll: 'Toggle Select All Columns',
+  ariaDateFilterInput: 'Date Filter Input',
+  ariaDefaultListName: 'List',
+  ariaFilterColumnsInput: 'Filter Columns Input',
+  ariaFilterFromValue: 'Filter from value',
+  ariaFilterInput: 'Filter Input',
+  ariaFilterList: 'Filter List',
+  ariaFilterToValue: 'Filter to value',
+  ariaFilterValue: 'Filter Value',
+  ariaFilteringOperator: 'Filtering Operator',
+  ariaHidden: 'hidden',
+  ariaIndeterminate: 'indeterminate',
+  ariaInputEditor: 'Input Editor',
+  ariaMenuColumn: 'Press CTRL ENTER to open column menu.',
+  ariaRowDeselect: 'Press SPACE to deselect this row',
+  ariaRowSelectAll: 'Press Space to toggle all rows selection',
+  ariaRowToggleSelection: 'Press Space to toggle row selection',
+  ariaRowSelect: 'Press SPACE to select this row',
+  ariaSearch: 'Search',
+  ariaSortableColumn: 'Press ENTER to sort',
+  ariaToggleVisibility: 'Press SPACE to toggle visibility',
+  ariaUnchecked: 'unchecked',
+  ariaVisible: 'visible',
+  ariaSearchFilterValues: 'Search filter values',
+
+  // ARIA Labels for Drop Zones
+
+  ariaRowGroupDropZonePanelLabel: 'Row Groups',
+  ariaValuesDropZonePanelLabel: 'Values',
+  ariaPivotDropZonePanelLabel: 'Column Labels',
+  ariaDropZoneColumnComponentDescription: 'Press DELETE to remove',
+  ariaDropZoneColumnValueItemDescription:
+    'Press ENTER to change the aggregation type',
+  ariaDropZoneColumnGroupItemDescription: 'Press ENTER to sort',
+  // used for aggregate drop zone, format: {aggregation}{ariaDropZoneColumnComponentAggFuncSeperator}{column name}
+  ariaDropZoneColumnComponentAggFuncSeperator: ' of ',
+  ariaDropZoneColumnComponentSortAscending: 'ascending',
+  ariaDropZoneColumnComponentSortDescending: 'descending',
+
+  // ARIA Labels for Dialogs
+  ariaLabelColumnMenu: 'Column Menu',
+  ariaLabelCellEditor: 'Cell Editor',
+  ariaLabelDialog: 'Dialog',
+  ariaLabelSelectField: 'Select Field',
+  ariaLabelTooltip: 'Tooltip',
+  ariaLabelContextMenu: 'Context Menu',
+  ariaLabelSubMenu: 'SubMenu',
+  ariaLabelAggregationFunction: 'Aggregation Function',
+
+  // Number Format (Status Bar, Pagination Panel)
+  thousandSeparator: ',',
+  decimalSeparator: '.',
+};

src/css/app.scss

@@ -75,23 +75,26 @@ a:hover {
   }
 }
 
+// Ag Grid
 .ag-theme-alpine {
-  --ag-alpine-active-color: #a39391 !important;
-  .ag-header {
-    background-color: #e79686;
-  }
-  .ag-cell-label-container {
-    color: #716e77;
-  }
-  .ag-center-cols-viewport {
-    background-color: #716e77;
-  }
-  .ag-center-cols-container {
-    background-color: #716e77;
-    .ag-row {
-      background-color: #716e77;
-      border-bottom: 1px solid #716e77;
-      color: #e79686;
-    }
-  }
+  --ag-foreground-color: #7e2e84 !important; // 菜单等主要 UI 元素中文本和图标的颜色
+  --ag-background-color: rgb(247, 247, 252) !important;
+  --ag-header-foreground-color: #ffffff !important;
+  --ag-header-background-color: rgb(166, 150, 200) !important;
+
+  --ag-odd-row-background-color: rgb(247, 247, 252) !important;
+  --ag-header-column-resize-handle-color: #7e2e84 !important;
+
+  --ag-alpine-active-color: rgb(166, 150, 200) !important;
+  --ag-selected-row-background-color: rgba(166, 150, 200, 0.1) !important;
+  --ag-range-selection-background-color: rgba(166, 150, 200, 0.2) !important;
+  --ag-row-hover-color: rgba(166, 150, 200, 0.1) !important;
+  --ag-column-hover-color: rgba(166, 150, 200, 0.1) !important;
+  --ag-input-focus-border-color: rgba(166, 150, 200, 0.1) !important;
+
+  --ag-border-color: rgb(166, 150, 200) !important;
+  --ag-row-border-color: rgba(166, 150, 200, 0.2) !important;
+
+  --ag-font-size: 17px;
+  --ag-font-family: monospace;
 }

src/modules/page5/element/table/TablePage.vue

@@ -13,8 +13,6 @@ import emitter from '../../eventbus';
 
 // ag-grid
 import { AgGridVue } from 'ag-grid-vue3'; // the AG Grid Vue Component
-import 'ag-grid-community/styles/ag-grid.css'; // Core grid CSS, always needed
-import 'ag-grid-community/styles/ag-theme-alpine.css'; // Optional theme CSS
 
 const defaultColDef = {
   // sortable: true,

src/modules/page9/element/AgGridDetailGrids.vue

@@ -6,9 +6,7 @@
 import { ref, reactive, onMounted } from 'vue';
 import { AgGridVue } from 'ag-grid-vue3';
 import Com from 'src/components';
-import 'ag-grid-enterprise';
-import 'ag-grid-community/styles/ag-grid.css';
-import 'ag-grid-community/styles/ag-theme-alpine.css';
+import AG_GRID_LOCALE from 'src/config/ag-grid-locale';
 
 const defaultColDef = {
   flex: 1,
@@ -17,11 +15,17 @@ const defaultColDef = {
 
 const gridApi = ref<any>(null);
 const gridColumnApi = ref<any>(null);
+
 const detailCellRendererParams = reactive({
   // 提供要在细节网格上使用的网格选项
   detailGridOptions: {
+    localeText: AG_GRID_LOCALE,
     columnDefs: [
-      { field: 'callId', headerName: '呼叫标识' },
+      {
+        field: 'callId',
+        headerName: '呼叫标识',
+        checkboxSelection: true, // 给该列配置复选框
+      },
       { field: 'direction', headerName: '方向' },
       { field: 'number', headerName: '号码' },
       {
@@ -31,21 +35,26 @@ const detailCellRendererParams = reactive({
       },
       { field: 'switchCode', headerName: '开关代码' },
     ],
-    defaultColDef,
-    rowSelection: 'multiple',
+    defaultColDef: {
+      flex: 1,
+      sortable: true,
+    },
+    rowSelection: 'multiple', // 多选
     suppressRowClickSelection: true, // 抑制行点击选择
     enableRangeSelection: true, // 启用范围选择
-    pagination: true,
-    paginationAutoPageSize: true,
+    // pagination: true,
+    // paginationAutoPageSize: true,
     noRowsOverlayComponent: Com.AgGridNoRowsComponent,
     noRowsOverlayComponentParams: {
       dense: true,
     },
+    loadingOverlayComponent: Com.AgGridLoadingOverlayComponent,
   },
   // 获得每个细节网格的行数
   getDetailRowData: (params: any) => {
-    // params.successCallback(params.data.callRecords || []);
-    params.successCallback([]);
+    setTimeout(function () {
+      params.successCallback(params.data.callRecords || []);
+    }, 1000);
   },
 });
 
@@ -76,7 +85,7 @@ onMounted(() => {
         state.rowData = remoteRowData.concat(arr);
         console.log('rowData', remoteRowData[0]);
       });
-  }, 3000);
+  }, 1000);
 });
 
 function onGridReady(params: any) {
@@ -108,6 +117,7 @@ function isRowMaster(dataItem: any) {
       <ag-grid-vue
         style="height: 500px"
         class="ag-theme-alpine"
+        :localeText="AG_GRID_LOCALE"
         :columnDefs="state.columnDefs"
         :rowData="state.rowData"
         :defaultColDef="defaultColDef"

src/modules/page9/element/AgGridMaster.vue

@@ -5,9 +5,6 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue';
 import { AgGridVue } from 'ag-grid-vue3';
-import 'ag-grid-enterprise';
-import 'ag-grid-community/styles/ag-grid.css';
-import 'ag-grid-community/styles/ag-theme-alpine.css';
 
 const defaultColDef = {
   resizable: true,

src/modules/page9/element/AgGridStudy.vue

@@ -5,9 +5,7 @@
 <script setup lang="ts">
 import { h, ref, reactive, onMounted } from 'vue';
 import { AgGridVue } from 'ag-grid-vue3';
-import 'ag-grid-enterprise';
-import 'ag-grid-community/styles/ag-grid.css';
-import 'ag-grid-community/styles/ag-theme-alpine.css';
+
 import AgGridStudyCom from './AgGridStudyCom.vue';
 
 const defaultColDef = {

src/modules/page9/element/AgGridStudy2.vue

@@ -5,9 +5,7 @@
 <script setup lang="ts">
 import { h, ref, reactive, onMounted } from 'vue';
 import { AgGridVue } from 'ag-grid-vue3';
-import 'ag-grid-enterprise';
-import 'ag-grid-community/styles/ag-grid.css';
-import 'ag-grid-community/styles/ag-theme-alpine.css';
+
 import AgGridStudyCom from './AgGridStudyCom.vue';
 import AgGridStudyYearFilter from './AgGridStudyYearFilter.vue';