BoXu.Zheng
/
WMS_IAC_FE
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

faster_AG_grid
安虹睿 1 year ago
parent
9437243186
commit
e9a4d2567c
5 changed files with 175 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

@ -10,6 +10,8 @@
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"af-table-column": "^1.0.3", "af-table-column": "^1.0.3",
"ag-grid-community": "^30.2.1",
"ag-grid-vue": "^30.2.1",
"axios": "0.18.1", "axios": "0.18.1",
"clipboard": "2.0.4", "clipboard": "2.0.4",
"codemirror": "5.45.0", "codemirror": "5.45.0",
@ -42,6 +44,7 @@
"vue-grid-layout": "^2.4.0", "vue-grid-layout": "^2.4.0",
"vue-i18n": "^8.28.2", "vue-i18n": "^8.28.2",
"vue-pdf": "^4.3.0", "vue-pdf": "^4.3.0",
"vue-property-decorator": "^8.0.0",
"vue-router": "3.0.2", "vue-router": "3.0.2",
"vue-splitpane": "1.0.4", "vue-splitpane": "1.0.4",
"vuedraggable": "2.20.0", "vuedraggable": "2.20.0",
@ -3851,6 +3854,21 @@
"vue": "^2.6.10" "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": { "node_modules/aggregate-error": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz", "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
@ -22377,6 +22395,22 @@
"url": "https://opencollective.com/webpack" "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": { "node_modules/vue-resize-sensor": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/vue-resize-sensor/-/vue-resize-sensor-2.0.0.tgz", "resolved": "https://registry.npmjs.org/vue-resize-sensor/-/vue-resize-sensor-2.0.0.tgz",
@ -26653,6 +26687,17 @@
"vue": "^2.6.10" "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": { "aggregate-error": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz", "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": { "vue-resize-sensor": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/vue-resize-sensor/-/vue-resize-sensor-2.0.0.tgz", "resolved": "https://registry.npmjs.org/vue-resize-sensor/-/vue-resize-sensor-2.0.0.tgz",

3
PC/InterFace.Dash/package.json
View File

@ -16,6 +16,8 @@
}, },
"dependencies": { "dependencies": {
"af-table-column": "^1.0.3", "af-table-column": "^1.0.3",
"ag-grid-community": "^30.2.1",
"ag-grid-vue": "^30.2.1",
"axios": "0.18.1", "axios": "0.18.1",
"clipboard": "2.0.4", "clipboard": "2.0.4",
"codemirror": "5.45.0", "codemirror": "5.45.0",
@ -48,6 +50,7 @@
"vue-grid-layout": "^2.4.0", "vue-grid-layout": "^2.4.0",
"vue-i18n": "^8.28.2", "vue-i18n": "^8.28.2",
"vue-pdf": "^4.3.0", "vue-pdf": "^4.3.0",
"vue-property-decorator": "^8.0.0",
"vue-router": "3.0.2", "vue-router": "3.0.2",
"vue-splitpane": "1.0.4", "vue-splitpane": "1.0.4",
"vuedraggable": "2.20.0", "vuedraggable": "2.20.0",

36
PC/InterFace.Dash/src/router/index.js
View File

@ -117,24 +117,24 @@ export let constantRoutes = [
} }
}] }]
}, },
// { {
// path: '/', path: '/',
// component: Layout, component: Layout,
// redirect: '/RoleManage', redirect: '/agGridDemo',
// hidden: true, hidden: true,
// children: [{ children: [{
// path: 'RoleManage', path: 'agGridDemo',
// component: () => import('@/views/systemManage/RoleManage'), component: () => import('@/views/demo/agGridDemo'),
// name: 'RoleManage', name: 'agGridDemo',
// meta: { meta: {
// keepAlive : true, keepAlive : true,
// title: 'RoleManage', title: 'agGridDemo',
// icon: 'svg_dashboard', icon: 'svg_dashboard',
// outerFirst:true outerFirst:true
// // affix: true // affix: true
// } }
// }] }]
// }, },
] ]
/** /**

27
PC/InterFace.Dash/src/views/demo/agGridBtn.vue
View File

@ -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
View File

@ -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>
Write Preview
Loading…
Cancel
Save