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

update:表格更新

上级 c294f574
{
title: "{{item.caption}}",
{{#if item.widthUnit 'PX'}}
width: "{{item.width}}px",
{{else}}
minWidth: "{{item.width}}px",
{{/if}}
{{#neq lastColumn true}}
{{#if item.widthUnit 'PX'}}
width: {{item.width}},
{{else}}
minWidth: {{item.width}},
{{/if}}
resizable: true,
{{/neq}}
{{#eq item.columnType 'GROUPGRIDCOLUMN'}}
children: [
{{#each item.pSDEGridColumns as | column |}}
{{>(lookup 'COLUMNMODEL') item=column}}
{{>(lookup 'COLUMNMODEL') item=column}}
{{/each}}
],
{{else}}
dataIndex: "{{item.codeName}}",
ellipsis: true,
{{/eq}}
},
{{#neq item.columnType 'GROUPGRIDCOLUMN'}}
<div v-if="column.dataIndex === '{{item.codeName}}'" class="table-cell">
{{!-- 数据列 --}}
{{#eq item.columnType 'DEFGRIDCOLUMN'}}
{{!-- 是否可编辑 --}}
{{#if ctrl.enableRowEdit . item.enableRowEdit}}
{{#if item.enableRowEdit}}
<div v-if="state.rowEditState" class="editor-cell">
{{#each ctrl.pSDEGridEditItems as | editColumn | }}
{{#eq editColumn.codeName . item.codeName}}
......@@ -14,11 +13,11 @@
{{/each}}
</div>
<div v-else class="text-cell">
\{{text}}
<span class="text">\{{text}}</span>
</div>
{{else}}
<div class="text-cell">
\{{text}}
<span class="text">\{{text}}</span>
</div>
{{/if}}
{{/eq}}
......@@ -30,3 +29,4 @@
:viewParams="state.viewParams"/> --}}
{{/eq}}
</div>
{{/neq}}
{{#eq item.columnType 'GROUPGRIDCOLUMN'}}
{{#each item.pSDEGridColumns as | column |}}
{{>(lookup 'SUMMARYCOLUMN') item=column ctrl=ctrl}}
{{/each}}
{{else}}
<a-table-summary-cell>\{{state.dataAgg}}</a-table-summary-cell>
{{/eq}}
{{#*inline "COLUMN"}}{{>@macro/grid-detail/grid-column.hbs}}{{/inline}}
{{#*inline "COLUMNMODEL"}}{{>@macro/grid-detail/grid-column-model.hbs}}{{/inline}}
\ No newline at end of file
{{#*inline "COLUMNMODEL"}}{{>@macro/grid-detail/grid-column-model.hbs}}{{/inline}}
{{#*inline "SUMMARYCOLUMN"}}{{>@macro/grid-detail/grid-summary-column.hbs}}{{/inline}}
\ No newline at end of file
......@@ -70,4 +70,74 @@ export interface GridControlState extends MainControlState {
* @memberof GridControlState
*/
selectFirstDefault: boolean;
/**
* @description 数据总条数
* @type {number}
* @memberof GridControlState
*/
total: number;
/**
* @description 是否启用分页
* @type {boolean}
* @memberof GridControlState
*/
enablePagingBar: boolean;
/**
* @description 数据聚合
* @type {IParam}
* @memberof GridControlState
*/
dataAgg: IParam;
/**
* @description 聚合模式
* @type {string}
* @memberof GridControlState
*/
aggMode: string;
/**
* @description 分组模式
* @type {string}
* @memberof GridControlState
*/
groupMode: string;
/**
* @description 分组属性
* @type {string}
* @memberof GridControlState
*/
groupField: string;
/**
* @description 分组代码表
* @type {*}
* @memberof GridControlState
*/
groupCodeList: any;
/**
* @description 禁用排序
* @type {boolean}
* @memberof GridControlState
*/
noSort: boolean;
/**
* @description 排序方向
* @type {string}
* @memberof GridControlState
*/
minorSortDir: string;
/**
* @description 排序属性
* @type {string}
* @memberof GridControlState
*/
minorSortPSDEF: string;
}
{{>@macro/grid-detail/include-grid.hbs}}
import { IParam } from '@ibiz-core';
export const CtrlConfig = {
controlCodeName: '{{ctrl.codeName}}',
controlName: '{{ctrl.name}}',
controlCodeName: "{{ctrl.codeName}}",
controlName: "{{ctrl.name}}",
items: [],
total: 0,
aggMode: "{{ctrl.aggMode}}",
groupMode: "{{ctrl.groupMode}}",
groupField: "{{ctrl.groupPSAppDEField.codeName}}",
{{#if ctrl.groupPSCodeList}}
groupCodeList: {
codeListTag: "{{ctrl.groupPSCodeList.codeName}}",
codeListType: "{{ctrl.groupPSCodeList.codeListType}}",
},
{{/if}}
{{#if ctrl.noSort}}
noSort: true,
{{else}}
noSort: false,
minorSortDir: "{{#if ctrl.minorSortDir}}{{ctrl.minorSortDir}}{{else}}ASC{{/if}}",
minorSortPSDEF: "{{ctrl.minorSortPSAppDEField.codeName}}",
{{/if}}
{{#if ctrl.enablePagingBar}}
enablePagingBar: true,
pagination: {
position: ['bottomRight'],
defaultPageSize: {{ctrl.pagingSize}},
showQuickJumper: true,
showTotal: (total: number, range: IParam[]) => `${range[0]}-${range[1]} of ${total} items`,
pageSizeOptions: ['10','20','50','100'],
},
{{else}}
enablePagingBar: false,
pagination: false,
{{/if}}
columnsModel: [
{{#each ctrl.pSDEGridColumns as | column |}}
{{>(lookup 'COLUMNMODEL') item=column}}
{{#if @last}}
{{>(lookup 'COLUMNMODEL') item=column lastColumn=true}}
{{else}}
{{>(lookup 'COLUMNMODEL') item=column lastColumn=false}}
{{/if}}
{{/each}}
]
};
\ No newline at end of file
......@@ -36,26 +36,63 @@ const emit = defineEmits<CtrlEmit>();
// 安装功能模块,提供状态和能力方法
const { state, handleEditorEvent } = new GridControl(CtrlConfig).moduleInstall(props);
// 表格滚动条配置
const gridScrollOption = computed(() => {
return {
scrollToFirstRowOnChange: true,
x: '100%',
y: '690px',
}
});
// 表格行样式(斑马纹)
const rowClassName = (record: IParam, index: number) => {
return index % 2 === 1 ? 'table-striped' : null;
}
// 表格选择功能配置
const rowSelection = computed(() => {
const rowSelectionOption = computed(() => {
return {
columnWidth: {{#neq ctrl.aggMode 'NONE'}}90{{else}}50{{/neq}},
onChange: (selectedRowKeys: string[], selectedRows: IParam[]) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
getCheckboxProps: (record: IParam) => ({
}),
};
});
// 处理拖动列
const handleResizeColumn = (width: number, column: IParam) => {
column.width = width;
}
// 处理表格变化(分页,过滤,排序)
const handleChange = (pagination: IParam, filters: IParam, sorter: IParam, data: IParam) => {
const { current, pageSize } = pagination;
const { currentDataSource } = data;
console.log(pagination, filters, sorter, currentDataSource);
}
const data = [];
for (let i = 0; i < 100; i++) {
data.push({
key: i,
name: `Edrward ${i}`,
age: 32,
address: `London Park no. ${i}`,
});
}
</script>
<template>
<a-table
bordered
class="ibiz-grid"
:showHeader="{{#if ctrl.hideHeader}}false{{else}}true{{/if}}"
:data-source="state.items"
:row-selection="rowSelection"
:columns="state.columnsModel">
:scroll="gridScrollOption"
:sortDirections="['ascend', 'descend']"
:data-source="data"
:row-selection="rowSelectionOption"
:columns="state.columnsModel"
:pagination="state.pagination"
:rowClassName="rowClassName"
@change="handleChange"
@resizeColumn="handleResizeColumn">
<template #emptyText>
<div class="not-data">
<span class="empty-text">
......@@ -73,10 +110,23 @@ const rowSelection = computed(() => {
{{>(lookup 'COLUMN') item=column ctrl=ctrl}}
{{/each}}
</template>
{{#neq ctrl.aggMode 'NONE'}}
<template #summary>
<a-table-summary-row>
<a-table-summary-cell>数据聚合</a-table-summary-cell>
{{#each ctrl.pSDEGridColumns as | column |}}
{{>(lookup 'SUMMARYCOLUMN') item=column ctrl=ctrl}}
{{/each}}
</a-table-summary-row>
</template>
{{/neq}}
</a-table>
</template>
<style lang="scss">
.ibiz-grid {
margin: 20px;
.table-striped {
background-color: #fafafa;
}
}
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册