@zscreate/zhxy-app-component 1.0.377 → 1.0.379
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.
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
|
|
2
|
+
<u-popup
|
|
3
|
+
v-model="visible"
|
|
4
4
|
mode="center"
|
|
5
|
-
:
|
|
5
|
+
:border-radius="20"
|
|
6
6
|
:closeable="!loading"
|
|
7
7
|
@close="handleCancel"
|
|
8
8
|
>
|
|
@@ -10,98 +10,105 @@
|
|
|
10
10
|
<!-- 标题 -->
|
|
11
11
|
<view class="modal-header">
|
|
12
12
|
<text class="modal-title">AI填表</text>
|
|
13
|
+
<!-- <view v-if="!loading" class="close-icon" @click="handleCancel">×</view> -->
|
|
13
14
|
</view>
|
|
14
15
|
|
|
15
|
-
<!-- 内容区域 -->
|
|
16
|
-
<view
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
16
|
+
<!-- 内容区域 - 使用scroll-view实现触摸滚动 -->
|
|
17
|
+
<scroll-view
|
|
18
|
+
scroll-y
|
|
19
|
+
class="modal-content"
|
|
20
|
+
>
|
|
21
|
+
<view class="content-inner">
|
|
22
|
+
<!-- 输入框 - 始终显示 -->
|
|
23
|
+
<view class="form-item">
|
|
24
|
+
<view class="label">请输入或粘贴内容：</view>
|
|
25
|
+
<textarea
|
|
26
|
+
v-model="contentText"
|
|
27
|
+
class="custom-textarea"
|
|
28
|
+
:class="{ disabled: loading }"
|
|
29
|
+
:placeholder="placeholder"
|
|
30
|
+
:disabled="loading"
|
|
31
|
+
placeholder-class="textarea-placeholder"
|
|
32
|
+
:maxlength="-1"
|
|
33
|
+
/>
|
|
34
|
+
</view>
|
|
34
35
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
36
|
+
<!-- 进度条 -->
|
|
37
|
+
<view class="progress-info" v-if="recognizeProgress.total > 0">
|
|
38
|
+
<view class="progress-bar">
|
|
39
|
+
<view
|
|
40
|
+
class="progress-bar-active"
|
|
41
|
+
:style="{
|
|
42
|
+
width: progressPercent + '%',
|
|
43
|
+
backgroundColor: themeConfig.color || '#2979ff'
|
|
44
|
+
}"
|
|
45
|
+
></view>
|
|
46
|
+
<text class="progress-percent">{{ progressPercent }}%</text>
|
|
47
|
+
</view>
|
|
48
|
+
<!-- <view class="progress-text">
|
|
49
|
+
{{ recognizeProgress.current }}/{{ recognizeProgress.total }}
|
|
50
|
+
</view> -->
|
|
44
51
|
</view>
|
|
45
|
-
</view>
|
|
46
52
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
53
|
+
<!-- 识别结果 -->
|
|
54
|
+
<view class="result-list" v-if="resultList.length > 0">
|
|
55
|
+
<view class="result-title">识别结果：</view>
|
|
56
|
+
<view class="result-items">
|
|
57
|
+
<view class="result-item" v-for="(item, index) in resultList" :key="index">
|
|
58
|
+
<text class="field-name">{{ item.fieldName }}：</text>
|
|
59
|
+
<text class="field-value" :class="{ 'empty-value': item.value === undefined }">
|
|
60
|
+
{{ item.value === undefined ? '未识别成功' : item.value }}
|
|
61
|
+
</text>
|
|
62
|
+
</view>
|
|
56
63
|
</view>
|
|
57
|
-
</
|
|
64
|
+
</view>
|
|
58
65
|
</view>
|
|
59
|
-
</view>
|
|
66
|
+
</scroll-view>
|
|
60
67
|
|
|
61
68
|
<!-- 底部按钮 -->
|
|
62
69
|
<view class="footer-btns">
|
|
63
|
-
<
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
:
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
flex: 1,
|
|
77
|
-
marginRight: resultList.length > 0 ? '20rpx' : '0',
|
|
78
|
-
backgroundColor: themeConfig.color || '#2979ff',
|
|
79
|
-
borderColor: themeConfig.color || '#2979ff',
|
|
80
|
-
color: '#fff'
|
|
70
|
+
<view
|
|
71
|
+
class="custom-btn cancel-btn"
|
|
72
|
+
:class="{ disabled: loading }"
|
|
73
|
+
@click="!loading && handleCancel()"
|
|
74
|
+
>
|
|
75
|
+
取消
|
|
76
|
+
</view>
|
|
77
|
+
<view
|
|
78
|
+
class="custom-btn primary-btn"
|
|
79
|
+
:class="{ disabled: loading || !contentText.trim() }"
|
|
80
|
+
:style="{
|
|
81
|
+
marginRight: resultList.length > 0 && hasSuccessResult ? '20rpx' : '0',
|
|
82
|
+
backgroundColor: (loading || !contentText.trim()) ? '#d3d3d3' : (themeConfig.color || '#2979ff')
|
|
81
83
|
}"
|
|
82
|
-
|
|
83
|
-
|
|
84
|
+
@click="!(loading || !contentText.trim()) && startRecognize()"
|
|
85
|
+
>
|
|
86
|
+
<u-loading mode="circle" v-if="loading" size="32" color="#fff" show></u-loading>
|
|
87
|
+
<text style="margin-left: 10rpx;">开始识别</text>
|
|
88
|
+
</view>
|
|
89
|
+
<view
|
|
84
90
|
v-if="resultList.length > 0 && hasSuccessResult"
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
:customStyle="{
|
|
90
|
-
flex: 1,
|
|
91
|
-
backgroundColor: themeConfig.color || '#2979ff',
|
|
92
|
-
borderColor: themeConfig.color || '#2979ff',
|
|
93
|
-
color: '#fff',
|
|
91
|
+
class="custom-btn primary-btn"
|
|
92
|
+
:class="{ disabled: loading }"
|
|
93
|
+
:style="{
|
|
94
|
+
backgroundColor: loading ? '#d3d3d3' : (themeConfig.color || '#2979ff')
|
|
94
95
|
}"
|
|
95
|
-
|
|
96
|
+
@click="!loading && handleOk()"
|
|
97
|
+
>
|
|
98
|
+
确认填入
|
|
99
|
+
</view>
|
|
96
100
|
</view>
|
|
97
101
|
</view>
|
|
98
|
-
|
|
102
|
+
<h-loading :isLoading="loading" :tips="tips"></h-loading>
|
|
103
|
+
</u-popup>
|
|
99
104
|
</template>
|
|
100
105
|
|
|
101
106
|
<script>
|
|
107
|
+
import hLoading from '../h-loading.vue';
|
|
108
|
+
|
|
102
109
|
export default {
|
|
103
110
|
name: "AIAutoFillForm",
|
|
104
|
-
components: {},
|
|
111
|
+
components: {hLoading},
|
|
105
112
|
|
|
106
113
|
data() {
|
|
107
114
|
return {
|
|
@@ -112,6 +119,7 @@ export default {
|
|
|
112
119
|
models: {}, // 表单的值
|
|
113
120
|
formList: [], // 需要匹配得表单组件
|
|
114
121
|
contentText: '', // 用户输入的内容
|
|
122
|
+
placeholder: '请输入或粘贴需要识别的内容，例如：张三 男 合肥大学',
|
|
115
123
|
recognizeProgress: {
|
|
116
124
|
current: 0,
|
|
117
125
|
total: 0,
|
|
@@ -122,7 +130,9 @@ export default {
|
|
|
122
130
|
};
|
|
123
131
|
},
|
|
124
132
|
|
|
125
|
-
mounted() {
|
|
133
|
+
mounted() {
|
|
134
|
+
},
|
|
135
|
+
|
|
126
136
|
computed: {
|
|
127
137
|
themeConfig() {
|
|
128
138
|
return this.$store.getters["theme/themeConfig"] || {};
|
|
@@ -138,6 +148,7 @@ export default {
|
|
|
138
148
|
},
|
|
139
149
|
|
|
140
150
|
methods: {
|
|
151
|
+
|
|
141
152
|
init(formData, models) {
|
|
142
153
|
console.log(formData, models);
|
|
143
154
|
this.formList = []
|
|
@@ -337,6 +348,7 @@ export default {
|
|
|
337
348
|
overflow: hidden;
|
|
338
349
|
|
|
339
350
|
.modal-header {
|
|
351
|
+
position: relative;
|
|
340
352
|
padding: 10rpx 32rpx 10rpx;
|
|
341
353
|
border-bottom: 1rpx solid #ebeef5;
|
|
342
354
|
text-align: center;
|
|
@@ -345,14 +357,29 @@ export default {
|
|
|
345
357
|
font-size: 36rpx;
|
|
346
358
|
font-weight: 600;
|
|
347
359
|
color: #303133;
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
.close-icon {
|
|
363
|
+
position: absolute;
|
|
364
|
+
right: 20rpx;
|
|
365
|
+
top: 30rpx;
|
|
366
|
+
width: 50rpx;
|
|
367
|
+
height: 50rpx;
|
|
368
|
+
line-height: 50rpx;
|
|
348
369
|
text-align: center;
|
|
370
|
+
font-size: 50rpx;
|
|
371
|
+
color: #909399;
|
|
372
|
+
cursor: pointer;
|
|
349
373
|
}
|
|
350
374
|
}
|
|
351
375
|
|
|
352
376
|
.modal-content {
|
|
377
|
+
width: 100%;
|
|
378
|
+
max-height: 80vh;
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
.content-inner {
|
|
353
382
|
padding: 32rpx;
|
|
354
|
-
max-height: 800rpx;
|
|
355
|
-
overflow-y: auto;
|
|
356
383
|
}
|
|
357
384
|
|
|
358
385
|
.form-item {
|
|
@@ -364,13 +391,65 @@ export default {
|
|
|
364
391
|
margin-bottom: 16rpx;
|
|
365
392
|
font-weight: 500;
|
|
366
393
|
}
|
|
394
|
+
|
|
395
|
+
.custom-textarea {
|
|
396
|
+
width: 100%;
|
|
397
|
+
height: 300rpx;
|
|
398
|
+
padding: 20rpx;
|
|
399
|
+
background-color: #f5f7fa;
|
|
400
|
+
border-radius: 12rpx;
|
|
401
|
+
border: 1rpx solid #e4e7ed;
|
|
402
|
+
font-size: 28rpx;
|
|
403
|
+
color: #303133;
|
|
404
|
+
line-height: 1.5;
|
|
405
|
+
box-sizing: border-box;
|
|
406
|
+
|
|
407
|
+
&.disabled {
|
|
408
|
+
background-color: #f0f2f5;
|
|
409
|
+
color: #c0c4cc;
|
|
410
|
+
}
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
.textarea-placeholder {
|
|
414
|
+
color: #c0c4cc;
|
|
415
|
+
font-size: 26rpx;
|
|
416
|
+
}
|
|
367
417
|
}
|
|
368
418
|
|
|
369
419
|
.progress-info {
|
|
370
420
|
margin-bottom: 32rpx;
|
|
371
421
|
|
|
422
|
+
.progress-bar {
|
|
423
|
+
position: relative;
|
|
424
|
+
width: 100%;
|
|
425
|
+
height: 32rpx;
|
|
426
|
+
background-color: #ebeef5;
|
|
427
|
+
border-radius: 16rpx;
|
|
428
|
+
overflow: hidden;
|
|
429
|
+
|
|
430
|
+
.progress-bar-active {
|
|
431
|
+
height: 100%;
|
|
432
|
+
border-radius: 16rpx;
|
|
433
|
+
transition: width 0.3s ease;
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
.progress-percent {
|
|
437
|
+
position: absolute;
|
|
438
|
+
top: 0;
|
|
439
|
+
left: 0;
|
|
440
|
+
right: 0;
|
|
441
|
+
height: 100%;
|
|
442
|
+
line-height: 32rpx;
|
|
443
|
+
text-align: center;
|
|
444
|
+
font-size: 22rpx;
|
|
445
|
+
color: #fff;
|
|
446
|
+
font-weight: 600;
|
|
447
|
+
z-index: 1;
|
|
448
|
+
}
|
|
449
|
+
}
|
|
450
|
+
|
|
372
451
|
.progress-text {
|
|
373
|
-
margin-top:
|
|
452
|
+
margin-top: 12rpx;
|
|
374
453
|
font-size: 24rpx;
|
|
375
454
|
color: #606266;
|
|
376
455
|
text-align: center;
|
|
@@ -407,8 +486,8 @@ export default {
|
|
|
407
486
|
margin-bottom: 20rpx;
|
|
408
487
|
}
|
|
409
488
|
|
|
410
|
-
.result-
|
|
411
|
-
|
|
489
|
+
.result-items {
|
|
490
|
+
// 识别结果项容器
|
|
412
491
|
}
|
|
413
492
|
|
|
414
493
|
.result-item {
|
|
@@ -443,10 +522,46 @@ export default {
|
|
|
443
522
|
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
|
444
523
|
border-top: 1rpx solid #ebeef5;
|
|
445
524
|
background: #ffffff;
|
|
525
|
+
|
|
526
|
+
.custom-btn {
|
|
527
|
+
flex: 1;
|
|
528
|
+
height: 80rpx;
|
|
529
|
+
line-height: 80rpx;
|
|
530
|
+
text-align: center;
|
|
531
|
+
border-radius: 12rpx;
|
|
532
|
+
font-size: 30rpx;
|
|
533
|
+
font-weight: 500;
|
|
534
|
+
transition: opacity 0.3s;
|
|
535
|
+
border-radius: 20rpx;
|
|
536
|
+
|
|
537
|
+
&.cancel-btn {
|
|
538
|
+
background-color: #f5f7fa;
|
|
539
|
+
color: #606266;
|
|
540
|
+
margin-right: 20rpx;
|
|
541
|
+
|
|
542
|
+
&.disabled {
|
|
543
|
+
background-color: #d3d3d3;
|
|
544
|
+
color: #999;
|
|
545
|
+
opacity: 0.6;
|
|
546
|
+
}
|
|
547
|
+
}
|
|
548
|
+
|
|
549
|
+
&.primary-btn {
|
|
550
|
+
color: #ffffff;
|
|
551
|
+
display: flex;
|
|
552
|
+
align-items: center;
|
|
553
|
+
justify-content: center;
|
|
554
|
+
|
|
555
|
+
&.disabled {
|
|
556
|
+
background-color: #d3d3d3 !important;
|
|
557
|
+
color: #999;
|
|
558
|
+
opacity: 0.6;
|
|
559
|
+
}
|
|
560
|
+
}
|
|
561
|
+
}
|
|
446
562
|
}
|
|
447
563
|
}
|
|
448
|
-
::v-deep .
|
|
449
|
-
|
|
450
|
-
top: 20rpx !important;
|
|
564
|
+
::v-deep .u-popup__content__close {
|
|
565
|
+
display: none !important;
|
|
451
566
|
}
|
|
452
567
|
</style>
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<transition name="fade">
|
|
3
|
+
<view v-if="isLoading" class="loading_wrap" :style="{'padding-top':topheight + 'rpx'}">
|
|
4
|
+
<view class="overlay"></view>
|
|
5
|
+
<view class="flex justify-center relative">
|
|
6
|
+
<image src="@/static/images/loading.gif" style="width: 400rpx; height: 400rpx"></image>
|
|
7
|
+
<text class="absolute" style="left: 50%; top: calc(50% + 50rpx); transform: translate(-50%, -50%); color: #33b3ed; font-size: 26rpx">{{ tips }}</text>
|
|
8
|
+
</view>
|
|
9
|
+
<!-- <view :style="{ backgroundColor:color,width:size-10+'px',height:size-10+'px'}" class="cube1"></view>-->
|
|
10
|
+
<!-- <view :style="{ backgroundColor:color,width:size-10+'px',height:size-10+'px'}" class="cube2"></view>-->
|
|
11
|
+
</view>
|
|
12
|
+
</transition>
|
|
13
|
+
</template>
|
|
14
|
+
|
|
15
|
+
<script>
|
|
16
|
+
export default {
|
|
17
|
+
props: {
|
|
18
|
+
topheight:{
|
|
19
|
+
type:[String,Number],
|
|
20
|
+
default:500
|
|
21
|
+
},
|
|
22
|
+
color: {
|
|
23
|
+
type: String,
|
|
24
|
+
default: '#5A7CEA'
|
|
25
|
+
},
|
|
26
|
+
size: {
|
|
27
|
+
type: Number,
|
|
28
|
+
default: 40
|
|
29
|
+
},
|
|
30
|
+
isLoading: {
|
|
31
|
+
type: Boolean,
|
|
32
|
+
default: false,
|
|
33
|
+
},
|
|
34
|
+
tips: {
|
|
35
|
+
type: String,
|
|
36
|
+
default: '数据加载中'
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
<style lang="scss" scoped>
|
|
43
|
+
.fade-enter-active,
|
|
44
|
+
.fade-leave-active {
|
|
45
|
+
transition: opacity .3s;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.fade-enter,
|
|
49
|
+
.fade-leave-to {
|
|
50
|
+
opacity: 0;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.loading_wrap {
|
|
54
|
+
position: fixed;
|
|
55
|
+
top: 0;
|
|
56
|
+
left: 0;
|
|
57
|
+
width: 100%;
|
|
58
|
+
height: 100%;
|
|
59
|
+
// padding-top: 500rpx;
|
|
60
|
+
z-index:100;
|
|
61
|
+
|
|
62
|
+
.overlay {
|
|
63
|
+
position: absolute;
|
|
64
|
+
top: 0;
|
|
65
|
+
left: 0;
|
|
66
|
+
width: 100%;
|
|
67
|
+
height: 100%;
|
|
68
|
+
background: rgba(0,0,0,0);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.loading {
|
|
72
|
+
margin: 0 auto 50%;
|
|
73
|
+
position: relative;
|
|
74
|
+
transform: translate(-50%, -50%);
|
|
75
|
+
|
|
76
|
+
.cube1,
|
|
77
|
+
.cube2 {
|
|
78
|
+
position: absolute;
|
|
79
|
+
top: 0;
|
|
80
|
+
left: 0;
|
|
81
|
+
|
|
82
|
+
-webkit-animation: cubemove 1.8s infinite ease-in-out;
|
|
83
|
+
animation: cubemove 1.8s infinite ease-in-out;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.cube2 {
|
|
87
|
+
-webkit-animation-delay: -0.9s;
|
|
88
|
+
animation-delay: -0.9s;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
@-webkit-keyframes cubemove {
|
|
94
|
+
25% {
|
|
95
|
+
-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5)
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
50% {
|
|
99
|
+
-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg)
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
75% {
|
|
103
|
+
-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5)
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
100% {
|
|
107
|
+
-webkit-transform: rotate(-360deg)
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
@keyframes cubemove {
|
|
112
|
+
25% {
|
|
113
|
+
transform: translateX(42px) rotate(-90deg) scale(0.5);
|
|
114
|
+
-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
50% {
|
|
118
|
+
transform: translateX(42px) translateY(42px) rotate(-179deg);
|
|
119
|
+
-webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
50.1% {
|
|
123
|
+
transform: translateX(42px) translateY(42px) rotate(-180deg);
|
|
124
|
+
-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
75% {
|
|
128
|
+
transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
|
|
129
|
+
-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
100% {
|
|
133
|
+
transform: rotate(-360deg);
|
|
134
|
+
-webkit-transform: rotate(-360deg);
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
</style>
|
package/package.json
CHANGED
|
Binary file
|