haiwei-ui 1.0.97 → 1.0.98
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
CHANGED
|
@@ -2,45 +2,42 @@
|
|
|
2
2
|
<component v-bind:is="`nm-${options.showMode || 'drawer'}`" header footer draggable :padding="20" :title="title" :icon="icon" :width="width" :height="height" :visible.sync="visible_">
|
|
3
3
|
<div class="import-container">
|
|
4
4
|
<!-- 步骤指示器 -->
|
|
5
|
-
<el-steps :active="currentStep" align-center class="import-steps">
|
|
6
|
-
<el-step title="选择文件"
|
|
7
|
-
<el-step title="配置选项"
|
|
8
|
-
<el-step title="数据映射"
|
|
9
|
-
<el-step title="
|
|
5
|
+
<el-steps :active="currentStep" align-center class="import-steps" simple>
|
|
6
|
+
<el-step title="选择文件" />
|
|
7
|
+
<el-step title="配置选项" />
|
|
8
|
+
<el-step title="数据映射" />
|
|
9
|
+
<el-step title="确认导入" />
|
|
10
10
|
</el-steps>
|
|
11
11
|
|
|
12
12
|
<!-- 步骤1：选择文件 -->
|
|
13
13
|
<div v-if="currentStep === 1" class="step-content">
|
|
14
14
|
<el-card shadow="never" class="step-card">
|
|
15
15
|
<div slot="header" class="step-header">
|
|
16
|
-
<
|
|
17
|
-
|
|
16
|
+
<div class="header-left">
|
|
17
|
+
<span class="step-title">选择Excel文件</span>
|
|
18
|
+
<span class="step-subtitle">支持 .xlsx 和 .xls 格式，最大10MB</span>
|
|
19
|
+
</div>
|
|
20
|
+
<div class="header-right">
|
|
21
|
+
<el-upload
|
|
22
|
+
ref="upload"
|
|
23
|
+
:action="uploadUrl"
|
|
24
|
+
:headers="headers"
|
|
25
|
+
:before-upload="beforeUpload"
|
|
26
|
+
:on-success="onUploadSuccess"
|
|
27
|
+
:on-error="onUploadError"
|
|
28
|
+
:on-remove="onFileRemove"
|
|
29
|
+
:file-list="fileList"
|
|
30
|
+
:limit="1"
|
|
31
|
+
accept=".xlsx,.xls"
|
|
32
|
+
:show-file-list="false"
|
|
33
|
+
>
|
|
34
|
+
<el-button type="primary" size="medium" icon="el-icon-upload">
|
|
35
|
+
选择文件
|
|
36
|
+
</el-button>
|
|
37
|
+
</el-upload>
|
|
38
|
+
</div>
|
|
18
39
|
</div>
|
|
19
40
|
|
|
20
|
-
<el-upload
|
|
21
|
-
ref="upload"
|
|
22
|
-
class="upload-area"
|
|
23
|
-
drag
|
|
24
|
-
:action="uploadUrl"
|
|
25
|
-
:headers="headers"
|
|
26
|
-
:before-upload="beforeUpload"
|
|
27
|
-
:on-success="onUploadSuccess"
|
|
28
|
-
:on-error="onUploadError"
|
|
29
|
-
:on-remove="onFileRemove"
|
|
30
|
-
:file-list="fileList"
|
|
31
|
-
:limit="1"
|
|
32
|
-
accept=".xlsx,.xls"
|
|
33
|
-
>
|
|
34
|
-
<div class="upload-content">
|
|
35
|
-
<i class="el-icon-upload upload-icon"></i>
|
|
36
|
-
<div class="upload-text">
|
|
37
|
-
<div class="upload-main-text">将文件拖到此处，或</div>
|
|
38
|
-
<div class="upload-sub-text">点击上传</div>
|
|
39
|
-
</div>
|
|
40
|
-
<div class="upload-tip">只能上传Excel文件，且不超过10MB</div>
|
|
41
|
-
</div>
|
|
42
|
-
</el-upload>
|
|
43
|
-
|
|
44
41
|
<div v-if="fileInfo" class="file-info-card">
|
|
45
42
|
<el-descriptions :column="2" border size="medium" class="file-info">
|
|
46
43
|
<el-descriptions-item label="文件名">
|
|
@@ -72,6 +69,14 @@
|
|
|
72
69
|
</el-form>
|
|
73
70
|
</div>
|
|
74
71
|
</div>
|
|
72
|
+
|
|
73
|
+
<div v-else class="upload-placeholder">
|
|
74
|
+
<div class="placeholder-content">
|
|
75
|
+
<i class="el-icon-document placeholder-icon"></i>
|
|
76
|
+
<div class="placeholder-text">请选择要导入的Excel文件</div>
|
|
77
|
+
<div class="placeholder-tip">支持 .xlsx 和 .xls 格式，文件大小不超过10MB</div>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
75
80
|
</el-card>
|
|
76
81
|
</div>
|
|
77
82
|
|
|
@@ -79,8 +84,10 @@
|
|
|
79
84
|
<div v-if="currentStep === 2" class="step-content">
|
|
80
85
|
<el-card shadow="never" class="step-card">
|
|
81
86
|
<div slot="header" class="step-header">
|
|
82
|
-
<
|
|
83
|
-
|
|
87
|
+
<div class="header-left">
|
|
88
|
+
<span class="step-title">配置解析选项</span>
|
|
89
|
+
<span class="step-subtitle">设置Excel解析参数</span>
|
|
90
|
+
</div>
|
|
84
91
|
</div>
|
|
85
92
|
|
|
86
93
|
<el-form ref="optionsForm" :model="model" :rules="rules" label-width="140px" size="medium">
|
|
@@ -166,8 +173,10 @@
|
|
|
166
173
|
<div v-if="currentStep === 3" class="step-content">
|
|
167
174
|
<el-card shadow="never" class="step-card">
|
|
168
175
|
<div slot="header" class="step-header">
|
|
169
|
-
<
|
|
170
|
-
|
|
176
|
+
<div class="header-left">
|
|
177
|
+
<span class="step-title">配置字段映射</span>
|
|
178
|
+
<span class="step-subtitle">将Excel列映射到目标字段</span>
|
|
179
|
+
</div>
|
|
171
180
|
</div>
|
|
172
181
|
|
|
173
182
|
<div v-if="parseResult" class="mapping-container">
|
|
@@ -265,7 +274,7 @@
|
|
|
265
274
|
|
|
266
275
|
<div class="form-actions">
|
|
267
276
|
<el-button type="primary" @click="currentStep = 4" style="width: 200px;">
|
|
268
|
-
<i class="el-icon-arrow-right"></i>
|
|
277
|
+
<i class="el-icon-arrow-right"></i> 下一步：确认导入
|
|
269
278
|
</el-button>
|
|
270
279
|
<el-button @click="currentStep = 2" style="margin-left: 20px;">
|
|
271
280
|
<i class="el-icon-back"></i> 返回上一步
|
|
@@ -278,12 +287,14 @@
|
|
|
278
287
|
</el-card>
|
|
279
288
|
</div>
|
|
280
289
|
|
|
281
|
-
<!-- 步骤4
|
|
290
|
+
<!-- 步骤4：确认导入 -->
|
|
282
291
|
<div v-if="currentStep === 4" class="step-content">
|
|
283
292
|
<el-card shadow="never" class="step-card">
|
|
284
293
|
<div slot="header" class="step-header">
|
|
285
|
-
<
|
|
286
|
-
|
|
294
|
+
<div class="header-left">
|
|
295
|
+
<span class="step-title">确认导入</span>
|
|
296
|
+
<span class="step-subtitle">确认数据映射并执行导入</span>
|
|
297
|
+
</div>
|
|
287
298
|
</div>
|
|
288
299
|
|
|
289
300
|
<div class="import-summary">
|
|
@@ -535,7 +546,16 @@ export default {
|
|
|
535
546
|
|
|
536
547
|
const fullUrl = `${parseUrl}?${queryParams.toString()}`
|
|
537
548
|
|
|
538
|
-
|
|
549
|
+
// 使用axios发送请求，兼容不同的Vue配置
|
|
550
|
+
const axiosInstance = this.$http?.axios || this.$http || window.axios
|
|
551
|
+
|
|
552
|
+
if (!axiosInstance) {
|
|
553
|
+
this._error('HTTP客户端未初始化')
|
|
554
|
+
this.parsing = false
|
|
555
|
+
return
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
axiosInstance.post(fullUrl, formData, config)
|
|
539
559
|
.then(response => {
|
|
540
560
|
if (response.data && response.data.code === 1) {
|
|
541
561
|
this.fileInfo = response.data.data.basicInfo
|
|
@@ -781,67 +801,70 @@ export default {
|
|
|
781
801
|
<style lang="scss" scoped>
|
|
782
802
|
.import-container {
|
|
783
803
|
.import-steps {
|
|
784
|
-
margin-bottom:
|
|
804
|
+
margin-bottom: 20px;
|
|
785
805
|
}
|
|
786
806
|
|
|
787
807
|
.step-content {
|
|
788
808
|
.step-card {
|
|
789
|
-
border: 1px solid #
|
|
790
|
-
border-radius:
|
|
809
|
+
border: 1px solid #dcdfe6;
|
|
810
|
+
border-radius: 4px;
|
|
791
811
|
|
|
792
812
|
.step-header {
|
|
793
813
|
display: flex;
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
814
|
+
justify-content: space-between;
|
|
815
|
+
align-items: center;
|
|
816
|
+
padding: 12px 16px;
|
|
817
|
+
border-bottom: 1px solid #dcdfe6;
|
|
818
|
+
background-color: #f5f7fa;
|
|
797
819
|
|
|
798
|
-
.
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
820
|
+
.header-left {
|
|
821
|
+
display: flex;
|
|
822
|
+
flex-direction: column;
|
|
823
|
+
|
|
824
|
+
.step-title {
|
|
825
|
+
font-size: 14px;
|
|
826
|
+
font-weight: 600;
|
|
827
|
+
color: #303133;
|
|
828
|
+
margin-bottom: 4px;
|
|
829
|
+
}
|
|
830
|
+
|
|
831
|
+
.step-subtitle {
|
|
832
|
+
font-size: 12px;
|
|
833
|
+
color: #909399;
|
|
834
|
+
}
|
|
803
835
|
}
|
|
804
836
|
|
|
805
|
-
.
|
|
806
|
-
|
|
807
|
-
|
|
837
|
+
.header-right {
|
|
838
|
+
display: flex;
|
|
839
|
+
align-items: center;
|
|
808
840
|
}
|
|
809
841
|
}
|
|
810
842
|
}
|
|
811
843
|
}
|
|
812
844
|
|
|
813
|
-
.upload-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
845
|
+
.upload-placeholder {
|
|
846
|
+
display: flex;
|
|
847
|
+
flex-direction: column;
|
|
848
|
+
align-items: center;
|
|
849
|
+
justify-content: center;
|
|
850
|
+
padding: 40px 16px;
|
|
851
|
+
text-align: center;
|
|
852
|
+
|
|
853
|
+
.placeholder-content {
|
|
854
|
+
.placeholder-icon {
|
|
855
|
+
font-size: 36px;
|
|
823
856
|
color: #c0c4cc;
|
|
824
|
-
margin-bottom:
|
|
857
|
+
margin-bottom: 16px;
|
|
825
858
|
}
|
|
826
859
|
|
|
827
|
-
.
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
font-size: 14px;
|
|
833
|
-
color: #606266;
|
|
834
|
-
margin-bottom: 5px;
|
|
835
|
-
}
|
|
836
|
-
|
|
837
|
-
.upload-sub-text {
|
|
838
|
-
font-size: 16px;
|
|
839
|
-
color: #409eff;
|
|
840
|
-
font-weight: 500;
|
|
841
|
-
}
|
|
860
|
+
.placeholder-text {
|
|
861
|
+
font-size: 14px;
|
|
862
|
+
color: #606266;
|
|
863
|
+
margin-bottom: 8px;
|
|
864
|
+
font-weight: 500;
|
|
842
865
|
}
|
|
843
866
|
|
|
844
|
-
.
|
|
867
|
+
.placeholder-tip {
|
|
845
868
|
font-size: 12px;
|
|
846
869
|
color: #909399;
|
|
847
870
|
}
|
|
@@ -849,38 +872,38 @@ export default {
|
|
|
849
872
|
}
|
|
850
873
|
|
|
851
874
|
.file-info-card {
|
|
852
|
-
margin-top:
|
|
853
|
-
padding:
|
|
875
|
+
margin-top: 16px;
|
|
876
|
+
padding: 16px;
|
|
854
877
|
background-color: #f8f9fa;
|
|
855
|
-
border-radius:
|
|
878
|
+
border-radius: 4px;
|
|
856
879
|
|
|
857
880
|
.file-info {
|
|
858
|
-
margin-bottom:
|
|
881
|
+
margin-bottom: 16px;
|
|
859
882
|
}
|
|
860
883
|
|
|
861
884
|
.sheet-select {
|
|
862
|
-
margin-top:
|
|
885
|
+
margin-top: 16px;
|
|
863
886
|
}
|
|
864
887
|
}
|
|
865
888
|
|
|
866
889
|
.form-actions {
|
|
867
890
|
display: flex;
|
|
868
891
|
justify-content: center;
|
|
869
|
-
margin-top:
|
|
870
|
-
padding-top:
|
|
871
|
-
border-top: 1px solid #
|
|
892
|
+
margin-top: 24px;
|
|
893
|
+
padding-top: 16px;
|
|
894
|
+
border-top: 1px solid #dcdfe6;
|
|
872
895
|
}
|
|
873
896
|
|
|
874
897
|
.mapping-container {
|
|
875
898
|
.preview-section {
|
|
876
|
-
margin-bottom:
|
|
899
|
+
margin-bottom: 24px;
|
|
877
900
|
|
|
878
901
|
.preview-alert {
|
|
879
|
-
margin-bottom:
|
|
902
|
+
margin-bottom: 12px;
|
|
880
903
|
}
|
|
881
904
|
|
|
882
905
|
.preview-table {
|
|
883
|
-
margin-bottom:
|
|
906
|
+
margin-bottom: 8px;
|
|
884
907
|
|
|
885
908
|
.column-header {
|
|
886
909
|
text-align: center;
|
|
@@ -900,7 +923,7 @@ export default {
|
|
|
900
923
|
text-align: center;
|
|
901
924
|
font-size: 12px;
|
|
902
925
|
color: #909399;
|
|
903
|
-
margin-top:
|
|
926
|
+
margin-top: 8px;
|
|
904
927
|
}
|
|
905
928
|
}
|
|
906
929
|
|
|
@@ -909,7 +932,7 @@ export default {
|
|
|
909
932
|
.excel-column {
|
|
910
933
|
.column-label {
|
|
911
934
|
font-weight: 500;
|
|
912
|
-
margin-bottom:
|
|
935
|
+
margin-bottom: 2px;
|
|
913
936
|
}
|
|
914
937
|
|
|
915
938
|
.column-name {
|
|
@@ -922,7 +945,7 @@ export default {
|
|
|
922
945
|
}
|
|
923
946
|
|
|
924
947
|
.import-summary {
|
|
925
|
-
margin:
|
|
948
|
+
margin: 16px 0;
|
|
926
949
|
}
|
|
927
950
|
}
|
|
928
951
|
</style>
|