26 changed files with 705 additions and 46 deletions
@ -0,0 +1,46 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-button |
||||
|
v-if="!item.hide" |
||||
|
v-for="(item,index) in buttons" |
||||
|
:key="index" |
||||
|
@click="clickHandle(item)" |
||||
|
:size="item.size" |
||||
|
:type="item.type" |
||||
|
:style="'color:'+item.color" |
||||
|
>{{item.label}}</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import AGTableBttons from "@/components/AGTable/btnControls.js" |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
propsInit:null,//传参数据 |
||||
|
buttons:[ |
||||
|
AGTableBttons.tableEditBtn, |
||||
|
AGTableBttons.tableDeleteBtn, |
||||
|
], |
||||
|
cellValue:null |
||||
|
}; |
||||
|
}, |
||||
|
mounted(){ |
||||
|
this.propsInit = this.params.colDef.cellRendererParams |
||||
|
console.log(33,this.propsInit.currency) |
||||
|
this.cellValue = this.params.data; |
||||
|
}, |
||||
|
methods:{ |
||||
|
clickHandle(data){ |
||||
|
if(data.name == 'delete'){ |
||||
|
AGTableBttons.deleteHandle(()=>{ |
||||
|
console.log(33,this.cellValue) |
||||
|
}) |
||||
|
} |
||||
|
// console.log(data,this.cellValue) |
||||
|
}, |
||||
|
// getValueToDisplay(params) { |
||||
|
// return this.params.api.getRowNode(params.rowIndex).data |
||||
|
// }, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,42 @@ |
|||||
|
// 页面基础按钮样式
|
||||
|
import i18n from "@/lang" |
||||
|
import { MessageBox } from 'element-ui'; |
||||
|
|
||||
|
// 编辑按钮
|
||||
|
const tableEditBtn= { |
||||
|
type: "text", |
||||
|
icon: "el-icon-edit", |
||||
|
label: i18n.t('btns.edit'), |
||||
|
name: "edit", |
||||
|
size: "small", |
||||
|
color: "#ff9000", |
||||
|
} |
||||
|
|
||||
|
// 删除按钮
|
||||
|
const tableDeleteBtn= { |
||||
|
type: "text", |
||||
|
icon: "el-icon-delete", |
||||
|
label: i18n.t('btns.delete'), |
||||
|
name: "delete", |
||||
|
size: "small", |
||||
|
color: "red", |
||||
|
} |
||||
|
|
||||
|
const deleteHandle = (callback) => { |
||||
|
MessageBox.confirm('您确定删除吗, 是否继续?', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
// 确定操作
|
||||
|
if(callback)callback() |
||||
|
}).catch(() => { |
||||
|
//取消操作
|
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
export default { |
||||
|
tableEditBtn, |
||||
|
tableDeleteBtn, |
||||
|
deleteHandle |
||||
|
} |
||||
@ -0,0 +1,115 @@ |
|||||
|
<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:{ |
||||
|
// 操作列按钮组件名 |
||||
|
agGridBtnName:{ |
||||
|
type: String, |
||||
|
default:'agGridBtn' |
||||
|
}, |
||||
|
// 已app-main高度为100% 需要减掉的高度 |
||||
|
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: this.agGridBtnName, |
||||
|
cellRendererParams: { |
||||
|
currency: 'EUREUREUREUREUREUR' |
||||
|
}, |
||||
|
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> |
||||
@ -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> |
||||
@ -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> |
||||
@ -0,0 +1,104 @@ |
|||||
|
<template> |
||||
|
<div class="page-box" v-loading="Loading.tableLoading"> |
||||
|
<tablePagination |
||||
|
v-if="apiColumns_Table" |
||||
|
:currenButtonData="currenButtonData" |
||||
|
:tableData="tableData" |
||||
|
:tableLoading="Loading.tableLoading" |
||||
|
:tableColumns="apiColumns_Table" |
||||
|
@rowDrop="rowDrop" |
||||
|
:totalCount="totalCount" |
||||
|
:multipleSelection="multipleSelection" |
||||
|
:MaxResultCount="PageListParams.MaxResultCount" |
||||
|
@topbutton="topbutton" |
||||
|
@inlineDialog="inlineDialog" |
||||
|
@sortChange="sortChange" |
||||
|
@alertoldSkipCount="alertoldSkipCount" |
||||
|
@alterResultCount="alterResultCount" |
||||
|
@handleSelectionChange="handleSelectionChange" |
||||
|
:currentPageProps="oldSkipCount" |
||||
|
:quicklySearchOption="quicklySearchOption" |
||||
|
@quicklySearchClick="quicklySearchClick" |
||||
|
@quicklySearchClear="quicklySearchClear" |
||||
|
:primarySearchOption="primarySearchOption" |
||||
|
@overallSearchFormClick="overallSearchFormClick" |
||||
|
:httpOverallSearchData="httpOverallSearchData" |
||||
|
:buttonOperationList_left="buttonOperationClick_leftBase" |
||||
|
@buttonOperationClick_left="buttonOperationClick_left" |
||||
|
></tablePagination> |
||||
|
<curren-Drawer |
||||
|
ref="currenDrawer_Ref" |
||||
|
:title="apiColumns_DesTions" |
||||
|
@rowDrop="rowDrop" |
||||
|
:tableColumns="apiColumns_DetailsTable" |
||||
|
:tabsDesTions="apiColumns_DesTions" |
||||
|
:DrawerLoading="Loading.DrawerLoading" |
||||
|
:drawer="displayDialog.detailsDialog" |
||||
|
:propsData="propsData" |
||||
|
:Butttondata="[]" |
||||
|
@drawerShut="(val) => (displayDialog.detailsDialog = val)" |
||||
|
@drawerbutton="drawerbutton" |
||||
|
@handleCommand="drawerHandle" |
||||
|
@close-value="closeValue" |
||||
|
:totalCount="totalCountDetails" |
||||
|
:currentPage="oldSkipCountDetails" |
||||
|
:MaxResultCount="MaxResultCountDetails" |
||||
|
@alterResultCountDetails="alterResultCountDetails" |
||||
|
@alertoldSkipCountDetails="alertoldSkipCountDetails" |
||||
|
:buttonOperationList_left="operationButtonsDetail" |
||||
|
></curren-Drawer> |
||||
|
<!-- 明细查询页面 --> |
||||
|
<filterForDetailPage |
||||
|
v-if="filterForDetailShow" |
||||
|
:parentColumns="apiColumns_Table" |
||||
|
@closeDialog="changeFilterForDetailShow" |
||||
|
></filterForDetailPage> |
||||
|
<!-- 导出弹窗 --> |
||||
|
<exportDrop |
||||
|
v-if="displayDialog.exportDialog" |
||||
|
@closeDialog="closeExportDrop" |
||||
|
@exportDropSubmit="exportDropSubmit" |
||||
|
></exportDrop> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { tableMixins } from "@/mixins/TableMixins"; |
||||
|
import { LoadingMixins } from "@/mixins/LoadingMixins"; |
||||
|
import { drawerMixins } from "@/mixins/drawerMixins" |
||||
|
import { TableHeaderMixins } from "@/mixins/TableHeaderMixins"; |
||||
|
import { mixins } from "@/mixins/mixins"; |
||||
|
import { filterSelectMixins } from '@/mixins/filter-Select' |
||||
|
|
||||
|
export default { |
||||
|
name: "OuterJisL7DeliverNote", |
||||
|
mixins: [ |
||||
|
tableMixins, |
||||
|
LoadingMixins, |
||||
|
drawerMixins, |
||||
|
TableHeaderMixins, |
||||
|
mixins, |
||||
|
filterSelectMixins, |
||||
|
], |
||||
|
data() { |
||||
|
return { |
||||
|
//常用按钮数据 |
||||
|
currenButtonData: [ |
||||
|
this.defaultExportBtn({ |
||||
|
isRedundance:true, |
||||
|
isDetailExport:true |
||||
|
}),//导出 |
||||
|
this.defaultFieldSettingBtn(),//字段设置 |
||||
|
this.defaultFreshBtn(),//刷新 |
||||
|
this.defaultFilterBtn(),//筛选 |
||||
|
this.defaultFilterForDetailBtn()//明细查询按钮 |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.paging(); |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
@import "@/styles/basicData.scss"; |
||||
|
</style> |
||||
@ -0,0 +1,100 @@ |
|||||
|
<template> |
||||
|
<div class="page-box" v-loading="Loading.tableLoading"> |
||||
|
<tablePagination |
||||
|
v-if="apiColumns_Table" |
||||
|
:currenButtonData="currenButtonData" |
||||
|
:tableData="tableData" |
||||
|
:tableLoading="Loading.tableLoading" |
||||
|
:tableColumns="apiColumns_Table" |
||||
|
@rowDrop="rowDrop" |
||||
|
:totalCount="totalCount" |
||||
|
:multipleSelection="multipleSelection" |
||||
|
:MaxResultCount="PageListParams.MaxResultCount" |
||||
|
@topbutton="topbutton" |
||||
|
@inlineDialog="inlineDialog" |
||||
|
@sortChange="sortChange" |
||||
|
@alertoldSkipCount="alertoldSkipCount" |
||||
|
@alterResultCount="alterResultCount" |
||||
|
@handleSelectionChange="handleSelectionChange" |
||||
|
:currentPageProps="oldSkipCount" |
||||
|
:quicklySearchOption="quicklySearchOption" |
||||
|
@quicklySearchClick="quicklySearchClick" |
||||
|
@quicklySearchClear="quicklySearchClear" |
||||
|
:primarySearchOption="primarySearchOption" |
||||
|
@overallSearchFormClick="overallSearchFormClick" |
||||
|
:httpOverallSearchData="httpOverallSearchData" |
||||
|
></tablePagination> |
||||
|
<!-- :buttonOperationList_left="buttonOperationClick_leftBase" |
||||
|
@buttonOperationClick_left="buttonOperationClick_left" --> |
||||
|
<!-- <curren-Drawer |
||||
|
ref="currenDrawer_Ref" |
||||
|
:title="apiColumns_DesTions" |
||||
|
@rowDrop="rowDrop" |
||||
|
:tableColumns="apiColumns_DetailsTable" |
||||
|
:tabsDesTions="apiColumns_DesTions" |
||||
|
:DrawerLoading="Loading.DrawerLoading" |
||||
|
:drawer="displayDialog.detailsDialog" |
||||
|
:propsData="propsData" |
||||
|
:Butttondata="[]" |
||||
|
@drawerShut="(val) => (displayDialog.detailsDialog = val)" |
||||
|
@drawerbutton="drawerbutton" |
||||
|
@handleCommand="drawerHandle" |
||||
|
@close-value="closeValue" |
||||
|
:totalCount="totalCountDetails" |
||||
|
:currentPage="oldSkipCountDetails" |
||||
|
:MaxResultCount="MaxResultCountDetails" |
||||
|
@alterResultCountDetails="alterResultCountDetails" |
||||
|
@alertoldSkipCountDetails="alertoldSkipCountDetails" |
||||
|
:buttonOperationList_left="operationButtonsDetail" |
||||
|
></curren-Drawer> --> |
||||
|
<!-- 导出弹窗 --> |
||||
|
<exportDrop |
||||
|
v-if="displayDialog.exportDialog" |
||||
|
@closeDialog="closeExportDrop" |
||||
|
@exportDropSubmit="exportDropSubmit" |
||||
|
></exportDrop> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { tableMixins } from "@/mixins/TableMixins"; |
||||
|
import { LoadingMixins } from "@/mixins/LoadingMixins"; |
||||
|
import { drawerMixins } from "@/mixins/drawerMixins" |
||||
|
import { TableHeaderMixins } from "@/mixins/TableHeaderMixins"; |
||||
|
import { newAndEdiDialogMixins } from "@/mixins/newAndEdiDialogMixins" |
||||
|
import { mixins } from "@/mixins/mixins"; |
||||
|
import { filterSelectMixins } from '@/mixins/filter-Select' |
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
name: "OuterJisL7DeliverNoteDetail", |
||||
|
mixins: [ |
||||
|
tableMixins, |
||||
|
LoadingMixins, |
||||
|
drawerMixins, |
||||
|
TableHeaderMixins, |
||||
|
mixins, |
||||
|
filterSelectMixins, |
||||
|
newAndEdiDialogMixins |
||||
|
], |
||||
|
data() { |
||||
|
return { |
||||
|
//常用按钮数据 |
||||
|
currenButtonData: [ |
||||
|
this.defaultExportBtn({ |
||||
|
isRedundance:true, |
||||
|
isDetailExport:true |
||||
|
}),//导出 |
||||
|
this.defaultFieldSettingBtn(),//字段设置 |
||||
|
this.defaultFreshBtn(),//刷新 |
||||
|
this.defaultFilterBtn(),//筛选 |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.paging(); |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
@import "@/styles/basicData.scss"; |
||||
|
</style> |
||||
Loading…
Reference in new issue