提交 4e2411c0 编写于 作者: tony001's avatar tony001

update:更新

上级 2bff2322
...@@ -72,8 +72,7 @@ public declare state: GridViewState; ...@@ -72,8 +72,7 @@ public declare state: GridViewState;
const superParams = super.moduleInstall(); const superParams = super.moduleInstall();
return { return {
...superParams, ...superParams,
grid: this.grid, grid: this.grid
onSearchFormSearch: this.onSearchFormSearch.bind(this)
}; };
} }
} }
...@@ -127,6 +127,12 @@ export class MDView extends MainView { ...@@ -127,6 +127,12 @@ export class MDView extends MainView {
* @memberof MDView * @memberof MDView
*/ */
public MDCtrlEvent(eventName: string, args: any): void { public MDCtrlEvent(eventName: string, args: any): void {
if (Object.is(eventName, 'beforeload')) {
this.MDCtrlBeforeLoad(args)
}
if (Object.is(eventName, 'load')) {
this.MDCtrlLoaded(args);
}
if (Object.is(eventName, 'rowclick')) { if (Object.is(eventName, 'rowclick')) {
this.doEdit(args); this.doEdit(args);
} }
...@@ -136,12 +142,6 @@ export class MDView extends MainView { ...@@ -136,12 +142,6 @@ export class MDView extends MainView {
if (Object.is(eventName, 'selectionchange')) { if (Object.is(eventName, 'selectionchange')) {
this.selectionChange(args); this.selectionChange(args);
} }
if (Object.is(eventName, 'load')) {
this.MDCtrlLoaded(args);
}
if (Object.is(eventName, 'beforeload')) {
this.MDCtrlBeforeLoad(args)
}
} }
/** /**
...@@ -157,6 +157,7 @@ export class MDView extends MainView { ...@@ -157,6 +157,7 @@ export class MDView extends MainView {
if (this.getSearchBar()) { if (this.getSearchBar()) {
Object.assign(args, this.getSearchBar().getData()); Object.assign(args, this.getSearchBar().getData());
} }
Object.assign(args, { test: 111 });
// if (this.view && !this.view.isExpandSearchForm) { // if (this.view && !this.view.isExpandSearchForm) {
// Object.assign(args, { query: this.view.query }); // Object.assign(args, { query: this.view.query });
// } // }
...@@ -181,7 +182,7 @@ export class MDView extends MainView { ...@@ -181,7 +182,7 @@ export class MDView extends MainView {
* @memberof MDView * @memberof MDView
*/ */
public MDCtrlLoaded(args: any) { public MDCtrlLoaded(args: any) {
throw new Error('Method not implemented.'); console.log("数据加载完成", args);
} }
/** /**
......
...@@ -50,7 +50,6 @@ export class PickupView extends MainView { ...@@ -50,7 +50,6 @@ export class PickupView extends MainView {
} }
public handleCtrlEvent(actionParam: IActionParam) { public handleCtrlEvent(actionParam: IActionParam) {
debugger
const { tag, action, data } = actionParam; const { tag, action, data } = actionParam;
// TODO // TODO
......
import { ControlPropsBase, ControlStateBase, IParam, UIBase } from '@core'; import { ControlPropsBase, ControlStateBase, IActionParam, IParam, UIBase } from '@core';
/** /**
* @description 部件基类 * @description 部件基类
...@@ -31,11 +31,6 @@ export class ControlBase { ...@@ -31,11 +31,6 @@ export class ControlBase {
*/ */
public declare emit: Function; public declare emit: Function;
/**
* Creates an instance of ControlBase.
* @param {*} options 配置参数
* @memberof ControlBase
*/
/** /**
* Creates an instance of ControlBase. * Creates an instance of ControlBase.
* @param {*} options 配置参数 * @param {*} options 配置参数
...@@ -68,8 +63,15 @@ export class ControlBase { ...@@ -68,8 +63,15 @@ export class ControlBase {
// 把Ref赋值到State上进行解包 // 把Ref赋值到State上进行解包
this.state.context = context; this.state.context = context;
this.state.viewParams = viewParams; this.state.viewParams = viewParams;
}
return { context, viewParams }; /**
* 获取当前激活数据
*
* @memberof ControlBase
*/
public getData(): IParam[] {
return [];
} }
/** /**
...@@ -83,7 +85,8 @@ export class ControlBase { ...@@ -83,7 +85,8 @@ export class ControlBase {
this.setState(); this.setState();
this.useControlContextParams(); this.useControlContextParams();
return { return {
state: this.state state: this.state,
activeData: this.getData()
}; };
} }
} }
import { IParam, MainControlProps } from "@core"; import { MDControlProps } from "@core";
/** /**
* @description 表格部件的props * @description 表格部件的props
* @export * @export
* @interface GridControlProps * @interface GridControlProps
* @extends {MainControlProps} * @extends {MDControlProps}
*/ */
export interface GridControlProps extends MainControlProps { export interface GridControlProps extends MDControlProps {
/**
* @description 是否多选
* @type {boolean}
* @memberof GridControlProps
*/
multiple: boolean;
/**
* @description 行编辑状态
* @type {boolean}
* @memberof GridControlProps
*/
rowEditState: boolean;
/**
* @description 行激活模式
* @type {(0 | 1 | 2)} 不激活 | 单击激活 | 双击激活
* @memberof GridControlProps
*/
rowActiveMode: 0 | 1 | 2;
/**
* @description 选中数据
* @type {IParam[]}
* @memberof GridControlProps
*/
selectedData: IParam[];
/**
* @description 是否默认选中第一项数据
* @type {boolean}
* @memberof GridControlProps
*/
selectFirstDefault: boolean;
} }
\ No newline at end of file
import { IParam, MainControlState } from '@core'; import { IParam, MDControlState } from '@core';
/** /**
* @description 表格部件状态 * @description 表格部件状态
* @export * @export
* @interface GridControlState * @interface GridControlState
* @extends {MainControlState} * @extends {MDControlState}
*/ */
export interface GridControlState extends MainControlState { export interface GridControlState extends MDControlState {
/**
* @description 表格数据集合
* @type {IParam[]}
* @memberof GridControlState
*/
data: IParam[];
/** /**
* @description 表格列模型 * @description 表格列模型
...@@ -36,48 +29,6 @@ export interface GridControlState extends MainControlState { ...@@ -36,48 +29,6 @@ export interface GridControlState extends MainControlState {
*/ */
rules: IParam; rules: IParam;
/**
* @description 是否多选
* @type {boolean}
* @memberof GridControlState
*/
multiple: boolean;
/**
* @description 行编辑状态
* @type {boolean}
* @memberof GridControlState
*/
rowEditState: boolean;
/**
* @description 行激活模式
* @type {(0 | 1 | 2)} 不激活 | 单击激活 | 双击激活
* @memberof GridControlState
*/
rowActiveMode: 0 | 1 | 2;
/**
* @description 选中数据
* @type {IParam[]}
* @memberof GridControlState
*/
selectedData: IParam[];
/**
* @description 选中行keys
* @type {string[]}
* @memberof GridControlState
*/
selectedRowKeys: string[];
/**
* @description 是否默认选中第一条数据
* @type {boolean}
* @memberof GridControlState
*/
selectFirstDefault: boolean;
/** /**
* @description 表格聚合 * @description 表格聚合
* @type {IParam} * @type {IParam}
...@@ -85,24 +36,4 @@ export interface GridControlState extends MainControlState { ...@@ -85,24 +36,4 @@ export interface GridControlState extends MainControlState {
*/ */
gridAgg: IParam; gridAgg: IParam;
/**
* @description 表格分组
* @type {IParam}
* @memberof GridControlState
*/
gridGroup: IParam;
/**
* @description 表格排序
* @type {IParam}
* @memberof GridControlState
*/
gridSort: IParam;
/**
* @description 表格分页
* @type {IParam}
* @memberof GridControlState
*/
gridPaging: IParam;
} }
import { createUUID } from 'qx-util'; import { deepCopy, GridControlState, IActionParam, IParam, MDControl } from "@core";
import { UIUtil, deepCopy, GridControlProps, GridControlState, IActionParam, IParam, MainControl } from '@core'; import { createUUID } from "qx-util";
/** /**
* @description 表格部件 * @description 表格部件
* @export * @export
* @class GridControl * @class GridControl
* @extends {MainControl} * @extends {MDControl}
*/ */
export class GridControl extends MainControl { export class GridControl extends MDControl {
/** /**
* @description 部件状态 * @description 部件状态
...@@ -23,203 +24,219 @@ export class GridControl extends MainControl { ...@@ -23,203 +24,219 @@ export class GridControl extends MainControl {
*/ */
public setState() { public setState() {
super.setState(); super.setState();
this.state.multiple = toRef(this.props, "multiple") as any;
this.state.rowEditState = toRef(this.props, "rowEditState") as any;
this.state.rowActiveMode = toRef(this.props, "rowActiveMode") as any;
this.state.selectedData = toRef(this.props, "selectedData") as any;
this.state.selectFirstDefault = toRef(this.props, "selectFirstDefault") as any;
} }
/** /**
* @description 表格数据改变 * @description 使用自定义模块(蚂蚁金服UI自定义)
* @param {number} rowIndex 行索引
* @param {string} name 表格列属性名称
* @param {*} value 表格列属性值
* @memberof GridControl * @memberof GridControl
*/ */
public gridDataChange(rowIndex: number, name: string, value: any) { public useCustom() {
const { data } = toRefs(this.state); const { controlName, selectFirstDefault, rowEditState, rowActiveMode } = this.state;
if (data.value[rowIndex][name] !== value) { const { selectedRowKeys } = toRefs(this.state);
data.value[rowIndex][name] = value; // 滚动条配置
data.value[rowIndex]["rowDataState"] = "update"; const scrollOption = computed(() => {
return {
scrollToFirstRowOnChange: true,
x: '110%',
y: '690px',
} }
});
// 指定表格行key
const rowKey = (record: IParam) => {
return record.srfkey;
} }
// 表格行样式
/** const rowClassName = (record: IParam, index: number) => {
* @description 获取界面行为权限状态 return index % 2 === 1 ? "table-striped" : null;
* @param {IParam} rowData 行数据
* @return {*}
* @memberof GridControl
*/
public getActionAuthState(rowData: IParam) {
const { UIService, uAColumnModel } = this.state;
let tempModel: any = deepCopy(uAColumnModel);
UIUtil.calcActionItemAuthState(rowData, tempModel, UIService);
return tempModel;
} }
// 表格行自定义
/** const customRow = (record: IParam, index: number) => {
* @description 获取指定列类型模型 return {
* @param {IParam[]} columns 表格列集合 onClick: () => {
* @param {string} columnType 表格列类型 if (!rowEditState) {
* @return {*} {*} selectedRowKeys.value = [record.srfkey];
* @memberof GridControl if (!record.children) {
*/ this.emit("ctrlevent", { tag: controlName, action: "selectionChange", data: [deepCopy(record)] })
public getGridColumn(columns: IParam[], columnType: string): any { if (Object.is(rowActiveMode, 1)) {
for (const column of columns) { this.emit("ctrlevent", { tag: controlName, action: "rowClick", data: [deepCopy(record)] })
if (Object.is(column.columnType, columnType)) {
return deepCopy(column);
} }
if (column.children?.length > 0) {
return this.getGridColumn(column.children, columnType);
} }
} }
},
onDblclick: () => {
if (!record.children && Object.is(rowActiveMode, 2)) {
this.emit("ctrlevent", { tag: controlName, action: "rowDbClick", data: [deepCopy(record)] })
} }
/**
* @description 自动分组
* @memberof GridControl
*/
public autoGroup() {
const { gridGroup } = this.state;
const { data, columnsModel } = toRefs(this.state);
const { groupField } = gridGroup;
let autoGroup: string[] = [];
data.value.forEach((item: IParam) => {
if (item.hasOwnProperty(groupField)) {
autoGroup.push(item[groupField]);
} }
}) };
autoGroup = [...new Set(autoGroup)]; }
if (autoGroup.length > 0) { // 表格选择功能配置
const groupColumn = this.getGridColumn(columnsModel.value, "GROUP"); const rowSelectionOption = computed(() => {
const gridData: IParam[] = []; if (selectFirstDefault) {
autoGroup.forEach((group: string, index: number) => { return false;
const children: IParam[] = []; }
data.value.forEach((item: IParam) => { return {
if (Object.is(group, item[groupField])) { columnWidth: 90,
children.push(item); selectedRowKeys: selectedRowKeys.value,
checkStrictly: this.props.multiple ? false : true,
onChange: (_selectedRowKeys: string[], selectedRows: IParam[]) => {
selectedRowKeys.value = _selectedRowKeys;
const selection: IParam[] = [];
selectedRows.forEach((select: IParam) => {
if (!select.children) {
selection.push(select);
} }
}) })
gridData.push({ this.emit("ctrlevent", { tag: controlName, action: "selectionChange", data: selection })
srfkey: createUUID(), },
[groupColumn.dataIndex]: group, };
children: deepCopy(children),
})
}); });
data.value = gridData; // 列拖动
const resizeColumn = (width: number, column: IParam) => {
column.width = width;
}
// 处理表格变化(分页,过滤,排序)
const onGridChange = (pagination: IParam, filters: IParam, sorter: IParam, data: IParam) => {
if (pagination) {
this.useLoad().load();
}
}
return {
scrollOption,
rowKey,
rowClassName,
customRow,
rowSelectionOption,
resizeColumn,
onGridChange
} }
} }
/** /**
* @description 代码表分组 * @description 处理编辑器事件
* @param {IActionParam} actionParam 行为参数
* @memberof GridControl * @memberof GridControl
*/ */
public async codeListGroup() { public onEditorEvent(rowIndex: number, actionParam: IActionParam) {
const { gridGroup } = this.state; const { tag, action, data } = actionParam;
const { data, columnsModel } = toRefs(this.state); switch (action) {
const { groupField } = gridGroup; case "valueChange":
// TODO 代码表数据 const { items } = toRefs(this.state);
let codeListGroup: IParam[] = []; if (items.value[rowIndex][tag] !== data) {
if (codeListGroup.length > 0) { items.value[rowIndex][tag] = data;
const groupColumn = this.getGridColumn(columnsModel.value, "GROUP"); items.value[rowIndex]["rowDataState"] = "update";
const gridData: IParam[] = [];
const otherGroup: IParam[] = [];
codeListGroup.forEach((group: IParam) => {
const children: IParam[] = [];
data.value.forEach((item: IParam) => {
if (Object.is(group.value, item[groupField])) {
children.push(item);
}
});
gridData.push({
srfkey: createUUID(),
[groupColumn.dataIndex]: group.text,
children: deepCopy(children),
})
});
data.value.forEach((item: IParam) => {
const index: number = codeListGroup.findIndex((_item: IParam) => Object.is(item[groupField], _item.value));
if (index < 0) {
otherGroup.push(item);
}
});
if (otherGroup.length > 0) {
gridData.push({
srfkey: createUUID(),
[groupColumn.dataIndex]: "其它",
children: deepCopy(otherGroup),
})
} }
data.value = gridData; break;
default:
break;
} }
} }
/** /**
* @description 计算表格行为权限 * @description 处理表格操作列事件
* @param {IActionParam} actionParam 行为参数
* @param {IParam} [row] 表格行数据
* @memberof GridControl * @memberof GridControl
*/ */
public calcGridAuthState() { public onActionColEvent(actionParam: IActionParam, row?: IParam) {
const { data, columnsModel } = toRefs(this.state); const { tag, action, data } = actionParam;
let columnModel = this.getGridColumn(columnsModel.value, "UAGRIDCOLUMN"); console.log('触发界面行为', actionParam, row);
if (columnModel) {
data.value.forEach((item: IParam) => {
Object.assign(item, {
[columnModel.dataIndex]: this.getActionAuthState(item),
})
})
} }
/**
* 处理数据状态变化(逻辑数据+UI)
*
* @memberof GridControl
*/
public handleStateChange() {
// 计算表格操作列行为权限
const { items, columnsModel } = toRefs(this.state);
// this.getActionAuthState
// 处理分组
this.handleDataGroup();
// 处理数据聚合
this.handleDataAgg();
// 处理默认选中
this.handleDefaultSelect();
// 设置UI变化
this.setGridColSpan();
} }
/** /**
* @description 设置表格合并列 * 处理默认选中
*
* @memberof GridControl * @memberof GridControl
*/ */
public setGridColSpan() { public handleDefaultSelect() {
const { columnsModel } = toRefs(this.state); const { selectedData, isSelectDefault, controlName, items } = this.state;
columnsModel.value.forEach((columnModel: IParam) => { const { selectedRowKeys } = toRefs(this.state);
const customRender = ({ text, record, index, column }: IParam) => { if (selectedData?.length > 0) {
const option = { const _selectedRowKeys: string[] = [];
props: {} as IParam, selectedData.forEach((selected: IParam) => {
}; if (selected.srfkey) {
if (record.children) { _selectedRowKeys.push(selected.srfkey);
if (Object.is(column.columnType, "GROUP")) { }
Object.assign(option.props, {
colSpan: columnsModel.value.length,
}); });
} else { selectedRowKeys.value = _selectedRowKeys;
Object.assign(option.props, { } else if (isSelectDefault) {
colSpan: 0 if (items && items.length > 0) {
this.emit("ctrlevent", {
tag: controlName,
action: "selectionChange",
data: [deepCopy(items[0])],
}); });
} }
} }
return option;
}
Object.assign(columnModel, {
customRender: customRender,
})
});
} }
/** /**
* @description 处理表格分组 * @description 处理数据聚合
*
* @memberof GridControl * @memberof GridControl
*/ */
public handleGridGroup() { public async handleDataAgg() {
const { gridGroup } = this.state; const { mdCtrlPaging, mdCtrlGroup, columnsModel } = this.state;
const { enableGroup, groupField, groupMode } = gridGroup; const { gridAgg } = toRefs(this.state);
if (enableGroup && groupField && !Object.is(groupMode, "NONE")) { let { aggMode, aggData } = gridAgg.value;
if (Object.is(groupMode, "AUTO")) { const { enableGroup } = mdCtrlGroup;
this.autoGroup(); if (!Object.is(aggMode, "NONE")) {
} else if (Object.is(groupMode, "CODELIST")) { const { enablePagingBar, current, pageSize } = mdCtrlPaging;
this.codeListGroup(); let dataAgg: IParam[] = [];
if (Object.is(aggMode, "PAGE")) {
const dataRef = toRef(this.state, "items");
dataAgg = [...dataRef.value];
} else if (Object.is(aggMode, "ALL")) {
dataAgg = await this.remoteAgg();
} }
this.setGridColSpan(); if (enablePagingBar) {
const start: number = (current - 1) * pageSize > 0 ? (current - 1) * pageSize - 1 : 0;
const end: number = current * pageSize;
dataAgg = dataAgg.slice(start, end);
}
if (enableGroup) {
const _dataAgg: IParam[] = [];
dataAgg.forEach((item: IParam) => {
item.children?.forEach((child: IParam) => {
_dataAgg.push(child);
})
})
dataAgg = _dataAgg;
}
const _columnsModel: IParam[] = [];
columnsModel.forEach((column: IParam) => {
if (!Object.is(column.columnType, "GROUPGRIDCOLUMN")) {
_columnsModel.push(column);
}
});
_columnsModel.forEach((column: IParam) => {
aggData.push(this.getAggValue(dataAgg, column))
});
} }
} }
/** /**
* @description 远程聚合 * @description 远程聚合
*
* @memberof GridControl * @memberof GridControl
*/ */
public async remoteAgg(): Promise<IParam[]> { public async remoteAgg(): Promise<IParam[]> {
...@@ -231,6 +248,7 @@ export class GridControl extends MainControl { ...@@ -231,6 +248,7 @@ export class GridControl extends MainControl {
/** /**
* @description 获取聚合值 * @description 获取聚合值
*
* @param {IParam[]} aggData 聚合数据 * @param {IParam[]} aggData 聚合数据
* @param {string} column 列模型 * @param {string} column 列模型
* @memberof GridControl * @memberof GridControl
...@@ -275,454 +293,146 @@ export class GridControl extends MainControl { ...@@ -275,454 +293,146 @@ export class GridControl extends MainControl {
} }
/** /**
* @description 处理数据聚合 * 自动分组
*
* @protected
* @memberof GridControl * @memberof GridControl
*/ */
public async handleDataAgg() { protected autoGroupData() {
const { gridPaging, gridGroup, columnsModel } = this.state; const { gridGroup } = this.state;
const { gridAgg } = toRefs(this.state); const { items, columnsModel } = toRefs(this.state);
let { aggMode, aggData } = gridAgg.value; const { groupField } = gridGroup;
const { enableGroup } = gridGroup; let autoGroup: string[] = [];
if (!Object.is(aggMode, "NONE")) { items.value.forEach((item: IParam) => {
const { enablePagingBar, current, pageSize } = gridPaging; if (item.hasOwnProperty(groupField)) {
let dataAgg: IParam[] = []; autoGroup.push(item[groupField]);
if (Object.is(aggMode, "PAGE")) {
const dataRef = toRef(this.state, "data");
dataAgg = [...dataRef.value];
} else if (Object.is(aggMode, "ALL")) {
dataAgg = await this.remoteAgg();
} }
if (enablePagingBar) { })
const start: number = (current - 1) * pageSize > 0 ? (current - 1) * pageSize - 1 : 0; autoGroup = [...new Set(autoGroup)];
const end: number = current * pageSize; if (autoGroup.length > 0) {
dataAgg = dataAgg.slice(start, end); const groupColumn = this.getGridColumn(columnsModel.value, "GROUP");
const gridData: IParam[] = [];
autoGroup.forEach((group: string, index: number) => {
const children: IParam[] = [];
items.value.forEach((item: IParam) => {
if (Object.is(group, item[groupField])) {
children.push(item);
} }
if (enableGroup) {
const _dataAgg: IParam[] = [];
dataAgg.forEach((item: IParam) => {
item.children?.forEach((child: IParam) => {
_dataAgg.push(child);
}) })
gridData.push({
srfkey: createUUID(),
[groupColumn.dataIndex]: group,
children: deepCopy(children),
}) })
dataAgg = _dataAgg;
}
const _columnsModel: IParam[] = [];
columnsModel.forEach((column: IParam) => {
if (!Object.is(column.columnType, "GROUPGRIDCOLUMN")) {
_columnsModel.push(column);
}
});
_columnsModel.forEach((column: IParam) => {
aggData.push(this.getAggValue(dataAgg, column))
}); });
items.value = gridData;
} }
} }
/** /**
* @description 处理默认选中 * 代码表分组
* @memberof GridControl *
* @protected
* @memberof MDControl
*/ */
public handleDefaultSelect() { protected codeListGroupData() {
const { selectedData, selectFirstDefault, controlName, data } = this.state; const { gridGroup } = this.state;
const { selectedRowKeys } = toRefs(this.state); const { items, columnsModel } = toRefs(this.state);
if (selectedData?.length > 0) { const { groupField } = gridGroup;
const _selectedRowKeys: string[] = []; // TODO 代码表数据
selectedData.forEach((selected: IParam) => { let codeListGroup: IParam[] = [];
if (selected.srfkey) { if (codeListGroup.length > 0) {
_selectedRowKeys.push(selected.srfkey); const groupColumn = this.getGridColumn(columnsModel.value, "GROUP");
const gridData: IParam[] = [];
const otherGroup: IParam[] = [];
codeListGroup.forEach((group: IParam) => {
const children: IParam[] = [];
items.value.forEach((item: IParam) => {
if (Object.is(group.value, item[groupField])) {
children.push(item);
} }
}); });
selectedRowKeys.value = _selectedRowKeys; gridData.push({
} else if (selectFirstDefault) { srfkey: createUUID(),
if (data[0]) { [groupColumn.dataIndex]: group.text,
this.emit("ctrlEvent", { children: deepCopy(children),
tag: controlName,
action: "selectionChange",
data: [deepCopy(data[0])],
});
}
}
}
/**
* @description 使用加载功能模块
* @return {*}
* @memberof GridControl
*/
public useLoad() {
const { viewSubject, controlName } = this.state;
const load = async (opt: any = {}) => {
try {
const {
controlService, context, viewParams, showBusyIndicator, controlAction, gridSort
} = this.state;
const { gridPaging, data } = toRefs(this.state);
if (!controlAction.fetchAction) {
return;
}
const { noSort, minorSortDir, minorSortPSDEF } = gridSort;
let { enablePagingBar, pagination, current, pageSize } = gridPaging.value;
const arg: any = { ...opt };
let _context = deepCopy(context ? context : {});
let _viewParams = deepCopy(viewParams ? viewParams : {});
if (noSort && minorSortDir && minorSortPSDEF) {
Object.assign(_viewParams, { sort: `${minorSortPSDEF},${minorSortDir}` });
}
if (enablePagingBar) {
Object.assign(_viewParams, { page: current - 1, size: pageSize });
}
Object.assign(arg, _viewParams);
const response = await controlService.get(
_context,
arg,
{ action: controlAction.fetchAction, isLoading: showBusyIndicator }
);
if (response.status || response.status == 200) {
data.value = response.data;
if (enablePagingBar) {
pagination['total'] = response.total;
}
this.calcGridAuthState();
this.handleDefaultSelect();
this.handleGridGroup();
this.handleDataAgg();
}
} catch (error) {
// todo 错误异常处理
console.log(error);
}
}
// 订阅viewSubject,监听load行为
if (viewSubject) {
let subscription = viewSubject.subscribe(({ tag, action, data }: IActionParam) => {
if (Object.is(controlName, tag) && Object.is("load", action)) {
load(data)
}
})
// 部件卸载时退订viewSubject
onUnmounted(() => {
subscription.unsubscribe();
}) })
}
return {
load: load
}
}
/**
* @description 使用保存功能模块
* @return {*}
* @memberof GridControl
*/
public useSave() {
const { viewSubject, controlName } = this.state;
const save = async (opt: any = {}) => {
try {
const { controlService, context, viewParams, showBusyIndicator, data, controlAction } = this.state;
// TODO 值规则校验处理
for (const item of data) {
const { updateAction, createAction } = controlAction;
const saveAction: any = item.rowDataState == "update" ? updateAction : item.rowDataState == "create" ? createAction : "";
const saveFunName = item.rowDataState;
if (!saveAction || !saveFunName) {
return;
}
const arg: any = { ...opt };
let _context = deepCopy(context);
let _viewParams = deepCopy(viewParams);
Object.assign(arg, item.getDo());
Object.assign(arg, { viewParams: _viewParams });
const response = await controlService[saveFunName](
_context,
arg,
{ action: saveAction, isLoading: showBusyIndicator },
);
if (response.status || response.status == 200) {
}
}
} catch (error) {
// TODO 错误异常处理
console.log(error);
}
};
// 订阅viewSubject,监听load行为
if (viewSubject) {
let subscription = viewSubject.subscribe(({ tag, action, data }: IActionParam) => {
if (Object.is(controlName, tag) && Object.is("save", action)) {
save(data);
}
});
// 部件卸载时退订viewSubject
onUnmounted(() => {
subscription.unsubscribe();
});
}
return {
save: save,
};
}
/**
* @description 使用删除功能模块
* @param {GridControlProps} props 传入的props
* @return {*}
* @memberof GridControl
*/
public useRemove(props: GridControlProps) {
const { viewSubject, controlName } = this.state;
const remove = async (opt: IParam[] = []) => {
try {
const { controlService, context, viewParams, showBusyIndicator, controlAction, appDeCodeName } = this.state;
const { data } = toRefs(this.state);
if (!controlAction.removeAction) {
return;
}
const _data: IParam[] = [];
opt.forEach((item: IParam, index: number) => {
if (Object.is(item.srfuf, "0")) {
data.value.some((val: any, num: number) => {
if (JSON.stringify(val) == JSON.stringify(item)) {
data.value.splice(num, 1);
return true;
}
}); });
} else { items.value.forEach((item: IParam) => {
_data.push(opt[index]); const index: number = codeListGroup.findIndex((_item: IParam) => Object.is(item[groupField], _item.value));
if (index < 0) {
otherGroup.push(item);
} }
}); });
if (_data.length > 0) { if (otherGroup.length > 0) {
const keys: string[] = []; gridData.push({
_data.forEach((item: IParam) => { srfkey: createUUID(),
keys.push(item.srfkey); [groupColumn.dataIndex]: "其它",
}); children: deepCopy(otherGroup),
const _removeAction = keys.length > 1 ? "removeBatch" : controlAction.removeAction; })
let _context = deepCopy(context);
Object.assign(_context, { [appDeCodeName]: keys });
let _viewParams = deepCopy(viewParams);
const arg: IParam = {
[appDeCodeName]: keys,
};
Object.assign(arg, { viewParams: _viewParams });
const response = await controlService.remove(
_context,
arg,
{ action: _removeAction, isLoading: showBusyIndicator },
);
if (response.status || response.status == 200) {
}
}
} catch (error) {
// TODO 错误异常处理
console.log(error);
}
};
// 订阅viewSubject,监听load行为
if (viewSubject) {
let subscription = viewSubject.subscribe(({ tag, action, data }: IActionParam) => {
if (Object.is(controlName, tag) && Object.is("remove", action)) {
remove(data);
} }
}); items.value = gridData;
// 部件卸载时退订viewSubject
onUnmounted(() => {
subscription.unsubscribe();
});
} }
return {
remove: remove,
};
} }
/** /**
* @description 使用新建行功能模块 * @description 设置表格合并列
* @param {GridControlProps} props 传入的props
* @return {*}
* @memberof GridControl * @memberof GridControl
*/ */
public useNewRow(props: GridControlProps) { public setGridColSpan() {
const { viewSubject, controlName } = this.state; const { columnsModel } = toRefs(this.state);
const newRow = async (opt: any = {}) => { columnsModel.value.forEach((columnModel: IParam) => {
try { const customRender = ({ text, record, index, column }: IParam) => {
const { controlService, context, viewParams, showBusyIndicator, controlAction } = this.state; const option = {
const { data } = toRefs(this.state); props: {} as IParam,
if (!controlAction.loadDraftAction) {
return;
}
let _context = deepCopy(context);
let _viewParams = deepCopy(viewParams);
const arg: any = { ...opt };
Object.assign(arg, { viewParams: _viewParams });
const response = await controlService.loadDraft(
_context,
arg,
{ action: controlAction.loadDraftAction, isLoading: showBusyIndicator },
);
if (response.status || response.status == 200) {
data.value = [...data.value, [response.data]];
}
} catch (error) {
// TODO 错误异常处理
console.log(error);
}
}; };
if (record.children) {
// 订阅viewSubject,监听load行为 if (Object.is(column.columnType, "GROUP")) {
if (viewSubject) { Object.assign(option.props, {
let subscription = viewSubject.subscribe(({ tag, action, data }: IActionParam) => { colSpan: columnsModel.value.length,
if (Object.is(controlName, tag) && Object.is("newRow", action)) {
newRow(data);
}
});
// 部件卸载时退订viewSubject
onUnmounted(() => {
subscription.unsubscribe();
}); });
} } else {
Object.assign(option.props, {
return { colSpan: 0
newRow: newRow,
};
}
/**
* @description 使用自定义模块(蚂蚁金服UI自定义)
* @memberof GridControl
*/
public useCustom() {
const { controlName, selectFirstDefault, rowEditState, rowActiveMode } = this.state;
const { selectedRowKeys, gridPaging } = toRefs(this.state);
let { current, pageSize } = gridPaging.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) {
selectedRowKeys.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 { return option;
columnWidth: 90,
selectedRowKeys: selectedRowKeys.value,
checkStrictly: this.props.multiple ? false : true,
onChange: (_selectedRowKeys: string[], selectedRows: IParam[]) => {
selectedRowKeys.value = _selectedRowKeys;
const selection: IParam[] = [];
selectedRows.forEach((select: IParam) => {
if (!select.children) {
selection.push(select);
} }
Object.assign(columnModel, {
customRender: customRender,
}) })
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().load();
}
}
return {
custom: {
scrollOption,
rowKey,
rowClassName,
customRow,
rowSelectionOption,
resizeColumn,
handleGridChange,
}
}
} }
/** /**
* @description 处理编辑器事件 * @description 获取指定列类型模型
* @param {IActionParam} actionParam 行为参数 * @param {IParam[]} columns 表格列集合
* @param {string} columnType 表格列类型
* @return {*} {*}
* @memberof GridControl * @memberof GridControl
*/ */
public handleEditorEvent(rowIndex: number, actionParam: IActionParam) { private getGridColumn(columns: IParam[], columnType: string): any {
const { tag, action, data } = actionParam; for (const column of columns) {
switch (action) { if (Object.is(column.columnType, columnType)) {
case "valueChange": return deepCopy(column);
this.gridDataChange(rowIndex, tag, data); }
break; if (column.children?.length > 0) {
default: return this.getGridColumn(column.children, columnType);
break;
} }
} }
/**
* @description 处理表格操作列事件
* @param {IActionParam} actionParam 行为参数
* @param {IParam} [row] 表格行数据
* @memberof GridControl
*/
public handleToolbarEvent(actionParam: IActionParam, row?: IParam) {
const { tag, action, data } = actionParam;
console.log('触发界面行为', actionParam, row);
} }
/** /**
* @description 安装部件所有功能模块的方法 * @description 安装部件所有功能模块的方法
* @return {*} * @return {*}
* @memberof GridControl [emit] 事件 * @memberof GridControl
*/ */
public moduleInstall() { public moduleInstall() {
const superParams = super.moduleInstall(); const superParams = super.moduleInstall();
const { load } = this.useLoad();
const { custom } = this.useCustom();
return { return {
...superParams, ...superParams,
load, custom: this.useCustom()
custom,
handleEditorEvent: this.handleEditorEvent.bind(this),
handleToolbarEvent: this.handleToolbarEvent.bind(this),
}; };
} }
} }
import { ControlBase, MainControlProps, MainControlState } from '@core'; import { ControlBase, IParam, MainControlProps, MainControlState, UIUtil } from '@core';
/** /**
* @description 实体部件 * @description 实体部件
...@@ -24,6 +24,20 @@ export class MainControl extends ControlBase { ...@@ -24,6 +24,20 @@ export class MainControl extends ControlBase {
this.state.controlAction = toRef(this.props, 'controlAction') as any; this.state.controlAction = toRef(this.props, 'controlAction') as any;
} }
/**
* 获取指定数据的操作权限
*
* @param {IParam} data 指定数据
* @param {IParam} actionModel 界面行为模型
* @memberof MainControl
*/
public async getActionAuthState(data: IParam, actionModel: IParam) {
const { context, appEntityCodeName } = this.state;
const tempUIservice = await App.getUIService(appEntityCodeName.toLowerCase(), context);
UIUtil.calcActionItemAuthState(data, actionModel, tempUIservice);
return actionModel;
}
/** /**
* @description 安装部件所有功能模块的方法 * @description 安装部件所有功能模块的方法
* @return {*} * @return {*}
......
export * from './md-control-prop'
export * from './md-control-state'
export * from './md-control'
\ No newline at end of file
import { IParam, MainControlProps } from "@core";
/**
* @description 多数据部件的props
* @export
* @interface MDControlProps
* @extends {MainControlProps}
*/
export interface MDControlProps extends MainControlProps {
/**
* @description 是否多选
* @type {boolean}
* @memberof MDControlProps
*/
isMultiple: boolean;
/**
* @description 行编辑状态
* @type {boolean}
* @memberof MDControlProps
*/
rowEditState: boolean;
/**
* @description 行激活模式
* @type {(0 | 1 | 2)} 不激活 | 单击激活 | 双击激活
* @memberof MDControlProps
*/
rowActiveMode: 0 | 1 | 2;
/**
* @description 选中数据
* @type {IParam[]}
* @memberof MDControlProps
*/
selectedData: IParam[];
/**
* @description 是否默认选中第一项数据
* @type {boolean}
* @memberof MDControlProps
*/
isSelectDefault: boolean;
}
\ No newline at end of file
import { IParam, MainControlState } from '@core';
/**
* @description 多数据部件状态
* @export
* @interface MDControlState
* @extends {MainControlState}
*/
export interface MDControlState extends MainControlState {
/**
* @description 多数据部件数据
* @type {IParam[]}
* @memberof MDControlState
*/
items: IParam[];
/**
* @description 是否多选
* @type {boolean}
* @memberof MDControlState
*/
isMultiple: boolean;
/**
* @description 行编辑状态
* @type {boolean}
* @memberof MDControlState
*/
rowEditState: boolean;
/**
* @description 行激活模式
* @type {(0 | 1 | 2)} 不激活 | 单击激活 | 双击激活
* @memberof MDControlState
*/
rowActiveMode: 0 | 1 | 2;
/**
* @description 选中数据
* @type {IParam[]}
* @memberof MDControlState
*/
selectedData: IParam[];
/**
* @description 选中行keys
* @type {string[]}
* @memberof MDControlState
*/
selectedRowKeys: string[];
/**
* @description 是否默认选中第一条数据
* @type {boolean}
* @memberof MDControlState
*/
isSelectDefault: boolean;
}
import { MDControlState, MainControl, deepCopy, IActionParam, IParam } from '@core';
/**
* @description 多数据部件
* @export
* @class MDControl
* @extends {MainControl}
*/
export class MDControl extends MainControl {
/**
* @description 多数据部件状态
* @type {MDControlState}
* @memberof MDControl
*/
public declare state: MDControlState;
/**
* @description
* @memberof MDControl
*/
public setState() {
super.setState();
// 交联输入Props
this.state.isMultiple = toRef(this.props, "isMultiple") as any;
this.state.rowEditState = toRef(this.props, "rowEditState") as any;
this.state.rowActiveMode = toRef(this.props, "rowActiveMode") as any;
this.state.selectedData = toRef(this.props, "selectedData") as any;
this.state.isSelectDefault = toRef(this.props, "isSelectDefault") as any;
}
/**
* @description 使用加载功能模块
* @return {*}
* @memberof MDControl
*/
public useLoad() {
const { viewSubject, controlName } = this.state;
const load = async (opt: any = {}) => {
try {
let {
controlService, context, viewParams, showBusyIndicator, controlAction, mdCtrlSort, mdCtrlPaging
} = this.state;
if (!controlAction.fetchAction) {
return;
}
// 组装查询参数
const arg: any = { ...opt };
let tempContext = deepCopy(context ? context : {});
let tempViewParams = deepCopy(viewParams ? viewParams : {});
const { noSort, minorSortDir, minorSortPSDEF } = mdCtrlSort;
let { enablePagingBar, current, pageSize } = mdCtrlPaging;
if (noSort && minorSortDir && minorSortPSDEF) {
Object.assign(tempViewParams, { sort: `${minorSortPSDEF},${minorSortDir}` });
}
if (enablePagingBar) {
Object.assign(tempViewParams, { page: current - 1, size: pageSize });
}
Object.assign(arg, tempViewParams);
// 组装视图其他查询参数
this.emit('ctrlevent', { tag: controlName.toLowerCase(), action: 'beforeload', data: arg });
const response = await controlService.search(
tempContext,
arg,
{ action: controlAction.fetchAction, isLoading: showBusyIndicator }
);
if (response.status || response.status == 200) {
this.state.items = response.data;
this.emit('ctrlevent', { tag: controlName.toLowerCase(), action: 'load', data: response.data });
if (enablePagingBar) {
this.state.mdCtrlPaging.pagination['total'] = response.total;
}
this.handleStateChange();
}
} catch (error) {
// todo 错误异常处理
console.log(error);
}
}
// 订阅viewSubject,监听load行为
if (viewSubject) {
let subscription = viewSubject.subscribe(({ tag, action, data }: IActionParam) => {
if (Object.is(controlName, tag) && Object.is("load", action)) {
load(data);
}
})
// 部件卸载时退订viewSubject
onUnmounted(() => {
subscription.unsubscribe();
})
}
return { load };
}
/**
* @description 使用保存功能模块
* @return {*}
* @memberof MDControl
*/
public useSave() {
const { viewSubject, controlName } = this.state;
const save = async (opt: any = {}) => {
try {
const { controlService, context, viewParams, showBusyIndicator, items, controlAction } = this.state;
// TODO 值规则校验处理
for (const item of items) {
const { updateAction, createAction } = controlAction;
const saveAction: any = item.rowDataState == "update" ? updateAction : item.rowDataState == "create" ? createAction : "";
if (!saveAction) {
return;
}
const arg: any = { ...opt };
let _context = deepCopy(context);
let _viewParams = deepCopy(viewParams);
Object.assign(arg, item.getDo());
Object.assign(arg, { viewParams: _viewParams });
const response = await controlService[saveAction](
_context,
arg,
{ action: saveAction, isLoading: showBusyIndicator },
);
if (response.status || response.status == 200) {
}
}
} catch (error) {
// TODO 错误异常处理
console.log(error);
}
};
// 订阅viewSubject,监听load行为
if (viewSubject) {
let subscription = viewSubject.subscribe(({ tag, action, data }: IActionParam) => {
if (Object.is(controlName, tag) && Object.is("save", action)) {
save(data);
}
});
// 部件卸载时退订viewSubject
onUnmounted(() => {
subscription.unsubscribe();
});
}
return { save };
}
/**
* @description 使用删除功能模块
* @return {*}
* @memberof MDControl
*/
public useRemove() {
const { viewSubject, controlName } = this.state;
const remove = async (opt: IParam[] = []) => {
try {
const { controlService, context, viewParams, showBusyIndicator, controlAction, appDeCodeName } = this.state;
const { items } = toRefs(this.state);
if (!controlAction.removeAction) {
return;
}
const _data: IParam[] = [];
opt.forEach((item: IParam, index: number) => {
if (Object.is(item.srfuf, "0")) {
items.value.some((val: any, num: number) => {
if (JSON.stringify(val) == JSON.stringify(item)) {
items.value.splice(num, 1);
return true;
}
});
} else {
_data.push(opt[index]);
}
});
if (_data.length > 0) {
const keys: string[] = [];
_data.forEach((item: IParam) => {
keys.push(item.srfkey);
});
const _removeAction = keys.length > 1 ? "removeBatch" : controlAction.removeAction;
let _context = deepCopy(context);
Object.assign(_context, { [appDeCodeName]: keys });
let _viewParams = deepCopy(viewParams);
const arg: IParam = {
[appDeCodeName]: keys,
};
Object.assign(arg, { viewParams: _viewParams });
const response = await controlService.remove(
_context,
arg,
{ action: _removeAction, isLoading: showBusyIndicator },
);
if (response.status || response.status == 200) {
}
}
} catch (error) {
// TODO 错误异常处理
console.log(error);
}
};
// 订阅viewSubject,监听load行为
if (viewSubject) {
let subscription = viewSubject.subscribe(({ tag, action, data }: IActionParam) => {
if (Object.is(controlName, tag) && Object.is("remove", action)) {
remove(data);
}
});
// 部件卸载时退订viewSubject
onUnmounted(() => {
subscription.unsubscribe();
});
}
return { remove };
}
/**
* @description 使用新建功能模块
* @return {*}
* @memberof MDControl
*/
public useNewRow() {
const { viewSubject, controlName } = this.state;
const newRow = async (opt: any = {}) => {
try {
const { controlService, context, viewParams, showBusyIndicator, controlAction } = this.state;
const { items } = toRefs(this.state);
if (!controlAction.loadDraftAction) {
return;
}
let _context = deepCopy(context);
let _viewParams = deepCopy(viewParams);
const arg: any = { ...opt };
Object.assign(arg, { viewParams: _viewParams });
const response = await controlService.loadDraft(
_context,
arg,
{ action: controlAction.loadDraftAction, isLoading: showBusyIndicator },
);
if (response.status || response.status == 200) {
items.value = [...items.value, [response.data]];
}
} catch (error) {
// TODO 错误异常处理
console.log(error);
}
};
// 订阅viewSubject,监听load行为
if (viewSubject) {
let subscription = viewSubject.subscribe(({ tag, action, data }: IActionParam) => {
if (Object.is(controlName, tag) && Object.is("newRow", action)) {
newRow(data);
}
});
// 部件卸载时退订viewSubject
onUnmounted(() => {
subscription.unsubscribe();
});
}
return {
newRow,
};
}
/**
* 处理数据状态变化(逻辑数据+UI)
*
* @memberof MDControl
*/
public handleStateChange() { }
/**
* 处理数据分组
*
* @memberof MDControl
*/
public handleDataGroup() {
const { enableGroup, groupField, groupMode } = this.state.mdCtrlGroup;
if (enableGroup && groupField && !Object.is(groupMode, "NONE")) {
if (Object.is(groupMode, "AUTO")) {
this.autoGroupData();
} else if (Object.is(groupMode, "CODELIST")) {
this.codeListGroupData();
}
}
}
/**
* 自动分组
*
* @protected
* @memberof MDControl
*/
protected autoGroupData() { }
/**
* 代码表分组
*
* @protected
* @memberof MDControl
*/
protected codeListGroupData() { }
/**
* 获取当前激活数据
*
* @memberof MDControl
*/
public getData(): IParam[] {
const { selectedData } = this.state;
return selectedData;
}
/**
* @description 安装部件所有功能模块的方法
* @return {*}
* @memberof MDControl
*/
public moduleInstall() {
const superParams = super.moduleInstall();
return {
...superParams,
load: this.useLoad(),
save: this.useSave(),
romove: this.useRemove(),
new: this.useNewRow()
};
}
}
...@@ -23,7 +23,6 @@ export class GridService<T extends ControlVOBase> extends ControlServiceBase<T> ...@@ -23,7 +23,6 @@ export class GridService<T extends ControlVOBase> extends ControlServiceBase<T>
// todo主键 // todo主键
const action = hasFunction(_entityService, opts.action) ? opts.action : 'GetDraft'; const action = hasFunction(_entityService, opts.action) ? opts.action : 'GetDraft';
const response = await _entityService[action](Context, Data, opts.isLoading); const response = await _entityService[action](Context, Data, opts.isLoading);
// this.setRemoteCopyData(response);
response.data = this.newControlVO(response.data); response.data = this.newControlVO(response.data);
response.data.srfuf = '0'; response.data.srfuf = '0';
return this.handleResponse(response, opts); return this.handleResponse(response, opts);
...@@ -37,13 +36,12 @@ export class GridService<T extends ControlVOBase> extends ControlServiceBase<T> ...@@ -37,13 +36,12 @@ export class GridService<T extends ControlVOBase> extends ControlServiceBase<T>
* @return {*} {Promise<any>} * @return {*} {Promise<any>}
* @memberof GridService * @memberof GridService
*/ */
public async get(context: IParam, data: IParam, opts: { action: string; isLoading?: boolean }): Promise<any> { public async search(context: IParam, data: IParam, opts: { action: string; isLoading?: boolean }): Promise<any> {
let _entityService: any = this.entityService; let _entityService: any = this.entityService;
const { context: Context, data: Data } = this.handleRequestData(context, data, opts); const { context: Context, data: Data } = this.handleRequestData(context, data, opts);
const action = hasFunction(_entityService, opts.action) ? opts.action : 'GET'; const action = hasFunction(_entityService, opts.action) ? opts.action : 'GET';
const response = await _entityService[action](Context, Data, opts.isLoading); const response = await _entityService[action](Context, Data, opts.isLoading);
//this.setCopynativeData(response.data); response.data?.forEach((item: IParam) => {
response.data?.forEach((item: IParam) =>{
item = this.newControlVO(item); item = this.newControlVO(item);
}) })
return this.handleResponse(response, opts); return this.handleResponse(response, opts);
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册