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

update:更新表格

上级 f237afb2
...@@ -597,10 +597,103 @@ export class GridControl extends MainControl { ...@@ -597,10 +597,103 @@ export class GridControl extends MainControl {
} }
return { 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 处理编辑器事件 * @description 处理编辑器事件
* @param {IActionParam} actionParam 行为参数 * @param {IActionParam} actionParam 行为参数
...@@ -638,11 +731,12 @@ export class GridControl extends MainControl { ...@@ -638,11 +731,12 @@ export class GridControl extends MainControl {
public moduleInstall(props: GridControlProps, emit?: Function) { public moduleInstall(props: GridControlProps, emit?: Function) {
const superParams = super.moduleInstall(props, emit); const superParams = super.moduleInstall(props, emit);
const { load } = this.useLoad(props); const { load } = this.useLoad(props);
const { custom } = this.useCustom(props);
return { return {
...superParams, ...superParams,
state: this.controlState, state: this.controlState,
load, load,
custom,
handleEditorEvent: this.handleEditorEvent.bind(this), handleEditorEvent: this.handleEditorEvent.bind(this),
handleToolbarEvent: this.handleToolbarEvent.bind(this), handleToolbarEvent: this.handleToolbarEvent.bind(this),
}; };
......
...@@ -32,76 +32,9 @@ interface CtrlEmit { ...@@ -32,76 +32,9 @@ interface CtrlEmit {
} }
const emit = defineEmits<CtrlEmit>(); const emit = defineEmits<CtrlEmit>();
// 安装功能模块,提供状态和能力方法 // 安装功能模块,提供状态和能力方法
const { state, load, handleEditorEvent, handleToolbarEvent } = new GridControl(CtrlConfig).moduleInstall(props); const { state, load, handleEditorEvent, handleToolbarEvent, custom } = new GridControl(CtrlConfig).moduleInstall(props, emit);
// 表格滚动条配置 const { scrollOption, rowKey, rowClassName, customRow, rowSelectionOption, resizeColumn, handleGridChange } = custom;
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();
}
</script> </script>
<template> <template>
<a-table <a-table
...@@ -110,7 +43,7 @@ const handleChange = (pagination: IParam, filters: IParam, sorter: IParam, data: ...@@ -110,7 +43,7 @@ const handleChange = (pagination: IParam, filters: IParam, sorter: IParam, data:
class="ibiz-grid{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}" class="ibiz-grid{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}"
:rowKey="rowKey" :rowKey="rowKey"
:showHeader="{{#if ctrl.hideHeader}}false{{else}}true{{/if}}" :showHeader="{{#if ctrl.hideHeader}}false{{else}}true{{/if}}"
:scroll="gridScrollOption" :scroll="scrollOption"
:sortDirections="['ascend', 'descend']" :sortDirections="['ascend', 'descend']"
:data-source="state.data" :data-source="state.data"
:row-selection="rowSelectionOption" :row-selection="rowSelectionOption"
...@@ -118,8 +51,8 @@ const handleChange = (pagination: IParam, filters: IParam, sorter: IParam, data: ...@@ -118,8 +51,8 @@ const handleChange = (pagination: IParam, filters: IParam, sorter: IParam, data:
:pagination="state.gridPaging.pagination" :pagination="state.gridPaging.pagination"
:customRow="customRow" :customRow="customRow"
:rowClassName="rowClassName" :rowClassName="rowClassName"
@change="handleChange" @change="handleGridChange"
@resizeColumn="handleResizeColumn"> @resizeColumn="resizeColumn">
<template #emptyText> <template #emptyText>
<div class="not-data"> <div class="not-data">
<span class="empty-text"> <span class="empty-text">
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册