ImportBox.vue
2.43 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
<template>
<el-dialog title="导入数据" :close-on-click-modal="false" :visible.sync="visible"
class="NCC-dialog NCC-dialog_center" lock-scroll width="600px">
<el-row>
<el-col :span="12" class="grid-content">
<p>下载导入模板，填写数据</p>
<img src="@/assets/images/xsl1.png" alt="">
<p>
<el-button type="primary" round @click="downLoad()">下载导入模板</el-button>
</p>
</el-col>
<el-col :span="12" class="grid-content">
<p>上传填写好的文件</p>
<img src="@/assets/images/xsl1.png" alt="">
<p>
<el-upload
:action="define.comUrl+'/api/VisualDevelopment/Model/'+ modelId +'/Actions/Uploader'"
:headers="{ Authorization: $store.getters.token}" :on-success="handleSuccess"
:show-file-list="false" accept=".xls,.xlsx" :before-upload="beforeUpload">
<el-button type="primary" round :loading="btnLoading">上传文件</el-button>
<!-- <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件，且不超过500kb</div> -->
</el-upload>
</p>
</el-col>
</el-row>
</el-dialog>
</template>
<script>
import { getTemplate, importModel } from '@/api/onlineDev/visualDev'
export default {
data() {
return {
visible: false,
btnLoading: false,
modelId: ''
}
},
methods: {
init(modelId) {
if (!modelId) return
this.visible = true
this.modelId = modelId
},
// 下载模板
downLoad() {
getTemplate(this.modelId).then(res => {
if (res.data.url) window.location.href = this.define.comUrl + res.data.url
})
},
beforeUpload() { this.btnLoading = true },
handleSuccess(res, file) {
this.btnLoading = false
if (res.code == 200) {
this.$message({
message: '导入成功',
type: 'success',
duration: 1000,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
} else {
this.$message({ message: '导入失败', type: 'error', duration: 1000 })
}
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
padding: 40px 30px !important;
}
.grid-content {
&:first-child {
border-right: 1px solid #dcdfe6;
}
text-align: center;
p {
text-align: center;
}
img {
width: 128px;
margin: 10px 0;
}
}
</style>