Skip to content
项目
群组
代码片段
帮助
正在加载...
帮助
提交反馈
为 GitLab 提交贡献
登录
切换导航
I
ibizlab-generator
项目
项目
详情
动态
版本
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
计划
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
统计图
创建新议题
作业
提交
议题看板
打开侧边栏
ibiz4jteam
ibizlab-generator
提交
7329c625
提交
7329c625
编写于
1月 04, 2022
作者:
Shine-zwj
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update:更新表格
上级
f237afb2
变更
2
显示空白字符变更
内嵌
并排
正在显示
2 个修改的文件
包含
102 行增加
和
75 行删除
+102
-75
grid-control.ts
...rc/ibiz-core/modules/widgets/grid-control/grid-control.ts
+96
-2
{{ctrls@GRID}}-grid.vue.hbs
...ntities}}/{{ctrls@GRID}}-grid/{{ctrls@GRID}}-grid.vue.hbs
+6
-73
未找到文件。
modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/ibiz-core/modules/widgets/grid-control/grid-control.ts
浏览文件 @
7329c625
...
...
@@ -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
),
};
...
...
modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/widgets/{{appEntities}}/{{ctrls@GRID}}-grid/{{ctrls@GRID}}-grid.vue.hbs
浏览文件 @
7329c625
...
...
@@ -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=
"
gridS
crollOption"
:scroll=
"
s
crollOption"
: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=
"
handleR
esizeColumn"
>
@
change=
"handle
Grid
Change"
@
resizeColumn=
"
r
esizeColumn"
>
<template
#
emptyText
>
<div
class=
"not-data"
>
<span
class=
"empty-text"
>
...
...
编辑
预览
Markdown
格式
0%
请重试
or
添加新附件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
先完成此消息的编辑!
取消
想要评论请
注册
或
登录