neo-cmp-cli 1.3.3 → 1.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/package.json +1 -1
- package/src/template/antd-custom-cmp-template/package.json +1 -1
- package/src/template/echarts-custom-cmp-template/package.json +1 -1
- package/src/template/neo-custom-cmp-template/package.json +1 -1
- package/src/template/neo-custom-cmp-template/src/components/{object-card-list → entity-card-list}/README.md +4 -4
- package/src/template/neo-custom-cmp-template/src/components/{object-card-list → entity-card-list}/index.tsx +35 -34
- package/src/template/neo-custom-cmp-template/src/components/{object-card-list → entity-card-list}/model.ts +5 -5
- package/src/template/neo-custom-cmp-template/src/components/{object-card-list → entity-card-list}/style.scss +1 -1
- package/src/template/neo-custom-cmp-template/src/components/entity-detail/index.tsx +21 -29
- package/src/template/neo-custom-cmp-template/src/components/entity-detail/model.ts +2 -0
- package/src/template/neo-custom-cmp-template/src/components/{object-form → entity-form}/README.md +5 -5
- package/src/template/neo-custom-cmp-template/src/components/{object-form → entity-form}/index.tsx +8 -8
- package/src/template/neo-custom-cmp-template/src/components/{object-form → entity-form}/model.ts +6 -3
- package/src/template/neo-custom-cmp-template/src/components/{object-form → entity-form}/style.scss +1 -1
- package/src/template/neo-custom-cmp-template/src/components/{xobject-table → entity-table}/README.md +2 -2
- package/src/template/neo-custom-cmp-template/src/components/{xobject-table → entity-table}/index.tsx +11 -9
- package/src/template/neo-custom-cmp-template/src/components/{xobject-table → entity-table}/model.ts +3 -3
- package/src/template/neo-custom-cmp-template/src/components/{xobject-table → entity-table}/style.scss +1 -1
- package/src/template/react-custom-cmp-template/package.json +1 -1
- package/src/template/react-ts-custom-cmp-template/package.json +1 -1
- package/src/template/vue2-custom-cmp-template/package.json +1 -1
package/README.md
CHANGED
|
@@ -11,7 +11,7 @@ neo-cmp-cli 是 Neo 自定义组件开发工具，基于 [AKFun](https://github.
|
|
|
11
11
|
- **一键发布**: 内置发布到 OSS 的能力，并支持自定义对象存储配置。
|
|
12
12
|
|
|
13
13
|
### 内置的自定义组件模板
|
|
14
|
-
创建自定义组件时（执行初始化命令 neo init
|
|
14
|
+
创建自定义组件时（执行初始化命令 neo init）可选用。
|
|
15
15
|
- **React 模板**: [react-custom-cmp-template](https://github.com/wibetter/react-custom-cmp-template)
|
|
16
16
|
- **React + TS 模板**: [react-ts-custom-cmp-template](https://github.com/wibetter/react-ts-custom-cmp-template)
|
|
17
17
|
- **Antd 模板**: [antd-custom-cmp-template](https://github.com/wibetter/antd-custom-cmp-template) Antd 自定义组件
|
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
#
|
|
1
|
+
# EntityCardList 数据卡片列表组件
|
|
2
2
|
数据卡片列表组件用于展示数据信息，以卡片形式展示每个数据的姓名和手机号。组件使用 Ant Design 的 Card 组件，具有良好的视觉效果和交互体验。
|
|
3
3
|
|
|
4
4
|
## 功能特性
|
|
@@ -34,10 +34,10 @@
|
|
|
34
34
|
## 使用示例
|
|
35
35
|
|
|
36
36
|
```tsx
|
|
37
|
-
import
|
|
37
|
+
import EntityCardList from './components/entity-card-list';
|
|
38
38
|
|
|
39
39
|
// 在页面中使用
|
|
40
|
-
<
|
|
40
|
+
<EntityCardList
|
|
41
41
|
title="我的数据"
|
|
42
42
|
data={amisData}
|
|
43
43
|
/>
|
|
@@ -53,7 +53,7 @@ import ObjectCardList from './components/object-card-list';
|
|
|
53
53
|
## 文件结构
|
|
54
54
|
|
|
55
55
|
```
|
|
56
|
-
|
|
56
|
+
entity-card-list/
|
|
57
57
|
├── index.tsx # 主组件文件
|
|
58
58
|
├── model.ts # 组件配置和编辑器属性定义
|
|
59
59
|
├── style.scss # 组件样式文件
|
|
@@ -5,9 +5,10 @@ import { UserOutlined, PhoneOutlined, ReloadOutlined } from '@ant-design/icons';
|
|
|
5
5
|
import { xObject } from 'neo-open-api'; // Neo Open API
|
|
6
6
|
import './style.scss';
|
|
7
7
|
|
|
8
|
-
interface
|
|
8
|
+
interface EntityCardListProps {
|
|
9
9
|
title: string;
|
|
10
10
|
xObjectDataApi?: any;
|
|
11
|
+
entityData?: any;
|
|
11
12
|
data?: any;
|
|
12
13
|
}
|
|
13
14
|
|
|
@@ -18,18 +19,18 @@ interface ContactData {
|
|
|
18
19
|
[key: string]: any;
|
|
19
20
|
}
|
|
20
21
|
|
|
21
|
-
interface
|
|
22
|
+
interface EntityCardListState {
|
|
22
23
|
objectDataList: ContactData[];
|
|
23
24
|
totalSize: number;
|
|
24
25
|
loading: boolean;
|
|
25
26
|
error: string | null;
|
|
26
27
|
}
|
|
27
28
|
|
|
28
|
-
export default class
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
export default class EntityCardList extends React.PureComponent<
|
|
30
|
+
EntityCardListProps,
|
|
31
|
+
EntityCardListState
|
|
31
32
|
> {
|
|
32
|
-
constructor(props:
|
|
33
|
+
constructor(props: EntityCardListProps) {
|
|
33
34
|
super(props);
|
|
34
35
|
|
|
35
36
|
this.state = {
|
|
@@ -46,7 +47,7 @@ export default class ObjectCardList extends React.PureComponent<
|
|
|
46
47
|
this.loadObjectData();
|
|
47
48
|
}
|
|
48
49
|
|
|
49
|
-
componentDidUpdate(prevProps:
|
|
50
|
+
componentDidUpdate(prevProps: EntityCardListProps) {
|
|
50
51
|
const { xObjectDataApi } = this.props;
|
|
51
52
|
if (
|
|
52
53
|
xObjectDataApi?.xObjectApiKey !==
|
|
@@ -58,38 +59,38 @@ export default class ObjectCardList extends React.PureComponent<
|
|
|
58
59
|
}
|
|
59
60
|
|
|
60
61
|
async loadObjectData() {
|
|
61
|
-
this.setState({ loading: true, error: null });
|
|
62
62
|
const { xObjectDataApi } = this.props;
|
|
63
|
+
const { autoFetchData } = xObjectDataApi || {};
|
|
63
64
|
|
|
64
|
-
|
|
65
|
-
//
|
|
66
|
-
|
|
67
|
-
|
|
65
|
+
if (autoFetchData) {
|
|
66
|
+
// 方式一：直接从 props 中取实体数据源相关数据
|
|
67
|
+
const { entityData: entityDataList } = this.props;
|
|
68
|
+
if (entityDataList) {
|
|
69
|
+
this.setState({ objectDataList: entityDataList });
|
|
70
|
+
}
|
|
71
|
+
} else {
|
|
72
|
+
this.setState({ loading: true, error: null });
|
|
73
|
+
// 方式二：使用 Neo Open API SDK 获取数据
|
|
74
|
+
const result = await xObject.query(xObjectDataApi);
|
|
68
75
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
}
|
|
76
|
+
if (result?.status) {
|
|
77
|
+
const records = result.data || [];
|
|
78
|
+
const totalSize = result.totalSize || 0;
|
|
79
|
+
this.setState({
|
|
80
|
+
objectDataList: records,
|
|
81
|
+
totalSize,
|
|
82
|
+
loading: false,
|
|
83
|
+
});
|
|
84
|
+
} else {
|
|
85
|
+
this.setState({
|
|
86
|
+
error: result?.msg || '获取数据数据失败',
|
|
87
|
+
loading: false,
|
|
88
|
+
});
|
|
83
89
|
}
|
|
84
|
-
} catch (error: any) {
|
|
85
|
-
this.setState({
|
|
86
|
-
error: error.message || '获取数据数据失败',
|
|
87
|
-
loading: false,
|
|
88
|
-
});
|
|
89
90
|
}
|
|
90
91
|
}
|
|
91
92
|
|
|
92
|
-
|
|
93
|
+
renderEntityCard(object: ContactData, index: number) {
|
|
93
94
|
return (
|
|
94
95
|
<Col xs={24} sm={12} md={8} lg={6} xl={6} key={object.id || index}>
|
|
95
96
|
<Card
|
|
@@ -140,7 +141,7 @@ export default class ObjectCardList extends React.PureComponent<
|
|
|
140
141
|
console.log('this.props:', this.props);
|
|
141
142
|
|
|
142
143
|
return (
|
|
143
|
-
<div className="
|
|
144
|
+
<div className="entity-card-list-container">
|
|
144
145
|
<div className="card-list-header">
|
|
145
146
|
<div className="header-content">
|
|
146
147
|
<h3 className="header-title">
|
|
@@ -189,7 +190,7 @@ export default class ObjectCardList extends React.PureComponent<
|
|
|
189
190
|
) : (
|
|
190
191
|
<Row gutter={[16, 16]}>
|
|
191
192
|
{objectDataList.map((object, index) =>
|
|
192
|
-
this.
|
|
193
|
+
this.renderEntityCard(object, index),
|
|
193
194
|
)}
|
|
194
195
|
</Row>
|
|
195
196
|
)}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file 数据卡片列表组件对接编辑器的描述文件
|
|
3
3
|
*/
|
|
4
|
-
export class
|
|
4
|
+
export class EntityCardListModel {
|
|
5
5
|
/**
|
|
6
6
|
* cmpType 为自定义组件名称，用于标识组件的唯一性
|
|
7
7
|
* 在构建时根据当前组件目录名称自动生成
|
|
8
8
|
*/
|
|
9
|
-
// cmpType: string = '
|
|
9
|
+
// cmpType: string = 'entity-card-list';
|
|
10
10
|
|
|
11
11
|
// 组件名称，用于设置在编辑器左侧组件面板中展示的名称
|
|
12
|
-
label: string = '
|
|
12
|
+
label: string = '实体数据卡片列表';
|
|
13
13
|
|
|
14
14
|
// 组件描述，用于设置在编辑器左侧组件面板中展示的描述
|
|
15
|
-
description: string = '
|
|
15
|
+
description: string = '展示实体数据信息的卡片列表组件，支持姓名和手机号展示';
|
|
16
16
|
|
|
17
17
|
// 分类标签，用于设置在编辑器左侧组件面板哪个分类中展示（可设置多个分类标签）
|
|
18
18
|
tags: string[] = ['自定义组件'];
|
|
@@ -70,4 +70,4 @@ export class ObjectCardListModel {
|
|
|
70
70
|
*/
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
-
export default
|
|
73
|
+
export default EntityCardListModel;
|
|
@@ -29,6 +29,7 @@ interface EntityDetailProps {
|
|
|
29
29
|
xObjectApiKey: string;
|
|
30
30
|
objectId: string;
|
|
31
31
|
fieldDescList?: any[];
|
|
32
|
+
autoFetchData?: boolean;
|
|
32
33
|
};
|
|
33
34
|
columnCount?: number;
|
|
34
35
|
showTitle?: boolean;
|
|
@@ -97,43 +98,40 @@ export default class EntityDetail extends React.PureComponent<
|
|
|
97
98
|
}
|
|
98
99
|
|
|
99
100
|
async loadFieldDescriptions() {
|
|
100
|
-
const
|
|
101
|
-
|
|
102
|
-
// 方式一：直接从 props.xObjectDetailApi 中获取字段描述（当开启「自动获取数据」时可用）
|
|
103
|
-
if (xObjectDetailApi && xObjectDetailApi.fieldDescList) {
|
|
104
|
-
this.setState({ fieldDescriptions: xObjectDetailApi.fieldDescList });
|
|
105
|
-
}
|
|
101
|
+
const xObjectDetailApi: any = this.props.xObjectDetailApi || {};
|
|
102
|
+
const { autoFetchData } = xObjectDetailApi;
|
|
106
103
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
104
|
+
if (autoFetchData) {
|
|
105
|
+
// 方式一：直接从 props.xObjectDetailApi 中获取字段描述（当开启「自动获取数据」时可用）
|
|
106
|
+
if (xObjectDetailApi && xObjectDetailApi.fieldDescList) {
|
|
107
|
+
this.setState({ fieldDescriptions: xObjectDetailApi.fieldDescList });
|
|
108
|
+
}
|
|
109
|
+
} else {
|
|
110
|
+
// 方式二：自行通过 OpenAPI SDK 获取字段描述
|
|
111
|
+
if (!xObjectDetailApi.xObjectApiKey) return;
|
|
111
112
|
const result = await xObject.getDesc(xObjectDetailApi.xObjectApiKey);
|
|
112
113
|
if (result?.status) {
|
|
113
114
|
const fields = result.data?.fields || [];
|
|
114
115
|
this.setState({ fieldDescriptions: fields });
|
|
115
116
|
}
|
|
116
|
-
} catch (error: any) {
|
|
117
|
-
console.error('获取字段描述失败:', error);
|
|
118
117
|
}
|
|
119
|
-
*/
|
|
120
118
|
}
|
|
121
119
|
|
|
122
120
|
async loadEntityDetail() {
|
|
123
121
|
const xObjectDetailApi: any = this.props.xObjectDetailApi || {};
|
|
124
122
|
if (!xObjectDetailApi.xObjectApiKey || !xObjectDetailApi.objectId) return;
|
|
123
|
+
const { autoFetchData } = xObjectDetailApi;
|
|
125
124
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
125
|
+
if (autoFetchData) {
|
|
126
|
+
// 方式一：直接从 props 中取实体数据源相关数据
|
|
127
|
+
const { entityData: detailData } = this.props;
|
|
128
|
+
if (detailData) {
|
|
129
|
+
this.setState({ detailData });
|
|
130
|
+
}
|
|
131
|
+
} else {
|
|
132
|
+
// 方式二：使用 Neo Open API SDK 获取详情数据
|
|
133
|
+
this.setState({ loading: true, error: null });
|
|
135
134
|
|
|
136
|
-
try {
|
|
137
135
|
const result = await xObject.get(xObjectDetailApi);
|
|
138
136
|
|
|
139
137
|
if (result?.status) {
|
|
@@ -148,13 +146,7 @@ export default class EntityDetail extends React.PureComponent<
|
|
|
148
146
|
loading: false,
|
|
149
147
|
});
|
|
150
148
|
}
|
|
151
|
-
} catch (error: any) {
|
|
152
|
-
this.setState({
|
|
153
|
-
error: error.message || '获取详情数据失败',
|
|
154
|
-
loading: false,
|
|
155
|
-
});
|
|
156
149
|
}
|
|
157
|
-
*/
|
|
158
150
|
}
|
|
159
151
|
|
|
160
152
|
getFieldLabel(apiKey: string): string {
|
package/src/template/neo-custom-cmp-template/src/components/{object-form → entity-form}/README.md
RENAMED
|
@@ -39,10 +39,10 @@
|
|
|
39
39
|
### 2. 代码中使用
|
|
40
40
|
|
|
41
41
|
```tsx
|
|
42
|
-
import
|
|
42
|
+
import EntityForm from './components/entity-form';
|
|
43
43
|
|
|
44
44
|
// 基础使用
|
|
45
|
-
<
|
|
45
|
+
<EntityForm
|
|
46
46
|
formTitle="新增联系人"
|
|
47
47
|
xObjectDataApi={{
|
|
48
48
|
xObjectApiKey: 'customContact__c',
|
|
@@ -131,7 +131,7 @@ import ObjectForm from './components/object-form';
|
|
|
131
131
|
### 场景一：客户信息录入
|
|
132
132
|
|
|
133
133
|
```tsx
|
|
134
|
-
<
|
|
134
|
+
<EntityForm
|
|
135
135
|
formTitle="新增客户"
|
|
136
136
|
xObjectDataApi={{
|
|
137
137
|
xObjectApiKey: 'account',
|
|
@@ -148,7 +148,7 @@ import ObjectForm from './components/object-form';
|
|
|
148
148
|
### 场景二：联系人快速录入
|
|
149
149
|
|
|
150
150
|
```tsx
|
|
151
|
-
<
|
|
151
|
+
<EntityForm
|
|
152
152
|
formTitle="新增联系人"
|
|
153
153
|
xObjectDataApi={{
|
|
154
154
|
xObjectApiKey: 'customContact__c',
|
|
@@ -162,7 +162,7 @@ import ObjectForm from './components/object-form';
|
|
|
162
162
|
### 场景三：自定义对象数据录入
|
|
163
163
|
|
|
164
164
|
```tsx
|
|
165
|
-
<
|
|
165
|
+
<EntityForm
|
|
166
166
|
formTitle="新增订单"
|
|
167
167
|
xObjectDataApi={{
|
|
168
168
|
xObjectApiKey: 'customOrder__c',
|
package/src/template/neo-custom-cmp-template/src/components/{object-form → entity-form}/index.tsx
RENAMED
|
@@ -35,7 +35,7 @@ const { Option } = Select;
|
|
|
35
35
|
/**
|
|
36
36
|
* 组件属性接口
|
|
37
37
|
*/
|
|
38
|
-
interface
|
|
38
|
+
interface EntityFormProps {
|
|
39
39
|
/** XObject 实体对象的 API Key，用于标识要操作的数据对象 */
|
|
40
40
|
xObjectDataApi: {
|
|
41
41
|
xObjectApiKey: string;
|
|
@@ -81,7 +81,7 @@ interface FieldInfo {
|
|
|
81
81
|
/**
|
|
82
82
|
* 组件状态接口
|
|
83
83
|
*/
|
|
84
|
-
interface
|
|
84
|
+
interface EntityFormState {
|
|
85
85
|
/** 表单标题 */
|
|
86
86
|
title?: string;
|
|
87
87
|
/** 字段列表 */
|
|
@@ -104,11 +104,11 @@ interface ObjectFormState {
|
|
|
104
104
|
* Object Form 对象表单组件
|
|
105
105
|
* 支持对 Neo 平台的 XObject 实体对象进行新增操作
|
|
106
106
|
*/
|
|
107
|
-
export default class
|
|
108
|
-
|
|
109
|
-
|
|
107
|
+
export default class EntityForm extends React.PureComponent<
|
|
108
|
+
EntityFormProps,
|
|
109
|
+
EntityFormState
|
|
110
110
|
> {
|
|
111
|
-
constructor(props:
|
|
111
|
+
constructor(props: EntityFormProps) {
|
|
112
112
|
super(props);
|
|
113
113
|
const { xObjectDataApi } = props;
|
|
114
114
|
const { xObjectApiKey } = xObjectDataApi || {};
|
|
@@ -140,7 +140,7 @@ export default class ObjectForm extends React.PureComponent<
|
|
|
140
140
|
* 组件更新后执行
|
|
141
141
|
* 当 xObjectApiKey 发生变化时重新加载字段列表
|
|
142
142
|
*/
|
|
143
|
-
async componentDidUpdate(prevProps:
|
|
143
|
+
async componentDidUpdate(prevProps: EntityFormProps) {
|
|
144
144
|
const { xObjectApiKey, fields } = this.props.xObjectDataApi || {};
|
|
145
145
|
const { xObjectApiKey: prevXObjectApiKey, fields: prevFields } =
|
|
146
146
|
prevProps.xObjectDataApi || {};
|
|
@@ -551,7 +551,7 @@ export default class ObjectForm extends React.PureComponent<
|
|
|
551
551
|
const displayTitle = formTitle || title || '新增数据';
|
|
552
552
|
|
|
553
553
|
return (
|
|
554
|
-
<div className="
|
|
554
|
+
<div className="entity-form-container">
|
|
555
555
|
<Card>
|
|
556
556
|
<div className="form-header">
|
|
557
557
|
<h3 className="form-title">
|
package/src/template/neo-custom-cmp-template/src/components/{object-form → entity-form}/model.ts
RENAMED
|
@@ -4,13 +4,13 @@
|
|
|
4
4
|
* @author Neo Custom Widget CLI
|
|
5
5
|
* @version 1.0.0
|
|
6
6
|
*/
|
|
7
|
-
export class
|
|
7
|
+
export class EntityFormModel {
|
|
8
8
|
/**
|
|
9
9
|
* 组件类型标识
|
|
10
10
|
* 用于标识组件的唯一性，在构建时根据当前组件目录名称自动生成
|
|
11
11
|
* 注意：此字段在构建时会被自动替换，不需要手动设置
|
|
12
12
|
*/
|
|
13
|
-
// cmpType: string = '
|
|
13
|
+
// cmpType: string = 'entity-form';
|
|
14
14
|
|
|
15
15
|
/** 组件名称，用于设置在编辑器左侧组件面板中展示的名称 */
|
|
16
16
|
label: string = '实体对象表单';
|
|
@@ -65,6 +65,9 @@ export class ObjectFormModel {
|
|
|
65
65
|
*/
|
|
66
66
|
placeholder: '请选择实体数据源',
|
|
67
67
|
custom: true,
|
|
68
|
+
showPage: false,
|
|
69
|
+
showPageSize: false,
|
|
70
|
+
showAutoFetchData: false,
|
|
68
71
|
},
|
|
69
72
|
{
|
|
70
73
|
type: 'select',
|
|
@@ -103,4 +106,4 @@ export class ObjectFormModel {
|
|
|
103
106
|
*/
|
|
104
107
|
}
|
|
105
108
|
|
|
106
|
-
export default
|
|
109
|
+
export default EntityFormModel;
|
package/src/template/neo-custom-cmp-template/src/components/{xobject-table → entity-table}/README.md
RENAMED
|
@@ -37,10 +37,10 @@
|
|
|
37
37
|
### 2. 代码中使用
|
|
38
38
|
|
|
39
39
|
```tsx
|
|
40
|
-
import
|
|
40
|
+
import EntityTable from './components/entity-table';
|
|
41
41
|
|
|
42
42
|
// 使用组件
|
|
43
|
-
<
|
|
43
|
+
<EntityTable
|
|
44
44
|
title="联系人列表"
|
|
45
45
|
xObjectApiKey="customContact__c"
|
|
46
46
|
pageSize={20}
|
package/src/template/neo-custom-cmp-template/src/components/{xobject-table → entity-table}/index.tsx
RENAMED
|
@@ -40,7 +40,7 @@ const { Option } = Select;
|
|
|
40
40
|
/**
|
|
41
41
|
* 组件属性接口
|
|
42
42
|
*/
|
|
43
|
-
interface
|
|
43
|
+
interface EntityTableProps {
|
|
44
44
|
/** XObject 实体对象的 API Key，用于标识要操作的数据对象 */
|
|
45
45
|
xObjectDataApi: {
|
|
46
46
|
xObjectApiKey: string;
|
|
@@ -48,9 +48,11 @@ interface XObjectTableProps {
|
|
|
48
48
|
fieldDescList?: any[];
|
|
49
49
|
pageSize?: number;
|
|
50
50
|
page?: number;
|
|
51
|
+
autoFetchData?: boolean;
|
|
51
52
|
};
|
|
52
53
|
/** Neo 平台传递的数据，包含系统信息等 */
|
|
53
54
|
data?: any;
|
|
55
|
+
entityData?: any; // Neo 平台自动获取的实体数据
|
|
54
56
|
/** 是否显示新增按钮 */
|
|
55
57
|
showAddButton?: boolean;
|
|
56
58
|
/** 是否显示编辑按钮 */
|
|
@@ -86,7 +88,7 @@ interface FieldInfo {
|
|
|
86
88
|
/**
|
|
87
89
|
* 组件状态接口
|
|
88
90
|
*/
|
|
89
|
-
interface
|
|
91
|
+
interface EntityTableState {
|
|
90
92
|
/** 表格标题 */
|
|
91
93
|
title?: string;
|
|
92
94
|
fieldList: FieldInfo[];
|
|
@@ -118,11 +120,11 @@ interface XObjectTableState {
|
|
|
118
120
|
* XObject 数据表格组件
|
|
119
121
|
* 支持对 Neo 平台的 XObject 实体对象进行增删改查操作
|
|
120
122
|
*/
|
|
121
|
-
export default class
|
|
122
|
-
|
|
123
|
-
|
|
123
|
+
export default class EntityTable extends React.PureComponent<
|
|
124
|
+
EntityTableProps,
|
|
125
|
+
EntityTableState
|
|
124
126
|
> {
|
|
125
|
-
constructor(props:
|
|
127
|
+
constructor(props: EntityTableProps) {
|
|
126
128
|
super(props);
|
|
127
129
|
const { xObjectDataApi } = props;
|
|
128
130
|
const { xObjectApiKey, fields, page, pageSize } = xObjectDataApi || {};
|
|
@@ -169,7 +171,7 @@ export default class XObjectTable extends React.PureComponent<
|
|
|
169
171
|
* 组件更新后执行
|
|
170
172
|
* 当 xObjectApiKey 发生变化时重新加载数据
|
|
171
173
|
*/
|
|
172
|
-
async componentDidUpdate(prevProps:
|
|
174
|
+
async componentDidUpdate(prevProps: EntityTableProps) {
|
|
173
175
|
const { xObjectApiKey, fields, page, pageSize } =
|
|
174
176
|
this.props.xObjectDataApi || {};
|
|
175
177
|
const {
|
|
@@ -318,7 +320,7 @@ export default class XObjectTable extends React.PureComponent<
|
|
|
318
320
|
* @param pageSize 每页条数，默认为 10
|
|
319
321
|
*/
|
|
320
322
|
async loadData(page = 1, pageSize = 10) {
|
|
321
|
-
const { xObjectApiKey } = this.props.xObjectDataApi || {};
|
|
323
|
+
const { xObjectApiKey, autoFetchData } = this.props.xObjectDataApi || {};
|
|
322
324
|
if (!xObjectApiKey) return;
|
|
323
325
|
|
|
324
326
|
this.setState({ loading: true, error: null });
|
|
@@ -685,7 +687,7 @@ export default class XObjectTable extends React.PureComponent<
|
|
|
685
687
|
console.log('this.props：', this.props, columns);
|
|
686
688
|
|
|
687
689
|
return (
|
|
688
|
-
<div className="
|
|
690
|
+
<div className="entity-table-container">
|
|
689
691
|
<Card>
|
|
690
692
|
<div className="table-header">
|
|
691
693
|
<div className="header-content">
|
package/src/template/neo-custom-cmp-template/src/components/{xobject-table → entity-table}/model.ts
RENAMED
|
@@ -4,13 +4,13 @@
|
|
|
4
4
|
* @author Neo Custom Widget CLI
|
|
5
5
|
* @version 1.0.0
|
|
6
6
|
*/
|
|
7
|
-
export class
|
|
7
|
+
export class EntityTableModel {
|
|
8
8
|
/**
|
|
9
9
|
* 组件类型标识
|
|
10
10
|
* 用于标识组件的唯一性，在构建时根据当前组件目录名称自动生成
|
|
11
11
|
* 注意：此字段在构建时会被自动替换，不需要手动设置
|
|
12
12
|
*/
|
|
13
|
-
// cmpType: string = '
|
|
13
|
+
// cmpType: string = 'entity-table';
|
|
14
14
|
|
|
15
15
|
/** 组件名称，用于设置在编辑器左侧组件面板中展示的名称 */
|
|
16
16
|
label: string = '实体数据表格';
|
|
@@ -133,4 +133,4 @@ export class XObjectTableModel {
|
|
|
133
133
|
*/
|
|
134
134
|
}
|
|
135
135
|
|
|
136
|
-
export default
|
|
136
|
+
export default EntityTableModel;
|