提交 c772e4e1 编写于 作者: Mosher's avatar Mosher

update:更新表格支持批操作工具栏

上级 58356594
.app-grid-batchtoolbar-container {
display: flex;
height: 100%;
}
.app-grid-batchtoolbar {
position: absolute;
left: 0;
.toolbar-buttons {
height: 100%;
}
}
.app-grid-batchtoolbar.toolbar .toolbar-buttons .ant-space-item {
padding: 0 6px;
height: 100%;
&:first-child {
padding-left: 0;
}
}
\ No newline at end of file
......@@ -4,4 +4,5 @@
@use './app-tree-exp-bar.scss';
@use './app-tab-exp-panel.scss';
@use './app-tab-view-panel.scss';
@use './app-portlet.scss';
\ No newline at end of file
@use './app-portlet.scss';
@use './app-grid.scss';
\ No newline at end of file
{{>@macro/front-end/widgets/grid-detail/include-grid.hbs}}
<script setup lang="ts">
import { Subject } from 'rxjs';
import { ctrlState } from './{{spinalCase ctrl.codeName}}-grid-state';
import { GridControl, IActionParam, IParam, IContext, ControlAction, deepCopy } from '@core';
{{#if ctrl.batchToolBarItems}}
import AppToolbar from '@components/common/app-toolbar.vue';
{{/if}}
interface Props {
name:string,
......@@ -39,6 +41,22 @@ const emit = defineEmits<CtrlEmit>();
// 安装功能模块,提供状态和能力
const { name, state, useCustom, onEditorEvent, onToolbarEvent, onActionColEvent, newRow, remove, save, load, refresh, getData } = new GridControl(ctrlState, props, emit).moduleInstall();
const { useScrollOption, useRowKey, useRowClassName, useCustomRow, useRowSelectionOption, onResizeColumn, onGridChange } = useCustom;
{{#if ctrl.batchToolBarItems}}
const renderBatchToolbar = (total: number, range: IParam[]) => {
return (
h('div', { class: 'app-grid-batchtoolbar-container' }, [
h(AppToolbar, {
mode: 'button',
class: 'app-grid-batchtoolbar',
name: '{{ctrl.batchToolBarName}}',
actionModel: state.batchToolbar,
onOnToolbarEvent: (event: any) => onToolbarEvent(event)
}),
`显示 ${range[0]} - ${range[1]} 条数据,共 ${total} 条数据`
])
)
}
{{/if}}
// 暴露内部状态及能力
defineExpose({ name, state, newRow, remove, save, load, refresh, getData });
......@@ -56,7 +74,15 @@ defineExpose({ name, state, newRow, remove, save, load, refresh, getData });
:data-source="state.items"
:row-selection="useRowSelectionOption"
:columns="state.columnsModel"
{{#if ctrl.batchToolBarItems}}
:pagination="Object.assign(state.mdCtrlPaging.pagination, {
showTotal: (total, range) => {
return renderBatchToolbar(total, range);
}
})"
{{else}}
:pagination="state.mdCtrlPaging.pagination"
{{/if}}
:customRow="useCustomRow"
:rowClassName="useRowClassName"
@change="onGridChange"
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册