Browse Source

【接口看板,AG暂存】

faster_AG_grid
安虹睿 1 year ago
parent
commit
679e4c8c93
  1. 27
      PC/InterFace.Dash/src/components/AGTable/agGridBtn.vue
  2. 107
      PC/InterFace.Dash/src/components/AGTable/index.vue
  3. 4
      PC/InterFace.Dash/src/components/searchOverall/index.vue
  4. 91
      PC/InterFace.Dash/src/components/tablePagination/index copy.vue
  5. 31
      PC/InterFace.Dash/src/components/tablePagination/index.vue
  6. 2
      PC/InterFace.Dash/src/components/umyTable/index.vue
  7. 2
      PC/InterFace.Dash/src/utils/utils.js

27
PC/InterFace.Dash/src/components/AGTable/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>

107
PC/InterFace.Dash/src/components/AGTable/index.vue

@ -0,0 +1,107 @@
<template>
<div>
<ag-grid-vue
:style="'width:500px; height:'+uTableHeight + 'px'"
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
},
props:{
// app-main100%
setUTableHeight: {
type: Number,
default: () => {
return 280;
}
}
},
data() {
return {
uTableHeight:null,//
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
},
};
},
watch: {
//
setUTableHeight(n,o){
this.setTableHeightHandle(n)
}
},
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 },
{ make: "Porsche", model: "Boxster", price: 72000 },
{ make: "Porsche", model: "Boxster", price: 72000 },
{ make: "Porsche", model: "Boxster", price: 72000 },
{ make: "Porsche", model: "Boxster", price: 72000 },
{ make: "Porsche", model: "Boxster", price: 72000 },
{ make: "Porsche", model: "Boxster", price: 72000 },
{ make: "Porsche", model: "Boxster", price: 72000 },
{ make: "Porsche", model: "Boxster", price: 72000 },
{ make: "Porsche", model: "Boxster", price: 72000 },
{ make: "Porsche", model: "Boxster", price: 72000 },
{ make: "Porsche", model: "Boxster", price: 72000 },
];
this.setTableHeightHandle()
},
methods:{
//
setTableHeightHandle(height){
let _height = height || this.setUTableHeight
let _app_height = document.getElementsByClassName('app-main')[0].clientHeight
this.uTableHeight = Number(_app_height) - Number(_height)
console.log()
},
//
getTableHeight(){
return this.uTableHeight
},
}
}
</script>
<style lang="scss" scoped>
</style>

4
PC/InterFace.Dash/src/components/searchOverall/index.vue

@ -524,6 +524,10 @@
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.moreListData.filters.splice(val, 1) this.moreListData.filters.splice(val, 1)
this.$nextTick(()=>{
this.componentsHeight = this.getAllSearchInnerHeight() + 20
this.$parent.changeTableHeight(this.getAllSearchInnerHeight())
})
}).catch(() => { }).catch(() => {
// this.modalAppendToBody = false // this.modalAppendToBody = false
}); });

91
PC/InterFace.Dash/src/components/tablePagination/index copy.vue

@ -1,10 +1,12 @@
<template> <template>
<div class="tablePagination"> <div class="tablePagination">
<!-- 原版本 使用umytable版本 -->
<!-- 头部按钮 --> <!-- 头部按钮 -->
<div class="table-nav"> <div class="table-nav">
<curren-Button <curren-Button
v-if="headerButttondata"
ref="tablePagination_topNav" ref="tablePagination_topNav"
:Butttondata="currenButtonData" :Butttondata="headerButttondata"
@tableButtonClick="topbutton" @tableButtonClick="topbutton"
@quicklySearchClick="quicklySearchClick" @quicklySearchClick="quicklySearchClick"
@quicklySearchClear="quicklySearchClear" @quicklySearchClear="quicklySearchClear"
@ -25,6 +27,7 @@
:tableColumns="tableColumns" :tableColumns="tableColumns"
@overallSearchFormClick="overallSearchFormClick" @overallSearchFormClick="overallSearchFormClick"
:httpOverallSearchData="httpOverallSearchData" :httpOverallSearchData="httpOverallSearchData"
:selectMaxHeight="selectMaxHeight"
> >
<!-- 插槽预留 --> <!-- 插槽预留 -->
<slot name="searchPrimarySlot"></slot> <slot name="searchPrimarySlot"></slot>
@ -48,7 +51,7 @@
:tableColumns="tableColumns | isTableColumns" :tableColumns="tableColumns | isTableColumns"
:isShowIndex="isShowIndex" :isShowIndex="isShowIndex"
:selectionTable="tableSelection" :selectionTable="tableSelection"
:setUTableHeight="setUTableHeight || uTableTopHeight" :setUTableHeight="uTableTopHeight"
@sortChange="sortChange" @sortChange="sortChange"
@handleSelectionChange="handleSelectionChange" @handleSelectionChange="handleSelectionChange"
@inlineDialog="inlineDialog" @inlineDialog="inlineDialog"
@ -91,10 +94,22 @@ export default {
rowDrop rowDrop
}, },
props: { props: {
// 使
noUsePermissionBtn:{
type: Array,
default: () => {
return ['refresh','field','export','filter']//
}
},
rowMaxHeight:{ rowMaxHeight:{
type:String, type:String,
default:'calc(90vh - 280px)' default:'calc(90vh - 280px)'
}, },
//
selectMaxHeight:{
type: String,
default: '174px'
},
// //
searchOverallCoverHeight:{ searchOverallCoverHeight:{
type: String, type: String,
@ -222,10 +237,12 @@ export default {
}, },
data () { data () {
return { return {
headerButttondata:null,
// //
rowDropVisible: false, rowDropVisible: false,
// table key // table key
isUpdate: false, isUpdate: false,
appRemoveHeight:165,
// table // table
uTableTopHeight:165, uTableTopHeight:165,
// table // table
@ -265,8 +282,11 @@ export default {
} }
}, },
mounted(){ mounted(){
this.appRemoveHeight = this.setUTableHeight || 165
this.uTableTopHeight = this.appRemoveHeight
this.uTableOuterHeight = this.$refs.tablePaginationTableRef.getTableHeight() this.uTableOuterHeight = this.$refs.tablePaginationTableRef.getTableHeight()
this.uTableOuterHeight_init = Number(JSON.stringify(this.uTableOuterHeight)) this.uTableOuterHeight_init = Number(JSON.stringify(this.uTableOuterHeight))
this.initButttondata()
// //
document.addEventListener('click',(e)=>{ document.addEventListener('click',(e)=>{
@ -281,6 +301,29 @@ export default {
}) })
}, },
methods: { methods: {
initButttondata(){
let _list = []
this.currenButtonData.forEach(item=>{
if(item.permission){
_list.push(item)
}else{
if(this.noUsePermissionBtn.indexOf(item.name) < 0){
let _scope = item.clientScope || localStorage.getItem('appClientScope')
item.permission = [_scope + '.' +this.$route.name+'.'+(item.permissionName || item.name)]
}else{
item.permission = []
}
_list.push(item)
}
})
this.headerButttondata = _list
},
//
doFreshTableLayout(){
if(this.$refs.tablePaginationTableRef && this.$refs.tablePaginationTableRef.doFreshLayout){
this.$refs.tablePaginationTableRef.doFreshLayout()
}
},
rowDrop(data,type) { rowDrop(data,type) {
this.$emit('rowDrop',data,type) this.$emit('rowDrop',data,type)
this.$nextTick(()=>{ this.$nextTick(()=>{
@ -296,26 +339,46 @@ export default {
if(this.primarySearchOption && this.primarySearchOption.length > 0){ if(this.primarySearchOption && this.primarySearchOption.length > 0){
this.$nextTick(()=>{ this.$nextTick(()=>{
let _search_height = this.$refs.searchOverallRef.getSearchPrimaryHeight() let _search_height = this.$refs.searchOverallRef.getSearchPrimaryHeight()
this.changeTableHeight(_search_height)
// if(this.showSearchOverall){
// let _margin = 20
// this.uTableOuterHeight = this.uTableOuterHeight_init - _search_height - _margin
// setTimeout(()=>{
// this.uTableTopHeight += _search_height + _margin
// },0)
// }else{
// this.uTableOuterHeight = this.uTableOuterHeight_init
// setTimeout(()=>{
// this.uTableTopHeight = 165
// },0)
// }
})
}
this.$nextTick(()=>{
let _search_height = this.$refs.searchOverallRef.getAllSearchInnerHeight()
this.changeTableHeight(_search_height)
})
}
//
else if (val == 'field') {
this.rowDropVisible = !this.rowDropVisible
}
this.$emit("topbutton", val,item)
},
// table
changeTableHeight(minusHeight=0){
if(this.showSearchOverall){ if(this.showSearchOverall){
let _margin = 20 let _margin = 20
this.uTableOuterHeight = this.uTableOuterHeight_init - _search_height - _margin this.uTableOuterHeight = this.uTableOuterHeight_init - minusHeight - _margin
setTimeout(()=>{ setTimeout(()=>{
this.uTableTopHeight += _search_height + _margin this.uTableTopHeight = minusHeight + this.appRemoveHeight + _margin
},0) },0)
}else{ }else{
this.uTableOuterHeight = this.uTableOuterHeight_init this.uTableOuterHeight = this.uTableOuterHeight_init
setTimeout(()=>{ setTimeout(()=>{
this.uTableTopHeight = 165 this.uTableTopHeight = this.appRemoveHeight
},0) },0)
} }
})
}
}
//
else if (val == 'field') {
this.rowDropVisible = !this.rowDropVisible
}
this.$emit("topbutton", val,item)
}, },
// - // -
quicklySearchClick (val,option) { quicklySearchClick (val,option) {
@ -369,7 +432,7 @@ export default {
// //
overallSearchFormClick(options){ overallSearchFormClick(options){
// //
options.vm_quickly = this.$refs.tablePagination_topNav.getQuicklySearchDom() if(this.$refs.tablePagination_topNav)options.vm_quickly = this.$refs.tablePagination_topNav.getQuicklySearchDom()
this.$emit("overallSearchFormClick", options) this.$emit("overallSearchFormClick", options)
}, },
// //

31
PC/InterFace.Dash/src/components/tablePagination/index.vue

@ -42,7 +42,34 @@
></rowDrop> ></rowDrop>
<!-- 列表 --> <!-- 列表 -->
<div class="uTableOuter" ref="uTableOuterRef" :style="{height:uTableOuterHeight + 'px',overflow:'hidden'}"> <div class="uTableOuter" ref="uTableOuterRef" :style="{height:uTableOuterHeight + 'px',overflow:'hidden'}">
<umyTable <AGTable
ref="tablePaginationTableRef"
:setUTableHeight="uTableTopHeight"
></AGTable>
<!-- <umyTable
:isUpdate="isUpdate"
:tableLoading="tableLoading"
:tableData="tableData"
:tableColumns="tableColumns | isTableColumns"
:isShowIndex="isShowIndex"
:selectionTable="tableSelection"
@sortChange="sortChange"
@handleSelectionChange="handleSelectionChange"
@inlineDialog="inlineDialog"
:buttonOperationList_left="buttonOperationList_left"
@buttonOperationClick_left="buttonOperationClick_left"
:buttonOperationList_right="buttonOperationList_right"
@buttonOperationClick_right="buttonOperationClick_right"
:tableBorder="true"
:firstFixed="true"
:cellStyle = "cellStyle"
:showOverflowTooltip="showOverflowTooltip"
>
<template>
<slot></slot>
</template>
</umyTable> -->
<!-- <umyTable
ref="tablePaginationTableRef" ref="tablePaginationTableRef"
:isUpdate="isUpdate" :isUpdate="isUpdate"
:tableLoading="tableLoading" :tableLoading="tableLoading"
@ -66,7 +93,7 @@
<template> <template>
<slot></slot> <slot></slot>
</template> </template>
</umyTable> </umyTable> -->
</div> </div>
<!-- 页码 --> <!-- 页码 -->
<pagination <pagination

2
PC/InterFace.Dash/src/components/umyTable/index.vue

@ -414,7 +414,7 @@ export default {
this.$refs.multipleTable.$forceUpdate() this.$refs.multipleTable.$forceUpdate()
}); });
}, },
// //
getTableHeight(){ getTableHeight(){
return this.uTableHeight return this.uTableHeight
}, },

2
PC/InterFace.Dash/src/utils/utils.js

@ -61,6 +61,7 @@ import conditionFilters from "@/components/conditionFilters" //高级筛选
import searchPage from '@/components/searchPage' //autocomplete拉取数据探弹窗 import searchPage from '@/components/searchPage' //autocomplete拉取数据探弹窗
import newAndEdiDialog from '@/components/newAndEdiDialog' //普通新增与编辑 import newAndEdiDialog from '@/components/newAndEdiDialog' //普通新增与编辑
import umyTable from '@/components/umyTable' // 用于数据量过大table import umyTable from '@/components/umyTable' // 用于数据量过大table
import AGTable from '@/components/AGTable' // 用于数据量过大table
import filterForDetailPage from '@/components/filterForDetailPage' //明细查询 import filterForDetailPage from '@/components/filterForDetailPage' //明细查询
import addEditFromApiPop from '@/components/addEditFromApiPop' //新增与编辑(只有主表),参数配置从api获取 import addEditFromApiPop from '@/components/addEditFromApiPop' //新增与编辑(只有主表),参数配置从api获取
@ -113,6 +114,7 @@ Vue.component('conditionFilters', conditionFilters)
Vue.component('searchPage', searchPage) Vue.component('searchPage', searchPage)
Vue.component('newAndEdiDialog', newAndEdiDialog) Vue.component('newAndEdiDialog', newAndEdiDialog)
Vue.component('umyTable', umyTable) Vue.component('umyTable', umyTable)
Vue.component('AGTable', AGTable)
Vue.component('filterForDetailPage', filterForDetailPage) Vue.component('filterForDetailPage', filterForDetailPage)
Vue.component('addEditFromApiPop', addEditFromApiPop) Vue.component('addEditFromApiPop', addEditFromApiPop)
Vue.prototype.$echarts = eCharts Vue.prototype.$echarts = eCharts

Loading…
Cancel
Save