neo-cmp-cli 1.2.2 → 1.2.5
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/package.json +1 -1
- package/src/module/index.js +3 -5
- package/src/module/main.js +3 -7
- package/src/neo/neoRequire.js +18 -0
- package/src/template/antd-custom-cmp-template/neo.config.js +2 -0
- package/src/template/antd-custom-cmp-template/package.json +2 -2
- package/src/template/antd-custom-cmp-template/src/assets/img/NeoCRM.jpg +0 -0
- package/src/template/antd-custom-cmp-template/src/assets/img/custom-widget.svg +1 -0
- package/src/template/antd-custom-cmp-template/src/assets/img/favicon.png +0 -0
- package/src/template/antd-custom-cmp-template/src/components/info-card/index.tsx +3 -3
- package/src/template/develop/neo-custom-cmp-template/.prettierrc.js +12 -0
- package/src/template/develop/neo-custom-cmp-template/README.md +48 -0
- package/src/template/develop/neo-custom-cmp-template/commitlint.config.js +59 -0
- package/src/template/develop/neo-custom-cmp-template/docs/README.md +13 -0
- package/src/template/develop/neo-custom-cmp-template/neo.config.js +121 -0
- package/src/template/develop/neo-custom-cmp-template/package.json +63 -0
- package/src/template/develop/neo-custom-cmp-template/public/css/base.css +283 -0
- package/src/template/develop/neo-custom-cmp-template/public/scripts/app/bluebird.js +6679 -0
- package/src/template/develop/neo-custom-cmp-template/public/template.html +13 -0
- package/src/template/develop/neo-custom-cmp-template/src/assets/css/common.scss +127 -0
- package/src/template/develop/neo-custom-cmp-template/src/assets/css/mixin.scss +47 -0
- package/src/template/develop/neo-custom-cmp-template/src/assets/img/NeoCRM.jpg +0 -0
- package/src/template/develop/neo-custom-cmp-template/src/assets/img/custom-widget.svg +1 -0
- package/src/template/develop/neo-custom-cmp-template/src/assets/img/favicon.png +0 -0
- package/src/template/develop/neo-custom-cmp-template/src/assets/img/table.svg +1 -0
- package/src/template/develop/neo-custom-cmp-template/src/components/contact-card-list/README.md +65 -0
- package/src/template/develop/neo-custom-cmp-template/src/components/contact-card-list/index.tsx +180 -0
- package/src/template/develop/neo-custom-cmp-template/src/components/contact-card-list/model.ts +56 -0
- package/src/template/develop/neo-custom-cmp-template/src/components/contact-card-list/style.scss +260 -0
- package/src/template/develop/neo-custom-cmp-template/src/components/contact-form/README.md +94 -0
- package/src/template/develop/neo-custom-cmp-template/src/components/contact-form/index.tsx +251 -0
- package/src/template/develop/neo-custom-cmp-template/src/components/contact-form/model.ts +56 -0
- package/src/template/develop/neo-custom-cmp-template/src/components/contact-form/style.scss +120 -0
- package/src/template/{neo-custom-cmp-template → develop/neo-custom-cmp-template}/src/components/neo-entity-grid/index.tsx +41 -32
- package/src/template/{neo-custom-cmp-template → develop/neo-custom-cmp-template}/src/components/neo-entity-grid/model.ts +0 -7
- package/src/template/develop/neo-custom-cmp-template/src/utils/axiosFetcher.ts +29 -0
- package/src/template/develop/neo-custom-cmp-template/src/utils/queryObjectData.ts +39 -0
- package/src/template/develop/neo-custom-cmp-template/src/utils/xobjects.ts +203 -0
- package/src/template/develop/neo-custom-cmp-template/tsconfig.json +68 -0
- package/src/template/echarts-custom-cmp-template/package.json +2 -2
- package/src/template/echarts-custom-cmp-template/src/assets/img/NeoCRM.jpg +0 -0
- package/src/template/echarts-custom-cmp-template/src/assets/img/chart.svg +1 -0
- package/src/template/echarts-custom-cmp-template/src/assets/img/custom-widget.svg +1 -0
- package/src/template/echarts-custom-cmp-template/src/assets/img/favicon.png +0 -0
- package/src/template/neo-custom-cmp-template/README.md +4 -3
- package/src/template/neo-custom-cmp-template/docs/README.md +244 -0
- package/src/template/neo-custom-cmp-template/neo.config.js +1 -0
- package/src/template/neo-custom-cmp-template/package.json +6 -3
- package/src/template/neo-custom-cmp-template/src/assets/img/NeoCRM.jpg +0 -0
- package/src/template/neo-custom-cmp-template/src/assets/img/card-list.svg +1 -0
- package/src/template/neo-custom-cmp-template/src/assets/img/contact-form.svg +1 -0
- package/src/template/neo-custom-cmp-template/src/assets/img/custom-widget.svg +1 -0
- package/src/template/neo-custom-cmp-template/src/assets/img/table.svg +1 -0
- package/src/template/neo-custom-cmp-template/src/components/contact-card-list/README.md +66 -0
- package/src/template/neo-custom-cmp-template/src/components/contact-card-list/index.tsx +180 -0
- package/src/template/neo-custom-cmp-template/src/components/contact-card-list/model.ts +56 -0
- package/src/template/neo-custom-cmp-template/src/components/contact-card-list/style.scss +260 -0
- package/src/template/neo-custom-cmp-template/src/components/contact-form/README.md +94 -0
- package/src/template/neo-custom-cmp-template/src/components/contact-form/index.tsx +251 -0
- package/src/template/neo-custom-cmp-template/src/components/contact-form/model.ts +56 -0
- package/src/template/neo-custom-cmp-template/src/components/contact-form/style.scss +120 -0
- package/src/template/neo-custom-cmp-template/src/components/xobject-table/README.md +113 -0
- package/src/template/neo-custom-cmp-template/src/components/xobject-table/index.tsx +744 -0
- package/src/template/neo-custom-cmp-template/src/components/xobject-table/model.ts +122 -0
- package/src/template/neo-custom-cmp-template/src/components/xobject-table/style.scss +304 -0
- package/src/template/neo-custom-cmp-template/src/utils/axiosFetcher.ts +37 -0
- package/src/template/neo-custom-cmp-template/src/utils/queryObjectData.ts +65 -0
- package/src/template/neo-custom-cmp-template/src/utils/xobjects.ts +162 -0
- package/src/template/neo-custom-cmp-template/tsconfig.json +4 -1
- package/src/template/react-custom-cmp-template/package.json +1 -1
- package/src/template/react-custom-cmp-template/src/assets/img/NeoCRM.jpg +0 -0
- package/src/template/react-custom-cmp-template/src/assets/img/custom-widget.svg +1 -0
- package/src/template/react-custom-cmp-template/src/assets/img/favicon.png +0 -0
- package/src/template/react-ts-custom-cmp-template/package.json +1 -1
- package/src/template/react-ts-custom-cmp-template/src/assets/img/NeoCRM.jpg +0 -0
- package/src/template/react-ts-custom-cmp-template/src/assets/img/custom-widget.svg +1 -0
- package/src/template/react-ts-custom-cmp-template/src/assets/img/favicon.png +0 -0
- package/src/template/vue2-custom-cmp-template/package.json +1 -1
- package/src/template/vue2-custom-cmp-template/src/assets/img/NeoCRM.jpg +0 -0
- package/src/template/vue2-custom-cmp-template/src/assets/img/custom-widget.svg +1 -0
- package/src/template/vue2-custom-cmp-template/src/assets/img/favicon.png +0 -0
- package/bin/neo.js +0 -2
- package/src/template/neo-custom-cmp-template/src/components/info-card/index.tsx +0 -69
- package/src/template/neo-custom-cmp-template/src/components/info-card/model.ts +0 -78
- package/src/template/neo-custom-cmp-template/src/components/info-card/style.scss +0 -105
- /package/src/template/{neo-custom-cmp-template → develop/neo-custom-cmp-template}/src/components/neo-entity-grid/README.md +0 -0
- /package/src/template/{neo-custom-cmp-template → develop/neo-custom-cmp-template}/src/components/neo-entity-grid/style.scss +0 -0
|
@@ -0,0 +1,244 @@
|
|
|
1
|
+
## Open api 文档
|
|
2
|
+
- [Open API 简介](https://doc.xiaoshouyi.com/#/proMan/workplaceDetailApi?url=%2F%2Fconcepts%2Fapi_apiIntroduction.html&id=1405&dir=output_1757929564205)。
|
|
3
|
+
|
|
4
|
+
## Neo 自定义组件中可用的 open api 接口
|
|
5
|
+
- [查询对象列表](https://doc.xiaoshouyi.com/#/proMan/workplaceDetailApi?url=%2F%2Fconcepts%2FpaasQueryObjectList.html&id=1405&dir=output_1757929564205&time=1758780224026): /rest/metadata/v2.0/xobjects/filter;
|
|
6
|
+
- 查询标准对象列表: /rest/metadata/v2.0/xobjects/filter?custom=false&active=true;
|
|
7
|
+
- 查询自定义对象列表: /rest/metadata/v2.0/xobjects/filter?custom=true&active=true;
|
|
8
|
+
- [创建业务数据](https://doc.xiaoshouyi.com/#/proMan/workplaceDetailApi?url=%2F%2Fconcepts%2Fapi_paas_customObject_create.html&id=1405&dir=output_1757929564205&time=1758782257815): /rest/data/v2.0/xobjects/{xObjectApiKey};
|
|
9
|
+
- [更新业务数据](https://doc.xiaoshouyi.com/#/proMan/workplaceDetailApi?url=%2F%2Fconcepts%2Fapi_paas_customObject_update.html&id=1405&dir=output_1757929564205&time=1758782321910): /rest/data/v2.0/xobjects/{xObjectApiKey}/{id};
|
|
10
|
+
- [获取业务数据信息(单个数据)](https://doc.xiaoshouyi.com/#/proMan/workplaceDetailApi?url=%2F%2Fconcepts%2Fapi_paas_customObject_getBusinessDataInformation.html&id=1405&dir=output_1757929564205&time=1758781533725): /rest/data/v2.0/xobjects/{xObjectApiKey}/{id};
|
|
11
|
+
- [查询接口(通用查询接口)](https://doc.xiaoshouyi.com/#/proMan/workplaceDetailApi?url=%2F%2Fconcepts%2Fapi_queryInterfaceDescription.html&id=1405&dir=output_1757929564205&time=1758784491846): /rest/data/v2/query;
|
|
12
|
+
- [获取业务类型描述](https://doc.xiaoshouyi.com/?sso-domain=login-cd.xiaoshouyi.com#/proMan/workplaceDetailApi?url=%2F%2Fconcepts%2Fapi_paas_customObject_getBusinessTypeDescription.html&id=1405&dir=output_1757929564205&time=1758798530511): /rest/data/v2.0/xobjects/{xObjectApiKey}/busiType;
|
|
13
|
+
- 更多可用接口见[文档](https://doc.xiaoshouyi.com/#/proMan/workplaceDetailApi?url=%2F%2Fconcepts%2Fapi_apiIntroduction.html&id=1405&dir=output_1757929564205)。
|
|
14
|
+
|
|
15
|
+
## Open API 请求方法
|
|
16
|
+
|
|
17
|
+
### 基础请求工具
|
|
18
|
+
|
|
19
|
+
#### axiosFetcher
|
|
20
|
+
基于 axios 封装的通用请求工具,支持 GET、POST、PATCH、DELETE 等请求方法。
|
|
21
|
+
|
|
22
|
+
```typescript
|
|
23
|
+
import axiosFetcher from '@/utils/axiosFetcher';
|
|
24
|
+
|
|
25
|
+
// 基本用法
|
|
26
|
+
const result = await axiosFetcher({
|
|
27
|
+
url: '/api/endpoint',
|
|
28
|
+
method: 'GET',
|
|
29
|
+
data: { key: 'value' },
|
|
30
|
+
headers: { 'Custom-Header': 'value' },
|
|
31
|
+
timeout: 30000
|
|
32
|
+
});
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
**参数说明:**
|
|
36
|
+
- `url`: 请求地址
|
|
37
|
+
- `method`: 请求方法,默认为 'GET'
|
|
38
|
+
- `data`: 请求数据,GET 请求会转为 params
|
|
39
|
+
- `headers`: 请求头,默认包含 'Content-Type': 'application/json'
|
|
40
|
+
- `timeout`: 超时时间,默认 30000ms
|
|
41
|
+
|
|
42
|
+
### 业务对象相关接口
|
|
43
|
+
|
|
44
|
+
#### 1. 查询业务对象数据列表 (queryXObjectData)
|
|
45
|
+
使用通用查询接口获取业务对象数据,支持分页和排序。
|
|
46
|
+
|
|
47
|
+
```typescript
|
|
48
|
+
import { queryXObjectData } from '@/utils/queryObjectData';
|
|
49
|
+
|
|
50
|
+
// 基本查询
|
|
51
|
+
const result = await queryXObjectData({
|
|
52
|
+
xObjectApiKey: 'Contact', // 业务对象 API Key
|
|
53
|
+
fields: ['name', 'phone', 'email'], // 查询字段
|
|
54
|
+
page: 1, // 页码
|
|
55
|
+
pageSize: 10, // 每页数量
|
|
56
|
+
orderBy: 'name asc' // 排序条件(可选)
|
|
57
|
+
});
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
**参数说明:**
|
|
61
|
+
- `xObjectApiKey`: 业务对象的 API Key
|
|
62
|
+
- `fields`: 需要查询的字段数组,会自动添加 'id' 字段
|
|
63
|
+
- `page`: 页码,默认为 1
|
|
64
|
+
- `pageSize`: 每页数量,默认为 10
|
|
65
|
+
- `orderBy`: 排序条件,如 'name asc' 或 'createdTime desc'
|
|
66
|
+
|
|
67
|
+
**返回结果:**
|
|
68
|
+
```typescript
|
|
69
|
+
{
|
|
70
|
+
code: 200,
|
|
71
|
+
result: {
|
|
72
|
+
// 查询结果数据
|
|
73
|
+
records: any[],
|
|
74
|
+
// 分页信息
|
|
75
|
+
totalSize: number, // 总个数
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
#### 2. 获取业务类型列表 (getEntityTypeList)
|
|
81
|
+
获取指定业务对象的业务类型列表。
|
|
82
|
+
|
|
83
|
+
```typescript
|
|
84
|
+
import { getEntityTypeList } from '@/utils/xobjects';
|
|
85
|
+
|
|
86
|
+
const result = await getEntityTypeList('Contact', {
|
|
87
|
+
// 其他请求选项
|
|
88
|
+
});
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
**参数说明:**
|
|
92
|
+
- `xObjectApiKey`: 业务对象的 API Key
|
|
93
|
+
- `options`: 可选的请求配置
|
|
94
|
+
|
|
95
|
+
#### 3. 获取对象列表 (getEntityList)
|
|
96
|
+
获取系统中的对象列表,支持标准对象和自定义对象。
|
|
97
|
+
|
|
98
|
+
```typescript
|
|
99
|
+
import { getEntityList } from '@/utils/xobjects';
|
|
100
|
+
|
|
101
|
+
// 获取标准对象列表
|
|
102
|
+
const standardObjects = await getEntityList({
|
|
103
|
+
custom: false, // 获取标准对象
|
|
104
|
+
active: true // 仅获取有权限的对象
|
|
105
|
+
});
|
|
106
|
+
|
|
107
|
+
// 获取自定义对象列表
|
|
108
|
+
const customObjects = await getEntityList({
|
|
109
|
+
custom: true, // 获取自定义对象
|
|
110
|
+
active: true // 仅获取有权限的对象
|
|
111
|
+
});
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
**参数说明:**
|
|
115
|
+
- `custom`: 是否获取自定义对象,false 为标准对象,true 为自定义对象
|
|
116
|
+
- `active`: 是否仅获取有权限的对象,默认为 true
|
|
117
|
+
|
|
118
|
+
#### 4. 创建业务数据 (createXObject)
|
|
119
|
+
创建新的业务数据记录。
|
|
120
|
+
|
|
121
|
+
```typescript
|
|
122
|
+
import { createXObject } from '@/utils/xobjects';
|
|
123
|
+
|
|
124
|
+
const result = await createXObject('Contact', {
|
|
125
|
+
method: 'POST',
|
|
126
|
+
data: {
|
|
127
|
+
name: '张三',
|
|
128
|
+
phone: '13800138000',
|
|
129
|
+
email: 'zhangsan@example.com'
|
|
130
|
+
}
|
|
131
|
+
});
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
**参数说明:**
|
|
135
|
+
- `xObjectApiKey`: 业务对象的 API Key
|
|
136
|
+
- `options.data`: 要创建的数据对象
|
|
137
|
+
- `options.method`: 请求方法,默认为 'GET'(建议使用 'POST')
|
|
138
|
+
|
|
139
|
+
#### 5. 更新业务数据 (updateXObject)
|
|
140
|
+
更新指定的业务数据记录。
|
|
141
|
+
|
|
142
|
+
```typescript
|
|
143
|
+
import { updateXObject } from '@/utils/xobjects';
|
|
144
|
+
|
|
145
|
+
const result = await updateXObject('Contact', '12345', {
|
|
146
|
+
method: 'PATCH',
|
|
147
|
+
data: {
|
|
148
|
+
name: '李四',
|
|
149
|
+
phone: '13900139000'
|
|
150
|
+
}
|
|
151
|
+
});
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
**参数说明:**
|
|
155
|
+
- `xObjectApiKey`: 业务对象的 API Key
|
|
156
|
+
- `objectId`: 要更新的记录 ID
|
|
157
|
+
- `options.data`: 要更新的数据对象
|
|
158
|
+
- `options.method`: 请求方法,默认为 'PATCH'
|
|
159
|
+
|
|
160
|
+
#### 6. 获取业务数据信息 (getXObject)
|
|
161
|
+
获取指定业务数据记录的详细信息。
|
|
162
|
+
|
|
163
|
+
```typescript
|
|
164
|
+
import { getXObject } from '@/utils/xobjects';
|
|
165
|
+
|
|
166
|
+
const result = await getXObject('Contact', '12345', {
|
|
167
|
+
// 其他请求选项
|
|
168
|
+
});
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
**参数说明:**
|
|
172
|
+
- `xObjectApiKey`: 业务对象的 API Key
|
|
173
|
+
- `objectId`: 要获取的记录 ID
|
|
174
|
+
- `options`: 可选的请求配置
|
|
175
|
+
|
|
176
|
+
#### 7. 删除业务数据 (deleteXObject)
|
|
177
|
+
删除指定的业务数据记录。
|
|
178
|
+
|
|
179
|
+
```typescript
|
|
180
|
+
import { deleteXObject } from '@/utils/xobjects';
|
|
181
|
+
|
|
182
|
+
const result = await deleteXObject('Contact', '12345');
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
**参数说明:**
|
|
186
|
+
- `xObjectApiKey`: 业务对象的 API Key
|
|
187
|
+
- `objectId`: 要删除的记录 ID
|
|
188
|
+
|
|
189
|
+
#### 8. 获取业务对象描述 (getXObjectDesc)
|
|
190
|
+
获取业务对象的描述信息。
|
|
191
|
+
|
|
192
|
+
```typescript
|
|
193
|
+
import { getXObjectDesc } from '@/utils/xobjects';
|
|
194
|
+
|
|
195
|
+
const result = await getXObjectDesc('Contact');
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
**参数说明:**
|
|
199
|
+
- `xObjectApiKey`: 业务对象的 API Key
|
|
200
|
+
|
|
201
|
+
### 使用示例
|
|
202
|
+
|
|
203
|
+
```typescript
|
|
204
|
+
import {
|
|
205
|
+
queryXObjectData,
|
|
206
|
+
createXObject,
|
|
207
|
+
updateXObject,
|
|
208
|
+
getXObject,
|
|
209
|
+
deleteXObject
|
|
210
|
+
} from '@/utils/xobjects';
|
|
211
|
+
|
|
212
|
+
// 查询联系人列表
|
|
213
|
+
const contacts = await queryXObjectData({
|
|
214
|
+
xObjectApiKey: 'Contact',
|
|
215
|
+
fields: ['name', 'phone', 'email'],
|
|
216
|
+
page: 1,
|
|
217
|
+
pageSize: 20,
|
|
218
|
+
orderBy: 'createdTime desc'
|
|
219
|
+
});
|
|
220
|
+
|
|
221
|
+
// 创建新联系人
|
|
222
|
+
const newContact = await createXObject('Contact', {
|
|
223
|
+
method: 'POST',
|
|
224
|
+
data: {
|
|
225
|
+
name: '王五',
|
|
226
|
+
phone: '13700137000',
|
|
227
|
+
email: 'wangwu@example.com'
|
|
228
|
+
}
|
|
229
|
+
});
|
|
230
|
+
|
|
231
|
+
// 更新联系人
|
|
232
|
+
const updatedContact = await updateXObject('Contact', newContact.id, {
|
|
233
|
+
data: {
|
|
234
|
+
name: '王五(更新)'
|
|
235
|
+
}
|
|
236
|
+
});
|
|
237
|
+
|
|
238
|
+
// 获取联系人详情
|
|
239
|
+
const contactDetail = await getXObject('Contact', newContact.id);
|
|
240
|
+
|
|
241
|
+
// 删除联系人
|
|
242
|
+
await deleteXObject('Contact', newContact.id);
|
|
243
|
+
```
|
|
244
|
+
|
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
"author": "wibetter",
|
|
11
11
|
"license": "MIT",
|
|
12
12
|
"scripts": {
|
|
13
|
-
"preview": "neo preview --cmpType=
|
|
13
|
+
"preview": "neo preview --cmpType=contact-form",
|
|
14
|
+
"preview2": "neo preview --cmpType=contact-card-list",
|
|
14
15
|
"linkDebug": "neo linkDebug",
|
|
15
16
|
"publish2oss": "neo publish2oss",
|
|
16
17
|
"format": "prettier --write \"src/**/**/*.{js,jsx,ts,tsx,vue,scss,json}\""
|
|
@@ -40,7 +41,9 @@
|
|
|
40
41
|
"neo-register": "^1.0.2",
|
|
41
42
|
"react": "^16.9.0",
|
|
42
43
|
"react-dom": "^16.9.0",
|
|
43
|
-
"axios": "^0.27.2"
|
|
44
|
+
"axios": "^0.27.2",
|
|
45
|
+
"antd": "^4.9.4",
|
|
46
|
+
"lodash": "^4.17.21"
|
|
44
47
|
},
|
|
45
48
|
"devDependencies": {
|
|
46
49
|
"@commitlint/cli": "^8.3.5",
|
|
@@ -48,7 +51,7 @@
|
|
|
48
51
|
"@types/react": "^16.9.11",
|
|
49
52
|
"@types/react-dom": "^16.9.15",
|
|
50
53
|
"@types/axios": "^0.14.0",
|
|
51
|
-
"neo-cmp-cli": "^1.2.
|
|
54
|
+
"neo-cmp-cli": "^1.2.3",
|
|
52
55
|
"husky": "^4.2.5",
|
|
53
56
|
"lint-staged": "^10.2.9",
|
|
54
57
|
"prettier": "^2.0.5"
|
|
Binary file
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1758858496804" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4824" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M362.666667 448h-213.333334c-46.933333 0-85.333333-38.4-85.333333-85.333333v-213.333334c0-46.933333 38.4-85.333333 85.333333-85.333333h213.333334c46.933333 0 85.333333 38.4 85.333333 85.333333v213.333334c0 46.933333-38.4 85.333333-85.333333 85.333333z m-213.333334-298.666667v213.333334h213.333334v-213.333334h-213.333334zM917.333333 405.333333h-298.666666c-25.6 0-42.666667-17.066667-42.666667-42.666666s17.066667-42.666667 42.666667-42.666667h298.666666c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666666zM917.333333 192h-298.666666c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666666h298.666666c25.6 0 42.666667 17.066667 42.666667 42.666666s-17.066667 42.666667-42.666667 42.666667zM362.666667 960h-213.333334c-46.933333 0-85.333333-38.4-85.333333-85.333333v-213.333334c0-46.933333 38.4-85.333333 85.333333-85.333333h213.333334c46.933333 0 85.333333 38.4 85.333333 85.333333v213.333334c0 46.933333-38.4 85.333333-85.333333 85.333333z m-213.333334-298.666667v213.333334h213.333334v-213.333334h-213.333334zM917.333333 917.333333h-298.666666c-25.6 0-42.666667-17.066667-42.666667-42.666666s17.066667-42.666667 42.666667-42.666667h298.666666c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666666zM917.333333 704h-298.666666c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666666h298.666666c25.6 0 42.666667 17.066667 42.666667 42.666666s-17.066667 42.666667-42.666667 42.666667z" p-id="4825" fill="#0764f5"></path></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1758858859788" class="icon" viewBox="0 0 1600 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6860" xmlns:xlink="http://www.w3.org/1999/xlink" width="312.5" height="200"><path d="M983.3038 139.924829l-69.963665 0C913.340135 63.602422 849.737713 0 773.415306 0s-139.924829 63.602422-139.924829 139.924829l-63.602422 0 0 69.963665 413.415745 0L983.3038 139.924829 983.3038 139.924829 983.3038 139.924829zM703.452891 139.924829c0-38.161203 31.801211-69.962415 69.962415-69.962415 38.161203 0 69.962415 31.801211 69.962415 69.962415L703.452891 139.924829 703.452891 139.924829z" p-id="6861" fill="#0764f5"></path><path d="M1111.109894 253.80844l0 449.446951C1149.998596 706.249138 1167.498575 714.999127 1181.072308 735.056603l0-513.049374c0-44.522446-31.801211-82.683649-82.683649-82.683649l-57.24118 0 0 69.962415 31.801211 0C1092.028667 209.285995 1111.109894 228.367221 1111.109894 253.80844L1111.109894 253.80844z" p-id="6862" fill="#0764f5"></path><path d="M922.572624 896.793905l-454.449445 0c-25.439969 0-38.161203-19.081227-38.161203-38.161203L429.961975 248.049697c0-25.441219 19.081227-38.161203 38.161203-38.161203l31.801211 0L499.92439 139.924829l-57.24118 0c-44.522446 0-82.683649 38.162453-82.683649 82.683649l0 674.185427c0 44.521196 31.801211 82.683649 82.683649 82.683649l518.050618 0C931.248863 956.248833 922.572624 928.595116 922.572624 896.793905L922.572624 896.793905z" p-id="6863" fill="#0764f5"></path><path d="M1087.753672 724.081616c-80.334902 0-149.959817 64.267422-149.959817 149.958567 0 80.336152 64.268672 149.959817 149.959817 149.959817s149.958567-64.268672 149.958567-149.959817C1237.713489 788.349038 1173.444818 724.081616 1087.753672 724.081616L1087.753672 724.081616zM1109.176146 895.462657l0 85.691145-42.846198 0 0-85.691145-85.691145 0 0-42.844948 85.691145 0 0-85.691145 42.846198 0 0 85.691145 85.691145 0 0 42.844948L1109.176146 895.462657 1109.176146 895.462657z" p-id="6864" fill="#0764f5"></path><path d="M804.611518 653.237953c-10.739987-4.229995-19.073727-9.053739-25.027469-14.407482-5.979993-5.391243-10.394987-11.056237-13.276234-16.976229-2.882496-5.986243-4.511244-11.932485-4.887494-17.886228-0.4075-5.953743 0-11.811236 1.156249-17.573729 1.534998-9.617488 4.603744-16.41373 9.211239-20.451225 4.601244-4.041245 10.584987-8.927489 17.851228-14.689982 3.069996-2.694997 5.858743-6.453742 8.36624-11.213736 2.502497-4.824994 4.694994-9.709988 6.604992-14.722482 1.943748-5.763743 3.886245-11.902485 5.796243-18.417478 3.821245-1.157499 7.452491-3.256246 10.932487-6.358742 3.069996-2.661247 5.854993-6.421242 8.36499-11.243736 2.501247-4.762494 4.102495-11.214986 4.883744-19.296226 0.784999-6.139993 0.689999-11.307486-0.28-15.536231-0.974999-4.227495-2.224997-7.704991-3.761245-10.398737-1.533748-3.068746-3.633746-5.546243-6.326242-7.457491 0-15.754981-0.941249-31.323712-2.882496-46.669943-1.942498-13.467484-5.171244-27.563716-9.774988-42.348698-4.633744-14.784982-11.932485-28.346215-21.924973-40.62495-4.194995-5.387493-10.056238-10.743737-17.572479-16.13248-7.484991-5.387493-16.03748-10.212488-25.618719-14.408732-9.617488-4.258745-19.894976-7.578741-30.852462-10.084988-10.931237-2.504997-21.957473-3.761245-33.10871-3.761245-8.836239 0-17.982478 0.689999-27.377467 2.006248-9.394989 1.378748-18.823727 3.946245-28.218716 7.79874-9.431238 3.853745-18.639977 9.113739-27.662466 15.851231-9.018739 6.702492-17.193729 15.439981-24.49122 26.216218-8.08124 11.148736-14.096233 23.803721-18.168728 38.024954-4.008745 14.222483-6.797492 27.438717-8.33249 39.749951-1.938748 14.594982-2.692497 29.192464-2.317497 43.788697-3.443746 3.852495-5.951243 7.86124-7.484991 12.121235-1.534998 3.822495-2.601247 8.42499-3.162496 13.814983-0.564999 5.357493 0.2825 11.307486 2.598747 17.852478 1.909998 6.547492 4.226245 11.527486 6.923742 15.004982 2.693747 3.444996 5.163744 6.137493 7.451241 8.04874 2.696247 1.911248 5.387493 3.257496 8.08249 4.041245 1.942498 6.514992 3.851245 12.654985 5.762493 18.418728 1.946248 5.011244 4.042495 9.897488 6.327492 14.721232 2.317497 4.759994 5.012494 8.51999 8.08124 11.214986 6.516242 5.387493 12.464985 10.648737 17.852478 15.848731 5.387493 5.167494 8.45874 12.183735 9.208739 21.017474 0.40875 6.169992 0.597499 11.714986 0.597499 16.69498 0 5.013744-0.972499 9.806238-2.882496 14.437482-1.908748 4.604994-4.978744 9.208739-9.242489 13.812483-4.194995 4.603744-10.334987 9.428738-18.417478 14.412482-10.366237 6.513742-22.294973 11.527486-35.707456 14.971232-13.464984 3.473746-26.436218 7.426241-38.902453 11.806236-12.497485 4.418745-23.428721 10.402487-32.82246 17.856228-9.429988 7.514991-15.098732 18.354978-17.043729 32.57746-3.822495 24.95997-4.697494 45.322445-2.567497 61.076175 2.099997 15.723731 5.073744 25.149969 8.927489 28.222466 2.287497 1.942498 7.86124 3.852495 16.69498 5.763743 8.832489 1.938748 19.608726 3.852495 32.261211 5.762493 12.714984 1.908748 26.814967 3.728745 42.349948 5.484993 15.567481 1.718748 31.228712 3.253746 46.982443 4.602494 15.723731 1.317498 31.012462 2.412497 45.796194 3.163746 14.784982 0.782499 27.751216 1.157499 38.903703 1.157499 11.152486 0 24.30122-0.37625 39.462452-1.157499 15.159981-0.752499 31.012462-1.847498 47.552442-3.163746 16.50623-1.347498 32.92121-2.977496 49.23494-4.919994 9.192489-1.074999 17.882478-2.244997 26.101218-3.503746 0 0-5.852493-162.766051-8.812489-163.56605C824.688993 660.534194 814.227756 657.057948 804.611518 653.237953L804.611518 653.237953z" p-id="6865" fill="#0764f5"></path><path d="M891.166412 413.571995l121.812351 0c13.216234 0 23.927471-10.712487 23.927471-23.926221 0-13.213734-10.711237-23.926221-23.927471-23.926221l-121.812351 0c-13.213734 0-23.926221 10.712487-23.926221 23.926221C867.238941 402.858258 877.952678 413.571995 891.166412 413.571995L891.166412 413.571995z" p-id="6866" fill="#0764f5"></path><path d="M1012.980013 490.449401l-121.812351 0c-13.213734 0-23.926221 10.711237-23.926221 23.924971 0 13.214984 10.712487 23.927471 23.926221 23.927471l121.812351 0c13.214984 0 23.926221-10.712487 23.926221-23.927471C1036.906234 501.160638 1026.194997 490.449401 1012.980013 490.449401L1012.980013 490.449401z" p-id="6867" fill="#0764f5"></path><path d="M1012.980013 608.928007l-121.812351 0c-13.213734 0-23.926221 10.711237-23.926221 23.924971 0 13.214984 10.712487 23.926221 23.926221 23.926221l121.812351 0c13.214984 0 23.926221-10.711237 23.926221-23.926221C1036.906234 619.639244 1026.194997 608.928007 1012.980013 608.928007L1012.980013 608.928007z" p-id="6868" fill="#0764f5"></path><path d="M836.027729 663.60794c0 0 31.213712 2.016248 53.971184 27.641216 0 0 13.437484 11.874986 16.981229 43.749947l0 56.249931c0 0-4.706244 29.087464-62.139924 35.924956L833.748982 702.499142 836.027729 663.60794z" p-id="6869" fill="#0764f5"></path></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1756957113315" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5395" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M288 768v115.2c0 25.6 19.2 44.8 44.8 44.8h556.8c25.6 0 44.8-19.2 44.8-44.8v-198.4s0-6.4-6.4-6.4h-83.2c-38.4 0-70.4-32-70.4-70.4 0-38.4 32-70.4 70.4-70.4h83.2s6.4 0 6.4-6.4V332.8c0-25.6-19.2-44.8-44.8-44.8H768C768 198.4 697.6 128 608 128S448 198.4 448 288H332.8c-25.6 0-44.8 19.2-44.8 44.8V448C198.4 448 128 518.4 128 608S198.4 768 288 768z m0-249.6h70.4V358.4h160V288c0-51.2 38.4-89.6 89.6-89.6 51.2 0 89.6 38.4 89.6 89.6v70.4h160v108.8h-19.2c-76.8 0-140.8 64-140.8 140.8 0 76.8 64 140.8 140.8 140.8h19.2v108.8H358.4v-160H288c-51.2 0-89.6-38.4-89.6-89.6 0-51.2 38.4-89.6 89.6-89.6z" p-id="5396" fill="#0764f5"></path></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1758542964332" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2345" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M853.333333 1024 170.666667 1024c-93.866667 0-170.666667-76.8-170.666667-170.666667L0 213.333333c0-25.6 17.066667-42.666667 42.666667-42.666667l938.666667 0c25.6 0 42.666667 17.066667 42.666667 42.666667l0 640C1024 947.2 947.2 1024 853.333333 1024zM85.333333 256l0 597.333333c0 46.933333 38.4 85.333333 85.333333 85.333333l682.666667 0c46.933333 0 85.333333-38.4 85.333333-85.333333L938.666667 256 85.333333 256z" p-id="2346" fill="#0764f5"></path><path d="M512 256" p-id="2347" fill="#0764f5"></path><path d="M981.333333 213.333333 42.666667 213.333333 42.666667 170.666667c0-72.533333 55.466667-128 128-128l682.666667 0c72.533333 0 128 55.466667 128 128L981.333333 213.333333z" p-id="2348" fill="#0764f5"></path><path d="M981.333333 256 42.666667 256C17.066667 256 0 238.933333 0 213.333333L0 170.666667c0-93.866667 76.8-170.666667 170.666667-170.666667l682.666667 0c93.866667 0 170.666667 76.8 170.666667 170.666667l0 42.666667C1024 238.933333 1006.933333 256 981.333333 256zM85.333333 170.666667l853.333333 0c0-46.933333-38.4-85.333333-85.333333-85.333333L170.666667 85.333333C123.733333 85.333333 85.333333 123.733333 85.333333 170.666667z" p-id="2349" fill="#0764f5"></path><path d="M298.666667 1024c-25.6 0-42.666667-17.066667-42.666667-42.666667L256 213.333333c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667l0 768C341.333333 1006.933333 324.266667 1024 298.666667 1024z" p-id="2350" fill="#0764f5"></path><path d="M42.666667 341.333333" p-id="2351" fill="#0764f5"></path><path d="M981.333333 341.333333" p-id="2352" fill="#0764f5"></path><path d="M981.333333 512 42.666667 512c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667l938.666667 0c25.6 0 42.666667 17.066667 42.666667 42.666667S1006.933333 512 981.333333 512z" p-id="2353" fill="#0764f5"></path><path d="M981.333333 768 42.666667 768c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667l938.666667 0c25.6 0 42.666667 17.066667 42.666667 42.666667S1006.933333 768 981.333333 768z" p-id="2354" fill="#0764f5"></path></svg>
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
# ContactCardList 联系人卡片列表组件
|
|
2
|
+
- 使用 cursor 生成的自定义组件。
|
|
3
|
+
|
|
4
|
+
## 组件描述
|
|
5
|
+
|
|
6
|
+
联系人卡片列表组件用于展示联系人信息,以卡片形式展示每个联系人的姓名和手机号。组件使用 Ant Design 的 Card 组件,具有良好的视觉效果和交互体验。
|
|
7
|
+
|
|
8
|
+
## 功能特性
|
|
9
|
+
|
|
10
|
+
- 📱 响应式设计,支持多种屏幕尺寸
|
|
11
|
+
- 🎨 美观的卡片布局,支持悬停效果
|
|
12
|
+
- 🔄 自动加载数据,支持错误重试
|
|
13
|
+
- 📊 使用 queryXObjectData 获取 customContact__c 数据
|
|
14
|
+
- 🎯 展示联系人姓名和手机号信息
|
|
15
|
+
- 💫 加载状态和空状态处理
|
|
16
|
+
|
|
17
|
+
## 组件属性
|
|
18
|
+
|
|
19
|
+
| 属性名 | 类型 | 默认值 | 描述 |
|
|
20
|
+
|--------|------|--------|------|
|
|
21
|
+
| title | string | '联系人卡片列表' | 组件标题 |
|
|
22
|
+
| data | any | - | 组件数据,包含用户信息和系统信息 |
|
|
23
|
+
|
|
24
|
+
## 数据源
|
|
25
|
+
|
|
26
|
+
组件通过 `queryXObjectData` 工具函数获取数据:
|
|
27
|
+
|
|
28
|
+
- **数据表**: `customContact__c`
|
|
29
|
+
- **字段**: `id`, `name`, `phone__c`
|
|
30
|
+
- **API**: `/rest/data/v2/query`
|
|
31
|
+
|
|
32
|
+
## 样式特性
|
|
33
|
+
|
|
34
|
+
- 使用 Flexbox 布局,支持响应式设计
|
|
35
|
+
- 卡片悬停效果,提升用户体验
|
|
36
|
+
- 渐变色头像,美观大方
|
|
37
|
+
- 支持移动端适配
|
|
38
|
+
|
|
39
|
+
## 使用示例
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
import ContactCardList from './components/contact-card-list';
|
|
43
|
+
|
|
44
|
+
// 在页面中使用
|
|
45
|
+
<ContactCardList
|
|
46
|
+
title="我的联系人"
|
|
47
|
+
data={amisData}
|
|
48
|
+
/>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## 技术栈
|
|
52
|
+
|
|
53
|
+
- React 16.9+
|
|
54
|
+
- TypeScript
|
|
55
|
+
- Ant Design 4.9+
|
|
56
|
+
- SCSS
|
|
57
|
+
|
|
58
|
+
## 文件结构
|
|
59
|
+
|
|
60
|
+
```
|
|
61
|
+
contact-card-list/
|
|
62
|
+
├── index.tsx # 主组件文件
|
|
63
|
+
├── model.ts # 组件配置和编辑器属性定义
|
|
64
|
+
├── style.scss # 组件样式文件
|
|
65
|
+
└── README.md # 组件说明文档
|
|
66
|
+
```
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Card, Row, Col, Spin, Empty, Avatar, Button } from 'antd';
|
|
3
|
+
import { UserOutlined, PhoneOutlined, ReloadOutlined } from '@ant-design/icons';
|
|
4
|
+
import { queryXObjectData } from '@utils/queryObjectData';
|
|
5
|
+
import './style.scss';
|
|
6
|
+
|
|
7
|
+
interface ContactCardListProps {
|
|
8
|
+
title: string;
|
|
9
|
+
data?: any;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
interface ContactData {
|
|
13
|
+
id: string;
|
|
14
|
+
name: string;
|
|
15
|
+
phone__c: string;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
interface ContactCardListState {
|
|
19
|
+
contactList: ContactData[];
|
|
20
|
+
totalSize: number;
|
|
21
|
+
loading: boolean;
|
|
22
|
+
error: string | null;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export default class ContactCardList extends React.PureComponent<
|
|
26
|
+
ContactCardListProps,
|
|
27
|
+
ContactCardListState
|
|
28
|
+
> {
|
|
29
|
+
constructor(props: ContactCardListProps) {
|
|
30
|
+
super(props);
|
|
31
|
+
|
|
32
|
+
this.state = {
|
|
33
|
+
contactList: [],
|
|
34
|
+
totalSize: 0,
|
|
35
|
+
loading: false,
|
|
36
|
+
error: null,
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
this.loadContactData = this.loadContactData.bind(this);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
componentDidMount() {
|
|
43
|
+
this.loadContactData();
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
async loadContactData() {
|
|
47
|
+
this.setState({ loading: true, error: null });
|
|
48
|
+
|
|
49
|
+
try {
|
|
50
|
+
// 使用 queryXObjectData 获取 customContact__c 数据
|
|
51
|
+
const response = await queryXObjectData({
|
|
52
|
+
xObjectApiKey: 'customContact__c',
|
|
53
|
+
fields: ['id', 'name', 'phone__c'],
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
if (response && response.code === 200) {
|
|
57
|
+
const curResult = response.result || {};
|
|
58
|
+
const records = curResult.records || [];
|
|
59
|
+
const totalSize = curResult.totalSize || 0;
|
|
60
|
+
this.setState({
|
|
61
|
+
contactList: records,
|
|
62
|
+
totalSize,
|
|
63
|
+
loading: false,
|
|
64
|
+
});
|
|
65
|
+
} else {
|
|
66
|
+
this.setState({
|
|
67
|
+
error: response?.message || '获取联系人数据失败',
|
|
68
|
+
loading: false,
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
} catch (error: any) {
|
|
72
|
+
console.error('获取联系人数据失败:', error);
|
|
73
|
+
this.setState({
|
|
74
|
+
error: error.message || '获取联系人数据失败',
|
|
75
|
+
loading: false,
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
renderContactCard(contact: ContactData, index: number) {
|
|
81
|
+
return (
|
|
82
|
+
<Col xs={24} sm={12} md={8} lg={6} xl={6} key={contact.id || index}>
|
|
83
|
+
<Card
|
|
84
|
+
className="contact-card"
|
|
85
|
+
hoverable
|
|
86
|
+
size="small"
|
|
87
|
+
style={{ marginBottom: 16 }}
|
|
88
|
+
>
|
|
89
|
+
<div className="contact-card-content">
|
|
90
|
+
<div className="contact-avatar">
|
|
91
|
+
<Avatar
|
|
92
|
+
size={48}
|
|
93
|
+
icon={<UserOutlined />}
|
|
94
|
+
className="avatar-icon"
|
|
95
|
+
/>
|
|
96
|
+
</div>
|
|
97
|
+
<div className="contact-info">
|
|
98
|
+
<div className="contact-name">
|
|
99
|
+
<UserOutlined className="info-icon" />
|
|
100
|
+
<span className="name-text">{contact.name || '未知姓名'}</span>
|
|
101
|
+
</div>
|
|
102
|
+
<div className="contact-phone">
|
|
103
|
+
<PhoneOutlined className="info-icon" />
|
|
104
|
+
<span className="phone-text">
|
|
105
|
+
{contact.phone__c || '未填写手机号'}
|
|
106
|
+
</span>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
</div>
|
|
110
|
+
</Card>
|
|
111
|
+
</Col>
|
|
112
|
+
);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
render() {
|
|
116
|
+
const { title } = this.props;
|
|
117
|
+
const { contactList, loading, error } = this.state;
|
|
118
|
+
const curAmisData = this.props.data || {};
|
|
119
|
+
const systemInfo = curAmisData.__NeoSystemInfo || {};
|
|
120
|
+
|
|
121
|
+
return (
|
|
122
|
+
<div className="contact-card-list-container">
|
|
123
|
+
<div className="card-list-header">
|
|
124
|
+
<div className="header-content">
|
|
125
|
+
<h3 className="header-title">
|
|
126
|
+
{title || '联系人卡片列表'}
|
|
127
|
+
{systemInfo.tenantName ? `【${systemInfo.tenantName}】` : ''}
|
|
128
|
+
</h3>
|
|
129
|
+
<Button
|
|
130
|
+
type="primary"
|
|
131
|
+
icon={<ReloadOutlined />}
|
|
132
|
+
onClick={this.loadContactData}
|
|
133
|
+
loading={loading}
|
|
134
|
+
className="refresh-button"
|
|
135
|
+
size="small"
|
|
136
|
+
>
|
|
137
|
+
刷新
|
|
138
|
+
</Button>
|
|
139
|
+
</div>
|
|
140
|
+
</div>
|
|
141
|
+
|
|
142
|
+
<div className="card-list-content">
|
|
143
|
+
<Spin spinning={loading} tip="加载联系人数据中...">
|
|
144
|
+
{error ? (
|
|
145
|
+
<div className="error-container">
|
|
146
|
+
<Empty
|
|
147
|
+
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
|
148
|
+
description={
|
|
149
|
+
<div>
|
|
150
|
+
<div style={{ color: '#ff4d4f', marginBottom: 8 }}>
|
|
151
|
+
{error}
|
|
152
|
+
</div>
|
|
153
|
+
<button
|
|
154
|
+
className="retry-button"
|
|
155
|
+
onClick={this.loadContactData}
|
|
156
|
+
>
|
|
157
|
+
重新加载
|
|
158
|
+
</button>
|
|
159
|
+
</div>
|
|
160
|
+
}
|
|
161
|
+
/>
|
|
162
|
+
</div>
|
|
163
|
+
) : contactList.length === 0 ? (
|
|
164
|
+
<Empty
|
|
165
|
+
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
|
166
|
+
description="暂无联系人数据"
|
|
167
|
+
/>
|
|
168
|
+
) : (
|
|
169
|
+
<Row gutter={[16, 16]}>
|
|
170
|
+
{contactList.map((contact, index) =>
|
|
171
|
+
this.renderContactCard(contact, index),
|
|
172
|
+
)}
|
|
173
|
+
</Row>
|
|
174
|
+
)}
|
|
175
|
+
</Spin>
|
|
176
|
+
</div>
|
|
177
|
+
</div>
|
|
178
|
+
);
|
|
179
|
+
}
|
|
180
|
+
}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file 联系人卡片列表组件对接编辑器的描述文件
|
|
3
|
+
*/
|
|
4
|
+
export class ContactCardListModel {
|
|
5
|
+
/**
|
|
6
|
+
* cmpType 为自定义组件名称,用于标识组件的唯一性
|
|
7
|
+
* 在构建时根据当前组件目录名称自动生成
|
|
8
|
+
*/
|
|
9
|
+
// cmpType: string = 'contact-card-list';
|
|
10
|
+
|
|
11
|
+
// 组件名称,用于设置在编辑器左侧组件面板中展示的名称
|
|
12
|
+
label: string = '联系人卡片列表';
|
|
13
|
+
|
|
14
|
+
// 组件描述,用于设置在编辑器左侧组件面板中展示的描述
|
|
15
|
+
description: string = '展示联系人信息的卡片列表组件,支持姓名和手机号展示';
|
|
16
|
+
|
|
17
|
+
// 分类标签,用于设置在编辑器左侧组件面板哪个分类中展示(可设置多个分类标签)
|
|
18
|
+
tags: string[] = ['自定义组件'];
|
|
19
|
+
|
|
20
|
+
// 组件图标,用于设置在编辑器左侧组件面板中展示的图标
|
|
21
|
+
iconSrc: string = 'https://custom-widgets.bj.bcebos.com/card-list.svg';
|
|
22
|
+
|
|
23
|
+
// 初次插入页面的默认属性数据
|
|
24
|
+
defaultComProps = {
|
|
25
|
+
title: '联系人卡片列表',
|
|
26
|
+
label: '联系人卡片列表',
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
// 设计器端预览时展示的默认数据
|
|
30
|
+
previewComProps = {
|
|
31
|
+
label: '联系人卡片列表',
|
|
32
|
+
title: '联系人卡片列表',
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* 组件面板配置,用于生成编辑器右侧属性配置面板内容
|
|
37
|
+
*/
|
|
38
|
+
propsSchema = [
|
|
39
|
+
{
|
|
40
|
+
type: 'textarea',
|
|
41
|
+
name: 'title',
|
|
42
|
+
label: '组件标题',
|
|
43
|
+
value: '联系人卡片列表',
|
|
44
|
+
placeholder: '请输入组件标题',
|
|
45
|
+
},
|
|
46
|
+
];
|
|
47
|
+
|
|
48
|
+
// 支持 函数式写法:propsSchemaCreator,com 为组件实例。优先级比 propsSchema 高
|
|
49
|
+
/*
|
|
50
|
+
propsSchemaCreator = (com: any) => {
|
|
51
|
+
return [];
|
|
52
|
+
};
|
|
53
|
+
*/
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
export default ContactCardListModel;
|