92 lines
2.7 KiB
Vue
92 lines
2.7 KiB
Vue
<template>
|
||
<span>
|
||
<el-button class="m-l-sm m-r-sm" @click.stop="openDialog" icon="el-icon-upload2" :disabled="disabled">导入 </el-button>
|
||
<el-dialog title="导入Excel新增数据" :close-on-click-modal="false" :visible.sync="dialogVisible" width="480px" append-to-body>
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-alert title="" type="warning" :closable="false">
|
||
<template slot="">
|
||
<div class="text-center">
|
||
<p>您是否有标准的Excel模版，需要依照模版导入，否则会失败。</p>
|
||
<a class="text-info cur-point" @click="exportData()">还没有Excel模版?请下载模版</a>
|
||
</div>
|
||
</template>
|
||
</el-alert>
|
||
</el-col>
|
||
<el-col :span="24" class="text-center m-t">
|
||
<el-upload ref="uploadRef" class="upload-demo" drag accept=".xlsx" :on-success="handleSuccess" :action="url" :headers="headers" :data="params">
|
||
<i class="el-icon-upload"></i>
|
||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||
<div class="el-upload__tip" slot="tip">只能上传excel文件</div>
|
||
</el-upload>
|
||
</el-col>
|
||
</el-row>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogVisible = false">关闭</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</span>
|
||
</template>
|
||
<script lang="ts">
|
||
import { downloadFile } from 'utils/index'
|
||
import { getToken } from 'utils/auth'
|
||
import { reactive, toRefs, ref, defineComponent } from 'vue'
|
||
import { Message } from 'element-ui'
|
||
|
||
export default defineComponent({
|
||
props: {
|
||
url: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
templateUrl: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
params: {
|
||
type: Object,
|
||
default: function () {
|
||
return {}
|
||
}
|
||
},
|
||
disabled: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
setup(props: any, context: any) {
|
||
const state = reactive({
|
||
dialogVisible: false,
|
||
headers: { token: getToken() }
|
||
})
|
||
const uploadRef = ref(null)
|
||
function openDialog() {
|
||
uploadRef.value && (uploadRef.value as any).clearFiles()
|
||
state.dialogVisible = true
|
||
state.headers.token = getToken()
|
||
}
|
||
// 导出数据
|
||
function exportData() {
|
||
downloadFile(props.templateUrl, props.params)
|
||
}
|
||
// 数据导入成功回调
|
||
function handleSuccess(res: Base.IResponseData) {
|
||
if (res.success) {
|
||
Message.success(res.message)
|
||
state.dialogVisible = false
|
||
context.emit('getData')
|
||
} else {
|
||
Message.error(res.message)
|
||
}
|
||
}
|
||
return {
|
||
...toRefs(state),
|
||
uploadRef,
|
||
openDialog,
|
||
exportData,
|
||
handleSuccess
|
||
}
|
||
}
|
||
})
|
||
</script>
|