提交 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 @@ ...@@ -4,4 +4,5 @@
@use './app-tree-exp-bar.scss'; @use './app-tree-exp-bar.scss';
@use './app-tab-exp-panel.scss'; @use './app-tab-exp-panel.scss';
@use './app-tab-view-panel.scss'; @use './app-tab-view-panel.scss';
@use './app-portlet.scss'; @use './app-portlet.scss';
\ No newline at end of file @use './app-grid.scss';
\ No newline at end of file
{{>@macro/front-end/widgets/grid-detail/include-grid.hbs}}
<script setup lang="ts"> <script setup lang="ts">
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { ctrlState } from './{{spinalCase ctrl.codeName}}-grid-state'; import { ctrlState } from './{{spinalCase ctrl.codeName}}-grid-state';
import { GridControl, IActionParam, IParam, IContext, ControlAction, deepCopy } from '@core'; import { GridControl, IActionParam, IParam, IContext, ControlAction, deepCopy } from '@core';
{{#if ctrl.batchToolBarItems}}
import AppToolbar from '@components/common/app-toolbar.vue';
{{/if}}
interface Props { interface Props {
name:string, name:string,
...@@ -39,6 +41,22 @@ const emit = defineEmits<CtrlEmit>(); ...@@ -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 { 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; 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 }); defineExpose({ name, state, newRow, remove, save, load, refresh, getData });
...@@ -56,7 +74,15 @@ 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" :data-source="state.items"
:row-selection="useRowSelectionOption" :row-selection="useRowSelectionOption"
:columns="state.columnsModel" :columns="state.columnsModel"
{{#if ctrl.batchToolBarItems}}
:pagination="Object.assign(state.mdCtrlPaging.pagination, {
showTotal: (total, range) => {
return renderBatchToolbar(total, range);
}
})"
{{else}}
:pagination="state.mdCtrlPaging.pagination" :pagination="state.mdCtrlPaging.pagination"
{{/if}}
:customRow="useCustomRow" :customRow="useCustomRow"
:rowClassName="useRowClassName" :rowClassName="useRowClassName"
@change="onGridChange" @change="onGridChange"
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册