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