From e9a4d2567c478fbb356035f5988a22d801d05c6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=89=E8=99=B9=E7=9D=BF?= <297504645@qq.com>
Date: Wed, 8 Nov 2023 17:17:49 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=8E=A5=E5=8F=A3=E7=9C=8B=E6=9D=BF?=
 =?UTF-8?q?=E3=80=91agGridDemo=E5=8F=AF=E8=A1=8C=E6=80=A7=E6=9A=82?=
 =?UTF-8?q?=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 PC/InterFace.Dash/package-lock.json           | 61 +++++++++++++++++
 PC/InterFace.Dash/package.json                |  3 +
 PC/InterFace.Dash/src/router/index.js         | 36 +++++-----
 .../src/views/demo/agGridBtn.vue              | 27 ++++++++
 .../src/views/demo/agGridDemo.vue             | 66 +++++++++++++++++++
 5 files changed, 175 insertions(+), 18 deletions(-)
 create mode 100644 PC/InterFace.Dash/src/views/demo/agGridBtn.vue
 create mode 100644 PC/InterFace.Dash/src/views/demo/agGridDemo.vue

diff --git a/PC/InterFace.Dash/package-lock.json b/PC/InterFace.Dash/package-lock.json
index b32b900..ebe7119 100644
--- a/PC/InterFace.Dash/package-lock.json
+++ b/PC/InterFace.Dash/package-lock.json
@@ -10,6 +10,8 @@
       "license": "MIT",
       "dependencies": {
         "af-table-column": "^1.0.3",
+        "ag-grid-community": "^30.2.1",
+        "ag-grid-vue": "^30.2.1",
         "axios": "0.18.1",
         "clipboard": "2.0.4",
         "codemirror": "5.45.0",
@@ -42,6 +44,7 @@
         "vue-grid-layout": "^2.4.0",
         "vue-i18n": "^8.28.2",
         "vue-pdf": "^4.3.0",
+        "vue-property-decorator": "^8.0.0",
         "vue-router": "3.0.2",
         "vue-splitpane": "1.0.4",
         "vuedraggable": "2.20.0",
@@ -3851,6 +3854,21 @@
         "vue": "^2.6.10"
       }
     },
+    "node_modules/ag-grid-community": {
+      "version": "30.2.1",
+      "resolved": "https://registry.npmmirror.com/ag-grid-community/-/ag-grid-community-30.2.1.tgz",
+      "integrity": "sha512-1slonXskJbbI9ybhTx//4YKfJpZVAEnHL8dui1rQJRSXKByUi+/f7XtvkLsbgBkawoWbqvRAySjYtvz80+kBfA=="
+    },
+    "node_modules/ag-grid-vue": {
+      "version": "30.2.1",
+      "resolved": "https://registry.npmmirror.com/ag-grid-vue/-/ag-grid-vue-30.2.1.tgz",
+      "integrity": "sha512-dnyltXrVUPk0ALQ1PfwnjBtYk/GDOjRjyOMy8LVAiWxVQA6Tmnb/dTnS1yjym1uggu+dDKof2zgPxVKayIHtWg==",
+      "peerDependencies": {
+        "ag-grid-community": "~30.2.1",
+        "vue": ">= 2.2 <= 2.5.17 || >= 2.5.20",
+        "vue-property-decorator": "^7.2.0 || ^8.0.0 || ^9.1.2"
+      }
+    },
     "node_modules/aggregate-error": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
@@ -22377,6 +22395,22 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/vue-property-decorator": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmmirror.com/vue-property-decorator/-/vue-property-decorator-8.0.0.tgz",
+      "integrity": "sha512-aaAO/Wbh+n3sPMOoQ+Rwi9va6vFqZPX13dA8vMycGuS/DOIYC77KxX0gMAPEzzkT4Umya0uSlTvBV5jQvSTyBQ==",
+      "dependencies": {
+        "vue-class-component": "^7.0.1"
+      }
+    },
+    "node_modules/vue-property-decorator/node_modules/vue-class-component": {
+      "version": "7.2.6",
+      "resolved": "https://registry.npmmirror.com/vue-class-component/-/vue-class-component-7.2.6.tgz",
+      "integrity": "sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w==",
+      "peerDependencies": {
+        "vue": "^2.0.0"
+      }
+    },
     "node_modules/vue-resize-sensor": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/vue-resize-sensor/-/vue-resize-sensor-2.0.0.tgz",
@@ -26653,6 +26687,17 @@
         "vue": "^2.6.10"
       }
     },
+    "ag-grid-community": {
+      "version": "30.2.1",
+      "resolved": "https://registry.npmmirror.com/ag-grid-community/-/ag-grid-community-30.2.1.tgz",
+      "integrity": "sha512-1slonXskJbbI9ybhTx//4YKfJpZVAEnHL8dui1rQJRSXKByUi+/f7XtvkLsbgBkawoWbqvRAySjYtvz80+kBfA=="
+    },
+    "ag-grid-vue": {
+      "version": "30.2.1",
+      "resolved": "https://registry.npmmirror.com/ag-grid-vue/-/ag-grid-vue-30.2.1.tgz",
+      "integrity": "sha512-dnyltXrVUPk0ALQ1PfwnjBtYk/GDOjRjyOMy8LVAiWxVQA6Tmnb/dTnS1yjym1uggu+dDKof2zgPxVKayIHtWg==",
+      "requires": {}
+    },
     "aggregate-error": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
@@ -41525,6 +41570,22 @@
         }
       }
     },
+    "vue-property-decorator": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmmirror.com/vue-property-decorator/-/vue-property-decorator-8.0.0.tgz",
+      "integrity": "sha512-aaAO/Wbh+n3sPMOoQ+Rwi9va6vFqZPX13dA8vMycGuS/DOIYC77KxX0gMAPEzzkT4Umya0uSlTvBV5jQvSTyBQ==",
+      "requires": {
+        "vue-class-component": "^7.0.1"
+      },
+      "dependencies": {
+        "vue-class-component": {
+          "version": "7.2.6",
+          "resolved": "https://registry.npmmirror.com/vue-class-component/-/vue-class-component-7.2.6.tgz",
+          "integrity": "sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w==",
+          "requires": {}
+        }
+      }
+    },
     "vue-resize-sensor": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/vue-resize-sensor/-/vue-resize-sensor-2.0.0.tgz",
diff --git a/PC/InterFace.Dash/package.json b/PC/InterFace.Dash/package.json
index a74c05c..7b798f1 100644
--- a/PC/InterFace.Dash/package.json
+++ b/PC/InterFace.Dash/package.json
@@ -16,6 +16,8 @@
   },
   "dependencies": {
     "af-table-column": "^1.0.3",
+    "ag-grid-community": "^30.2.1",
+    "ag-grid-vue": "^30.2.1",
     "axios": "0.18.1",
     "clipboard": "2.0.4",
     "codemirror": "5.45.0",
@@ -48,6 +50,7 @@
     "vue-grid-layout": "^2.4.0",
     "vue-i18n": "^8.28.2",
     "vue-pdf": "^4.3.0",
+    "vue-property-decorator": "^8.0.0",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",
     "vuedraggable": "2.20.0",
diff --git a/PC/InterFace.Dash/src/router/index.js b/PC/InterFace.Dash/src/router/index.js
index a1459f1..bf50735 100644
--- a/PC/InterFace.Dash/src/router/index.js
+++ b/PC/InterFace.Dash/src/router/index.js
@@ -117,24 +117,24 @@ export let constantRoutes = [
       }
     }]
   },
-  // {
-  //   path: '/',
-  //   component: Layout,
-  //   redirect: '/RoleManage',
-  //   hidden: true,
-  //   children: [{
-  //     path: 'RoleManage',
-  //     component: () => import('@/views/systemManage/RoleManage'),
-  //     name: 'RoleManage',
-  //     meta: {
-  //       keepAlive : true, 
-  //       title: 'RoleManage',
-  //       icon: 'svg_dashboard',
-  //       outerFirst:true
-  //       // affix: true
-  //     }
-  //   }]
-  // }, 
+  {
+    path: '/',
+    component: Layout,
+    redirect: '/agGridDemo',
+    hidden: true,
+    children: [{
+      path: 'agGridDemo',
+      component: () => import('@/views/demo/agGridDemo'),
+      name: 'agGridDemo',
+      meta: {
+        keepAlive : true, 
+        title: 'agGridDemo',
+        icon: 'svg_dashboard',
+        outerFirst:true
+        // affix: true
+      }
+    }]
+  }, 
 ]
 
 /**
diff --git a/PC/InterFace.Dash/src/views/demo/agGridBtn.vue b/PC/InterFace.Dash/src/views/demo/agGridBtn.vue
new file mode 100644
index 0000000..fd47f69
--- /dev/null
+++ b/PC/InterFace.Dash/src/views/demo/agGridBtn.vue
@@ -0,0 +1,27 @@
+<template>
+    <div>
+        <el-button @click="clickHandle('edit')" size="small" type="text">编辑</el-button>
+        <el-button @click="clickHandle('delete')" size="small" type="text">删除</el-button>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            cellValue:null
+        };
+    },
+    mounted(){
+        console.log(16,this.params.api.getRowNode(2))
+        this.cellValue = this.params.data;
+    },
+    methods:{
+        clickHandle(data){
+            console.log(data,this.cellValue)
+        },
+        // getValueToDisplay(params) {
+        //     return this.params.api.getRowNode(params.rowIndex).data
+        // },
+    }
+}
+</script>
\ No newline at end of file
diff --git a/PC/InterFace.Dash/src/views/demo/agGridDemo.vue b/PC/InterFace.Dash/src/views/demo/agGridDemo.vue
new file mode 100644
index 0000000..a8ffeaf
--- /dev/null
+++ b/PC/InterFace.Dash/src/views/demo/agGridDemo.vue
@@ -0,0 +1,66 @@
+<template>
+    <div>
+        <ag-grid-vue
+            style="width:500px; height: 500px"
+            class="ag-theme-alpine"
+            :columnDefs="columnDefs"
+            :rowData="rowData"
+            :defaultColDef="defaultColDef"
+        >
+        </ag-grid-vue>
+    </div>
+</template>
+<script>
+import "ag-grid-community/styles/ag-grid.css";
+import "ag-grid-community/styles/ag-theme-alpine.css";
+import { AgGridVue } from 'ag-grid-vue';
+import agGridBtn from './agGridBtn.vue';
+export default {
+    name: "agGridDemo",
+    components: {
+      AgGridVue,
+      agGridBtn
+    },
+    data() {
+        return {
+            columnDefs: null,
+            rowData: null,
+            defaultColDef: {
+                // flex:1,
+                filter: true,
+                sortable: true,
+                floatingFilter: true,
+                resizable:true,
+                cellClass:"cell-wrap-text",
+                headerClass: 'ag-header-center',
+                autoHeight:true
+            },
+        };
+    },
+    mounted() {
+        this.columnDefs = [
+            {
+                field:'操作',
+                lockPosition: 'left',
+                cellRenderer: 'agGridBtn',
+                cellClass: 'locked-col',
+                width: 120,
+                suppressNavigable: true,
+                pinned:'right',
+                floatingFilter:false
+            },
+            { field: "make" },
+            { field: "model" },
+            { field: "price" },
+        ];
+
+        this.rowData = [
+            { make: "Toyota", model: "Celica", price: 35000 },
+            { make: "Ford", model: "Mondeo", price: 32000 },
+            { make: "Porsche", model: "Boxster", price: 72000 },
+        ];
+    },
+}
+</script>
+<style lang="scss" scoped>
+</style>
\ No newline at end of file