@cniot/android-pda-components 1.1.11 → 2.0.0-beta.1

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/build/index.html CHANGED
@@ -27,8 +27,8 @@
27
27
  </style>
28
28
  <script src="https://g.alicdn.com/code/lib/react/17.0.2/umd/react.production.min.js"></script>
29
29
  <script src="https://g.alicdn.com/code/lib/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
30
- <script type="module" crossorigin src="./assets/index.baa08b42.js"></script>
31
- <link rel="stylesheet" href="./assets/index.897e5e43.css">
30
+ <script type="module" crossorigin src="./assets/index.bccda3e0.js"></script>
31
+ <link rel="stylesheet" href="./assets/index.6824d354.css">
32
32
  </head>
33
33
 
34
34
  <body>
@@ -0,0 +1,556 @@
1
+ import React, { useState } from "react";
2
+ import {
3
+ ButtonV2,
4
+ ListV2,
5
+ CardV2,
6
+ FooterV2,
7
+ HeaderV2,
8
+ IllustrationV2,
9
+ LayoutV2,
10
+ MenuListV2,
11
+ PopupV2,
12
+ ScanV2,
13
+ SelectV2,
14
+ TaskCardV2,
15
+ TaskInputV2,
16
+ TagV2,
17
+ NumberPickerV2,
18
+ ProgressBarV2,
19
+ FinishCardV2,
20
+ LatticeMouthV2,
21
+ ImageUploaderV2,
22
+ InputV2,
23
+ TableV2,
24
+ PageFlowSystemPagesV2,
25
+ } from '../../packages';
26
+ import { Button, List } from "antd-mobile";
27
+ import './index.less'
28
+
29
+
30
+ const typePropsMap = {
31
+ normal: {
32
+ header: < div > 标题内容</div>,
33
+ headerExtra:
34
+ {
35
+ tag: {
36
+ text: '进行中',
37
+ // type: 'normal'
38
+ },
39
+ desc: 'A1-098',
40
+ showRightIcon: true
41
+ },
42
+ footer: [
43
+ {
44
+ type: 'primary',
45
+ buttonText: 'primary',
46
+ // disabled:true,
47
+ fullWidth: true,
48
+ },
49
+
50
+ {
51
+ type: 'secondary',
52
+ buttonText: 'secondary',
53
+ // disabled:true,
54
+ },
55
+ {
56
+ type: 'normal',
57
+ buttonText: 'normal',
58
+ // disabled:true,
59
+ },
60
+ {
61
+ type: 'primary',
62
+ buttonText: 'primary',
63
+ text: true
64
+ },
65
+ {
66
+ type: 'normal',
67
+ buttonText: 'normal',
68
+ text: true
69
+ },
70
+ {
71
+ type: 'warning',
72
+ buttonText: 'warning',
73
+ text: true
74
+ },
75
+ {
76
+ type: 'warning',
77
+ buttonText: 'warning',
78
+ },
79
+ {
80
+ type: 'warning-secondary',
81
+ buttonText: 'warning-secondary',
82
+ },
83
+ ]
84
+
85
+ },
86
+ goods: {
87
+ header: {
88
+ goodsImage: 'https://gw.alicdn.com/imgextra/i1/O1CN01PemlAa1msAsAIrq7j_!!6000000005009-0-tps-500-500.jpg',
89
+ goodsName: '礼盒套装CXW-358-EMG',
90
+ goodsCode: '10290010010',
91
+ // extra:'单位:件',
92
+ attrs: ['单位:件', '常温 | 避光 | 贵品',],
93
+ tags: [
94
+ {
95
+ text: '唯一码',
96
+ type: 'warning',
97
+ backgroundColor: '#FEF0D6'
98
+ }, {
99
+ text: '单元',
100
+ type: 'success'
101
+ }
102
+ ],
103
+ },
104
+ footer: {
105
+ label: '',
106
+ realNum: 8,
107
+ planNum: 10,
108
+ }
109
+ },
110
+ list: {
111
+ footer: 'A-9-087'
112
+ },
113
+ tip: {
114
+ content: {
115
+ label: '标题',
116
+ value: 'A-01-0908',
117
+ tag: {
118
+ type: 'time',
119
+ text: '01:24',
120
+ // icon:''
121
+ }
122
+ }
123
+ }
124
+ }
125
+
126
+ export default function (props) {
127
+ const { data, onNext = (message) => { console.log(`message:======`, message); } } = props;
128
+ const [showConfirm, setShowConfirm] = useState(false);
129
+ const [showToast, setShowToast] = useState(false);
130
+ const [showAlert, setShowAlert] = useState(false);
131
+ const [showPrompt, setShowPrompt] = useState(false);
132
+ const [showPopup, setShowPopup] = useState(false);
133
+ let type;
134
+ type = 'normal'
135
+ // type = 'goods'
136
+ type = 'list'
137
+ // type = 'tip'
138
+
139
+ const showMap = {
140
+ LayoutV2: true,
141
+ FinishCardV2: true,
142
+ HeaderV2: true,
143
+ ButtonV2FullWidth: true,
144
+ ButtonV2Group: true,
145
+ TagV2: true,
146
+ NumberPickerV2: true,
147
+ InputV2: true,
148
+ ProgressBarV2: true,
149
+ CardV2: true,
150
+ ScanV2: true,
151
+ ListV2: true,
152
+ IllustrationV2: true,
153
+ TaskCardV2: true,
154
+ TaskInputV2: true,
155
+ SelectV2: true,
156
+ MenuListV2: true,
157
+ FooterV2: true,
158
+ LatticeMouthV2: true,
159
+ ImageUploaderV2: true,
160
+ TableV2: true,
161
+ PageFlowSystemPagesV2: true,
162
+ }
163
+ const ImageUploaderV2Component = () => {
164
+ const [images, setImg] = React.useState([]);
165
+ setTimeout(() => { setImg([{ id: 1, url: "https://images.unsplash.com/photo-1624993590528-4ee743c9896e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&h=1000&q=80", }, { id: 2, url: "https://images.unsplash.com/photo-1601128533718-374ffcca299b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3128&q=80", }, { id: 3, url: "https://images.unsplash.com/photo-1567945716310-4745a6b7844b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60", },]); }, 1000);
166
+ return (
167
+ <div>
168
+ <p>ImageUploader 图片上传</p>
169
+ <ImageUploaderV2
170
+ value={images}
171
+ // box={120}
172
+ maxCount={5}
173
+ capture="camera"
174
+ uploadMode="takePhotoMethod2"
175
+ loading={false}
176
+ deletable
177
+ onDelete={(item) => {
178
+ console.log(item);
179
+ }}
180
+ onBeforeUpload={(data) => {
181
+ console.log(data);
182
+ alert(data.base64);
183
+ }}
184
+ />
185
+ </div>
186
+ );
187
+ }
188
+ const components = {
189
+ LatticeMouthV2: <>投篮指引<LatticeMouthV2 row={3} col={3} dataSource={[{ value: "highlight", label: "2", color: "highlight" }, { value: "active", label: "2", color: "active" }, { value: "default", label: "2", color: "default" }, { value: "complete", label: "2", color: "complete" }, { value: "error", label: "2", color: "error" }, { value: "自定义", label: "2", style: { "--font-size": "18px", "--background-color": "#ffffff", "--color": "#f30f30", "--label-background-color": "rgba(0,0,0,0.3)" } }]} /></>,
190
+ ImageUploaderV2: <ImageUploaderV2Component />,
191
+ HeaderV2: <HeaderV2
192
+ onBack={() => { }}
193
+ actions={[
194
+ {
195
+ label: "功能1",
196
+ value: "",
197
+ onClick() {
198
+ alert("功能1");
199
+ },
200
+ },
201
+ {
202
+ label: "功能2",
203
+ value: "",
204
+ onClick() {
205
+ alert("功能2");
206
+ },
207
+ },
208
+ ]}
209
+ >
210
+ 标准页面
211
+ </HeaderV2>,
212
+
213
+ ButtonV2FullWidth: <div style={{ backgroundColor: '#ffffff', height: 90, padding: 10, margin: '10px 0' }}>
214
+ ButtonV2FullWidth
215
+ <ButtonV2 type='primary' fullWidth onClick={() => { console.log(`primary button click===`); }}>提交</ButtonV2>
216
+ </div>,
217
+
218
+ ButtonV2Group: <div style={{ backgroundColor: '#ffffff', height: 90, padding: '10px 0', margin: '10px 0' }}>
219
+ ButtonV2Group
220
+ <ButtonV2.Group>
221
+ <ButtonV2 type='primary' fullWidth onClick={() => { console.log(`primary button click===`); }}>提交</ButtonV2>
222
+ <ButtonV2 fullWidth onClick={() => { console.log(`primary button click===`); }}>取消</ButtonV2>
223
+ </ButtonV2.Group>
224
+ </div>,
225
+
226
+ TagV2: <div style={{ backgroundColor: '#ffffff', display: 'flex', flexWrap: 'wrap', gap: 4, padding: 10, margin: '10px 0' }}>
227
+ TagV2
228
+ <TagV2 type='data-change'>data-change</TagV2>
229
+ <TagV2 type='normal'>normal'</TagV2>
230
+ <TagV2 type='warning'>warning'</TagV2>
231
+ <TagV2 type='almost-warning'>almost-warning</TagV2>
232
+ <TagV2 type='warning-end'>warning-end</TagV2>
233
+ </div>,
234
+
235
+ NumberPickerV2: <div style={{ backgroundColor: '#ffffff', padding: 10, margin: '10px 0' }}>
236
+ NumberPickerV2
237
+ <NumberPickerV2
238
+ max={10}
239
+ min={0}
240
+ />
241
+ </div>,
242
+
243
+ InputV2: <>输入框<InputV2
244
+ hasBorder
245
+ // style={{ '--text-align': 'right' }}
246
+ /></>,
247
+
248
+ ProgressBarV2: <div style={{ backgroundColor: '#ffffff', padding: 10, margin: '10px 0' }}>
249
+ ProgressBarV2
250
+ <ProgressBarV2 percent={40} />
251
+ </div>,
252
+
253
+ SelectV2: <>下拉选择<SelectV2
254
+ label="Select Reason"
255
+ placeholder="Please select"
256
+ dataSource={[
257
+ { label: "Item code", value: "1" },
258
+ { label: "DIS", value: "2" },
259
+ { label: "Barcode", value: "3" },
260
+ { label: "Category", value: "4" },
261
+ { label: "Qty", value: "5" },
262
+ { label: "Item Name", value: "6" },
263
+ { label: "DIS", value: "7" },
264
+ ]}
265
+ /></>,
266
+
267
+ CardV2: <CardV2
268
+ type={type}
269
+ {...typePropsMap[type]}
270
+ // noPadding
271
+
272
+ dataSource={[
273
+ { label: "", value: "value", className: "high", display: false },
274
+ { label: "", value: "value", className: "highlight", display: false },
275
+ { label: "输入", value: <NumberPickerV2 /> },
276
+ { label: "输入", value: <InputV2 /> },
277
+ { label: "最多六个字符", value: "2022-09-08 12:00:00" },
278
+ { label: "最多六个字符123", value: "2022-09-08 12:00:00" },
279
+ { label: "入库单号", value: "17836397", },
280
+ { label: "渠道", value: "电商", },
281
+ { label: "数量/总数", value: "12/98", type: 'error', tip: '实收数量少于应收数量,请仔细核对后再结束该入库订单' },
282
+ // { label: "label", value: "value,valuevalue,valuevalue,value" },
283
+ // { label: "入库单号", value: "17836397", className: "tag" },
284
+ // { label: "渠道", value: "电商", className: "tag" },
285
+ // { label: "数量/总数", value: "12/98", className: "tag" },
286
+ // { label: "多次收货", value: "允许", className: "tag" },
287
+
288
+ ]}
289
+ extend={
290
+ <Button size="medium" color="primary" fill="outline">
291
+ Start
292
+ </Button>
293
+ }
294
+ ></CardV2>,
295
+
296
+ ScanV2: <ScanV2
297
+ label="扫描"
298
+ placeholder="请扫描"
299
+ onScan={(value) => {
300
+ console.log("scan value", value);
301
+ }}
302
+ ></ScanV2>,
303
+
304
+ ScanV2Only: <ScanV2
305
+ label="只输入"
306
+ placeholder="Input code"
307
+ scanAllowed={false}
308
+ onScan={(value) => {
309
+ console.log("scan value", value);
310
+ }}
311
+ onChange={(value) => {
312
+ console.log("change", value);
313
+ }}
314
+ noEnter={true}
315
+ ></ScanV2>,
316
+
317
+ ListV2: <><ListV2 header="可点击列表" className="body-card" style={{ '--pda-card-margin-bottom': 0 }}>
318
+ <ListV2.Item onClick={() => {
319
+ setShowToast(false);
320
+ onNext("toast success");
321
+ setTimeout(() => {
322
+ setShowToast({
323
+ title: 'toast',
324
+ message: 'message',
325
+ // message: <div style={{ backgroundColor: 'red', }}>message</div>,
326
+ level: 'success',
327
+ duration: 3000,
328
+ });
329
+ }, 300);
330
+ }}>成功 Toast</ListV2.Item>
331
+ <ListV2.Item onClick={() => {
332
+ setShowToast(false);
333
+ onNext("toast success");
334
+ setTimeout(() => {
335
+ setShowToast({
336
+ title: 'toast',
337
+ message: 'message',
338
+ // message: <div style={{ backgroundColor: 'red', }}>message</div>,
339
+ level: 'warning',
340
+ duration: 3000,
341
+ });
342
+ }, 300);
343
+ }}>警告 Toast</ListV2.Item>
344
+ <ListV2.Item onClick={() => {
345
+ setShowToast(false);
346
+ onNext("toast error");
347
+ setTimeout(() => {
348
+ setShowToast({
349
+ title: '异常',
350
+ // title: <div style={{ backgroundColor: '#ffffff', color: '#000000' }}>title</div>,
351
+ message: <div style={{ backgroundColor: 'red', }}>message</div>,
352
+ message: 'message',
353
+ message: [{ label: '入库单号', value: '73683638' }, { label: '入库数量', value: '22' }],
354
+ level: 'error',
355
+ duration: 500000,
356
+ });
357
+ }, 300);
358
+ }}>错误 Toast</ListV2.Item>
359
+ <ListV2.Item onClick={() => {
360
+ onNext("alert");
361
+ setShowAlert({
362
+ title: <div style={{ backgroundColor: '#ffffff', color: '#000000' }}>title</div>,
363
+ message: <div >message</div>,
364
+ message: [{ label: '入库单号', value: '73683638' }, { label: '入库数量', value: '22' }],
365
+ // message: <div style={{ backgroundColor: 'red', }}>message</div>,
366
+ okText: '点击确认',
367
+ });
368
+ }}>alert</ListV2.Item>
369
+ <ListV2.Item onClick={() => {
370
+ onNext("confirm");
371
+ setShowConfirm({
372
+ title: '确认移动?',
373
+ message: 'message',
374
+ message: [{ label: '入库单号', value: '73683638' }, { label: '入库数量', value: '22' }],
375
+ // message: <div style={{ backgroundColor: 'red', }}>message</div>,
376
+ okText: '确认',
377
+ cancelText: '取消',
378
+ okButtonType: 'error'
379
+ });
380
+ }}>confirm</ListV2.Item>
381
+ <ListV2.Item onClick={() => {
382
+ onNext("prompt");
383
+ setShowPrompt({
384
+ title: '输入下架数量',
385
+ placeholder: '输入下架数量',
386
+ inputTip: '这里是输入提示',
387
+ defaultValue: 2,
388
+ okText: '确认',
389
+ cancelText: '取消',
390
+ })
391
+ }}>prompt</ListV2.Item>
392
+ <ListV2.Item onClick={() => {
393
+ onNext("popup table");
394
+ setShowPopup({
395
+ columns: [
396
+ { title: '序号', dataIndex: 'a', },
397
+ { title: 'SN', dataIndex: 'b', },
398
+ { title: '状态', dataIndex: 'c', },
399
+ ],
400
+ dataSource: [
401
+ { a: '1', b: '1234', c: '待扫' },
402
+ { a: '2', b: '234', c: '待扫' },
403
+ { a: '3', b: '444', c: '待扫' },
404
+ { a: 'a2', b: '442', c: '待扫' },
405
+ { a: 'a2', b: '2323', c: '待扫' },
406
+ // { a: 'a2', b: 'b2' },
407
+ // { a: 'a2', b: 'b2' },
408
+ // { a: 'a2', b: 'b2' },
409
+ // { a: 'a2', b: 'b2' },
410
+ // { a: 'a2', b: 'b2' },
411
+ // { a: 'a2', b: 'b2' },
412
+ // { a: 'a2', b: 'b2' },
413
+ // { a: 'a2', b: 'b2' },
414
+ // { a: 'a2', b: 'b2' },
415
+ // { a: 'a2', b: 'b2' },
416
+ // { a: 'a2', b: 'b2' },
417
+ // { a: 'a2', b: 'b2' },
418
+ // { a: 'a2', b: 'b2' },
419
+ // { a: 'a2', b: 'b2' },
420
+ // { a: 'a2', b: 'b2' },
421
+ { a: 'a2', b: 'b4' },
422
+ ],
423
+ })
424
+ }}>Popup Table</ListV2.Item>
425
+ {/* <ListV2.Item ><CardV2 type={'tip'} {...typePropsMap[type]} ></CardV2></ListV2.Item>
426
+ <ListV2.Item><CardV2 type={'tip'} {...typePropsMap[type]} ></CardV2></ListV2.Item>
427
+ <ListV2.Item><CardV2 type={'tip'} {...typePropsMap[type]} ></CardV2></ListV2.Item> */}
428
+ </ListV2>
429
+ <CardV2 type={'tip'} {...typePropsMap.tip} ></CardV2>
430
+ <CardV2 type={'tip'} {...typePropsMap.tip} ></CardV2>
431
+ <CardV2 type={'tip'} {...typePropsMap.tip} ></CardV2>
432
+ </>
433
+ ,
434
+
435
+ IllustrationV2: <IllustrationV2 />,
436
+
437
+ TaskCardV2: <TaskCardV2
438
+ data={{
439
+ title: "Trip ID.",
440
+ content: "TK2021012700002",
441
+ tags: [
442
+ { label: "SKU", value: "6" },
443
+ // { label: "QTY", value: "2" },
444
+ // { label: "QTY1", value: "2" },
445
+ // { label: "SKU", value: "6/7" },
446
+ // { label: "QTY", value: "2/2" },
447
+ ],
448
+ progress: {
449
+ desc: "MLP progress",
450
+ current: "1",
451
+ total: 10,
452
+ },
453
+ }}
454
+ ></TaskCardV2>,
455
+
456
+ TaskInputV2: <TaskInputV2
457
+ label="只输入"
458
+ placeholder="Input code"
459
+ scanAllowd={false}
460
+ onChange={(value) => {
461
+ console.log("scan value", value);
462
+ }}
463
+ decimal={3}
464
+ // unit={'EA'}
465
+ // max={5}
466
+ // min={1}
467
+ ></TaskInputV2>,
468
+
469
+ MenuListV2: <MenuListV2
470
+ dataSource={[
471
+ {
472
+ label: "Assigned packing tasks",
473
+ value: 10,
474
+ key: "assigned",
475
+ backgroundColor: "#5dc8a6",
476
+ img: "https://img.alicdn.com/imgextra/i3/O1CN01UiB43o1HEYTkJDkGW_!!6000000000726-2-tps-124-128.png",
477
+ },
478
+ {
479
+ label: "Available Packing Tasks",
480
+ value: 20,
481
+ key: "available",
482
+ backgroundColor: "#4c80f8",
483
+ img: "https://img.alicdn.com/imgextra/i2/O1CN013UzJVm262gcLeDKjQ_!!6000000007604-2-tps-118-128.png",
484
+ },
485
+ ]}
486
+ onSelect={console.log}
487
+ ></MenuListV2>,
488
+
489
+ FooterV2: <FooterV2>
490
+ <ButtonV2.Group>
491
+ <ButtonV2 type='primary' text fullWidth onClick={() => { console.log(`primary button click===`); }}>提交</ButtonV2>
492
+ <ButtonV2 fullWidth onClick={() => { console.log(`primary button click===`); }}>取消</ButtonV2>
493
+ <ButtonV2 type='warning' fullWidth onClick={() => { console.log(`warning button click===`); }}>warning</ButtonV2>
494
+ <ButtonV2 type='secondary' fullWidth onClick={() => { console.log(`secondary button click===`); }}>secondary</ButtonV2>
495
+ </ButtonV2.Group>
496
+ </FooterV2>,
497
+ }
498
+
499
+ return (
500
+ <div className="debug-father-container">
501
+ <LayoutV2 style={{ display: showMap['LayoutV2'] ? undefined : 'none' }}>
502
+ {
503
+ Object.entries(components).map(([key, value]) => {
504
+ return showMap[key] ? value : null;
505
+ })
506
+ }
507
+ </LayoutV2 >
508
+ <div style={{ display: showMap['FinishCardV2'] ? undefined : 'none' }}>
509
+ <FinishCardV2
510
+ title={'收货完成!'}
511
+ okText={'返回'}
512
+ cancelText={'取消'}
513
+ infoTitle={'入库单号:12838383'}
514
+ infoList={[
515
+ {
516
+ label: '入库单号',
517
+ value: '7788038939',
518
+ },
519
+ {
520
+ label: 'SKU',
521
+ value: 30,
522
+ },
523
+ {
524
+ label: '数量',
525
+ value: '200 件',
526
+ },
527
+ ]}
528
+ />
529
+ </div>
530
+ {
531
+ showToast && <PageFlowSystemPagesV2.Toast data={showToast}
532
+ onNext={() => { onNext(); }}
533
+ />
534
+ }
535
+ {
536
+ showAlert && <PageFlowSystemPagesV2.Alert data={showAlert}
537
+ onNext={() => { onNext(); setShowAlert(false) }}
538
+ />
539
+ }
540
+ {
541
+ showConfirm && <PageFlowSystemPagesV2.Confirm data={showConfirm}
542
+ onNext={() => { onNext(); setShowConfirm(false) }} />
543
+ }
544
+ {
545
+ showPrompt && <PageFlowSystemPagesV2.Prompt data={showPrompt}
546
+ onNext={() => { onNext(); setShowPrompt(false) }}
547
+ />
548
+ }
549
+ {
550
+ showPopup && <PopupV2>
551
+ <TableV2 {...(showPopup || {})} />
552
+ </PopupV2>
553
+ }
554
+ </div >
555
+ );
556
+ }
@@ -0,0 +1,10 @@
1
+ .debug-father-container {
2
+ height: 100vh;
3
+ width: 100vw;
4
+ position: absolute;
5
+ top: 0;
6
+ right: 0;
7
+ bottom: 0;
8
+ left: 0;
9
+ background-color: #fff;
10
+ }