Skip to content

Commit 2f487eb

Browse files
cq-pandacq-panda
committed
优化导入excel文件提示
1 parent d40f3ef commit 2f487eb

File tree

6 files changed

+132
-50
lines changed

6 files changed

+132
-50
lines changed

‎Vol.Vue/src/components/basic/UploadExcel.vue‎

Lines changed: 59 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,17 @@
1717
<div class="alert">
1818
<Alert show-icon>只能上传excel文件,文件大小不超过5M</Alert>
1919
</div>
20-
<Divider>文件列表</Divider>
21-
<div class="file-info" v-if="file!= null">
22-
<span>文件名：{{file.name}}</span>
23-
<span>大小{{(file.size / 1024).toFixed(2)}}KB</span>
20+
<!-- <Divider>文件列表</Divider> -->
21+
<div v-if="file">
22+
<h3>文件列表</h3>
23+
<div class="file-info">
24+
<span>文件名：{{file.name}}</span>
25+
<span>大小{{(file.size / 1024).toFixed(2)}}KB</span>
26+
</div>
27+
</div>
28+
<div v-show="message" class="v-r-message">
29+
<h3 class="title">上传结果</h3>
30+
<div class="text" :class="resultClass" v-html="message"></div>
2431
</div>
2532
<slot></slot>
2633
</div>
@@ -33,36 +40,39 @@ export default {
3340
props: {
3441
url: {
3542
type: String,
36-
default: ""
43+
default: "",
3744
},
3845
template: {
3946
//下载模板配置
4047
type: Object,
4148
default: () => {
4249
return {
4350
url: "", //模板下载路径，如果没有模板路径，则不显示下载模板功能
44-
fileName: "未定义文件名" //下载模板的文件名
51+
fileName: "未定义文件名", //下载模板的文件名
4552
};
46-
}
47-
}
53+
},
54+
},
4855
},
4956
data() {
5057
return {
5158
maxSize: 102 * 5,
5259
model: true,
5360
file: null,
54-
loadingStatus: false
61+
loadingStatus: false,
62+
message: "",
63+
resultClass: "",
5564
};
5665
},
5766
methods: {
67+
reset() {
68+
this.file = null;
69+
this.message = "";
70+
this.resultClass = "";
71+
},
5872
getFileType() {
59-
let fileName =
60-
this.file.name
61-
.split(".")
62-
.pop()
63-
.toLocaleLowerCase() || "";
73+
let fileName = this.file.name.split(".").pop().toLocaleLowerCase() || "";
6474
if (["numbers", "csv", "xls", "xlsx"].indexOf(fileName) == -1) {
65-
this.$message.error("只能选择excel文件");
75+
this.$Message.error("只能选择excel文件");
6676
return false;
6777
}
6878
return true;
@@ -76,24 +86,34 @@ export default {
7686
},
7787
upload() {
7888
if (!this.url) {
79-
return this.$message.error("没有配置好Url");
89+
return this.$Message.error("没有配置好Url");
8090
}
8191
if (!this.file) {
82-
return this.$message.error("请选择文件");
92+
return this.$Message.error("请选择文件");
8393
}
8494
var forms = new FormData();
8595
forms.append("fileInput", this.file);
8696
this.loadingStatus = true;
8797
this.http.post(this.url, forms).then(
88-
x => {
98+
(x) => {
8999
// this.$refs.uploadFile.clearFiles();
90100
this.loadingStatus = false;
91101
this.file = null;
92-
this.$emit('importExcelAfter',x);
93-
this.$Message[x.status?'success':'error'](x.message);
102+
this.$emit("importExcelAfter", x);
103+
this.message = x.message;
104+
2;
105+
this.resultClass = x.status ? "v-r-success" : "v-r-error";
106+
// if (!x.status) {
107+
// this.$Message.error({
108+
// content: x.message,
109+
// duration: 20,
110+
// });
111+
// return;
112+
// }
113+
// this.$Message["success"](x.message);
94114
//刷新表格数据
95115
},
96-
error => {
116+
(error) => {
97117
this.loadingStatus = false;
98118
}
99119
);
@@ -112,7 +132,7 @@ export default {
112132
xmlResquest.responseType = "blob";
113133
let $_vue = this;
114134
this.loadingStatus = true;
115-
xmlResquest.onload = function(oEvent) {
135+
xmlResquest.onload = function (oEvent) {
116136
$_vue.loadingStatus = false;
117137
if (xmlResquest.response.type == "application/json") {
118138
return $_vue.message.error("未找到下载文件");
@@ -124,8 +144,8 @@ export default {
124144
elink.click();
125145
};
126146
xmlResquest.send();
127-
}
128-
}
147+
},
148+
},
129149
};
130150
</script>
131151
<style lang="less" scoped>
@@ -146,5 +166,20 @@ export default {
146166
.file-info > span {
147167
margin-right: 20px;
148168
}
169+
.v-r-message {
170+
margin-top: 10px;
171+
.title {
172+
margin-bottom: 2px;
173+
}
174+
> .text {
175+
font-size: 13px;
176+
}
177+
.v-r-success {
178+
color: #02b702;
179+
}
180+
.v-r-error {
181+
color: #dc0909;
182+
}
183+
}
149184
}
150185
</style>

‎Vol.Vue/src/components/basic/ViewGrid.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,12 @@
2424
:width="600"
2525
:title="table.cnName+'--导入'"
2626
>
27-
<UploadExcel @importExcelAfter="importAfter" :url="upload.url" :template="upload.template"></UploadExcel>
27+
<UploadExcel
28+
ref="upload_excel"
29+
@importExcelAfter="importAfter"
30+
:url="upload.url"
31+
:template="upload.template"
32+
></UploadExcel>
2833
</vol-box>
2934

3035
<!--头部自定义组件-->

‎Vol.Vue/src/components/basic/ViewGridConfig/methods.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -713,6 +713,7 @@ let methods = {
713713
import() {
714714
//导入(上传excel),弹出导入组件UploadExcel.vue
715715
this.upload.excel = true;
716+
this.$refs.upload_excel&& this.$refs.upload_excel.reset();
716717
},
717718
download(url, fileName) {
718719
//下载导出的文件

‎开发版dev/Vue.NetCore/Vol.Vue/src/components/basic/UploadExcel.vue‎

Lines changed: 59 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,17 @@
1717
<div class="alert">
1818
<Alert show-icon>只能上传excel文件,文件大小不超过5M</Alert>
1919
</div>
20-
<Divider>文件列表</Divider>
21-
<div class="file-info" v-if="file!= null">
22-
<span>文件名：{{file.name}}</span>
23-
<span>大小{{(file.size / 1024).toFixed(2)}}KB</span>
20+
<!-- <Divider>文件列表</Divider> -->
21+
<div v-if="file">
22+
<h3>文件列表</h3>
23+
<div class="file-info">
24+
<span>文件名：{{file.name}}</span>
25+
<span>大小{{(file.size / 1024).toFixed(2)}}KB</span>
26+
</div>
27+
</div>
28+
<div v-show="message" class="v-r-message">
29+
<h3 class="title">上传结果</h3>
30+
<div class="text" :class="resultClass" v-html="message"></div>
2431
</div>
2532
<slot></slot>
2633
</div>
@@ -33,36 +40,39 @@ export default {
3340
props: {
3441
url: {
3542
type: String,
36-
default: ""
43+
default: "",
3744
},
3845
template: {
3946
//下载模板配置
4047
type: Object,
4148
default: () => {
4249
return {
4350
url: "", //模板下载路径，如果没有模板路径，则不显示下载模板功能
44-
fileName: "未定义文件名" //下载模板的文件名
51+
fileName: "未定义文件名", //下载模板的文件名
4552
};
46-
}
47-
}
53+
},
54+
},
4855
},
4956
data() {
5057
return {
5158
maxSize: 102 * 5,
5259
model: true,
5360
file: null,
54-
loadingStatus: false
61+
loadingStatus: false,
62+
message: "",
63+
resultClass: "",
5564
};
5665
},
5766
methods: {
67+
reset() {
68+
this.file = null;
69+
this.message = "";
70+
this.resultClass = "";
71+
},
5872
getFileType() {
59-
let fileName =
60-
this.file.name
61-
.split(".")
62-
.pop()
63-
.toLocaleLowerCase() || "";
73+
let fileName = this.file.name.split(".").pop().toLocaleLowerCase() || "";
6474
if (["numbers", "csv", "xls", "xlsx"].indexOf(fileName) == -1) {
65-
this.$message.error("只能选择excel文件");
75+
this.$Message.error("只能选择excel文件");
6676
return false;
6777
}
6878
return true;
@@ -76,24 +86,34 @@ export default {
7686
},
7787
upload() {
7888
if (!this.url) {
79-
return this.$message.error("没有配置好Url");
89+
return this.$Message.error("没有配置好Url");
8090
}
8191
if (!this.file) {
82-
return this.$message.error("请选择文件");
92+
return this.$Message.error("请选择文件");
8393
}
8494
var forms = new FormData();
8595
forms.append("fileInput", this.file);
8696
this.loadingStatus = true;
8797
this.http.post(this.url, forms).then(
88-
x => {
98+
(x) => {
8999
// this.$refs.uploadFile.clearFiles();
90100
this.loadingStatus = false;
91101
this.file = null;
92-
this.$emit('importExcelAfter',x);
93-
this.$Message[x.status?'success':'error'](x.message);
102+
this.$emit("importExcelAfter", x);
103+
this.message = x.message;
104+
2;
105+
this.resultClass = x.status ? "v-r-success" : "v-r-error";
106+
// if (!x.status) {
107+
// this.$Message.error({
108+
// content: x.message,
109+
// duration: 20,
110+
// });
111+
// return;
112+
// }
113+
// this.$Message["success"](x.message);
94114
//刷新表格数据
95115
},
96-
error => {
116+
(error) => {
97117
this.loadingStatus = false;
98118
}
99119
);
@@ -112,7 +132,7 @@ export default {
112132
xmlResquest.responseType = "blob";
113133
let $_vue = this;
114134
this.loadingStatus = true;
115-
xmlResquest.onload = function(oEvent) {
135+
xmlResquest.onload = function (oEvent) {
116136
$_vue.loadingStatus = false;
117137
if (xmlResquest.response.type == "application/json") {
118138
return $_vue.message.error("未找到下载文件");
@@ -124,8 +144,8 @@ export default {
124144
elink.click();
125145
};
126146
xmlResquest.send();
127-
}
128-
}
147+
},
148+
},
129149
};
130150
</script>
131151
<style lang="less" scoped>
@@ -146,5 +166,20 @@ export default {
146166
.file-info > span {
147167
margin-right: 20px;
148168
}
169+
.v-r-message {
170+
margin-top: 10px;
171+
.title {
172+
margin-bottom: 2px;
173+
}
174+
> .text {
175+
font-size: 13px;
176+
}
177+
.v-r-success {
178+
color: #02b702;
179+
}
180+
.v-r-error {
181+
color: #dc0909;
182+
}
183+
}
149184
}
150185
</style>

‎开发版dev/Vue.NetCore/Vol.Vue/src/components/basic/ViewGrid.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,12 @@
2424
:width="600"
2525
:title="table.cnName+'--导入'"
2626
>
27-
<UploadExcel @importExcelAfter="importAfter" :url="upload.url" :template="upload.template"></UploadExcel>
27+
<UploadExcel
28+
ref="upload_excel"
29+
@importExcelAfter="importAfter"
30+
:url="upload.url"
31+
:template="upload.template"
32+
></UploadExcel>
2833
</vol-box>
2934

3035
<!--头部自定义组件-->

‎开发版dev/Vue.NetCore/Vol.Vue/src/components/basic/ViewGridConfig/methods.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -713,6 +713,7 @@ let methods = {
713713
import() {
714714
//导入(上传excel),弹出导入组件UploadExcel.vue
715715
this.upload.excel = true;
716+
this.$refs.upload_excel&& this.$refs.upload_excel.reset();
716717
},
717718
download(url, fileName) {
718719
//下载导出的文件

0 commit comments

Comments
 (0)