Browse Source

【接口看板】agGridDemo可行性暂存

faster_AG_grid
安虹睿 11 months ago
parent
commit
e9a4d2567c
  1. 61
      PC/InterFace.Dash/package-lock.json
  2. 3
      PC/InterFace.Dash/package.json
  3. 36
      PC/InterFace.Dash/src/router/index.js
  4. 27
      PC/InterFace.Dash/src/views/demo/agGridBtn.vue
  5. 66
      PC/InterFace.Dash/src/views/demo/agGridDemo.vue

61
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",

3
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",

36
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
}
}]
},
]
/**

27
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>

66
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>
Loading…
Cancel
Save