feat:Ag Grid 表格树

src/components/ag-grid/LoadingOverlayComponent.vue

@@ -9,7 +9,7 @@ defineProps<{
 <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)" />
+      <q-spinner-clock size="3em" style="color: var(--my-ag-grid-primary)" />
       <span>加载中...</span>
     </div>
   </div>
@@ -29,7 +29,7 @@ defineProps<{
     box-sizing: border-box;
     width: 100%;
     height: calc(100% - 50px);
-    color: rgb(166, 150, 200);
+    color: var(--my-ag-grid-primary);
 
     display: flex;
     flex-direction: column;

src/components/ag-grid/NoRowsOverlayComponent.vue

@@ -56,7 +56,7 @@ defineProps<{
       left: 50%;
       transform: translate(-50px, 38px);
       box-sizing: border-box;
-      color: rgb(166, 150, 200);
+      color: var(--my-ag-grid-primary);
     }
   }
 }

src/config/ag-grid-locale.ts

@@ -2,46 +2,46 @@
 
 export default {
   // Set Filter
-  selectAll: '(Select All)',
-  selectAllSearchResults: '(Select All Search Results)',
+  selectAll: '(全选)',
+  selectAllSearchResults: '(选择所有搜索结果)',
   searchOoo: '搜索...',
-  blanks: '(Blanks)',
-  noMatches: 'No matches',
+  blanks: '(空)',
+  noMatches: '无匹配结果',
 
   // Number Filter & Text Filter
-  filterOoo: 'Filter...',
-  equals: 'Equals',
-  notEqual: 'Not equal',
-  blank: 'Blank',
-  notBlank: 'Not blank',
-  empty: 'Choose One',
+  filterOoo: '过滤...',
+  equals: '等于',
+  notEqual: '不等于',
+  blank: '空',
+  notBlank: '非空',
+  empty: '选择其中之一',
 
   // 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',
+  lessThan: '小于',
+  greaterThan: '大于',
+  lessThanOrEqual: '小于或等于',
+  greaterThanOrEqual: '大于或等于',
+  inRange: '在范围内',
+  inRangeStart: '从',
+  inRangeEnd: '到',
 
   // Text Filter
-  contains: 'Contains',
-  notContains: 'Not contains',
-  startsWith: 'Starts with',
-  endsWith: 'Ends with',
+  contains: '包含',
+  notContains: '不包含',
+  startsWith: '开始于',
+  endsWith: '结束于',
 
   // Date Filter
   dateFormatOoo: 'yyyy-mm-dd',
 
   // Filter Conditions
-  andCondition: 'AND',
-  orCondition: 'OR',
+  andCondition: '且',
+  orCondition: '或',
 
   // Filter Buttons
-  applyFilter: 'Apply',
-  resetFilter: 'Reset',
-  clearFilter: 'Clear',
+  applyFilter: '应用',
+  resetFilter: '重置',
+  clearFilter: '清空',
   cancelFilter: 'Cancel',
 
   // Filter Titles
@@ -72,9 +72,9 @@ export default {
 
   // Other
   loadingOoo: '加载中...',
-  loadingError: 'ERR',
-  noRowsToShow: 'No Rows To Show',
-  enabled: 'Enabled',
+  loadingError: '错误',
+  noRowsToShow: '暂无数据',
+  enabled: '启用',
 
   // Menu
   pinColumn: '固定列',
@@ -91,8 +91,8 @@ export default {
   addToLabels: 'Add ${variable} to labels',
   removeFromLabels: 'Remove ${variable} from labels',
   resetColumns: '重置列',
-  expandAll: 'Expand All',
-  collapseAll: 'Close All',
+  expandAll: '全部展开',
+  collapseAll: '全部折叠',
   copy: '复制',
   ctrlC: 'Ctrl+C',
   copyWithHeaders: '带标题的复制',

src/css/app.scss

@@ -77,24 +77,38 @@ a:hover {
 
 // Ag Grid
 .ag-theme-alpine {
-  --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-alpine-active-color: var(--my-ag-grid-active) !important;
 
-  --ag-odd-row-background-color: rgb(247, 247, 252) !important;
-  --ag-header-column-resize-handle-color: #7e2e84 !important;
+  // 菜单等主要 UI 元素中文本和图标的颜色
+  // 不要和标题行背景色一样
+  --ag-foreground-color: var(--my-ag-grid-active) !important;
+  // 背景色
+  --ag-background-color: Var(--my-ag-grid-text) !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-header-foreground-color: var(--my-ag-grid-text) !important;
+  // 标题行背景色
+  --ag-header-background-color: var(--my-ag-grid-primary) !important;
 
-  --ag-border-color: rgb(166, 150, 200) !important;
-  --ag-row-border-color: rgba(166, 150, 200, 0.2) !important;
+  // index为奇数的背景色
+  --ag-odd-row-background-color: var(--my-ag-grid-primary-light) !important;
+  // 标题列调整大小句柄颜色
+  --ag-header-column-resize-handle-color: var(--my-ag-grid-active) !important;
 
-  --ag-font-size: 17px;
-  --ag-font-family: monospace;
+  --ag-selected-row-background-color: var(--my-ag-grid-primary-1) !important;
+  --ag-range-selection-background-color: var(--my-ag-grid-primary-2) !important;
+  --ag-row-hover-color: var(--my-ag-grid-primary-1) !important;
+  --ag-column-hover-color: var(--my-ag-grid-primary-1) !important;
+  --ag-input-focus-border-color: var(--my-ag-grid-primary-1) !important;
+
+  --ag-border-color: var(--my-ag-grid-primary) !important;
+  --ag-row-border-color: var(--my-ag-grid-primary-1) !important;
+
+  --ag-input-disabled-background-color: #fff !important;
+  .ag-input-field-input,
+  .ag-text-field-input {
+    color: var(--my-ag-grid-primary) !important;
+  }
 }

src/css/quasar.variables.scss

@@ -56,3 +56,13 @@ $gray-text: rgba(0, 0, 0, 0.871);
 $gray-light-text: rgba(0, 0, 0, 0.596);
 
 $header-heigyht: 50px;
+
+:root {
+  --my-ag-grid-primary: rgb(165, 189, 22);
+  --my-ag-grid-primary-light: rgba(165, 189, 22, 0.05);
+  --my-ag-grid-primary-1: rgba(165, 189, 22, 0.1);
+  --my-ag-grid-primary-2: rgba(165, 189, 22, 0.2);
+
+  --my-ag-grid-active: rgb(127, 143, 37);
+  --my-ag-grid-text: #fff7f7;
+}

src/modules/page9/IndexPage.vue

@@ -17,6 +17,7 @@ import TransformationAnimation from './element/TransformationAnimation.vue';
 import AgGridStudy from './element/AgGridStudy2.vue';
 import AgGridMaster from './element/AgGridMaster.vue';
 import AgGridDetailGrids from './element/AgGridDetailGrids.vue';
+import AgGridTreeData from './element/AgGridTreeData.vue';
 
 const listData = [
   {
@@ -51,10 +52,14 @@ const listData = [
     title: 'Vue Data Grid: Master / Detail - Detail Grids',
     name: 'ag-grid-detail-grids',
   },
+  {
+    title: 'Ag Grid 表格树',
+    name: 'ag-grid-tree-data',
+  },
 ];
 const isShow = ref(true);
-const elementName = ref('ag-grid-detail-grids');
-const elementTitle = ref('Vue Data Grid: Master / Detail - Detail Grids');
+const elementName = ref('ag-grid-tree-data');
+const elementTitle = ref('Ag Grid 表格树');
 
 function onclick(data: any) {
   elementTitle.value = data.title;
@@ -95,6 +100,7 @@ function goBack() {
         <ag-grid-study v-if="elementName === 'ag-grid-study'" />
         <ag-grid-master v-if="elementName === 'ag-grid-master'" />
         <ag-grid-detail-grids v-if="elementName === 'ag-grid-detail-grids'" />
+        <ag-grid-tree-data v-if="elementName === 'ag-grid-tree-data'" />
       </div>
     </div>
     <div v-else>

src/modules/page9/auth.json

+[
+  {
+    "name": "sys/user/read",
+    "title": "System Setting/User Management/Read",
+    "i18n": {
+      "en-US": "System Setting/User Management/Read",
+      "zh-CN": "系统设置/用户管理/查看",
+      "zh-TW": "系統設置/用戶管理/查看"
+    }
+  },
+  {
+    "name": "sys/user/create",
+    "title": "System Setting/User Management/Create",
+    "i18n": {
+      "en-US": "System Setting/User Management/Create",
+      "zh-CN": "系统设置/用户管理/新建",
+      "zh-TW": "系統設置/用戶管理/新建"
+    }
+  },
+  {
+    "name": "sys/user/edit",
+    "title": "System Setting/User Management/Edit",
+    "i18n": {
+      "en-US": "System Setting/User Management/Edit",
+      "zh-CN": "系统设置/用户管理/编辑",
+      "zh-TW": "系統設置/用戶管理/編輯"
+    }
+  },
+  {
+    "name": "sys/user/delete",
+    "title": "System Setting/User Management/Delete",
+    "i18n": {
+      "en-US": "System Setting/User Management/Delete",
+      "zh-CN": "系统设置/用户管理/删除",
+      "zh-TW": "系統設置/用戶管理/删除"
+    }
+  },
+  {
+    "name": "sys/user/reset_pwd",
+    "title": "System Setting/User Management/Reset Password",
+    "i18n": {
+      "en-US": "System Setting/User Management/Reset Password",
+      "zh-CN": "系统设置/用户管理/重置密码",
+      "zh-TW": "系統設置/用戶管理/重置密碼"
+    }
+  },
+  {
+    "name": "sys/role/read",
+    "title": "System Setting/Role Management/Read",
+    "i18n": {
+      "en-US": "System Setting/Role Management/Read",
+      "zh-CN": "系统设置/角色管理/查看",
+      "zh-TW": "系統設置/角色管理/查看"
+    }
+  },
+  {
+    "name": "sys/role/create",
+    "title": "System Setting/Role Management/Create",
+    "i18n": {
+      "en-US": "System Setting/Role Management/Create",
+      "zh-CN": "系统设置/角色管理/新建",
+      "zh-TW": "系統設置/角色管理/新建"
+    }
+  },
+  {
+    "name": "sys/role/edit",
+    "title": "System Setting/Role Management/Edit",
+    "i18n": {
+      "en-US": "System Setting/Role Management/Edit",
+      "zh-CN": "系统设置/角色管理/编辑",
+      "zh-TW": "系統設置/角色管理/編輯"
+    }
+  },
+  {
+    "name": "sys/role/viewConnectedUsers",
+    "title": "System Setting/Role Management/View connected users",
+    "i18n": {
+      "en-US": "System Setting/Role Management/View connected users",
+      "zh-CN": "系统设置/角色管理/查看关联用户",
+      "zh-TW": "系統設置/角色管理/查看關聯用戶"
+    }
+  },
+  {
+    "title": "物流任务管理/历史任务管理/查看用户任务",
+    "name": "logistics_task_mgt/History_mgt/History_User_view",
+    "i18n": {
+      "en-US": "Logistics Task/History Task Mgt/History View User Task",
+      "zh-CN": "物流任务管理/历史任务管理/查看用户任务",
+      "zh-TW": "物流任務管理/歷史任務管理/查看用戶任務"
+    }
+  },
+  {
+    "title": "物流任务管理/历史任务管理/查看部门任务",
+    "name": "logistics_task_mgt/History_mgt/History_Workcenter_view",
+    "i18n": {
+      "en-US": "Logistics Task/History Task Mgt/History View Workcenter Task",
+      "zh-CN": "物流任务管理/历史任务管理/查看部门任务",
+      "zh-TW": "物流任務管理/歷史任務管理/查看部門任務"
+    }
+  },
+  {
+    "title": "物流任务管理/历史任务管理/查看所有任务",
+    "name": "logistics_task_mgt/History_mgt/History_All_view",
+    "i18n": {
+      "en-US": "Logistics Task/History Task Mgt/History View All Task",
+      "zh-CN": "物流任务管理/历史任务管理/查看所有任务",
+      "zh-TW": "物流任務管理/歷史任務管理/查看所有任務"
+    }
+  },
+  {
+    "title": "物流任务管理/历史任务管理/导出任务",
+    "name": "logistics_task_mgt/History_mgt/History_Export_task",
+    "i18n": {
+      "en-US": "Logistics Task/History Task Mgt/History Export Task",
+      "zh-CN": "物流任务管理/历史任务管理/导出任务",
+      "zh-TW": "物流任務管理/歷史任務管理/導出任務"
+    }
+  },
+  {
+    "title": "物流任务管理/AGV任务记录/查看",
+    "name": "logistics_task_mgt/agv_task_record/read",
+    "i18n": {
+      "en-US": "Logistics task mgt/AGV Task Record/Read",
+      "zh-CN": "物流任务管理/AGV任务记录/查看",
+      "zh-TW": "物流任務管理/AGV任務記錄/查看"
+    }
+  },
+  {
+    "title": "物流任务管理/AGV任务记录/导出",
+    "name": "logistics_task_mgt/agv_task_record/export",
+    "i18n": {
+      "en-US": "Logistics task mgt/AGV Task Record/Export",
+      "zh-CN": "物流任务管理/AGV任务记录/导出",
+      "zh-TW": "物流任務管理/AGV任務記錄/導出"
+    }
+  }
+]

src/modules/page9/config.ts

+import DATA from './auth.json';
+
+export const getData = function () {
+  const myMap1 = new Map();
+  const myMap2 = new Map();
+  const rowData = DATA.map((item: any) => {
+    const data = item.i18n;
+
+    // Map1
+    const nameArr1 = item.name.split('/');
+    const key1 = nameArr1[0] + '/' + nameArr1[1];
+    const title1 = data['zh-TW'].split('/');
+    const origin1 = data['en-US'].split('/');
+    const type1 = data['zh-CN'].split('/');
+    const obj1 = {
+      title: title1[1],
+      origin: origin1[1],
+      type: [type1[0], type1[1]],
+    };
+
+    if (!myMap1.has(key1)) {
+      myMap1.set(key1, obj1);
+    }
+
+    // Map2
+    const key2 = nameArr1[0];
+    const obj2 = {
+      title: title1[0],
+      origin: origin1[0],
+      type: [type1[0]],
+    };
+
+    if (!myMap2.has(key2)) {
+      myMap1.set(key2, obj2);
+    }
+
+    return {
+      title: data['zh-TW'].split('/')[2],
+      origin: data['en-US'].split('/')[2],
+      type: data['zh-CN'].split('/'),
+    };
+  });
+
+  for (const value of myMap1.values()) {
+    rowData.push(value);
+  }
+  for (const value of myMap2.values()) {
+    rowData.push(value);
+  }
+  return rowData;
+  //   const rowData = [
+  //     {
+  //       title: '系統設置',
+  //       origin: 'System Setting',
+  //       type: ['系统设置'],
+  //     },
+  //     {
+  //       title: '用戶管理',
+  //       origin: 'User Management',
+  //       type: ['系统设置', '用户管理'],
+  //     },
+  //     {
+  //       title: '查看',
+  //       origin: 'Read',
+  //       type: ['系统设置', '用户管理', '查看'],
+  //     },
+  //     {
+  //       title: '新建',
+  //       origin: 'Create',
+  //       type: ['系统设置', '用户管理', '新建'],
+  //     },
+  //   ];
+};

src/modules/page9/element/AgGridDetailGrids.vue

@@ -9,8 +9,9 @@ import Com from 'src/components';
 import AG_GRID_LOCALE from 'src/config/ag-grid-locale';
 
 const defaultColDef = {
+  resizable: true,
   flex: 1,
-  suppressMenu: true, // 禁用标题行菜单
+  suppressMenu: false, // 是否禁用标题行菜单
 };
 
 const gridApi = ref<any>(null);

src/modules/page9/element/AgGridStudy.vue

@@ -25,7 +25,7 @@ const gridApi = ref<any>(null);
 
 const state = reactive({
   columnDefs: [
-    { field: 'age' },
+    { field: 'age', headerName: '年龄' },
     { field: 'year' },
     {
       field: 'country',

src/modules/page9/element/AgGridStudy2.vue

@@ -5,6 +5,7 @@
 <script setup lang="ts">
 import { h, ref, reactive, onMounted } from 'vue';
 import { AgGridVue } from 'ag-grid-vue3';
+import AG_GRID_LOCALE from 'src/config/ag-grid-locale';
 
 import AgGridStudyCom from './AgGridStudyCom.vue';
 import AgGridStudyYearFilter from './AgGridStudyYearFilter.vue';
@@ -40,10 +41,11 @@ const savedFilterModel = ref<any>(null);
 
 const state = reactive({
   columnDefs: [
-    { field: 'age', filter: 'agNumberColumnFilter' },
+    { field: 'age', headerName: '年龄', filter: 'agNumberColumnFilter' },
     // { field: 'year', filter: 'agSetColumnFilter' }, // 企业版 https://ag-grid.com/vue-data-grid/filter-set/
     {
       field: 'year',
+      headerName: '年份',
       filter: AgGridStudyYearFilter,
       filterParams: {
         title: '标题',
@@ -52,6 +54,7 @@ const state = reactive({
 
     {
       field: 'date',
+      headerName: '日期',
       filter: 'agDateColumnFilter',
       // https://ag-grid.com/vue-data-grid/filter-date/#date-filter-comparator
       // add extra parameters for the date filter
@@ -84,6 +87,7 @@ const state = reactive({
     },
     {
       field: 'country',
+      headerName: '国家',
       filter: 'agMultiColumnFilter', // 企业版 https://ag-grid.com/vue-data-grid/filter-multi/
       cellRenderer: AgGridStudyCom,
       cellRendererParams: {
@@ -96,14 +100,16 @@ const state = reactive({
     },
     {
       field: 'sport',
+      headerName: '运动',
       cellRenderer: SimpleComp,
     },
-    { field: 'gold' },
-    { field: 'silver' },
+    { field: 'gold', headerName: '金牌' },
+    { field: 'silver', headerName: '银牌' },
     {
       field: 'bronze',
+      headerName: '铜牌',
       cellRendererSelector: (data: any) => {
-        if (data.value > 2) {
+        if (data.value < 2) {
           return { component: SimpleComp };
         } else {
           return {
@@ -165,6 +171,7 @@ function applyFilterState() {
       <ag-grid-vue
         style="height: 500px"
         class="ag-theme-alpine"
+        :localeText="AG_GRID_LOCALE"
         :popupParent="state.popupParent"
         :columnDefs="state.columnDefs"
         :rowData="state.rowData"

src/modules/page9/element/AgGridTreeData.vue

+<!--
+ * AG-grid 表格树
+ * https://www.ag-grid.com/vue-data-grid/tree-data/
+ -->
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { AgGridVue } from 'ag-grid-vue3';
+import AG_GRID_LOCALE from 'src/config/ag-grid-locale';
+import { getData } from '../config';
+
+const defaultColDef = {
+  resizable: true,
+  flex: 1,
+  suppressMenu: false, // 是否禁用标题行菜单
+};
+
+const gridApi = ref<any>(null);
+const gridColumnApi = ref<any>(null);
+
+const state = reactive({
+  columnDefs: [
+    { field: 'title', headerName: '繁体' },
+    { field: 'origin', headerName: '英文' },
+  ],
+  rowData: [] as any,
+});
+
+const autoGroupColumnDef = reactive({
+  headerName: '名称',
+  minWidth: 300,
+  cellRendererParams: {
+    suppressMenu: true,
+  },
+});
+
+onMounted(() => {
+  setTimeout(() => {
+    state.rowData = getData();
+    console.log('rowData', state.rowData);
+  }, 1000);
+});
+
+function onGridReady(params: any) {
+  gridApi.value = params.api;
+  gridColumnApi.value = params.columnApi;
+}
+
+function getDataPath(data: any) {
+  return data.type;
+}
+</script>
+<template>
+  <div class="box">
+    <!-- 
+        rowSelection="multiple"：多选，按住control键多选；【control+shift+鼠标点击】可选中多行
+        animateRows=true：启用行动画
+        :masterDetail="true" 启用展开的细节网格行
+        :isRowMaster="isRowMaster" 确定哪一个行该展开
+     -->
+
+    <div>
+      <ag-grid-vue
+        style="height: 500px"
+        class="ag-theme-alpine"
+        :localeText="AG_GRID_LOCALE"
+        :columnDefs="state.columnDefs"
+        :rowData="state.rowData"
+        :defaultColDef="defaultColDef"
+        :animateRows="true"
+        :pagination="true"
+        :paginationPageSize="5"
+        @grid-ready="onGridReady"
+        :treeData="true"
+        :getDataPath="getDataPath"
+        :autoGroupColumnDef="autoGroupColumnDef"
+        :groupDefaultExpanded="-1"
+      >
+      </ag-grid-vue>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>