子组件代码
<template>
<section style=" 100%;height: 100%">
<div>
<!-- <input type="text" placeholder="请输入要搜索的内容" v-model="searchText"> -->
</div>
<ag-grid-vue
:bodyScroll="bodyScroll"
:cellMouseOver="cellMouseOver"
:rowDataChanged="rowDataChanged"
:editType="gridParameter.editType || 'fullRow'"
:suppressClickEdit="gridParameter.suppressClickEdit"
:suppressRowClickSelection="gridParameter.suppressRowClickSelection"
:suppressCellSelection="gridParameter.suppressCellSelection"
:class="gridParameter.themeName || 'ag-theme-balham'"
:headerHeight="gridParameter.headerHeight"
:floatingFilter="gridParameter.floatingFilter"
:style="gridParameter.style"
:columnDefs="gridParameter.columnDefs"
:rowData="gridParameter.rowData"
:rowHeight="gridParameter.rowHeight"
:rowSelection="gridParameter.rowSelection"
:defaultColDef="gridParameter.defaultColDef"
:gridOptions="gridOptions"
:cellClicked="onCellClicked"
:cellValueChanged="cellValueChanged"
:cellEditingStarted="cellEditingStarted"
:cellEditingStopped="cellEditingStopped"
:rowDoubleClicked="rowDoubleClicked"
:rowClicked="rowClicked"
:onGridReady="onGridReady"
:columnMoved="columnMoved"
:rowSelected="rowSelected"
:rowValueChanged="rowValueChanged"
:components="gridParameter.components"
@editClick="editClick"
:isRowSelectable="gridParameter.isRowSelectable"
:frameworkComponents="frameworkComponents"
></ag-grid-vue>
<pg v-if="showPaged"></pg>
<!-- <button @click="edit">edit</button>
<button @click="stopEdit">top edit</button>-->
</section>
</template>
<script>
import { AgGridVue } from "ag-grid-vue";
import "ag-grid-enterprise";
import { mapGetters } from "vuex";
import pg from "./Pagina/index";
import { getCookies } from "@/utils/auth";
// import demo from "./demo/index";
export default {
props: [
"gridParameter",
"searchText",
"getRowNodes",
"showPaged",
"roleGrid",
"peopleGrid",
"userRowClick",
"frameworkComponents",
"cellMouseOver1",
],
name: "App",
components: {
AgGridVue,
pg,
// GridEditButtons: demo,
},
computed: {
...mapGetters(["columnSaveState", "now_page"]),
},
data() {
return {
gridStyleKey: "",
gridApi: "",
columnApi: "",
selectdNodes: [],
gridOptions: {
// defaultColDef: {
// // allow every column to be aggregated
// enableValue: true,
// // allow every column to be grouped
// enableRowGroup: true,
// // allow every column to be pivoted
// enablePivot: true,
// editable: true // 开启网格编辑功能
// },
// editable: false, // 开启网格编辑功能
// rowSelection: 'multiple',
// treeData: true, // 树数据结构
// editType: 'fullRow', // 开启整行编辑
enableSorting: true, // 开启排序功能
enableFilter: true, // 开启过滤功能
enableColResize: true, // 开启调整列宽
showToolPanel: false, // 展开功能面板
contractColumnSelection: true, // 默认不展开tree
toolPanelSuppressRowGroups: true,
toolPanelSuppressSideButtons: true, // 禁止选项面板功能
// toolPanelSuppressValues: false,
// toolPanelSuppressPivots: false,
toolPanelSuppressPivotMode: true,
// suppressClickEdit: true, // 禁用双击网格编辑
// toolPanelSuppressColumnFilter: true,
// toolPanelSuppressColumnSelectAll: true,
// toolPanelSuppressColumnExpandAll: true,
// pagination: true, // 开启分页器
// rowGroupPanelShow: 'always', // 表格顶部栏
// enableRowGroup: true,
// enablePivot: true,
// enableStatusBar: true, // 开启状态栏
// paginationPageSize: 500, // 分页器每页显示的条数
// enableRangeSelection: true,// 开启拖动选择网格
// groupHeaders: true, // 使用组标题
rowDragManaged: true, // 设置行拖动 需要在表格其中一个列 设置rowDrag:true
animateRows: true, // 拖动动画效果
// rowMultiSelectWithClick: true,
stopEditingWhenGridLosesFocus: true, // 在网格失去焦点时停止单元格编辑
// singleClickEdit: true,
localeText: {
// 国际化
// for filter panel
page: "当前页",
more: "更多",
to: "至",
of: "总数",
next: "下一页",
last: "上一页",
first: "首页",
previous: "上一页",
loadingOoo: "加载中...",
// for set filter
selectAll: "全选",
searchOoo: "请输入关键字...",
blanks: "空白",
// for number filter and text filter
filterOoo: "过滤...",
applyFilter: "daApplyFilter...",
// for number filter
equals: "相等",
notEqual: "不相等",
lessThan: "小于",
greaterThan: "大于",
lessThanOrEqual: "小于等于",
greaterThanOrEqual: "大于等于",
inRange: "范围",
contains: "包含",
notContains: "不包含",
startsWith: "开始于",
endsWith: "结束于",
// the header of the default group column
group: "组",
// tool panel
columns: "列选项",
rowGroupColumns: "laPivot Cols",
rowGroupColumnsEmptyMessage: "拖拽组到这里",
valueColumns: "laValue Cols",
pivotMode: "枢轴模式",
groups: "laGroups",
values: "laValues",
pivots: "laPivots",
valueColumnsEmptyMessage: "la drag cols to aggregate",
pivotColumnsEmptyMessage: "la drag here to pivot",
// other
noRowsToShow: "无数据",
// enterprise menu
pinColumn: "固定列",
valueAggregation: "laValue Agg",
autosizeThiscolumn: "自动调整当前网格宽度",
autosizeAllColumns: "自动调整当前页所有网格宽度",
groupBy: "排序",
ungroupBy: "不排序",
resetColumns: "恢复网格样式",
expandAll: "展开全部",
collapseAll: "关闭",
toolPanel: "显示/隐藏控制表盘",
export: "导出到...",
csvExport: "导出CSV",
excelExport: "导出Excel",
// enterprise menu pinning
pinLeft: "<<锁定至表格左侧",
pinRight: ">>锁定至表格右侧",
noPin: "<>取消锁定",
// enterprise menu aggregation and status panel
sum: "总数",
min: "最小值",
max: "最大值",
none: "无",
count: "总",
average: "平均",
// standard menu
copy: "复制",
copyWithHeaders: "复制内容及标题",
ctrlC: "ctrl + C",
paste: "粘贴",
ctrlV: "ctrl + V",
},
},
};
},
watch: {
searchText(val) {
this.onFilterTextBoxChanged();
},
},
mounted() {
const corpCode = getCookies("corpCode");
const loginCode = getCookies("loginCode");
const now_page = this.now_page;
this.gridStyleKey = `${corpCode}_${loginCode}_${now_page}`;
},
methods: {
onGridReady(event) {
// 表格加载完成事件
this.gridApi = event.api;
this.columnApi = event.columnApi;
// event.api.sizeColumnsToFit()
// event.columnApi.autoSizeColumns()
if (!event.api.getModel()) {
// 所有列展示在当前表格页面
const allColumnIds = event.columnApi.getAllColumns();
// event.api.sizeColumnsToFit()
this.$emit("onGridReady", event);
// this.gridApi.sizeColumnsToFit();
event.columnApi.autoSizeColumns(allColumnIds);
}
},
rowDataChanged(event) {
// event.api.sizeColumnsToFit()// 所有列展示在当前表格页面
// const allColumnIds = event.columnApi.getAllColumns()
// var b =
// .forEach(function(column) {
// allColumnIds.push(column.colId)
// })
// event.columnApi.autoSizeColumns(allColumnIds)// 自动调整所有列宽
},
onCellClicked(event) {
// 每个格子的点击事件
this.$store.dispatch("onCellClicked", event.value);
this.$store.commit("GET_CELL_EVENT", event);
this.$emit("cellClick", event);
this.$emit("onCellClicked", event);
if (sessionStorage.getItem("orderStatus") === "ddfcwc") {
this.gridOptions.suppressClickEdit = true;
} else {
this.gridOptions.suppressClickEdit = false;
}
},
cellValueChanged(event) {
// 网格内容更改事件
// this.$store.commit('GET_CELL_EVENT', event)
this.$emit("changedValue", event);
this.$emit("cellValueChanged", event);
},
rowDoubleClicked(event) {
this.$emit("rowDoubleClicked", event);
// 双击行 事件
//
this.$store.commit("SAVE_GRID_DIRECTING", this.$attrs.id);
this.$store.commit("GET_DOUBLE_CLICKED_EVENT", event);
},
rowClicked(event) {
// 单击行 事件
this.$emit("rowClicked", event);
this.$store.commit("SAVE_GRID_DIRECTING", this.$attrs.id);
if (this.roleGrid) {
this.$store.commit("GRID_CLICK_ROW", event.data);
this.$emit("gridClick");
} else if (this.peopleGrid) {
return;
} else {
this.$store.commit("GRID_CLICK_ROW", event.data);
this.$emit("gridClick");
}
},
columnMoved(event) {
// 列移动事件
this.$emit("columnMoved", event);
},
saveState(value) {
if (value) {
// 保存表格样式
const columnSendState = {
colState: this.gridOptions.columnApi.getColumnState(),
groupState: this.gridOptions.columnApi.getColumnGroupState(),
sortState: this.gridOptions.api.getSortModel(),
filterState: this.gridOptions.api.getFilterModel(),
};
// this.$store.dispatch('saveGridColumnState', columnSendState)
localStorage.setItem(
`${this.gridStyleKey}_${value}`,
JSON.stringify(columnSendState)
);
const saveGridStyle = {
url: "/tableStyle/save",
method: "post",
params: {
key: `${this.gridStyleKey}_${value}`,
value: JSON.stringify(columnSendState),
},
};
this.$store.dispatch("get_to_do_tasks", saveGridStyle).then((res) => {
// 待办项目
//
if (res.success) {
this.$message({
type: "success",
message: "表格样式保存成功",
});
}
});
}
},
reset(value) {
if (!value) {
return false;
}
// 恢复自定义表格样式
var columnSaveState = JSON.parse(
localStorage.getItem(`${this.gridStyleKey}_${value}`)
);
if (columnSaveState) {
this.gridOptions.columnApi.setColumnState(columnSaveState.colState);
this.gridOptions.columnApi.setColumnGroupState(
columnSaveState.groupState
);
this.gridOptions.api.setSortModel(columnSaveState.sortState);
this.gridOptions.api.setFilterModel(columnSaveState.filterState);
} else {
const getGridStyle = {
url: "/tableStyle/get",
method: "post",
params: {
key: `${this.gridStyleKey}_${value}`,
},
};
this.$store.dispatch("get_to_do_tasks", getGridStyle).then((res) => {
// 待办项目
if (res.data) {
columnSaveState = JSON.parse(res.data.value);
if (columnSaveState) {
this.gridOptions.columnApi.setColumnState(
columnSaveState.colState
);
this.gridOptions.columnApi.setColumnGroupState(
columnSaveState.groupState
);
this.gridOptions.api.setSortModel(columnSaveState.sortState);
this.gridOptions.api.setFilterModel(columnSaveState.filterState);
// this.saveState(value)
}
}
});
}
},
restore() {
// 恢复表格默认样式
this.gridOptions.columnApi.resetColumnState();
this.gridOptions.columnApi.resetColumnGroupState();
this.gridOptions.api.setSortModel(null);
this.gridOptions.api.setFilterModel(null);
},
onFilterTextBoxChanged() {
//
this.gridOptions.api.setQuickFilter(this.searchText);
},
edit(index, key) {
// this.gridOptions.api.setRowData()
this.gridOptions.api.setFocusedCell(index, key); // 定位焦点
this.gridOptions.api.startEditingCell({
// 开始编辑加点行
rowIndex: index,
colKey: key,
});
},
stopEdit(event) {
this.gridOptions.api.stopEditing();
},
cellEditingStarted(event) {
// cell开始编辑
this.$emit("cellEditingStarted", event);
},
cellEditingStopped(event) {
// cell开始编辑
this.$emit("cellEditingStopped", event);
},
rowValueChanged(event) {
// 行内的值发生变化
this.$store.commit("ROW_VALUE_CHANGED_DATA", event.data);
this.$emit("childRowchanged", event);
this.$emit("rowValueChanged", event);
},
isFirstColumn(params) {
// var displayedColumns = this.gridOptions.columnApi.getAllDisplayedColumns()
// var thisIsFirstColumn = displayedColumns[0] === this.gridOptions.column
// return thisIsFirstColumn
},
addNewRow() {},
rowSelected(params) {
// row选择事件回调
const selectdNodes = params.api.getSelectedNodes();
const id = this.$el.id;
selectdNodes.gridId = id;
this.selectdNodes = selectdNodes;
// console.log("selectdNodes");
// console.log(selectdNodes);
this.$store.commit("GRID_SELECT_ROW", selectdNodes);
this.$emit("rowSelected", params);
},
bodyScroll(event) {
this.$emit("bodyScroll", event);
// if (event.direction === 'horizontal' && event.left % 300 === 0) {
// event.columnApi.autoSizeColumns()
// var allColumnIds = []
// event.columnApi.getAllColumns().forEach(function(column) {
// allColumnIds.push(column.colId)
// })
// event.columnApi.autoSizeColumns(allColumnIds)// 自动调整所有列宽
// }
},
cellMouseOver(event) {
this.$emit("cellMouseOver1", event);
},
editClick(event) {
// console.log(123);
// console.log(event);
},
},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
父组件调用
<ag-grid :gridParameter="gridParameter" :searchText="searchInput"></ag-grid>
import agGrid from "@/components/AgGrid/index.vue";
components: {
agGrid,
},
gridParameter: {
style: {
//表格样式
height: "calc(100% - 165px)",
"100%",
},
columnDefs: [
//每列
{
headerName: "数据来源",
field: "sourceFrom",
120,
},
{
headerName: "公司名称",
field: "companyname",
150,
},
{
headerName: "网点名",
field: "netsite",
100,
},
{
headerName: "车辆线路起点",
field: "bsite",
120,
},
{
headerName: "车辆线路终点",
field: "esite",
120,
},
{
headerName: "装车时间",
field: "loadingTime",
100,
},
{
headerName: "实际发车时间",
field: "sendtime",
120,
},
{
headerName: "车牌号",
field: "carnumber",
100,
},
{
headerName: "挂车牌号",
field: "trailernumer",
100,
},
{
headerName: "司机手机号",
field: "drivertel",
100,
},
{
headerName: "装车件数",
field: "orderCount",
100,
},
{
headerName: "总件数",
field: "qty",
100,
},
{
headerName: "重量",
field: "weight",
100,
},
{
headerName: "体积",
field: "vol",
100,
},
{
headerName: "运输费合计",
field: "transfee",
100,
},
{
headerName: "批次状态",
field: "batchState",
100,
},
{
headerName: "托运单号",
field: "billNo",
100,
},
{
headerName: "发车批次",
field: "batchNo",
100,
},
{
headerName: "网点地址（省）",
field: "netProvince",
150,
},
{
headerName: "网点地址（市）",
field: "netCity",
150,
},
{
headerName: "网点地址（区）",
field: "netDistrict",
150,
},
{
headerName: "到达时间",
field: "arrivedTime",
100,
},
{
headerName: "实际运费",
field: "actualFreight",
100,
},
{
headerName: "单车毛利",
field: "profit",
100,
},
{
headerName: "现付运输费",
field: "handTransitFee",
100,
},
{
headerName: "现付油卡费",
field: "handCardFee",
100,
},
{
headerName: "回车运输费",
field: "retTransitFee",
100,
},
{
headerName: "整车信息费",
field: "vehicleInfoFee",
100,
},
{
headerName: "到付油卡费",
field: "payCardFee",
100,
},
{
headerName: "车辆核载",
field: "vehicleBorne",
100,
},
{
headerName: "原始单号",
field: "originalDocumentNumber",
100,
},
{
headerName: "统一社会信用代码",
field: "socialCreditIdentifier",
150,
},
{
headerName: "许可证编号",
field: "permitNumber",
100,
},
{
headerName: "业务类型代码",
field: "businesstypeCode",
120,
},
{
headerName: "发运实际日期",
field: "goodsReceiptdatetime",
120,
},
{
headerName: "发货人",
field: "consignor",
100,
},
{
headerName: "发货人个人证件号",
field: "rpersonalIdentity",
150,
},
{
headerName: "发货方-国家行政区划代码",
field: "rcountrySubdivisioncode",
180,
},
{
headerName: "收货人",
field: "consignee",
100,
},
{
headerName: "收货方-国家行政区划代码",
field: "ecountrySubdivisioncode",
180,
},
{
headerName: "牌照类型代码",
field: "licenseplatetypecode",
120,
},
{
headerName: "车辆分类代码",
field: "vehicleClassificationCode",
120,
},
{
headerName: "道路运输证号",
field: "roadtranscertnumber",
120,
},
{
headerName: "所有人",
field: "owner",
100,
},
{
headerName: "姓名",
field: "nameofperson",
100,
},
{
headerName: "从业资格证号",
field: "quaCertNumber",
100,
},
{
headerName: "货物名称",
field: "descriptionofgoods",
100,
},
{
headerName: "货物类型分类代码",
field: "cargotypeClassCode",
150,
},
],
isRowSelectable: function (rowNode) {
return rowNode.data ? rowNode.data.roleCode != "sysAdmin" : false;
},
defaultColDef: {
singleClickEdit: true,
editable: false, // 开启网格编辑功能
headerCheckboxSelection: function (params) {
var displayedColumns = params.columnApi.getAllDisplayedColumns();
var thisIsFirstColumn = displayedColumns[0] === params.column;
return thisIsFirstColumn;
},
checkboxSelection: function (params) {
var displayedColumns = params.columnApi.getAllDisplayedColumns();
var thisIsFirstColumn = displayedColumns[0] === params.column;
return thisIsFirstColumn;
},
},
// 后端数据
rowData: [],
},
备注:
gridOption:表格配置
columnDefs:表格列设置
rowData:表格数据