index.vue
4.22 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<template>
<div style="margin: 20px">
<el-form :inline="true" class="demo-form-inline" size="small">
<el-form-item>
<el-upload action="/caPreReviewImport/importFlight" name="file" :http-request="uploadExcel"
:on-remove="handleRemove" :limit="1" :on-exceed="handleExceed" :file-list="fileList" accept=".xlsx"
class="upload-demo" v-hasPermi="['base:caImport:import']">
<el-button icon="el-icon-upload2" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-download" @click="downloadTempleate"
v-hasPermi="['base:caImport:download']">下载模板</el-button>
</el-form-item>
</el-form>
<div style="font-size: 12px; font-weight: 700">
提示：<span style="color: #1890ff">以下为所提交的数据或出错信息</span>
</div>
<el-table ref="filterTable" class="mt20" :data="tableData" v-loading="loading" style="width: 100%" size="small"
border>
<el-table-column label="行号" prop="line" width="50" align="center">
</el-table-column>
<el-table-column label="错误信息" prop="errorMessage" width="300">
<template slot-scope="scope">
<div v-for="(m, key) in scope.row.errorMessage" :key="key">
{{ m }}
</div>
</template>
</el-table-column>
<el-table-column v-if="tableData.length == 0"></el-table-column>
<el-table-column v-if="tableData.length > 0" label="运单号" align="center" prop="A" />
<el-table-column v-if="tableData.length > 0" label="品名描述" align="center" prop="B" />
<el-table-column v-if="tableData.length > 0" label="航班日期" align="center" prop="C" />
<el-table-column v-if="tableData.length > 0" label="航班号" align="center" prop="D" />
<el-table-column v-if="tableData.length > 0" label="预审意见" align="center" prop="E" />
<!-- <el-table-column v-for="(value, key) in this.tableData[0]" :key="key"
v-if="key != 'errorMessage' && key != 'line'" :label="key" :prop="key" width="120"></el-table-column>-->
</el-table>
</div>
</template>
<script>
import {
downLoadTemplate,
importcaPreReview,
} from "@/api/caPreReviewImport";
export default {
name: "CAPreReviewImport",
data() {
return {
// 遮罩层
loading: false,
fileList: [],
tableData: [],
};
},
methods: {
downloadTempleate() {
let fileName = "航班预审回执导入模板.xlsx";
downLoadTemplate().then((res) => {
if (res) {
const blob = new Blob([res]);
const link = document.createElement("a"); //创建a标签
link.download = fileName; //a标签添加属性
link.style.display = "none";
link.href = URL.createObjectURL(blob);
document.body.appendChild(link);
link.click(); //执行下载
URL.revokeObjectURL(link.href); //释放url
document.body.removeChild(link); //释放标签
} else {
this.$message.error("下载失败");
}
});
},
uploadExcel(option) {
//上传excel
const file = option.file;
this.loading = true;
importcaPreReview(file, '').then((res) => {
this.loading = false;
if (res.code != 200) {
if (res.code == 603) {
this.$alert(res.msg, "提示", {
confirmButtonText: "确定",
type: "warning",
});
} else {
this.$message.warning(res.msg);
this.tableData = res.data;
}
} else {
this.$message.success(res.msg);
this.tableData = res.data;
}
});
},
handleRemove(file, fileList) {
//清掉上传的文件
this.tableData = [];
this.fileList = [];
},
handleExceed(files) {
//重复上传文件
let file = {};
file.file = files[0];
file.name = files[0].name;
this.fileList = [];
this.fileList.push(file);
this.uploadExcel(file);
},
},
};
</script>
<style rel="stylesheet/scss" lang="scss">
.upload-demo {
float: right;
}
.el-upload-list {
display: inline-block;
margin-left: 10px;
vertical-align: top;
}
</style>