| | |
|---|
| | | |
|---|
| | | <template> |
|---|
| | | <div> |
|---|
| | | <el-dialog |
|---|
| | |
|---|
| | | close-on-click-modal |
|---|
| | | @close="closeDialog" |
|---|
| | | > |
|---|
| | | <template slot="header"> |
|---|
| | | <template slot="title"> |
|---|
| | | <span style="padding-bottom: 18px"> |
|---|
| | | {{ isImportOrExport ? '请按照需求导出目标内容' : '请按照模板样式上传项目文件' }} |
|---|
| | | </span> |
|---|
| | |
|---|
| | | <el-upload |
|---|
| | | ref="uploadRef" |
|---|
| | | class="upload-demo" |
|---|
| | | :action="upload.url" |
|---|
| | | :action="uploadUrl" |
|---|
| | | :limit="1" |
|---|
| | | :accept="accept" |
|---|
| | | :headers="upload.headers" |
|---|
| | | :disabled="upload.isUploading" |
|---|
| | | :headers=" uploadHeaders" |
|---|
| | | :disabled="uploadIsUploading" |
|---|
| | | :on-progress="handleFileUploadProgress" |
|---|
| | | :on-success="handleFileSuccess" |
|---|
| | | :auto-upload="false" |
|---|
| | | drag |
|---|
| | | > |
|---|
| | | <el-icon class="el-icon--upload"><upload-filled /></el-icon> |
|---|
| | | <i class="el-icon-upload"></i> |
|---|
| | | <div class="el-upload__text">请上传<em>Zip</em>文件，大小在<em>100M</em>以内</div> |
|---|
| | | </el-upload> |
|---|
| | | <span>仅允许导入zip格式文件。</span> |
|---|
| | |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | // import UploadFilled from '@element/icons-vue/es/icons/UploadFilled.vue'; |
|---|
| | | import { globalHeaders } from '@/utils/request'; |
|---|
| | | import { FileTypeEnum } from '@/enums/fileType'; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: 'FileDialog', |
|---|
| | | // components: { |
|---|
| | | // UploadFilled |
|---|
| | | // }, |
|---|
| | | props: { |
|---|
| | | isImportOrExport: { |
|---|
| | | type: Boolean, |
|---|
| | |
|---|
| | | return { |
|---|
| | | uploadRef: null, |
|---|
| | | targetColumn: [], |
|---|
| | | accept: `${FileTypeEnum.ZIP}`, |
|---|
| | | upload: { |
|---|
| | | open: false, |
|---|
| | | title: '', |
|---|
| | | isUploading: false, |
|---|
| | | updateSupport: 0, |
|---|
| | | headers: globalHeaders(), |
|---|
| | | url: process.env.VITE_APP_BASE_API + '/project/import' |
|---|
| | | } |
|---|
| | | accept: `.zip`, |
|---|
| | | uploadUrl: '/project/import', |
|---|
| | | uploadHeaders: globalHeaders(), |
|---|
| | | uploadIsUploading: false |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // In Vue 2, computed properties don't use setters and getters as objects. |
|---|
| | | // Instead, you define them as functions for reading and use methods for writing. |
|---|
| | | // However, in this case, we can use a watcher to update the prop. |
|---|
| | | fileDialogVisible: { |
|---|
| | | get() { |
|---|
| | | return this.isFileDialogVisible; |
|---|
| | | }, |
|---|
| | | set(value) { |
|---|
| | | this.$emit('update:fileDialogVisible', value); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // Note: In Vue 2, you cannot directly define a computed property with a setter for a prop. |
|---|
| | | // Instead, you should use a watcher or a method to handle changes. |
|---|
| | | // Since `fileDialogVisible` is a prop, we'll use a watcher to sync it with the internal state. |
|---|
| | | // However, for simplicity, we'll rename `fileDialogVisible` to `isFileDialogVisible` in data and use a watcher. |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | fileDialogVisible(newVal) { |
|---|
| | | this.isFileDialogVisible = newVal; |
|---|
| | | }, |
|---|
| | | isFileDialogVisible(newVal) { |
|---|
| | | this.$emit('update:fileDialogVisible', newVal); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | handleFileUploadProgress() { |
|---|
| | | this.upload.isUploading = true; |
|---|
| | | this.uploadIsUploading = true; |
|---|
| | | }, |
|---|
| | | handleFileSuccess(response, file) { |
|---|
| | | this.upload.open = false; |
|---|
| | | this.upload.isUploading = false; |
|---|
| | | this.uploadIsUploading = false; |
|---|
| | | if (this.uploadRef) { |
|---|
| | | this.uploadRef.handleRemove(file); |
|---|
| | | } |
|---|
| | |
|---|
| | | }, |
|---|
| | | handleDownloadFile() { |
|---|
| | | const self = this; |
|---|
| | | fetch(`${process.env.VITE_APP_BASE_API}/project/export/template`, { |
|---|
| | | method: 'GET', |
|---|
| | | headers: self.upload.headers |
|---|
| | | }) |
|---|
| | | .then(response => response.blob()) |
|---|
| | | .then(blob => { |
|---|
| | | const url = window.URL.createObjectURL(blob); |
|---|
| | | const a = document.createElement('a'); |
|---|
| | | a.style.display = 'none'; |
|---|
| | | a.href = url; |
|---|
| | | a.download = `项目文件模板_${new Date().getTime()}.zip`; |
|---|
| | | document.body.appendChild(a); |
|---|
| | | a.click(); |
|---|
| | | window.URL.revokeObjectURL(url); |
|---|
| | | }) |
|---|
| | | .catch(error => { |
|---|
| | | console.error('文件下载失败:', error); |
|---|
| | | }); |
|---|
| | | // fetch(`${process.env.VITE_APP_BASE_API}/project/export/template`, { |
|---|
| | | // method: 'GET', |
|---|
| | | // headers: self.upload.headers |
|---|
| | | // }) |
|---|
| | | // .then(response => response.blob()) |
|---|
| | | // .then(blob => { |
|---|
| | | // const url = window.URL.createObjectURL(blob); |
|---|
| | | // const a = document.createElement('a'); |
|---|
| | | // a.style.display = 'none'; |
|---|
| | | // a.href = url; |
|---|
| | | // a.download = `项目文件模板_${new Date().getTime()}.zip`; |
|---|
| | | // document.body.appendChild(a); |
|---|
| | | // a.click(); |
|---|
| | | // window.URL.revokeObjectURL(url); |
|---|
| | | // }) |
|---|
| | | // .catch(error => { |
|---|
| | | // console.error('文件下载失败:', error); |
|---|
| | | // }); |
|---|
| | | }, |
|---|
| | | submitFileForm() { |
|---|
| | | if (this.uploadRef) { |
|---|
| | |
|---|
| | | this.targetColumn = this.currentColumns.filter(item => item.visible); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.uploadRef = this.$refs.uploadRef; |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | // Initialize the computed property as a data property in Vue 2 |
|---|
| | | |
|---|
| | | this.isFileDialogVisible = this.fileDialogVisible; |
|---|
| | | } |
|---|
| | | }; |
|---|
| | |
|---|
| | | align-items: center; |
|---|
| | | flex-direction: column; |
|---|
| | | height: 300px; |
|---|
| | | |
|---|
| | | .export-button { |
|---|
| | | margin-left: 0; |
|---|
| | | margin-bottom: 10px; |
|---|
| | |
|---|
| | | .upload-demo { |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | ::v-deep .el-upload{ |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | ::v-deep .el-upload .el-upload-dragger{ |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
