122 lines
2.7 KiB
Vue
122 lines
2.7 KiB
Vue
<template>
|
|
<a-modal
|
|
:title="$t('import')"
|
|
:maskClosable="false"
|
|
:width="600"
|
|
:closable="true"
|
|
:confirm-loading="confirmLoading"
|
|
@ok="handleOk"
|
|
@cancel="handleCancel"
|
|
:visible="visible">
|
|
<a-form layout="inline">
|
|
<a-form-item :label="$t('importWithTemplate.chooseFile')">
|
|
<div class="form-content">
|
|
<a-input v-model="fileName" />
|
|
<j-upload type="primary" :number="1" @change="handleFileChange" :show-upload-list="false" :return-url="false" v-bind="$attrs">
|
|
<template v-slot:customButton>
|
|
<a-button type="primary">{{ $t('importWithTemplate.chooseFile') }}</a-button>
|
|
</template>
|
|
</j-upload>
|
|
</div>
|
|
<a-button type="link" class="down-template-btn" @click="downTemplate">{{ $t('importWithTemplate.downTemplate') }}</a-button>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script>
|
|
import '@assets/less/common.less'
|
|
import { urlToParams } from '../utils/util'
|
|
import { downloadFile } from '../api/manage'
|
|
|
|
export default {
|
|
name: 'ImportWithTemplate',
|
|
props: {
|
|
// 下载模板的地址
|
|
downTemplateUrl: {
|
|
type: String,
|
|
required: false,
|
|
default: null
|
|
},
|
|
// 导入模板文件名
|
|
templateName: {
|
|
type: String,
|
|
required: false,
|
|
default: null
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
visible: false,
|
|
confirmLoading: false,
|
|
fileId: null,
|
|
fileName: null
|
|
}
|
|
},
|
|
methods: {
|
|
open () {
|
|
this.visible = true
|
|
},
|
|
handleOk () {
|
|
if (this.fileId) {
|
|
this.$emit('ok', this.fileId)
|
|
this.close()
|
|
} else {
|
|
this.$message.warn(this.$t('importWithTemplate.noFileMsg'))
|
|
}
|
|
},
|
|
handleCancel () {
|
|
this.close()
|
|
},
|
|
close () {
|
|
this.visible = false
|
|
this.fileId = null
|
|
this.fileName = null
|
|
},
|
|
handleFileChange (fileList) {
|
|
this.fileName = fileList[0].fileName
|
|
const file = urlToParams(fileList[0].filePath)
|
|
this.fileId = file.id
|
|
},
|
|
// 下载导入模板
|
|
downTemplate () {
|
|
if (!this.downTemplateUrl) {
|
|
this.$message.warn('请设置downTemplateUrl属性')
|
|
return
|
|
}
|
|
const fileName = this.templateName || '导入模板'
|
|
downloadFile(this.downTemplateUrl, fileName + '.xlsx')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.form-content {
|
|
display: flex;
|
|
margin-top: 5px;
|
|
|
|
.ant-input {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ant-btn {
|
|
margin-left: 16px;
|
|
}
|
|
}
|
|
|
|
.ant-form-inline .ant-form-item {
|
|
width: 100%;
|
|
display: flex;
|
|
|
|
/deep/ .ant-form-item-control-wrapper {
|
|
flex: 1;
|
|
width: 0;
|
|
}
|
|
}
|
|
|
|
/deep/ .ant-form-item-control {
|
|
line-height: 32px;
|
|
}
|
|
</style>
|