提交 7329c625 编写于 作者: Shine-zwj's avatar Shine-zwj

update:更新表格

上级 f237afb2
......@@ -597,10 +597,103 @@ export class GridControl extends MainControl {
}
return {
remove: newRow,
newRow: newRow,
};
}
/**
* @description 使用自定义模块(蚂蚁金服UI自定义)
* @param {GridControlProps} props
* @memberof GridControl
*/
public useCustom(props: GridControlProps) {
const { controlName, selectFirstDefault, rowEditState, rowActiveMode } = this.controlState;
const selectedRowKeysRef = toRef(this.controlState, "selectedRowKeys");
const gridPagingRef = toRef(this.controlState, "gridPaging");
let { current, pageSize } = gridPagingRef.value;
// 滚动条配置
const scrollOption = computed(() => {
return {
scrollToFirstRowOnChange: true,
x: '110%',
y: '690px',
}
});
// 指定表格行key
const rowKey = (record: IParam) => {
return record.srfkey;
}
// 表格行样式
const rowClassName = (record: IParam, index: number) => {
return index % 2 === 1 ? "table-striped" : null;
}
// 表格行自定义
const customRow = (record: IParam, index: number) => {
return {
onClick: () => {
if (!rowEditState) {
selectedRowKeysRef.value = [record.srfkey];
if (!record.children) {
this.emit("ctrlEvent",{ tag: controlName, action: "selectionChange", data: [deepCopy(record)] })
if (Object.is(rowActiveMode, 1)) {
this.emit("ctrlEvent",{ tag: controlName, action: "rowClick", data: [deepCopy(record)] })
}
}
}
},
onDblclick: () => {
if (!record.children && Object.is(rowActiveMode, 2)) {
this.emit("ctrlEvent",{ tag: controlName, action: "rowDbClick", data: [deepCopy(record)] })
}
}
};
}
// 表格选择功能配置
const rowSelectionOption = computed(() => {
if (selectFirstDefault) {
return false;
}
return {
columnWidth: 90,
selectedRowKeys: selectedRowKeysRef.value,
checkStrictly: props.multiple ? false : true,
onChange: (selectedRowKeys: string[], selectedRows: IParam[]) => {
selectedRowKeysRef.value = selectedRowKeys;
const selection: IParam[] = [];
selectedRows.forEach((select: IParam) => {
if (!select.children) {
selection.push(select);
}
})
this.emit("ctrlEvent",{ tag: controlName, action: "selectionChange", data: selection })
},
};
});
// 列拖动
const resizeColumn = (width: number, column: IParam) => {
column.width = width;
}
// 处理表格变化(分页,过滤,排序)
const handleGridChange = (pagination: IParam, filters: IParam, sorter: IParam, data: IParam) => {
if (pagination) {
current = pagination.current;
pageSize = pagination.pageSize;
this.useLoad(props).load();
}
}
return {
custom: {
scrollOption,
rowKey,
rowClassName,
customRow,
rowSelectionOption,
resizeColumn,
handleGridChange,
}
}
}
/**
* @description 处理编辑器事件
* @param {IActionParam} actionParam 行为参数
......@@ -638,11 +731,12 @@ export class GridControl extends MainControl {
public moduleInstall(props: GridControlProps, emit?: Function) {
const superParams = super.moduleInstall(props, emit);
const { load } = this.useLoad(props);
const { custom } = this.useCustom(props);
return {
...superParams,
state: this.controlState,
load,
custom,
handleEditorEvent: this.handleEditorEvent.bind(this),
handleToolbarEvent: this.handleToolbarEvent.bind(this),
};
......
......@@ -32,76 +32,9 @@ interface CtrlEmit {
}
const emit = defineEmits<CtrlEmit>();
// 安装功能模块,提供状态和能力方法
const { state, load, handleEditorEvent, handleToolbarEvent } = new GridControl(CtrlConfig).moduleInstall(props);
// 表格滚动条配置
const gridScrollOption = computed(() => {
return {
scrollToFirstRowOnChange: true,
x: '110%',
y: '690px',
}
});
// 表格行key
const rowKey = (record: IParam) => {
return record.srfkey;
}
// 表格行样式(斑马纹)
const rowClassName = (record: IParam, index: number) => {
return index % 2 === 1 ? "table-striped" : null;
}
// 表格行选中
const customRow = (record: IParam, index: number) => {
return {
onClick: () => {
if (!props.rowEditState) {
state.selectedRowKeys = [record.srfkey];
if (!record.children) {
emit("ctrlEvent",{ tag: state.controlName, action: "selectionChange", data: [deepCopy(record)] })
if (Object.is(props.rowActiveMode, 1)) {
emit("ctrlEvent",{ tag: state.controlName, action: "rowClick", data: [deepCopy(record)] })
}
}
}
},
onDblclick: () => {
if (!record.children && Object.is(props.rowActiveMode, 2)) {
emit("ctrlEvent",{ tag: state.controlName, action: "rowDbClick", data: [deepCopy(record)] })
}
}
};
}
// 表格选择功能配置
const rowSelectionOption = computed(() => {
if (props.selectFirstDefault) {
return false;
}
return {
columnWidth: {{#neq ctrl.aggMode 'NONE'}}90{{else}}50{{/neq}},
selectedRowKeys: state.selectedRowKeys,
checkStrictly: props.multiple ? false : true,
onChange: (selectedRowKeys: string[], selectedRows: IParam[]) => {
state.selectedRowKeys = selectedRowKeys;
const selection: IParam[] = [];
selectedRows.forEach((select: IParam) => {
if (!select.children) {
selection.push(select);
}
})
emit("ctrlEvent",{ tag: state.controlName, action: "selectionChange", data: selection })
},
};
});
// 处理拖动列
const handleResizeColumn = (width: number, column: IParam) => {
column.width = width;
}
// 处理表格变化(分页,过滤,排序)
const handleChange = (pagination: IParam, filters: IParam, sorter: IParam, data: IParam) => {
const { current, pageSize } = pagination;
state.current = current;
state.pageSize = pageSize;
load();
}
const { state, load, handleEditorEvent, handleToolbarEvent, custom } = new GridControl(CtrlConfig).moduleInstall(props, emit);
const { scrollOption, rowKey, rowClassName, customRow, rowSelectionOption, resizeColumn, handleGridChange } = custom;
</script>
<template>
<a-table
......@@ -110,7 +43,7 @@ const handleChange = (pagination: IParam, filters: IParam, sorter: IParam, data:
class="ibiz-grid{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}"
:rowKey="rowKey"
:showHeader="{{#if ctrl.hideHeader}}false{{else}}true{{/if}}"
:scroll="gridScrollOption"
:scroll="scrollOption"
:sortDirections="['ascend', 'descend']"
:data-source="state.data"
:row-selection="rowSelectionOption"
......@@ -118,8 +51,8 @@ const handleChange = (pagination: IParam, filters: IParam, sorter: IParam, data:
:pagination="state.gridPaging.pagination"
:customRow="customRow"
:rowClassName="rowClassName"
@change="handleChange"
@resizeColumn="handleResizeColumn">
@change="handleGridChange"
@resizeColumn="resizeColumn">
<template #emptyText>
<div class="not-data">
<span class="empty-text">
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册