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

update:更新

上级 2bff2322
......@@ -72,8 +72,7 @@ public declare state: GridViewState;
const superParams = super.moduleInstall();
return {
...superParams,
grid: this.grid,
onSearchFormSearch: this.onSearchFormSearch.bind(this)
grid: this.grid
};
}
}
......@@ -127,6 +127,12 @@ export class MDView extends MainView {
* @memberof MDView
*/
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')) {
this.doEdit(args);
}
......@@ -136,12 +142,6 @@ export class MDView extends MainView {
if (Object.is(eventName, 'selectionchange')) {
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 {
if (this.getSearchBar()) {
Object.assign(args, this.getSearchBar().getData());
}
Object.assign(args, { test: 111 });
// if (this.view && !this.view.isExpandSearchForm) {
// Object.assign(args, { query: this.view.query });
// }
......@@ -181,7 +182,7 @@ export class MDView extends MainView {
* @memberof MDView
*/
public MDCtrlLoaded(args: any) {
throw new Error('Method not implemented.');
console.log("数据加载完成", args);
}
/**
......
......@@ -50,7 +50,6 @@ export class PickupView extends MainView {
}
public handleCtrlEvent(actionParam: IActionParam) {
debugger
const { tag, action, data } = actionParam;
// TODO
......
import { ControlPropsBase, ControlStateBase, IParam, UIBase } from '@core';
import { ControlPropsBase, ControlStateBase, IActionParam, IParam, UIBase } from '@core';
/**
* @description 部件基类
......@@ -31,11 +31,6 @@ export class ControlBase {
*/
public declare emit: Function;
/**
* Creates an instance of ControlBase.
* @param {*} options 配置参数
* @memberof ControlBase
*/
/**
* Creates an instance of ControlBase.
* @param {*} options 配置参数
......@@ -68,8 +63,15 @@ export class ControlBase {
// 把Ref赋值到State上进行解包
this.state.context = context;
this.state.viewParams = viewParams;
}
return { context, viewParams };
/**
* 获取当前激活数据
*
* @memberof ControlBase
*/
public getData(): IParam[] {
return [];
}
/**
......@@ -83,7 +85,8 @@ export class ControlBase {
this.setState();
this.useControlContextParams();
return {
state: this.state
state: this.state,
activeData: this.getData()
};
}
}
import { IParam, MainControlProps } from "@core";
import { MDControlProps } from "@core";
/**
* @description 表格部件的props
* @export
* @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 表格部件状态
* @export
* @interface GridControlState
* @extends {MainControlState}
* @extends {MDControlState}
*/
export interface GridControlState extends MainControlState {
/**
* @description 表格数据集合
* @type {IParam[]}
* @memberof GridControlState
*/
data: IParam[];
export interface GridControlState extends MDControlState {
/**
* @description 表格列模型
......@@ -36,48 +29,6 @@ export interface GridControlState extends MainControlState {
*/
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 表格聚合
* @type {IParam}
......@@ -85,24 +36,4 @@ export interface GridControlState extends MainControlState {
*/
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 { UIUtil, deepCopy, GridControlProps, GridControlState, IActionParam, IParam, MainControl } from '@core';
import { deepCopy, GridControlState, IActionParam, IParam, MDControl } from "@core";
import { createUUID } from "qx-util";
/**
* @description 表格部件
* @export
* @class GridControl
* @extends {MainControl}
* @extends {MDControl}
*/
export class GridControl extends MainControl {
export class GridControl extends MDControl {
/**
* @description 部件状态
......@@ -23,203 +24,219 @@ export class GridControl extends MainControl {
*/
public 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 表格数据改变
* @param {number} rowIndex 行索引
* @param {string} name 表格列属性名称
* @param {*} value 表格列属性值
* @description 使用自定义模块(蚂蚁金服UI自定义)
* @memberof GridControl
*/
public gridDataChange(rowIndex: number, name: string, value: any) {
const { data } = toRefs(this.state);
if (data.value[rowIndex][name] !== value) {
data.value[rowIndex][name] = value;
data.value[rowIndex]["rowDataState"] = "update";
public useCustom() {
const { controlName, selectFirstDefault, rowEditState, rowActiveMode } = this.state;
const { selectedRowKeys } = toRefs(this.state);
// 滚动条配置
const scrollOption = computed(() => {
return {
scrollToFirstRowOnChange: true,
x: '110%',
y: '690px',
}
});
// 指定表格行key
const rowKey = (record: IParam) => {
return record.srfkey;
}
/**
* @description 获取界面行为权限状态
* @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 rowClassName = (record: IParam, index: number) => {
return index % 2 === 1 ? "table-striped" : null;
}
/**
* @description 获取指定列类型模型
* @param {IParam[]} columns 表格列集合
* @param {string} columnType 表格列类型
* @return {*} {*}
* @memberof GridControl
*/
public getGridColumn(columns: IParam[], columnType: string): any {
for (const column of columns) {
if (Object.is(column.columnType, columnType)) {
return deepCopy(column);
// 表格行自定义
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)] })
}
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 gridData: IParam[] = [];
autoGroup.forEach((group: string, index: number) => {
const children: IParam[] = [];
data.value.forEach((item: IParam) => {
if (Object.is(group, item[groupField])) {
children.push(item);
};
}
// 表格选择功能配置
const rowSelectionOption = computed(() => {
if (selectFirstDefault) {
return false;
}
return {
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);
}
})
gridData.push({
srfkey: createUUID(),
[groupColumn.dataIndex]: group,
children: deepCopy(children),
})
this.emit("ctrlevent", { tag: controlName, action: "selectionChange", data: selection })
},
};
});
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
*/
public async codeListGroup() {
const { gridGroup } = this.state;
const { data, columnsModel } = toRefs(this.state);
const { groupField } = gridGroup;
// TODO 代码表数据
let codeListGroup: IParam[] = [];
if (codeListGroup.length > 0) {
const groupColumn = this.getGridColumn(columnsModel.value, "GROUP");
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),
})
public onEditorEvent(rowIndex: number, actionParam: IActionParam) {
const { tag, action, data } = actionParam;
switch (action) {
case "valueChange":
const { items } = toRefs(this.state);
if (items.value[rowIndex][tag] !== data) {
items.value[rowIndex][tag] = data;
items.value[rowIndex]["rowDataState"] = "update";
}
data.value = gridData;
break;
default:
break;
}
}
/**
* @description 计算表格行为权限
* @description 处理表格操作列事件
* @param {IActionParam} actionParam 行为参数
* @param {IParam} [row] 表格行数据
* @memberof GridControl
*/
public calcGridAuthState() {
const { data, columnsModel } = toRefs(this.state);
let columnModel = this.getGridColumn(columnsModel.value, "UAGRIDCOLUMN");
if (columnModel) {
data.value.forEach((item: IParam) => {
Object.assign(item, {
[columnModel.dataIndex]: this.getActionAuthState(item),
})
})
public onActionColEvent(actionParam: IActionParam, row?: IParam) {
const { tag, action, data } = actionParam;
console.log('触发界面行为', actionParam, row);
}
/**
* 处理数据状态变化(逻辑数据+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
*/
public setGridColSpan() {
const { columnsModel } = toRefs(this.state);
columnsModel.value.forEach((columnModel: IParam) => {
const customRender = ({ text, record, index, column }: IParam) => {
const option = {
props: {} as IParam,
};
if (record.children) {
if (Object.is(column.columnType, "GROUP")) {
Object.assign(option.props, {
colSpan: columnsModel.value.length,
public handleDefaultSelect() {
const { selectedData, isSelectDefault, controlName, items } = this.state;
const { selectedRowKeys } = toRefs(this.state);
if (selectedData?.length > 0) {
const _selectedRowKeys: string[] = [];
selectedData.forEach((selected: IParam) => {
if (selected.srfkey) {
_selectedRowKeys.push(selected.srfkey);
}
});
} else {
Object.assign(option.props, {
colSpan: 0
selectedRowKeys.value = _selectedRowKeys;
} else if (isSelectDefault) {
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
*/
public handleGridGroup() {
const { gridGroup } = this.state;
const { enableGroup, groupField, groupMode } = gridGroup;
if (enableGroup && groupField && !Object.is(groupMode, "NONE")) {
if (Object.is(groupMode, "AUTO")) {
this.autoGroup();
} else if (Object.is(groupMode, "CODELIST")) {
this.codeListGroup();
public async handleDataAgg() {
const { mdCtrlPaging, mdCtrlGroup, columnsModel } = this.state;
const { gridAgg } = toRefs(this.state);
let { aggMode, aggData } = gridAgg.value;
const { enableGroup } = mdCtrlGroup;
if (!Object.is(aggMode, "NONE")) {
const { enablePagingBar, current, pageSize } = mdCtrlPaging;
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 远程聚合
*
* @memberof GridControl
*/
public async remoteAgg(): Promise<IParam[]> {
......@@ -231,6 +248,7 @@ export class GridControl extends MainControl {
/**
* @description 获取聚合值
*
* @param {IParam[]} aggData 聚合数据
* @param {string} column 列模型
* @memberof GridControl
......@@ -275,454 +293,146 @@ export class GridControl extends MainControl {
}
/**
* @description 处理数据聚合
* 自动分组
*
* @protected
* @memberof GridControl
*/
public async handleDataAgg() {
const { gridPaging, gridGroup, columnsModel } = this.state;
const { gridAgg } = toRefs(this.state);
let { aggMode, aggData } = gridAgg.value;
const { enableGroup } = gridGroup;
if (!Object.is(aggMode, "NONE")) {
const { enablePagingBar, current, pageSize } = gridPaging;
let dataAgg: IParam[] = [];
if (Object.is(aggMode, "PAGE")) {
const dataRef = toRef(this.state, "data");
dataAgg = [...dataRef.value];
} else if (Object.is(aggMode, "ALL")) {
dataAgg = await this.remoteAgg();
protected autoGroupData() {
const { gridGroup } = this.state;
const { items, columnsModel } = toRefs(this.state);
const { groupField } = gridGroup;
let autoGroup: string[] = [];
items.value.forEach((item: IParam) => {
if (item.hasOwnProperty(groupField)) {
autoGroup.push(item[groupField]);
}
if (enablePagingBar) {
const start: number = (current - 1) * pageSize > 0 ? (current - 1) * pageSize - 1 : 0;
const end: number = current * pageSize;
dataAgg = dataAgg.slice(start, end);
})
autoGroup = [...new Set(autoGroup)];
if (autoGroup.length > 0) {
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() {
const { selectedData, selectFirstDefault, controlName, data } = this.state;
const { selectedRowKeys } = toRefs(this.state);
if (selectedData?.length > 0) {
const _selectedRowKeys: string[] = [];
selectedData.forEach((selected: IParam) => {
if (selected.srfkey) {
_selectedRowKeys.push(selected.srfkey);
protected codeListGroupData() {
const { gridGroup } = this.state;
const { items, columnsModel } = toRefs(this.state);
const { groupField } = gridGroup;
// TODO 代码表数据
let codeListGroup: IParam[] = [];
if (codeListGroup.length > 0) {
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;
} else if (selectFirstDefault) {
if (data[0]) {
this.emit("ctrlEvent", {
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();
gridData.push({
srfkey: createUUID(),
[groupColumn.dataIndex]: group.text,
children: deepCopy(children),
})
}
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 {
_data.push(opt[index]);
items.value.forEach((item: IParam) => {
const index: number = codeListGroup.findIndex((_item: IParam) => Object.is(item[groupField], _item.value));
if (index < 0) {
otherGroup.push(item);
}
});
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);
if (otherGroup.length > 0) {
gridData.push({
srfkey: createUUID(),
[groupColumn.dataIndex]: "其它",
children: deepCopy(otherGroup),
})
}
});
// 部件卸载时退订viewSubject
onUnmounted(() => {
subscription.unsubscribe();
});
items.value = gridData;
}
return {
remove: remove,
};
}
/**
* @description 使用新建行功能模块
* @param {GridControlProps} props 传入的props
* @return {*}
* @description 设置表格合并列
* @memberof GridControl
*/
public useNewRow(props: GridControlProps) {
const { viewSubject, controlName } = this.state;
const newRow = async (opt: any = {}) => {
try {
const { controlService, context, viewParams, showBusyIndicator, controlAction } = this.state;
const { data } = 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) {
data.value = [...data.value, [response.data]];
}
} catch (error) {
// TODO 错误异常处理
console.log(error);
}
public setGridColSpan() {
const { columnsModel } = toRefs(this.state);
columnsModel.value.forEach((columnModel: IParam) => {
const customRender = ({ text, record, index, column }: IParam) => {
const option = {
props: {} as IParam,
};
// 订阅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();
if (record.children) {
if (Object.is(column.columnType, "GROUP")) {
Object.assign(option.props, {
colSpan: columnsModel.value.length,
});
}
return {
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',
}
} else {
Object.assign(option.props, {
colSpan: 0
});
// 指定表格行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 {
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);
return option;
}
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 处理编辑器事件
* @param {IActionParam} actionParam 行为参数
* @description 获取指定列类型模型
* @param {IParam[]} columns 表格列集合
* @param {string} columnType 表格列类型
* @return {*} {*}
* @memberof GridControl
*/
public handleEditorEvent(rowIndex: number, actionParam: IActionParam) {
const { tag, action, data } = actionParam;
switch (action) {
case "valueChange":
this.gridDataChange(rowIndex, tag, data);
break;
default:
break;
private getGridColumn(columns: IParam[], columnType: string): any {
for (const column of columns) {
if (Object.is(column.columnType, columnType)) {
return deepCopy(column);
}
if (column.children?.length > 0) {
return this.getGridColumn(column.children, columnType);
}
}
/**
* @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 安装部件所有功能模块的方法
* @return {*}
* @memberof GridControl [emit] 事件
* @memberof GridControl
*/
public moduleInstall() {
const superParams = super.moduleInstall();
const { load } = this.useLoad();
const { custom } = this.useCustom();
return {
...superParams,
load,
custom,
handleEditorEvent: this.handleEditorEvent.bind(this),
handleToolbarEvent: this.handleToolbarEvent.bind(this),
custom: this.useCustom()
};
}
}
import { ControlBase, MainControlProps, MainControlState } from '@core';
import { ControlBase, IParam, MainControlProps, MainControlState, UIUtil } from '@core';
/**
* @description 实体部件
......@@ -24,6 +24,20 @@ export class MainControl extends ControlBase {
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 安装部件所有功能模块的方法
* @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>
// todo主键
const action = hasFunction(_entityService, opts.action) ? opts.action : 'GetDraft';
const response = await _entityService[action](Context, Data, opts.isLoading);
// this.setRemoteCopyData(response);
response.data = this.newControlVO(response.data);
response.data.srfuf = '0';
return this.handleResponse(response, opts);
......@@ -37,13 +36,12 @@ export class GridService<T extends ControlVOBase> extends ControlServiceBase<T>
* @return {*} {Promise<any>}
* @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;
const { context: Context, data: Data } = this.handleRequestData(context, data, opts);
const action = hasFunction(_entityService, opts.action) ? opts.action : 'GET';
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);
})
return this.handleResponse(response, opts);
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册