Skip to content

Commit

Permalink
chore: CRUD 调整方便外围覆盖
Browse files Browse the repository at this point in the history
  • Loading branch information
@2betop
2betop committed Dec 23, 2024
1 parent 856539e commit 8e4c54d
Show file tree
Hide file tree
Showing 23 changed files with 1,301 additions and 414 deletions.
536 changes: 517 additions & 19 deletions docs/zh-CN/components/crud.md
View file

Large diffs are not rendered by default.

54 changes: 27 additions & 27 deletions docs/zh-CN/components/table.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1860,38 +1860,38 @@ popOver 的其它配置请参考 [popover](./popover)

### 列配置属性表

| 属性名 | 类型 | 默认值 | 说明 | 版本 |
| ----------- | --------------------------------------------- | ------ | ------------------------ | -------- |
| label | [模板](../../docs/concepts/template) | | 表头文本内容 | |
| name | `string` | | 通过名称关联数据 | |
| width | `number` \| `string` | | 列宽 | |
| remark | | | 提示信息 | |
| fixed | `left` \| `right` \| `none` | | 是否固定当前列 | |
| popOver | | | 弹出框 | |
| copyable | `boolean` 或 `{icon: string, content:string}` | | 是否可复制 | |
| style | `object` | | 单元格自定义样式 | |
| innerStyle | `object` | | 单元格内部组件自定义样式 | `2.8.1` |
| align | `left` \| `right` \| `center` \| `justify` | | 单元格对齐方式 | ` 1.4.0` |
| headerAlign | `left` \| `right` \| `center` \| `justify` | | 表头单元格对齐方式 | `6.7.0` |
| vAlign | `top` \| `middle` \| `bottom` | | 单元格垂直对齐方式 | `6.7.0` |
| textOverflow | `string` |`default`| 文本溢出后展示形式，默认换行处理。可选值 `ellipsis` 溢出隐藏展示， `noWrap` 不换行展示(仅在列为静态文本时生效) | `6.10.0` |
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
| ------------ | --------------------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------- | -------- |
| label | [模板](../../docs/concepts/template) | | 表头文本内容 | |
| name | `string` | | 通过名称关联数据 | |
| width | `number` \| `string` | | 列宽 | |
| remark | | | 提示信息 | |
| fixed | `left` \| `right` \| `none` | | 是否固定当前列 | |
| popOver | | | 弹出框 | |
| copyable | `boolean` 或 `{icon: string, content:string}` | | 是否可复制 | |
| style | `object` | | 单元格自定义样式 | |
| innerStyle | `object` | | 单元格内部组件自定义样式 | `2.8.1` |
| align | `left` \| `right` \| `center` \| `justify` | | 单元格对齐方式 | ` 1.4.0` |
| headerAlign | `left` \| `right` \| `center` \| `justify` | | 表头单元格对齐方式 | `6.7.0` |
| vAlign | `top` \| `middle` \| `bottom` | | 单元格垂直对齐方式 | `6.7.0` |
| textOverflow | `string` | `default` | 文本溢出后展示形式，默认换行处理。可选值 `ellipsis` 溢出隐藏展示， `noWrap` 不换行展示(仅在列为静态文本时生效) | `6.10.0` |

## 事件表

当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细查看[事件动作](../../docs/concepts/event-action)。

| 事件名称 | 事件参数 | 说明 |
| -------------- | ----------------------------------------------------------------------------------------- | -------------------- |
| selectedChange | `selectedItems: item[]` 已选择行<br/>`unSelectedItems: item[]` 未选择行 | 手动选择表格项时触发 |
| columnSort | `orderBy: string` 列排序列名<br/>`orderDir: string` 列排序值 | 点击列排序时触发 |
| columnFilter | `filterName: string` 列筛选列名<br/>`filterValue: string` 列筛选值 | 点击列筛选时触发 |
| columnSearch | `searchName: string` 列搜索列名<br/>`searchValue: string` 列搜索数据 | 点击列搜索时触发 |
| orderChange | `movedItems: item[]` 已排序数据 | 手动拖拽行排序时触发 |
| columnToggled | `columns: item[]` 当前显示的列配置数据 | 点击自定义列时触发 |
| rowClick | `item: object` 行点击数据<br/>`index: number` 行索引 <br />`indexPath: string` 行索引路径 | 单击整行时触发 |
| rowDbClick | `item: object` 行点击数据<br/>`index: number` 行索引 <br />`indexPath: string` 行索引路径 | 双击整行时触发 |
| rowMouseEnter | `item: object` 行移入数据<br/>`index: number` 行索引 <br />`indexPath: string` 行索引路径 | 移入整行时触发 |
| rowMouseLeave | `item: object` 行移出数据<br/>`index: number` 行索引 <br />`indexPath: string` 行索引路径 | 移出整行时触发 |
| 事件名称 | 事件参数 | 说明 |
| -------------- | -------------------------------------------------------------------------------------------------------------------- | -------------------- |
| selectedChange | `selectedItems: item[]` 已选择行<br/>`selectedIndexes: string[]` 已选择行索引<br/>`unSelectedItems: item[]` 未选择行 | 手动选择表格项时触发 |
| columnSort | `orderBy: string` 列排序列名<br/>`orderDir: string` 列排序值 | 点击列排序时触发 |
| columnFilter | `filterName: string` 列筛选列名<br/>`filterValue: string` 列筛选值 | 点击列筛选时触发 |
| columnSearch | `searchName: string` 列搜索列名<br/>`searchValue: string` 列搜索数据 | 点击列搜索时触发 |
| orderChange | `movedItems: item[]` 已排序数据 | 手动拖拽行排序时触发 |
| columnToggled | `columns: item[]` 当前显示的列配置数据 | 点击自定义列时触发 |
| rowClick | `item: object` 行点击数据<br/>`index: number` 行索引 <br />`indexPath: string` 行索引路径 | 单击整行时触发 |
| rowDbClick | `item: object` 行点击数据<br/>`index: number` 行索引 <br />`indexPath: string` 行索引路径 | 双击整行时触发 |
| rowMouseEnter | `item: object` 行移入数据<br/>`index: number` 行索引 <br />`indexPath: string` 行索引路径 | 移入整行时触发 |
| rowMouseLeave | `item: object` 行移出数据<br/>`index: number` 行索引 <br />`indexPath: string` 行索引路径 | 移出整行时触发 |

### selectedChange

Expand Down
12 changes: 6 additions & 6 deletions packages/amis-core/src/RootRenderer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -234,11 +234,11 @@ export class RootRenderer extends React.Component<RootRendererProps> {
);
});
} else if (action.actionType === 'toast') {
action.toast?.items?.forEach((item: any) => {
action.toast?.items?.forEach(({level, body, title, ...item}: any) => {
env.notify(
item.level || 'info',
item.body
? render('body', item.body, {
level || 'info',
body
? render('body', body, {
...this.props,
data: ctx,
context: store.context
Expand All @@ -247,8 +247,8 @@ export class RootRenderer extends React.Component<RootRendererProps> {
{
...action.toast,
...item,
title: item.title
? render('title', item.title, {
title: title
? render('title', title, {
...this.props,
data: ctx,
context: store.context
Expand Down
47 changes: 32 additions & 15 deletions packages/amis-core/src/store/crud.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
applyFilters,
isEmpty,
qsstringify,
findTreeIndex,
getVariable
} from '../utils/helper';
import {Api, Payload, fetchOptions, ActionObject, ApiObject} from '../types';
Expand Down Expand Up @@ -94,22 +95,16 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
// 包两层，主要是为了处理以下 case
// 里面放了个 form，form 提交过来的时候不希望把 items 这些发送过来。
// 因为会把数据呈现在地址栏上。
return createObject(
createObject(self.data, {
items: self.items.concat(),
selectedItems: self.selectedItems.concat(),
unSelectedItems: self.unSelectedItems.concat()
}),
{...self.query}
);
return createObject(createObject(self.data, this.eventContext), {
...self.query
});
},

get mergedData() {
return extendObject(self.data, {
...self.query,
...self.data,
selectedItems: self.selectedItems,
unSelectedItems: self.unSelectedItems
...this.eventContext,
...self.data
});
},

Expand All @@ -121,6 +116,10 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
return self.selectedItems.concat();
},

get itemsAsArray() {
return self.items.concat();
},

fetchCtxOf(
data: any,
options: {
Expand All @@ -134,6 +133,23 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
[options.perPageField || 'perPage']: self.perPage,
...data
});
},

get eventContext() {
const context = {
items: self.items.concat(),
selectedItems: self.selectedItems.concat(),
unSelectedItems: self.unSelectedItems.concat(),
selectedIndexes: self.selectedItems.map(
item =>
findTreeIndex(
self.items,
i => (item.__pristine || item) === (i.__pristine || i)
)?.join('.') || '-1'
)
};

return context;
}
}))
.actions(self => {
Expand Down Expand Up @@ -727,9 +743,7 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
total: self.total,
page: self.page,
perPage: self.perPage,
items: self.items.concat(),
selectedItems: self.selectedItems.concat(),
unSelectedItems: self.unSelectedItems.concat()
...self.eventContext
});
};

Expand Down Expand Up @@ -776,7 +790,10 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
exportAsCSV,
updateColumns,
updateTotal,
resetSelection
resetSelection,
replaceItems(items: Array<any>) {
self.items.replace(items);
}
};
});

Expand Down
67 changes: 58 additions & 9 deletions packages/amis-core/src/store/list.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,7 @@ export const Item = types
index: self.index,

// 只有table时，也可以获取选中行
selectedItems: listStore.selectedItems.map(item => item.data),
unSelectedItems: listStore.unSelectedItems.map(item => item.data)
...listStore.eventContext
}),
self.data
);
Expand Down Expand Up @@ -101,6 +100,13 @@ export const ListStore = iRendererStore
.named('ListStore')
.props({
items: types.array(Item),

// 记录原始列表和原始选中的列表
// 因为如果是前端分页，上层 crud 或者 input-table 下发到这层的
// 是某个页区间的数据，这个时候 items 和 selectedItems 会少很多条
fullItems: types.optional(types.array(types.frozen()), []),
fullSelectedItems: types.optional(types.array(types.frozen()), []),

selectedItems: types.array(types.reference(Item)),
primaryField: 'id',
orderBy: '',
Expand Down Expand Up @@ -171,6 +177,45 @@ export const ListStore = iRendererStore

get movedItems() {
return getMovedItems();
},

/**
* 构建事件的上下文数据
* @param buildChain
* @returns
*/
get eventContext() {
const context = {
selectedItems: self.selectedItems.map(item => item.data),
selectedIndexes: self.selectedItems.map(item => item.index),
items: self.items.map(item => item.data),
unSelectedItems: this.unSelectedItems.map(item => item.data)
};

// 如果是前端分页情况，需要根据全量数据计算
// 如果不是前端分页，数据都没有返回，那种就没办法支持全量数据信息了
if (self.fullItems.length > self.items.length) {
// todo 这里的选择顺序会一直变，这个有影响吗?
const selectedItems = self.fullSelectedItems
.filter(
item =>
!self.items.find(
row => row.pristine === (item.__pristine || item)
)
)
.concat(context.selectedItems);

context.selectedItems = selectedItems;
context.items = self.fullItems.concat();
context.unSelectedItems = self.fullItems.filter(
item => !selectedItems.includes(item)
);
context.selectedIndexes = selectedItems.map(item =>
self.fullItems.indexOf(item.__pristine || item)
);
}

return context;
}
};
})
Expand All @@ -196,7 +241,11 @@ export const ListStore = iRendererStore
(self.itemDraggableOn = config.itemDraggableOn);
}

function initItems(items: Array<object>) {
function initItems(
items: Array<object>,
fullItems?: Array<any>,
fullSelectedItems?: Array<any>
) {
let arr = items.map((item, key) => {
item = isObject(item)
? item
Expand All @@ -209,14 +258,16 @@ export const ListStore = iRendererStore
id: guid(),
index: key,
newIndex: key,
pristine: item,
data: item,
modified: false
pristine: (item as any).__pristine || item,
data: item
};
});
self.selectedItems.clear();
self.items.replace(arr as Array<IItem>);
self.dragging = false;
Array.isArray(fullItems) && self.fullItems.replace(fullItems);
Array.isArray(fullSelectedItems) &&
self.fullSelectedItems.replace(fullSelectedItems);
}

function updateSelected(selected: Array<any>, valueField?: string) {
Expand Down Expand Up @@ -319,9 +370,7 @@ export const ListStore = iRendererStore

function getData(superData: any): any {
return createObject(superData, {
items: self.items.map(item => item.data),
selectedItems: self.selectedItems.map(item => item.data),
unSelectedItems: self.unSelectedItems.map(item => item.data)
...self.eventContext
});
}

Expand Down
Loading

0 comments on commit 8e4c54d

Please sign in to comment.