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

update:更新表格

上级 51193462
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
{{#each ctrl.psDEGridEditItems as | editColumn | }} {{#each ctrl.psDEGridEditItems as | editColumn | }}
{{#eq editColumn.codeName (item.codeName)}} {{#eq editColumn.codeName (item.codeName)}}
{{#if item.psEditor}} {{#if item.psEditor}}
{{>(lookup . 'item.psEditor.editorType') item=item}} {{>(lookup . 'item.psEditor.editorType') item=item ctrlType="grid"}}
{{/if}} {{/if}}
{{/eq}} {{/eq}}
{{/each}} {{/each}}
......
...@@ -44,6 +44,12 @@ export class MainView extends ViewBase { ...@@ -44,6 +44,12 @@ export class MainView extends ViewBase {
//todo //todo
} }
public handleCtrlEvent(actionParam: IActionParam) {
const { tag, action, data } = actionParam;
// TODO
console.log(tag, action, data);
}
/** /**
* 安装部件所有功能模块的方法 * 安装部件所有功能模块的方法
* @param props 传入的Props * @param props 传入的Props
...@@ -58,7 +64,8 @@ export class MainView extends ViewBase { ...@@ -58,7 +64,8 @@ export class MainView extends ViewBase {
return { return {
...superParams, ...superParams,
state: this.viewState, state: this.viewState,
handleToolbarEvent: this.handleToolbarEvent, handleToolbarEvent: this.handleToolbarEvent.bind(this),
handleCtrlEvent: this.handleCtrlEvent.bind(this),
}; };
} }
} }
...@@ -29,6 +29,13 @@ export class ControlBase { ...@@ -29,6 +29,13 @@ export class ControlBase {
*/ */
public route: RouteLocationNormalizedLoaded = useRoute(); public route: RouteLocationNormalizedLoaded = useRoute();
/**
* @description 事件
* @type {*}
* @memberof ControlBase
*/
public emit: any;
/** /**
* Creates an instance of ControlBase. * Creates an instance of ControlBase.
* @param {*} options 配置参数 * @param {*} options 配置参数
...@@ -75,6 +82,7 @@ export class ControlBase { ...@@ -75,6 +82,7 @@ export class ControlBase {
* @memberof ControlBase * @memberof ControlBase
*/ */
public moduleInstall(props: ControlPropsBase, emit?: Function) { public moduleInstall(props: ControlPropsBase, emit?: Function) {
this.emit = emit?.bind(this);
this.setState(props); this.setState(props);
this.useControlContextParams(props); this.useControlContextParams(props);
return { return {
......
...@@ -64,6 +64,13 @@ export interface GridControlState extends MainControlState { ...@@ -64,6 +64,13 @@ export interface GridControlState extends MainControlState {
*/ */
selectedData: IParam[]; selectedData: IParam[];
/**
* @description 选中行keys
* @type {string[]}
* @memberof GridControlState
*/
selectedRowKeys: string[];
/** /**
* @description 是否默认选中第一条数据 * @description 是否默认选中第一条数据
* @type {boolean} * @type {boolean}
...@@ -71,6 +78,13 @@ export interface GridControlState extends MainControlState { ...@@ -71,6 +78,13 @@ export interface GridControlState extends MainControlState {
*/ */
selectFirstDefault: boolean; selectFirstDefault: boolean;
/**
* @description 当前页
* @type {number}
* @memberof GridControlState
*/
current: number;
/** /**
* @description 分页大小 * @description 分页大小
* @type {number} * @type {number}
......
...@@ -259,13 +259,18 @@ export class GridControl extends MainControl { ...@@ -259,13 +259,18 @@ export class GridControl extends MainControl {
const { aggMode } = this.controlState; const { aggMode } = this.controlState;
if (!Object.is(aggMode, "NONE")) { if (!Object.is(aggMode, "NONE")) {
const dataAggRef = toRef(this.controlState, "dataAgg"); const dataAggRef = toRef(this.controlState, "dataAgg");
let aggData: IParam[]; const currentRef = toRef(this.controlState, "current");
const pageSizeRef = toRef(this.controlState, "pageSize");
let aggData: IParam[] = [];
if (Object.is(aggMode, "PAGE")) { if (Object.is(aggMode, "PAGE")) {
const dataRef = toRef(this.controlState, "items"); const dataRef = toRef(this.controlState, "items");
aggData = [...dataRef.value]; aggData = [...dataRef.value];
} else if (Object.is(aggMode, "ALL")) { } else if (Object.is(aggMode, "ALL")) {
aggData = await this.remoteAgg(); aggData = await this.remoteAgg();
} }
const start: number = (currentRef.value - 1) * pageSizeRef.value > 0 ? (currentRef.value - 1) * pageSizeRef.value - 1 : 0;
const end: number = currentRef.value * pageSizeRef.value - 1;
aggData = aggData.slice(start, end);
const columnsModelRef = toRef(this.controlState, "columnsModel"); const columnsModelRef = toRef(this.controlState, "columnsModel");
const columnsModel: IParam[] = []; const columnsModel: IParam[] = [];
columnsModelRef.value.forEach((column: IParam) => { columnsModelRef.value.forEach((column: IParam) => {
...@@ -281,6 +286,33 @@ export class GridControl extends MainControl { ...@@ -281,6 +286,33 @@ export class GridControl extends MainControl {
} }
} }
/**
* @description 处理默认选中
* @memberof GridControl
*/
public handleDefaultSelect() {
const { selectedData, selectFirstDefault, controlName } = this.controlState;
if (selectedData?.length > 0) {
const selectedRowKeys: string[] = [];
const selectedRowKeysRef = toRef(this.controlState, "selectedRowKeys");
selectedData.forEach((selected: IParam) => {
if (selected.srfkey) {
selectedRowKeys.push(selected.srfkey);
}
});
selectedRowKeysRef.value = selectedRowKeys;
} else if (selectFirstDefault) {
const dataRef = toRef(this.controlState, "items");
if (dataRef.value[0]) {
this.emit("ctrlEvent", {
tag: controlName,
action: "selectionChange",
data: [deepCopy(dataRef.value[0])],
});
}
}
}
/** /**
* @description 使用加载功能模块 * @description 使用加载功能模块
* @param {GridControlProps} props 传入的props * @param {GridControlProps} props 传入的props
...@@ -294,7 +326,7 @@ export class GridControl extends MainControl { ...@@ -294,7 +326,7 @@ export class GridControl extends MainControl {
const loadAction = this.controlState.controlAction.loadAction; const loadAction = this.controlState.controlAction.loadAction;
const { const {
controlService, context, viewParams, showBusyIndicator, noSort, minorSortDir, minorSortPSDEF, controlService, context, viewParams, showBusyIndicator, noSort, minorSortDir, minorSortPSDEF,
enablePagingBar, pageSize enablePagingBar
} = this.controlState; } = this.controlState;
const dataRef = toRef(this.controlState, "items"); const dataRef = toRef(this.controlState, "items");
const paginationRef = toRef(this.controlState, "pagination"); const paginationRef = toRef(this.controlState, "pagination");
...@@ -307,11 +339,9 @@ export class GridControl extends MainControl { ...@@ -307,11 +339,9 @@ export class GridControl extends MainControl {
Object.assign(_viewParams, { sort: `${minorSortPSDEF},${minorSortDir}`}); Object.assign(_viewParams, { sort: `${minorSortPSDEF},${minorSortDir}`});
} }
if (enablePagingBar) { if (enablePagingBar) {
if (opt.current && opt.pageSize) { const currentRef = toRef(this.controlState, "current");
Object.assign(_viewParams, { page: opt.current - 1, size: opt.pageSize}); const pageSizeRef = toRef(this.controlState, "pageSize");
} else { Object.assign(_viewParams, { page: currentRef.value - 1, size: pageSizeRef.value});
Object.assign(_viewParams, { page: 0, size: pageSize});
}
} }
// const response = await controlService.get(loadAction, _context, {viewParams: _viewParams}, showBusyIndicator ); // const response = await controlService.get(loadAction, _context, {viewParams: _viewParams}, showBusyIndicator );
// if (!response.status || response.status !== 200) { // if (!response.status || response.status !== 200) {
...@@ -334,6 +364,7 @@ export class GridControl extends MainControl { ...@@ -334,6 +364,7 @@ export class GridControl extends MainControl {
paginationRef.value["total"] = 100; paginationRef.value["total"] = 100;
} }
this.calcGridAuthState(); this.calcGridAuthState();
this.handleDefaultSelect();
this.handleGridGroup(); this.handleGridGroup();
this.handleDataAgg(); this.handleDataAgg();
} catch (error) { } catch (error) {
...@@ -387,16 +418,11 @@ export class GridControl extends MainControl { ...@@ -387,16 +418,11 @@ export class GridControl extends MainControl {
const superParams = super.moduleInstall(props, emit); const superParams = super.moduleInstall(props, emit);
const { load } = this.useLoad(props); const { load } = this.useLoad(props);
const handleEditorEvent = this.handleEditorEvent.bind(this);
this.handleEditorEvent = (rowIndex: number,actionParam: IActionParam) => {
handleEditorEvent(rowIndex, actionParam)
}
return { return {
...superParams, ...superParams,
state: this.controlState, state: this.controlState,
load, load,
handleEditorEvent: this.handleEditorEvent, handleEditorEvent: this.handleEditorEvent.bind(this),
}; };
} }
} }
...@@ -29,7 +29,7 @@ interface ViewEmit { ...@@ -29,7 +29,7 @@ interface ViewEmit {
const emit = defineEmits<ViewEmit>(); const emit = defineEmits<ViewEmit>();
// 安装功能模块,提供状态和能力方法 // 安装功能模块,提供状态和能力方法
const { state } = new GridView(ViewConfig).moduleInstall(props); const { state, handleCtrlEvent } = new GridView(ViewConfig).moduleInstall(props);
</script> </script>
...@@ -45,13 +45,13 @@ const { state } = new GridView(ViewConfig).moduleInstall(props); ...@@ -45,13 +45,13 @@ const { state } = new GridView(ViewConfig).moduleInstall(props);
{{#eq controlType "GRID"}} {{#eq controlType "GRID"}}
<{{codeName}}Grid <{{codeName}}Grid
:context="state.context" :context="state.context"
:multiple="false"
:rowEditState="state.rowEditState" :rowEditState="state.rowEditState"
:rowActiveMode="state.gridRowActiveMode" :rowActiveMode="state.gridRowActiveMode"
:showBusyIndicator="true" :showBusyIndicator="true"
:viewParams="state.viewParams" :viewParams="state.viewParams"
:controlAction="state.controlsAction" :controlAction="state.controlsAction"
:viewSubject="state.viewSubject" :viewSubject="state.viewSubject"
@ctrlEvent="handleCtrlEvent"
></{{codeName}}Grid> ></{{codeName}}Grid>
{{/eq}} {{/eq}}
{{/page.ctrls}} {{/page.ctrls}}
......
...@@ -5,6 +5,7 @@ export const CtrlConfig = { ...@@ -5,6 +5,7 @@ export const CtrlConfig = {
controlName: "{{ctrl.name}}", controlName: "{{ctrl.name}}",
items: [], items: [],
dataAgg: [], dataAgg: [],
selectedRowKeys: [],
aggMode: "{{ctrl.aggMode}}", aggMode: "{{ctrl.aggMode}}",
{{#if (eq ctrl.aggMode 'ALL')}} {{#if (eq ctrl.aggMode 'ALL')}}
aggEntity: "{{ctrl.aggPSAppDataEntity.codeName}}", aggEntity: "{{ctrl.aggPSAppDataEntity.codeName}}",
...@@ -29,6 +30,7 @@ export const CtrlConfig = { ...@@ -29,6 +30,7 @@ export const CtrlConfig = {
{{/if}} {{/if}}
{{#if ctrl.enablePagingBar}} {{#if ctrl.enablePagingBar}}
enablePagingBar: true, enablePagingBar: true,
current: 1,
pageSize: {{#if ctrl.pagingSize}}{{ctrl.pagingSize}}{{else}}20{{/if}}, pageSize: {{#if ctrl.pagingSize}}{{ctrl.pagingSize}}{{else}}20{{/if}},
pagination: { pagination: {
position: ['bottomRight'], position: ['bottomRight'],
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { CtrlConfig } from './{{spinalCase ctrl.codeName}}-grid-config'; import { CtrlConfig } from './{{spinalCase ctrl.codeName}}-grid-config';
import { GridControl, IActionParam, IParam, ControlAction } from '@ibiz-core'; import { GridControl, IActionParam, IParam, ControlAction, deepCopy } from '@ibiz-core';
interface Props { interface Props {
context: IParam; context: IParam;
...@@ -32,7 +32,7 @@ interface CtrlEmit { ...@@ -32,7 +32,7 @@ interface CtrlEmit {
} }
const emit = defineEmits<CtrlEmit>(); const emit = defineEmits<CtrlEmit>();
// 安装功能模块,提供状态和能力方法 // 安装功能模块,提供状态和能力方法
const { state, handleEditorEvent } = new GridControl(CtrlConfig).moduleInstall(props); const { state, load, handleEditorEvent } = new GridControl(CtrlConfig).moduleInstall(props);
// 表格滚动条配置 // 表格滚动条配置
const gridScrollOption = computed(() => { const gridScrollOption = computed(() => {
return { return {
...@@ -49,14 +49,40 @@ const rowKey = (record: IParam) => { ...@@ -49,14 +49,40 @@ const rowKey = (record: IParam) => {
const rowClassName = (record: IParam, index: number) => { const rowClassName = (record: IParam, index: number) => {
return index % 2 === 1 ? "table-striped" : null; return index % 2 === 1 ? "table-striped" : null;
} }
// 表格行选中
const customRow = (record: IParam, index: number) => {
return {
onClick: () => {
state.selectedRowKeys = [record.srfkey];
if (!record.groupRow) {
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.groupRow && Object.is(props.rowActiveMode, 2)) {
emit("ctrlEvent",{ tag: state.controlName, action: "rowDbClick", data: [deepCopy(record)] })
}
}
};
}
// 表格选择功能配置 // 表格选择功能配置
const rowSelectionOption = computed(() => { const rowSelectionOption = computed(() => {
return { return {
fixed: true,
columnWidth: {{#neq ctrl.aggMode 'NONE'}}90{{else}}50{{/neq}}, columnWidth: {{#neq ctrl.aggMode 'NONE'}}90{{else}}50{{/neq}},
selectedRowKeys: state.selectedRowKeys,
checkStrictly: props.multiple ? false : true, checkStrictly: props.multiple ? false : true,
onChange: (selectedRowKeys: string[], selectedRows: IParam[]) => { onChange: (selectedRowKeys: string[], selectedRows: IParam[]) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); state.selectedRowKeys = selectedRowKeys;
const selection: IParam[] = [];
selectedRows.forEach((select: IParam) => {
if (!select.groupRow) {
selection.push(select);
}
})
emit("ctrlEvent",{ tag: state.controlName, action: "selectionChange", data: selection })
}, },
}; };
}); });
...@@ -67,8 +93,9 @@ const handleResizeColumn = (width: number, column: IParam) => { ...@@ -67,8 +93,9 @@ const handleResizeColumn = (width: number, column: IParam) => {
// 处理表格变化(分页,过滤,排序) // 处理表格变化(分页,过滤,排序)
const handleChange = (pagination: IParam, filters: IParam, sorter: IParam, data: IParam) => { const handleChange = (pagination: IParam, filters: IParam, sorter: IParam, data: IParam) => {
const { current, pageSize } = pagination; const { current, pageSize } = pagination;
const { currentDataSource } = data; state.current = current;
console.log(pagination, filters, sorter, currentDataSource); state.pageSize = pageSize;
load();
} }
</script> </script>
<template> <template>
...@@ -84,6 +111,7 @@ const handleChange = (pagination: IParam, filters: IParam, sorter: IParam, data: ...@@ -84,6 +111,7 @@ const handleChange = (pagination: IParam, filters: IParam, sorter: IParam, data:
:row-selection="rowSelectionOption" :row-selection="rowSelectionOption"
:columns="state.columnsModel" :columns="state.columnsModel"
:pagination="state.pagination" :pagination="state.pagination"
:customRow="customRow"
:rowClassName="rowClassName" :rowClassName="rowClassName"
@change="handleChange" @change="handleChange"
@resizeColumn="handleResizeColumn"> @resizeColumn="handleResizeColumn">
...@@ -99,7 +127,7 @@ const handleChange = (pagination: IParam, filters: IParam, sorter: IParam, data: ...@@ -99,7 +127,7 @@ const handleChange = (pagination: IParam, filters: IParam, sorter: IParam, data:
{{!-- 快速工具栏 --}} {{!-- 快速工具栏 --}}
</div> </div>
</template> </template>
<template #bodyCell="{ column, text, record }"> <template #bodyCell="{ column, text, record, index }">
{{#each ctrl.psDEGridColumns as | column |}} {{#each ctrl.psDEGridColumns as | column |}}
{{>(lookup 'COLUMN') item=column ctrl=ctrl}} {{>(lookup 'COLUMN') item=column ctrl=ctrl}}
{{/each}} {{/each}}
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册